@leafer-in/editor 1.0.0-beta.15

package/dist/editor.js

@@ -0,0 +1,520 @@
+this.LeaferIN = this.LeaferIN || {};
+this.LeaferIN.editor = (function (exports, core) {
+    'use strict';
+
+    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 } = core.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 core.Bounds(target.boxBounds);
+            const w = target.worldTransform, pw = editor.parent.worldTransform;
+            const matrix = new core.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 core.Event {
+        constructor(type, data) {
+            super(type);
+            if (data)
+                Object.assign(this, data);
+        }
+    }
+    EditorResizeEvent.RESIZE = 'editor.resize';
+
+    class EditorRotateEvent extends core.Event {
+        constructor(type, data) {
+            super(type);
+            if (data)
+                Object.assign(this, data);
+        }
+    }
+    EditorRotateEvent.ROTATE = 'editor.rotate';
+
+    class Editor extends core.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 core.Rect({ hitFill: 'all', hitRadius: 5 });
+            this.rect = new core.Polygon({ hittable: false, strokeAlign: 'center' });
+            this.circle = new core.Rect({ around: 'center', hitRadius: 10 });
+            this.__eventIds = [];
+            this.__targetEventIds = [];
+            if (userConfig)
+                this.config = core.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 core.Rect({ around: 'center', width: 30, height: 30, hitRadius: 10, hitFill: "all" });
+                rotatePoints.push(rotatePoint);
+                this.__listenPointEvents(rotatePoint, 'rotate', i);
+                if (i % 2) {
+                    resizeLine = new core.Rect({ around: 'center', width: 10, height: 10, hitFill: "all" });
+                    resizeLines.push(resizeLine);
+                    this.__listenPointEvents(resizeLine, 'resize', i);
+                }
+                resizePoint = new core.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 core.RotateEvent) {
+                rotation = e.rotation;
+            }
+            else {
+                const point = e;
+                const last = { x: point.x - e.moveX, y: point.y - e.moveY };
+                rotation = core.PointHelper.getChangeAngle(last, target.getWorldPoint(origin), point);
+            }
+            rotation = core.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_(core.DragEvent.START, () => { this.opacity = this.config.hideOnMove ? 0 : 1; }),
+                this.targetRect.on_(core.DragEvent.DRAG, this.onMove, this),
+                this.targetRect.on_(core.DragEvent.END, () => { this.opacity = 1; }),
+                this.targetRect.on_(core.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_(core.DragEvent.DRAG, resize ? this.onDrag : this.onRotate, this);
+            point.on_(core.PointerEvent.LEAVE, () => this.enterPoint = null);
+            point.on_(core.PointerEvent.ENTER, (e) => { this.enterPoint = point; updateCursor(this, e); });
+        }
+        __listenTargetEvents() {
+            if (this.target) {
+                const { leafer } = this.target;
+                this.__targetEventIds = [
+                    leafer.on_(core.RenderEvent.START, this.update, this),
+                    leafer.on_([core.KeyEvent.HOLD, core.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();
+        }
+    }
+
+    exports.Editor = Editor;
+    exports.EditorResizeEvent = EditorResizeEvent;
+    exports.EditorRotateEvent = EditorRotateEvent;
+    exports.LineTool = LineTool;
+    exports.RectTool = RectTool;
+
+    return exports;
+
+})({}, LeaferUI);

package/dist/editor.min.js

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

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@leafer-in/editor",
+  "version": "1.0.0-beta.15",
+  "description": "@leafer-in/editor",
+  "author": "Chao (Leafer) Wan",
+  "license": "MIT",
+  "main": "dist/editor.esm.js",
+  "unpkg": "dist/editor.js",
+  "jsdelivr": "dist/editor.js",
+  "types": "types/index.d.ts",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/leaferjs/in.git"
+  },
+  "homepage": "https://github.com/leaferjs/in/tree/main/packages/editor",
+  "bugs": "https://github.com/leaferjs/in/issues",
+  "keywords": [
+    "leafer editor",
+    "leafer-editor",
+    "leafer-in",
+    "editor",
+    "leafer-ui",
+    "leaferjs"
+  ],
+  "dependencies": {
+    "@leafer-ui/core": "1.0.0-beta.15",
+    "@leafer/core": "1.0.0-beta.15"
+  },
+  "devDependencies": {
+    "@leafer-ui/interface": "1.0.0-beta.15",
+    "@leafer/interface": "1.0.0-beta.15",
+    "@leafer-in/interface": "1.0.0-beta.15"
+  }
+}