@leafer-in/editor 1.0.0-beta.15

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023-present, Chao (Leafer) Wan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# @leafer-in/editor
+
+图形编辑器插件

package/dist/editor.esm.js

@@ -0,0 +1,510 @@
+import { MatrixHelper, Bounds, Matrix, Event, Group, Rect, Polygon, DataHelper, RotateEvent, PointHelper, MathHelper, DragEvent, PointerEvent, RenderEvent, KeyEvent } from '@leafer-ui/core';
+
+var IDirection8;
+(function (IDirection8) {
+    IDirection8[IDirection8["topLeft"] = 0] = "topLeft";
+    IDirection8[IDirection8["top"] = 1] = "top";
+    IDirection8[IDirection8["topRight"] = 2] = "topRight";
+    IDirection8[IDirection8["right"] = 3] = "right";
+    IDirection8[IDirection8["bottomRight"] = 4] = "bottomRight";
+    IDirection8[IDirection8["bottom"] = 5] = "bottom";
+    IDirection8[IDirection8["bottomLeft"] = 6] = "bottomLeft";
+    IDirection8[IDirection8["left"] = 7] = "left";
+})(IDirection8 || (IDirection8 = {}));
+
+const { scaleOfOuter, reset } = MatrixHelper;
+const { topLeft: topLeft$1, top: top$1, topRight: topRight$1, right: right$2, bottomRight: bottomRight$1, bottom: bottom$1, bottomLeft: bottomLeft$1, left: left$2 } = IDirection8;
+const matrix = {};
+function getResizeData(old, direction, move, lockRatio, around) {
+    if (around) {
+        move.x *= 2;
+        move.y *= 2;
+    }
+    let origin, scaleX = 1, scaleY = 1;
+    const { x, y, width, height } = old;
+    const topScale = (-move.y + height) / height;
+    const rightScale = (move.x + width) / width;
+    const bottomScale = (move.y + height) / height;
+    const leftScale = (-move.x + width) / width;
+    switch (direction) {
+        case top$1:
+            scaleY = topScale;
+            if (lockRatio)
+                scaleX = scaleY;
+            origin = { x: x + width / 2, y: y + height };
+            break;
+        case right$2:
+            scaleX = rightScale;
+            if (lockRatio)
+                scaleY = scaleX;
+            origin = { x, y: y + height / 2 };
+            break;
+        case bottom$1:
+            scaleY = bottomScale;
+            if (lockRatio)
+                scaleX = scaleY;
+            origin = { x: x + width / 2, y };
+            break;
+        case left$2:
+            scaleX = leftScale;
+            if (lockRatio)
+                scaleY = scaleX;
+            origin = { x: x + width, y: y + height / 2 };
+            break;
+        case topLeft$1:
+            scaleY = topScale;
+            scaleX = leftScale;
+            if (lockRatio)
+                scaleX = scaleY;
+            origin = { x: x + width, y: y + height };
+            break;
+        case topRight$1:
+            scaleY = topScale;
+            scaleX = rightScale;
+            if (lockRatio)
+                scaleX = scaleY;
+            origin = { x, y: y + height };
+            break;
+        case bottomRight$1:
+            scaleY = bottomScale;
+            scaleX = rightScale;
+            if (lockRatio)
+                scaleX = scaleY;
+            origin = { x, y };
+            break;
+        case bottomLeft$1:
+            scaleY = bottomScale;
+            scaleX = leftScale;
+            if (lockRatio)
+                scaleX = scaleY;
+            origin = { x: x + width, y };
+            break;
+    }
+    if (around) {
+        if (typeof around === 'object') {
+            origin = { x: x + width / around.x, y: y + height / around.y };
+        }
+        else {
+            origin = { x: x + width / 2, y: y + height / 2 };
+        }
+    }
+    reset(matrix);
+    scaleOfOuter(matrix, origin, scaleX, scaleY);
+    const bounds = { x: old.x + matrix.e, y: old.y + matrix.f, width: width * scaleX, height: height * scaleY };
+    return { bounds, old, origin, scaleX, scaleY, direction, lockRatio, around, };
+}
+
+const { topLeft, top, topRight, right: right$1, bottomRight, bottom, bottomLeft, left: left$1 } = IDirection8;
+function updateCursor(editor, e) {
+    const point = editor.enterPoint;
+    if (!point || !editor.target || !editor.visible)
+        return;
+    let { rotation } = editor;
+    let { resizeCursor, rotateCursor, resizeable } = editor.config;
+    const mirror = editor.tool.getMirrorData(editor);
+    const { __direction, __isResizePoint } = point.__;
+    editor.enterPoint = point;
+    if (__isResizePoint && (e.metaKey || e.ctrlKey || !resizeable))
+        resizeCursor = rotateCursor;
+    if (mirror.x || mirror.y) {
+        mirrorCursors(resizeCursor = [...resizeCursor], mirror.x, mirror.y);
+        mirrorCursors(rotateCursor = [...rotateCursor], mirror.y, mirror.x);
+        if (mirror.x + mirror.y === 1)
+            rotation = -rotation;
+    }
+    let index = (__direction + Math.round(rotation / 45)) % 8;
+    if (index < 0)
+        index += 8;
+    point.cursor = __isResizePoint ? resizeCursor[index] : rotateCursor[index];
+}
+function mirrorCursors(mirror, mirrorX, mirrorY) {
+    if (mirrorX) {
+        const topCursor = mirror[top], topLeftCursor = mirror[topLeft], topRightCursor = mirror[topRight];
+        mirror[top] = mirror[bottom];
+        mirror[topLeft] = mirror[bottomLeft];
+        mirror[topRight] = mirror[bottomRight];
+        mirror[bottom] = topCursor;
+        mirror[bottomLeft] = topLeftCursor;
+        mirror[bottomRight] = topRightCursor;
+    }
+    if (mirrorY) {
+        const leftCursor = mirror[left$1], topLeftCursor = mirror[topLeft], bottomLeftCursor = mirror[bottomLeft];
+        mirror[left$1] = mirror[right$1];
+        mirror[topLeft] = mirror[topRight];
+        mirror[bottomLeft] = mirror[bottomRight];
+        mirror[right$1] = leftCursor;
+        mirror[topRight] = topLeftCursor;
+        mirror[bottomRight] = bottomLeftCursor;
+    }
+}
+
+const RectTool = {
+    name: 'RectTool',
+    getMirrorData(editor) {
+        const { scaleX, scaleY } = editor.target;
+        return {
+            x: scaleX < 0 ? 1 : 0,
+            y: scaleY < 0 ? 1 : 0
+        };
+    },
+    resize(e) {
+        const { target, bounds, resizeType, old } = e;
+        const { x, y, width, height } = bounds;
+        const point = { x: x - old.x, y: y - old.y };
+        target.innerToWorld(point, null, true, target.parent);
+        target.x += point.x;
+        target.y += point.y;
+        if (resizeType === 'scale') {
+            target.scaleX *= width / old.width;
+            target.scaleY *= height / old.height;
+        }
+        else {
+            if (width < 0) {
+                target.width = -width;
+                target.scaleX *= -1;
+            }
+            else {
+                if (target.width !== width)
+                    target.width = width;
+            }
+            if (height < 0) {
+                target.height = -height;
+                target.scaleY *= -1;
+            }
+            else {
+                if (target.height !== height)
+                    target.height = height;
+            }
+        }
+    },
+    rotate(e) {
+        const { target, rotation, origin } = e;
+        target.rotateOf(origin, rotation);
+    },
+    update(editor) {
+        const { target, config, rotatePoints, targetRect, rect, circle, resizeLines, resizePoints } = editor;
+        const { type, resizeable, rotateable, stroke, pointFill, pointSize, pointRadius } = config;
+        const defaultStyle = { fill: pointFill, stroke, width: pointSize, height: pointSize, cornerRadius: pointRadius };
+        const pointStyles = config.point instanceof Array ? config.point : [config.point || defaultStyle];
+        const box = new Bounds(target.boxBounds);
+        const w = target.worldTransform, pw = editor.parent.worldTransform;
+        const matrix = new Matrix(w);
+        matrix.divide(pw);
+        const worldX = matrix.e, worldY = matrix.f;
+        let { scaleX, scaleY, rotation, skewX, skewY } = w;
+        scaleX /= pw.scaleX, scaleY /= pw.scaleY, rotation -= pw.rotation, skewX -= pw.skewX, skewY -= pw.skewY;
+        const { x, y, width, height } = box.scale(scaleX, scaleY);
+        editor.set({ x: worldX, y: worldY, rotation, skewX, skewY });
+        targetRect.set({ x, y, width: box.width / scaleX, height: box.height / scaleY, scaleX, scaleY, visible: true });
+        const points = [
+            { 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 }
+        ];
+        const rectPoints = [];
+        let point, style, rotateP, resizeP, resizeL;
+        for (let i = 0; i < 8; i++) {
+            point = points[i];
+            style = pointStyles[i % pointStyles.length];
+            resizeP = resizePoints[i];
+            resizeL = resizeLines[Math.floor(i / 2)];
+            rotateP = rotatePoints[i];
+            resizeP.set(style);
+            resizeP.x = rotateP.x = resizeL.x = point.x;
+            resizeP.y = rotateP.y = resizeL.y = point.y;
+            resizeP.visible = resizeL.visible = resizeable || rotateable;
+            rotateP.visible = rotateable && resizeable;
+            if (i % 2) {
+                if (((i + 1) / 2) % 2) {
+                    resizeL.width = Math.abs(width);
+                    rotateP.width = Math.max(10, Math.abs(width) - 30);
+                }
+                else {
+                    resizeL.height = Math.abs(height);
+                    rotateP.height = Math.max(10, Math.abs(height) - 30);
+                }
+                resizeP.rotation = 90;
+                resizeP.visible = type === 'mobile';
+            }
+            else {
+                rectPoints.push(point.x, point.y);
+            }
+        }
+        style = config.rotatePoint || style;
+        circle.set(style);
+        circle.x = x + width / 2;
+        if (!style.y)
+            circle.y = y - (10 + (resizeP.height + circle.height) / 2) * (this.getMirrorData(editor).y ? -1 : 1);
+        circle.visible = rotateable && type === 'mobile';
+        rect.set(config.rect || { stroke });
+        rect.points = rectPoints;
+        rect.visible = true;
+    }
+};
+
+const { left, right } = IDirection8;
+const LineTool = {
+    name: 'LineTool',
+    getMirrorData(_editor) {
+        return {
+            x: 0,
+            y: 0
+        };
+    },
+    resize(e) {
+        const { direction, dragEvent, lockRatio, around } = e;
+        const target = e.target;
+        const fromPoint = { x: 0, y: 0 };
+        const { toPoint } = target;
+        target.rotation = 0;
+        let { x, y } = dragEvent.getInnerMove(target);
+        if (lockRatio) {
+            if (Math.abs(x) > Math.abs(y)) {
+                y = 0;
+            }
+            else {
+                x = 0;
+            }
+        }
+        if (direction === left) {
+            fromPoint.x += x;
+            fromPoint.y += y;
+            if (around) {
+                toPoint.x -= x;
+                toPoint.y -= y;
+            }
+        }
+        else {
+            if (around) {
+                fromPoint.x -= x;
+                fromPoint.y -= y;
+            }
+            toPoint.x += x;
+            toPoint.y += y;
+        }
+        target.getLocalPointByInner(fromPoint, null, null, true);
+        target.getLocalPointByInner(toPoint, null, null, true);
+        target.x = fromPoint.x;
+        target.y = fromPoint.y;
+        target.getInnerPointByLocal(toPoint, null, null, true);
+        target.toPoint = toPoint;
+    },
+    rotate(e) {
+        RectTool.rotate(e);
+    },
+    update(editor) {
+        const { rotatePoints, circle, resizeLines, resizePoints } = editor;
+        RectTool.update(editor);
+        for (let i = 0; i < 8; i++) {
+            if (i < 4)
+                resizeLines[i].visible = false;
+            resizePoints[i].visible = rotatePoints[i].visible = i === left || i === right;
+        }
+        circle.visible = false;
+    }
+};
+
+class EditorResizeEvent extends Event {
+    constructor(type, data) {
+        super(type);
+        if (data)
+            Object.assign(this, data);
+    }
+}
+EditorResizeEvent.RESIZE = 'editor.resize';
+
+class EditorRotateEvent extends Event {
+    constructor(type, data) {
+        super(type);
+        if (data)
+            Object.assign(this, data);
+    }
+}
+EditorRotateEvent.ROTATE = 'editor.rotate';
+
+class Editor extends Group {
+    get target() { return this._target; }
+    set target(value) {
+        this.__removeTargetEvents();
+        this.visible = !!value;
+        this._target = value;
+        if (value)
+            this.onTarget();
+    }
+    constructor(userConfig, data) {
+        super(data);
+        this.config = {
+            type: 'pc',
+            stroke: '#836DFF',
+            pointFill: '#FFFFFF',
+            pointSize: 10,
+            pointRadius: 10,
+            rotateGap: 90,
+            hideOnMove: false,
+            moveCursor: 'move',
+            resizeType: 'auto',
+            resizeCursor: ['nwse-resize', 'ns-resize', 'nesw-resize', 'ew-resize', 'nwse-resize', 'ns-resize', 'nesw-resize', 'ew-resize'],
+            rotateCursor: ['ne-resize', 'e-resize', 'se-resize', 's-resize', 'sw-resize', 'w-resize', 'nw-resize', 'n-resize'],
+            resizeable: true,
+            rotateable: true
+        };
+        this.resizePoints = [];
+        this.rotatePoints = [];
+        this.resizeLines = [];
+        this.targetRect = new Rect({ hitFill: 'all', hitRadius: 5 });
+        this.rect = new Polygon({ hittable: false, strokeAlign: 'center' });
+        this.circle = new Rect({ around: 'center', hitRadius: 10 });
+        this.__eventIds = [];
+        this.__targetEventIds = [];
+        if (userConfig)
+            this.config = DataHelper.default(userConfig, this.config);
+        this.init();
+    }
+    init() {
+        let rotatePoint, resizeLine, resizePoint;
+        const { resizePoints, rotatePoints, resizeLines } = this;
+        for (let i = 0; i < 8; i++) {
+            rotatePoint = new Rect({ around: 'center', width: 30, height: 30, hitRadius: 10, hitFill: "all" });
+            rotatePoints.push(rotatePoint);
+            this.__listenPointEvents(rotatePoint, 'rotate', i);
+            if (i % 2) {
+                resizeLine = new Rect({ around: 'center', width: 10, height: 10, hitFill: "all" });
+                resizeLines.push(resizeLine);
+                this.__listenPointEvents(resizeLine, 'resize', i);
+            }
+            resizePoint = new Rect({ around: 'center', hitRadius: 5 });
+            resizePoints.push(resizePoint);
+            this.__listenPointEvents(resizePoint, 'resize', i);
+        }
+        this.__listenPointEvents(this.circle, 'rotate', 1);
+        this.addMany(...rotatePoints, this.targetRect, this.rect, this.circle, ...resizeLines, ...resizePoints);
+        this.__listenEvents();
+    }
+    onTarget() {
+        this.tool = this.getTool(this.target);
+        this.waitLeafer(() => {
+            this.update();
+            this.updateMoveCursor();
+            this.__listenTargetEvents();
+        });
+    }
+    getTool(value) {
+        return (value.tag === 'Line' && value.resizeable) ? LineTool : RectTool;
+    }
+    update() {
+        if (!this.target)
+            return;
+        this.tool.update(this);
+    }
+    onDrag(e) {
+        const { resizeable, rotateable } = this.config;
+        if (e.metaKey || e.ctrlKey || !resizeable) {
+            if (rotateable)
+                this.onRotate(e);
+        }
+        else {
+            this.onResize(e);
+        }
+    }
+    onMove(e) {
+        const { target } = this;
+        const { x, y } = e.getLocalMove(target);
+        if (e.shiftKey) {
+            if (Math.abs(x) > Math.abs(y)) {
+                target.x += x;
+            }
+            else {
+                target.y += y;
+            }
+        }
+        else {
+            target.x += x;
+            target.y += y;
+        }
+    }
+    onRotate(e) {
+        const { target } = this;
+        const { rotateGap } = this.config;
+        const { x, y, width, height } = target.boxBounds;
+        const origin = { x: x + width / 2, y: y + height / 2 };
+        let rotation;
+        if (e instanceof RotateEvent) {
+            rotation = e.rotation;
+        }
+        else {
+            const point = e;
+            const last = { x: point.x - e.moveX, y: point.y - e.moveY };
+            rotation = PointHelper.getChangeAngle(last, target.getWorldPoint(origin), point);
+        }
+        rotation = MathHelper.getGapRotation(target.rotation + rotation, rotateGap) - target.rotation;
+        const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, { editor: this, target, origin, rotation });
+        this.tool.rotate(event);
+        target.emitEvent(event);
+    }
+    onResize(e) {
+        const { target } = this;
+        const { __direction } = e.current.__;
+        let { resizeType, around, lockRatio } = this.config;
+        if (e.shiftKey)
+            lockRatio = true;
+        if (e.altKey && !around)
+            around = 'center';
+        if (resizeType === 'auto')
+            resizeType = target.resizeable ? 'size' : 'scale';
+        const data = getResizeData(target.boxBounds, __direction, e.getInnerMove(this.targetRect), lockRatio, around);
+        const event = new EditorResizeEvent(EditorResizeEvent.RESIZE, Object.assign(Object.assign({}, data), { target, editor: this, dragEvent: e, resizeType }));
+        this.tool.resize(event);
+        target.emitEvent(event);
+    }
+    updateMoveCursor() {
+        this.targetRect.cursor = this.config.moveCursor;
+    }
+    __listenEvents() {
+        this.__eventIds = [
+            this.targetRect.on_(DragEvent.START, () => { this.opacity = this.config.hideOnMove ? 0 : 1; }),
+            this.targetRect.on_(DragEvent.DRAG, this.onMove, this),
+            this.targetRect.on_(DragEvent.END, () => { this.opacity = 1; }),
+            this.targetRect.on_(PointerEvent.ENTER, this.updateMoveCursor, this)
+        ];
+    }
+    __removeListenEvents() {
+        this.targetRect.off_(this.__eventIds);
+        this.__eventIds.length = 0;
+    }
+    __listenPointEvents(point, type, direction) {
+        point.__.__direction = direction;
+        const resize = point.__.__isResizePoint = type === 'resize';
+        point.on_(DragEvent.DRAG, resize ? this.onDrag : this.onRotate, this);
+        point.on_(PointerEvent.LEAVE, () => this.enterPoint = null);
+        point.on_(PointerEvent.ENTER, (e) => { this.enterPoint = point; updateCursor(this, e); });
+    }
+    __listenTargetEvents() {
+        if (this.target) {
+            const { leafer } = this.target;
+            this.__targetEventIds = [
+                leafer.on_(RenderEvent.START, this.update, this),
+                leafer.on_([KeyEvent.HOLD, KeyEvent.UP], (e) => { updateCursor(this, e); })
+            ];
+        }
+    }
+    __removeTargetEvents() {
+        if (this.__targetEventIds.length) {
+            const { leafer } = this.target;
+            if (leafer)
+                leafer.off_(this.__targetEventIds);
+            this.__targetEventIds.length = 0;
+        }
+    }
+    destroy() {
+        this.__removeListenEvents();
+        this._target = null;
+        super.destroy();
+    }
+}
+
+export { Editor, EditorResizeEvent, EditorRotateEvent, LineTool, RectTool };

