@leafer-in/editor 1.0.0-rc.2 → 1.0.0-rc.20

package/dist/editor.min.js

@@ -1 +1 @@
-this.LeaferIN=this.LeaferIN||{},this.LeaferIN.editor=function(t,e){"use strict";var i;!function(t){t[t.topLeft=0]="topLeft",t[t.top=1]="top",t[t.topRight=2]="topRight",t[t.right=3]="right",t[t.bottomRight=4]="bottomRight",t[t.bottom=5]="bottom",t[t.bottomLeft=6]="bottomLeft",t[t.left=7]="left"}(i||(i={}));const{scaleOfOuter:s,reset:o}=e.MatrixHelper,{topLeft:r,top:n,topRight:a,right:h,bottomRight:l,bottom:c,bottomLeft:g,left:d}=i,y={};const{topLeft:u,top:_,topRight:v,right:x,bottomRight:b,bottom:f,bottomLeft:p,left:R}=i;function E(t,e){const i=t.enterPoint;if(!i||!t.target||!t.visible)return;let{rotation:s}=t,{resizeCursor:o,rotateCursor:r,resizeable:n}=t.config;const a=t.tool.getMirrorData(t),{__direction:h,__isResizePoint:l}=i.__;t.enterPoint=i,l&&(e.metaKey||e.ctrlKey||!n)&&(o=r),(a.x||a.y)&&(z(o=[...o],a.x,a.y),z(r=[...r],a.y,a.x),a.x+a.y===1&&(s=-s));let c=(h+Math.round(s/45))%8;c<0&&(c+=8),i.cursor=l?o[c]:r[c]}function z(t,e,i){if(e){const e=t[_],i=t[u],s=t[v];t[_]=t[f],t[u]=t[p],t[v]=t[b],t[f]=e,t[p]=i,t[b]=s}if(i){const e=t[R],i=t[u],s=t[p];t[R]=t[x],t[u]=t[v],t[p]=t[b],t[x]=e,t[v]=i,t[b]=s}}const w={name:"RectTool",getMirrorData(t){const{scaleX:e,scaleY:i}=t.target;return{x:e<0?1:0,y:i<0?1:0}},resize(t){const{target:e,bounds:i,resizeType:s,old:o}=t,{x:r,y:n,width:a,height:h}=i,l={x:r-o.x,y:n-o.y};e.innerToWorld(l,null,!0,e.parent),e.x+=l.x,e.y+=l.y,"scale"===s?(e.scaleX*=a/o.width,e.scaleY*=h/o.height):(a<0?(e.width=-a,e.scaleX*=-1):e.width!==a&&(e.width=a),h<0?(e.height=-h,e.scaleY*=-1):e.height!==h&&(e.height=h))},rotate(t){const{target:e,rotation:i,origin:s}=t;e.rotateOf(s,i)},update(t){const{target:i,config:s,rotatePoints:o,targetRect:r,rect:n,circle:a,resizeLines:h,resizePoints:l}=t,{type:c,resizeable:g,rotateable:d,stroke:y,pointFill:u,pointSize:_,pointRadius:v}=s,x={fill:u,stroke:y,width:_,height:_,cornerRadius:v},b=s.point instanceof Array?s.point:[s.point||x],f=new e.Bounds(i.boxBounds),p=i.worldTransform,R=t.parent.worldTransform,E=new e.Matrix(p);E.divide(R);const z=E.e,w=E.f;let{scaleX:m,scaleY:P,rotation:M,skewX:T,skewY:L}=p;m/=R.scaleX,P/=R.scaleY,M-=R.rotation,T-=R.skewX,L-=R.skewY;const{x:k,y:I,width:D,height:F}=f.scale(m,P);t.set({x:z,y:w,rotation:M,skewX:T,skewY:L}),r.set({x:k,y:I,width:f.width/m,height:f.height/P,scaleX:m,scaleY:P,visible:!0});const O=[{x:k,y:I},{x:k+D/2,y:I},{x:k+D,y:I},{x:k+D,y:I+F/2},{x:k+D,y:I+F},{x:k+D/2,y:I+F},{x:k,y:I+F},{x:k,y:I+F/2}],X=[];let Y,A,C,K,B;for(let t=0;t<8;t++)Y=O[t],A=b[t%b.length],K=l[t],B=h[Math.floor(t/2)],C=o[t],K.set(A),K.x=C.x=B.x=Y.x,K.y=C.y=B.y=Y.y,K.visible=B.visible=g||d,C.visible=d&&g,t%2?((t+1)/2%2?(B.width=Math.abs(D),C.width=Math.max(10,Math.abs(D)-30)):(B.height=Math.abs(F),C.height=Math.max(10,Math.abs(F)-30)),K.rotation=90,K.visible="mobile"===c):X.push(Y.x,Y.y);A=s.rotatePoint||A,a.set(A),a.x=k+D/2,A.y||(a.y=I-(10+(K.height+a.height)/2)*(this.getMirrorData(t).y?-1:1)),a.visible=d&&"mobile"===c,n.set(s.rect||{stroke:y}),n.points=X,n.visible=!0}},{left:m,right:P}=i,M={name:"LineTool",getMirrorData:t=>({x:0,y:0}),resize(t){const{direction:e,dragEvent:i,lockRatio:s,around:o}=t,r=t.target,n={x:0,y:0},{toPoint:a}=r;r.rotation=0;let{x:h,y:l}=i.getInnerMove(r);s&&(Math.abs(h)>Math.abs(l)?l=0:h=0),e===m?(n.x+=h,n.y+=l,o&&(a.x-=h,a.y-=l)):(o&&(n.x-=h,n.y-=l),a.x+=h,a.y+=l),r.getLocalPointByInner(n,null,null,!0),r.getLocalPointByInner(a,null,null,!0),r.x=n.x,r.y=n.y,r.getInnerPointByLocal(a,null,null,!0),r.toPoint=a},rotate(t){w.rotate(t)},update(t){const{rotatePoints:e,circle:i,resizeLines:s,resizePoints:o}=t;w.update(t);for(let t=0;t<8;t++)t<4&&(s[t].visible=!1),o[t].visible=e[t].visible=t===m||t===P;i.visible=!1}};class T extends e.Event{constructor(t,e){super(t),e&&Object.assign(this,e)}}T.RESIZE="editor.resize";class L extends e.Event{constructor(t,e){super(t),e&&Object.assign(this,e)}}L.ROTATE="editor.rotate";class k extends e.Group{get target(){return this._target}set target(t){this.__removeTargetEvents(),this.visible=!!t,this._target=t,t&&this.onTarget()}constructor(t,i){super(i),this.config={type:"pc",stroke:"#836DFF",pointFill:"#FFFFFF",pointSize:10,pointRadius:10,rotateGap:90,hideOnMove:!1,moveCursor:"move",resizeType:"auto",resizeCursor:["nwse-resize","ns-resize","nesw-resize","ew-resize","nwse-resize","ns-resize","nesw-resize","ew-resize"],rotateCursor:["ne-resize","e-resize","se-resize","s-resize","sw-resize","w-resize","nw-resize","n-resize"],resizeable:!0,rotateable:!0},this.resizePoints=[],this.rotatePoints=[],this.resizeLines=[],this.targetRect=new e.Rect({hitFill:"all",hitRadius:5}),this.rect=new e.Polygon({hittable:!1,strokeAlign:"center"}),this.circle=new e.Rect({around:"center",hitRadius:10}),this.__eventIds=[],this.__targetEventIds=[],t&&(this.config=e.DataHelper.default(t,this.config)),this.init()}init(){let t,i,s;const{resizePoints:o,rotatePoints:r,resizeLines:n}=this;for(let a=0;a<8;a++)t=new e.Rect({around:"center",width:30,height:30,hitRadius:10,hitFill:"all"}),r.push(t),this.__listenPointEvents(t,"rotate",a),a%2&&(i=new e.Rect({around:"center",width:10,height:10,hitFill:"all"}),n.push(i),this.__listenPointEvents(i,"resize",a)),s=new e.Rect({around:"center",hitRadius:5}),o.push(s),this.__listenPointEvents(s,"resize",a);this.__listenPointEvents(this.circle,"rotate",1),this.addMany(...r,this.targetRect,this.rect,this.circle,...n,...o),this.__listenEvents()}onTarget(){this.tool=this.getTool(this.target),this.waitLeafer((()=>{this.update(),this.updateMoveCursor(),this.__listenTargetEvents()}))}getTool(t){return"Line"===t.tag&&t.resizeable?M:w}update(){this.target&&this.tool.update(this)}onDrag(t){const{resizeable:e,rotateable:i}=this.config;t.metaKey||t.ctrlKey||!e?i&&this.onRotate(t):this.onResize(t)}onMove(t){const{target:e}=this,{x:i,y:s}=t.getLocalMove(e);t.shiftKey?Math.abs(i)>Math.abs(s)?e.x+=i:e.y+=s:(e.x+=i,e.y+=s)}onRotate(t){const{target:i}=this,{rotateGap:s}=this.config,{x:o,y:r,width:n,height:a}=i.boxBounds,h={x:o+n/2,y:r+a/2};let l;if(t instanceof e.RotateEvent)l=t.rotation;else{const s=t,o={x:s.x-t.moveX,y:s.y-t.moveY};l=e.PointHelper.getChangeAngle(o,i.getWorldPoint(h),s)}l=e.MathHelper.getGapRotation(i.rotation+l,s)-i.rotation;const c=new L(L.ROTATE,{editor:this,target:i,origin:h,rotation:l});this.tool.rotate(c),i.emitEvent(c)}onResize(t){const{target:e}=this,{__direction:i}=t.current.__;let{resizeType:u,around:_,lockRatio:v}=this.config;t.shiftKey&&(v=!0),t.altKey&&!_&&(_="center"),"auto"===u&&(u=e.resizeable?"size":"scale");const x=function(t,e,i,u,_){_&&(i.x*=2,i.y*=2);let v,x=1,b=1;const{x:f,y:p,width:R,height:E}=t,z=(-i.y+E)/E,w=(i.x+R)/R,m=(i.y+E)/E,P=(-i.x+R)/R;switch(e){case n:b=z,u&&(x=b),v={x:f+R/2,y:p+E};break;case h:x=w,u&&(b=x),v={x:f,y:p+E/2};break;case c:b=m,u&&(x=b),v={x:f+R/2,y:p};break;case d:x=P,u&&(b=x),v={x:f+R,y:p+E/2};break;case r:b=z,x=P,u&&(x=b),v={x:f+R,y:p+E};break;case a:b=z,x=w,u&&(x=b),v={x:f,y:p+E};break;case l:b=m,x=w,u&&(x=b),v={x:f,y:p};break;case g:b=m,x=P,u&&(x=b),v={x:f+R,y:p}}return _&&(v="object"==typeof _?{x:f+R/_.x,y:p+E/_.y}:{x:f+R/2,y:p+E/2}),o(y),s(y,v,x,b),{bounds:{x:t.x+y.e,y:t.y+y.f,width:R*x,height:E*b},old:t,origin:v,scaleX:x,scaleY:b,direction:e,lockRatio:u,around:_}}(e.boxBounds,i,t.getInnerMove(this.targetRect),v,_),b=new T(T.RESIZE,Object.assign(Object.assign({},x),{target:e,editor:this,dragEvent:t,resizeType:u}));this.tool.resize(b),e.emitEvent(b)}updateMoveCursor(){this.targetRect.cursor=this.config.moveCursor}__listenEvents(){this.__eventIds=[this.targetRect.on_(e.DragEvent.START,(()=>{this.opacity=this.config.hideOnMove?0:1})),this.targetRect.on_(e.DragEvent.DRAG,this.onMove,this),this.targetRect.on_(e.DragEvent.END,(()=>{this.opacity=1})),this.targetRect.on_(e.PointerEvent.ENTER,this.updateMoveCursor,this)]}__removeListenEvents(){this.targetRect.off_(this.__eventIds),this.__eventIds.length=0}__listenPointEvents(t,i,s){t.__.__direction=s;const o=t.__.__isResizePoint="resize"===i;t.on_(e.DragEvent.DRAG,o?this.onDrag:this.onRotate,this),t.on_(e.PointerEvent.LEAVE,(()=>this.enterPoint=null)),t.on_(e.PointerEvent.ENTER,(e=>{this.enterPoint=t,E(this,e)}))}__listenTargetEvents(){if(this.target){const{leafer:t}=this.target;this.__targetEventIds=[t.on_(e.RenderEvent.START,this.update,this),t.on_([e.KeyEvent.HOLD,e.KeyEvent.UP],(t=>{E(this,t)}))]}}__removeTargetEvents(){if(this.__targetEventIds.length){const{leafer:t}=this.target;t&&t.off_(this.__targetEventIds),this.__targetEventIds.length=0}}destroy(){this.__removeListenEvents(),this._target=null,super.destroy()}}return t.Editor=k,t.EditorResizeEvent=T,t.EditorRotateEvent=L,t.LineTool=M,t.RectTool=w,t}({},LeaferUI);
+this.LeaferIN=this.LeaferIN||{},this.LeaferIN.editor=function(t,e,i){"use strict";const{M:s,L:o,C:n,Q:r,Z:a,N:l,D:h,X:c,G:d,F:g,O:u,P:f,U:p}=e.PathCommandMap,v={scale(t,e,i){if(!t)return;let v,L=0,w=t.length;for(;L<w;)switch(v=t[L],v){case s:case o:y(t,e,i,L,1),L+=3;break;case n:y(t,e,i,L,3),L+=7;break;case r:y(t,e,i,L,2),L+=5;break;case a:L+=1;break;case l:y(t,e,i,L,2),L+=5;break;case h:y(t,e,i,L,2),L+=9;break;case c:y(t,e,i,L,2),L+=6;break;case d:y(t,e,i,L,2),L+=9;break;case g:y(t,e,i,L,2),L+=5;break;case u:t[L]=d,t.splice(L+4,0,t[L+3],0),y(t,e,i,L,2),L+=9,w+=2;break;case f:t[L]=g,t.splice(L+4,0,t[L+3]),y(t,e,i,L,2),L+=5,w+=1;break;case p:y(t,e,i,L,2),L+=6}},scalePoints(t,e,i,s,o){for(let n=o?s+1:0,r=o?n+2*o:t.length;n<r;n+=2)t[n]*=e,t[n+1]*=i}},{scalePoints:y}=v;function L(t,e,i){1!==e&&(t.width*=e),1!==i&&(t.height*=i)}e.Leaf.prototype.scaleResize=function(t,e=t,i){const s=this;i?(s.scaleX*=t,s.scaleY*=e):(t<0&&(s.scaleX*=-1,t=-t),e<0&&(s.scaleY*=-1,e=-e),this.__scaleResize(t,e))},e.Leaf.prototype.__scaleResize=function(t,e){L(this,t,e)},e.Path.prototype.__scaleResize=function(t,e){v.scale(this.__.path,t,e),this.path=this.__.path},e.Line.prototype.__scaleResize=function(t,e){if(this.points)v.scalePoints(this.__.points,t,e),this.points=this.__.points;else{const i=this.toPoint;i.x*=t,i.y*=e,this.toPoint=i}},e.Polygon.prototype.__scaleResize=function(t,e){this.points?(v.scalePoints(this.__.points,t,e),this.points=this.__.points):L(this,t,e)};const w=e.MatrixHelper.get();function k(t,e,i){const{children:s}=t;for(let t=0;t<s.length;t++)w.a=e,w.d=i,s[t].transform(w,!0)}function _(t,e,i,s){var o,n=arguments.length,r=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,s);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(r=(n<3?o(r):n>3?o(e,i,r):o(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r}function x(t){return t?t instanceof Array?t:[t]:[]}e.Group.prototype.__scaleResize=function(t,e){k(this,t,e)},e.Box.prototype.__scaleResize=function(t,e){this.__.__autoSize&&this.children.length?k(this,t,e):L(this,t,e)},"function"==typeof SuppressedError&&SuppressedError;class m extends i.Event{get list(){return x(this.value)}get oldList(){return x(this.oldValue)}constructor(t,e){super(t),e&&Object.assign(this,e)}}m.SELECT="editor.select",m.HOVER="editor.hover";class b extends m{constructor(t,e){super(t,e)}}b.MOVE="editor.move";class E extends m{constructor(t,e){super(t,e)}}E.SCALE="editor.scale";class M extends m{constructor(t,e){super(t,e)}}M.ROTATE="editor.rotate";class S extends m{constructor(t,e){super(t,e)}}function H(t){return(e,s)=>{const o="_"+s;i.defineKey(e,s,{get(){return this[o]},set(e){const i=this[o];i!==e&&(this[o]=e,t(this,i))}})}}S.SKEW="editor.skew";const V=i.MatrixHelper.get(),{abs:P}=Math,{copy:T,scale:D}=i.MatrixHelper;class O extends i.UI{constructor(){super(),this.list=[],this.hittable=!1,this.strokeAlign="center"}setTarget(t,e){const{stroke:i,strokeWidth:s}=e;this.set({stroke:i,strokeWidth:s}),this.target=t}__draw(t,e){const{list:s}=this;if(s.length){let o;const{stroke:n,strokeWidth:r}=this.__,{bounds:a}=e;for(let l=0;l<s.length;l++)if(o=s[l],a&&a.hit(o.__world,e.matrix)){let s;if("scale"===o.__.editSize){const i=P(o.__world.scaleX),n=P(o.__world.scaleY);if(i!==n){T(V,o.__world),D(V,1/i,1/n),t.setWorld(V,e.matrix),t.beginPath(),this.__.strokeWidth=r;const{x:a,y:l,width:h,height:c}=o.__layout.boxBounds;t.rect(a*i,l*n,h*i,c*n),s=!0}}s||(t.setWorld(o.__world,e.matrix),t.beginPath(),o.__.__useArrow?o.__drawPath(t):o.__.__pathForRender?o.__drawRenderPath(t):o.__drawPathByBox(t),this.__.strokeWidth=r/P(o.__world.scaleX)),"string"==typeof n?i.Paint.stroke(n,this,t):i.Paint.strokes(n,this,t)}this.__.strokeWidth=r}}destroy(){this.target=null,super.destroy()}}_([H((function(t){const e=t.target;t.list=e?e instanceof Array?e:[e]:[],t.forceUpdate()}))],O.prototype,"target",void 0);class R extends i.Group{constructor(t){super(t),this.strokeArea=new i.Rect({strokeAlign:"center"}),this.fillArea=new i.Rect,this.visible=this.hittable=!1,this.addMany(this.fillArea,this.strokeArea)}setStyle(t,e){const{visible:i,stroke:s,strokeWidth:o}=t;this.visible=i,this.strokeArea.reset(Object.assign({stroke:s,strokeWidth:o},e||{})),this.fillArea.reset({visible:!e,fill:s,opacity:.2})}setBounds(t){this.strokeArea.set(t),this.fillArea.set(t)}}const{No:A,Yes:B,NoAndSkip:Z,YesAndSkip:z}=i.Answer,I={findOne:t=>t.list.find((t=>t.editable)),findBounds(t,e){if(t.__.hittable&&t.__.visible&&!t.__.locked&&e.hit(t.__world)){if(t.__.editable){if(t.isBranch&&!t.__.hitChildren)return t.__.hitSelf?z:Z;if(t.isFrame)return e.includes(t.__layout.boxBounds,t.__world)?z:A;if(e.hit(t.__layout.boxBounds,t.__world)&&t.__.hitSelf)return B}return A}return t.isBranch?Z:A}},{findOne:W}=I;class C extends i.Group{get dragging(){return!!this.originList}get running(){return this.editor.hittable&&this.editor.config.selector}get isMoveMode(){return this.app&&this.app.interaction.moveMode}constructor(t){super(),this.hoverStroker=new O,this.targetStroker=new O,this.bounds=new i.Bounds,this.selectArea=new R,this.__eventIds=[],this.editor=t,this.addMany(this.targetStroker,this.hoverStroker,this.selectArea),this.__listenEvents()}onHover(){const{editor:t}=this;if(!this.running||this.dragging||t.dragging)this.hoverStroker.target=null;else{const{stroke:e,strokeWidth:i,hover:s}=t.config;this.hoverStroker.setTarget(s?this.editor.hoverTarget:null,{stroke:e,strokeWidth:i})}}onSelect(){if(this.running){const{config:t,list:e}=this.editor,{stroke:i,strokeWidth:s}=t;this.targetStroker.setTarget(e,{stroke:i,strokeWidth:Math.max(1,s/2)}),this.hoverStroker.target=null}}update(){this.running&&this.targetStroker.forceUpdate()}onPointerMove(t){const{app:e,editor:i}=this;if(this.running&&!this.isMoveMode&&e.config.pointer.hover&&!e.interaction.dragging){const e=t.shiftKey?this.findDeepOne(t):W(t.path);i.hoverTarget=i.hasItem(e)?null:e}this.isMoveMode&&(i.hoverTarget=null)}onBeforeDown(t){const{select:e}=this.editor.config;"press"===e&&this.checkAndSelect(t,!0)}onTap(t){const{editor:e}=this,{select:i,continuousSelect:s}=e.config;if("tap"===i&&this.checkAndSelect(t),!this.running||!t.shiftKey&&!s||t.middle||this.lastDownLeaf)this.isMoveMode&&(e.target=null);else{const i=this.findDeepOne(t);i?e.shiftItem(i):!t.shiftKey&&s&&(e.target=null)}this.lastDownLeaf=null}checkAndSelect(t,e){if(this.running&&!this.isMoveMode&&!t.middle){const{editor:i}=this,s=this.lastDownLeaf=W(t.path);s?(t.shiftKey||i.config.continuousSelect?i.shiftItem(s):i.target=s,e&&(i.updateLayout(),s.locked||this.app.interaction.updateDownData(t,{findList:[i.editBox.rect]},i.config.dualEvent))):this.allow(t.target)&&(t.shiftKey||(i.target=null))}}onDragStart(t){if(this.running&&this.allowDrag(t)){const{editor:e}=this,{stroke:i,strokeWidth:s,area:o}=e.config,{x:n,y:r}=t.getInner(this);this.bounds.set(n,r),this.selectArea.setStyle({visible:!0,stroke:i,strokeWidth:s,x:n,y:r},o),this.selectArea.setBounds(this.bounds.get()),this.originList=e.leafList.clone()}}onDrag(t){if(this.editor.dragging)this.onDragEnd();else if(this.dragging){const{editor:e}=this,s=t.getInnerTotal(this),o=this.bounds.clone().unsign(),n=new i.LeafList(e.app.find(I.findBounds,o));if(this.bounds.width=s.x,this.bounds.height=s.y,this.selectArea.setBounds(o.get()),n.length){const t=[];this.originList.forEach((e=>{n.has(e)||t.push(e)})),n.forEach((e=>{this.originList.has(e)||t.push(e)})),(t.length!==e.list.length||e.list.some(((e,i)=>e!==t[i])))&&(e.target=t)}else e.target=this.originList.list}}onDragEnd(){this.dragging&&(this.originList=null,this.selectArea.visible=!1)}onAutoMove(t){if(this.dragging){const{x:e,y:i}=t.getLocalMove(this);this.bounds.x+=e,this.bounds.y+=i}}allow(t){return t.leafer!==this.editor.leafer}allowDrag(t){return!(!this.editor.config.boxSelect||t.target.draggable)&&(!this.editor.hasTarget&&this.allow(t.target)||t.shiftKey&&!W(t.path))}findDeepOne(t){const e={exclude:new i.LeafList(this.editor.editBox.rect)};return W(t.target.leafer.interaction.findPath(t,e))}__listenEvents(){const{editor:t}=this;t.waitLeafer((()=>{const{app:e}=t;e.selector.proxy=t,this.__eventIds=[t.on_(m.HOVER,this.onHover,this),t.on_(m.SELECT,this.onSelect,this),e.on_(i.PointerEvent.MOVE,this.onPointerMove,this),e.on_(i.PointerEvent.BEFORE_DOWN,this.onBeforeDown,this),e.on_(i.PointerEvent.TAP,this.onTap,this),e.on_(i.DragEvent.START,this.onDragStart,this),e.on_(i.DragEvent.DRAG,this.onDrag,this),e.on_(i.DragEvent.END,this.onDragEnd,this),e.on_(i.MoveEvent.MOVE,this.onAutoMove,this),e.on_([i.ZoomEvent.ZOOM,i.MoveEvent.MOVE],(()=>{this.editor.hoverTarget=null}))]}))}__removeListenEvents(){this.__eventIds&&(this.off_(this.__eventIds),this.__eventIds.length=0)}destroy(){this.editor=this.originList=this.lastDownLeaf=null,this.__removeListenEvents(),super.destroy()}}var X;!function(t){t[t.topLeft=0]="topLeft",t[t.top=1]="top",t[t.topRight=2]="topRight",t[t.right=3]="right",t[t.bottomRight=4]="bottomRight",t[t.bottom=5]="bottom",t[t.bottomLeft=6]="bottomLeft",t[t.left=7]="left"}(X||(X={}));const{topLeft:Y,top:K,topRight:F,right:G,bottomRight:U,bottom:N,bottomLeft:j,left:$}=X,{toPoint:Q}=i.AroundHelper,q={getScaleData(t,e,i,s,o){let n,r=1,a=1;const{width:l,height:h}=t;o&&(i.x*=2,i.y*=2),Math.abs(i.x)===l&&(i.x+=.1),Math.abs(i.y)===h&&(i.y+=.1);const c=(-i.y+h)/h,d=(i.x+l)/l,g=(i.y+h)/h,u=(-i.x+l)/l;switch(e){case K:a=c,n={x:.5,y:1};break;case G:r=d,n={x:0,y:.5};break;case N:a=g,n={x:.5,y:0};break;case $:r=u,n={x:1,y:.5};break;case Y:a=c,r=u,n={x:1,y:1};break;case F:a=c,r=d,n={x:0,y:1};break;case U:a=g,r=d,n={x:0,y:0};break;case j:a=g,r=u,n={x:1,y:0}}if(s){"corner"===s&&e%2||(1!==a?r=a:a=r)}return Q(o||n,t,n),{origin:n,scaleX:r,scaleY:a,direction:e,lockRatio:s,around:o}},getRotateData(t,e,s,o,n){let r;switch(e){case Y:r={x:1,y:1};break;case F:r={x:0,y:1};break;case U:r={x:0,y:0};break;case j:r={x:1,y:0};break;default:r={x:.5,y:.5}}return Q(n||r,t,r),{origin:r,rotation:i.PointHelper.getRotation(o,r,s)}},getSkewData(t,e,s,o){let n,r,a=0,l=0;switch(e){case K:r={x:.5,y:0},n={x:.5,y:1},a=1;break;case N:r={x:.5,y:1},n={x:.5,y:0},a=1;break;case $:r={x:0,y:.5},n={x:1,y:.5},l=1;break;case G:r={x:1,y:.5},n={x:0,y:.5},l=1}const{x:h,y:c,width:d,height:g}=t;r.x=h+r.x*d,r.y=c+r.y*g,Q(o||n,t,n);const u=i.PointHelper.getRotation(r,n,{x:r.x+(a?s.x:0),y:r.y+(l?s.y:0)});return a?a=-u:l=u,{origin:n,skewX:a,skewY:l}},getAround:(t,e)=>e&&!t?"center":t,getRotateDirection:(t,e,i=8)=>((t=(t+Math.round(e/(360/i)))%i)<0&&(t+=i),t),getFlipDirection(t,e,i){if(e)switch(t){case $:t=G;break;case Y:t=F;break;case j:t=U;break;case G:t=$;break;case F:t=Y;break;case U:t=j}if(i)switch(t){case K:t=N;break;case Y:t=j;break;case F:t=U;break;case N:t=K;break;case j:t=Y;break;case U:t=F}return t}},J={};function tt(t,e){const{editBox:s}=t,o=s.enterPoint;if(!o||!t.hasTarget||!s.visible)return;if("circle"===o.name)return;let{rotation:n}=s;const{resizeCursor:r,rotateCursor:a,skewCursor:l,resizeable:h,rotateable:c,skewable:d}=t.config,{pointType:g}=o,{flippedX:u,flippedY:f}=s;let p="resize"===g;p&&c&&(e.metaKey||e.ctrlKey||!h)&&(p=!1);const v=d&&!p&&"resize-line"===o.name?l:p?r:a;n+=45*(q.getFlipDirection(o.direction,u,f)+1),n=2*Math.round(i.MathHelper.formatRotation(n,!0)/2);const{url:y,x:L,y:w}=v,k=y+n;J[k]?o.cursor=J[k]:J[k]=o.cursor={url:it(y,n),x:L,y:w}}function et(t){t.editBox.rect.cursor=t.config.moveCursor}function it(t,e){return'"data:image/svg+xml,'+encodeURIComponent(t.replace("{{rotation}}",e.toString()))+'"'}class st extends i.Box{}const ot=["top","right","bottom","left"];class nt extends i.Group{get flipped(){return this.flippedX||this.flippedY}get flippedX(){return this.scaleX<0}get flippedY(){return this.scaleY<0}get flippedOne(){return this.scaleX*this.scaleY<0}constructor(t){super(),this.rect=new i.Box({name:"rect",hitFill:"all",hitStroke:"none",strokeAlign:"center",hitRadius:5}),this.circle=new st({name:"circle",strokeAlign:"center",around:"center",cursor:"crosshair",hitRadius:5}),this.buttons=new i.Group({around:"center",hitSelf:!1}),this.resizePoints=[],this.rotatePoints=[],this.resizeLines=[],this.__eventIds=[],this.editor=t,this.visible=!1,this.create(),this.__listenEvents()}create(){let t,e,i;const{resizePoints:s,rotatePoints:o,resizeLines:n,rect:r,circle:a,buttons:l}=this,h=[{x:1,y:1},{x:.5,y:1},{x:0,y:1},{x:0,y:.5},{x:0,y:0},{x:.5,y:0},{x:1,y:0},{x:1,y:.5}];for(let r=0;r<8;r++)t=new st({name:"rotate-point",around:h[r],width:15,height:15,hitFill:"all"}),o.push(t),this.listenPointEvents(t,"rotate",r),r%2&&(e=new st({name:"resize-line",around:"center",width:10,height:10,hitFill:"all"}),n.push(e),this.listenPointEvents(e,"resize",r)),i=new st({name:"resize-point",around:"center",strokeAlign:"center",hitRadius:5}),s.push(i),this.listenPointEvents(i,"resize",r);l.add(a),this.listenPointEvents(a,"rotate",2),this.addMany(...o,r,l,...n,...s)}update(t){const{config:e,list:s}=this.editor,{width:o,height:n}=t,{rect:r,circle:a,resizePoints:l,rotatePoints:h,resizeLines:c}=this,{middlePoint:d,resizeable:g,rotateable:u,stroke:f,strokeWidth:p,hideOnSmall:v}=e,y=this.getPointsStyle(),L=this.getMiddlePointsStyle(),w="number"==typeof v?v:10,k=!(v&&o<w&&n<w);this.visible=s[0]&&!s[0].locked;let _,x,m,b,E={};for(let s=0;s<8;s++)i.AroundHelper.toPoint(i.AroundHelper.directionData[s],t,E),_=this.getPointStyle(s%2?L[(s-1)/2%L.length]:y[s/2%y.length]),m=l[s],x=h[s],b=c[Math.floor(s/2)],m.set(_),m.set(E),x.set(E),b.set(E),m.visible=b.visible=k&&(g||u),x.visible=k&&u&&g&&!e.rotatePoint,s%2?(m.visible=x.visible=k&&!!d,(s+1)/2%2?(b.width=o,m.width>o-30&&(m.visible=!1)):(b.height=n,m.rotation=90,m.width>n-30&&(m.visible=!1))):m.rotation=s/2*90;a.visible=k&&u&&!!e.rotatePoint,a.set(this.getPointStyle(e.rotatePoint||y[0])),r.set(Object.assign({stroke:f,strokeWidth:p},e.rect||{})),r.set(Object.assign(Object.assign({},t),{visible:!0})),r.hittable=e.moveable,this.buttons.visible=k,this.layoutButtons()}layoutButtons(){const{buttons:t,resizePoints:e}=this,{buttonsDirection:i,buttonsFixed:s,buttonsMargin:o,middlePoint:n}=this.editor.config,{flippedX:r,flippedY:a}=this;let l=ot.indexOf(i);(l%2&&r||(l+1)%2&&a)&&s&&(l=(l+2)%4);const h=s?q.getRotateDirection(l,this.flippedOne?this.rotation:-this.rotation,4):l,c=e[2*h+1],d=h%2,g=h&&3!==h?1:-1,u=(o+(l%2?(n?c.width:0)+t.boxBounds.width:(n?c.height:0)+t.boxBounds.height)/2)*g;d?(t.x=c.x+u,t.y=c.y):(t.x=c.x,t.y=c.y+u),s&&(t.rotation=90*(h-l),t.scaleX=r?-1:1,t.scaleY=a?-1:1)}getPointStyle(t){const{stroke:e,strokeWidth:i,pointFill:s,pointSize:o,pointRadius:n}=this.editor.config,r={fill:s,stroke:e,strokeWidth:i,width:o,height:o,cornerRadius:n};return t?Object.assign(r,t):r}getPointsStyle(){const{point:t}=this.editor.config;return t instanceof Array?t:[t]}getMiddlePointsStyle(){const{middlePoint:t}=this.editor.config;return t instanceof Array?t:t?[t]:this.getPointsStyle()}onDragStart(t){this.dragging=!0,"rect"===t.target.name&&(this.moving=!0,this.editor.opacity=this.editor.config.hideOnMove?0:1)}onDragEnd(t){this.dragging=!1,this.moving=!1,"rect"===t.target.name&&(this.editor.opacity=1)}onDrag(t){const{editor:e}=this;"rotate"===(this.enterPoint=t.current).pointType||t.metaKey||t.ctrlKey||!e.config.resizeable?e.config.rotateable&&e.onRotate(t):e.onScale(t),tt(e,t)}onArrow(t){if(this.editor.hasTarget&&this.editor.config.keyEvent){const e={x:0,y:0},i=t.shiftKey?10:1;switch(t.code){case"ArrowDown":e.y=i;break;case"ArrowUp":e.y=-i;break;case"ArrowLeft":e.x=-i;break;case"ArrowRight":e.x=i}(e.x||e.y)&&this.editor.move(e.x,e.y)}}onDoubleClick(){const{editor:t}=this;t.single&&t.element.isBranch}listenPointEvents(t,e,s){const{editor:o}=this;t.direction=s,t.pointType=e,t.on_(i.DragEvent.START,this.onDragStart,this),t.on_(i.DragEvent.DRAG,this.onDrag,this),t.on_(i.DragEvent.END,this.onDragEnd,this),t.on_(i.PointerEvent.LEAVE,(()=>this.enterPoint=null)),"circle"!==t.name&&t.on_(i.PointerEvent.ENTER,(e=>{this.enterPoint=t,tt(o,e)}))}__listenEvents(){const{rect:t,editor:e}=this;this.__eventIds=[e.on_(m.SELECT,(()=>{this.visible=e.hasTarget})),t.on_(i.DragEvent.START,this.onDragStart,this),t.on_(i.DragEvent.DRAG,e.onMove,e),t.on_(i.DragEvent.END,this.onDragEnd,this),t.on_(i.PointerEvent.ENTER,(()=>et(e))),t.on_(i.PointerEvent.DOUBLE_CLICK,this.onDoubleClick,this)]}__removeListenEvents(){this.off_(this.__eventIds),this.__eventIds.length=0}destroy(){this.editor=null,this.__removeListenEvents(),super.destroy()}}const rt='\n<feOffset dy="1"/>\n<feGaussianBlur stdDeviation="1.5"/>\n<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>\n<feBlend mode="normal" in="SourceGraphic" result="shape"/>',at={editSize:"auto",keyEvent:!0,stroke:"#836DFF",strokeWidth:2,pointFill:"#FFFFFF",pointSize:10,pointRadius:16,rotateGap:45,buttonsDirection:"bottom",buttonsMargin:12,hideOnSmall:!0,moveCursor:"move",resizeCursor:{url:`\n<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">\n<g filter="url(#f)">\n<g transform="rotate({{rotation}},12,12)">\n<path d="M7.5 8.0H8.5V5.9L6.8 7.2L7.5 8.0ZM3 11.4L2.3 10.6L1.3 11.4L2.3 12.2L3 11.4ZM7.5 10.4H6.5V11.4H7.5V10.4ZM16.5 10.4V11.4H17.5V10.4H16.5ZM16.5 8.0L17.1 7.2L15.5 5.9V8.0H16.5ZM21 11.4L21.6 12.2L22.6 11.4L21.6 10.6L21 11.4ZM16.5 14.9H15.5V16.9L17.1 15.7L16.5 14.9ZM16.5 12.4H17.5V11.4H16.5V12.4ZM7.5 12.4V11.4H6.5V12.4H7.5ZM7.5 14.9L6.8 15.7L8.5 16.9V14.9H7.5ZM6.8 7.2L2.3 10.6L3.6 12.2L8.1 8.7L6.8 7.2ZM8.5 10.4V8.0H6.5V10.4H8.5ZM16.5 9.4H7.5V11.4H16.5V9.4ZM17.5 10.4V8.0H15.5V10.4H17.5ZM15.8 8.7L20.3 12.2L21.6 10.6L17.1 7.2L15.8 8.7ZM20.3 10.6L15.8 14.1L17.1 15.7L21.6 12.2L20.3 10.6ZM17.5 14.9V12.4H15.5V14.9H17.5ZM7.5 13.4H16.5V11.4H7.5V13.4ZM8.5 14.9V12.4H6.5V14.9H8.5ZM2.3 12.2L6.8 15.7L8.1 14.1L3.6 10.6L2.3 12.2Z" fill="white"/>\n<path fill-rule="evenodd" d="M3 11.4L7.5 8.0V10.4H16.5V8.0L21 11.4L16.5 14.9V12.4H7.5V14.9L3 11.4Z" fill="black"/>\n</g>\n</g>\n<defs>\n<filter id="f" x="-1.6" y="3.9" width="27.2" height="16.9" filterUnits="userSpaceOnUse">\n${rt}\n</filter>\n</defs>\n</svg>\n`,x:12,y:12},rotateCursor:{url:`\n<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">\n<g filter="url(#f)">\n<g transform="rotate(135,12,12),rotate({{rotation}},12,12)">\n<path d="M20.4 8H21.4L20.8 7.1L17.3 2.6L17 2.1L16.6 2.6L13.1 7.1L12.5 8H13.5H15.4C14.9 11.8 11.8 14.9 8 15.4V13.5V12.5L7.1 13.1L2.6 16.6L2.1 17L2.6 17.3L7.1 20.8L8 21.4V20.4V18.4C13.5 17.9 17.9 13.5 18.4 8H20.4Z" stroke="white"/>\n<path fill-rule="evenodd" d="M17 3L20.4 7.5H17.9C17.7 13.1 13.1 17.7 7.5 17.9V20.4L3 17L7.5 13.5V15.9C12.0 15.7 15.7 12.0 15.9 7.5H13.5L17 3Z" fill="black"/>\n</g>\n</g>\n<defs>\n<filter id="f" x="-1.6" y="-0.6" width="27.1" height="27.1" filterUnits="userSpaceOnUse">\n${rt}\n</filter>\n</defs>\n</svg>\n`,x:12,y:12},skewCursor:{url:`\n<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">\n<g filter="url(#f)">\n<g transform="rotate(90,12,12),rotate({{rotation}},12,12)">\n<path d="M21 10.4L21 11.4L23.8 11.4L21.6 9.6L21 10.4ZM17 10.4V11.4L17 11.4L17 10.4ZM15.5 6L16.1 5.2L14.5 3.9V6H15.5ZM15.5 8.4V9.4H16.5V8.4H15.5ZM6 8.4V7.4H5V8.4H6ZM6 10.4H5V11.4H6V10.4ZM7 14.4V13.4L7 13.4L7 14.4ZM3 14.4L3 13.4L0.1 13.4L2.3 15.2L3 14.4ZM8.5 18.9L7.8 19.7L9.5 21.0V18.9H8.5ZM8.5 16.4V15.4H7.5V16.4H8.5ZM19 16.4V17.4H20V16.4H19ZM19 14.4H20V13.4H19V14.4ZM21 9.4L17 9.4L17 11.4L21 11.4L21 9.4ZM14.8 6.7L20.3 11.2L21.6 9.6L16.1 5.2L14.8 6.7ZM16.5 8.4V6H14.5V8.4H16.5ZM6 9.4H15.5V7.4H6V9.4ZM7 10.4V8.4H5V10.4H7ZM15.5 9.4H6V11.4H15.5V9.4ZM17 9.4H15.5V11.4H17V9.4ZM7 15.4H8.5V13.4H7V15.4ZM3 15.4L7 15.4L7 13.4L3 13.4L3 15.4ZM9.1 18.1L3.6 13.6L2.3 15.2L7.8 19.7L9.1 18.1ZM7.5 16.4V18.9H9.5V16.4H7.5ZM19 15.4H8.5V17.4H19V15.4ZM18 14.4V16.4H20V14.4H18ZM8.5 15.4H19V13.4H8.5V15.4Z" fill="white"/>\n<path fill-rule="evenodd" d="M17 10.4L21 10.4L15.5 6V8.4H6V10.4H15.5H17ZM8.5 14.4H7L3 14.4L8.5 18.9V16.4H19V14.4H8.5Z" fill="black"/>\n</g>\n</g>\n<defs>\n<filter x="-2.8" y="1.9" width="29.6" height="23.1" filterUnits="userSpaceOnUse" >\n${rt}\n</filter>\n</defs>\n</svg>\n`,x:12,y:12},selector:!0,hover:!0,select:"press",boxSelect:!0,moveable:!0,resizeable:!0,rotateable:!0,skewable:!0};class lt{constructor(){this.tag="EditTool"}onMove(t){const{moveX:e,moveY:i,editor:s}=t,{app:o,list:n}=s;o.lockLayout(),n.forEach((t=>{t.moveWorld(e,i)})),o.unlockLayout()}onScale(t){const{scaleX:e,scaleY:i,transform:s,worldOrigin:o,editor:n}=t,{app:r,list:a}=n;r.lockLayout(),a.forEach((t=>{const r="size"===n.getEditSize(t);s?t.transformWorld(s,r):t.scaleOfWorld(o,e,i,r)})),r.unlockLayout()}onRotate(t){const{rotation:e,transform:i,worldOrigin:s,editor:o}=t,{app:n,list:r}=o;n.lockLayout(),r.forEach((t=>{const n="size"===o.getEditSize(t);i?t.transformWorld(i,n):t.rotateOfWorld(s,e)})),n.unlockLayout()}onSkew(t){const{skewX:e,skewY:i,transform:s,worldOrigin:o,editor:n}=t,{app:r,list:a}=n;r.lockLayout(),a.forEach((t=>{const r="size"===n.getEditSize(t);s?t.transformWorld(s,r):t.skewOfWorld(o,e,i,r)})),r.unlockLayout()}update(t){const{simulateTarget:e,element:i}=t;t.multiple&&e.parent.updateLayout();const{x:s,y:o,scaleX:n,scaleY:r,rotation:a,skewX:l,skewY:h,width:c,height:d}=i.getLayoutBounds("box",t,!0);t.editBox.set({x:s,y:o,scaleX:n,scaleY:r,rotation:a,skewX:l,skewY:h}),t.editBox.update({x:0,y:0,width:c,height:d})}}lt.list=[];const{left:ht,right:ct}=X;class dt extends lt{constructor(){super(...arguments),this.tag="LineEditTool",this.scaleOfEvent=!0}onScaleWithDrag(t){const{drag:e,direction:s,lockRatio:o,around:n}=t,r=t.target,a=i.getPointData(),{toPoint:l}=r;r.rotation=0;let{x:h,y:c}=e.getInnerMove(r);o&&(Math.abs(h)>Math.abs(c)?c=0:h=0),s===ht?(a.x+=h,a.y+=c,n&&(l.x-=h,l.y-=c)):(n&&(a.x-=h,a.y-=c),l.x+=h,l.y+=c),r.getLocalPointByInner(a,null,null,!0),r.getLocalPointByInner(l,null,null,!0),r.x=a.x,r.y=a.y,r.getInnerPointByLocal(l,null,null,!0),r.toPoint=l}onSkew(t){}update(t){const{rotatePoints:e,resizeLines:i,resizePoints:s}=t.editBox;super.update(t);for(let t=0;t<8;t++)t<4&&(i[t].visible=!1),s[t].visible=e[t].visible=t===ht||t===ct}}const gt=(t,e)=>t.parent.children.indexOf(t)-e.parent.children.indexOf(e),ut=(t,e)=>e.parent.children.indexOf(e)-t.parent.children.indexOf(t),ft={group(t,e,s){t.sort(ut);const{app:o,parent:n}=t[0];let r;r=s&&s.add?s:new i.Group(s),n.addAt(r,n.children.indexOf(t[0])),t.sort(gt);const a=new i.Matrix(e.worldTransform);return a.divideParent(n.worldTransform),r.setTransform(a),r.editable=!0,r.hitChildren=!1,o.lockLayout(),t.forEach((t=>t.dropTo(r))),o.unlockLayout(),r},ungroup(t){const{app:e}=t[0],i=[];return e.lockLayout(),t.forEach((t=>{if(t.isBranch){const{parent:e,children:s}=t;for(;s.length;)i.push(s[0]),s[0].dropTo(e,e.children.indexOf(t));t.remove()}else i.push(t)})),e.unlockLayout(),i},toTop(t){t.sort(gt),t.forEach((t=>{t.parent&&t.parent.add(t)}))},toBottom(t){t.sort(ut),t.forEach((t=>{t.parent&&t.parent.addAt(t,0)}))}};class pt extends i.Group{get list(){return this.leafList.list}get hasTarget(){return!!this.list.length}get multiple(){return this.list.length>1}get single(){return 1===this.list.length}get element(){return this.multiple?this.simulateTarget:this.list[0]}get buttons(){return this.editBox.buttons}get dragging(){return this.editBox.dragging}constructor(t,e){super(e),this.config=at,this.leafList=new i.LeafList,this.simulateTarget=new i.Rect({visible:!1}),this.editBox=new nt(this),this.selector=new C(this),this.targetEventIds=[],t&&(this.config=i.DataHelper.default(t,this.config)),this.addMany(this.selector,this.editBox)}hasItem(t){return this.leafList.has(t)}addItem(t){this.hasItem(t)||t.locked||(this.leafList.add(t),this.target=this.leafList.list)}removeItem(t){this.hasItem(t)&&(this.leafList.remove(t),this.target=this.leafList.list)}shiftItem(t){this.hasItem(t)?this.removeItem(t):this.addItem(t)}update(){this.hasTarget&&(this.editTool&&this.editTool.update(this),this.selector.update())}updateEditTool(){this.editTool=function(t){if(1===t.length){const e=t[0];return e instanceof i.Line&&!e.points?new dt:new lt}return new lt}(this.list)}getEditSize(t){let{editSize:e}=this.config;return"auto"===e?t.editSize:e}onMove(t){const e=t.getLocalMove(this.element),{lockMove:i}=this.config;"x"===i?e.y=0:"y"===i?e.x=0:t.shiftKey&&(Math.abs(e.x)>Math.abs(e.y)?e.y=0:e.x=0),this.move(e.x,e.y)}onScale(t){const{element:e}=this,{direction:i}=t.current;let{around:s,lockRatio:o}=this.config;t.shiftKey&&(o=!0);const n=q.getScaleData(e.boxBounds,i,t.getInnerMove(e),o,q.getAround(s,t.altKey));this.editTool.onScaleWithDrag?(n.drag=t,this.scaleWithDrag(n)):this.scaleOf(n.origin,n.scaleX,n.scaleY)}onRotate(t){const{skewable:e,around:s,rotateGap:o}=this.config,{direction:n,name:r}=t.current;if(e&&"resize-line"===r)return this.onSkew(t);const{element:a}=this;let l,h;if(t instanceof i.RotateEvent)h=t.rotation,l=a.getInnerPoint(t);else{const e={x:t.x-t.moveX,y:t.y-t.moveY},i=q.getRotateData(a.boxBounds,n,t.getInner(a),a.getInnerPoint(e),t.shiftKey?null:s||"center");h=i.rotation,l=i.origin}h=i.MathHelper.getGapRotation(h,o,a.rotation),h&&(a.scaleX*a.scaleY<0&&(h=-h),this.rotateOf(l,i.MathHelper.float(h,2)))}onSkew(t){const{element:e}=this,{around:i}=this.config,{origin:s,skewX:o,skewY:n}=q.getSkewData(e.boxBounds,t.current.direction,t.getInnerMove(e),q.getAround(i,t.altKey));(o||n)&&this.skewOf(s,o,n)}move(t,e){if(!this.config.moveable)return;const{element:i}=this,s=i.getWorldPointByLocal({x:t,y:e},null,!0),o=new b(b.MOVE,{target:i,editor:this,moveX:s.x,moveY:s.y});this.editTool.onMove(o),this.emitEvent(o),this.multiple&&i.move(t,e)}scaleWithDrag(t){const{element:e}=this,i=e.getWorldPoint(t.origin),s=new E(E.SCALE,Object.assign(Object.assign({},t),{target:e,editor:this,worldOrigin:i}));this.editTool.onScaleWithDrag(s),this.emitEvent(s)}scaleOf(t,e,s=e,o){const{element:n}=this,r=n.getWorldPoint(t);let a;if(this.multiple){const o=new i.Matrix(n.worldTransform);n.scaleOf(t,e,s),a=new i.Matrix(n.worldTransform).divide(o)}const l=new E(E.SCALE,{target:n,editor:this,worldOrigin:r,scaleX:e,scaleY:s,transform:a});this.editTool.onScale(l),this.emitEvent(l)}rotateOf(t,e){const{element:s}=this,o=s.getWorldPoint(t);let n;if(this.multiple){const o=new i.Matrix(s.worldTransform);s.rotateOf(t,e),n=new i.Matrix(s.worldTransform).divide(o)}const r=new M(M.ROTATE,{target:s,editor:this,worldOrigin:o,rotation:e,transform:n});this.editTool.onRotate(r),this.emitEvent(r)}skewOf(t,e,s=0,o){const{element:n}=this,r=n.getWorldPoint(t);let a;if(this.multiple){const o=new i.Matrix(n.worldTransform);n.skewOf(t,e,s),a=new i.Matrix(n.worldTransform).divide(o)}const l=new S(S.SKEW,{target:n,editor:this,skewX:e,skewY:s,transform:a,worldOrigin:r});this.editTool.onSkew(l),this.emitEvent(l)}group(t){return this.multiple&&(this.target=ft.group(this.list,this.element,t)),this.target}ungroup(){return this.list.length&&(this.target=ft.ungroup(this.list)),this.list}lock(){this.list.forEach((t=>t.locked=!0)),this.update()}unlock(){this.list.forEach((t=>t.locked=!1)),this.update()}toTop(){this.list.length&&(ft.toTop(this.list),this.leafList.update())}toBottom(){this.list.length&&(ft.toBottom(this.list),this.leafList.update())}listenTargetEvents(){if(!this.targetEventIds.length){const{leafer:t}=this.list[0];this.targetEventIds=[t.on_(i.RenderEvent.START,this.update,this),t.on_([i.KeyEvent.HOLD,i.KeyEvent.UP],(t=>{tt(this,t)})),t.on_(i.KeyEvent.DOWN,this.editBox.onArrow,this.editBox)]}}removeTargetEvents(){const{targetEventIds:t}=this;t.length&&(this.off_(t),t.length=0)}destroy(){this.destroyed||(this.simulateTarget.destroy(),this.target=this.hoverTarget=this.simulateTarget=null,super.destroy())}}return _([H((function(t,e){t.emitEvent(new m(m.HOVER,{editor:t,value:t.hoverTarget,oldValue:e}))}))],pt.prototype,"hoverTarget",void 0),_([H((function(t,e){const{target:s}=t;s?t.leafList=s instanceof i.LeafList?s:new i.LeafList(s):t.leafList.reset(),t.emitEvent(new m(m.SELECT,{editor:t,value:s,oldValue:e})),t.hasTarget?t.waitLeafer((()=>{t.multiple&&function(t){const{simulateTarget:e,leafList:s}=t,{x:o,y:n,width:r,height:a}=(new i.Bounds).setListWithFn(s.list,(t=>t.worldBoxBounds)),l=e.parent=s.list[0].leafer.zoomLayer,{scaleX:h,scaleY:c,e:d,f:g}=l.__world;e.reset({x:(o-d)/h,y:(n-g)/c,width:r/h,height:a/c})}(t),et(t),t.updateEditTool(),t.update(),t.listenTargetEvents()})):t.removeTargetEvents()}))],pt.prototype,"target",void 0),i.Creator.editor=function(t){return new pt(t)},t.EditBox=nt,t.EditDataHelper=q,t.EditPoint=st,t.EditSelect=C,t.EditSelectHelper=I,t.EditTool=lt,t.Editor=pt,t.EditorEvent=m,t.EditorHelper=ft,t.EditorMoveEvent=b,t.EditorRotateEvent=M,t.EditorScaleEvent=E,t.EditorSkewEvent=S,t.LineEditTool=dt,t.SelectArea=R,t.Stroker=O,t}({},LeaferUI,LeaferUI);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-in/editor",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.20",
   "description": "@leafer-in/editor",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -28,12 +28,11 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer-ui/core": "1.0.0-rc.2",
-    "@leafer/core": "1.0.0-rc.2"
+    "@leafer-ui/core": "1.0.0-rc.20",
+    "@leafer-ui/scale": "1.0.0-rc.20"
   },
   "devDependencies": {
-    "@leafer-ui/interface": "1.0.0-rc.2",
-    "@leafer/interface": "1.0.0-rc.2",
-    "@leafer-in/interface": "1.0.0-rc.2"
+    "@leafer-ui/interface": "1.0.0-rc.20",
+    "@leafer-in/interface": "1.0.0-rc.20"
   }
 }

