/ext-4.0.7/docs/source/Vml.html
HTML | 963 lines | 875 code | 88 blank | 0 comment | 0 complexity | fd6bd3633651427987f31f8277c0fb20 MD5 | raw file
1<!DOCTYPE html>
2<html>
3<head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>The source code</title>
6 <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
7 <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
8 <style type="text/css">
9 .highlight { display: block; background-color: #ddd; }
10 </style>
11 <script type="text/javascript">
12 function highlight() {
13 document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
14 }
15 </script>
16</head>
17<body onload="prettyPrint(); highlight();">
18 <pre class="prettyprint lang-js"><span id='Ext-draw-engine-Vml'>/**
19</span> * @class Ext.draw.engine.Vml
20 * @extends Ext.draw.Surface
21 * Provides specific methods to draw with VML.
22 */
23
24Ext.define('Ext.draw.engine.Vml', {
25
26 /* Begin Definitions */
27
28 extend: 'Ext.draw.Surface',
29
30 requires: ['Ext.draw.Draw', 'Ext.draw.Color', 'Ext.draw.Sprite', 'Ext.draw.Matrix', 'Ext.Element'],
31
32 /* End Definitions */
33
34 engine: 'Vml',
35
36 map: {M: "m", L: "l", C: "c", Z: "x", m: "t", l: "r", c: "v", z: "x"},
37 bitesRe: /([clmz]),?([^clmz]*)/gi,
38 valRe: /-?[^,\s-]+/g,
39 fillUrlRe: /^url\(\s*['"]?([^\)]+?)['"]?\s*\)$/i,
40 pathlike: /^(path|rect)$/,
41 NonVmlPathRe: /[ahqstv]/ig, // Non-VML Pathing ops
42 partialPathRe: /[clmz]/g,
43 fontFamilyRe: /^['"]+|['"]+$/g,
44 baseVmlCls: Ext.baseCSSPrefix + 'vml-base',
45 vmlGroupCls: Ext.baseCSSPrefix + 'vml-group',
46 spriteCls: Ext.baseCSSPrefix + 'vml-sprite',
47 measureSpanCls: Ext.baseCSSPrefix + 'vml-measure-span',
48 zoom: 21600,
49 coordsize: 1000,
50 coordorigin: '0 0',
51
52 // VML uses CSS z-index and therefore doesn't need sprites to be kept in zIndex order
53 orderSpritesByZIndex: false,
54
55 // @private
56 // Convert an SVG standard path into a VML path
57 path2vml: function (path) {
58 var me = this,
59 nonVML = me.NonVmlPathRe,
60 map = me.map,
61 val = me.valRe,
62 zoom = me.zoom,
63 bites = me.bitesRe,
64 command = Ext.Function.bind(Ext.draw.Draw.pathToAbsolute, Ext.draw.Draw),
65 res, pa, p, r, i, ii, j, jj;
66 if (String(path).match(nonVML)) {
67 command = Ext.Function.bind(Ext.draw.Draw.path2curve, Ext.draw.Draw);
68 } else if (!String(path).match(me.partialPathRe)) {
69 res = String(path).replace(bites, function (all, command, args) {
70 var vals = [],
71 isMove = command.toLowerCase() == "m",
72 res = map[command];
73 args.replace(val, function (value) {
74 if (isMove && vals[length] == 2) {
75 res += vals + map[command == "m" ? "l" : "L"];
76 vals = [];
77 }
78 vals.push(Math.round(value * zoom));
79 });
80 return res + vals;
81 });
82 return res;
83 }
84 pa = command(path);
85 res = [];
86 for (i = 0, ii = pa.length; i < ii; i++) {
87 p = pa[i];
88 r = pa[i][0].toLowerCase();
89 if (r == "z") {
90 r = "x";
91 }
92 for (j = 1, jj = p.length; j < jj; j++) {
93 r += Math.round(p[j] * me.zoom) + (j != jj - 1 ? "," : "");
94 }
95 res.push(r);
96 }
97 return res.join(" ");
98 },
99
100 // @private - set of attributes which need to be translated from the sprite API to the native browser API
101 translateAttrs: {
102 radius: "r",
103 radiusX: "rx",
104 radiusY: "ry",
105 lineWidth: "stroke-width",
106 fillOpacity: "fill-opacity",
107 strokeOpacity: "stroke-opacity",
108 strokeLinejoin: "stroke-linejoin"
109 },
110
111 // @private - Minimun set of defaults for different types of sprites.
112 minDefaults: {
113 circle: {
114 fill: "none",
115 stroke: null,
116 "stroke-width": null,
117 opacity: null,
118 "fill-opacity": null,
119 "stroke-opacity": null
120 },
121 ellipse: {
122 cx: 0,
123 cy: 0,
124 rx: 0,
125 ry: 0,
126 fill: "none",
127 stroke: null,
128 "stroke-width": null,
129 opacity: null,
130 "fill-opacity": null,
131 "stroke-opacity": null
132 },
133 rect: {
134 x: 0,
135 y: 0,
136 width: 0,
137 height: 0,
138 rx: 0,
139 ry: 0,
140 fill: "none",
141 stroke: null,
142 "stroke-width": null,
143 opacity: null,
144 "fill-opacity": null,
145 "stroke-opacity": null
146 },
147 text: {
148 x: 0,
149 y: 0,
150 "text-anchor": "start",
151 font: '10px "Arial"',
152 fill: "#000",
153 stroke: null,
154 "stroke-width": null,
155 opacity: null,
156 "fill-opacity": null,
157 "stroke-opacity": null
158 },
159 path: {
160 d: "M0,0",
161 fill: "none",
162 stroke: null,
163 "stroke-width": null,
164 opacity: null,
165 "fill-opacity": null,
166 "stroke-opacity": null
167 },
168 image: {
169 x: 0,
170 y: 0,
171 width: 0,
172 height: 0,
173 preserveAspectRatio: "none",
174 opacity: null
175 }
176 },
177
178 // private
179 onMouseEnter: function(e) {
180 this.fireEvent("mouseenter", e);
181 },
182
183 // private
184 onMouseLeave: function(e) {
185 this.fireEvent("mouseleave", e);
186 },
187
188 // @private - Normalize a delegated single event from the main container to each sprite and sprite group
189 processEvent: function(name, e) {
190 var target = e.getTarget(),
191 surface = this.surface,
192 sprite;
193 this.fireEvent(name, e);
194 sprite = this.items.get(target.id);
195 if (sprite) {
196 sprite.fireEvent(name, sprite, e);
197 }
198 },
199
200 // Create the VML element/elements and append them to the DOM
201 createSpriteElement: function(sprite) {
202 var me = this,
203 attr = sprite.attr,
204 type = sprite.type,
205 zoom = me.zoom,
206 vml = sprite.vml || (sprite.vml = {}),
207 round = Math.round,
208 el = me.createNode('shape'),
209 path, skew, textPath;
210
211 el.coordsize = zoom + ' ' + zoom;
212 el.coordorigin = attr.coordorigin || "0 0";
213 Ext.get(el).addCls(me.spriteCls);
214 if (type == "text") {
215 vml.path = path = me.createNode("path");
216 path.textpathok = true;
217 vml.textpath = textPath = me.createNode("textpath");
218 textPath.on = true;
219 el.appendChild(textPath);
220 el.appendChild(path);
221 }
222 el.id = sprite.id;
223 sprite.el = Ext.get(el);
224 me.el.appendChild(el);
225 if (type !== 'image') {
226 skew = me.createNode("skew");
227 skew.on = true;
228 el.appendChild(skew);
229 sprite.skew = skew;
230 }
231 sprite.matrix = Ext.create('Ext.draw.Matrix');
232 sprite.bbox = {
233 plain: null,
234 transform: null
235 };
236 sprite.fireEvent("render", sprite);
237 return sprite.el;
238 },
239
240 // @private - Get bounding box for the sprite. The Sprite itself has the public method.
241 getBBox: function (sprite, isWithoutTransform) {
242 var realPath = this["getPath" + sprite.type](sprite);
243 if (isWithoutTransform) {
244 sprite.bbox.plain = sprite.bbox.plain || Ext.draw.Draw.pathDimensions(realPath);
245 return sprite.bbox.plain;
246 }
247 sprite.bbox.transform = sprite.bbox.transform || Ext.draw.Draw.pathDimensions(Ext.draw.Draw.mapPath(realPath, sprite.matrix));
248 return sprite.bbox.transform;
249 },
250
251 getBBoxText: function (sprite) {
252 var vml = sprite.vml;
253 return {
254 x: vml.X + (vml.bbx || 0) - vml.W / 2,
255 y: vml.Y - vml.H / 2,
256 width: vml.W,
257 height: vml.H
258 };
259 },
260
261 applyAttrs: function (sprite) {
262 var me = this,
263 vml = sprite.vml,
264 group = sprite.group,
265 spriteAttr = sprite.attr,
266 el = sprite.el,
267 dom = el.dom,
268 style, name, groups, i, ln, scrubbedAttrs, font, key, bbox;
269
270 if (group) {
271 groups = [].concat(group);
272 ln = groups.length;
273 for (i = 0; i < ln; i++) {
274 group = groups[i];
275 me.getGroup(group).add(sprite);
276 }
277 delete sprite.group;
278 }
279 scrubbedAttrs = me.scrubAttrs(sprite) || {};
280
281 if (sprite.zIndexDirty) {
282 me.setZIndex(sprite);
283 }
284
285 // Apply minimum default attributes
286 Ext.applyIf(scrubbedAttrs, me.minDefaults[sprite.type]);
287
288 if (dom.href) {
289 dom.href = scrubbedAttrs.href;
290 }
291 if (dom.title) {
292 dom.title = scrubbedAttrs.title;
293 }
294 if (dom.target) {
295 dom.target = scrubbedAttrs.target;
296 }
297 if (dom.cursor) {
298 dom.cursor = scrubbedAttrs.cursor;
299 }
300
301 // Change visibility
302 if (sprite.dirtyHidden) {
303 (scrubbedAttrs.hidden) ? me.hidePrim(sprite) : me.showPrim(sprite);
304 sprite.dirtyHidden = false;
305 }
306
307 // Update path
308 if (sprite.dirtyPath) {
309 if (sprite.type == "circle" || sprite.type == "ellipse") {
310 var cx = scrubbedAttrs.x,
311 cy = scrubbedAttrs.y,
312 rx = scrubbedAttrs.rx || scrubbedAttrs.r || 0,
313 ry = scrubbedAttrs.ry || scrubbedAttrs.r || 0;
314 dom.path = Ext.String.format("ar{0},{1},{2},{3},{4},{1},{4},{1}",
315 Math.round((cx - rx) * me.zoom),
316 Math.round((cy - ry) * me.zoom),
317 Math.round((cx + rx) * me.zoom),
318 Math.round((cy + ry) * me.zoom),
319 Math.round(cx * me.zoom));
320 sprite.dirtyPath = false;
321 }
322 else if (sprite.type !== "text") {
323 sprite.attr.path = scrubbedAttrs.path = me.setPaths(sprite, scrubbedAttrs) || scrubbedAttrs.path;
324 dom.path = me.path2vml(scrubbedAttrs.path);
325 sprite.dirtyPath = false;
326 }
327 }
328
329 // Apply clipping
330 if ("clip-rect" in scrubbedAttrs) {
331 me.setClip(sprite, scrubbedAttrs);
332 }
333
334 // Handle text (special handling required)
335 if (sprite.type == "text") {
336 me.setTextAttributes(sprite, scrubbedAttrs);
337 }
338
339 // Handle fill and opacity
340 if (sprite.type == 'image' || scrubbedAttrs.opacity || scrubbedAttrs['fill-opacity'] || scrubbedAttrs.fill) {
341 me.setFill(sprite, scrubbedAttrs);
342 }
343
344 // Handle stroke (all fills require a stroke element)
345 if (scrubbedAttrs.stroke || scrubbedAttrs['stroke-opacity'] || scrubbedAttrs.fill) {
346 me.setStroke(sprite, scrubbedAttrs);
347 }
348
349 //set styles
350 style = spriteAttr.style;
351 if (style) {
352 el.setStyle(style);
353 }
354
355 sprite.dirty = false;
356 },
357
358 setZIndex: function(sprite) {
359 if (sprite.el) {
360 if (sprite.attr.zIndex != undefined) {
361 sprite.el.setStyle('zIndex', sprite.attr.zIndex);
362 }
363 sprite.zIndexDirty = false;
364 }
365 },
366
367 // Normalize all virtualized types into paths.
368 setPaths: function(sprite, params) {
369 var spriteAttr = sprite.attr;
370 // Clear bbox cache
371 sprite.bbox.plain = null;
372 sprite.bbox.transform = null;
373 if (sprite.type == 'circle') {
374 spriteAttr.rx = spriteAttr.ry = params.r;
375 return Ext.draw.Draw.ellipsePath(sprite);
376 }
377 else if (sprite.type == 'ellipse') {
378 spriteAttr.rx = params.rx;
379 spriteAttr.ry = params.ry;
380 return Ext.draw.Draw.ellipsePath(sprite);
381 }
382 else if (sprite.type == 'rect' || sprite.type == 'image') {
383 spriteAttr.rx = spriteAttr.ry = params.r;
384 return Ext.draw.Draw.rectPath(sprite);
385 }
386 else if (sprite.type == 'path' && spriteAttr.path) {
387 return Ext.draw.Draw.pathToAbsolute(spriteAttr.path);
388 }
389 return false;
390 },
391
392 setFill: function(sprite, params) {
393 var me = this,
394 el = sprite.el,
395 dom = el.dom,
396 fillEl = dom.getElementsByTagName('fill')[0],
397 opacity, gradient, fillUrl, rotation, angle;
398
399 if (fillEl) {
400 dom.removeChild(fillEl);
401 } else {
402 fillEl = me.createNode('fill');
403 }
404 if (Ext.isArray(params.fill)) {
405 params.fill = params.fill[0];
406 }
407 if (sprite.type == 'image') {
408 fillEl.on = true;
409 fillEl.src = params.src;
410 fillEl.type = "tile";
411 fillEl.rotate = true;
412 } else if (params.fill == "none") {
413 fillEl.on = false;
414 } else {
415 if (typeof params.opacity == "number") {
416 fillEl.opacity = params.opacity;
417 }
418 if (typeof params["fill-opacity"] == "number") {
419 fillEl.opacity = params["fill-opacity"];
420 }
421 fillEl.on = true;
422 if (typeof params.fill == "string") {
423 fillUrl = params.fill.match(me.fillUrlRe);
424 if (fillUrl) {
425 fillUrl = fillUrl[1];
426 // If the URL matches one of the registered gradients, render that gradient
427 if (fillUrl.charAt(0) == "#") {
428 gradient = me.gradientsColl.getByKey(fillUrl.substring(1));
429 }
430 if (gradient) {
431 // VML angle is offset and inverted from standard, and must be adjusted to match rotation transform
432 rotation = params.rotation;
433 angle = -(gradient.angle + 270 + (rotation ? rotation.degrees : 0)) % 360;
434 // IE will flip the angle at 0 degrees...
435 if (angle === 0) {
436 angle = 180;
437 }
438 fillEl.angle = angle;
439 fillEl.type = "gradient";
440 fillEl.method = "sigma";
441 fillEl.colors = gradient.colors;
442 }
443 // Otherwise treat it as an image
444 else {
445 fillEl.src = fillUrl;
446 fillEl.type = "tile";
447 fillEl.rotate = true;
448 }
449 }
450 else {
451 fillEl.color = Ext.draw.Color.toHex(params.fill) || params.fill;
452 fillEl.src = "";
453 fillEl.type = "solid";
454 }
455 }
456 }
457 dom.appendChild(fillEl);
458 },
459
460 setStroke: function(sprite, params) {
461 var me = this,
462 el = sprite.el.dom,
463 strokeEl = sprite.strokeEl,
464 newStroke = false,
465 width, opacity;
466
467 if (!strokeEl) {
468 strokeEl = sprite.strokeEl = me.createNode("stroke");
469 newStroke = true;
470 }
471 if (Ext.isArray(params.stroke)) {
472 params.stroke = params.stroke[0];
473 }
474 if (!params.stroke || params.stroke == "none" || params.stroke == 0 || params["stroke-width"] == 0) {
475 strokeEl.on = false;
476 }
477 else {
478 strokeEl.on = true;
479 if (params.stroke && !params.stroke.match(me.fillUrlRe)) {
480 // VML does NOT support a gradient stroke :(
481 strokeEl.color = Ext.draw.Color.toHex(params.stroke);
482 }
483 strokeEl.joinstyle = params["stroke-linejoin"];
484 strokeEl.endcap = params["stroke-linecap"] || "round";
485 strokeEl.miterlimit = params["stroke-miterlimit"] || 8;
486 width = parseFloat(params["stroke-width"] || 1) * 0.75;
487 opacity = params["stroke-opacity"] || 1;
488 // VML Does not support stroke widths under 1, so we're going to fiddle with stroke-opacity instead.
489 if (Ext.isNumber(width) && width < 1) {
490 strokeEl.weight = 1;
491 strokeEl.opacity = opacity * width;
492 }
493 else {
494 strokeEl.weight = width;
495 strokeEl.opacity = opacity;
496 }
497 }
498 if (newStroke) {
499 el.appendChild(strokeEl);
500 }
501 },
502
503 setClip: function(sprite, params) {
504 var me = this,
505 el = sprite.el,
506 clipEl = sprite.clipEl,
507 rect = String(params["clip-rect"]).split(me.separatorRe);
508 if (!clipEl) {
509 clipEl = sprite.clipEl = me.el.insertFirst(Ext.getDoc().dom.createElement("div"));
510 clipEl.addCls(Ext.baseCSSPrefix + 'vml-sprite');
511 }
512 if (rect.length == 4) {
513 rect[2] = +rect[2] + (+rect[0]);
514 rect[3] = +rect[3] + (+rect[1]);
515 clipEl.setStyle("clip", Ext.String.format("rect({1}px {2}px {3}px {0}px)", rect[0], rect[1], rect[2], rect[3]));
516 clipEl.setSize(me.el.width, me.el.height);
517 }
518 else {
519 clipEl.setStyle("clip", "");
520 }
521 },
522
523 setTextAttributes: function(sprite, params) {
524 var me = this,
525 vml = sprite.vml,
526 textStyle = vml.textpath.style,
527 spanCacheStyle = me.span.style,
528 zoom = me.zoom,
529 round = Math.round,
530 fontObj = {
531 fontSize: "font-size",
532 fontWeight: "font-weight",
533 fontStyle: "font-style"
534 },
535 fontProp,
536 paramProp;
537 if (sprite.dirtyFont) {
538 if (params.font) {
539 textStyle.font = spanCacheStyle.font = params.font;
540 }
541 if (params["font-family"]) {
542 textStyle.fontFamily = '"' + params["font-family"].split(",")[0].replace(me.fontFamilyRe, "") + '"';
543 spanCacheStyle.fontFamily = params["font-family"];
544 }
545
546 for (fontProp in fontObj) {
547 paramProp = params[fontObj[fontProp]];
548 if (paramProp) {
549 textStyle[fontProp] = spanCacheStyle[fontProp] = paramProp;
550 }
551 }
552
553 me.setText(sprite, params.text);
554
555 if (vml.textpath.string) {
556 me.span.innerHTML = String(vml.textpath.string).replace(/</g, "&#60;").replace(/&/g, "&#38;").replace(/\n/g, "<br>");
557 }
558 vml.W = me.span.offsetWidth;
559 vml.H = me.span.offsetHeight + 2; // TODO handle baseline differences and offset in VML Textpath
560
561 // text-anchor emulation
562 if (params["text-anchor"] == "middle") {
563 textStyle["v-text-align"] = "center";
564 }
565 else if (params["text-anchor"] == "end") {
566 textStyle["v-text-align"] = "right";
567 vml.bbx = -Math.round(vml.W / 2);
568 }
569 else {
570 textStyle["v-text-align"] = "left";
571 vml.bbx = Math.round(vml.W / 2);
572 }
573 }
574 vml.X = params.x;
575 vml.Y = params.y;
576 vml.path.v = Ext.String.format("m{0},{1}l{2},{1}", Math.round(vml.X * zoom), Math.round(vml.Y * zoom), Math.round(vml.X * zoom) + 1);
577 // Clear bbox cache
578 sprite.bbox.plain = null;
579 sprite.bbox.transform = null;
580 sprite.dirtyFont = false;
581 },
582
583 setText: function(sprite, text) {
584 sprite.vml.textpath.string = Ext.htmlDecode(text);
585 },
586
587 hide: function() {
588 this.el.hide();
589 },
590
591 show: function() {
592 this.el.show();
593 },
594
595 hidePrim: function(sprite) {
596 sprite.el.addCls(Ext.baseCSSPrefix + 'hide-visibility');
597 },
598
599 showPrim: function(sprite) {
600 sprite.el.removeCls(Ext.baseCSSPrefix + 'hide-visibility');
601 },
602
603 setSize: function(width, height) {
604 var me = this;
605 width = width || me.width;
606 height = height || me.height;
607 me.width = width;
608 me.height = height;
609
610 if (me.el) {
611 // Size outer div
612 if (width != undefined) {
613 me.el.setWidth(width);
614 }
615 if (height != undefined) {
616 me.el.setHeight(height);
617 }
618
619 // Handle viewBox sizing
620 me.applyViewBox();
621
622 me.callParent(arguments);
623 }
624 },
625
626 setViewBox: function(x, y, width, height) {
627 this.callParent(arguments);
628 this.viewBox = {
629 x: x,
630 y: y,
631 width: width,
632 height: height
633 };
634 this.applyViewBox();
635 },
636
637<span id='Ext-draw-engine-Vml-method-applyViewBox'> /**
638</span> * @private Using the current viewBox property and the surface's width and height, calculate the
639 * appropriate viewBoxShift that will be applied as a persistent transform to all sprites.
640 */
641 applyViewBox: function() {
642 var me = this,
643 viewBox = me.viewBox,
644 width = me.width,
645 height = me.height,
646 viewBoxX, viewBoxY, viewBoxWidth, viewBoxHeight,
647 relativeHeight, relativeWidth, size;
648
649 if (viewBox && (width || height)) {
650 viewBoxX = viewBox.x;
651 viewBoxY = viewBox.y;
652 viewBoxWidth = viewBox.width;
653 viewBoxHeight = viewBox.height;
654 relativeHeight = height / viewBoxHeight;
655 relativeWidth = width / viewBoxWidth;
656
657 if (viewBoxWidth * relativeHeight < width) {
658 viewBoxX -= (width - viewBoxWidth * relativeHeight) / 2 / relativeHeight;
659 }
660 if (viewBoxHeight * relativeWidth < height) {
661 viewBoxY -= (height - viewBoxHeight * relativeWidth) / 2 / relativeWidth;
662 }
663
664 size = 1 / Math.max(viewBoxWidth / width, viewBoxHeight / height);
665
666 me.viewBoxShift = {
667 dx: -viewBoxX,
668 dy: -viewBoxY,
669 scale: size
670 };
671 me.items.each(function(item) {
672 me.transform(item);
673 });
674 }
675 },
676
677 onAdd: function(item) {
678 this.callParent(arguments);
679 if (this.el) {
680 this.renderItem(item);
681 }
682 },
683
684 onRemove: function(sprite) {
685 if (sprite.el) {
686 sprite.el.remove();
687 delete sprite.el;
688 }
689 this.callParent(arguments);
690 },
691
692 // VML Node factory method (createNode)
693 createNode : (function () {
694 try {
695 var doc = Ext.getDoc().dom;
696 if (!doc.namespaces.rvml) {
697 doc.namespaces.add("rvml", "urn:schemas-microsoft-com:vml");
698 }
699 return function (tagName) {
700 return doc.createElement("<rvml:" + tagName + ' class="rvml">');
701 };
702 } catch (e) {
703 return function (tagName) {
704 return doc.createElement("<" + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
705 };
706 }
707 })(),
708
709 render: function (container) {
710 var me = this,
711 doc = Ext.getDoc().dom;
712
713 if (!me.el) {
714 var el = doc.createElement("div");
715 me.el = Ext.get(el);
716 me.el.addCls(me.baseVmlCls);
717
718 // Measuring span (offscrren)
719 me.span = doc.createElement("span");
720 Ext.get(me.span).addCls(me.measureSpanCls);
721 el.appendChild(me.span);
722 me.el.setSize(me.width || 10, me.height || 10);
723 container.appendChild(el);
724 me.el.on({
725 scope: me,
726 mouseup: me.onMouseUp,
727 mousedown: me.onMouseDown,
728 mouseover: me.onMouseOver,
729 mouseout: me.onMouseOut,
730 mousemove: me.onMouseMove,
731 mouseenter: me.onMouseEnter,
732 mouseleave: me.onMouseLeave,
733 click: me.onClick
734 });
735 }
736 me.renderAll();
737 },
738
739 renderAll: function() {
740 this.items.each(this.renderItem, this);
741 },
742
743 redraw: function(sprite) {
744 sprite.dirty = true;
745 this.renderItem(sprite);
746 },
747
748 renderItem: function (sprite) {
749 // Does the surface element exist?
750 if (!this.el) {
751 return;
752 }
753
754 // Create sprite element if necessary
755 if (!sprite.el) {
756 this.createSpriteElement(sprite);
757 }
758
759 if (sprite.dirty) {
760 this.applyAttrs(sprite);
761 if (sprite.dirtyTransform) {
762 this.applyTransformations(sprite);
763 }
764 }
765 },
766
767 rotationCompensation: function (deg, dx, dy) {
768 var matrix = Ext.create('Ext.draw.Matrix');
769 matrix.rotate(-deg, 0.5, 0.5);
770 return {
771 x: matrix.x(dx, dy),
772 y: matrix.y(dx, dy)
773 };
774 },
775
776 extractTransform: function (sprite) {
777 var me = this,
778 matrix = Ext.create('Ext.draw.Matrix'), scale,
779 transformstions, tranformationsLength,
780 transform, i = 0,
781 shift = me.viewBoxShift;
782
783 for(transformstions = sprite.transformations, tranformationsLength = transformstions.length;
784 i < tranformationsLength; i ++) {
785 transform = transformstions[i];
786 switch (transform.type) {
787 case 'translate' :
788 matrix.translate(transform.x, transform.y);
789 break;
790 case 'rotate':
791 matrix.rotate(transform.degrees, transform.x, transform.y);
792 break;
793 case 'scale':
794 matrix.scale(transform.x || transform.scale, transform.y || transform.scale, transform.centerX, transform.centerY);
795 break;
796 }
797 }
798
799 if (shift) {
800 matrix.add(1, 0, 0, 1, shift.dx, shift.dy);
801 matrix.prepend(shift.scale, 0, 0, shift.scale, 0, 0);
802 }
803
804 return sprite.matrix = matrix;
805 },
806
807 setSimpleCoords: function(sprite, sx, sy, dx, dy, rotate) {
808 var me = this,
809 matrix = sprite.matrix,
810 dom = sprite.el.dom,
811 style = dom.style,
812 yFlipper = 1,
813 flip = "",
814 fill = dom.getElementsByTagName('fill')[0],
815 kx = me.zoom / sx,
816 ky = me.zoom / sy,
817 rotationCompensation;
818 if (!sx || !sy) {
819 return;
820 }
821 dom.coordsize = Math.abs(kx) + ' ' + Math.abs(ky);
822 style.rotation = rotate * (sx * sy < 0 ? -1 : 1);
823 if (rotate) {
824 rotationCompensation = me.rotationCompensation(rotate, dx, dy);
825 dx = rotationCompensation.x;
826 dy = rotationCompensation.y;
827 }
828 if (sx < 0) {
829 flip += "x"
830 }
831 if (sy < 0) {
832 flip += " y";
833 yFlipper = -1;
834 }
835 style.flip = flip;
836 dom.coordorigin = (dx * -kx) + ' ' + (dy * -ky);
837 if (fill) {
838 dom.removeChild(fill);
839 rotationCompensation = me.rotationCompensation(rotate, matrix.x(sprite.x, sprite.y), matrix.y(sprite.x, sprite.y));
840 fill.position = rotationCompensation.x * yFlipper + ' ' + rotationCompensation.y * yFlipper;
841 fill.size = sprite.width * Math.abs(sx) + ' ' + sprite.height * Math.abs(sy);
842 dom.appendChild(fill);
843 }
844 },
845
846 transform : function (sprite) {
847 var me = this,
848 el = sprite.el,
849 skew = sprite.skew,
850 dom = el.dom,
851 domStyle = dom.style,
852 matrix = me.extractTransform(sprite).clone(),
853 split, zoom = me.zoom,
854 fill = dom.getElementsByTagName('fill')[0],
855 isPatt = !String(sprite.fill).indexOf("url("),
856 offset, c;
857
858
859 // Hide element while we transform
860
861 if (sprite.type != "image" && skew && !isPatt) {
862 // matrix transform via VML skew
863 skew.matrix = matrix.toString();
864 // skew.offset = '32767,1' OK
865 // skew.offset = '32768,1' Crash
866 // M$, R U kidding??
867 offset = matrix.offset();
868 if (offset[0] > 32767) {
869 offset[0] = 32767;
870 } else if (offset[0] < -32768) {
871 offset[0] = -32768
872 }
873 if (offset[1] > 32767) {
874 offset[1] = 32767;
875 } else if (offset[1] < -32768) {
876 offset[1] = -32768
877 }
878 skew.offset = offset;
879 } else {
880 if (skew) {
881 skew.matrix = "1 0 0 1";
882 skew.offset = "0 0";
883 }
884 split = matrix.split();
885 if (split.isSimple) {
886 domStyle.filter = '';
887 me.setSimpleCoords(sprite, split.scaleX, split.scaleY, split.translateX, split.translateY, split.rotate / Math.PI * 180);
888 } else {
889 domStyle.filter = matrix.toFilter();
890 var bb = me.getBBox(sprite),
891 dx = bb.x - sprite.x,
892 dy = bb.y - sprite.y;
893 dom.coordorigin = (dx * -zoom) + ' ' + (dy * -zoom);
894 if (fill) {
895 dom.removeChild(fill);
896 fill.position = dx + ' ' + dy;
897 fill.size = sprite.width * sprite.scale.x + ' ' + sprite.height * 1.1;
898 dom.appendChild(fill);
899 }
900 }
901 }
902 },
903
904 createItem: function (config) {
905 return Ext.create('Ext.draw.Sprite', config);
906 },
907
908 getRegion: function() {
909 return this.el.getRegion();
910 },
911
912 addCls: function(sprite, className) {
913 if (sprite && sprite.el) {
914 sprite.el.addCls(className);
915 }
916 },
917
918 removeCls: function(sprite, className) {
919 if (sprite && sprite.el) {
920 sprite.el.removeCls(className);
921 }
922 },
923
924<span id='Ext-draw-engine-Vml-method-addGradient'> /**
925</span> * Adds a definition to this Surface for a linear gradient. We convert the gradient definition
926 * to its corresponding VML attributes and store it for later use by individual sprites.
927 * @param {Object} gradient
928 */
929 addGradient: function(gradient) {
930 var gradients = this.gradientsColl || (this.gradientsColl = Ext.create('Ext.util.MixedCollection')),
931 colors = [],
932 stops = Ext.create('Ext.util.MixedCollection');
933
934 // Build colors string
935 stops.addAll(gradient.stops);
936 stops.sortByKey("ASC", function(a, b) {
937 a = parseInt(a, 10);
938 b = parseInt(b, 10);
939 return a > b ? 1 : (a < b ? -1 : 0);
940 });
941 stops.eachKey(function(k, v) {
942 colors.push(k + "% " + v.color);
943 });
944
945 gradients.add(gradient.id, {
946 colors: colors.join(","),
947 angle: gradient.angle
948 });
949 },
950
951 destroy: function() {
952 var me = this;
953
954 me.callParent(arguments);
955 if (me.el) {
956 me.el.remove();
957 }
958 delete me.el;
959 }
960});
961</pre>
962</body>
963</html>