@leafer-in/editor 1.7.0 → 1.8.0

package/dist/editor.esm.js

@@ -62,6 +62,8 @@ function targetAttr(fn) {
                         if (isSelect) {
                             if (value instanceof Array && value.length > 1 && value[0].locked)
                                 value.splice(0, 1);
+                            if (this.single)
+                                this.element.syncEventer = null;
                             const { beforeSelect } = this.config;
                             if (beforeSelect) {
                                 const check = beforeSelect({ target: value });
@@ -85,9 +87,11 @@ function mergeConfigAttr() {
     return (target, key) => {
         defineKey(target, key, {
             get() {
-                const { config, element, dragPoint } = this, mergeConfig = Object.assign({}, config);
+                const { config, element, dragPoint, editBox } = this, mergeConfig = Object.assign({}, config);
                 if (element && element.editConfig)
                     Object.assign(mergeConfig, element.editConfig);
+                if (editBox.config)
+                    Object.assign(mergeConfig, editBox.config);
                 if (dragPoint) {
                     if (dragPoint.editConfig)
                         Object.assign(mergeConfig, dragPoint.editConfig);
@@ -119,14 +123,17 @@ class Stroker extends UI {
         this.strokeAlign = 'center';
     }
     setTarget(target, style) {
-        this.set(style);
+        if (style)
+            this.set(style);
         this.target = target;
         this.update();
     }
-    update() {
+    update(style) {
         const { list } = this;
         if (list.length) {
             setListWithFn(bounds$1, list, worldBounds);
+            if (style)
+                this.set(style);
             this.set(bounds$1);
             this.visible = true;
         }
@@ -269,15 +276,14 @@ class EditSelect extends Group {
     }
     onSelect() {
         if (this.running) {
-            const { mergeConfig, list } = this.editor;
-            const { stroke, strokeWidth, selectedStyle } = mergeConfig;
-            this.targetStroker.setTarget(list, Object.assign({ stroke, strokeWidth: Math.max(1, strokeWidth / 2) }, (selectedStyle || {})));
+            this.targetStroker.setTarget(this.editor.list);
             this.hoverStroker.target = null;
         }
     }
     update() {
         this.hoverStroker.update();
-        this.targetStroker.update();
+        const { stroke, strokeWidth, selectedStyle } = this.editor.mergedConfig;
+        this.targetStroker.update(Object.assign({ stroke, strokeWidth: strokeWidth && Math.max(1, strokeWidth / 2) }, (selectedStyle || {})));
     }
     onPointerMove(e) {
         const { app, editor } = this;
@@ -553,15 +559,17 @@ const EditDataHelper = {
         toPoint(around || align, boxBounds, origin, true);
         if (dragBounds) {
             const allowBounds = dragBounds === 'parent' ? target.parent.boxBounds : dragBounds;
-            const localBounds = new Bounds(target.__localBoxBounds);
-            localBounds.scaleOf(target.getLocalPointByInner(origin), scaleX, scaleY);
-            if (!BoundsHelper.includes(allowBounds, localBounds)) {
-                const realBounds = localBounds.getIntersect(allowBounds);
-                const fitScaleX = realBounds.width / localBounds.width, fitScaleY = realBounds.height / localBounds.height;
-                if (useScaleX)
-                    scaleX *= fitScaleX;
-                if (useScaleY)
-                    scaleY *= fitScaleY;
+            const childBounds = new Bounds(target.__localBoxBounds);
+            if (BoundsHelper.includes(new Bounds(allowBounds).spread(0.1), childBounds)) {
+                childBounds.scaleOf(target.getLocalPointByInner(origin), scaleX, scaleY);
+                if (!BoundsHelper.includes(allowBounds, childBounds)) {
+                    const realBounds = childBounds.getIntersect(allowBounds);
+                    const fitScaleX = realBounds.width / childBounds.width, fitScaleY = realBounds.height / childBounds.height;
+                    if (useScaleX)
+                        scaleX *= fitScaleX;
+                    if (useScaleY)
+                        scaleY *= fitScaleY;
+                }
             }
         }
         if (useScaleX && widthRange) {
@@ -696,9 +704,9 @@ const EditDataHelper = {
 };
 
 const cacheCursors = {};
-function updateCursor(editBox, e) {
-    const { enterPoint: point } = editBox;
-    if (!point || !editBox.editor.editing || !editBox.visible)
+function updatePointCursor(editBox, e) {
+    const { enterPoint: point, dragging, skewing, resizing, flippedX, flippedY } = editBox;
+    if (!point || !editBox.editor.editing || !editBox.canUse)
         return;
     if (point.name === 'circle')
         return;
@@ -707,13 +715,15 @@ function updateCursor(editBox, e) {
             point.cursor = 'pointer';
         return;
     }
-    let { rotation, flippedX, flippedY } = editBox;
+    let { rotation } = editBox;
     const { pointType } = point, { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editBox.mergeConfig;
     let showResize = pointType.includes('resize');
     if (showResize && rotateable && (e.metaKey || e.ctrlKey || !resizeable))
         showResize = false;
     const showSkew = skewable && !showResize && (point.name === 'resize-line' || pointType === 'skew');
-    const cursor = showSkew ? skewCursor : (showResize ? resizeCursor : rotateCursor);
+    const cursor = dragging
+        ? (skewing ? skewCursor : (resizing ? resizeCursor : rotateCursor))
+        : (showSkew ? skewCursor : (showResize ? resizeCursor : rotateCursor));
     rotation += (EditDataHelper.getFlipDirection(point.direction, flippedX, flippedY) + 1) * 45;
     rotation = Math.round(MathHelper.formatRotation(rotation, true) / 2) * 2;
     const { url, x, y } = cursor;
@@ -727,7 +737,8 @@ function updateCursor(editBox, e) {
 }
 function updateMoveCursor(editBox) {
     const { moveCursor, moveable } = editBox.mergeConfig;
-    editBox.rect.cursor = moveable ? moveCursor : undefined;
+    if (editBox.canUse)
+        editBox.rect.cursor = moveable ? moveCursor : undefined;
 }
 function toDataURL(svg, rotation) {
     return '"data:image/svg+xml,' + encodeURIComponent(svg.replace('{{rotation}}', rotation.toString())) + '"';
@@ -743,8 +754,8 @@ class EditPoint extends Box {
 const fourDirection = ['top', 'right', 'bottom', 'left'], editConfig = undefined;
 class EditBox extends Group {
     get mergeConfig() {
-        const { config } = this, { mergeConfig } = this.editor;
-        return this.mergedConfig = config ? Object.assign(Object.assign({}, mergeConfig), config) : mergeConfig;
+        const { config } = this, { mergeConfig, editBox } = this.editor;
+        return this.mergedConfig = config && (editBox !== this) ? Object.assign(Object.assign({}, mergeConfig), config) : mergeConfig;
     }
     get target() { return this._target || this.editor.element; }
     set target(target) { this._target = target; }
@@ -755,6 +766,13 @@ class EditBox extends Group {
     get flippedX() { return this.scaleX < 0; }
     get flippedY() { return this.scaleY < 0; }
     get flippedOne() { return this.scaleX * this.scaleY < 0; }
+    get canUse() { return (this.visible && this.view.visible); }
+    get canGesture() {
+        if (!this.canUse)
+            return false;
+        const { moveable, resizeable, rotateable } = this.mergeConfig;
+        return typeof moveable === 'string' || typeof resizeable === 'string' || typeof rotateable === 'string';
+    }
     constructor(editor) {
         super();
         this.view = new Group();
@@ -801,8 +819,7 @@ class EditBox extends Group {
         for (let i = 0; i < 8; i++) {
             resizeP = resizePoints[i];
             resizeP.set(this.getPointStyle((i % 2) ? middlePointsStyle[((i - 1) / 2) % middlePointsStyle.length] : pointsStyle[(i / 2) % pointsStyle.length]));
-            if (!(i % 2))
-                resizeP.rotation = (i / 2) * 90;
+            resizeP.rotation = ((i - (i % 2 ? 1 : 0)) / 2) * 90;
         }
         circle.set(this.getPointStyle(mergeConfig.circle || mergeConfig.rotatePoint || pointsStyle[0]));
         rect.set(Object.assign({ stroke, strokeWidth, editConfig }, (mergeConfig.rect || {})));
@@ -821,12 +838,19 @@ class EditBox extends Group {
         this.set({ x, y, scaleX, scaleY, rotation, skewX, skewY });
         this.updateBounds({ x: 0, y: 0, width, height });
     }
+    unload() {
+        this.visible = false;
+        if (this.app)
+            this.rect.syncEventer = this.app.interaction.bottomList = null;
+    }
     updateBounds(bounds) {
         const { editMask } = this.editor;
         const { mergeConfig, single, rect, circle, buttons, resizePoints, rotatePoints, resizeLines } = this;
-        const { middlePoint, resizeable, rotateable, hideOnSmall, editBox, mask } = mergeConfig;
+        const { middlePoint, resizeable, rotateable, hideOnSmall, editBox, mask, spread } = mergeConfig;
         this.visible = !this.target.locked;
         editMask.visible = mask ? true : 0;
+        if (spread)
+            BoundsHelper.spread(bounds, spread);
         if (this.view.worldOpacity) {
             const { width, height } = bounds;
             const smallSize = typeof hideOnSmall === 'number' ? hideOnSmall : 10;
@@ -851,7 +875,6 @@ class EditBox extends Group {
                     }
                     else {
                         resizeL.height = height;
-                        resizeP.rotation = 90;
                         if (hideOnSmall && resizeP.width * 2 > height)
                             resizeP.visible = false;
                     }
@@ -906,9 +929,6 @@ class EditBox extends Group {
             buttons.y = point.y + margin;
         }
     }
-    unload() {
-        this.visible = false;
-    }
     getPointStyle(userStyle) {
         const { stroke, strokeWidth, pointFill, pointSize, pointRadius } = this.mergedConfig;
         const defaultStyle = { fill: pointFill, stroke, strokeWidth, around: 'center', strokeAlign: 'center', width: pointSize, height: pointSize, cornerRadius: pointRadius, offsetX: 0, offsetY: 0, editConfig };
@@ -922,20 +942,26 @@ class EditBox extends Group {
         const { middlePoint } = this.mergedConfig;
         return middlePoint instanceof Array ? middlePoint : (middlePoint ? [middlePoint] : this.getPointsStyle());
     }
-    onSelect(e) {
-        if (e.oldList.length === 1) {
-            e.oldList[0].syncEventer = null;
-            if (this.app)
-                this.app.interaction.bottomList = null;
-        }
-    }
     onDragStart(e) {
         this.dragging = true;
         const point = this.dragPoint = e.current, { pointType } = point;
-        const { editor, dragStartData } = this, { target } = this;
+        const { editor, dragStartData } = this, { target } = this, { moveable, resizeable, rotateable, skewable, hideOnMove } = this.mergeConfig;
         if (point.name === 'rect') {
-            this.moving = true;
-            editor.opacity = this.mergeConfig.hideOnMove ? 0 : 1;
+            moveable && (this.moving = true);
+            editor.opacity = hideOnMove ? 0 : 1;
+        }
+        else {
+            if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !resizeable) {
+                rotateable && (this.rotating = true);
+                if (pointType === 'resize-rotate')
+                    resizeable && (this.resizing = true);
+                else if (point.name === 'resize-line')
+                    skewable && (this.skewing = true), this.rotating = false;
+            }
+            else if (pointType === 'resize')
+                resizeable && (this.resizing = true);
+            if (pointType === 'skew')
+                skewable && (this.skewing = true);
         }
         dragStartData.x = e.x;
         dragStartData.y = e.y;
@@ -946,9 +972,8 @@ class EditBox extends Group {
             ResizeEvent.resizingKeys = editor.leafList.keys;
     }
     onDragEnd(e) {
-        this.dragging = false;
         this.dragPoint = null;
-        this.moving = false;
+        this.resetDoing();
         const { name, pointType } = e.current;
         if (name === 'rect')
             this.editor.opacity = 1;
@@ -956,31 +981,61 @@ class EditBox extends Group {
             ResizeEvent.resizingKeys = null;
     }
     onDrag(e) {
-        const { transformTool } = this, point = e.current;
-        if (point.name === 'rect') {
+        const { transformTool, moving, resizing, rotating, skewing } = this;
+        if (moving) {
             transformTool.onMove(e);
             updateMoveCursor(this);
         }
-        else {
-            const { pointType } = this.enterPoint = point;
-            if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !this.mergeConfig.resizeable) {
+        else if (resizing || rotating || skewing) {
+            const point = e.current;
+            if (point.pointType)
+                this.enterPoint = point;
+            if (rotating)
                 transformTool.onRotate(e);
-                if (pointType === 'resize-rotate')
-                    transformTool.onScale(e);
-            }
-            else if (pointType === 'resize')
+            if (resizing)
                 transformTool.onScale(e);
-            if (pointType === 'skew')
+            if (skewing)
                 transformTool.onSkew(e);
-            updateCursor(this, e);
+            updatePointCursor(this, e);
+        }
+    }
+    resetDoing() {
+        if (this.canUse)
+            this.dragging = this.gesturing = this.moving = this.resizing = this.rotating = this.skewing = false;
+    }
+    onMove(e) {
+        if (this.canGesture && e.moveType !== 'drag') {
+            e.stop();
+            if (typeof this.mergeConfig.moveable === 'string') {
+                this.gesturing = this.moving = true;
+                this.transformTool.onMove(e);
+            }
+        }
+    }
+    onScale(e) {
+        if (this.canGesture) {
+            e.stop();
+            if (typeof this.mergeConfig.resizeable === 'string') {
+                this.gesturing = this.resizing = true;
+                this.transformTool.onScale(e);
+            }
+        }
+    }
+    onRotate(e) {
+        if (this.canGesture) {
+            e.stop();
+            if (typeof this.mergeConfig.rotateable === 'string') {
+                this.gesturing = this.rotating = true;
+                this.transformTool.onRotate(e);
+            }
         }
     }
     onKey(e) {
-        updateCursor(this, e);
+        updatePointCursor(this, e);
     }
     onArrow(e) {
-        const { editor } = this;
-        if (editor.editing && this.mergeConfig.keyEvent) {
+        const { editor, transformTool } = this;
+        if (this.canUse && editor.editing && this.mergeConfig.keyEvent) {
             let x = 0, y = 0;
             const distance = e.shiftKey ? 10 : 1;
             switch (e.code) {
@@ -997,7 +1052,7 @@ class EditBox extends Group {
                     x = distance;
             }
             if (x || y)
-                editor.move(x, y);
+                transformTool.move(x, y);
         }
     }
     onDoubleTap(e) {
@@ -1040,12 +1095,12 @@ class EditBox extends Group {
             [PointerEvent.LEAVE, () => { this.enterPoint = null; }],
         ];
         if (point.name !== 'circle')
-            events.push([PointerEvent.ENTER, (e) => { this.enterPoint = point, updateCursor(this, e); }]);
+            events.push([PointerEvent.ENTER, (e) => { this.enterPoint = point, updatePointCursor(this, e); }]);
         this.__eventIds.push(point.on_(events));
     }
     __listenEvents() {
         const { rect, editor, __eventIds: events } = this;
-        events.push(editor.on_(EditorEvent.SELECT, this.onSelect, this), rect.on_([
+        events.push(rect.on_([
             [DragEvent.START, this.onDragStart, this],
             [DragEvent.DRAG, this.onDrag, this],
             [DragEvent.END, this.onDragEnd, this],
@@ -1056,7 +1111,13 @@ class EditBox extends Group {
         this.waitLeafer(() => {
             events.push(editor.app.on_([
                 [[KeyEvent.HOLD, KeyEvent.UP], this.onKey, this],
-                [KeyEvent.DOWN, this.onArrow, this]
+                [KeyEvent.DOWN, this.onArrow, this],
+                [MoveEvent.BEFORE_MOVE, this.onMove, this, true],
+                [ZoomEvent.BEFORE_ZOOM, this.onScale, this, true],
+                [RotateEvent.BEFORE_ROTATE, this.onRotate, this, true],
+                [MoveEvent.END, this.resetDoing, this],
+                [ZoomEvent.END, this.resetDoing, this],
+                [RotateEvent.END, this.resetDoing, this],
             ]));
         });
     }
@@ -1212,7 +1273,8 @@ function onTarget(editor, oldValue) {
         editor.simulateTarget.remove();
         editor.leafList.reset();
     }
-    editor.closeInnerEditor();
+    editor.closeInnerEditor(true);
+    editor.unloadEditTool();
     const data = { editor, value: target, oldValue };
     editor.emitEvent(new EditorEvent(EditorEvent.SELECT, data));
     editor.checkOpenedGroups();
@@ -1432,16 +1494,10 @@ EditorSkewEvent.SKEW = 'editor.skew';
 
 class TransformTool {
     onMove(e) {
-        const { target, mergeConfig, dragStartData } = this.editBox;
+        const { target, dragStartData } = this.editBox;
         if (e instanceof MoveEvent) {
-            if (e.moveType !== 'drag') {
-                const { moveable, resizeable } = mergeConfig;
-                const move = e.getLocalMove(target);
-                if (moveable === 'move')
-                    e.stop(), this.move(move.x, move.y);
-                else if (resizeable === 'zoom')
-                    e.stop();
-            }
+            const move = e.getLocalMove(target);
+            this.move(move.x, move.y);
         }
         else {
             const total = { x: e.totalX, y: e.totalY };
@@ -1456,10 +1512,9 @@ class TransformTool {
     }
     onScale(e) {
         const { target, mergeConfig, single, dragStartData } = this.editBox;
-        let { around, lockRatio, resizeable, flipable, editSize } = mergeConfig;
+        let { around, lockRatio, flipable, editSize } = mergeConfig;
         if (e instanceof ZoomEvent) {
-            if (resizeable === 'zoom')
-                e.stop(), this.scaleOf(target.getBoxPoint(e), e.scale, e.scale);
+            this.scaleOf(target.getBoxPoint(e), e.scale, e.scale);
         }
         else {
             const { direction } = e.current;
@@ -1477,28 +1532,18 @@ class TransformTool {
     }
     onRotate(e) {
         const { target, mergeConfig, dragStartData } = this.editBox;
-        const { skewable, rotateable, around, rotateGap } = mergeConfig;
-        const { direction, name } = e.current;
-        if (skewable && name === 'resize-line')
-            return this.onSkew(e);
+        const { around, rotateAround, rotateGap } = mergeConfig;
+        const { direction } = e.current;
         let origin, rotation;
         if (e instanceof RotateEvent) {
-            if (rotateable === 'rotate')
-                e.stop(), rotation = e.rotation, origin = target.getBoxPoint(e);
-            else
-                return;
-            if (target.scaleX * target.scaleY < 0)
-                rotation = -rotation;
+            rotation = e.rotation;
+            origin = rotateAround ? AroundHelper.getPoint(rotateAround, target.boxBounds) : target.getBoxPoint(e);
         }
         else {
-            const data = EditDataHelper.getRotateData(target, direction, e, dragStartData, e.shiftKey ? null : (target.around || target.origin || around || 'center'));
-            rotation = data.rotation;
+            const data = EditDataHelper.getRotateData(target, direction, e, dragStartData, e.shiftKey ? null : (rotateAround || target.around || target.origin || around || 'center'));
+            rotation = dragStartData.rotation + data.rotation - target.rotation;
             origin = data.origin;
         }
-        if (target.scaleX * target.scaleY < 0)
-            rotation = -rotation;
-        if (e instanceof DragEvent)
-            rotation = dragStartData.rotation + rotation - target.rotation;
         rotation = MathHelper.float(MathHelper.getGapRotation(rotation, rotateGap, target.rotation), 2);
         if (!rotation)
             return;
@@ -1664,9 +1709,13 @@ let Editor = class Editor extends Group {
     get groupOpening() { return !!this.openedGroupList.length; }
     get multiple() { return this.list.length > 1; }
     get single() { return this.list.length === 1; }
+    get dragPoint() { return this.editBox.dragPoint; }
     get dragging() { return this.editBox.dragging; }
+    get gesturing() { return this.editBox.gesturing; }
     get moving() { return this.editBox.moving; }
-    get dragPoint() { return this.editBox.dragPoint; }
+    get resizing() { return this.editBox.resizing; }
+    get rotating() { return this.editBox.rotating; }
+    get skewing() { return this.editBox.skewing; }
     get element() { return this.multiple ? this.simulateTarget : this.list[0]; }
     get buttons() { return this.editBox.buttons; }
     constructor(userConfig, data) {
@@ -1723,19 +1772,22 @@ let Editor = class Editor extends Group {
         this.update();
     }
     updateEditTool() {
+        this.unloadEditTool();
+        if (this.editing) {
+            const name = this.element.editOuter || 'EditTool';
+            const tool = this.editTool = this.editToolList[name] = this.editToolList[name] || EditToolCreator.get(name, this);
+            this.editBox.load();
+            tool.load();
+            this.update();
+        }
+    }
+    unloadEditTool() {
         let tool = this.editTool;
         if (tool) {
             this.editBox.unload();
             tool.unload();
             this.editTool = null;
         }
-        if (this.editing) {
-            const tag = this.element.editOuter || 'EditTool';
-            tool = this.editTool = this.editToolList[tag] = this.editToolList[tag] || EditToolCreator.get(tag, this);
-            this.editBox.load();
-            tool.load();
-            this.update();
-        }
     }
     getEditSize(_ui) {
         return this.mergeConfig.editSize;
@@ -1809,16 +1861,21 @@ let Editor = class Editor extends Group {
         if (group)
             group.emitEvent(event);
     }
-    openInnerEditor(target, select) {
+    openInnerEditor(target, nameOrSelect, select) {
+        let name;
+        if (typeof nameOrSelect === 'string')
+            name = nameOrSelect;
+        else if (!select)
+            select = nameOrSelect;
         if (target && select)
             this.target = target;
         if (this.single) {
             const editTarget = target || this.element;
-            const tag = editTarget.editInner;
-            if (tag && EditToolCreator.list[tag]) {
+            name || (name = editTarget.editInner);
+            if (name && EditToolCreator.list[name]) {
                 this.editTool.unload();
                 this.innerEditing = true;
-                this.innerEditor = this.editToolList[tag] || EditToolCreator.get(tag, this);
+                this.innerEditor = this.editToolList[name] = this.editToolList[name] || EditToolCreator.get(name, this);
                 this.innerEditor.editTarget = editTarget;
                 this.emitInnerEvent(InnerEditorEvent.BEFORE_OPEN);
                 this.innerEditor.load();
@@ -1826,13 +1883,14 @@ let Editor = class Editor extends Group {
             }
         }
     }
-    closeInnerEditor() {
+    closeInnerEditor(onlyInnerEditor) {
         if (this.innerEditing) {
             this.innerEditing = false;
             this.emitInnerEvent(InnerEditorEvent.BEFORE_CLOSE);
             this.innerEditor.unload();
             this.emitInnerEvent(InnerEditorEvent.CLOSE);
-            this.editTool.load();
+            if (!onlyInnerEditor)
+                this.updateEditTool();
             this.innerEditor = null;
         }
     }
@@ -1875,12 +1933,7 @@ let Editor = class Editor extends Group {
             const { app, leafer, editMask } = this;
             this.targetEventIds = [
                 leafer.on_(RenderEvent.START, this.onRenderStart, this),
-                app.on_([
-                    [RenderEvent.CHILD_START, this.onAppRenderStart, this],
-                    [MoveEvent.BEFORE_MOVE, this.onMove, this, true],
-                    [ZoomEvent.BEFORE_ZOOM, this.onScale, this, true],
-                    [RotateEvent.BEFORE_ROTATE, this.onRotate, this, true],
-                ])
+                app.on_(RenderEvent.CHILD_START, this.onAppRenderStart, this)
             ];
             if (editMask.visible)
                 editMask.forceRender();
@@ -2151,7 +2204,7 @@ Creator.editor = function (options, app) {
 };
 Box.addAttr('textBox', false, dataType);
 UI.addAttr('editConfig', undefined, dataType);
-UI.addAttr('editOuter', (ui) => ui.__.__isLinePath ? 'LineEditTool' : 'EditTool', dataType);
+UI.addAttr('editOuter', (ui) => { ui.updateLayout(); return ui.__.__isLinePath ? 'LineEditTool' : 'EditTool'; }, dataType);
 UI.addAttr('editInner', 'PathEditor', dataType);
 Group.addAttr('editInner', '', dataType);
 Text.addAttr('editInner', 'TextEditor', dataType);