1 | define(["dojo/_base/lang", "../util/oo", "../manager/_registry", "../stencil/Path"], |
---|
2 | function(lang, oo, registry, StencilPath){ |
---|
3 | |
---|
4 | //dojox.drawing.tools.Path |
---|
5 | var Path = oo.declare( |
---|
6 | StencilPath, |
---|
7 | function(){ |
---|
8 | // summary: |
---|
9 | // constructor |
---|
10 | |
---|
11 | this.pathMode = ""; |
---|
12 | this.currentPathMode = ""; |
---|
13 | this._started = false; |
---|
14 | this.oddEvenClicks = 0; |
---|
15 | |
---|
16 | }, |
---|
17 | { |
---|
18 | // summary: |
---|
19 | // Class for a drawable Path |
---|
20 | |
---|
21 | draws:true, |
---|
22 | onDown: function(obj){ |
---|
23 | if(!this._started){ |
---|
24 | this.onStartPath(obj); |
---|
25 | } |
---|
26 | |
---|
27 | }, |
---|
28 | |
---|
29 | makeSubPath: function(_closePath){ |
---|
30 | if(_closePath){ |
---|
31 | if(this.currentPathMode=="Q"){ |
---|
32 | this.points.push({ |
---|
33 | x:this.points[0].x, |
---|
34 | y:this.points[0].y |
---|
35 | }); |
---|
36 | } |
---|
37 | this.points.push({t:"Z"}); |
---|
38 | this.render(); |
---|
39 | } |
---|
40 | this.currentPathMode = ""; |
---|
41 | this.pathMode = "M"; |
---|
42 | }, |
---|
43 | |
---|
44 | onStartPath: function(obj){ |
---|
45 | this._started = true; |
---|
46 | this.revertRenderHit = this.renderHit; |
---|
47 | this.renderHit = false; |
---|
48 | this.closePath = false; |
---|
49 | |
---|
50 | |
---|
51 | this.mouse.setEventMode("PathEdit"); |
---|
52 | |
---|
53 | this.closePoint = {x:obj.x, y:obj.y}; |
---|
54 | |
---|
55 | this._kc1 = this.connect(this.keys, "onEsc", this, function(){ |
---|
56 | this.onCompletePath(false); |
---|
57 | }); |
---|
58 | |
---|
59 | this._kc2 = this.connect(this.keys, "onKeyUp", this, function(evt){ |
---|
60 | |
---|
61 | switch(evt.letter){ |
---|
62 | case "c": |
---|
63 | this.onCompletePath(true); break; |
---|
64 | case "l": this.pathMode = "L"; break; |
---|
65 | case "m": this.makeSubPath(false); break; |
---|
66 | case "q": this.pathMode = "Q"; break; |
---|
67 | case "s": this.pathMode = "S"; break; |
---|
68 | case "z": this.makeSubPath(true); break; |
---|
69 | } |
---|
70 | |
---|
71 | //console.log("KEY:", evt.letter); |
---|
72 | }); |
---|
73 | }, |
---|
74 | |
---|
75 | onCompletePath:function(_closePath){ |
---|
76 | this.remove(this.closeGuide, this.guide); |
---|
77 | var box = this.getBounds(); |
---|
78 | if(box.w<this.minimumSize && box.h<this.minimumSize){ |
---|
79 | this.remove(this.hit, this.shape, this.closeGuide); |
---|
80 | this._started = false; |
---|
81 | this.mouse.setEventMode(""); |
---|
82 | this.setPoints([]); |
---|
83 | return; |
---|
84 | } |
---|
85 | |
---|
86 | |
---|
87 | if(_closePath){ |
---|
88 | if(this.currentPathMode=="Q"){ |
---|
89 | this.points.push({ |
---|
90 | x:this.points[0].x, |
---|
91 | y:this.points[0].y |
---|
92 | }); |
---|
93 | } |
---|
94 | this.closePath = true; |
---|
95 | } |
---|
96 | |
---|
97 | |
---|
98 | this.renderHit = this.revertRenderHit; |
---|
99 | this.renderedOnce = true; |
---|
100 | this.onRender(this); |
---|
101 | this.disconnect([this._kc1, this._kc2]); |
---|
102 | this.mouse.setEventMode(""); |
---|
103 | this.render(); |
---|
104 | //console.log(this.stringPath); |
---|
105 | }, |
---|
106 | |
---|
107 | onUp: function(/*EventObject*/obj){ |
---|
108 | //console.log(" Path UP", obj.mid, "within:", obj.withinCanvas) |
---|
109 | |
---|
110 | |
---|
111 | if(!this._started || !obj.withinCanvas){ return; } |
---|
112 | |
---|
113 | |
---|
114 | if(this.points.length>2 && this.closeRadius>this.util.distance(obj.x, obj.y, this.closePoint.x, this.closePoint.y)){ |
---|
115 | this.onCompletePath(true); |
---|
116 | |
---|
117 | }else { |
---|
118 | var p = { |
---|
119 | x:obj.x, |
---|
120 | y:obj.y |
---|
121 | }; |
---|
122 | this.oddEvenClicks++; |
---|
123 | if(this.currentPathMode != this.pathMode){ |
---|
124 | if(this.pathMode=="Q"){ |
---|
125 | p.t = "Q"; |
---|
126 | this.oddEvenClicks = 0; |
---|
127 | }else if(this.pathMode=="L"){ |
---|
128 | p.t = "L"; |
---|
129 | }else if(this.pathMode=="M"){ |
---|
130 | p.t = "M"; |
---|
131 | this.closePoint = {x:obj.x, y:obj.y}; |
---|
132 | } |
---|
133 | this.currentPathMode = this.pathMode; |
---|
134 | } |
---|
135 | |
---|
136 | |
---|
137 | this.points.push(p); |
---|
138 | if(this.points.length>1){ |
---|
139 | this.remove(this.guide); |
---|
140 | this.render(); |
---|
141 | } |
---|
142 | |
---|
143 | } |
---|
144 | |
---|
145 | //console.log(this.stringPath); |
---|
146 | }, |
---|
147 | createGuide: function(obj){ |
---|
148 | if(!this.points.length){ return; } |
---|
149 | var realPoints = [].concat(this.points); |
---|
150 | |
---|
151 | var pt = { |
---|
152 | x:obj.x, |
---|
153 | y:obj.y |
---|
154 | }; |
---|
155 | if(this.currentPathMode=="Q" && this.oddEvenClicks % 2){ |
---|
156 | // On a Q curve, every other click needs to be a |
---|
157 | // straight line - the inbetween Q coords don't render |
---|
158 | pt.t = "L"; // this is not permanent |
---|
159 | } |
---|
160 | |
---|
161 | this.points.push(pt); |
---|
162 | |
---|
163 | this.render(); |
---|
164 | this.points = realPoints; |
---|
165 | |
---|
166 | |
---|
167 | var dist = this.util.distance(obj.x, obj.y, this.closePoint.x, this.closePoint.y); |
---|
168 | if(this.points.length>1){ |
---|
169 | if(dist<this.closeRadius && !this.closeGuide){ |
---|
170 | var c = { |
---|
171 | cx:this.closePoint.x, |
---|
172 | cy:this.closePoint.y, |
---|
173 | rx:this.closeRadius, |
---|
174 | ry:this.closeRadius |
---|
175 | } |
---|
176 | this.closeGuide = this.container.createEllipse(c) |
---|
177 | .setFill(this.closeColor); |
---|
178 | |
---|
179 | }else if(dist>this.closeRadius && this.closeGuide){ |
---|
180 | this.remove(this.closeGuide); |
---|
181 | this.closeGuide = null; |
---|
182 | } |
---|
183 | } |
---|
184 | |
---|
185 | }, |
---|
186 | |
---|
187 | onMove: function(obj){ |
---|
188 | if(!this._started){ return; } |
---|
189 | this.createGuide(obj); |
---|
190 | }, |
---|
191 | onDrag: function(obj){ |
---|
192 | if(!this._started){ return; } |
---|
193 | this.createGuide(obj); |
---|
194 | } |
---|
195 | } |
---|
196 | ); |
---|
197 | |
---|
198 | lang.setObject("dojox.drawing.tools.Path", Path); |
---|
199 | Path.setup = { |
---|
200 | name:"dojox.drawing.tools.Path", |
---|
201 | tooltip:"Path Tool", |
---|
202 | iconClass:"iconLine" |
---|
203 | }; |
---|
204 | |
---|
205 | registry.register(Path.setup, "tool"); |
---|
206 | |
---|
207 | return Path; |
---|
208 | }); |
---|