package/dist/editor.esm.min.js

@@ -0,0 +1 @@
+import{MatrixHelper as t,Bounds as e,Matrix as i,Event as s,Group as o,Rect as r,Polygon as n,DataHelper as a,RotateEvent as h,PointHelper as l,MathHelper as c,DragEvent as g,PointerEvent as y,RenderEvent as d,KeyEvent as u}from"@leafer-ui/core";var _;!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"}(_||(_={}));const{scaleOfOuter:x,reset:b}=t,{topLeft:v,top:f,topRight:p,right:z,bottomRight:R,bottom:w,bottomLeft:m,left:E}=_,M={};const{topLeft:P,top:T,topRight:L,right:k,bottomRight:I,bottom:F,bottomLeft:O,left:D}=_;function X(t,e){const i=t.enterPoint;if(!i||!t.target||!t.visible)return;let{rotation:s}=t,{resizeCursor:o,rotateCursor:r,resizeable:n}=t.config;const a=t.tool.getMirrorData(t),{__direction:h,__isResizePoint:l}=i.__;t.enterPoint=i,l&&(e.metaKey||e.ctrlKey||!n)&&(o=r),(a.x||a.y)&&(Y(o=[...o],a.x,a.y),Y(r=[...r],a.y,a.x),a.x+a.y===1&&(s=-s));let c=(h+Math.round(s/45))%8;c<0&&(c+=8),i.cursor=l?o[c]:r[c]}function Y(t,e,i){if(e){const e=t[T],i=t[P],s=t[L];t[T]=t[F],t[P]=t[O],t[L]=t[I],t[F]=e,t[O]=i,t[I]=s}if(i){const e=t[D],i=t[P],s=t[O];t[D]=t[k],t[P]=t[L],t[O]=t[I],t[k]=e,t[L]=i,t[I]=s}}const A={name:"RectTool",getMirrorData(t){const{scaleX:e,scaleY:i}=t.target;return{x:e<0?1:0,y:i<0?1:0}},resize(t){const{target:e,bounds:i,resizeType:s,old:o}=t,{x:r,y:n,width:a,height:h}=i,l={x:r-o.x,y:n-o.y};e.innerToWorld(l,null,!0,e.parent),e.x+=l.x,e.y+=l.y,"scale"===s?(e.scaleX*=a/o.width,e.scaleY*=h/o.height):(a<0?(e.width=-a,e.scaleX*=-1):e.width!==a&&(e.width=a),h<0?(e.height=-h,e.scaleY*=-1):e.height!==h&&(e.height=h))},rotate(t){const{target:e,rotation:i,origin:s}=t;e.rotateOf(s,i)},update(t){const{target:s,config:o,rotatePoints:r,targetRect:n,rect:a,circle:h,resizeLines:l,resizePoints:c}=t,{type:g,resizeable:y,rotateable:d,stroke:u,pointFill:_,pointSize:x,pointRadius:b}=o,v={fill:_,stroke:u,width:x,height:x,cornerRadius:b},f=o.point instanceof Array?o.point:[o.point||v],p=new e(s.boxBounds),z=s.worldTransform,R=t.parent.worldTransform,w=new i(z);w.divide(R);const m=w.e,E=w.f;let{scaleX:M,scaleY:P,rotation:T,skewX:L,skewY:k}=z;M/=R.scaleX,P/=R.scaleY,T-=R.rotation,L-=R.skewX,k-=R.skewY;const{x:I,y:F,width:O,height:D}=p.scale(M,P);t.set({x:m,y:E,rotation:T,skewX:L,skewY:k}),n.set({x:I,y:F,width:p.width/M,height:p.height/P,scaleX:M,scaleY:P,visible:!0});const X=[{x:I,y:F},{x:I+O/2,y:F},{x:I+O,y:F},{x:I+O,y:F+D/2},{x:I+O,y:F+D},{x:I+O/2,y:F+D},{x:I,y:F+D},{x:I,y:F+D/2}],Y=[];let A,C,K,B,S;for(let t=0;t<8;t++)A=X[t],C=f[t%f.length],B=c[t],S=l[Math.floor(t/2)],K=r[t],B.set(C),B.x=K.x=S.x=A.x,B.y=K.y=S.y=A.y,B.visible=S.visible=y||d,K.visible=d&&y,t%2?((t+1)/2%2?(S.width=Math.abs(O),K.width=Math.max(10,Math.abs(O)-30)):(S.height=Math.abs(D),K.height=Math.max(10,Math.abs(D)-30)),B.rotation=90,B.visible="mobile"===g):Y.push(A.x,A.y);C=o.rotatePoint||C,h.set(C),h.x=I+O/2,C.y||(h.y=F-(10+(B.height+h.height)/2)*(this.getMirrorData(t).y?-1:1)),h.visible=d&&"mobile"===g,a.set(o.rect||{stroke:u}),a.points=Y,a.visible=!0}},{left:C,right:K}=_,B={name:"LineTool",getMirrorData:t=>({x:0,y:0}),resize(t){const{direction:e,dragEvent:i,lockRatio:s,around:o}=t,r=t.target,n={x:0,y:0},{toPoint:a}=r;r.rotation=0;let{x:h,y:l}=i.getInnerMove(r);s&&(Math.abs(h)>Math.abs(l)?l=0:h=0),e===C?(n.x+=h,n.y+=l,o&&(a.x-=h,a.y-=l)):(o&&(n.x-=h,n.y-=l),a.x+=h,a.y+=l),r.getLocalPointByInner(n,null,null,!0),r.getLocalPointByInner(a,null,null,!0),r.x=n.x,r.y=n.y,r.getInnerPointByLocal(a,null,null,!0),r.toPoint=a},rotate(t){A.rotate(t)},update(t){const{rotatePoints:e,circle:i,resizeLines:s,resizePoints:o}=t;A.update(t);for(let t=0;t<8;t++)t<4&&(s[t].visible=!1),o[t].visible=e[t].visible=t===C||t===K;i.visible=!1}};class S extends s{constructor(t,e){super(t),e&&Object.assign(this,e)}}S.RESIZE="editor.resize";class j extends s{constructor(t,e){super(t),e&&Object.assign(this,e)}}j.ROTATE="editor.rotate";class G extends o{get target(){return this._target}set target(t){this.__removeTargetEvents(),this.visible=!!t,this._target=t,t&&this.onTarget()}constructor(t,e){super(e),this.config={type:"pc",stroke:"#836DFF",pointFill:"#FFFFFF",pointSize:10,pointRadius:10,rotateGap:90,hideOnMove:!1,moveCursor:"move",resizeType:"auto",resizeCursor:["nwse-resize","ns-resize","nesw-resize","ew-resize","nwse-resize","ns-resize","nesw-resize","ew-resize"],rotateCursor:["ne-resize","e-resize","se-resize","s-resize","sw-resize","w-resize","nw-resize","n-resize"],resizeable:!0,rotateable:!0},this.resizePoints=[],this.rotatePoints=[],this.resizeLines=[],this.targetRect=new r({hitFill:"all",hitRadius:5}),this.rect=new n({hittable:!1,strokeAlign:"center"}),this.circle=new r({around:"center",hitRadius:10}),this.__eventIds=[],this.__targetEventIds=[],t&&(this.config=a.default(t,this.config)),this.init()}init(){let t,e,i;const{resizePoints:s,rotatePoints:o,resizeLines:n}=this;for(let a=0;a<8;a++)t=new r({around:"center",width:30,height:30,hitRadius:10,hitFill:"all"}),o.push(t),this.__listenPointEvents(t,"rotate",a),a%2&&(e=new r({around:"center",width:10,height:10,hitFill:"all"}),n.push(e),this.__listenPointEvents(e,"resize",a)),i=new r({around:"center",hitRadius:5}),s.push(i),this.__listenPointEvents(i,"resize",a);this.__listenPointEvents(this.circle,"rotate",1),this.addMany(...o,this.targetRect,this.rect,this.circle,...n,...s),this.__listenEvents()}onTarget(){this.tool=this.getTool(this.target),this.waitLeafer((()=>{this.update(),this.updateMoveCursor(),this.__listenTargetEvents()}))}getTool(t){return"Line"===t.tag&&t.resizeable?B:A}update(){this.target&&this.tool.update(this)}onDrag(t){const{resizeable:e,rotateable:i}=this.config;t.metaKey||t.ctrlKey||!e?i&&this.onRotate(t):this.onResize(t)}onMove(t){const{target:e}=this,{x:i,y:s}=t.getLocalMove(e);t.shiftKey?Math.abs(i)>Math.abs(s)?e.x+=i:e.y+=s:(e.x+=i,e.y+=s)}onRotate(t){const{target:e}=this,{rotateGap:i}=this.config,{x:s,y:o,width:r,height:n}=e.boxBounds,a={x:s+r/2,y:o+n/2};let g;if(t instanceof h)g=t.rotation;else{const i=t,s={x:i.x-t.moveX,y:i.y-t.moveY};g=l.getChangeAngle(s,e.getWorldPoint(a),i)}g=c.getGapRotation(e.rotation+g,i)-e.rotation;const y=new j(j.ROTATE,{editor:this,target:e,origin:a,rotation:g});this.tool.rotate(y),e.emitEvent(y)}onResize(t){const{target:e}=this,{__direction:i}=t.current.__;let{resizeType:s,around:o,lockRatio:r}=this.config;t.shiftKey&&(r=!0),t.altKey&&!o&&(o="center"),"auto"===s&&(s=e.resizeable?"size":"scale");const n=function(t,e,i,s,o){o&&(i.x*=2,i.y*=2);let r,n=1,a=1;const{x:h,y:l,width:c,height:g}=t,y=(-i.y+g)/g,d=(i.x+c)/c,u=(i.y+g)/g,_=(-i.x+c)/c;switch(e){case f:a=y,s&&(n=a),r={x:h+c/2,y:l+g};break;case z:n=d,s&&(a=n),r={x:h,y:l+g/2};break;case w:a=u,s&&(n=a),r={x:h+c/2,y:l};break;case E:n=_,s&&(a=n),r={x:h+c,y:l+g/2};break;case v:a=y,n=_,s&&(n=a),r={x:h+c,y:l+g};break;case p:a=y,n=d,s&&(n=a),r={x:h,y:l+g};break;case R:a=u,n=d,s&&(n=a),r={x:h,y:l};break;case m:a=u,n=_,s&&(n=a),r={x:h+c,y:l}}return o&&(r="object"==typeof o?{x:h+c/o.x,y:l+g/o.y}:{x:h+c/2,y:l+g/2}),b(M),x(M,r,n,a),{bounds:{x:t.x+M.e,y:t.y+M.f,width:c*n,height:g*a},old:t,origin:r,scaleX:n,scaleY:a,direction:e,lockRatio:s,around:o}}(e.boxBounds,i,t.getInnerMove(this.targetRect),r,o),a=new S(S.RESIZE,Object.assign(Object.assign({},n),{target:e,editor:this,dragEvent:t,resizeType:s}));this.tool.resize(a),e.emitEvent(a)}updateMoveCursor(){this.targetRect.cursor=this.config.moveCursor}__listenEvents(){this.__eventIds=[this.targetRect.on_(g.START,(()=>{this.opacity=this.config.hideOnMove?0:1})),this.targetRect.on_(g.DRAG,this.onMove,this),this.targetRect.on_(g.END,(()=>{this.opacity=1})),this.targetRect.on_(y.ENTER,this.updateMoveCursor,this)]}__removeListenEvents(){this.targetRect.off_(this.__eventIds),this.__eventIds.length=0}__listenPointEvents(t,e,i){t.__.__direction=i;const s=t.__.__isResizePoint="resize"===e;t.on_(g.DRAG,s?this.onDrag:this.onRotate,this),t.on_(y.LEAVE,(()=>this.enterPoint=null)),t.on_(y.ENTER,(e=>{this.enterPoint=t,X(this,e)}))}__listenTargetEvents(){if(this.target){const{leafer:t}=this.target;this.__targetEventIds=[t.on_(d.START,this.update,this),t.on_([u.HOLD,u.UP],(t=>{X(this,t)}))]}}__removeTargetEvents(){if(this.__targetEventIds.length){const{leafer:t}=this.target;t&&t.off_(this.__targetEventIds),this.__targetEventIds.length=0}}destroy(){this.__removeListenEvents(),this._target=null,super.destroy()}}export{G as Editor,S as EditorResizeEvent,j as EditorRotateEvent,B as LineTool,A as RectTool};