package/src/Editor.ts

@@ -1,232 +1,322 @@
-import { IGroupInputData, IPolygon, IUI, IEventListenerId } from '@leafer-ui/interface'
-import { IEditor, IEditorConfig, IEditorTool, IDirection8 } from '@leafer-in/interface'
+import { IGroupInputData, IUI, IEventListenerId, IPointData, ILeafList, IEditSize, IGroup } from '@leafer-ui/interface'
+import { Group, Rect, DragEvent, RotateEvent, DataHelper, MathHelper, LeafList, Matrix, RenderEvent, KeyEvent } from '@leafer-ui/core'
 
-import { Group, Rect, Polygon, DragEvent, PointHelper, PointerEvent, KeyEvent, RotateEvent, DataHelper, MathHelper, RenderEvent } from '@leafer-ui/core'
+import { IEditBox, IEditPoint, IEditor, IEditorConfig, IEditTool, IEditorScaleEvent } from '@leafer-in/interface'
 
-import { getResizeData } from './resize'
-import { updateCursor } from './cursor'
+import { EditorMoveEvent } from './event/EditorMoveEvent'
+import { EditorScaleEvent } from './event/EditorScaleEvent'
+import { EditorRotateEvent } from './event/EditorRotateEvent'
+import { EditorSkewEvent } from './event/EditorSkewEvent'
 
