view onlypaths/js/svgrenderer.js @ 74:24d5d4221b42 laserkard

session with nick, updated the about page
author r@rlm
date Fri, 25 Jun 2010 19:59:31 -0400
parents 26c2b3ad21c7
children
line wrap: on
line source
1 /*----------------------------------------------------------------------------
2 SVGRENDERER 1.0
3 SVG Renderer For RichDraw
4 -----------------------------------------------------------------------------
5 Created by Mark Finkle (mark.finkle@gmail.com)
6 Implementation of SVG based renderer.
7 -----------------------------------------------------------------------------
8 */
9 function AbstractRenderer() {
11 };
13 AbstractRenderer.prototype.init = function(elem) {};
18 function SVGRenderer() {
19 this.base = AbstractRenderer;
20 this.svgRoot = null;
21 }
24 SVGRenderer.prototype = new AbstractRenderer;
27 SVGRenderer.prototype.bounds = function(shape) {
29 var box = shape.getBBox();
31 return { x:box.x, y:box.y, width:box.width, height: box.height };
33 };
35 SVGRenderer.prototype.init = function(elem) {
36 this.container = elem;
38 this.container.style.MozUserSelect = 'none';
40 var svgNamespace = 'http://www.w3.org/2000/svg';
42 this.svgRoot = this.container.ownerDocument.createElementNS(svgNamespace, "svg");
43 this.svgRoot.setAttributeNS(null,'viewBox', zoominit);
44 this.svgRoot.setAttributeNS(null,'preserveAspectRatio','none');
45 this.svgRoot.setAttributeNS(null,'space','preserve');
46 this.container.appendChild(this.svgRoot);
47 }
49 SVGRenderer.prototype.view = function(left,top,width,height,viewBox,bgcolor) {
50 var svgNamespace = 'http://www.w3.org/2000/svg';
51 var tokens = viewBox.split(' ');
52 var margin=100;
53 var wFront=parseInt(document.getElementById('FRONT').style.width)
54 var hFront=parseInt(document.getElementById('FRONT').style.height)
55 var tC=0 + ' ' + 0 + ' ' + wFront + ' ' + hFront;
56 tokensCanvas= tC.split(' ');
57 var w=parseFloat(tokens[2]);
58 var h=parseFloat(tokens[3]);
59 var wImage = w - parseFloat(tokens[0]);
60 var hImage = h - parseFloat(tokens[1]);
61 var wCanvas = wFront;
62 var hCanvas = hFront;
63 proporImage = hImage / wImage;
64 proporCanvas = hCanvas / wCanvas;
66 document.title= initialFile +' '+wImage+' x '+hImage;
69 if(bgcolor != '')
70 {
71 this.container.style.backgroundColor=bgcolor;
72 } else{
73 this.container.style.backgroundColor="#ffffff";
74 }
75 if(viewMode=='preview')
76 {
77 if(proporCanvas==proporImage)
78 {
79 this.container.style.width =wFront+'px';
80 this.container.style.height =hFront+'px';
81 this.container.style.left =0+'px'
82 this.container.style.top =0+'px'
84 }
85 if(proporCanvas<proporImage)
86 {
87 var proportion= wFront/hFront;
88 //var image_proportion= width/height;
89 var image_proportion= w/h;
90 var W=hFront*image_proportion;
91 var leftover=(wFront-W)/2;
93 this.container.style.width =W+'px';
94 this.container.style.height =hFront+'px';
95 this.container.style.left =leftover+'px'
96 this.container.style.top =0+'px'
97 //alert('Horizontal '+wFront+','+hFront+' '+image_proportion+' '+W+' '+leftover+' ____'+ this.container.style.width)
99 }
100 if(proporCanvas>proporImage)
101 {
102 var proportion= hFront/wFront;
103 //var image_proportion= width/height;
104 var image_proportion= h/w;
105 var H=wFront*image_proportion;
106 var leftover=(hFront-H)/2;
108 this.container.style.width =wFront+'px';
109 this.container.style.height =H+'px';
110 this.container.style.left =0+'px'
111 this.container.style.top =leftover+'px'
112 }
114 this.svgRoot.setAttributeNS(null,'x', left);
115 this.svgRoot.setAttributeNS(null,'y', top);
116 this.svgRoot.setAttributeNS(null,'width', parseInt(this.container.style.width));
117 this.svgRoot.setAttributeNS(null,'height', parseInt(this.container.style.height));
119 this.svgRoot.setAttributeNS(null,'viewBox', viewBox);
121 }
122 if(viewMode=='canvas')
123 {
124 this.container.style.left = 0 + 'px';
125 this.container.style.top = 0 + 'px';
126 this.container.style.width = wFront + 'px';
127 this.container.style.height = hFront + 'px';
129 // margins 10%
130 var percent=10;
131 var percentX = wImage / percent;
132 var percentY = hImage / percent;
133 var cornerNEx = parseFloat(tokens[0])-percentX;
134 var cornerNEy = parseFloat(tokens[1])-percentY;
135 var percentRectW=wImage + percentX*2;
136 var percentRectH=hImage + percentY*2;
138 document.title= initialFile +' '+wImage+' x '+hImage;
139 // ajust proporImage to proporCanvas
140 if(proporCanvas==proporImage)
141 {
142 cornerNEx = parseFloat(tokens[0])-percentX
143 cornerNEy = parseFloat(tokens[1])-percentY
144 var wi=percentRectW;
145 var he=percentRectH;//hImage+percentY+addHimage;
146 zoominit=viewBox;
147 zoominit1 = cornerNEx+' '+cornerNEy+' '+wi+' '+he;
148 tokensZoom=zoominit1.split(' ');
149 }
151 if(proporCanvas<proporImage)
152 {
154 // add to hImage
155 var newWimage = percentRectW * ((wCanvas * percentRectH) / (hCanvas * percentRectW)) ;//newRectH *
156 var diffImages=newWimage-w;
157 cornerNEx = parseFloat(tokens[0]) - (diffImages / 2);
158 var wi=newWimage;
159 var he=percentRectH;//hImage+percentY+addHimage;
160 zoominit=viewBox;
161 zoominit1 = cornerNEx+' '+cornerNEy+' '+wi+' '+he;
162 tokensZoom=zoominit1.split(' ');
163 //alert(newRectW+' '+newRectH+' // '+newHimage+' // '+zoominit1+' // '+hCanvas * newRectW +' '+ wCanvas * newRectH)
164 //alert(addHimage+' // '+zoominit1)
165 //160 160 700 300
166 }
167 if(proporCanvas>proporImage)
168 {
169 // add to hImage
170 var newHimage = percentRectH * ((hCanvas * percentRectW) / (wCanvas * percentRectH)) ;//newRectH *
171 var diffImages=newHimage-h;
172 cornerNEy = parseFloat(tokens[1]) - (diffImages / 2);
173 var wi=percentRectW;
174 var he=newHimage;//hImage+percentY+addHimage;
175 zoominit=viewBox;
176 zoominit1 = cornerNEx+' '+cornerNEy+' '+wi+' '+he;
177 tokensZoom=zoominit1.split(' ');
178 }
179 /* this.svgRoot.setAttributeNS(null,'x', cornerNEx);
180 this.svgRoot.setAttributeNS(null,'y', cornerNEy);
181 this.svgRoot.setAttributeNS(null,'width', wi);
182 this.svgRoot.setAttributeNS(null,'height',he);
183 */
184 this.svgRoot.setAttributeNS(null,'x', 0);
185 this.svgRoot.setAttributeNS(null,'y', 0);
186 this.svgRoot.setAttributeNS(null,'width', wFront);
187 this.svgRoot.setAttributeNS(null,'height',hFront);
188 this.svgRoot.setAttributeNS(null,'viewBox', zoominit1);
191 }
192 }
194 SVGRenderer.prototype.zoomFrame = function(zoom){
195 this.svgRoot.setAttributeNS(null,'viewBox', zoom);
196 }
198 SVGRenderer.prototype.rectDoc = function(viewBox) {
199 var tokens = viewBox.split(' ');
200 var wFront=parseInt(document.getElementById('FRONT').style.width)
201 var hFront=parseInt(document.getElementById('FRONT').style.height)
202 var tC=0 + ' ' + 0 + ' ' + wFront + ' ' + hFront;
203 tokensCanvas= tC.split(' ');
204 var Ey = parseFloat(tokensCanvas[3]) ; // (end) height canvas. Corner up-right
205 var Hz = parseFloat(tokens[3]) ; // height zoom
206 this.editor.unit = this.editor.initialUnit * (Hz/Ey) ; // 0 to 1
208 var svgNamespace = 'http://www.w3.org/2000/svg';
210 var shape = document.getElementById('rectDoc');
211 if (shape) {
212 this.remove(shape);
213 }
214 var rect=this.container.ownerDocument.createElementNS(svgNamespace, 'rect');
215 rect.setAttributeNS(null, 'id', 'rectDoc');
216 rect.setAttributeNS(null, 'x', tokens[0] + 'px');
217 rect.setAttributeNS(null, 'y', tokens[1] + 'px');
218 rect.setAttributeNS(null, 'width', tokens[2]+ 'px');
219 rect.setAttributeNS(null, 'height', tokens[3] + 'px');
220 rect.setAttributeNS(null, 'fill', 'none');
221 rect.setAttributeNS(null, 'stroke', '#000000');
222 rect.setAttributeNS(null, 'stroke-width', this.editor.unit*2+'px');
223 // this.svgRoot.appendChild(rect)
225 this.svgRoot.insertBefore( rect, this.svgRoot.firstChild );
226 }
228 SVGRenderer.prototype.rectCanvas = function(docx,docy,docw,doch,viewBox) {
229 var svgNamespace = 'http://www.w3.org/2000/svg';
230 var tokens = zoominit1.split(' ');
231 var shape = document.getElementById('rectCanvas');
232 if (shape) {
233 this.remove(shape);
234 }
235 var rect=this.container.ownerDocument.createElementNS(svgNamespace, 'rect');
236 rect.setAttributeNS(null, 'id', 'rectBackground');
237 rect.setAttributeNS(null, 'x', tokens[0] + 'px');
238 rect.setAttributeNS(null, 'y', tokens[1] + 'px');
239 rect.setAttributeNS(null, 'width', tokens[2] + 'px');
240 rect.setAttributeNS(null, 'height', tokens[3] + 'px');
241 rect.setAttributeNS(null, 'fill', '#666666');
242 rect.setAttributeNS(null, 'stroke', 'none');
243 //this.svgRoot.appendChild(rect)
244 this.svgRoot.insertBefore( rect, this.svgRoot.firstChild );
246 //this.index('rectBackground',0);
248 /* var shape = document.getElementById('rectOverCanvas');
249 if (shape) {
250 this.remove(shape);
251 }
252 var rect=this.container.ownerDocument.createElementNS(svgNamespace, 'rect');
253 rect.setAttributeNS(null, 'id', 'rectOverCanvas');
254 rect.setAttributeNS(null, 'x', docx + 'px');
255 rect.setAttributeNS(null, 'y', docy + 'px');
256 rect.setAttributeNS(null, 'width', docw + 'px');
257 rect.setAttributeNS(null, 'height', doch + 'px');
258 rect.setAttributeNS(null, 'fill', 'none');
259 rect.setAttributeNS(null, 'stroke', '#000000');
260 rect.setAttributeNS(null, 'stroke-width', 1+'px');
261 // this.svgRoot.appendChild(rect)
262 this.svgRoot.insertBefore( rect, this.svgRoot.lastChild );
263 */
264 }
266 SVGRenderer.prototype.removeAll = function()
267 {
268 while( this.svgRoot.hasChildNodes () )
269 {
270 this.svgRoot.removeChild( this.svgRoot.firstChild );
271 }
272 }
274 SVGRenderer.prototype.create = function(shape, fillColor, lineColor, fillOpac, lineOpac, lineWidth, left, top, width, height, textMessaje, textSize, textFamily, imageHref, points, transform, parent, viewBox) {
275 var svgNamespace = 'http://www.w3.org/2000/svg';
276 var xlinkNS="http://www.w3.org/1999/xlink";
278 var svg;
280 if (shape == 'rect') {
281 svg = this.container.ownerDocument.createElementNS(svgNamespace, 'rect');
282 svg.setAttributeNS(null, 'x', left + 'px');
283 svg.setAttributeNS(null, 'y', top + 'px');
284 svg.setAttributeNS(null, 'width', width + 'px');
285 svg.setAttributeNS(null, 'height', height + 'px');
286 svg.setAttributeNS(null, 'rx', 0+'px');
287 svg.setAttributeNS(null, 'ry', 0+'px');
289 //svg.setAttributeNS(null,'transform', "translate(0,0)");
290 //svg.setAttributeNS(null,'transform', "translate('+left+','+top+')");
291 svg.style.position = 'absolute';
292 }
293 else if (shape == 'ellipse' || shape == 'circle') {
295 svg = this.container.ownerDocument.createElementNS(svgNamespace, 'ellipse');
296 svg.setAttributeNS(null, 'cx', (left + width / 2) + 'px');
297 svg.setAttributeNS(null, 'cy', (top + height / 2) + 'px');
298 if(shape == 'circle'){
299 svg.setAttributeNS(null, 'rx', (width / 2) + 'px');
300 svg.setAttributeNS(null, 'ry', (width / 2) + 'px');
301 }else{
302 svg.setAttributeNS(null, 'rx', (width / 2) + 'px');
303 svg.setAttributeNS(null, 'ry', (height / 2) + 'px');
305 }
306 //svg.setAttributeNS(null,'transform', "translate('+left+','+top+')");
307 svg.style.position = 'absolute';
308 }
309 else if (shape == 'roundrect') {
310 svg = this.container.ownerDocument.createElementNS(svgNamespace, 'rect');
311 svg.setAttributeNS(null, 'x', left + 'px');
312 svg.setAttributeNS(null, 'y', top + 'px');
313 if(textSize!=0 || textSize!=''){ var rounded=textSize; }else{var rounded=18;}
314 svg.setAttributeNS(null, 'rx', rounded+'px');
315 svg.setAttributeNS(null, 'ry', rounded+'px');
316 svg.setAttributeNS(null, 'width', width + 'px');
317 svg.setAttributeNS(null, 'height', height + 'px');
318 //svg.setAttributeNS(null,'transform', "translate('+left+','+top+')");
319 svg.style.position = 'absolute';
320 }
321 else if (shape == 'line') {
322 svg = this.container.ownerDocument.createElementNS(svgNamespace, 'line');
323 svg.setAttributeNS(null, 'x1', left + 'px');
324 svg.setAttributeNS(null, 'y1', top + 'px');
325 svg.setAttributeNS(null, 'x2', left + width + 'px');
326 svg.setAttributeNS(null, 'y2', top + height + 'px');
327 //svg.setAttributeNS(null,'transform', "translate('+left+','+top+')");
328 svg.style.position = 'absolute';
329 }
330 else if (shape == 'polyline' || shape == 'polygon') {
331 var xcenterpoly=xpArray;
332 var ycenterpoly=ypArray;
333 var thispath=''+xpArray[1]+','+ypArray[1];
334 svg = this.container.ownerDocument.createElementNS(svgNamespace, shape);
335 svg.setAttributeNS(null, 'points', points);
336 svg.style.position = 'absolute';
337 }
338 else if (shape == 'path')
339 {
340 var k = (Math.sqrt(2)-1)*4/3;
341 var circle="M 0,1 L 0.552,1 1,0.552 1,0 1,-0.552 0.552,-1 0,-1 -0.552,-1 -1,-0.552 -1,0 -1,0.552 -0.552,1 0,1z" // 4th
342 svg = this.container.ownerDocument.createElementNS(svgNamespace, 'path');
343 //svg.setAttributeNS(null, 'd', 'M '+thispath+' C'+thispath);
344 svg.setAttributeNS(null, 'd', points);
345 //svg.setAttributeNS(null,'transform', "translate(-80,-80)");
346 svg.style.position = 'absolute';
347 }
348 else if (shape == 'controlpath')
349 {
350 var point='M '+left+','+top+' L '+(left+1)+','+(top+1)+'z' // 4th
351 svg = this.container.ownerDocument.createElementNS(svgNamespace, 'path');
352 //svg.setAttributeNS(null, 'd', 'M '+thispath+' C'+thispath);
353 svg.setAttributeNS(null, 'd', point);
354 svg.setAttributeNS(null,'transform', "translate(0,0)");
355 svg.style.position = 'absolute';
356 }
357 else if (shape == 'text')
358 {
359 var data = this.container.ownerDocument.createTextNode(textMessaje);
360 svg = this.container.ownerDocument.createElementNS(svgNamespace, 'text');
361 svg.setAttributeNS(null, 'x', parseFloat(left) + 'px');
362 svg.setAttributeNS(null, 'y', parseFloat(top) + 'px');
363 svg.setAttributeNS(null, 'font-family', textFamily );
364 svg.setAttributeNS(null, 'font-size', parseFloat(textSize));
365 svg.style.position = 'absolute';
366 svg.appendChild(data);
367 }
368 else if (shape == 'clipPath')
369 {
370 svg = this.container.ownerDocument.createElementNS(svgNamespace, 'clipPath');
371 }
372 else if (shape == 'filter')
373 {
374 svg = this.container.ownerDocument.createElementNS(svgNamespace, 'filter');
375 }
376 else if (shape == 'feGaussianBlur')
377 {
378 svg = this.container.ownerDocument.createElementNS(svgNamespace, 'filter');
379 svg.setAttributeNS(null, 'in','SourceGraphic');
380 svg.setAttributeNS(null, 'stdDeviation',parseFloat(left));
381 }
382 else if (shape == 'linearGradient')
383 {
384 svg = this.container.ownerDocument.createElementNS(svgNamespace, 'linearGradient');
385 svg.setAttributeNS(null, 'x1', left);
386 svg.setAttributeNS(null, 'y1', top);
387 svg.setAttributeNS(null, 'x2', width);
388 svg.setAttributeNS(null, 'y2', height);
389 svg.setAttributeNS(null, 'gradientUnits',textMessaje);//"userSpaceOnUse"
390 svg.setAttributeNS(xlinkNS,'href', imageHref);
392 }
393 else if (shape == 'radialGradient') {
394 svg = this.container.ownerDocument.createElementNS(svgNamespace, 'radialGradient');
395 svg.setAttributeNS(null, 'gradientUnits',textMessaje);//"userSpaceOnUse"
396 svg.setAttributeNS(null, 'cx', left);
397 svg.setAttributeNS(null, 'cy', top );
398 svg.setAttributeNS(null, 'fx', width);
399 svg.setAttributeNS(null, 'fy', height);
400 svg.setAttributeNS(null, 'r', lineWidth);
401 svg.setAttributeNS(xlinkNS,'href', imageHref);
402 }
403 else if (shape == 'stop') {
404 svg = this.container.ownerDocument.createElementNS(svgNamespace, 'stop');
405 svg.setAttributeNS(null, 'stop-color', fillColor);
406 svg.setAttributeNS(null, 'stop-opacity', fillOpac);
407 svg.setAttributeNS(null, 'offset', lineOpac);
408 }
409 else if (shape == 'defs') {
410 svg = this.container.ownerDocument.createElementNS(svgNamespace, 'defs');
411 //svg.setAttributeNS(null, 'id', 'defs');
412 }
413 else if (shape == 'group') {
414 svg = this.container.ownerDocument.createElementNS(svgNamespace, 'g');
415 svg.setAttributeNS(null, 'x', left + 'px');
416 svg.setAttributeNS(null, 'y', top + 'px');
417 svg.setAttributeNS(null, 'width', width + 'px');
418 svg.setAttributeNS(null, 'height', height + 'px');
419 svg.setAttributeNS(null, 'fill-opacity', parseFloat(fillOpac));
420 svg.setAttributeNS(null, 'fill', fillColor);
421 //}
423 //else if (shape == 'linearGradient') {
424 //return false
425 }
426 else if (shape == 'pattern') {
427 svg = this.container.ownerDocument.createElementNS(svgNamespace, 'pattern');
428 svg.setAttributeNS(null, 'x', left);
429 svg.setAttributeNS(null, 'y', top);
430 svg.setAttributeNS(null, 'width', width );
431 svg.setAttributeNS(null, 'height', height);
432 svg.setAttributeNS(null, 'viewBox', viewBox);
433 svg.setAttributeNS(null, 'patternUnits', 'userSpaceOnUse');
435 }
436 else if (shape == 'use') {
437 var svg = this.container.ownerDocument.createElementNS(svgNamespace, 'use');
438 svg.setAttributeNS(xlinkNS,'xlink:href', imageHref);
439 }
440 else if (shape == 'image') {
441 /* svg = this.container.ownerDocument.createElementNS(svgNamespace, 'g');
442 svg.setAttributeNS(null, 'x', left + 'px');
443 svg.setAttributeNS(null, 'y', top + 'px');
444 svg.setAttributeNS(null, 'width', width + 'px');
445 svg.setAttributeNS(null, 'height', height + 'px');
446 */
447 var svg = this.container.ownerDocument.createElementNS(svgNamespace, 'image');
448 svg.setAttributeNS(xlinkNS,'href', imageHref);
449 svg.setAttributeNS(null, 'x', left + 'px');
450 svg.setAttributeNS(null, 'y', top + 'px');
451 svg.setAttributeNS(null, 'width', width + 'px');
452 svg.setAttributeNS(null, 'height', height + 'px');
453 svg.setAttributeNS(null, 'opacity', parseFloat(fillOpac));
454 svg.setAttributeNS(null, 'preserveAspectRatio','none');//xMinYMin slice
455 //svg.setAttributeNS(null, 'viewbox', left+' '+top+' '+width+' '+height);
456 //Ext.get(this.container).removeAllListeners(isvg)
457 //svg.appendChild(isvg);
458 /*
459 var rsvg = this.container.ownerDocument.createElementNS(svgNamespace, 'rect');
460 rsvg.setAttributeNS(null, 'x', left + 'px');
461 rsvg.setAttributeNS(null, 'y', top + 'px');
462 rsvg.setAttributeNS(null, 'width', width + 'px');
463 rsvg.setAttributeNS(null, 'height', height + 'px');
464 rsvg.style.fill = fillColor;
465 rsvg.style.stroke = lineColor;
466 rsvg.style.strokeWidth = lineWidth;
467 rsvg.setAttributeNS(null, 'opacity', '0.1');
468 rsvg.style.strokOpacity = lineOpac;
469 // Ext.get(this.container).removeAllListeners(rsvg)
470 svg.appendChild(rsvg);
472 */
473 //svg.setAttributeNS(null, 'color-rendering', fillColor);
474 //svg.setAttributeNS(null, 'display', 'inherit');
476 //alert(fillOpac+'lkjlkj');
477 //svg.setAttributeNS(null, 'fill-opacity', parseFloat(fillOpac));
479 /* if (fillColor.length == 0){fillColor = 'none';}
480 if (lineColor.length == 0){lineColor = 'none';}
481 svg.style.fill = fillColor;
482 svg.style.stroke = lineColor;
483 svg.style.strokeWidth = lineWidth;
484 svg.style.fillOpacity = fillOpac;
485 svg.style.strokOpacity = lineOpac;
486 svg.style.setAttributeNS(null, 'fill', fillColor);
487 svg.style.setAttributeNS(null, 'stroke', lineColor);
488 svg.style.setAttributeNS(null, 'stroke-width', lineWidth);
489 svg.style.setAttributeNS(null, 'fill-opacity', fillOpac);
490 svg.style.setAttributeNS(null, 'stroke-opacity',lineOpac);
492 */
493 }
495 if(shape == 'zoom')
496 {
498 }else
499 {
500 if(transform!='')
501 {
502 svg.setAttributeNS(null, 'transform', transform);
503 }
505 var render=true;
506 if(shape.indexOf('image')>=0){render=false;}
507 //if(shape.indexOf('group')>=0){render=false;}
508 if(shape.indexOf('linearGradient')>=0){render=false;}
509 if(shape.indexOf('radialGradient')>=0){render=false;}
510 if(shape.indexOf('stop')>=0){render=false;}
511 if(shape.indexOf('def')>=0){render=false;}
512 if(shape.indexOf('filter')>=0){render=false;}
513 if(shape.indexOf('feGaussianBlur')>=0){render=false;}
517 //|| shape != 'group'
518 //if(shape != 'image' || shape != 'stop' || shape != 'def')
519 if(render==true)
520 {
522 //var set = this.container.ownerDocument.createElementNS(svgNamespace, "style");
524 if (lineColor.length == 0){lineColor = 'none';}
525 if (fillColor.length == 0){fillColor = 'none';}
526 //if (lineWidth == NaN || lineWidth == 0 ){lineColor = '#000000';}
529 // set.setAttributeNS(null, 'stroke', lineColor);
530 //set.setAttributeNS(null, 'stroke-width', lineWidth);
531 //set.setAttributeNS(null, 'fill-opacity', fillOpac);
532 //set.setAttributeNS(null, 'stroke-opacity',lineOpac);
533 //svg.appendChild(set);
534 //svg.setAttributeNS(null, "style","fill:"+ fillColor+";stroke:"+lineColor+";strokeWidth:"+lineWidth+";fill-opacity:"+fillOpac+";stroke-opacity:"+lineOpac);
535 //
536 (fillColor!=''|| fillColor!=null )?svg.setAttributeNS(null, 'fill', fillColor):svg.setAttributeNS(null, 'fill', '#000000');
538 //svg.setAttributeNS(null, 'filter', filter);
539 svg.setAttributeNS(null, 'stroke', lineColor);
540 svg.setAttributeNS(null, 'stroke-width', parseFloat(lineWidth));
541 svg.setAttributeNS(null, 'fill-opacity', parseFloat(fillOpac));
542 svg.setAttributeNS(null, 'stroke-opacity',parseFloat(lineOpac));
543 svg.setAttributeNS(null, 'stroke-linejoin','round')
545 /*
546 <a xlink:href="http://www.w3.org">
547 <ellipse cx="2.5" cy="1.5" rx="2" ry="1" fill="red" />
548 </a>
549 svg.style.stroke = lineColor;
550 svg.style.strokeWidth = lineWidth;
551 svg.style.fillOpacity = fillOpac;
552 svg.style.strokOpacity = lineOpac;
553 if (fillColor.length == 0){fillColor = 'none';}
555 if (lineColor.length == 0){lineColor = 'none';}
556 */
557 }
560 if(parent==''){
561 this.svgRoot.appendChild(svg);
562 }else{
563 if(document.getElementById(parent)){
564 var parentShape = document.getElementById(parent);
565 parentShape.appendChild(svg);
566 }
567 }
570 return svg;
572 }
574 };
578 SVGRenderer.prototype.zoomFrame = function(zoom){
579 this.svgRoot.setAttributeNS(null,'viewBox', zoom);
582 }
583 SVGRenderer.prototype.zoom = function(clicx,clicy){
584 /*
585 function(direction, amount) {
586 var viewBox = this.rootNode.getAttribute('viewBox');
587 var viewVals = viewBox.split(' ');
588 if (amount == null) {
589 amount = SVGElement.panFactor;
590 }
591 switch (direction) {
592 case 'left':
593 amount = 0 - amount;
594 // intentionally fall through
595 case 'right':
596 var currentPosition = parseFloat(viewVals[0]);
597 currentPosition += amount;
598 viewVals[0] = currentPosition;
599 break;
600 case 'up':
601 amount = 0 - amount;
602 // intentionally fall through
603 case 'down':
604 var currentPosition = parseFloat(viewVals[1]);
605 currentPosition += amount;
606 viewVals[1] = currentPosition;
607 break;
608 case 'origin':
609 // reset everything to initial values
610 viewVals[0] = 0;
611 viewVals[1] = 0;
612 this.rootNode.currentScale = 1;
613 this.rootNode.currentTranslate.x = 0;
614 this.rootNode.currentTranslate.y = 0;
615 break;
616 }
617 this.rootNode.setAttribute('viewBox', viewVals.join(' '));
618 */
622 //canvasWidth
623 //canvasheight
624 if(zoommode=='frame')
625 {
626 var viewBox = this.svgRoot.getAttributeNS(null,'viewBox');
628 //alert(viewBox);
630 var viewBox = zoominit;
631 var viewVals = viewBox.split(' ');
633 zoomx = parseFloat(viewVals[0]);
634 zoomy = parseFloat(viewVals[1]);
635 zoomw = parseFloat(viewVals[2]);
636 zoomh = parseFloat(viewVals[3]);
637 proporDiagonal=1;
638 }
639 else
640 {
642 var viewBox = this.svgRoot.getAttributeNS(null,'viewBox');
644 var viewVals = viewBox.split(' ');
645 var prevX = parseFloat(viewVals[0]);
646 var prevY = parseFloat(viewVals[1]);
647 var prevW = parseFloat(viewVals[2]);
648 var prevH = parseFloat(viewVals[3]);
649 var prevWidth=prevW-prevX;
650 var prevHeight=prevH-prevY;
652 }
654 if(zoommode=='more')
655 {
656 fieldViewx=prevW*0.95;
657 fieldViewy=prevH*0.95;
658 diagonalFrame=dist2p(0,0,fieldViewx,fieldViewy);
659 //diagonalAngle=getAngle(fieldViewx,fieldViewy);
660 zoomx=(diagonalMidx+(diagonalFrame/2)*Math.cos(diagonalAngle+Math.PI));//-(fieldViewx/8);//-(canvasW/2)docx-fieldViewx;
661 zoomy=(diagonalMidy+(diagonalFrame/2)*Math.sin(diagonalAngle+Math.PI));//-(fieldViewy/8);//-(canvasH/2);//docy-fieldViewy;
662 zoomw=prevW*0.95;
663 zoomh=prevH*0.95;
666 proporDiagonal=diagonalFrame/diagonalinit;
667 //alert(proporDiagonal);
668 }
669 if(zoommode=='minus')
670 {
671 fieldViewx=prevW*1.05;
672 fieldViewy=prevH*1.05;
673 diagonalFrame=dist2p(0,0,fieldViewx,fieldViewy);
674 //diagonalAngle=getAngle(fieldViewx,fieldViewy);
675 zoomx=(diagonalMidx+(diagonalFrame/2)*Math.cos(diagonalAngle+Math.PI));//-(fieldViewx/8);//-(canvasW/2)docx-fieldViewx;
676 zoomy=(diagonalMidy+(diagonalFrame/2)*Math.sin(diagonalAngle+Math.PI));//-(fieldViewy/8);//-(canvasH/2);//docy-fieldViewy;
677 zoomw=prevW*1.05;
678 zoomh=prevH*1.05;
679 proporDiagonal=diagonalFrame/diagonalinit;
681 }
682 if(zoommode=='window')
683 {
685 zoomx=c.mouseDownX;
686 zoomy=c.mouseDownY;
687 var dF=dist2p(c.mouseDownX,c.mouseDownY,clicx,clicy);
688 //var mid=pmd2pb(c.clicX,c.clicX,clicx,clicy,0.5)
689 zoomw=dF*proporDoc;//(mid[1]+(dF/2)*Math.cos(diagonalAngle+Math.PI));
690 zoomh=dF;//(mid[2]+(dF/2)*Math.sin(diagonalAngle+Math.PI));
693 }
694 var direction=0;
695 if(zoommode=='hand')
696 {
697 direction=ang2v(clicx,clicy,centerZoomx,centerZoomy);
698 var distance=dist2p(clicx,clicy,centerZoomx,centerZoomy);
699 var left = prevX+distance*Math.cos(direction);
700 var top = prevY+distance*Math.sin(direction);
701 makeWorkSite(prevH,left,top);
702 }
703 direction=direction*180/Math.PI;
704 //this.svgRoot.currentScale = zoomscale+0.1;
705 //this.svgRoot.currentTranslate.x = 0;
706 //this.svgRoot.currentTranslate.y = 0;
707 //var resultPosx=clicx-((prevscalex-posx)/2);//-Math.abs(posx+clicx)
708 //var resultPosy=clicy-((prevscalex-posy)/2);//-Math.abs(posy+clicy)
709 //var resultPosx=-Math.abs(posx+clicx);
710 //var resultPosy=-Math.abs(posy+clicy);
712 this.svgRoot.setAttributeNS(null,'viewBox', (zoomx)+' '+(zoomy)+' '+zoomw+' '+zoomh+'');
713 var viewBox = this.svgRoot.getAttributeNS(null,'viewBox');
714 //$('status').innerHTML=' '+viewBox;
715 //alert(direction+'__'+prevZoomCenterx+' '+prevZoomCentery+' '+centerZoomx+' '+centerZoomy);
716 }
718 //this.mode, this.fillColor, this.lineColor, this.fillOpac, this.lineOpac, this.lineWidth, this.mouseDownX, this.mouseDownY, 1, 1,'',''
719 SVGRenderer.prototype.datacreate = function(fillColor, lineColor, fillOpac, lineOpac, lineWidth, left, top, width, height, textMessaje, textSize, textFamily, imageHref, transform) {
720 var svgNamespace = 'http://www.w3.org/2000/svg';
721 var svg;
722 svg = this.container.ownerDocument.createElementNS(svgNamespace, 'path');
723 svg.setAttributeNS(null, 'd', data);
724 svg.setAttributeNS(null,'transform', "translate(0,0)");
725 svg.style.position = 'absolute';
726 if (fillColor.length == 0){fillColor = 'none';}
727 svg.setAttributeNS(null, 'fill', fillColor);
728 if (lineColor.length == 0){lineColor = 'none';}
729 svg.setAttributeNS(null, 'stroke', lineColor);
730 svg.setAttributeNS(null, 'stroke-width', lineWidth);
731 this.svgRoot.appendChild(svg);
732 return svg;
733 };
735 SVGRenderer.prototype.querySelected = function(shape,centerx,centery,width,height)
736 {
737 var result = true;
738 var shapes='names: g, image, rect, path, ellipse, circle, text, line, ';
740 //if(shape.getBBox && shape)
741 if( shapes.indexOf(' '+shape.tagName+',')>0)
742 {
744 var box = shape.getBBox();
745 }else
746 {
747 return false;
748 }
749 var p1x = box.x;
750 if(Math.abs(p1x-centerx)>width){result = false}
752 var p1y = box.y;
753 if(Math.abs(p1y-centery)>height){result = false}
755 var p2x = box.x+box.width;
756 if(Math.abs(p2x-centerx)>width){result = false}
758 var p2y = box.y;
759 if(Math.abs(p2y-centery)>height){result = false}
761 var p3x = box.x+box.width;
762 if(Math.abs(p3x-centerx)>width){result = false}
764 var p3y = box.y+box.height;
765 if(Math.abs(p3y-centery)>height){result = false}
767 var p4x = box.x;
768 if(Math.abs(p4x-centerx)>width){result = false}
770 var p4y = box.y+box.height;
771 if(Math.abs(p4y-centery)>height){result = false}
773 if(result)
774 {
775 return { 'in':result, 'cornersx': p1x+','+p2x+','+p3x+','+p4x+',' ,'cornersy': p1y+','+p2y+','+p3y+','+p4y+',' };
776 }
777 else
778 {
779 return { 'in':result }
780 }
781 //center.distanceFrom(point1);
784 }
786 SVGRenderer.prototype.searchBoxes = function()
787 {
788 var base = this.svgRoot;
790 var NumNodes = base.childNodes.length;
791 var chain= '';
792 for(i = 0;i < NumNodes;i++)
793 {
794 if (base.childNodes[i].getBBox)
795 {
796 chain+=base.childNodes[i].id + ';'
797 }
798 }
799 chain+=''
800 return chain;
802 }
804 SVGRenderer.prototype.DrawBorder= function(numNode, targetElement )
805 {
806 var shapes='names: g, image, rect, path, ellipse, circle, text, line, ';
808 //if(shape.getBBox && shape)
809 if( shapes.indexOf(' '+targetElement.tagName+',')>0)
810 {
811 var bbox = targetElement.getBBox();
812 var svgns = 'http://www.w3.org/2000/svg';
814 var outline = this.container.ownerDocument.createElementNS(svgns, 'rect');
815 outline.setAttributeNS( null, 'x', bbox.x - 2 );
816 outline.setAttributeNS( null, 'y', bbox.y - 2 );
817 outline.setAttributeNS( null, 'width', bbox.width + 4 );
818 outline.setAttributeNS( null, 'height', bbox.height + 4 );
819 outline.setAttributeNS( null, 'stroke', '#ff00ff' );
820 outline.setAttributeNS( null, 'fill', 'none' );
821 outline.setAttributeNS( null, 'id', 'shapeBoxed'+numNode );
823 targetElement.parentNode.insertBefore( outline, targetElement );
824 return 'shapeBoxed'+numNode;
825 }
826 else
827 {
828 return false
829 }
830 }
832 SVGRenderer.prototype.index = function(shape,order) {
834 if(order==-1)
835 {
836 this.svgRoot.appendChild( shape );
837 }
838 if(order==0){
840 this.svgRoot.insertBefore( shape, shape.parentNode.firstChild );
841 }
843 if(order==1 || order==2)
844 {
845 var id=shape.getAttributeNS(null, 'id');
846 //alert(id);
849 var numNodes=this.svgRoot.childNodes.length;
850 //alert(numNodes);
852 var num=0;
853 for(var i = 1; i < numNodes; i++)
854 {
856 var etiq=this.svgRoot.childNodes[i].getAttributeNS(null, 'id');
857 if (etiq==id)
858 {
859 num=i;
861 }
862 }
863 //alert(num);
864 if(order==1)
865 {
866 if((num-1)>=-1)
867 {
868 this.svgRoot.insertBefore( shape, this.svgRoot.childNodes[num-1]);
869 }
870 }
871 if(order==2){
872 if((num+1)<numNodes)
873 {
874 this.svgRoot.insertBefore( shape, this.svgRoot.childNodes[num+2]);
875 }
876 }
878 }
881 /*var contshapes = shape.parentNode.childNodes.length;
882 var elem1 = shape;//this.svgRoot.childNodes[1];
883 var elem2 = shape.parentNode.childNodes[parseInt(contshapes-9)];
884 var tmp = elem1.cloneNode( true );
885 shape.parentNode.replaceChild( tmp, elem2 );
886 shape.parentNode.replaceChild( elem2, elem1 );
887 */
888 //alert(elem2+' '+ elem1 )
889 //return elem2;
891 }
892 SVGRenderer.prototype.remove = function(shape) {
893 //shape.parentNode.removeChild(shape);
894 this.svgRoot.removeChild(shape);
895 }
898 SVGRenderer.prototype.copy = function(shape)
899 {
900 var svg;
901 svg =shape.cloneNode(false);
902 if(shape.tagName=="text"){
903 var text=shape.textContent ;
904 svg.textContent=text;
905 }
906 //svg.setAttributeNS(null, 'fill', "#aa00aa");
907 return svg;
908 };
911 SVGRenderer.prototype.paste = function(clipboard,left,top)
912 {
913 //var svg;
914 //svg =shape;
915 //clipboard.setAttributeNS(null, 'fill', "#0000aa");
916 //clipboard.setAttributeNS(null,'transform', "translate("+left+","+top+")");
917 this.svgRoot.appendChild(clipboard);
918 return clipboard;
919 };
922 SVGRenderer.prototype.duplicate = function(shape)
923 {
924 var svg;
925 svg =shape.cloneNode(false);
926 //svg.setAttributeNS(null, 'fill', "#aa00aa");
927 this.svgRoot.appendChild(svg);
928 return svg;
929 };
931 SVGRenderer.prototype.undo = function()
932 {
933 this.svgRoot.removeChild( this.svgRoot.lastChild );
934 };
936 /*
937 function zSwap(parent, elem1, elem2)
938 {
939 var tmp = elem1.cloneNode( true );
940 parent.replaceChild( tmp, elem2 );
941 parent.replaceChild( elem2, elem1 );
942 }
944 SVGRenderer.prototype.moveToTop( svgNode )
945 {
946 this.svgRoot.appendChild( svgNode );
947 }
950 SVGRenderer.prototype.moveToBottom( svgNode )
951 {
952 this.svgRoot.insertBefore( svgNode, svgNode.parentNode.firstChild );
953 }
955 */
961 var xshe=0; //bad
962 var yshe=0;
963 var isArc=false;
964 var contArc=0;
966 SVGRenderer.prototype.move = function(shape, left, top, fromX,fromY) {
967 //typeTransform='Translate';
969 var box = shape.getBBox();
970 var angle=0;
971 var dist=0;
972 var rotated=false;
974 if (shape.hasAttributeNS(null,'transform')) {
975 var tran=shape.getAttributeNS(null, 'transform');
976 var rot='';
977 var scl='';
978 var angle=0;
979 if(tran.indexOf('rotate')!=-1)
980 {
981 if(tran.indexOf('scale')!=-1)
982 {
983 var chain2=tran.split('),');
984 rot= GetString(chain2[0], 'rotate(', ',');
985 angle=parseFloat(rot);
986 scl= GetString(tran, 'scale(', ')');
987 }else{
988 var chain2=tran.split(',');
989 var rot0=chain2[0].split('rotate(');
990 rot='good';
991 angle=parseFloat(rot0[1]);
992 scl='';
994 }
995 }else{
996 if(tran.indexOf('scale')!=-1)
997 {
998 scl= GetString(tran, 'scale(', ')');
999 angle=0;
1000 }else{
1001 //
1005 //var h=shape.getAttributeNS(null, SVG_TRANSFORM_ROTATE );
1007 var centerx=box.x+(box.width/2);
1008 var centery=box.y+(box.height/2);
1009 var cadRot='';
1010 var cadScale='';
1011 var union='';
1012 if(angle!=0)
1014 cadRot='rotate('+(angle)+', '+centerx+', '+centery+')';
1016 if(scl.length>2)
1018 if(rot.length>2){ union=',';}
1019 cadScale='scale('+scl+')';
1020 if(scl.indexOf('-')!=-1)
1022 var dist= dist2p(left,top,box.x,box.y);
1024 left=left;
1026 if(scl.indexOf(',-')!=-1 || scl.indexOf(', -')!=-1 )
1028 //top=eval('-'+top);
1029 var dist= dist2p(left,top,box.x,box.y);
1030 top=top;
1034 //shape.setAttributeNS(null,'transform', 'rotate('+(angle)+', '+centerx+', '+centery+')');
1035 shape.setAttributeNS(null,'transform', cadRot+union+cadScale);
1037 //var angleRad=angle*Math.PI/180;
1041 //dist=dist2p(x,y,left, top) ;
1042 rotated=true;
1045 //left=left-box.x;
1046 //top=top-box.y;
1047 //left = centerx-left;
1048 //top = centery-top;
1050 contmove++;
1052 if (shape.tagName == 'rect'){
1053 /* var dudy= shape.parentNode;
1054 if(dudy.tagName=='g'){
1055 document.forms[0].code.value= 'this g ============ ';
1056 shape.setAttributeNS(null, 'x', left);
1057 shape.setAttributeNS(null, 'y', top);
1059 dudy.setAttributeNS(null, 'x', left);
1060 dudy.setAttributeNS(null, 'y', top);
1061 dudy.childNodes[0].setAttributeNS(null, 'x', left);
1062 dudy.childNodes[0].setAttributeNS(null, 'y', top);
1064 }else{
1065 //document.forms[0].code.value= box.x+' '+box.y+' formX Y'+ fromX+'_'+fromY+' left '+left+'_'+top+'==============';
1066 //document.forms[0].code.value+= tran+' rot '+ angle+'_'+x+'_'+y+' dist '+dist;
1067 if(rotated){
1068 //shape.setAttributeNS(null, 'x', box.x*Math.cos(angleRad)) ;
1069 //shape.setAttributeNS(null, 'y', box.y*Math.sin(angleRad)) ;
1070 shape.setAttributeNS(null, 'x', left);
1071 shape.setAttributeNS(null, 'y', top);
1074 }else{
1075 */
1076 shape.setAttributeNS(null, 'x', left);
1077 shape.setAttributeNS(null, 'y', top);
1078 //}
1079 //$('option_rect_trx').value= left;
1080 //$('option_rect_try').value= top;
1081 // var h=shape.getAttributeNS(null, 'height');
1082 //var w=shape.getAttributeNS(null, 'width');
1083 //document.forms[0].code.value= h+' '+w;
1084 //}
1086 if (shape.tagName == 'g')
1088 //this.editor.log(shape.tagName+' ==============');
1090 shape.setAttributeNS(null, 'x', left);
1091 shape.setAttributeNS(null, 'y', top);
1092 shape.childNodes[0].setAttributeNS(null, 'x', left + 'px');
1093 shape.childNodes[0].setAttributeNS(null, 'y', top + 'px');
1094 shape.childNodes[1].setAttributeNS(null, 'x', left + 'px');
1095 shape.childNodes[1].setAttributeNS(null, 'y', top + 'px');
1098 if (shape.tagName == 'image'){
1099 shape.setAttributeNS(null, 'x',left + 'px');
1100 shape.setAttributeNS(null, 'y', top + 'px');
1101 //$('option_img_trx').value= left;
1102 //$('option_img_try').value= top;
1103 var h=shape.getAttributeNS(null, 'height');
1104 var w=shape.getAttributeNS(null, 'width');
1105 // this.editor.log( h+' '+w);
1107 if (shape.tagName == 'text'){
1108 var size=parseFloat(shape.getAttributeNS(null, 'font-size'));
1109 //$('code').value=size;
1110 shape.setAttributeNS(null, 'x', left + 'px');
1111 shape.setAttributeNS(null, 'y', parseFloat(top+size) + 'px');
1112 //$('option_text_trx').value= left;
1113 //$('option_text_try').value= top;
1116 if (shape.tagName == 'line'){
1117 var deltaX = shape.getBBox().width;
1118 var deltaY = shape.getBBox().height;
1119 shape.setAttributeNS(null, 'x1', left + 'px');
1120 shape.setAttributeNS(null, 'y1', top + 'px');
1122 shape.setAttributeNS(null, 'x2', left + deltaX + 'px');
1123 shape.setAttributeNS(null, 'y2', top + deltaY + 'px');
1124 //$('option_line_trx').value= left;
1125 //$('option_line_try').value= top;
1128 if (shape.tagName == 'ellipse'){
1129 var putx=left + (shape.getBBox().width / 2)
1130 var puty= top + (shape.getBBox().height / 2)
1131 shape.setAttributeNS(null, 'cx', putx + 'px');
1132 shape.setAttributeNS(null, 'cy', puty + 'px');
1133 //$('option_ellipse_trx').value= putx;
1134 //$('option_ellipse_try').value= puty;
1137 if (shape.tagName == 'path' || shape.tagName == 'polyline' ) {
1139 if(contmove==1){
1140 xshe=left;
1141 yshe=top;
1143 var path=shape.getAttributeNS(null, 'd');
1144 path=path.replace(/, /g, ',');
1145 path=path.replace(/ ,/g, ',');
1146 var ps =path.split(" ")
1147 var pcc = "";
1148 var point =ps[0].split(",");
1151 var num0= parseFloat(point[0].substring(1));
1152 var num1= parseFloat(point[1]);
1154 var ang= ang2v(box.x,box.y,left,top) ;
1155 var angle = Math.round((ang/Math.PI* 2)* 360);
1156 var angx = Math.cos(ang);
1157 var angy = Math.sin(ang);
1158 var dist= dist2p(left,top,box.x,box.y);
1159 var xinc=dist*angx;
1160 var yinc=dist*angy;
1161 var re = /^[-]?\d*\.?\d*$/;
1162 for(var i = 0; i < ps.length; i++)
1164 if(ps[i].indexOf(',')>0){
1166 var point =ps[i].split(",");
1167 var char1=point[0].substring(0,1);
1168 if(char1=='A' || char1=='a'){isArc=true; contArc=0;}
1169 if(isArc==true){contArc++}
1170 if(contArc==4){contArc=0; isArc=false}
1172 //if (isNaN(valnum))
1173 if (!char1.match(re))
1175 var num0= parseFloat(point[0].substring(1));
1176 var text=char1;
1177 }else{
1178 if(isArc==true && contArc==2 )
1180 var num0= point[0];
1181 }else{
1182 var num0= parseFloat(point[0]);
1184 var text='';
1189 if(isArc==true && contArc==2)
1191 point[1]= point[1].toString() ;
1193 else
1196 num0+=xinc;
1197 point[1]= parseFloat(point[1]);
1198 point[1]+=yinc;
1201 var cx=num0;
1203 var cy=point[1];
1204 pcc+=text+cx+','+cy+' ';
1205 }else{
1206 pcc+=ps[i]+' ';
1210 shape.setAttributeNS(null,'d', pcc);
1215 //$('status').innerHTML=typeTransform+': '+left+' '+top;
1216 //$('option_select_trx').value= left;
1217 //$('option_select_try').value= top;
1221 };
1225 SVGRenderer.prototype.track = function(shape) {
1226 // TODO
1227 };
1230 SVGRenderer.prototype.clic = function(shape) {
1231 var end='';
1232 if(data_path_close==true){end='z';}
1233 var maxcont=setPoints.length;
1234 var thispath='M'+setPoints[0]+' ';
1235 $('someinfo').value=maxcont;
1237 for(var conta=1;conta< maxcont;conta++){
1238 thispath+='L'+setPoints[conta]+' ';
1240 //var pointshape=shape.getAttributeNS(null,"d");
1241 //shape.setAttributeNS(null,'d',thispath+end);
1242 var path=thispath+end;
1244 shape.setAttributeNS(null,'d',path);
1245 $('control_codebase').value=path;
1250 SVGRenderer.prototype.resize = function(shape, fromX, fromY, toX, toY) {
1251 var deltaX = toX - fromX;
1252 var deltaY = toY - fromY;
1254 /* if (lineColor.length == 0){lineColor = 'none';}
1255 if (fillColor.length == 0){fillColor = 'none';}
1256 shape.style.fill = fillColor;
1257 shape.style.stroke = lineColor;
1258 shape.style.strokeWidth = lineWidth;
1259 shape.style.fillOpacity = fillOpac;
1260 shape.style.strokOpacity = lineOpac;
1261 */
1262 if (shape.tagName == 'rect' )
1266 if (deltaX < 0) {
1267 shape.setAttributeNS(null, 'x', toX + 'px');
1268 shape.setAttributeNS(null, 'width', -deltaX + 'px');
1270 else
1272 shape.setAttributeNS(null, 'width', deltaX + 'px');
1275 if (deltaY < 0)
1277 shape.setAttributeNS(null, 'y', toY + 'px');
1278 shape.setAttributeNS(null, 'height', -deltaY + 'px');
1280 else
1282 shape.setAttributeNS(null, 'height', deltaY + 'px');
1284 /*shape.style.fill = fillColor;
1285 shape.style.stroke = lineColor;
1286 shape.style.strokeWidth = lineWidth;
1287 shape.style.fillOpacity = fillOpac;
1288 shape.style.strokOpacity = lineOpac;
1289 */
1293 /* if ( shape.tagName == 'simage' )
1295 var img=shape.firstChild;//nodeName;//nodparseFloatue;//nodes.item(0);
1296 //alert(img);
1297 if (deltaX < 0) {
1298 shape.setAttributeNS(null, 'x', parseFloat(toX) + 'px');
1299 shape.setAttributeNS(null, 'width', parseFloat(-deltaX) + 'px');
1302 else
1304 shape.setAttributeNS(null, 'width', parseFloat(deltaX) + 'px');
1307 if (deltaY < 0)
1309 shape.setAttributeNS(null, 'y', parseFloat(toY) + 'px');
1310 shape.setAttributeNS(null, 'height', parseFloat(-deltaY) + 'px');
1312 else
1314 shape.setAttributeNS(null, 'height', parseFloat(deltaY) + 'px');
1316 var h=shape.getAttributeNS(null, 'height');
1317 var w=shape.getAttributeNS(null, 'width');
1318 document.forms[0].code.value= h+' '+w;
1322 }*/
1323 if (shape.tagName == 'g' || shape.tagName == 'image')
1327 if (deltaX < 0)
1329 shape.setAttributeNS(null, 'x', parseFloat(toX) + 'px' );
1330 shape.setAttributeNS(null, 'width', parseFloat(-deltaX) + 'px');
1334 else
1336 shape.setAttributeNS(null, 'width', parseFloat(deltaX) + 'px');
1339 if (deltaY < 0)
1341 shape.setAttributeNS(null, 'y', parseFloat(toY) + 'px');
1342 shape.setAttributeNS(null, 'height', parseFloat(-deltaY) + 'px' );
1344 else
1346 shape.setAttributeNS(null, 'height', parseFloat(deltaY) + 'px');
1351 if (shape.tagName == 'ellipse') {
1352 if (deltaX < 0) {
1353 shape.setAttributeNS(null, 'cx', (fromX + deltaX / 2) + 'px');
1354 shape.setAttributeNS(null, 'rx', (-deltaX / 2) + 'px');
1356 else {
1357 shape.setAttributeNS(null, 'cx', (fromX + deltaX / 2) + 'px');
1358 shape.setAttributeNS(null, 'rx', (deltaX / 2) + 'px');
1361 if (deltaY < 0) {
1362 shape.setAttributeNS(null, 'cy', (fromY + deltaY / 2) + 'px');
1363 shape.setAttributeNS(null, 'ry', (-deltaY / 2) + 'px');
1365 else {
1366 shape.setAttributeNS(null, 'cy', (fromY + deltaY / 2) + 'px');
1367 shape.setAttributeNS(null, 'ry', (deltaY / 2) + 'px');
1370 if (shape.tagName == 'line') {
1371 shape.setAttributeNS(null, 'x2', toX);
1372 shape.setAttributeNS(null, 'y2', toY);
1374 if (shape.tagName == 'polyline') {
1376 xpArray.push(toX);
1377 ypArray.push(toY);
1378 var thispath=''+xpArray[1]+','+ypArray[1];
1379 var thispath1='';
1380 var thispath2='';
1381 var maxcont=xpArray.length;
1383 for(var conta=2;conta< maxcont;conta++){
1384 thispath1+=' '+xpArray[conta]+' '+ypArray[conta];
1385 thispath2+=' '+xpArray[conta]+', '+ypArray[conta];
1390 shape.setAttributeNS(null,'points',thispath+thispath1);
1395 if (shape.tagName == 'path') {
1397 if (selectmode == 'controlpath')
1399 var end='';
1400 if(data_path_close==true){end='z';}
1402 var thispath='M'+setPoints[0]+' ';
1403 var maxcont=setPoints.length;
1405 for(var conta=1;conta< maxcont;conta++){
1406 thispath+='L'+setPoints[conta]+' ';
1410 var path=thispath+'L'+toX+','+toY+end;
1411 //var pointshape=shape.getAttributeNS(null,"d");
1412 shape.setAttributeNS(null,'d',path);
1413 document.forms[0].control_codebase.value=path;
1415 else
1418 xpArray.push(toX);
1419 ypArray.push(toY);
1421 var thispath=''+xpArray[1]+','+ypArray[1];
1422 var thispath1='';
1423 var thispath2='';
1424 var maxcont=xpArray.length;
1426 for(var conta=2;conta< maxcont;conta++){
1427 //thispath1+=' '+xpArray[conta]+' '+ypArray[conta];
1428 thispath2+=' '+xpArray[conta]+','+ypArray[conta];
1429 //if((conta+2)%3==0){thispath2+=' C';}
1431 var end='';
1432 if(data_path_close==true){end='z';}
1433 shape.setAttributeNS(null,'d','M '+thispath+ ' L'+thispath2+end);
1437 /*
1439 var pointshape=shape.getAttributeNS(null,"points");
1440 var thispoint=' '+toX+' '+toY;
1441 $('status').innerHTML =pointshape;
1442 shape.setAttributeNS(null,'points',pointshape+thispoint)
1443 shape.setAttributeNS(null, 'stroke-width', "25");
1444 shape.setAttributeNS(null, 'fill', "#FFFF00");
1446 //shape.points.push(toX);
1447 //shape.points.push(toY);
1448 //shape.setAttribute("points",pointshape+);
1449 // var maxcont=xpArray.length-1;
1450 var thispath=''+xpArray[1]+','+ypArray[1];
1451 var maxcont=xpArray.length;
1452 //alert(maxcont);
1453 for(var conta=2;conta< maxcont;conta++){
1454 thispath+=','+xpArray[conta]+','+ypArray[conta];
1456 //alert(shape.points[1]);
1457 //shape.setAttribute("points",thispath);
1458 //points.Value = thispath;
1459 var thispath=''+xpArray[1]+','+ypArray[1];
1460 var maxcont=xpArray.length;
1461 //alert(maxcont);
1462 for(var conta=1;conta< maxcont;conta++){
1463 thispath+=','+xpArray[conta]+','+ypArray[conta];
1466 shape.points.Value = thispath;
1467 */
1472 /*
1475 //this.renderer.move(this.selected, this.selectedBounds.x + deltaX, this.selectedBounds.y + deltaY);
1476 // shape.setAttributeNS(null,'transform', "translate("+(toX)+","+(toy)+")");
1480 var thispath=''+xpArray[0]+','+ypArray[0];
1481 var maxcont=xpArray.length;
1482 //shape.setAttributeNS(null,'transform', "translate("+toX+","+toY+")");
1483 for(var conta=1;conta< maxcont;conta++){
1484 thispath+=','+xpArray[conta]+','+ypArray[conta];
1487 shape.setAttributeNS(null, 'x', toX);
1488 shape.setAttributeNS(null, 'y', toY);
1489 shape.setAttributeNS(null, 'points', thispath);
1490 */
1493 if (shape == 'text') {}
1495 };
1496 SVGRenderer.prototype.tocurve = function()
1498 var points=$('control_codebase').value.split('L');
1499 var chain='';
1500 chain+=points[0]+'C';
1501 var numpoints=points.length-1;
1502 for(var a=1;a<numpoints;a++)
1504 if(a%3==0)
1506 chain+=points[a]+'C';
1508 else
1510 chain+=points[a];
1513 if(numpoints%3==0){
1514 chain+=points[numpoints]+'';
1516 if(numpoints%3==2){
1517 chain+=points[numpoints-1]+'';
1518 chain+=points[numpoints]+'';
1520 if(numpoints%3==1){
1521 chain+=points[numpoints-1]+'';
1522 chain+=points[numpoints-1]+'';
1523 chain+=points[numpoints]+'';
1525 if(numpoints%3==3){
1526 chain+=points[numpoints-1]+'';
1527 chain+=points[numpoints-1]+'';
1528 chain+=points[numpoints-1]+'';
1529 chain+=points[numpoints]+'';
1532 $('someinfo').value=numpoints+ ' '+ numpoints%3;
1533 $('control_codebase').value=chain;
1534 setShape();
1535 };
1538 SVGRenderer.prototype.info = function(shape)
1540 var shInfo = {};
1541 //shInfo.id =null;
1542 //if(shInfo.id !=null){
1543 if(shape.id != "tracker")
1545 if(shape.getAttribute('id')==null){
1546 var nid='shape:' + createUUID();
1547 shape.setAttributeNS(null, 'id', nid);
1548 //shInfo.id = shape.id.substr(6);
1551 shInfo.id =shape.getAttribute('id');
1552 shInfo.type = shape.tagName;
1554 if(shape.tagName=='svg')
1556 shInfo.type ='doc'
1557 shInfo.left = parseFloat(shape.getAttribute('x'));
1558 shInfo.top = parseFloat(shape.getAttribute('y'));
1559 shInfo.width = parseFloat(shape.getAttribute('width'));
1560 shInfo.height = parseFloat(shape.getAttribute('height'));
1561 shInfo.viewBox = shape.getAttribute('viewBox');
1562 shInfo.bgcolor=this.container.style.backgroundColor;
1564 return shInfo;
1566 else
1573 if (shape.hasAttributeNS(null,'transform')) {
1574 shInfo.transform = shape.getAttribute('transform');
1575 }else{
1576 shInfo.transform ='';
1579 if (shape.tagName =='defs')
1581 //alert('dfasd');
1582 if(shape.getAttribute('id')==null || shape.getAttribute('id')=='')
1585 //var nid='shape:' + createUUID();
1586 shape.setAttributeNS(null, 'id', 'defs');
1587 shInfo.id=shape.getAttribute('id');
1589 shInfo.id=shape.getAttribute('id');
1591 if (shape.tagName == 'feGaussianBlur')
1593 shInfo.left = shape.getAttribute('stdDeviation');
1596 if(shape.tagName == "text"){
1598 shInfo.textFamily = shape.getAttribute('font-family')
1599 shInfo.textSize = parseInt(shape.getAttribute('font-size'))
1600 shInfo.top = parseFloat(shape.getAttribute('y'))
1601 shInfo.left = parseFloat(shape.getAttribute('x'))
1602 shInfo.text = shape.textContent
1603 shInfo.lineWidth = parseFloat(shape.getAttribute('stroke-width'))
1605 //shInfo.text = shape.nodparseFloatue;
1607 var rendering=true;
1608 if(shape.tagName =='image'){rendering=false;}
1609 if(shape.tagName =='defs'){rendering=false;}
1610 if(shape.tagName =='svg'){rendering=false;}
1611 if(shape.tagName =='stop'){rendering=false;}
1613 if(shape.tagName =='filter'){rendering=false;}
1614 if(shape.tagName =='feGaussianBlur'){rendering=false;}
1617 if(rendering==true)
1619 shInfo.fillColor = shape.getAttribute('fill');
1620 if((shape.getAttribute('fill')=='' || shape.getAttribute('fill')==null) && shape.parentNode.getAttribute('id')!='svg'){
1622 shInfo.fillColor = shape.parentNode.getAttribute('fill');
1623 var mystyle= shape.parentNode.getAttribute('style');
1624 if(mystyle!= null && mystyle.indexOf('<![CDATA[')>=0)
1628 else
1630 if(mystyle!= null){
1631 //var estilo=shape.getAttribute('style');
1632 var data;
1634 var estilo=generateJSON(mystyle);
1635 eval("data="+estilo);
1636 //var data=eval('"'+estilo+'"');
1637 //var data=estilo.evalJSON();
1639 (data["font-size"])?shInfo.textSize=data["font-size"]:shInfo.textSize;
1640 (data["font-family"])?shInfo.textFamily=data["font-family"]:shInfo.textFamily;
1642 (data.fill)?shInfo.fillColor=data.fill:shInfo.fillColor;
1643 (data.stroke)?shInfo.lineColor=data.stroke:shInfo.lineColor;
1644 (data.transform)?shInfo.transform=data.transform:shInfo.transform;
1645 (data["fill-opacity"])?shInfo.fillOpac=data["fill-opacity"]:shInfo.fillOpac;
1651 shInfo.filter = shape.getAttribute('filter')
1652 shInfo.lineColor = shape.getAttribute('stroke')
1653 shInfo.fillOpac = parseFloat(shape.getAttribute('fill-opacity'))
1654 shInfo.lineOpac = parseFloat(shape.getAttribute('stroke-opacity'))
1655 shInfo.lineWidth = parseFloat(shape.getAttribute('stroke-width'))
1657 var mystyle= shape.getAttribute('style');
1659 if(mystyle!= null && mystyle.indexOf('<![CDATA[')>=0)
1663 else
1665 // shInfo.style=shape.getAttribute('style');
1667 if(mystyle!= null){
1668 //var estilo=shape.getAttribute('style');
1669 var data;
1671 var estilo=generateJSON(mystyle);
1672 eval("data="+estilo);
1673 //var data=eval('"'+estilo+'"');
1674 //var data=estilo.evalJSON();
1676 (data["font-size"])?shInfo.textSize=data["font-size"]:shInfo.textSize;
1677 (data["font-family"])?shInfo.textFamily=data["font-family"]:shInfo.textFamily;
1679 (data.fill)?shInfo.fillColor=data.fill:shInfo.fillColor;
1680 (data.stroke)?shInfo.lineColor=data.stroke:shInfo.lineColor;
1681 (data.transform)?shInfo.transform=data.transform:shInfo.transform;
1682 (data["fill-opacity"])?shInfo.fillOpac=data["fill-opacity"]:shInfo.fillOpac;
1683 //(data.color)?shInfo.lineColor=data.color:shInfo.lineColor;
1685 //shInfo.fillColor=data.fill;
1686 //document.getElementById("someinfo").value +=data.fill+' ';//estilo ;//data['fill']+' ';//
1692 if (shape.tagName == 'rect')
1694 if(shape.getAttribute('rx') || shape.getAttribute('ry')){
1695 shInfo.type = "rect";
1696 shInfo.rx = parseFloat(shape.getAttribute('rx'))
1697 shInfo.ry = parseFloat(shape.getAttribute('rx'))
1699 shInfo.left = parseFloat(shape.getAttribute( 'x'));
1700 shInfo.top = parseFloat(shape.getAttribute( 'y'));
1701 shInfo.width = parseFloat(shape.getAttribute('width'));
1702 shInfo.height = parseFloat(shape.getAttribute('height'));
1704 else if (shape.tagName == 'ellipse' || shape.tagName == 'circle')
1706 if(shape.tagName == 'circle'){
1707 shInfo.width = parseFloat(shape.getAttribute('r'))*2;
1708 shInfo.height = parseFloat(shape.getAttribute('r'))*2;
1709 }else{
1710 shInfo.width = parseFloat(shape.getAttribute('rx'))*2;
1711 shInfo.height = parseFloat(shape.getAttribute('ry'))*2;
1714 shInfo.left = parseFloat(shape.getAttribute('cx')) - (shInfo.width/2);
1715 shInfo.top = parseFloat(shape.getAttribute('cy')) - (shInfo.height/2) ;
1717 else if(shape.tagName == 'linearGradient') {
1718 shInfo.text =shape.getAttribute('gradientUnits');//"userSpaceOnUse"
1719 shInfo.left = shape.getAttribute('x1');
1720 shInfo.top = shape.getAttribute('y1');
1721 shInfo.width = shape.getAttribute('x2');
1722 shInfo.height = shape.getAttribute('y2');
1723 shInfo.href = shape.getAttribute('xlink:href');
1725 else if(shape.tagName == 'radialGradient') {
1726 shInfo.text =shape.getAttribute('gradientUnits');//"userSpaceOnUse"
1727 shInfo.left = shape.getAttribute('cx');
1728 shInfo.top = shape.getAttribute('cy');
1729 shInfo.width = shape.getAttribute('fx');
1730 shInfo.height = shape.getAttribute('fy');
1731 shInfo.lineWidth = shape.getAttribute('r');
1732 shInfo.href = shape.getAttribute('xlink:href');
1734 else if(shape.tagName == 'stop')
1736 shInfo.fillColor = shape.getAttribute('stop-color');
1737 shInfo.fillOpac = shape.getAttribute('stop-opacity');
1738 shInfo.lineOpac = shape.getAttribute('offset');
1739 var mystyle= shape.getAttribute('style');
1740 if(mystyle!= null && mystyle.indexOf('<![CDATA[')>=0)
1744 else
1746 if(mystyle!= null)
1748 var data;
1749 var estilo=generateJSON(mystyle);
1750 eval("data="+estilo);
1751 (data["stop-color"])?shInfo.fillColor=data["stop-color"]:shInfo.fillColor;
1752 (data["stop-opacity"])?shInfo.fillOpac=data["stop-opacity"]:shInfo.fillOpac;
1753 //document.getElementById("someinfo").value +=data["stop-color"]+' ';
1757 else if (shape.tagName == 'line')
1759 shInfo.left = parseFloat(shape.getAttribute('x1'));
1760 shInfo.top = parseFloat(shape.getAttribute('y1'));
1761 shInfo.width = parseFloat(shape.getAttribute('x2')) -shInfo.left;
1762 shInfo.height = parseFloat(shape.getAttribute('y2')) -shInfo.top;
1764 else if (shape.tagName == 'polyline' || shape.tagName == 'polygon')
1766 shInfo.points = shape.getAttribute('points');
1769 else if (shape.tagName == 'g')
1771 shInfo.type = "group";
1772 shInfo.left = parseFloat(shape.getAttribute( 'x'));
1773 shInfo.top = parseFloat(shape.getAttribute( 'y'));
1774 shInfo.width = parseFloat(shape.getAttribute('width'));
1775 shInfo.height = parseFloat(shape.getAttribute('height'));
1776 shInfo.fillColor = shape.getAttribute('fill');
1777 if(shape.getAttribute('id')==null || shape.getAttribute('id')=='')
1779 var nid='shape:' + createUUID();
1780 shape.setAttributeNS(null, 'id', nid);
1781 shInfo.id=shape.getAttribute('id');
1785 else if (shape.tagName == 'path')
1787 shInfo.points = shape.getAttribute('d');
1788 //shInfo.transform = shape.getAttribute('transform');
1790 //alert(shInfo.transform);
1791 //document.forms[0].codebase.value=shape.getAttribute('d');
1794 else if (shape.tagName == 'pattern')
1797 shInfo.left = parseFloat(shape.getAttribute( 'x'));
1798 shInfo.top = parseFloat(shape.getAttribute( 'y'));
1799 shInfo.width = parseFloat(shape.getAttribute('width'));
1800 shInfo.height = parseFloat(shape.getAttribute('height'));
1801 shInfo.viewBox = shape.getAttribute('viewBox');
1803 if(shape.getAttribute('id')==null || shape.getAttribute('id')=='')
1805 var nid='shape:' + createUUID();
1806 shape.setAttributeNS(null, 'id', nid);
1807 shInfo.id=shape.getAttribute('id');
1811 else if (shape.tagName == 'image')
1814 shInfo.left = parseFloat(shape.getAttribute( 'x'));
1815 shInfo.top = parseFloat(shape.getAttribute( 'y'));
1816 shInfo.width = parseFloat(shape.getAttribute('width'));
1817 shInfo.height = parseFloat(shape.getAttribute('height'));
1818 shInfo.fillOpac = parseFloat(shape.getAttribute('opacity'));
1819 shInfo.href = shape.getAttribute('href');
1822 else if (shape.tagName == 'use')
1825 shInfo.href = shape.getAttribute('xlink:href');
1828 if(shape.parentNode.tagName != 'svg'){
1829 //shInfo.width = parseFloat(shape.getAttribute('width'));
1830 //shInfo.height = parseFloat(shape.getAttribute('height'));
1831 //shInfo.viewBox = shape.getAttribute('viewBox');
1832 shInfo.parent=shape.parentNode.getAttribute('id');
1836 return shInfo;
1837 }else{
1838 //do nothing if its the tracker
1843 };
1845 SVGRenderer.prototype.info01 = function(shape)
1847 var shInfo = {};
1848 if(shape.id != "tracker"){
1849 //shInfo.id = shape.id.substr(6);
1850 shInfo.id =shape.getAttribute('id');
1851 shInfo.type = shape.tagName;
1853 if(shape.tagName=='svg')
1855 shInfo.type ='doc'
1856 shInfo.left = parseFloat(shape.getAttribute('x'));
1857 shInfo.top = parseFloat(shape.getAttribute('y'));
1858 shInfo.width = parseFloat(shape.getAttribute('width'));
1859 shInfo.height = parseFloat(shape.getAttribute('height'));
1860 shInfo.viewBox = shape.getAttribute('viewBox');
1861 shInfo.bgcolor=this.container.style.backgroundColor;
1864 if (shape.hasAttributeNS(null,'transform')) {
1865 shInfo.transform = shape.getAttribute('transform');
1866 }else{
1867 shInfo.transform ='';
1870 if(shape.tagName == "text"){
1872 shInfo.textFamily = shape.getAttribute('font-family')
1873 shInfo.textSize = parseInt(shape.getAttribute('font-size'))
1874 shInfo.top = parseFloat(shape.getAttribute('y'))
1875 shInfo.left = parseFloat(shape.getAttribute('x'))
1876 shInfo.text = shape.textContent
1877 shInfo.lineWidth = parseFloat(shape.getAttribute('stroke-width'))
1879 //shInfo.text = shape.nodparseFloatue;
1881 var styled=true;
1882 if(shape.tagName =='image'){styled=false;}
1883 if(shape.tagName =='g'){styled=false;}
1884 if(shape.tagName =='stop'){styled=false;}
1885 if(shape.tagName =='svg'){styled=false;}
1886 if(styled)
1888 shInfo.fillColor = shape.getAttribute('fill')
1889 shInfo.lineColor = shape.getAttribute('stroke')
1890 shInfo.fillOpac = parseFloat(shape.getAttribute('fill-opacity'))
1891 shInfo.lineOpac = parseFloat(shape.getAttribute('stroke-opacity'))
1892 shInfo.lineWidth = parseFloat(shape.getAttribute('stroke-width'))
1894 var mystyle= shape.getAttribute('style');
1896 if(mystyle!= null && mystyle.indexOf('<![CDATA[')>=0)
1900 else
1902 // shInfo.style=shape.getAttribute('style');
1904 if(mystyle!= null){
1905 //var estilo=shape.getAttribute('style');
1906 var data;
1908 var estilo=generateJSON(mystyle);
1909 eval("data="+estilo);
1910 //var data=eval('"'+estilo+'"');
1911 //var data=estilo.evalJSON();
1913 (data["font-size"])?shInfo.textSize=data["font-size"]:shInfo.textSize;
1914 (data["font-family"])?shInfo.textFamily=data["font-family"]:shInfo.textFamily;
1916 (data.fill)?shInfo.fillColor=data.fill:shInfo.fillColor;
1917 (data.stroke)?shInfo.lineColor=data.stroke:shInfo.lineColor;
1918 (data.transform)?shInfo.transform=data.transform:shInfo.transform;
1919 (data["fill-opacity"])?shInfo.fillOpac=data["fill-opacity"]:shInfo.fillOpac;
1920 //shInfo.fillColor=data.fill;
1921 //document.getElementById("someinfo").value +=data.fill+' ';//estilo ;//data['fill']+' ';//
1927 if (shape.tagName == 'rect')
1929 if(shape.getAttribute('rx') || shape.getAttribute('ry')){
1930 shInfo.type = "rect";
1931 shInfo.rx = parseFloat(shape.getAttribute('rx'))
1932 shInfo.ry = parseFloat(shape.getAttribute('rx'))
1934 shInfo.left = parseFloat(shape.getAttribute( 'x'));
1935 shInfo.top = parseFloat(shape.getAttribute( 'y'));
1936 shInfo.width = parseFloat(shape.getAttribute('width'));
1937 shInfo.height = parseFloat(shape.getAttribute('height'));
1939 else if (shape.tagName == 'ellipse' || shape.tagName == 'circle')
1941 if(shape.tagName == 'circle'){
1942 shInfo.width = parseFloat(shape.getAttribute('r'))*2;
1943 shInfo.height = parseFloat(shape.getAttribute('r'))*2;
1944 }else{
1945 shInfo.width = parseFloat(shape.getAttribute('rx'))*2;
1946 shInfo.height = parseFloat(shape.getAttribute('ry'))*2;
1949 shInfo.left = parseFloat(shape.getAttribute('cx')) - (shInfo.width/2);
1950 shInfo.top = parseFloat(shape.getAttribute('cy')) - (shInfo.height/2) ;
1952 else if(shape.tagName == 'linearGradient') {
1953 shInfo.left = (shape.getAttribute( 'x1'));
1954 shInfo.top = parseFloat(shape.getAttribute( 'y1'));
1955 shInfo.width = parseFloat(shape.getAttribute('x2'));
1956 shInfo.height = parseFloat(shape.getAttribute('y2'));
1959 else if(shape.tagName == 'stop') {
1960 shInfo.fillColor = shape.getAttribute('stop-color');
1961 shInfo.fillOpac = shape.getAttribute('stop-opacity');
1962 shInfo.lineOpac = shape.getAttribute('offset');
1963 var mystyle= shape.getAttribute('style');
1964 if(mystyle!= null && mystyle.indexOf('<![CDATA[')>=0)
1968 else
1970 if(mystyle!= null){
1971 var data;
1972 var estilo=generateJSON(mystyle);
1973 eval("data="+estilo);
1974 (data["stop-color"])?shInfo.fillColor=data["stop-color"]:shInfo.fillColor;
1975 (data["stop-opacity"])?shInfo.fillOpac=data["stop-opacity"]:shInfo.fillOpac;
1976 document.getElementById("someinfo").value +=data["stop-color"]+' ';
1981 else if (shape.tagName == 'line')
1983 shInfo.left = parseFloat(shape.getAttribute('x1'));
1984 shInfo.top = parseFloat(shape.getAttribute('y1'));
1985 shInfo.width = parseFloat(shape.getAttribute('x2')) -shInfo.left;
1986 shInfo.height = parseFloat(shape.getAttribute('y2')) -shInfo.top;
1988 else if (shape.tagName == 'polyline')
1990 shInfo.points = shape.getAttribute('points');
1992 else if (shape.tagName == 'g')
1994 shInfo.type = "group";
1995 shInfo.left = parseFloat(shape.getAttribute( 'x'));
1996 shInfo.top = parseFloat(shape.getAttribute( 'y'));
1997 shInfo.width = parseFloat(shape.getAttribute('width'));
1998 shInfo.height = parseFloat(shape.getAttribute('height'));
1999 shInfo.fillColor = shape.getAttribute('fill')
2002 else if (shape.tagName == 'path')
2004 shInfo.points = shape.getAttribute('d');
2005 //shInfo.transform = shape.getAttribute('transform');
2007 //alert(shInfo.transform);
2008 //document.forms[0].codebase.value=shape.getAttribute('d');
2011 else
2014 if (shape.tagName == 'image')
2017 shInfo.left = parseFloat(shape.getAttribute( 'x'));
2018 shInfo.top = parseFloat(shape.getAttribute( 'y'));
2019 shInfo.width = parseFloat(shape.getAttribute('width'));
2020 shInfo.height = parseFloat(shape.getAttribute('height'));
2021 shInfo.fillOpac = parseFloat(shape.getAttribute('opacity'));
2022 shInfo.href = shape.getAttribute('href');
2025 if(shape.parentNode.tagName != 'svg'){
2026 //shInfo.width = parseFloat(shape.getAttribute('width'));
2027 //shInfo.height = parseFloat(shape.getAttribute('height'));
2028 //shInfo.viewBox = parseFloat(shape.getAttribute('viewBox'));
2029 shInfo.parent=shape.parentNode.getAttribute('id');
2032 return shInfo;
2033 }else{
2034 //do nothing if its the tracker
2039 };
2040 SVGRenderer.prototype.info01 = function(shape)
2043 var shInfo = {};
2044 if(shape.id != "tracker"){
2045 shInfo.id = shape.id.substr(6);
2046 shInfo.type = shape.tagName;
2047 if (shape.hasAttributeNS(null,'transform')) {
2048 shInfo.transform = shape.getAttribute('transform');
2049 }else{
2050 shInfo.transform ='';
2054 //if(shape.tagName !='image')
2055 // {
2056 shInfo.fillColor = shape.getAttribute('fill')
2057 shInfo.lineColor = shape.getAttribute('stroke')
2058 shInfo.fillOpac = parseFloat(shape.getAttribute('fill-opacity'))
2059 shInfo.lineOpac = parseFloat(shape.getAttribute('stroke-opacity'))
2060 shInfo.lineWidth = parseFloat(shape.getAttribute('stroke-width'))
2061 // }
2064 if (shape.tagName == 'rect')
2066 if(shape.getAttribute('rx') || shape.getAttribute('ry')){
2067 shInfo.type = "roundrect";
2068 shInfo.rx = parseFloat(shape.getAttribute('rx'))
2069 shInfo.ry = parseFloat(shape.getAttribute('rx'))
2071 shInfo.left = parseFloat(shape.getAttribute( 'x'));
2072 shInfo.top = parseFloat(shape.getAttribute( 'y'));
2073 shInfo.width = parseFloat(shape.getAttribute('width'));
2074 shInfo.height = parseFloat(shape.getAttribute('height'));
2076 else if (shape.tagName == 'ellipse')
2078 shInfo.width = parseFloat(shape.getAttribute('rx'))*2;
2079 shInfo.height = parseFloat(shape.getAttribute('ry'))*2;
2080 shInfo.left = parseFloat(shape.getAttribute('cx')) - (shInfo.width/2);
2081 shInfo.top = parseFloat(shape.getAttribute('cy')) - (shInfo.height/2) ;
2084 else if (shape.tagName == 'line')
2086 shInfo.left = parseFloat(shape.getAttribute('x1'));
2087 shInfo.top = parseFloat(shape.getAttribute('y1'));
2088 shInfo.width = parseFloat(shape.getAttribute('x2')) -shInfo.left;
2089 shInfo.height = parseFloat(shape.getAttribute('y2')) -shInfo.top;
2091 else if (shape.tagName == 'polyline')
2093 shInfo.points = shape.getAttribute('points');
2095 else
2097 if (shape.tagName == 'path')
2099 shInfo.d = shape.getAttribute('d');
2100 //shInfo.transform = shape.getAttribute('transform');
2102 //alert(shInfo.transform);
2103 //document.forms[0].codebase.value=shape.getAttribute('d');
2106 else
2108 if(shape.tagName == "text"){
2110 shInfo.textFamily = shape.getAttribute('font-family')
2111 shInfo.textSize = parseInt(shape.getAttribute('font-size'))
2112 shInfo.top = parseFloat(shape.getAttribute('y'))
2113 shInfo.left = parseFloat(shape.getAttribute('x'))
2114 shInfo.text = shape.textContent
2115 shInfo.lineWidth = parseFloat(shape.getAttribute('stroke-width'))
2117 //shInfo.text = shape.nodparseFloatue;
2119 else
2121 if (shape.tagName == 'image')
2124 shInfo.left = parseFloat(shape.getAttribute( 'x'));
2125 shInfo.top = parseFloat(shape.getAttribute( 'y'));
2126 shInfo.width = parseFloat(shape.getAttribute('width'));
2127 shInfo.height = parseFloat(shape.getAttribute('height'));
2128 shInfo.fillOpac = parseFloat(shape.getAttribute('opacity'));
2129 shInfo.href = shape.getAttribute('href');
2133 return shInfo;
2134 }else{
2135 //do nothing if its the tracker
2145 SVGRenderer.prototype.transformShape = function(shape,data,transform)
2147 var svgNamespace = 'http://www.w3.org/2000/svg';
2148 var xlinkNS="http://www.w3.org/1999/xlink";
2149 //
2151 if(shape.tagName == 'rect')
2153 var box = shape.getBBox();
2154 var sdata=data.split(';');
2156 //alert(data[0]);
2157 shape.setAttributeNS(null,'x',parseFloat(sdata[0]));
2158 shape.setAttributeNS(null,'y',parseFloat(sdata[1]));
2159 shape.setAttributeNS(null, 'width', parseFloat(sdata[2]));
2160 shape.setAttributeNS(null, 'height', parseFloat(sdata[3]));
2161 var centerx=parseFloat(sdata[0])+parseFloat(box.width/2);
2162 var centery=parseFloat(sdata[1])+parseFloat(box.height/2);
2163 shape.setAttributeNS(null, 'transform','rotate('+parseFloat(sdata[4])+','+centerx+','+centery+')');
2165 //shape.nodparseFloatue=data;
2167 else
2168 if(shape.tagName == 'text')
2170 if(data.indexOf('<;>',0)==-1 )
2172 shape.textContent = data;
2174 else
2176 var sdata=data.split('<;>'); //?????????
2177 shape.textContent = sdata[0];
2178 shape.setAttributeNS(null,'font-size',parseFloat(sdata[1]));
2179 shape.setAttributeNS(null,'font-family',sdata[2]);
2181 //shape.nodparseFloatue=data;
2183 else
2184 if (shape.tagName == 'polyline')
2186 shape.setAttributeNS(null,'points',data);
2188 else
2189 if (shape.tagName == 'image')
2191 //alert(data);
2192 if(data.indexOf(';',0)==-1 )
2194 shape.setAttributeNS(xlinkNS,'href',data);
2196 else
2198 var box = shape.getBBox();
2199 var sdata=data.split(';');
2200 shape.setAttributeNS(null,'x',parseFloat(sdata[0]));
2201 shape.setAttributeNS(null,'y',parseFloat(sdata[1]));
2202 shape.setAttributeNS(null, 'width', parseFloat(sdata[2]));
2203 shape.setAttributeNS(null, 'height',parseFloat(sdata[3]));
2204 var centerx=parseFloat(sdata[0])+parseFloat(box.width/2);
2205 var centery=parseFloat(sdata[1])+parseFloat(box.height/2);
2206 shape.setAttributeNS(null, 'transform',' rotate('+parseFloat(sdata[4])+','+centerx+','+centery+')');
2212 else
2213 if (shape.tagName == 'path')
2215 if(data.indexOf(';',0)==-1 )
2217 shape.setAttributeNS(null, 'd', data);
2218 shape.setAttributeNS(null, 'transform', transform);
2220 else
2222 var box = shape.getBBox();
2223 var sdata=data.split(';');
2224 var centerx=parseFloat(sdata[0])+parseFloat(box.width/2);
2225 var centery=parseFloat(sdata[1])+parseFloat(box.height/2);
2226 shape.setAttributeNS(null, 'transform','scale('+parseFloat(sdata[2])+','+parseFloat(sdata[3])+')'+' rotate('+parseFloat(sdata[4])+','+centerx+','+centery+')'+' translate('+parseFloat(sdata[0])+','+parseFloat(sdata[1])+')');
2234 SVGRenderer.prototype.editShape = function(shape,data)
2236 if(shape.tagName == 'text'){
2237 shape.textContent = data
2238 }else
2239 if (shape.tagName == 'polyline')
2241 shape.setAttributeNS(null,'points',data);
2243 else
2245 if (shape.tagName == 'path')
2247 shape.setAttributeNS(null, 'd', data);
2252 SVGRenderer.prototype.editCommand = function(shape, cmd, value)
2254 if (shape != null) {
2255 if (cmd == 'fillcolor') {
2256 if (value != '')
2257 shape.setAttributeNS(null, 'fill', value);
2258 else
2259 shape.setAttributeNS(null, 'fill', 'none');
2261 else if (cmd == 'linecolor') {
2262 if (value != '')
2263 shape.setAttributeNS(null, 'stroke', value);
2264 else
2265 shape.setAttributeNS(null, 'stroke', 'none');
2267 else if (cmd == 'linewidth') {
2268 shape.setAttributeNS(null, 'stroke-width', parseInt(value) + 'px');
2270 else if (cmd == 'fillopacity') {
2271 if(shape.tagName=='image')
2273 shape.setAttributeNS(null, 'opacity', parseFloat(value));
2275 else
2277 shape.setAttributeNS(null, 'fill-opacity', parseFloat(value));
2281 else if (cmd == 'lineopacity') {
2283 shape.setAttributeNS(null, 'stroke-opacity', parseFloat(value));
2291 SVGRenderer.prototype.queryCommand = function(shape, cmd)
2293 var result = '';
2295 if (shape != null) {
2296 if (cmd == 'fillcolor') {
2297 result = shape.getAttributeNS(null, 'fill');
2298 if (result == 'none')
2299 result = '';
2301 else if (cmd == 'linecolor') {
2302 result = shape.getAttributeNS(null, 'stroke');
2303 if (result == 'none')
2304 result = '';
2306 else if (cmd == 'linewidth') {
2307 result = shape.getAttributeNS(null, 'stroke');
2308 if (result == 'none')
2309 result = '';
2310 else
2311 result = shape.getAttributeNS(null, 'stroke-width');
2313 else if (cmd == 'fillopacity') {
2314 if(shape.tagName=='image')
2316 shape.setAttributeNS(null, 'opacity', parseFloat(value));
2318 else
2320 shape.setAttributeNS(null, 'fill-opacity', parseFloat(value));
2324 else if (cmd == 'lineopacity') {
2326 shape.setAttributeNS(null, 'stroke-opacity', parseFloat(value));
2332 return result;
2335 SVGRenderer.prototype.getProperties = function(shape)
2337 var result = '';
2339 if (shape != null)
2341 result = shape.getAttributeNS(null, 'fill');
2342 if (result == 'none')
2344 mefillColor.visible = 'hidden';
2345 mefillColor.hex = '#000000';
2346 filldraw=true;
2347 setbe(1,'img_okfill');
2349 else
2351 //alert(mefillColor.hex+' '+result);
2352 mefillColor.visible = 'visible';
2353 mefillColor.hex = result;
2354 var rgb=hex2rgb(result)
2355 mefillColor.r=rgb[0];
2356 mefillColor.g=rgb[1];
2357 mefillColor.b=rgb[2];
2358 filldraw=false;
2359 setbe(1,'img_okfill');
2363 result = shape.getAttributeNS(null, 'stroke');
2364 if (result == 'none')
2366 mestrokeColor.visible = 'hidden';
2367 mestrokeColor.hex = '#000000';
2368 mestrokeColor.width = 0;
2369 strokedraw=true;
2370 setbe(2,'img_okstroke');
2373 else
2375 mestrokeColor.visible = 'visible';
2376 mestrokeColor.hex = result;
2377 var rgb=hex2rgb(result)
2378 mestrokeColor.r=rgb[0];
2379 mestrokeColor.g=rgb[1];
2380 mestrokeColor.b=rgb[2];
2381 strokedraw=false;
2382 setbe(2,'img_okstroke');
2386 result = shape.getAttributeNS(null, 'stroke-width');
2387 mestrokeColor.width = result;
2389 result = shape.getAttributeNS(null, 'fill-opacity');
2390 mefillColor.opacity = result;
2392 result = shape.getAttributeNS(null, 'stroke-opacity');
2393 mestrokeColor.opacity = result;
2395 setProperties();
2400 SVGRenderer.prototype.showMultiSelect = function(iniX,iniY) {
2401 var tracker = document.getElementById('trackerMultiSelect');
2402 if (tracker) {
2403 this.remove(tracker);
2406 var coord=this.editor.viewInputxy;
2407 toX=parseFloat(coord[0]);
2408 toY=parseFloat(coord[1]);
2410 tracker = document.createElementNS(svgNamespace, 'rect');
2412 tracker.setAttributeNS(null, 'x', iniX);
2413 tracker.setAttributeNS(null, 'y', iniY);
2414 tracker.setAttributeNS(null, 'width', toX);
2415 tracker.setAttributeNS(null, 'height', toY);
2416 tracker.setAttributeNS(null, 'fill', '#ffffff');
2417 tracker.setAttributeNS(null, 'stroke', 'green');
2418 tracker.setAttributeNS(null, 'stroke-width', widthLine);
2420 this.svgRoot.appendChild(tracker);
2424 function mouseCoord()
2426 var coord=this.editor.viewInputxy;
2427 coord[0]=parseFloat(coord[0]);
2428 coord[1]=parseFloat(coord[1]);
2429 return coord
2431 /*
2432 function nodeHit(node)
2434 node.addEventListener("mousemove", function(event) {nodeMove(node)}, false);
2438 function nodeUp(node)
2440 //node.stopObserving("mousemove");
2443 function nodeMove(node)
2445 var mypath=$('control_codebase').value;
2446 var x= $('option_path_x').value;
2447 var y= $('option_path_y').value;
2448 var precoord=x+','+y;
2449 var coord=mouseCoord();
2450 node.setAttributeNS(null, 'x', coord[0]-2);
2451 node.setAttributeNS(null, 'y', coord[1]-2);
2453 $('option_path_x').value=parseFloat(node.getAttributeNS(null,'x'))+2;
2454 $('option_path_y').value=parseFloat(node.getAttributeNS(null,'y'))+2;
2456 var cadx= $('option_path_x').value;
2457 var cady= $('option_path_y').value;
2458 var coord=cadx+','+cady;
2459 var cad1=new RegExp(precoord,"g");
2462 var result=mypath.replace(cad1, coord);
2465 $('control_codebase').value=result;
2467 $('someinfo').value=precoord;
2468 setShape();
2473 */
2475 var memoNode=null;
2476 var memoPrevControl=new Array();
2477 var memoNextControl=new Array();
2479 SVGRenderer.prototype.nodeMove = function(newx,newy) {
2480 var mypath=$('control_codebase').value;
2481 var x= $('option_path_x').value;
2482 var y= $('option_path_y').value;
2483 var precoord=x+','+y;
2485 $('option_path_x').value=newx;
2486 $('option_path_y').value=newy;
2488 var cadx= newx;
2489 var cady= newy;
2491 var coord=cadx+','+cady;
2492 var cad1=new RegExp(precoord,"g");
2495 var result=mypath.replace(cad1, coord);
2498 $('control_codebase').value=result;
2500 $('someinfo').value=precoord;
2501 setShape();
2505 function drawNodeControl(svg,numId){
2507 var svgNamespace = 'http://www.w3.org/2000/svg';
2508 var color1='#0066ff';
2509 // if(parseInt(memoNode.id)==a){
2511 var pointprev=memoPrevControl[numId].split(',');
2513 var controlNode1 = document.createElementNS(svgNamespace, 'rect');
2514 controlNode1.setAttributeNS(null, 'x', pointprev[0]-widthLine*2);
2515 controlNode1.setAttributeNS(null, 'y', pointprev[1]-widthLine*2);
2517 controlNode1.setAttributeNS(null, 'width', widthLine*4);
2518 controlNode1.setAttributeNS(null, 'height', widthLine*4);
2519 controlNode1.setAttributeNS(null, 'fill', color1);
2520 controlNode1.setAttributeNS(null, 'stroke', '#000000');
2521 controlNode1.setAttributeNS(null, 'stroke-width', '0');
2522 controlNode1.setAttributeNS(null, 'id', 'controlNode1');
2523 controlNode1.addEventListener("mousedown", function(event) {if(memoNode != null){memoNode.setAttributeNS(null, 'stroke-width', 0 );} memoNode=this; this.setAttributeNS(null, 'fill-color', '#ffff00' );this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2; }, false);
2524 svg.appendChild(controlNode1);
2526 var pointnext=memoNextControl[numId].split(',');
2529 var controlNode2 = document.createElementNS(svgNamespace, 'rect');
2530 controlNode2.setAttributeNS(null, 'x', pointnext[0]-widthLine*2);
2531 controlNode2.setAttributeNS(null, 'y', pointnext[1]-widthLine*2);
2533 controlNode2.setAttributeNS(null, 'width', widthLine*4);
2534 controlNode2.setAttributeNS(null, 'height', widthLine*4);
2535 controlNode2.setAttributeNS(null, 'fill', color1);
2536 controlNode2.setAttributeNS(null, 'stroke', '#000000');
2537 controlNode2.setAttributeNS(null, 'stroke-width', '0');
2538 controlNode2.setAttributeNS(null, 'id', 'controlNode1');
2539 controlNode2.addEventListener("mousedown", function(event) {if(memoNode != null){memoNode.setAttributeNS(null, 'stroke-width', 0 );} memoNode=this; this.setAttributeNS(null, 'fill-color', '#ffff00' );this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2; }, false);
2540 svg.appendChild(controlNode2);
2542 //}
2547 SVGRenderer.prototype.showNodesCurve = function(path,controlNodeNum){
2548 memoNextControl=new Array();
2549 memoPrevControl=new Array();
2550 var widthLine=this.editor.unit;
2551 var svgNamespace = 'http://www.w3.org/2000/svg';
2552 // tracker = document.createElementNS(svgNamespace, 'g');
2553 var svg = this.container.ownerDocument.createElementNS(svgNamespace, 'g');
2554 svg.setAttributeNS(null, 'id', 'editNodesPath');
2556 /* var group = document.getElementById('editNodesPath');
2557 if (group)
2559 this.remove(group);
2561 */
2563 var points=path.split(' ');
2564 var chain='';
2565 var segment=' ';
2566 prevControl=' ';
2567 nextControl=' ';
2568 nodePoint=' ';
2569 var init=points[0].split('M');
2570 var allcoords=init[1].split(' ');
2571 var point=allcoords[0].split(',');
2572 var rect1 = document.createElementNS(svgNamespace, 'rect');
2573 rect1.setAttributeNS(null, 'x', point[0]-widthLine*2);
2574 rect1.setAttributeNS(null, 'y', point[1]-widthLine*2);
2576 rect1.setAttributeNS(null, 'width', widthLine*4);
2577 rect1.setAttributeNS(null, 'height', widthLine*4);
2578 rect1.setAttributeNS(null, 'fill', '#ff7700');
2579 rect1.setAttributeNS(null, 'stroke', '#000000');
2580 rect1.setAttributeNS(null, 'stroke-width', '0');
2581 rect1.setAttributeNS(null, 'id', '0');
2582 //rect1.addEventListener("mouseover", function(event) {this.setAttributeNS(null, 'stroke-width', 1 ); }, false);
2583 rect1.addEventListener("mousedown", function(event) {if(memoNode != null){memoNode.setAttributeNS(null, 'stroke-width', 0 );} memoNode=this; this.setAttributeNS(null, 'fill-color', '#ffff00' );this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2; }, false);
2585 //rect1.addEventListener("mouseout", function(event) {this.setAttributeNS(null, 'stroke-width', 0 );}, false);
2587 svg.appendChild(rect1);
2589 if(controlNodeNum==0){ var color='#ffff00';}
2590 if(controlNodeNum==1){var color='#00ffff';}
2591 if(controlNodeNum==2){var color='#00cc00';}
2592 var color1='#ffff00';
2594 var numpoints=points.length-1;
2595 var recalls='';
2596 var re = /^[-]?\d*\.?\d*$/;
2597 for(var a=1;a<=numpoints;a++)
2600 var ini=points[a].substring(0,1);
2601 if (!ini.match(re))
2603 var end=points[a].substring(1);
2604 color='#0000ff';
2605 if(ini=='L' || ini=='M')
2607 color='#ffff00';
2610 if(ini=='C')
2612 recall=a+2;
2613 //color='#ffff00';
2616 }else
2618 var end=points[a];
2619 var ini='';
2620 color='#ff00ff';
2621 if(a==recall)
2623 color='#ffff00';
2628 //segment=points[a].split(',');
2629 prevControl=segment[0]+' ';
2630 nextControl=segment[1]+' ';
2631 nodePoint=segment[2]+' ';
2632 memoPrevControl[a]=prevControl;
2633 memoNextControl[a]=nextControl;
2634 if(controlNodeNum==0){chain+=prevControl; var point=prevControl.split(',');}
2635 if(controlNodeNum==1){chain+=nextControl; var point=nextControl.split(',');}
2636 if(controlNodeNum==2){chain+=nodePoint; var point=nodePoint.split(',');}
2637 if(controlNodeNum==3){chain+=nodePoint; var point=nodePoint.split(',');}
2640 //if (isNaN(valnum))
2642 //if(ini=='C'){color='#ff00ff';}
2644 var point=end.split(',');
2645 if(memoNode!=null){
2647 var rect1 = document.createElementNS(svgNamespace, 'rect');
2648 rect1.setAttributeNS(null, 'x', point[0]-widthLine*2);
2649 rect1.setAttributeNS(null, 'y', point[1]-widthLine*2);
2651 rect1.setAttributeNS(null, 'width', widthLine*4);
2652 rect1.setAttributeNS(null, 'height', widthLine*4);
2653 rect1.setAttributeNS(null, 'fill', color);
2654 rect1.setAttributeNS(null, 'stroke', '#000000');
2655 rect1.setAttributeNS(null, 'stroke-width', '0');
2656 rect1.setAttributeNS(null, 'id', ''+a);
2657 rect1.addEventListener("mousedown", function(event) {if(memoNode != null){memoNode.setAttributeNS(null, 'stroke-width', 0 );}drawNodeControl(svg,this.getAttributeNS(null,'id')); memoNode=this; this.setAttributeNS(null, 'fill-color', '#ffff00' );this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2; }, false);
2659 //rect1.addEventListener("mouseover", function(event) {this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2; }, false);
2660 // rect1.addEventListener("mousedown", function(event) {nodeHit(this);if(memoNode != null){memoNode.setAttributeNS(null, 'stroke-width', 0 );} memoNode=this; this.setAttributeNS(null, 'fill-color', '#ffff00' );this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2; document.forms[0].option_path_x.focus(); }, false);
2661 //rect1.addEventListener("mousedown", function(event) { if(memoNode != null){memoNode.setAttributeNS(null, 'stroke-width', 0 );} nodeHit(this); memoNode=this;this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2; }, false);
2662 //rect1.addEventListener("mousedown", function(event) {if(memoNode != null){memoNode.setAttributeNS(null, 'stroke-width', 0 );} addControlPoints(segment[0],segment[1],svg); memoNode=this; this.setAttributeNS(null, 'fillColor', '#ffff00' );this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2; }, false);
2663 //rect1.addEventListener("mouseup", function(event) {nodeUp(this); }, false);
2664 //rect1.addEventListener("mouseover", function(event) {this.setAttributeNS(null, 'fillColor', '#ffcc00' ); }, false);
2665 //rect1.addEventListener("mouseout", function(event) {this.setAttributeNS(null, 'fillColor', '#00cc00' ); }, false);
2668 //rect1.addEventListener("mouseout", function(event) {this.setAttributeNS(null, 'stroke-width', 0 ); }, false);
2670 svg.appendChild(rect1);
2673 var info='';
2675 if(controlNodeNum==0){info='prev Control'}
2676 if(controlNodeNum==1){info='next Control'}
2677 if(controlNodeNum==2){info='points node'}
2678 // $('someinfo').value=numpoints+ ' '+info+':'+ chain;
2679 $('someinfo').value='Crtl+Arrow to move';
2680 //return chain;
2683 //this.svgRoot.appendChild(svg);
2685 return svg;
2687 };
2689 SVGRenderer.prototype.showNodesCurve1 = function(path,controlNodeNum){
2690 memoNextControl=new Array();
2691 memoPrevControl=new Array();
2692 var svgNamespace = 'http://www.w3.org/2000/svg';
2693 // tracker = document.createElementNS(svgNamespace, 'g');
2694 var svg = this.container.ownerDocument.createElementNS(svgNamespace, 'g');
2695 svg.setAttributeNS(null, 'id', 'editNodesPath');
2697 /* var group = document.getElementById('editNodesPath');
2698 if (group)
2700 this.remove(group);
2702 */
2704 var points=path.split('C');
2705 var chain='';
2706 var segment=' ';
2707 prevControl=' ';
2708 nextControl=' ';
2709 nodePoint=' ';
2710 var init=points[0].split('M');
2711 var allcoords=init[1].split(' ');
2712 var point=allcoords[0].split(',');
2713 var rect1 = document.createElementNS(svgNamespace, 'rect');
2714 rect1.setAttributeNS(null, 'x', point[0]-2);
2715 rect1.setAttributeNS(null, 'y', point[1]-2);
2717 rect1.setAttributeNS(null, 'width', 4);
2718 rect1.setAttributeNS(null, 'height', 4);
2719 rect1.setAttributeNS(null, 'fill', '#ff7700');
2720 rect1.setAttributeNS(null, 'stroke', '#000000');
2721 rect1.setAttributeNS(null, 'stroke-width', '0');
2722 rect1.setAttributeNS(null, 'id', '0');
2723 //rect1.addEventListener("mouseover", function(event) {this.setAttributeNS(null, 'stroke-width', 1 ); }, false);
2724 rect1.addEventListener("mousedown", function(event) {if(memoNode != null){memoNode.setAttributeNS(null, 'stroke-width', 0 );} memoNode=this; this.setAttributeNS(null, 'fill-color', '#ffff00' );this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2; }, false);
2726 //rect1.addEventListener("mouseout", function(event) {this.setAttributeNS(null, 'stroke-width', 0 );}, false);
2728 svg.appendChild(rect1);
2730 if(controlNodeNum==0){ var color='#ffff00';}
2731 if(controlNodeNum==1){var color='#00ffff';}
2732 if(controlNodeNum==2){var color='#00cc00';}
2733 var color1='#ffff00';
2735 var numpoints=points.length-1;
2736 for(var a=1;a<=numpoints;a++)
2741 segment=points[a].split(' ');
2742 prevControl=segment[0]+' ';
2743 nextControl=segment[1]+' ';
2744 nodePoint=segment[2]+' ';
2745 memoPrevControl[a]=prevControl;
2746 memoNextControl[a]=nextControl;
2747 if(controlNodeNum==0){chain+=prevControl; var point=prevControl.split(',');}
2748 if(controlNodeNum==1){chain+=nextControl; var point=nextControl.split(',');}
2749 if(controlNodeNum==2){chain+=nodePoint; var point=nodePoint.split(',');}
2750 if(controlNodeNum==3){chain+=nodePoint; var point=nodePoint.split(',');}
2752 if(memoNode!=null){
2754 var rect1 = document.createElementNS(svgNamespace, 'rect');
2755 rect1.setAttributeNS(null, 'x', point[0]-2);
2756 rect1.setAttributeNS(null, 'y', point[1]-2);
2758 rect1.setAttributeNS(null, 'width', 4);
2759 rect1.setAttributeNS(null, 'height', 4);
2760 rect1.setAttributeNS(null, 'fill', color);
2761 rect1.setAttributeNS(null, 'stroke', '#000000');
2762 rect1.setAttributeNS(null, 'stroke-width', '0');
2763 rect1.setAttributeNS(null, 'id', ''+a);
2764 rect1.addEventListener("mousedown", function(event) {if(memoNode != null){memoNode.setAttributeNS(null, 'stroke-width', 0 );}drawNodeControl(svg,this.getAttributeNS(null,'id')); memoNode=this; this.setAttributeNS(null, 'fill-color', '#ffff00' );this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2; }, false);
2766 //rect1.addEventListener("mouseover", function(event) {this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2; }, false);
2767 // rect1.addEventListener("mousedown", function(event) {nodeHit(this);if(memoNode != null){memoNode.setAttributeNS(null, 'stroke-width', 0 );} memoNode=this; this.setAttributeNS(null, 'fill-color', '#ffff00' );this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2; document.forms[0].option_path_x.focus(); }, false);
2768 //rect1.addEventListener("mousedown", function(event) { if(memoNode != null){memoNode.setAttributeNS(null, 'stroke-width', 0 );} nodeHit(this); memoNode=this;this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2; }, false);
2769 //rect1.addEventListener("mousedown", function(event) {if(memoNode != null){memoNode.setAttributeNS(null, 'stroke-width', 0 );} addControlPoints(segment[0],segment[1],svg); memoNode=this; this.setAttributeNS(null, 'fillColor', '#ffff00' );this.setAttributeNS(null, 'stroke-width', 1 );$('option_path_num').value=this.getAttributeNS(null,'id'); $('option_path_x').value=parseFloat(this.getAttributeNS(null,'x'))+2; $('option_path_y').value=parseFloat(this.getAttributeNS(null,'y'))+2; }, false);
2770 //rect1.addEventListener("mouseup", function(event) {nodeUp(this); }, false);
2771 //rect1.addEventListener("mouseover", function(event) {this.setAttributeNS(null, 'fillColor', '#ffcc00' ); }, false);
2772 //rect1.addEventListener("mouseout", function(event) {this.setAttributeNS(null, 'fillColor', '#00cc00' ); }, false);
2775 //rect1.addEventListener("mouseout", function(event) {this.setAttributeNS(null, 'stroke-width', 0 ); }, false);
2777 svg.appendChild(rect1);
2780 var info='';
2782 if(controlNodeNum==0){info='prev Control'}
2783 if(controlNodeNum==1){info='next Control'}
2784 if(controlNodeNum==2){info='points node'}
2785 // $('someinfo').value=numpoints+ ' '+info+':'+ chain;
2786 $('someinfo').value='Crtl+Arrow to move';
2787 //return chain;
2790 //this.svgRoot.appendChild(svg);
2792 return svg;
2794 };
2795 SVGRenderer.prototype.showTracker = function(shape,pathsEdit) {
2797 var box = shape.getBBox();
2798 var matrix = shape.getScreenCTM();
2799 var trshape= shape.getAttributeNS(null, 'transform');
2800 var shap=1;
2801 var T = shape.getCTM();
2802 //a,b,c,d,e,f
2804 var widthLine=this.editor.unit;
2808 //var thisTransform = { sx: s[0], r: shape.vRotate, t: shape.vTranslate };
2809 //if (currentTransform != null) alert(currentTransform.t);
2811 if (shape.tagName == 'rect') {
2813 $('option_rect_rot').value= T.b* (Math.PI * 2 / 360);
2814 $('option_rect_trx').value= box.x;
2815 $('option_rect_try').value= box.y;
2816 $('option_rect_sclx').value= box.width;
2817 $('option_rect_scly').value= box.height;
2821 if (shape.tagName == 'image'){
2822 $('option_img_trx').value= box.x;
2823 $('option_img_try').value= box.y;
2824 $('option_img_sclx').value= box.width;
2825 $('option_img_scly').value= box.height;
2826 $('option_img_rot').value= T.b* (Math.PI * 2 / 360);
2828 if (shape.tagName == 'text'){
2829 //$('option_text_trx').value= box.x;
2830 //$('option_text_try').value= box.y;
2831 $('option_text_size').value= box.height;
2832 /*$('option_text_sclx').value= box.width;
2833 $('option_text_scly').value= box.height;
2834 $('option_text_rot').value= T.b* (Math.PI * 2 / 360);
2835 */
2837 if (shape.tagName == 'line'){
2838 /*
2839 $('option_line_trx').value= box.x;
2840 $('option_line_try').value= box.y;
2841 */
2843 if (shape.tagName == 'ellipse'){
2844 /*$('option_ellipse_trx').value= putx;
2845 $('option_ellipse_try').value= puty;
2846 $('option_ellipse_sclx').value= box.width;
2847 $('option_ellipse_scly').value= box.height;
2848 $('option_ellipse_rot').value= T.b* (Math.PI * 2 / 360);
2849 */
2854 /* if (shape.getAttributeNS(null, 'transform') ) {
2857 shap=2; }else{
2858 }*/
2859 var tracker = document.getElementById('tracker');
2860 if (tracker) {
2861 this.remove(tracker);
2864 var svgNamespace = 'http://www.w3.org/2000/svg';
2866 tracker = document.createElementNS(svgNamespace, 'g');
2867 tracker.setAttributeNS(null, 'id', 'tracker');
2869 var controlPoints=null;
2870 if (shape.tagName == 'path') { shap=2;
2872 /* $('option_path_trx').value= box.x;
2873 $('option_path_try').value= box.y;
2874 $('option_path_sclx').value= T.a;
2875 $('option_path_scly').value= T.d;
2876 $('option_path_rot').value= T.b* (Math.PI * 2 / 360);
2877 */
2878 var path=shape.getAttributeNS(null, 'd');
2879 $('control_codebase').value=path;
2881 //controlPoints=this.showNodesCurve(path,0);
2882 //controlPoints=this.showNodesCurve(path,1);
2883 controlPoints=this.showNodesCurve(path,2);
2886 /* controlPoints=this.showNodesCurve(path,1);
2888 tracker.appendChild(controlPoints);
2890 controlPoints=this.showNodesCurve(path,0);
2892 tracker.appendChild(controlPoints);
2893 */
2896 var svg = this.container.ownerDocument.createElementNS(svgNamespace, 'g');
2897 svg.setAttributeNS(null, 'id', 'transformSquares');
2900 //var rect = document.createElementNS(svgNamespace, 'rect');
2901 var border = document.createElementNS(svgNamespace, 'path');
2903 var trshape='translate (0,0) rotate(0) translate(0,0) ';
2904 var trshape_split=trshape.split(') ');
2906 // get_between (trshape, s1, s2) ;
2907 if(shape.getAttributeNS(null, 'transform')){
2908 var trshape=shape.getAttributeNS(null, 'transform') ;
2909 //var spl=trshape.replace(', ',' ');
2910 //var spl1=spl.replace(')',' ');
2911 var trshape_split=trshape.split(') ');
2916 var corners = [];
2917 var point = createPoint(box.x, box.y, box.width, box.height);
2918 //point = {x:box.x, y:box.y, width: box.width, height:box.height};
2919 //point = createPoint(box.x, box.y, box.width, box.height);
2920 //1
2921 corners.push( createPoint(box.x + box.width, box.y, box.width, box.height) );
2922 point.x = box.x + box.width;
2923 point.y = box.y;
2924 //2
2925 corners.push( createPoint(box.x + box.width, box.y + box.height, box.width, box.height) );
2926 point.x = box.x + box.width;
2927 point.y = box.y + box.height;
2928 //3
2929 //corners.push( point.matrixTransform(matrix) );
2930 corners.push( createPoint(box.x , box.y + box.height, box.width, box.height) );
2931 point.x = box.x;
2932 point.y = box.y + box.height;
2933 //4
2934 corners.push( createPoint(box.x + box.width, box.y, box.width, box.height) );
2936 var max = createPoint(corners[0].x, corners[0].y);
2937 var min = createPoint(corners[0].x, corners[0].y);
2939 // identify the new corner coordinates of the
2940 // fully transformed bounding box
2941 for (var i = 1; i < corners.length; i++) {
2942 var x = corners[i].x;
2943 var y = corners[i].y;
2944 if (x < min.x) {
2945 min.x = x;
2947 else if (x > max.x) {
2948 max.x = x;
2950 if (y < min.y) {
2951 min.y = y;
2953 else if (y > max.y) {
2954 max.y = y;
2959 border.setAttributeNS(null, 'd', "M"+(min.x-(widthLine*10))+","+ (min.y-(widthLine*10))+' h'+(box.width+(widthLine*20))+','+(0)+' v'+(0)+','+(box.height+(widthLine*20))+' h'+(-box.width-(widthLine*20))+','+(0)+' z M'+(box.x+box.width+(widthLine*10))+","+ (box.y+(box.height/2)+' h'+(widthLine*25)+',0 '));
2962 border.setAttributeNS(null, 'fill', 'none');
2963 border.setAttributeNS(null, 'stroke', '#cccccc');
2964 border.setAttributeNS(null, 'stroke-width', widthLine);
2966 // createRect(min.x, min.y, max.x - min.x, max.y - min.y);
2968 var circle1 = document.createElementNS(svgNamespace, 'ellipse');
2969 circle1.setAttributeNS(null, 'cx', (box.x + box.width+(widthLine*40)) + 'px');
2970 circle1.setAttributeNS(null, 'cy', (box.y + box.height / 2) + 'px');
2971 circle1.setAttributeNS(null, 'rx', (widthLine*5) + 'px');
2972 circle1.setAttributeNS(null, 'ry', (widthLine*5) + 'px');
2973 circle1.setAttributeNS(null, 'fill', '#ffffff');
2974 circle1.setAttributeNS(null, 'stroke', 'green');
2975 circle1.setAttributeNS(null, 'stroke-width', widthLine);
2977 var circleCenter = document.createElementNS(svgNamespace, 'ellipse');
2978 circleCenter.setAttributeNS(null, 'cx', (box.x + (box.width/2)) + 'px');
2979 circleCenter.setAttributeNS(null, 'cy', (box.y + (box.height /2)) + 'px');
2980 circleCenter.setAttributeNS(null, 'rx', (widthLine*10) + 'px');
2981 circleCenter.setAttributeNS(null, 'ry', (widthLine*10) + 'px');
2982 circleCenter.setAttributeNS(null, 'fill', '#ffffff');
2983 circleCenter.setAttributeNS(null, 'stroke', 'green');
2984 circleCenter.setAttributeNS(null, 'stroke-width', widthLine);
2986 var rect1 = document.createElementNS(svgNamespace, 'rect');
2987 rect1.setAttributeNS(null, 'width', widthLine*10);
2988 rect1.setAttributeNS(null, 'height', widthLine*10);
2989 rect1.setAttributeNS(null, 'fill', '#ffffff');
2990 rect1.setAttributeNS(null, 'stroke', 'green');
2991 rect1.setAttributeNS(null, 'stroke-width', widthLine);
2993 var rect2 = document.createElementNS(svgNamespace, 'rect');
2994 rect2.setAttributeNS(null, 'width', widthLine*10);
2995 rect2.setAttributeNS(null, 'height', widthLine*10);
2996 rect2.setAttributeNS(null, 'fill', '#ffffff');
2997 rect2.setAttributeNS(null, 'stroke', 'green');
2998 rect2.setAttributeNS(null, 'stroke-width', widthLine);
3000 var rect3 = document.createElementNS(svgNamespace, 'rect');
3001 rect3.setAttributeNS(null, 'width', widthLine*10);
3002 rect3.setAttributeNS(null, 'height', widthLine*10);
3003 rect3.setAttributeNS(null, 'fill', '#ffffff');
3004 rect3.setAttributeNS(null, 'stroke', 'green');
3005 rect3.setAttributeNS(null, 'stroke-width', widthLine);
3007 var rect4 = document.createElementNS(svgNamespace, 'rect');
3008 rect4.setAttributeNS(null, 'width', widthLine*10);
3009 rect4.setAttributeNS(null, 'height', widthLine*10);
3010 rect4.setAttributeNS(null, 'fill', '#ffffff');
3011 rect4.setAttributeNS(null, 'stroke', 'green');
3012 rect4.setAttributeNS(null, 'stroke-width', widthLine);
3014 var rectmid12 = document.createElementNS(svgNamespace, 'rect');
3015 rectmid12.setAttributeNS(null, 'width', widthLine*10);
3016 rectmid12.setAttributeNS(null, 'height', widthLine*10);
3017 rectmid12.setAttributeNS(null, 'fill', '#ffffff');
3018 rectmid12.setAttributeNS(null, 'stroke', 'green');
3019 rectmid12.setAttributeNS(null, 'stroke-width', widthLine);
3021 var rectmid23 = document.createElementNS(svgNamespace, 'rect');
3022 rectmid23.setAttributeNS(null, 'width', widthLine*10);
3023 rectmid23.setAttributeNS(null, 'height', widthLine*10);
3024 rectmid23.setAttributeNS(null, 'fill', '#ffffff');
3025 rectmid23.setAttributeNS(null, 'stroke', 'green');
3026 rectmid23.setAttributeNS(null, 'stroke-width', widthLine);
3028 var rectmid34 = document.createElementNS(svgNamespace, 'rect');
3029 rectmid34.setAttributeNS(null, 'width', widthLine*10);
3030 rectmid34.setAttributeNS(null, 'height', widthLine*10);
3031 rectmid34.setAttributeNS(null, 'fill', '#ffffff');
3032 rectmid34.setAttributeNS(null, 'stroke', 'green');
3033 rectmid34.setAttributeNS(null, 'stroke-width', widthLine);
3035 var rectmid41 = document.createElementNS(svgNamespace, 'rect');
3036 rectmid41.setAttributeNS(null, 'width', widthLine*10);
3037 rectmid41.setAttributeNS(null, 'height', widthLine*10);
3038 rectmid41.setAttributeNS(null, 'fill', '#ffffff');
3039 rectmid41.setAttributeNS(null, 'stroke', 'green');
3040 rectmid41.setAttributeNS(null, 'stroke-width', widthLine);
3041 // rect.setAttributeNS(null, 'x', box.x - widthLine*10);
3042 // rect.setAttributeNS(null, 'y', box.y - widthLine*10);
3044 rect1.setAttributeNS(null, 'x', box.x - widthLine*15);
3045 rect1.setAttributeNS(null, 'y', box.y - widthLine*15);
3048 rect2.setAttributeNS(null, 'x', box.x + box.width +widthLine*5 );
3049 rect2.setAttributeNS(null, 'y', box.y - widthLine*15);
3051 rect3.setAttributeNS(null, 'x', box.x + box.width + widthLine*5 );
3052 rect3.setAttributeNS(null, 'y', box.y + box.height + widthLine*5);
3054 rect4.setAttributeNS(null, 'x', box.x - widthLine*15 );
3055 rect4.setAttributeNS(null, 'y', box.y + box.height + widthLine*5);
3059 rectmid12.setAttributeNS(null, 'x', box.x + (box.width/2) - widthLine*5);
3060 rectmid12.setAttributeNS(null, 'y', box.y - widthLine*15);
3062 rectmid23.setAttributeNS(null, 'x', box.x + box.width + widthLine*5 );
3063 rectmid23.setAttributeNS(null, 'y', box.y + (box.height/2) - widthLine*5);
3065 rectmid34.setAttributeNS(null, 'x', box.x + (box.width/2) - widthLine*5 );
3066 rectmid34.setAttributeNS(null, 'y', box.y + box.height + widthLine*5);
3068 rectmid41.setAttributeNS(null, 'x', box.x - widthLine*15 );
3069 rectmid41.setAttributeNS(null, 'y', box.y + (box.height/2) - widthLine*5);
3071 svg.appendChild(border);
3072 var colorin="#ff0000";
3073 var colorout="#ffffff"
3075 circle1.addEventListener("mouseover", function(event) {circle1.setAttributeNS(null, 'cursor', 's-resize'); circle1.setAttributeNS(null, 'fill', colorin ); typeTransform='Rotate'; scaleType='nw'; }, false);
3076 circle1.addEventListener("mouseout", function(event) {circle1.setAttributeNS(null, 'cursor', 'default'); circle1.setAttributeNS(null, 'fill', colorout ); typeTransform='Rotate'; }, false); //typeTransform='rotate'
3077 circleCenter.addEventListener("mouseover", function(event) {circleCenter.setAttributeNS(null, 'cursor', 'move'); circleCenter.setAttributeNS(null, 'fill', colorin ); typeTransform='spìnCenter'; scaleType='nw'; }, false);
3078 circleCenter.addEventListener("mouseout", function(event) {circleCenter.setAttributeNS(null, 'cursor', 'default'); circleCenter.setAttributeNS(null, 'fill', colorout ); typeTransform=''; }, false); //typeTransform='rotate'
3081 rect1.addEventListener("mouseover", function(event) {rect1.setAttributeNS(null, 'cursor', 'nw-resize'); rect1.setAttributeNS(null, 'fill', colorin ); typeTransform='Scale'; scaleType='nw';}, false);
3082 rect1.addEventListener("mouseout", function(event) {rect1.setAttributeNS(null, 'cursor', 'default'); rect1.setAttributeNS(null, 'fill', colorout ); typeTransform='Scale'; }, false); //typeTransform='rotate'
3084 rect2.addEventListener("mouseover", function(event) {rect2.setAttributeNS(null, 'cursor', 'ne-resize'); rect2.setAttributeNS(null, 'fill', colorin ); typeTransform='Scale'; scaleType='ne';}, false);
3085 rect2.addEventListener("mouseout", function(event) {rect2.setAttributeNS(null, 'cursor', 'default'); rect2.setAttributeNS(null, 'fill', colorout ); typeTransform='Scale'; }, false);
3087 rect3.addEventListener("mouseover", function(event) {rect3.setAttributeNS(null, 'cursor', 'se-resize'); rect3.setAttributeNS(null, 'fill', colorin ); typeTransform='Scale'; scaleType='se';}, false);
3088 rect3.addEventListener("mouseout", function(event) {rect3.setAttributeNS(null, 'cursor', 'default'); rect3.setAttributeNS(null, 'fill', colorout ); typeTransform='Scale'; }, false);
3090 rect4.addEventListener("mouseover", function(event) {rect4.setAttributeNS(null, 'cursor', 'sw-resize'); rect4.setAttributeNS(null, 'fill', colorin ); typeTransform='Scale'; scaleType='sw';}, false);
3091 rect4.addEventListener("mouseout", function(event) {rect4.setAttributeNS(null, 'cursor', 'default'); rect4.setAttributeNS(null, 'fill', colorout ); typeTransform='Scale'; }, false);
3093 rectmid12.addEventListener("mouseover", function(event) {rectmid12.setAttributeNS(null, 'cursor', 'n-resize'); rectmid12.setAttributeNS(null, 'fill', colorin ); typeTransform='Scale'; scaleType='n';}, false);
3094 rectmid12.addEventListener("mouseout", function(event) {rectmid12.setAttributeNS(null, 'cursor', 'default'); rectmid12.setAttributeNS(null, 'fill', colorout ); typeTransform='Scale'; }, false);
3096 rectmid23.addEventListener("mouseover", function(event) {rectmid23.setAttributeNS(null, 'cursor', 'e-resize'); rectmid23.setAttributeNS(null, 'fill', colorin ); typeTransform='Scale'; scaleType='e';}, false);
3097 rectmid23.addEventListener("mouseout", function(event) {rectmid23.setAttributeNS(null, 'cursor', 'default'); rectmid23.setAttributeNS(null, 'fill', colorout ); typeTransform='Scale'; }, false);
3099 rectmid34.addEventListener("mouseover", function(event) {rectmid34.setAttributeNS(null, 'cursor', 's-resize'); rectmid34.setAttributeNS(null, 'fill', colorin ); typeTransform='Scale'; scaleType='s';}, false);
3100 rectmid34.addEventListener("mouseout", function(event) {rectmid34.setAttributeNS(null, 'cursor', 'default'); rectmid34.setAttributeNS(null, 'fill', colorout ); typeTransform='Scale'; }, false);
3102 rectmid41.addEventListener("mouseover", function(event) {rectmid41.setAttributeNS(null, 'cursor', 'w-resize'); rectmid41.setAttributeNS(null, 'fill', colorin ); typeTransform='Scale'; scaleType='w'; }, false);
3103 rectmid41.addEventListener("mouseout", function(event) {rectmid41.setAttributeNS(null, 'cursor', 'default'); rectmid41.setAttributeNS(null, 'fill', colorout ); typeTransform='Scale'; }, false);
3105 //////////
3106 svg.setAttributeNS(null, 'transform',trshape);
3108 svg.appendChild(circle1);
3109 //tracker.appendChild(circleCenter);
3110 if (shape.tagName == 'text'){
3111 svg.appendChild(rect1);
3112 svg.appendChild(rect2);
3113 svg.appendChild(rect3);
3114 svg.appendChild(rect4);
3115 }else{
3116 svg.appendChild(rect1);
3117 svg.appendChild(rect2);
3118 svg.appendChild(rect3);
3119 svg.appendChild(rect4);
3120 svg.appendChild(rectmid12);
3121 svg.appendChild(rectmid23);
3122 svg.appendChild(rectmid34);
3123 svg.appendChild(rectmid41);
3126 if(pathsEdit)
3128 controlPoints.setAttributeNS(null, 'transform',trshape);
3129 tracker.appendChild(controlPoints);
3130 }else{
3131 tracker.appendChild(svg);
3133 this.svgRoot.appendChild(tracker);
3138 SVGRenderer.prototype.getMarkup = function() {
3140 return this.container.innerHTML;
3144 /////////////////////////////////
3145 var rotatexxx=0;
3147 var scaleType='';
3148 var xrot=0;
3149 var yrot=0;
3151 var point = {x:0, y:0, width: 0, height:0};
3153 function createPoint (x, y, width, height) {
3154 //var point = {x:34, y:22, width: 22, height:23};
3155 //point.x = x;
3156 //point.y = y;
3157 point = {x:x, y:y, width: width, height:height};
3158 return point;
3161 ///////////////////////////////
3163 SVGRenderer.prototype.restruct= function(shape)
3165 //alert('end');
3166 //forceRedraw();
3167 //clearWorkspace();
3168 //document.getElementById('richdraw').style.cursor='default';
3169 };
3173 SVGRenderer.prototype.transform = function() {
3174 //document.forms[0].code.value='Im tranforming';
3175 };
3177 SVGRenderer.prototype.scaleShape = function(shape,previus, toX, toY) {
3179 var box = shape.getBBox();
3180 var prevbox=previus.getBBox();
3181 var centerx= box.x+(box.width/2);
3182 var centery= box.y+(box.height/2);
3183 var coord=this.editor.viewInputxy;
3184 toX=parseFloat(coord[0]);
3185 toY=parseFloat(coord[1]);
3186 var d2p_center=dist2p(centerx,centery,toX,toY);
3188 var d2p=dist2p(box.x,box.y,toX,toY);
3190 var shareScale=box.width/d2p;
3192 var trans_ShareScale='';
3193 var tx, ty, tw, yh;
3195 if(scaleType.length==1){
3196 if(scaleType== 'w')
3198 trans_ShareScale=shareScale+",1";
3199 tx=toX;
3200 ty=prevbox.y;
3201 var dist=prevbox.x-toX;
3202 var w=dist+prevbox.width;
3203 if(w<1){w=1;}
3204 tw=w;
3205 th=prevbox.height;
3206 //document.forms[0].code.value=box.x+' '+toX+' '+dist+'';
3208 if(scaleType== 'e')
3210 trans_ShareScale=shareScale+",1";
3211 tx=prevbox.x;
3212 ty=prevbox.y;
3213 var dist=toX-(prevbox.x+prevbox.width); //dist2p(toX,b,c,d);
3214 var w=dist+prevbox.width;
3215 if(w<1){w=1;}
3216 tw=w;
3217 th=prevbox.height;
3220 if(scaleType== 'n')
3222 trans_ShareScale="1,"+shareScale;
3224 tx=prevbox.x;
3225 ty=toY;
3226 var dist=prevbox.y-toY;
3227 var h=dist+prevbox.height;
3228 if(h<1){h=1;}
3229 tw=prevbox.width;
3230 th=h;
3233 if( scaleType== 's')
3235 trans_ShareScale="1,"+shareScale;
3237 tx=prevbox.x;
3238 ty=prevbox.y;
3239 var dist=toY-(prevbox.y+prevbox.height); //dist2p(toX,b,c,d);
3240 var h=dist+prevbox.height;
3241 if(h<1){h=1;}
3242 tw=prevbox.width;
3243 th=h;
3247 if(scaleType.length==2){
3248 if(scaleType== 'nw'){
3249 trans_ShareScale=shareScale+","+shareScale;
3251 //var angle_diagonal=getAngle(prevbox.width,prevbox.height);
3252 var angle_diagonal=ang2v(prevbox.x,prevbox.y,prevbox.x+prevbox.width,prevbox.y+prevbox.height)
3254 var ax= prevbox.x;
3255 var ay= prevbox.y;
3256 var bx= prevbox.x+prevbox.width;
3257 var by= prevbox.y+prevbox.height;
3259 var cx= toX;
3260 var cy= toY;
3261 var dx= toX+10*Math.cos(angle_diagonal+(Math.PI/2));
3262 var dy= toY+10*Math.sin(angle_diagonal+(Math.PI/2));
3264 var section_a=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);
3265 this.editor.log(angle_diagonal* 180 / Math.PI);
3267 var tx= section_a[1];
3268 var ty= section_a[2];
3270 var ax= section_a[1];
3271 var ay= section_a[2];
3272 var bx= 0;
3273 var by= section_a[2] ;
3275 var cx=prevbox.x+prevbox.width;
3276 var cy= prevbox.y;
3278 var dx= prevbox.x+prevbox.width;
3279 var dy= 0;
3282 var section_b=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);
3284 var distx=dist2p(section_a[1],section_a[2],section_b[1],section_b[2]);
3288 var ax= section_a[1];
3289 var ay= section_a[2];
3290 var bx= section_a[1]
3291 var by= 0;
3293 var cx= prevbox.x;
3294 var cy= prevbox.y+prevbox.height;
3296 var dx= 0;
3297 var dy= prevbox.y+prevbox.height;
3300 var section_c=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);
3301 var disty=dist2p(section_a[1],section_a[2],section_c[1],section_c[2]);
3306 if(distx<1){distx=1;}
3309 if(disty<1){disty=1;}
3310 //document.forms[0].code.value=distx+' '+disty;
3311 tw=distx;
3312 th=disty;
3317 //////////////////// SE
3319 if( scaleType== 'se'){
3320 trans_ShareScale=shareScale+","+shareScale;
3323 //var angle_diagonal=getAngle(prevbox.width,prevbox.height);
3324 var angle_diagonal=ang2v(prevbox.x,prevbox.y,prevbox.x+prevbox.width,prevbox.y+prevbox.height)
3328 var ax= prevbox.x;
3329 var ay= prevbox.y;
3330 var bx= prevbox.x+prevbox.width;
3331 var by= prevbox.y+prevbox.height;
3333 var cx= toX;
3334 var cy= toY;
3335 var dx= toX+10*Math.cos(angle_diagonal+(Math.PI/2));
3336 var dy= toY+10*Math.sin(angle_diagonal+(Math.PI/2));
3338 var section_a=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);
3341 var svgNamespace = 'http://www.w3.org/2000/svg';
3342 var tracker = document.getElementById('tracker');
3344 //////////
3345 var tx= prevbox.x;
3346 var ty= prevbox.y;
3348 var ax= section_a[1];
3349 var ay= section_a[2];
3350 var bx= 0;
3351 var by= section_a[2] ;
3353 var cx=prevbox.x;
3354 var cy= prevbox.y;
3356 var dx= prevbox.x;
3357 var dy= 0;
3360 var section_b=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);
3362 /////////////////
3365 var distx=dist2p(section_a[1],section_a[2],section_b[1],section_b[2]);
3368 var ax= section_a[1];
3369 var ay= section_a[2];
3370 var bx= section_a[1]
3371 var by= 0;
3373 var cx= prevbox.x;
3374 var cy= prevbox.y;
3376 var dx=0;
3377 var dy= prevbox.y;
3380 var section_c=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);
3382 ///////////////
3384 var disty=dist2p(section_a[1],section_a[2],section_c[1],section_c[2]);
3388 if(distx<1){distx=1;}
3391 if(disty<1){disty=1;}
3393 tw=distx;
3394 th=disty;
3399 if(scaleType== 'ne'){
3401 trans_ShareScale=shareScale+","+shareScale;
3403 var angle_diagonal=ang2v(prevbox.x,prevbox.y+prevbox.height,prevbox.x+prevbox.width,prevbox.y)
3404 //var angle_diagonal=getAngle(prevbox.width,prevbox.height);
3409 var ax= prevbox.x;
3410 var ay= prevbox.y+prevbox.height;
3411 var bx= prevbox.x+prevbox.width;
3412 var by= prevbox.y;
3414 var cx= toX;
3415 var cy= toY;
3416 var dx= toX+10*Math.cos(angle_diagonal+(Math.PI/2));
3417 var dy= toY+10*Math.sin(angle_diagonal+(Math.PI/2));
3420 this.editor.log(angle_diagonal);
3423 var section_a=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);
3426 var svgNamespace = 'http://www.w3.org/2000/svg';
3427 var tracker = document.getElementById('tracker');
3429 //////////
3430 var tx= prevbox.x;
3431 var ty= section_a[2];
3433 var ax= section_a[1];
3434 var ay= section_a[2];
3435 var bx= 0;
3436 var by= section_a[2] ;
3438 var cx=prevbox.x;
3439 var cy= prevbox.y;
3441 var dx= prevbox.x;
3442 var dy= 0;
3445 var section_b=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);
3447 /////////////////
3450 var distx=dist2p(section_a[1],section_a[2],section_b[1],section_b[2]);
3453 var ax= section_a[1];
3454 var ay= section_a[2];
3455 var bx= section_a[1];
3456 var by= 0;
3458 var cx= prevbox.x;
3459 var cy= prevbox.y+prevbox.height;
3461 var dx=0;
3462 var dy= prevbox.y+prevbox.height;
3465 var section_c=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);
3467 ///////////////
3469 var disty=dist2p(section_a[1],section_a[2],section_c[1],section_c[2]);
3473 if(distx<1){distx=1;}
3476 if(disty<1){disty=1;}
3477 //document.forms[0].code.value=distx+' '+disty;
3478 tw=distx;
3479 th=disty;
3486 if(scaleType== 'sw'){
3487 trans_ShareScale=shareScale+","+shareScale;
3492 var angle_diagonal=ang2v(prevbox.x,prevbox.y+prevbox.height,prevbox.x+prevbox.width,prevbox.y)
3493 //var angle_diagonal=getAngle(prevbox.width,prevbox.height);
3498 var ax= prevbox.x;
3499 var ay= prevbox.y+prevbox.height;
3500 var bx= prevbox.x+prevbox.width;
3501 var by= prevbox.y;
3503 var cx= toX;
3504 var cy= toY;
3505 var dx= toX+10*Math.cos(angle_diagonal+(Math.PI/2));
3506 var dy= toY+10*Math.sin(angle_diagonal+(Math.PI/2));
3509 this.editor.log(angle_diagonal);
3512 var section_a=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);
3515 var svgNamespace = 'http://www.w3.org/2000/svg';
3516 var tracker = document.getElementById('tracker');
3518 //////////
3519 var tx= section_a[1];
3520 var ty= prevbox.y;
3522 var ax= section_a[1];
3523 var ay= section_a[2];
3524 var bx= 0;
3525 var by= section_a[2] ;
3527 var cx=prevbox.x+prevbox.width;
3528 var cy= prevbox.y+prevbox.height;
3530 var dx= prevbox.x+prevbox.width;
3531 var dy= 0;
3534 var section_b=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);
3535 var distx=dist2p(section_a[1],section_a[2],section_b[1],section_b[2]);
3537 /////////////////
3538 var ax= section_a[1];
3539 var ay= section_a[2];
3540 var bx= section_a[1];
3541 var by= 0;
3543 var cx= prevbox.x;
3544 var cy= prevbox.y;
3546 var dx=0;
3547 var dy= prevbox.y;
3550 var section_c=ntrsccn2rb(ax,ay,bx,by,cx,cy,dx,dy);
3551 var disty=dist2p(section_a[1],section_a[2],section_c[1],section_c[2]);
3552 ///////////////
3556 if(distx<1){distx=1;}
3559 if(disty<1){disty=1;}
3560 //document.forms[0].code.value=distx+' '+disty;
3561 tw=distx;
3562 th=disty;
3570 if(shape.tagName == 'rect')
3572 //alert(data[0]);
3573 shape.setAttributeNS(null,'x',tx);
3574 shape.setAttributeNS(null,'y',ty);
3575 shape.setAttributeNS(null, 'width', tw);
3576 shape.setAttributeNS(null, 'height', th);
3578 //shape.nodparseFloatue=data;
3580 else
3581 if(shape.tagName == 'text')
3584 var tsize=shape.getAttributeNS(null, 'font-size') ;
3585 // var d2p_center=dist2p(centerx,centery,toX,toY);
3587 var d2p=dist2p(0,box.y,0,toY);
3588 //shape.setAttributeNS(null, 'x', tx + 'px');
3589 //shape.setAttributeNS(null, 'y', ty + 'px');
3590 //var mysize=box.height+1 ;
3591 //if((toX - centerx)<0){tsize++}else{tsize--}
3592 tsize=d2p;
3593 //var mysize=parseInt(Math.round(th));
3595 if(scaleType== 'ne'){ shape.setAttributeNS(null, 'font-size',tsize);}
3596 if(scaleType== 'se'){ shape.setAttributeNS(null, 'font-size',tsize);}
3597 if(scaleType== 'nw'){ shape.setAttributeNS(null, 'font-size',tsize);}
3598 if(scaleType== 'sw'){ shape.setAttributeNS(null, 'font-size',tsize);}
3600 //shape.setAttributeNS(null, 'font-size', mysize);
3603 /*
3604 shape.setAttributeNS(null,'x',tx);
3605 shape.setAttributeNS(null,'y',ty);
3606 shape.setAttributeNS(null, 'width', tw);
3607 shape.setAttributeNS(null, 'height', th);
3609 //previus.setAttributeNS(null,'transform', "scale("+trans_ShareScale+")");
3610 shape.setAttributeNS(null, 'x', tx + 'px');
3611 shape.setAttributeNS(null, 'y', ty + 'px');
3613 shape.setAttributeNS(null, 'textLength', parseInt(Math.round(tw)));
3615 */
3617 else
3618 if(shape.tagName == 'ellipse')
3620 //shape.getAttributeNS(null, 'transform)
3621 shape.setAttributeNS(null, 'cx', (tx + (box.width / 2)) + 'px');
3622 shape.setAttributeNS(null, 'cy', (ty + (box.height / 2)) + 'px');
3623 shape.setAttributeNS(null, 'rx', (tw / 2) + 'px');
3624 shape.setAttributeNS(null, 'ry', (th / 2) + 'px');
3628 else
3629 if(shape.tagName == 'line')
3631 shape.setAttributeNS(null, 'x1', tx + 'px');
3632 shape.setAttributeNS(null, 'y1', ty + 'px');
3633 shape.setAttributeNS(null, 'x2', tx + tw + 'px');
3634 shape.setAttributeNS(null, 'y2', ty + th + 'px');
3637 else
3638 if (shape.tagName == 'polyline')
3642 else
3643 if (shape.tagName == 'image')
3645 shape.setAttributeNS(null,'x',tx);
3646 shape.setAttributeNS(null,'y',ty);
3647 shape.setAttributeNS(null, 'width', tw);
3648 shape.setAttributeNS(null, 'height', th);
3651 else
3652 if (shape.tagName == 'path')
3654 // var xscale= box.width/tw;
3655 // var yscale= box.height/th;
3656 var xscale= tw/box.width;
3657 var yscale= th/box.height;
3658 var xinc=xscale;//dist*angx;
3659 var yinc=yscale/ty;//dist*angy;
3661 if(scaleType== 'n')
3663 tx=box.x+(box.width/2);
3664 ty=box.y+box.height;
3665 var xinc=1;
3666 var yinc=box.y/toY;//dist*angy;
3669 if(scaleType== 's')
3671 tx=box.x+(box.width/2);
3672 ty=box.y;
3673 var xinc=1;
3674 var yinc=toY/(box.y+box.height);//dist*angy;
3676 if(scaleType== 'e')
3678 tx=box.x;
3679 ty=box.y+(box.height/2);
3680 var xinc=toX/(box.x+box.width);
3681 var yinc=1;
3684 if(scaleType== 'w')
3686 tx=box.x+box.width;
3687 ty=box.y+(box.height/2);
3688 var xinc=box.x/toX;
3689 var yinc=1;
3692 if(scaleType== 'ne')
3694 tx=box.x;
3695 ty=box.y+box.height;
3696 var xinc=toX/(box.x+box.width);
3697 var yinc=xinc;
3699 if(scaleType== 'nw')
3701 tx=box.x+box.width;
3702 ty=box.y+box.height;
3703 var xinc=box.x/toX;
3704 var yinc=xinc;
3706 if(scaleType== 'se')
3708 tx=box.x;
3709 ty=box.y;
3710 var xinc=toX/(box.x+box.width);
3711 var yinc=xinc;
3713 if(scaleType== 'sw')
3715 tx=(box.x+box.width);
3716 ty=box.y;
3717 var xinc=box.x/toX;
3718 var yinc=xinc;
3720 if(xinc==0){ xinc= 0.0000001;}
3721 if(yinc==0){ yinc= 0.0000001; }
3722 var prevpath=previus.getAttributeNS(null, 'd');
3723 var path=shape.getAttributeNS(null, 'd');
3724 ////////////
3727 //xshe=left;
3728 //yshe=top;
3730 path=path.replace(/, /g, ',');
3731 path=path.replace(/ ,/g, ',');
3732 var ps =path.split(" ")
3733 var pcc = "";
3734 var point =ps[0].split(",");
3737 var num0= parseFloat(point[0].substring(1));
3738 var num1= parseFloat(point[1]);
3741 var ang= ang2v(box.x,box.y,tx,ty) ;
3742 var angle = Math.round((ang/Math.PI* 2)* 360);
3743 var angx = Math.cos(ang);
3744 var angy = Math.sin(ang);
3745 var dist= dist2p(tx,ty,box.x,box.y);
3746 //var xinc=xscale;//dist*angx;
3747 //var yinc=yscale;//dist*angy;
3748 var re = /^[-]?\d*\.?\d*$/;
3749 var axis = $V([tx,ty]);
3750 for(var i = 0; i < ps.length; i++)
3752 if(ps[i].indexOf(',')>0){
3754 var point =ps[i].split(",");
3755 var char1=point[0].substring(0,1);
3756 if(char1=='A' || char1=='a'){isArc=true; contArc=0;}
3757 if(isArc==true){contArc++}
3758 if(contArc==4){contArc=0; isArc=false}
3760 //if (isNaN(valnum))
3761 if (!char1.match(re))
3763 var num0= parseFloat(point[0].substring(1));
3764 var text=char1;
3765 }else{
3766 if(isArc==true && contArc==2 )
3768 var num0= point[0];
3769 }else{
3770 var num0= parseFloat(point[0]);
3772 var text='';
3777 if(isArc==true && contArc==2)
3779 point[1]= point[1].toString() ;
3781 else
3784 //num0*=xinc;
3785 point[1]= parseFloat(point[1]);
3786 //point[1]*=yinc;
3787 var pointIni=$V([num0,point[1],1]);
3788 var matrT = $M([[1,0,-tx],[0,1,-ty],[0,0,1]]);
3789 var matrS = $M([[xinc,0,0],[0,yinc,0],[0,0,1]]);
3790 var matrR = $M([[1,0,tx],[0,1,ty],[0,0,1]]);
3791 var matr1= matrT.x(pointIni);
3792 var matr2= matrS.x(matr1);
3793 //var pointR=pointIni.Random(1)
3794 //var pointR=pointIni.rotate(Math.PI/180,axis);
3795 //var pointRc=pointIni.cross(axis);
3796 //var pointR=matr2;
3797 var pointR=matrR.x(matr2);
3798 num0=pointR.elements[0];
3799 point[1]=pointR.elements[1];
3800 $('code').value=pointIni.elements[0]+','+pointR.elements[1]+' ';
3802 var cx=num0;
3803 var cy=point[1];
3804 pcc+=text+cx+','+cy+' ';
3805 //pcc+=text+cx+','+cy+' ';
3807 }else{
3808 pcc+=ps[i]+' ';
3812 shape.setAttributeNS(null,'d', pcc);
3816 //////////////
3817 /*
3818 path=path.replace(/, /g, ',');
3819 path=path.replace(/ ,/g, ',');
3820 var ps =path.split(" ")
3821 var pcc = "";
3823 var xinc=tx-prevbox.x;
3824 var yinc=ty-prevbox.y;
3826 var re = /^[-]?\d*\.?\d*$/;
3827 for(var i = 0; i < ps.length; i++)
3829 if(ps[i].indexOf(',')>0){
3831 var point =ps[i].split(",");
3832 var char1=point[0].substring(0,1);
3833 point[1]= parseFloat(point[1]);
3835 // var valnum =char1.charAt(0);
3836 //if (isNaN(valnum))
3837 if (!char1.match(re))
3840 var num0= parseFloat(point[0].substring(1));
3841 var text=char1;
3842 }else{
3843 var num0= parseFloat(point[0]);
3844 var text='';
3847 //num0+=dist*angx;
3848 //point[1]+=dist*angy;
3849 num0*=xscale;
3850 point[1]*=yscale;
3852 // num0+=xinc;
3853 // point[1]+=yinc;
3857 var cx=num0;
3858 var cy=point[1];
3859 pcc+=text+cx+','+cy+' ';
3860 }else{
3861 pcc+=ps[i]+' ';
3869 // $('code').value=dist+' '+ ang+' '+'__'+x+'= '+left+'/ '+y+'= ' +top+'';
3871 //shape.setAttributeNS(null,'transform', "rotate("+left+")");
3873 // shape.setAttributeNS(null,'transform', "translate("+trax+","+tray+") rotate("+0+") scale(1,1)");
3874 shape.setAttributeNS(null,'d', pcc);
3882 //document.forms[0].code.value='';
3883 //shape.setAttributeNS(null,'transform', "scale("+trans_ShareScale+")");
3884 */
3900 //$('status').innerHTML=typeTransform+': '+shareScale;
3903 };
3906 SVGRenderer.prototype.rotateShape = function(shape, previus, toX, toY) {
3908 //document.getElementById('richdraw').style.cursor='e-resize';
3909 var box = shape.getBBox();
3910 var prevbox=previus.getBBox();
3911 var centerx= box.x+(box.width/2);
3912 var centery= box.y+(box.height/2);
3913 var coord=this.editor.viewInputxy;
3915 var actual_angle=ang2v(centerx,centery,coord[0], coord[1]);
3917 if(xrot<toX) { rotatexxx+=1;}else{rotatexxx-=1;}
3918 xrot=toX;
3919 yrot=toY;
3921 var xtr=0;
3922 var ytr=0;
3924 var box= shape.getBBox();
3925 var tr1x= box.x;
3926 var tr1y= box.y;
3930 toX+=xtr;
3931 toY+=xtr;
3933 //var trax=parseFloat(toX-box.x); var tray= parseFloat(toY-box.y);
3934 var trax=parseFloat(box.x/2); var tray= parseFloat(box.y/2);
3935 var angler=Math.atan2(toX,toY);
3936 var angle=angler*180/Math.PI;
3937 var T = shape.getCTM();
3938 var rotini=T.a*(180 / Math.PI);
3939 var angle=rotini*180/Math.PI;
3940 var rot_angle=actual_angle*180/Math.PI;
3941 this.editor.log(centerx+' '+centery+' '+coord[0]+' '+coord[1]+'____ '+rot_angle+' '+actual_angle*180/Math.PI);
3944 // matrix( a, b, c, d, e, f )
3945 // a c e
3946 // b d f
3947 // 0 0 1
3948 //a scale factor of 2, a rotation of 30 deg and a translation of (500,50)
3949 //T 1.732 -1 500 1 1.732 50 0 0 1
3950 //T 1 ad-bc d -c -de+cf -b a be-df 0 0 1
3952 //shape.setAttributeNS(null,'transform', "translate("+(-xshe)+","+(-yshe)+")");
3954 // shape.setAttributeNS(null,"transform", " matrix( a, b, c, d, e, f )");
3955 // shape.setAttributeNS(null,'transform', "translate("+(box.x+(box.width/2))+","+(box.y+(box.height/2))+") rotate("+rotatexxx+") ");
3956 //shape.setAttributeNS(null,'transform', "translate("+(box.x+(box.width/2))+","+(box.y+(box.height/2))+") rotate("+rotatexxx+") translate("+(-box.x-(box.width/2))+","+(-box.y-(box.height/2))+") ");
3957 //shape.setAttributeNS(null,'transform', "rotate("+rotatexxx+","+(box.x+(box.width/2))+","+(box.y+(box.height/2))+")");
3958 //shape.setAttributeNS(null,'transform', "rotate("+rotatexxx+","+(prevbox.x+(prevbox.width/2))+","+(prevbox.y+(prevbox.height/2))+")");
3959 shape.setAttributeNS(null,'transform', "rotate("+rot_angle+","+(prevbox.x+(prevbox.width/2))+","+(prevbox.y+(prevbox.height/2))+")");
3962 //alert('[ ['+T.a+' '+T.c+' '+T.e+'] ['+T.b+' '+T.d+' '+T.f+'] [0 0 1] ]');
3963 //a,b,c,d,e,f
3965 // shape.setAttributeNS(null,'transform', 'matrix('+T.a+', '+T.b+', '+ T.c+', '+ T.d+', '+ T.e+', '+ T.f+')' );
3967 var x1=T.e;
3968 var y1=T.f;
3969 var sp = Math.sin(rotatexxx*(Math.PI / 180));
3970 var cp = Math.cos(rotatexxx*(Math.PI / 180));
3971 var x2 = 0 + r*rotatexxx*(Math.PI / 180);
3972 var y2 = 0;
3973 var r=0;
3975 var a=cp;
3976 var c=sp;
3977 var e=T.e;
3978 var b=T.b;
3979 var d=(-x1*cp+y1*sp+x2);
3980 var f=(-x1*sp-y1*cp+y2);
3982 var inv=T.inverse;
3983 var inv_mat=T.multiply(inv);
3984 //var matrix = "matrix(" + cp +"," + sp + "," + (-sp) + "," + cp + ","+ (-x1*cp+y1*sp+x2) + ","+ (-x1*sp-y1*cp+y2) + ")";
3985 //var matrix = "matrix(" + a +"," + c + "," + e + "," + b + ","+ d + ","+ f + ")";
3986 var matrix='matrix('+inv_mat.a+' '+inv_mat.b+' '+inv_mat.c+' '+inv_mat.d+' '+inv_mat.e+' '+inv_mat.f+')'
3988 //++ shape.setAttributeNS(null,'transform',matrix);
3990 //shape.setAttributeNS(null,'transform', "rotate("+rotatexxx+")");
3991 // shape.setAttributeNS(null,'transform', "translate("+(box.x)+","+(box.y)+")");
3993 //shape.setAttributeNS(null,'transform', "rotate("+rotatexxx+")");
3994 //shape.setAttributeNS(null, 'x', -box.width/2 + 'px');
3995 //shape.setAttributeNS(null, 'y', -box.height/2 + 'px');
3996 //shape.setAttributeNS(null,"transform", "matrix("+Math.cos(angle)+", "+Math.sin(angle)+", "+Math.sin(-angle)+", "+Math.cos(angle)+", 0, 0 )");
3997 //shape.setAttributeNS(null,'transform', "rotate("+10+")");
3999 //shape.setAttributeNS(null, 'x', box.width/2 + 'px');
4000 //shape.setAttributeNS(null, 'y', box.height/2 + 'px');
4004 //$('status').innerHTML = 'Mode: Draw '+pointshape +'_'+xsh +' '+ ysh+' '+trshape;
4006 //$('status').innerHTML=typeTransform+': '+rotatexxx;
4008 };
4012 // x(u) = x0*(1-u) + x1*u = x0 + (x1-x0)*u
4013 // y(u) = y0*(1-u) + y1*u = y0 + (y1-y0)*u
4017 SVGRenderer.prototype.getshapes = function(){
4018 var shape = document.getElementById('rectDoc');
4019 if (shape) {
4020 this.remove(shape);
4022 var shape = document.getElementById('tracker');
4023 if (shape) {
4024 this.remove(shape);
4026 return this.svgRoot.childNodes;
4027 // return this.container.childNodes
4028 //return this.svgRoot
4031 SVGRenderer.prototype.reflect = function(HorV) {
4032 var shape= c.selected;
4033 var box = shape.getBBox();
4035 if(shape.tagName=="path")
4038 var tx=box.x+(box.width/2);
4039 var ty=box.y+(box.height/2);
4041 if(HorV=='V'){
4042 var xinc=-1;
4043 var yinc=1;
4045 if(HorV=='H'){
4046 var xinc=1;
4047 var yinc=-1;
4051 var path=shape.getAttributeNS(null, 'd');
4052 path=path.replace(/, /g, ',');
4053 path=path.replace(/ ,/g, ',');
4054 var ps =path.split(" ")
4055 var pcc = "";
4056 var point =ps[0].split(",");
4059 var num0= parseFloat(point[0].substring(1));
4060 var num1= parseFloat(point[1]);
4062 var re = /^[-]?\d*\.?\d*$/;
4063 var axis = $V([tx,ty]);
4065 for(var i = 0; i < ps.length; i++)
4067 if(ps[i].indexOf(',')>0){
4069 var point =ps[i].split(",");
4070 var char1=point[0].substring(0,1);
4071 if(char1=='A' || char1=='a'){isArc=true; contArc=0;}
4072 if(isArc==true){contArc++}
4073 if(contArc==4){contArc=0; isArc=false}
4075 //if (isNaN(valnum))
4076 if (!char1.match(re))
4078 var num0= parseFloat(point[0].substring(1));
4079 var text=char1;
4080 }else{
4081 if(isArc==true && contArc==2 )
4083 var num0= point[0];
4084 }else{
4085 var num0= parseFloat(point[0]);
4087 var text='';
4092 if(isArc==true && contArc==2)
4094 point[1]= point[1].toString() ;
4096 else
4099 //num0*=xinc;
4100 point[1]= parseFloat(point[1]);
4101 //point[1]*=yinc;
4102 var pointIni=$V([num0,point[1],1]);
4103 var matrT = $M([[1,0,-tx],[0,1,-ty],[0,0,1]]);
4104 var matrS = $M([[xinc,0,0],[0,yinc,0],[0,0,1]]);
4105 var matrR = $M([[1,0,tx],[0,1,ty],[0,0,1]]);
4106 var matr1= matrT.x(pointIni);
4107 var matr2= matrS.x(matr1);
4108 //var pointR=pointIni.Random(1)
4109 //var pointR=pointIni.rotate(Math.PI/180,axis);
4110 //var pointRc=pointIni.cross(axis);
4111 //var pointR=matr2;
4112 var pointR=matrR.x(matr2);
4113 num0=pointR.elements[0];
4114 point[1]=pointR.elements[1];
4115 $('code').value=pointIni.elements[0]+','+pointR.elements[1]+' ';
4117 var cx=num0;
4118 var cy=point[1];
4119 pcc+=text+cx+','+cy+' ';
4120 //pcc+=text+cx+','+cy+' ';
4122 }else{
4123 pcc+=ps[i]+' ';
4126 var svg =shape.cloneNode(false);
4127 svg.setAttributeNS(null,'d', pcc);
4128 this.svgRoot.appendChild(svg);
4129 return svg;
4131 else
4133 if(shape.tagName=="text" || shape.tagName=="image" )
4137 var tr='';
4138 var turn0='';
4139 var svg =shape.cloneNode(false);
4140 var x= shape.getAttributeNS(null, 'x');
4141 var y= shape.getAttributeNS(null, 'y');
4142 x+=box.width/2;
4143 y+=box.height/2;
4144 if(HorV=='V')
4146 svg.setAttributeNS(null,'x',-parseFloat(x));
4147 var scaleSim='-1, 1';
4148 svg.setAttributeNS(null,'transform','scale('+scaleSim+')');
4149 //svg.setAttributeNS(null,'y',parseFloat(x));
4150 svg.setAttributeNS(null,'x',-parseFloat(x));
4154 if(HorV=='H')
4156 var scaleSim='1, -1';
4157 svg.setAttributeNS(null,'y',-parseFloat(y));
4158 svg.setAttributeNS(null,'transform','scale('+scaleSim+')');
4159 //svg.setAttributeNS(null,'x',parseFloat(x));
4160 svg.setAttributeNS(null,'y',-parseFloat(y));
4165 if(shape.hasAttributeNS(null, 'transform'))
4167 tr=shape.getAttributeNS(null, 'transform');
4168 turn0=GetString(tr,'rotate(',')');
4170 svg.setAttributeNS(null,'transform','rotate('+turn+'),scale('+scaleSim+')');
4171 svg.setAttributeNS(null,'x',parseFloat(x));
4172 svg.setAttributeNS(null,'y',parseFloat(y));
4174 //svg.setAttributeNS(null,'transform','rotate('+turn+'),scale('+'');
4175 }else{
4181 if(shape.tagName=="text"){
4182 var text=shape.textContent ;
4183 svg.textContent=text;
4185 //svg.setAttributeNS(null,'writing-mode',mode);
4186 //svg.setAttributeNS(null,'glyph-orientation-horizontal','0deg');
4187 //
4188 //svg.appendChild(text);
4190 this.svgRoot.appendChild(svg);
4191 return svg;
4193 else
4195 if(shape.hasAttributeNS(null, 'transform'))
4199 var tr=shape.getAttributeNS(null, 'transform');
4200 var turn0=GetString(tr, 'rotate(',',');
4201 turn0=parseFloat(turn0);
4202 //alert(turn0);
4204 if(HorV=='V'){
4205 var angle=180;
4206 //var turn=(turn0+angle)-(turn0-90);
4207 var turn=turn0+((angle-turn0)*2);
4209 if(HorV=='H'){
4210 var angle=90;
4211 var turn=turn0+((angle-turn0)*2);
4213 var centerx= box.x+(box.width/2);
4214 var centery= box.y+(box.height/2);
4215 //this.editor.log(centerx+' '+centery+' '+coord[0]+' '+coord[1]+'____ '+rot_angle+' '+actual_angle*180/Math.PI);
4216 var svg =shape.cloneNode(false);
4217 svg.setAttributeNS(null,'transform', "rotate("+turn+","+centerx+","+centery+")");
4218 this.svgRoot.appendChild(svg);
4219 return svg;
4221 else
4223 var centerx= box.x+(box.width/2);
4224 var centery= box.y+(box.height/2);
4225 shape.setAttributeNS(null,'transform', "rotate("+180+","+centerx+","+centery+")");
4230 };
4231 //http://dev.opera.com/articles/view/svg-evolution-2-our-first-steps-into-sv/?page=3
4232 //http://www.w3.org/TR/2000/03/WD-SVG-20000303/exchange.html#StylingAttributes
4233 //http://www.xml.com/lpt/a/1390
4241 //http://xml-utils.com/conferencia-svg.html#d0e527
4242 //http://www.xml.com/lpt/a/1321
4243 //http://phrogz.net/objjob/object.asp?id=101
4244 //http://admisource.gouv.fr/plugins/scmcvs/cvsweb.php/Cassini-ihm/js-yosemite/mapApp.js?rev=1.1;cvsroot=cassini
4245 //http://groups.google.com/group/prototype-graphic/msg/0547c0caea8869c6
4246 //http://sylvester.jcoglan.com/