paper-pen/dist/paper-pen.esm.min.js

A JavaScript library for annotations

function t(t,e){var i=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.push.apply(i,r)}return i}function e(e){for(var i=1;i<arguments.length;i++){var r=null!=arguments[i]?arguments[i]:{};i%2?t(Object(r),!0).forEach((function(t){s(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):t(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){for(var i=0;i<e.length;i++){var r=e[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,m(r.key),r)}}function n(t,e,i){return e&&r(t.prototype,e),i&&r(t,i),Object.defineProperty(t,"prototype",{writable:!1}),t}function s(t,e,i){return(e=m(e))in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&h(t,e)}function a(t){return a=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},a(t)}function h(t,e){return h=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},h(t,e)}function l(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function c(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,r=a(t);if(e){var n=a(this).constructor;i=Reflect.construct(r,arguments,n)}else i=r.apply(this,arguments);return function(t,e){if(e&&("object"==typeof e||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return l(t)}(this,i)}}function u(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var i=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=i){var r,n,s,o,a=[],h=!0,l=!1;try{if(s=(i=i.call(t)).next,0===e){if(Object(i)!==i)return;h=!1}else for(;!(h=(r=s.call(i)).done)&&(a.push(r.value),a.length!==e);h=!0);}catch(t){l=!0,n=t}finally{try{if(!h&&null!=i.return&&(o=i.return(),Object(o)!==o))return}finally{if(l)throw n}}return a}}(t,e)||d(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function f(t){return function(t){if(Array.isArray(t))return v(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||d(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function d(t,e){if(t){if("string"==typeof t)return v(t,e);var i=Object.prototype.toString.call(t).slice(8,-1);return"Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?v(t,e):void 0}}function v(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}function m(t){var e=function(t,e){if("object"!=typeof t||null===t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var r=i.call(t,e||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:String(e)}var g=function(){function t(){i(this,t),this.eventList={}}return n(t,[{key:"on",value:function(t,e){this.eventList[t]=this.eventList[t]||[],this.eventList[t].push(e)}},{key:"emit",value:function(t){for(var e=this,i=arguments.length,r=new Array(i>1?i-1:0),n=1;n<i;n++)r[n-1]=arguments[n];this.eventList[t]&&this.eventList[t].forEach((function(t){null==t||t.call.apply(t,[e].concat(r))}))}},{key:"off",value:function(t,e){this.eventList[t]&&(this.eventList[t]=this.eventList[t].filter((function(t){return t!==e})))}},{key:"offAll",value:function(t){t?delete this.eventList[t]:this.eventList={}}}]),t}(),p=function(){function t(e,r,n,s,o,a){i(this,t),this.a=e||1,this.b=r||0,this.c=n||0,this.d=s||1,this.e=o||0,this.f=a||0}return n(t,[{key:"translate",value:function(t,e){return this.transform(1,0,0,1,t,e)}},{key:"scaleU",value:function(t){return this.transform(t,0,0,t,0,0)}},{key:"scale",value:function(t,e){return this.transform(t,0,0,e,0,0)}},{key:"rotate",value:function(t){var e=Math.cos(t),i=Math.sin(t);return this.transform(e,i,-i,e,0,0)}},{key:"rotateAngle",value:function(t){var e=t/180*Math.PI;return this.rotate(e)}},{key:"transform",value:function(t,e,i,r,n,s){var o=this,a=this.a,h=this.b,l=this.c,c=this.d,u=this.e,f=this.f;return o.a=a*t+l*e,o.b=h*t+c*e,o.c=a*i+l*r,o.d=h*i+c*r,o.e=a*n+l*s+u,o.f=h*n+c*s+f,o}},{key:"applyToPoint",value:function(t,e){var i=this;return{x:t*i.a+e*i.c+i.e,y:t*i.b+e*i.d+i.f}}},{key:"clone",value:function(){return new t(this.a,this.b,this.c,this.d,this.e,this.f)}},{key:"reset",value:function(){return new t}}]),t}();function y(t,e,i,r,n){x(t,e,i||0,r||t.length-1,n||b)}function x(t,e,i,r,n){for(;r>i;){if(r-i>600){var s=r-i+1,o=e-i+1,a=Math.log(s),h=.5*Math.exp(2*a/3),l=.5*Math.sqrt(a*h*(s-h)/s)*(o-s/2<0?-1:1);x(t,e,Math.max(i,Math.floor(e-o*h/s+l)),Math.min(r,Math.floor(e+(s-o)*h/s+l)),n)}var c=t[e],u=i,f=r;for(M(t,i,e),n(t[r],c)>0&&M(t,i,r);u<f;){for(M(t,u,f),u++,f--;n(t[u],c)<0;)u++;for(;n(t[f],c)>0;)f--}0===n(t[i],c)?M(t,i,f):M(t,++f,r),f<=e&&(i=f+1),e<=f&&(r=f-1)}}function M(t,e,i){var r=t[e];t[e]=t[i],t[i]=r}function b(t,e){return t<e?-1:t>e?1:0}class w{constructor(t=9){this._maxEntries=Math.max(4,t),this._minEntries=Math.max(2,Math.ceil(.4*this._maxEntries)),this.clear()}all(){return this._all(this.data,[])}search(t){let e=this.data;const i=[];if(!I(t,e))return i;const r=this.toBBox,n=[];for(;e;){for(let s=0;s<e.children.length;s++){const o=e.children[s],a=e.leaf?r(o):o;I(t,a)&&(e.leaf?i.push(o):T(t,a)?this._all(o,i):n.push(o))}e=n.pop()}return i}collides(t){let e=this.data;if(!I(t,e))return!1;const i=[];for(;e;){for(let r=0;r<e.children.length;r++){const n=e.children[r],s=e.leaf?this.toBBox(n):n;if(I(t,s)){if(e.leaf||T(t,s))return!0;i.push(n)}}e=i.pop()}return!1}load(t){if(!t||!t.length)return this;if(t.length<this._minEntries){for(let e=0;e<t.length;e++)this.insert(t[e]);return this}let e=this._build(t.slice(),0,t.length-1,0);if(this.data.children.length)if(this.data.height===e.height)this._splitRoot(this.data,e);else{if(this.data.height<e.height){const t=this.data;this.data=e,e=t}this._insert(e,this.data.height-e.height-1,!0)}else this.data=e;return this}insert(t){return t&&this._insert(t,this.data.height-1),this}clear(){return this.data=A([]),this}remove(t,e){if(!t)return this;let i=this.data;const r=this.toBBox(t),n=[],s=[];let o,a,h;for(;i||n.length;){if(i||(i=n.pop(),a=n[n.length-1],o=s.pop(),h=!0),i.leaf){const r=C(t,i.children,e);if(-1!==r)return i.children.splice(r,1),n.push(i),this._condense(n),this}h||i.leaf||!T(i,r)?a?(o++,i=a.children[o],h=!1):i=null:(n.push(i),s.push(o),o=0,a=i,i=i.children[0])}return this}toBBox(t){return t}compareMinX(t,e){return t.minX-e.minX}compareMinY(t,e){return t.minY-e.minY}toJSON(){return this.data}fromJSON(t){return this.data=t,this}_all(t,e){const i=[];for(;t;)t.leaf?e.push(...t.children):i.push(...t.children),t=i.pop();return e}_build(t,e,i,r){const n=i-e+1;let s,o=this._maxEntries;if(n<=o)return s=A(t.slice(e,i+1)),k(s,this.toBBox),s;r||(r=Math.ceil(Math.log(n)/Math.log(o)),o=Math.ceil(n/Math.pow(o,r-1))),s=A([]),s.leaf=!1,s.height=r;const a=Math.ceil(n/o),h=a*Math.ceil(Math.sqrt(o));B(t,e,i,h,this.compareMinX);for(let n=e;n<=i;n+=h){const e=Math.min(n+h-1,i);B(t,n,e,a,this.compareMinY);for(let i=n;i<=e;i+=a){const n=Math.min(i+a-1,e);s.children.push(this._build(t,i,n,r-1))}}return k(s,this.toBBox),s}_chooseSubtree(t,e,i,r){for(;r.push(e),!e.leaf&&r.length-1!==i;){let i,r=1/0,o=1/0;for(let a=0;a<e.children.length;a++){const h=e.children[a],l=X(h),c=(n=t,s=h,(Math.max(s.maxX,n.maxX)-Math.min(s.minX,n.minX))*(Math.max(s.maxY,n.maxY)-Math.min(s.minY,n.minY))-l);c<o?(o=c,r=l<r?l:r,i=h):c===o&&l<r&&(r=l,i=h)}e=i||e.children[0]}var n,s;return e}_insert(t,e,i){const r=i?t:this.toBBox(t),n=[],s=this._chooseSubtree(r,this.data,e,n);for(s.children.push(t),_(s,r);e>=0&&n[e].children.length>this._maxEntries;)this._split(n,e),e--;this._adjustParentBBoxes(r,n,e)}_split(t,e){const i=t[e],r=i.children.length,n=this._minEntries;this._chooseSplitAxis(i,n,r);const s=this._chooseSplitIndex(i,n,r),o=A(i.children.splice(s,i.children.length-s));o.height=i.height,o.leaf=i.leaf,k(i,this.toBBox),k(o,this.toBBox),e?t[e-1].children.push(o):this._splitRoot(i,o)}_splitRoot(t,e){this.data=A([t,e]),this.data.height=t.height+1,this.data.leaf=!1,k(this.data,this.toBBox)}_chooseSplitIndex(t,e,i){let r,n=1/0,s=1/0;for(let o=e;o<=i-e;o++){const e=P(t,0,o,this.toBBox),a=P(t,o,i,this.toBBox),h=j(e,a),l=X(e)+X(a);h<n?(n=h,r=o,s=l<s?l:s):h===n&&l<s&&(s=l,r=o)}return r||i-e}_chooseSplitAxis(t,e,i){const r=t.leaf?this.compareMinX:O,n=t.leaf?this.compareMinY:Y;this._allDistMargin(t,e,i,r)<this._allDistMargin(t,e,i,n)&&t.children.sort(r)}_allDistMargin(t,e,i,r){t.children.sort(r);const n=this.toBBox,s=P(t,0,e,n),o=P(t,i-e,i,n);let a=S(s)+S(o);for(let r=e;r<i-e;r++){const e=t.children[r];_(s,t.leaf?n(e):e),a+=S(s)}for(let r=i-e-1;r>=e;r--){const e=t.children[r];_(o,t.leaf?n(e):e),a+=S(o)}return a}_adjustParentBBoxes(t,e,i){for(let r=i;r>=0;r--)_(e[r],t)}_condense(t){for(let e,i=t.length-1;i>=0;i--)0===t[i].children.length?i>0?(e=t[i-1].children,e.splice(e.indexOf(t[i]),1)):this.clear():k(t[i],this.toBBox)}}function C(t,e,i){if(!i)return e.indexOf(t);for(let r=0;r<e.length;r++)if(i(t,e[r]))return r;return-1}function k(t,e){P(t,0,t.children.length,e,t)}function P(t,e,i,r,n){n||(n=A(null)),n.minX=1/0,n.minY=1/0,n.maxX=-1/0,n.maxY=-1/0;for(let s=e;s<i;s++){const e=t.children[s];_(n,t.leaf?r(e):e)}return n}function _(t,e){return t.minX=Math.min(t.minX,e.minX),t.minY=Math.min(t.minY,e.minY),t.maxX=Math.max(t.maxX,e.maxX),t.maxY=Math.max(t.maxY,e.maxY),t}function O(t,e){return t.minX-e.minX}function Y(t,e){return t.minY-e.minY}function X(t){return(t.maxX-t.minX)*(t.maxY-t.minY)}function S(t){return t.maxX-t.minX+(t.maxY-t.minY)}function j(t,e){const i=Math.max(t.minX,e.minX),r=Math.max(t.minY,e.minY),n=Math.min(t.maxX,e.maxX),s=Math.min(t.maxY,e.maxY);return Math.max(0,n-i)*Math.max(0,s-r)}function T(t,e){return t.minX<=e.minX&&t.minY<=e.minY&&e.maxX<=t.maxX&&e.maxY<=t.maxY}function I(t,e){return e.minX<=t.maxX&&e.minY<=t.maxY&&e.maxX>=t.minX&&e.maxY>=t.minY}function A(t){return{children:t,height:1,leaf:!0,minX:1/0,minY:1/0,maxX:-1/0,maxY:-1/0}}function B(t,e,i,r,n){const s=[e,i];for(;s.length;){if((i=s.pop())-(e=s.pop())<=r)continue;const o=e+Math.ceil((i-e)/r/2)*r;y(t,o,e,i,n),s.push(e,o,o,i)}}var E={scaleX:1,scaleY:1,angle:0,skewX:0,skewY:0,translateX:0,translateY:0,width:0,height:0,left:0,top:0,originX:"left",originY:"top"},H=0,L=function(t){o(r,g);var e=c(r);function r(t,n){var o;return i(this,r),s(l(o=e.call(this)),"el",null),s(l(o),"width",0),s(l(o),"height",0),s(l(o),"lowerCanvas",null),s(l(o),"lowerContext",null),s(l(o),"upperCanvas",null),s(l(o),"canvasContainer",null),s(l(o),"cacheCanvas",null),s(l(o),"cacheCtx",null),s(l(o),"transform",[1,0,0,1,0,0]),s(l(o),"transformMatrix",new p),s(l(o),"defaultTransform",E),s(l(o),"_objects",[]),s(l(o),"_activeObject",null),s(l(o),"selection",!0),s(l(o),"selectionLineWidth",1),s(l(o),"selectionColor","#00f"),s(l(o),"selectionBorderColor","#000"),s(l(o),"selectionOpacity",.3),s(l(o),"background",""),s(l(o),"backgroundImage",new Image),s(l(o),"mask",!1),s(l(o),"maskCanvas",null),s(l(o),"maskContext",null),s(l(o),"imageFillMode","contain"),s(l(o),"ratio",{x:1,y:1}),s(l(o),"pixelSize",{w:0,h:0}),s(l(o),"preventDefault",!0),s(l(o),"selection",!0),s(l(o),"skipFindTarget",!1),s(l(o),"wheel",{scale:!1,max:40,min:.6,scroll:!1}),s(l(o),"rightMove",!1),s(l(o),"createCanvas",[]),s(l(o),"canvasList",[]),s(l(o),"contextList",[]),s(l(o),"rBush",null),o.setOptions(n),o.el=t,H++,o.initCanvasContainer(),o.createCanvas.length&&o.createCanvasElement(),o.mask&&o.maskCanvas&&o.initMaskCanvas(),o.cacheCanvas=document.createElement("canvas"),o.cacheCtx=o.cacheCanvas.getContext("2d"),o.rBush=new w,o}return n(r,[{key:"setOptions",value:function(t){for(var e in t)this[e]=t[e]}},{key:"createCanvasElement",value:function(){var t=this;this.createCanvas.forEach((function(e){console.log(e),t[e.canvasName]=e.el,t[e.contextName]=e.el.getContext("2d"),t.setCanvasStyles(t[e.canvasName]),t[e.canvasName].classList.add(e.canvasName+"-"+H),t.canvasList.push(t[e.canvasName]),t.contextList.push(t[e.contextName])}))}},{key:"initLowerCanvas",value:function(){if(!this.el)throw new Error("Canvas must have an 'el' parameter and cannot be empty");this.lowerCanvas||("string"==typeof this.el?this.lowerCanvas=document.querySelector(this.el):this.lowerCanvas=this.el,this.canvasList.push(this.lowerCanvas),this.lowerCanvas.classList.add("lower-canvas-"+H)),this.setCanvasStyles(this.lowerCanvas),this.lowerContext||(this.lowerContext=this.lowerCanvas.getContext("2d"),this.contextList.push(this.lowerContext))}},{key:"initMaskCanvas",value:function(){this.mask&&this.maskCanvas&&(this.setCanvasStyles(this.maskCanvas),this.maskCanvas.classList.add("mask-canvas-"+H),this.maskContext=this.maskCanvas.getContext("2d"),this.canvasList.push(this.maskCanvas),this.contextList.push(this.maskContext))}},{key:"initCanvasContainer",value:function(){var t,e;(this.canvasContainer||(this.canvasContainer=document.createElement("div"),this.canvasContainer.classList.add("canvas-container-"+H)),this.initLowerCanvas(),this.initUpperCanvas(),(null===(t=this.lowerCanvas)||void 0===t?void 0:t.parentNode)!==this.canvasContainer)&&(null===(e=this.lowerCanvas)||void 0===e||null===(e=e.parentNode)||void 0===e||e.replaceChild(this.canvasContainer,this.lowerCanvas),this.canvasContainer.appendChild(this.lowerCanvas));this.canvasContainer.style.position="relative",this.canvasContainer.style.width=this.width+"px",this.canvasContainer.style.height=this.height+"px"}},{key:"initUpperCanvas",value:function(){var t;this.upperCanvas||(this.upperCanvas=document.createElement("canvas"),this.upperCanvas.classList.add("upper-canvas-"+H),this.canvasList.push(this.upperCanvas),null===(t=this.canvasContainer)||void 0===t||t.appendChild(this.upperCanvas));this.upperContext=this.upperCanvas.getContext("2d"),this.setCanvasStyles(this.upperCanvas),this.upperCanvas.style.setProperty("z-index",H)}},{key:"setCanvasStyles",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i={position:"absolute",top:"0px",left:"0px",width:this.width+"px",height:this.height+"px"};i=Object.assign(i,e),Object.entries(i).forEach((function(e){var i=u(e,2),r=i[0],n=i[1];t.style.setProperty(r,n)})),t.width=this.width,t.height=this.height}},{key:"add",value:function(){for(var t,e=this,i=arguments.length,r=new Array(i),n=0;n<i;n++)r[n]=arguments[n];r.forEach((function(t){t.needControl&&t.setCoords&&t.setCoords(e.lowerContext,e)})),(t=this._objects).push.apply(t,r),this.emit("obj:add"),this.requestRenderAll()}},{key:"remove",value:function(t){this._objects=this._objects.filter((function(e){return e.id!==t.id})),this.emit("obj:remove")}},{key:"removeAll",value:function(){this._objects=[]}},{key:"requestRenderAll",value:function(){window.cancelAnimationFrame(this._renderAll.bind(this)),window.requestAnimationFrame(this._renderAll.bind(this))}},{key:"_renderAll",value:function(){var t=this;this.contextList.forEach((function(e){e.setTransform(t.transformMatrix.clone()),t.clearContext(e)})),this.backgroundImage&&this.drawBackground(this.lowerContext),this.emit("render:before"),this._objects.forEach((function(e){e.target?e.target.save():t.lowerContext.save(),e.render(e.target||t.lowerContext,t),e.target?e.target.restore():t.lowerContext.restore()})),this.emit("render:after")}},{key:"setBackground",value:function(t,e){var i=this;if("string"==typeof t)return this.backgroundImage.src=t,this.backgroundImage.onload=function(){i.pixelSize={w:i.backgroundImage.naturalWidth,h:i.backgroundImage.naturalHeight};var t=i.backgroundImage.naturalWidth/i.backgroundImage.naturalHeight;"cover"===i.imageFillMode?(i.bgWidth=i.width,i.bgHeight=i.width/t):"contain"===i.imageFillMode?(i.bgWidth=i.height*t,i.bgHeight=i.height):e||"baseCanvas"!==i.imageFillMode||(i.bgWidth=i.width,i.bgHeight=i.height),null!=e&&e.width&&null!=e&&e.height&&(i.bgWidth=e.width,i.bgHeight=e.height),i.cacheCanvas.width=i.backgroundImage.naturalWidth,i.cacheCanvas.height=i.backgroundImage.naturalHeight,i.cacheCtx.drawImage(i.backgroundImage,i.bgLeft||0,i.bgTop||0,i.backgroundImage.naturalWidth,i.backgroundImage.naturalHeight),i.emit("img:load",i)},void this.requestRenderAll();this.backgroundImage=t;var r=this.backgroundImage.naturalWidth?this.backgroundImage.naturalWidth/this.backgroundImage.naturalHeight:this.backgroundImage.width?this.backgroundImage.width/this.backgroundImage.height:1920/1080;"cover"===this.imageFillMode?(this.bgWidth=this.width,this.bgHeight=this.width/r):"contain"===this.imageFillMode?(this.bgWidth=this.height*r,this.bgHeight=this.height):e||"baseCanvas"!==this.imageFillMode||(this.bgWidth=this.width,this.bgHeight=this.height),null!=e&&e.width&&null!=e&&e.height&&(this.bgWidth=e.width,this.bgHeight=e.height),this.cacheCanvas.width=this.backgroundImage.naturalWidth,this.cacheCanvas.height=this.backgroundImage.naturalHeight,this.cacheCtx.drawImage(this.backgroundImage,this.bgLeft||0,this.bgTop||0,this.backgroundImage.naturalWidth,this.backgroundImage.naturalHeight),this.requestRenderAll()}},{key:"drawBackground",value:function(t){t.save(),t.drawImage(this.cacheCanvas,this.bgLeft||0,this.bgTop||0,this.bgWidth,this.bgHeight),t.restore()}},{key:"clearContext",value:function(t){t.save(),t.setTransform(1,0,0,1,0,0),t.clearRect(0,0,this.width,this.height),t.restore()}},{key:"renderTop",value:function(){var t=this.upperContext;this.clearContext(t),this.renderTopLayer(t)}},{key:"renderTopLayer",value:function(t){t.save(),t.globalAlpha=this.selectionOpacity,this.selection&&this._groupSelector&&(this._drawSelection(t),this.contextTopDirty=!0),t.restore()}},{key:"_drawSelection",value:function(t){var e=this._groupSelector,i=e.x,r=e.y,n=e.deltaX,s=e.deltaY,o=this.transformMatrix,a=o.a;o.b,o.c;var h=o.d;i=i*a+o.e,r=r*h+o.f,this.selectionColor&&(t.fillStyle=this.selectionColor,t.fillRect(i,r,n*a,s*a)),this.selectionLineWidth&&this.selectionBorderColor&&(t.lineWidth=this.selectionLineWidth,t.strokeStyle=this.selectionBorderColor,t.strokeRect(i,r,n*a,s*a))}},{key:"setDefaultTransform",value:function(t,e){this.defaultTransform={target:e,scaleX:e.scaleX,scaleY:e.scaleY,originX:e.originX,originY:e.originY,width:e.width*e.scaleX,offsetX:t.x-e.left,offsetY:t.y-e.top,left:e.left,top:e.top,height:e.height*e.scaleY,angle:e.angle}}},{key:"set",value:function(t,e){this[t]=e}},{key:"_findTarget",value:function(t,e){for(var i=this,r=t,n=e.map((function(t){return t.getCoords(i.lowerContext)})),s=(n=e[0].target.rotate?n.slice(0,7):n).map((function(t,e){return[t,n[(e+1)%n.length]]})),o=r.x,a=r.y,h=!1,l=0,c=s.length;l<c;l++){var u=s[l][0].x,f=s[l][0].y,d=s[l][1].x,v=s[l][1].y;if(u===o&&f===a||d===o&&v===a)return!0;if(f===v&&f===a&&(u>o&&d<o||u<o&&d>o))return!0;if(f<a&&v>=a||f>=a&&v<a){var m=u+(a-f)*(d-u)/(v-f);if(m===o)return!0;m>o&&(h=!h)}}return!!h}},{key:"setActiveObject",value:function(t){t?this._activeObject=t:(this._activeObject&&this._activeObject.set("isActive",!1),this._activeObject=null)}},{key:"getActiveObject",value:function(){return this._activeObject}},{key:"setCursorFromTarget",value:function(t){this.setCursor("pointer")}},{key:"setCursor",value:function(t){this.upperCanvas.style.cursor=t}},{key:"resetActive",value:function(){this._objects.forEach((function(t){t.set("isActive",!1)}))}},{key:"resetTransformMatrix",value:function(){this.transformMatrix=this.transformMatrix.reset(),this.requestRenderAll()}},{key:"destroy",value:function(){this.offAll()}},{key:"toDataUrl",value:function(){var t=this,e=document.createElement("canvas");e.width=this.lowerCanvas.width,e.height=this.lowerCanvas.height;var i=e.getContext("2d");i.setTransform(this.transformMatrix.clone()),this.clearContext(i),i.save(),this._objects.forEach((function(e){e.render(i,t)})),i.restore();var r=e.toDataURL();return{imgData:i.getImageData(0,0,e.width,e.height),imgUrl:r}}},{key:"toBitMap",value:function(t){var e=this.toDataUrl().imgData,i=e.data;if(t)for(var r=t.map((function(t){return t.r+"-"+t.g+"-"+t.b})),n=function(e){var n=r.findIndex((function(t){return t===i[e]+"-"+i[e+1]+"-"+i[e+2]}));~n?(i[e]=t[n].fill,i[e+1]=0,i[e+2]=0,i[e+3]=255):(i[e]=255,i[e+1]=255,i[e+2]=255,i[e+3]=255)},s=0;s<i.length;s+=4)n(s);else for(var o=0;o<i.length;o+=4)i[o]||i[o+1]||i[o+2]||i[o+3]?(i[o]=0,i[o+1]=0,i[o+2]=0,i[o+3]=255):(i[o]=255,i[o+1]=255,i[o+2]=255,i[o+3]=255);return createImageBitmap(e,0,0,this.upperCanvas.width,this.upperCanvas.height)}},{key:"toObjects",value:function(){return{objects:this._objects.map((function(t){return{points:t.points,scaleX:t.scaleX,scaleY:t.scaleY,translateX:t.translateX,translateY:t.translateY,matrix:t.matrix,transformMatrix:t.transformMatrix,width:t.width,height:t.height,left:t.left,top:t.top,skewX:t.skewX,skewY:t.skewY,angle:t.angle,type:t.type,stroke:t.stroke,fill:t.fill,id:t.id}})),pixelSize:this.pixelSize}}},{key:"setFocusMode",value:function(t){var e=t.base,i=void 0===e?"w":e,r=t.baseW,n=t.baseH,s=t.scale,o=this._activeObject.getShapeCenter(),a=o.x,h=o.y,l=this._activeObject.getMaxAndMinmun(),c=l.maxX,u=l.maxY,f=l.minX,d=l.minY,v={w:this.width,h:this.height},m=r||v.w,g=n||v.h,p=g/(u-d)-.2,y=m/(c-f)-.2;this.transformMatrix=this.transformMatrix.reset(),"w"===i?this.transformMatrix.scaleU(s||y):this.transformMatrix.scaleU(s||p),this.transformMatrix.e+=m/2-a*this.transformMatrix.a,this.transformMatrix.f+=g/2-h*this.transformMatrix.d,this.requestRenderAll()}}]),r}(),D={startPos:null};function W(t,e,i,r){var n=i.width,s=i.height,o=i.left,a=i.top,h=i.originX,l=i.originY,c=i.angle,u=r.x,f=r.y,d=JSON.parse(JSON.stringify(e));return{width:n,height:s,left:o,top:a,originX:h,originY:l,angle:c,msPos:{x:(u-h)*Math.cos(-c)-(f-l)*Math.sin(-c)+h,y:(u-h)*Math.sin(-c)+(f-l)*Math.cos(-c)+l},pointer:e={x:(e.x-h)*Math.cos(-c)-(e.y-l)*Math.sin(-c)+h,y:(e.x-h)*Math.sin(-c)+(e.y-l)*Math.cos(-c)+l},cachePos:d}}var R=function(t,e,i,r,n){console.log(t),e.lockMove||(D.startPos||(D.startPos=n),null!=e&&e.left&&null!=e&&e.top?(e.originX+=i.x-D.startPos.x,e.originY+=i.y-D.startPos.y):e.points.forEach((function(t){t.x+=i.x-D.startPos.x,t.y+=i.y-D.startPos.y})),D.startPos=i)},z=function(t,e,i){t.addEventListener(e,i)},F=function(t){for(var e=arguments.length,i=new Array(e>1?e-1:0),r=1;r<e;r++)i[r-1]=arguments[r];return t.removeEventListener.apply(t,i)},q=function(t){o(r,L);var e=c(r);function r(t,n){var o;return i(this,r),s(l(o=e.call(this,t,n||{})),"targetCornerIndex",-1),s(l(o),"mousedownPos",{x:0,y:0}),s(l(o),"corner",null),s(l(o),"_groupSelector",null),s(l(o),"removeUpperCanvasMoveEvent",(function(){})),o.objectMoving=!1,o.initBindEvents(),o.initEvents(),o}return n(r,[{key:"initBindEvents",value:function(){var t=this;["handleMouseDown","handleMouseMove","handleMouseUp","handleMouseWheel"].forEach((function(e){t[e]=t[e].bind(t)}))}},{key:"initEvents",value:function(){this.upperCanvas instanceof HTMLElement&&(z(this.upperCanvas,"mousedown",this.handleMouseDown),z(this.upperCanvas,"mousemove",this.handleMouseMove),z(this.upperCanvas,"mouseup",this.handleMouseUp),z(this.upperCanvas,"mousewheel",this.handleMouseWheel),this.preventDefault&&z(this.upperCanvas,"contextmenu",(function(t){t.preventDefault()})))}},{key:"handleMouseDown",value:function(t){var e=this,i=this.getMousePosInfo(t);if(2!==t.button){this.emit("mouse:down",i);var r=this.getPointer(i);this.mousedownPos=r;var n=this.getActiveObject();if(this.corner&&n&&!this.skipFindTarget)return this.corner.isEditing=!0,this.setDefaultTransform(r,n),this.corner.mousedownHandler&&this.corner.mousedownHandler(this.corner,this.corner.target,this.mousedownPos),this.emit("control.mouse:down",this.corner.getCoords()),void this.requestRenderAll();if(!this.corner&&!this.skipFindTarget){var s=this.findTarget(r);s&&s!==n&&(n&&n.set("isActive",!1),this.setActiveObject(s),this.emit("obj:activeted",s),s.set("isActive",!0)),s||(this.setActiveObject(null),this.emit("obj:deactive",s)),this.requestRenderAll()}this._activeObject&&!this.skipFindTarget&&(this.objectMoving=!0),this.selection&&!this.getActiveObject()&&(this._groupSelector={x:r.x,y:r.y,deltaX:0,deltaY:0}),z(this.upperCanvas,"mousemove",this.handleMouseMove),this.requestRenderAll()}else if(this.emit("mouse:down",i),this.rightMove){var o=this.getPointer(i),a=function(t){var r=e.getMousePosInfo(t),n=e.getPointer(r),s=n.x-o.x,a=n.y-o.y;e.transformMatrix.translate(s,a),e.requestRenderAll(),e.emit("mouse:drag",i)},h=function t(){F(e.upperCanvas,"mousemove",a),F(e.upperCanvas,"mouseup",t)};this.removeUpperCanvasMoveEvent=h,z(this.upperCanvas,"mousemove",a),z(this.upperCanvas,"mouseup",h)}}},{key:"handleMouseMove",value:function(t){var e,i=this.getMousePosInfo(t),r=this.getPointer(i);if(this._activeObject&&!this.skipFindTarget&&(null==this||null===(e=this.corner)||void 0===e||!e.isEditing)){for(var n,s=0;s<this._activeObject.coords.length;s++){var o=this._activeObject.coords[s];if(o.isPointInControl(this.getPointer(t),this.transformMatrix)){this.corner=o;var a=this.corner.cursorHandler&&this.corner.cursorHandler(this._activeObject,this.corner);this.setCursor(a||o.cursor);break}this.setCursor("default"),this.corner=null}if(null!==(n=this._activeObject.centerControlCoords)&&void 0!==n&&n.length&&!this.corner)for(var h=0;h<this._activeObject.centerControlCoords.length;h++){var l=this._activeObject.centerControlCoords[h];if(l.isPointInControl(this.getPointer(t),this.transformMatrix)){this.corner=l,this.setCursor(l.cursor);break}this.setCursor("default"),this.corner=null}}this.corner&&this.corner.isEditing&&!this.skipFindTarget&&(this.corner.mousemoveHandler&&this.corner.mousemoveHandler(this.corner,this.corner.target,r,this.defaultTransform,this.mousedownPos),this.emit("control.mouse:move",this.corner.getCoords()),this.requestRenderAll()),this.objectMoving&&this._activeObject&&(R(this.corner,this._activeObject,r,this.defaultTransform,this.mousedownPos),this.requestRenderAll());var c=this._groupSelector;if(c&&(c.deltaX=r.x-c.x,c.deltaY=r.y-c.y,this.renderTop()),!this.corner){var u=this.findTarget(r);u?(this.setCursor("move"),i.target=u,this.emit("obj:mouseover",u)):(this.setCursor("default"),this.emit("obj:mouseout",u))}this.emit("mouse:move",i)}},{key:"handleMouseUp",value:function(t){var e=this.getMousePosInfo(t);this.emit("mouse:up",e),this.corner&&this.corner.isEditing&&!this.skipFindTarget&&this._activeObject.emit("obj:edit",this._activeObject),this.objectMoving&&this._activeObject&&this._activeObject.emit("obj:move",this._activeObject),this.objectMoving=!1,D.startPos=null,2!==t.button&&(this.corner=null,this.contextTopDirty&&(this.emit("obj:selection",this._groupSelector),this.clearContext(this.upperContext),this._groupSelector=null))}},{key:"handleMouseWheel",value:function(t){var e,i,r=this.getMousePosInfo(t);if(null!==(e=this.wheel)&&void 0!==e&&e.scroll){window.addEventListener("mousewheel",(function t(e){"CANVAS"===e.target.tagName?e.preventDefault():window.removeEventListener("mousewheel",t,{passive:!1})}),{passive:!1})}if(null!==(i=this.wheel)&&void 0!==i&&i.scale){var n=this.getPointer(r),s=r.deltaY<0?1.2:.8;this.transformMatrix.translate(n.x,n.y).scaleU(s),this.transformMatrix.a>this.wheel.max&&this.transformMatrix.scaleU(this.wheel.max/this.transformMatrix.a),this.transformMatrix.a<this.wheel.min&&this.transformMatrix.scaleU(this.wheel.min/this.transformMatrix.a),this.transformMatrix.translate(-n.x,-n.y),this.requestRenderAll()}this.emit("mouse:wheel",r)}},{key:"getMousePosInfo",value:function(t){return{clientX:t.clientX,clientY:t.clientY,type:t.type,button:t.button,offsetX:t.offsetX,offsetY:t.offsetY,ctrlKey:t.ctrlKey,altKey:t.altKey,shiftKey:t.shiftKey,deltaY:t.deltaY}}},{key:"getPointer",value:function(t){var e,i=null===(e=this.upperCanvas)||void 0===e?void 0:e.getBoundingClientRect();return{x:(t.clientX-i.left-this.transformMatrix.e)/this.transformMatrix.a,y:(t.clientY-i.top-this.transformMatrix.f)/this.transformMatrix.d}}},{key:"findTarget",value:function(t){for(var e=this._objects.length-1;e>=0;e--){var i,r,n;if(!this._objects[e].notNeedFindTarget)if(null!==(i=this._objects[e])&&void 0!==i&&i.isPointInPath){if(this._objects[e].isPointInPath(t))return this._objects[e]}else if(null!==(r=this._objects[e])&&void 0!==r&&null!==(r=r.coords)&&void 0!==r&&r.length&&null!==(n=this._objects[e])&&void 0!==n&&n.coords&&this._findTarget(t,this._objects[e].coords))return this._objects[e]}}},{key:"destroy",value:function(){F(this.upperCanvas,"mousedown",this.handleMouseDown),F(this.upperCanvas,"mousemove",this.handleMouseMove),F(this.upperCanvas,"mouseup",this.handleMouseUp),F(this.upperCanvas,"mousewheel",this.handleMouseWheel)}}]),r}(),U=function(t){o(r,g);var e=c(r);function r(t){var n;return i(this,r),s(l(n=e.call(this)),"type","Object"),s(l(n),"scaleX",1),s(l(n),"scaleY",1),s(l(n),"skewX",0),s(l(n),"skewY",0),s(l(n),"translateX",0),s(l(n),"translateY",0),s(l(n),"isActive",!1),s(l(n),"displayGraph",!0),s(l(n),"lineCap","round"),s(l(n),"lineJoin","round"),s(l(n),"isDash",[]),s(l(n),"isDouble",[1]),s(l(n),"fill",""),s(l(n),"stroke",""),s(l(n),"opacity",1),s(l(n),"lineWidth",1),s(l(n),"left",0),s(l(n),"top",0),s(l(n),"width",0),s(l(n),"height",0),s(l(n),"angle",0),s(l(n),"originX",0),s(l(n),"originY",0),s(l(n),"offsetX",0),s(l(n),"offsetY",0),s(l(n),"coords",[]),s(l(n),"rotate",!1),s(l(n),"points",[]),s(l(n),"ratio",{x:1,y:1}),s(l(n),"cornerSize",10),s(l(n),"cornerStyle","rect"),s(l(n),"cornerBorderColor","#000"),s(l(n),"cornerColor",""),s(l(n),"cornerOpacity",1),s(l(n),"cornerDisplay",!0),s(l(n),"transformMatrix",{a:1,b:0,c:0,d:1,e:0,f:0}),s(l(n),"notNeedFindTarget",!1),s(l(n),"needControl",!0),s(l(n),"lockMove",!1),n.setOptions(t),n.id=function(){for(var t="ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz12334567890-_",e="",i=0;i<8;i++)e+=t[Math.floor(65*Math.random())];return e}(),n}return n(r,[{key:"setOptions",value:function(t){for(var e in t)this[e]=t[e];this.left&&this.top&&(this.originX=this.left+this.width/2,this.originY=this.top+this.height/2)}},{key:"render",value:function(t,e){this.displayGraph&&(this.ratio=e.ratio,this.transformMatrix=e.transformMatrix,t.save(),t.lineWidth=this.lineWidth/Math.abs(this.transformMatrix.a),t.lineCap=this.lineCap,t.lineJoin=this.lineJoin,t.globalAlpha=this.opacity,this.transform(t),this._render(t),t.restore(),this.needControl&&this.setCoords&&this.setCoords(t),this.isActive&&this.needControl&&this._drawControls(t),this.isActive&&this._drawBorders())}},{key:"transform",value:function(t){t.translate(this.originX,this.originY),t.rotate(this.angle)}},{key:"_render",value:function(t){}},{key:"_drawControls",value:function(t){var e,i=this;t.save(),this.coords.forEach((function(e){e.display&&e.drawControl(t,i.angle)})),(null===(e=this.centerControlCoords)||void 0===e?void 0:e.length)&&this.centerControlCoords.forEach((function(e){e.drawControl(t,i.angle)})),t.restore()}},{key:"_drawBorders",value:function(){}},{key:"set",value:function(t,e){this._set(t,e)}},{key:"_set",value:function(t,e){this[t]=e}},{key:"strokeOrFill",value:function(t){this.stroke&&t.stroke(),this.fill&&t.fill()}},{key:"getCommonConfig",value:function(){return{cornerSize:this.cornerSize,cornerStyle:this.cornerStyle,cornerColor:this.cornerColor,cornerBorderColor:this.cornerBorderColor,cornerOpacity:this.cornerOpacity,display:this.cornerDisplay}}},{key:"getBoundingBox",value:function(){if("Text"!==this.type){if(0 in this.points&&this.points){var t=this.getMaxAndMinmun(),e=t.minX,i=t.minY,r=t.maxX,n=t.maxY;return{minX:e,minY:i,maxX:r,maxY:n,id:this.id,w:r-e,h:n-i}}console.error("当前形状"+this.type+"没有points字段")}}},{key:"getMaxAndMinmun",value:function(){var t=[],e=[];this.points.forEach((function(i){var r=i.x,n=i.y;t.push(r),e.push(n)}));var i=Math.max.apply(null,t),r=Math.max.apply(null,e);return{maxX:i,minX:Math.min.apply(null,t),maxY:r,minY:Math.min.apply(null,e)}}},{key:"getShapeCenter",value:function(){var t=this.getMaxAndMinmun(),e=t.minX,i=t.minY;return{x:(e+t.maxX)/2,y:(i+t.maxY)/2}}}]),r}(),N=function(t){o(r,g);var e=c(r);function r(t){var n;return i(this,r),s(l(n=e.call(this)),"cornerSize",10),s(l(n),"cornerStyle","square"),s(l(n),"cornerBorderColor","#000"),s(l(n),"cornerColor",""),s(l(n),"cornerOpacity",1),s(l(n),"left",0),s(l(n),"top",0),s(l(n),"center",null),s(l(n),"cursor","move"),s(l(n),"isEditing",!1),s(l(n),"display",!0),s(l(n),"id",null),s(l(n),"mousemoveHandler",(function(){return null})),s(l(n),"mousedownHandler",(function(){return null})),s(l(n),"mouseupHandler",(function(){return null})),n.setOptions(t),n}return n(r,[{key:"setOptions",value:function(t){for(var e in t)this[e]=t[e]}},{key:"drawControl",value:function(t,e){var i=t.getTransform();t.save(),t.translate(this.left,this.top),t.lineWidth=1/i.a,t.globalAlpha=this.cornerOpacity,t.rotate(e),t.beginPath(),t.strokeStyle=this.cornerBorderColor,t.fillStyle=this.cornerColor,"circle"===this.cornerStyle?t.arc(0,0,this.cornerSize/2/i.a,0,2*Math.PI,!1):t.rect(-this.cornerSize/2/i.a,-this.cornerSize/2/i.a,this.cornerSize/i.a,this.cornerSize/i.a),t.closePath(),this.cornerBorderColor&&t.stroke(),this.cornerColor&&t.fill(),t.restore()}},{key:"isPointInControl",value:function(t,e){var i=t.x,r=t.y,n=e.a,s=this.left,o=this.top;return i>=s-this.cornerSize/2/n&&i<=s+this.cornerSize/2/n&&r>=o-this.cornerSize/2/n&&r<=o+this.cornerSize/2/n}},{key:"setAngle",value:function(t){var e=this.center,i=e.x,r=e.y,n=(this.left-i)*Math.cos(t)-(this.top-r)*Math.sin(t)+i,s=(this.left-i)*Math.sin(t)+(this.top-r)*Math.cos(t)+r;this.left=n,this.top=s}},{key:"getCoords",value:function(){return{x:this.left,y:this.top,id:this.id}}},{key:"set",value:function(t,e){this[t]=e}},{key:"updatePointPosition",value:function(){}}]),r}(),J=function(t,e){var i=t.matrix,r=i.a,n=i.b,s=Math.atan2(n,r)/(Math.PI/180)+Math.atan2(e.y,e.x)/(Math.PI/180)+360,o=["e","se","s","sw","w","nw","n","ne","e"][Math.round(s%360/45)%4];return"".concat(o,"-resize")},K=function(t,e,i,r,n){var s,o=W(0,i,r,n),a=o.width,h=o.originX,l=o.originY,c=o.angle,u=o.msPos,f=o.pointer;s="left-center"===t.base?(a+f.x-u.x)/e.width:(a-(f.x-u.x))/e.width,e.set("scaleX",s);var d=h+(f.x-u.x)/2,v={x:(d-h)*Math.cos(c)-(l-l)*Math.sin(c)+h,y:(d-h)*Math.sin(c)+(l-l)*Math.cos(c)+l};e.set("originX",v.x),e.set("originY",v.y)},G=function(t,e,i,r,n){var s,o=W(0,i,r,n),a=o.height,h=o.originX,l=o.originY,c=o.angle,u=o.msPos,f=o.pointer;s="center-top"===t.base?(a+f.y-u.y)/e.height:(a+u.y-f.y)/e.height,e.set("scaleY",s);var d=l+(f.y-u.y)/2,v={x:(h-h)*Math.cos(c)-(d-l)*Math.sin(c)+h,y:(h-h)*Math.sin(c)+(d-l)*Math.cos(c)+l};e.set("originX",v.x),e.set("originY",v.y)},V=function(t,e,i,r,n){var s,o,a=W(0,i,r,n),h=a.width,l=a.height,c=a.originX,u=a.originY,f=a.angle,d=a.msPos,v=a.pointer;switch(t.base){case"left-top":s=(h+v.x-d.x)/e.width,o=(l+v.y-d.y)/e.height;break;case"right-bottom":s=(h+d.x-v.x)/e.width,o=(l+d.y-v.y)/e.height;break;case"left-bottom":s=(h+v.x-d.x)/e.width,o=(l+d.y-v.y)/e.height;break;case"right-top":s=(h+d.x-v.x)/e.width,o=(l+v.y-d.y)/e.height}e.set("scaleX",s),e.set("scaleY",o);var m=u+(v.y-d.y)/2,g=c+(v.x-d.x)/2,p={x:(g-c)*Math.cos(f)-(m-u)*Math.sin(f)+c,y:(g-c)*Math.sin(f)+(m-u)*Math.cos(f)+u};e.set("originX",p.x),e.set("originY",p.y)},Q=function(t,e,i,r,n){var s=W(0,i,r,n),o=s.originX,a=s.originY,h=s.cachePos;D.startPos||(D.startPos=n);var l=Math.atan2(D.startPos.y-a,D.startPos.x-o),c=Math.atan2(h.y-a,h.x-o)-l;e.set("angle",e.angle+c),D.startPos=h,e.angle,Math.PI,e.angle,Math.PI},Z=function(){function t(e,r){i(this,t),this.x=e,this.y=r}return n(t,[{key:"add",value:function(t){return this.x+=t,this.y+=t,this}},{key:"addApplyPos",value:function(t){var e=t.x,i=t.y;return this.x+=e,this.y+=i,this}},{key:"del",value:function(t){return this.x-=t,this.y-=t,this}},{key:"delApplyPos",value:function(t){var e=t.x,i=t.y;return this.x-=e,this.y-=i,this}},{key:"rotate",value:function(t,e){return{x:(this.x-e.x)*Math.cos(t)-(this.y-e.y)*Math.sin(t)+e.x,y:(this.x-e.x)*Math.sin(t)+(this.y-e.y)*Math.cos(t)+e.y}}}]),t}(),$=function(t){o(a,U);var r=c(a);function a(t){var e;return i(this,a),s(l(e=r.call(this,t)),"textX",void 0),s(l(e),"textY",void 0),e.type="Rect",e}return n(a,[{key:"_render",value:function(t){t.save();var e=-this.width*this.scaleX/2,i=-this.height*this.scaleY/2,r=this.width*this.scaleX,n=this.height*this.scaleY;t.beginPath(),t.lineWidth=this.lineWidth/Math.abs(this.transformMatrix.a),t.strokeStyle=this.stroke,t.fillStyle=this.fill,this.isUseMatrix||(e/=this.transformMatrix.a,i/=this.transformMatrix.a,r/=this.transformMatrix.a,n/=this.transformMatrix.a),this.radius?t.roundRect(e,i,r,n,this.radius):t.rect(e,i,r,n),t.closePath(),this.strokeOrFill(t),t.restore(),this.matrix=t.getTransform()}},{key:"setCoords",value:function(){var t=this,i=this.width*this.scaleX,r=this.height*this.scaleY,n=this.originX,s=this.originY,o={x:this.originX,y:this.originY},a=this.getCommonConfig();this.coords=[new N(e({x:-i/2,y:-r/2,left:n-i/2,top:s-r/2,target:this,base:"right-bottom",cursorHandler:J,mousemoveHandler:V},a)),new N(e({x:0,y:-r/2,left:n,top:s-r/2,target:this,base:"center-bottom",cursorHandler:J,mousemoveHandler:G},a)),new N(e({x:i/2,y:-r/2,left:n+i/2,top:s-r/2,target:this,base:"left-bottom",cursorHandler:J,mousemoveHandler:V},a)),new N(e({x:i/2,y:0,left:n+i/2,top:s,target:this,base:"left-center",cursorHandler:J,mousemoveHandler:K},a)),new N(e({x:i/2,y:r/2,left:n+i/2,top:s+r/2,target:this,base:"left-top",cursorHandler:J,mousemoveHandler:V},a)),new N(e({x:0,y:r/2,left:n,top:s+r/2,target:this,base:"center-top",cursorHandler:J,mousemoveHandler:G},a)),new N(e({x:-i/2,y:r/2,left:n-i/2,top:s+r/2,target:this,base:"right-top",cursorHandler:J,mousemoveHandler:V},a)),new N(e({x:-i/2,y:0,left:n-i/2,top:s,target:this,base:"right-center",cursorHandler:J,mousemoveHandler:K},a))];var h=this.coords.map((function(t){return t.getCoords()})),l=Math.min.apply(Math,f(h.map((function(t){return t.x})))),c=Math.min.apply(Math,f(h.map((function(t){return t.y}))));this.textX=l,this.textY=c,this.rotate&&this.coords.push(new N(e({left:n,top:c-40,target:this,base:"center-center",cursor:"crosshair",mousemoveHandler:Q},a))),this.coords.forEach((function(e,i){var r=new Z(e.left,e.top).rotate(t.angle,o),n=r.x,s=r.y;e.left=n,e.top=s})),this.points=[this.coords[0].getCoords(),this.coords[2].getCoords(),this.coords[4].getCoords(),this.coords[6].getCoords()]}}]),a}(),tt=function(t){o(a,U);var r=c(a);function a(t){var e;return i(this,a),s(l(e=r.call(this,t)),"centerControlPoints",[]),s(l(e),"needCenterControl",!0),s(l(e),"centerPointsStyle","square"),s(l(e),"centerPointsSize",10),s(l(e),"centerPointsStroke","#f00"),s(l(e),"centerPointsFill","#fff"),s(l(e),"needArrow",!1),s(l(e),"textX",void 0),s(l(e),"textY",void 0),e.type="Polygon",e.doubleLineDistance=5,e.setOptions(t),e}return n(a,[{key:"_render",value:function(t){var e,i;if(t.save(),t.globalCompositeOperation=this.globalCompositeOperation||"source-over",t.beginPath(),t.strokeStyle=this.stroke||"#000",t.fillStyle=this.fill||"#000",this.points.forEach((function(e,i){t[i?"lineTo":"moveTo"](e.x,e.y)})),this.isDash.length&&(null===(e=this.isDouble)||void 0===e||!e[0])){var r=u(this.isDash,2),n=r[0],s=r[1];t.setLineDash([n/this.transformMatrix.a,s/this.transformMatrix.a])}if("Line"===this.type&&this.strokeOrFill(t),t.closePath(),"Polygon"===this.type&&this.strokeOrFill(t),t.restore(),(null===(i=this.isDouble)||void 0===i?void 0:i.length)>1){var o;if(t.save(),t.transform(1,0,0,1,this.doubleLineDistance/this.transformMatrix.a,0),t.globalCompositeOperation=this.globalCompositeOperation||"source-over",t.beginPath(),t.strokeStyle=this.stroke||"#000",t.fillStyle=this.fill||"#000",this.points.forEach((function(e,i){t[i?"lineTo":"moveTo"](e.x,e.y)})),this.isDash.length&&(null===(o=this.isDouble)||void 0===o||!o[1])){var a=u(this.isDash,2),h=a[0],l=a[1];t.setLineDash([h/this.transformMatrix.a,l/this.transformMatrix.a])}"Line"===this.type&&this.strokeOrFill(t),t.closePath(),"Polygon"===this.type&&this.strokeOrFill(t),t.restore()}this.needArrow&&this.drawArrow(t,this.points[0].x,this.points[0].y,(this.points[0].x+this.points[1].x)/2,(this.points[0].y+this.points[1].y)/2),this.needCenterControl&&this.renderCenterControl(t)}},{key:"drawArrow",value:function(t,e,i,r,n){t.save(),t.beginPath();var s=function(t,e,i,r){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:50,s=arguments.length>5?arguments[5]:void 0,o=Math.atan2(r-e,i-t);return[i-n*Math.cos(o+s*Math.PI/180),r-n*Math.sin(o+s*Math.PI/180),i-n*Math.cos(o-s*Math.PI/180),r-n*Math.sin(o-s*Math.PI/180)]},o=u(s(e,i,r,n,15,30),4),a=o[0],h=o[1],l=o[2],c=o[3],f=this.transformMatrix;f.a,f.b,f.c,f.d,f.e,f.f,t.moveTo(a,h),t.lineTo(r,n),t.lineTo(l,c),t.lineWidth=5/this.transformMatrix.a,t.strokeStyle=this.stroke,t.fillStyle="#000",t.globalAlpha=1,t.stroke(),t.closePath(),t.restore()}},{key:"setCoords",value:function(){var t=this;this.coords=this.points.map((function(i,r){return new N(e({left:i.x,top:i.y,id:i.id,target:t,cursor:"pointer",index:r,mousemoveHandler:t.editPolygon},t.getCommonConfig()))}))}},{key:"renderCenterControl",value:function(t){var e=this;this.centerControlPoints=this.points.map((function(t,i){return[t,e.points[(i+1)%e.points.length]]})).map((function(t){var e=u(t,2),i=e[0],r=e[1];return{x:(i.x+r.x)/2,y:(i.y+r.y)/2}})),"Line"===this.type&&this.centerControlPoints.pop(),this.centerControlCoords=this.centerControlPoints.map((function(t,i){return new N({left:t.x,top:t.y,target:e,cursor:"copy",index:i,cornerStyle:e.centerPointsStyle,cornerSize:e.centerPointsSize,cornerBorderColor:e.centerPointsStroke,cornerColor:e.centerPointsFill,mousedownHandler:e.editPolygonCenter})}))}},{key:"editPolygon",value:function(t,e,i){t.left=i.x,t.top=i.y,e.points[t.index]=t.getCoords()}},{key:"editPolygonCenter",value:function(t,e){e.points.splice(t.index+1,0,t.getCoords())}}]),a}(),et=function(t){o(r,tt);var e=c(r);function r(t){var n;return i(this,r),(n=e.call(this,t)).type="Line",n.setOptions(t),n}return n(r,[{key:"isPointInPath",value:function(t){for(var e=this,i=this.points.map((function(t,i){return[t,e.points[(i+1)%e.points.length]]})),r=0,n=i.length;r<n;r++){var s=i[r][0],o=i[r][1],a=Math.sqrt(Math.pow(t.x-s.x,2)+Math.pow(t.y-s.y,2));if(Math.sqrt(Math.pow(t.x-o.x,2)+Math.pow(t.y-o.y,2))+a-Math.sqrt(Math.pow(o.x-s.x,2)+Math.pow(o.y-s.y,2))<.5/this.transformMatrix.a)return!0}}}]),r}(),it=function(t){o(r,U);var e=c(r);function r(t){var n;return i(this,r),(n=e.call(this,t)).type="Dot",n}return n(r,[{key:"_render",value:function(t){t.save(),t.beginPath(),t.arc(0,0,this.radius/this.transformMatrix.a,0,2*Math.PI),t.strokeStyle=this.stroke,t.fillStyle=this.fill,t.closePath(),this.strokeOrFill(t),t.restore()}},{key:"setCoords",value:function(){this.coords=[new N({left:this.originX,top:this.originY,target:this,cursor:"pointer",mousemoveHandler:R})]}},{key:"isPointInPath",value:function(t){var e=this.radius/this.transformMatrix.a;if(t.x<this.originX+e&&t.y<this.originY+e&&t.x>this.originX-e&&t.y>this.originY-e)return!0}}]),r}(),rt=function(t){o(r,U);var e=c(r);function r(t){var n;i(this,r),n=e.call(this,t);var s=t.points;return n.width=Math.abs(s[0].x-s[1].x),n.height=Math.abs(s[0].y-s[1].y),n.type="Arrow",n}return n(r,[{key:"_render",value:function(t){var e=t.getTransform();t.save(),t.beginPath();var i=this.points[0],r=i.x,n=i.y,s=this.points[1],o=s.x,a=s.y,h=function(t,e,i,r){var n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:50,s=arguments.length>5?arguments[5]:void 0,o=Math.atan2(r-e,i-t);return[i-n*Math.cos(o+s*Math.PI/180),r-n*Math.sin(o+s*Math.PI/180),i-n*Math.cos(o-s*Math.PI/180),r-n*Math.sin(o-s*Math.PI/180)]}(r,n,o,a,20,30),l=u(h,4),c=l[0],f=l[1],d=l[2],v=l[3];t.moveTo(r,n),t.lineTo(o,a),t.moveTo(c,f),t.lineTo(o,a),t.lineTo(d,v),t.lineWidth=this.lineWidth/e.a,t.strokeStyle=this.stroke,t.globalAlpha=this.opacity,t.stroke(),t.closePath(),t.restore()}},{key:"setCoords",value:function(t){var e,i,r=this.width*this.scaleX,n=this.height*this.scaleY,s={x:e=this.points[0].x<this.points[1].x?this.points[0].x+this.width/2:this.points[1].x+this.width/2,y:i=this.points[0].y<this.points[1].y?this.points[0].y+this.height/2:this.points[1].y+this.height/2};this.coords=[new N({x:e-r/2,y:i-n/2,center:s,target:this,base:"right-bottom",cursor:"not-allowed"}),new N({x:e,y:i-n/2,center:s,target:this,base:"center-bottom",cursor:"not-allowed"}),new N({x:e+r/2,y:i-n/2,center:s,target:this,base:"left-bottom",cursor:"not-allowed"}),new N({x:e+r/2,y:i,center:s,target:this,base:"left-center",cursor:"not-allowed"}),new N({x:e+r/2,y:i+n/2,center:s,target:this,base:"left-top",cursor:"not-allowed"}),new N({x:e,y:i+n/2,center:s,target:this,base:"center-top",cursor:"not-allowed"}),new N({x:e-r/2,y:i+n/2,center:s,target:this,base:"right-top",cursor:"not-allowed"}),new N({x:e-r/2,y:i,center:s,target:this,base:"right-center",cursor:"not-allowed"})],this.isActive&&(t.beginPath(),this.coords.forEach((function(e,i){t[i?"lineTo":"moveTo"](e.x,e.y)})),t.closePath(),t.stroke())}}]),r}(),nt=function(t){o(r,U);var e=c(r);function r(t){var n;return i(this,r),s(l(n=e.call(this,t)),"xScales",[]),s(l(n),"yScales",[]),s(l(n),"coords",[]),s(l(n),"fontSize",12),n.type="Ruler",n.fontSize=t.fontSize,n}return n(r,[{key:"_render",value:function(t){var e,i,r,n,s;t.strokeStyle=this.stroke,t.fillStyle=this.stroke,this.transformMatrix.a>5?(i=t.canvas.width,r=t.canvas.height,n=1,s=10):this.transformMatrix.a<.6?(i=t.canvas.width/50,r=t.canvas.height/50,n=50,s=100):(i=t.canvas.width/5,r=t.canvas.height/5,n=5,s=50),t.save(),t.setTransform(this.transformMatrix.a,0,0,this.transformMatrix.a,this.transformMatrix.e,0),e=this.fontSize/this.transformMatrix.a,t.font="bold ".concat(e,"px Alibaba_PuHuiTi_Regular");for(var o=0;o<=i;o++){if(t.beginPath(),t.moveTo(o*n,0),o*n%s==0){t.lineTo(o*n,15/this.transformMatrix.a);var a=t.measureText(o*n).width;t.fillText(o*n,o*n-a/2,30/this.transformMatrix.a)}else t.lineTo(o*n,5/this.transformMatrix.a);t.stroke(),t.closePath()}t.restore(),t.save(),t.setTransform(this.transformMatrix.a,0,0,this.transformMatrix.a,0,this.transformMatrix.f),e=this.fontSize/this.transformMatrix.a,t.font="bold ".concat(e,"px Alibaba_PuHuiTi_Regular");for(var h=0;h<=r;h++){if(t.beginPath(),t.moveTo(0,h*n),h*n%s==0)t.lineTo(15/this.transformMatrix.a,h*n),t.measureText(h*n).width,t.fillText(h*n,20/this.transformMatrix.a,h*n+5/this.transformMatrix.a);else t.lineTo(5/this.transformMatrix.a,h*n);t.stroke(),t.closePath()}t.restore()}}]),r}(),st=function(t){o(r,U);var e=c(r);function r(t){var n;return i(this,r),s(l(n=e.call(this,t)),"fillText",!0),s(l(n),"relationShipId",""),s(l(n),"fontSize",20),s(l(n),"parent",null),s(l(n),"textX",0),s(l(n),"textY",0),s(l(n),"text",""),n.type="Text",n.setOptions(t),n}return n(r,[{key:"_render",value:function(t){var e,i;t.save(),t.translate((null===(e=this.parent)||void 0===e?void 0:e.textX)||this.textX,(null===(i=this.parent)||void 0===i?void 0:i.textY)||this.textY);var r=Math.ceil(this.fontSize/this.transformMatrix.a);t.font="bold ".concat(r,"px Alibaba_PuHuiTi_Regular"),t.beginPath(),t.fillStyle=this.fill,this.fillText&&t.fillText(this.text,this.offsetX/this.transformMatrix.a,(-5+this.offsetY)/this.transformMatrix.a),t.closePath(),t.restore()}},{key:"isPointInPath",value:function(){}}]),r}(),ot=function(t){o(s,U);var r=c(s);function s(t){var e;return i(this,s),(e=r.call(this,t)).imgBitMap=t.imgBitMap,e.globalCompositeOperation=t.globalCompositeOperation,e}return n(s,[{key:"_render",value:function(t){t.globalCompositeOperation=this.globalCompositeOperation||"source-over",t.save(),t.strokeStyle=this.stroke||"#000",t.fillStyle=this.fill||"#000",t.drawImage(this.imgBitMap,this.x,this.y,this.width,this.height),t.restore()}},{key:"setCoords",value:function(){var t=this;this.coords=this.points.map((function(i,r){return new N(e({left:i.x,top:i.y,target:t,cursor:"pointer",index:r},t.getCommonConfig()))}))}}]),s}(),at=function(t){o(s,U);var r=c(s);function s(t){var e;return i(this,s),(e=r.call(this,t)).type="Image",e.baseWH=t.baseWH||!1,e.whMatrix=t.whMatrix||!1,e}return n(s,[{key:"_render",value:function(t){if(t.beginPath(),this.imgOptions.length){if(2===this.imgOptions.length){var e=u(this.imgOptions,2),i=e[0],r=e[1];t.drawImage(this.img,i,r)}else if(4===this.imgOptions.length){var n=u(this.imgOptions,4),s=n[0],o=n[1],a=n[2],h=n[3];this.baseWH?(s-=Math.ceil(a/2/this.transformMatrix.a),o-=Math.ceil(h/2/this.transformMatrix.a),a=Math.ceil(a/this.transformMatrix.a),h=Math.ceil(h/this.transformMatrix.a)):this.whMatrix&&(a=Math.ceil(a/this.transformMatrix.a),h=Math.ceil(h/this.transformMatrix.a)),t.drawImage(this.img,s,o,a,h)}else if(8===this.imgOptions.length){var l=u(this.imgOptions,8),c=l[0],f=l[1],d=l[2],v=l[3],m=l[4],g=l[5],p=l[6],y=l[7];this.baseWH?(c-=Math.ceil(d/2/this.transformMatrix.a),f-=Math.ceil(v/2/this.transformMatrix.a),d=Math.ceil(d/this.transformMatrix.a),v=Math.ceil(v/this.transformMatrix.a)):this.whMatrix&&(d=Math.ceil(d/this.transformMatrix.a),v=Math.ceil(v/this.transformMa