-import { LineTool } from './tool/LineTool'
-import { RectTool } from './tool/RectTool'
+import { EditSelect } from './display/EditSelect'
+import { EditBox } from './display/EditBox'
 
-import { EditorResizeEvent } from './event/EditorResizeEvent'
-import { EditorRotateEvent } from './event/EditorRotateEvent'
+import { config } from './config'
+import { getEditTool } from './tool'
+
+import { onTarget, onHover } from './editor/target'
+import { targetAttr } from './decorator/data'
+import { EditorHelper } from './helper/EditorHelper'
+import { EditDataHelper } from './helper/EditDataHelper'
+import { updateCursor } from './editor/cursor'
 
 
 export class Editor extends Group implements IEditor {
 
-    public config: IEditorConfig = {
-        type: 'pc',
-        stroke: '#836DFF',
-        pointFill: '#FFFFFF',
-        pointSize: 10,
-        pointRadius: 10,
-        rotateGap: 90,
-        hideOnMove: false,
-        moveCursor: 'move',
-        resizeType: 'auto',
-        resizeCursor: ['nwse-resize', 'ns-resize', 'nesw-resize', 'ew-resize', 'nwse-resize', 'ns-resize', 'nesw-resize', 'ew-resize'],
-        rotateCursor: ['ne-resize', 'e-resize', 'se-resize', 's-resize', 'sw-resize', 'w-resize', 'nw-resize', 'n-resize'],
-        resizeable: true,
-        rotateable: true
-    }
+    public config = config
 
-    public resizePoints: IUI[] = [] // topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left
-    public rotatePoints: IUI[] = [] // topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left
-    public resizeLines: IUI[] = [] // top, right, bottom, left
+    @targetAttr(onHover)
+    public hoverTarget: IUI
 
-    public targetRect: IUI = new Rect({ hitFill: 'all', hitRadius: 5 })
-    public rect: IPolygon = new Polygon({ hittable: false, strokeAlign: 'center' })
-    public circle: IUI = new Rect({ around: 'center', hitRadius: 10 }) // rotate point
+    @targetAttr(onTarget)
+    public target: IUI | IUI[]
 
-    public tool: IEditorTool
+    public leafList: ILeafList = new LeafList() // from target
+    public get list(): IUI[] { return this.leafList.list as IUI[] }
 
-    private _target: IUI
-    public get target(): IUI { return this._target }
-    public set target(value: IUI) {
-        this.__removeTargetEvents()
-        this.visible = !!value
+    public get hasTarget(): boolean { return !!this.list.length }
+    public get multiple(): boolean { return this.list.length > 1 }
+    public get single(): boolean { return this.list.length === 1 }
 
-        this._target = value
-        if (value) this.onTarget()
-    }
+    public get element() { return this.multiple ? this.simulateTarget : this.list[0] as IUI }
+    public simulateTarget: IUI = new Rect({ visible: false })
 
-    public enterPoint: IUI
+    public editBox: IEditBox = new EditBox(this)
+    public get buttons() { return this.editBox.buttons }
+
+    public editTool: IEditTool
+    public selector: EditSelect = new EditSelect(this)
+
+    public get dragging(): boolean { return this.editBox.dragging }
+
+    public targetEventIds: IEventListenerId[] = []
 
-    protected __eventIds: IEventListenerId[] = []
-    protected __targetEventIds: IEventListenerId[] = []
 
     constructor(userConfig?: IEditorConfig, data?: IGroupInputData) {
         super(data)
         if (userConfig) this.config = DataHelper.default(userConfig, this.config)
-        this.init()
+        this.addMany(this.selector, this.editBox)
     }
 
-    protected init() {
-        let rotatePoint: IUI, resizeLine: IUI, resizePoint: IUI
-        const { resizePoints, rotatePoints, resizeLines } = this
-
-        for (let i = 0; i < 8; i++) {
-            rotatePoint = new Rect({ around: 'center', width: 30, height: 30, hitRadius: 10, hitFill: "all" })
-            rotatePoints.push(rotatePoint)
-            this.__listenPointEvents(rotatePoint, 'rotate', i)
+    // item
 
-            if (i % 2) {
-                resizeLine = new Rect({ around: 'center', width: 10, height: 10, hitFill: "all" })
-                resizeLines.push(resizeLine)
-                this.__listenPointEvents(resizeLine, 'resize', i)
-            }
+    public hasItem(item: IUI): boolean {
+        return this.leafList.has(item)
+    }
 
-            resizePoint = new Rect({ around: 'center', hitRadius: 5 })
-            resizePoints.push(resizePoint)
-            this.__listenPointEvents(resizePoint, 'resize', i)
-        }
+    public addItem(item: IUI): void {
+        if (!this.hasItem(item) && !item.locked) this.leafList.add(item), this.target = this.leafList.list as IUI[]
+    }
 
-        this.__listenPointEvents(this.circle, 'rotate', 1)
-        this.addMany(...rotatePoints, this.targetRect, this.rect, this.circle, ...resizeLines, ...resizePoints)
+    public removeItem(item: IUI): void {
+        if (this.hasItem(item)) this.leafList.remove(item), this.target = this.leafList.list as IUI[]
+    }
 
-        this.__listenEvents()
+    public shiftItem(item: IUI): void {
+        this.hasItem(item) ? this.removeItem(item) : this.addItem(item)
     }
 
+    // update
 
-    protected onTarget(): void {
-        this.tool = this.getTool(this.target)
-        this.waitLeafer(() => {
-            this.update()
-            this.updateMoveCursor()
-            this.__listenTargetEvents()
-        })
+    public update(): void {
+        if (this.hasTarget) {
+            if (this.editTool) this.editTool.update(this)
+            this.selector.update()
+        }
     }
 
-    public getTool(value: IUI): IEditorTool {
-        return (value.tag === 'Line' && value.resizeable) ? LineTool : RectTool
+    public updateEditTool(): void {
+        this.editTool = getEditTool(this.list)
     }
 
-    public update(): void {
-        if (!this.target) return
-        this.tool.update(this)
+    // get
+
+    public getEditSize(ui: IUI): IEditSize {
+        let { editSize } = this.config
+        return editSize === 'auto' ? ui.editSize : editSize
     }
 
+    // operate
 
-    protected onDrag(e: DragEvent): void {
-        const { resizeable, rotateable } = this.config
-        if (e.metaKey || e.ctrlKey || !resizeable) {
-            if (rotateable) this.onRotate(e)
-        } else {
-            this.onResize(e)
+    public onMove(e: DragEvent): void {
+        const move = e.getLocalMove(this.element)
+        const { lockMove } = this.config
+
+        if (lockMove === 'x') move.y = 0
+        else if (lockMove === 'y') move.x = 0
+        else if (e.shiftKey) {
+            if (Math.abs(move.x) > Math.abs(move.y)) move.y = 0
+            else move.x = 0
         }
+
+        this.move(move.x, move.y)
     }
 
-    protected onMove(e: DragEvent): void {
-        const { target } = this
-        const { x, y } = e.getLocalMove(target)
-        if (e.shiftKey) {
-            if (Math.abs(x) > Math.abs(y)) {
-                target.x += x
-            } else {
-                target.y += y
-            }
+    public onScale(e: DragEvent): void {
+        const { element } = this
+        const { direction } = e.current as IEditPoint
+
+        let { around, lockRatio } = this.config
+        if (e.shiftKey) lockRatio = true
+
+        const data = EditDataHelper.getScaleData(element.boxBounds, direction, e.getInnerMove(element), lockRatio, EditDataHelper.getAround(around, e.altKey))
+
+        if (this.editTool.onScaleWithDrag) {
+            data.drag = e
+            this.scaleWithDrag(data)
         } else {
-            target.x += x
-            target.y += y
+            this.scaleOf(data.origin, data.scaleX, data.scaleY)
         }
+
     }
 
-    protected onRotate(e: DragEvent | RotateEvent): void {
-        const { target } = this
-        const { rotateGap } = this.config
-        const { x, y, width, height } = target.boxBounds
-        const origin = { x: x + width / 2, y: y + height / 2 }
+    public onRotate(e: DragEvent | RotateEvent): void {
+        const { skewable, around, rotateGap } = this.config
+        const { direction, name } = e.current as IEditPoint
+        if (skewable && name === 'resize-line') return this.onSkew(e as DragEvent)
 
-        let rotation: number
+        const { element } = this
+        let origin: IPointData, rotation: number
 
         if (e instanceof RotateEvent) {
-            rotation = e.rotation
+            rotation = e.rotation, origin = element.getInnerPoint(e)
         } else {
-            const point = e
-            const last = { x: point.x - e.moveX, y: point.y - e.moveY }
-            rotation = PointHelper.getChangeAngle(last, target.getWorldPoint(origin), point)
+            const last = { x: e.x - e.moveX, y: e.y - e.moveY }
+            const data = EditDataHelper.getRotateData(element.boxBounds, direction, e.getInner(element), element.getInnerPoint(last), e.shiftKey ? null : (around || 'center'))
+            rotation = data.rotation
+            origin = data.origin
         }
 
-        rotation = MathHelper.getGapRotation(target.rotation + rotation, rotateGap) - target.rotation
+        rotation = MathHelper.getGapRotation(rotation, rotateGap, element.rotation)
+        if (!rotation) return
 
-        const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, { editor: this, target, origin, rotation })
+        if (element.scaleX * element.scaleY < 0) rotation = -rotation // flippedOne
 
-        this.tool.rotate(event)
-        target.emitEvent(event)
+        this.rotateOf(origin, MathHelper.float(rotation, 2))
     }
 
-    public onResize(e: DragEvent): void {
-        const { target } = this
-        const { __direction } = e.current.__
 
-        let { resizeType, around, lockRatio } = this.config
+    public onSkew(e: DragEvent): void {
+        const { element } = this
+        const { around } = this.config
 
-        if (e.shiftKey) lockRatio = true
-        if (e.altKey && !around) around = 'center'
+        const { origin, skewX, skewY } = EditDataHelper.getSkewData(element.boxBounds, (e.current as IEditPoint).direction, e.getInnerMove(element), EditDataHelper.getAround(around, e.altKey))
+        if (!skewX && !skewY) return
+
+        this.skewOf(origin, skewX, skewY)
+    }
+
+
+    // transform
+
+    public move(x: number, y: number): void {
+        if (!this.config.moveable) return
+
+        const { element } = this
+        const world = element.getWorldPointByLocal({ x, y }, null, true)
+        const event = new EditorMoveEvent(EditorMoveEvent.MOVE, { target: element, editor: this, moveX: world.x, moveY: world.y })
+
+        this.editTool.onMove(event)
+        this.emitEvent(event)
 
-        if (resizeType === 'auto') resizeType = target.resizeable ? 'size' : 'scale'
-        const data = getResizeData(target.boxBounds, __direction, e.getInnerMove(this.targetRect), lockRatio, around)
+        if (this.multiple) element.move(x, y)
+    }
+
+    public scaleWithDrag(data: IEditorScaleEvent): void {
+        const { element } = this
+        const worldOrigin = element.getWorldPoint(data.origin)
+        const event = new EditorScaleEvent(EditorScaleEvent.SCALE, { ...data, target: element, editor: this, worldOrigin })
+
+        this.editTool.onScaleWithDrag(event)
+        this.emitEvent(event)
+    }
+
+
+    public scaleOf(origin: IPointData, scaleX: number, scaleY = scaleX, _resize?: boolean): void {
+        const { element } = this
+        const worldOrigin = element.getWorldPoint(origin)
+
+        let transform: Matrix
+
+        if (this.multiple) {
+            const oldMatrix = new Matrix(element.worldTransform)
+            element.scaleOf(origin, scaleX, scaleY)
+            transform = new Matrix(element.worldTransform).divide(oldMatrix) // world change transform
+        }
+
+        const event = new EditorScaleEvent(EditorScaleEvent.SCALE, { target: element, editor: this, worldOrigin, scaleX, scaleY, transform })
+
+        this.editTool.onScale(event)
+        this.emitEvent(event)
+    }
+
+    public rotateOf(origin: IPointData, rotation: number): void {
+        const { element } = this
+        const worldOrigin = element.getWorldPoint(origin)
+
+
+        let transform: Matrix
+
+        if (this.multiple) {
+            const oldMatrix = new Matrix(element.worldTransform)
+            element.rotateOf(origin, rotation)
+            transform = new Matrix(element.worldTransform).divide(oldMatrix) // world change transform
+        }
 
-        const event = new EditorResizeEvent(EditorResizeEvent.RESIZE, { ...data, target, editor: this, dragEvent: e, resizeType })
+        const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, { target: element, editor: this, worldOrigin, rotation, transform })
 
-        this.tool.resize(event)
-        target.emitEvent(event)
+        this.editTool.onRotate(event)
+        this.emitEvent(event)
     }
 
+    public skewOf(origin: IPointData, skewX: number, skewY = 0, _resize?: boolean): void {
+        const { element } = this
+        const worldOrigin = element.getWorldPoint(origin)
 
-    public updateMoveCursor(): void {
-        this.targetRect.cursor = this.config.moveCursor
+        let transform: Matrix
+
+        if (this.multiple) {
+            const oldMatrix = new Matrix(element.worldTransform)
+            element.skewOf(origin, skewX, skewY)
+            transform = new Matrix(element.worldTransform).divide(oldMatrix) // world change transform
+        }
+
+        const event = new EditorSkewEvent(EditorSkewEvent.SKEW, {
+            target: element, editor: this, skewX, skewY, transform, worldOrigin
+        })
+
+        this.editTool.onSkew(event)
+        this.emitEvent(event)
     }
 
+    // group
 
-    protected __listenEvents(): void {
-        this.__eventIds = [
-            this.targetRect.on_(DragEvent.START, () => { this.opacity = this.config.hideOnMove ? 0 : 1 }),
-            this.targetRect.on_(DragEvent.DRAG, this.onMove, this),
-            this.targetRect.on_(DragEvent.END, () => { this.opacity = 1 }),
-            this.targetRect.on_(PointerEvent.ENTER, this.updateMoveCursor, this)
-        ]
+    public group(userGroup?: IGroup | IGroupInputData): IGroup {
+        if (this.multiple) this.target = EditorHelper.group(this.list, this.element, userGroup)
+        return this.target as IGroup
     }
 
-    protected __removeListenEvents(): void {
-        this.targetRect.off_(this.__eventIds)
-        this.__eventIds.length = 0
+
+    public ungroup(): IUI[] {
+        if (this.list.length) this.target = EditorHelper.ungroup(this.list)
+        return this.list
     }
 
+    // lock
+
+    public lock(): void {
+        this.list.forEach(leaf => leaf.locked = true)
+        this.update()
+    }
 
-    protected __listenPointEvents(point: IUI, type: 'rotate' | 'resize', direction: IDirection8): void {
-        point.__.__direction = direction
-        const resize = point.__.__isResizePoint = type === 'resize'
-        point.on_(DragEvent.DRAG, resize ? this.onDrag : this.onRotate, this) // i % 2 ? this.onSkew : 
-        point.on_(PointerEvent.LEAVE, () => this.enterPoint = null)
-        point.on_(PointerEvent.ENTER, (e) => { this.enterPoint = point; updateCursor(this, e) })
+    public unlock(): void {
+        this.list.forEach(leaf => leaf.locked = false)
+        this.update()
     }
 
+    // level
 
-    protected __listenTargetEvents(): void {
-        if (this.target) {
-            const { leafer } = this.target
-            this.__targetEventIds = [
+    public toTop(): void {
+        if (this.list.length) {
+            EditorHelper.toTop(this.list)
+            this.leafList.update()
+        }
+    }
+
+    public toBottom(): void {
+        if (this.list.length) {
+            EditorHelper.toBottom(this.list)
+            this.leafList.update()
+        }
+    }
+
+    // event 
+
+    public listenTargetEvents(): void {
+        if (!this.targetEventIds.length) {
+            const { leafer } = this.list[0]
+            this.targetEventIds = [
                 leafer.on_(RenderEvent.START, this.update, this),
-                leafer.on_([KeyEvent.HOLD, KeyEvent.UP], (e) => { updateCursor(this, e) })
+                leafer.on_([KeyEvent.HOLD, KeyEvent.UP], (e: KeyEvent) => { updateCursor(this, e) }),
+                leafer.on_(KeyEvent.DOWN, this.editBox.onArrow, this.editBox)
             ]
         }
     }
 
-    protected __removeTargetEvents(): void {
-        if (this.__targetEventIds.length) {
-            const { leafer } = this.target
-            if (leafer) leafer.off_(this.__targetEventIds)
-            this.__targetEventIds.length = 0
+    public removeTargetEvents(): void {
+        const { targetEventIds } = this
+        if (targetEventIds.length) {
+            this.off_(targetEventIds)
+            targetEventIds.length = 0
         }
     }
 
-
     public destroy(): void {
-        this.__removeListenEvents()
-        this._target = null
-        super.destroy()
+        if (!this.destroyed) {
+            this.simulateTarget.destroy()
+            this.target = this.hoverTarget = this.simulateTarget = null
+            super.destroy()
+        }
     }
 
 }

package/src/config.ts

@@ -0,0 +1,37 @@
+import { IEditorConfig } from '@leafer-in/interface'
+import { resizeSVG, rotateSVG, skewSVG } from './svg'
+
+
+export const config: IEditorConfig = {
+    editSize: 'auto',
+    keyEvent: true,
+
+    stroke: '#836DFF',
+    strokeWidth: 2,
+
+    pointFill: '#FFFFFF',
+    pointSize: 10,
+    pointRadius: 16,
+
+    rotateGap: 45,
+
+    buttonsDirection: 'bottom',
+    buttonsMargin: 12,
+
+    hideOnSmall: true,
+
+    moveCursor: 'move',
+    resizeCursor: { url: resizeSVG, x: 12, y: 12 },
+    rotateCursor: { url: rotateSVG, x: 12, y: 12 },
+    skewCursor: { url: skewSVG, x: 12, y: 12 },
+
+    selector: true,
+    hover: true,
+    select: 'press',
+    boxSelect: true,
+
+    moveable: true,
+    resizeable: true,
+    rotateable: true,
+    skewable: true
+}

package/src/decorator/data.ts

@@ -0,0 +1,16 @@
+import { IFunction, ILeaf, IObject } from '@leafer-ui/interface'
+import { defineKey } from '@leafer-ui/core'
+
+
+export function targetAttr(fn: IFunction) {
+    return (target: ILeaf, key: string) => {
+        const privateKey = '_' + key
+        defineKey(target, key, {
+            get() { return (this as IObject)[privateKey] },
+            set(value: unknown) {
+                const old = (this as IObject)[privateKey]
+                if (old !== value) (this as IObject)[privateKey] = value, fn(this, old)
+            }
+        } as ThisType<ILeaf>)
+    }
+}