You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@openmeetings.apache.org by so...@apache.org on 2017/11/23 09:34:13 UTC
[1/4] openmeetings git commit: [OPENMEETINGS-1738] fabric.js version
is updated to 2.0rc1
Repository: openmeetings
Updated Branches:
refs/heads/4.0.x 7cbac9dc3 -> 7008a6930
http://git-wip-us.apache.org/repos/asf/openmeetings/blob/7008a693/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/player.js
----------------------------------------------------------------------
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/player.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/player.js
index 7659eba..56adc13 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/player.js
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/player.js
@@ -23,196 +23,193 @@ var Player = (function() {
.append($('<source>').attr('type', 'video/mp4').attr('src', _o._src));
$('#wb-tab-' + canvas.wbId).append(vid);
new fabric.Image.fromURL(_o._poster, function(poster) {
- new fabric.Image(vid[0], {}, function (video) {
- video.visible = false;
- poster.width = _o.width;
- poster.height = _o.height;
- if (typeof(_o.status) === 'undefined') {
- _o.status = {paused: true};
- }
- let playable = false;
- const trg = new fabric.Triangle({
- left: 2.7 * rad
- , top: _o.height - 2.5 * rad
- , visible: _o.status.paused
- , angle: 90
- , width: rad
- , height: rad
- , stroke: mainColor
- , fill: mainColor
- });
- const rectPause1 = new fabric.Rect({
- left: 1.6 * rad
- , top: _o.height - 2.5 * rad
- , visible: !_o.status.paused
- , width: rad / 3
- , height: rad
- , stroke: mainColor
- , fill: mainColor
- });
- const rectPause2 = new fabric.Rect({
- left: 2.1 * rad
- , top: _o.height - 2.5 * rad
- , visible: !_o.status.paused
- , width: rad / 3
- , height: rad
- , stroke: mainColor
- , fill: mainColor
- });
- const play = new fabric.Group([
- new fabric.Circle({
- left: rad
- , top: _o.height - 3 * rad
- , radius: rad
- , stroke: mainColor
- , strokeWidth: 2
- , fill: null
- })
- , trg, rectPause1, rectPause2]
- , {
- objectCaching: false
- , visible: false
- });
- const cProgress = new fabric.Rect({
- left: 3.5 * rad
- , top: _o.height - 1.5 * rad
- , visible: false
- , width: _o.width - 5 * rad
- , height: rad / 2
- , stroke: mainColor
- , fill: null
- , rx: 5
- , ry: 5
- });
- const isDone = function() {
- return video.getElement().currentTime === video.getElement().duration;
- };
- const updateProgress = function() {
- progress.set('width', (video.getElement().currentTime * cProgress.width) / video.getElement().duration);
- canvas.renderAll();
- };
- const progress = new fabric.Rect({
- left: 3.5 * rad
- , top: _o.height - 1.5 * rad
+ poster.scaleX = poster.scaleY = _o.width / poster.getOriginalSize().width;
+ const video = new fabric.Image(vid[0], {visible: false});
+ if (typeof(_o.status) === 'undefined') {
+ _o.status = {paused: true};
+ }
+ let playable = false;
+ const trg = new fabric.Triangle({
+ left: 2.7 * rad
+ , top: _o.height - 2.5 * rad
+ , visible: _o.status.paused
+ , angle: 90
+ , width: rad
+ , height: rad
+ , stroke: mainColor
+ , fill: mainColor
+ });
+ const rectPause1 = new fabric.Rect({
+ left: 1.6 * rad
+ , top: _o.height - 2.5 * rad
+ , visible: !_o.status.paused
+ , width: rad / 3
+ , height: rad
+ , stroke: mainColor
+ , fill: mainColor
+ });
+ const rectPause2 = new fabric.Rect({
+ left: 2.1 * rad
+ , top: _o.height - 2.5 * rad
+ , visible: !_o.status.paused
+ , width: rad / 3
+ , height: rad
+ , stroke: mainColor
+ , fill: mainColor
+ });
+ const play = new fabric.Group([
+ new fabric.Circle({
+ left: rad
+ , top: _o.height - 3 * rad
+ , radius: rad
+ , stroke: mainColor
+ , strokeWidth: 2
+ , fill: null
+ })
+ , trg, rectPause1, rectPause2]
+ , {
+ objectCaching: false
, visible: false
- , width: 0
- , height: rad / 2
- , stroke: mainColor
- , fill: mainColor
- , rx: 5
- , ry: 5
});
- let request;
+ const cProgress = new fabric.Rect({
+ left: 3.5 * rad
+ , top: _o.height - 1.5 * rad
+ , visible: false
+ , width: _o.width - 5 * rad
+ , height: rad / 2
+ , stroke: mainColor
+ , fill: null
+ , rx: 5
+ , ry: 5
+ });
+ const isDone = function() {
+ return video.getElement().currentTime === video.getElement().duration;
+ };
+ const updateProgress = function() {
+ progress.set('width', (video.getElement().currentTime * cProgress.width) / video.getElement().duration);
+ canvas.requestRenderAll();
+ };
+ const progress = new fabric.Rect({
+ left: 3.5 * rad
+ , top: _o.height - 1.5 * rad
+ , visible: false
+ , width: 0
+ , height: rad / 2
+ , stroke: mainColor
+ , fill: mainColor
+ , rx: 5
+ , ry: 5
+ });
+ let request;
- const opts = $.extend({
- subTargetCheck: true
- , objectCaching: false
- , omType: 'Video'
- , selectable: canvas.selection
- }, _filter(_o, ['fileId', 'fileType', 'slide', 'uid', '_poster', '_src', 'width', 'height', 'status']));
- const group = new fabric.Group([video, poster, play, progress, cProgress], opts);
+ const opts = $.extend({
+ subTargetCheck: true
+ , objectCaching: false
+ , omType: 'Video'
+ , selectable: canvas.selection
+ }, _filter(_o, ['fileId', 'fileType', 'slide', 'uid', '_poster', '_src', 'width', 'height', 'status']));
+ const group = new fabric.Group([video, poster, play, progress, cProgress], opts);
- const updateControls = function() {
- video.visible = true;
- poster.visible = false;
+ const updateControls = function() {
+ video.visible = true;
+ poster.visible = false;
- trg.visible = group.status.paused;
- rectPause1.visible = !group.status.paused;
- rectPause2.visible = !group.status.paused;
- canvas.renderAll();
- };
- const render = function () {
- if (isDone()) {
- _sendStatus(group, true, video.getElement().duration);
- updateControls();
- }
- updateProgress();
- if (group.status.paused) {
- cancelAnimationFrame(request);
- canvas.renderAll();
- } else {
- request = fabric.util.requestAnimFrame(render);
- }
- };
- cProgress.on({
- 'mousedown': function (evt) {
- const _ptr = canvas.getPointer(evt.e, true)
- , ptr = canvas._normalizePointer(group, _ptr)
- , l = ptr.x - cProgress.aCoords.bl.x + group.width / 2;
- _sendStatus(group, group.status.paused, l * video.getElement().duration / cProgress.width)
- }
- });
- play.on({
- /*
- * https://github.com/kangax/fabric.js/issues/4115
- *
- 'mouseover': function() {
- circle1.set({strokeWidth: 4});
- canvas.renderAll();
- }
- , 'mouseout': function() {
- circle1.set({
- left: pos.left
- , top: pos.top
- , strokeWidth: 2
- });
- canvas.renderAll();
- }
- , */'mousedown': function () {
- play.set({
- left: pos.left + 3
- , top: pos.top + 3
- });
- canvas.renderAll();
- }
- , 'mouseup': function () {
- play.set({
- left: pos.left
- , top: pos.top
- });
- if (!group.status.paused && isDone()) {
- video.getElement().currentTime = 0;
- }
- _sendStatus(group, !group.status.paused, video.getElement().currentTime)
- updateControls();
- }
- });
- group.on({
- 'mouseover': function() {
- play.visible = playable;
- cProgress.visible = playable;
- progress.visible = playable;
- canvas.renderAll();
- }
- , 'mouseout': function() {
- play.visible = false;
- cProgress.visible = false;
- progress.visible = false;
- canvas.renderAll();
- }
- });
- group.setPlayable = function(_r) {
- playable = _r !== NONE;
- };
- group.videoStatus = function(_status) {
- group.status = _status;
+ trg.visible = group.status.paused;
+ rectPause1.visible = !group.status.paused;
+ rectPause2.visible = !group.status.paused;
+ canvas.requestRenderAll();
+ };
+ const render = function () {
+ if (isDone()) {
+ _sendStatus(group, true, video.getElement().duration);
updateControls();
- video.getElement().currentTime = group.status.pos;
- updateProgress();
- if (group.status.paused) {
- video.getElement().pause();
- } else {
- video.getElement().play();
- fabric.util.requestAnimFrame(render);
+ }
+ updateProgress();
+ if (group.status.paused) {
+ cancelAnimationFrame(request);
+ canvas.requestRenderAll();
+ } else {
+ request = fabric.util.requestAnimFrame(render);
+ }
+ };
+ cProgress.on({
+ 'mousedown': function (evt) {
+ const _ptr = canvas.getPointer(evt.e, true)
+ , ptr = canvas._normalizePointer(group, _ptr)
+ , l = ptr.x - cProgress.aCoords.bl.x + group.width / 2;
+ _sendStatus(group, group.status.paused, l * video.getElement().duration / cProgress.width)
+ }
+ });
+ play.on({
+ /*
+ * https://github.com/kangax/fabric.js/issues/4115
+ *
+ 'mouseover': function() {
+ circle1.set({strokeWidth: 4});
+ canvas.requestRenderAll();
+ }
+ , 'mouseout': function() {
+ circle1.set({
+ left: pos.left
+ , top: pos.top
+ , strokeWidth: 2
+ });
+ canvas.requestRenderAll();
+ }
+ , */'mousedown': function () {
+ play.set({
+ left: pos.left + 3
+ , top: pos.top + 3
+ });
+ canvas.requestRenderAll();
+ }
+ , 'mouseup': function () {
+ play.set({
+ left: pos.left
+ , top: pos.top
+ });
+ if (!group.status.paused && isDone()) {
+ video.getElement().currentTime = 0;
}
+ _sendStatus(group, !group.status.paused, video.getElement().currentTime)
+ updateControls();
+ }
+ });
+ group.on({
+ 'mouseover': function() {
+ play.visible = playable;
+ cProgress.visible = playable;
+ progress.visible = playable;
+ canvas.requestRenderAll();
+ }
+ , 'mouseout': function() {
+ play.visible = false;
+ cProgress.visible = false;
+ progress.visible = false;
+ canvas.requestRenderAll();
}
- group.setPlayable(wb.getRole());
- canvas.add(group);
- canvas.renderAll();
- player.modify(group, _o);
-
- const pos = {left: play.left, top: play.top};
});
+ group.setPlayable = function(_r) {
+ playable = _r !== NONE;
+ };
+ group.videoStatus = function(_status) {
+ group.status = _status;
+ updateControls();
+ video.getElement().currentTime = group.status.pos;
+ updateProgress();
+ if (group.status.paused) {
+ video.getElement().pause();
+ } else {
+ video.getElement().play();
+ fabric.util.requestAnimFrame(render);
+ }
+ }
+ group.setPlayable(wb.getRole());
+ canvas.add(group);
+ canvas.requestRenderAll();
+ player.modify(group, _o);
+
+ const pos = {left: play.left, top: play.top};
});
};
player.modify = function(g, _o) {
@@ -224,7 +221,7 @@ var Player = (function() {
, top: 10
}, _filter(_o, ['angle', 'left', 'scaleX', 'scaleY', 'top']));
g.set(opts);
- g.canvas.renderAll();
+ g.canvas.requestRenderAll();
};
return player;
})();
http://git-wip-us.apache.org/repos/asf/openmeetings/blob/7008a693/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/tool-shape.js
----------------------------------------------------------------------
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/tool-shape.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/tool-shape.js
index cde5b89..875dfd8 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/tool-shape.js
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/tool-shape.js
@@ -21,7 +21,7 @@ var Shape = function(wb) {
if (!shape.isDown) return;
const pointer = canvas.getPointer(o.e);
shape.updateShape(pointer);
- canvas.renderAll();
+ canvas.requestRenderAll();
};
shape.updateCreated = function(o) {
return o;
@@ -31,7 +31,7 @@ var Shape = function(wb) {
shape.isDown = false;
shape.obj.setCoords();
shape.obj.selectable = false;
- canvas.renderAll();
+ canvas.requestRenderAll();
shape.objectCreated(shape.obj, canvas);
};
shape.internalActivate = function() {};
http://git-wip-us.apache.org/repos/asf/openmeetings/blob/7008a693/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb-area.js
----------------------------------------------------------------------
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb-area.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb-area.js
index 85a5b8d..775ba77 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb-area.js
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb-area.js
@@ -25,22 +25,12 @@ var DrawWbArea = function() {
return true;
}
const arr = [];
- if (!!canvas.getActiveGroup()) {
- canvas.getActiveGroup().forEachObject(function(o) {
- arr.push({
- uid: o.uid
- , slide: o.slide
- });
+ canvas.getActiveObjects().forEachObject(function(o) {
+ arr.push({
+ uid: o.uid
+ , slide: o.slide
});
- } else {
- const o = canvas.getActiveObject();
- if (!!o) {
- arr.push({
- uid: o.uid
- , slide: o.slide
- });
- }
- }
+ });
wbAction('deleteObj', JSON.stringify({
wbId: wb.id
, obj: arr
http://git-wip-us.apache.org/repos/asf/openmeetings/blob/7008a693/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb-board.js
----------------------------------------------------------------------
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb-board.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb-board.js
index 9bc70fb..417db27 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb-board.js
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb-board.js
@@ -281,7 +281,7 @@ var Wb = function() {
if (!!__o) {
const cnvs = canvases[o.slide];
if (!!cnvs) {
- cnvs.discardActiveGroup();
+ cnvs.discardActiveObject();
if ('Video' === __o.omType) {
$('#wb-video-' + __o.uid).remove();
}
@@ -345,7 +345,7 @@ var Wb = function() {
wb.eachCanvas(function(canvas) {
canvas.renderOnAddRemove = true;
- canvas.renderAll();
+ canvas.requestRenderAll();
});
});
};
@@ -360,7 +360,7 @@ var Wb = function() {
return r;
}
//events
- function wbObjCreatedHandler(o) {
+ function objCreatedHandler(o) {
if (role === NONE && o.type !== 'pointer') return;
let json;
@@ -385,7 +385,7 @@ var Wb = function() {
case 'i-text':
o.uid = UUID.generate();
o.slide = this.slide;
- wbObjCreatedHandler(o);
+ objCreatedHandler(o);
break;
default:
o.selectable = this.selection;
@@ -397,7 +397,7 @@ var Wb = function() {
if (role === NONE && o.type !== 'pointer') return;
o.includeDefaultValues = false;
- if ("group" === o.type && o.omType !== 'Video') {
+ if ("activeSelection" === o.type) {
o.clone(function(_o) {
// ungrouping
_o.includeDefaultValues = false;
@@ -424,7 +424,7 @@ var Wb = function() {
function pathCreatedHandler(o) {
o.path.uid = UUID.generate();
o.path.slide = this.slide;
- wbObjCreatedHandler(o.path);
+ objCreatedHandler(o.path);
};
function scrollHandler() {
$(this).find('.canvas-container').each(function(idx) {
@@ -462,7 +462,7 @@ var Wb = function() {
function setHandlers(canvas) {
// off everything first to prevent duplicates
canvas.off({
- 'wb:object:created': wbObjCreatedHandler
+ 'wb:object:created': objCreatedHandler
, 'object:modified': objModifiedHandler
, 'object:added': objAddedHandler
, 'object:selected': objSelectedHandler
@@ -471,7 +471,7 @@ var Wb = function() {
//, 'text:changed': textChangedHandler
});
canvas.on({
- 'wb:object:created': wbObjCreatedHandler
+ 'wb:object:created': objCreatedHandler
, 'object:modified': objModifiedHandler
});
if (role !== NONE) {
@@ -702,7 +702,7 @@ var Wb = function() {
}
$('.room.wb.area .wb-video.slide-' + _sl).remove();
canvas.renderOnAddRemove = true;
- canvas.renderAll();
+ canvas.requestRenderAll();
}
};
wb.getCanvas = function() {
[4/4] openmeetings git commit: [OPENMEETINGS-1738] fabric.js version
is updated to 2.0rc1
Posted by so...@apache.org.
[OPENMEETINGS-1738] fabric.js version is updated to 2.0rc1
Project: http://git-wip-us.apache.org/repos/asf/openmeetings/repo
Commit: http://git-wip-us.apache.org/repos/asf/openmeetings/commit/7008a693
Tree: http://git-wip-us.apache.org/repos/asf/openmeetings/tree/7008a693
Diff: http://git-wip-us.apache.org/repos/asf/openmeetings/diff/7008a693
Branch: refs/heads/4.0.x
Commit: 7008a69304f1612883c06ff21ee20e7b9af82eaa
Parents: 7cbac9d
Author: Maxim Solodovnik <so...@gmail.com>
Authored: Thu Nov 23 16:34:04 2017 +0700
Committer: Maxim Solodovnik <so...@gmail.com>
Committed: Thu Nov 23 16:34:04 2017 +0700
----------------------------------------------------------------------
.../apache/openmeetings/web/room/wb/fabric.js | 14236 +++++++++--------
.../openmeetings/web/room/wb/fabric.min.js | 2 +-
.../apache/openmeetings/web/room/wb/player.js | 361 +-
.../openmeetings/web/room/wb/tool-shape.js | 4 +-
.../apache/openmeetings/web/room/wb/wb-area.js | 20 +-
.../apache/openmeetings/web/room/wb/wb-board.js | 18 +-
6 files changed, 7776 insertions(+), 6865 deletions(-)
----------------------------------------------------------------------
[2/4] openmeetings git commit: [OPENMEETINGS-1738] fabric.js version
is updated to 2.0rc1
Posted by so...@apache.org.
http://git-wip-us.apache.org/repos/asf/openmeetings/blob/7008a693/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/fabric.min.js
----------------------------------------------------------------------
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/fabric.min.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/fabric.min.js
index e2fac51..21a4783 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/fabric.min.js
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/fabric.min.js
@@ -1,2 +1,2 @@
/* Licensed MIT https://github.com/kangax/fabric.js/blob/master/LICENSE */
-var fabric=fabric||{version:"1.7.20"};"undefined"!=typeof exports&&(exports.fabric=fabric),"undefined"!=typeof document&&"undefined"!=typeof window?(fabric.document=document,fabric.window=window,window.fabric=fabric):(fabric.document=require("jsdom").jsdom(decodeURIComponent("%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E")),fabric.document.createWindow?fabric.window=fabric.document.createWindow():fabric.window=fabric.document.parentWindow),fabric.isTouchSupported="ontouchstart"in fabric.window,fabric.isLikelyNode="undefined"!=typeof Buffer&&"undefined"==typeof window,fabric.SHARED_ATTRIBUTES=["display","transform","fill","fill-opacity","fill-rule","opacity","stroke","stroke-dasharray","stroke-linecap","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke-width","id"],fabric.DPI=96,fabric.reNum="(?:[-+]?(?:\\d+|\\d*\\.\\d+)(?:e[-+]?\\d+)?)",fabric.fontPaths={},fabric.iMatrix=[1,0,0,1,0,0],fabric.canvasModule="canvas",fabric.perfLi
mitSizeTotal=2097152,fabric.maxCacheSideLimit=4096,fabric.minCacheSideLimit=256,fabric.charWidthsCache={},fabric.devicePixelRatio=fabric.window.devicePixelRatio||fabric.window.webkitDevicePixelRatio||fabric.window.mozDevicePixelRatio||1,function(){function t(t,e){if(this.__eventListeners[t]){var i=this.__eventListeners[t];e?i[i.indexOf(e)]=!1:fabric.util.array.fill(i,!1)}}function e(t,e){if(this.__eventListeners||(this.__eventListeners={}),1===arguments.length)for(var i in t)this.on(i,t[i]);else this.__eventListeners[t]||(this.__eventListeners[t]=[]),this.__eventListeners[t].push(e);return this}function i(e,i){if(this.__eventListeners){if(0===arguments.length)for(e in this.__eventListeners)t.call(this,e);else if(1===arguments.length&&"object"==typeof arguments[0])for(var r in e)t.call(this,r,e[r]);else t.call(this,e,i);return this}}function r(t,e){if(this.__eventListeners){var i=this.__eventListeners[t];if(i){for(var r=0,n=i.length;r<n;r++)i[r]&&i[r].call(this,e||{});return this.__e
ventListeners[t]=i.filter(function(t){return!1!==t}),this}}}fabric.Observable={observe:e,stopObserving:i,fire:r,on:e,off:i,trigger:r}}(),fabric.Collection={_objects:[],add:function(){if(this._objects.push.apply(this._objects,arguments),this._onObjectAdded)for(var t=0,e=arguments.length;t<e;t++)this._onObjectAdded(arguments[t]);return this.renderOnAddRemove&&this.renderAll(),this},insertAt:function(t,e,i){var r=this.getObjects();return i?r[e]=t:r.splice(e,0,t),this._onObjectAdded&&this._onObjectAdded(t),this.renderOnAddRemove&&this.renderAll(),this},remove:function(){for(var t,e=this.getObjects(),i=!1,r=0,n=arguments.length;r<n;r++)-1!==(t=e.indexOf(arguments[r]))&&(i=!0,e.splice(t,1),this._onObjectRemoved&&this._onObjectRemoved(arguments[r]));return this.renderOnAddRemove&&i&&this.renderAll(),this},forEachObject:function(t,e){for(var i=this.getObjects(),r=0,n=i.length;r<n;r++)t.call(e,i[r],r,i);return this},getObjects:function(t){return void 0===t?this._objects:this._objects.filter(
function(e){return e.type===t})},item:function(t){return this.getObjects()[t]},isEmpty:function(){return 0===this.getObjects().length},size:function(){return this.getObjects().length},contains:function(t){return this.getObjects().indexOf(t)>-1},complexity:function(){return this.getObjects().reduce(function(t,e){return t+=e.complexity?e.complexity():0},0)}},fabric.CommonMethods={_setOptions:function(t){for(var e in t)this.set(e,t[e])},_initGradient:function(t,e){!t||!t.colorStops||t instanceof fabric.Gradient||this.set(e,new fabric.Gradient(t))},_initPattern:function(t,e,i){!t||!t.source||t instanceof fabric.Pattern?i&&i():this.set(e,new fabric.Pattern(t,i))},_initClipping:function(t){if(t.clipTo&&"string"==typeof t.clipTo){var e=fabric.util.getFunctionBody(t.clipTo);void 0!==e&&(this.clipTo=new Function("ctx",e))}},_setObject:function(t){for(var e in t)this._set(e,t[e])},set:function(t,e){return"object"==typeof t?this._setObject(t):"function"==typeof e&&"clipTo"!==t?this._set(t,e(th
is.get(t))):this._set(t,e),this},_set:function(t,e){this[t]=e},toggle:function(t){var e=this.get(t);return"boolean"==typeof e&&this.set(t,!e),this},get:function(t){return this[t]}},function(t){var e=Math.sqrt,i=Math.atan2,r=Math.pow,n=Math.abs,s=Math.PI/180;fabric.util={removeFromArray:function(t,e){var i=t.indexOf(e);return-1!==i&&t.splice(i,1),t},getRandomInt:function(t,e){return Math.floor(Math.random()*(e-t+1))+t},degreesToRadians:function(t){return t*s},radiansToDegrees:function(t){return t/s},rotatePoint:function(t,e,i){t.subtractEquals(e);var r=fabric.util.rotateVector(t,i);return new fabric.Point(r.x,r.y).addEquals(e)},rotateVector:function(t,e){var i=Math.sin(e),r=Math.cos(e);return{x:t.x*r-t.y*i,y:t.x*i+t.y*r}},transformPoint:function(t,e,i){return i?new fabric.Point(e[0]*t.x+e[2]*t.y,e[1]*t.x+e[3]*t.y):new fabric.Point(e[0]*t.x+e[2]*t.y+e[4],e[1]*t.x+e[3]*t.y+e[5])},makeBoundingBoxFromPoints:function(t){var e=[t[0].x,t[1].x,t[2].x,t[3].x],i=fabric.util.array.min(e),r=fabr
ic.util.array.max(e),n=Math.abs(i-r),s=[t[0].y,t[1].y,t[2].y,t[3].y],o=fabric.util.array.min(s),a=fabric.util.array.max(s);return{left:i,top:o,width:n,height:Math.abs(o-a)}},invertTransform:function(t){var e=1/(t[0]*t[3]-t[1]*t[2]),i=[e*t[3],-e*t[1],-e*t[2],e*t[0]],r=fabric.util.transformPoint({x:t[4],y:t[5]},i,!0);return i[4]=-r.x,i[5]=-r.y,i},toFixed:function(t,e){return parseFloat(Number(t).toFixed(e))},parseUnit:function(t,e){var i=/\D{0,2}$/.exec(t),r=parseFloat(t);switch(e||(e=fabric.Text.DEFAULT_SVG_FONT_SIZE),i[0]){case"mm":return r*fabric.DPI/25.4;case"cm":return r*fabric.DPI/2.54;case"in":return r*fabric.DPI;case"pt":return r*fabric.DPI/72;case"pc":return r*fabric.DPI/72*12;case"em":return r*e;default:return r}},falseFunction:function(){return!1},getKlass:function(t,e){return t=fabric.util.string.camelize(t.charAt(0).toUpperCase()+t.slice(1)),fabric.util.resolveNamespace(e)[t]},resolveNamespace:function(e){if(!e)return fabric;var i,r=e.split("."),n=r.length,s=t||fabric.win
dow;for(i=0;i<n;++i)s=s[r[i]];return s},loadImage:function(t,e,i,r){if(t){var n=fabric.util.createImage();n.onload=function(){e&&e.call(i,n),n=n.onload=n.onerror=null},n.onerror=function(){fabric.log("Error loading "+n.src),e&&e.call(i,null,!0),n=n.onload=n.onerror=null},0!==t.indexOf("data")&&r&&(n.crossOrigin=r),n.src=t}else e&&e.call(i,t)},enlivenObjects:function(t,e,i,r){function n(){++o===a&&e&&e(s)}var s=[],o=0,a=(t=t||[]).length;a?t.forEach(function(t,e){t&&t.type?fabric.util.getKlass(t.type,i).fromObject(t,function(i,o){o||(s[e]=i),r&&r(t,i,o),n()},!0):n()}):e&&e(s)},enlivenPatterns:function(t,e){function i(){++n===s&&e&&e(r)}var r=[],n=0,s=(t=t||[]).length;s?t.forEach(function(t,e){t&&t.source?new fabric.Pattern(t,function(t){r[e]=t,i()}):(r[e]=t,i())}):e&&e(r)},groupSVGElements:function(t,e,i){var r;return r=new fabric.PathGroup(t,e),void 0!==i&&(r.sourcePath=i),r},populateWithProperties:function(t,e,i){if(i&&"[object Array]"===Object.prototype.toString.call(i))for(var r=0
,n=i.length;r<n;r++)i[r]in t&&(e[i[r]]=t[i[r]])},drawDashedLine:function(t,r,n,s,o,a){var h=s-r,c=o-n,l=e(h*h+c*c),u=i(c,h),f=a.length,d=0,g=!0;for(t.save(),t.translate(r,n),t.moveTo(0,0),t.rotate(u),r=0;l>r;)(r+=a[d++%f])>l&&(r=l),t[g?"lineTo":"moveTo"](r,0),g=!g;t.restore()},createCanvasElement:function(t){return t||(t=fabric.document.createElement("canvas")),t.getContext||"undefined"==typeof G_vmlCanvasManager||G_vmlCanvasManager.initElement(t),t},createImage:function(){return fabric.isLikelyNode?new(require("canvas").Image):fabric.document.createElement("img")},createAccessors:function(t){var e,i,r,n,s,o=t.prototype;for(e=o.stateProperties.length;e--;)n="set"+(r=(i=o.stateProperties[e]).charAt(0).toUpperCase()+i.slice(1)),o[s="get"+r]||(o[s]=function(t){return new Function('return this.get("'+t+'")')}(i)),o[n]||(o[n]=function(t){return new Function("value",'return this.set("'+t+'", value)')}(i))},clipContext:function(t,e){e.save(),e.beginPath(),t.clipTo(e),e.clip()},multiplyTran
sformMatrices:function(t,e,i){return[t[0]*e[0]+t[2]*e[1],t[1]*e[0]+t[3]*e[1],t[0]*e[2]+t[2]*e[3],t[1]*e[2]+t[3]*e[3],i?0:t[0]*e[4]+t[2]*e[5]+t[4],i?0:t[1]*e[4]+t[3]*e[5]+t[5]]},qrDecompose:function(t){var n=i(t[1],t[0]),o=r(t[0],2)+r(t[1],2),a=e(o),h=(t[0]*t[3]-t[2]*t[1])/a,c=i(t[0]*t[2]+t[1]*t[3],o);return{angle:n/s,scaleX:a,scaleY:h,skewX:c/s,skewY:0,translateX:t[4],translateY:t[5]}},customTransformMatrix:function(t,e,i){var r=[1,0,n(Math.tan(i*s)),1],o=[n(t),0,0,n(e)];return fabric.util.multiplyTransformMatrices(o,r,!0)},resetObjectTransform:function(t){t.scaleX=1,t.scaleY=1,t.skewX=0,t.skewY=0,t.flipX=!1,t.flipY=!1,t.setAngle(0)},getFunctionBody:function(t){return(String(t).match(/function[^{]*\{([\s\S]*)\}/)||{})[1]},isTransparent:function(t,e,i,r){r>0&&(e>r?e-=r:e=0,i>r?i-=r:i=0);var n,s,o=!0,a=t.getImageData(e,i,2*r||1,2*r||1),h=a.data.length;for(n=3;n<h&&(s=a.data[n],!1!==(o=s<=0));n+=4);return a=null,o},parsePreserveAspectRatioAttribute:function(t){var e,i="meet",r="Mid",n=
"Mid",s=t.split(" ");return s&&s.length&&("meet"!==(i=s.pop())&&"slice"!==i?(e=i,i="meet"):s.length&&(e=s.pop())),r="none"!==e?e.slice(1,4):"none",n="none"!==e?e.slice(5,8):"none",{meetOrSlice:i,alignX:r,alignY:n}},clearFabricFontCache:function(t){t?fabric.charWidthsCache[t]&&delete fabric.charWidthsCache[t]:fabric.charWidthsCache={}},limitDimsByArea:function(t,e){var i=Math.sqrt(e*t),r=Math.floor(e/i);return{x:Math.floor(i),y:r}},capValue:function(t,e,i){return Math.max(t,Math.min(e,i))}}}("undefined"!=typeof exports?exports:this),function(){function t(t,r,s,o,h,c,l){var u=a.call(arguments);if(n[u])return n[u];var f=Math.PI,d=l*f/180,g=Math.sin(d),p=Math.cos(d),v=0,b=0,m=-p*t*.5-g*r*.5,_=-p*r*.5+g*t*.5,y=(s=Math.abs(s))*s,x=(o=Math.abs(o))*o,C=_*_,S=m*m,w=y*x-y*C-x*S,O=0;if(w<0){var T=Math.sqrt(1-w/(y*x));s*=T,o*=T}else O=(h===c?-1:1)*Math.sqrt(w/(y*C+x*S));var j=O*s*_/o,k=-O*o*m/s,M=p*j-g*k+.5*t,D=g*j+p*k+.5*r,A=i(1,0,(m-j)/s,(_-k)/o),P=i((m-j)/s,(_-k)/o,(-m-j)/s,(-_-k)/o);0===c&&
P>0?P-=2*f:1===c&&P<0&&(P+=2*f);for(var E=Math.ceil(Math.abs(P/f*2)),I=[],L=P/E,F=8/3*Math.sin(L/4)*Math.sin(L/4)/Math.sin(L/2),B=A+L,R=0;R<E;R++)I[R]=e(A,B,p,g,s,o,M,D,F,v,b),v=I[R][4],b=I[R][5],A=B,B+=L;return n[u]=I,I}function e(t,e,i,r,n,o,h,c,l,u,f){var d=a.call(arguments);if(s[d])return s[d];var g=Math.cos(t),p=Math.sin(t),v=Math.cos(e),b=Math.sin(e),m=i*n*v-r*o*b+h,_=r*n*v+i*o*b+c,y=u+l*(-i*n*p-r*o*g),x=f+l*(-r*n*p+i*o*g),C=m+l*(i*n*b+r*o*v),S=_+l*(r*n*b-i*o*v);return s[d]=[y,x,C,S,m,_],s[d]}function i(t,e,i,r){var n=Math.atan2(e,t),s=Math.atan2(r,i);return s>=n?s-n:2*Math.PI-(n-s)}function r(t,e,i,r,n,s,h,c){var l=a.call(arguments);if(o[l])return o[l];var u,f,d,g,p,v,b,m,_=Math.sqrt,y=Math.min,x=Math.max,C=Math.abs,S=[],w=[[],[]];f=6*t-12*i+6*n,u=-3*t+9*i-9*n+3*h,d=3*i-3*t;for(var O=0;O<2;++O)if(O>0&&(f=6*e-12*r+6*s,u=-3*e+9*r-9*s+3*c,d=3*r-3*e),C(u)<1e-12){if(C(f)<1e-12)continue;0<(g=-d/f)&&g<1&&S.push(g)}else(b=f*f-4*d*u)<0||(0<(p=(-f+(m=_(b)))/(2*u))&&p<1&&S.push(p),0<(v=
(-f-m)/(2*u))&&v<1&&S.push(v));for(var T,j,k,M=S.length,D=M;M--;)T=(k=1-(g=S[M]))*k*k*t+3*k*k*g*i+3*k*g*g*n+g*g*g*h,w[0][M]=T,j=k*k*k*e+3*k*k*g*r+3*k*g*g*s+g*g*g*c,w[1][M]=j;w[0][D]=t,w[1][D]=e,w[0][D+1]=h,w[1][D+1]=c;var A=[{x:y.apply(null,w[0]),y:y.apply(null,w[1])},{x:x.apply(null,w[0]),y:x.apply(null,w[1])}];return o[l]=A,A}var n={},s={},o={},a=Array.prototype.join;fabric.util.drawArc=function(e,i,r,n){for(var s=n[0],o=n[1],a=n[2],h=n[3],c=n[4],l=[[],[],[],[]],u=t(n[5]-i,n[6]-r,s,o,h,c,a),f=0,d=u.length;f<d;f++)l[f][0]=u[f][0]+i,l[f][1]=u[f][1]+r,l[f][2]=u[f][2]+i,l[f][3]=u[f][3]+r,l[f][4]=u[f][4]+i,l[f][5]=u[f][5]+r,e.bezierCurveTo.apply(e,l[f])},fabric.util.getBoundsOfArc=function(e,i,n,s,o,a,h,c,l){for(var u,f=0,d=0,g=[],p=t(c-e,l-i,n,s,a,h,o),v=0,b=p.length;v<b;v++)u=r(f,d,p[v][0],p[v][1],p[v][2],p[v][3],p[v][4],p[v][5]),g.push({x:u[0].x+e,y:u[0].y+i}),g.push({x:u[1].x+e,y:u[1].y+i}),f=p[v][4],d=p[v][5];return g},fabric.util.getBoundsOfCurve=r}(),function(){function t(t,e,i)
{if(t&&0!==t.length){var r=t.length-1,n=e?t[r][e]:t[r];if(e)for(;r--;)i(t[r][e],n)&&(n=t[r][e]);else for(;r--;)i(t[r],n)&&(n=t[r]);return n}}var e=Array.prototype.slice;Array.prototype.indexOf||(Array.prototype.indexOf=function(t){if(void 0===this||null===this)throw new TypeError;var e=Object(this),i=e.length>>>0;if(0===i)return-1;var r=0;if(arguments.length>0&&((r=Number(arguments[1]))!==r?r=0:0!==r&&r!==Number.POSITIVE_INFINITY&&r!==Number.NEGATIVE_INFINITY&&(r=(r>0||-1)*Math.floor(Math.abs(r)))),r>=i)return-1;for(var n=r>=0?r:Math.max(i-Math.abs(r),0);n<i;n++)if(n in e&&e[n]===t)return n;return-1}),Array.prototype.forEach||(Array.prototype.forEach=function(t,e){for(var i=0,r=this.length>>>0;i<r;i++)i in this&&t.call(e,this[i],i,this)}),Array.prototype.map||(Array.prototype.map=function(t,e){for(var i=[],r=0,n=this.length>>>0;r<n;r++)r in this&&(i[r]=t.call(e,this[r],r,this));return i}),Array.prototype.every||(Array.prototype.every=function(t,e){for(var i=0,r=this.length>>>0;i<r;i
++)if(i in this&&!t.call(e,this[i],i,this))return!1;return!0}),Array.prototype.some||(Array.prototype.some=function(t,e){for(var i=0,r=this.length>>>0;i<r;i++)if(i in this&&t.call(e,this[i],i,this))return!0;return!1}),Array.prototype.filter||(Array.prototype.filter=function(t,e){for(var i,r=[],n=0,s=this.length>>>0;n<s;n++)n in this&&(i=this[n],t.call(e,i,n,this)&&r.push(i));return r}),Array.prototype.reduce||(Array.prototype.reduce=function(t){var e,i=this.length>>>0,r=0;if(arguments.length>1)e=arguments[1];else for(;;){if(r in this){e=this[r++];break}if(++r>=i)throw new TypeError}for(;r<i;r++)r in this&&(e=t.call(null,e,this[r],r,this));return e}),fabric.util.array={fill:function(t,e){for(var i=t.length;i--;)t[i]=e;return t},invoke:function(t,i){for(var r=e.call(arguments,2),n=[],s=0,o=t.length;s<o;s++)n[s]=r.length?t[s][i].apply(t[s],r):t[s][i].call(t[s]);return n},min:function(e,i){return t(e,i,function(t,e){return t<e})},max:function(e,i){return t(e,i,function(t,e){return t>=e}
)}}}(),function(){function t(e,i,r){if(r)if(!fabric.isLikelyNode&&i instanceof Element)e=i;else if(i instanceof Array){e=[];for(var n=0,s=i.length;n<s;n++)e[n]=t({},i[n],r)}else if(i&&"object"==typeof i)for(var o in i)i.hasOwnProperty(o)&&(e[o]=t({},i[o],r));else e=i;else for(var o in i)e[o]=i[o];return e}fabric.util.object={extend:t,clone:function(e,i){return t({},e,i)}}}(),function(){String.prototype.trim||(String.prototype.trim=function(){return this.replace(/^[\s\xA0]+/,"").replace(/[\s\xA0]+$/,"")}),fabric.util.string={camelize:function(t){return t.replace(/-+(.)?/g,function(t,e){return e?e.toUpperCase():""})},capitalize:function(t,e){return t.charAt(0).toUpperCase()+(e?t.slice(1):t.slice(1).toLowerCase())},escapeXml:function(t){return t.replace(/&/g,"&").replace(/"/g,""").replace(/'/g,"'").replace(/</g,"<").replace(/>/g,">")}}}(),function(){var t=Array.prototype.slice,e=Function.prototype.apply,i=function(){};Function.prototype.bind||(Function.prototype.bin
d=function(r){var n,s=this,o=t.call(arguments,1);return n=o.length?function(){return e.call(s,this instanceof i?this:r,o.concat(t.call(arguments)))}:function(){return e.call(s,this instanceof i?this:r,arguments)},i.prototype=this.prototype,n.prototype=new i,n})}(),function(){function t(){}function e(t){for(var e=null,r=this;r.constructor.superclass;){var n=r.constructor.superclass.prototype[t];if(r[t]!==n){e=n;break}r=r.constructor.superclass.prototype}return e?arguments.length>1?e.apply(this,i.call(arguments,1)):e.call(this):console.log("tried to callSuper "+t+", method not found in prototype chain",this)}var i=Array.prototype.slice,r=function(){},n=function(){for(var t in{toString:1})if("toString"===t)return!1;return!0}(),s=function(t,e,i){for(var r in e)r in t.prototype&&"function"==typeof t.prototype[r]&&(e[r]+"").indexOf("callSuper")>-1?t.prototype[r]=function(t){return function(){var r=this.constructor.superclass;this.constructor.superclass=i;var n=e[t].apply(this,arguments);i
f(this.constructor.superclass=r,"initialize"!==t)return n}}(r):t.prototype[r]=e[r],n&&(e.toString!==Object.prototype.toString&&(t.prototype.toString=e.toString),e.valueOf!==Object.prototype.valueOf&&(t.prototype.valueOf=e.valueOf))};fabric.util.createClass=function(){function n(){this.initialize.apply(this,arguments)}var o=null,a=i.call(arguments,0);"function"==typeof a[0]&&(o=a.shift()),n.superclass=o,n.subclasses=[],o&&(t.prototype=o.prototype,n.prototype=new t,o.subclasses.push(n));for(var h=0,c=a.length;h<c;h++)s(n,a[h],o);return n.prototype.initialize||(n.prototype.initialize=r),n.prototype.constructor=n,n.prototype.callSuper=e,n}}(),function(){function t(t){var e,i,r=Array.prototype.slice.call(arguments,1),n=r.length;for(i=0;i<n;i++)if(e=typeof t[r[i]],!/^(?:function|object|unknown)$/.test(e))return!1;return!0}function e(t,e){return{handler:e,wrappedHandler:i(t,e)}}function i(t,e){return function(i){e.call(s(t),i||fabric.window.event)}}function r(t,e){return function(i){if(g[t
]&&g[t][e])for(var r=g[t][e],n=0,s=r.length;n<s;n++)r[n].call(this,i||fabric.window.event)}}function n(t,e,i){var r="touchend"===t.type?"changedTouches":"touches";return t[r]&&t[r][0]?t[r][0][e]-(t[r][0][e]-t[r][0][i])||t[i]:t[i]}var s,o,a="unknown",h=function(){var t=0;return function(e){return e.__uniqueID||(e.__uniqueID="uniqueID__"+t++)}}();!function(){var t={};s=function(e){return t[e]},o=function(e,i){t[e]=i}}();var c,l,u=t(fabric.document.documentElement,"addEventListener","removeEventListener")&&t(fabric.window,"addEventListener","removeEventListener"),f=t(fabric.document.documentElement,"attachEvent","detachEvent")&&t(fabric.window,"attachEvent","detachEvent"),d={},g={};u?(c=function(t,e,i,r){t&&t.addEventListener(e,i,!f&&r)},l=function(t,e,i,r){t&&t.removeEventListener(e,i,!f&&r)}):f?(c=function(t,i,r){if(t){var n=h(t);o(n,t),d[n]||(d[n]={}),d[n][i]||(d[n][i]=[]);var s=e(n,r);d[n][i].push(s),t.attachEvent("on"+i,s.wrappedHandler)}},l=function(t,e,i){if(t){var r,n=h(t);if(d
[n]&&d[n][e])for(var s=0,o=d[n][e].length;s<o;s++)(r=d[n][e][s])&&r.handler===i&&(t.detachEvent("on"+e,r.wrappedHandler),d[n][e][s]=null)}}):(c=function(t,e,i){if(t){var n=h(t);if(g[n]||(g[n]={}),!g[n][e]){g[n][e]=[];var s=t["on"+e];s&&g[n][e].push(s),t["on"+e]=r(n,e)}g[n][e].push(i)}},l=function(t,e,i){if(t){var r=h(t);if(g[r]&&g[r][e])for(var n=g[r][e],s=0,o=n.length;s<o;s++)n[s]===i&&n.splice(s,1)}}),fabric.util.addListener=c,fabric.util.removeListener=l;var p=function(t){return typeof t.clientX!==a?t.clientX:0},v=function(t){return typeof t.clientY!==a?t.clientY:0};fabric.isTouchSupported&&(p=function(t){return n(t,"pageX","clientX")},v=function(t){return n(t,"pageY","clientY")}),fabric.util.getPointer=function(t){t||(t=fabric.window.event);var e=t.target||(typeof t.srcElement!==a?t.srcElement:null),i=fabric.util.getScrollLeftTop(e);return{x:p(t)+i.left,y:v(t)+i.top}},fabric.util.object.extend(fabric.util,fabric.Observable)}(),function(){var t=fabric.document.createElement("div"
),e="string"==typeof t.style.opacity,i="string"==typeof t.style.filter,r=/alpha\s*\(\s*opacity\s*=\s*([^\)]+)\)/,n=function(t){return t};e?n=function(t,e){return t.style.opacity=e,t}:i&&(n=function(t,e){var i=t.style;return t.currentStyle&&!t.currentStyle.hasLayout&&(i.zoom=1),r.test(i.filter)?(e=e>=.9999?"":"alpha(opacity="+100*e+")",i.filter=i.filter.replace(r,e)):i.filter+=" alpha(opacity="+100*e+")",t}),fabric.util.setStyle=function(t,e){var i=t.style;if(!i)return t;if("string"==typeof e)return t.style.cssText+=";"+e,e.indexOf("opacity")>-1?n(t,e.match(/opacity:\s*(\d?\.?\d*)/)[1]):t;for(var r in e)"opacity"===r?n(t,e[r]):i["float"===r||"cssFloat"===r?void 0===i.styleFloat?"cssFloat":"styleFloat":r]=e[r];return t}}(),function(){function t(t,e){var i=fabric.document.createElement(t);for(var r in e)"class"===r?i.className=e[r]:"for"===r?i.htmlFor=e[r]:i.setAttribute(r,e[r]);return i}function e(t){for(var e=0,i=0,r=fabric.document.documentElement,n=fabric.document.body||{scrollLeft
:0,scrollTop:0};t&&(t.parentNode||t.host)&&((t=t.parentNode||t.host)===fabric.document?(e=n.scrollLeft||r.scrollLeft||0,i=n.scrollTop||r.scrollTop||0):(e+=t.scrollLeft||0,i+=t.scrollTop||0),1!==t.nodeType||"fixed"!==fabric.util.getElementStyle(t,"position")););return{left:e,top:i}}var i,r=Array.prototype.slice,n=function(t){return r.call(t,0)};try{i=n(fabric.document.childNodes)instanceof Array}catch(t){}i||(n=function(t){for(var e=new Array(t.length),i=t.length;i--;)e[i]=t[i];return e});var s;s=fabric.document.defaultView&&fabric.document.defaultView.getComputedStyle?function(t,e){var i=fabric.document.defaultView.getComputedStyle(t,null);return i?i[e]:void 0}:function(t,e){var i=t.style[e];return!i&&t.currentStyle&&(i=t.currentStyle[e]),i},function(){var t=fabric.document.documentElement.style,e="userSelect"in t?"userSelect":"MozUserSelect"in t?"MozUserSelect":"WebkitUserSelect"in t?"WebkitUserSelect":"KhtmlUserSelect"in t?"KhtmlUserSelect":"";fabric.util.makeElementUnselectable=f
unction(t){return void 0!==t.onselectstart&&(t.onselectstart=fabric.util.falseFunction),e?t.style[e]="none":"string"==typeof t.unselectable&&(t.unselectable="on"),t},fabric.util.makeElementSelectable=function(t){return void 0!==t.onselectstart&&(t.onselectstart=null),e?t.style[e]="":"string"==typeof t.unselectable&&(t.unselectable=""),t}}(),function(){fabric.util.getScript=function(t,e){var i=fabric.document.getElementsByTagName("head")[0],r=fabric.document.createElement("script"),n=!0;r.onload=r.onreadystatechange=function(t){if(n){if("string"==typeof this.readyState&&"loaded"!==this.readyState&&"complete"!==this.readyState)return;n=!1,e(t||fabric.window.event),r=r.onload=r.onreadystatechange=null}},r.src=t,i.appendChild(r)}}(),fabric.util.getById=function(t){return"string"==typeof t?fabric.document.getElementById(t):t},fabric.util.toArray=n,fabric.util.makeElement=t,fabric.util.addClass=function(t,e){t&&-1===(" "+t.className+" ").indexOf(" "+e+" ")&&(t.className+=(t.className?" ":
"")+e)},fabric.util.wrapElement=function(e,i,r){return"string"==typeof i&&(i=t(i,r)),e.parentNode&&e.parentNode.replaceChild(i,e),i.appendChild(e),i},fabric.util.getScrollLeftTop=e,fabric.util.getElementOffset=function(t){var i,r,n=t&&t.ownerDocument,o={left:0,top:0},a={left:0,top:0},h={borderLeftWidth:"left",borderTopWidth:"top",paddingLeft:"left",paddingTop:"top"};if(!n)return a;for(var c in h)a[h[c]]+=parseInt(s(t,c),10)||0;return i=n.documentElement,void 0!==t.getBoundingClientRect&&(o=t.getBoundingClientRect()),r=e(t),{left:o.left+r.left-(i.clientLeft||0)+a.left,top:o.top+r.top-(i.clientTop||0)+a.top}},fabric.util.getElementStyle=s}(),function(){function t(t,e){return t+(/\?/.test(t)?"&":"?")+e}function e(){}var i=function(){for(var t=[function(){return new ActiveXObject("Microsoft.XMLHTTP")},function(){return new ActiveXObject("Msxml2.XMLHTTP")},function(){return new ActiveXObject("Msxml2.XMLHTTP.3.0")},function(){return new XMLHttpRequest}],e=t.length;e--;)try{if(t[e]())retur
n t[e]}catch(t){}}();fabric.util.request=function(r,n){n||(n={});var s=n.method?n.method.toUpperCase():"GET",o=n.onComplete||function(){},a=i(),h=n.body||n.parameters;return a.onreadystatechange=function(){4===a.readyState&&(o(a),a.onreadystatechange=e)},"GET"===s&&(h=null,"string"==typeof n.parameters&&(r=t(r,n.parameters))),a.open(s,r,!0),"POST"!==s&&"PUT"!==s||a.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),a.send(h),a}}(),fabric.log=function(){},fabric.warn=function(){},"undefined"!=typeof console&&["log","warn"].forEach(function(t){void 0!==console[t]&&"function"==typeof console[t].apply&&(fabric[t]=function(){return console[t].apply(console,arguments)})}),function(){function t(){return!1}function e(){return i.apply(fabric.window,arguments)}var i=fabric.window.requestAnimationFrame||fabric.window.webkitRequestAnimationFrame||fabric.window.mozRequestAnimationFrame||fabric.window.oRequestAnimationFrame||fabric.window.msRequestAnimationFrame||function(t){fab
ric.window.setTimeout(t,1e3/60)};fabric.util.animate=function(i){e(function(r){i||(i={});var n,s=r||+new Date,o=i.duration||500,a=s+o,h=i.onChange||t,c=i.abort||t,l=i.onComplete||t,u=i.easing||function(t,e,i,r){return-i*Math.cos(t/r*(Math.PI/2))+i+e},f="startValue"in i?i.startValue:0,d="endValue"in i?i.endValue:100,g=i.byValue||d-f;i.onStart&&i.onStart(),function t(r){if(c())l(d,1,1);else{var p=(n=r||+new Date)>a?o:n-s,v=p/o,b=u(p,f,g,o),m=Math.abs((b-f)/g);h(b,m,v),n>a?i.onComplete&&i.onComplete():e(t)}}(s)})},fabric.util.requestAnimFrame=e}(),function(){function t(t,e,i){var r="rgba("+parseInt(t[0]+i*(e[0]-t[0]),10)+","+parseInt(t[1]+i*(e[1]-t[1]),10)+","+parseInt(t[2]+i*(e[2]-t[2]),10);return r+=","+(t&&e?parseFloat(t[3]+i*(e[3]-t[3])):1),r+=")"}fabric.util.animateColor=function(e,i,r,n){var s=new fabric.Color(e).getSource(),o=new fabric.Color(i).getSource();n=n||{},fabric.util.animate(fabric.util.object.extend(n,{duration:r||500,startValue:s,endValue:o,byValue:o,easing:function(
e,i,r,s){return t(i,r,n.colorEasing?n.colorEasing(e,s):1-Math.cos(e/s*(Math.PI/2)))}}))}}(),function(){function t(t,e,i,r){return t<Math.abs(e)?(t=e,r=i/4):r=0===e&&0===t?i/(2*Math.PI)*Math.asin(1):i/(2*Math.PI)*Math.asin(e/t),{a:t,c:e,p:i,s:r}}function e(t,e,i){return t.a*Math.pow(2,10*(e-=1))*Math.sin((e*i-t.s)*(2*Math.PI)/t.p)}function i(t,e,i,n){return i-r(n-t,0,i,n)+e}function r(t,e,i,r){return(t/=r)<1/2.75?i*(7.5625*t*t)+e:t<2/2.75?i*(7.5625*(t-=1.5/2.75)*t+.75)+e:t<2.5/2.75?i*(7.5625*(t-=2.25/2.75)*t+.9375)+e:i*(7.5625*(t-=2.625/2.75)*t+.984375)+e}fabric.util.ease={easeInQuad:function(t,e,i,r){return i*(t/=r)*t+e},easeOutQuad:function(t,e,i,r){return-i*(t/=r)*(t-2)+e},easeInOutQuad:function(t,e,i,r){return(t/=r/2)<1?i/2*t*t+e:-i/2*(--t*(t-2)-1)+e},easeInCubic:function(t,e,i,r){return i*(t/=r)*t*t+e},easeOutCubic:function(t,e,i,r){return i*((t=t/r-1)*t*t+1)+e},easeInOutCubic:function(t,e,i,r){return(t/=r/2)<1?i/2*t*t*t+e:i/2*((t-=2)*t*t+2)+e},easeInQuart:function(t,e,i,r){retu
rn i*(t/=r)*t*t*t+e},easeOutQuart:function(t,e,i,r){return-i*((t=t/r-1)*t*t*t-1)+e},easeInOutQuart:function(t,e,i,r){return(t/=r/2)<1?i/2*t*t*t*t+e:-i/2*((t-=2)*t*t*t-2)+e},easeInQuint:function(t,e,i,r){return i*(t/=r)*t*t*t*t+e},easeOutQuint:function(t,e,i,r){return i*((t=t/r-1)*t*t*t*t+1)+e},easeInOutQuint:function(t,e,i,r){return(t/=r/2)<1?i/2*t*t*t*t*t+e:i/2*((t-=2)*t*t*t*t+2)+e},easeInSine:function(t,e,i,r){return-i*Math.cos(t/r*(Math.PI/2))+i+e},easeOutSine:function(t,e,i,r){return i*Math.sin(t/r*(Math.PI/2))+e},easeInOutSine:function(t,e,i,r){return-i/2*(Math.cos(Math.PI*t/r)-1)+e},easeInExpo:function(t,e,i,r){return 0===t?e:i*Math.pow(2,10*(t/r-1))+e},easeOutExpo:function(t,e,i,r){return t===r?e+i:i*(1-Math.pow(2,-10*t/r))+e},easeInOutExpo:function(t,e,i,r){return 0===t?e:t===r?e+i:(t/=r/2)<1?i/2*Math.pow(2,10*(t-1))+e:i/2*(2-Math.pow(2,-10*--t))+e},easeInCirc:function(t,e,i,r){return-i*(Math.sqrt(1-(t/=r)*t)-1)+e},easeOutCirc:function(t,e,i,r){return i*Math.sqrt(1-(t=t/r-1)
*t)+e},easeInOutCirc:function(t,e,i,r){return(t/=r/2)<1?-i/2*(Math.sqrt(1-t*t)-1)+e:i/2*(Math.sqrt(1-(t-=2)*t)+1)+e},easeInElastic:function(i,r,n,s){var o=0,a=n;return 0===i?r:1==(i/=s)?r+n:(o||(o=.3*s),-e(t(a,n,o,1.70158),i,s)+r)},easeOutElastic:function(e,i,r,n){var s=0,o=r;if(0===e)return i;if(1==(e/=n))return i+r;s||(s=.3*n);var a=t(o,r,s,1.70158);return a.a*Math.pow(2,-10*e)*Math.sin((e*n-a.s)*(2*Math.PI)/a.p)+a.c+i},easeInOutElastic:function(i,r,n,s){var o=0,a=n;if(0===i)return r;if(2==(i/=s/2))return r+n;o||(o=s*(.3*1.5));var h=t(a,n,o,1.70158);return i<1?-.5*e(h,i,s)+r:h.a*Math.pow(2,-10*(i-=1))*Math.sin((i*s-h.s)*(2*Math.PI)/h.p)*.5+h.c+r},easeInBack:function(t,e,i,r,n){return void 0===n&&(n=1.70158),i*(t/=r)*t*((n+1)*t-n)+e},easeOutBack:function(t,e,i,r,n){return void 0===n&&(n=1.70158),i*((t=t/r-1)*t*((n+1)*t+n)+1)+e},easeInOutBack:function(t,e,i,r,n){return void 0===n&&(n=1.70158),(t/=r/2)<1?i/2*(t*t*((1+(n*=1.525))*t-n))+e:i/2*((t-=2)*t*((1+(n*=1.525))*t+n)+2)+e},easeIn
Bounce:i,easeOutBounce:r,easeInOutBounce:function(t,e,n,s){return t<s/2?.5*i(2*t,0,n,s)+e:.5*r(2*t-s,0,n,s)+.5*n+e}}}(),function(t){"use strict";function e(t){return t in O?O[t]:t}function i(t,e,i,r){var n,s="[object Array]"===Object.prototype.toString.call(e);return"fill"!==t&&"stroke"!==t||"none"!==e?"strokeDashArray"===t?e="none"===e?null:e.replace(/,/g," ").split(/\s+/).map(function(t){return parseFloat(t)}):"transformMatrix"===t?e=i&&i.transformMatrix?y(i.transformMatrix,p.parseTransformAttribute(e)):p.parseTransformAttribute(e):"visible"===t?(e="none"!==e&&"hidden"!==e,i&&!1===i.visible&&(e=!1)):"opacity"===t?(e=parseFloat(e),i&&void 0!==i.opacity&&(e*=i.opacity)):"originX"===t?e="start"===e?"left":"end"===e?"right":"center":n=s?e.map(_):_(e,r):e="",!s&&isNaN(n)?e:n}function r(t){for(var e in T)if(void 0!==t[T[e]]&&""!==t[e]){if(void 0===t[e]){if(!p.Object.prototype[e])continue;t[e]=p.Object.prototype[e]}if(0!==t[e].indexOf("url(")){var i=new p.Color(t[e]);t[e]=i.setAlpha(m(i.
getAlpha()*t[T[e]],2)).toRgba()}}return t}function n(t,e){for(var i,r,n=[],s=0;s<e.length;s++)i=e[s],r=t.getElementsByTagName(i),n=n.concat(Array.prototype.slice.call(r));return n}function s(t,e){var i,r;t.replace(/;\s*$/,"").split(";").forEach(function(t){var n=t.split(":");i=n[0].trim().toLowerCase(),r=n[1].trim(),e[i]=r})}function o(t,e){var i,r;for(var n in t)void 0!==t[n]&&(i=n.toLowerCase(),r=t[n],e[i]=r)}function a(t,e){var i={};for(var r in p.cssRules[e])if(h(t,r.split(" ")))for(var n in p.cssRules[e][r])i[n]=p.cssRules[e][r][n];return i}function h(t,e){var i,r=!0;return(i=l(t,e.pop()))&&e.length&&(r=c(t,e)),i&&r&&0===e.length}function c(t,e){for(var i,r=!0;t.parentNode&&1===t.parentNode.nodeType&&e.length;)r&&(i=e.pop()),r=l(t=t.parentNode,i);return 0===e.length}function l(t,e){var i,r=t.nodeName,n=t.getAttribute("class"),s=t.getAttribute("id");if(i=new RegExp("^"+r,"i"),e=e.replace(i,""),s&&e.length&&(i=new RegExp("#"+s+"(?![a-zA-Z\\-]+)","i"),e=e.replace(i,"")),n&&e.lengt
h)for(var o=(n=n.split(" ")).length;o--;)i=new RegExp("\\."+n[o]+"(?![a-zA-Z\\-]+)","i"),e=e.replace(i,"");return 0===e.length}function u(t,e){var i;if(t.getElementById&&(i=t.getElementById(e)),i)return i;var r,n,s=t.getElementsByTagName("*");for(n=0;n<s.length;n++)if(r=s[n],e===r.getAttribute("id"))return r}function f(t){for(var e=n(t,["use","svg:use"]),i=0;e.length&&i<e.length;){var r,s,o,a,h=e[i],c=h.getAttribute("xlink:href").substr(1),l=h.getAttribute("x")||0,f=h.getAttribute("y")||0,g=u(t,c).cloneNode(!0),p=(g.getAttribute("transform")||"")+" translate("+l+", "+f+")",v=e.length;if(d(g),/^svg$/i.test(g.nodeName)){var b=g.ownerDocument.createElement("g");for(s=0,a=(o=g.attributes).length;s<a;s++)r=o.item(s),b.setAttribute(r.nodeName,r.nodeValue);for(;g.firstChild;)b.appendChild(g.firstChild);g=b}for(s=0,a=(o=h.attributes).length;s<a;s++)"x"!==(r=o.item(s)).nodeName&&"y"!==r.nodeName&&"xlink:href"!==r.nodeName&&("transform"===r.nodeName?p=r.nodeValue+" "+p:g.setAttribute(r.nodeNa
me,r.nodeValue));g.setAttribute("transform",p),g.setAttribute("instantiated_by_use","1"),g.removeAttribute("id"),h.parentNode.replaceChild(g,h),e.length===v&&i++}}function d(t){var e,i,r,n,s=t.getAttribute("viewBox"),o=1,a=1,h=0,c=0,l=t.getAttribute("width"),u=t.getAttribute("height"),f=t.getAttribute("x")||0,d=t.getAttribute("y")||0,g=t.getAttribute("preserveAspectRatio")||"",v=!s||!C.test(t.nodeName)||!(s=s.match(j)),b=!l||!u||"100%"===l||"100%"===u,m=v&&b,y={},x="";if(y.width=0,y.height=0,y.toBeParsed=m,m)return y;if(v)return y.width=_(l),y.height=_(u),y;if(h=-parseFloat(s[1]),c=-parseFloat(s[2]),e=parseFloat(s[3]),i=parseFloat(s[4]),b?(y.width=e,y.height=i):(y.width=_(l),y.height=_(u),o=y.width/e,a=y.height/i),"none"!==(g=p.util.parsePreserveAspectRatioAttribute(g)).alignX&&(a=o=o>a?a:o),1===o&&1===a&&0===h&&0===c&&0===f&&0===d)return y;if((f||d)&&(x=" translate("+_(f)+" "+_(d)+") "),r=x+" matrix("+o+" 0 0 "+a+" "+h*o+" "+c*a+") ","svg"===t.nodeName){for(n=t.ownerDocument.create
Element("g");t.firstChild;)n.appendChild(t.firstChild);t.appendChild(n)}else r=(n=t).getAttribute("transform")+r;return n.setAttribute("transform",r),y}function g(t,e){for(;t&&(t=t.parentNode);)if(t.nodeName&&e.test(t.nodeName.replace("svg:",""))&&!t.getAttribute("instantiated_by_use"))return!0;return!1}var p=t.fabric||(t.fabric={}),v=p.util.object.extend,b=p.util.object.clone,m=p.util.toFixed,_=p.util.parseUnit,y=p.util.multiplyTransformMatrices,x=/^(path|circle|polygon|polyline|ellipse|rect|line|image|text)$/i,C=/^(symbol|image|marker|pattern|view|svg)$/i,S=/^(?:pattern|defs|symbol|metadata|clipPath|mask)$/i,w=/^(symbol|g|a|svg)$/i,O={cx:"left",x:"left",r:"radius",cy:"top",y:"top",display:"visible",visibility:"visible",transform:"transformMatrix","fill-opacity":"fillOpacity","fill-rule":"fillRule","font-family":"fontFamily","font-size":"fontSize","font-style":"fontStyle","font-weight":"fontWeight","stroke-dasharray":"strokeDashArray","stroke-linecap":"strokeLineCap","stroke-linejo
in":"strokeLineJoin","stroke-miterlimit":"strokeMiterLimit","stroke-opacity":"strokeOpacity","stroke-width":"strokeWidth","text-decoration":"textDecoration","text-anchor":"originX",opacity:"opacity"},T={stroke:"strokeOpacity",fill:"fillOpacity"};p.cssRules={},p.gradientDefs={},p.parseTransformAttribute=function(){function t(t,e){var i=Math.cos(e[0]),r=Math.sin(e[0]),n=0,s=0;3===e.length&&(n=e[1],s=e[2]),t[0]=i,t[1]=r,t[2]=-r,t[3]=i,t[4]=n-(i*n-r*s),t[5]=s-(r*n+i*s)}function e(t,e){var i=e[0],r=2===e.length?e[1]:e[0];t[0]=i,t[3]=r}function i(t,e,i){t[i]=Math.tan(p.util.degreesToRadians(e[0]))}function r(t,e){t[4]=e[0],2===e.length&&(t[5]=e[1])}var n=[1,0,0,1,0,0],s=p.reNum,o="(?:\\s+,?\\s*|,\\s*)",a="(?:"+("(?:(matrix)\\s*\\(\\s*("+s+")"+o+"("+s+")"+o+"("+s+")"+o+"("+s+")"+o+"("+s+")"+o+"("+s+")\\s*\\))")+"|"+("(?:(translate)\\s*\\(\\s*("+s+")(?:"+o+"("+s+"))?\\s*\\))")+"|"+("(?:(scale)\\s*\\(\\s*("+s+")(?:"+o+"("+s+"))?\\s*\\))")+"|"+("(?:(rotate)\\s*\\(\\s*("+s+")(?:"+o+"("+s+")"+o
+"("+s+"))?\\s*\\))")+"|"+("(?:(skewX)\\s*\\(\\s*("+s+")\\s*\\))")+"|"+("(?:(skewY)\\s*\\(\\s*("+s+")\\s*\\))")+")",h="^\\s*(?:"+("(?:"+a+"(?:"+o+"*"+a+")*)")+"?)\\s*$",c=new RegExp(h),l=new RegExp(a,"g");return function(s){var o=n.concat(),h=[];if(!s||s&&!c.test(s))return o;s.replace(l,function(s){var c=new RegExp(a).exec(s).filter(function(t){return!!t}),l=c[1],u=c.slice(2).map(parseFloat);switch(l){case"translate":r(o,u);break;case"rotate":u[0]=p.util.degreesToRadians(u[0]),t(o,u);break;case"scale":e(o,u);break;case"skewX":i(o,u,2);break;case"skewY":i(o,u,1);break;case"matrix":o=u}h.push(o.concat()),o=n.concat()});for(var u=h[0];h.length>1;)h.shift(),u=p.util.multiplyTransformMatrices(u,h[0]);return u}}();var j=new RegExp("^\\s*("+p.reNum+"+)\\s*,?\\s*("+p.reNum+"+)\\s*,?\\s*("+p.reNum+"+)\\s*,?\\s*("+p.reNum+"+)\\s*$");p.parseSVGDocument=function(t,e,i,r){if(t){f(t);var n=p.Object.__uid++,s=d(t),o=p.util.toArray(t.getElementsByTagName("*"));if(s.crossOrigin=r&&r.crossOrigin,s.sv
gUid=n,0===o.length&&p.isLikelyNode){for(var a=[],h=0,c=(o=t.selectNodes('//*[name(.)!="svg"]')).length;h<c;h++)a[h]=o[h];o=a}var l=o.filter(function(t){return d(t),x.test(t.nodeName.replace("svg:",""))&&!g(t,S)});!l||l&&!l.length?e&&e([],{}):(p.gradientDefs[n]=p.getGradientDefs(t),p.cssRules[n]=p.getCSSRules(t),p.parseElements(l,function(t){e&&e(t,s)},b(s),i,r))}};var k=new RegExp("(normal|italic)?\\s*(normal|small-caps)?\\s*(normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900)?\\s*("+p.reNum+"(?:px|cm|mm|em|pt|pc|in)*)(?:\\/(normal|"+p.reNum+"))?\\s+(.*)");v(p,{parseFontDeclaration:function(t,e){var i=t.match(k);if(i){var r=i[1],n=i[3],s=i[4],o=i[5],a=i[6];r&&(e.fontStyle=r),n&&(e.fontWeight=isNaN(parseFloat(n))?n:parseFloat(n)),s&&(e.fontSize=_(s)),a&&(e.fontFamily=a),o&&(e.lineHeight="normal"===o?1:o)}},getGradientDefs:function(t){var e,i,r,s=n(t,["linearGradient","radialGradient","svg:linearGradient","svg:radialGradient"]),o=0,a={},h={};for(o=s.length;o--;)r=(e=s[o])
.getAttribute("xlink:href"),i=e.getAttribute("id"),r&&(h[i]=r.substr(1)),a[i]=e;for(i in h){var c=a[h[i]].cloneNode(!0);for(e=a[i];c.firstChild;)e.appendChild(c.firstChild)}return a},parseAttributes:function(t,n,s){if(t){var o,h,c={};void 0===s&&(s=t.getAttribute("svgUid")),t.parentNode&&w.test(t.parentNode.nodeName)&&(c=p.parseAttributes(t.parentNode,n,s)),h=c&&c.fontSize||t.getAttribute("font-size")||p.Text.DEFAULT_SVG_FONT_SIZE;var l=n.reduce(function(e,i){return(o=t.getAttribute(i))&&(e[i]=o),e},{});l=v(l,v(a(t,s),p.parseStyleAttribute(t)));var u,f,d={};for(var g in l)f=i(u=e(g),l[g],c,h),d[u]=f;d&&d.font&&p.parseFontDeclaration(d.font,d);var b=v(c,d);return w.test(t.nodeName)?b:r(b)}},parseElements:function(t,e,i,r,n){new p.ElementsParser(t,e,i,r,n).parse()},parseStyleAttribute:function(t){var e={},i=t.getAttribute("style");return i?("string"==typeof i?s(i,e):o(i,e),e):e},parsePointsAttribute:function(t){if(!t)return null;var e,i,r=[];for(e=0,i=(t=(t=t.replace(/,/g," ").trim())
.split(/\s+/)).length;e<i;e+=2)r.push({x:parseFloat(t[e]),y:parseFloat(t[e+1])});return r},getCSSRules:function(t){for(var e=t.getElementsByTagName("style"),i={},r=0,n=e.length;r<n;r++){var s=e[r].textContent||e[r].text;""!==(s=s.replace(/\/\*[\s\S]*?\*\//g,"")).trim()&&s.match(/[^{]*\{[\s\S]*?\}/g).map(function(t){return t.trim()}).forEach(function(t){for(var e=t.match(/([\s\S]*?)\s*\{([^}]*)\}/),r={},n=e[2].trim().replace(/;$/,"").split(/\s*;\s*/),s=0,o=n.length;s<o;s++){var a=n[s].split(/\s*:\s*/),h=a[0],c=a[1];r[h]=c}(t=e[1]).split(",").forEach(function(t){""!==(t=t.replace(/^svg/i,"").trim())&&(i[t]?p.util.object.extend(i[t],r):i[t]=p.util.object.clone(r))})})}return i},loadSVGFromURL:function(t,e,i,r){t=t.replace(/^\n\s*/,"").trim(),new p.util.request(t,{method:"get",onComplete:function(t){var n=t.responseXML;n&&!n.documentElement&&p.window.ActiveXObject&&t.responseText&&((n=new ActiveXObject("Microsoft.XMLDOM")).async="false",n.loadXML(t.responseText.replace(/<!DOCTYPE[\s\S]*
?(\[[\s\S]*\])*?>/i,""))),n&&n.documentElement||e&&e(null),p.parseSVGDocument(n.documentElement,function(t,i){e&&e(t,i)},i,r)}})},loadSVGFromString:function(t,e,i,r){t=t.trim();var n;if("undefined"!=typeof DOMParser){var s=new DOMParser;s&&s.parseFromString&&(n=s.parseFromString(t,"text/xml"))}else p.window.ActiveXObject&&((n=new ActiveXObject("Microsoft.XMLDOM")).async="false",n.loadXML(t.replace(/<!DOCTYPE[\s\S]*?(\[[\s\S]*\])*?>/i,"")));p.parseSVGDocument(n.documentElement,function(t,i){e(t,i)},i,r)}})}("undefined"!=typeof exports?exports:this),fabric.ElementsParser=function(t,e,i,r,n){this.elements=t,this.callback=e,this.options=i,this.reviver=r,this.svgUid=i&&i.svgUid||0,this.parsingOptions=n},fabric.ElementsParser.prototype.parse=function(){this.instances=new Array(this.elements.length),this.numElements=this.elements.length,this.createObjects()},fabric.ElementsParser.prototype.createObjects=function(){for(var t=0,e=this.elements.length;t<e;t++)this.elements[t].setAttribute("sv
gUid",this.svgUid),function(t,e){setTimeout(function(){t.createObject(t.elements[e],e)},0)}(this,t)},fabric.ElementsParser.prototype.createObject=function(t,e){var i=fabric[fabric.util.string.capitalize(t.tagName.replace("svg:",""))];if(i&&i.fromElement)try{this._createObject(i,t,e)}catch(t){fabric.log(t)}else this.checkIfDone()},fabric.ElementsParser.prototype._createObject=function(t,e,i){if(t.async)t.fromElement(e,this.createCallback(i,e),this.options);else{var r=t.fromElement(e,this.options);this.resolveGradient(r,"fill"),this.resolveGradient(r,"stroke"),this.reviver&&this.reviver(e,r),this.instances[i]=r,this.checkIfDone()}},fabric.ElementsParser.prototype.createCallback=function(t,e){var i=this;return function(r){i.resolveGradient(r,"fill"),i.resolveGradient(r,"stroke"),i.reviver&&i.reviver(e,r),i.instances[t]=r,i.checkIfDone()}},fabric.ElementsParser.prototype.resolveGradient=function(t,e){var i=t.get(e);if(/^url\(/.test(i)){var r=i.slice(5,i.length-1);fabric.gradientDefs[thi
s.svgUid][r]&&t.set(e,fabric.Gradient.fromElement(fabric.gradientDefs[this.svgUid][r],t))}},fabric.ElementsParser.prototype.checkIfDone=function(){0==--this.numElements&&(this.instances=this.instances.filter(function(t){return null!=t}),this.callback(this.instances))},function(t){"use strict";function e(t,e){this.x=t,this.y=e}var i=t.fabric||(t.fabric={});i.Point?i.warn("fabric.Point is already defined"):(i.Point=e,e.prototype={type:"point",constructor:e,add:function(t){return new e(this.x+t.x,this.y+t.y)},addEquals:function(t){return this.x+=t.x,this.y+=t.y,this},scalarAdd:function(t){return new e(this.x+t,this.y+t)},scalarAddEquals:function(t){return this.x+=t,this.y+=t,this},subtract:function(t){return new e(this.x-t.x,this.y-t.y)},subtractEquals:function(t){return this.x-=t.x,this.y-=t.y,this},scalarSubtract:function(t){return new e(this.x-t,this.y-t)},scalarSubtractEquals:function(t){return this.x-=t,this.y-=t,this},multiply:function(t){return new e(this.x*t,this.y*t)},multiply
Equals:function(t){return this.x*=t,this.y*=t,this},divide:function(t){return new e(this.x/t,this.y/t)},divideEquals:function(t){return this.x/=t,this.y/=t,this},eq:function(t){return this.x===t.x&&this.y===t.y},lt:function(t){return this.x<t.x&&this.y<t.y},lte:function(t){return this.x<=t.x&&this.y<=t.y},gt:function(t){return this.x>t.x&&this.y>t.y},gte:function(t){return this.x>=t.x&&this.y>=t.y},lerp:function(t,i){return void 0===i&&(i=.5),i=Math.max(Math.min(1,i),0),new e(this.x+(t.x-this.x)*i,this.y+(t.y-this.y)*i)},distanceFrom:function(t){var e=this.x-t.x,i=this.y-t.y;return Math.sqrt(e*e+i*i)},midPointFrom:function(t){return this.lerp(t)},min:function(t){return new e(Math.min(this.x,t.x),Math.min(this.y,t.y))},max:function(t){return new e(Math.max(this.x,t.x),Math.max(this.y,t.y))},toString:function(){return this.x+","+this.y},setXY:function(t,e){return this.x=t,this.y=e,this},setX:function(t){return this.x=t,this},setY:function(t){return this.y=t,this},setFromPoint:function
(t){return this.x=t.x,this.y=t.y,this},swap:function(t){var e=this.x,i=this.y;this.x=t.x,this.y=t.y,t.x=e,t.y=i},clone:function(){return new e(this.x,this.y)}})}("undefined"!=typeof exports?exports:this),function(t){"use strict";function e(t){this.status=t,this.points=[]}var i=t.fabric||(t.fabric={});i.Intersection?i.warn("fabric.Intersection is already defined"):(i.Intersection=e,i.Intersection.prototype={constructor:e,appendPoint:function(t){return this.points.push(t),this},appendPoints:function(t){return this.points=this.points.concat(t),this}},i.Intersection.intersectLineLine=function(t,r,n,s){var o,a=(s.x-n.x)*(t.y-n.y)-(s.y-n.y)*(t.x-n.x),h=(r.x-t.x)*(t.y-n.y)-(r.y-t.y)*(t.x-n.x),c=(s.y-n.y)*(r.x-t.x)-(s.x-n.x)*(r.y-t.y);if(0!==c){var l=a/c,u=h/c;0<=l&&l<=1&&0<=u&&u<=1?(o=new e("Intersection")).appendPoint(new i.Point(t.x+l*(r.x-t.x),t.y+l*(r.y-t.y))):o=new e}else o=new e(0===a||0===h?"Coincident":"Parallel");return o},i.Intersection.intersectLinePolygon=function(t,i,r){for(va
r n,s,o,a=new e,h=r.length,c=0;c<h;c++)n=r[c],s=r[(c+1)%h],o=e.intersectLineLine(t,i,n,s),a.appendPoints(o.points);return a.points.length>0&&(a.status="Intersection"),a},i.Intersection.intersectPolygonPolygon=function(t,i){for(var r=new e,n=t.length,s=0;s<n;s++){var o=t[s],a=t[(s+1)%n],h=e.intersectLinePolygon(o,a,i);r.appendPoints(h.points)}return r.points.length>0&&(r.status="Intersection"),r},i.Intersection.intersectPolygonRectangle=function(t,r,n){var s=r.min(n),o=r.max(n),a=new i.Point(o.x,s.y),h=new i.Point(s.x,o.y),c=e.intersectLinePolygon(s,a,t),l=e.intersectLinePolygon(a,o,t),u=e.intersectLinePolygon(o,h,t),f=e.intersectLinePolygon(h,s,t),d=new e;return d.appendPoints(c.points),d.appendPoints(l.points),d.appendPoints(u.points),d.appendPoints(f.points),d.points.length>0&&(d.status="Intersection"),d})}("undefined"!=typeof exports?exports:this),function(t){"use strict";function e(t){t?this._tryParsingColor(t):this.setSource([0,0,0,1])}function i(t,e,i){return i<0&&(i+=1),i>1&&
(i-=1),i<1/6?t+6*(e-t)*i:i<.5?e:i<2/3?t+(e-t)*(2/3-i)*6:t}var r=t.fabric||(t.fabric={});r.Color?r.warn("fabric.Color is already defined."):(r.Color=e,r.Color.prototype={_tryParsingColor:function(t){var i;t in e.colorNameMap&&(t=e.colorNameMap[t]),"transparent"===t&&(i=[255,255,255,0]),i||(i=e.sourceFromHex(t)),i||(i=e.sourceFromRgb(t)),i||(i=e.sourceFromHsl(t)),i||(i=[0,0,0,1]),i&&this.setSource(i)},_rgbToHsl:function(t,e,i){t/=255,e/=255,i/=255;var n,s,o,a=r.util.array.max([t,e,i]),h=r.util.array.min([t,e,i]);if(o=(a+h)/2,a===h)n=s=0;else{var c=a-h;switch(s=o>.5?c/(2-a-h):c/(a+h),a){case t:n=(e-i)/c+(e<i?6:0);break;case e:n=(i-t)/c+2;break;case i:n=(t-e)/c+4}n/=6}return[Math.round(360*n),Math.round(100*s),Math.round(100*o)]},getSource:function(){return this._source},setSource:function(t){this._source=t},toRgb:function(){var t=this.getSource();return"rgb("+t[0]+","+t[1]+","+t[2]+")"},toRgba:function(){var t=this.getSource();return"rgba("+t[0]+","+t[1]+","+t[2]+","+t[3]+")"},toHsl:fu
nction(){var t=this.getSource(),e=this._rgbToHsl(t[0],t[1],t[2]);return"hsl("+e[0]+","+e[1]+"%,"+e[2]+"%)"},toHsla:function(){var t=this.getSource(),e=this._rgbToHsl(t[0],t[1],t[2]);return"hsla("+e[0]+","+e[1]+"%,"+e[2]+"%,"+t[3]+")"},toHex:function(){var t,e,i,r=this.getSource();return t=r[0].toString(16),t=1===t.length?"0"+t:t,e=r[1].toString(16),e=1===e.length?"0"+e:e,i=r[2].toString(16),i=1===i.length?"0"+i:i,t.toUpperCase()+e.toUpperCase()+i.toUpperCase()},toHexa:function(){var t;return t=255*this.getSource()[3],t=t.toString(16),t=1===t.length?"0"+t:t,this.toHex()+t.toUpperCase()},getAlpha:function(){return this.getSource()[3]},setAlpha:function(t){var e=this.getSource();return e[3]=t,this.setSource(e),this},toGrayscale:function(){var t=this.getSource(),e=parseInt((.3*t[0]+.59*t[1]+.11*t[2]).toFixed(0),10),i=t[3];return this.setSource([e,e,e,i]),this},toBlackWhite:function(t){var e=this.getSource(),i=(.3*e[0]+.59*e[1]+.11*e[2]).toFixed(0),r=e[3];return t=t||127,i=Number(i)<Numb
er(t)?0:255,this.setSource([i,i,i,r]),this},overlayWith:function(t){t instanceof e||(t=new e(t));for(var i=[],r=this.getAlpha(),n=this.getSource(),s=t.getSource(),o=0;o<3;o++)i.push(Math.round(.5*n[o]+.5*s[o]));return i[3]=r,this.setSource(i),this}},r.Color.reRGBa=/^rgba?\(\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*(?:\s*,\s*((?:\d*\.?\d+)?)\s*)?\)$/,r.Color.reHSLa=/^hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}\%)\s*,\s*(\d{1,3}\%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)$/,r.Color.reHex=/^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i,r.Color.colorNameMap={aqua:"#00FFFF",black:"#000000",blue:"#0000FF",fuchsia:"#FF00FF",gray:"#808080",grey:"#808080",green:"#008000",lime:"#00FF00",maroon:"#800000",navy:"#000080",olive:"#808000",orange:"#FFA500",purple:"#800080",red:"#FF0000",silver:"#C0C0C0",teal:"#008080",white:"#FFFFFF",yellow:"#FFFF00"},r.Color.fromRgb=function(t){return e.fromSource(e.sourceFromRgb(t))},r.Color.sourceFromRgb=function(t){var i=t.
match(e.reRGBa);if(i){var r=parseInt(i[1],10)/(/%$/.test(i[1])?100:1)*(/%$/.test(i[1])?255:1),n=parseInt(i[2],10)/(/%$/.test(i[2])?100:1)*(/%$/.test(i[2])?255:1),s=parseInt(i[3],10)/(/%$/.test(i[3])?100:1)*(/%$/.test(i[3])?255:1);return[parseInt(r,10),parseInt(n,10),parseInt(s,10),i[4]?parseFloat(i[4]):1]}},r.Color.fromRgba=e.fromRgb,r.Color.fromHsl=function(t){return e.fromSource(e.sourceFromHsl(t))},r.Color.sourceFromHsl=function(t){var r=t.match(e.reHSLa);if(r){var n,s,o,a=(parseFloat(r[1])%360+360)%360/360,h=parseFloat(r[2])/(/%$/.test(r[2])?100:1),c=parseFloat(r[3])/(/%$/.test(r[3])?100:1);if(0===h)n=s=o=c;else{var l=c<=.5?c*(h+1):c+h-c*h,u=2*c-l;n=i(u,l,a+1/3),s=i(u,l,a),o=i(u,l,a-1/3)}return[Math.round(255*n),Math.round(255*s),Math.round(255*o),r[4]?parseFloat(r[4]):1]}},r.Color.fromHsla=e.fromHsl,r.Color.fromHex=function(t){return e.fromSource(e.sourceFromHex(t))},r.Color.sourceFromHex=function(t){if(t.match(e.reHex)){var i=t.slice(t.indexOf("#")+1),r=3===i.length||4===i.len
gth,n=8===i.length||4===i.length,s=r?i.charAt(0)+i.charAt(0):i.substring(0,2),o=r?i.charAt(1)+i.charAt(1):i.substring(2,4),a=r?i.charAt(2)+i.charAt(2):i.substring(4,6),h=n?r?i.charAt(3)+i.charAt(3):i.substring(6,8):"FF";return[parseInt(s,16),parseInt(o,16),parseInt(a,16),parseFloat((parseInt(h,16)/255).toFixed(2))]}},r.Color.fromSource=function(t){var i=new e;return i.setSource(t),i})}("undefined"!=typeof exports?exports:this),function(){function t(t){var e,i,r,n=t.getAttribute("style"),s=t.getAttribute("offset")||0;if(s=parseFloat(s)/(/%$/.test(s)?100:1),s=s<0?0:s>1?1:s,n){var o=n.split(/\s*;\s*/);""===o[o.length-1]&&o.pop();for(var a=o.length;a--;){var h=o[a].split(/\s*:\s*/),c=h[0].trim(),l=h[1].trim();"stop-color"===c?e=l:"stop-opacity"===c&&(r=l)}}return e||(e=t.getAttribute("stop-color")||"rgb(0,0,0)"),r||(r=t.getAttribute("stop-opacity")),e=new fabric.Color(e),i=e.getAlpha(),r=isNaN(parseFloat(r))?1:parseFloat(r),r*=i,{offset:s,color:e.toRgb(),opacity:r}}function e(t){return{
x1:t.getAttribute("x1")||0,y1:t.getAttribute("y1")||0,x2:t.getAttribute("x2")||"100%",y2:t.getAttribute("y2")||0}}function i(t){return{x1:t.getAttribute("fx")||t.getAttribute("cx")||"50%",y1:t.getAttribute("fy")||t.getAttribute("cy")||"50%",r1:0,x2:t.getAttribute("cx")||"50%",y2:t.getAttribute("cy")||"50%",r2:t.getAttribute("r")||"50%"}}function r(t,e,i){var r,n=0,s=1,o="";for(var a in e)"Infinity"===e[a]?e[a]=1:"-Infinity"===e[a]&&(e[a]=0),r=parseFloat(e[a],10),s="string"==typeof e[a]&&/^\d+%$/.test(e[a])?.01:1,"x1"===a||"x2"===a||"r2"===a?(s*="objectBoundingBox"===i?t.width:1,n="objectBoundingBox"===i?t.left||0:0):"y1"!==a&&"y2"!==a||(s*="objectBoundingBox"===i?t.height:1,n="objectBoundingBox"===i?t.top||0:0),e[a]=r*s+n;if("ellipse"===t.type&&null!==e.r2&&"objectBoundingBox"===i&&t.rx!==t.ry){var h=t.ry/t.rx;o=" scale(1, "+h+")",e.y1&&(e.y1/=h),e.y2&&(e.y2/=h)}return o}var n=fabric.util.object.clone;fabric.Gradient=fabric.util.createClass({offsetX:0,offsetY:0,initialize:function(t
){t||(t={});var e={};this.id=fabric.Object.__uid++,this.type=t.type||"linear",e={x1:t.coords.x1||0,y1:t.coords.y1||0,x2:t.coords.x2||0,y2:t.coords.y2||0},"radial"===this.type&&(e.r1=t.coords.r1||0,e.r2=t.coords.r2||0),this.coords=e,this.colorStops=t.colorStops.slice(),t.gradientTransform&&(this.gradientTransform=t.gradientTransform),this.offsetX=t.offsetX||this.offsetX,this.offsetY=t.offsetY||this.offsetY},addColorStop:function(t){for(var e in t){var i=new fabric.Color(t[e]);this.colorStops.push({offset:parseFloat(e),color:i.toRgb(),opacity:i.getAlpha()})}return this},toObject:function(t){var e={type:this.type,coords:this.coords,colorStops:this.colorStops,offsetX:this.offsetX,offsetY:this.offsetY,gradientTransform:this.gradientTransform?this.gradientTransform.concat():this.gradientTransform};return fabric.util.populateWithProperties(this,e,t),e},toSVG:function(t){var e,i,r=n(this.coords,!0),s=n(this.colorStops,!0),o=r.r1>r.r2;if(s.sort(function(t,e){return t.offset-e.offset}),!t.gro
up||"path-group"!==t.group.type)for(var a in r)"x1"===a||"x2"===a?r[a]+=this.offsetX-t.width/2:"y1"!==a&&"y2"!==a||(r[a]+=this.offsetY-t.height/2);if(i='id="SVGID_'+this.id+'" gradientUnits="userSpaceOnUse"',this.gradientTransform&&(i+=' gradientTransform="matrix('+this.gradientTransform.join(" ")+')" '),"linear"===this.type?e=["<linearGradient ",i,' x1="',r.x1,'" y1="',r.y1,'" x2="',r.x2,'" y2="',r.y2,'">\n']:"radial"===this.type&&(e=["<radialGradient ",i,' cx="',o?r.x1:r.x2,'" cy="',o?r.y1:r.y2,'" r="',o?r.r1:r.r2,'" fx="',o?r.x2:r.x1,'" fy="',o?r.y2:r.y1,'">\n']),"radial"===this.type){if(o){(s=s.concat()).reverse();for(l=0;l<s.length;l++)s[l].offset=1-s[l].offset}var h=Math.min(r.r1,r.r2);if(h>0)for(var c=h/Math.max(r.r1,r.r2),l=0;l<s.length;l++)s[l].offset+=c*(1-s[l].offset)}for(l=0;l<s.length;l++){var u=s[l];e.push("<stop ",'offset="',100*u.offset+"%",'" style="stop-color:',u.color,null!==u.opacity?";stop-opacity: "+u.opacity:";",'"/>\n')}return e.push("linear"===this.type?"</l
inearGradient>\n":"</radialGradient>\n"),e.join("")},toLive:function(t,e){var i,r,n=fabric.util.object.clone(this.coords);if(this.type){if(e.group&&"path-group"===e.group.type)for(r in n)"x1"===r||"x2"===r?n[r]+=-this.offsetX+e.width/2:"y1"!==r&&"y2"!==r||(n[r]+=-this.offsetY+e.height/2);"linear"===this.type?i=t.createLinearGradient(n.x1,n.y1,n.x2,n.y2):"radial"===this.type&&(i=t.createRadialGradient(n.x1,n.y1,n.r1,n.x2,n.y2,n.r2));for(var s=0,o=this.colorStops.length;s<o;s++){var a=this.colorStops[s].color,h=this.colorStops[s].opacity,c=this.colorStops[s].offset;void 0!==h&&(a=new fabric.Color(a).setAlpha(h).toRgba()),i.addColorStop(c,a)}return i}}}),fabric.util.object.extend(fabric.Gradient,{fromElement:function(n,s){var o,a,h,c=n.getElementsByTagName("stop"),l=n.getAttribute("gradientUnits")||"objectBoundingBox",u=n.getAttribute("gradientTransform"),f=[];"linear"===(o="linearGradient"===n.nodeName||"LINEARGRADIENT"===n.nodeName?"linear":"radial")?a=e(n):"radial"===o&&(a=i(n));for
(var d=c.length;d--;)f.push(t(c[d]));h=r(s,a,l);var g=new fabric.Gradient({type:o,coords:a,colorStops:f,offsetX:-s.left,offsetY:-s.top});return(u||""!==h)&&(g.gradientTransform=fabric.parseTransformAttribute((u||"")+h)),g},forObject:function(t,e){return e||(e={}),r(t,e.coords,"userSpaceOnUse"),new fabric.Gradient(e)}})}(),function(){"use strict";var t=fabric.util.toFixed;fabric.Pattern=fabric.util.createClass({repeat:"repeat",offsetX:0,offsetY:0,initialize:function(t,e){if(t||(t={}),this.id=fabric.Object.__uid++,this.setOptions(t),!t.source||t.source&&"string"!=typeof t.source)e&&e(this);else if(void 0!==fabric.util.getFunctionBody(t.source))this.source=new Function(fabric.util.getFunctionBody(t.source)),e&&e(this);else{var i=this;this.source=fabric.util.createImage(),fabric.util.loadImage(t.source,function(t){i.source=t,e&&e(i)})}},toObject:function(e){var i,r,n=fabric.Object.NUM_FRACTION_DIGITS;return"function"==typeof this.source?i=String(this.source):"string"==typeof this.source
.src?i=this.source.src:"object"==typeof this.source&&this.source.toDataURL&&(i=this.source.toDataURL()),r={type:"pattern",source:i,repeat:this.repeat,offsetX:t(this.offsetX,n),offsetY:t(this.offsetY,n)},fabric.util.populateWithProperties(this,r,e),r},toSVG:function(t){var e="function"==typeof this.source?this.source():this.source,i=e.width/t.width,r=e.height/t.height,n=this.offsetX/t.width,s=this.offsetY/t.height,o="";return"repeat-x"!==this.repeat&&"no-repeat"!==this.repeat||(r=1),"repeat-y"!==this.repeat&&"no-repeat"!==this.repeat||(i=1),e.src?o=e.src:e.toDataURL&&(o=e.toDataURL()),'<pattern id="SVGID_'+this.id+'" x="'+n+'" y="'+s+'" width="'+i+'" height="'+r+'">\n<image x="0" y="0" width="'+e.width+'" height="'+e.height+'" xlink:href="'+o+'"></image>\n</pattern>\n'},setOptions:function(t){for(var e in t)this[e]=t[e]},toLive:function(t){var e="function"==typeof this.source?this.source():this.source;if(!e)return"";if(void 0!==e.src){if(!e.complete)return"";if(0===e.naturalWidth||0=
==e.naturalHeight)return""}return t.createPattern(e,this.repeat)}})}(),function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.util.toFixed;e.Shadow?e.warn("fabric.Shadow is already defined."):(e.Shadow=e.util.createClass({color:"rgb(0,0,0)",blur:0,offsetX:0,offsetY:0,affectStroke:!1,includeDefaultValues:!0,initialize:function(t){"string"==typeof t&&(t=this._parseShadow(t));for(var i in t)this[i]=t[i];this.id=e.Object.__uid++},_parseShadow:function(t){var i=t.trim(),r=e.Shadow.reOffsetsAndBlur.exec(i)||[];return{color:(i.replace(e.Shadow.reOffsetsAndBlur,"")||"rgb(0,0,0)").trim(),offsetX:parseInt(r[1],10)||0,offsetY:parseInt(r[2],10)||0,blur:parseInt(r[3],10)||0}},toString:function(){return[this.offsetX,this.offsetY,this.blur,this.color].join("px ")},toSVG:function(t){var r=40,n=40,s=e.Object.NUM_FRACTION_DIGITS,o=e.util.rotateVector({x:this.offsetX,y:this.offsetY},e.util.degreesToRadians(-t.angle));return t.width&&t.height&&(r=100*i((Math.abs(o.x)+this.blur)/t.width,s)+20,n=100*
i((Math.abs(o.y)+this.blur)/t.height,s)+20),t.flipX&&(o.x*=-1),t.flipY&&(o.y*=-1),'<filter id="SVGID_'+this.id+'" y="-'+n+'%" height="'+(100+2*n)+'%" x="-'+r+'%" width="'+(100+2*r)+'%" >\n\t<feGaussianBlur in="SourceAlpha" stdDeviation="'+i(this.blur?this.blur/2:0,s)+'"></feGaussianBlur>\n\t<feOffset dx="'+i(o.x,s)+'" dy="'+i(o.y,s)+'" result="oBlur" ></feOffset>\n\t<feFlood flood-color="'+this.color+'"/>\n\t<feComposite in2="oBlur" operator="in" />\n\t<feMerge>\n\t\t<feMergeNode></feMergeNode>\n\t\t<feMergeNode in="SourceGraphic"></feMergeNode>\n\t</feMerge>\n</filter>\n'},toObject:function(){if(this.includeDefaultValues)return{color:this.color,blur:this.blur,offsetX:this.offsetX,offsetY:this.offsetY,affectStroke:this.affectStroke};var t={},i=e.Shadow.prototype;return["color","blur","offsetX","offsetY","affectStroke"].forEach(function(e){this[e]!==i[e]&&(t[e]=this[e])},this),t}}),e.Shadow.reOffsetsAndBlur=/(?:\s|^)(-?\d+(?:px)?(?:\s?|$))?(-?\d+(?:px)?(?:\s?|$))?(\d+(?:px)?)?(?:\s?|
$)(?:$|\s)/)}("undefined"!=typeof exports?exports:this),function(){"use strict";if(fabric.StaticCanvas)fabric.warn("fabric.StaticCanvas is already defined.");else{var t=fabric.util.object.extend,e=fabric.util.getElementOffset,i=fabric.util.removeFromArray,r=fabric.util.toFixed,n=fabric.util.transformPoint,s=fabric.util.invertTransform,o=new Error("Could not initialize `canvas` element");fabric.StaticCanvas=fabric.util.createClass(fabric.CommonMethods,{initialize:function(t,e){e||(e={}),this._initStatic(t,e)},backgroundColor:"",backgroundImage:null,overlayColor:"",overlayImage:null,includeDefaultValues:!0,stateful:!1,renderOnAddRemove:!0,clipTo:null,controlsAboveOverlay:!1,allowTouchScrolling:!1,imageSmoothingEnabled:!0,viewportTransform:fabric.iMatrix.concat(),backgroundVpt:!0,overlayVpt:!0,onBeforeScaleRotate:function(){},enableRetinaScaling:!0,vptCoords:{},skipOffscreen:!1,_initStatic:function(t,e){var i=fabric.StaticCanvas.prototype.renderAll.bind(this);this._objects=[],this._cre
ateLowerCanvas(t),this._initOptions(e),this._setImageSmoothing(),this.interactive||this._initRetinaScaling(),e.overlayImage&&this.setOverlayImage(e.overlayImage,i),e.backgroundImage&&this.setBackgroundImage(e.backgroundImage,i),e.backgroundColor&&this.setBackgroundColor(e.backgroundColor,i),e.overlayColor&&this.setOverlayColor(e.overlayColor,i),this.calcOffset()},_isRetinaScaling:function(){return 1!==fabric.devicePixelRatio&&this.enableRetinaScaling},getRetinaScaling:function(){return this._isRetinaScaling()?fabric.devicePixelRatio:1},_initRetinaScaling:function(){this._isRetinaScaling()&&(this.lowerCanvasEl.setAttribute("width",this.width*fabric.devicePixelRatio),this.lowerCanvasEl.setAttribute("height",this.height*fabric.devicePixelRatio),this.contextContainer.scale(fabric.devicePixelRatio,fabric.devicePixelRatio))},calcOffset:function(){return this._offset=e(this.lowerCanvasEl),this},setOverlayImage:function(t,e,i){return this.__setBgOverlayImage("overlayImage",t,e,i)},setBackgr
oundImage:function(t,e,i){return this.__setBgOverlayImage("backgroundImage",t,e,i)},setOverlayColor:function(t,e){return this.__setBgOverlayColor("overlayColor",t,e)},setBackgroundColor:function(t,e){return this.__setBgOverlayColor("backgroundColor",t,e)},_setImageSmoothing:function(){var t=this.getContext();t.imageSmoothingEnabled=t.imageSmoothingEnabled||t.webkitImageSmoothingEnabled||t.mozImageSmoothingEnabled||t.msImageSmoothingEnabled||t.oImageSmoothingEnabled,t.imageSmoothingEnabled=this.imageSmoothingEnabled},__setBgOverlayImage:function(t,e,i,r){return"string"==typeof e?fabric.util.loadImage(e,function(e){e&&(this[t]=new fabric.Image(e,r)),i&&i(e)},this,r&&r.crossOrigin):(r&&e.setOptions(r),this[t]=e,i&&i(e)),this},__setBgOverlayColor:function(t,e,i){return this[t]=e,this._initGradient(e,t),this._initPattern(e,t,i),this},_createCanvasElement:function(t){var e=fabric.util.createCanvasElement(t);if(e.style||(e.style={}),!e)throw o;if(void 0===e.getContext)throw o;return e},_in
itOptions:function(t){this._setOptions(t),this.width=this.width||parseInt(this.lowerCanvasEl.width,10)||0,this.height=this.height||parseInt(this.lowerCanvasEl.height,10)||0,this.lowerCanvasEl.style&&(this.lowerCanvasEl.width=this.width,this.lowerCanvasEl.height=this.height,this.lowerCanvasEl.style.width=this.width+"px",this.lowerCanvasEl.style.height=this.height+"px",this.viewportTransform=this.viewportTransform.slice())},_createLowerCanvas:function(t){this.lowerCanvasEl=fabric.util.getById(t)||this._createCanvasElement(t),fabric.util.addClass(this.lowerCanvasEl,"lower-canvas"),this.interactive&&this._applyCanvasStyle(this.lowerCanvasEl),this.contextContainer=this.lowerCanvasEl.getContext("2d")},getWidth:function(){return this.width},getHeight:function(){return this.height},setWidth:function(t,e){return this.setDimensions({width:t},e)},setHeight:function(t,e){return this.setDimensions({height:t},e)},setDimensions:function(t,e){var i;e=e||{};for(var r in t)i=t[r],e.cssOnly||(this._se
tBackstoreDimension(r,t[r]),i+="px"),e.backstoreOnly||this._setCssDimension(r,i);return this._initRetinaScaling(),this._setImageSmoothing(),this.calcOffset(),e.cssOnly||this.renderAll(),this},_setBackstoreDimension:function(t,e){return this.lowerCanvasEl[t]=e,this.upperCanvasEl&&(this.upperCanvasEl[t]=e),this.cacheCanvasEl&&(this.cacheCanvasEl[t]=e),this[t]=e,this},_setCssDimension:function(t,e){return this.lowerCanvasEl.style[t]=e,this.upperCanvasEl&&(this.upperCanvasEl.style[t]=e),this.wrapperEl&&(this.wrapperEl.style[t]=e),this},getZoom:function(){return this.viewportTransform[0]},setViewportTransform:function(t){var e,i=this._activeGroup;this.viewportTransform=t;for(var r=0,n=this._objects.length;r<n;r++)(e=this._objects[r]).group||e.setCoords(!1,!0);return i&&i.setCoords(!1,!0),this.calcViewportBoundaries(),this.renderAll(),this},zoomToPoint:function(t,e){var i=t,r=this.viewportTransform.slice(0);t=n(t,s(this.viewportTransform)),r[0]=e,r[3]=e;var o=n(t,r);return r[4]+=i.x-o.x,r
[5]+=i.y-o.y,this.setViewportTransform(r)},setZoom:function(t){return this.zoomToPoint(new fabric.Point(0,0),t),this},absolutePan:function(t){var e=this.viewportTransform.slice(0);return e[4]=-t.x,e[5]=-t.y,this.setViewportTransform(e)},relativePan:function(t){return this.absolutePan(new fabric.Point(-t.x-this.viewportTransform[4],-t.y-this.viewportTransform[5]))},getElement:function(){return this.lowerCanvasEl},_onObjectAdded:function(t){this.stateful&&t.setupState(),t._set("canvas",this),t.setCoords(),this.fire("object:added",{target:t}),t.fire("added")},_onObjectRemoved:function(t){this.fire("object:removed",{target:t}),t.fire("removed"),delete t.canvas},clearContext:function(t){return t.clearRect(0,0,this.width,this.height),this},getContext:function(){return this.contextContainer},clear:function(){return this._objects.length=0,this.backgroundImage=null,this.overlayImage=null,this.backgroundColor="",this.overlayColor="",this._hasITextHandlers&&(this.off("mouse:up",this._mouseUpIT
extHandler),this._iTextInstances=null,this._hasITextHandlers=!1),this.clearContext(this.contextContainer),this.fire("canvas:cleared"),this.renderAll(),this},renderAll:function(){var t=this.contextContainer;return this.renderCanvas(t,this._objects),this},calcViewportBoundaries:function(){var t={},e=this.getWidth(),i=this.getHeight(),r=s(this.viewportTransform);return t.tl=n({x:0,y:0},r),t.br=n({x:e,y:i},r),t.tr=new fabric.Point(t.br.x,t.tl.y),t.bl=new fabric.Point(t.tl.x,t.br.y),this.vptCoords=t,t},renderCanvas:function(t,e){this.calcViewportBoundaries(),this.clearContext(t),this.fire("before:render"),this.clipTo&&fabric.util.clipContext(this,t),this._renderBackground(t),t.save(),t.transform.apply(t,this.viewportTransform),this._renderObjects(t,e),t.restore(),!this.controlsAboveOverlay&&this.interactive&&this.drawControls(t),this.clipTo&&t.restore(),this._renderOverlay(t),this.controlsAboveOverlay&&this.interactive&&this.drawControls(t),this.fire("after:render")},_renderObjects:funct
ion(t,e){for(var i=0,r=e.length;i<r;++i)e[i]&&e[i].render(t)},_renderBackgroundOrOverlay:function(t,e){var i=this[e+"Color"];i&&(t.fillStyle=i.toLive?i.toLive(t,this):i,t.fillRect(i.offsetX||0,i.offsetY||0,this.width,this.height)),(i=this[e+"Image"])&&(this[e+"Vpt"]&&(t.save(),t.transform.apply(t,this.viewportTransform)),i.render(t),this[e+"Vpt"]&&t.restore())},_renderBackground:function(t){this._renderBackgroundOrOverlay(t,"background")},_renderOverlay:function(t){this._renderBackgroundOrOverlay(t,"overlay")},getCenter:function(){return{top:this.getHeight()/2,left:this.getWidth()/2}},centerObjectH:function(t){return this._centerObject(t,new fabric.Point(this.getCenter().left,t.getCenterPoint().y))},centerObjectV:function(t){return this._centerObject(t,new fabric.Point(t.getCenterPoint().x,this.getCenter().top))},centerObject:function(t){var e=this.getCenter();return this._centerObject(t,new fabric.Point(e.left,e.top))},viewportCenterObject:function(t){var e=this.getVpCenter();retur
n this._centerObject(t,e)},viewportCenterObjectH:function(t){var e=this.getVpCenter();return this._centerObject(t,new fabric.Point(e.x,t.getCenterPoint().y)),this},viewportCenterObjectV:function(t){var e=this.getVpCenter();return this._centerObject(t,new fabric.Point(t.getCenterPoint().x,e.y))},getVpCenter:function(){var t=this.getCenter(),e=s(this.viewportTransform);return n({x:t.left,y:t.top},e)},_centerObject:function(t,e){return t.setPositionByOrigin(e,"center","center"),this.renderAll(),this},toDatalessJSON:function(t){return this.toDatalessObject(t)},toObject:function(t){return this._toObjectMethod("toObject",t)},toDatalessObject:function(t){return this._toObjectMethod("toDatalessObject",t)},_toObjectMethod:function(e,i){var r={objects:this._toObjects(e,i)};return t(r,this.__serializeBgOverlay(e,i)),fabric.util.populateWithProperties(this,r,i),r},_toObjects:function(t,e){return this.getObjects().filter(function(t){return!t.excludeFromExport}).map(function(i){return this._toObj
ect(i,t,e)},this)},_toObject:function(t,e,i){var r;this.includeDefaultValues||(r=t.includeDefaultValues,t.includeDefaultValues=!1);var n=t[e](i);return this.includeDefaultValues||(t.includeDefaultValues=r),n},__serializeBgOverlay:function(t,e){var i={},r=this.backgroundImage,n=this.overlayImage;return this.backgroundColor&&(i.background=this.backgroundColor.toObject?this.backgroundColor.toObject(e):this.backgroundColor),this.overlayColor&&(i.overlay=this.overlayColor.toObject?this.overlayColor.toObject(e):this.overlayColor),r&&!r.excludeFromExport&&(i.backgroundImage=this._toObject(r,t,e)),n&&!n.excludeFromExport&&(i.overlayImage=this._toObject(n,t,e)),i},svgViewportTransformation:!0,toSVG:function(t,e){t||(t={});var i=[];return this._setSVGPreamble(i,t),this._setSVGHeader(i,t),this._setSVGBgOverlayColor(i,"backgroundColor"),this._setSVGBgOverlayImage(i,"backgroundImage",e),this._setSVGObjects(i,e),this._setSVGBgOverlayColor(i,"overlayColor"),this._setSVGBgOverlayImage(i,"overlayIma
ge",e),i.push("</svg>"),i.join("")},_setSVGPreamble:function(t,e){e.suppressPreamble||t.push('<?xml version="1.0" encoding="',e.encoding||"UTF-8",'" standalone="no" ?>\n','<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ','"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n')},_setSVGHeader:function(t,e){var i,n=e.width||this.width,s=e.height||this.height,o='viewBox="0 0 '+this.width+" "+this.height+'" ',a=fabric.Object.NUM_FRACTION_DIGITS;e.viewBox?o='viewBox="'+e.viewBox.x+" "+e.viewBox.y+" "+e.viewBox.width+" "+e.viewBox.height+'" ':this.svgViewportTransformation&&(i=this.viewportTransform,o='viewBox="'+r(-i[4]/i[0],a)+" "+r(-i[5]/i[3],a)+" "+r(this.width/i[0],a)+" "+r(this.height/i[3],a)+'" '),t.push("<svg ",'xmlns="http://www.w3.org/2000/svg" ','xmlns:xlink="http://www.w3.org/1999/xlink" ','version="1.1" ','width="',n,'" ','height="',s,'" ',o,'xml:space="preserve">\n',"<desc>Created with Fabric.js ",fabric.version,"</desc>\n","<defs>\n",this.createSVGFontFacesMarkup(),this.cre
ateSVGRefElementsMarkup(),"</defs>\n")},createSVGRefElementsMarkup:function(){var t=this;return["backgroundColor","overlayColor"].map(function(e){var i=t[e];if(i&&i.toLive)return i.toSVG(t,!1)}).join("")},createSVGFontFacesMarkup:function(){for(var t,e,i,r,n,s,o="",a={},h=fabric.fontPaths,c=this.getObjects(),l=0,u=c.length;l<u;l++)if(t=c[l],e=t.fontFamily,-1!==t.type.indexOf("text")&&!a[e]&&h[e]&&(a[e]=!0,t.styles)){i=t.styles;for(n in i){r=i[n];for(s in r)!a[e=r[s].fontFamily]&&h[e]&&(a[e]=!0)}}for(var f in a)o+=["\t\t@font-face {\n","\t\t\tfont-family: '",f,"';\n","\t\t\tsrc: url('",h[f],"');\n","\t\t}\n"].join("");return o&&(o=['\t<style type="text/css">',"<![CDATA[\n",o,"]]>","</style>\n"].join("")),o},_setSVGObjects:function(t,e){for(var i,r=0,n=this.getObjects(),s=n.length;r<s;r++)(i=n[r]).excludeFromExport||this._setSVGObject(t,i,e)},_setSVGObject:function(t,e,i){t.push(e.toSVG(i))},_setSVGBgOverlayImage:function(t,e,i){this[e]&&this[e].toSVG&&t.push(this[e].toSVG(i))},_setSV
GBgOverlayColor:function(t,e){var i=this[e];if(i)if(i.toLive){var r=i.repeat;t.push('<rect transform="translate(',this.width/2,",",this.height/2,')"',' x="',i.offsetX-this.width/2,'" y="',i.offsetY-this.height/2,'" ','width="',"repeat-y"===r||"no-repeat"===r?i.source.width:this.width,'" height="',"repeat-x"===r||"no-repeat"===r?i.source.height:this.height,'" fill="url(#SVGID_'+i.id+')"',"></rect>\n")}else t.push('<rect x="0" y="0" ','width="',this.width,'" height="',this.height,'" fill="',this[e],'"',"></rect>\n")},sendToBack:function(t){if(!t)return this;var e,r,n,s=this._activeGroup;if(t===s)for(e=(n=s._objects).length;e--;)r=n[e],i(this._objects,r),this._objects.unshift(r);else i(this._objects,t),this._objects.unshift(t);return this.renderAll&&this.renderAll()},bringToFront:function(t){if(!t)return this;var e,r,n,s=this._activeGroup;if(t===s)for(n=s._objects,e=0;e<n.length;e++)r=n[e],i(this._objects,r),this._objects.push(r);else i(this._objects,t),this._objects.push(t);return thi
s.renderAll&&this.renderAll()},sendBackwards:function(t,e){if(!t)return this;var r,n,s,o,a,h=this._activeGroup,c=0;if(t===h)for(a=h._objects,r=0;r<a.length;r++)n=a[r],(s=this._objects.indexOf(n))>0+c&&(o=s-1,i(this._objects,n),this._objects.splice(o,0,n)),c++;else 0!==(s=this._objects.indexOf(t))&&(o=this._findNewLowerIndex(t,s,e),i(this._objects,t),this._objects.splice(o,0,t));return this.renderAll&&this.renderAll(),this},_findNewLowerIndex:function(t,e,i){var r;if(i){r=e;for(var n=e-1;n>=0;--n)if(t.intersectsWithObject(this._objects[n])||t.isContainedWithinObject(this._objects[n])||this._objects[n].isContainedWithinObject(t)){r=n;break}}else r=e-1;return r},bringForward:function(t,e){if(!t)return this;var r,n,s,o,a,h=this._activeGroup,c=0;if(t===h)for(r=(a=h._objects).length;r--;)n=a[r],(s=this._objects.indexOf(n))<this._objects.length-1-c&&(o=s+1,i(this._objects,n),this._objects.splice(o,0,n)),c++;else(s=this._objects.indexOf(t))!==this._objects.length-1&&(o=this._findNewUpperInd
ex(t,s,e),i(this._objects,t),this._objects.splice(o,0,t));return this.renderAll&&this.renderAll(),this},_findNewUpperIndex:function(t,e,i){var r;if(i){r=e;for(var n=e+1;n<this._objects.length;++n)if(t.intersectsWithObject(this._objects[n])||t.isContainedWithinObject(this._objects[n])||this._objects[n].isContainedWithinObject(t)){r=n;break}}else r=e+1;return r},moveTo:function(t,e){return i(this._objects,t),this._objects.splice(e,0,t),this.renderAll&&this.renderAll()},dispose:function(){return this.clear(),this},toString:function(){return"#<fabric.Canvas ("+this.complexity()+"): { objects: "+this.getObjects().length+" }>"}}),t(fabric.StaticCanvas.prototype,fabric.Observable),t(fabric.StaticCanvas.prototype,fabric.Collection),t(fabric.StaticCanvas.prototype,fabric.DataURLExporter),t(fabric.StaticCanvas,{EMPTY_JSON:'{"objects": [], "background": "white"}',supports:function(t){var e=fabric.util.createCanvasElement();if(!e||!e.getContext)return null;var i=e.getContext("2d");if(!i)return
null;switch(t){case"getImageData":return void 0!==i.getImageData;case"setLineDash":return void 0!==i.setLineDash;case"toDataURL":return void 0!==e.toDataURL;case"toDataURLWithQuality":try{return e.toDataURL("image/jpeg",0),!0}catch(t){}return!1;default:return null}}}),fabric.StaticCanvas.prototype.toJSON=fabric.StaticCanvas.prototype.toObject}}(),fabric.BaseBrush=fabric.util.createClass({color:"rgb(0, 0, 0)",width:1,shadow:null,strokeLineCap:"round",strokeLineJoin:"round",strokeDashArray:null,setShadow:function(t){return this.shadow=new fabric.Shadow(t),this},_setBrushStyles:function(){var t=this.canvas.contextTop;t.strokeStyle=this.color,t.lineWidth=this.width,t.lineCap=this.strokeLineCap,t.lineJoin=this.strokeLineJoin,this.strokeDashArray&&fabric.StaticCanvas.supports("setLineDash")&&t.setLineDash(this.strokeDashArray)},_setShadow:function(){if(this.shadow){var t=this.canvas.contextTop,e=this.canvas.getZoom();t.shadowColor=this.shadow.color,t.shadowBlur=this.shadow.blur*e,t.shadow
OffsetX=this.shadow.offsetX*e,t.shadowOffsetY=this.shadow.offsetY*e}},_resetShadow:function(){var t=this.canvas.contextTop;t.shadowColor="",t.shadowBlur=t.shadowOffsetX=t.shadowOffsetY=0}}),fabric.PencilBrush=fabric.util.createClass(fabric.BaseBrush,{initialize:function(t){this.canvas=t,this._points=[]},onMouseDown:function(t){this._prepareForDrawing(t),this._captureDrawingPath(t),this._render()},onMouseMove:function(t){this._captureDrawingPath(t),this.canvas.clearContext(this.canvas.contextTop),this._render()},onMouseUp:function(){this._finalizeAndAddPath()},_prepareForDrawing:function(t){var e=new fabric.Point(t.x,t.y);this._reset(),this._addPoint(e),this.canvas.contextTop.moveTo(e.x,e.y)},_addPoint:function(t){this._points.length>1&&t.eq(this._points[this._points.length-1])||this._points.push(t)},_reset:function(){this._points.length=0,this._setBrushStyles(),this._setShadow()},_captureDrawingPath:function(t){var e=new fabric.Point(t.x,t.y);this._addPoint(e)},_render:function(){va
r t,e,i=this.canvas.contextTop,r=this.canvas.viewportTransform,n=this._points[0],s=this._points[1];if(i.save(),i.transform(r[0],r[1],r[2],r[3],r[4],r[5]),i.beginPath(),2===this._points.length&&n.x===s.x&&n.y===s.y){var o=this.width/1e3;n=new fabric.Point(n.x,n.y),s=new fabric.Point(s.x,s.y),n.x-=o,s.x+=o}for(i.moveTo(n.x,n.y),t=1,e=this._points.length;t<e;t++){var a=n.midPointFrom(s);i.quadraticCurveTo(n.x,n.y,a.x,a.y),n=this._points[t],s=this._points[t+1]}i.lineTo(n.x,n.y),i.stroke(),i.restore()},convertPointsToSVGPath:function(t){var e,i,r,n=[],s=this.width/1e3,o=new fabric.Point(t[0].x,t[0].y),a=new fabric.Point(t[1].x,t[1].y),h=t.length,c=h>2;for(c&&(i=t[2].x<a.x?-1:t[2].x===a.x?0:1,r=t[2].y<a.y?-1:t[2].y===a.y?0:1),n.push("M ",o.x-i*s," ",o.y-r*s," "),e=1;e<h;e++){if(!o.eq(a)){var l=o.midPointFrom(a);n.push("Q ",o.x," ",o.y," ",l.x," ",l.y," ")}o=t[e],e+1<t.length&&(a=t[e+1])}return c&&(i=o.x>t[e-2].x?1:o.x===t[e-2].x?0:-1,r=o.y>t[e-2].y?1:o.y===t[e-2].y?0:-1),n.push("L ",o.x+i
*s," ",o.y+r*s),n},createPath:function(t){var e=new fabric.Path(t,{fill:null,stroke:this.color,strokeWidth:this.width,strokeLineCap:this.strokeLineCap,strokeLineJoin:this.strokeLineJoin,strokeDashArray:this.strokeDashArray}),i=new fabric.Point(e.left+e.width/2,e.top+e.height/2);return i=e.translateToGivenOrigin(i,"center","center",e.originX,e.originY),e.top=i.y,e.left=i.x,this.shadow&&(this.shadow.affectStroke=!0,e.setShadow(this.shadow)),e},_finalizeAndAddPath:function(){this.canvas.contextTop.closePath();var t=this.convertPointsToSVGPath(this._points).join("");if("M 0 0 Q 0 0 0 0 L 0 0"!==t){var e=this.createPath(t);this.canvas.add(e),e.setCoords(),this.canvas.clearContext(this.canvas.contextTop),this._resetShadow(),this.canvas.renderAll(),this.canvas.fire("path:created",{path:e})}else this.canvas.renderAll()}}),fabric.CircleBrush=fabric.util.createClass(fabric.BaseBrush,{width:10,initialize:function(t){this.canvas=t,this.points=[]},drawDot:function(t){var e=this.addPoint(t),i=thi
s.canvas.contextTop,r=this.canvas.viewportTransform;i.save(),i.transform(r[0],r[1],r[2],r[3],r[4],r[5]),i.fillStyle=e.fill,i.beginPath(),i.arc(e.x,e.y,e.radius,0,2*Math.PI,!1),i.closePath(),i.fill(),i.restore()},onMouseDown:function(t){this.points.length=0,this.canvas.clearContext(this.canvas.contextTop),this._setShadow(),this.drawDot(t)},onMouseMove:function(t){this.drawDot(t)},onMouseUp:function(){var t=this.canvas.renderOnAddRemove;this.canvas.renderOnAddRemove=!1;for(var e=[],i=0,r=this.points.length;i<r;i++){var n=this.points[i],s=new fabric.Circle({radius:n.radius,left:n.x,top:n.y,originX:"center",originY:"center",fill:n.fill});this.shadow&&s.setShadow(this.shadow),e.push(s)}var o=new fabric.Group(e,{originX:"center",originY:"center"});o.canvas=this.canvas,this.canvas.add(o),this.canvas.fire("path:created",{path:o}),this.canvas.clearContext(this.canvas.contextTop),this._resetShadow(),this.canvas.renderOnAddRemove=t,this.canvas.renderAll()},addPoint:function(t){var e=new fabric
.Point(t.x,t.y),i=fabric.util.getRandomInt(Math.max(0,this.width-20),this.width+20)/2,r=new fabric.Color(this.color).setAlpha(fabric.util.getRandomInt(0,100)/100).toRgba();return e.radius=i,e.fill=r,this.points.push(e),e}}),fabric.SprayBrush=fabric.util.createClass(fabric.BaseBrush,{width:10,density:20,dotWidth:1,dotWidthVariance:1,randomOpacity:!1,optimizeOverlapping:!0,initialize:function(t){this.canvas=t,this.sprayChunks=[]},onMouseDown:function(t){this.sprayChunks.length=0,this.canvas.clearContext(this.canvas.contextTop),this._setShadow(),this.addSprayChunk(t),this.render()},onMouseMove:function(t){this.addSprayChunk(t),this.render()},onMouseUp:function(){var t=this.canvas.renderOnAddRemove;this.canvas.renderOnAddRemove=!1;for(var e=[],i=0,r=this.sprayChunks.length;i<r;i++)for(var n=this.sprayChunks[i],s=0,o=n.length;s<o;s++){var a=new fabric.Rect({width:n[s].width,height:n[s].width,left:n[s].x+1,top:n[s].y+1,originX:"center",originY:"center",fill:this.color});this.shadow&&a.set
Shadow(this.shadow),e.push(a)}this.optimizeOverlapping&&(e=this._getOptimizedRects(e));var h=new fabric.Group(e,{originX:"center",originY:"center"});h.canvas=this.canvas,this.canvas.add(h),this.canvas.fire("path:created",{path:h}),this.canvas.clearContext(this.canvas.contextTop),this._resetShadow(),this.canvas.renderOnAddRemove=t,this.canvas.renderAll()},_getOptimizedRects:function(t){for(var e,i={},r=0,n=t.length;r<n;r++)i[e=t[r].left+""+t[r].top]||(i[e]=t[r]);var s=[];for(e in i)s.push(i[e]);return s},render:function(){var t=this.canvas.contextTop;t.fillStyle=this.color;var e=this.canvas.viewportTransform;t.save(),t.transform(e[0],e[1],e[2],e[3],e[4],e[5]);for(var i=0,r=this.sprayChunkPoints.length;i<r;i++){var n=this.sprayChunkPoints[i];void 0!==n.opacity&&(t.globalAlpha=n.opacity),t.fillRect(n.x,n.y,n.width,n.width)}t.restore()},addSprayChunk:function(t){this.sprayChunkPoints=[];for(var e,i,r,n=this.width/2,s=0;s<this.density;s++){e=fabric.util.getRandomInt(t.x-n,t.x+n),i=fabric
.util.getRandomInt(t.y-n,t.y+n),r=this.dotWidthVariance?fabric.util.getRandomInt(Math.max(1,this.dotWidth-this.dotWidthVariance),this.dotWidth+this.dotWidthVariance):this.dotWidth;var o=new fabric.Point(e,i);o.width=r,this.randomOpacity&&(o.opacity=fabric.util.getRandomInt(0,100)/100),this.sprayChunkPoints.push(o)}this.sprayChunks.push(this.sprayChunkPoints)}}),fabric.PatternBrush=fabric.util.createClass(fabric.PencilBrush,{getPatternSrc:function(){var t=fabric.document.createElement("canvas"),e=t.getContext("2d");return t.width=t.height=25,e.fillStyle=this.color,e.beginPath(),e.arc(10,10,10,0,2*Math.PI,!1),e.closePath(),e.fill(),t},getPatternSrcFunction:function(){return String(this.getPatternSrc).replace("this.color",'"'+this.color+'"')},getPattern:function(){return this.canvas.contextTop.createPattern(this.source||this.getPatternSrc(),"repeat")},_setBrushStyles:function(){this.callSuper("_setBrushStyles"),this.canvas.contextTop.strokeStyle=this.getPattern()},createPath:function(t
){var e=this.callSuper("createPath",t),i=e._getLeftTopCoords().scalarAdd(e.strokeWidth/2);return e.stroke=new fabric.Pattern({source:this.source||this.getPatternSrcFunction(),offsetX:-i.x,offsetY:-i.y}),e}}),function(){var t=fabric.util.getPointer,e=fabric.util.degreesToRadians,i=fabric.util.radiansToDegrees,r=Math.atan2,n=Math.abs,s=fabric.StaticCanvas.supports("setLineDash");fabric.Canvas=fabric.util.createClass(fabric.StaticCanvas,{initialize:function(t,e){e||(e={}),this._initStatic(t,e),this._initInteractive(),this._createCacheCanvas()},uniScaleTransform:!1,uniScaleKey:"shiftKey",centeredScaling:!1,centeredRotation:!1,centeredKey:"altKey",altActionKey:"shiftKey",interactive:!0,selection:!0,selectionKey:"shiftKey",altSelectionKey:null,selectionColor:"rgba(100, 100, 255, 0.3)",selectionDashArray:[],selectionBorderColor:"rgba(255, 255, 255, 0.3)",selectionLineWidth:1,hoverCursor:"move",moveCursor:"move",defaultCursor:"default",freeDrawingCursor:"crosshair",rotationCursor:"crosshair
",containerClass:"canvas-container",perPixelTargetFind:!1,targetFindTolerance:0,skipTargetFind:!1,isDrawingMode:!1,preserveObjectStacking:!1,snapAngle:0,snapThreshold:null,stopContextMenu:!1,fireRightClick:!1,fireMiddleClick:!1,_initInteractive:function(){this._currentTransform=null,this._groupSelector=null,this._initWrapperElement(),this._createUpperCanvas(),this._initEventListeners(),this._initRetinaScaling(),this.freeDrawingBrush=fabric.PencilBrush&&new fabric.PencilBrush(this),this.calcOffset()},_chooseObjectsToRender:function(){var t,e=this.getActiveGroup(),i=this.getActiveObject(),r=[],n=[];if(!e&&!i||this.preserveObjectStacking)r=this._objects;else{for(var s=0,o=this._objects.length;s<o;s++)t=this._objects[s],e&&e.contains(t)||t===i?n.push(t):r.push(t);e&&(e._set("_objects",n),r.push(e)),i&&r.push(i)}return r},renderAll:function(){!this.contextTopDirty||this._groupSelector||this.isDrawingMode||(this.clearContext(this.contextTop),this.contextTopDirty=!1);var t=this.contextCont
ainer;return this.renderCanvas(t,this._chooseObjectsToRender()),this},renderTop:function(){var t=this.contextTop;return this.clearContext(t),this.selection&&this._groupSelector&&this._drawSelection(t),this.fire("after:render"),this.contextTopDirty=!0,this},_resetCurrentTransform:function(){var t=this._currentTransform;t.target.set({scaleX:t.original.scaleX,scaleY:t.original.scaleY,skewX:t.original.skewX,skewY:t.original.skewY,left:t.original.left,top:t.original.top}),this._shouldCenterTransform(t.target)?"rotate"===t.action?this._setOriginToCenter(t.target):("center"!==t.originX&&("right"===t.originX?t.mouseXSign=-1:t.mouseXSign=1),"center"!==t.originY&&("bottom"===t.originY?t.mouseYSign=-1:t.mouseYSign=1),t.originX="center",t.originY="center"):(t.originX=t.original.originX,t.originY=t.original.originY)},containsPoint:function(t,e,i){var r,n=i||this.getPointer(t,!0);return r=e.group&&e.group===this.getActiveGroup()?this._normalizePointer(e.group,n):{x:n.x,y:n.y},e.containsPoint(r)||
e._findTargetCorner(n)},_normalizePointer:function(t,e){var i=t.calcTransformMatrix(),r=fabric.util.invertTransform(i),n=this.restorePointerVpt(e);return fabric.util.transformPoint(n,r)},isTargetTransparent:function(t,e,i){var r=t.hasBorders,n=t.transparentCorners,s=this.contextCache,o=t.selectionBackgroundColor;t.hasBorders=t.transparentCorners=!1,t.selectionBackgroundColor="",s.save(),s.transform.apply(s,this.viewportTransform),t.render(s),s.restore(),t.active&&t._renderControls(s),t.hasBorders=r,t.transparentCorners=n,t.selectionBackgroundColor=o;var a=fabric.util.isTransparent(s,e,i,this.targetFindTolerance);return this.clearContext(s),a},_shouldClearSelection:function(t,e){var i=this.getActiveGroup(),r=this.getActiveObject();return!e||e&&i&&!i.contains(e)&&i!==e&&!t[this.selectionKey]||e&&!e.evented||e&&!e.selectable&&r&&r!==e},_shouldCenterTransform:function(t){if(t){var e,i=this._currentTransform;return"scale"===i.action||"scaleX"===i.action||"scaleY"===i.action?e=this.center
edScaling||t.centeredScaling:"rotate"===i.action&&(e=this.centeredRotation||t.centeredRotation),e?!i.altKey:i.altKey}},_getOriginFromCorner:function(t,e){var i={x:t.originX,y:t.originY};return"ml"===e||"tl"===e||"bl"===e?i.x="right":"mr"!==e&&"tr"!==e&&"br"!==e||(i.x="left"),"tl"===e||"mt"===e||"tr"===e?i.y="bottom":"bl"!==e&&"mb"!==e&&"br"!==e||(i.y="top"),i},_getActionFromCorner:function(t,e,i){if(!e)return"drag";switch(e){case"mtr":return"rotate";case"ml":case"mr":return i[this.altActionKey]?"skewY":"scaleX";case"mt":case"mb":return i[this.altActionKey]?"skewX":"scaleY";default:return"scale"}},_setupCurrentTransform:function(t,i){if(i){var r=this.getPointer(t),n=i._findTargetCorner(this.getPointer(t,!0)),s=this._getActionFromCorner(i,n,t),o=this._getOriginFromCorner(i,n);this._currentTransform={target:i,action:s,corner:n,scaleX:i.scaleX,scaleY:i.scaleY,skewX:i.skewX,skewY:i.skewY,offsetX:r.x-i.left,offsetY:r.y-i.top,originX:o.x,originY:o.y,ex:r.x,ey:r.y,lastX:r.x,lastY:r.y,left:i
.left,top:i.top,theta:e(i.angle),width:i.width*i.scaleX,mouseXSign:1,mouseYSign:1,shiftKey:t.shiftKey,altKey:t[this.centeredKey]},this._currentTransform.original={left:i.left,top:i.top,scaleX:i.scaleX,scaleY:i.scaleY,skewX:i.skewX,skewY:i.skewY,originX:o.x,originY:o.y},this._resetCurrentTransform()}},_translateObject:function(t,e){var i=this._currentTransform,r=i.target,n=t-i.offsetX,s=e-i.offsetY,o=!r.get("lockMovementX")&&r.left!==n,a=!r.get("lockMovementY")&&r.top!==s;return o&&r.set("left",n),a&&r.set("top",s),o||a},_changeSkewTransformOrigin:function(t,e,i){var r="originX",n={0:"center"},s=e.target.skewX,o="left",a="right",h="mt"===e.corner||"ml"===e.corner?1:-1,c=1;t=t>0?1:-1,"y"===i&&(s=e.target.skewY,o="top",a="bottom",r="originY"),n[-1]=o,n[1]=a,e.target.flipX&&(c*=-1),e.target.flipY&&(c*=-1),0===s?(e.skewSign=-h*t*c,e[r]=n[-t]):(s=s>0?1:-1,e.skewSign=s,e[r]=n[s*h*c])},_skewObject:function(t,e,i){var r=this._currentTransform,n=r.target,s=!1,o=n.get("lockSkewingX"),a=n.get("
lockSkewingY");if(o&&"x"===i||a&&"y"===i)return!1;var h,c,l=n.getCenterPoint(),u=n.toLocalPoint(new fabric.Point(t,e),"center","center")[i],f=n.toLocalPoint(new fabric.Point(r.lastX,r.lastY),"center","center")[i],d=n._getTransformedDimensions();return this._changeSkewTransformOrigin(u-f,r,i),h=n.toLocalPoint(new fabric.Point(t,e),r.originX,r.originY)[i],c=n.translateToOriginPoint(l,r.originX,r.originY),s=this._setObjectSkew(h,r,i,d),r.lastX=t,r.lastY=e,n.setPositionByOrigin(c,r.originX,r.originY),s},_setObjectSkew:function(t,e,i,r){var n,s,o,a,h,c,l,u,f,d=e.target,g=!1,p=e.skewSign;return"x"===i?(a="y",h="Y",c="X",u=0,f=d.skewY):(a="x",h="X",c="Y",u=d.skewX,f=0),o=d._getTransformedDimensions(u,f),(l=2*Math.abs(t)-o[i])<=2?n=0:(n=p*Math.atan(l/d["scale"+c]/(o[a]/d["scale"+h])),n=fabric.util.radiansToDegrees(n)),g=d["skew"+c]!==n,d.set("skew"+c,n),0!==d["skew"+h]&&(s=d._getTransformedDimensions(),n=r[a]/s[a]*d["scale"+h],d.set("scale"+h,n)),g},_scaleObject:function(t,e,i){var r=this._
currentTransform,n=r.target,s=n.get("lockScalingX"),o=n.get("lockScalingY"),a=n.get("lockScalingFlip");if(s&&o)return!1;var h=n.translateToOriginPoint(n.getCenterPoint(),r.originX,r.originY),c=n.toLocalPoint(new fabric.Point(t,e),r.originX,r.originY),l=n._getTransformedDimensions(),u=!1;return this._setLocalMouse(c,r),u=this._setObjectScale(c,r,s,o,i,a,l),n.setPositionByOrigin(h,r.originX,r.originY),u},_setObjectScale:function(t,e,i,r,n,s,o){var a,h,c,l,u=e.target,f=!1,d=!1,g=!1;return c=t.x*u.scaleX/o.x,l=t.y*u.scaleY/o.y,a=u.scaleX!==c,h=u.scaleY!==l,s&&c<=0&&c<u.scaleX&&(f=!0),s&&l<=0&&l<u.scaleY&&(d=!0),"equally"!==n||i||r?n?"x"!==n||u.get("lockUniScaling")?"y"!==n||u.get("lockUniScaling")||d||r||u.set("scaleY",l)&&(g=g||h):f||i||u.set("scaleX",c)&&(g=g||a):(f||i||u.set("scaleX",c)&&(g=g||a),d||r||u.set("scaleY",l)&&(g=g||h)):f||d||(g=this._scaleObjectEqually(t,u,e,o)),e.newScaleX=c,e.newScaleY=l,f||d||this._flipObject(e,n),g},_scaleObjectEqually:function(t,e,i,r){var n,s=t.y+t.
x,o=r.y*i.original.scaleY/e.scaleY+r.x*i.original.scaleX/e.scaleX,a=t.x/Math.abs(t.x),h=t.y/Math.abs(t.y);return i.newScaleX=a*Math.abs(i.original.scaleX*s/o),i.newScaleY=h*Math.abs(i.original.scaleY*s/o),n=i.newScaleX!==e.scaleX||i.newScaleY!==e.scaleY,e.set("scaleX",i.newScaleX),e.set("scaleY",i.newScaleY),n},_flipObject:function(t,e){t.newScaleX<0&&"y"!==e&&("left"===t.originX?t.originX="right":"right"===t.originX&&(t.originX="left")),t.newScaleY<0&&"x"!==e&&("top"===t.originY?t.originY="bottom":"bottom"===t.originY&&(t.originY="top"))},_setLocalMouse:function(t,e){var i=e.target,r=this.getZoom(),s=i.padding/r;"right"===e.originX?t.x*=-1:"center"===e.originX&&(t.x*=2*e.mouseXSign,t.x<0&&(e.mouseXSign=-e.mouseXSign)),"bottom"===e.originY?t.y*=-1:"center"===e.originY&&(t.y*=2*e.mouseYSign,t.y<0&&(e.mouseYSign=-e.mouseYSign)),n(t.x)>s?t.x<0?t.x+=s:t.x-=s:t.x=0,n(t.y)>s?t.y<0?t.y+=s:t.y-=s:t.y=0},_rotateObject:function(t,e){var n=this._currentTransform;if(n.target.get("lockRotation")
)return!1;var s=r(n.ey-n.top,n.ex-n.left),o=r(e-n.top,t-n.left)
<TRUNCATED>
[3/4] openmeetings git commit: [OPENMEETINGS-1738] fabric.js version
is updated to 2.0rc1
Posted by so...@apache.org.
http://git-wip-us.apache.org/repos/asf/openmeetings/blob/7008a693/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/fabric.js
----------------------------------------------------------------------
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/fabric.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/fabric.js
index a8931f7..236a9ce 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/fabric.js
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/fabric.js
@@ -1,8 +1,8 @@
/* Licensed MIT https://github.com/kangax/fabric.js/blob/master/LICENSE */
-/* build: `node build.js modules=ALL exclude=json,gestures minifier=uglifyjs` */
+/* build: `node build.js modules=ALL exclude=gestures,accessors minifier=uglifyjs` */
/*! Fabric.js Copyright 2008-2015, Printio (Juriy Zaytsev, Maxim Chernyak) */
-var fabric = fabric || { version: "1.7.20" };
+var fabric = fabric || { version: '2.0.0-rc.1' };
if (typeof exports !== 'undefined') {
exports.fabric = fabric;
}
@@ -10,28 +10,24 @@ if (typeof exports !== 'undefined') {
if (typeof document !== 'undefined' && typeof window !== 'undefined') {
fabric.document = document;
fabric.window = window;
- // ensure globality even if entire library were function wrapped (as in Meteor.js packaging system)
- window.fabric = fabric;
}
else {
// assume we're running under node.js when document/window are not present
- fabric.document = require("jsdom")
+ fabric.document = require('jsdom')
.jsdom(
- decodeURIComponent("%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E")
- );
-
- if (fabric.document.createWindow) {
- fabric.window = fabric.document.createWindow();
- } else {
- fabric.window = fabric.document.parentWindow;
- }
+ decodeURIComponent('%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E'),
+ { features: {
+ FetchExternalResources: ['img']
+ }
+ });
+ fabric.window = fabric.document.defaultView;
+ DOMParser = require('xmldom').DOMParser;
}
/**
* True when in environment that supports touch events
* @type boolean
*/
-
fabric.isTouchSupported = 'ontouchstart' in fabric.window;
/**
@@ -54,7 +50,8 @@ fabric.SHARED_ATTRIBUTES = [
"stroke", "stroke-dasharray", "stroke-linecap",
"stroke-linejoin", "stroke-miterlimit",
"stroke-opacity", "stroke-width",
- "id"
+ "id", "paint-order",
+ "instantiated_by_use"
];
/* _FROM_SVG_END_ */
@@ -97,6 +94,25 @@ fabric.minCacheSideLimit = 256;
fabric.charWidthsCache = { };
/**
+ * if webgl is enabled and available, textureSize will determine the size
+ * of the canvas backend
+ * @since 2.0.0
+ * @type Number
+ * @default
+ */
+fabric.textureSize = 2048;
+
+/**
+ * Enable webgl for filtering picture is available
+ * A filtering backend will be initialized, this will both take memory and
+ * time since a default 2048x2048 canvas will be created for the gl context
+ * @since 2.0.0
+ * @type Boolean
+ * @default
+ */
+fabric.enableGLFiltering = true;
+
+/**
* Device Pixel Ratio
* @see https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/SettingUptheCanvas/SettingUptheCanvas.html
*/
@@ -104,6 +120,37 @@ fabric.devicePixelRatio = fabric.window.devicePixelRatio ||
fabric.window.webkitDevicePixelRatio ||
fabric.window.mozDevicePixelRatio ||
1;
+/**
+ * Browser-specific constant to adjust CanvasRenderingContext2D.shadowBlur value,
+ * which is unitless and not rendered equally across browsers.
+ *
+ * Values that work quite well (as of October 2017) are:
+ * - Chrome: 1.5
+ * - Edge: 1.75
+ * - Firefox: 0.9
+ * - Safari: 0.95
+ *
+ * @since 2.0.0
+ * @type Number
+ * @default 1
+ */
+fabric.browserShadowBlurConstant = 1;
+
+fabric.initFilterBackend = function() {
+ if (fabric.enableGLFiltering && fabric.isWebglSupported && fabric.isWebglSupported(fabric.textureSize)) {
+ console.log('max texture size: ' + fabric.maxTextureSize);
+ return (new fabric.WebglFilterBackend({ tileSize: fabric.textureSize }));
+ }
+ else if (fabric.Canvas2dFilterBackend) {
+ return (new fabric.Canvas2dFilterBackend());
+ }
+};
+
+
+if (typeof document !== 'undefined' && typeof window !== 'undefined') {
+ // ensure globality even if entire library were function wrapped (as in Meteor.js packaging system)
+ window.fabric = fabric;
+}
(function() {
@@ -261,7 +308,7 @@ fabric.Collection = {
this._onObjectAdded(arguments[i]);
}
}
- this.renderOnAddRemove && this.renderAll();
+ this.renderOnAddRemove && this.requestRenderAll();
return this;
},
@@ -286,7 +333,7 @@ fabric.Collection = {
objects.splice(index, 0, object);
}
this._onObjectAdded && this._onObjectAdded(object);
- this.renderOnAddRemove && this.renderAll();
+ this.renderOnAddRemove && this.requestRenderAll();
return this;
},
@@ -311,7 +358,7 @@ fabric.Collection = {
}
}
- this.renderOnAddRemove && somethingRemoved && this.renderAll();
+ this.renderOnAddRemove && somethingRemoved && this.requestRenderAll();
return this;
},
@@ -642,11 +689,11 @@ fabric.CommonMethods = {
var xPoints = [points[0].x, points[1].x, points[2].x, points[3].x],
minX = fabric.util.array.min(xPoints),
maxX = fabric.util.array.max(xPoints),
- width = Math.abs(minX - maxX),
+ width = maxX - minX,
yPoints = [points[0].y, points[1].y, points[2].y, points[3].y],
minY = fabric.util.array.min(yPoints),
maxY = fabric.util.array.max(yPoints),
- height = Math.abs(minY - maxY);
+ height = maxY - minY;
return {
left: minX,
@@ -745,6 +792,33 @@ fabric.CommonMethods = {
},
/**
+ * Returns array of attributes for given svg that fabric parses
+ * @memberOf fabric.util
+ * @param {String} type Type of svg element (eg. 'circle')
+ * @return {Array} string names of supported attributes
+ */
+ getSvgAttributes: function(type) {
+ var attributes = [
+ 'instantiated_by_use',
+ 'style',
+ 'id',
+ 'class'
+ ];
+ switch (type) {
+ case 'linearGradient':
+ attributes = attributes.concat(['x1', 'y1', 'x2', 'y2', 'gradientUnits', 'gradientTransform']);
+ break;
+ case 'radialGradient':
+ attributes = attributes.concat(['gradientUnits', 'gradientTransform', 'cx', 'cy', 'r', 'fx', 'fy', 'fr']);
+ break;
+ case 'stop':
+ attributes = attributes.concat(['offset', 'stop-color', 'stop-opacity']);
+ break;
+ }
+ return attributes;
+ },
+
+ /**
* Returns object of given namespace
* @memberOf fabric.util
* @param {String} namespace Namespace string e.g. 'fabric.Image.filter' or 'fabric'
@@ -783,11 +857,12 @@ fabric.CommonMethods = {
var img = fabric.util.createImage();
/** @ignore */
- img.onload = function () {
+ var onLoadCallback = function () {
callback && callback.call(context, img);
img = img.onload = img.onerror = null;
};
+ img.onload = onLoadCallback;
/** @ignore */
img.onerror = function() {
fabric.log('Error loading ' + img.src);
@@ -803,10 +878,44 @@ fabric.CommonMethods = {
img.crossOrigin = crossOrigin;
}
+ // IE10 / IE11-Fix: SVG contents from data: URI
+ // will only be available if the IMG is present
+ // in the DOM (and visible)
+ if (url.substring(0,14) === 'data:image/svg') {
+ img.onload = null;
+ fabric.util.loadImageInDom(img, onLoadCallback);
+ }
+
img.src = url;
},
/**
+ * Attaches SVG image with data: URL to the dom
+ * @memberOf fabric.util
+ * @param {Object} img Image object with data:image/svg src
+ * @param {Function} callback Callback; invoked with loaded image
+ * @return {Object} DOM element (div containing the SVG image)
+ */
+ loadImageInDom: function(img, onLoadCallback) {
+ var div = fabric.document.createElement('div');
+ div.style.width = div.style.height = '1px';
+ div.style.left = div.style.top = '-100%';
+ div.style.position = 'absolute';
+ div.appendChild(img);
+ fabric.document.querySelector('body').appendChild(div);
+ /**
+ * Wrap in function to:
+ * 1. Call existing callback
+ * 2. Cleanup DOM
+ */
+ img.onload = function () {
+ onLoadCallback();
+ div.parentNode.removeChild(div);
+ div = null;
+ };
+ },
+
+ /**
* Creates corresponding fabric instances from their object representations
* @static
* @memberOf fabric.util
@@ -827,8 +936,7 @@ fabric.CommonMethods = {
var enlivenedObjects = [],
numLoadedObjects = 0,
- numTotalObjects = objects.length,
- forceAsync = true;
+ numTotalObjects = objects.length;
if (!numTotalObjects) {
callback && callback(enlivenedObjects);
@@ -846,7 +954,7 @@ fabric.CommonMethods = {
error || (enlivenedObjects[index] = obj);
reviver && reviver(o, obj, error);
onLoaded();
- }, forceAsync);
+ });
});
},
@@ -854,10 +962,8 @@ fabric.CommonMethods = {
* Create and wait for loading of patterns
* @static
* @memberOf fabric.util
- * @param {Array} objects Objects to enliven
+ * @param {Array} patterns Objects to enliven
* @param {Function} callback Callback to invoke when all objects are created
- * @param {String} namespace Namespace to get klass "Class" object from
- * @param {Function} reviver Method for further parsing of object elements,
* called after each fabric object created.
*/
enlivenPatterns: function(patterns, callback) {
@@ -899,13 +1005,26 @@ fabric.CommonMethods = {
* @param {Array} elements SVG elements to group
* @param {Object} [options] Options object
* @param {String} path Value to set sourcePath to
- * @return {fabric.Object|fabric.PathGroup}
+ * @return {fabric.Object|fabric.Group}
*/
groupSVGElements: function(elements, options, path) {
var object;
-
- object = new fabric.PathGroup(elements, options);
-
+ if (elements.length === 1) {
+ return elements[0];
+ }
+ if (options) {
+ if (options.width && options.height) {
+ options.centerPoint = {
+ x: options.width / 2,
+ y: options.height / 2
+ };
+ }
+ else {
+ delete options.width;
+ delete options.height;
+ }
+ }
+ object = new fabric.Group(elements, options);
if (typeof path !== 'undefined') {
object.sourcePath = path;
}
@@ -918,7 +1037,7 @@ fabric.CommonMethods = {
* @memberOf fabric.util
* @param {Object} source Source object
* @param {Object} destination Destination object
- * @return {Array} properties Propertie names to include
+ * @return {Array} properties Properties names to include
*/
populateWithProperties: function(source, destination, properties) {
if (properties && Object.prototype.toString.call(properties) === '[object Array]') {
@@ -971,21 +1090,13 @@ fabric.CommonMethods = {
},
/**
- * Creates canvas element and initializes it via excanvas if necessary
+ * Creates canvas element
* @static
* @memberOf fabric.util
- * @param {CanvasElement} [canvasEl] optional canvas element to initialize;
- * when not given, element is created implicitly
* @return {CanvasElement} initialized canvas element
*/
- createCanvasElement: function(canvasEl) {
- canvasEl || (canvasEl = fabric.document.createElement('canvas'));
- /* eslint-disable camelcase */
- if (!canvasEl.getContext && typeof G_vmlCanvasManager !== 'undefined') {
- G_vmlCanvasManager.initElement(canvasEl);
- }
- /* eslint-enable camelcase */
- return canvasEl;
+ createCanvasElement: function() {
+ return fabric.document.createElement('canvas');
},
/**
@@ -995,45 +1106,13 @@ fabric.CommonMethods = {
* @return {HTMLImageElement} HTML image element
*/
createImage: function() {
- return fabric.isLikelyNode
- ? new (require('canvas').Image)()
- : fabric.document.createElement('img');
- },
-
- /**
- * Creates accessors (getXXX, setXXX) for a "class", based on "stateProperties" array
- * @static
- * @memberOf fabric.util
- * @param {Object} klass "Class" to create accessors for
- */
- createAccessors: function(klass) {
- var proto = klass.prototype, i, propName,
- capitalizedPropName, setterName, getterName;
-
- for (i = proto.stateProperties.length; i--; ) {
-
- propName = proto.stateProperties[i];
- capitalizedPropName = propName.charAt(0).toUpperCase() + propName.slice(1);
- setterName = 'set' + capitalizedPropName;
- getterName = 'get' + capitalizedPropName;
-
- // using `new Function` for better introspection
- if (!proto[getterName]) {
- proto[getterName] = (function(property) {
- return new Function('return this.get("' + property + '")');
- })(propName);
- }
- if (!proto[setterName]) {
- proto[setterName] = (function(property) {
- return new Function('value', 'return this.set("' + property + '", value)');
- })(propName);
- }
- }
+ return fabric.document.createElement('img');
},
/**
* @static
* @memberOf fabric.util
+ * @deprecated since 2.0.0
* @param {fabric.Object} receiver Object implementing `clipTo` method
* @param {CanvasRenderingContext2D} ctx Context to clip
*/
@@ -1102,7 +1181,7 @@ fabric.CommonMethods = {
target.skewY = 0;
target.flipX = false;
target.flipY = false;
- target.setAngle(0);
+ target.rotate(0);
},
/**
@@ -1207,7 +1286,6 @@ fabric.CommonMethods = {
* @memberOf fabric.util
* @param {Number} ar aspect ratio
* @param {Number} maximumArea Maximum area you want to achieve
- * @param {Number} maximumSide biggest side allowed
* @return {Object.x} Limited dimensions by X
* @return {Object.y} Limited dimensions by Y
*/
@@ -1219,9 +1297,16 @@ fabric.CommonMethods = {
capValue: function(min, value, max) {
return Math.max(min, Math.min(value, max));
+ },
+
+ findScaleToFit: function(source, destination) {
+ return Math.min(destination.width / source.width, destination.height / source.height);
+ },
+
+ findScaleToCover: function(source, destination) {
+ return Math.max(destination.width / source.width, destination.height / source.height);
}
};
-
})(typeof exports !== 'undefined' ? exports : this);
@@ -1490,172 +1575,6 @@ fabric.CommonMethods = {
var slice = Array.prototype.slice;
- /* _ES5_COMPAT_START_ */
-
- if (!Array.prototype.indexOf) {
- /**
- * Finds index of an element in an array
- * @param {*} searchElement
- * @return {Number}
- */
- Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) {
- if (this === void 0 || this === null) {
- throw new TypeError();
- }
- var t = Object(this), len = t.length >>> 0;
- if (len === 0) {
- return -1;
- }
- var n = 0;
- if (arguments.length > 0) {
- n = Number(arguments[1]);
- if (n !== n) { // shortcut for verifying if it's NaN
- n = 0;
- }
- else if (n !== 0 && n !== Number.POSITIVE_INFINITY && n !== Number.NEGATIVE_INFINITY) {
- n = (n > 0 || -1) * Math.floor(Math.abs(n));
- }
- }
- if (n >= len) {
- return -1;
- }
- var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
- for (; k < len; k++) {
- if (k in t && t[k] === searchElement) {
- return k;
- }
- }
- return -1;
- };
- }
-
- if (!Array.prototype.forEach) {
- /**
- * Iterates an array, invoking callback for each element
- * @param {Function} fn Callback to invoke for each element
- * @param {Object} [context] Context to invoke callback in
- * @return {Array}
- */
- Array.prototype.forEach = function(fn, context) {
- for (var i = 0, len = this.length >>> 0; i < len; i++) {
- if (i in this) {
- fn.call(context, this[i], i, this);
- }
- }
- };
- }
-
- if (!Array.prototype.map) {
- /**
- * Returns a result of iterating over an array, invoking callback for each element
- * @param {Function} fn Callback to invoke for each element
- * @param {Object} [context] Context to invoke callback in
- * @return {Array}
- */
- Array.prototype.map = function(fn, context) {
- var result = [];
- for (var i = 0, len = this.length >>> 0; i < len; i++) {
- if (i in this) {
- result[i] = fn.call(context, this[i], i, this);
- }
- }
- return result;
- };
- }
-
- if (!Array.prototype.every) {
- /**
- * Returns true if a callback returns truthy value for all elements in an array
- * @param {Function} fn Callback to invoke for each element
- * @param {Object} [context] Context to invoke callback in
- * @return {Boolean}
- */
- Array.prototype.every = function(fn, context) {
- for (var i = 0, len = this.length >>> 0; i < len; i++) {
- if (i in this && !fn.call(context, this[i], i, this)) {
- return false;
- }
- }
- return true;
- };
- }
-
- if (!Array.prototype.some) {
- /**
- * Returns true if a callback returns truthy value for at least one element in an array
- * @param {Function} fn Callback to invoke for each element
- * @param {Object} [context] Context to invoke callback in
- * @return {Boolean}
- */
- Array.prototype.some = function(fn, context) {
- for (var i = 0, len = this.length >>> 0; i < len; i++) {
- if (i in this && fn.call(context, this[i], i, this)) {
- return true;
- }
- }
- return false;
- };
- }
-
- if (!Array.prototype.filter) {
- /**
- * Returns the result of iterating over elements in an array
- * @param {Function} fn Callback to invoke for each element
- * @param {Object} [context] Context to invoke callback in
- * @return {Array}
- */
- Array.prototype.filter = function(fn, context) {
- var result = [], val;
- for (var i = 0, len = this.length >>> 0; i < len; i++) {
- if (i in this) {
- val = this[i]; // in case fn mutates this
- if (fn.call(context, val, i, this)) {
- result.push(val);
- }
- }
- }
- return result;
- };
- }
-
- if (!Array.prototype.reduce) {
- /**
- * Returns "folded" (reduced) result of iterating over elements in an array
- * @param {Function} fn Callback to invoke for each element
- * @return {*}
- */
- Array.prototype.reduce = function(fn /*, initial*/) {
- var len = this.length >>> 0,
- i = 0,
- rv;
-
- if (arguments.length > 1) {
- rv = arguments[1];
- }
- else {
- do {
- if (i in this) {
- rv = this[i++];
- break;
- }
- // if array contains no values, no initial value to return
- if (++i >= len) {
- throw new TypeError();
- }
- }
- while (true);
- }
- for (; i < len; i++) {
- if (i in this) {
- rv = fn.call(null, rv, this[i], i, this);
- }
- }
- return rv;
- };
- }
-
- /* _ES5_COMPAT_END_ */
-
/**
* Invokes method on all items in a given array
* @memberOf fabric.util.array
@@ -1796,6 +1715,7 @@ fabric.CommonMethods = {
/**
* Creates an empty object and copies all enumerable properties of another object to it
* @memberOf fabric.util.object
+ * TODO: this function return an empty object if you try to clone null
* @param {Object} object Object to clone
* @return {Object}
*/
@@ -1808,26 +1728,12 @@ fabric.CommonMethods = {
extend: extend,
clone: clone
};
-
+ fabric.util.object.extend(fabric.util, fabric.Observable);
})();
(function() {
- /* _ES5_COMPAT_START_ */
- if (!String.prototype.trim) {
- /**
- * Trims a string (removing whitespace from the beginning and the end)
- * @function external:String#trim
- * @see <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/Trim">String#trim on MDN</a>
- */
- String.prototype.trim = function () {
- // this trim is not fully ES3 or ES5 compliant, but it should cover most cases for now
- return this.replace(/^[\s\xA0]+/, '').replace(/[\s\xA0]+$/, '');
- };
- }
- /* _ES5_COMPAT_END_ */
-
/**
* Camelizes a string
* @memberOf fabric.util.string
@@ -1862,61 +1768,80 @@ fabric.CommonMethods = {
*/
function escapeXml(string) {
return string.replace(/&/g, '&')
- .replace(/"/g, '"')
- .replace(/'/g, ''')
- .replace(/</g, '<')
- .replace(/>/g, '>');
+ .replace(/"/g, '"')
+ .replace(/'/g, ''')
+ .replace(/</g, '<')
+ .replace(/>/g, '>');
}
/**
- * String utilities
- * @namespace fabric.util.string
+ * Divide a string in the user perceived single units
+ * @memberOf fabric.util.string
+ * @param {String} textstring String to escape
+ * @return {Array} array containing the graphemes
*/
- fabric.util.string = {
- camelize: camelize,
- capitalize: capitalize,
- escapeXml: escapeXml
- };
-})();
-
+ function graphemeSplit(textstring) {
+ var i = 0, chr, graphemes = [];
+ for (i = 0, chr; i < textstring.length; i++) {
+ if ((chr = getWholeChar(textstring, i)) === false) {
+ continue;
+ }
+ graphemes.push(chr);
+ }
+ return graphemes;
+ }
-/* _ES5_COMPAT_START_ */
-(function() {
+ // taken from mdn in the charAt doc page.
+ function getWholeChar(str, i) {
+ var code = str.charCodeAt(i);
- var slice = Array.prototype.slice,
- apply = Function.prototype.apply,
- Dummy = function() { };
+ if (isNaN(code)) {
+ return ''; // Position not found
+ }
+ if (code < 0xD800 || code > 0xDFFF) {
+ return str.charAt(i);
+ }
- if (!Function.prototype.bind) {
- /**
- * Cross-browser approximation of ES5 Function.prototype.bind (not fully spec conforming)
- * @see <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind">Function#bind on MDN</a>
- * @param {Object} thisArg Object to bind function to
- * @param {Any[]} Values to pass to a bound function
- * @return {Function}
- */
- Function.prototype.bind = function(thisArg) {
- var _this = this, args = slice.call(arguments, 1), bound;
- if (args.length) {
- bound = function() {
- return apply.call(_this, this instanceof Dummy ? this : thisArg, args.concat(slice.call(arguments)));
- };
+ // High surrogate (could change last hex to 0xDB7F to treat high private
+ // surrogates as single characters)
+ if (0xD800 <= code && code <= 0xDBFF) {
+ if (str.length <= (i + 1)) {
+ throw 'High surrogate without following low surrogate';
}
- else {
- /** @ignore */
- bound = function() {
- return apply.call(_this, this instanceof Dummy ? this : thisArg, arguments);
- };
+ var next = str.charCodeAt(i + 1);
+ if (0xDC00 > next || next > 0xDFFF) {
+ throw 'High surrogate without following low surrogate';
}
- Dummy.prototype = this.prototype;
- bound.prototype = new Dummy();
+ return str.charAt(i) + str.charAt(i + 1);
+ }
+ // Low surrogate (0xDC00 <= code && code <= 0xDFFF)
+ if (i === 0) {
+ throw 'Low surrogate without preceding high surrogate';
+ }
+ var prev = str.charCodeAt(i - 1);
- return bound;
- };
+ // (could change last hex to 0xDB7F to treat high private
+ // surrogates as single characters)
+ if (0xD800 > prev || prev > 0xDBFF) {
+ throw 'Low surrogate without preceding high surrogate';
+ }
+ // We can pass over low surrogates now as the second component
+ // in a pair which we have already processed
+ return false;
}
+
+ /**
+ * String utilities
+ * @namespace fabric.util.string
+ */
+ fabric.util.string = {
+ camelize: camelize,
+ capitalize: capitalize,
+ escapeXml: escapeXml,
+ graphemeSplit: graphemeSplit
+ };
})();
-/* _ES5_COMPAT_END_ */
(function() {
@@ -2241,14 +2166,11 @@ fabric.CommonMethods = {
}
var pointerX = function(event) {
- // looks like in IE (<9) clientX at certain point (apparently when mouseup fires on VML element)
- // is represented as COM object, with all the consequences, like "unknown" type and error on [[Get]]
- // need to investigate later
- return (typeof event.clientX !== unknown ? event.clientX : 0);
+ return event.clientX;
},
pointerY = function(event) {
- return (typeof event.clientY !== unknown ? event.clientY : 0);
+ return event.clientY;
};
function _getPointer(event, pageProp, clientProp) {
@@ -2271,8 +2193,6 @@ fabric.CommonMethods = {
fabric.util.getPointer = getPointer;
- fabric.util.object.extend(fabric.util, fabric.Observable);
-
})();
@@ -2817,9 +2737,11 @@ if (typeof console !== 'undefined') {
fabric.window.oRequestAnimationFrame ||
fabric.window.msRequestAnimationFrame ||
function(callback) {
- fabric.window.setTimeout(callback, 1000 / 60);
+ return fabric.window.setTimeout(callback, 1000 / 60);
};
+ var _cancelAnimFrame = fabric.window.cancelAnimationFrame || fabric.window.clearTimeout;
+
/**
* requestAnimationFrame polyfill based on http://paulirish.com/2011/requestanimationframe-for-smart-animating/
* In order to get a precise start time, `requestAnimFrame` should be called as an entry into the method
@@ -2831,9 +2753,13 @@ if (typeof console !== 'undefined') {
return _requestAnimFrame.apply(fabric.window, arguments);
}
+ function cancelAnimFrame() {
+ return _cancelAnimFrame.apply(fabric.window, arguments);
+ }
+
fabric.util.animate = animate;
fabric.util.requestAnimFrame = requestAnimFrame;
-
+ fabric.util.cancelAnimFrame = cancelAnimFrame;
})();
@@ -2876,8 +2802,8 @@ if (typeof console !== 'undefined') {
byValue: endColor,
easing: function (currentTime, startValue, byValue, duration) {
var posValue = options.colorEasing
- ? options.colorEasing(currentTime, duration)
- : 1 - Math.cos(currentTime / duration * (Math.PI / 2));
+ ? options.colorEasing(currentTime, duration)
+ : 1 - Math.cos(currentTime / duration * (Math.PI / 2));
return calculateColor(startValue, byValue, posValue);
}
}));
@@ -3304,10 +3230,11 @@ if (typeof console !== 'undefined') {
parseUnit = fabric.util.parseUnit,
multiplyTransformMatrices = fabric.util.multiplyTransformMatrices,
- reAllowedSVGTagNames = /^(path|circle|polygon|polyline|ellipse|rect|line|image|text)$/i,
- reViewBoxTagNames = /^(symbol|image|marker|pattern|view|svg)$/i,
- reNotAllowedAncestors = /^(?:pattern|defs|symbol|metadata|clipPath|mask)$/i,
- reAllowedParents = /^(symbol|g|a|svg)$/i,
+ svgValidTagNames = ['path', 'circle', 'polygon', 'polyline', 'ellipse', 'rect', 'line',
+ 'image', 'text', 'linearGradient', 'radialGradient', 'stop'],
+ svgViewBoxElements = ['symbol', 'image', 'marker', 'pattern', 'view', 'svg'],
+ svgInvalidAncestors = ['pattern', 'defs', 'symbol', 'metadata', 'clipPath', 'mask', 'desc'],
+ svgValidParents = ['symbol', 'g', 'a', 'svg'],
attributesMap = {
cx: 'left',
@@ -3324,6 +3251,7 @@ if (typeof console !== 'undefined') {
'font-size': 'fontSize',
'font-style': 'fontStyle',
'font-weight': 'fontWeight',
+ 'paint-order': 'paintFirst',
'stroke-dasharray': 'strokeDashArray',
'stroke-linecap': 'strokeLineCap',
'stroke-linejoin': 'strokeLineJoin',
@@ -3331,7 +3259,7 @@ if (typeof console !== 'undefined') {
'stroke-opacity': 'strokeOpacity',
'stroke-width': 'strokeWidth',
'text-decoration': 'textDecoration',
- 'text-anchor': 'originX',
+ 'text-anchor': 'textAnchor',
opacity: 'opacity'
},
@@ -3340,6 +3268,11 @@ if (typeof console !== 'undefined') {
fill: 'fillOpacity'
};
+ fabric.svgValidTagNamesRegEx = getSvgRegex(svgValidTagNames);
+ fabric.svgViewBoxElementsRegEx = getSvgRegex(svgViewBoxElements);
+ fabric.svgInvalidAncestorsRegEx = getSvgRegex(svgInvalidAncestors);
+ fabric.svgValidParentsRegEx = getSvgRegex(svgValidParents);
+
fabric.cssRules = { };
fabric.gradientDefs = { };
@@ -3378,7 +3311,7 @@ if (typeof console !== 'undefined') {
}
}
else if (attr === 'visible') {
- value = (value === 'none' || value === 'hidden') ? false : true;
+ value = value !== 'none' && value !== 'hidden';
// display=none on parent element always takes precedence over child element
if (parentAttributes && parentAttributes.visible === false) {
value = false;
@@ -3390,9 +3323,20 @@ if (typeof console !== 'undefined') {
value *= parentAttributes.opacity;
}
}
- else if (attr === 'originX' /* text-anchor */) {
+ else if (attr === 'textAnchor' /* text-anchor */) {
value = value === 'start' ? 'left' : value === 'end' ? 'right' : 'center';
}
+ else if (attr === 'paintFirst') {
+ var fillIndex = value.indexOf('fill');
+ var strokeIndex = value.indexOf('stroke');
+ var value = 'fill';
+ if (fillIndex > -1 && strokeIndex > -1 && strokeIndex < fillIndex) {
+ value = 'stroke';
+ }
+ else if (fillIndex === -1 && strokeIndex > -1) {
+ value = 'stroke';
+ }
+ }
else {
parsed = isArray ? value.map(parseUnit) : parseUnit(value, fontSize);
}
@@ -3401,6 +3345,13 @@ if (typeof console !== 'undefined') {
}
/**
+ * @private
+ */
+ function getSvgRegex(arr) {
+ return new RegExp('^(' + arr.join('|') + ')\\b', 'i');
+ }
+
+ /**
* @private
* @param {Object} attributes Array of attributes to parse
*/
@@ -3432,8 +3383,8 @@ if (typeof console !== 'undefined') {
* @private
*/
function _getMultipleNodes(doc, nodeNames) {
- var nodeName, nodeArray = [], nodeList;
- for (var i = 0; i < nodeNames.length; i++) {
+ var nodeName, nodeArray = [], nodeList, i, len;
+ for (i = 0, len = nodeNames.length; i < len; i++) {
nodeName = nodeNames[i];
nodeList = doc.getElementsByTagName(nodeName);
nodeArray = nodeArray.concat(Array.prototype.slice.call(nodeList));
@@ -3678,7 +3629,7 @@ if (typeof console !== 'undefined') {
function selectorMatches(element, selector) {
var nodeName = element.nodeName,
classNames = element.getAttribute('class'),
- id = element.getAttribute('id'), matcher;
+ id = element.getAttribute('id'), matcher, i;
// i check if a selector matches slicing away part from it.
// if i get empty string i should match
matcher = new RegExp('^' + nodeName, 'i');
@@ -3689,7 +3640,7 @@ if (typeof console !== 'undefined') {
}
if (classNames && selector.length) {
classNames = classNames.split(' ');
- for (var i = classNames.length; i--;) {
+ for (i = classNames.length; i--;) {
matcher = new RegExp('\\.' + classNames[i] + '(?![a-zA-Z\\-]+)', 'i');
selector = selector.replace(matcher, '');
}
@@ -3707,8 +3658,8 @@ if (typeof console !== 'undefined') {
if (el) {
return el;
}
- var node, i, nodelist = doc.getElementsByTagName('*');
- for (i = 0; i < nodelist.length; i++) {
+ var node, i, len, nodelist = doc.getElementsByTagName('*');
+ for (i = 0, len = nodelist.length; i < len; i++) {
node = nodelist[i];
if (id === node.getAttribute('id')) {
return node;
@@ -3729,12 +3680,12 @@ if (typeof console !== 'undefined') {
y = el.getAttribute('y') || 0,
el2 = elementById(doc, xlink).cloneNode(true),
currentTrans = (el2.getAttribute('transform') || '') + ' translate(' + x + ', ' + y + ')',
- parentNode, oldLength = nodelist.length, attr, j, attrs, l;
+ parentNode, oldLength = nodelist.length, attr, j, attrs, len;
applyViewboxTransform(el2);
if (/^svg$/i.test(el2.nodeName)) {
var el3 = el2.ownerDocument.createElement('g');
- for (j = 0, attrs = el2.attributes, l = attrs.length; j < l; j++) {
+ for (j = 0, attrs = el2.attributes, len = attrs.length; j < len; j++) {
attr = attrs.item(j);
el3.setAttribute(attr.nodeName, attr.nodeValue);
}
@@ -3745,7 +3696,7 @@ if (typeof console !== 'undefined') {
el2 = el3;
}
- for (j = 0, attrs = el.attributes, l = attrs.length; j < l; j++) {
+ for (j = 0, attrs = el.attributes, len = attrs.length; j < len; j++) {
attr = attrs.item(j);
if (attr.nodeName === 'x' || attr.nodeName === 'y' || attr.nodeName === 'xlink:href') {
continue;
@@ -3798,7 +3749,7 @@ if (typeof console !== 'undefined') {
x = element.getAttribute('x') || 0,
y = element.getAttribute('y') || 0,
preserveAspectRatio = element.getAttribute('preserveAspectRatio') || '',
- missingViewBox = (!viewBoxAttr || !reViewBoxTagNames.test(element.nodeName)
+ missingViewBox = (!viewBoxAttr || !fabric.svgViewBoxElementsRegEx.test(element.nodeName)
|| !(viewBoxAttr = viewBoxAttr.match(reViewBoxAttrValue))),
missingDimAttr = (!widthAttr || !heightAttr || widthAttr === '100%' || heightAttr === '100%'),
toBeParsed = missingViewBox && missingDimAttr,
@@ -3902,7 +3853,7 @@ if (typeof console !== 'undefined') {
parseUseDirectives(doc);
- var svgUid = fabric.Object.__uid++,
+ var svgUid = fabric.Object.__uid++, i, len,
options = applyViewboxTransform(doc),
descendants = fabric.util.toArray(doc.getElementsByTagName('*'));
options.crossOrigin = parsingOptions && parsingOptions.crossOrigin;
@@ -3913,7 +3864,7 @@ if (typeof console !== 'undefined') {
// https://github.com/ajaxorg/node-o3-xml/issues/21
descendants = doc.selectNodes('//*[name(.)!="svg"]');
var arr = [];
- for (var i = 0, len = descendants.length; i < len; i++) {
+ for (i = 0, len = descendants.length; i < len; i++) {
arr[i] = descendants[i];
}
descendants = arr;
@@ -3921,8 +3872,8 @@ if (typeof console !== 'undefined') {
var elements = descendants.filter(function(el) {
applyViewboxTransform(el);
- return reAllowedSVGTagNames.test(el.nodeName.replace('svg:', '')) &&
- !hasAncestorWithNodeName(el, reNotAllowedAncestors); // http://www.w3.org/TR/SVG/struct.html#DefsElement
+ return fabric.svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', '')) &&
+ !hasAncestorWithNodeName(el, fabric.svgInvalidAncestorsRegEx); // http://www.w3.org/TR/SVG/struct.html#DefsElement
});
if (!elements || (elements && !elements.length)) {
@@ -3933,9 +3884,9 @@ if (typeof console !== 'undefined') {
fabric.gradientDefs[svgUid] = fabric.getGradientDefs(doc);
fabric.cssRules[svgUid] = fabric.getCSSRules(doc);
// Precedence of rules: style > class > attribute
- fabric.parseElements(elements, function(instances) {
+ fabric.parseElements(elements, function(instances, elements) {
if (callback) {
- callback(instances, options);
+ callback(instances, options, elements, descendants);
}
}, clone(options), reviver, parsingOptions);
};
@@ -4049,7 +4000,7 @@ if (typeof console !== 'undefined') {
svgUid = element.getAttribute('svgUid');
}
// if there's a parent container (`g` or `a` or `symbol` node), parse its attributes recursively upwards
- if (element.parentNode && reAllowedParents.test(element.parentNode.nodeName)) {
+ if (element.parentNode && fabric.svgValidParentsRegEx.test(element.parentNode.nodeName)) {
parentAttributes = fabric.parseAttributes(element.parentNode, attributes, svgUid);
}
fontSize = (parentAttributes && parentAttributes.fontSize ) ||
@@ -4077,7 +4028,7 @@ if (typeof console !== 'undefined') {
fabric.parseFontDeclaration(normalizedStyle.font, normalizedStyle);
}
var mergedAttrs = extend(parentAttributes, normalizedStyle);
- return reAllowedParents.test(element.nodeName) ? mergedAttrs : _setStrokeFillOpacity(mergedAttrs);
+ return fabric.svgValidParentsRegEx.test(element.nodeName) ? mergedAttrs : _setStrokeFillOpacity(mergedAttrs);
},
/**
@@ -4138,9 +4089,7 @@ if (typeof console !== 'undefined') {
points = points.split(/\s+/);
var parsedPoints = [], i, len;
- i = 0;
- len = points.length;
- for (; i < len; i += 2) {
+ for (i = 0, len = points.length; i < len; i += 2) {
parsedPoints.push({
x: parseFloat(points[i]),
y: parseFloat(points[i + 1])
@@ -4164,11 +4113,11 @@ if (typeof console !== 'undefined') {
* @return {Object} CSS rules of this document
*/
getCSSRules: function(doc) {
- var styles = doc.getElementsByTagName('style'),
+ var styles = doc.getElementsByTagName('style'), i, len,
allRules = { }, rules;
// very crude parsing of style contents
- for (var i = 0, len = styles.length; i < len; i++) {
+ for (i = 0, len = styles.length; i < len; i++) {
// IE9 doesn't support textContent, but provides text instead.
var styleContents = styles[i].textContent || styles[i].text;
@@ -4179,13 +4128,14 @@ if (typeof console !== 'undefined') {
}
rules = styleContents.match(/[^{]*\{[\s\S]*?\}/g);
rules = rules.map(function(rule) { return rule.trim(); });
+ // eslint-disable-next-line no-loop-func
rules.forEach(function(rule) {
var match = rule.match(/([\s\S]*?)\s*\{([^}]*)\}/),
ruleObj = { }, declaration = match[2].trim(),
propertyValuePairs = declaration.replace(/;$/, '').split(/\s*;\s*/);
- for (var i = 0, len = propertyValuePairs.length; i < len; i++) {
+ for (i = 0, len = propertyValuePairs.length; i < len; i++) {
var pair = propertyValuePairs[i].split(/\s*:\s*/),
property = pair[0],
value = pair[1];
@@ -4240,8 +4190,8 @@ if (typeof console !== 'undefined') {
callback && callback(null);
}
- fabric.parseSVGDocument(xml.documentElement, function (results, _options) {
- callback && callback(results, _options);
+ fabric.parseSVGDocument(xml.documentElement, function (results, _options, elements, allElements) {
+ callback && callback(results, _options, elements, allElements);
}, reviver, options);
}
},
@@ -4271,8 +4221,8 @@ if (typeof console !== 'undefined') {
doc.loadXML(string.replace(/<!DOCTYPE[\s\S]*?(\[[\s\S]*\])*?>/i, ''));
}
- fabric.parseSVGDocument(doc.documentElement, function (results, _options) {
- callback(results, _options);
+ fabric.parseSVGDocument(doc.documentElement, function (results, _options, elements, allElements) {
+ callback(results, _options, elements, allElements);
}, reviver, options);
}
});
@@ -4323,24 +4273,19 @@ fabric.ElementsParser.prototype.createObject = function(el, index) {
};
fabric.ElementsParser.prototype._createObject = function(klass, el, index) {
- if (klass.async) {
- klass.fromElement(el, this.createCallback(index, el), this.options);
- }
- else {
- var obj = klass.fromElement(el, this.options);
- this.resolveGradient(obj, 'fill');
- this.resolveGradient(obj, 'stroke');
- this.reviver && this.reviver(el, obj);
- this.instances[index] = obj;
- this.checkIfDone();
- }
+ klass.fromElement(el, this.createCallback(index, el), this.options);
};
fabric.ElementsParser.prototype.createCallback = function(index, el) {
var _this = this;
return function(obj) {
+ var _options;
_this.resolveGradient(obj, 'fill');
_this.resolveGradient(obj, 'stroke');
+ if (obj instanceof fabric.Image) {
+ _options = obj.parsePreserveAspectRatioAttribute(el);
+ }
+ obj._removeTransformMatrix(_options);
_this.reviver && _this.reviver(el, obj);
_this.instances[index] = obj;
_this.checkIfDone();
@@ -4366,7 +4311,7 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
// eslint-disable-next-line no-eq-null, eqeqeq
return el != null;
});
- this.callback(this.instances);
+ this.callback(this.instances, this.elements);
}
};
@@ -4491,7 +4436,7 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
},
/**
- * Miltiplies this point by a value and returns a new one
+ * Multiplies this point by a value and returns a new one
* TODO: rename in scalarMultiply in 2.0
* @param {Number} scalar
* @return {fabric.Point}
@@ -4501,7 +4446,7 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
},
/**
- * Miltiplies this point by a value
+ * Multiplies this point by a value
* TODO: rename in scalarMultiplyEquals in 2.0
* @param {Number} scalar
* @return {fabric.Point} thisArg
@@ -4812,9 +4757,9 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
fabric.Intersection.intersectLinePolygon = function(a1, a2, points) {
var result = new Intersection(),
length = points.length,
- b1, b2, inter;
+ b1, b2, inter, i;
- for (var i = 0; i < length; i++) {
+ for (i = 0; i < length; i++) {
b1 = points[i];
b2 = points[(i + 1) % length];
inter = Intersection.intersectLineLine(a1, a2, b1, b2);
@@ -4836,9 +4781,9 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
*/
fabric.Intersection.intersectPolygonPolygon = function (points1, points2) {
var result = new Intersection(),
- length = points1.length;
+ length = points1.length, i;
- for (var i = 0; i < length; i++) {
+ for (i = 0; i < length; i++) {
var a1 = points1[i],
a2 = points1[(i + 1) % length],
inter = Intersection.intersectLinePolygon(a1, a2, points2);
@@ -5147,9 +5092,9 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
alpha = this.getAlpha(),
otherAlpha = 0.5,
source = this.getSource(),
- otherSource = otherColor.getSource();
+ otherSource = otherColor.getSource(), i;
- for (var i = 0; i < 3; i++) {
+ for (i = 0; i < 3; i++) {
result.push(Math.round((source[i] * (1 - otherAlpha)) + (otherSource[i] * otherAlpha)));
}
@@ -5165,7 +5110,7 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
* @field
* @memberOf fabric.Color
*/
- // eslint-disable-next-line max-len
+ // eslint-disable-next-line max-len
fabric.Color.reRGBa = /^rgba?\(\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*(?:\s*,\s*((?:\d*\.?\d+)?)\s*)?\)$/;
/**
@@ -5185,31 +5130,161 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
fabric.Color.reHex = /^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i;
/**
- * Map of the 17 basic color names with HEX code
+ * Map of the 148 color names with HEX code
* @static
* @field
* @memberOf fabric.Color
- * @see: http://www.w3.org/TR/CSS2/syndata.html#color-units
+ * @see: https://www.w3.org/TR/css3-color/#svg-color
*/
fabric.Color.colorNameMap = {
- aqua: '#00FFFF',
- black: '#000000',
- blue: '#0000FF',
- fuchsia: '#FF00FF',
- gray: '#808080',
- grey: '#808080',
- green: '#008000',
- lime: '#00FF00',
- maroon: '#800000',
- navy: '#000080',
- olive: '#808000',
- orange: '#FFA500',
- purple: '#800080',
- red: '#FF0000',
- silver: '#C0C0C0',
- teal: '#008080',
- white: '#FFFFFF',
- yellow: '#FFFF00'
+ aliceblue: '#F0F8FF',
+ antiquewhite: '#FAEBD7',
+ aqua: '#00FFFF',
+ aquamarine: '#7FFFD4',
+ azure: '#F0FFFF',
+ beige: '#F5F5DC',
+ bisque: '#FFE4C4',
+ black: '#000000',
+ blanchedalmond: '#FFEBCD',
+ blue: '#0000FF',
+ blueviolet: '#8A2BE2',
+ brown: '#A52A2A',
+ burlywood: '#DEB887',
+ cadetblue: '#5F9EA0',
+ chartreuse: '#7FFF00',
+ chocolate: '#D2691E',
+ coral: '#FF7F50',
+ cornflowerblue: '#6495ED',
+ cornsilk: '#FFF8DC',
+ crimson: '#DC143C',
+ cyan: '#00FFFF',
+ darkblue: '#00008B',
+ darkcyan: '#008B8B',
+ darkgoldenrod: '#B8860B',
+ darkgray: '#A9A9A9',
+ darkgrey: '#A9A9A9',
+ darkgreen: '#006400',
+ darkkhaki: '#BDB76B',
+ darkmagenta: '#8B008B',
+ darkolivegreen: '#556B2F',
+ darkorange: '#FF8C00',
+ darkorchid: '#9932CC',
+ darkred: '#8B0000',
+ darksalmon: '#E9967A',
+ darkseagreen: '#8FBC8F',
+ darkslateblue: '#483D8B',
+ darkslategray: '#2F4F4F',
+ darkslategrey: '#2F4F4F',
+ darkturquoise: '#00CED1',
+ darkviolet: '#9400D3',
+ deeppink: '#FF1493',
+ deepskyblue: '#00BFFF',
+ dimgray: '#696969',
+ dimgrey: '#696969',
+ dodgerblue: '#1E90FF',
+ firebrick: '#B22222',
+ floralwhite: '#FFFAF0',
+ forestgreen: '#228B22',
+ fuchsia: '#FF00FF',
+ gainsboro: '#DCDCDC',
+ ghostwhite: '#F8F8FF',
+ gold: '#FFD700',
+ goldenrod: '#DAA520',
+ gray: '#808080',
+ grey: '#808080',
+ green: '#008000',
+ greenyellow: '#ADFF2F',
+ honeydew: '#F0FFF0',
+ hotpink: '#FF69B4',
+ indianred: '#CD5C5C',
+ indigo: '#4B0082',
+ ivory: '#FFFFF0',
+ khaki: '#F0E68C',
+ lavender: '#E6E6FA',
+ lavenderblush: '#FFF0F5',
+ lawngreen: '#7CFC00',
+ lemonchiffon: '#FFFACD',
+ lightblue: '#ADD8E6',
+ lightcoral: '#F08080',
+ lightcyan: '#E0FFFF',
+ lightgoldenrodyellow: '#FAFAD2',
+ lightgray: '#D3D3D3',
+ lightgrey: '#D3D3D3',
+ lightgreen: '#90EE90',
+ lightpink: '#FFB6C1',
+ lightsalmon: '#FFA07A',
+ lightseagreen: '#20B2AA',
+ lightskyblue: '#87CEFA',
+ lightslategray: '#778899',
+ lightslategrey: '#778899',
+ lightsteelblue: '#B0C4DE',
+ lightyellow: '#FFFFE0',
+ lime: '#00FF00',
+ limegreen: '#32CD32',
+ linen: '#FAF0E6',
+ magenta: '#FF00FF',
+ maroon: '#800000',
+ mediumaquamarine: '#66CDAA',
+ mediumblue: '#0000CD',
+ mediumorchid: '#BA55D3',
+ mediumpurple: '#9370DB',
+ mediumseagreen: '#3CB371',
+ mediumslateblue: '#7B68EE',
+ mediumspringgreen: '#00FA9A',
+ mediumturquoise: '#48D1CC',
+ mediumvioletred: '#C71585',
+ midnightblue: '#191970',
+ mintcream: '#F5FFFA',
+ mistyrose: '#FFE4E1',
+ moccasin: '#FFE4B5',
+ navajowhite: '#FFDEAD',
+ navy: '#000080',
+ oldlace: '#FDF5E6',
+ olive: '#808000',
+ olivedrab: '#6B8E23',
+ orange: '#FFA500',
+ orangered: '#FF4500',
+ orchid: '#DA70D6',
+ palegoldenrod: '#EEE8AA',
+ palegreen: '#98FB98',
+ paleturquoise: '#AFEEEE',
+ palevioletred: '#DB7093',
+ papayawhip: '#FFEFD5',
+ peachpuff: '#FFDAB9',
+ peru: '#CD853F',
+ pink: '#FFC0CB',
+ plum: '#DDA0DD',
+ powderblue: '#B0E0E6',
+ purple: '#800080',
+ rebeccapurple: '#663399',
+ red: '#FF0000',
+ rosybrown: '#BC8F8F',
+ royalblue: '#4169E1',
+ saddlebrown: '#8B4513',
+ salmon: '#FA8072',
+ sandybrown: '#F4A460',
+ seagreen: '#2E8B57',
+ seashell: '#FFF5EE',
+ sienna: '#A0522D',
+ silver: '#C0C0C0',
+ skyblue: '#87CEEB',
+ slateblue: '#6A5ACD',
+ slategray: '#708090',
+ slategrey: '#708090',
+ snow: '#FFFAFA',
+ springgreen: '#00FF7F',
+ steelblue: '#4682B4',
+ tan: '#D2B48C',
+ teal: '#008080',
+ thistle: '#D8BFD8',
+ tomato: '#FF6347',
+ turquoise: '#40E0D0',
+ violet: '#EE82EE',
+ wheat: '#F5DEB3',
+ white: '#FFFFFF',
+ whitesmoke: '#F5F5F5',
+ yellow: '#FFFF00',
+ yellowgreen: '#9ACD32'
};
/**
@@ -5398,7 +5473,7 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
function getColorStop(el) {
var style = el.getAttribute('style'),
offset = el.getAttribute('offset') || 0,
- color, colorAlpha, opacity;
+ color, colorAlpha, opacity, i;
// convert percents to absolute values
offset = parseFloat(offset) / (/%$/.test(offset) ? 100 : 1);
@@ -5410,7 +5485,7 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
keyValuePairs.pop();
}
- for (var i = keyValuePairs.length; i--; ) {
+ for (i = keyValuePairs.length; i--; ) {
var split = keyValuePairs[i].split(/\s*:\s*/),
key = split[0].trim(),
@@ -5565,22 +5640,24 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
* @return {String} SVG representation of an gradient (linear/radial)
*/
toSVG: function(object) {
- var coords = clone(this.coords, true),
+ var coords = clone(this.coords, true), i, len,
markup, commonAttributes, colorStops = clone(this.colorStops, true),
- needsSwap = coords.r1 > coords.r2;
+ needsSwap = coords.r1 > coords.r2,
+ offsetX = object.width / 2, offsetY = object.height / 2;
// colorStops must be sorted ascending
colorStops.sort(function(a, b) {
return a.offset - b.offset;
});
-
- if (!(object.group && object.group.type === 'path-group')) {
- for (var prop in coords) {
- if (prop === 'x1' || prop === 'x2') {
- coords[prop] += this.offsetX - object.width / 2;
- }
- else if (prop === 'y1' || prop === 'y2') {
- coords[prop] += this.offsetY - object.height / 2;
- }
+ if (object.type === 'path') {
+ offsetX -= object.pathOffset.x;
+ offsetY -= object.pathOffset.y;
+ }
+ for (var prop in coords) {
+ if (prop === 'x1' || prop === 'x2') {
+ coords[prop] += this.offsetX - offsetX;
+ }
+ else if (prop === 'y1' || prop === 'y2') {
+ coords[prop] += this.offsetY - offsetY;
}
}
@@ -5619,7 +5696,7 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
// svg goes from internal to external radius. if radius are inverted, swap color stops.
colorStops = colorStops.concat();
colorStops.reverse();
- for (var i = 0; i < colorStops.length; i++) {
+ for (i = 0, len = colorStops.length; i < len; i++) {
colorStops[i].offset = 1 - colorStops[i].offset;
}
}
@@ -5628,19 +5705,19 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
// i have to shift all colorStops and add new one in 0.
var maxRadius = Math.max(coords.r1, coords.r2),
percentageShift = minRadius / maxRadius;
- for (var i = 0; i < colorStops.length; i++) {
+ for (i = 0, len = colorStops.length; i < len; i++) {
colorStops[i].offset += percentageShift * (1 - colorStops[i].offset);
}
}
}
- for (var i = 0; i < colorStops.length; i++) {
+ for (i = 0, len = colorStops.length; i < len; i++) {
var colorStop = colorStops[i];
markup.push(
'<stop ',
- 'offset="', (colorStop.offset * 100) + '%',
- '" style="stop-color:', colorStop.color,
- (colorStop.opacity !== null ? ';stop-opacity: ' + colorStop.opacity : ';'),
+ 'offset="', (colorStop.offset * 100) + '%',
+ '" style="stop-color:', colorStop.color,
+ (colorStop.opacity !== null ? ';stop-opacity: ' + colorStop.opacity : ';'),
'"/>\n'
);
}
@@ -5654,27 +5731,15 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
/**
* Returns an instance of CanvasGradient
* @param {CanvasRenderingContext2D} ctx Context to render on
- * @param {Object} object
* @return {CanvasGradient}
*/
- toLive: function(ctx, object) {
- var gradient, prop, coords = fabric.util.object.clone(this.coords);
+ toLive: function(ctx) {
+ var gradient, coords = fabric.util.object.clone(this.coords), i, len;
if (!this.type) {
return;
}
- if (object.group && object.group.type === 'path-group') {
- for (prop in coords) {
- if (prop === 'x1' || prop === 'x2') {
- coords[prop] += -this.offsetX + object.width / 2;
- }
- else if (prop === 'y1' || prop === 'y2') {
- coords[prop] += -this.offsetY + object.height / 2;
- }
- }
- }
-
if (this.type === 'linear') {
gradient = ctx.createLinearGradient(
coords.x1, coords.y1, coords.x2, coords.y2);
@@ -5684,7 +5749,7 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
coords.x1, coords.y1, coords.r1, coords.x2, coords.y2, coords.r2);
}
- for (var i = 0, len = this.colorStops.length; i < len; i++) {
+ for (i = 0, len = this.colorStops.length; i < len; i++) {
var color = this.colorStops[i].color,
opacity = this.colorStops[i].opacity,
offset = this.colorStops[i].offset;
@@ -5752,7 +5817,7 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
gradientUnits = el.getAttribute('gradientUnits') || 'objectBoundingBox',
gradientTransform = el.getAttribute('gradientTransform'),
colorStops = [],
- coords, ellipseMatrix;
+ coords, ellipseMatrix, i;
if (el.nodeName === 'linearGradient' || el.nodeName === 'LINEARGRADIENT') {
type = 'linear';
@@ -5768,7 +5833,7 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
coords = getRadialCoords(el);
}
- for (var i = colorStopEls.length; i--; ) {
+ for (i = colorStopEls.length; i--; ) {
colorStops.push(getColorStop(colorStopEls[i]));
}
@@ -5785,6 +5850,7 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
if (gradientTransform || ellipseMatrix !== '') {
gradient.gradientTransform = fabric.parseTransformAttribute((gradientTransform || '') + ellipseMatrix);
}
+
return gradient;
},
/* _FROM_SVG_END_ */
@@ -6091,7 +6157,7 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
/**
* Constructor
- * @param {Object|String} [options] Options object with any of color, blur, offsetX, offsetX properties or string (e.g. "rgba(0,0,0,0.2) 2px 2px 10px, "2px 2px 10px rgba(0,0,0,0.2)")
+ * @param {Object|String} [options] Options object with any of color, blur, offsetX, offsetY properties or string (e.g. "rgba(0,0,0,0.2) 2px 2px 10px")
* @return {fabric.Shadow} thisArg
*/
initialize: function(options) {
@@ -6256,7 +6322,8 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
*/
initialize: function(el, options) {
options || (options = { });
-
+ this.renderAndResetBound = this.renderAndReset.bind(this);
+ this.requestRenderAllBound = this.requestRenderAll.bind(this);
this._initStatic(el, options);
},
@@ -6314,9 +6381,12 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
stateful: false,
/**
- * Indicates whether {@link fabric.Collection.add}, {@link fabric.Collection.insertAt} and {@link fabric.Collection.remove} should also re-render canvas.
- * Disabling this option could give a great performance boost when adding/removing a lot of objects to/from canvas at once
- * (followed by a manual rendering after addition/deletion)
+ * Indicates whether {@link fabric.Collection.add}, {@link fabric.Collection.insertAt} and {@link fabric.Collection.remove},
+ * {@link fabric.StaticCanvas.moveTo}, {@link fabric.StaticCanvas.clear} and many more, should also re-render canvas.
+ * Disabling this option will not give a performance boost when adding/removing a lot of objects to/from canvas at once
+ * since the renders are quequed and executed one per frame.
+ * Disabling is suggested anyway and managing the renders of the app manually is not a big effort ( canvas.requestRenderAll() )
+ * Left default to true to do not break documentation and old app, fiddles.
* @type Boolean
* @default
*/
@@ -6325,6 +6395,7 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
/**
* Function that determines clipping of entire canvas area
* Being passed context as first argument. See clipping canvas area in {@link https://github.com/kangax/fabric.js/wiki/FAQ}
+ * @deprecated since 2.0.0
* @type Function
* @default
*/
@@ -6383,6 +6454,8 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
/**
* When true, canvas is scaled by devicePixelRatio for better rendering on retina screens
+ * @type Boolean
+ * @default
*/
enableRetinaScaling: true,
@@ -6404,8 +6477,10 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
* If One of the corner of the bounding box of the object is on the canvas
* the objects get rendered.
* @memberOf fabric.StaticCanvas.prototype
+ * @type Boolean
+ * @default
*/
- skipOffscreen: false,
+ skipOffscreen: true,
/**
* @private
@@ -6413,7 +6488,7 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
* @param {Object} [options] Options object
*/
_initStatic: function(el, options) {
- var cb = fabric.StaticCanvas.prototype.renderAll.bind(this);
+ var cb = this.requestRenderAllBound;
this._objects = [];
this._createLowerCanvas(el);
this._initOptions(options);
@@ -6580,9 +6655,9 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
},
/**
- * Sets {@link fabric.StaticCanvas#overlayColor|background color} for this canvas
- * @param {(String|fabric.Pattern)} overlayColor Color or pattern to set background color to
- * @param {Function} callback Callback to invoke when background color is set
+ * Sets {@link fabric.StaticCanvas#overlayColor|foreground color} for this canvas
+ * @param {(String|fabric.Pattern)} overlayColor Color or pattern to set foreground color to
+ * @param {Function} callback Callback to invoke when foreground color is set
* @return {fabric.Canvas} thisArg
* @chainable
* @see {@link http://jsfiddle.net/fabricjs/pB55h/|jsFiddle demo}
@@ -6682,14 +6757,14 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
/**
* @private
*/
- _createCanvasElement: function(canvasEl) {
- var element = fabric.util.createCanvasElement(canvasEl);
- if (!element.style) {
- element.style = { };
- }
+ _createCanvasElement: function() {
+ var element = fabric.util.createCanvasElement();
if (!element) {
throw CANVAS_INIT_ERROR;
}
+ if (!element.style) {
+ element.style = { };
+ }
if (typeof element.getContext === 'undefined') {
throw CANVAS_INIT_ERROR;
}
@@ -6725,7 +6800,13 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
* @param {HTMLElement} [canvasEl]
*/
_createLowerCanvas: function (canvasEl) {
- this.lowerCanvasEl = fabric.util.getById(canvasEl) || this._createCanvasElement(canvasEl);
+ // canvasEl === 'HTMLCanvasElement' does not work on jsdom/node
+ if (canvasEl && canvasEl.getContext) {
+ this.lowerCanvasEl = canvasEl;
+ }
+ else {
+ this.lowerCanvasEl = fabric.util.getById(canvasEl) || this._createCanvasElement();
+ }
fabric.util.addClass(this.lowerCanvasEl, 'lower-canvas');
@@ -6811,7 +6892,7 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
this.calcOffset();
if (!options.cssOnly) {
- this.renderAll();
+ this.requestRenderAll();
}
return this;
@@ -6878,17 +6959,17 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
* @chainable true
*/
setViewportTransform: function (vpt) {
- var activeGroup = this._activeGroup, object, ignoreVpt = false, skipAbsolute = true;
+ var activeObject = this._activeObject, object, ignoreVpt = false, skipAbsolute = true, i, len;
this.viewportTransform = vpt;
- for (var i = 0, len = this._objects.length; i < len; i++) {
+ for (i = 0, len = this._objects.length; i < len; i++) {
object = this._objects[i];
object.group || object.setCoords(ignoreVpt, skipAbsolute);
}
- if (activeGroup) {
- activeGroup.setCoords(ignoreVpt, skipAbsolute);
+ if (activeObject && activeObject.type === 'activeSelection') {
+ activeObject.setCoords(ignoreVpt, skipAbsolute);
}
this.calcViewportBoundaries();
- this.renderAll();
+ this.renderOnAddRemove && this.requestRenderAll();
return this;
},
@@ -7015,7 +7096,7 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
}
this.clearContext(this.contextContainer);
this.fire('canvas:cleared');
- this.renderAll();
+ this.renderOnAddRemove && this.requestRenderAll();
return this;
},
@@ -7031,14 +7112,38 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
},
/**
- * Calculate the position of the 4 corner of canvas with current viewportTransform.
- * helps to determinate when an object is in the current rendering viewport using
- * object absolute coordinates ( aCoords )
+ * Function created to be instance bound at initialization
+ * used in requestAnimationFrame rendering
+ * @return {fabric.Canvas} instance
+ * @chainable
+ */
+ renderAndReset: function() {
+ this.isRendering = 0;
+ this.renderAll();
+ },
+
+ /**
+ * Append a renderAll request to next animation frame.
+ * a boolean flag will avoid appending more.
+ * @return {fabric.Canvas} instance
+ * @chainable
+ */
+ requestRenderAll: function () {
+ if (!this.isRendering) {
+ this.isRendering = fabric.util.requestAnimFrame(this.renderAndResetBound);
+ }
+ return this;
+ },
+
+ /**
+ * Calculate the position of the 4 corner of canvas with current viewportTransform.
+ * helps to determinate when an object is in the current rendering viewport using
+ * object absolute coordinates ( aCoords )
* @return {Object} points.tl
* @chainable
*/
calcViewportBoundaries: function() {
- var points = { }, width = this.getWidth(), height = this.getHeight(),
+ var points = { }, width = this.width, height = this.height,
iVpt = invertTransform(this.viewportTransform);
points.tl = transformPoint({ x: 0, y: 0 }, iVpt);
points.br = transformPoint({ x: width, y: height }, iVpt);
@@ -7056,6 +7161,11 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
* @chainable
*/
renderCanvas: function(ctx, objects) {
+ var v = this.viewportTransform;
+ if (this.isRendering) {
+ fabric.util.cancelAnimFrame(this.isRendering);
+ this.isRendering = 0;
+ }
this.calcViewportBoundaries();
this.clearContext(ctx);
this.fire('before:render');
@@ -7066,7 +7176,7 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
ctx.save();
//apply viewport transform once for all rendering process
- ctx.transform.apply(ctx, this.viewportTransform);
+ ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
this._renderObjects(ctx, objects);
ctx.restore();
if (!this.controlsAboveOverlay && this.interactive) {
@@ -7088,7 +7198,8 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
* @param {Array} objects to render
*/
_renderObjects: function(ctx, objects) {
- for (var i = 0, length = objects.length; i < length; ++i) {
+ var i, len;
+ for (i = 0, len = objects.length; i < len; ++i) {
objects[i] && objects[i].render(ctx);
}
},
@@ -7099,7 +7210,7 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
* @param {string} property 'background' or 'overlay'
*/
_renderBackgroundOrOverlay: function(ctx, property) {
- var object = this[property + 'Color'];
+ var object = this[property + 'Color'], v;
if (object) {
ctx.fillStyle = object.toLive
? object.toLive(ctx, this)
@@ -7114,8 +7225,9 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
object = this[property + 'Image'];
if (object) {
if (this[property + 'Vpt']) {
+ v = this.viewportTransform;
ctx.save();
- ctx.transform.apply(ctx, this.viewportTransform);
+ ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
}
object.render(ctx);
this[property + 'Vpt'] && ctx.restore();
@@ -7145,8 +7257,8 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
*/
getCenter: function () {
return {
- top: this.getHeight() / 2,
- left: this.getWidth() / 2
+ top: this.height / 2,
+ left: this.width / 2
};
},
@@ -7243,7 +7355,7 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
*/
_centerObject: function(object, center) {
object.setPositionByOrigin(center, 'center', 'center');
- this.renderAll();
+ this.renderOnAddRemove && this.requestRenderAll();
return this;
},
@@ -7280,6 +7392,7 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
_toObjectMethod: function (methodName, propertiesToInclude) {
var data = {
+ version: fabric.version,
objects: this._toObjects(methodName, propertiesToInclude)
};
@@ -7422,8 +7535,8 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
}
markup.push(
'<?xml version="1.0" encoding="', (options.encoding || 'UTF-8'), '" standalone="no" ?>\n',
- '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ',
- '"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n'
+ '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ',
+ '"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n'
);
},
@@ -7456,17 +7569,17 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
markup.push(
'<svg ',
- 'xmlns="http://www.w3.org/2000/svg" ',
- 'xmlns:xlink="http://www.w3.org/1999/xlink" ',
- 'version="1.1" ',
- 'width="', width, '" ',
- 'height="', height, '" ',
- viewBox,
- 'xml:space="preserve">\n',
+ 'xmlns="http://www.w3.org/2000/svg" ',
+ 'xmlns:xlink="http://www.w3.org/1999/xlink" ',
+ 'version="1.1" ',
+ 'width="', width, '" ',
+ 'height="', height, '" ',
+ viewBox,
+ 'xml:space="preserve">\n',
'<desc>Created with Fabric.js ', fabric.version, '</desc>\n',
'<defs>\n',
- this.createSVGFontFacesMarkup(),
- this.createSVGRefElementsMarkup(),
+ this.createSVGFontFacesMarkup(),
+ this.createSVGRefElementsMarkup(),
'</defs>\n'
);
},
@@ -7495,10 +7608,10 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
*/
createSVGFontFacesMarkup: function() {
var markup = '', fontList = { }, obj, fontFamily,
- style, row, rowIndex, _char, charIndex,
+ style, row, rowIndex, _char, charIndex, i, len,
fontPaths = fabric.fontPaths, objects = this.getObjects();
- for (var i = 0, len = objects.length; i < len; i++) {
+ for (i = 0, len = objects.length; i < len; i++) {
obj = objects[i];
fontFamily = obj.fontFamily;
if (obj.type.indexOf('text') === -1 || fontList[fontFamily] || !fontPaths[fontFamily]) {
@@ -7547,8 +7660,8 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
* @private
*/
_setSVGObjects: function(markup, reviver) {
- var instance;
- for (var i = 0, objects = this.getObjects(), len = objects.length; i < len; i++) {
+ var instance, i, len, objects = this.getObjects();
+ for (i = 0, len = objects.length; i < len; i++) {
instance = objects[i];
if (instance.excludeFromExport) {
continue;
@@ -7558,7 +7671,6 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
},
/**
- * push single object svg representation in the markup
* @private
*/
_setSVGObject: function(markup, instance, reviver) {
@@ -7586,25 +7698,25 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
var repeat = filler.repeat;
markup.push(
'<rect transform="translate(', this.width / 2, ',', this.height / 2, ')"',
- ' x="', filler.offsetX - this.width / 2, '" y="', filler.offsetY - this.height / 2, '" ',
- 'width="',
- (repeat === 'repeat-y' || repeat === 'no-repeat'
- ? filler.source.width
- : this.width),
- '" height="',
- (repeat === 'repeat-x' || repeat === 'no-repeat'
- ? filler.source.height
- : this.height),
- '" fill="url(#SVGID_' + filler.id + ')"',
+ ' x="', filler.offsetX - this.width / 2, '" y="', filler.offsetY - this.height / 2, '" ',
+ 'width="',
+ (repeat === 'repeat-y' || repeat === 'no-repeat'
+ ? filler.source.width
+ : this.width),
+ '" height="',
+ (repeat === 'repeat-x' || repeat === 'no-repeat'
+ ? filler.source.height
+ : this.height),
+ '" fill="url(#SVGID_' + filler.id + ')"',
'></rect>\n'
);
}
else {
markup.push(
'<rect x="0" y="0" ',
- 'width="', this.width,
- '" height="', this.height,
- '" fill="', this[property], '"',
+ 'width="', this.width,
+ '" height="', this.height,
+ '" fill="', this[property], '"',
'></rect>\n'
);
}
@@ -7622,10 +7734,10 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
if (!object) {
return this;
}
- var activeGroup = this._activeGroup,
+ var activeSelection = this._activeObject,
i, obj, objs;
- if (object === activeGroup) {
- objs = activeGroup._objects;
+ if (object === activeSelection && object.type === 'activeSelection') {
+ objs = activeSelection._objects;
for (i = objs.length; i--;) {
obj = objs[i];
removeFromArray(this._objects, obj);
@@ -7636,7 +7748,8 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
removeFromArray(this._objects, object);
this._objects.unshift(object);
}
- return this.renderAll && this.renderAll();
+ this.renderOnAddRemove && this.requestRenderAll();
+ return this;
},
/**
@@ -7650,10 +7763,10 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
if (!object) {
return this;
}
- var activeGroup = this._activeGroup,
+ var activeSelection = this._activeObject,
i, obj, objs;
- if (object === activeGroup) {
- objs = activeGroup._objects;
+ if (object === activeSelection && object.type === 'activeSelection') {
+ objs = activeSelection._objects;
for (i = 0; i < objs.length; i++) {
obj = objs[i];
removeFromArray(this._objects, obj);
@@ -7664,11 +7777,16 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
removeFromArray(this._objects, object);
this._objects.push(object);
}
- return this.renderAll && this.renderAll();
+ this.renderOnAddRemove && this.requestRenderAll();
+ return this;
},
/**
* Moves an object or a selection down in stack of drawn objects
+ * An optional paramter, intersecting allowes to move the object in behind
+ * the first intersecting object. Where intersection is calculated with
+ * bounding box. If no intersection is found, there will not be change in the
+ * stack.
* @param {fabric.Object} object Object to send
* @param {Boolean} [intersecting] If `true`, send object behind next lower intersecting object
* @return {fabric.Canvas} thisArg
@@ -7678,12 +7796,11 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
if (!object) {
return this;
}
-
- var activeGroup = this._activeGroup,
+ var activeSelection = this._activeObject,
i, obj, idx, newIdx, objs, objsMoved = 0;
- if (object === activeGroup) {
- objs = activeGroup._objects;
+ if (object === activeSelection && object.type === 'activeSelection') {
+ objs = activeSelection._objects;
for (i = 0; i < objs.length; i++) {
obj = objs[i];
idx = this._objects.indexOf(obj);
@@ -7704,7 +7821,7 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
this._objects.splice(newIdx, 0, object);
}
}
- this.renderAll && this.renderAll();
+ this.renderOnAddRemove && this.requestRenderAll();
return this;
},
@@ -7712,13 +7829,13 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
* @private
*/
_findNewLowerIndex: function(object, idx, intersecting) {
- var newIdx;
+ var newIdx, i;
if (intersecting) {
newIdx = idx;
// traverse down the stack looking for the nearest intersecting object
- for (var i = idx - 1; i >= 0; --i) {
+ for (i = idx - 1; i >= 0; --i) {
var isIntersecting = object.intersectsWithObject(this._objects[i]) ||
object.isContainedWithinObject(this._objects[i]) ||
@@ -7739,6 +7856,10 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
/**
* Moves an object or a selection up in stack of drawn objects
+ * An optional paramter, intersecting allowes to move the object in front
+ * of the first intersecting object. Where intersection is calculated with
+ * bounding box. If no intersection is found, there will not be change in the
+ * stack.
* @param {fabric.Object} object Object to send
* @param {Boolean} [intersecting] If `true`, send object in front of next upper intersecting object
* @return {fabric.Canvas} thisArg
@@ -7748,12 +7869,11 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
if (!object) {
return this;
}
-
- var activeGroup = this._activeGroup,
+ var activeSelection = this._activeObject,
i, obj, idx, newIdx, objs, objsMoved = 0;
- if (object === activeGroup) {
- objs = activeGroup._objects;
+ if (object === activeSelection && object.type === 'activeSelection') {
+ objs = activeSelection._objects;
for (i = objs.length; i--;) {
obj = objs[i];
idx = this._objects.indexOf(obj);
@@ -7774,7 +7894,7 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
this._objects.splice(newIdx, 0, object);
}
}
- this.renderAll && this.renderAll();
+ this.renderOnAddRemove && this.requestRenderAll();
return this;
},
@@ -7782,13 +7902,13 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
* @private
*/
_findNewUpperIndex: function(object, idx, intersecting) {
- var newIdx;
+ var newIdx, i, len;
if (intersecting) {
newIdx = idx;
// traverse up the stack looking for the nearest intersecting object
- for (var i = idx + 1; i < this._objects.length; ++i) {
+ for (i = idx + 1, len = this._objects.length; i < len; ++i) {
var isIntersecting = object.intersectsWithObject(this._objects[i]) ||
object.isContainedWithinObject(this._objects[i]) ||
@@ -7817,7 +7937,7 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
moveTo: function (object, index) {
removeFromArray(this._objects, object);
this._objects.splice(index, 0, object);
- return this.renderAll && this.renderAll();
+ return this.renderOnAddRemove && this.requestRenderAll();
},
/**
@@ -7826,7 +7946,12 @@ fabric.ElementsParser.prototype.checkIfDone = function() {
* @chainable
*/
dispose: function () {
- this.clear();
+ this._objects.length = 0;
+ this.backgroundImage = null;
+ this.overlayImage = null;
+ this._iTextInstances = null;
+ this.lowerCanvasEl = null;
+ this.cacheCanvasEl = null;
return this;
},
@@ -7957,13 +8082,20 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
strokeLineCap: 'round',
/**
- * Corner style of a brush (one of "bevil", "round", "miter")
+ * Corner style of a brush (one of "bevel", "round", "miter")
* @type String
* @default
*/
strokeLineJoin: 'round',
/**
+ * Maximum miter length (used for strokeLineJoin = "miter") of a brush's
+ * @type Number
+ * @default
+ */
+ strokeMiterLimit: 10,
+
+ /**
* Stroke Dash Array.
* @type Array
* @default
@@ -7987,10 +8119,10 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
*/
_setBrushStyles: function() {
var ctx = this.canvas.contextTop;
-
ctx.strokeStyle = this.color;
ctx.lineWidth = this.width;
ctx.lineCap = this.strokeLineCap;
+ ctx.miterLimit = this.strokeMiterLimit;
ctx.lineJoin = this.strokeLineJoin;
if (this.strokeDashArray && fabric.StaticCanvas.supports('setLineDash')) {
ctx.setLineDash(this.strokeDashArray);
@@ -8136,7 +8268,6 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
ctx.save();
ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
ctx.beginPath();
-
//if we only have 2 points in the path and they are the same
//it means that the user only clicked the canvas without moving the mouse
//then we should be drawing a dot. A path isn't drawn between two identical dots
@@ -8215,6 +8346,7 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
stroke: this.color,
strokeWidth: this.width,
strokeLineCap: this.strokeLineCap,
+ strokeMiterLimit: this.strokeMiterLimit,
strokeLineJoin: this.strokeLineJoin,
strokeDashArray: this.strokeDashArray,
});
@@ -8245,18 +8377,17 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
// rendered inconsistently across browsers
// Firefox 4, for example, renders a dot,
// whereas Chrome 10 renders nothing
- this.canvas.renderAll();
+ this.canvas.requestRenderAll();
return;
}
var path = this.createPath(pathData);
-
+ this.canvas.clearContext(this.canvas.contextTop);
this.canvas.add(path);
+ this.canvas.renderAll();
path.setCoords();
-
- this.canvas.clearContext(this.canvas.contextTop);
this._resetShadow();
- this.canvas.renderAll();
+
// fire event 'path' created
this.canvas.fire('path:created', { path: path });
@@ -8330,12 +8461,12 @@ fabric.CircleBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric
* Invoked on mouse up
*/
onMouseUp: function() {
- var originalRenderOnAddRemove = this.canvas.renderOnAddRemove;
+ var originalRenderOnAddRemove = this.canvas.renderOnAddRemove, i, len;
this.canvas.renderOnAddRemove = false;
var circles = [];
- for (var i = 0, len = this.points.length; i < len; i++) {
+ for (i = 0, len = this.points.length; i < len; i++) {
var point = this.points[i],
circle = new fabric.Circle({
radius: point.radius,
@@ -8359,7 +8490,7 @@ fabric.CircleBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric
this.canvas.clearContext(this.canvas.contextTop);
this._resetShadow();
this.canvas.renderOnAddRemove = originalRenderOnAddRemove;
- this.canvas.renderAll();
+ this.canvas.requestRenderAll();
},
/**
@@ -8370,11 +8501,11 @@ fabric.CircleBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric
var pointerPoint = new fabric.Point(pointer.x, pointer.y),
circleRadius = fabric.util.getRandomInt(
- Math.max(0, this.width - 20), this.width + 20) / 2,
+ Math.max(0, this.width - 20), this.width + 20) / 2,
circleColor = new fabric.Color(this.color)
- .setAlpha(fabric.util.getRandomInt(0, 100) / 100)
- .toRgba();
+ .setAlpha(fabric.util.getRandomInt(0, 100) / 100)
+ .toRgba();
pointerPoint.radius = circleRadius;
pointerPoint.fill = circleColor;
@@ -8508,7 +8639,7 @@ fabric.SprayBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric
this.canvas.clearContext(this.canvas.contextTop);
this._resetShadow();
this.canvas.renderOnAddRemove = originalRenderOnAddRemove;
- this.canvas.renderAll();
+ this.canvas.requestRenderAll();
},
/**
@@ -8518,9 +8649,9 @@ fabric.SprayBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric
_getOptimizedRects: function(rects) {
// avoid creating duplicate rects at the same coordinates
- var uniqueRects = { }, key;
+ var uniqueRects = { }, key, i, len;
- for (var i = 0, len = rects.length; i < len; i++) {
+ for (i = 0, len = rects.length; i < len; i++) {
key = rects[i].left + '' + rects[i].top;
if (!uniqueRects[key]) {
uniqueRects[key] = rects[i];
@@ -8541,11 +8672,11 @@ fabric.SprayBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric
var ctx = this.canvas.contextTop;
ctx.fillStyle = this.color;
- var v = this.canvas.viewportTransform;
+ var v = this.canvas.viewportTransform, i, len;
ctx.save();
ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
- for (var i = 0, len = this.sprayChunkPoints.length; i < len; i++) {
+ for (i = 0, len = this.sprayChunkPoints.length; i < len; i++) {
var point = this.sprayChunkPoints[i];
if (typeof point.opacity !== 'undefined') {
ctx.globalAlpha = point.opacity;
@@ -8561,9 +8692,9 @@ fabric.SprayBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric
addSprayChunk: function(pointer) {
this.sprayChunkPoints = [];
- var x, y, width, radius = this.width / 2;
+ var x, y, width, radius = this.width / 2, i;
- for (var i = 0; i < this.density; i++) {
+ for (i = 0; i < this.density; i++) {
x = fabric.util.getRandomInt(pointer.x - radius, pointer.x + radius);
y = fabric.util.getRandomInt(pointer.y - radius, pointer.y + radius);
@@ -8673,14 +8804,16 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
* @see {@link fabric.Canvas#initialize} for constructor definition
*
* @fires object:added
+ * @fires object:removed
* @fires object:modified
* @fires object:rotating
* @fires object:scaling
* @fires object:moving
- * @fires object:selected
+ * @fires object:selected this event is deprecated. use selection:created
*
* @fires before:selection:cleared
* @fires selection:cleared
+ * @fires selection:updated
* @fires selection:created
*
* @fires path:created
@@ -8689,6 +8822,7 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
* @fires mouse:up
* @fires mouse:over
* @fires mouse:out
+ * @fires mouse:dblclick
*
*/
fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.Canvas.prototype */ {
@@ -8701,7 +8835,7 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
*/
initialize: function(el, options) {
options || (options = { });
-
+ this.renderAndResetBound = this.renderAndReset.bind(this);
this._initStatic(el, options);
this._initInteractive();
this._createCacheCanvas();
@@ -8744,7 +8878,7 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
centeredRotation: false,
/**
- * Indicates which key enable centered Transfrom
+ * Indicates which key enable centered Transform
* values: 'altKey', 'shiftKey', 'ctrlKey'.
* If `null` or 'none' or any other string that is not a modifier key
* feature is disabled feature disabled.
@@ -8780,12 +8914,13 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
selection: true,
/**
- * Indicates which key enable multiple click selection
+ * Indicates which key or keys enable multiple click selection
+ * Pass value as a string or array of strings
* values: 'altKey', 'shiftKey', 'ctrlKey'.
- * If `null` or 'none' or any other string that is not a modifier key
- * feature is disabled feature disabled.
+ * If `null` or empty or containing any other string that is not a modifier key
+ * feature is disabled.
* @since 1.6.2
- * @type String
+ * @type String|Array
* @default
*/
selectionKey: 'shiftKey',
@@ -8866,6 +9001,14 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
rotationCursor: 'crosshair',
/**
+ * Cursor value used for disabled elements ( corners with disabled action )
+ * @type String
+ * @since 2.0.0
+ * @default
+ */
+ notAllowedCursor: 'not-allowed',
+
+ /**
* Default element class that's given to wrapper (div) element of canvas
* @type String
* @default
@@ -8975,25 +9118,25 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
* @return {Array} objects to render immediately and pushes the other in the activeGroup.
*/
_chooseObjectsToRender: function(
<TRUNCATED>