1 (function ($) { |
|
2 |
|
3 $.fn._vs.chart.CircleLayout = function(_this,fn,options) { |
|
4 |
|
5 var mouseJointTest; |
|
6 var csX; |
|
7 var csY; |
|
8 var treeLayout; |
|
9 var initValue = []; // Initiation des valeurs |
|
10 var tdv = 0; // Incoming point |
|
11 var _this; |
|
12 |
|
13 this.init = function (_this,options){ |
|
14 console.log('Circle Layout Init') |
|
15 this._this = _this |
|
16 gravity = new _this.phy.b2Vec2(0, 0); // Zero gravity |
|
17 _this.world.m_gravity = gravity; |
|
18 _this.chartPhySetup = {grounds:[],wall:[]} |
|
19 this.treeLayout = _this.settings.chart.treeLayout; |
|
20 |
|
21 for (var i=0; i<_this.settings.data.model.length; i++) { |
|
22 _this.settings.data.strata[i][0].value = _this.settings.data.strata[i][0].initValue; |
|
23 } |
|
24 |
|
25 // process data distribution to form layout |
|
26 for (var i = 0; i <_this.settings.data.model.length; i++) { |
|
27 //console.log("-->",_this.settings.data.model[i]) |
|
28 _this.settings.data.model[i].value=0 |
|
29 for (var j = 0; j <_this.settings.data.strata[i].length; j++) { |
|
30 //console.log("-->",_this.settings.data.strata[i][j].value) |
|
31 _this.settings.data.model[i].value += _this.settings.data.strata[i][j].value |
|
32 } |
|
33 //console.log("-->",_this.settings.data.model[i].value) |
|
34 initValue.push(_this.settings.data.model[i].value) |
|
35 tdv += _this.settings.data.model[i].value |
|
36 } |
|
37 |
|
38 if(this.treeLayout){ |
|
39 console.log("ici") |
|
40 this.setupBubbleChartPhysics(_this); |
|
41 }else{ |
|
42 this.setupPieChartPhysics(_this); |
|
43 } |
|
44 |
|
45 }; |
|
46 |
|
47 this.setupPieChartPhysics = function(_this){ |
|
48 |
|
49 console.log("w",_this.settings.width) |
|
50 // Pivot drawing |
|
51 var radius = _this.settings.chart.radius |
|
52 csX = _this.settings.chart.width/2+_this.settings.chart.x |
|
53 csY = _this.settings.chart.height/2+_this.settings.chart.y |
|
54 var axis = pivot(csX,csY,radius, _this.settings.chart.wallColor); |
|
55 |
|
56 //targets |
|
57 for (var i = 0; i< _this.settings.data.model.length; i++) { |
|
58 _this.settings.sedimentation.incoming.target[i] = {x:csX,y:csY}; |
|
59 } |
|
60 |
|
61 // Separation |
|
62 var wall = [] |
|
63 var spacer = _this.settings.chart.spacer; |
|
64 |
|
65 // Incoming point |
|
66 var p = 0; |
|
67 |
|
68 console.log("tdv",tdv) |
|
69 |
|
70 if (tdv==0){ |
|
71 for (var i = 0; i <_this.settings.data.length; i++) { |
|
72 initValue[i] = 1; |
|
73 } |
|
74 tdv = initValue.length |
|
75 } |
|
76 |
|
77 for (var i = 0; i <initValue.length; i++) { |
|
78 v = initValue[i] |
|
79 a2 = ((v/2+p)/tdv)*360-90 |
|
80 p += v |
|
81 a = (p/tdv)*360-90 |
|
82 c = circularCoordinate(a2,radius*5,csX,csY) |
|
83 |
|
84 // incomming point setup |
|
85 console.log(c) |
|
86 _this.settings.sedimentation.incoming.point[i] = c |
|
87 |
|
88 // Bounds Wall drawing |
|
89 _this.chartPhySetup.grounds[i]= this.createBox( |
|
90 _this, |
|
91 csX, |
|
92 csY, |
|
93 spacer, |
|
94 radius, |
|
95 a, |
|
96 radius, |
|
97 'wall', |
|
98 _this.settings.chart.wallColor); |
|
99 } |
|
100 console.log("w",_this.settings.chart.width) |
|
101 |
|
102 }; |
|
103 |
|
104 this.update = function(_this,options){ |
|
105 console.log("update") |
|
106 var defaultOptions = {cat:0,r:0} |
|
107 options.r-=90 |
|
108 var angle = (options.r+90)*(Math.PI/180) |
|
109 |
|
110 var c = circularCoordinate(options.r, |
|
111 _this.settings.chart.radius, |
|
112 _this.settings.chart.width/2+_this.settings.chart.x, |
|
113 _this.settings.chart.height/2+_this.settings.chart.y) |
|
114 |
|
115 if(_this.chartPhySetup.grounds[options.cat]!=null) { |
|
116 var myBody = _this.chartPhySetup.grounds[options.cat].GetBody(); |
|
117 var myPos = myBody.GetWorldCenter(); |
|
118 var myAngle= myBody.GetAngle() |
|
119 //console.log(myAngle) |
|
120 myPos.y = c.y/ _this.settings.options.scale |
|
121 myPos.x = c.x/ _this.settings.options.scale |
|
122 myAngle = angle |
|
123 myBody.SetPosition(myPos); |
|
124 myBody.SetAngle(myAngle); |
|
125 //console.log(myBody) |
|
126 } |
|
127 } |
|
128 |
|
129 // default token for stream |
|
130 this.token = function (_this,options){ |
|
131 var i = options; |
|
132 //console.log(options) |
|
133 var token = { |
|
134 x:(_this.settings.sedimentation.incoming.point[i].x+(Math.random()*2)), |
|
135 y:(_this.settings.sedimentation.incoming.point[i].y+(Math.random()*1)), |
|
136 t:_this.now(), |
|
137 size:_this.settings.sedimentation.token.size.original, |
|
138 category:i, |
|
139 phy:{ |
|
140 density:10, |
|
141 friction:0, |
|
142 restitution:0 |
|
143 }, |
|
144 targets:[{ |
|
145 // bizare x/2 or x ... |
|
146 x: _this.settings.sedimentation.incoming.target[i].x, |
|
147 y: _this.settings.sedimentation.incoming.target[i].y |
|
148 }] |
|
149 } |
|
150 return token; |
|
151 } |
|
152 |
|
153 function circularCoordinate(degree,radius,posX,posY){ |
|
154 j = degree*Math.PI/180 |
|
155 var x = (Math.cos(j) * radius)+posX; |
|
156 var y = (Math.sin(j) * radius)+posY; |
|
157 var c = {x:x,y:y} |
|
158 return c |
|
159 } |
|
160 |
|
161 function pivot (centerSceneX,centerSceneY,radius,color){ |
|
162 var scale = _this.settings.options.scale |
|
163 var fixDef = new _this.phy.b2FixtureDef; |
|
164 |
|
165 fixDef.density = 1.0; |
|
166 fixDef.friction = 0.5; |
|
167 fixDef.restitution = 0.2; |
|
168 var bodyDef = new _this.phy.b2BodyDef; |
|
169 fixDef.shape = new _this.phy.b2CircleShape(radius/scale); |
|
170 bodyDef.position.Set(centerSceneX/scale, centerSceneY/scale); |
|
171 |
|
172 var axis = _this.world.CreateBody(bodyDef).CreateFixture(fixDef); |
|
173 axis.m_userData = {type:"wall",familyID:null,fillStyle:color,strokeStyle:color,r:radius} |
|
174 return axis; |
|
175 } |
|
176 |
|
177 this.createBox = function (_this,x,y,w,h,a,r,type,color){ |
|
178 var scale = _this.settings.options.scale |
|
179 var fixDef = new _this.phy.b2FixtureDef; |
|
180 var c = circularCoordinate(a,r,x,y) |
|
181 |
|
182 fixDef.density = 1.0; |
|
183 fixDef.friction = 0.5; |
|
184 fixDef.restitution = 0.2; |
|
185 |
|
186 var bodyDef = new _this.phy.b2BodyDef; |
|
187 var angle = (a+90)*(Math.PI/180) |
|
188 bodyDef.angle = angle;//a+80 ; |
|
189 //create ground |
|
190 bodyDef.type = _this.phy.b2Body.b2_staticBody; |
|
191 fixDef.shape = new _this.phy.b2PolygonShape; |
|
192 fixDef.shape.SetAsBox(w/scale, h/scale); |
|
193 bodyDef.position.Set(c.x/scale,c.y/scale ); |
|
194 var box = _this.world.CreateBody(bodyDef).CreateFixture(fixDef); |
|
195 box.m_userData = {type:type,fillStyle:color,w:w,h:h,r:r} |
|
196 //console.log(box) |
|
197 return box |
|
198 } |
|
199 |
|
200 this.getPosition = function(_this){ |
|
201 var result =[] |
|
202 for (var i = 0; i < _this.chartPhySetup.grounds.length; i++) { |
|
203 myElement = _this.chartPhySetup.grounds[i] |
|
204 myBody = myElement.GetBody(); |
|
205 //console.log(myBody.GetAngle()) |
|
206 result.push({ |
|
207 x:(myBody.GetWorldCenter().x* _this.settings.options.scale), |
|
208 y:(myBody.GetWorldCenter().y* _this.settings.options.scale), |
|
209 a:myBody.GetAngle(), |
|
210 w:myElement.m_userData.w, |
|
211 h:myElement.m_userData.h, |
|
212 r:myElement.m_userData.r, |
|
213 }) |
|
214 }; |
|
215 return result |
|
216 } |
|
217 |
|
218 |
|
219 // --------- --------- --------- --------- --------- --------- --------- |
|
220 // Bubble --------- |
|
221 this.setupBubbleChartPhysics= function(_this){ |
|
222 console.log("setupBubbleChartPhysics") |
|
223 |
|
224 var colSize = ( _this.settings.chart.width/ _this.settings.data.model.length) |
|
225 var colBwid = _this.settings.chart.spacer |
|
226 var colYpos = _this.settings.chart.height/2+_this.settings.y+colBwid |
|
227 var Ypos = 0;//chart.position.y; |
|
228 var Xpos = 0;//chart.position.x; |
|
229 var NumCol = _this.settings.chart.column; |
|
230 // console.log(Xpos) |
|
231 // console.log( _this.settings.width) |
|
232 |
|
233 // array layout |
|
234 for( var i = 0 ; i<_this.settings.data.model.length; i++) { |
|
235 |
|
236 Xpos = _this.settings.chart.x+(i%NumCol*colBwid)+(colBwid/2) |
|
237 Ypos = _this.settings.chart.y+Math.floor(i/NumCol)*colBwid+(colBwid/2) |
|
238 //console.log("- "+i+" x:"+Xpos+" y:"+Ypos); |
|
239 _this.settings.sedimentation.incoming.target[i] = {x:Xpos,y:Ypos}; |
|
240 |
|
241 pivot[i] = creatMyBubblePivot(Xpos, |
|
242 Ypos, |
|
243 _this.settings.chart.spacer, |
|
244 i); |
|
245 |
|
246 _this.settings.data.model[i].incomingPoint = { |
|
247 x:Xpos, |
|
248 y:Ypos |
|
249 }; |
|
250 |
|
251 } |
|
252 |
|
253 } |
|
254 function creatMyBubblePivot(Xpos,Ypos,radius,id){ |
|
255 console.log("CreatMyBubblePivot",Xpos,Ypos,radius,id) |
|
256 |
|
257 var scale = _this.settings.options.scale |
|
258 var fixDef = new _this.phy.b2FixtureDef; |
|
259 var colorRange = d3.scale.category10() |
|
260 |
|
261 fixDef.density = 10000; |
|
262 fixDef.friction = 0.0; |
|
263 fixDef.restitution= 0.0; |
|
264 |
|
265 var bodyDef = new _this.phy.b2BodyDef; |
|
266 fixDef.shape = new _this.phy.b2CircleShape(radius*scale); |
|
267 bodyDef.position.Set(Xpos/scale, Ypos/scale); |
|
268 |
|
269 var axis = _this.world.CreateBody( bodyDef); |
|
270 var axisf = axis.CreateFixture(fixDef); |
|
271 |
|
272 console.log(id,colorRange(id)) |
|
273 axisf.m_userData = { |
|
274 type:"BubblePivot", |
|
275 familyID:id, |
|
276 fillStyle:_this.settings.chart.wallColor |
|
277 } |
|
278 console.log(id,axisf) |
|
279 |
|
280 axisf.m_shape.m_radius = _this.settings.data.model[id].value/scale; |
|
281 //console.log(Xpos,Ypos) |
|
282 return axisf; |
|
283 } |
|
284 |
|
285 this.getPivotPosition =function (id){ |
|
286 |
|
287 //console.log(_this.settings.data.model) |
|
288 |
|
289 if(typeof(id)!="undefined"){ |
|
290 return this.pivot |
|
291 } else{ |
|
292 var result=[]; |
|
293 for( var i = 0 ; i<_this.settings.data.model.length; i++) { |
|
294 result.push(_this.settings.data.model[i]) |
|
295 } |
|
296 return result |
|
297 } |
|
298 } |
|
299 |
|
300 function updatePivotFixPosition(x,y,id){ |
|
301 var myBody = pivot[id].GetBody(); |
|
302 myBody.SetPosition(new b2Vec2(x/scale, y/scale)); |
|
303 _this.settings.data.model[id].incomingPoint.x=x; |
|
304 _this.settings.data.model[id].incomingPoint.y=y; |
|
305 setFlowSpeed(speedFlow); |
|
306 |
|
307 } |
|
308 function setPivotPosition(x,y,id){ |
|
309 for( var i = 0 ; i<categorys[id].joins.length; i++) { |
|
310 categorys[id].joins[i].SetTarget(new b2Vec2(x/scale, y/scale)); |
|
311 } |
|
312 } |
|
313 function setPivotRadius(r,id){ |
|
314 //nBodies[b].m_shape.m_radius |
|
315 pivot[id].m_shape.m_radius=r; |
|
316 } |
|
317 |
|
318 |
|
319 // Bubble --------- |
|
320 // --------- --------- --------- --------- --------- --------- --------- |
|
321 if (typeof(fn)!=undefined){ |
|
322 var result = this[fn](_this,options); |
|
323 if (typeof(result)!=undefined){ |
|
324 return result |
|
325 } |
|
326 } |
|
327 |
|
328 } |
|
329 |
|
330 |
|
331 })(jQuery); |
|