@leafer-in/editor 1.0.0-rc.7 → 1.0.0-rc.8

package/dist/editor.esm.js

@@ -72,8 +72,11 @@ function targetAttr(fn) {
         const privateKey = '_' + key;
         defineKey(target, key, {
             get() { return this[privateKey]; },
-            set(value) { if (this[privateKey] !== value)
-                this[privateKey] = value, fn(this); }
+            set(value) {
+                const old = this[privateKey];
+                if (old !== value)
+                    this[privateKey] = value, fn(this, old);
+            }
         });
     };
 }
@@ -304,10 +307,12 @@ class EditSelect extends Group {
                     selectList.push(item); });
                 list.forEach(item => { if (!this.originList.has(item))
                     selectList.push(item); });
-                editor.target = selectList;
+                if (selectList.length !== editor.list.length || editor.list.some((child, index) => child !== selectList[index])) {
+                    editor.target = selectList;
+                }
             }
             else {
-                editor.target = this.originList;
+                editor.target = this.originList.list;
                 if (editor.leafList.length)
                     editor.update();
             }
@@ -497,7 +502,7 @@ const EditDataHelper = {
         return { origin, skewX, skewY };
     },
     getAround(around, altKey) {
-        return (altKey && !around) ? AroundHelper.center : around;
+        return (altKey && !around) ? 'center' : around;
     },
     getRotateDirection(direction, rotation, totalDirection = 8) {
         direction = (direction + Math.round(rotation / (360 / totalDirection))) % totalDirection;
@@ -602,13 +607,13 @@ class EditBox extends Group {
         const { width, height } = bounds;
         const { rect, circle, resizePoints, rotatePoints, resizeLines } = this;
         const { middlePoint, resizeable, rotateable, stroke, strokeWidth } = config;
-        const points = this.getDirection8Points(bounds);
         const pointsStyle = this.getPointsStyle();
         const middlePointsStyle = this.getMiddlePointsStyle();
         this.visible = list[0] && !list[0].locked;
-        let point, style, rotateP, resizeP, resizeL;
+        let point = {}, style, rotateP, resizeP, resizeL;
         for (let i = 0; i < 8; i++) {
-            point = points[i], style = this.getPointStyle((i % 2) ? middlePointsStyle[((i - 1) / 2) % middlePointsStyle.length] : pointsStyle[(i / 2) % pointsStyle.length]);
+            AroundHelper.toPoint(AroundHelper.directionData[i], bounds, point);
+            style = this.getPointStyle((i % 2) ? middlePointsStyle[((i - 1) / 2) % middlePointsStyle.length] : pointsStyle[(i / 2) % pointsStyle.length]);
             resizeP = resizePoints[i], rotateP = rotatePoints[i], resizeL = resizeLines[Math.floor(i / 2)];
             resizeP.set(style);
             resizeP.set(point), rotateP.set(point), resizeL.set(point);
@@ -680,19 +685,6 @@ class EditBox extends Group {
         const { middlePoint } = this.editor.config;
         return middlePoint instanceof Array ? middlePoint : (middlePoint ? [middlePoint] : this.getPointsStyle());
     }
-    getDirection8Points(bounds) {
-        const { x, y, width, height } = bounds;
-        return [
-            { x, y },
-            { x: x + width / 2, y },
-            { x: x + width, y },
-            { x: x + width, y: y + height / 2 },
-            { x: x + width, y: y + height },
-            { x: x + width / 2, y: y + height },
-            { x, y: y + height },
-            { x, y: y + height / 2 }
-        ];
-    }
     onDragStart(e) {
         this.dragging = true;
         if (e.target.name === 'rect')
@@ -938,7 +930,7 @@ function simulate(editor) {
     simulateTarget.reset({ x: (x - worldX) / scaleX, y: (y - worldY) / scaleY, width: width / scaleX, height: height / scaleY });
 }
 
-function onTarget(editor) {
+function onTarget(editor, oldValue) {
     const { target } = editor;
     if (target) {
         editor.leafList = target instanceof LeafList ? target : new LeafList(target instanceof Array ? target : target);
@@ -946,7 +938,7 @@ function onTarget(editor) {
     else {
         editor.leafList.reset();
     }
-    editor.emitEvent(new EditorEvent(EditorEvent.SELECT, { editor }));
+    editor.emitEvent(new EditorEvent(EditorEvent.SELECT, { editor, value: target, oldValue }));
     if (editor.hasTarget) {
         editor.waitLeafer(() => {
             if (editor.multiple)
@@ -961,8 +953,8 @@ function onTarget(editor) {
         editor.removeTargetEvents();
     }
 }
-function onHover(editor) {
-    editor.emitEvent(new EditorEvent(EditorEvent.HOVER, { editor }));
+function onHover(editor, oldValue) {
+    editor.emitEvent(new EditorEvent(EditorEvent.HOVER, { editor, value: editor.hoverTarget, oldValue }));
 }
 
 const order = (a, b) => a.parent.children.indexOf(a) - b.parent.children.indexOf(b);
@@ -1008,44 +1000,15 @@ const EditorHelper = {
     toTop(list) {
         list.sort(order);
         list.forEach(leaf => {
-            let zIndex;
-            const { parent } = leaf;
-            if (parent) {
-                const { children } = parent;
-                const top = children.length - 1;
-                const zIndexOfTop = children[top].__.zIndex;
-                const current = children.indexOf(leaf);
-                if (current !== top) {
-                    children.splice(current, 1);
-                    children.push(leaf);
-                    zIndex = zIndexOfTop + 1;
-                }
-                else {
-                    zIndex = zIndexOfTop;
-                }
-                leaf.zIndex = zIndex;
-            }
+            if (leaf.parent)
+                leaf.parent.add(leaf);
         });
     },
     toBottom(list) {
         list.sort(reverseOrder);
         list.forEach(leaf => {
-            let zIndex;
-            const { parent } = leaf;
-            if (parent) {
-                const { children } = parent;
-                const zIndexOfBottom = children[0].__.zIndex;
-                const current = children.indexOf(leaf);
-                if (current !== 0) {
-                    children.splice(current, 1);
-                    children.unshift(leaf);
-                    zIndex = zIndexOfBottom - 1;
-                }
-                else {
-                    zIndex = zIndexOfBottom;
-                }
-                leaf.zIndex = zIndex;
-            }
+            if (leaf.parent)
+                leaf.parent.addAt(leaf, 0);
         });
     }
 };
@@ -1206,13 +1169,15 @@ class Editor extends Group {
         this.editTool.onSkew(event);
         this.emitEvent(event);
     }
-    group() {
+    group(group) {
         if (this.multiple)
-            this.target = EditorHelper.group(this.list, this.element);
+            this.target = EditorHelper.group(this.list, this.element, group);
+        return this.target;
     }
     ungroup() {
         if (this.list.length)
             this.target = EditorHelper.ungroup(this.list);
+        return this.list;
     }
     lock() {
         this.list.forEach(leaf => leaf.locked = true);

package/dist/editor.esm.min.js

@@ -1 +1 @@
-import{Event as t,defineKey as e,MatrixHelper as i,UI as s,Paint as o,Group as n,Rect as r,Bounds as a,LeafList as h,PointerEvent as l,DragEvent as d,MoveEvent as c,ZoomEvent as g,PointHelper as u,AroundHelper as f,Box as p,Line as y,Matrix as x,DataHelper as w,RotateEvent as v,MathHelper as k,RenderEvent as m,KeyEvent as _,Creator as b}from"@leafer-ui/core";function E(t,e,i,s){var o,n=arguments.length,r=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,s);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(r=(n<3?o(r):n>3?o(e,i,r):o(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r}"function"==typeof SuppressedError&&SuppressedError;class L extends t{constructor(t,e){super(t),e&&Object.assign(this,e)}}L.SELECT="editor.select",L.HOVER="editor.hover";class S extends L{constructor(t,e){super(t,e)}}S.MOVE="editor.move";class T extends L{constructor(t,e){super(t,e)}}T.SCALE="editor.scale";class O extends L{constructor(t,e){super(t,e)}}O.ROTATE="editor.rotate";class P extends L{constructor(t,e){super(t,e)}}function D(t){return(i,s)=>{const o="_"+s;e(i,s,{get(){return this[o]},set(e){this[o]!==e&&(this[o]=e,t(this))}})}}P.SKEW="editor.skew";const A=i.get(),{abs:z}=Math,{copy:R,scale:B}=i;class M extends s{constructor(){super(),this.list=[],this.hittable=!1,this.strokeAlign="center"}setTarget(t,e){const{stroke:i,strokeWidth:s}=e;this.set({stroke:i,strokeWidth:s}),this.target=t}__draw(t,e){const{list:i}=this;if(i.length){let s;const{stroke:n,strokeWidth:r}=this.__,{bounds:a}=e;for(let h=0;h<i.length;h++)if(s=i[h],a&&a.hit(s.__world,e.matrix)){let i;if("scale"===s.__.editSize){const o=z(s.__world.scaleX),n=z(s.__world.scaleY);if(o!==n){R(A,s.__world),B(A,1/o,1/n),t.setWorld(A,e.matrix),t.beginPath(),this.__.strokeWidth=r;const{x:a,y:h,width:l,height:d}=s.__layout.boxBounds;t.rect(a*o,h*n,l*o,d*n),i=!0}}i||(t.setWorld(s.__world,e.matrix),t.beginPath(),s.__.__pathForRender?s.__drawRenderPath(t):s.__drawPathByBox(t),this.__.strokeWidth=r/z(s.__world.scaleX)),"string"==typeof n?o.stroke(n,this,t,e):o.strokes(n,this,t,e)}this.__.strokeWidth=r}}destroy(){this.target=null,super.destroy()}}E([D((function(t){const e=t.target;t.list=e?e instanceof Array?e:[e]:[],t.forceUpdate()}))],M.prototype,"target",void 0);class I extends n{constructor(t){super(t),this.strokeArea=new r({strokeAlign:"center"}),this.fillArea=new r,this.visible=this.hittable=!1,this.addMany(this.fillArea,this.strokeArea)}setStyle(t,e){const{visible:i,stroke:s,strokeWidth:o}=t;this.visible=i,this.strokeArea.reset(Object.assign({stroke:s,strokeWidth:o},e||{})),this.fillArea.reset({visible:!e,fill:s,opacity:.2})}setBounds(t){this.strokeArea.set(t),this.fillArea.set(t)}}var W;!function(t){t[t.No=0]="No",t[t.Yes=1]="Yes",t[t.NoAndSkip=2]="NoAndSkip",t[t.YesAndSkip=3]="YesAndSkip"}(W||(W={}));const{No:Y,Yes:X,NoAndSkip:C,YesAndSkip:F}=W,K={findOne:t=>t.list.find((t=>t.editable)),findBounds(t,e){if(t.__.hittable&&!t.__.locked&&e.hit(t.__world)){if(t.__.editable){if(t.isBranch&&!t.__.hitChildren)return t.__.hitSelf?F:C;if(t.isFrame)return e.includes(t.__layout.boxBounds,t.__world)?F:Y;if(e.hit(t.__layout.boxBounds,t.__world)&&t.__.hitSelf)return X}return Y}return t.isBranch?C:Y}},{findOne:j}=K;class N extends n{get dragging(){return!!this.originList}get running(){return this.editor.hittable&&this.editor.config.selector}get isMoveMode(){return this.app&&this.app.interaction.moveMode}constructor(t){super(),this.hoverStroker=new M,this.targetStroker=new M,this.bounds=new a,this.selectArea=new I,this.__eventIds=[],this.editor=t,this.addMany(this.targetStroker,this.hoverStroker,this.selectArea),this.__listenEvents()}onHover(){const{editor:t}=this;if(!this.running||this.dragging||t.dragging)this.hoverStroker.target=null;else{const{stroke:e,strokeWidth:i,hover:s}=t.config;this.hoverStroker.setTarget(s?this.editor.hoverTarget:null,{stroke:e,strokeWidth:i})}}onSelect(){if(this.running){const{config:t,list:e}=this.editor,{stroke:i,strokeWidth:s}=t;this.targetStroker.setTarget(e,{stroke:i,strokeWidth:Math.max(1,s/2)}),this.hoverStroker.target=null}}update(){this.running&&this.targetStroker.forceUpdate()}onPointerMove(t){if(this.running&&!this.isMoveMode){const e=t.shiftKey?this.findDeepOne(t):j(t.path);this.editor.hoverTarget=this.editor.hasItem(e)?null:e}this.isMoveMode&&(this.editor.hoverTarget=null)}onBeforeDown(t){if(this.running&&!this.isMoveMode&&!t.middle){const e=this.lastDownLeaf=j(t.path);e?(t.shiftKey?this.editor.shiftItem(e):this.editor.target=e,this.editor.updateLayout(),e.leafer.interaction.updateDownData()):this.allow(t.target)&&(t.shiftKey||(this.editor.target=null))}}onTap(t){if(this.running&&t.shiftKey&&!t.middle&&!this.lastDownLeaf){const e=this.findDeepOne(t);e&&this.editor.shiftItem(e)}else this.isMoveMode&&(this.editor.target=null);this.lastDownLeaf=null}onDragStart(t){if(this.running&&this.allowDrag(t)){const{editor:e}=this,{stroke:i,strokeWidth:s,area:o}=e.config,{x:n,y:r}=t.getInner(this);this.bounds.set(n,r),this.selectArea.setStyle({visible:!0,stroke:i,strokeWidth:s,x:n,y:r},o),this.selectArea.setBounds(this.bounds.get()),this.originList=e.leafList.clone()}}onDrag(t){if(this.editor.dragging)this.onDragEnd();else if(this.dragging){const{editor:e}=this,i=t.getInnerTotal(this),s=this.bounds.clone().unsign(),o=new h(e.app.find(K.findBounds,s));if(this.bounds.width=i.x,this.bounds.height=i.y,this.selectArea.setBounds(s.get()),o.length){const t=[];this.originList.forEach((e=>{o.has(e)||t.push(e)})),o.forEach((e=>{this.originList.has(e)||t.push(e)})),e.target=t}else e.target=this.originList,e.leafList.length&&e.update()}}onDragEnd(){this.dragging&&(this.originList=null,this.selectArea.visible=!1)}onAutoMove(t){if(this.dragging){const{x:e,y:i}=t.getLocalMove(this);this.bounds.x+=e,this.bounds.y+=i}}allow(t){return t.leafer!==this.editor.leafer}allowDrag(t){return!(!this.editor.config.boxSelect||t.target.draggable)&&(!this.editor.hasTarget&&this.allow(t.target)||t.shiftKey&&!j(t.path))}findDeepOne(t){const e={exclude:new h(this.editor.editBox.rect)};return j(t.target.leafer.interaction.findPath(t,e))}__listenEvents(){const{editor:t}=this;t.waitLeafer((()=>{const{app:e}=t;e.selector.proxy=t,this.__eventIds=[t.on_(L.HOVER,this.onHover,this),t.on_(L.SELECT,this.onSelect,this),e.on_(l.MOVE,this.onPointerMove,this),e.on_(l.BEFORE_DOWN,this.onBeforeDown,this),e.on_(l.TAP,this.onTap,this),e.on_(d.START,this.onDragStart,this),e.on_(d.DRAG,this.onDrag,this),e.on_(d.END,this.onDragEnd,this),e.on_(c.MOVE,this.onAutoMove,this),e.on_([g.ZOOM,c.MOVE],(()=>{this.editor.hoverTarget=null}))]}))}__removeListenEvents(){this.__eventIds&&(this.off_(this.__eventIds),this.__eventIds.length=0)}destroy(){this.editor=this.originList=this.lastDownLeaf=null,this.__removeListenEvents(),super.destroy()}}var V;!function(t){t[t.topLeft=0]="topLeft",t[t.top=1]="top",t[t.topRight=2]="topRight",t[t.right=3]="right",t[t.bottomRight=4]="bottomRight",t[t.bottom=5]="bottom",t[t.bottomLeft=6]="bottomLeft",t[t.left=7]="left"}(V||(V={}));const{topLeft:G,top:H,topRight:U,right:Z,bottomRight:q,bottom:J,bottomLeft:Q,left:$}=V,{toPoint:tt}=f,et={getScaleData(t,e,i,s,o){let n,r=1,a=1;const{width:h,height:l}=t;o&&(i.x*=2,i.y*=2);const d=(-i.y+l)/l,c=(i.x+h)/h,g=(i.y+l)/l,u=(-i.x+h)/h;switch(e){case H:a=d,n={x:.5,y:1};break;case Z:r=c,n={x:0,y:.5};break;case J:a=g,n={x:.5,y:0};break;case $:r=u,n={x:1,y:.5};break;case G:a=d,r=u,n={x:1,y:1};break;case U:a=d,r=c,n={x:0,y:1};break;case q:a=g,r=c,n={x:0,y:0};break;case Q:a=g,r=u,n={x:1,y:0}}return s&&(1!==r?a=r:r=a),tt(o||n,t,n),{origin:n,scaleX:r,scaleY:a,direction:e,lockRatio:s,around:o}},getRotateData(t,e,i,s,o){let n;switch(e){case G:n={x:1,y:1};break;case U:n={x:0,y:1};break;case q:n={x:0,y:0};break;case Q:n={x:1,y:0};break;default:n={x:.5,y:.5}}return tt(o||n,t,n),{origin:n,rotation:u.getRotation(s,n,i)}},getSkewData(t,e,i,s){let o,n,r=0,a=0;switch(e){case H:n={x:.5,y:0},o={x:.5,y:1},r=1;break;case J:n={x:.5,y:1},o={x:.5,y:0},r=1;break;case $:n={x:0,y:.5},o={x:1,y:.5},a=1;break;case Z:n={x:1,y:.5},o={x:0,y:.5},a=1}const{x:h,y:l,width:d,height:c}=t;n.x=h+n.x*d,n.y=l+n.y*c,tt(s||o,t,o);const g=u.getRotation(n,o,{x:n.x+(r?i.x:0),y:n.y+(a?i.y:0)});return r?r=-g:a=g,{origin:o,skewX:r,skewY:a}},getAround:(t,e)=>e&&!t?f.center:t,getRotateDirection:(t,e,i=8)=>((t=(t+Math.round(e/(360/i)))%i)<0&&(t+=i),t)},{topLeft:it,top:st,topRight:ot,right:nt,bottomRight:rt,bottom:at,bottomLeft:ht,left:lt}=V;function dt(t,e){const{editBox:i}=t,s=i.enterPoint;if(!s||!t.hasTarget||!i.visible)return;let{rotation:o}=i,{resizeCursor:n,rotateCursor:r,resizeable:a,rotateable:h}=t.config;const{direction:l,pointType:d}=s;i.enterPoint=s;const c="resize"===d;if(c&&h&&(e.metaKey||e.ctrlKey||!a)&&(n=r),i.flipped){const{flippedX:t,flippedY:e}=i;gt(n=[...n],t,e),gt(r=[...r],e,t),i.flippedOne&&(o=-o)}const g=et.getRotateDirection(l,o);s.cursor=c?n[g]:r[g]}function ct(t){t.editBox.rect.cursor=t.config.moveCursor}function gt(t,e,i){if(e){const e=t[st],i=t[it],s=t[ot];t[st]=t[at],t[it]=t[ht],t[ot]=t[rt],t[at]=e,t[ht]=i,t[rt]=s}if(i){const e=t[lt],i=t[it],s=t[ht];t[lt]=t[nt],t[it]=t[ot],t[ht]=t[rt],t[nt]=e,t[ot]=i,t[rt]=s}}class ut extends p{}const ft=["top","right","bottom","left"];class pt extends n{get flipped(){return this.flippedX||this.flippedY}get flippedX(){return this.scaleX<0}get flippedY(){return this.scaleY<0}get flippedOne(){return this.scaleX*this.scaleY<0}constructor(t){super(),this.rect=new p({name:"rect",hitFill:"all",hitStroke:"none",strokeAlign:"center",hitRadius:5}),this.circle=new ut({name:"circle",strokeAlign:"outside",around:"center",cursor:"crosshair",hitRadius:5}),this.buttons=new n({around:"center",hitSelf:!1}),this.resizePoints=[],this.rotatePoints=[],this.resizeLines=[],this.__eventIds=[],this.editor=t,this.visible=!1,this.create(),this.__listenEvents()}create(){let t,e,i;const{resizePoints:s,rotatePoints:o,resizeLines:n,rect:r,circle:a,buttons:h}=this,l=[{x:1,y:1},{x:.5,y:1},{x:0,y:1},{x:0,y:.5},{x:0,y:0},{x:.5,y:0},{x:1,y:0},{x:1,y:.5}];for(let r=0;r<8;r++)t=new ut({around:l[r],width:15,height:15,hitFill:"all"}),o.push(t),this.listenPointEvents(t,"rotate",r),r%2&&(e=new ut({name:"resize-line",around:"center",width:10,height:10,hitFill:"all"}),n.push(e),this.listenPointEvents(e,"resize",r)),i=new ut({name:"resize-point",around:"center",strokeAlign:"outside",hitRadius:5}),s.push(i),this.listenPointEvents(i,"resize",r);h.add(a),this.listenPointEvents(a,"rotate",2),this.addMany(...o,r,h,...n,...s)}update(t){const{config:e,list:i}=this.editor,{width:s,height:o}=t,{rect:n,circle:r,resizePoints:a,rotatePoints:h,resizeLines:l}=this,{middlePoint:d,resizeable:c,rotateable:g,stroke:u,strokeWidth:f}=e,p=this.getDirection8Points(t),y=this.getPointsStyle(),x=this.getMiddlePointsStyle();let w,v,k,m,_;this.visible=i[0]&&!i[0].locked;for(let t=0;t<8;t++)w=p[t],v=this.getPointStyle(t%2?x[(t-1)/2%x.length]:y[t/2%y.length]),m=a[t],k=h[t],_=l[Math.floor(t/2)],m.set(v),m.set(w),k.set(w),_.set(w),m.visible=_.visible=c||g,k.visible=g&&c,t%2?(m.visible=k.visible=!!d,(t+1)/2%2?(_.width=s,m.width>s-30&&(m.visible=!1)):(_.height=o,m.rotation=90,m.width>o-30&&(m.visible=!1))):m.rotation=t/2*90;r.visible=g&&!!e.rotatePoint,r.set(this.getPointStyle(e.rotatePoint||y[0])),n.set(Object.assign({stroke:u,strokeWidth:f},e.rect||{})),n.set(Object.assign(Object.assign({},t),{visible:!0})),this.layoutButtons()}layoutButtons(){const{buttons:t,resizePoints:e}=this,{buttonsDirection:i,buttonsFixed:s,buttonsMargin:o,middlePoint:n}=this.editor.config,{flippedX:r,flippedY:a}=this;let h=ft.indexOf(i);(h%2&&r||(h+1)%2&&a)&&s&&(h=(h+2)%4);const l=s?et.getRotateDirection(h,this.flippedOne?this.rotation:-this.rotation,4):h,d=e[2*l+1],c=l%2,g=l&&3!==l?1:-1,u=(o+(h%2?(n?d.width:0)+t.boxBounds.width:(n?d.height:0)+t.boxBounds.height)/2)*g;c?(t.x=d.x+u,t.y=d.y):(t.x=d.x,t.y=d.y+u),s&&(t.rotation=90*(l-h),t.scaleX=r?-1:1,t.scaleY=a?-1:1)}getPointStyle(t){const{stroke:e,strokeWidth:i,pointFill:s,pointSize:o,pointRadius:n}=this.editor.config,r={fill:s,stroke:e,strokeWidth:i,width:o,height:o,cornerRadius:n};return t?Object.assign(r,t):r}getPointsStyle(){const{point:t}=this.editor.config;return t instanceof Array?t:[t]}getMiddlePointsStyle(){const{middlePoint:t}=this.editor.config;return t instanceof Array?t:t?[t]:this.getPointsStyle()}getDirection8Points(t){const{x:e,y:i,width:s,height:o}=t;return[{x:e,y:i},{x:e+s/2,y:i},{x:e+s,y:i},{x:e+s,y:i+o/2},{x:e+s,y:i+o},{x:e+s/2,y:i+o},{x:e,y:i+o},{x:e,y:i+o/2}]}onDragStart(t){this.dragging=!0,"rect"===t.target.name&&(this.editor.opacity=this.editor.config.hideOnMove?0:1)}onDragEnd(t){this.dragging=!1,"rect"===t.target.name&&(this.editor.opacity=1)}onDrag(t){const{editor:e}=this;"rotate"===t.current.pointType||t.metaKey||t.ctrlKey||!e.config.resizeable?e.config.rotateable&&e.onRotate(t):e.onScale(t)}onArrow(t){if(this.editor.hasTarget){const e={x:0,y:0},i=t.shiftKey?10:1;switch(t.code){case"ArrowDown":e.y=i;break;case"ArrowUp":e.y=-i;break;case"ArrowLeft":e.x=-i;break;case"ArrowRight":e.x=i}(e.x||e.y)&&this.editor.move(e.x,e.y)}}onDoubleClick(){const{editor:t}=this;t.single&&t.element.isBranch}listenPointEvents(t,e,i){const{editor:s}=this;t.direction=i,t.pointType=e,t.on_(d.START,this.onDragStart,this),t.on_(d.DRAG,this.onDrag,this),t.on_(d.END,this.onDragEnd,this),t.on_(l.LEAVE,(()=>this.enterPoint=null)),"circle"!==t.name&&t.on_(l.ENTER,(e=>{this.enterPoint=t,dt(s,e)}))}__listenEvents(){const{rect:t,editor:e}=this;this.__eventIds=[e.on_(L.SELECT,(()=>{this.visible=e.hasTarget})),t.on_(d.START,this.onDragStart,this),t.on_(d.DRAG,e.onMove,e),t.on_(d.END,this.onDragEnd,this),t.on_(l.ENTER,(()=>ct(e))),t.on_(l.DOUBLE_CLICK,this.onDoubleClick,this)]}__removeListenEvents(){this.off_(this.__eventIds),this.__eventIds.length=0}destroy(){this.editor=null,this.__removeListenEvents(),super.destroy()}}const yt={editSize:"auto",stroke:"#836DFF",strokeWidth:2,pointFill:"#FFFFFF",pointSize:8,pointRadius:16,rotateGap:45,buttonsDirection:"bottom",buttonsMargin:12,moveCursor:"move",resizeCursor:["nwse-resize","ns-resize","nesw-resize","ew-resize","nwse-resize","ns-resize","nesw-resize","ew-resize"],rotateCursor:["ne-resize","e-resize","se-resize","s-resize","sw-resize","w-resize","nw-resize","n-resize"],selector:!0,hover:!0,boxSelect:!0,resizeable:!0,rotateable:!0,skewable:!0};class xt{constructor(){this.tag="EditTool"}onMove(t){const{moveX:e,moveY:i,editor:s}=t,{app:o,list:n}=s;o.lockLayout(),n.forEach((t=>{const s=t.getLocalPoint({x:e,y:i},null,!0);t.move(s.x,s.y)})),o.unlockLayout()}onScale(t){const{scaleX:e,scaleY:i,transform:s,worldOrigin:o,editor:n}=t,{app:r,list:a}=n;r.lockLayout(),a.forEach((t=>{const r="size"===n.getEditSize(t);s?t.transform(s,r):t.scaleOf(t.getInnerPoint(o),e,i,r)})),r.unlockLayout()}onRotate(t){const{rotation:e,worldOrigin:i,editor:s}=t,{app:o,list:n}=s;o.lockLayout(),n.forEach((t=>{t.rotateOf(t.getInnerPoint(i),e)})),o.unlockLayout()}onSkew(t){const{skewX:e,skewY:i,transform:s,worldOrigin:o,editor:n}=t,{app:r,list:a}=n;r.lockLayout(),a.forEach((t=>{const r="size"===n.getEditSize(t);s?t.transform(s,r):t.skewOf(t.getInnerPoint(o),e,i,r)})),r.unlockLayout()}update(t){const{simulateTarget:e,element:i}=t;t.multiple&&e.parent.updateLayout();const{x:s,y:o,scaleX:n,scaleY:r,rotation:a,skewX:h,skewY:l,width:d,height:c}=i.getLayoutBounds("box",t,!0);t.editBox.set({x:s,y:o,scaleX:n,scaleY:r,rotation:a,skewX:h,skewY:l}),t.editBox.update({x:0,y:0,width:d,height:c})}}xt.list=[];const{left:wt,right:vt}=V;class kt extends xt{constructor(){super(...arguments),this.tag="LineEditTool",this.scaleOfEvent=!0}onScaleWithDrag(t){const{drag:e,direction:i,lockRatio:s,around:o}=t,n=t.target,r={x:0,y:0},{toPoint:a}=n;n.rotation=0;let{x:h,y:l}=e.getInnerMove(n);s&&(Math.abs(h)>Math.abs(l)?l=0:h=0),i===wt?(r.x+=h,r.y+=l,o&&(a.x-=h,a.y-=l)):(o&&(r.x-=h,r.y-=l),a.x+=h,a.y+=l),n.getLocalPointByInner(r,null,null,!0),n.getLocalPointByInner(a,null,null,!0),n.x=r.x,n.y=r.y,n.getInnerPointByLocal(a,null,null,!0),n.toPoint=a}onSkew(t){}update(t){const{rotatePoints:e,resizeLines:i,resizePoints:s}=t.editBox;super.update(t);for(let t=0;t<8;t++)t<4&&(i[t].visible=!1),s[t].visible=e[t].visible=t===wt||t===vt}}const mt=(t,e)=>t.parent.children.indexOf(t)-e.parent.children.indexOf(e),_t=(t,e)=>e.parent.children.indexOf(e)-t.parent.children.indexOf(t),bt={group(t,e,i){t.sort(_t);const{app:s,parent:o}=t[0];i||(i=new n),o.addAt(i,o.children.indexOf(t[0])),t.sort(mt);const r=new x(e.worldTransform);return r.divideParent(o.worldTransform),i.setTransform(r),i.editable=!0,i.hitChildren=!1,s.lockLayout(),t.forEach((t=>t.dropTo(i))),s.unlockLayout(),i},ungroup(t){const{app:e}=t[0],i=[];return e.lockLayout(),t.forEach((t=>{if(t.isBranch){const{parent:e,children:s}=t;for(;s.length;)i.push(s[0]),s[0].dropTo(e,e.children.indexOf(t));t.remove()}else i.push(t)})),e.unlockLayout(),i},toTop(t){t.sort(mt),t.forEach((t=>{let e;const{parent:i}=t;if(i){const{children:s}=i,o=s.length-1,n=s[o].__.zIndex,r=s.indexOf(t);r!==o?(s.splice(r,1),s.push(t),e=n+1):e=n,t.zIndex=e}}))},toBottom(t){t.sort(_t),t.forEach((t=>{let e;const{parent:i}=t;if(i){const{children:s}=i,o=s[0].__.zIndex,n=s.indexOf(t);0!==n?(s.splice(n,1),s.unshift(t),e=o-1):e=o,t.zIndex=e}}))}};class Et extends n{get list(){return this.leafList.list}get hasTarget(){return!!this.list.length}get multiple(){return this.list.length>1}get single(){return 1===this.list.length}get element(){return this.multiple?this.simulateTarget:this.list[0]}get buttons(){return this.editBox.buttons}get dragging(){return this.editBox.dragging}constructor(t,e){super(e),this.config=yt,this.leafList=new h,this.simulateTarget=new r({visible:!1}),this.editBox=new pt(this),this.selector=new N(this),this.targetEventIds=[],t&&(this.config=w.default(t,this.config)),this.addMany(this.selector,this.editBox)}hasItem(t){return this.leafList.has(t)}addItem(t){this.hasItem(t)||t.locked||(this.leafList.add(t),this.target=this.leafList.list)}removeItem(t){this.hasItem(t)&&(this.leafList.remove(t),this.target=this.leafList.list)}shiftItem(t){this.hasItem(t)?this.removeItem(t):this.addItem(t)}update(){this.target&&(this.editTool.update(this),this.selector.update())}updateEditTool(){this.editTool=function(t){if(1===t.length){const e=t[0];return e instanceof y&&!e.points?new kt:new xt}return new xt}(this.list)}getEditSize(t){let{editSize:e}=this.config;return"auto"===e?t.editSize:e}onMove(t){const e=t.getLocalMove(this.element);t.shiftKey&&(Math.abs(e.x)>Math.abs(e.y)?e.y=0:e.x=0),this.move(e.x,e.y)}onScale(t){const{element:e}=this,{direction:i}=t.current;let{around:s,lockRatio:o}=this.config;t.shiftKey&&(o=!0);const n=et.getScaleData(e.boxBounds,i,t.getInnerMove(e),o,et.getAround(s,t.altKey));this.editTool.onScaleWithDrag?(n.drag=t,this.scaleWithDrag(n)):this.scaleOf(n.origin,n.scaleX,n.scaleY)}onRotate(t){const{skewable:e,around:i,rotateGap:s}=this.config,{direction:o,name:n}=t.current;if(e&&"resize-line"===n)return this.onSkew(t);const{element:r,editBox:a}=this;let h,l;if(t instanceof v)l=t.rotation,h=r.getInnerPoint(t);else{const e={x:t.x-t.moveX,y:t.y-t.moveY},s=et.getRotateData(r.boxBounds,o,t.getInner(r),r.getInnerPoint(e),t.shiftKey?null:i||"center");l=s.rotation,h=s.origin}l=k.getGapRotation(l,s,r.rotation),l&&(a.flippedOne&&(l=-l),this.rotateOf(h,l))}onSkew(t){const{element:e}=this,{around:i}=this.config,{origin:s,skewX:o,skewY:n}=et.getSkewData(e.boxBounds,t.current.direction,t.getInnerMove(e),et.getAround(i,t.altKey));(o||n)&&this.skewOf(s,o,n)}move(t,e){const{element:i}=this,s=i.getWorldPointByLocal({x:t,y:e},null,!0),o=new S(S.MOVE,{target:i,editor:this,moveX:s.x,moveY:s.y});this.editTool.onMove(o),this.emitEvent(o),this.multiple&&i.move(t,e)}scaleWithDrag(t){const{element:e}=this,i=e.getWorldPoint(t.origin),s=new T(T.SCALE,Object.assign(Object.assign({},t),{target:e,editor:this,worldOrigin:i}));this.editTool.onScaleWithDrag(s),this.emitEvent(s)}scaleOf(t,e,i=e,s){const{element:o}=this,n=o.getWorldPoint(t);let r;if(this.multiple){const s=Object.assign({},o.localTransform);o.scaleOf(t,e,i),r=new x(o.localTransform).divide(s)}const a=new T(T.SCALE,{target:o,editor:this,worldOrigin:n,scaleX:e,scaleY:i,transform:r});this.editTool.onScale(a),this.emitEvent(a)}rotateOf(t,e){const{element:i}=this,s=i.getWorldPoint(t),o=new O(O.ROTATE,{target:i,editor:this,worldOrigin:s,rotation:e});this.editTool.onRotate(o),this.emitEvent(o),this.multiple&&i.rotateOf(t,e)}skewOf(t,e,i=0,s){const{element:o}=this,n=o.getWorldPoint(t);let r;if(this.multiple){const s=Object.assign({},o.localTransform);o.skewOf(t,e,i),r=new x(o.localTransform).divide(s)}const a=new P(P.SKEW,{target:o,editor:this,skewX:e,skewY:i,transform:r,worldOrigin:n});this.editTool.onSkew(a),this.emitEvent(a)}group(){this.multiple&&(this.target=bt.group(this.list,this.element))}ungroup(){this.list.length&&(this.target=bt.ungroup(this.list))}lock(){this.list.forEach((t=>t.locked=!0)),this.update()}unlock(){this.list.forEach((t=>t.locked=!1)),this.update()}toTop(){this.list.length&&(bt.toTop(this.list),this.leafList.update())}toBottom(){this.list.length&&(bt.toBottom(this.list),this.leafList.update())}listenTargetEvents(){if(!this.targetEventIds.length){const{leafer:t}=this.list[0];this.targetEventIds=[t.on_(m.START,this.update,this),t.on_([_.HOLD,_.UP],(t=>{dt(this,t)})),t.on_(_.DOWN,this.editBox.onArrow,this.editBox)]}}removeTargetEvents(){const{targetEventIds:t}=this;t.length&&(this.off_(t),t.length=0)}destroy(){this.destroyed||(this.simulateTarget.destroy(),this.target=this.hoverTarget=this.simulateTarget=null,super.destroy())}}E([D((function(t){t.emitEvent(new L(L.HOVER,{editor:t}))}))],Et.prototype,"hoverTarget",void 0),E([D((function(t){const{target:e}=t;e?t.leafList=e instanceof h?e:new h(e):t.leafList.reset(),t.emitEvent(new L(L.SELECT,{editor:t})),t.hasTarget?t.waitLeafer((()=>{t.multiple&&function(t){const{simulateTarget:e,leafList:i}=t,{x:s,y:o,width:n,height:r}=(new a).setListWithFn(i.list,(t=>t.worldBoxBounds)),h=e.parent=i.list[0].leafer.zoomLayer,{scaleX:l,scaleY:d,e:c,f:g}=h.__world;e.reset({x:(s-c)/l,y:(o-g)/d,width:n/l,height:r/d})}(t),ct(t),t.updateEditTool(),t.update(),t.listenTargetEvents()})):t.removeTargetEvents()}))],Et.prototype,"target",void 0),b.editor=function(t){return new Et(t)};export{pt as EditBox,et as EditDataHelper,ut as EditPoint,N as EditSelect,K as EditSelectHelper,xt as EditTool,Et as Editor,L as EditorEvent,bt as EditorHelper,S as EditorMoveEvent,O as EditorRotateEvent,T as EditorScaleEvent,P as EditorSkewEvent,kt as LineEditTool,I as SelectArea,M as Stroker};
+import{Event as t,defineKey as e,MatrixHelper as i,UI as s,Paint as o,Group as n,Rect as r,Bounds as a,LeafList as h,PointerEvent as l,DragEvent as d,MoveEvent as c,ZoomEvent as g,PointHelper as u,AroundHelper as f,Box as p,Line as y,Matrix as w,DataHelper as v,RotateEvent as k,MathHelper as x,RenderEvent as m,KeyEvent as b,Creator as _}from"@leafer-ui/core";function E(t,e,i,s){var o,n=arguments.length,r=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,s);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(r=(n<3?o(r):n>3?o(e,i,r):o(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r}"function"==typeof SuppressedError&&SuppressedError;class L extends t{constructor(t,e){super(t),e&&Object.assign(this,e)}}L.SELECT="editor.select",L.HOVER="editor.hover";class S extends L{constructor(t,e){super(t,e)}}S.MOVE="editor.move";class T extends L{constructor(t,e){super(t,e)}}T.SCALE="editor.scale";class O extends L{constructor(t,e){super(t,e)}}O.ROTATE="editor.rotate";class P extends L{constructor(t,e){super(t,e)}}function D(t){return(i,s)=>{const o="_"+s;e(i,s,{get(){return this[o]},set(e){const i=this[o];i!==e&&(this[o]=e,t(this,i))}})}}P.SKEW="editor.skew";const A=i.get(),{abs:R}=Math,{copy:z,scale:B}=i;class M extends s{constructor(){super(),this.list=[],this.hittable=!1,this.strokeAlign="center"}setTarget(t,e){const{stroke:i,strokeWidth:s}=e;this.set({stroke:i,strokeWidth:s}),this.target=t}__draw(t,e){const{list:i}=this;if(i.length){let s;const{stroke:n,strokeWidth:r}=this.__,{bounds:a}=e;for(let h=0;h<i.length;h++)if(s=i[h],a&&a.hit(s.__world,e.matrix)){let i;if("scale"===s.__.editSize){const o=R(s.__world.scaleX),n=R(s.__world.scaleY);if(o!==n){z(A,s.__world),B(A,1/o,1/n),t.setWorld(A,e.matrix),t.beginPath(),this.__.strokeWidth=r;const{x:a,y:h,width:l,height:d}=s.__layout.boxBounds;t.rect(a*o,h*n,l*o,d*n),i=!0}}i||(t.setWorld(s.__world,e.matrix),t.beginPath(),s.__.__pathForRender?s.__drawRenderPath(t):s.__drawPathByBox(t),this.__.strokeWidth=r/R(s.__world.scaleX)),"string"==typeof n?o.stroke(n,this,t,e):o.strokes(n,this,t,e)}this.__.strokeWidth=r}}destroy(){this.target=null,super.destroy()}}E([D((function(t){const e=t.target;t.list=e?e instanceof Array?e:[e]:[],t.forceUpdate()}))],M.prototype,"target",void 0);class I extends n{constructor(t){super(t),this.strokeArea=new r({strokeAlign:"center"}),this.fillArea=new r,this.visible=this.hittable=!1,this.addMany(this.fillArea,this.strokeArea)}setStyle(t,e){const{visible:i,stroke:s,strokeWidth:o}=t;this.visible=i,this.strokeArea.reset(Object.assign({stroke:s,strokeWidth:o},e||{})),this.fillArea.reset({visible:!e,fill:s,opacity:.2})}setBounds(t){this.strokeArea.set(t),this.fillArea.set(t)}}var W;!function(t){t[t.No=0]="No",t[t.Yes=1]="Yes",t[t.NoAndSkip=2]="NoAndSkip",t[t.YesAndSkip=3]="YesAndSkip"}(W||(W={}));const{No:Y,Yes:X,NoAndSkip:C,YesAndSkip:F}=W,K={findOne:t=>t.list.find((t=>t.editable)),findBounds(t,e){if(t.__.hittable&&!t.__.locked&&e.hit(t.__world)){if(t.__.editable){if(t.isBranch&&!t.__.hitChildren)return t.__.hitSelf?F:C;if(t.isFrame)return e.includes(t.__layout.boxBounds,t.__world)?F:Y;if(e.hit(t.__layout.boxBounds,t.__world)&&t.__.hitSelf)return X}return Y}return t.isBranch?C:Y}},{findOne:j}=K;class N extends n{get dragging(){return!!this.originList}get running(){return this.editor.hittable&&this.editor.config.selector}get isMoveMode(){return this.app&&this.app.interaction.moveMode}constructor(t){super(),this.hoverStroker=new M,this.targetStroker=new M,this.bounds=new a,this.selectArea=new I,this.__eventIds=[],this.editor=t,this.addMany(this.targetStroker,this.hoverStroker,this.selectArea),this.__listenEvents()}onHover(){const{editor:t}=this;if(!this.running||this.dragging||t.dragging)this.hoverStroker.target=null;else{const{stroke:e,strokeWidth:i,hover:s}=t.config;this.hoverStroker.setTarget(s?this.editor.hoverTarget:null,{stroke:e,strokeWidth:i})}}onSelect(){if(this.running){const{config:t,list:e}=this.editor,{stroke:i,strokeWidth:s}=t;this.targetStroker.setTarget(e,{stroke:i,strokeWidth:Math.max(1,s/2)}),this.hoverStroker.target=null}}update(){this.running&&this.targetStroker.forceUpdate()}onPointerMove(t){if(this.running&&!this.isMoveMode){const e=t.shiftKey?this.findDeepOne(t):j(t.path);this.editor.hoverTarget=this.editor.hasItem(e)?null:e}this.isMoveMode&&(this.editor.hoverTarget=null)}onBeforeDown(t){if(this.running&&!this.isMoveMode&&!t.middle){const e=this.lastDownLeaf=j(t.path);e?(t.shiftKey?this.editor.shiftItem(e):this.editor.target=e,this.editor.updateLayout(),e.leafer.interaction.updateDownData()):this.allow(t.target)&&(t.shiftKey||(this.editor.target=null))}}onTap(t){if(this.running&&t.shiftKey&&!t.middle&&!this.lastDownLeaf){const e=this.findDeepOne(t);e&&this.editor.shiftItem(e)}else this.isMoveMode&&(this.editor.target=null);this.lastDownLeaf=null}onDragStart(t){if(this.running&&this.allowDrag(t)){const{editor:e}=this,{stroke:i,strokeWidth:s,area:o}=e.config,{x:n,y:r}=t.getInner(this);this.bounds.set(n,r),this.selectArea.setStyle({visible:!0,stroke:i,strokeWidth:s,x:n,y:r},o),this.selectArea.setBounds(this.bounds.get()),this.originList=e.leafList.clone()}}onDrag(t){if(this.editor.dragging)this.onDragEnd();else if(this.dragging){const{editor:e}=this,i=t.getInnerTotal(this),s=this.bounds.clone().unsign(),o=new h(e.app.find(K.findBounds,s));if(this.bounds.width=i.x,this.bounds.height=i.y,this.selectArea.setBounds(s.get()),o.length){const t=[];this.originList.forEach((e=>{o.has(e)||t.push(e)})),o.forEach((e=>{this.originList.has(e)||t.push(e)})),(t.length!==e.list.length||e.list.some(((e,i)=>e!==t[i])))&&(e.target=t)}else e.target=this.originList.list,e.leafList.length&&e.update()}}onDragEnd(){this.dragging&&(this.originList=null,this.selectArea.visible=!1)}onAutoMove(t){if(this.dragging){const{x:e,y:i}=t.getLocalMove(this);this.bounds.x+=e,this.bounds.y+=i}}allow(t){return t.leafer!==this.editor.leafer}allowDrag(t){return!(!this.editor.config.boxSelect||t.target.draggable)&&(!this.editor.hasTarget&&this.allow(t.target)||t.shiftKey&&!j(t.path))}findDeepOne(t){const e={exclude:new h(this.editor.editBox.rect)};return j(t.target.leafer.interaction.findPath(t,e))}__listenEvents(){const{editor:t}=this;t.waitLeafer((()=>{const{app:e}=t;e.selector.proxy=t,this.__eventIds=[t.on_(L.HOVER,this.onHover,this),t.on_(L.SELECT,this.onSelect,this),e.on_(l.MOVE,this.onPointerMove,this),e.on_(l.BEFORE_DOWN,this.onBeforeDown,this),e.on_(l.TAP,this.onTap,this),e.on_(d.START,this.onDragStart,this),e.on_(d.DRAG,this.onDrag,this),e.on_(d.END,this.onDragEnd,this),e.on_(c.MOVE,this.onAutoMove,this),e.on_([g.ZOOM,c.MOVE],(()=>{this.editor.hoverTarget=null}))]}))}__removeListenEvents(){this.__eventIds&&(this.off_(this.__eventIds),this.__eventIds.length=0)}destroy(){this.editor=this.originList=this.lastDownLeaf=null,this.__removeListenEvents(),super.destroy()}}var V;!function(t){t[t.topLeft=0]="topLeft",t[t.top=1]="top",t[t.topRight=2]="topRight",t[t.right=3]="right",t[t.bottomRight=4]="bottomRight",t[t.bottom=5]="bottom",t[t.bottomLeft=6]="bottomLeft",t[t.left=7]="left"}(V||(V={}));const{topLeft:G,top:H,topRight:U,right:Z,bottomRight:q,bottom:J,bottomLeft:Q,left:$}=V,{toPoint:tt}=f,et={getScaleData(t,e,i,s,o){let n,r=1,a=1;const{width:h,height:l}=t;o&&(i.x*=2,i.y*=2);const d=(-i.y+l)/l,c=(i.x+h)/h,g=(i.y+l)/l,u=(-i.x+h)/h;switch(e){case H:a=d,n={x:.5,y:1};break;case Z:r=c,n={x:0,y:.5};break;case J:a=g,n={x:.5,y:0};break;case $:r=u,n={x:1,y:.5};break;case G:a=d,r=u,n={x:1,y:1};break;case U:a=d,r=c,n={x:0,y:1};break;case q:a=g,r=c,n={x:0,y:0};break;case Q:a=g,r=u,n={x:1,y:0}}return s&&(1!==r?a=r:r=a),tt(o||n,t,n),{origin:n,scaleX:r,scaleY:a,direction:e,lockRatio:s,around:o}},getRotateData(t,e,i,s,o){let n;switch(e){case G:n={x:1,y:1};break;case U:n={x:0,y:1};break;case q:n={x:0,y:0};break;case Q:n={x:1,y:0};break;default:n={x:.5,y:.5}}return tt(o||n,t,n),{origin:n,rotation:u.getRotation(s,n,i)}},getSkewData(t,e,i,s){let o,n,r=0,a=0;switch(e){case H:n={x:.5,y:0},o={x:.5,y:1},r=1;break;case J:n={x:.5,y:1},o={x:.5,y:0},r=1;break;case $:n={x:0,y:.5},o={x:1,y:.5},a=1;break;case Z:n={x:1,y:.5},o={x:0,y:.5},a=1}const{x:h,y:l,width:d,height:c}=t;n.x=h+n.x*d,n.y=l+n.y*c,tt(s||o,t,o);const g=u.getRotation(n,o,{x:n.x+(r?i.x:0),y:n.y+(a?i.y:0)});return r?r=-g:a=g,{origin:o,skewX:r,skewY:a}},getAround:(t,e)=>e&&!t?"center":t,getRotateDirection:(t,e,i=8)=>((t=(t+Math.round(e/(360/i)))%i)<0&&(t+=i),t)},{topLeft:it,top:st,topRight:ot,right:nt,bottomRight:rt,bottom:at,bottomLeft:ht,left:lt}=V;function dt(t,e){const{editBox:i}=t,s=i.enterPoint;if(!s||!t.hasTarget||!i.visible)return;let{rotation:o}=i,{resizeCursor:n,rotateCursor:r,resizeable:a,rotateable:h}=t.config;const{direction:l,pointType:d}=s;i.enterPoint=s;const c="resize"===d;if(c&&h&&(e.metaKey||e.ctrlKey||!a)&&(n=r),i.flipped){const{flippedX:t,flippedY:e}=i;gt(n=[...n],t,e),gt(r=[...r],e,t),i.flippedOne&&(o=-o)}const g=et.getRotateDirection(l,o);s.cursor=c?n[g]:r[g]}function ct(t){t.editBox.rect.cursor=t.config.moveCursor}function gt(t,e,i){if(e){const e=t[st],i=t[it],s=t[ot];t[st]=t[at],t[it]=t[ht],t[ot]=t[rt],t[at]=e,t[ht]=i,t[rt]=s}if(i){const e=t[lt],i=t[it],s=t[ht];t[lt]=t[nt],t[it]=t[ot],t[ht]=t[rt],t[nt]=e,t[ot]=i,t[rt]=s}}class ut extends p{}const ft=["top","right","bottom","left"];class pt extends n{get flipped(){return this.flippedX||this.flippedY}get flippedX(){return this.scaleX<0}get flippedY(){return this.scaleY<0}get flippedOne(){return this.scaleX*this.scaleY<0}constructor(t){super(),this.rect=new p({name:"rect",hitFill:"all",hitStroke:"none",strokeAlign:"center",hitRadius:5}),this.circle=new ut({name:"circle",strokeAlign:"outside",around:"center",cursor:"crosshair",hitRadius:5}),this.buttons=new n({around:"center",hitSelf:!1}),this.resizePoints=[],this.rotatePoints=[],this.resizeLines=[],this.__eventIds=[],this.editor=t,this.visible=!1,this.create(),this.__listenEvents()}create(){let t,e,i;const{resizePoints:s,rotatePoints:o,resizeLines:n,rect:r,circle:a,buttons:h}=this,l=[{x:1,y:1},{x:.5,y:1},{x:0,y:1},{x:0,y:.5},{x:0,y:0},{x:.5,y:0},{x:1,y:0},{x:1,y:.5}];for(let r=0;r<8;r++)t=new ut({around:l[r],width:15,height:15,hitFill:"all"}),o.push(t),this.listenPointEvents(t,"rotate",r),r%2&&(e=new ut({name:"resize-line",around:"center",width:10,height:10,hitFill:"all"}),n.push(e),this.listenPointEvents(e,"resize",r)),i=new ut({name:"resize-point",around:"center",strokeAlign:"outside",hitRadius:5}),s.push(i),this.listenPointEvents(i,"resize",r);h.add(a),this.listenPointEvents(a,"rotate",2),this.addMany(...o,r,h,...n,...s)}update(t){const{config:e,list:i}=this.editor,{width:s,height:o}=t,{rect:n,circle:r,resizePoints:a,rotatePoints:h,resizeLines:l}=this,{middlePoint:d,resizeable:c,rotateable:g,stroke:u,strokeWidth:p}=e,y=this.getPointsStyle(),w=this.getMiddlePointsStyle();this.visible=i[0]&&!i[0].locked;let v,k,x,m,b={};for(let e=0;e<8;e++)f.toPoint(f.directionData[e],t,b),v=this.getPointStyle(e%2?w[(e-1)/2%w.length]:y[e/2%y.length]),x=a[e],k=h[e],m=l[Math.floor(e/2)],x.set(v),x.set(b),k.set(b),m.set(b),x.visible=m.visible=c||g,k.visible=g&&c,e%2?(x.visible=k.visible=!!d,(e+1)/2%2?(m.width=s,x.width>s-30&&(x.visible=!1)):(m.height=o,x.rotation=90,x.width>o-30&&(x.visible=!1))):x.rotation=e/2*90;r.visible=g&&!!e.rotatePoint,r.set(this.getPointStyle(e.rotatePoint||y[0])),n.set(Object.assign({stroke:u,strokeWidth:p},e.rect||{})),n.set(Object.assign(Object.assign({},t),{visible:!0})),this.layoutButtons()}layoutButtons(){const{buttons:t,resizePoints:e}=this,{buttonsDirection:i,buttonsFixed:s,buttonsMargin:o,middlePoint:n}=this.editor.config,{flippedX:r,flippedY:a}=this;let h=ft.indexOf(i);(h%2&&r||(h+1)%2&&a)&&s&&(h=(h+2)%4);const l=s?et.getRotateDirection(h,this.flippedOne?this.rotation:-this.rotation,4):h,d=e[2*l+1],c=l%2,g=l&&3!==l?1:-1,u=(o+(h%2?(n?d.width:0)+t.boxBounds.width:(n?d.height:0)+t.boxBounds.height)/2)*g;c?(t.x=d.x+u,t.y=d.y):(t.x=d.x,t.y=d.y+u),s&&(t.rotation=90*(l-h),t.scaleX=r?-1:1,t.scaleY=a?-1:1)}getPointStyle(t){const{stroke:e,strokeWidth:i,pointFill:s,pointSize:o,pointRadius:n}=this.editor.config,r={fill:s,stroke:e,strokeWidth:i,width:o,height:o,cornerRadius:n};return t?Object.assign(r,t):r}getPointsStyle(){const{point:t}=this.editor.config;return t instanceof Array?t:[t]}getMiddlePointsStyle(){const{middlePoint:t}=this.editor.config;return t instanceof Array?t:t?[t]:this.getPointsStyle()}onDragStart(t){this.dragging=!0,"rect"===t.target.name&&(this.editor.opacity=this.editor.config.hideOnMove?0:1)}onDragEnd(t){this.dragging=!1,"rect"===t.target.name&&(this.editor.opacity=1)}onDrag(t){const{editor:e}=this;"rotate"===t.current.pointType||t.metaKey||t.ctrlKey||!e.config.resizeable?e.config.rotateable&&e.onRotate(t):e.onScale(t)}onArrow(t){if(this.editor.hasTarget){const e={x:0,y:0},i=t.shiftKey?10:1;switch(t.code){case"ArrowDown":e.y=i;break;case"ArrowUp":e.y=-i;break;case"ArrowLeft":e.x=-i;break;case"ArrowRight":e.x=i}(e.x||e.y)&&this.editor.move(e.x,e.y)}}onDoubleClick(){const{editor:t}=this;t.single&&t.element.isBranch}listenPointEvents(t,e,i){const{editor:s}=this;t.direction=i,t.pointType=e,t.on_(d.START,this.onDragStart,this),t.on_(d.DRAG,this.onDrag,this),t.on_(d.END,this.onDragEnd,this),t.on_(l.LEAVE,(()=>this.enterPoint=null)),"circle"!==t.name&&t.on_(l.ENTER,(e=>{this.enterPoint=t,dt(s,e)}))}__listenEvents(){const{rect:t,editor:e}=this;this.__eventIds=[e.on_(L.SELECT,(()=>{this.visible=e.hasTarget})),t.on_(d.START,this.onDragStart,this),t.on_(d.DRAG,e.onMove,e),t.on_(d.END,this.onDragEnd,this),t.on_(l.ENTER,(()=>ct(e))),t.on_(l.DOUBLE_CLICK,this.onDoubleClick,this)]}__removeListenEvents(){this.off_(this.__eventIds),this.__eventIds.length=0}destroy(){this.editor=null,this.__removeListenEvents(),super.destroy()}}const yt={editSize:"auto",stroke:"#836DFF",strokeWidth:2,pointFill:"#FFFFFF",pointSize:8,pointRadius:16,rotateGap:45,buttonsDirection:"bottom",buttonsMargin:12,moveCursor:"move",resizeCursor:["nwse-resize","ns-resize","nesw-resize","ew-resize","nwse-resize","ns-resize","nesw-resize","ew-resize"],rotateCursor:["ne-resize","e-resize","se-resize","s-resize","sw-resize","w-resize","nw-resize","n-resize"],selector:!0,hover:!0,boxSelect:!0,resizeable:!0,rotateable:!0,skewable:!0};class wt{constructor(){this.tag="EditTool"}onMove(t){const{moveX:e,moveY:i,editor:s}=t,{app:o,list:n}=s;o.lockLayout(),n.forEach((t=>{const s=t.getLocalPoint({x:e,y:i},null,!0);t.move(s.x,s.y)})),o.unlockLayout()}onScale(t){const{scaleX:e,scaleY:i,transform:s,worldOrigin:o,editor:n}=t,{app:r,list:a}=n;r.lockLayout(),a.forEach((t=>{const r="size"===n.getEditSize(t);s?t.transform(s,r):t.scaleOf(t.getInnerPoint(o),e,i,r)})),r.unlockLayout()}onRotate(t){const{rotation:e,worldOrigin:i,editor:s}=t,{app:o,list:n}=s;o.lockLayout(),n.forEach((t=>{t.rotateOf(t.getInnerPoint(i),e)})),o.unlockLayout()}onSkew(t){const{skewX:e,skewY:i,transform:s,worldOrigin:o,editor:n}=t,{app:r,list:a}=n;r.lockLayout(),a.forEach((t=>{const r="size"===n.getEditSize(t);s?t.transform(s,r):t.skewOf(t.getInnerPoint(o),e,i,r)})),r.unlockLayout()}update(t){const{simulateTarget:e,element:i}=t;t.multiple&&e.parent.updateLayout();const{x:s,y:o,scaleX:n,scaleY:r,rotation:a,skewX:h,skewY:l,width:d,height:c}=i.getLayoutBounds("box",t,!0);t.editBox.set({x:s,y:o,scaleX:n,scaleY:r,rotation:a,skewX:h,skewY:l}),t.editBox.update({x:0,y:0,width:d,height:c})}}wt.list=[];const{left:vt,right:kt}=V;class xt extends wt{constructor(){super(...arguments),this.tag="LineEditTool",this.scaleOfEvent=!0}onScaleWithDrag(t){const{drag:e,direction:i,lockRatio:s,around:o}=t,n=t.target,r={x:0,y:0},{toPoint:a}=n;n.rotation=0;let{x:h,y:l}=e.getInnerMove(n);s&&(Math.abs(h)>Math.abs(l)?l=0:h=0),i===vt?(r.x+=h,r.y+=l,o&&(a.x-=h,a.y-=l)):(o&&(r.x-=h,r.y-=l),a.x+=h,a.y+=l),n.getLocalPointByInner(r,null,null,!0),n.getLocalPointByInner(a,null,null,!0),n.x=r.x,n.y=r.y,n.getInnerPointByLocal(a,null,null,!0),n.toPoint=a}onSkew(t){}update(t){const{rotatePoints:e,resizeLines:i,resizePoints:s}=t.editBox;super.update(t);for(let t=0;t<8;t++)t<4&&(i[t].visible=!1),s[t].visible=e[t].visible=t===vt||t===kt}}const mt=(t,e)=>t.parent.children.indexOf(t)-e.parent.children.indexOf(e),bt=(t,e)=>e.parent.children.indexOf(e)-t.parent.children.indexOf(t),_t={group(t,e,i){t.sort(bt);const{app:s,parent:o}=t[0];i||(i=new n),o.addAt(i,o.children.indexOf(t[0])),t.sort(mt);const r=new w(e.worldTransform);return r.divideParent(o.worldTransform),i.setTransform(r),i.editable=!0,i.hitChildren=!1,s.lockLayout(),t.forEach((t=>t.dropTo(i))),s.unlockLayout(),i},ungroup(t){const{app:e}=t[0],i=[];return e.lockLayout(),t.forEach((t=>{if(t.isBranch){const{parent:e,children:s}=t;for(;s.length;)i.push(s[0]),s[0].dropTo(e,e.children.indexOf(t));t.remove()}else i.push(t)})),e.unlockLayout(),i},toTop(t){t.sort(mt),t.forEach((t=>{t.parent&&t.parent.add(t)}))},toBottom(t){t.sort(bt),t.forEach((t=>{t.parent&&t.parent.addAt(t,0)}))}};class Et extends n{get list(){return this.leafList.list}get hasTarget(){return!!this.list.length}get multiple(){return this.list.length>1}get single(){return 1===this.list.length}get element(){return this.multiple?this.simulateTarget:this.list[0]}get buttons(){return this.editBox.buttons}get dragging(){return this.editBox.dragging}constructor(t,e){super(e),this.config=yt,this.leafList=new h,this.simulateTarget=new r({visible:!1}),this.editBox=new pt(this),this.selector=new N(this),this.targetEventIds=[],t&&(this.config=v.default(t,this.config)),this.addMany(this.selector,this.editBox)}hasItem(t){return this.leafList.has(t)}addItem(t){this.hasItem(t)||t.locked||(this.leafList.add(t),this.target=this.leafList.list)}removeItem(t){this.hasItem(t)&&(this.leafList.remove(t),this.target=this.leafList.list)}shiftItem(t){this.hasItem(t)?this.removeItem(t):this.addItem(t)}update(){this.target&&(this.editTool.update(this),this.selector.update())}updateEditTool(){this.editTool=function(t){if(1===t.length){const e=t[0];return e instanceof y&&!e.points?new xt:new wt}return new wt}(this.list)}getEditSize(t){let{editSize:e}=this.config;return"auto"===e?t.editSize:e}onMove(t){const e=t.getLocalMove(this.element);t.shiftKey&&(Math.abs(e.x)>Math.abs(e.y)?e.y=0:e.x=0),this.move(e.x,e.y)}onScale(t){const{element:e}=this,{direction:i}=t.current;let{around:s,lockRatio:o}=this.config;t.shiftKey&&(o=!0);const n=et.getScaleData(e.boxBounds,i,t.getInnerMove(e),o,et.getAround(s,t.altKey));this.editTool.onScaleWithDrag?(n.drag=t,this.scaleWithDrag(n)):this.scaleOf(n.origin,n.scaleX,n.scaleY)}onRotate(t){const{skewable:e,around:i,rotateGap:s}=this.config,{direction:o,name:n}=t.current;if(e&&"resize-line"===n)return this.onSkew(t);const{element:r,editBox:a}=this;let h,l;if(t instanceof k)l=t.rotation,h=r.getInnerPoint(t);else{const e={x:t.x-t.moveX,y:t.y-t.moveY},s=et.getRotateData(r.boxBounds,o,t.getInner(r),r.getInnerPoint(e),t.shiftKey?null:i||"center");l=s.rotation,h=s.origin}l=x.getGapRotation(l,s,r.rotation),l&&(a.flippedOne&&(l=-l),this.rotateOf(h,l))}onSkew(t){const{element:e}=this,{around:i}=this.config,{origin:s,skewX:o,skewY:n}=et.getSkewData(e.boxBounds,t.current.direction,t.getInnerMove(e),et.getAround(i,t.altKey));(o||n)&&this.skewOf(s,o,n)}move(t,e){const{element:i}=this,s=i.getWorldPointByLocal({x:t,y:e},null,!0),o=new S(S.MOVE,{target:i,editor:this,moveX:s.x,moveY:s.y});this.editTool.onMove(o),this.emitEvent(o),this.multiple&&i.move(t,e)}scaleWithDrag(t){const{element:e}=this,i=e.getWorldPoint(t.origin),s=new T(T.SCALE,Object.assign(Object.assign({},t),{target:e,editor:this,worldOrigin:i}));this.editTool.onScaleWithDrag(s),this.emitEvent(s)}scaleOf(t,e,i=e,s){const{element:o}=this,n=o.getWorldPoint(t);let r;if(this.multiple){const s=Object.assign({},o.localTransform);o.scaleOf(t,e,i),r=new w(o.localTransform).divide(s)}const a=new T(T.SCALE,{target:o,editor:this,worldOrigin:n,scaleX:e,scaleY:i,transform:r});this.editTool.onScale(a),this.emitEvent(a)}rotateOf(t,e){const{element:i}=this,s=i.getWorldPoint(t),o=new O(O.ROTATE,{target:i,editor:this,worldOrigin:s,rotation:e});this.editTool.onRotate(o),this.emitEvent(o),this.multiple&&i.rotateOf(t,e)}skewOf(t,e,i=0,s){const{element:o}=this,n=o.getWorldPoint(t);let r;if(this.multiple){const s=Object.assign({},o.localTransform);o.skewOf(t,e,i),r=new w(o.localTransform).divide(s)}const a=new P(P.SKEW,{target:o,editor:this,skewX:e,skewY:i,transform:r,worldOrigin:n});this.editTool.onSkew(a),this.emitEvent(a)}group(t){return this.multiple&&(this.target=_t.group(this.list,this.element,t)),this.target}ungroup(){return this.list.length&&(this.target=_t.ungroup(this.list)),this.list}lock(){this.list.forEach((t=>t.locked=!0)),this.update()}unlock(){this.list.forEach((t=>t.locked=!1)),this.update()}toTop(){this.list.length&&(_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=[t.on_(m.START,this.update,this),t.on_([b.HOLD,b.UP],(t=>{dt(this,t)})),t.on_(b.DOWN,this.editBox.onArrow,this.editBox)]}}removeTargetEvents(){const{targetEventIds:t}=this;t.length&&(this.off_(t),t.length=0)}destroy(){this.destroyed||(this.simulateTarget.destroy(),this.target=this.hoverTarget=this.simulateTarget=null,super.destroy())}}E([D((function(t,e){t.emitEvent(new L(L.HOVER,{editor:t,value:t.hoverTarget,oldValue:e}))}))],Et.prototype,"hoverTarget",void 0),E([D((function(t,e){const{target:i}=t;i?t.leafList=i instanceof h?i:new h(i):t.leafList.reset(),t.emitEvent(new L(L.SELECT,{editor:t,value:i,oldValue:e})),t.hasTarget?t.waitLeafer((()=>{t.multiple&&function(t){const{simulateTarget:e,leafList:i}=t,{x:s,y:o,width:n,height:r}=(new a).setListWithFn(i.list,(t=>t.worldBoxBounds)),h=e.parent=i.list[0].leafer.zoomLayer,{scaleX:l,scaleY:d,e:c,f:g}=h.__world;e.reset({x:(s-c)/l,y:(o-g)/d,width:n/l,height:r/d})}(t),ct(t),t.updateEditTool(),t.update(),t.listenTargetEvents()})):t.removeTargetEvents()}))],Et.prototype,"target",void 0),_.editor=function(t){return new Et(t)};export{pt as EditBox,et as EditDataHelper,ut as EditPoint,N as EditSelect,K as EditSelectHelper,wt as EditTool,Et as Editor,L as EditorEvent,_t as EditorHelper,S as EditorMoveEvent,O as EditorRotateEvent,T as EditorScaleEvent,P as EditorSkewEvent,xt as LineEditTool,I as SelectArea,M as Stroker};

package/dist/editor.js

@@ -74,8 +74,11 @@ this.LeaferIN.editor = (function (exports, core) {
             const privateKey = '_' + key;
             core.defineKey(target, key, {
                 get() { return this[privateKey]; },
-                set(value) { if (this[privateKey] !== value)
-                    this[privateKey] = value, fn(this); }
+                set(value) {
+                    const old = this[privateKey];
+                    if (old !== value)
+                        this[privateKey] = value, fn(this, old);
+                }
             });
         };
     }
@@ -306,10 +309,12 @@ this.LeaferIN.editor = (function (exports, core) {
                         selectList.push(item); });
                     list.forEach(item => { if (!this.originList.has(item))
                         selectList.push(item); });
-                    editor.target = selectList;
+                    if (selectList.length !== editor.list.length || editor.list.some((child, index) => child !== selectList[index])) {
+                        editor.target = selectList;
+                    }
                 }
                 else {
-                    editor.target = this.originList;
+                    editor.target = this.originList.list;
                     if (editor.leafList.length)
                         editor.update();
                 }
@@ -499,7 +504,7 @@ this.LeaferIN.editor = (function (exports, core) {
             return { origin, skewX, skewY };
         },
         getAround(around, altKey) {
-            return (altKey && !around) ? core.AroundHelper.center : around;
+            return (altKey && !around) ? 'center' : around;
         },
         getRotateDirection(direction, rotation, totalDirection = 8) {
             direction = (direction + Math.round(rotation / (360 / totalDirection))) % totalDirection;
@@ -604,13 +609,13 @@ this.LeaferIN.editor = (function (exports, core) {
             const { width, height } = bounds;
             const { rect, circle, resizePoints, rotatePoints, resizeLines } = this;
             const { middlePoint, resizeable, rotateable, stroke, strokeWidth } = config;
-            const points = this.getDirection8Points(bounds);
             const pointsStyle = this.getPointsStyle();
             const middlePointsStyle = this.getMiddlePointsStyle();
             this.visible = list[0] && !list[0].locked;
-            let point, style, rotateP, resizeP, resizeL;
+            let point = {}, style, rotateP, resizeP, resizeL;
             for (let i = 0; i < 8; i++) {
-                point = points[i], style = this.getPointStyle((i % 2) ? middlePointsStyle[((i - 1) / 2) % middlePointsStyle.length] : pointsStyle[(i / 2) % pointsStyle.length]);
+                core.AroundHelper.toPoint(core.AroundHelper.directionData[i], bounds, point);
+                style = this.getPointStyle((i % 2) ? middlePointsStyle[((i - 1) / 2) % middlePointsStyle.length] : pointsStyle[(i / 2) % pointsStyle.length]);
                 resizeP = resizePoints[i], rotateP = rotatePoints[i], resizeL = resizeLines[Math.floor(i / 2)];
                 resizeP.set(style);
                 resizeP.set(point), rotateP.set(point), resizeL.set(point);
@@ -682,19 +687,6 @@ this.LeaferIN.editor = (function (exports, core) {
             const { middlePoint } = this.editor.config;
             return middlePoint instanceof Array ? middlePoint : (middlePoint ? [middlePoint] : this.getPointsStyle());
         }
-        getDirection8Points(bounds) {
-            const { x, y, width, height } = bounds;
-            return [
-                { x, y },
-                { x: x + width / 2, y },
-                { x: x + width, y },
-                { x: x + width, y: y + height / 2 },
-                { x: x + width, y: y + height },
-                { x: x + width / 2, y: y + height },
-                { x, y: y + height },
-                { x, y: y + height / 2 }
-            ];
-        }
         onDragStart(e) {
             this.dragging = true;
             if (e.target.name === 'rect')
@@ -940,7 +932,7 @@ this.LeaferIN.editor = (function (exports, core) {
         simulateTarget.reset({ x: (x - worldX) / scaleX, y: (y - worldY) / scaleY, width: width / scaleX, height: height / scaleY });
     }
 
-    function onTarget(editor) {
+    function onTarget(editor, oldValue) {
         const { target } = editor;
         if (target) {
             editor.leafList = target instanceof core.LeafList ? target : new core.LeafList(target instanceof Array ? target : target);
@@ -948,7 +940,7 @@ this.LeaferIN.editor = (function (exports, core) {
         else {
             editor.leafList.reset();
         }
-        editor.emitEvent(new EditorEvent(EditorEvent.SELECT, { editor }));
+        editor.emitEvent(new EditorEvent(EditorEvent.SELECT, { editor, value: target, oldValue }));
         if (editor.hasTarget) {
             editor.waitLeafer(() => {
                 if (editor.multiple)
@@ -963,8 +955,8 @@ this.LeaferIN.editor = (function (exports, core) {
             editor.removeTargetEvents();
         }
     }
-    function onHover(editor) {
-        editor.emitEvent(new EditorEvent(EditorEvent.HOVER, { editor }));
+    function onHover(editor, oldValue) {
+        editor.emitEvent(new EditorEvent(EditorEvent.HOVER, { editor, value: editor.hoverTarget, oldValue }));
     }
 
     const order = (a, b) => a.parent.children.indexOf(a) - b.parent.children.indexOf(b);
@@ -1010,44 +1002,15 @@ this.LeaferIN.editor = (function (exports, core) {
         toTop(list) {
             list.sort(order);
             list.forEach(leaf => {
-                let zIndex;
-                const { parent } = leaf;
-                if (parent) {
-                    const { children } = parent;
-                    const top = children.length - 1;
-                    const zIndexOfTop = children[top].__.zIndex;
-                    const current = children.indexOf(leaf);
-                    if (current !== top) {
-                        children.splice(current, 1);
-                        children.push(leaf);
-                        zIndex = zIndexOfTop + 1;
-                    }
-                    else {
-                        zIndex = zIndexOfTop;
-                    }
-                    leaf.zIndex = zIndex;
-                }
+                if (leaf.parent)
+                    leaf.parent.add(leaf);
             });
         },
         toBottom(list) {
             list.sort(reverseOrder);
             list.forEach(leaf => {
-                let zIndex;
-                const { parent } = leaf;
-                if (parent) {
-                    const { children } = parent;
-                    const zIndexOfBottom = children[0].__.zIndex;
-                    const current = children.indexOf(leaf);
-                    if (current !== 0) {
-                        children.splice(current, 1);
-                        children.unshift(leaf);
-                        zIndex = zIndexOfBottom - 1;
-                    }
-                    else {
-                        zIndex = zIndexOfBottom;
-                    }
-                    leaf.zIndex = zIndex;
-                }
+                if (leaf.parent)
+                    leaf.parent.addAt(leaf, 0);
             });
         }
     };
@@ -1208,13 +1171,15 @@ this.LeaferIN.editor = (function (exports, core) {
             this.editTool.onSkew(event);
             this.emitEvent(event);
         }
-        group() {
+        group(group) {
             if (this.multiple)
-                this.target = EditorHelper.group(this.list, this.element);
+                this.target = EditorHelper.group(this.list, this.element, group);
+            return this.target;
         }
         ungroup() {
             if (this.list.length)
                 this.target = EditorHelper.ungroup(this.list);
+            return this.list;
         }
         lock() {
             this.list.forEach(leaf => leaf.locked = true);

package/dist/editor.min.js

@@ -1 +1 @@
-this.LeaferIN=this.LeaferIN||{},this.LeaferIN.editor=function(t,e){"use strict";function i(t,e,i,s){var o,n=arguments.length,r=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,s);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(r=(n<3?o(r):n>3?o(e,i,r):o(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r}"function"==typeof SuppressedError&&SuppressedError;class s extends e.Event{constructor(t,e){super(t),e&&Object.assign(this,e)}}s.SELECT="editor.select",s.HOVER="editor.hover";class o extends s{constructor(t,e){super(t,e)}}o.MOVE="editor.move";class n extends s{constructor(t,e){super(t,e)}}n.SCALE="editor.scale";class r extends s{constructor(t,e){super(t,e)}}r.ROTATE="editor.rotate";class a extends s{constructor(t,e){super(t,e)}}function h(t){return(i,s)=>{const o="_"+s;e.defineKey(i,s,{get(){return this[o]},set(e){this[o]!==e&&(this[o]=e,t(this))}})}}a.SKEW="editor.skew";const l=e.MatrixHelper.get(),{abs:d}=Math,{copy:c,scale:g}=e.MatrixHelper;class u extends e.UI{constructor(){super(),this.list=[],this.hittable=!1,this.strokeAlign="center"}setTarget(t,e){const{stroke:i,strokeWidth:s}=e;this.set({stroke:i,strokeWidth:s}),this.target=t}__draw(t,i){const{list:s}=this;if(s.length){let o;const{stroke:n,strokeWidth:r}=this.__,{bounds:a}=i;for(let h=0;h<s.length;h++)if(o=s[h],a&&a.hit(o.__world,i.matrix)){let s;if("scale"===o.__.editSize){const e=d(o.__world.scaleX),n=d(o.__world.scaleY);if(e!==n){c(l,o.__world),g(l,1/e,1/n),t.setWorld(l,i.matrix),t.beginPath(),this.__.strokeWidth=r;const{x:a,y:h,width:d,height:u}=o.__layout.boxBounds;t.rect(a*e,h*n,d*e,u*n),s=!0}}s||(t.setWorld(o.__world,i.matrix),t.beginPath(),o.__.__pathForRender?o.__drawRenderPath(t):o.__drawPathByBox(t),this.__.strokeWidth=r/d(o.__world.scaleX)),"string"==typeof n?e.Paint.stroke(n,this,t,i):e.Paint.strokes(n,this,t,i)}this.__.strokeWidth=r}}destroy(){this.target=null,super.destroy()}}i([h((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:s,strokeWidth:o}=t;this.visible=i,this.strokeArea.reset(Object.assign({stroke:s,strokeWidth:o},e||{})),this.fillArea.reset({visible:!e,fill:s,opacity:.2})}setBounds(t){this.strokeArea.set(t),this.fillArea.set(t)}}var p;!function(t){t[t.No=0]="No",t[t.Yes=1]="Yes",t[t.NoAndSkip=2]="NoAndSkip",t[t.YesAndSkip=3]="YesAndSkip"}(p||(p={}));const{No:y,Yes:v,NoAndSkip:x,YesAndSkip:w}=p,E={findOne:t=>t.list.find((t=>t.editable)),findBounds(t,e){if(t.__.hittable&&!t.__.locked&&e.hit(t.__world)){if(t.__.editable){if(t.isBranch&&!t.__.hitChildren)return t.__.hitSelf?w:x;if(t.isFrame)return e.includes(t.__layout.boxBounds,t.__world)?w:y;if(e.hit(t.__layout.boxBounds,t.__world)&&t.__.hitSelf)return v}return y}return t.isBranch?x:y}},{findOne:k}=E;class _ extends e.Group{get dragging(){return!!this.originList}get running(){return this.editor.hittable&&this.editor.config.selector}get isMoveMode(){return this.app&&this.app.interaction.moveMode}constructor(t){super(),this.hoverStroker=new 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:s}=t.config;this.hoverStroker.setTarget(s?this.editor.hoverTarget:null,{stroke:e,strokeWidth:i})}}onSelect(){if(this.running){const{config:t,list:e}=this.editor,{stroke:i,strokeWidth:s}=t;this.targetStroker.setTarget(e,{stroke:i,strokeWidth:Math.max(1,s/2)}),this.hoverStroker.target=null}}update(){this.running&&this.targetStroker.forceUpdate()}onPointerMove(t){if(this.running&&!this.isMoveMode){const e=t.shiftKey?this.findDeepOne(t):k(t.path);this.editor.hoverTarget=this.editor.hasItem(e)?null:e}this.isMoveMode&&(this.editor.hoverTarget=null)}onBeforeDown(t){if(this.running&&!this.isMoveMode&&!t.middle){const e=this.lastDownLeaf=k(t.path);e?(t.shiftKey?this.editor.shiftItem(e):this.editor.target=e,this.editor.updateLayout(),e.leafer.interaction.updateDownData()):this.allow(t.target)&&(t.shiftKey||(this.editor.target=null))}}onTap(t){if(this.running&&t.shiftKey&&!t.middle&&!this.lastDownLeaf){const e=this.findDeepOne(t);e&&this.editor.shiftItem(e)}else this.isMoveMode&&(this.editor.target=null);this.lastDownLeaf=null}onDragStart(t){if(this.running&&this.allowDrag(t)){const{editor:e}=this,{stroke:i,strokeWidth:s,area:o}=e.config,{x:n,y:r}=t.getInner(this);this.bounds.set(n,r),this.selectArea.setStyle({visible:!0,stroke:i,strokeWidth:s,x:n,y:r},o),this.selectArea.setBounds(this.bounds.get()),this.originList=e.leafList.clone()}}onDrag(t){if(this.editor.dragging)this.onDragEnd();else if(this.dragging){const{editor:i}=this,s=t.getInnerTotal(this),o=this.bounds.clone().unsign(),n=new e.LeafList(i.app.find(E.findBounds,o));if(this.bounds.width=s.x,this.bounds.height=s.y,this.selectArea.setBounds(o.get()),n.length){const t=[];this.originList.forEach((e=>{n.has(e)||t.push(e)})),n.forEach((e=>{this.originList.has(e)||t.push(e)})),i.target=t}else i.target=this.originList,i.leafList.length&&i.update()}}onDragEnd(){this.dragging&&(this.originList=null,this.selectArea.visible=!1)}onAutoMove(t){if(this.dragging){const{x:e,y:i}=t.getLocalMove(this);this.bounds.x+=e,this.bounds.y+=i}}allow(t){return t.leafer!==this.editor.leafer}allowDrag(t){return!(!this.editor.config.boxSelect||t.target.draggable)&&(!this.editor.hasTarget&&this.allow(t.target)||t.shiftKey&&!k(t.path))}findDeepOne(t){const i={exclude:new e.LeafList(this.editor.editBox.rect)};return k(t.target.leafer.interaction.findPath(t,i))}__listenEvents(){const{editor:t}=this;t.waitLeafer((()=>{const{app:i}=t;i.selector.proxy=t,this.__eventIds=[t.on_(s.HOVER,this.onHover,this),t.on_(s.SELECT,this.onSelect,this),i.on_(e.PointerEvent.MOVE,this.onPointerMove,this),i.on_(e.PointerEvent.BEFORE_DOWN,this.onBeforeDown,this),i.on_(e.PointerEvent.TAP,this.onTap,this),i.on_(e.DragEvent.START,this.onDragStart,this),i.on_(e.DragEvent.DRAG,this.onDrag,this),i.on_(e.DragEvent.END,this.onDragEnd,this),i.on_(e.MoveEvent.MOVE,this.onAutoMove,this),i.on_([e.ZoomEvent.ZOOM,e.MoveEvent.MOVE],(()=>{this.editor.hoverTarget=null}))]}))}__removeListenEvents(){this.__eventIds&&(this.off_(this.__eventIds),this.__eventIds.length=0)}destroy(){this.editor=this.originList=this.lastDownLeaf=null,this.__removeListenEvents(),super.destroy()}}var m;!function(t){t[t.topLeft=0]="topLeft",t[t.top=1]="top",t[t.topRight=2]="topRight",t[t.right=3]="right",t[t.bottomRight=4]="bottomRight",t[t.bottom=5]="bottom",t[t.bottomLeft=6]="bottomLeft",t[t.left=7]="left"}(m||(m={}));const{topLeft:b,top:L,topRight:S,right:T,bottomRight:P,bottom:D,bottomLeft:O,left:A}=m,{toPoint:M}=e.AroundHelper,R={getScaleData(t,e,i,s,o){let n,r=1,a=1;const{width:h,height:l}=t;o&&(i.x*=2,i.y*=2);const d=(-i.y+l)/l,c=(i.x+h)/h,g=(i.y+l)/l,u=(-i.x+h)/h;switch(e){case L:a=d,n={x:.5,y:1};break;case T:r=c,n={x:0,y:.5};break;case D:a=g,n={x:.5,y:0};break;case A:r=u,n={x:1,y:.5};break;case b:a=d,r=u,n={x:1,y:1};break;case S:a=d,r=c,n={x:0,y:1};break;case P:a=g,r=c,n={x:0,y:0};break;case O:a=g,r=u,n={x:1,y:0}}return s&&(1!==r?a=r:r=a),M(o||n,t,n),{origin:n,scaleX:r,scaleY:a,direction:e,lockRatio:s,around:o}},getRotateData(t,i,s,o,n){let r;switch(i){case b:r={x:1,y:1};break;case S:r={x:0,y:1};break;case P:r={x:0,y:0};break;case O:r={x:1,y:0};break;default:r={x:.5,y:.5}}return M(n||r,t,r),{origin:r,rotation:e.PointHelper.getRotation(o,r,s)}},getSkewData(t,i,s,o){let n,r,a=0,h=0;switch(i){case L:r={x:.5,y:0},n={x:.5,y:1},a=1;break;case D:r={x:.5,y:1},n={x:.5,y:0},a=1;break;case A:r={x:0,y:.5},n={x:1,y:.5},h=1;break;case T:r={x:1,y:.5},n={x:0,y:.5},h=1}const{x:l,y:d,width:c,height:g}=t;r.x=l+r.x*c,r.y=d+r.y*g,M(o||n,t,n);const u=e.PointHelper.getRotation(r,n,{x:r.x+(a?s.x:0),y:r.y+(h?s.y:0)});return a?a=-u:h=u,{origin:n,skewX:a,skewY:h}},getAround:(t,i)=>i&&!t?e.AroundHelper.center:t,getRotateDirection:(t,e,i=8)=>((t=(t+Math.round(e/(360/i)))%i)<0&&(t+=i),t)},{topLeft:z,top:B,topRight:I,right:W,bottomRight:Y,bottom:X,bottomLeft:K,left:C}=m;function F(t,e){const{editBox:i}=t,s=i.enterPoint;if(!s||!t.hasTarget||!i.visible)return;let{rotation:o}=i,{resizeCursor:n,rotateCursor:r,resizeable:a,rotateable:h}=t.config;const{direction:l,pointType:d}=s;i.enterPoint=s;const c="resize"===d;if(c&&h&&(e.metaKey||e.ctrlKey||!a)&&(n=r),i.flipped){const{flippedX:t,flippedY:e}=i;N(n=[...n],t,e),N(r=[...r],e,t),i.flippedOne&&(o=-o)}const g=R.getRotateDirection(l,o);s.cursor=c?n[g]:r[g]}function H(t){t.editBox.rect.cursor=t.config.moveCursor}function N(t,e,i){if(e){const e=t[B],i=t[z],s=t[I];t[B]=t[X],t[z]=t[K],t[I]=t[Y],t[X]=e,t[K]=i,t[Y]=s}if(i){const e=t[C],i=t[z],s=t[K];t[C]=t[W],t[z]=t[I],t[K]=t[Y],t[W]=e,t[I]=i,t[Y]=s}}class j extends e.Box{}const G=["top","right","bottom","left"];class V 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.rect=new e.Box({name:"rect",hitFill:"all",hitStroke:"none",strokeAlign:"center",hitRadius:5}),this.circle=new j({name:"circle",strokeAlign:"outside",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{resizePoints:s,rotatePoints:o,resizeLines:n,rect:r,circle:a,buttons:h}=this,l=[{x:1,y:1},{x:.5,y:1},{x:0,y:1},{x:0,y:.5},{x:0,y:0},{x:.5,y:0},{x:1,y:0},{x:1,y:.5}];for(let r=0;r<8;r++)t=new j({around:l[r],width:15,height:15,hitFill:"all"}),o.push(t),this.listenPointEvents(t,"rotate",r),r%2&&(e=new j({name:"resize-line",around:"center",width:10,height:10,hitFill:"all"}),n.push(e),this.listenPointEvents(e,"resize",r)),i=new j({name:"resize-point",around:"center",strokeAlign:"outside",hitRadius:5}),s.push(i),this.listenPointEvents(i,"resize",r);h.add(a),this.listenPointEvents(a,"rotate",2),this.addMany(...o,r,h,...n,...s)}update(t){const{config:e,list:i}=this.editor,{width:s,height:o}=t,{rect:n,circle:r,resizePoints:a,rotatePoints:h,resizeLines:l}=this,{middlePoint:d,resizeable:c,rotateable:g,stroke:u,strokeWidth:f}=e,p=this.getDirection8Points(t),y=this.getPointsStyle(),v=this.getMiddlePointsStyle();let x,w,E,k,_;this.visible=i[0]&&!i[0].locked;for(let t=0;t<8;t++)x=p[t],w=this.getPointStyle(t%2?v[(t-1)/2%v.length]:y[t/2%y.length]),k=a[t],E=h[t],_=l[Math.floor(t/2)],k.set(w),k.set(x),E.set(x),_.set(x),k.visible=_.visible=c||g,E.visible=g&&c,t%2?(k.visible=E.visible=!!d,(t+1)/2%2?(_.width=s,k.width>s-30&&(k.visible=!1)):(_.height=o,k.rotation=90,k.width>o-30&&(k.visible=!1))):k.rotation=t/2*90;r.visible=g&&!!e.rotatePoint,r.set(this.getPointStyle(e.rotatePoint||y[0])),n.set(Object.assign({stroke:u,strokeWidth:f},e.rect||{})),n.set(Object.assign(Object.assign({},t),{visible:!0})),this.layoutButtons()}layoutButtons(){const{buttons:t,resizePoints:e}=this,{buttonsDirection:i,buttonsFixed:s,buttonsMargin:o,middlePoint:n}=this.editor.config,{flippedX:r,flippedY:a}=this;let h=G.indexOf(i);(h%2&&r||(h+1)%2&&a)&&s&&(h=(h+2)%4);const l=s?R.getRotateDirection(h,this.flippedOne?this.rotation:-this.rotation,4):h,d=e[2*l+1],c=l%2,g=l&&3!==l?1:-1,u=(o+(h%2?(n?d.width:0)+t.boxBounds.width:(n?d.height:0)+t.boxBounds.height)/2)*g;c?(t.x=d.x+u,t.y=d.y):(t.x=d.x,t.y=d.y+u),s&&(t.rotation=90*(l-h),t.scaleX=r?-1:1,t.scaleY=a?-1:1)}getPointStyle(t){const{stroke:e,strokeWidth:i,pointFill:s,pointSize:o,pointRadius:n}=this.editor.config,r={fill:s,stroke:e,strokeWidth:i,width:o,height:o,cornerRadius:n};return t?Object.assign(r,t):r}getPointsStyle(){const{point:t}=this.editor.config;return t instanceof Array?t:[t]}getMiddlePointsStyle(){const{middlePoint:t}=this.editor.config;return t instanceof Array?t:t?[t]:this.getPointsStyle()}getDirection8Points(t){const{x:e,y:i,width:s,height:o}=t;return[{x:e,y:i},{x:e+s/2,y:i},{x:e+s,y:i},{x:e+s,y:i+o/2},{x:e+s,y:i+o},{x:e+s/2,y:i+o},{x:e,y:i+o},{x:e,y:i+o/2}]}onDragStart(t){this.dragging=!0,"rect"===t.target.name&&(this.editor.opacity=this.editor.config.hideOnMove?0:1)}onDragEnd(t){this.dragging=!1,"rect"===t.target.name&&(this.editor.opacity=1)}onDrag(t){const{editor:e}=this;"rotate"===t.current.pointType||t.metaKey||t.ctrlKey||!e.config.resizeable?e.config.rotateable&&e.onRotate(t):e.onScale(t)}onArrow(t){if(this.editor.hasTarget){const e={x:0,y:0},i=t.shiftKey?10:1;switch(t.code){case"ArrowDown":e.y=i;break;case"ArrowUp":e.y=-i;break;case"ArrowLeft":e.x=-i;break;case"ArrowRight":e.x=i}(e.x||e.y)&&this.editor.move(e.x,e.y)}}onDoubleClick(){const{editor:t}=this;t.single&&t.element.isBranch}listenPointEvents(t,i,s){const{editor:o}=this;t.direction=s,t.pointType=i,t.on_(e.DragEvent.START,this.onDragStart,this),t.on_(e.DragEvent.DRAG,this.onDrag,this),t.on_(e.DragEvent.END,this.onDragEnd,this),t.on_(e.PointerEvent.LEAVE,(()=>this.enterPoint=null)),"circle"!==t.name&&t.on_(e.PointerEvent.ENTER,(e=>{this.enterPoint=t,F(o,e)}))}__listenEvents(){const{rect:t,editor:i}=this;this.__eventIds=[i.on_(s.SELECT,(()=>{this.visible=i.hasTarget})),t.on_(e.DragEvent.START,this.onDragStart,this),t.on_(e.DragEvent.DRAG,i.onMove,i),t.on_(e.DragEvent.END,this.onDragEnd,this),t.on_(e.PointerEvent.ENTER,(()=>H(i))),t.on_(e.PointerEvent.DOUBLE_CLICK,this.onDoubleClick,this)]}__removeListenEvents(){this.off_(this.__eventIds),this.__eventIds.length=0}destroy(){this.editor=null,this.__removeListenEvents(),super.destroy()}}const U={editSize:"auto",stroke:"#836DFF",strokeWidth:2,pointFill:"#FFFFFF",pointSize:8,pointRadius:16,rotateGap:45,buttonsDirection:"bottom",buttonsMargin:12,moveCursor:"move",resizeCursor:["nwse-resize","ns-resize","nesw-resize","ew-resize","nwse-resize","ns-resize","nesw-resize","ew-resize"],rotateCursor:["ne-resize","e-resize","se-resize","s-resize","sw-resize","w-resize","nw-resize","n-resize"],selector:!0,hover:!0,boxSelect:!0,resizeable:!0,rotateable:!0,skewable:!0};class Z{constructor(){this.tag="EditTool"}onMove(t){const{moveX:e,moveY:i,editor:s}=t,{app:o,list:n}=s;o.lockLayout(),n.forEach((t=>{const s=t.getLocalPoint({x:e,y:i},null,!0);t.move(s.x,s.y)})),o.unlockLayout()}onScale(t){const{scaleX:e,scaleY:i,transform:s,worldOrigin:o,editor:n}=t,{app:r,list:a}=n;r.lockLayout(),a.forEach((t=>{const r="size"===n.getEditSize(t);s?t.transform(s,r):t.scaleOf(t.getInnerPoint(o),e,i,r)})),r.unlockLayout()}onRotate(t){const{rotation:e,worldOrigin:i,editor:s}=t,{app:o,list:n}=s;o.lockLayout(),n.forEach((t=>{t.rotateOf(t.getInnerPoint(i),e)})),o.unlockLayout()}onSkew(t){const{skewX:e,skewY:i,transform:s,worldOrigin:o,editor:n}=t,{app:r,list:a}=n;r.lockLayout(),a.forEach((t=>{const r="size"===n.getEditSize(t);s?t.transform(s,r):t.skewOf(t.getInnerPoint(o),e,i,r)})),r.unlockLayout()}update(t){const{simulateTarget:e,element:i}=t;t.multiple&&e.parent.updateLayout();const{x:s,y:o,scaleX:n,scaleY:r,rotation:a,skewX:h,skewY:l,width:d,height:c}=i.getLayoutBounds("box",t,!0);t.editBox.set({x:s,y:o,scaleX:n,scaleY:r,rotation:a,skewX:h,skewY:l}),t.editBox.update({x:0,y:0,width:d,height:c})}}Z.list=[];const{left:q,right:J}=m;class Q extends Z{constructor(){super(...arguments),this.tag="LineEditTool",this.scaleOfEvent=!0}onScaleWithDrag(t){const{drag:e,direction:i,lockRatio:s,around:o}=t,n=t.target,r={x:0,y:0},{toPoint:a}=n;n.rotation=0;let{x:h,y:l}=e.getInnerMove(n);s&&(Math.abs(h)>Math.abs(l)?l=0:h=0),i===q?(r.x+=h,r.y+=l,o&&(a.x-=h,a.y-=l)):(o&&(r.x-=h,r.y-=l),a.x+=h,a.y+=l),n.getLocalPointByInner(r,null,null,!0),n.getLocalPointByInner(a,null,null,!0),n.x=r.x,n.y=r.y,n.getInnerPointByLocal(a,null,null,!0),n.toPoint=a}onSkew(t){}update(t){const{rotatePoints:e,resizeLines:i,resizePoints:s}=t.editBox;super.update(t);for(let t=0;t<8;t++)t<4&&(i[t].visible=!1),s[t].visible=e[t].visible=t===q||t===J}}const $=(t,e)=>t.parent.children.indexOf(t)-e.parent.children.indexOf(e),tt=(t,e)=>e.parent.children.indexOf(e)-t.parent.children.indexOf(t),et={group(t,i,s){t.sort(tt);const{app:o,parent:n}=t[0];s||(s=new e.Group),n.addAt(s,n.children.indexOf(t[0])),t.sort($);const r=new e.Matrix(i.worldTransform);return r.divideParent(n.worldTransform),s.setTransform(r),s.editable=!0,s.hitChildren=!1,o.lockLayout(),t.forEach((t=>t.dropTo(s))),o.unlockLayout(),s},ungroup(t){const{app:e}=t[0],i=[];return e.lockLayout(),t.forEach((t=>{if(t.isBranch){const{parent:e,children:s}=t;for(;s.length;)i.push(s[0]),s[0].dropTo(e,e.children.indexOf(t));t.remove()}else i.push(t)})),e.unlockLayout(),i},toTop(t){t.sort($),t.forEach((t=>{let e;const{parent:i}=t;if(i){const{children:s}=i,o=s.length-1,n=s[o].__.zIndex,r=s.indexOf(t);r!==o?(s.splice(r,1),s.push(t),e=n+1):e=n,t.zIndex=e}}))},toBottom(t){t.sort(tt),t.forEach((t=>{let e;const{parent:i}=t;if(i){const{children:s}=i,o=s[0].__.zIndex,n=s.indexOf(t);0!==n?(s.splice(n,1),s.unshift(t),e=o-1):e=o,t.zIndex=e}}))}};class it extends e.Group{get list(){return this.leafList.list}get hasTarget(){return!!this.list.length}get multiple(){return this.list.length>1}get single(){return 1===this.list.length}get element(){return this.multiple?this.simulateTarget:this.list[0]}get buttons(){return this.editBox.buttons}get dragging(){return this.editBox.dragging}constructor(t,i){super(i),this.config=U,this.leafList=new e.LeafList,this.simulateTarget=new e.Rect({visible:!1}),this.editBox=new V(this),this.selector=new _(this),this.targetEventIds=[],t&&(this.config=e.DataHelper.default(t,this.config)),this.addMany(this.selector,this.editBox)}hasItem(t){return this.leafList.has(t)}addItem(t){this.hasItem(t)||t.locked||(this.leafList.add(t),this.target=this.leafList.list)}removeItem(t){this.hasItem(t)&&(this.leafList.remove(t),this.target=this.leafList.list)}shiftItem(t){this.hasItem(t)?this.removeItem(t):this.addItem(t)}update(){this.target&&(this.editTool.update(this),this.selector.update())}updateEditTool(){this.editTool=function(t){if(1===t.length){const i=t[0];return i instanceof e.Line&&!i.points?new Q:new Z}return new Z}(this.list)}getEditSize(t){let{editSize:e}=this.config;return"auto"===e?t.editSize:e}onMove(t){const e=t.getLocalMove(this.element);t.shiftKey&&(Math.abs(e.x)>Math.abs(e.y)?e.y=0:e.x=0),this.move(e.x,e.y)}onScale(t){const{element:e}=this,{direction:i}=t.current;let{around:s,lockRatio:o}=this.config;t.shiftKey&&(o=!0);const n=R.getScaleData(e.boxBounds,i,t.getInnerMove(e),o,R.getAround(s,t.altKey));this.editTool.onScaleWithDrag?(n.drag=t,this.scaleWithDrag(n)):this.scaleOf(n.origin,n.scaleX,n.scaleY)}onRotate(t){const{skewable:i,around:s,rotateGap:o}=this.config,{direction:n,name:r}=t.current;if(i&&"resize-line"===r)return this.onSkew(t);const{element:a,editBox:h}=this;let l,d;if(t instanceof e.RotateEvent)d=t.rotation,l=a.getInnerPoint(t);else{const e={x:t.x-t.moveX,y:t.y-t.moveY},i=R.getRotateData(a.boxBounds,n,t.getInner(a),a.getInnerPoint(e),t.shiftKey?null:s||"center");d=i.rotation,l=i.origin}d=e.MathHelper.getGapRotation(d,o,a.rotation),d&&(h.flippedOne&&(d=-d),this.rotateOf(l,d))}onSkew(t){const{element:e}=this,{around:i}=this.config,{origin:s,skewX:o,skewY:n}=R.getSkewData(e.boxBounds,t.current.direction,t.getInnerMove(e),R.getAround(i,t.altKey));(o||n)&&this.skewOf(s,o,n)}move(t,e){const{element:i}=this,s=i.getWorldPointByLocal({x:t,y:e},null,!0),n=new o(o.MOVE,{target:i,editor:this,moveX:s.x,moveY:s.y});this.editTool.onMove(n),this.emitEvent(n),this.multiple&&i.move(t,e)}scaleWithDrag(t){const{element:e}=this,i=e.getWorldPoint(t.origin),s=new n(n.SCALE,Object.assign(Object.assign({},t),{target:e,editor:this,worldOrigin:i}));this.editTool.onScaleWithDrag(s),this.emitEvent(s)}scaleOf(t,i,s=i,o){const{element:r}=this,a=r.getWorldPoint(t);let h;if(this.multiple){const o=Object.assign({},r.localTransform);r.scaleOf(t,i,s),h=new e.Matrix(r.localTransform).divide(o)}const l=new n(n.SCALE,{target:r,editor:this,worldOrigin:a,scaleX:i,scaleY:s,transform:h});this.editTool.onScale(l),this.emitEvent(l)}rotateOf(t,e){const{element:i}=this,s=i.getWorldPoint(t),o=new r(r.ROTATE,{target:i,editor:this,worldOrigin:s,rotation:e});this.editTool.onRotate(o),this.emitEvent(o),this.multiple&&i.rotateOf(t,e)}skewOf(t,i,s=0,o){const{element:n}=this,r=n.getWorldPoint(t);let h;if(this.multiple){const o=Object.assign({},n.localTransform);n.skewOf(t,i,s),h=new e.Matrix(n.localTransform).divide(o)}const l=new a(a.SKEW,{target:n,editor:this,skewX:i,skewY:s,transform:h,worldOrigin:r});this.editTool.onSkew(l),this.emitEvent(l)}group(){this.multiple&&(this.target=et.group(this.list,this.element))}ungroup(){this.list.length&&(this.target=et.ungroup(this.list))}lock(){this.list.forEach((t=>t.locked=!0)),this.update()}unlock(){this.list.forEach((t=>t.locked=!1)),this.update()}toTop(){this.list.length&&(et.toTop(this.list),this.leafList.update())}toBottom(){this.list.length&&(et.toBottom(this.list),this.leafList.update())}listenTargetEvents(){if(!this.targetEventIds.length){const{leafer:t}=this.list[0];this.targetEventIds=[t.on_(e.RenderEvent.START,this.update,this),t.on_([e.KeyEvent.HOLD,e.KeyEvent.UP],(t=>{F(this,t)})),t.on_(e.KeyEvent.DOWN,this.editBox.onArrow,this.editBox)]}}removeTargetEvents(){const{targetEventIds:t}=this;t.length&&(this.off_(t),t.length=0)}destroy(){this.destroyed||(this.simulateTarget.destroy(),this.target=this.hoverTarget=this.simulateTarget=null,super.destroy())}}return i([h((function(t){t.emitEvent(new s(s.HOVER,{editor:t}))}))],it.prototype,"hoverTarget",void 0),i([h((function(t){const{target:i}=t;i?t.leafList=i instanceof e.LeafList?i:new e.LeafList(i):t.leafList.reset(),t.emitEvent(new s(s.SELECT,{editor:t})),t.hasTarget?t.waitLeafer((()=>{t.multiple&&function(t){const{simulateTarget:i,leafList:s}=t,{x:o,y:n,width:r,height:a}=(new e.Bounds).setListWithFn(s.list,(t=>t.worldBoxBounds)),h=i.parent=s.list[0].leafer.zoomLayer,{scaleX:l,scaleY:d,e:c,f:g}=h.__world;i.reset({x:(o-c)/l,y:(n-g)/d,width:r/l,height:a/d})}(t),H(t),t.updateEditTool(),t.update(),t.listenTargetEvents()})):t.removeTargetEvents()}))],it.prototype,"target",void 0),e.Creator.editor=function(t){return new it(t)},t.EditBox=V,t.EditDataHelper=R,t.EditPoint=j,t.EditSelect=_,t.EditSelectHelper=E,t.EditTool=Z,t.Editor=it,t.EditorEvent=s,t.EditorHelper=et,t.EditorMoveEvent=o,t.EditorRotateEvent=r,t.EditorScaleEvent=n,t.EditorSkewEvent=a,t.LineEditTool=Q,t.SelectArea=f,t.Stroker=u,t}({},LeaferUI);
+this.LeaferIN=this.LeaferIN||{},this.LeaferIN.editor=function(t,e){"use strict";function i(t,e,i,s){var o,n=arguments.length,r=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,s);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(r=(n<3?o(r):n>3?o(e,i,r):o(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r}"function"==typeof SuppressedError&&SuppressedError;class s extends e.Event{constructor(t,e){super(t),e&&Object.assign(this,e)}}s.SELECT="editor.select",s.HOVER="editor.hover";class o extends s{constructor(t,e){super(t,e)}}o.MOVE="editor.move";class n extends s{constructor(t,e){super(t,e)}}n.SCALE="editor.scale";class r extends s{constructor(t,e){super(t,e)}}r.ROTATE="editor.rotate";class a extends s{constructor(t,e){super(t,e)}}function h(t){return(i,s)=>{const o="_"+s;e.defineKey(i,s,{get(){return this[o]},set(e){const i=this[o];i!==e&&(this[o]=e,t(this,i))}})}}a.SKEW="editor.skew";const l=e.MatrixHelper.get(),{abs:d}=Math,{copy:c,scale:g}=e.MatrixHelper;class u extends e.UI{constructor(){super(),this.list=[],this.hittable=!1,this.strokeAlign="center"}setTarget(t,e){const{stroke:i,strokeWidth:s}=e;this.set({stroke:i,strokeWidth:s}),this.target=t}__draw(t,i){const{list:s}=this;if(s.length){let o;const{stroke:n,strokeWidth:r}=this.__,{bounds:a}=i;for(let h=0;h<s.length;h++)if(o=s[h],a&&a.hit(o.__world,i.matrix)){let s;if("scale"===o.__.editSize){const e=d(o.__world.scaleX),n=d(o.__world.scaleY);if(e!==n){c(l,o.__world),g(l,1/e,1/n),t.setWorld(l,i.matrix),t.beginPath(),this.__.strokeWidth=r;const{x:a,y:h,width:d,height:u}=o.__layout.boxBounds;t.rect(a*e,h*n,d*e,u*n),s=!0}}s||(t.setWorld(o.__world,i.matrix),t.beginPath(),o.__.__pathForRender?o.__drawRenderPath(t):o.__drawPathByBox(t),this.__.strokeWidth=r/d(o.__world.scaleX)),"string"==typeof n?e.Paint.stroke(n,this,t,i):e.Paint.strokes(n,this,t,i)}this.__.strokeWidth=r}}destroy(){this.target=null,super.destroy()}}i([h((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:s,strokeWidth:o}=t;this.visible=i,this.strokeArea.reset(Object.assign({stroke:s,strokeWidth:o},e||{})),this.fillArea.reset({visible:!e,fill:s,opacity:.2})}setBounds(t){this.strokeArea.set(t),this.fillArea.set(t)}}var p;!function(t){t[t.No=0]="No",t[t.Yes=1]="Yes",t[t.NoAndSkip=2]="NoAndSkip",t[t.YesAndSkip=3]="YesAndSkip"}(p||(p={}));const{No:v,Yes:y,NoAndSkip:w,YesAndSkip:x}=p,E={findOne:t=>t.list.find((t=>t.editable)),findBounds(t,e){if(t.__.hittable&&!t.__.locked&&e.hit(t.__world)){if(t.__.editable){if(t.isBranch&&!t.__.hitChildren)return t.__.hitSelf?x:w;if(t.isFrame)return e.includes(t.__layout.boxBounds,t.__world)?x:v;if(e.hit(t.__layout.boxBounds,t.__world)&&t.__.hitSelf)return y}return v}return t.isBranch?w:v}},{findOne:k}=E;class m extends e.Group{get dragging(){return!!this.originList}get running(){return this.editor.hittable&&this.editor.config.selector}get isMoveMode(){return this.app&&this.app.interaction.moveMode}constructor(t){super(),this.hoverStroker=new 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:s}=t.config;this.hoverStroker.setTarget(s?this.editor.hoverTarget:null,{stroke:e,strokeWidth:i})}}onSelect(){if(this.running){const{config:t,list:e}=this.editor,{stroke:i,strokeWidth:s}=t;this.targetStroker.setTarget(e,{stroke:i,strokeWidth:Math.max(1,s/2)}),this.hoverStroker.target=null}}update(){this.running&&this.targetStroker.forceUpdate()}onPointerMove(t){if(this.running&&!this.isMoveMode){const e=t.shiftKey?this.findDeepOne(t):k(t.path);this.editor.hoverTarget=this.editor.hasItem(e)?null:e}this.isMoveMode&&(this.editor.hoverTarget=null)}onBeforeDown(t){if(this.running&&!this.isMoveMode&&!t.middle){const e=this.lastDownLeaf=k(t.path);e?(t.shiftKey?this.editor.shiftItem(e):this.editor.target=e,this.editor.updateLayout(),e.leafer.interaction.updateDownData()):this.allow(t.target)&&(t.shiftKey||(this.editor.target=null))}}onTap(t){if(this.running&&t.shiftKey&&!t.middle&&!this.lastDownLeaf){const e=this.findDeepOne(t);e&&this.editor.shiftItem(e)}else this.isMoveMode&&(this.editor.target=null);this.lastDownLeaf=null}onDragStart(t){if(this.running&&this.allowDrag(t)){const{editor:e}=this,{stroke:i,strokeWidth:s,area:o}=e.config,{x:n,y:r}=t.getInner(this);this.bounds.set(n,r),this.selectArea.setStyle({visible:!0,stroke:i,strokeWidth:s,x:n,y:r},o),this.selectArea.setBounds(this.bounds.get()),this.originList=e.leafList.clone()}}onDrag(t){if(this.editor.dragging)this.onDragEnd();else if(this.dragging){const{editor:i}=this,s=t.getInnerTotal(this),o=this.bounds.clone().unsign(),n=new e.LeafList(i.app.find(E.findBounds,o));if(this.bounds.width=s.x,this.bounds.height=s.y,this.selectArea.setBounds(o.get()),n.length){const t=[];this.originList.forEach((e=>{n.has(e)||t.push(e)})),n.forEach((e=>{this.originList.has(e)||t.push(e)})),(t.length!==i.list.length||i.list.some(((e,i)=>e!==t[i])))&&(i.target=t)}else i.target=this.originList.list,i.leafList.length&&i.update()}}onDragEnd(){this.dragging&&(this.originList=null,this.selectArea.visible=!1)}onAutoMove(t){if(this.dragging){const{x:e,y:i}=t.getLocalMove(this);this.bounds.x+=e,this.bounds.y+=i}}allow(t){return t.leafer!==this.editor.leafer}allowDrag(t){return!(!this.editor.config.boxSelect||t.target.draggable)&&(!this.editor.hasTarget&&this.allow(t.target)||t.shiftKey&&!k(t.path))}findDeepOne(t){const i={exclude:new e.LeafList(this.editor.editBox.rect)};return k(t.target.leafer.interaction.findPath(t,i))}__listenEvents(){const{editor:t}=this;t.waitLeafer((()=>{const{app:i}=t;i.selector.proxy=t,this.__eventIds=[t.on_(s.HOVER,this.onHover,this),t.on_(s.SELECT,this.onSelect,this),i.on_(e.PointerEvent.MOVE,this.onPointerMove,this),i.on_(e.PointerEvent.BEFORE_DOWN,this.onBeforeDown,this),i.on_(e.PointerEvent.TAP,this.onTap,this),i.on_(e.DragEvent.START,this.onDragStart,this),i.on_(e.DragEvent.DRAG,this.onDrag,this),i.on_(e.DragEvent.END,this.onDragEnd,this),i.on_(e.MoveEvent.MOVE,this.onAutoMove,this),i.on_([e.ZoomEvent.ZOOM,e.MoveEvent.MOVE],(()=>{this.editor.hoverTarget=null}))]}))}__removeListenEvents(){this.__eventIds&&(this.off_(this.__eventIds),this.__eventIds.length=0)}destroy(){this.editor=this.originList=this.lastDownLeaf=null,this.__removeListenEvents(),super.destroy()}}var b;!function(t){t[t.topLeft=0]="topLeft",t[t.top=1]="top",t[t.topRight=2]="topRight",t[t.right=3]="right",t[t.bottomRight=4]="bottomRight",t[t.bottom=5]="bottom",t[t.bottomLeft=6]="bottomLeft",t[t.left=7]="left"}(b||(b={}));const{topLeft:_,top:L,topRight:S,right:T,bottomRight:P,bottom:D,bottomLeft:O,left:A}=b,{toPoint:M}=e.AroundHelper,R={getScaleData(t,e,i,s,o){let n,r=1,a=1;const{width:h,height:l}=t;o&&(i.x*=2,i.y*=2);const d=(-i.y+l)/l,c=(i.x+h)/h,g=(i.y+l)/l,u=(-i.x+h)/h;switch(e){case L:a=d,n={x:.5,y:1};break;case T:r=c,n={x:0,y:.5};break;case D:a=g,n={x:.5,y:0};break;case A:r=u,n={x:1,y:.5};break;case _:a=d,r=u,n={x:1,y:1};break;case S:a=d,r=c,n={x:0,y:1};break;case P:a=g,r=c,n={x:0,y:0};break;case O:a=g,r=u,n={x:1,y:0}}return s&&(1!==r?a=r:r=a),M(o||n,t,n),{origin:n,scaleX:r,scaleY:a,direction:e,lockRatio:s,around:o}},getRotateData(t,i,s,o,n){let r;switch(i){case _:r={x:1,y:1};break;case S:r={x:0,y:1};break;case P:r={x:0,y:0};break;case O:r={x:1,y:0};break;default:r={x:.5,y:.5}}return M(n||r,t,r),{origin:r,rotation:e.PointHelper.getRotation(o,r,s)}},getSkewData(t,i,s,o){let n,r,a=0,h=0;switch(i){case L:r={x:.5,y:0},n={x:.5,y:1},a=1;break;case D:r={x:.5,y:1},n={x:.5,y:0},a=1;break;case A:r={x:0,y:.5},n={x:1,y:.5},h=1;break;case T:r={x:1,y:.5},n={x:0,y:.5},h=1}const{x:l,y:d,width:c,height:g}=t;r.x=l+r.x*c,r.y=d+r.y*g,M(o||n,t,n);const u=e.PointHelper.getRotation(r,n,{x:r.x+(a?s.x:0),y:r.y+(h?s.y:0)});return a?a=-u:h=u,{origin:n,skewX:a,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)},{topLeft:B,top:z,topRight:I,right:W,bottomRight:Y,bottom:X,bottomLeft:K,left:C}=b;function F(t,e){const{editBox:i}=t,s=i.enterPoint;if(!s||!t.hasTarget||!i.visible)return;let{rotation:o}=i,{resizeCursor:n,rotateCursor:r,resizeable:a,rotateable:h}=t.config;const{direction:l,pointType:d}=s;i.enterPoint=s;const c="resize"===d;if(c&&h&&(e.metaKey||e.ctrlKey||!a)&&(n=r),i.flipped){const{flippedX:t,flippedY:e}=i;N(n=[...n],t,e),N(r=[...r],e,t),i.flippedOne&&(o=-o)}const g=R.getRotateDirection(l,o);s.cursor=c?n[g]:r[g]}function H(t){t.editBox.rect.cursor=t.config.moveCursor}function N(t,e,i){if(e){const e=t[z],i=t[B],s=t[I];t[z]=t[X],t[B]=t[K],t[I]=t[Y],t[X]=e,t[K]=i,t[Y]=s}if(i){const e=t[C],i=t[B],s=t[K];t[C]=t[W],t[B]=t[I],t[K]=t[Y],t[W]=e,t[I]=i,t[Y]=s}}class j extends e.Box{}const G=["top","right","bottom","left"];class V 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.rect=new e.Box({name:"rect",hitFill:"all",hitStroke:"none",strokeAlign:"center",hitRadius:5}),this.circle=new j({name:"circle",strokeAlign:"outside",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{resizePoints:s,rotatePoints:o,resizeLines:n,rect:r,circle:a,buttons:h}=this,l=[{x:1,y:1},{x:.5,y:1},{x:0,y:1},{x:0,y:.5},{x:0,y:0},{x:.5,y:0},{x:1,y:0},{x:1,y:.5}];for(let r=0;r<8;r++)t=new j({around:l[r],width:15,height:15,hitFill:"all"}),o.push(t),this.listenPointEvents(t,"rotate",r),r%2&&(e=new j({name:"resize-line",around:"center",width:10,height:10,hitFill:"all"}),n.push(e),this.listenPointEvents(e,"resize",r)),i=new j({name:"resize-point",around:"center",strokeAlign:"outside",hitRadius:5}),s.push(i),this.listenPointEvents(i,"resize",r);h.add(a),this.listenPointEvents(a,"rotate",2),this.addMany(...o,r,h,...n,...s)}update(t){const{config:i,list:s}=this.editor,{width:o,height:n}=t,{rect:r,circle:a,resizePoints:h,rotatePoints:l,resizeLines:d}=this,{middlePoint:c,resizeable:g,rotateable:u,stroke:f,strokeWidth:p}=i,v=this.getPointsStyle(),y=this.getMiddlePointsStyle();this.visible=s[0]&&!s[0].locked;let w,x,E,k,m={};for(let i=0;i<8;i++)e.AroundHelper.toPoint(e.AroundHelper.directionData[i],t,m),w=this.getPointStyle(i%2?y[(i-1)/2%y.length]:v[i/2%v.length]),E=h[i],x=l[i],k=d[Math.floor(i/2)],E.set(w),E.set(m),x.set(m),k.set(m),E.visible=k.visible=g||u,x.visible=u&&g,i%2?(E.visible=x.visible=!!c,(i+1)/2%2?(k.width=o,E.width>o-30&&(E.visible=!1)):(k.height=n,E.rotation=90,E.width>n-30&&(E.visible=!1))):E.rotation=i/2*90;a.visible=u&&!!i.rotatePoint,a.set(this.getPointStyle(i.rotatePoint||v[0])),r.set(Object.assign({stroke:f,strokeWidth:p},i.rect||{})),r.set(Object.assign(Object.assign({},t),{visible:!0})),this.layoutButtons()}layoutButtons(){const{buttons:t,resizePoints:e}=this,{buttonsDirection:i,buttonsFixed:s,buttonsMargin:o,middlePoint:n}=this.editor.config,{flippedX:r,flippedY:a}=this;let h=G.indexOf(i);(h%2&&r||(h+1)%2&&a)&&s&&(h=(h+2)%4);const l=s?R.getRotateDirection(h,this.flippedOne?this.rotation:-this.rotation,4):h,d=e[2*l+1],c=l%2,g=l&&3!==l?1:-1,u=(o+(h%2?(n?d.width:0)+t.boxBounds.width:(n?d.height:0)+t.boxBounds.height)/2)*g;c?(t.x=d.x+u,t.y=d.y):(t.x=d.x,t.y=d.y+u),s&&(t.rotation=90*(l-h),t.scaleX=r?-1:1,t.scaleY=a?-1:1)}getPointStyle(t){const{stroke:e,strokeWidth:i,pointFill:s,pointSize:o,pointRadius:n}=this.editor.config,r={fill:s,stroke:e,strokeWidth:i,width:o,height:o,cornerRadius:n};return t?Object.assign(r,t):r}getPointsStyle(){const{point:t}=this.editor.config;return t instanceof Array?t:[t]}getMiddlePointsStyle(){const{middlePoint:t}=this.editor.config;return t instanceof Array?t:t?[t]:this.getPointsStyle()}onDragStart(t){this.dragging=!0,"rect"===t.target.name&&(this.editor.opacity=this.editor.config.hideOnMove?0:1)}onDragEnd(t){this.dragging=!1,"rect"===t.target.name&&(this.editor.opacity=1)}onDrag(t){const{editor:e}=this;"rotate"===t.current.pointType||t.metaKey||t.ctrlKey||!e.config.resizeable?e.config.rotateable&&e.onRotate(t):e.onScale(t)}onArrow(t){if(this.editor.hasTarget){const e={x:0,y:0},i=t.shiftKey?10:1;switch(t.code){case"ArrowDown":e.y=i;break;case"ArrowUp":e.y=-i;break;case"ArrowLeft":e.x=-i;break;case"ArrowRight":e.x=i}(e.x||e.y)&&this.editor.move(e.x,e.y)}}onDoubleClick(){const{editor:t}=this;t.single&&t.element.isBranch}listenPointEvents(t,i,s){const{editor:o}=this;t.direction=s,t.pointType=i,t.on_(e.DragEvent.START,this.onDragStart,this),t.on_(e.DragEvent.DRAG,this.onDrag,this),t.on_(e.DragEvent.END,this.onDragEnd,this),t.on_(e.PointerEvent.LEAVE,(()=>this.enterPoint=null)),"circle"!==t.name&&t.on_(e.PointerEvent.ENTER,(e=>{this.enterPoint=t,F(o,e)}))}__listenEvents(){const{rect:t,editor:i}=this;this.__eventIds=[i.on_(s.SELECT,(()=>{this.visible=i.hasTarget})),t.on_(e.DragEvent.START,this.onDragStart,this),t.on_(e.DragEvent.DRAG,i.onMove,i),t.on_(e.DragEvent.END,this.onDragEnd,this),t.on_(e.PointerEvent.ENTER,(()=>H(i))),t.on_(e.PointerEvent.DOUBLE_CLICK,this.onDoubleClick,this)]}__removeListenEvents(){this.off_(this.__eventIds),this.__eventIds.length=0}destroy(){this.editor=null,this.__removeListenEvents(),super.destroy()}}const U={editSize:"auto",stroke:"#836DFF",strokeWidth:2,pointFill:"#FFFFFF",pointSize:8,pointRadius:16,rotateGap:45,buttonsDirection:"bottom",buttonsMargin:12,moveCursor:"move",resizeCursor:["nwse-resize","ns-resize","nesw-resize","ew-resize","nwse-resize","ns-resize","nesw-resize","ew-resize"],rotateCursor:["ne-resize","e-resize","se-resize","s-resize","sw-resize","w-resize","nw-resize","n-resize"],selector:!0,hover:!0,boxSelect:!0,resizeable:!0,rotateable:!0,skewable:!0};class Z{constructor(){this.tag="EditTool"}onMove(t){const{moveX:e,moveY:i,editor:s}=t,{app:o,list:n}=s;o.lockLayout(),n.forEach((t=>{const s=t.getLocalPoint({x:e,y:i},null,!0);t.move(s.x,s.y)})),o.unlockLayout()}onScale(t){const{scaleX:e,scaleY:i,transform:s,worldOrigin:o,editor:n}=t,{app:r,list:a}=n;r.lockLayout(),a.forEach((t=>{const r="size"===n.getEditSize(t);s?t.transform(s,r):t.scaleOf(t.getInnerPoint(o),e,i,r)})),r.unlockLayout()}onRotate(t){const{rotation:e,worldOrigin:i,editor:s}=t,{app:o,list:n}=s;o.lockLayout(),n.forEach((t=>{t.rotateOf(t.getInnerPoint(i),e)})),o.unlockLayout()}onSkew(t){const{skewX:e,skewY:i,transform:s,worldOrigin:o,editor:n}=t,{app:r,list:a}=n;r.lockLayout(),a.forEach((t=>{const r="size"===n.getEditSize(t);s?t.transform(s,r):t.skewOf(t.getInnerPoint(o),e,i,r)})),r.unlockLayout()}update(t){const{simulateTarget:e,element:i}=t;t.multiple&&e.parent.updateLayout();const{x:s,y:o,scaleX:n,scaleY:r,rotation:a,skewX:h,skewY:l,width:d,height:c}=i.getLayoutBounds("box",t,!0);t.editBox.set({x:s,y:o,scaleX:n,scaleY:r,rotation:a,skewX:h,skewY:l}),t.editBox.update({x:0,y:0,width:d,height:c})}}Z.list=[];const{left:q,right:J}=b;class Q extends Z{constructor(){super(...arguments),this.tag="LineEditTool",this.scaleOfEvent=!0}onScaleWithDrag(t){const{drag:e,direction:i,lockRatio:s,around:o}=t,n=t.target,r={x:0,y:0},{toPoint:a}=n;n.rotation=0;let{x:h,y:l}=e.getInnerMove(n);s&&(Math.abs(h)>Math.abs(l)?l=0:h=0),i===q?(r.x+=h,r.y+=l,o&&(a.x-=h,a.y-=l)):(o&&(r.x-=h,r.y-=l),a.x+=h,a.y+=l),n.getLocalPointByInner(r,null,null,!0),n.getLocalPointByInner(a,null,null,!0),n.x=r.x,n.y=r.y,n.getInnerPointByLocal(a,null,null,!0),n.toPoint=a}onSkew(t){}update(t){const{rotatePoints:e,resizeLines:i,resizePoints:s}=t.editBox;super.update(t);for(let t=0;t<8;t++)t<4&&(i[t].visible=!1),s[t].visible=e[t].visible=t===q||t===J}}const $=(t,e)=>t.parent.children.indexOf(t)-e.parent.children.indexOf(e),tt=(t,e)=>e.parent.children.indexOf(e)-t.parent.children.indexOf(t),et={group(t,i,s){t.sort(tt);const{app:o,parent:n}=t[0];s||(s=new e.Group),n.addAt(s,n.children.indexOf(t[0])),t.sort($);const r=new e.Matrix(i.worldTransform);return r.divideParent(n.worldTransform),s.setTransform(r),s.editable=!0,s.hitChildren=!1,o.lockLayout(),t.forEach((t=>t.dropTo(s))),o.unlockLayout(),s},ungroup(t){const{app:e}=t[0],i=[];return e.lockLayout(),t.forEach((t=>{if(t.isBranch){const{parent:e,children:s}=t;for(;s.length;)i.push(s[0]),s[0].dropTo(e,e.children.indexOf(t));t.remove()}else i.push(t)})),e.unlockLayout(),i},toTop(t){t.sort($),t.forEach((t=>{t.parent&&t.parent.add(t)}))},toBottom(t){t.sort(tt),t.forEach((t=>{t.parent&&t.parent.addAt(t,0)}))}};class it extends e.Group{get list(){return this.leafList.list}get hasTarget(){return!!this.list.length}get multiple(){return this.list.length>1}get single(){return 1===this.list.length}get element(){return this.multiple?this.simulateTarget:this.list[0]}get buttons(){return this.editBox.buttons}get dragging(){return this.editBox.dragging}constructor(t,i){super(i),this.config=U,this.leafList=new e.LeafList,this.simulateTarget=new e.Rect({visible:!1}),this.editBox=new V(this),this.selector=new m(this),this.targetEventIds=[],t&&(this.config=e.DataHelper.default(t,this.config)),this.addMany(this.selector,this.editBox)}hasItem(t){return this.leafList.has(t)}addItem(t){this.hasItem(t)||t.locked||(this.leafList.add(t),this.target=this.leafList.list)}removeItem(t){this.hasItem(t)&&(this.leafList.remove(t),this.target=this.leafList.list)}shiftItem(t){this.hasItem(t)?this.removeItem(t):this.addItem(t)}update(){this.target&&(this.editTool.update(this),this.selector.update())}updateEditTool(){this.editTool=function(t){if(1===t.length){const i=t[0];return i instanceof e.Line&&!i.points?new Q:new Z}return new Z}(this.list)}getEditSize(t){let{editSize:e}=this.config;return"auto"===e?t.editSize:e}onMove(t){const e=t.getLocalMove(this.element);t.shiftKey&&(Math.abs(e.x)>Math.abs(e.y)?e.y=0:e.x=0),this.move(e.x,e.y)}onScale(t){const{element:e}=this,{direction:i}=t.current;let{around:s,lockRatio:o}=this.config;t.shiftKey&&(o=!0);const n=R.getScaleData(e.boxBounds,i,t.getInnerMove(e),o,R.getAround(s,t.altKey));this.editTool.onScaleWithDrag?(n.drag=t,this.scaleWithDrag(n)):this.scaleOf(n.origin,n.scaleX,n.scaleY)}onRotate(t){const{skewable:i,around:s,rotateGap:o}=this.config,{direction:n,name:r}=t.current;if(i&&"resize-line"===r)return this.onSkew(t);const{element:a,editBox:h}=this;let l,d;if(t instanceof e.RotateEvent)d=t.rotation,l=a.getInnerPoint(t);else{const e={x:t.x-t.moveX,y:t.y-t.moveY},i=R.getRotateData(a.boxBounds,n,t.getInner(a),a.getInnerPoint(e),t.shiftKey?null:s||"center");d=i.rotation,l=i.origin}d=e.MathHelper.getGapRotation(d,o,a.rotation),d&&(h.flippedOne&&(d=-d),this.rotateOf(l,d))}onSkew(t){const{element:e}=this,{around:i}=this.config,{origin:s,skewX:o,skewY:n}=R.getSkewData(e.boxBounds,t.current.direction,t.getInnerMove(e),R.getAround(i,t.altKey));(o||n)&&this.skewOf(s,o,n)}move(t,e){const{element:i}=this,s=i.getWorldPointByLocal({x:t,y:e},null,!0),n=new o(o.MOVE,{target:i,editor:this,moveX:s.x,moveY:s.y});this.editTool.onMove(n),this.emitEvent(n),this.multiple&&i.move(t,e)}scaleWithDrag(t){const{element:e}=this,i=e.getWorldPoint(t.origin),s=new n(n.SCALE,Object.assign(Object.assign({},t),{target:e,editor:this,worldOrigin:i}));this.editTool.onScaleWithDrag(s),this.emitEvent(s)}scaleOf(t,i,s=i,o){const{element:r}=this,a=r.getWorldPoint(t);let h;if(this.multiple){const o=Object.assign({},r.localTransform);r.scaleOf(t,i,s),h=new e.Matrix(r.localTransform).divide(o)}const l=new n(n.SCALE,{target:r,editor:this,worldOrigin:a,scaleX:i,scaleY:s,transform:h});this.editTool.onScale(l),this.emitEvent(l)}rotateOf(t,e){const{element:i}=this,s=i.getWorldPoint(t),o=new r(r.ROTATE,{target:i,editor:this,worldOrigin:s,rotation:e});this.editTool.onRotate(o),this.emitEvent(o),this.multiple&&i.rotateOf(t,e)}skewOf(t,i,s=0,o){const{element:n}=this,r=n.getWorldPoint(t);let h;if(this.multiple){const o=Object.assign({},n.localTransform);n.skewOf(t,i,s),h=new e.Matrix(n.localTransform).divide(o)}const l=new a(a.SKEW,{target:n,editor:this,skewX:i,skewY:s,transform:h,worldOrigin:r});this.editTool.onSkew(l),this.emitEvent(l)}group(t){return this.multiple&&(this.target=et.group(this.list,this.element,t)),this.target}ungroup(){return this.list.length&&(this.target=et.ungroup(this.list)),this.list}lock(){this.list.forEach((t=>t.locked=!0)),this.update()}unlock(){this.list.forEach((t=>t.locked=!1)),this.update()}toTop(){this.list.length&&(et.toTop(this.list),this.leafList.update())}toBottom(){this.list.length&&(et.toBottom(this.list),this.leafList.update())}listenTargetEvents(){if(!this.targetEventIds.length){const{leafer:t}=this.list[0];this.targetEventIds=[t.on_(e.RenderEvent.START,this.update,this),t.on_([e.KeyEvent.HOLD,e.KeyEvent.UP],(t=>{F(this,t)})),t.on_(e.KeyEvent.DOWN,this.editBox.onArrow,this.editBox)]}}removeTargetEvents(){const{targetEventIds:t}=this;t.length&&(this.off_(t),t.length=0)}destroy(){this.destroyed||(this.simulateTarget.destroy(),this.target=this.hoverTarget=this.simulateTarget=null,super.destroy())}}return i([h((function(t,e){t.emitEvent(new s(s.HOVER,{editor:t,value:t.hoverTarget,oldValue:e}))}))],it.prototype,"hoverTarget",void 0),i([h((function(t,i){const{target:o}=t;o?t.leafList=o instanceof e.LeafList?o:new e.LeafList(o):t.leafList.reset(),t.emitEvent(new s(s.SELECT,{editor:t,value:o,oldValue:i})),t.hasTarget?t.waitLeafer((()=>{t.multiple&&function(t){const{simulateTarget:i,leafList:s}=t,{x:o,y:n,width:r,height:a}=(new e.Bounds).setListWithFn(s.list,(t=>t.worldBoxBounds)),h=i.parent=s.list[0].leafer.zoomLayer,{scaleX:l,scaleY:d,e:c,f:g}=h.__world;i.reset({x:(o-c)/l,y:(n-g)/d,width:r/l,height:a/d})}(t),H(t),t.updateEditTool(),t.update(),t.listenTargetEvents()})):t.removeTargetEvents()}))],it.prototype,"target",void 0),e.Creator.editor=function(t){return new it(t)},t.EditBox=V,t.EditDataHelper=R,t.EditPoint=j,t.EditSelect=m,t.EditSelectHelper=E,t.EditTool=Z,t.Editor=it,t.EditorEvent=s,t.EditorHelper=et,t.EditorMoveEvent=o,t.EditorRotateEvent=r,t.EditorScaleEvent=n,t.EditorSkewEvent=a,t.LineEditTool=Q,t.SelectArea=f,t.Stroker=u,t}({},LeaferUI);

package/package.json

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

package/src/Editor.ts

@@ -1,4 +1,4 @@
-import { IGroupInputData, IUI, IEventListenerId, IPointData, ILeafList, IEditSize } from '@leafer-ui/interface'
+import { IGroupInputData, IUI, IEventListenerId, IPointData, ILeafList, IEditSize, IGroup } from '@leafer-ui/interface'
 import { Group, Rect, DragEvent, RotateEvent, DataHelper, MathHelper, LeafList, Matrix, RenderEvent, KeyEvent } from '@leafer-ui/core'
 
 import { IEditBox, IEditPoint, IEditor, IEditorConfig, IEditTool, IEditorScaleEvent } from '@leafer-in/interface'
@@ -29,7 +29,7 @@ export class Editor extends Group implements IEditor {
     public hoverTarget: IUI
 
     @targetAttr(onTarget)
-    public target: IUI | IUI[] | ILeafList
+    public target: IUI | IUI[]
 
     public leafList: ILeafList = new LeafList() // from target
     public get list(): IUI[] { return this.leafList.list as IUI[] }
@@ -238,13 +238,15 @@ export class Editor extends Group implements IEditor {
 
     // group
 
-    public group(): void {
-        if (this.multiple) this.target = EditorHelper.group(this.list, this.element)
+    public group(group?: IGroup): IGroup {
+        if (this.multiple) this.target = EditorHelper.group(this.list, this.element, group)
+        return this.target as IGroup
     }
 
 
-    public ungroup(): void {
+    public ungroup(): IUI[] {
         if (this.list.length) this.target = EditorHelper.ungroup(this.list)
+        return this.list
     }
 
     // lock

package/src/decorator/data.ts

@@ -7,7 +7,10 @@ export function targetAttr(fn: IFunction) {
         const privateKey = '_' + key
         defineKey(target, key, {
             get() { return (this as IObject)[privateKey] },
-            set(value: unknown) { if ((this as IObject)[privateKey] !== value) (this as IObject)[privateKey] = value, fn(this) }
+            set(value: unknown) {
+                const old = (this as IObject)[privateKey]
+                if (old !== value) (this as IObject)[privateKey] = value, fn(this, old)
+            }
         } as ThisType<ILeaf>)
     }
 }

package/src/display/EditBox.ts

@@ -1,5 +1,5 @@
 import { IRect, IAround, IEventListenerId, IBoundsData, IRectInputData, IPointData, IKeyEvent, IGroup, IBox } from '@leafer-ui/interface'
-import { Group, DragEvent, PointerEvent, Box } from '@leafer-ui/core'
+import { Group, DragEvent, PointerEvent, Box, AroundHelper } from '@leafer-ui/core'
 
 import { IEditBox, IEditor, IDirection8, IEditPoint, IEditPointType } from '@leafer-in/interface'
 
@@ -78,19 +78,18 @@ export class EditBox extends Group implements IEditBox {
         const { rect, circle, resizePoints, rotatePoints, resizeLines } = this
         const { middlePoint, resizeable, rotateable, stroke, strokeWidth } = config
 
-        const points = this.getDirection8Points(bounds)
         const pointsStyle = this.getPointsStyle()
         const middlePointsStyle = this.getMiddlePointsStyle()
 
         this.visible = list[0] && !list[0].locked // check locked
 
-        let point: IPointData, style: IRectInputData, rotateP: IRect, resizeP: IRect, resizeL: IRect
+        let point = {} as IPointData, style: IRectInputData, rotateP: IRect, resizeP: IRect, resizeL: IRect
 
         for (let i = 0; i < 8; i++) {
 
-            point = points[i], style = this.getPointStyle((i % 2) ? middlePointsStyle[((i - 1) / 2) % middlePointsStyle.length] : pointsStyle[(i / 2) % pointsStyle.length])
+            AroundHelper.toPoint(AroundHelper.directionData[i], bounds, point)
+            style = this.getPointStyle((i % 2) ? middlePointsStyle[((i - 1) / 2) % middlePointsStyle.length] : pointsStyle[(i / 2) % pointsStyle.length])
             resizeP = resizePoints[i], rotateP = rotatePoints[i], resizeL = resizeLines[Math.floor(i / 2)]
-
             resizeP.set(style)
             resizeP.set(point), rotateP.set(point), resizeL.set(point)
 
@@ -178,20 +177,6 @@ export class EditBox extends Group implements IEditBox {
         return middlePoint instanceof Array ? middlePoint : (middlePoint ? [middlePoint] : this.getPointsStyle())
     }
 
-    public getDirection8Points(bounds: IBoundsData): IPointData[] {
-        const { x, y, width, height } = bounds
-        return [ // topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left
-            { x, y },
-            { x: x + width / 2, y },
-            { x: x + width, y },
-            { x: x + width, y: y + height / 2 },
-            { x: x + width, y: y + height },
-            { x: x + width / 2, y: y + height },
-            { x, y: y + height },
-            { x, y: y + height / 2 }
-        ]
-    }
-
     // drag
 
     protected onDragStart(e: DragEvent): void {

package/src/display/EditSelect.ts

@@ -151,11 +151,13 @@ export class EditSelect extends Group implements IEditSelect {
                 this.originList.forEach(item => { if (!list.has(item)) selectList.push(item) })
                 list.forEach(item => { if (!this.originList.has(item)) selectList.push(item) })
 
-                editor.target = selectList as IUI[]
+                if (selectList.length !== editor.list.length || editor.list.some((child, index) => child !== selectList[index])) {
+                    editor.target = selectList as IUI[]
+                }
 
             } else {
 
-                editor.target = this.originList
+                editor.target = this.originList.list as IUI[]
                 if (editor.leafList.length) editor.update()
 
             }

package/src/editor/target.ts

@@ -7,7 +7,7 @@ import { updateMoveCursor } from './cursor'
 import { EditorEvent } from '../event/EditorEvent'
 
 
-export function onTarget(editor: IEditor): void {
+export function onTarget(editor: IEditor, oldValue: IUI | IUI[]): void {
     const { target } = editor
     if (target) {
         editor.leafList = target instanceof LeafList ? target : new LeafList(target instanceof Array ? target : target as IUI)
@@ -15,7 +15,7 @@ export function onTarget(editor: IEditor): void {
         editor.leafList.reset()
     }
 
-    editor.emitEvent(new EditorEvent(EditorEvent.SELECT, { editor }))
+    editor.emitEvent(new EditorEvent(EditorEvent.SELECT, { editor, value: target, oldValue }))
 
     if (editor.hasTarget) {
         editor.waitLeafer(() => {
@@ -31,8 +31,7 @@ export function onTarget(editor: IEditor): void {
 }
 
 
-
-export function onHover(editor: IEditor): void {
-    editor.emitEvent(new EditorEvent(EditorEvent.HOVER, { editor }))
+export function onHover(editor: IEditor, oldValue: IUI): void {
+    editor.emitEvent(new EditorEvent(EditorEvent.HOVER, { editor, value: editor.hoverTarget, oldValue }))
 
 }

package/src/event/EditorEvent.ts

@@ -12,6 +12,9 @@ export class EditorEvent extends Event implements IEditorEvent {
     declare readonly target: IUI
     readonly editor: IEditor
 
+    readonly value: IUI | IUI[]
+    readonly oldValue: IUI | IUI[]
+
     readonly worldOrigin: IPointData
     declare readonly origin: IPointData
 

package/src/helper/EditDataHelper.ts

@@ -137,7 +137,7 @@ export const EditDataHelper = {
 
 
     getAround(around: IAround, altKey: boolean): IAround {
-        return (altKey && !around) ? AroundHelper.center : around
+        return (altKey && !around) ? 'center' : around
     },
 
     getRotateDirection(direction: number, rotation: number, totalDirection = 8): number {

package/src/helper/EditorHelper.ts

@@ -52,43 +52,14 @@ export const EditorHelper = {
     toTop(list: IUI[]): void {
         list.sort(order)
         list.forEach(leaf => {
-            let zIndex
-            const { parent } = leaf
-            if (parent) {
-                const { children } = parent
-                const top = children.length - 1
-                const zIndexOfTop = children[top].__.zIndex
-                const current = children.indexOf(leaf)
-                if (current !== top) {
-                    children.splice(current, 1)
-                    children.push(leaf)
-                    zIndex = zIndexOfTop + 1
-                } else {
-                    zIndex = zIndexOfTop
-                }
-                leaf.zIndex = zIndex
-            }
+            if (leaf.parent) leaf.parent.add(leaf)
         })
     },
 
     toBottom(list: IUI[]): void {
         list.sort(reverseOrder)
         list.forEach(leaf => {
-            let zIndex
-            const { parent } = leaf
-            if (parent) {
-                const { children } = parent
-                const zIndexOfBottom = children[0].__.zIndex
-                const current = children.indexOf(leaf)
-                if (current !== 0) {
-                    children.splice(current, 1)
-                    children.unshift(leaf)
-                    zIndex = zIndexOfBottom - 1
-                } else {
-                    zIndex = zIndexOfBottom
-                }
-                leaf.zIndex = zIndex
-            }
+            if (leaf.parent) leaf.parent.addAt(leaf, 0)
         })
     }
 

package/types/index.d.ts

@@ -1,5 +1,4 @@
-import * as _leafer_ui_interface from '@leafer-ui/interface';
-import { IBounds, ILeafList, IUI, IEventListenerId, ILeaf, IGroupInputData, IEditSize, IPointData, IBox, IGroup, IBoundsData, IRectInputData, IKeyEvent, IRect, ILeaferCanvas, IRenderOptions, IMatrixData, IDragEvent, IAround, AnswerType } from '@leafer-ui/interface';
+import { IBounds, ILeafList, IUI, IEventListenerId, ILeaf, IGroup, IGroupInputData, IEditSize, IPointData, IBox, IBoundsData, IRectInputData, IKeyEvent, IRect, ILeaferCanvas, IRenderOptions, IMatrixData, IDragEvent, IAround, AnswerType } from '@leafer-ui/interface';
 import { Group, PointerEvent, DragEvent, MoveEvent, RotateEvent, Box, UI, Event } from '@leafer-ui/core';
 import { IEditSelect, IEditor, IStroker, ISelectArea, IEditorConfig, IEditBox, IEditTool, IEditorScaleEvent, IEditPoint, IEditPointType, IDirection8, IEditorEvent, IEditorMoveEvent, IEditorRotateEvent, IEditorSkewEvent } from '@leafer-in/interface';
 
@@ -37,7 +36,7 @@ declare class EditSelect extends Group implements IEditSelect {
 declare class Editor extends Group implements IEditor {
     config: IEditorConfig;
     hoverTarget: IUI;
-    target: IUI | IUI[] | ILeafList;
+    target: IUI | IUI[];
     leafList: ILeafList;
     get list(): IUI[];
     get hasTarget(): boolean;
@@ -46,7 +45,7 @@ declare class Editor extends Group implements IEditor {
     get element(): IUI;
     simulateTarget: IUI;
     editBox: IEditBox;
-    get buttons(): _leafer_ui_interface.IGroup;
+    get buttons(): IGroup;
     editTool: IEditTool;
     selector: EditSelect;
     get dragging(): boolean;
@@ -68,8 +67,8 @@ declare class Editor extends Group implements IEditor {
     scaleOf(origin: IPointData, scaleX: number, scaleY?: number, _resize?: boolean): void;
     rotateOf(origin: IPointData, rotation: number): void;
     skewOf(origin: IPointData, skewX: number, skewY?: number, _resize?: boolean): void;
-    group(): void;
-    ungroup(): void;
+    group(group?: IGroup): IGroup;
+    ungroup(): IUI[];
     lock(): void;
     unlock(): void;
     toTop(): void;
@@ -101,7 +100,6 @@ declare class EditBox extends Group implements IEditBox {
     getPointStyle(userStyle?: IRectInputData): IRectInputData;
     getPointsStyle(): IRectInputData[];
     getMiddlePointsStyle(): IRectInputData[];
-    getDirection8Points(bounds: IBoundsData): IPointData[];
     protected onDragStart(e: DragEvent): void;
     protected onDragEnd(e: DragEvent): void;
     protected onDrag(e: DragEvent): void;
@@ -140,6 +138,8 @@ declare class EditorEvent extends Event implements IEditorEvent {
     static HOVER: string;
     readonly target: IUI;
     readonly editor: IEditor;
+    readonly value: IUI | IUI[];
+    readonly oldValue: IUI | IUI[];
     readonly worldOrigin: IPointData;
     readonly origin: IPointData;
     constructor(type: string, data?: IEditorEvent);