From 81cf81b34d8ee0c84f07d23a6ad175946d74a45e Mon Sep 17 00:00:00 2001 From: kangax Date: Wed, 4 Aug 2010 23:23:16 -0400 Subject: [PATCH] Add support for locking of movement (horizontal or vertical), rotation and scaling of objects. --- dist/all.js | 65 ++++++----- dist/all.min.js | 258 +++++++++++++++++++++---------------------- src/element.class.js | 65 ++++++----- test/demo/demo.js | 66 +++++++++++ test/demo/index.html | 27 ++++- 5 files changed, 291 insertions(+), 190 deletions(-) diff --git a/dist/all.js b/dist/all.js index 2b1c3e33..8c8183b9 100644 --- a/dist/all.js +++ b/dist/all.js @@ -2729,10 +2729,12 @@ fabric.util.animate = animate; */ __onMouseMove: function (e) { - if (this._groupSelector !== null) { + var groupSelector = this._groupSelector; + + if (groupSelector !== null) { var pointer = getPointer(e); - this._groupSelector.left = pointer.x - this._offset.left - this._groupSelector.ex; - this._groupSelector.top = pointer.y - this._offset.top - this._groupSelector.ey; + groupSelector.left = pointer.x - this._offset.left - groupSelector.ex; + groupSelector.top = pointer.y - this._offset.top - groupSelector.ey; this.renderTop(); } else if (!this._currentTransform) { @@ -2791,8 +2793,8 @@ fabric.util.animate = animate; */ _translateObject: function (x, y) { var target = this._currentTransform.target; - target.set('left', x - this._currentTransform.offsetX); - target.set('top', y - this._currentTransform.offsetY); + target.lockHorizontally || target.set('left', x - this._currentTransform.offsetX); + target.lockVertically || target.set('top', y - this._currentTransform.offsetY); }, /** @@ -2804,24 +2806,26 @@ fabric.util.animate = animate; * When not provided, an object is scaled by both dimensions equally */ _scaleObject: function (x, y, by) { - var lastLen = sqrt(pow(this._currentTransform.ey - this._currentTransform.top - this._offset.top, 2) + - pow(this._currentTransform.ex - this._currentTransform.left - this._offset.left, 2)); + var t = this._currentTransform, + offset = this._offset, + target = t.target; - var curLen = sqrt(pow(y - this._currentTransform.top - this._offset.top, 2) + - pow(x - this._currentTransform.left - this._offset.left, 2)); + if (target.lockScaling) return; + + var lastLen = sqrt(pow(t.ey - t.top - offset.top, 2) + pow(t.ex - t.left - offset.left, 2)), + curLen = sqrt(pow(y - t.top - offset.top, 2) + pow(x - t.left - offset.left, 2)); - var target = this._currentTransform.target; target._scaling = true; if (!by) { - target.set('scaleX', this._currentTransform.scaleX * curLen/lastLen); - target.set('scaleY', this._currentTransform.scaleY * curLen/lastLen); + target.set('scaleX', t.scaleX * curLen/lastLen); + target.set('scaleY', t.scaleY * curLen/lastLen); } else if (by === 'x') { - target.set('scaleX', this._currentTransform.scaleX * curLen/lastLen); + target.set('scaleX', t.scaleX * curLen/lastLen); } else if (by === 'y') { - target.set('scaleY', this._currentTransform.scaleY * curLen/lastLen); + target.set('scaleY', t.scaleY * curLen/lastLen); } }, @@ -2832,11 +2836,16 @@ fabric.util.animate = animate; * @param y {Number} pointer's y coordinate */ _rotateObject: function (x, y) { - var lastAngle = atan2(this._currentTransform.ey - this._currentTransform.top - this._offset.top, - this._currentTransform.ex - this._currentTransform.left - this._offset.left); - var curAngle = atan2(y - this._currentTransform.top - this._offset.top, - x - this._currentTransform.left - this._offset.left); - this._currentTransform.target.set('theta', (curAngle - lastAngle) + this._currentTransform.theta); + + var t = this._currentTransform, + o = this._offset; + + if (t.target.lockRotation) return; + + var lastAngle = atan2(t.ey - t.top - o.top, t.ex - t.left - o.left), + curAngle = atan2(y - t.top - o.top, x - t.left - o.left); + + t.target.set('theta', (curAngle - lastAngle) + t.theta); }, /** @@ -2896,16 +2905,17 @@ fabric.util.animate = animate; * @private */ _drawSelection: function () { - var left = this._groupSelector.left, - top = this._groupSelector.top, + var groupSelector = this._groupSelector, + left = groupSelector.left, + top = groupSelector.top, aleft = abs(left), atop = abs(top); this.contextTop.fillStyle = this.selectionColor; this.contextTop.fillRect( - this._groupSelector.ex - ((left > 0) ? 0 : -left), - this._groupSelector.ey - ((top > 0) ? 0 : -top), + groupSelector.ex - ((left > 0) ? 0 : -left), + groupSelector.ey - ((top > 0) ? 0 : -top), aleft, atop ); @@ -2914,15 +2924,14 @@ fabric.util.animate = animate; this.contextTop.strokeStyle = this.selectionBorderColor; this.contextTop.strokeRect( - this._groupSelector.ex + STROKE_OFFSET - ((left > 0) ? 0 : aleft), - this._groupSelector.ey + STROKE_OFFSET - ((top > 0) ? 0 : atop), + groupSelector.ex + STROKE_OFFSET - ((left > 0) ? 0 : aleft), + groupSelector.ey + STROKE_OFFSET - ((top > 0) ? 0 : atop), aleft, atop ); }, _findSelectedObjects: function (e) { - var target, targetRegion, group = [ ], @@ -3721,8 +3730,8 @@ fabric.util.animate = animate; _enlivenCachedObject: function (cachedObject) { - var objects = cachedObject.objects; - var options = cachedObject.options; + var objects = cachedObject.objects, + options = cachedObject.options; objects = objects.map(function (o) { return fabric[capitalize(o.type)].fromObject(o); diff --git a/dist/all.min.js b/dist/all.min.js index 450f2b82..b30a2842 100644 --- a/dist/all.min.js +++ b/dist/all.min.js @@ -1,163 +1,163 @@ if(typeof console=="undefined")var console={log:function(){},warn:function(){}};if(!this.JSON)this.JSON={}; -(function(){function g(h){return h<10?"0"+h:h}function o(h){k.lastIndex=0;return k.test(h)?'"'+h.replace(k,function(n){var q=a[n];return typeof q==="string"?q:"\\u"+("0000"+n.charCodeAt(0).toString(16)).slice(-4)})+'"':'"'+h+'"'}function c(h,n){var q,r,s,x,t=e,v,u=n[h];if(u&&typeof u==="object"&&typeof u.toJSON==="function")u=u.toJSON(h);if(typeof d==="function")u=d.call(n,h,u);switch(typeof u){case "string":return o(u);case "number":return isFinite(u)?String(u):"null";case "boolean":case "null":return String(u); -case "object":if(!u)return"null";e+=b;v=[];if(Object.prototype.toString.apply(u)==="[object Array]"){x=u.length;for(q=0;q>>0;e=Number(e)||0;e=Math[e<0?"ceil":"floor"](e);if(e<0)e+=b;for(;e>>0;b>>0;a>>0;b>>0;b>>0;d>>0,b=0,a;if(arguments.length>1)a=arguments[1];else{do{if(b in this){a=this[b++];break}if(++b>=e)throw new TypeError;}while(1)}for(;b=a)a=k[b][e]}else for(;b--;)if(k[b]>=a)a=k[b];return a}};c.util.object={extend:g,clone:function(k){return g({},k)}};if(!String.prototype.trim)String.prototype.trim=function(){return this.replace(/^\s+/,"").replace(/\s+$/,"")};c.util.string={camelize:function(k){return k.replace(/-+(.)?/g, function(e,b){return b?b.toUpperCase():""})},capitalize:function(k){return k.charAt(0).toUpperCase()+k.slice(1).toLowerCase()}};if(!Function.prototype.bind)Function.prototype.bind=function(k){var e=this,b=Array.prototype.slice.call(arguments,1);return function(){return e.apply(k,b.concat(Array.prototype.slice.call(arguments)))}};(function(){function k(){}var e;e=function(){for(var b in{toString:1})if(b==="toString")return false;return true}()?function(b,a){if(a.toString!==Object.prototype.toString)b.prototype.toString= a.toString;if(a.valueOf!==Object.prototype.valueOf)b.prototype.valueOf=a.valueOf;for(var d in a)b.prototype[d]=a[d]}:function(b,a){for(var d in a)b.prototype[d]=a[d]};c.util.createClass=function(){function b(){this.initialize.apply(this,arguments)}var a=null,d=m.call(arguments,0);if(typeof d[0]==="function")a=d.shift();b.superclass=a;b.subclasses=[];if(a){k.prototype=a.prototype;b.prototype=new k;a.subclasses.push(b)}a=0;for(var h=d.length;a=0.9999?"":"alpha(opacity="+h*100+")";n.filter=n.filter.replace(b,h)}else n.filter+=" alpha(opacity="+h*100+")";return d};c.util.setStyle=function(d,h){var n=d.style;if(typeof h==="string"){d.style.cssText+=";"+h;return h.indexOf("opacity")>-1?a(d,h.match(/opacity:\s*(\d?\.?\d*)/)[1]):d}for(var q in h)if(q==="opacity")a(d,h[q]);else n[q==="float"||q==="cssFloat"?typeof n.styleFloat==="undefined"?"cssFloat":"styleFloat":q]=h[q];return d}})();(function(){var k=document.documentElement.style, +emptyFunction;return b.prototype.constructor=b}})();(function(){function k(u){var w=Array.prototype.slice.call(arguments,1),v,A,f=w.length;for(A=0;A=0.9999?"":"alpha(opacity="+h*100+")";o.filter=o.filter.replace(b,h)}else o.filter+=" alpha(opacity="+h*100+")";return d};c.util.setStyle=function(d,h){var o=d.style;if(typeof h==="string"){d.style.cssText+=";"+h;return h.indexOf("opacity")>-1?a(d,h.match(/opacity:\s*(\d?\.?\d*)/)[1]):d}for(var q in h)if(q==="opacity")a(d,h[q]);else o[q==="float"||q==="cssFloat"?typeof o.styleFloat==="undefined"?"cssFloat":"styleFloat":q]=h[q];return d}})();(function(){var k=document.documentElement.style, e="userSelect"in k?"userSelect":"MozUserSelect"in k?"MozUserSelect":"WebkitUserSelect"in k?"WebkitUserSelect":"KhtmlUserSelect"in k?"KhtmlUserSelect":"";c.util.makeElementUnselectable=function(b){if(typeof b.onselectstart!=="undefined")b.onselectstart=c.util.falseFunction;if(e)b.style[e]="none";else if(typeof b.unselectable=="string")b.unselectable="on";return b}})();(function(){function k(b,a){e.load(b);a()}c.util.getScript=function(b,a){var d=document.getElementsByTagName("head")[0],h=document.createElement("script"), -n=true;h.type="text/javascript";h.setAttribute("runat","server");h.onload=h.onreadystatechange=function(q){if(n)if(!(typeof this.readyState=="string"&&this.readyState!=="loaded"&&this.readyState!=="complete")){n=false;a(q||window.event);h=h.onload=h.onreadystatechange=null}};h.src=b;d.appendChild(h)};var e=this.Jaxer;if(e&&e.load)c.util.getScript=k})();c.util.getById=function(k){return typeof k==="string"?document.getElementById(k):k};c.util.toArray=function(k){for(var e=[],b=k.length;b--;)e[b]=k[b]; -return e};c.util.makeElement=o;c.util.addClass=function(k,e){if((" "+k.className+" ").indexOf(" "+e+" ")===-1)k.className+=(k.className?" ":"")+e};c.util.wrapElement=function(k,e,b){if(typeof e==="string")e=o(e,b);k.parentNode&&k.parentNode.replaceChild(e,k);e.appendChild(k);return e};c.util.getElementOffset=function(k){var e=0,b=0;do{e+=k.offsetTop||0;b+=k.offsetLeft||0;k=k.offsetParent}while(k);return{left:b,top:e}};c.util.animate=function(k){k||(k={});var e=+new Date,b=k.duration||500,a=e+b,d, -h,n=k.onChange||function(){},q=k.easing||function(v){return-Math.cos(v*Math.PI)/2+0.5},r="startValue"in k?k.startValue:0,s="endValue"in k?k.endValue:100,x=r>s;k.onStart&&k.onStart();var t=setInterval(function(){d=+new Date;h=d>a?1:(d-e)/b;n(x?r-(r-s)*q(h):r+(s-r)*q(h));if(d>a){clearInterval(t);k.onComplete&&k.onComplete()}},10)};(function(){function k(){}var e=function(){for(var b=[function(){return new ActiveXObject("Microsoft.XMLHTTP")},function(){return new ActiveXObject("Msxml2.XMLHTTP")},function(){return new ActiveXObject("Msxml2.XMLHTTP.3.0")}, -function(){return new XMLHttpRequest}],a=b.length;a--;)try{if(b[a]())return b[a]}catch(d){}}();c.util.request=function(b,a){a||(a={});var d=a.method?a.method.toUpperCase():"GET",h=a.onComplete||function(){},n=e(),q;n.onreadystatechange=function(){if(n.readyState===4){h(n);n.onreadystatechange=k}};if(d==="GET"){q=null;if(typeof a.parameters=="string")b=b+(/\?/.test(b)?"&":"?")+a.parameters}n.open(d,b,true);if(d==="POST"||d==="PUT")n.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); -n.send(q);return n}})()})(this); -(function(){var g=this.fabric||(this.fabric={}),o=g.util.object.extend,c=g.util.string.capitalize,m=g.util.object.clone,k={cx:"left",x:"left",cy:"top",y:"top",r:"radius","fill-opacity":"opacity","fill-rule":"fillRule","stroke-width":"strokeWidth",transform:"transformMatrix"};g.parseTransformAttribute=function(){function e(q,r){var s=r[0];q[0]=Math.cos(s);q[1]=Math.sin(s);q[2]=-Math.sin(s);q[3]=Math.cos(s)}function b(q,r){var s=r.length===2?r[1]:r[0];q[0]=r[0];q[3]=s}function a(q,r){q[4]=r[0];if(r.length=== +o=true;h.type="text/javascript";h.setAttribute("runat","server");h.onload=h.onreadystatechange=function(q){if(o)if(!(typeof this.readyState=="string"&&this.readyState!=="loaded"&&this.readyState!=="complete")){o=false;a(q||window.event);h=h.onload=h.onreadystatechange=null}};h.src=b;d.appendChild(h)};var e=this.Jaxer;if(e&&e.load)c.util.getScript=k})();c.util.getById=function(k){return typeof k==="string"?document.getElementById(k):k};c.util.toArray=function(k){for(var e=[],b=k.length;b--;)e[b]=k[b]; +return e};c.util.makeElement=p;c.util.addClass=function(k,e){if((" "+k.className+" ").indexOf(" "+e+" ")===-1)k.className+=(k.className?" ":"")+e};c.util.wrapElement=function(k,e,b){if(typeof e==="string")e=p(e,b);k.parentNode&&k.parentNode.replaceChild(e,k);e.appendChild(k);return e};c.util.getElementOffset=function(k){var e=0,b=0;do{e+=k.offsetTop||0;b+=k.offsetLeft||0;k=k.offsetParent}while(k);return{left:b,top:e}};c.util.animate=function(k){k||(k={});var e=+new Date,b=k.duration||500,a=e+b,d, +h,o=k.onChange||function(){},q=k.easing||function(w){return-Math.cos(w*Math.PI)/2+0.5},r="startValue"in k?k.startValue:0,t="endValue"in k?k.endValue:100,x=r>t;k.onStart&&k.onStart();var u=setInterval(function(){d=+new Date;h=d>a?1:(d-e)/b;o(x?r-(r-t)*q(h):r+(t-r)*q(h));if(d>a){clearInterval(u);k.onComplete&&k.onComplete()}},10)};(function(){function k(){}var e=function(){for(var b=[function(){return new ActiveXObject("Microsoft.XMLHTTP")},function(){return new ActiveXObject("Msxml2.XMLHTTP")},function(){return new ActiveXObject("Msxml2.XMLHTTP.3.0")}, +function(){return new XMLHttpRequest}],a=b.length;a--;)try{if(b[a]())return b[a]}catch(d){}}();c.util.request=function(b,a){a||(a={});var d=a.method?a.method.toUpperCase():"GET",h=a.onComplete||function(){},o=e(),q;o.onreadystatechange=function(){if(o.readyState===4){h(o);o.onreadystatechange=k}};if(d==="GET"){q=null;if(typeof a.parameters=="string")b=b+(/\?/.test(b)?"&":"?")+a.parameters}o.open(d,b,true);if(d==="POST"||d==="PUT")o.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); +o.send(q);return o}})()})(this); +(function(){var g=this.fabric||(this.fabric={}),p=g.util.object.extend,c=g.util.string.capitalize,m=g.util.object.clone,k={cx:"left",x:"left",cy:"top",y:"top",r:"radius","fill-opacity":"opacity","fill-rule":"fillRule","stroke-width":"strokeWidth",transform:"transformMatrix"};g.parseTransformAttribute=function(){function e(q,r){var t=r[0];q[0]=Math.cos(t);q[1]=Math.sin(t);q[2]=-Math.sin(t);q[3]=Math.cos(t)}function b(q,r){var t=r.length===2?r[1]:r[0];q[0]=r[0];q[3]=t}function a(q,r){q[4]=r[0];if(r.length=== 2)q[5]=r[1]}var d=[1,0,0,1,0,0],h=RegExp("^\\s*(?:(?:(?:(?:(matrix)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))\\s*\\))|(?:(translate)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)))?\\s*\\))|(?:(scale)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)))?\\s*\\))|(?:(rotate)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)))?\\s*\\))|(?:(skewX)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))\\s*\\))|(?:(skewY)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))\\s*\\)))(?:(?:\\s+,?\\s*|,\\s*)(?:(?:(matrix)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))\\s*\\))|(?:(translate)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)))?\\s*\\))|(?:(scale)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)))?\\s*\\))|(?:(rotate)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)))?\\s*\\))|(?:(skewX)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))\\s*\\))|(?:(skewY)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))\\s*\\))))*)?)\\s*$"), -n=RegExp("(?:(?:(matrix)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))\\s*\\))|(?:(translate)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)))?\\s*\\))|(?:(scale)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)))?\\s*\\))|(?:(rotate)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)))?\\s*\\))|(?:(skewX)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))\\s*\\))|(?:(skewY)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))\\s*\\)))"); -return function(q){var r=d.concat();if(!q||q&&!h.test(q))return r;q.replace(n,function(s){var x=RegExp("(?:(?:(matrix)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))\\s*\\))|(?:(translate)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)))?\\s*\\))|(?:(scale)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)))?\\s*\\))|(?:(rotate)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)))?\\s*\\))|(?:(skewX)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))\\s*\\))|(?:(skewY)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))\\s*\\)))").exec(s).filter(function(t){return t!== -""&&t!=null});s=x[1];x=x.slice(2).map(parseFloat);switch(s){case "translate":a(r,x);break;case "rotate":e(r,x);break;case "scale":b(r,x);break;case "skewX":r[2]=x[0];break;case "skewY":r[1]=x[0];break;case "matrix":r=x;break}});return r}}();g.parseSVGDocument=function(){var e=/^(path|circle|polygon|polyline|ellipse|rect|line)$/,b=RegExp("^\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)+)\\s*,?\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)+)\\s*,?\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)+)\\s*,?\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)+)\\s*$"); -return function(a,d){if(a){var h=g.util.toArray(a.getElementsByTagName("*")).filter(function(t){var v;if(v=e.test(t.tagName)){a:{for(t=t;t&&(t=t.parentNode);)if(t.nodeName==="pattern"){t=true;break a}t=false}v=!t}return v});if(!(!h||h&&!h.length)){var n=a.getAttribute("viewBox"),q=a.getAttribute("width"),r=a.getAttribute("height"),s=null,x=null;if(n&&(n=n.match(b))){parseInt(n[1],10);parseInt(n[2],10);s=parseInt(n[3],10);x=parseInt(n[4],10)}s=q?parseFloat(q):s;x=r?parseFloat(r):x;n={width:s,height:x}; -h=g.parseElements(h,m(n));!h||h&&!h.length||d&&d(h,n)}}}}();o(g,{parseAttributes:function(e,b){if(e){var a,d,h={};if(e.parentNode&&/^g$/i.test(e.parentNode.nodeName))h=g.parseAttributes(e.parentNode,b);var n=b.reduce(function(q,r){a=e.getAttribute(r);d=parseFloat(a);if(a){if((r==="fill"||r==="stroke")&&a==="none")a="";if(r==="fill-rule")a=a==="evenodd"?"destination-over":a;if(r==="transform")a=g.parseTransformAttribute(a);if(r in k)r=k[r];q[r]=isNaN(d)?a:d}return q},{});n=o(g.parseStyleAttribute(e), -n);return o(h,n)}},parseElements:function(e,b){var a=e.map(function(d){var h=g[c(d.tagName)];if(h&&h.fromElement)try{return h.fromElement(d,b)}catch(n){console.log(n.message||n)}});return a=a.filter(function(d){return d!=null})},parseStyleAttribute:function(e){var b={};if(e=e.getAttribute("style"))if(typeof e=="string"){e=e.split(";");e.pop();b=e.reduce(function(d,h){var n=h.split(":"),q=n[0].trim();n=n[1].trim();d[q]=n;return d},{})}else for(var a in e)if(typeof e[a]!=="undefined")b[a]=e[a];return b}, +o=RegExp("(?:(?:(matrix)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))\\s*\\))|(?:(translate)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)))?\\s*\\))|(?:(scale)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)))?\\s*\\))|(?:(rotate)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)))?\\s*\\))|(?:(skewX)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))\\s*\\))|(?:(skewY)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))\\s*\\)))"); +return function(q){var r=d.concat();if(!q||q&&!h.test(q))return r;q.replace(o,function(t){var x=RegExp("(?:(?:(matrix)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))\\s*\\))|(?:(translate)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)))?\\s*\\))|(?:(scale)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)))?\\s*\\))|(?:(rotate)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))(?:\\s+,?\\s*|,\\s*)((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)))?\\s*\\))|(?:(skewX)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))\\s*\\))|(?:(skewY)\\s*\\(\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?))\\s*\\)))").exec(t).filter(function(u){return u!== +""&&u!=null});t=x[1];x=x.slice(2).map(parseFloat);switch(t){case "translate":a(r,x);break;case "rotate":e(r,x);break;case "scale":b(r,x);break;case "skewX":r[2]=x[0];break;case "skewY":r[1]=x[0];break;case "matrix":r=x;break}});return r}}();g.parseSVGDocument=function(){var e=/^(path|circle|polygon|polyline|ellipse|rect|line)$/,b=RegExp("^\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)+)\\s*,?\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)+)\\s*,?\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)+)\\s*,?\\s*((?:[-+]?\\d+(?:\\.\\d+)?(?:e[-+]?\\d+)?)+)\\s*$"); +return function(a,d){if(a){var h=g.util.toArray(a.getElementsByTagName("*")).filter(function(u){var w;if(w=e.test(u.tagName)){a:{for(u=u;u&&(u=u.parentNode);)if(u.nodeName==="pattern"){u=true;break a}u=false}w=!u}return w});if(!(!h||h&&!h.length)){var o=a.getAttribute("viewBox"),q=a.getAttribute("width"),r=a.getAttribute("height"),t=null,x=null;if(o&&(o=o.match(b))){parseInt(o[1],10);parseInt(o[2],10);t=parseInt(o[3],10);x=parseInt(o[4],10)}t=q?parseFloat(q):t;x=r?parseFloat(r):x;o={width:t,height:x}; +h=g.parseElements(h,m(o));!h||h&&!h.length||d&&d(h,o)}}}}();p(g,{parseAttributes:function(e,b){if(e){var a,d,h={};if(e.parentNode&&/^g$/i.test(e.parentNode.nodeName))h=g.parseAttributes(e.parentNode,b);var o=b.reduce(function(q,r){a=e.getAttribute(r);d=parseFloat(a);if(a){if((r==="fill"||r==="stroke")&&a==="none")a="";if(r==="fill-rule")a=a==="evenodd"?"destination-over":a;if(r==="transform")a=g.parseTransformAttribute(a);if(r in k)r=k[r];q[r]=isNaN(d)?a:d}return q},{});o=p(g.parseStyleAttribute(e), +o);return p(h,o)}},parseElements:function(e,b){var a=e.map(function(d){var h=g[c(d.tagName)];if(h&&h.fromElement)try{return h.fromElement(d,b)}catch(o){console.log(o.message||o)}});return a=a.filter(function(d){return d!=null})},parseStyleAttribute:function(e){var b={};if(e=e.getAttribute("style"))if(typeof e=="string"){e=e.split(";");e.pop();b=e.reduce(function(d,h){var o=h.split(":"),q=o[0].trim();o=o[1].trim();d[q]=o;return d},{})}else for(var a in e)if(typeof e[a]!=="undefined")b[a]=e[a];return b}, parsePointsAttribute:function(e){if(!e)return null;e=e.trim().split(/\s+/);e=e.reduce(function(b,a){a=a.split(",");b.push({x:parseFloat(a[0]),y:parseFloat(a[1])});return b},[]);if(e.length%2!==0)return null;return e}})})(); -(function(){function g(c,m){arguments.length>0&&this.init(c,m)}var o=this.fabric||(this.fabric={});if(o.Point)console.warn("fabric.Point is already defined");else{g.prototype={constructor:g,init:function(c,m){this.x=c;this.y=m},add:function(c){return new g(this.x+c.x,this.y+c.y)},addEquals:function(c){this.x+=c.x;this.y+=c.y;return this},scalarAdd:function(c){return new g(this.x+c,this.y+c)},scalarAddEquals:function(c){this.x+=c;this.y+=c;return this},subtract:function(c){return new g(this.x-c.x, +(function(){function g(c,m){arguments.length>0&&this.init(c,m)}var p=this.fabric||(this.fabric={});if(p.Point)console.warn("fabric.Point is already defined");else{g.prototype={constructor:g,init:function(c,m){this.x=c;this.y=m},add:function(c){return new g(this.x+c.x,this.y+c.y)},addEquals:function(c){this.x+=c.x;this.y+=c.y;return this},scalarAdd:function(c){return new g(this.x+c,this.y+c)},scalarAddEquals:function(c){this.x+=c;this.y+=c;return this},subtract:function(c){return new g(this.x-c.x, this.y-c.y)},subtractEquals:function(c){this.x-=c.x;this.y-=c.y;return this},scalarSubtract:function(c){return new g(this.x-c,this.y-c)},scalarSubtractEquals:function(c){this.x-=c;this.y-=c;return this},multiply:function(c){return new g(this.x*c,this.y*c)},multiplyEquals:function(c){this.x*=c;this.y*=c;return this},divide:function(c){return new g(this.x/c,this.y/c)},divideEquals:function(c){this.x/=c;this.y/=c;return this},eq:function(c){return this.x==c.x&&this.y==c.y},lt:function(c){return this.x< c.x&&this.yc.x&&this.y>c.y},gte:function(c){return this.x>=c.x&&this.y>=c.y},lerp:function(c,m){return new g(this.x+(c.x-this.x)*m,this.y+(c.y-this.y)*m)},distanceFrom:function(c){var m=this.x-c.x;c=this.y-c.y;return Math.sqrt(m*m+c*c)},min:function(c){return new g(Math.min(this.x,c.x),Math.min(this.y,c.y))},max:function(c){return new g(Math.max(this.x,c.x),Math.max(this.y,c.y))},toString:function(){return this.x+ -","+this.y},setXY:function(c,m){this.x=c;this.y=m},setFromPoint:function(c){this.x=c.x;this.y=c.y},swap:function(c){var m=this.x,k=this.y;this.x=c.x;this.y=c.y;c.x=m;c.y=k}};o.Point=g}})(); -(function(){function g(c){arguments.length>0&&this.init(c)}var o=this.fabric||(this.fabric={});if(o.Intersection)console.warn("fabric.Intersection is already defined");else{g.prototype.init=function(c){this.status=c;this.points=[]};g.prototype.appendPoint=function(c){this.points.push(c)};g.prototype.appendPoints=function(c){this.points=this.points.concat(c)};g.intersectLineLine=function(c,m,k,e){var b,a=(e.x-k.x)*(c.y-k.y)-(e.y-k.y)*(c.x-k.x);b=(m.x-c.x)*(c.y-k.y)-(m.y-c.y)*(c.x-k.x);k=(e.y-k.y)* -(m.x-c.x)-(e.x-k.x)*(m.y-c.y);if(k!=0){a=a/k;b=b/k;if(0<=a&&a<=1&&0<=b&&b<=1){b=new g("Intersection");b.points.push(new o.Point(c.x+a*(m.x-c.x),c.y+a*(m.y-c.y)))}else b=new g("No Intersection")}else b=a==0||b==0?new g("Coincident"):new g("Parallel");return b};g.intersectLinePolygon=function(c,m,k){for(var e=new g("No Intersection"),b=k.length,a=0;a0)e.status="Intersection";return e};g.intersectPolygonPolygon= -function(c,m){for(var k=new g("No Intersection"),e=c.length,b=0;b0)k.status="Intersection";return k};g.intersectPolygonRectangle=function(c,m,k){var e=m.min(k),b=m.max(k);k=new o.Point(b.x,e.y);var a=new o.Point(e.x,b.y);m=g.intersectLinePolygon(e,k,c);k=g.intersectLinePolygon(k,b,c);b=g.intersectLinePolygon(b,a,c);c=g.intersectLinePolygon(a,e,c);e=new g("No Intersection");e.appendPoints(m.points); -e.appendPoints(k.points);e.appendPoints(b.points);e.appendPoints(c.points);if(e.points.length>0)e.status="Intersection";return e};o.Intersection=g}})(); -(function(){function g(c){c?this._tryParsingColor(c):this.setSource([0,0,0,1])}var o=this.fabric||(this.fabric={});if(o.Color)console.warn("fabric.Color is already defined.");else{o.Color=g;g.prototype._tryParsingColor=function(c){var m=g.sourceFromHex(c);m||(m=g.sourceFromRgb(c));m&&this.setSource(m)};g.prototype.getSource=function(){return this._source};g.prototype.setSource=function(c){this._source=c};g.prototype.toRgb=function(){var c=this.getSource();return"rgb("+c[0]+","+c[1]+","+c[2]+")"}; +","+this.y},setXY:function(c,m){this.x=c;this.y=m},setFromPoint:function(c){this.x=c.x;this.y=c.y},swap:function(c){var m=this.x,k=this.y;this.x=c.x;this.y=c.y;c.x=m;c.y=k}};p.Point=g}})(); +(function(){function g(c){arguments.length>0&&this.init(c)}var p=this.fabric||(this.fabric={});if(p.Intersection)console.warn("fabric.Intersection is already defined");else{g.prototype.init=function(c){this.status=c;this.points=[]};g.prototype.appendPoint=function(c){this.points.push(c)};g.prototype.appendPoints=function(c){this.points=this.points.concat(c)};g.intersectLineLine=function(c,m,k,e){var b,a=(e.x-k.x)*(c.y-k.y)-(e.y-k.y)*(c.x-k.x);b=(m.x-c.x)*(c.y-k.y)-(m.y-c.y)*(c.x-k.x);k=(e.y-k.y)* +(m.x-c.x)-(e.x-k.x)*(m.y-c.y);if(k!=0){a=a/k;b=b/k;if(0<=a&&a<=1&&0<=b&&b<=1){b=new g("Intersection");b.points.push(new p.Point(c.x+a*(m.x-c.x),c.y+a*(m.y-c.y)))}else b=new g("No Intersection")}else b=a==0||b==0?new g("Coincident"):new g("Parallel");return b};g.intersectLinePolygon=function(c,m,k){for(var e=new g("No Intersection"),b=k.length,a=0;a0)e.status="Intersection";return e};g.intersectPolygonPolygon= +function(c,m){for(var k=new g("No Intersection"),e=c.length,b=0;b0)k.status="Intersection";return k};g.intersectPolygonRectangle=function(c,m,k){var e=m.min(k),b=m.max(k);k=new p.Point(b.x,e.y);var a=new p.Point(e.x,b.y);m=g.intersectLinePolygon(e,k,c);k=g.intersectLinePolygon(k,b,c);b=g.intersectLinePolygon(b,a,c);c=g.intersectLinePolygon(a,e,c);e=new g("No Intersection");e.appendPoints(m.points); +e.appendPoints(k.points);e.appendPoints(b.points);e.appendPoints(c.points);if(e.points.length>0)e.status="Intersection";return e};p.Intersection=g}})(); +(function(){function g(c){c?this._tryParsingColor(c):this.setSource([0,0,0,1])}var p=this.fabric||(this.fabric={});if(p.Color)console.warn("fabric.Color is already defined.");else{p.Color=g;g.prototype._tryParsingColor=function(c){var m=g.sourceFromHex(c);m||(m=g.sourceFromRgb(c));m&&this.setSource(m)};g.prototype.getSource=function(){return this._source};g.prototype.setSource=function(c){this._source=c};g.prototype.toRgb=function(){var c=this.getSource();return"rgb("+c[0]+","+c[1]+","+c[2]+")"}; g.prototype.toRgba=function(){var c=this.getSource();return"rgba("+c[0]+","+c[1]+","+c[2]+","+c[3]+")"};g.prototype.toHex=function(){var c=this.getSource(),m=c[0].toString(16);m=m.length==1?"0"+m:m;var k=c[1].toString(16);k=k.length==1?"0"+k:k;c=c[2].toString(16);c=c.length==1?"0"+c:c;return m.toUpperCase()+k.toUpperCase()+c.toUpperCase()};g.prototype.getAlpha=function(){return this.getSource()[3]};g.prototype.setAlpha=function(c){var m=this.getSource();m[3]=c;this.setSource(m);return this};g.prototype.toGrayscale= function(){var c=this.getSource(),m=parseInt((c[0]*0.3+c[1]*0.59+c[2]*0.11).toFixed(0),10);this.setSource([m,m,m,c[3]]);return this};g.prototype.toBlackWhite=function(c){var m=this.getSource(),k=(m[0]*0.3+m[1]*0.59+m[2]*0.11).toFixed(0);m=m[3];c=c||127;k=Number(k)0?0:-f),this._groupSelector.ey-(l>0?0:-l),p,w);this.contextTop.lineWidth=this.selectionLineWidth;this.contextTop.strokeStyle=this.selectionBorderColor; -this.contextTop.strokeRect(this._groupSelector.ex+0.5-(f>0?0:p),this._groupSelector.ey+0.5-(l>0?0:w),p,w)},_findSelectedObjects:function(){var f=[],l=this._groupSelector.ex,p=this._groupSelector.ey,w=l+this._groupSelector.left,A=p+this._groupSelector.top,z=new fabric.Point(t(l,w),t(p,A));p=new fabric.Point(v(l,w),v(p,A));w=0;for(A=this._objects.length;w1){f=new fabric.Group(f);this.setActiveGroup(f);f.saveCoords();e("group:selected",{target:f})}this.renderAll()},add:function(){this._objects.push.apply(this._objects,arguments);this.renderAll();return this},insertAt:function(f,l){this._objects.splice(l,0,f);this.renderAll();return this},getObjects:function(){return this._objects},getContext:function(){return this.contextTop},clearContext:function(f){f.clearRect(0,0,this._config.width,this._config.height); -return this},clear:function(){this._objects.length=0;this.clearContext(this.contextTop);this.clearContext(this.contextContainer);this.renderAll();return this},renderAll:function(f){var l=f?this.contextTop:this.contextContainer;this.clearContext(this.contextTop);f||this.clearContext(l);f=this._objects.length;var p=this.getActiveGroup(),w=new Date;if(f)for(var A=0;A1?new fabric.PathGroup(D,C):D[0];D.setSourcePath(F); -if(!(D instanceof fabric.PathGroup)){c(D,C);typeof C.angle!=="undefined"&&D.setAngle(C.angle)}p(D,E)})},this)}catch(B){console.log(B.message)}},loadImageFromURL:function(){var f={};return function(l,p){function w(){var B=o.getElementById(f[l]);B.width&&B.height?p(new fabric.Image(B)):setTimeout(w,50)}var A=this;if(f[l])w();else{var z=new Image;z.onload=function(){z.onload=null;A._resizeImageToFit(z);var B=new fabric.Image(z);p(B)};z.className="canvas-img-clone";z.src=l;if(this.shouldCacheImages)f[l]= -Element.identify(z);o.body.appendChild(z)}}}(),loadSVGFromURL:function(f,l){function p(z){if(z=z.responseXML)(z=z.documentElement)&&fabric.parseSVGDocument(z,function(B,C){A.cache.set(f,{objects:B.invoke("toObject"),options:C});l(B,C)})}function w(){console.log("ERROR!")}var A=this;f=f.replace(/^\n\s*/,"").replace(/\?.*$/,"").trim();this.cache.has(f,function(z){if(z)A.cache.get(f,function(B){B=A._enlivenCachedObject(B);l(B.objects,B.options)});else new Ajax.Request(f,{method:"get",onComplete:p,onFailure:w})})}, -_enlivenCachedObject:function(f){var l=f.objects;f=f.options;l=l.map(function(p){return fabric[m(p.type)].fromObject(p)});return{objects:l,options:f}},remove:function(f){d(this._objects,f);this.renderAll();return f},fxRemove:function(f,l){var p=this;f.fxRemove({onChange:this.renderAll.bind(this),onComplete:function(){p.remove(f);typeof l==="function"&&l()}});return this},sendToBack:function(f){d(this._objects,f);this._objects.unshift(f);return this.renderAll()},bringToFront:function(f){d(this._objects, -f);this._objects.push(f);return this.renderAll()},sendBackwards:function(f){var l=this._objects.indexOf(f),p=l;if(l!==0){for(l=l-1;l>=0;--l)if(f.intersectsWithObject(this._objects[l])){p=l;break}d(this._objects,f);this._objects.splice(p,0,f)}return this.renderAll()},bringForward:function(f){var l=this.getObjects(),p=l.indexOf(f),w=p;if(p!==l.length-1){p=p+1;for(var A=this._objects.length;p"};c(fabric.Element,{EMPTY_JSON:'{"objects": [], "background": "white"}',toGrayscale:function(f){var l=f.getContext("2d");f=l.getImageData(0,0,f.width,f.height);var p=f.data,w=f.width,A=f.height,z,B;for(i=0;i1?d.apply(this,b.call(arguments,1)):d.call(this)}, -initialize:function(a){this.setOptions(a);this._importProperties();this.originalState={};this.setCoords();this.saveState()},setOptions:function(a){this.options=o(this._getOptions(),a)},_getOptions:function(){return o(c(this._getSuperOptions()),this.options)},_getSuperOptions:function(){var a=this.constructor;if(a)if(a=a.superclass)if((a=a.prototype)&&typeof a._getOptions=="function")return a._getOptions();return{}},_importProperties:function(){this.stateProperties.forEach(function(a){a==="angle"? -this.setAngle(this.options[a]):this[a]=this.options[a]},this)},transform:function(a){a.globalAlpha=this.opacity;a.translate(this.left,this.top);a.rotate(this.theta);a.scale(this.scaleX*(this.flipX?-1:1),this.scaleY*(this.flipY?-1:1))},toObject:function(){var a={type:this.type,left:m(this.left,this.NUM_FRACTION_DIGITS),top:m(this.top,this.NUM_FRACTION_DIGITS),width:m(this.width,this.NUM_FRACTION_DIGITS),height:m(this.height,this.NUM_FRACTION_DIGITS),fill:this.fill,overlayFill:this.overlayFill,stroke:this.stroke, -strokeWidth:this.strokeWidth,scaleX:m(this.scaleX,this.NUM_FRACTION_DIGITS),scaleY:m(this.scaleY,this.NUM_FRACTION_DIGITS),angle:m(this.getAngle(),this.NUM_FRACTION_DIGITS),flipX:this.flipX,flipY:this.flipY,opacity:m(this.opacity,this.NUM_FRACTION_DIGITS)};this.includeDefaultValues||(a=this._removeDefaultValues(a));return a},toDatalessObject:function(){return this.toObject()},_removeDefaultValues:function(a){var d=g.Object.prototype.options;this.stateProperties.forEach(function(h){a[h]===d[h]&&delete a[h]}); -return a},isActive:function(){return!!this.active},setActive:function(a){this.active=!!a;return this},toString:function(){return"#"},set:function(a,d){if((a==="scaleX"||a==="scaleY")&&d0?0:-l),f.ey-(n>0?0:-n),s,y);this.contextTop.lineWidth= +this.selectionLineWidth;this.contextTop.strokeStyle=this.selectionBorderColor;this.contextTop.strokeRect(f.ex+0.5-(l>0?0:s),f.ey+0.5-(n>0?0:y),s,y)},_findSelectedObjects:function(){var f=[],l=this._groupSelector.ex,n=this._groupSelector.ey,s=l+this._groupSelector.left,y=n+this._groupSelector.top,z=new fabric.Point(u(l,s),u(n,y));n=new fabric.Point(w(l,s),w(n,y));s=0;for(y=this._objects.length;s1){f=new fabric.Group(f);this.setActiveGroup(f);f.saveCoords();e("group:selected",{target:f})}this.renderAll()},add:function(){this._objects.push.apply(this._objects,arguments);this.renderAll();return this},insertAt:function(f,l){this._objects.splice(l,0,f);this.renderAll();return this},getObjects:function(){return this._objects},getContext:function(){return this.contextTop},clearContext:function(f){f.clearRect(0, +0,this._config.width,this._config.height);return this},clear:function(){this._objects.length=0;this.clearContext(this.contextTop);this.clearContext(this.contextContainer);this.renderAll();return this},renderAll:function(f){var l=f?this.contextTop:this.contextContainer;this.clearContext(this.contextTop);f||this.clearContext(l);f=this._objects.length;var n=this.getActiveGroup(),s=new Date;if(f)for(var y=0;y1?new fabric.PathGroup(D,C):D[0];D.setSourcePath(F);if(!(D instanceof fabric.PathGroup)){c(D,C);typeof C.angle!=="undefined"&&D.setAngle(C.angle)}n(D,E)})},this)}catch(B){console.log(B.message)}},loadImageFromURL:function(){var f={};return function(l,n){function s(){var B=p.getElementById(f[l]);B.width&&B.height?n(new fabric.Image(B)):setTimeout(s,50)}var y=this;if(f[l])s();else{var z=new Image; +z.onload=function(){z.onload=null;y._resizeImageToFit(z);var B=new fabric.Image(z);n(B)};z.className="canvas-img-clone";z.src=l;if(this.shouldCacheImages)f[l]=Element.identify(z);p.body.appendChild(z)}}}(),loadSVGFromURL:function(f,l){function n(z){if(z=z.responseXML)(z=z.documentElement)&&fabric.parseSVGDocument(z,function(B,C){y.cache.set(f,{objects:B.invoke("toObject"),options:C});l(B,C)})}function s(){console.log("ERROR!")}var y=this;f=f.replace(/^\n\s*/,"").replace(/\?.*$/,"").trim();this.cache.has(f, +function(z){if(z)y.cache.get(f,function(B){B=y._enlivenCachedObject(B);l(B.objects,B.options)});else new Ajax.Request(f,{method:"get",onComplete:n,onFailure:s})})},_enlivenCachedObject:function(f){var l=f.objects;f=f.options;l=l.map(function(n){return fabric[m(n.type)].fromObject(n)});return{objects:l,options:f}},remove:function(f){d(this._objects,f);this.renderAll();return f},fxRemove:function(f,l){var n=this;f.fxRemove({onChange:this.renderAll.bind(this),onComplete:function(){n.remove(f);typeof l=== +"function"&&l()}});return this},sendToBack:function(f){d(this._objects,f);this._objects.unshift(f);return this.renderAll()},bringToFront:function(f){d(this._objects,f);this._objects.push(f);return this.renderAll()},sendBackwards:function(f){var l=this._objects.indexOf(f),n=l;if(l!==0){for(l=l-1;l>=0;--l)if(f.intersectsWithObject(this._objects[l])){n=l;break}d(this._objects,f);this._objects.splice(n,0,f)}return this.renderAll()},bringForward:function(f){var l=this.getObjects(),n=l.indexOf(f),s=n;if(n!== +l.length-1){n=n+1;for(var y=this._objects.length;n"};c(fabric.Element,{EMPTY_JSON:'{"objects": [], "background": "white"}',toGrayscale:function(f){var l= +f.getContext("2d");f=l.getImageData(0,0,f.width,f.height);var n=f.data,s=f.width,y=f.height,z,B;for(i=0;i1?d.apply(this,b.call(arguments,1)):d.call(this)},initialize:function(a){this.setOptions(a); +this._importProperties();this.originalState={};this.setCoords();this.saveState()},setOptions:function(a){this.options=p(this._getOptions(),a)},_getOptions:function(){return p(c(this._getSuperOptions()),this.options)},_getSuperOptions:function(){var a=this.constructor;if(a)if(a=a.superclass)if((a=a.prototype)&&typeof a._getOptions=="function")return a._getOptions();return{}},_importProperties:function(){this.stateProperties.forEach(function(a){a==="angle"?this.setAngle(this.options[a]):this[a]=this.options[a]}, +this)},transform:function(a){a.globalAlpha=this.opacity;a.translate(this.left,this.top);a.rotate(this.theta);a.scale(this.scaleX*(this.flipX?-1:1),this.scaleY*(this.flipY?-1:1))},toObject:function(){var a={type:this.type,left:m(this.left,this.NUM_FRACTION_DIGITS),top:m(this.top,this.NUM_FRACTION_DIGITS),width:m(this.width,this.NUM_FRACTION_DIGITS),height:m(this.height,this.NUM_FRACTION_DIGITS),fill:this.fill,overlayFill:this.overlayFill,stroke:this.stroke,strokeWidth:this.strokeWidth,scaleX:m(this.scaleX, +this.NUM_FRACTION_DIGITS),scaleY:m(this.scaleY,this.NUM_FRACTION_DIGITS),angle:m(this.getAngle(),this.NUM_FRACTION_DIGITS),flipX:this.flipX,flipY:this.flipY,opacity:m(this.opacity,this.NUM_FRACTION_DIGITS)};this.includeDefaultValues||(a=this._removeDefaultValues(a));return a},toDatalessObject:function(){return this.toObject()},_removeDefaultValues:function(a){var d=g.Object.prototype.options;this.stateProperties.forEach(function(h){a[h]===d[h]&&delete a[h]});return a},isActive:function(){return!!this.active}, +setActive:function(a){this.active=!!a;return this},toString:function(){return"#"},set:function(a,d){if((a==="scaleX"||a==="scaleY")&&da.x&&q.xa.y&&r.y=d&&r.d.y>=d)){if(r.o.x==r.d.x&&r.o.x>=a)n=r.o.x;else{n=(r.d.y-r.o.y)/(r.d.x-r.o.x);q=d-0*a;r=r.o.y-n*r.o.x;n=-(q-r)/(0-n)}if(n>=a)s+=1;if(s==2)break}}return s},_getImageLines:function(a){return{topline:{o:a.tl,d:a.tr},rightline:{o:a.tr,d:a.br},bottomline:{o:a.br,d:a.bl},leftline:{o:a.bl,d:a.tl}}},_setCornerCoords:function(){var a=this.oCoords,d=this.theta,h=this.cornersize*Math.cos(d),n=this.cornersize*Math.sin(d);d=this.cornersize/2;var q=d-n;a.tl.x-=q;a.tl.y-= -d;a.tl.corner={tl:{x:a.tl.x,y:a.tl.y},tr:{x:a.tl.x+h,y:a.tl.y+n},bl:{x:a.tl.x-n,y:a.tl.y+h}};a.tl.corner.br={x:a.tl.corner.tr.x-n,y:a.tl.corner.tr.y+h};a.tl.x+=q;a.tl.y+=d;a.tr.x+=d;a.tr.y-=d;a.tr.corner={tl:{x:a.tr.x-h,y:a.tr.y-n},tr:{x:a.tr.x,y:a.tr.y},br:{x:a.tr.x-n,y:a.tr.y+h}};a.tr.corner.bl={x:a.tr.corner.tl.x-n,y:a.tr.corner.tl.y+h};a.tr.x-=d;a.tr.y+=d;a.bl.x-=d;a.bl.y+=d;a.bl.corner={tl:{x:a.bl.x+n,y:a.bl.y-h},bl:{x:a.bl.x,y:a.bl.y},br:{x:a.bl.x+h,y:a.bl.y+n}};a.bl.corner.tr={x:a.bl.corner.br.x+ -n,y:a.bl.corner.br.y-h};a.bl.x+=d;a.bl.y-=d;a.br.x+=d;a.br.y+=d;a.br.corner={tr:{x:a.br.x+n,y:a.br.y-h},bl:{x:a.br.x-h,y:a.br.y-n},br:{x:a.br.x,y:a.br.y}};a.br.corner.tl={x:a.br.corner.bl.x+n,y:a.br.corner.bl.y-h};a.br.x-=d;a.br.y-=d;a.ml.x-=d;a.ml.y-=d;a.ml.corner={tl:{x:a.ml.x,y:a.ml.y},tr:{x:a.ml.x+h,y:a.ml.y+n},bl:{x:a.ml.x-n,y:a.ml.y+h}};a.ml.corner.br={x:a.ml.corner.tr.x-n,y:a.ml.corner.tr.y+h};a.ml.x+=d;a.ml.y+=d;a.mt.x-=d;a.mt.y-=d;a.mt.corner={tl:{x:a.mt.x,y:a.mt.y},tr:{x:a.mt.x+h,y:a.mt.y+ -n},bl:{x:a.mt.x-n,y:a.mt.y+h}};a.mt.corner.br={x:a.mt.corner.tr.x-n,y:a.mt.corner.tr.y+h};a.mt.x+=d;a.mt.y+=d;a.mr.x-=d;a.mr.y-=d;a.mr.corner={tl:{x:a.mr.x,y:a.mr.y},tr:{x:a.mr.x+h,y:a.mr.y+n},bl:{x:a.mr.x-n,y:a.mr.y+h}};a.mr.corner.br={x:a.mr.corner.tr.x-n,y:a.mr.corner.tr.y+h};a.mr.x+=d;a.mr.y+=d;a.mb.x-=d;a.mb.y-=d;a.mb.corner={tl:{x:a.mb.x,y:a.mb.y},tr:{x:a.mb.x+h,y:a.mb.y+n},bl:{x:a.mb.x-n,y:a.mb.y+h}};a.mb.corner.br={x:a.mb.corner.tr.x-n,y:a.mb.corner.tr.y+h};a.mb.x+=d;a.mb.y+=d;a=a.mb.corner; -a.tl.x-=d;a.tl.y-=d;a.tr.x-=d;a.tr.y-=d;a.br.x-=d;a.br.y-=d;a.bl.x-=d;a.bl.y-=d},toGrayscale:function(){var a=this.get("fill");a&&this.set("overlayFill",(new g.Color(a)).toGrayscale().toRgb());return this},complexity:function(){return 0},getCenter:function(){return{x:this.get("left")+this.width/2,y:this.get("top")+this.height/2}},straighten:function(){this.setAngle(this._getAngleValueForStraighten());return this},fxStraighten:function(a){a=a||{};var d=function(){},h=a.onComplete||d,n=a.onChange|| -d,q=this;g.util.animate({startValue:this.get("angle"),endValue:this._getAngleValueForStraighten(),duration:this.FX_DURATION,onChange:function(r){q.setAngle(r);n()},onComplete:function(){q.setCoords();h()},onStart:function(){q.setActive(false)}});return this},fxRemove:function(a){a||(a={});var d=function(){},h=a.onComplete||d,n=a.onChange||d,q=this;g.util.animate({startValue:this.get("opacity"),endValue:0,duration:this.FX_DURATION,onChange:function(r){q.set("opacity",r);n()},onComplete:h,onStart:function(){q.setActive(false)}}); +"transparent";d.renderAll();var h=this.clone();h.left=a.width/2;h.top=a.height/2;h.setActive(false);d.add(h);a=d.toDataURL("png");d.dispose();return a},hasStateChanged:function(){return this.stateProperties.some(function(a){return this[a]!==this.originalState[a]},this)},saveState:function(){this.stateProperties.forEach(function(a){this.originalState[a]=this.get(a)},this);return this},intersectsWithRect:function(a,d){var h=this.oCoords,o=new g.Point(h.tl.x,h.tl.y),q=new g.Point(h.tr.x,h.tr.y),r=new g.Point(h.bl.x, +h.bl.y);h=new g.Point(h.br.x,h.br.y);return g.Intersection.intersectPolygonRectangle([o,q,h,r],a,d).status==="Intersection"},intersectsWithObject:function(a){function d(o){return{tl:new g.Point(o.tl.x,o.tl.y),tr:new g.Point(o.tr.x,o.tr.y),bl:new g.Point(o.bl.x,o.bl.y),br:new g.Point(o.br.x,o.br.y)}}var h=d(this.oCoords);a=d(a.oCoords);return g.Intersection.intersectPolygonPolygon([h.tl,h.tr,h.br,h.bl],[a.tl,a.tr,a.br,a.bl]).status==="Intersection"},isContainedWithinRect:function(a,d){var h=this.oCoords, +o=new g.Point(h.tl.x,h.tl.y),q=new g.Point(h.tr.x,h.tr.y),r=new g.Point(h.bl.x,h.bl.y);new g.Point(h.br.x,h.br.y);return o.x>a.x&&q.xa.y&&r.y=d&&r.d.y>=d)){if(r.o.x==r.d.x&&r.o.x>=a)o=r.o.x;else{o=(r.d.y-r.o.y)/(r.d.x-r.o.x);q=d-0*a;r=r.o.y-o*r.o.x;o=-(q-r)/(0-o)}if(o>=a)t+=1;if(t==2)break}}return t},_getImageLines:function(a){return{topline:{o:a.tl,d:a.tr},rightline:{o:a.tr,d:a.br},bottomline:{o:a.br,d:a.bl},leftline:{o:a.bl,d:a.tl}}},_setCornerCoords:function(){var a=this.oCoords,d=this.theta,h=this.cornersize*Math.cos(d),o=this.cornersize*Math.sin(d);d=this.cornersize/2;var q=d-o;a.tl.x-=q;a.tl.y-= +d;a.tl.corner={tl:{x:a.tl.x,y:a.tl.y},tr:{x:a.tl.x+h,y:a.tl.y+o},bl:{x:a.tl.x-o,y:a.tl.y+h}};a.tl.corner.br={x:a.tl.corner.tr.x-o,y:a.tl.corner.tr.y+h};a.tl.x+=q;a.tl.y+=d;a.tr.x+=d;a.tr.y-=d;a.tr.corner={tl:{x:a.tr.x-h,y:a.tr.y-o},tr:{x:a.tr.x,y:a.tr.y},br:{x:a.tr.x-o,y:a.tr.y+h}};a.tr.corner.bl={x:a.tr.corner.tl.x-o,y:a.tr.corner.tl.y+h};a.tr.x-=d;a.tr.y+=d;a.bl.x-=d;a.bl.y+=d;a.bl.corner={tl:{x:a.bl.x+o,y:a.bl.y-h},bl:{x:a.bl.x,y:a.bl.y},br:{x:a.bl.x+h,y:a.bl.y+o}};a.bl.corner.tr={x:a.bl.corner.br.x+ +o,y:a.bl.corner.br.y-h};a.bl.x+=d;a.bl.y-=d;a.br.x+=d;a.br.y+=d;a.br.corner={tr:{x:a.br.x+o,y:a.br.y-h},bl:{x:a.br.x-h,y:a.br.y-o},br:{x:a.br.x,y:a.br.y}};a.br.corner.tl={x:a.br.corner.bl.x+o,y:a.br.corner.bl.y-h};a.br.x-=d;a.br.y-=d;a.ml.x-=d;a.ml.y-=d;a.ml.corner={tl:{x:a.ml.x,y:a.ml.y},tr:{x:a.ml.x+h,y:a.ml.y+o},bl:{x:a.ml.x-o,y:a.ml.y+h}};a.ml.corner.br={x:a.ml.corner.tr.x-o,y:a.ml.corner.tr.y+h};a.ml.x+=d;a.ml.y+=d;a.mt.x-=d;a.mt.y-=d;a.mt.corner={tl:{x:a.mt.x,y:a.mt.y},tr:{x:a.mt.x+h,y:a.mt.y+ +o},bl:{x:a.mt.x-o,y:a.mt.y+h}};a.mt.corner.br={x:a.mt.corner.tr.x-o,y:a.mt.corner.tr.y+h};a.mt.x+=d;a.mt.y+=d;a.mr.x-=d;a.mr.y-=d;a.mr.corner={tl:{x:a.mr.x,y:a.mr.y},tr:{x:a.mr.x+h,y:a.mr.y+o},bl:{x:a.mr.x-o,y:a.mr.y+h}};a.mr.corner.br={x:a.mr.corner.tr.x-o,y:a.mr.corner.tr.y+h};a.mr.x+=d;a.mr.y+=d;a.mb.x-=d;a.mb.y-=d;a.mb.corner={tl:{x:a.mb.x,y:a.mb.y},tr:{x:a.mb.x+h,y:a.mb.y+o},bl:{x:a.mb.x-o,y:a.mb.y+h}};a.mb.corner.br={x:a.mb.corner.tr.x-o,y:a.mb.corner.tr.y+h};a.mb.x+=d;a.mb.y+=d;a=a.mb.corner; +a.tl.x-=d;a.tl.y-=d;a.tr.x-=d;a.tr.y-=d;a.br.x-=d;a.br.y-=d;a.bl.x-=d;a.bl.y-=d},toGrayscale:function(){var a=this.get("fill");a&&this.set("overlayFill",(new g.Color(a)).toGrayscale().toRgb());return this},complexity:function(){return 0},getCenter:function(){return{x:this.get("left")+this.width/2,y:this.get("top")+this.height/2}},straighten:function(){this.setAngle(this._getAngleValueForStraighten());return this},fxStraighten:function(a){a=a||{};var d=function(){},h=a.onComplete||d,o=a.onChange|| +d,q=this;g.util.animate({startValue:this.get("angle"),endValue:this._getAngleValueForStraighten(),duration:this.FX_DURATION,onChange:function(r){q.setAngle(r);o()},onComplete:function(){q.setCoords();h()},onStart:function(){q.setActive(false)}});return this},fxRemove:function(a){a||(a={});var d=function(){},h=a.onComplete||d,o=a.onChange||d,q=this;g.util.animate({startValue:this.get("opacity"),endValue:0,duration:this.FX_DURATION,onChange:function(r){q.set("opacity",r);o()},onComplete:h,onStart:function(){q.setActive(false)}}); return this},_getAngleValueForStraighten:function(){var a=this.get("angle");if(a>-225&&a<=-135)return-180;else if(a>-135&&a<=-45)return-90;else if(a>-45&&a<=45)return 0;else if(a>45&&a<=135)return 90;else if(a>135&&a<=225)return 180;else if(a>225&&a<=315)return 270;else if(a>315)return 360;return 0},toJSON:function(){return this.toObject()}});g.Object.prototype.rotate=g.Object.prototype.setAngle}})(); -(function(){var g=this.fabric||(this.fabric={}),o=g.util.object.extend;if(!g.Line){g.Line=g.util.createClass(g.Object,{type:"line",initialize:function(c,m){c||(c=[0,0,0,0]);this.callSuper("initialize",m);this.set("x1",c[0]);this.set("y1",c[1]);this.set("x2",c[2]);this.set("y2",c[3]);this.set("width",this.x2-this.x1);this.set("height",this.y2-this.y1);this.set("left",this.x1+this.width/2);this.set("top",this.y1+this.height/2)},_render:function(c){c.beginPath();c.moveTo(-this.width/2,-this.height/2); -c.lineTo(this.width/2,this.height/2);var m=c.strokeStyle;c.strokeStyle=c.fillStyle;c.stroke();c.strokeStyle=m},complexity:function(){return 1},toObject:function(){return o(this.callSuper("toObject"),{x1:this.get("x1"),y1:this.get("y1"),x2:this.get("x2"),y2:this.get("y2")})}});g.Element.ATTRIBUTE_NAMES="x1 y1 x2 y2 stroke stroke-width transform".split(" ");g.Line.fromElement=function(c,m){var k=g.parseAttributes(c,g.Element.ATTRIBUTE_NAMES);return new g.Line([k.x1||0,k.y1||0,k.x2||0,k.y2||0],o(k,m))}; +(function(){var g=this.fabric||(this.fabric={}),p=g.util.object.extend;if(!g.Line){g.Line=g.util.createClass(g.Object,{type:"line",initialize:function(c,m){c||(c=[0,0,0,0]);this.callSuper("initialize",m);this.set("x1",c[0]);this.set("y1",c[1]);this.set("x2",c[2]);this.set("y2",c[3]);this.set("width",this.x2-this.x1);this.set("height",this.y2-this.y1);this.set("left",this.x1+this.width/2);this.set("top",this.y1+this.height/2)},_render:function(c){c.beginPath();c.moveTo(-this.width/2,-this.height/2); +c.lineTo(this.width/2,this.height/2);var m=c.strokeStyle;c.strokeStyle=c.fillStyle;c.stroke();c.strokeStyle=m},complexity:function(){return 1},toObject:function(){return p(this.callSuper("toObject"),{x1:this.get("x1"),y1:this.get("y1"),x2:this.get("x2"),y2:this.get("y2")})}});g.Element.ATTRIBUTE_NAMES="x1 y1 x2 y2 stroke stroke-width transform".split(" ");g.Line.fromElement=function(c,m){var k=g.parseAttributes(c,g.Element.ATTRIBUTE_NAMES);return new g.Line([k.x1||0,k.y1||0,k.x2||0,k.y2||0],p(k,m))}; g.Line.fromObject=function(c){return new g.Line([c.x1,c.y1,c.x2,c.y2],c)}}})(); -(function(){var g=this.fabric||(this.fabric={}),o=Math.PI*2,c=g.util.object.extend;if(g.Circle)console.warn("fabric.Circle is already defined.");else{g.Circle=g.util.createClass(g.Object,{type:"circle",initialize:function(m){m=m||{};this.set("radius",m.radius||0);this.callSuper("initialize",m);m=this.get("radius")*2*this.get("scaleX");this.set("width",m).set("height",m)},toObject:function(){return c(this.callSuper("toObject"),{radius:this.get("radius")})},_render:function(m){m.beginPath();m.arc(0, -0,this.radius,0,o,false);m.closePath();this.fill&&m.fill();this.stroke&&m.stroke()},complexity:function(){return 1}});g.Circle.ATTRIBUTE_NAMES="cx cy r fill fill-opacity stroke stroke-width transform".split(" ");g.Circle.fromElement=function(m,k){var e=g.parseAttributes(m,g.Circle.ATTRIBUTE_NAMES);if(!("radius"in e&&e.radius>0))throw Error("value of `r` attribute is required and can not be negative");return new g.Circle(c(e,k))};g.Circle.fromObject=function(m){return new g.Circle(m)}}})(); -(function(){var g=this.fabric||(this.fabric={});if(!g.Triangle){g.Triangle=g.util.createClass(g.Object,{type:"triangle",initialize:function(o){o=o||{};this.callSuper("initialize",o);this.set("width",o.width||100).set("height",o.height||100)},_render:function(o){var c=this.width/2,m=this.height/2;o.beginPath();o.moveTo(-c,m);o.lineTo(0,-m);o.lineTo(c,m);o.closePath();this.fill&&o.fill();this.stroke&&o.stroke()},complexity:function(){return 1}});g.Triangle.fromObject=function(o){return new g.Triangle(o)}}})(); -(function(){var g=this.fabric||(this.fabric={}),o=g.util.object.extend;if(g.Ellipse)console.warn("fabric.Ellipse is already defined.");else{g.Ellipse=g.util.createClass(g.Object,{type:"ellipse",initialize:function(c){c=c||{};this.callSuper("initialize",c);this.set("rx",c.rx||0);this.set("ry",c.ry||0);this.set("width",this.get("rx")*2);this.set("height",this.get("ry")*2)},toObject:function(){return o(this.callSuper("toObject"),{rx:this.get("rx"),ry:this.get("ry")})},render:function(c,m){if(!(this.rx=== -0||this.ry===0))return this.callSuper("render",c,m)},_render:function(c){c.beginPath();c.save();c.transform(1,0,0,this.ry/this.rx,0,0);c.arc(0,0,this.rx,0,Math.PI*2,false);c.restore();this.stroke&&c.stroke();this.fill&&c.fill()},complexity:function(){return 1}});g.Ellipse.ATTRIBUTE_NAMES="cx cy rx ry fill fill-opacity stroke stroke-width transform".split(" ");g.Ellipse.fromElement=function(c,m){var k=g.parseAttributes(c,g.Ellipse.ATTRIBUTE_NAMES);return new g.Ellipse(o(k,m))};g.Ellipse.fromObject= +(function(){var g=this.fabric||(this.fabric={}),p=Math.PI*2,c=g.util.object.extend;if(g.Circle)console.warn("fabric.Circle is already defined.");else{g.Circle=g.util.createClass(g.Object,{type:"circle",initialize:function(m){m=m||{};this.set("radius",m.radius||0);this.callSuper("initialize",m);m=this.get("radius")*2*this.get("scaleX");this.set("width",m).set("height",m)},toObject:function(){return c(this.callSuper("toObject"),{radius:this.get("radius")})},_render:function(m){m.beginPath();m.arc(0, +0,this.radius,0,p,false);m.closePath();this.fill&&m.fill();this.stroke&&m.stroke()},complexity:function(){return 1}});g.Circle.ATTRIBUTE_NAMES="cx cy r fill fill-opacity stroke stroke-width transform".split(" ");g.Circle.fromElement=function(m,k){var e=g.parseAttributes(m,g.Circle.ATTRIBUTE_NAMES);if(!("radius"in e&&e.radius>0))throw Error("value of `r` attribute is required and can not be negative");return new g.Circle(c(e,k))};g.Circle.fromObject=function(m){return new g.Circle(m)}}})(); +(function(){var g=this.fabric||(this.fabric={});if(!g.Triangle){g.Triangle=g.util.createClass(g.Object,{type:"triangle",initialize:function(p){p=p||{};this.callSuper("initialize",p);this.set("width",p.width||100).set("height",p.height||100)},_render:function(p){var c=this.width/2,m=this.height/2;p.beginPath();p.moveTo(-c,m);p.lineTo(0,-m);p.lineTo(c,m);p.closePath();this.fill&&p.fill();this.stroke&&p.stroke()},complexity:function(){return 1}});g.Triangle.fromObject=function(p){return new g.Triangle(p)}}})(); +(function(){var g=this.fabric||(this.fabric={}),p=g.util.object.extend;if(g.Ellipse)console.warn("fabric.Ellipse is already defined.");else{g.Ellipse=g.util.createClass(g.Object,{type:"ellipse",initialize:function(c){c=c||{};this.callSuper("initialize",c);this.set("rx",c.rx||0);this.set("ry",c.ry||0);this.set("width",this.get("rx")*2);this.set("height",this.get("ry")*2)},toObject:function(){return p(this.callSuper("toObject"),{rx:this.get("rx"),ry:this.get("ry")})},render:function(c,m){if(!(this.rx=== +0||this.ry===0))return this.callSuper("render",c,m)},_render:function(c){c.beginPath();c.save();c.transform(1,0,0,this.ry/this.rx,0,0);c.arc(0,0,this.rx,0,Math.PI*2,false);c.restore();this.stroke&&c.stroke();this.fill&&c.fill()},complexity:function(){return 1}});g.Ellipse.ATTRIBUTE_NAMES="cx cy rx ry fill fill-opacity stroke stroke-width transform".split(" ");g.Ellipse.fromElement=function(c,m){var k=g.parseAttributes(c,g.Ellipse.ATTRIBUTE_NAMES);return new g.Ellipse(p(k,m))};g.Ellipse.fromObject= function(c){return new g.Ellipse(c)}}})(); -(function(){var g=this.fabric||(this.fabric={});if(!g.Rect){g.Rect=g.util.createClass(g.Object,{type:"rect",options:{rx:0,ry:0},initialize:function(o){this.callSuper("initialize",o);this._initRxRy()},_initRxRy:function(){if(this.options.rx&&!this.options.ry)this.options.ry=this.options.rx;else if(this.options.ry&&!this.options.rx)this.options.rx=this.options.ry},_render:function(o){var c=this.options.rx||0,m=this.options.ry||0,k=-this.width/2,e=-this.height/2,b=this.width,a=this.height;o.beginPath(); -o.moveTo(k+c,e);o.lineTo(k+b-c,e);o.bezierCurveTo(k+b,e,k+b,e+m,k+b,e+m);o.lineTo(k+b,e+a-m);o.bezierCurveTo(k+b,e+a,k+b-c,e+a,k+b-c,e+a);o.lineTo(k+c,e+a);o.bezierCurveTo(k,e+a,k,e+a-m,k,e+a-m);o.lineTo(k,e+m);o.bezierCurveTo(k,e,k+c,e,k+c,e);o.closePath();this.fill&&o.fill();this.stroke&&o.stroke()},_normalizeLeftTopProperties:function(o){o.left&&this.set("left",o.left+this.getWidth()/2);o.top&&this.set("top",o.top+this.getHeight()/2);return this},complexity:function(){return 1}});g.Rect.ATTRIBUTE_NAMES= -"x y width height rx ry fill fill-opacity stroke stroke-width transform".split(" ");g.Rect.fromElement=function(o,c){if(!o)return null;var m=g.parseAttributes(o,g.Rect.ATTRIBUTE_NAMES);m=m;m.left=m.left||0;m.top=m.top||0;m=m;var k=new g.Rect(g.util.object.extend(c||{},m));k._normalizeLeftTopProperties(m);return k};g.Rect.fromObject=function(o){return new g.Rect(o)}}})(); +(function(){var g=this.fabric||(this.fabric={});if(!g.Rect){g.Rect=g.util.createClass(g.Object,{type:"rect",options:{rx:0,ry:0},initialize:function(p){this.callSuper("initialize",p);this._initRxRy()},_initRxRy:function(){if(this.options.rx&&!this.options.ry)this.options.ry=this.options.rx;else if(this.options.ry&&!this.options.rx)this.options.rx=this.options.ry},_render:function(p){var c=this.options.rx||0,m=this.options.ry||0,k=-this.width/2,e=-this.height/2,b=this.width,a=this.height;p.beginPath(); +p.moveTo(k+c,e);p.lineTo(k+b-c,e);p.bezierCurveTo(k+b,e,k+b,e+m,k+b,e+m);p.lineTo(k+b,e+a-m);p.bezierCurveTo(k+b,e+a,k+b-c,e+a,k+b-c,e+a);p.lineTo(k+c,e+a);p.bezierCurveTo(k,e+a,k,e+a-m,k,e+a-m);p.lineTo(k,e+m);p.bezierCurveTo(k,e,k+c,e,k+c,e);p.closePath();this.fill&&p.fill();this.stroke&&p.stroke()},_normalizeLeftTopProperties:function(p){p.left&&this.set("left",p.left+this.getWidth()/2);p.top&&this.set("top",p.top+this.getHeight()/2);return this},complexity:function(){return 1}});g.Rect.ATTRIBUTE_NAMES= +"x y width height rx ry fill fill-opacity stroke stroke-width transform".split(" ");g.Rect.fromElement=function(p,c){if(!p)return null;var m=g.parseAttributes(p,g.Rect.ATTRIBUTE_NAMES);m=m;m.left=m.left||0;m.top=m.top||0;m=m;var k=new g.Rect(g.util.object.extend(c||{},m));k._normalizeLeftTopProperties(m);return k};g.Rect.fromObject=function(p){return new g.Rect(p)}}})(); (function(){var g=this.fabric||(this.fabric={});if(g.Polyline)console.warn("fabric.Polyline is already defined");else{g.Polyline=g.util.createClass(g.Object,{type:"polyline",initialize:function(c,m){m=m||{};this.set("points",c);this.callSuper("initialize",m);this._calcDimensions()},_calcDimensions:function(){return g.Polygon.prototype._calcDimensions.call(this)},_toOrigin:function(){return g.Polygon.prototype._toOrigin.call(this)},toObject:function(){return g.Polygon.prototype.toObject.call(this)}, -_render:function(c){var m;c.beginPath();for(var k=0,e=this.points.length;k"},toObject:function(){var e=m(this.callSuper("toObject"),{path:this.path});if(this.sourcePath)e.sourcePath=this.sourcePath;if(this.transformMatrix)e.transformMatrix=this.transformMatrix;return e},toDatalessObject:function(){var e=this.toObject();if(this.sourcePath)e.path=this.sourcePath;delete e.sourcePath;return e},complexity:function(){return this.path.length},set:function(e,b){return this.callSuper("set",e,b)},_parsePath:function(){for(var e= -[],b,a,d=0,h=this.path.length;d"},isSameColor:function(){var a=this.getObjects()[0].get("fill");return this.getObjects().every(function(d){return d.get("fill")===a})},complexity:function(){return this.paths.reduce(function(a,d){return a+(d&&d.complexity?d.complexity():0)},0)},toGrayscale:function(){for(var a=this.paths.length;a--;)this.paths[a].toGrayscale();return this},getObjects:function(){return this.paths}});g.PathGroup.fromObject=function(a){for(var d=a.paths, -h=0,n=d.length;h"},getObjects:function(){return this.objects},add:function(b){this._restoreObjectsState();this.objects.push(b);b.setActive(true);this._calcBounds();this._updateObjectsCoords();return this},remove:function(b){this._restoreObjectsState(); -e(this.objects,b);b.setActive(false);this._calcBounds();this._updateObjectsCoords();return this},size:function(){return this.getObjects().length},set:function(b,a){if(typeof a=="function")this.set(b,a(this[b]));else if(b==="fill"||b==="opacity"){var d=this.objects.length;for(this[b]=a;d--;)this.objects[d].set(b,a)}else this[b]=a;return this},contains:function(b){return this.objects.indexOf(b)>-1},toObject:function(){return o(this.callSuper("toObject"),{objects:k(this.objects,"clone")})},render:function(b){b.save(); -this.transform(b);for(var a=Math.max(this.scaleX,this.scaleY),d=0,h;h=this.objects[d];d++){var n=h.borderScaleFactor;h.borderScaleFactor=a;h.render(b);h.borderScaleFactor=n}this.hideBorders||this.drawBorders(b);this.hideCorners||this.drawCorners(b);b.restore();this.setCoords()},item:function(b){return this.getObjects()[b]},complexity:function(){return this.getObjects().reduce(function(b,a){b+=typeof a.complexity=="function"?a.complexity():0;return b},0)},_restoreObjectsState:function(){this.objects.forEach(this._restoreObjectState, -this);return this},_restoreObjectState:function(b){var a=this.get("left"),d=this.get("top"),h=this.getAngle()*(Math.PI/180);b.get("originalLeft");b.get("originalTop");var n=Math.cos(h)*b.get("top")+Math.sin(h)*b.get("left");h=-Math.sin(h)*b.get("top")+Math.cos(h)*b.get("left");b.setAngle(b.getAngle()+this.getAngle());b.set("left",a+h*this.get("scaleX"));b.set("top",d+n*this.get("scaleY"));b.set("scaleX",b.get("scaleX")*this.get("scaleX"));b.set("scaleY",b.get("scaleY")*this.get("scaleY"));b.setCoords(); +h=0,o=d.length;h"},getObjects:function(){return this.objects},add:function(b){this._restoreObjectsState();this.objects.push(b);b.setActive(true);this._calcBounds();this._updateObjectsCoords();return this},remove:function(b){this._restoreObjectsState(); +e(this.objects,b);b.setActive(false);this._calcBounds();this._updateObjectsCoords();return this},size:function(){return this.getObjects().length},set:function(b,a){if(typeof a=="function")this.set(b,a(this[b]));else if(b==="fill"||b==="opacity"){var d=this.objects.length;for(this[b]=a;d--;)this.objects[d].set(b,a)}else this[b]=a;return this},contains:function(b){return this.objects.indexOf(b)>-1},toObject:function(){return p(this.callSuper("toObject"),{objects:k(this.objects,"clone")})},render:function(b){b.save(); +this.transform(b);for(var a=Math.max(this.scaleX,this.scaleY),d=0,h;h=this.objects[d];d++){var o=h.borderScaleFactor;h.borderScaleFactor=a;h.render(b);h.borderScaleFactor=o}this.hideBorders||this.drawBorders(b);this.hideCorners||this.drawCorners(b);b.restore();this.setCoords()},item:function(b){return this.getObjects()[b]},complexity:function(){return this.getObjects().reduce(function(b,a){b+=typeof a.complexity=="function"?a.complexity():0;return b},0)},_restoreObjectsState:function(){this.objects.forEach(this._restoreObjectState, +this);return this},_restoreObjectState:function(b){var a=this.get("left"),d=this.get("top"),h=this.getAngle()*(Math.PI/180);b.get("originalLeft");b.get("originalTop");var o=Math.cos(h)*b.get("top")+Math.sin(h)*b.get("left");h=-Math.sin(h)*b.get("top")+Math.cos(h)*b.get("left");b.setAngle(b.getAngle()+this.getAngle());b.set("left",a+h*this.get("scaleX"));b.set("top",d+o*this.get("scaleY"));b.set("scaleX",b.get("scaleX")*this.get("scaleX"));b.set("scaleY",b.get("scaleY")*this.get("scaleY"));b.setCoords(); b.hideCorners=false;b.setActive(false);b.setCoords();return this},destroy:function(){return this._restoreObjectsState()},saveCoords:function(){this._originalLeft=this.get("left");this._originalTop=this.get("top");return this},hasMoved:function(){return this._originalLeft!==this.get("left")||this._originalTop!==this.get("top")},setObjectsCoords:function(){this.forEachObject(function(b){b.setCoords()});return this},activateAllObjects:function(){return this.setActive(true)},setActive:function(b){this.forEachObject(function(a){a.setActive(b)}); -return this},forEachObject:function(b,a){for(var d=this.getObjects(),h=d.length;h--;)b.call(a,d[h],h,d);return this},_setOpacityIfSame:function(){var b=this.getObjects(),a=b[0]?b[0].get("opacity"):1;if(b.every(function(d){return d.get("opacity")===a}))this.opacity=a},_calcBounds:function(){var b=[],a=[],d,h;h=0;for(var n=this.objects.length;hb.x&&n-db.y},toGrayscale:function(){for(var b=this.objects.length;b--;)this.objects[b].toGrayscale()}});g.Group.fromObject=function(b){return new g.Group(b.objects,b)}}})(); -(function(){var g=this.fabric||(this.fabric={}),o=g.util.object.extend,c=g.util.object.clone;if(g.Text)console.warn("fabric.Text is already defined");else if(g.Object){g.Text=g.util.createClass(g.Object,{options:{top:10,left:10,fontsize:20,fontweight:100,fontfamily:"Modernist_One_400",path:null},type:"text",initialize:function(m,k){this.originalState={};this.initStateProperties();this.text=m;this.setOptions(k);o(this,this.options);this.theta=this.angle*(Math.PI/180);this.width=this.getWidth();this.setCoords()}, +return this},forEachObject:function(b,a){for(var d=this.getObjects(),h=d.length;h--;)b.call(a,d[h],h,d);return this},_setOpacityIfSame:function(){var b=this.getObjects(),a=b[0]?b[0].get("opacity"):1;if(b.every(function(d){return d.get("opacity")===a}))this.opacity=a},_calcBounds:function(){var b=[],a=[],d,h;h=0;for(var o=this.objects.length;hb.x&&o-db.y},toGrayscale:function(){for(var b=this.objects.length;b--;)this.objects[b].toGrayscale()}});g.Group.fromObject=function(b){return new g.Group(b.objects,b)}}})(); +(function(){var g=this.fabric||(this.fabric={}),p=g.util.object.extend,c=g.util.object.clone;if(g.Text)console.warn("fabric.Text is already defined");else if(g.Object){g.Text=g.util.createClass(g.Object,{options:{top:10,left:10,fontsize:20,fontweight:100,fontfamily:"Modernist_One_400",path:null},type:"text",initialize:function(m,k){this.originalState={};this.initStateProperties();this.text=m;this.setOptions(k);p(this,this.options);this.theta=this.angle*(Math.PI/180);this.width=this.getWidth();this.setCoords()}, initStateProperties:function(){var m;if((m=this.constructor)&&(m=m.superclass)&&(m=m.prototype)&&(m=m.stateProperties)&&m.clone){this.stateProperties=m.clone();this.stateProperties.push("fontfamily","fontweight","path")}},toString:function(){return"#"},_render:function(m){var k=Cufon.textOptions||(Cufon.textOptions={});k.left=this.left;k.top=this.top;k.context=m;k.color=this.fill;var e=this._initDummyElement(); this.transform(m);Cufon.replaceElement(e,{separate:"none",fontFamily:this.fontfamily});this.width=k.width;this.height=k.height},_initDummyElement:function(){var m=document.createElement("div");m.innerHTML=this.text;m.style.fontSize="40px";m.style.fontWeight="400";m.style.fontStyle="normal";m.style.letterSpacing="normal";m.style.color="#000000";m.style.fontWeight="600";m.style.fontFamily="Verdana";return m},render:function(m){m.save();this._render(m);if(this.active){this.drawBorders(m);this.drawCorners(m)}m.restore()}, -toObject:function(){return o(this.callSuper("toObject"),{text:this.text,fontsize:this.fontsize,fontweight:this.fontweight,fontfamily:this.fontfamily,path:this.path})},setColor:function(m){this.set("fill",m);return this},setFontsize:function(m){this.set("fontsize",m);this.setCoords();return this},getText:function(){return this.text},setText:function(m){this.set("text",m);this.setCoords();return this},set:function(m,k){this[m]=k;if(m==="fontfamily")this.path=this.path.replace(/(.*?)([^\/]*)(\.font\.js)/, +toObject:function(){return p(this.callSuper("toObject"),{text:this.text,fontsize:this.fontsize,fontweight:this.fontweight,fontfamily:this.fontfamily,path:this.path})},setColor:function(m){this.set("fill",m);return this},setFontsize:function(m){this.set("fontsize",m);this.setCoords();return this},getText:function(){return this.text},setText:function(m){this.set("text",m);this.setCoords();return this},set:function(m,k){this[m]=k;if(m==="fontfamily")this.path=this.path.replace(/(.*?)([^\/]*)(\.font\.js)/, "$1"+k+"$3");return this}});g.Text.fromObject=function(m){return new g.Text(m.text,c(m))};g.Text.fromElement=function(){}}else console.warn("fabric.Text requires fabric.Object")})(); -(function(){var g=fabric.util.object.extend;if(!this.fabric)this.fabric={};if(this.fabric.Image)console.warn("fabric.Image is already defined.");else if(fabric.Object){fabric.Image=fabric.util.createClass(fabric.Object,{maxwidth:null,maxheight:null,active:false,bordervisibility:false,cornervisibility:false,type:"image",__isGrayscaled:false,initialize:function(o,c){this.callSuper("initialize",c);this._initElement(o);this._initConfig(c||{})},getElement:function(){return this._element},setElement:function(o){this._element= -o;return this},getNormalizedSize:function(o,c,m){if(m&&c&&o.width>o.height&&o.width/o.heighto.width||o.height>m)){normalizedWidth=~~(o.width*m/o.height);normalizedHeight=m}else if(c&&c'},clone:function(o){this.constructor.fromObject(this.toObject(),o)},toGrayscale:function(o){if(!this.__isGrayscaled){var c=this.getElement(),m=document.createElement("canvas"),k=document.createElement("img"),e=this;m.width=c.width;m.height=c.height;m.getContext("2d").drawImage(c,0,0);fabric.Element.toGrayscale(m);k.onload=function(){e.setElement(k);o&&o();k.onload=m=c=imageData=null};k.width=c.width;k.height=c.height;k.src=m.toDataURL("image/png");this.__isGrayscaled=true;return this}}, -_render:function(o){var c=this.getOriginalSize();o.drawImage(this.getElement(),-c.width/2,-c.height/2,c.width,c.height)},_adjustWidthHeightToBorders:function(o){if(o){this.currentBorder=this.borderwidth;this.width+=2*this.currentBorder;this.height+=2*this.currentBorder}else this.currentBorder=0},_resetWidthHeight:function(){var o=this.getElement();this.set("width",o.width);this.set("height",o.height)},_initElement:function(o){this.setElement(fabric.util.getById(o));fabric.util.addClass(this.getElement(), -fabric.Image.CSS_CANVAS)},_initConfig:function(o){this.setOptions(o);this._setBorder();this._setWidthHeight(o)},_setBorder:function(){this.currentBorder=this.bordervisibility?this.borderwidth:0},_setWidthHeight:function(){var o=2*this.currentBorder;this.width=(this.getElement().width||0)+o;this.height=(this.getElement().height||0)+o},complexity:function(){return 1}});fabric.Image.CSS_CANVAS="canvas-img";fabric.Image.fromObject=function(o,c){var m=document.createElement("img"),k=o.src;if(o.width)m.width= -o.width;if(o.height)m.height=o.height;m.onload=function(){c&&c(new fabric.Image(m,o));m=m.onload=null};m.src=k};fabric.Image.fromURL=function(o,c,m){var k=document.createElement("img");k.onload=function(){c&&c(new fabric.Image(k,m));k=k.onload=null};k.src=o}}else console.warn("fabric.Object is required for fabric.Image initialization")})(); +(function(){var g=fabric.util.object.extend;if(!this.fabric)this.fabric={};if(this.fabric.Image)console.warn("fabric.Image is already defined.");else if(fabric.Object){fabric.Image=fabric.util.createClass(fabric.Object,{maxwidth:null,maxheight:null,active:false,bordervisibility:false,cornervisibility:false,type:"image",__isGrayscaled:false,initialize:function(p,c){this.callSuper("initialize",c);this._initElement(p);this._initConfig(c||{})},getElement:function(){return this._element},setElement:function(p){this._element= +p;return this},getNormalizedSize:function(p,c,m){if(m&&c&&p.width>p.height&&p.width/p.heightp.width||p.height>m)){normalizedWidth=~~(p.width*m/p.height);normalizedHeight=m}else if(c&&c'},clone:function(p){this.constructor.fromObject(this.toObject(),p)},toGrayscale:function(p){if(!this.__isGrayscaled){var c=this.getElement(),m=document.createElement("canvas"),k=document.createElement("img"),e=this;m.width=c.width;m.height=c.height;m.getContext("2d").drawImage(c,0,0);fabric.Element.toGrayscale(m);k.onload=function(){e.setElement(k);p&&p();k.onload=m=c=imageData=null};k.width=c.width;k.height=c.height;k.src=m.toDataURL("image/png");this.__isGrayscaled=true;return this}}, +_render:function(p){var c=this.getOriginalSize();p.drawImage(this.getElement(),-c.width/2,-c.height/2,c.width,c.height)},_adjustWidthHeightToBorders:function(p){if(p){this.currentBorder=this.borderwidth;this.width+=2*this.currentBorder;this.height+=2*this.currentBorder}else this.currentBorder=0},_resetWidthHeight:function(){var p=this.getElement();this.set("width",p.width);this.set("height",p.height)},_initElement:function(p){this.setElement(fabric.util.getById(p));fabric.util.addClass(this.getElement(), +fabric.Image.CSS_CANVAS)},_initConfig:function(p){this.setOptions(p);this._setBorder();this._setWidthHeight(p)},_setBorder:function(){this.currentBorder=this.bordervisibility?this.borderwidth:0},_setWidthHeight:function(){var p=2*this.currentBorder;this.width=(this.getElement().width||0)+p;this.height=(this.getElement().height||0)+p},complexity:function(){return 1}});fabric.Image.CSS_CANVAS="canvas-img";fabric.Image.fromObject=function(p,c){var m=document.createElement("img"),k=p.src;if(p.width)m.width= +p.width;if(p.height)m.height=p.height;m.onload=function(){c&&c(new fabric.Image(m,p));m=m.onload=null};m.src=k};fabric.Image.fromURL=function(p,c,m){var k=document.createElement("img");k.onload=function(){c&&c(new fabric.Image(k,m));k=k.onload=null};k.src=p}}else console.warn("fabric.Object is required for fabric.Image initialization")})(); diff --git a/src/element.class.js b/src/element.class.js index aad54a52..771153b2 100644 --- a/src/element.class.js +++ b/src/element.class.js @@ -681,11 +681,13 @@ */ __onMouseMove: function (e) { + var groupSelector = this._groupSelector; + // We initially clicked in an empty area, so we draw a box for multiple selection. - if (this._groupSelector !== null) { + if (groupSelector !== null) { var pointer = getPointer(e); - this._groupSelector.left = pointer.x - this._offset.left - this._groupSelector.ex; - this._groupSelector.top = pointer.y - this._offset.top - this._groupSelector.ey; + groupSelector.left = pointer.x - this._offset.left - groupSelector.ex; + groupSelector.top = pointer.y - this._offset.top - groupSelector.ey; this.renderTop(); } else if (!this._currentTransform) { @@ -756,8 +758,8 @@ */ _translateObject: function (x, y) { var target = this._currentTransform.target; - target.set('left', x - this._currentTransform.offsetX); - target.set('top', y - this._currentTransform.offsetY); + target.lockHorizontally || target.set('left', x - this._currentTransform.offsetX); + target.lockVertically || target.set('top', y - this._currentTransform.offsetY); }, /** @@ -769,24 +771,26 @@ * When not provided, an object is scaled by both dimensions equally */ _scaleObject: function (x, y, by) { - var lastLen = sqrt(pow(this._currentTransform.ey - this._currentTransform.top - this._offset.top, 2) + - pow(this._currentTransform.ex - this._currentTransform.left - this._offset.left, 2)); + var t = this._currentTransform, + offset = this._offset, + target = t.target; - var curLen = sqrt(pow(y - this._currentTransform.top - this._offset.top, 2) + - pow(x - this._currentTransform.left - this._offset.left, 2)); + if (target.lockScaling) return; + + var lastLen = sqrt(pow(t.ey - t.top - offset.top, 2) + pow(t.ex - t.left - offset.left, 2)), + curLen = sqrt(pow(y - t.top - offset.top, 2) + pow(x - t.left - offset.left, 2)); - var target = this._currentTransform.target; target._scaling = true; if (!by) { - target.set('scaleX', this._currentTransform.scaleX * curLen/lastLen); - target.set('scaleY', this._currentTransform.scaleY * curLen/lastLen); + target.set('scaleX', t.scaleX * curLen/lastLen); + target.set('scaleY', t.scaleY * curLen/lastLen); } else if (by === 'x') { - target.set('scaleX', this._currentTransform.scaleX * curLen/lastLen); + target.set('scaleX', t.scaleX * curLen/lastLen); } else if (by === 'y') { - target.set('scaleY', this._currentTransform.scaleY * curLen/lastLen); + target.set('scaleY', t.scaleY * curLen/lastLen); } }, @@ -797,11 +801,16 @@ * @param y {Number} pointer's y coordinate */ _rotateObject: function (x, y) { - var lastAngle = atan2(this._currentTransform.ey - this._currentTransform.top - this._offset.top, - this._currentTransform.ex - this._currentTransform.left - this._offset.left); - var curAngle = atan2(y - this._currentTransform.top - this._offset.top, - x - this._currentTransform.left - this._offset.left); - this._currentTransform.target.set('theta', (curAngle - lastAngle) + this._currentTransform.theta); + + var t = this._currentTransform, + o = this._offset; + + if (t.target.lockRotation) return; + + var lastAngle = atan2(t.ey - t.top - o.top, t.ex - t.left - o.left), + curAngle = atan2(y - t.top - o.top, x - t.left - o.left); + + t.target.set('theta', (curAngle - lastAngle) + t.theta); }, /** @@ -862,16 +871,17 @@ * @private */ _drawSelection: function () { - var left = this._groupSelector.left, - top = this._groupSelector.top, + var groupSelector = this._groupSelector, + left = groupSelector.left, + top = groupSelector.top, aleft = abs(left), atop = abs(top); this.contextTop.fillStyle = this.selectionColor; this.contextTop.fillRect( - this._groupSelector.ex - ((left > 0) ? 0 : -left), - this._groupSelector.ey - ((top > 0) ? 0 : -top), + groupSelector.ex - ((left > 0) ? 0 : -left), + groupSelector.ey - ((top > 0) ? 0 : -top), aleft, atop ); @@ -880,15 +890,14 @@ this.contextTop.strokeStyle = this.selectionBorderColor; this.contextTop.strokeRect( - this._groupSelector.ex + STROKE_OFFSET - ((left > 0) ? 0 : aleft), - this._groupSelector.ey + STROKE_OFFSET - ((top > 0) ? 0 : atop), + groupSelector.ex + STROKE_OFFSET - ((left > 0) ? 0 : aleft), + groupSelector.ey + STROKE_OFFSET - ((top > 0) ? 0 : atop), aleft, atop ); }, _findSelectedObjects: function (e) { - var target, targetRegion, group = [ ], @@ -1714,8 +1723,8 @@ _enlivenCachedObject: function (cachedObject) { - var objects = cachedObject.objects; - var options = cachedObject.options; + var objects = cachedObject.objects, + options = cachedObject.options; objects = objects.map(function (o) { return fabric[capitalize(o.type)].fromObject(o); diff --git a/test/demo/demo.js b/test/demo/demo.js index 50b3495a..bd3d18df 100644 --- a/test/demo/demo.js +++ b/test/demo/demo.js @@ -186,4 +186,70 @@ }; } + var lockHorizontallyEl = document.getElementById('lock-horizontally'); + lockHorizontallyEl.onclick = function() { + var activeObject = canvas.getActiveObject(); + if (activeObject) { + activeObject.lockHorizontally = !activeObject.lockHorizontally; + lockHorizontallyEl.innerHTML = activeObject.lockHorizontally + ? 'Unlock horizontal movement' + : 'Lock horizontal movement'; + } + }; + + var lockVerticallyEl = document.getElementById('lock-vertically'); + lockVerticallyEl.onclick = function() { + var activeObject = canvas.getActiveObject(); + if (activeObject) { + activeObject.lockVertically = !activeObject.lockVertically; + lockVerticallyEl.innerHTML = activeObject.lockVertically + ? 'Unlock vertical movement' + : 'Lock vertical movement'; + } + }; + + var lockScalingEl = document.getElementById('lock-scaling'); + lockScalingEl.onclick = function() { + var activeObject = canvas.getActiveObject(); + if (activeObject) { + activeObject.lockScaling = !activeObject.lockScaling; + lockScalingEl.innerHTML = activeObject.lockScaling + ? 'Unlock scaling' + : 'Lock scaling'; + } + }; + + var lockRotationEl = document.getElementById('lock-rotation'); + lockRotationEl.onclick = function() { + var activeObject = canvas.getActiveObject(); + if (activeObject) { + activeObject.lockRotation = !activeObject.lockRotation; + lockRotationEl.innerHTML = activeObject.lockRotation + ? 'Unlock rotation' + : 'Lock rotation'; + } + }; + + var activeObjectButtons = [ lockHorizontallyEl, lockVerticallyEl, lockScalingEl, lockRotationEl ]; + + fabric.util.observeEvent('object:selected', function(e) { + var selectedObject = e.memo.target; + + for (var i = activeObjectButtons.length; i--; ) { + activeObjectButtons[i].disabled = false; + } + + lockHorizontallyEl.innerHTML = (selectedObject.lockHorizontally ? 'Unlock horizontal movement' : 'Lock horizontal movement'); + lockVerticallyEl.innerHTML = (selectedObject.lockVertically ? 'Unlock vertical movement' : 'Lock vertical movement'); + lockScalingEl.innerHTML = (selectedObject.lockScaling ? 'Unlock scaling' : 'Lock scaling'); + lockRotationEl.innerHTML = (selectedObject.lockRotation ? 'Unlock rotation' : 'Lock rotation'); + + }); + + fabric.util.observeEvent('selection:cleared', function(e) { + for (var i = activeObjectButtons.length; i--; ) { + activeObjectButtons[i].disabled = true; + } + }); + })(); \ No newline at end of file diff --git a/test/demo/index.html b/test/demo/index.html index ce6473fc..43e0b817 100644 --- a/test/demo/index.html +++ b/test/demo/index.html @@ -30,12 +30,16 @@
  • Add objects to canvas:
    • -
    • -
    • -
    • +
  • + + + +
    • -
    • -
    • +
  • + + +
    • @@ -50,6 +54,19 @@
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +