@leafer-in/editor 1.0.4 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/editor.cjs +134 -61
- package/dist/editor.esm.js +135 -62
- package/dist/editor.esm.min.js +1 -1
- package/dist/editor.js +134 -61
- package/dist/editor.min.cjs +1 -1
- package/dist/editor.min.js +1 -1
- package/package.json +8 -8
- package/src/Editor.ts +36 -29
- package/src/display/EditBox.ts +11 -5
- package/src/display/SimulateElement.ts +87 -0
- package/src/display/Stroker.ts +12 -14
- package/src/editor/simulate.ts +6 -6
- package/src/editor/target.ts +1 -0
- package/src/helper/EditorHelper.ts +1 -1
- package/src/index.ts +16 -1
- package/src/tool/EditTool.ts +1 -5
- package/src/tool/LineEditTool.ts +4 -9
- package/types/index.d.ts +12 -9
package/dist/editor.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
this.LeaferIN=this.LeaferIN||{},this.LeaferIN.editor=function(t,e,i){"use strict";const{M:o,L:s,C:n,Q:r,Z:a,N:l,D:h,X:d,G:c,F:g,O:u,P:f,U:p}=e.PathCommandMap,m={scale(t,e,i){if(!t)return;let m,E=0,b=t.length;for(;E<b;)switch(m=t[E],m){case o:case s:v(t,e,i,E,1),E+=3;break;case n:v(t,e,i,E,3),E+=7;break;case r:v(t,e,i,E,2),E+=5;break;case a:E+=1;break;case l:v(t,e,i,E,2),E+=5;break;case h:v(t,e,i,E,2),E+=9;break;case d:v(t,e,i,E,2),E+=6;break;case c:v(t,e,i,E,2),E+=9;break;case g:v(t,e,i,E,2),E+=5;break;case u:t[E]=c,t.splice(E+4,0,t[E+3],0),v(t,e,i,E,2),E+=9,b+=2;break;case f:t[E]=g,t.splice(E+4,0,t[E+3]),v(t,e,i,E,2),E+=5,b+=1;break;case p:v(t,e,i,E,2),E+=6}},scalePoints(t,e,i,o,s){for(let n=s?o+1:0,r=s?n+2*s:t.length;n<r;n+=2)t[n]*=e,t[n+1]*=i}},{scalePoints:v}=m,E=e.MatrixHelper.get(),{topLeft:b,top:y,topRight:L,right:_,bottom:w,left:k}=e.Direction9;function x(t,e,i){t.pathInputed?S(t,e,i):(1!==e&&(t.width*=e),1!==i&&(t.height*=i))}function M(t,e,i){const{app:o}=t,s=o&&o.editor;let n=e;if(s.editing){const o=t.__layout;let{width:r,height:a}=o.boxBounds;switch(r*=i-e,a*=e-i,s.resizeDirection){case y:case w:n=i,o.affectScaleOrRotation?t.moveInner(-r/2,0):t.x-=r/2;break;case k:case _:o.affectScaleOrRotation?t.moveInner(0,-a/2):t.y-=a/2;break;case b:case L:o.affectScaleOrRotation?t.moveInner(0,-a):t.y-=a}}t.fontSize*=n;const r=t.__;r.__autoWidth||(t.width*=n),r.__autoHeight||(t.height*=n)}function S(t,e,i){m.scale(t.__.path,e,i),t.path=t.__.path}function T(t,e,i){m.scalePoints(t.__.points,e,i),t.points=t.__.points}function O(t,e,i){const{children:o}=t;for(let t=0;t<o.length;t++)E.a=e,E.d=i,o[t].transform(E,!0)}const P=e.Leaf.prototype;function H(t,e,i,o){var s,n=arguments.length,r=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,o);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(r=(n<3?s(r):n>3?s(e,i,r):s(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r}function R(t){return t?t instanceof Array?t:[t]:[]}P.scaleResize=function(t,e=t,i){const o=this;i||o.editConfig&&"scale"===o.editConfig.editSize?(o.scaleX*=t,o.scaleY*=e):(t<0&&(o.scaleX*=-1,t=-t),e<0&&(o.scaleY*=-1,e=-e),this.__scaleResize(t,e))},P.__scaleResize=function(t,e){x(this,t,e)},P.resizeWidth=function(t){const e=t/this.getBounds("box","local").width;this.scaleOf(this.__layout.boxBounds,e,this.__.lockRatio?e:1,!0)},P.resizeHeight=function(t){const e=t/this.getBounds("box","local").height;this.scaleOf(this.__layout.boxBounds,this.__.lockRatio?e:1,e,!0)},e.Text.prototype.__scaleResize=function(t,e){this.__.resizeFontSize||this.editConfig&&"font-size"===this.editConfig.editSize?M(this,t,e):x(this,t,e)},e.Path.prototype.__scaleResize=function(t,e){S(this,t,e)},e.Line.prototype.__scaleResize=function(t,e){this.pathInputed?S(this,t,e):this.points?T(this,t,e):this.width*=t},e.Polygon.prototype.__scaleResize=function(t,e){this.pathInputed?S(this,t,e):this.points?T(this,t,e):x(this,t,e)},e.Group.prototype.__scaleResize=function(t,e){O(this,t,e)},e.Box.prototype.__scaleResize=function(t,e){this.__.__autoSize&&this.children.length?O(this,t,e):(x(this,t,e),this.__.resizeChildren&&O(this,t,e))},"function"==typeof SuppressedError&&SuppressedError;class B extends e.Event{get list(){return R(this.value)}get oldList(){return R(this.oldValue)}constructor(t,e){super(t),e&&Object.assign(this,e)}}B.SELECT="editor.select",B.HOVER="editor.hover";class I extends B{constructor(t,e){super(t,e)}}I.MOVE="editor.move";class C extends B{constructor(t,e){super(t,e)}}C.SCALE="editor.scale";class V extends B{constructor(t,e){super(t,e)}}V.ROTATE="editor.rotate";class D extends B{constructor(t,e){super(t,e)}}function z(t){return(i,o)=>{const s="_"+o;e.defineKey(i,o,{get(){return this[s]},set(e){const i=this[s];i!==e&&(this[s]=e,t(this,i))}})}}D.SKEW="editor.skew";const A=e.MatrixHelper.get(),{abs:Z}=Math,{copy:W,scale:G}=e.MatrixHelper;class U extends e.UI{constructor(){super(),this.list=[],this.hittable=!1,this.strokeAlign="center"}setTarget(t,e){this.set(e),this.target=t}__draw(t,i){const{list:o}=this;if(o.length){let s;const{stroke:n,strokeWidth:r,fill:a}=this.__,{bounds:l}=i;for(let h=0;h<o.length;h++)if(s=o[h],l&&l.hit(s.__world,i.matrix)){const o=Z(s.__world.scaleX),l=Z(s.__world.scaleY);if(o!==l){W(A,s.__world),G(A,1/o,1/l),t.setWorld(A,i.matrix),t.beginPath(),this.__.strokeWidth=r;const{x:e,y:n,width:a,height:h}=s.__layout.boxBounds;t.rect(e*o,n*l,a*o,h*l)}else t.setWorld(s.__world,i.matrix),t.beginPath(),s.__.__useArrow?s.__drawPath(t):s.__.__pathForRender?s.__drawRenderPath(t):s.__drawPathByBox(t),this.__.strokeWidth=r/Z(s.__world.scaleX);n&&("string"==typeof n?e.Paint.stroke(n,this,t):e.Paint.strokes(n,this,t)),a&&("string"==typeof a?e.Paint.fill(a,this,t):e.Paint.fills(a,this,t))}this.__.strokeWidth=r}}destroy(){this.target=null,super.destroy()}}H([z((function(t){const e=t.target;t.list=e?e instanceof Array?e:[e]:[],t.forceUpdate()}))],U.prototype,"target",void 0);class F extends e.Group{constructor(t){super(t),this.strokeArea=new e.Rect({strokeAlign:"center"}),this.fillArea=new e.Rect,this.visible=this.hittable=!1,this.addMany(this.fillArea,this.strokeArea)}setStyle(t,e){const{visible:i,stroke:o,strokeWidth:s}=t;this.visible=i,this.strokeArea.reset(Object.assign({stroke:o,strokeWidth:s},e||{})),this.fillArea.reset({visible:!e,fill:o,opacity:.2})}setBounds(t){this.strokeArea.set(t),this.fillArea.set(t)}}const{No:X,Yes:Y,NoAndSkip:N,YesAndSkip:K}=e.Answer,j={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?K:N;if(t.isFrame)return e.includes(t.__layout.boxBounds,t.__world)?K:X;if(e.hit(t.__layout.boxBounds,t.__world)&&t.__.hitSelf)return Y}return X}return t.isBranch?N:X}},{findOne:$}=j;class q extends e.Group{get dragging(){return!!this.originList}get running(){const{editor:t}=this;return this.hittable&&t.visible&&t.hittable&&t.mergeConfig.selector}get isMoveMode(){return this.app&&this.app.interaction.moveMode}constructor(t){super(),this.hoverStroker=new U,this.targetStroker=new U,this.bounds=new e.Bounds,this.selectArea=new F,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:o,hoverStyle:s}=t.mergeConfig;this.hoverStroker.setTarget(o?this.editor.hoverTarget:null,Object.assign({stroke:e,strokeWidth:i},s||{}))}}onSelect(){if(this.running){const{mergeConfig:t,list:e}=this.editor,{stroke:i,strokeWidth:o}=t;this.targetStroker.setTarget(e,{stroke:i,strokeWidth:Math.max(1,o/2)}),this.hoverStroker.target=null}}update(){this.targetStroker.target&&this.targetStroker.forceUpdate()}onPointerMove(t){const{app:e,editor:i}=this;if(this.running&&!this.isMoveMode&&e.interaction.canHover&&!e.interaction.dragging){const e=this.findUI(t);i.hoverTarget=i.hasItem(e)?null:e}this.isMoveMode&&(i.hoverTarget=null)}onBeforeDown(t){if(t.multiTouch)return;const{select:e}=this.editor.mergeConfig;"press"===e&&(this.app.config.mobile?this.waitSelect=()=>this.checkAndSelect(t):this.checkAndSelect(t))}onTap(t){if(t.multiTouch)return;const{editor:e}=this,{select:i}=e.mergeConfig;"tap"===i?this.checkAndSelect(t):this.waitSelect&&this.waitSelect(),this.needRemoveItem?e.removeItem(this.needRemoveItem):this.isMoveMode&&(e.target=null)}checkAndSelect(t){if(this.needRemoveItem=null,this.allowSelect(t)){const{editor:e}=this,i=this.findUI(t);i?this.isMultipleSelect(t)?e.hasItem(i)?this.needRemoveItem=i:e.addItem(i):e.target=i:this.allow(t.target)&&(t.shiftKey||(e.target=null))}}onDragStart(t){if(!t.multiTouch&&(this.waitSelect&&this.waitSelect(),this.allowDrag(t))){const{editor:e}=this,{stroke:i,area:o}=e.mergeConfig,{x:s,y:n}=t.getInnerPoint(this);this.bounds.set(s,n),this.selectArea.setStyle({visible:!0,stroke:i,x:s,y:n},o),this.selectArea.setBounds(this.bounds.get()),this.originList=e.leafList.clone()}}onDrag(t){if(!t.multiTouch){if(this.editor.dragging)return this.onDragEnd(t);if(this.dragging){const{editor:i}=this,o=t.getInnerTotal(this),s=this.bounds.clone().unsign(),n=new e.LeafList(i.app.find(j.findBounds,s));if(this.bounds.width=o.x,this.bounds.height=o.y,this.selectArea.setBounds(s.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!==i.list.length||i.list.some(((e,i)=>e!==t[i])))&&(i.target=t)}else i.target=this.originList.list}}}onDragEnd(t){t.multiTouch||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.running||!this.editor.mergeConfig.boxSelect||t.target.draggable)&&(!this.editor.editing&&this.allow(t.target)||t.shiftKey&&!$(t.path))}allowSelect(t){return this.running&&!this.isMoveMode&&!t.middle}findDeepOne(t){const i={exclude:new e.LeafList(this.editor.editBox.rect)};return $(t.target.leafer.interaction.findPath(t,i))}findUI(t){return this.isMultipleSelect(t)?this.findDeepOne(t):$(t.path)}isMultipleSelect(t){return t.shiftKey||this.editor.mergeConfig.continuousSelect}__listenEvents(){const{editor:t}=this;t.waitLeafer((()=>{const{app:e}=t;e.selector.proxy=t,this.__eventIds=[t.on_(B.HOVER,this.onHover,this),t.on_(B.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,!0),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.needRemoveItem=null,this.__removeListenEvents(),super.destroy()}}const{topLeft:Q,top:J,topRight:tt,right:et,bottomRight:it,bottom:ot,bottomLeft:st,left:nt}=e.Direction9,{toPoint:rt}=e.AroundHelper,{within:at}=e.MathHelper,lt={getScaleData(t,e,i,o,s,n,r,a){let l,h={},d=1,c=1;const{boxBounds:g,widthRange:u,heightRange:f}=t,{width:p,height:m}=e;n&&(o.x*=2,o.y*=2);const v=t.scaleX/e.scaleX,E=t.scaleY/e.scaleY,b=v<0?-1:1,y=E<0?-1:1,L=a?v:b*g.width/p,_=a?E:y*g.height/m;o.x*=a?v:b,o.y*=a?E:y,Math.abs(o.x)===p&&(o.x+=.1),Math.abs(o.y)===m&&(o.y+=.1);const w=(-o.y+m)/m,k=(o.x+p)/p,x=(o.y+m)/m,M=(-o.x+p)/p;switch(i){case J:c=w,l="bottom";break;case et:d=k,l="left";break;case ot:c=x,l="top";break;case nt:d=M,l="right";break;case Q:c=w,d=M,l="bottom-right";break;case tt:c=w,d=k,l="bottom-left";break;case it:c=x,d=k,l="top-left";break;case st:c=x,d=M,l="top-right"}if(s){if(!("corner"===s&&i%2)){let t;switch(i){case J:case ot:t=c;break;case nt:case et:t=d;break;default:t=Math.sqrt(Math.abs(d*c))}d=d<0?-t:t,c=c<0?-t:t}}if(d/=L,c/=_,!r){const{worldTransform:e}=t;d<0&&(d=1/g.width/e.scaleX),c<0&&(c=1/g.height/e.scaleY)}if(u){const e=g.width*t.scaleX;d=at(e*d,u)/e}if(f){const e=g.height*t.scaleY;c=at(e*c,f)/e}return rt(n||l,g,h,!0),{origin:h,scaleX:d,scaleY:c,direction:i,lockRatio:s,around:n}},getRotateData(t,i,o,s,n){let r,a={};switch(i){case Q:r="bottom-right";break;case tt:r="bottom-left";break;case it:r="top-left";break;case st:r="top-right";break;default:r="center"}return rt(n||r,t,a,!0),{origin:a,rotation:e.PointHelper.getRotation(s,a,o)}},getSkewData(t,i,o,s){let n,r,a={},l=0,h=0;switch(i){case J:r={x:.5,y:0},n="bottom",l=1;break;case ot:r={x:.5,y:1},n="top",l=1;break;case nt:r={x:0,y:.5},n="right",h=1;break;case et:r={x:1,y:.5},n="left",h=1}const{width:d,height:c}=t;r.x=r.x*d,r.y=r.y*c,rt(s||n,t,a,!0);const g=e.PointHelper.getRotation(r,a,{x:r.x+(l?o.x:0),y:r.y+(h?o.y:0)});return l?l=-g:h=g,{origin:a,skewX:l,skewY:h}},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 nt:t=et;break;case Q:t=tt;break;case st:t=it;break;case et:t=nt;break;case tt:t=Q;break;case it:t=st}if(i)switch(t){case J:t=ot;break;case Q:t=st;break;case tt:t=it;break;case ot:t=J;break;case st:t=Q;break;case it:t=tt}return t}},ht={};function dt(t,i){const{editBox:o}=t,s=o.enterPoint;if(!s||!t.editing||!o.visible)return;if("circle"===s.name)return;if("button"===s.pointType)return void(s.cursor||(s.cursor="pointer"));let{rotation:n}=o;const{resizeCursor:r,rotateCursor:a,skewCursor:l,resizeable:h,rotateable:d,skewable:c}=t.mergeConfig,{pointType:g}=s,{flippedX:u,flippedY:f}=o;let p="resize"===g;p&&d&&(i.metaKey||i.ctrlKey||!h)&&(p=!1);const m=c&&!p&&"resize-line"===s.name?l:p?r:a;n+=45*(lt.getFlipDirection(s.direction,u,f)+1),n=2*Math.round(e.MathHelper.formatRotation(n,!0)/2);const{url:v,x:E,y:b}=m,y=v+n;ht[y]?s.cursor=ht[y]:ht[y]=s.cursor={url:gt(v,n),x:E,y:b}}function ct(t){t.editBox.rect.cursor=t.mergeConfig.moveCursor}function gt(t,e){return'"data:image/svg+xml,'+encodeURIComponent(t.replace("{{rotation}}",e.toString()))+'"'}class ut extends e.Box{}const ft=["top","right","bottom","left"];class pt extends e.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.view=new e.Group,this.rect=new e.Box({name:"rect",hitFill:"all",hitStroke:"none",strokeAlign:"center",hitRadius:5}),this.circle=new ut({name:"circle",strokeAlign:"center",around:"center",cursor:"crosshair",hitRadius:5}),this.buttons=new e.Group({around:"center",hitSelf:!1}),this.resizePoints=[],this.rotatePoints=[],this.resizeLines=[],this.__eventIds=[],this.editor=t,this.visible=!1,this.create(),this.rect.syncEventer=t,this.__listenEvents()}create(){let t,e,i;const{view:o,resizePoints:s,rotatePoints:n,resizeLines:r,rect:a,circle:l,buttons:h}=this,d=["bottom-right","bottom","bottom-left","left","top-left","top","top-right","right"];for(let o=0;o<8;o++)t=new ut({name:"rotate-point",around:d[o],width:15,height:15,hitFill:"all"}),n.push(t),this.listenPointEvents(t,"rotate",o),o%2&&(e=new ut({name:"resize-line",around:"center",width:10,height:10,hitFill:"all"}),r.push(e),this.listenPointEvents(e,"resize",o)),i=new ut({name:"resize-point",hitRadius:5}),s.push(i),this.listenPointEvents(i,"resize",o);this.listenPointEvents(l,"rotate",2),o.addMany(...n,a,l,h,...r,...s),this.add(o)}load(){const{mergeConfig:t,element:e,single:i}=this.editor,{rect:o,circle:s,resizePoints:n}=this,{stroke:r,strokeWidth:a,moveable:l}=t,h=this.getPointsStyle(),d=this.getMiddlePointsStyle();let c;for(let t=0;t<8;t++)c=n[t],c.set(this.getPointStyle(t%2?d[(t-1)/2%d.length]:h[t/2%h.length])),t%2||(c.rotation=t/2*90);s.set(this.getPointStyle(t.circle||t.rotatePoint||h[0])),o.set(Object.assign({stroke:r,strokeWidth:a},t.rect||{})),o.hittable=!i&&!!l,e.syncEventer=i&&l?o:null,this.app.interaction.bottomList=i&&l?[{target:o,proxy:e}]:null}update(t){if(this.visible=!this.editor.element.locked,this.view.worldOpacity){const{mergeConfig:i}=this.editor,{width:o,height:s}=t,{rect:n,circle:r,buttons:a,resizePoints:l,rotatePoints:h,resizeLines:d}=this,{middlePoint:c,resizeable:g,rotateable:u,hideOnSmall:f}=i,p="number"==typeof f?f:10,m=!(f&&o<p&&s<p);let v,E,b,y={};for(let n=0;n<8;n++)e.AroundHelper.toPoint(e.AroundHelper.directionData[n],t,y),E=l[n],v=h[n],b=d[Math.floor(n/2)],E.set(y),v.set(y),b.set(y),E.visible=b.visible=m&&!(!g&&!u),v.visible=m&&u&&g&&!i.rotatePoint,n%2&&(E.visible=v.visible=m&&!!c,(n+1)/2%2?(b.width=o,E.width>o-30&&(E.visible=!1)):(b.height=s,E.rotation=90,E.width>s-30&&(E.visible=!1)));r.visible=m&&u&&!(!i.circle&&!i.rotatePoint),r.visible&&this.layoutCircle(i),n.path&&(n.path=null),n.set(Object.assign(Object.assign({},t),{visible:!0})),a.visible=m&&a.children.length>0,a.visible&&this.layoutButtons(i)}}layoutCircle(t){const{circleDirection:e,circleMargin:i,buttonsMargin:o,buttonsDirection:s,middlePoint:n}=t,r=ft.indexOf(e||(this.buttons.children.length&&"bottom"===s?"top":"bottom"));this.setButtonPosition(this.circle,r,i||o,!!n)}layoutButtons(t){const{buttons:e}=this,{buttonsDirection:i,buttonsFixed:o,buttonsMargin:s,middlePoint:n}=t,{flippedX:r,flippedY:a}=this;let l=ft.indexOf(i);(l%2&&r||(l+1)%2&&a)&&o&&(l=(l+2)%4);const h=o?lt.getRotateDirection(l,this.flippedOne?this.rotation:-this.rotation,4):l;this.setButtonPosition(e,h,s,!!n),o&&(e.rotation=90*(h-l)),e.scaleX=r?-1:1,e.scaleY=a?-1:1}setButtonPosition(t,e,i,o){const s=this.resizePoints[2*e+1],n=e%2,r=e&&3!==e?1:-1,a=(i+(e%2?(o?s.width:0)+t.boxBounds.width:(o?s.height:0)+t.boxBounds.height)/2)*r;n?(t.x=s.x+a,t.y=s.y):(t.x=s.x,t.y=s.y+a)}unload(){this.visible=!1}getPointStyle(t){const{stroke:e,strokeWidth:i,pointFill:o,pointSize:s,pointRadius:n}=this.editor.mergeConfig,r={fill:o,stroke:e,strokeWidth:i,around:"center",strokeAlign:"center",width:s,height:s,cornerRadius:n};return t?Object.assign(r,t):r}getPointsStyle(){const{point:t}=this.editor.mergeConfig;return t instanceof Array?t:[t]}getMiddlePointsStyle(){const{middlePoint:t}=this.editor.mergeConfig;return t instanceof Array?t:t?[t]:this.getPointsStyle()}onSelect(t){1===t.oldList.length&&(t.oldList[0].syncEventer=null,this.app&&(this.app.interaction.bottomList=null))}onDragStart(t){this.dragging=!0;const{editor:e}=this;"rect"===t.current.name?(this.moving=!0,e.dragStartPoint={x:e.element.x,y:e.element.y},e.opacity=e.mergeConfig.hideOnMove?0:1):"resize"===t.current.pointType&&(e.dragStartBounds=Object.assign({},e.element.getLayoutBounds("box","local")),e.resizeDirection=t.current.direction)}onDragEnd(t){this.dragging=!1,this.moving=!1,"rect"===t.current.name&&(this.editor.opacity=1),this.editor.resizeDirection=void 0}onDrag(t){const{editor:e}=this,i=this.enterPoint=t.current;"rotate"===i.pointType||t.metaKey||t.ctrlKey||!e.mergeConfig.resizeable?e.mergeConfig.rotateable&&e.onRotate(t):"resize"===i.pointType&&e.onScale(t),dt(e,t)}onArrow(t){if(this.editor.editing&&this.editor.mergeConfig.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}this.editor.move(e)}}onDoubleTap(t){"double"===this.editor.mergeConfig.openInner&&this.openInner(t)}onLongPress(t){"long"===this.editor.mergeConfig.openInner&&this.openInner(t)}openInner(t){const{editor:e}=this;if(e.single){const{element:i}=e;i.isBranch?(e.openGroup(i),e.target=e.selector.findDeepOne(t)):e.openInnerEditor()}}listenPointEvents(t,e,o){const{editor:s}=this;t.direction=o,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,dt(s,e)}))}__listenEvents(){const{rect:t,editor:e}=this;this.__eventIds=[e.on_(B.SELECT,this.onSelect,this),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,(()=>ct(e))),t.on_(i.PointerEvent.DOUBLE_TAP,this.onDoubleTap,this),t.on_(i.PointerEvent.LONG_PRESS,this.onLongPress,this)]}__removeListenEvents(){this.off_(this.__eventIds),this.__eventIds.length=0}destroy(){this.editor=null,this.__removeListenEvents(),super.destroy()}}class mt extends e.UI{constructor(t){super(),this.editor=t,this.hittable=!1}__draw(t,e){const{editor:i}=this,{mask:o}=i.mergeConfig;if(o&&i.list.length){const{rect:s}=i.editBox,{width:n,height:r}=s.__;t.resetTransform(),t.fillWorld(t.bounds,!0===o?"rgba(0,0,0,0.8)":o),t.setWorld(s.__world,e.matrix),t.clearRect(0,0,n,r)}}destroy(){this.editor=null,super.destroy()}}const vt='\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"/>',Et={editSize:"size",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${vt}\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${vt}\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${vt}\n</filter>\n</defs>\n</svg>\n`,x:12,y:12},selector:!0,hover:!0,select:"press",openInner:"double",boxSelect:!0,moveable:!0,resizeable:!0,flipable:!0,rotateable:!0,skewable:!0};function bt(t){const{simulateTarget:i,leafList:o}=t,{x:s,y:n,width:r,height:a}=(new e.Bounds).setListWithFn(o.list,(t=>t.worldBoxBounds)),l=i.parent=o.list[0].leafer.zoomLayer,{scaleX:h,scaleY:d,e:c,f:g}=l.__world;i.reset({x:(s-c)/h,y:(n-g)/d,width:r/h,height:a/d})}const yt=(t,e)=>t.parent.children.indexOf(t)-e.parent.children.indexOf(e),Lt=(t,e)=>e.parent.children.indexOf(e)-t.parent.children.indexOf(t),_t={group(t,i,o){t.sort(Lt);const{app:s,parent:n}=t[0];let r;r=o&&o.add?o:new e.Group(o),n.addAt(r,n.children.indexOf(t[0])),t.sort(yt);const a=new e.Matrix(i.worldTransform);return a.divideParent(n.worldTransform),r.setTransform(a),r.editable=!0,r.hitChildren=!1,s.lockLayout(),t.forEach((t=>t.dropTo(r))),s.unlockLayout(),r},ungroup(t){const{app:e}=t[0],i=[];return e.lockLayout(),t.forEach((t=>{if(t.isBranch){const{parent:e,children:o}=t;for(;o.length;)i.push(o[0]),o[0].dropTo(e,e.children.indexOf(t));t.remove()}else i.push(t)})),e.unlockLayout(),i},toTop(t){t.sort(yt),t.forEach((t=>{t.parent&&t.parent.add(t)}))},toBottom(t){t.sort(Lt),t.forEach((t=>{t.parent&&t.parent.addAt(t,0)}))}},wt=e.Debug.get("EditToolCreator");function kt(){return t=>{Mt.register(t)}}const xt=kt,Mt={list:{},register(t){const{tag:e}=t.prototype;St[e]?wt.repeat(e):St[e]=t},get:(t,e)=>new St[t](e)},{list:St}=Mt;class Tt extends B{constructor(t,e){super(t,e)}}Tt.BEFORE_OPEN="innerEditor.before_open",Tt.OPEN="innerEditor.open",Tt.BEFORE_CLOSE="innerEditor.before_close",Tt.CLOSE="innerEditor.close";class Ot extends B{constructor(t,e){super(t,e)}}Ot.GROUP="editor.group",Ot.BEFORE_UNGROUP="editor.before_ungroup",Ot.UNGROUP="editor.ungroup",Ot.OPEN="editor.open_group",Ot.CLOSE="editor.close_group";class Pt extends e.Group{get mergeConfig(){const{element:t,config:e}=this;return this.single&&t.editConfig?Object.assign(Object.assign({},e),t.editConfig):e}get list(){return this.leafList.list}get editing(){return!!this.list.length}get groupOpening(){return!!this.openedGroupList.length}get multiple(){return this.list.length>1}get single(){return 1===this.list.length}get dragging(){return this.editBox.dragging}get element(){return this.multiple?this.simulateTarget:this.list[0]}get buttons(){return this.editBox.buttons}constructor(t,i){super(i),this.config=e.DataHelper.clone(Et),this.leafList=new e.LeafList,this.openedGroupList=new e.LeafList,this.simulateTarget=new e.Rect({visible:!1}),this.editBox=new pt(this),this.editToolList={},this.selector=new q(this),this.editMask=new mt(this),this.targetEventIds=[],t&&(this.config=e.DataHelper.default(t,this.config)),this.addMany(this.editMask,this.selector,this.editBox)}select(t){this.target=t}cancel(){this.target=null}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.editing&&(this.innerEditing&&this.innerEditor.update(),this.editTool.update(),this.selector.update())}updateEditBox(){this.multiple&&bt(this),this.update()}updateEditTool(){const t=this.editTool;if(t&&(this.editBox.unload(),t.unload(),this.editTool=null),this.editing){const t=this.single?this.list[0].editOuter:"EditTool";this.editTool=this.editToolList[t]=this.editToolList[t]||Mt.get(t,this),this.editBox.load(),this.editTool.load()}}getEditSize(t){return this.mergeConfig.editSize}onMove(t){if(t instanceof i.MoveEvent){if("drag"!==t.moveType){const{moveable:e,resizeable:i}=this.mergeConfig,o=t.getLocalMove(this.element);"move"===e?(t.stop(),this.move(o.x,o.y)):"zoom"===i&&t.stop()}}else{const e={x:t.totalX,y:t.totalY};t.shiftKey&&(Math.abs(e.x)>Math.abs(e.y)?e.y=0:e.x=0),this.move(i.DragEvent.getValidMove(this.element,this.dragStartPoint,e))}}onScale(t){const{element:e}=this;let{around:o,lockRatio:s,resizeable:n,flipable:r,editSize:a}=this.mergeConfig;if(t instanceof i.ZoomEvent)"zoom"===n&&(t.stop(),this.scaleOf(e.getBoxPoint(t),t.scale,t.scale));else{const{direction:i}=t.current;(t.shiftKey||e.lockRatio)&&(s=!0);const n=lt.getScaleData(e,this.dragStartBounds,i,t.getInnerTotal(e),s,lt.getAround(o,t.altKey),r,this.multiple||"scale"===a);this.editTool.onScaleWithDrag?(n.drag=t,this.scaleWithDrag(n)):this.scaleOf(n.origin,n.scaleX,n.scaleY)}}onRotate(t){const{skewable:o,rotateable:s,around:n,rotateGap:r}=this.mergeConfig,{direction:a,name:l}=t.current;if(o&&"resize-line"===l)return this.onSkew(t);const{element:h}=this;let d,c;if(t instanceof i.RotateEvent){if("rotate"!==s)return;t.stop(),c=t.rotation,d=h.getBoxPoint(t)}else{const e={x:t.x-t.moveX,y:t.y-t.moveY},i=lt.getRotateData(h.boxBounds,a,t.getBoxPoint(h),h.getBoxPoint(e),t.shiftKey?null:h.around||h.origin||n||"center");c=i.rotation,d=i.origin}c=e.MathHelper.getGapRotation(c,r,h.rotation),c&&(h.scaleX*h.scaleY<0&&(c=-c),this.rotateOf(d,e.MathHelper.float(c,2)))}onSkew(t){const{element:e}=this,{around:i}=this.mergeConfig,{origin:o,skewX:s,skewY:n}=lt.getSkewData(e.boxBounds,t.current.direction,t.getInnerMove(e),lt.getAround(i,t.altKey));(s||n)&&this.skewOf(o,s,n)}move(t,e=0){if(!this.mergeConfig.moveable||this.element.locked)return;const{element:i}=this,o=i.getWorldPointByLocal("object"==typeof t?Object.assign({},t):{x:t,y:e},null,!0),s=new I(I.MOVE,{target:i,editor:this,moveX:o.x,moveY:o.y});this.editTool.onMove(s),this.emitEvent(s),this.multiple&&i.move(t,e)}scaleWithDrag(t){if(!this.mergeConfig.resizeable||this.element.locked)return;const{element:e}=this,i=new C(C.SCALE,Object.assign(Object.assign({},t),{target:e,editor:this,worldOrigin:e.getWorldPoint(t.origin)}));this.editTool.onScaleWithDrag(i),this.emitEvent(i)}scaleOf(t,e,i=e,o){if(!this.mergeConfig.resizeable||this.element.locked)return;const{element:s}=this,n=this.getWorldOrigin(t),r=this.multiple&&this.getChangedTransform((()=>s.scaleOf(t,e,i))),a=new C(C.SCALE,{target:s,editor:this,worldOrigin:n,scaleX:e,scaleY:i,transform:r});this.editTool.onScale(a),this.emitEvent(a)}flip(t){if(this.element.locked)return;const{element:i}=this,o=this.getWorldOrigin("center"),s=this.multiple?this.getChangedTransform((()=>i.flip(t))):new e.Matrix(e.LeafHelper.getFlipTransform(i,t)),n=new C(C.SCALE,{target:i,editor:this,worldOrigin:o,scaleX:"x"===t?-1:1,scaleY:"y"===t?-1:1,transform:s});this.editTool.onScale(n),this.emitEvent(n)}rotateOf(t,e){if(!this.mergeConfig.rotateable||this.element.locked)return;const{element:i}=this,o=this.getWorldOrigin(t),s=this.multiple&&this.getChangedTransform((()=>i.rotateOf(t,e))),n=new V(V.ROTATE,{target:i,editor:this,worldOrigin:o,rotation:e,transform:s});this.editTool.onRotate(n),this.emitEvent(n)}skewOf(t,e,i=0,o){if(!this.mergeConfig.skewable||this.element.locked)return;const{element:s}=this,n=this.getWorldOrigin(t),r=this.multiple&&this.getChangedTransform((()=>s.skewOf(t,e,i))),a=new D(D.SKEW,{target:s,editor:this,worldOrigin:n,skewX:e,skewY:i,transform:r});this.editTool.onSkew(a),this.emitEvent(a)}getWorldOrigin(t){return this.element.getWorldPoint(e.LeafHelper.getInnerOrigin(this.element,t))}getChangedTransform(t){const{element:i}=this,o=new e.Matrix(i.worldTransform);return t(),new e.Matrix(i.worldTransform).divide(o)}group(t){return this.multiple&&(this.target=_t.group(this.list,this.element,t),this.emitGroupEvent(Ot.GROUP,this.target)),this.target}ungroup(){const{list:t}=this;return t.length&&(t.forEach((t=>t.isBranch&&this.emitGroupEvent(Ot.BEFORE_UNGROUP,t))),this.target=_t.ungroup(t),t.forEach((t=>t.isBranch&&this.emitGroupEvent(Ot.UNGROUP,t)))),this.list}openGroup(t){this.openedGroupList.add(t),t.hitChildren=!0,this.emitGroupEvent(Ot.OPEN,t)}closeGroup(t){this.openedGroupList.remove(t),t.hitChildren=!1,this.emitGroupEvent(Ot.CLOSE,t)}checkOpenedGroups(){const t=this.openedGroupList;if(t.length){let{list:i}=t;this.editing&&(i=[],t.forEach((t=>this.list.every((i=>!e.LeafHelper.hasParent(i,t)))&&i.push(t)))),i.forEach((t=>this.closeGroup(t)))}this.editing&&!this.selector.dragging&&this.checkDeepSelect()}checkDeepSelect(){let t,{list:e}=this;for(let i=0;i<e.length;i++)for(t=e[i].parent;t&&!t.hitChildren;)this.openGroup(t),t=t.parent}emitGroupEvent(t,e){const i=new Ot(t,{editTarget:e});this.emitEvent(i),e.emitEvent(i)}openInnerEditor(t){if(t&&(this.target=t),this.single){const t=this.element,e=t.editInner;e&&Mt.list[e]&&(this.editTool.unload(),this.innerEditing=!0,this.innerEditor=this.editToolList[e]||Mt.get(e,this),this.innerEditor.editTarget=t,this.emitInnerEvent(Tt.BEFORE_OPEN),this.innerEditor.load(),this.emitInnerEvent(Tt.OPEN))}}closeInnerEditor(){this.innerEditing&&(this.innerEditing=!1,this.emitInnerEvent(Tt.BEFORE_CLOSE),this.innerEditor.unload(),this.emitInnerEvent(Tt.CLOSE),this.editTool.load(),this.innerEditor=null)}emitInnerEvent(t){const{innerEditor:e}=this,{editTarget:i}=e,o=new Tt(t,{editTarget:i,innerEditor:e});this.emitEvent(o),i.emitEvent(o)}lock(){this.list.forEach((t=>t.locked=!0)),this.update()}unlock(){this.list.forEach((t=>t.locked=!1)),this.update()}toTop(){this.list.length&&(_t.toTop(this.list),this.leafList.update())}toBottom(){this.list.length&&(_t.toBottom(this.list),this.leafList.update())}listenTargetEvents(){if(!this.targetEventIds.length){const{leafer:t}=this.list[0];this.targetEventIds=[this.app.on_(i.MoveEvent.BEFORE_MOVE,this.onMove,this,!0),this.app.on_(i.ZoomEvent.BEFORE_ZOOM,this.onScale,this,!0),this.app.on_(i.RotateEvent.BEFORE_ROTATE,this.onRotate,this,!0),t.on_(e.RenderEvent.START,this.update,this),t.on_([i.KeyEvent.HOLD,i.KeyEvent.UP],(t=>{dt(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(),Object.values(this.editToolList).forEach((t=>t.destroy())),this.editToolList={},this.target=this.hoverTarget=this.simulateTarget=this.editTool=this.innerEditor=null,super.destroy())}}H([z((function(t,e){t.emitEvent(new B(B.HOVER,{editor:t,value:t.hoverTarget,oldValue:e}))}))],Pt.prototype,"hoverTarget",void 0),H([z((function(t,i){const{target:o}=t;o?t.leafList=o instanceof e.LeafList?o:new e.LeafList(o):(t.leafList.reset(),t.closeInnerEditor()),t.emitEvent(new B(B.SELECT,{editor:t,value:o,oldValue:i})),t.checkOpenedGroups(),t.editing?t.waitLeafer((()=>{t.multiple&&bt(t),ct(t),t.updateEditTool(),t.update(),t.listenTargetEvents()})):(t.updateEditTool(),t.removeTargetEvents())}))],Pt.prototype,"target",void 0);class Ht{static registerInnerEditor(){Mt.register(this)}get tag(){return"InnerEditor"}get editBox(){return this.editor.editBox}constructor(t){this.editor=t,this.create()}onCreate(){}create(){this.view=new e.Group,this.onCreate()}onLoad(){}load(){this.editor.selector.hittable=this.editor.app.tree.hitChildren=!1,this.onLoad()}onUpdate(){}update(){this.onUpdate()}onUnload(){}unload(){this.editor.selector.hittable=this.editor.app.tree.hitChildren=!0,this.onUnload()}onDestroy(){}destroy(){this.onDestroy(),this.editor&&(this.view&&this.view.destroy(),this.eventIds&&this.editor.off_(this.eventIds),this.editor=this.view=this.eventIds=null)}}t.EditTool=class extends Ht{static registerEditTool(){Mt.register(this)}get tag(){return"EditTool"}onMove(t){const{moveX:e,moveY:i,editor:o}=t,{app:s,list:n}=o;s.lockLayout(),n.forEach((t=>{t.moveWorld(e,i)})),s.unlockLayout()}onScale(t){const{scaleX:e,scaleY:i,transform:o,worldOrigin:s,editor:n}=t,{app:r,list:a}=n;r.lockLayout(),a.forEach((t=>{const r="scale"!==n.getEditSize(t);o?t.transformWorld(o,r):t.scaleOfWorld(s,e,i,r)})),r.unlockLayout()}onRotate(t){const{rotation:e,transform:i,worldOrigin:o,editor:s}=t,{app:n,list:r}=s;n.lockLayout(),r.forEach((t=>{const n="scale"!==s.getEditSize(t);i?t.transformWorld(i,n):t.rotateOfWorld(o,e)})),n.unlockLayout()}onSkew(t){const{skewX:e,skewY:i,transform:o,worldOrigin:s,editor:n}=t,{app:r,list:a}=n;r.lockLayout(),a.forEach((t=>{const r="scale"!==n.getEditSize(t);o?t.transformWorld(o,r):t.skewOfWorld(s,e,i,r)})),r.unlockLayout()}load(){this.editBox.view.visible=!0,this.onLoad()}update(){const{editor:t,editBox:e}=this,{simulateTarget:i,element:o}=t;t.multiple&&i.parent.updateLayout();const{x:s,y:n,scaleX:r,scaleY:a,rotation:l,skewX:h,skewY:d,width:c,height:g}=o.getLayoutBounds("box",t,!0);e.set({x:s,y:n,scaleX:r,scaleY:a,rotation:l,skewX:h,skewY:d}),e.update({x:0,y:0,width:c,height:g}),this.onUpdate()}unload(){this.editBox.view.visible=!1,this.onUnload()}},t.EditTool=H([kt()],t.EditTool);const{left:Rt,right:Bt}=e.Direction9,{move:It,copy:Ct}=e.PointHelper;return t.LineEditTool=class extends t.EditTool{constructor(){super(...arguments),this.scaleOfEvent=!0}get tag(){return"LineEditTool"}onScaleWithDrag(t){const{drag:i,direction:o,lockRatio:s,around:n}=t,r=t.target,a=o===Rt;if(r.pathInputed){const{path:t}=r.__,{from:e,to:o}=this.getFromToByPath(t);this.dragPoint(e,o,a,n,this.getInnerMove(r,i,s)),t[1]=e.x,t[2]=e.y,t[4]=o.x,t[5]=o.y,r.path=t}else if(r.points){const{points:t}=r,{from:e,to:o}=this.getFromToByPoints(t);this.dragPoint(e,o,a,n,this.getInnerMove(r,i,s)),t[0]=e.x,t[1]=e.y,t[2]=o.x,t[3]=o.y,r.points=t}else{const t=e.getPointData(),{toPoint:o}=r;r.rotation=0,this.dragPoint(t,o,a,n,this.getInnerMove(r,i,s)),r.getLocalPointByInner(t,null,null,!0),r.getLocalPointByInner(o,null,null,!0),r.x=t.x,r.y=t.y,r.getInnerPointByLocal(o,null,null,!0),r.toPoint=o}}getInnerMove(t,e,i){const o=e.getInnerMove(t);return i&&(Math.abs(o.x)>Math.abs(o.y)?o.y=0:o.x=0),o}getFromToByPath(t){return{from:{x:t[1],y:t[2]},to:{x:t[4],y:t[5]}}}getFromToByPoints(t){return{from:{x:t[0],y:t[1]},to:{x:t[2],y:t[3]}}}dragPoint(t,e,i,o,s){const{x:n,y:r}=s;i?(It(t,n,r),o&&It(e,-n,-r)):(o&&It(t,-n,-r),It(e,n,r))}onSkew(t){}onUpdate(){const{editBox:t}=this,{rotatePoints:e,resizeLines:i,resizePoints:o,rect:s}=t,n=this.editor.element;let r,a;if(n.pathInputed?r=this.getFromToByPath(n.__.path):n.points&&(r=this.getFromToByPoints(n.__.points)),r){const{from:i,to:a}=r;n.innerToWorld(i,i,!1,t),n.innerToWorld(a,a,!1,t),s.pen.clearPath().moveTo(i.x,i.y).lineTo(a.x,a.y),Ct(o[7],i),Ct(e[7],i),Ct(o[3],a),Ct(e[3],a)}for(let t=0;t<8;t++)t<4&&(i[t].visible=!1),a=t===Rt||t===Bt,o[t].visible=a,e[t].visible=!r&&a}},t.LineEditTool=H([kt()],t.LineEditTool),e.Creator.editor=function(t){return new Pt(t)},e.UI.setEditConfig=function(t){e.defineKey(this.prototype,"editConfig",{get(){return"function"==typeof t?t(this):t}})},e.UI.setEditOuter=function(t){e.defineKey(this.prototype,"editOuter",{get(){return"string"==typeof t?t:t(this)}})},e.UI.setEditInner=function(t){e.defineKey(this.prototype,"editInner",{get(){return"string"==typeof t?t:t(this)}})},t.EditBox=pt,t.EditDataHelper=lt,t.EditPoint=ut,t.EditSelect=q,t.EditSelectHelper=j,t.EditToolCreator=Mt,t.Editor=Pt,t.EditorEvent=B,t.EditorGroupEvent=Ot,t.EditorHelper=_t,t.EditorMoveEvent=I,t.EditorRotateEvent=V,t.EditorScaleEvent=C,t.EditorSkewEvent=D,t.InnerEditor=Ht,t.InnerEditorEvent=Tt,t.PathScaler=m,t.SelectArea=F,t.Stroker=U,t.registerEditTool=kt,t.registerInnerEditor=xt,t.scaleResize=x,t.scaleResizeFontSize=M,t.scaleResizeGroup=O,t.scaleResizePath=S,t.scaleResizePoints=T,t}({},LeaferUI,LeaferUI);
|
|
1
|
+
this.LeaferIN=this.LeaferIN||{},this.LeaferIN.editor=function(t,e,i){"use strict";const{M:o,L:s,C:n,Q:r,Z:a,N:h,D:l,X:c,G:d,F:g,O:u,P:f,U:p}=e.PathCommandMap,m={scale(t,e,i){if(!t)return;let m,E=0,b=t.length;for(;E<b;)switch(m=t[E],m){case o:case s:v(t,e,i,E,1),E+=3;break;case n:v(t,e,i,E,3),E+=7;break;case r:v(t,e,i,E,2),E+=5;break;case a:E+=1;break;case h:v(t,e,i,E,2),E+=5;break;case l:v(t,e,i,E,2),E+=9;break;case c:v(t,e,i,E,2),E+=6;break;case d:v(t,e,i,E,2),E+=9;break;case g:v(t,e,i,E,2),E+=5;break;case u:t[E]=d,t.splice(E+4,0,t[E+3],0),v(t,e,i,E,2),E+=9,b+=2;break;case f:t[E]=g,t.splice(E+4,0,t[E+3]),v(t,e,i,E,2),E+=5,b+=1;break;case p:v(t,e,i,E,2),E+=6}},scalePoints(t,e,i,o,s){for(let n=s?o+1:0,r=s?n+2*s:t.length;n<r;n+=2)t[n]*=e,t[n+1]*=i}},{scalePoints:v}=m,E=e.MatrixHelper.get(),{topLeft:b,top:y,topRight:L,right:w,bottom:_,left:k}=e.Direction9;function x(t,e,i){t.pathInputed?M(t,e,i):(1!==e&&(t.width*=e),1!==i&&(t.height*=i))}function T(t,e,i){const{app:o}=t,s=o&&o.editor;let n=e;if(s.editing){const o=t.__layout;let{width:r,height:a}=o.boxBounds;switch(r*=i-e,a*=e-i,s.resizeDirection){case y:case _:n=i,o.affectScaleOrRotation?t.moveInner(-r/2,0):t.x-=r/2;break;case k:case w:o.affectScaleOrRotation?t.moveInner(0,-a/2):t.y-=a/2;break;case b:case L:o.affectScaleOrRotation?t.moveInner(0,-a):t.y-=a}}t.fontSize*=n;const r=t.__;r.__autoWidth||(t.width*=n),r.__autoHeight||(t.height*=n)}function M(t,e,i){m.scale(t.__.path,e,i),t.path=t.__.path}function O(t,e,i){const{points:o}=t;"object"==typeof o[0]?o.forEach((t=>{t.x*=e,t.y*=i})):m.scalePoints(o,e,i),t.points=o}function S(t,e,i){const{children:o}=t;for(let t=0;t<o.length;t++)E.a=e,E.d=i,o[t].transform(E,!0)}const P=e.Leaf.prototype;function C(t,e,i,o){var s,n=arguments.length,r=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,o);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(r=(n<3?s(r):n>3?s(e,i,r):s(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r}function H(t){return t?t instanceof Array?t:[t]:[]}P.scaleResize=function(t,e=t,i){const o=this;i||o.editConfig&&"scale"===o.editConfig.editSize?(o.scaleX*=t,o.scaleY*=e):(t<0&&(o.scaleX*=-1,t=-t),e<0&&(o.scaleY*=-1,e=-e),this.__scaleResize(t,e))},P.__scaleResize=function(t,e){x(this,t,e)},P.resizeWidth=function(t){const e=t/this.getBounds("box","local").width;this.scaleOf(this.__layout.boxBounds,e,this.__.lockRatio?e:1,!0)},P.resizeHeight=function(t){const e=t/this.getBounds("box","local").height;this.scaleOf(this.__layout.boxBounds,this.__.lockRatio?e:1,e,!0)},e.Text.prototype.__scaleResize=function(t,e){this.__.resizeFontSize||this.editConfig&&"font-size"===this.editConfig.editSize?T(this,t,e):x(this,t,e)},e.Path.prototype.__scaleResize=function(t,e){M(this,t,e)},e.Line.prototype.__scaleResize=function(t,e){this.pathInputed?M(this,t,e):this.points?O(this,t,e):this.width*=t},e.Polygon.prototype.__scaleResize=function(t,e){this.pathInputed?M(this,t,e):this.points?O(this,t,e):x(this,t,e)},e.Group.prototype.__scaleResize=function(t,e){S(this,t,e)},e.Box.prototype.__scaleResize=function(t,e){this.__.__autoSize&&this.children.length?S(this,t,e):(x(this,t,e),this.__.resizeChildren&&S(this,t,e))},"function"==typeof SuppressedError&&SuppressedError;class R extends e.Event{get list(){return H(this.value)}get oldList(){return H(this.oldValue)}constructor(t,e){super(t),e&&Object.assign(this,e)}}R.SELECT="editor.select",R.HOVER="editor.hover";class B extends R{constructor(t,e){super(t,e)}}B.MOVE="editor.move";class I extends R{constructor(t,e){super(t,e)}}I.SCALE="editor.scale";class V extends R{constructor(t,e){super(t,e)}}V.ROTATE="editor.rotate";class D extends R{constructor(t,e){super(t,e)}}function z(t){return(i,o)=>{const s="_"+o;e.defineKey(i,o,{get(){return this[s]},set(e){const i=this[s];i!==e&&(this[s]=e,t(this,i))}})}}D.SKEW="editor.skew";const A=e.MatrixHelper.get(),{abs:Z}=Math,{copy:W,scale:G}=e.MatrixHelper;class U extends e.UI{constructor(){super(),this.list=[],this.hittable=!1,this.strokeAlign="center"}setTarget(t,e){this.set(e),this.target=t}__draw(t,i){const{list:o}=this;if(o.length){let s;const n=this.__,{stroke:r,strokeWidth:a,fill:h}=n,{bounds:l}=i;for(let c=0;c<o.length;c++){s=o[c];const{worldTransform:d,worldRenderBounds:g}=s;if(l&&l.hit(g,i.matrix)){const o=Z(d.scaleX),l=Z(d.scaleY);if(o!==l){W(A,d),G(A,1/o,1/l),t.setWorld(A,i.matrix),t.beginPath(),n.strokeWidth=a;const{x:e,y:r,width:h,height:c}=s.__layout.boxBounds;t.rect(e*o,r*l,h*o,c*l)}else t.setWorld(d,i.matrix),t.beginPath(),s.__.__useArrow?s.__drawPath(t):s.__.__pathForRender?s.__drawRenderPath(t):s.__drawPathByBox(t),n.strokeWidth=a/Z(d.scaleX);r&&("string"==typeof r?e.Paint.stroke(r,this,t):e.Paint.strokes(r,this,t)),h&&("string"==typeof h?e.Paint.fill(h,this,t):e.Paint.fills(h,this,t))}}n.strokeWidth=a}}destroy(){this.target=null,super.destroy()}}C([z((function(t){const e=t.target;t.list=e?e instanceof Array?e:[e]:[],t.forceUpdate()}))],U.prototype,"target",void 0);class F extends e.Group{constructor(t){super(t),this.strokeArea=new e.Rect({strokeAlign:"center"}),this.fillArea=new e.Rect,this.visible=this.hittable=!1,this.addMany(this.fillArea,this.strokeArea)}setStyle(t,e){const{visible:i,stroke:o,strokeWidth:s}=t;this.visible=i,this.strokeArea.reset(Object.assign({stroke:o,strokeWidth:s},e||{})),this.fillArea.reset({visible:!e,fill:o,opacity:.2})}setBounds(t){this.strokeArea.set(t),this.fillArea.set(t)}}const{No:X,Yes:Y,NoAndSkip:N,YesAndSkip:K}=e.Answer,j={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?K:N;if(t.isFrame)return e.includes(t.__layout.boxBounds,t.__world)?K:X;if(e.hit(t.__layout.boxBounds,t.__world)&&t.__.hitSelf)return Y}return X}return t.isBranch?N:X}},{findOne:$}=j;class q extends e.Group{get dragging(){return!!this.originList}get running(){const{editor:t}=this;return this.hittable&&t.visible&&t.hittable&&t.mergeConfig.selector}get isMoveMode(){return this.app&&this.app.interaction.moveMode}constructor(t){super(),this.hoverStroker=new U,this.targetStroker=new U,this.bounds=new e.Bounds,this.selectArea=new F,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:o,hoverStyle:s}=t.mergeConfig;this.hoverStroker.setTarget(o?this.editor.hoverTarget:null,Object.assign({stroke:e,strokeWidth:i},s||{}))}}onSelect(){if(this.running){const{mergeConfig:t,list:e}=this.editor,{stroke:i,strokeWidth:o}=t;this.targetStroker.setTarget(e,{stroke:i,strokeWidth:Math.max(1,o/2)}),this.hoverStroker.target=null}}update(){this.targetStroker.target&&this.targetStroker.forceUpdate()}onPointerMove(t){const{app:e,editor:i}=this;if(this.running&&!this.isMoveMode&&e.interaction.canHover&&!e.interaction.dragging){const e=this.findUI(t);i.hoverTarget=i.hasItem(e)?null:e}this.isMoveMode&&(i.hoverTarget=null)}onBeforeDown(t){if(t.multiTouch)return;const{select:e}=this.editor.mergeConfig;"press"===e&&(this.app.config.mobile?this.waitSelect=()=>this.checkAndSelect(t):this.checkAndSelect(t))}onTap(t){if(t.multiTouch)return;const{editor:e}=this,{select:i}=e.mergeConfig;"tap"===i?this.checkAndSelect(t):this.waitSelect&&this.waitSelect(),this.needRemoveItem?e.removeItem(this.needRemoveItem):this.isMoveMode&&(e.target=null)}checkAndSelect(t){if(this.needRemoveItem=null,this.allowSelect(t)){const{editor:e}=this,i=this.findUI(t);i?this.isMultipleSelect(t)?e.hasItem(i)?this.needRemoveItem=i:e.addItem(i):e.target=i:this.allow(t.target)&&(t.shiftKey||(e.target=null))}}onDragStart(t){if(!t.multiTouch&&(this.waitSelect&&this.waitSelect(),this.allowDrag(t))){const{editor:e}=this,{stroke:i,area:o}=e.mergeConfig,{x:s,y:n}=t.getInnerPoint(this);this.bounds.set(s,n),this.selectArea.setStyle({visible:!0,stroke:i,x:s,y:n},o),this.selectArea.setBounds(this.bounds.get()),this.originList=e.leafList.clone()}}onDrag(t){if(!t.multiTouch){if(this.editor.dragging)return this.onDragEnd(t);if(this.dragging){const{editor:i}=this,o=t.getInnerTotal(this),s=this.bounds.clone().unsign(),n=new e.LeafList(i.app.find(j.findBounds,s));if(this.bounds.width=o.x,this.bounds.height=o.y,this.selectArea.setBounds(s.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!==i.list.length||i.list.some(((e,i)=>e!==t[i])))&&(i.target=t)}else i.target=this.originList.list}}}onDragEnd(t){t.multiTouch||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.running||!this.editor.mergeConfig.boxSelect||t.target.draggable)&&(!this.editor.editing&&this.allow(t.target)||t.shiftKey&&!$(t.path))}allowSelect(t){return this.running&&!this.isMoveMode&&!t.middle}findDeepOne(t){const i={exclude:new e.LeafList(this.editor.editBox.rect)};return $(t.target.leafer.interaction.findPath(t,i))}findUI(t){return this.isMultipleSelect(t)?this.findDeepOne(t):$(t.path)}isMultipleSelect(t){return t.shiftKey||this.editor.mergeConfig.continuousSelect}__listenEvents(){const{editor:t}=this;t.waitLeafer((()=>{const{app:e}=t;e.selector.proxy=t,this.__eventIds=[t.on_(R.HOVER,this.onHover,this),t.on_(R.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,!0),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.needRemoveItem=null,this.__removeListenEvents(),super.destroy()}}const{topLeft:Q,top:J,topRight:tt,right:et,bottomRight:it,bottom:ot,bottomLeft:st,left:nt}=e.Direction9,{toPoint:rt}=e.AroundHelper,{within:at}=e.MathHelper,ht={getScaleData(t,e,i,o,s,n,r,a){let h,l={},c=1,d=1;const{boxBounds:g,widthRange:u,heightRange:f}=t,{width:p,height:m}=e;n&&(o.x*=2,o.y*=2);const v=t.scaleX/e.scaleX,E=t.scaleY/e.scaleY,b=v<0?-1:1,y=E<0?-1:1,L=a?v:b*g.width/p,w=a?E:y*g.height/m;o.x*=a?v:b,o.y*=a?E:y,Math.abs(o.x)===p&&(o.x+=.1),Math.abs(o.y)===m&&(o.y+=.1);const _=(-o.y+m)/m,k=(o.x+p)/p,x=(o.y+m)/m,T=(-o.x+p)/p;switch(i){case J:d=_,h="bottom";break;case et:c=k,h="left";break;case ot:d=x,h="top";break;case nt:c=T,h="right";break;case Q:d=_,c=T,h="bottom-right";break;case tt:d=_,c=k,h="bottom-left";break;case it:d=x,c=k,h="top-left";break;case st:d=x,c=T,h="top-right"}if(s){if(!("corner"===s&&i%2)){let t;switch(i){case J:case ot:t=d;break;case nt:case et:t=c;break;default:t=Math.sqrt(Math.abs(c*d))}c=c<0?-t:t,d=d<0?-t:t}}if(c/=L,d/=w,!r){const{worldTransform:e}=t;c<0&&(c=1/g.width/e.scaleX),d<0&&(d=1/g.height/e.scaleY)}if(u){const e=g.width*t.scaleX;c=at(e*c,u)/e}if(f){const e=g.height*t.scaleY;d=at(e*d,f)/e}return rt(n||h,g,l,!0),{origin:l,scaleX:c,scaleY:d,direction:i,lockRatio:s,around:n}},getRotateData(t,i,o,s,n){let r,a={};switch(i){case Q:r="bottom-right";break;case tt:r="bottom-left";break;case it:r="top-left";break;case st:r="top-right";break;default:r="center"}return rt(n||r,t,a,!0),{origin:a,rotation:e.PointHelper.getRotation(s,a,o)}},getSkewData(t,i,o,s){let n,r,a={},h=0,l=0;switch(i){case J:r={x:.5,y:0},n="bottom",h=1;break;case ot:r={x:.5,y:1},n="top",h=1;break;case nt:r={x:0,y:.5},n="right",l=1;break;case et:r={x:1,y:.5},n="left",l=1}const{width:c,height:d}=t;r.x=r.x*c,r.y=r.y*d,rt(s||n,t,a,!0);const g=e.PointHelper.getRotation(r,a,{x:r.x+(h?o.x:0),y:r.y+(l?o.y:0)});return h?h=-g:l=g,{origin:a,skewX:h,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 nt:t=et;break;case Q:t=tt;break;case st:t=it;break;case et:t=nt;break;case tt:t=Q;break;case it:t=st}if(i)switch(t){case J:t=ot;break;case Q:t=st;break;case tt:t=it;break;case ot:t=J;break;case st:t=Q;break;case it:t=tt}return t}},lt={};function ct(t,i){const{editBox:o}=t,s=o.enterPoint;if(!s||!t.editing||!o.visible)return;if("circle"===s.name)return;if("button"===s.pointType)return void(s.cursor||(s.cursor="pointer"));let{rotation:n}=o;const{resizeCursor:r,rotateCursor:a,skewCursor:h,resizeable:l,rotateable:c,skewable:d}=t.mergeConfig,{pointType:g}=s,{flippedX:u,flippedY:f}=o;let p="resize"===g;p&&c&&(i.metaKey||i.ctrlKey||!l)&&(p=!1);const m=d&&!p&&"resize-line"===s.name?h:p?r:a;n+=45*(ht.getFlipDirection(s.direction,u,f)+1),n=2*Math.round(e.MathHelper.formatRotation(n,!0)/2);const{url:v,x:E,y:b}=m,y=v+n;lt[y]?s.cursor=lt[y]:lt[y]=s.cursor={url:gt(v,n),x:E,y:b}}function dt(t){t.editBox.rect.cursor=t.mergeConfig.moveCursor}function gt(t,e){return'"data:image/svg+xml,'+encodeURIComponent(t.replace("{{rotation}}",e.toString()))+'"'}class ut extends e.Box{}const ft=["top","right","bottom","left"];class pt extends e.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.view=new e.Group,this.rect=new e.Box({name:"rect",hitFill:"all",hitStroke:"none",strokeAlign:"center",hitRadius:5}),this.circle=new ut({name:"circle",strokeAlign:"center",around:"center",cursor:"crosshair",hitRadius:5}),this.buttons=new e.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{view:o,resizePoints:s,rotatePoints:n,resizeLines:r,rect:a,circle:h,buttons:l}=this,c=["bottom-right","bottom","bottom-left","left","top-left","top","top-right","right"];for(let o=0;o<8;o++)t=new ut({name:"rotate-point",around:c[o],width:15,height:15,hitFill:"all"}),n.push(t),this.listenPointEvents(t,"rotate",o),o%2&&(e=new ut({name:"resize-line",around:"center",width:10,height:10,hitFill:"all"}),r.push(e),this.listenPointEvents(e,"resize",o)),i=new ut({name:"resize-point",hitRadius:5}),s.push(i),this.listenPointEvents(i,"resize",o);this.listenPointEvents(h,"rotate",2),o.addMany(...n,a,h,l,...r,...s),this.add(o)}load(){const{mergeConfig:t,element:e,single:i}=this.editor,{rect:o,circle:s,resizePoints:n}=this,{stroke:r,strokeWidth:a,moveable:h}=t,l=this.getPointsStyle(),c=this.getMiddlePointsStyle();let d;for(let t=0;t<8;t++)d=n[t],d.set(this.getPointStyle(t%2?c[(t-1)/2%c.length]:l[t/2%l.length])),t%2||(d.rotation=t/2*90);s.set(this.getPointStyle(t.circle||t.rotatePoint||l[0])),o.set(Object.assign({stroke:r,strokeWidth:a},t.rect||{})),o.hittable=!i&&!!h,o.syncEventer=i&&this.editor,i&&h&&(e.syncEventer=o,this.app.interaction.bottomList=[{target:o,proxy:e}])}update(t){if(this.visible=!this.editor.element.locked,this.view.worldOpacity){const{mergeConfig:i}=this.editor,{width:o,height:s}=t,{rect:n,circle:r,buttons:a,resizePoints:h,rotatePoints:l,resizeLines:c}=this,{middlePoint:d,resizeable:g,rotateable:u,hideOnSmall:f}=i,p="number"==typeof f?f:10,m=!(f&&o<p&&s<p);let v,E,b,y={};for(let n=0;n<8;n++)e.AroundHelper.toPoint(e.AroundHelper.directionData[n],t,y),E=h[n],v=l[n],b=c[Math.floor(n/2)],E.set(y),v.set(y),b.set(y),E.visible=b.visible=m&&!(!g&&!u),v.visible=m&&u&&g&&!i.rotatePoint,n%2&&(E.visible=v.visible=m&&!!d,(n+1)/2%2?(b.width=o,E.width>o-30&&(E.visible=!1)):(b.height=s,E.rotation=90,E.width>s-30&&(E.visible=!1)));r.visible=m&&u&&!(!i.circle&&!i.rotatePoint),r.visible&&this.layoutCircle(i),n.path&&(n.path=null),n.set(Object.assign(Object.assign({},t),{visible:!0})),a.visible=m&&a.children.length>0,a.visible&&this.layoutButtons(i)}}layoutCircle(t){const{circleDirection:e,circleMargin:i,buttonsMargin:o,buttonsDirection:s,middlePoint:n}=t,r=ft.indexOf(e||(this.buttons.children.length&&"bottom"===s?"top":"bottom"));this.setButtonPosition(this.circle,r,i||o,!!n)}layoutButtons(t){const{buttons:e}=this,{buttonsDirection:i,buttonsFixed:o,buttonsMargin:s,middlePoint:n}=t,{flippedX:r,flippedY:a}=this;let h=ft.indexOf(i);(h%2&&r||(h+1)%2&&a)&&o&&(h=(h+2)%4);const l=o?ht.getRotateDirection(h,this.flippedOne?this.rotation:-this.rotation,4):h;this.setButtonPosition(e,l,s,!!n),o&&(e.rotation=90*(l-h)),e.scaleX=r?-1:1,e.scaleY=a?-1:1}setButtonPosition(t,e,i,o){const s=this.resizePoints[2*e+1],n=e%2,r=e&&3!==e?1:-1,a=(i+(e%2?(o?s.width:0)+t.boxBounds.width:(o?s.height:0)+t.boxBounds.height)/2)*r;n?(t.x=s.x+a,t.y=s.y):(t.x=s.x,t.y=s.y+a)}unload(){this.visible=!1}getPointStyle(t){const{stroke:e,strokeWidth:i,pointFill:o,pointSize:s,pointRadius:n}=this.editor.mergeConfig,r={fill:o,stroke:e,strokeWidth:i,around:"center",strokeAlign:"center",width:s,height:s,cornerRadius:n};return t?Object.assign(r,t):r}getPointsStyle(){const{point:t}=this.editor.mergeConfig;return t instanceof Array?t:[t]}getMiddlePointsStyle(){const{middlePoint:t}=this.editor.mergeConfig;return t instanceof Array?t:t?[t]:this.getPointsStyle()}onSelect(t){1===t.oldList.length&&(t.oldList[0].syncEventer=null,this.app&&(this.app.interaction.bottomList=null))}onDragStart(t){this.dragging=!0;const{editor:e}=this;"rect"===t.current.name?(this.moving=!0,e.dragStartPoint={x:e.element.x,y:e.element.y},e.opacity=e.mergeConfig.hideOnMove?0:1):"resize"===t.current.pointType&&(e.dragStartBounds=Object.assign({},e.element.getLayoutBounds("box","local")),e.resizeDirection=t.current.direction)}onDragEnd(t){this.dragging=!1,this.moving=!1,"rect"===t.current.name&&(this.editor.opacity=1),this.editor.resizeDirection=void 0}onDrag(t){const{editor:e}=this,i=this.enterPoint=t.current;"rotate"===i.pointType||t.metaKey||t.ctrlKey||!e.mergeConfig.resizeable?e.mergeConfig.rotateable&&e.onRotate(t):"resize"===i.pointType&&e.onScale(t),ct(e,t)}onArrow(t){if(this.editor.editing&&this.editor.mergeConfig.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}this.editor.move(e)}}onDoubleTap(t){"double"===this.editor.mergeConfig.openInner&&this.openInner(t)}onLongPress(t){"long"===this.editor.mergeConfig.openInner&&this.openInner(t)}openInner(t){const{editor:i}=this;if(i.single){const{element:o}=i;if(o.isBranch){if(o.textBox){const t=o.children.find((t=>t.editable&&t instanceof e.Text));if(t)return i.openInnerEditor(t)}i.openGroup(o),i.target=i.selector.findDeepOne(t)}else i.openInnerEditor()}}listenPointEvents(t,e,o){const{editor:s}=this;t.direction=o,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,ct(s,e)}))}__listenEvents(){const{rect:t,editor:e}=this;this.__eventIds=[e.on_(R.SELECT,this.onSelect,this),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,(()=>dt(e))),t.on_(i.PointerEvent.DOUBLE_TAP,this.onDoubleTap,this),t.on_(i.PointerEvent.LONG_PRESS,this.onLongPress,this)]}__removeListenEvents(){this.off_(this.__eventIds),this.__eventIds.length=0}destroy(){this.editor=null,this.__removeListenEvents(),super.destroy()}}class mt extends e.UI{constructor(t){super(),this.editor=t,this.hittable=!1}__draw(t,e){const{editor:i}=this,{mask:o}=i.mergeConfig;if(o&&i.list.length){const{rect:s}=i.editBox,{width:n,height:r}=s.__;t.resetTransform(),t.fillWorld(t.bounds,!0===o?"rgba(0,0,0,0.8)":o),t.setWorld(s.__world,e.matrix),t.clearRect(0,0,n,r)}}destroy(){this.editor=null,super.destroy()}}const vt='\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"/>',Et={editSize:"size",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${vt}\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${vt}\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${vt}\n</filter>\n</defs>\n</svg>\n`,x:12,y:12},selector:!0,hover:!0,select:"press",openInner:"double",boxSelect:!0,moveable:!0,resizeable:!0,flipable:!0,rotateable:!0,skewable:!0},bt=new e.Bounds;function yt(t){const{simulateTarget:e,list:i}=t,{zoomLayer:o}=i[0].leafer.zoomLayer;e.safeChange((()=>e.reset(bt.setListWithFn(i,(t=>t.getBounds("box","page"))).get()))),o.add(e)}const Lt=(t,e)=>t.parent.children.indexOf(t)-e.parent.children.indexOf(e),wt=(t,e)=>e.parent.children.indexOf(e)-t.parent.children.indexOf(t),_t={group(t,i,o){t.sort(wt);const{app:s,parent:n}=t[0];let r;r=o&&o.add?o:new e.Group(o),n.addAt(r,n.children.indexOf(t[0])),t.sort(Lt);const a=new e.Matrix(i.worldTransform);return a.divideParent(n.worldTransform),r.setTransform(a),r.editable=!0,r.hitChildren=!1,s.lockLayout(),t.forEach((t=>t.dropTo(r))),s.unlockLayout(),r},ungroup(t){const{app:e}=t[0],i=[];return e.lockLayout(),t.forEach((t=>{if(t.isBranch&&!t.isBranchLeaf){const{parent:e,children:o}=t;for(;o.length;)i.push(o[0]),o[0].dropTo(e,e.children.indexOf(t));t.remove()}else i.push(t)})),e.unlockLayout(),i},toTop(t){t.sort(Lt),t.forEach((t=>{t.parent&&t.parent.add(t)}))},toBottom(t){t.sort(wt),t.forEach((t=>{t.parent&&t.parent.addAt(t,0)}))}},kt=e.Debug.get("EditToolCreator");function xt(){return t=>{Mt.register(t)}}const Tt=xt,Mt={list:{},register(t){const{tag:e}=t.prototype;Ot[e]?kt.repeat(e):Ot[e]=t},get:(t,e)=>new Ot[t](e)},{list:Ot}=Mt;class St extends R{constructor(t,e){super(t,e)}}St.BEFORE_OPEN="innerEditor.before_open",St.OPEN="innerEditor.open",St.BEFORE_CLOSE="innerEditor.before_close",St.CLOSE="innerEditor.close";class Pt extends R{constructor(t,e){super(t,e)}}Pt.GROUP="editor.group",Pt.BEFORE_UNGROUP="editor.before_ungroup",Pt.UNGROUP="editor.ungroup",Pt.OPEN="editor.open_group",Pt.CLOSE="editor.close_group";const{updateMatrix:Ct}=e.LeafHelper,Ht={x:1,y:1,scaleX:1,scaleY:1,rotation:1,skewX:1,skewY:1},Rt="top-left";class Bt extends e.Rect{get __tag(){return"SimulateElement"}constructor(t){super(),this.checkChange=!0,this.canChange=!0,this.visible=this.hittable=!1,this.on(e.PropertyEvent.CHANGE,(i=>{if(this.checkChange&&Ht[i.attrName]){const{attrName:o,newValue:s,oldValue:n}=i,r="s"===o[0]?(s||1)/(n||1):(s||0)-(n||0);this.canChange=!1;const a=this.__;a[o]=n,Ct(this.parent),Ct(this);const h=new e.Matrix(this.__world);switch(a[o]=s,this.__layout.rotationChange(),Ct(this),this.changedTransform=new e.Matrix(this.__world).divide(h),o){case"x":t.move(r,0);break;case"y":t.move(0,r);break;case"rotation":t.rotateOf(Rt,r);break;case"scaleX":t.scaleOf(Rt,r,1);break;case"scaleY":t.scaleOf(Rt,1,r);break;case"skewX":t.skewOf(Rt,r,0);break;case"skewY":t.skewOf(Rt,0,r)}this.canChange=!0}}))}safeChange(t){this.canChange&&(this.checkChange=!1,t(),this.checkChange=!0)}}class It extends e.Group{get mergeConfig(){const{element:t,config:e}=this;return this.single&&t.editConfig?Object.assign(Object.assign({},e),t.editConfig):e}get list(){return this.leafList.list}get dragHoverExclude(){return[this.editBox.rect]}get editing(){return!!this.list.length}get groupOpening(){return!!this.openedGroupList.length}get multiple(){return this.list.length>1}get single(){return 1===this.list.length}get dragging(){return this.editBox.dragging}get moving(){return this.editBox.moving}get element(){return this.multiple?this.simulateTarget:this.list[0]}get buttons(){return this.editBox.buttons}constructor(t,i){super(i),this.config=e.DataHelper.clone(Et),this.leafList=new e.LeafList,this.openedGroupList=new e.LeafList,this.simulateTarget=new Bt(this),this.editBox=new pt(this),this.editToolList={},this.selector=new q(this),this.editMask=new mt(this),this.targetEventIds=[],t&&(this.config=e.DataHelper.default(t,this.config)),this.addMany(this.editMask,this.selector,this.editBox)}select(t){this.target=t}cancel(){this.target=null}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.editing&&(this.innerEditing&&this.innerEditor.update(),this.editTool.update(),this.selector.update())}updateEditBox(){this.multiple&&yt(this),this.update()}updateEditTool(){const t=this.editTool;if(t&&(this.editBox.unload(),t.unload(),this.editTool=null),this.editing){const t=this.single?this.list[0].editOuter:"EditTool";this.editTool=this.editToolList[t]=this.editToolList[t]||Mt.get(t,this),this.editBox.load(),this.editTool.load()}}getEditSize(t){return this.mergeConfig.editSize}onMove(t){if(t instanceof i.MoveEvent){if("drag"!==t.moveType){const{moveable:e,resizeable:i}=this.mergeConfig,o=t.getLocalMove(this.element);"move"===e?(t.stop(),this.move(o.x,o.y)):"zoom"===i&&t.stop()}}else{const e={x:t.totalX,y:t.totalY};t.shiftKey&&(Math.abs(e.x)>Math.abs(e.y)?e.y=0:e.x=0),this.move(i.DragEvent.getValidMove(this.element,this.dragStartPoint,e))}}onScale(t){const{element:e}=this;let{around:o,lockRatio:s,resizeable:n,flipable:r,editSize:a}=this.mergeConfig;if(t instanceof i.ZoomEvent)"zoom"===n&&(t.stop(),this.scaleOf(e.getBoxPoint(t),t.scale,t.scale));else{const{direction:i}=t.current;(t.shiftKey||e.lockRatio)&&(s=!0);const n=ht.getScaleData(e,this.dragStartBounds,i,t.getInnerTotal(e),s,ht.getAround(o,t.altKey),r,this.multiple||"scale"===a);this.editTool.onScaleWithDrag?(n.drag=t,this.scaleWithDrag(n)):this.scaleOf(n.origin,n.scaleX,n.scaleY)}}onRotate(t){const{skewable:o,rotateable:s,around:n,rotateGap:r}=this.mergeConfig,{direction:a,name:h}=t.current;if(o&&"resize-line"===h)return this.onSkew(t);const{element:l}=this;let c,d;if(t instanceof i.RotateEvent){if("rotate"!==s)return;t.stop(),d=t.rotation,c=l.getBoxPoint(t)}else{const e={x:t.x-t.moveX,y:t.y-t.moveY},i=ht.getRotateData(l.boxBounds,a,t.getBoxPoint(l),l.getBoxPoint(e),t.shiftKey?null:l.around||l.origin||n||"center");d=i.rotation,c=i.origin}d=e.MathHelper.getGapRotation(d,r,l.rotation),d&&(l.scaleX*l.scaleY<0&&(d=-d),this.rotateOf(c,e.MathHelper.float(d,2)))}onSkew(t){const{element:e}=this,{around:i}=this.mergeConfig,{origin:o,skewX:s,skewY:n}=ht.getSkewData(e.boxBounds,t.current.direction,t.getInnerMove(e),ht.getAround(i,t.altKey));(s||n)&&this.skewOf(o,s,n)}move(t,e=0){if(!this.checkTransform("moveable"))return;const{element:i}=this,o=i.getWorldPointByLocal("object"==typeof t?Object.assign({},t):{x:t,y:e},null,!0);this.multiple&&i.safeChange((()=>i.move(t,e)));const s=new B(B.MOVE,{target:i,editor:this,moveX:o.x,moveY:o.y});this.editTool.onMove(s),this.emitEvent(s)}scaleWithDrag(t){if(!this.checkTransform("resizeable"))return;const{element:e}=this,i=new I(I.SCALE,Object.assign(Object.assign({},t),{target:e,editor:this,worldOrigin:e.getWorldPoint(t.origin)}));this.editTool.onScaleWithDrag(i),this.emitEvent(i)}scaleOf(t,e,i=e,o){if(!this.checkTransform("resizeable"))return;const{element:s}=this,n=this.getWorldOrigin(t),r=this.multiple&&this.getChangedTransform((()=>s.safeChange((()=>s.scaleOf(t,e,i))))),a=new I(I.SCALE,{target:s,editor:this,worldOrigin:n,scaleX:e,scaleY:i,transform:r});this.editTool.onScale(a),this.emitEvent(a)}flip(t){if(!this.checkTransform("resizeable"))return;const{element:i}=this,o=this.getWorldOrigin("center"),s=this.multiple?this.getChangedTransform((()=>i.safeChange((()=>i.flip(t))))):new e.Matrix(e.LeafHelper.getFlipTransform(i,t)),n=new I(I.SCALE,{target:i,editor:this,worldOrigin:o,scaleX:"x"===t?-1:1,scaleY:"y"===t?-1:1,transform:s});this.editTool.onScale(n),this.emitEvent(n)}rotateOf(t,e){if(!this.checkTransform("rotateable"))return;const{element:i}=this,o=this.getWorldOrigin(t),s=this.multiple&&this.getChangedTransform((()=>i.safeChange((()=>i.rotateOf(t,e))))),n=new V(V.ROTATE,{target:i,editor:this,worldOrigin:o,rotation:e,transform:s});this.editTool.onRotate(n),this.emitEvent(n)}skewOf(t,e,i=0,o){if(!this.checkTransform("skewable"))return;const{element:s}=this,n=this.getWorldOrigin(t),r=this.multiple&&this.getChangedTransform((()=>s.safeChange((()=>s.skewOf(t,e,i))))),a=new D(D.SKEW,{target:s,editor:this,worldOrigin:n,skewX:e,skewY:i,transform:r});this.editTool.onSkew(a),this.emitEvent(a)}checkTransform(t){return this.element&&!this.element.locked&&this.mergeConfig[t]}getWorldOrigin(t){return this.element.getWorldPoint(e.LeafHelper.getInnerOrigin(this.element,t))}getChangedTransform(t){const{element:i}=this;if(this.multiple&&!i.canChange)return i.changedTransform;const o=new e.Matrix(i.worldTransform);return t(),new e.Matrix(i.worldTransform).divide(o)}group(t){return this.multiple&&(this.target=_t.group(this.list,this.element,t),this.emitGroupEvent(Pt.GROUP,this.target)),this.target}ungroup(){const{list:t}=this;return t.length&&(t.forEach((t=>t.isBranch&&this.emitGroupEvent(Pt.BEFORE_UNGROUP,t))),this.target=_t.ungroup(t),t.forEach((t=>t.isBranch&&this.emitGroupEvent(Pt.UNGROUP,t)))),this.list}openGroup(t){this.openedGroupList.add(t),t.hitChildren=!0,this.emitGroupEvent(Pt.OPEN,t)}closeGroup(t){this.openedGroupList.remove(t),t.hitChildren=!1,this.emitGroupEvent(Pt.CLOSE,t)}checkOpenedGroups(){const t=this.openedGroupList;if(t.length){let{list:i}=t;this.editing&&(i=[],t.forEach((t=>this.list.every((i=>!e.LeafHelper.hasParent(i,t)))&&i.push(t)))),i.forEach((t=>this.closeGroup(t)))}this.editing&&!this.selector.dragging&&this.checkDeepSelect()}checkDeepSelect(){let t,{list:e}=this;for(let i=0;i<e.length;i++)for(t=e[i].parent;t&&!t.hitChildren;)this.openGroup(t),t=t.parent}emitGroupEvent(t,e){const i=new Pt(t,{editTarget:e});this.emitEvent(i),e.emitEvent(i)}openInnerEditor(t,e){if(t&&e&&(this.target=t),this.single){const e=t||this.element,i=e.editInner;i&&Mt.list[i]&&(this.editTool.unload(),this.innerEditing=!0,this.innerEditor=this.editToolList[i]||Mt.get(i,this),this.innerEditor.editTarget=e,this.emitInnerEvent(St.BEFORE_OPEN),this.innerEditor.load(),this.emitInnerEvent(St.OPEN))}}closeInnerEditor(){this.innerEditing&&(this.innerEditing=!1,this.emitInnerEvent(St.BEFORE_CLOSE),this.innerEditor.unload(),this.emitInnerEvent(St.CLOSE),this.editTool.load(),this.innerEditor=null)}emitInnerEvent(t){const{innerEditor:e}=this,{editTarget:i}=e,o=new St(t,{editTarget:i,innerEditor:e});this.emitEvent(o),i.emitEvent(o)}lock(){this.list.forEach((t=>t.locked=!0)),this.update()}unlock(){this.list.forEach((t=>t.locked=!1)),this.update()}toTop(){this.list.length&&(_t.toTop(this.list),this.leafList.update())}toBottom(){this.list.length&&(_t.toBottom(this.list),this.leafList.update())}listenTargetEvents(){if(!this.targetEventIds.length){const{app:t,leafer:o}=this;this.targetEventIds=[o.on_(e.RenderEvent.START,this.update,this),t.on_(e.RenderEvent.CHILD_START,this.forceRender,this),t.on_(i.MoveEvent.BEFORE_MOVE,this.onMove,this,!0),t.on_(i.ZoomEvent.BEFORE_ZOOM,this.onScale,this,!0),t.on_(i.RotateEvent.BEFORE_ROTATE,this.onRotate,this,!0),t.on_([i.KeyEvent.HOLD,i.KeyEvent.UP],(t=>{ct(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(),Object.values(this.editToolList).forEach((t=>t.destroy())),this.editToolList={},this.target=this.hoverTarget=null,this.simulateTarget=this.editTool=this.innerEditor=null,super.destroy())}}C([z((function(t,e){t.emitEvent(new R(R.HOVER,{editor:t,value:t.hoverTarget,oldValue:e}))}))],It.prototype,"hoverTarget",void 0),C([z((function(t,i){const{target:o}=t;o?t.leafList=o instanceof e.LeafList?o:new e.LeafList(o):(t.simulateTarget.remove(),t.leafList.reset(),t.closeInnerEditor()),t.emitEvent(new R(R.SELECT,{editor:t,value:o,oldValue:i})),t.checkOpenedGroups(),t.editing?t.waitLeafer((()=>{t.multiple&&yt(t),dt(t),t.updateEditTool(),t.update(),t.listenTargetEvents()})):(t.updateEditTool(),t.removeTargetEvents())}))],It.prototype,"target",void 0);class Vt{static registerInnerEditor(){Mt.register(this)}get tag(){return"InnerEditor"}get editBox(){return this.editor.editBox}constructor(t){this.editor=t,this.create()}onCreate(){}create(){this.view=new e.Group,this.onCreate()}onLoad(){}load(){this.editor.selector.hittable=this.editor.app.tree.hitChildren=!1,this.onLoad()}onUpdate(){}update(){this.onUpdate()}onUnload(){}unload(){this.editor.selector.hittable=this.editor.app.tree.hitChildren=!0,this.onUnload()}onDestroy(){}destroy(){this.onDestroy(),this.editor&&(this.view&&this.view.destroy(),this.eventIds&&this.editor.off_(this.eventIds),this.editor=this.view=this.eventIds=null)}}t.EditTool=class extends Vt{static registerEditTool(){Mt.register(this)}get tag(){return"EditTool"}onMove(t){const{moveX:e,moveY:i,editor:o}=t,{app:s,list:n}=o;s.lockLayout(),n.forEach((t=>{t.moveWorld(e,i)})),s.unlockLayout()}onScale(t){const{scaleX:e,scaleY:i,transform:o,worldOrigin:s,editor:n}=t,{app:r,list:a}=n;r.lockLayout(),a.forEach((t=>{const r="scale"!==n.getEditSize(t);o?t.transformWorld(o,r):t.scaleOfWorld(s,e,i,r)})),r.unlockLayout()}onRotate(t){const{rotation:e,transform:i,worldOrigin:o,editor:s}=t,{app:n,list:r}=s;n.lockLayout(),r.forEach((t=>{const n="scale"!==s.getEditSize(t);i?t.transformWorld(i,n):t.rotateOfWorld(o,e)})),n.unlockLayout()}onSkew(t){const{skewX:e,skewY:i,transform:o,worldOrigin:s,editor:n}=t,{app:r,list:a}=n;r.lockLayout(),a.forEach((t=>{const r="scale"!==n.getEditSize(t);o?t.transformWorld(o,r):t.skewOfWorld(s,e,i,r)})),r.unlockLayout()}load(){this.editBox.view.visible=!0,this.onLoad()}update(){const{editor:t,editBox:e}=this,{x:i,y:o,scaleX:s,scaleY:n,rotation:r,skewX:a,skewY:h,width:l,height:c}=t.element.getLayoutBounds("box",t,!0);e.set({x:i,y:o,scaleX:s,scaleY:n,rotation:r,skewX:a,skewY:h}),e.update({x:0,y:0,width:l,height:c}),this.onUpdate()}unload(){this.editBox.view.visible=!1,this.onUnload()}},t.EditTool=C([xt()],t.EditTool);const{left:Dt,right:zt}=e.Direction9,{move:At,copy:Zt,toNumberPoints:Wt}=e.PointHelper;return t.LineEditTool=class extends t.EditTool{constructor(){super(...arguments),this.scaleOfEvent=!0}get tag(){return"LineEditTool"}onScaleWithDrag(t){const{drag:i,direction:o,lockRatio:s,around:n}=t,r=t.target,a=o===Dt;if(r.pathInputed){const{path:t}=r.__,{from:e,to:o}=this.getFromToByPath(t);this.dragPoint(e,o,a,n,this.getInnerMove(r,i,s)),t[1]=e.x,t[2]=e.y,t[4]=o.x,t[5]=o.y,r.path=t}else if(r.points){const{points:t}=r,{from:e,to:o}=this.getFromToByPoints(t);this.dragPoint(e,o,a,n,this.getInnerMove(r,i,s)),t[0]=e.x,t[1]=e.y,t[2]=o.x,t[3]=o.y,r.points=t}else{const t=e.getPointData(),{toPoint:o}=r;r.rotation=0,this.dragPoint(t,o,a,n,this.getInnerMove(r,i,s)),r.getLocalPointByInner(t,null,null,!0),r.getLocalPointByInner(o,null,null,!0),r.x=t.x,r.y=t.y,r.getInnerPointByLocal(o,null,null,!0),r.toPoint=o}}getInnerMove(t,e,i){const o=e.getInnerMove(t);return i&&(Math.abs(o.x)>Math.abs(o.y)?o.y=0:o.x=0),o}getFromToByPath(t){return{from:{x:t[1],y:t[2]},to:{x:t[4],y:t[5]}}}getFromToByPoints(t){const e=Wt(t);return{from:{x:e[0],y:e[1]},to:{x:e[2],y:e[3]}}}dragPoint(t,e,i,o,s){const{x:n,y:r}=s;i?(At(t,n,r),o&&At(e,-n,-r)):(o&&At(t,-n,-r),At(e,n,r))}onSkew(t){}onUpdate(){const{editBox:t}=this,{rotatePoints:e,resizeLines:i,resizePoints:o,rect:s}=t,n=this.editor.element;let r,a;if(n.pathInputed?r=this.getFromToByPath(n.__.path):n.points&&(r=this.getFromToByPoints(n.__.points)),r){const{from:i,to:a}=r;n.innerToWorld(i,i,!1,t),n.innerToWorld(a,a,!1,t),s.pen.clearPath().moveTo(i.x,i.y).lineTo(a.x,a.y),Zt(o[7],i),Zt(e[7],i),Zt(o[3],a),Zt(e[3],a)}for(let t=0;t<8;t++)t<4&&(i[t].visible=!1),a=t===Dt||t===zt,o[t].visible=a,e[t].visible=!r&&a}},t.LineEditTool=C([xt()],t.LineEditTool),e.Creator.editor=function(t){return new It(t)},e.defineKey(e.UI.prototype,"editOuter",{get(){return this.__.__isLinePath?"LineEditTool":"EditTool"}}),e.defineKey(e.UI.prototype,"editInner",{get:()=>"PathEditor"}),e.defineKey(e.Text.prototype,"editInner",{get:()=>"TextEditor"}),e.UI.setEditConfig=function(t){e.defineKey(this.prototype,"editConfig",{get(){return"function"==typeof t?t(this):t}})},e.UI.setEditOuter=function(t){e.defineKey(this.prototype,"editOuter",{get(){return"string"==typeof t?t:t(this)}})},e.UI.setEditInner=function(t){e.defineKey(this.prototype,"editInner",{get(){return"string"==typeof t?t:t(this)}})},t.EditBox=pt,t.EditDataHelper=ht,t.EditPoint=ut,t.EditSelect=q,t.EditSelectHelper=j,t.EditToolCreator=Mt,t.Editor=It,t.EditorEvent=R,t.EditorGroupEvent=Pt,t.EditorHelper=_t,t.EditorMoveEvent=B,t.EditorRotateEvent=V,t.EditorScaleEvent=I,t.EditorSkewEvent=D,t.InnerEditor=Vt,t.InnerEditorEvent=St,t.PathScaler=m,t.SelectArea=F,t.Stroker=U,t.registerEditTool=xt,t.registerInnerEditor=Tt,t.scaleResize=x,t.scaleResizeFontSize=T,t.scaleResizeGroup=S,t.scaleResizePath=M,t.scaleResizePoints=O,t}({},LeaferUI,LeaferUI);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@leafer-in/editor",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.6",
|
|
4
4
|
"description": "@leafer-in/editor",
|
|
5
5
|
"author": "Chao (Leafer) Wan",
|
|
6
6
|
"license": "MIT",
|
|
@@ -21,10 +21,10 @@
|
|
|
21
21
|
],
|
|
22
22
|
"repository": {
|
|
23
23
|
"type": "git",
|
|
24
|
-
"url": "https://github.com/leaferjs/in.git"
|
|
24
|
+
"url": "https://github.com/leaferjs/leafer-in.git"
|
|
25
25
|
},
|
|
26
|
-
"homepage": "https://github.com/leaferjs/in/tree/main/packages/editor",
|
|
27
|
-
"bugs": "https://github.com/leaferjs/in/issues",
|
|
26
|
+
"homepage": "https://github.com/leaferjs/leafer-in/tree/main/packages/editor",
|
|
27
|
+
"bugs": "https://github.com/leaferjs/leafer-in/issues",
|
|
28
28
|
"keywords": [
|
|
29
29
|
"leafer editor",
|
|
30
30
|
"leafer-editor",
|
|
@@ -34,9 +34,9 @@
|
|
|
34
34
|
"leaferjs"
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@leafer-ui/core": "^1.0.
|
|
38
|
-
"@leafer-ui/interface": "^1.0.
|
|
39
|
-
"@leafer-in/resize": "^1.0.
|
|
40
|
-
"@leafer-in/interface": "^1.0.
|
|
37
|
+
"@leafer-ui/core": "^1.0.6",
|
|
38
|
+
"@leafer-ui/interface": "^1.0.6",
|
|
39
|
+
"@leafer-in/resize": "^1.0.6",
|
|
40
|
+
"@leafer-in/interface": "^1.0.6"
|
|
41
41
|
}
|
|
42
42
|
}
|
package/src/Editor.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { IGroupInputData, IUI, IEventListenerId, IPointData, ILeafList, IEditSize, IGroup, IObject, IAlign, IAxis, IFunction, ILayoutBoundsData } from '@leafer-ui/interface'
|
|
2
|
-
import { Group,
|
|
1
|
+
import { IGroupInputData, IUI, IEventListenerId, IPointData, ILeafList, IEditSize, IGroup, IObject, IAlign, IAxis, IFunction, ILayoutBoundsData, IMatrix } from '@leafer-ui/interface'
|
|
2
|
+
import { Group, DataHelper, MathHelper, LeafList, Matrix, RenderEvent, LeafHelper, Direction9 } from '@leafer-ui/draw'
|
|
3
3
|
import { DragEvent, RotateEvent, KeyEvent, ZoomEvent, MoveEvent } from '@leafer-ui/core'
|
|
4
4
|
|
|
5
|
-
import { IEditBox, IEditPoint, IEditor, IEditorConfig, IEditTool, IEditorScaleEvent, IInnerEditor } from '@leafer-in/interface'
|
|
5
|
+
import { IEditBox, IEditPoint, IEditor, IEditorConfig, IEditTool, IEditorScaleEvent, IInnerEditor, ISimulateElement } from '@leafer-in/interface'
|
|
6
6
|
|
|
7
7
|
import { EditorMoveEvent } from './event/EditorMoveEvent'
|
|
8
8
|
import { EditorScaleEvent } from './event/EditorScaleEvent'
|
|
@@ -24,6 +24,7 @@ import { updateCursor } from './editor/cursor'
|
|
|
24
24
|
import { EditToolCreator } from './tool/EditToolCreator'
|
|
25
25
|
import { InnerEditorEvent } from './event/InnerEditorEvent'
|
|
26
26
|
import { EditorGroupEvent } from './event/EditorGroupEvent'
|
|
27
|
+
import { SimulateElement } from './display/SimulateElement'
|
|
27
28
|
|
|
28
29
|
|
|
29
30
|
export class Editor extends Group implements IEditor {
|
|
@@ -43,8 +44,9 @@ export class Editor extends Group implements IEditor {
|
|
|
43
44
|
|
|
44
45
|
// 列表
|
|
45
46
|
|
|
46
|
-
public get list(): IUI[] { return this.leafList.list as IUI[] }
|
|
47
47
|
public leafList: ILeafList = new LeafList() // from target
|
|
48
|
+
public get list(): IUI[] { return this.leafList.list as IUI[] }
|
|
49
|
+
public get dragHoverExclude(): IUI[] { return [this.editBox.rect] }
|
|
48
50
|
public openedGroupList: ILeafList = new LeafList()
|
|
49
51
|
|
|
50
52
|
// 状态
|
|
@@ -58,11 +60,12 @@ export class Editor extends Group implements IEditor {
|
|
|
58
60
|
public get single(): boolean { return this.list.length === 1 }
|
|
59
61
|
|
|
60
62
|
public get dragging(): boolean { return this.editBox.dragging }
|
|
63
|
+
public get moving(): boolean { return this.editBox.moving }
|
|
61
64
|
|
|
62
65
|
// 组件
|
|
63
66
|
|
|
64
|
-
public get element() { return this.multiple ? this.simulateTarget : this.list[0] as
|
|
65
|
-
public simulateTarget:
|
|
67
|
+
public get element() { return this.multiple ? this.simulateTarget : this.list[0] as ISimulateElement }
|
|
68
|
+
public simulateTarget: ISimulateElement = new SimulateElement(this)
|
|
66
69
|
|
|
67
70
|
public editBox: IEditBox = new EditBox(this)
|
|
68
71
|
public get buttons() { return this.editBox.buttons }
|
|
@@ -253,20 +256,19 @@ export class Editor extends Group implements IEditor {
|
|
|
253
256
|
// transform
|
|
254
257
|
|
|
255
258
|
public move(x: number | IPointData, y = 0): void {
|
|
256
|
-
if (!this.
|
|
259
|
+
if (!this.checkTransform('moveable')) return
|
|
257
260
|
|
|
258
261
|
const { element } = this
|
|
259
262
|
const world = element.getWorldPointByLocal(typeof x === 'object' ? { ...x } : { x, y }, null, true)
|
|
263
|
+
if (this.multiple) element.safeChange(() => element.move(x, y))
|
|
260
264
|
const event = new EditorMoveEvent(EditorMoveEvent.MOVE, { target: element, editor: this, moveX: world.x, moveY: world.y })
|
|
261
265
|
|
|
262
266
|
this.editTool.onMove(event)
|
|
263
267
|
this.emitEvent(event)
|
|
264
|
-
|
|
265
|
-
if (this.multiple) element.move(x, y)
|
|
266
268
|
}
|
|
267
269
|
|
|
268
270
|
public scaleWithDrag(data: IEditorScaleEvent): void {
|
|
269
|
-
if (!this.
|
|
271
|
+
if (!this.checkTransform('resizeable')) return
|
|
270
272
|
|
|
271
273
|
const { element } = this
|
|
272
274
|
const event = new EditorScaleEvent(EditorScaleEvent.SCALE, { ...data, target: element, editor: this, worldOrigin: element.getWorldPoint(data.origin) })
|
|
@@ -277,11 +279,11 @@ export class Editor extends Group implements IEditor {
|
|
|
277
279
|
|
|
278
280
|
|
|
279
281
|
override scaleOf(origin: IPointData | IAlign, scaleX: number, scaleY = scaleX, _resize?: boolean): void {
|
|
280
|
-
if (!this.
|
|
282
|
+
if (!this.checkTransform('resizeable')) return
|
|
281
283
|
|
|
282
284
|
const { element } = this
|
|
283
285
|
const worldOrigin = this.getWorldOrigin(origin)
|
|
284
|
-
const transform = this.multiple && this.getChangedTransform(() => element.scaleOf(origin, scaleX, scaleY))
|
|
286
|
+
const transform = this.multiple && this.getChangedTransform(() => element.safeChange(() => element.scaleOf(origin, scaleX, scaleY)))
|
|
285
287
|
const event = new EditorScaleEvent(EditorScaleEvent.SCALE, { target: element, editor: this, worldOrigin, scaleX, scaleY, transform })
|
|
286
288
|
|
|
287
289
|
this.editTool.onScale(event)
|
|
@@ -289,11 +291,11 @@ export class Editor extends Group implements IEditor {
|
|
|
289
291
|
}
|
|
290
292
|
|
|
291
293
|
override flip(axis: IAxis): void {
|
|
292
|
-
if (this.
|
|
294
|
+
if (!this.checkTransform('resizeable')) return
|
|
293
295
|
|
|
294
296
|
const { element } = this
|
|
295
297
|
const worldOrigin = this.getWorldOrigin('center')
|
|
296
|
-
const transform = this.multiple ? this.getChangedTransform(() => element.flip(axis)) : new Matrix(LeafHelper.getFlipTransform(element, axis))
|
|
298
|
+
const transform = this.multiple ? this.getChangedTransform(() => element.safeChange(() => element.flip(axis))) : new Matrix(LeafHelper.getFlipTransform(element, axis))
|
|
297
299
|
const event = new EditorScaleEvent(EditorScaleEvent.SCALE, { target: element, editor: this, worldOrigin, scaleX: axis === 'x' ? -1 : 1, scaleY: axis === 'y' ? -1 : 1, transform })
|
|
298
300
|
|
|
299
301
|
this.editTool.onScale(event)
|
|
@@ -301,11 +303,11 @@ export class Editor extends Group implements IEditor {
|
|
|
301
303
|
}
|
|
302
304
|
|
|
303
305
|
override rotateOf(origin: IPointData | IAlign, rotation: number): void {
|
|
304
|
-
if (!this.
|
|
306
|
+
if (!this.checkTransform('rotateable')) return
|
|
305
307
|
|
|
306
308
|
const { element } = this
|
|
307
309
|
const worldOrigin = this.getWorldOrigin(origin)
|
|
308
|
-
const transform = this.multiple && this.getChangedTransform(() => element.rotateOf(origin, rotation))
|
|
310
|
+
const transform = this.multiple && this.getChangedTransform(() => element.safeChange(() => element.rotateOf(origin, rotation)))
|
|
309
311
|
const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, { target: element, editor: this, worldOrigin, rotation, transform })
|
|
310
312
|
|
|
311
313
|
this.editTool.onRotate(event)
|
|
@@ -313,24 +315,27 @@ export class Editor extends Group implements IEditor {
|
|
|
313
315
|
}
|
|
314
316
|
|
|
315
317
|
override skewOf(origin: IPointData | IAlign, skewX: number, skewY = 0, _resize?: boolean): void {
|
|
316
|
-
if (!this.
|
|
318
|
+
if (!this.checkTransform('skewable')) return
|
|
317
319
|
|
|
318
320
|
const { element } = this
|
|
319
321
|
const worldOrigin = this.getWorldOrigin(origin)
|
|
320
|
-
const transform = this.multiple && this.getChangedTransform(() => element.skewOf(origin, skewX, skewY))
|
|
322
|
+
const transform = this.multiple && this.getChangedTransform(() => element.safeChange(() => element.skewOf(origin, skewX, skewY)))
|
|
321
323
|
const event = new EditorSkewEvent(EditorSkewEvent.SKEW, { target: element, editor: this, worldOrigin, skewX, skewY, transform })
|
|
322
324
|
|
|
323
325
|
this.editTool.onSkew(event)
|
|
324
326
|
this.emitEvent(event)
|
|
325
327
|
}
|
|
326
328
|
|
|
329
|
+
public checkTransform(type: 'moveable' | 'resizeable' | 'rotateable' | 'skewable'): boolean { return this.element && !this.element.locked && this.mergeConfig[type] as boolean }
|
|
327
330
|
|
|
328
331
|
protected getWorldOrigin(origin: IPointData | IAlign): IPointData {
|
|
329
332
|
return this.element.getWorldPoint(LeafHelper.getInnerOrigin(this.element, origin))
|
|
330
333
|
}
|
|
331
334
|
|
|
332
|
-
protected getChangedTransform(func: IFunction):
|
|
335
|
+
protected getChangedTransform(func: IFunction): IMatrix {
|
|
333
336
|
const { element } = this
|
|
337
|
+
if (this.multiple && !element.canChange) return element.changedTransform
|
|
338
|
+
|
|
334
339
|
const oldMatrix = new Matrix(element.worldTransform)
|
|
335
340
|
func()
|
|
336
341
|
return new Matrix(element.worldTransform).divide(oldMatrix) // world change transform
|
|
@@ -398,10 +403,10 @@ export class Editor extends Group implements IEditor {
|
|
|
398
403
|
|
|
399
404
|
// inner
|
|
400
405
|
|
|
401
|
-
public openInnerEditor(target?: IUI): void {
|
|
402
|
-
if (target) this.target = target
|
|
406
|
+
public openInnerEditor(target?: IUI, select?: boolean): void {
|
|
407
|
+
if (target && select) this.target = target
|
|
403
408
|
if (this.single) {
|
|
404
|
-
const editTarget = this.element
|
|
409
|
+
const editTarget = target || this.element
|
|
405
410
|
const tag = editTarget.editInner
|
|
406
411
|
if (tag && EditToolCreator.list[tag]) {
|
|
407
412
|
this.editTool.unload()
|
|
@@ -469,14 +474,15 @@ export class Editor extends Group implements IEditor {
|
|
|
469
474
|
|
|
470
475
|
public listenTargetEvents(): void {
|
|
471
476
|
if (!this.targetEventIds.length) {
|
|
472
|
-
const { leafer } = this
|
|
477
|
+
const { app, leafer } = this
|
|
473
478
|
this.targetEventIds = [
|
|
474
|
-
this.app.on_(MoveEvent.BEFORE_MOVE, this.onMove, this, true),
|
|
475
|
-
this.app.on_(ZoomEvent.BEFORE_ZOOM, this.onScale, this, true),
|
|
476
|
-
this.app.on_(RotateEvent.BEFORE_ROTATE, this.onRotate, this, true),
|
|
477
479
|
leafer.on_(RenderEvent.START, this.update, this),
|
|
478
|
-
|
|
479
|
-
|
|
480
|
+
app.on_(RenderEvent.CHILD_START, this.forceRender, this),
|
|
481
|
+
app.on_(MoveEvent.BEFORE_MOVE, this.onMove, this, true),
|
|
482
|
+
app.on_(ZoomEvent.BEFORE_ZOOM, this.onScale, this, true),
|
|
483
|
+
app.on_(RotateEvent.BEFORE_ROTATE, this.onRotate, this, true),
|
|
484
|
+
app.on_([KeyEvent.HOLD, KeyEvent.UP], (e: KeyEvent) => { updateCursor(this, e) }),
|
|
485
|
+
app.on_(KeyEvent.DOWN, this.editBox.onArrow, this.editBox)
|
|
480
486
|
]
|
|
481
487
|
}
|
|
482
488
|
}
|
|
@@ -494,7 +500,8 @@ export class Editor extends Group implements IEditor {
|
|
|
494
500
|
this.simulateTarget.destroy()
|
|
495
501
|
Object.values(this.editToolList).forEach(item => item.destroy())
|
|
496
502
|
this.editToolList = {}
|
|
497
|
-
this.target = this.hoverTarget =
|
|
503
|
+
this.target = this.hoverTarget = null // 必须在 simulateTarget = null之前执行
|
|
504
|
+
this.simulateTarget = this.editTool = this.innerEditor = null
|
|
498
505
|
super.destroy()
|
|
499
506
|
}
|
|
500
507
|
}
|
package/src/display/EditBox.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { IRect, IEventListenerId, IBoundsData, IPointData, IKeyEvent, IGroup, IBox, IBoxInputData, IAlign, IUI, IEditorConfig } from '@leafer-ui/interface'
|
|
2
|
-
import { Group, Box, AroundHelper, Direction9 } from '@leafer-ui/draw'
|
|
2
|
+
import { Group, Box, Text, AroundHelper, Direction9 } from '@leafer-ui/draw'
|
|
3
3
|
import { DragEvent, PointerEvent } from '@leafer-ui/core'
|
|
4
4
|
|
|
5
5
|
import { IEditBox, IEditor, IEditPoint, IEditPointType } from '@leafer-in/interface'
|
|
@@ -43,7 +43,6 @@ export class EditBox extends Group implements IEditBox {
|
|
|
43
43
|
this.editor = editor
|
|
44
44
|
this.visible = false
|
|
45
45
|
this.create()
|
|
46
|
-
this.rect.syncEventer = editor // rect的事件不会冒泡,需要手动传递给editor
|
|
47
46
|
this.__listenEvents()
|
|
48
47
|
}
|
|
49
48
|
|
|
@@ -96,11 +95,13 @@ export class EditBox extends Group implements IEditBox {
|
|
|
96
95
|
// rect
|
|
97
96
|
rect.set({ stroke, strokeWidth, ...(mergeConfig.rect || {}) })
|
|
98
97
|
rect.hittable = !single && !!moveable
|
|
98
|
+
rect.syncEventer = single && this.editor // 单选下 rect 的事件不会冒泡,需要手动传递给editor
|
|
99
99
|
|
|
100
100
|
// 编辑框作为底部虚拟元素, 在 onSelect 方法移除
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
101
|
+
if (single && moveable) {
|
|
102
|
+
element.syncEventer = rect
|
|
103
|
+
this.app.interaction.bottomList = [{ target: rect, proxy: element }]
|
|
104
|
+
}
|
|
104
105
|
}
|
|
105
106
|
|
|
106
107
|
public update(bounds: IBoundsData): void {
|
|
@@ -300,6 +301,11 @@ export class EditBox extends Group implements IEditBox {
|
|
|
300
301
|
if (editor.single) {
|
|
301
302
|
const { element } = editor
|
|
302
303
|
if (element.isBranch) {
|
|
304
|
+
if ((element as IBox).textBox) {
|
|
305
|
+
const find = element.children.find(item => item.editable && item instanceof Text)
|
|
306
|
+
if (find) return editor.openInnerEditor(find) // 文本Box直接进入编辑状态,如便利贴文本
|
|
307
|
+
}
|
|
308
|
+
|
|
303
309
|
editor.openGroup(element as IGroup)
|
|
304
310
|
editor.target = editor.selector.findDeepOne(e)
|
|
305
311
|
} else {
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { IObject, IFunction, IMatrix } from '@leafer-ui/interface'
|
|
2
|
+
import { LeafHelper, Matrix, PropertyEvent, Rect } from '@leafer-ui/draw'
|
|
3
|
+
|
|
4
|
+
import { IEditor, ISimulateElement } from '@leafer-in/interface'
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
const { updateMatrix } = LeafHelper
|
|
8
|
+
const checkMap: IObject = { x: 1, y: 1, scaleX: 1, scaleY: 1, rotation: 1, skewX: 1, skewY: 1 }, origin = 'top-left'
|
|
9
|
+
|
|
10
|
+
export class SimulateElement extends Rect implements ISimulateElement {
|
|
11
|
+
|
|
12
|
+
public get __tag() { return 'SimulateElement' }
|
|
13
|
+
|
|
14
|
+
public checkChange = true
|
|
15
|
+
|
|
16
|
+
public canChange = true
|
|
17
|
+
|
|
18
|
+
public changedTransform: IMatrix
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
constructor(editor: IEditor) {
|
|
22
|
+
super()
|
|
23
|
+
|
|
24
|
+
this.visible = this.hittable = false
|
|
25
|
+
|
|
26
|
+
this.on(PropertyEvent.CHANGE, (event: PropertyEvent) => {
|
|
27
|
+
|
|
28
|
+
if (this.checkChange && checkMap[event.attrName]) {
|
|
29
|
+
|
|
30
|
+
const { attrName, newValue, oldValue } = event
|
|
31
|
+
const addValue = attrName[0] === 's' ? (<number>newValue || 1) / (<number>oldValue || 1) : (<number>newValue || 0) - (<number>oldValue || 0)
|
|
32
|
+
|
|
33
|
+
this.canChange = false
|
|
34
|
+
|
|
35
|
+
const data: IObject = this.__
|
|
36
|
+
|
|
37
|
+
// old matrix
|
|
38
|
+
data[attrName] = oldValue
|
|
39
|
+
updateMatrix(this.parent)
|
|
40
|
+
updateMatrix(this)
|
|
41
|
+
|
|
42
|
+
const oldMatrix = new Matrix(this.__world)
|
|
43
|
+
|
|
44
|
+
// new matrix
|
|
45
|
+
data[attrName] = newValue
|
|
46
|
+
this.__layout.rotationChange()
|
|
47
|
+
updateMatrix(this)
|
|
48
|
+
|
|
49
|
+
this.changedTransform = new Matrix(this.__world).divide(oldMatrix) // world change transform
|
|
50
|
+
|
|
51
|
+
switch (attrName) {
|
|
52
|
+
case 'x':
|
|
53
|
+
editor.move(addValue, 0)
|
|
54
|
+
break
|
|
55
|
+
case 'y':
|
|
56
|
+
editor.move(0, addValue)
|
|
57
|
+
break
|
|
58
|
+
case 'rotation':
|
|
59
|
+
editor.rotateOf(origin, addValue)
|
|
60
|
+
break
|
|
61
|
+
case 'scaleX':
|
|
62
|
+
editor.scaleOf(origin, addValue, 1)
|
|
63
|
+
break
|
|
64
|
+
case 'scaleY':
|
|
65
|
+
editor.scaleOf(origin, 1, addValue)
|
|
66
|
+
break
|
|
67
|
+
case 'skewX':
|
|
68
|
+
editor.skewOf(origin, addValue, 0)
|
|
69
|
+
break
|
|
70
|
+
case 'skewY':
|
|
71
|
+
editor.skewOf(origin, 0, addValue)
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
this.canChange = true
|
|
75
|
+
|
|
76
|
+
}
|
|
77
|
+
})
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
public safeChange(changeFn: IFunction): void {
|
|
81
|
+
if (this.canChange) {
|
|
82
|
+
this.checkChange = false
|
|
83
|
+
changeFn()
|
|
84
|
+
this.checkChange = true
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
package/src/display/Stroker.ts
CHANGED
|
@@ -30,42 +30,40 @@ export class Stroker extends UI implements IStroker {
|
|
|
30
30
|
|
|
31
31
|
public __draw(canvas: ILeaferCanvas, options: IRenderOptions): void {
|
|
32
32
|
const { list } = this
|
|
33
|
+
|
|
33
34
|
if (list.length) {
|
|
34
35
|
|
|
35
36
|
let leaf: IUI
|
|
36
|
-
const { stroke, strokeWidth, fill } =
|
|
37
|
-
const { bounds } = options
|
|
37
|
+
const data = this.__, { stroke, strokeWidth, fill } = data, { bounds } = options
|
|
38
38
|
|
|
39
39
|
for (let i = 0; i < list.length; i++) {
|
|
40
40
|
leaf = list[i]
|
|
41
|
-
|
|
41
|
+
const { worldTransform, worldRenderBounds } = leaf
|
|
42
|
+
if (bounds && bounds.hit(worldRenderBounds, options.matrix)) {
|
|
42
43
|
|
|
43
|
-
const aScaleX = abs(
|
|
44
|
+
const aScaleX = abs(worldTransform.scaleX), aScaleY = abs(worldTransform.scaleY)
|
|
44
45
|
|
|
45
46
|
if (aScaleX !== aScaleY) { // need no scale stroke, use rect path
|
|
46
47
|
|
|
47
|
-
copy(matrix,
|
|
48
|
+
copy(matrix, worldTransform)
|
|
48
49
|
scale(matrix, 1 / aScaleX, 1 / aScaleY)
|
|
49
50
|
|
|
50
51
|
canvas.setWorld(matrix, options.matrix)
|
|
51
52
|
canvas.beginPath()
|
|
52
|
-
|
|
53
|
+
data.strokeWidth = strokeWidth
|
|
53
54
|
|
|
54
55
|
const { x, y, width, height } = leaf.__layout.boxBounds
|
|
55
56
|
canvas.rect(x * aScaleX, y * aScaleY, width * aScaleX, height * aScaleY)
|
|
56
57
|
|
|
57
58
|
} else {
|
|
58
59
|
|
|
59
|
-
canvas.setWorld(
|
|
60
|
+
canvas.setWorld(worldTransform, options.matrix)
|
|
60
61
|
canvas.beginPath()
|
|
61
62
|
|
|
62
|
-
if (leaf.__.__useArrow)
|
|
63
|
-
|
|
64
|
-
} else {
|
|
65
|
-
leaf.__.__pathForRender ? leaf.__drawRenderPath(canvas) : leaf.__drawPathByBox(canvas)
|
|
66
|
-
}
|
|
63
|
+
if (leaf.__.__useArrow) leaf.__drawPath(canvas)
|
|
64
|
+
else leaf.__.__pathForRender ? leaf.__drawRenderPath(canvas) : leaf.__drawPathByBox(canvas)
|
|
67
65
|
|
|
68
|
-
|
|
66
|
+
data.strokeWidth = strokeWidth / abs(worldTransform.scaleX)
|
|
69
67
|
|
|
70
68
|
}
|
|
71
69
|
|
|
@@ -74,7 +72,7 @@ export class Stroker extends UI implements IStroker {
|
|
|
74
72
|
}
|
|
75
73
|
}
|
|
76
74
|
|
|
77
|
-
|
|
75
|
+
data.strokeWidth = strokeWidth
|
|
78
76
|
}
|
|
79
77
|
}
|
|
80
78
|
|