@leafer-in/editor 1.0.0 → 1.0.1

package/dist/editor.cjs

@@ -435,7 +435,7 @@ class EditSelect extends draw.Group {
     }
     onPointerMove(e) {
         const { app, editor } = this;
-        if (this.running && !this.isMoveMode && app.config.pointer.hover && !app.interaction.dragging) {
+        if (this.running && !this.isMoveMode && app.interaction.canHover && !app.interaction.dragging) {
             const find = this.findUI(e);
             editor.hoverTarget = editor.hasItem(find) ? null : find;
         }
@@ -444,15 +444,27 @@ class EditSelect extends draw.Group {
         }
     }
     onBeforeDown(e) {
+        if (e.multiTouch)
+            return;
         const { select } = this.editor.mergeConfig;
-        if (select === 'press')
-            this.checkAndSelect(e);
+        if (select === 'press') {
+            if (this.app.config.mobile) {
+                this.waitSelect = () => this.checkAndSelect(e);
+            }
+            else {
+                this.checkAndSelect(e);
+            }
+        }
     }
     onTap(e) {
+        if (e.multiTouch)
+            return;
         const { editor } = this;
         const { select } = editor.mergeConfig;
         if (select === 'tap')
             this.checkAndSelect(e);
+        else if (this.waitSelect)
+            this.waitSelect();
         if (this.needRemoveItem) {
             editor.removeItem(this.needRemoveItem);
         }
@@ -483,6 +495,10 @@ class EditSelect extends draw.Group {
         }
     }
     onDragStart(e) {
+        if (e.multiTouch)
+            return;
+        if (this.waitSelect)
+            this.waitSelect();
         if (this.allowDrag(e)) {
             const { editor } = this;
             const { stroke, area } = editor.mergeConfig;
@@ -494,10 +510,10 @@ class EditSelect extends draw.Group {
         }
     }
     onDrag(e) {
-        if (this.editor.dragging) {
-            this.onDragEnd();
+        if (e.multiTouch)
             return;
-        }
+        if (this.editor.dragging)
+            return this.onDragEnd(e);
         if (this.dragging) {
             const { editor } = this;
             const total = e.getInnerTotal(this);
@@ -521,7 +537,9 @@ class EditSelect extends draw.Group {
             }
         }
     }
-    onDragEnd() {
+    onDragEnd(e) {
+        if (e.multiTouch)
+            return;
         if (this.dragging)
             this.originList = null, this.selectArea.visible = false;
     }
@@ -567,7 +585,7 @@ class EditSelect extends draw.Group {
                 app.on_(core.PointerEvent.MOVE, this.onPointerMove, this),
                 app.on_(core.PointerEvent.BEFORE_DOWN, this.onBeforeDown, this),
                 app.on_(core.PointerEvent.TAP, this.onTap, this),
-                app.on_(core.DragEvent.START, this.onDragStart, this),
+                app.on_(core.DragEvent.START, this.onDragStart, this, true),
                 app.on_(core.DragEvent.DRAG, this.onDrag, this),
                 app.on_(core.DragEvent.END, this.onDragEnd, this),
                 app.on_(core.MoveEvent.MOVE, this.onAutoMove, this),
@@ -590,22 +608,32 @@ class EditSelect extends draw.Group {
 
 const { topLeft, top, topRight, right: right$1, bottomRight, bottom, bottomLeft, left: left$1 } = draw.Direction9;
 const { toPoint } = draw.AroundHelper;
+const { within } = draw.MathHelper;
 const EditDataHelper = {
-    getScaleData(bounds, direction, pointMove, lockRatio, around) {
+    getScaleData(element, startBounds, direction, totalMove, lockRatio, around, flipable, scaleMode) {
         let align, origin = {}, scaleX = 1, scaleY = 1;
-        const { width, height } = bounds;
+        const { boxBounds, widthRange, heightRange } = element;
+        const { width, height } = startBounds;
         if (around) {
-            pointMove.x *= 2;
-            pointMove.y *= 2;
-        }
-        if (Math.abs(pointMove.x) === width)
-            pointMove.x += 0.1;
-        if (Math.abs(pointMove.y) === height)
-            pointMove.y += 0.1;
-        const topScale = (-pointMove.y + height) / height;
-        const rightScale = (pointMove.x + width) / width;
-        const bottomScale = (pointMove.y + height) / height;
-        const leftScale = (-pointMove.x + width) / width;
+            totalMove.x *= 2;
+            totalMove.y *= 2;
+        }
+        const originChangedScaleX = element.scaleX / startBounds.scaleX;
+        const originChangedScaleY = element.scaleY / startBounds.scaleY;
+        const signX = originChangedScaleX < 0 ? -1 : 1;
+        const signY = originChangedScaleY < 0 ? -1 : 1;
+        const changedScaleX = scaleMode ? originChangedScaleX : signX * boxBounds.width / width;
+        const changedScaleY = scaleMode ? originChangedScaleY : signY * boxBounds.height / height;
+        totalMove.x *= scaleMode ? originChangedScaleX : signX;
+        totalMove.y *= scaleMode ? originChangedScaleY : signY;
+        if (Math.abs(totalMove.x) === width)
+            totalMove.x += 0.1;
+        if (Math.abs(totalMove.y) === height)
+            totalMove.y += 0.1;
+        const topScale = (-totalMove.y + height) / height;
+        const rightScale = (totalMove.x + width) / width;
+        const bottomScale = (totalMove.y + height) / height;
+        const leftScale = (-totalMove.x + width) / width;
         switch (direction) {
             case top:
                 scaleY = topScale;
@@ -651,7 +679,24 @@ const EditDataHelper = {
                 scaleY = scaleY < 0 ? -scale : scale;
             }
         }
-        toPoint(around || align, bounds, origin);
+        scaleX /= changedScaleX;
+        scaleY /= changedScaleY;
+        if (!flipable) {
+            const { worldTransform } = element;
+            if (scaleX < 0)
+                scaleX = 1 / boxBounds.width / worldTransform.scaleX;
+            if (scaleY < 0)
+                scaleY = 1 / boxBounds.height / worldTransform.scaleY;
+        }
+        if (widthRange) {
+            const nowWidth = boxBounds.width * element.scaleX;
+            scaleX = within(nowWidth * scaleX, widthRange) / nowWidth;
+        }
+        if (heightRange) {
+            const nowHeight = boxBounds.height * element.scaleY;
+            scaleY = within(nowHeight * scaleY, heightRange) / nowHeight;
+        }
+        toPoint(around || align, boxBounds, origin);
         return { origin, scaleX, scaleY, direction, lockRatio, around };
     },
     getRotateData(bounds, direction, current, last, around) {
@@ -772,6 +817,11 @@ function updateCursor(editor, e) {
         return;
     if (point.name === 'circle')
         return;
+    if (point.pointType === 'button') {
+        if (!point.cursor)
+            point.cursor = 'pointer';
+        return;
+    }
     let { rotation } = editBox;
     const { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editor.mergeConfig;
     const { pointType } = point, { flippedX, flippedY } = editBox;
@@ -840,9 +890,8 @@ class EditBox extends draw.Group {
             resizePoints.push(resizePoint);
             this.listenPointEvents(resizePoint, 'resize', i);
         }
-        buttons.add(circle);
         this.listenPointEvents(circle, 'rotate', 2);
-        view.addMany(...rotatePoints, rect, buttons, ...resizeLines, ...resizePoints);
+        view.addMany(...rotatePoints, rect, circle, buttons, ...resizeLines, ...resizePoints);
         this.add(view);
     }
     load() {
@@ -858,9 +907,9 @@ class EditBox extends draw.Group {
             if (!(i % 2))
                 resizeP.rotation = (i / 2) * 90;
         }
-        circle.set(this.getPointStyle(mergeConfig.rotatePoint || pointsStyle[0]));
+        circle.set(this.getPointStyle(mergeConfig.circle || mergeConfig.rotatePoint || pointsStyle[0]));
         rect.set(Object.assign({ stroke, strokeWidth }, (mergeConfig.rect || {})));
-        rect.hittable = !single && moveable;
+        rect.hittable = !single && !!moveable;
         element.syncEventer = (single && moveable) ? rect : null;
         this.app.interaction.bottomList = (single && moveable) ? [{ target: rect, proxy: element }] : null;
     }
@@ -869,7 +918,7 @@ class EditBox extends draw.Group {
         if (this.view.worldOpacity) {
             const { mergeConfig } = this.editor;
             const { width, height } = bounds;
-            const { rect, circle, resizePoints, rotatePoints, resizeLines } = this;
+            const { rect, circle, buttons, resizePoints, rotatePoints, resizeLines } = this;
             const { middlePoint, resizeable, rotateable, hideOnSmall } = mergeConfig;
             const smallSize = typeof hideOnSmall === 'number' ? hideOnSmall : 10;
             const showPoints = !(hideOnSmall && width < smallSize && height < smallSize);
@@ -899,19 +948,25 @@ class EditBox extends draw.Group {
                     }
                 }
             }
-            circle.visible = showPoints && rotateable && !!mergeConfig.rotatePoint;
+            circle.visible = showPoints && rotateable && !!(mergeConfig.circle || mergeConfig.rotatePoint);
+            if (circle.visible)
+                this.layoutCircle(mergeConfig);
             if (rect.path)
                 rect.path = null;
             rect.set(Object.assign(Object.assign({}, bounds), { visible: true }));
-            const buttonVisible = showPoints && (circle.visible || this.buttons.children.length > 1);
-            this.buttons.visible = buttonVisible;
-            if (buttonVisible)
-                this.layoutButtons();
+            buttons.visible = showPoints && buttons.children.length > 0;
+            if (buttons.visible)
+                this.layoutButtons(mergeConfig);
         }
     }
-    layoutButtons() {
-        const { buttons, resizePoints } = this;
-        const { buttonsDirection, buttonsFixed, buttonsMargin, middlePoint } = this.editor.mergeConfig;
+    layoutCircle(config) {
+        const { circleDirection, circleMargin, buttonsMargin, buttonsDirection, middlePoint } = config;
+        const direction = fourDirection.indexOf(circleDirection || ((this.buttons.children.length && buttonsDirection === 'bottom') ? 'top' : 'bottom'));
+        this.setButtonPosition(this.circle, direction, circleMargin || buttonsMargin, !!middlePoint);
+    }
+    layoutButtons(config) {
+        const { buttons } = this;
+        const { buttonsDirection, buttonsFixed, buttonsMargin, middlePoint } = config;
         const { flippedX, flippedY } = this;
         let index = fourDirection.indexOf(buttonsDirection);
         if ((index % 2 && flippedX) || ((index + 1) % 2 && flippedY)) {
@@ -919,11 +974,18 @@ class EditBox extends draw.Group {
                 index = (index + 2) % 4;
         }
         const direction = buttonsFixed ? EditDataHelper.getRotateDirection(index, this.flippedOne ? this.rotation : -this.rotation, 4) : index;
-        const point = resizePoints[direction * 2 + 1];
+        this.setButtonPosition(buttons, direction, buttonsMargin, !!middlePoint);
+        if (buttonsFixed)
+            buttons.rotation = (direction - index) * 90;
+        buttons.scaleX = flippedX ? -1 : 1;
+        buttons.scaleY = flippedY ? -1 : 1;
+    }
+    setButtonPosition(buttons, direction, buttonsMargin, useMiddlePoint) {
+        const point = this.resizePoints[direction * 2 + 1];
         const useX = direction % 2;
         const sign = (!direction || direction === 3) ? -1 : 1;
-        const useWidth = index % 2;
-        const margin = (buttonsMargin + (useWidth ? ((middlePoint ? point.width : 0) + buttons.boxBounds.width) : ((middlePoint ? point.height : 0) + buttons.boxBounds.height)) / 2) * sign;
+        const useWidth = direction % 2;
+        const margin = (buttonsMargin + (useWidth ? ((useMiddlePoint ? point.width : 0) + buttons.boxBounds.width) : ((useMiddlePoint ? point.height : 0) + buttons.boxBounds.height)) / 2) * sign;
         if (useX) {
             buttons.x = point.x + margin;
             buttons.y = point.y;
@@ -932,11 +994,6 @@ class EditBox extends draw.Group {
             buttons.x = point.x;
             buttons.y = point.y + margin;
         }
-        if (buttonsFixed) {
-            buttons.rotation = (direction - index) * 90;
-            buttons.scaleX = flippedX ? -1 : 1;
-            buttons.scaleY = flippedY ? -1 : 1;
-        }
     }
     unload() {
         this.visible = false;
@@ -963,12 +1020,15 @@ class EditBox extends draw.Group {
     }
     onDragStart(e) {
         this.dragging = true;
+        const { editor } = this;
         if (e.current.name === 'rect') {
-            const { editor } = this;
             this.moving = true;
             editor.dragStartPoint = { x: editor.element.x, y: editor.element.y };
             editor.opacity = editor.mergeConfig.hideOnMove ? 0 : 1;
         }
+        else if (e.current.pointType === 'resize') {
+            editor.dragStartBounds = Object.assign({}, editor.element.getLayoutBounds('box', 'local'));
+        }
     }
     onDragEnd(e) {
         this.dragging = false;
@@ -983,7 +1043,7 @@ class EditBox extends draw.Group {
             if (editor.mergeConfig.rotateable)
                 editor.onRotate(e);
         }
-        else {
+        else if (point.pointType === 'resize') {
             editor.onScale(e);
         }
         updateCursor(editor, e);
@@ -1047,8 +1107,6 @@ class EditBox extends draw.Group {
             rect.on_(core.DragEvent.START, this.onDragStart, this),
             rect.on_(core.DragEvent.DRAG, editor.onMove, editor),
             rect.on_(core.DragEvent.END, this.onDragEnd, this),
-            rect.on_(core.ZoomEvent.BEFORE_ZOOM, editor.onScale, editor, true),
-            rect.on_(core.RotateEvent.BEFORE_ROTATE, editor.onRotate, editor, true),
             rect.on_(core.PointerEvent.ENTER, () => updateMoveCursor(editor)),
             rect.on_(core.PointerEvent.DOUBLE_TAP, this.onDoubleTap, this),
             rect.on_(core.PointerEvent.LONG_PRESS, this.onLongPress, this)
@@ -1078,7 +1136,7 @@ class EditMask extends draw.UI {
             const { rect } = editor.editBox;
             const { width, height } = rect.__;
             canvas.resetTransform();
-            canvas.fillWorld(canvas.bounds, mask);
+            canvas.fillWorld(canvas.bounds, mask === true ? 'rgba(0,0,0,0.8)' : mask);
             canvas.setWorld(rect.__world, options.matrix);
             canvas.clearRect(0, 0, width, height);
         }
@@ -1163,6 +1221,7 @@ const config = {
     boxSelect: true,
     moveable: true,
     resizeable: true,
+    flipable: true,
     rotateable: true,
     skewable: true
 };
@@ -1384,29 +1443,39 @@ class Editor extends draw.Group {
         return this.mergeConfig.editSize;
     }
     onMove(e) {
-        const total = { x: e.totalX, y: e.totalY };
-        if (e.shiftKey) {
-            if (Math.abs(total.x) > Math.abs(total.y))
-                total.y = 0;
-            else
-                total.x = 0;
+        if (e instanceof core.MoveEvent) {
+            if (e.moveType !== 'drag') {
+                const { moveable, resizeable } = this.mergeConfig;
+                const move = e.getLocalMove(this.element);
+                if (moveable === 'move')
+                    e.stop(), this.move(move.x, move.y);
+                else if (resizeable === 'zoom')
+                    e.stop();
+            }
+        }
+        else {
+            const total = { x: e.totalX, y: e.totalY };
+            if (e.shiftKey) {
+                if (Math.abs(total.x) > Math.abs(total.y))
+                    total.y = 0;
+                else
+                    total.x = 0;
+            }
+            this.move(core.DragEvent.getValidMove(this.element, this.dragStartPoint, total));
         }
-        this.move(core.DragEvent.getValidMove(this.element, this.dragStartPoint, total));
     }
     onScale(e) {
         const { element } = this;
+        let { around, lockRatio, resizeable, flipable, editSize } = this.mergeConfig;
         if (e instanceof core.ZoomEvent) {
-            if (this.mergeConfig.resizeable === 'zoom') {
-                e.stop();
-                this.scaleOf(element.getInnerPoint(e), e.scale, e.scale);
-            }
+            if (resizeable === 'zoom')
+                e.stop(), this.scaleOf(element.getInnerPoint(e), e.scale, e.scale);
         }
         else {
             const { direction } = e.current;
-            let { around, lockRatio } = this.mergeConfig;
             if (e.shiftKey || element.lockRatio)
                 lockRatio = true;
-            const data = EditDataHelper.getScaleData(element.boxBounds, direction, e.getInnerMove(element), lockRatio, EditDataHelper.getAround(around, e.altKey));
+            const data = EditDataHelper.getScaleData(element, this.dragStartBounds, direction, e.getInnerTotal(element), lockRatio, EditDataHelper.getAround(around, e.altKey), flipable, this.multiple || editSize === 'scale');
             if (this.editTool.onScaleWithDrag) {
                 data.drag = e;
                 this.scaleWithDrag(data);
@@ -1417,23 +1486,21 @@ class Editor extends draw.Group {
         }
     }
     onRotate(e) {
-        const { skewable, around, rotateGap } = this.mergeConfig;
+        const { skewable, rotateable, around, rotateGap } = this.mergeConfig;
         const { direction, name } = e.current;
         if (skewable && name === 'resize-line')
             return this.onSkew(e);
         const { element } = this;
         let origin, rotation;
         if (e instanceof core.RotateEvent) {
-            if (this.mergeConfig.rotateable === 'rotate') {
-                e.stop();
-                rotation = e.rotation, origin = element.getInnerPoint(e);
-            }
+            if (rotateable === 'rotate')
+                e.stop(), rotation = e.rotation, origin = element.getInnerPoint(e);
             else
                 return;
         }
         else {
             const last = { x: e.x - e.moveX, y: e.y - e.moveY };
-            const data = EditDataHelper.getRotateData(element.boxBounds, direction, e.getInner(element), element.getInnerPoint(last), e.shiftKey ? null : (around || 'center'));
+            const data = EditDataHelper.getRotateData(element.boxBounds, direction, e.getInner(element), element.getInnerPoint(last), e.shiftKey ? null : (element.around || element.origin || around || 'center'));
             rotation = data.rotation;
             origin = data.origin;
         }
@@ -1467,8 +1534,7 @@ class Editor extends draw.Group {
         if (!this.mergeConfig.resizeable || this.element.locked)
             return;
         const { element } = this;
-        const worldOrigin = element.getWorldPoint(data.origin);
-        const event = new EditorScaleEvent(EditorScaleEvent.SCALE, Object.assign(Object.assign({}, data), { target: element, editor: this, worldOrigin }));
+        const event = new EditorScaleEvent(EditorScaleEvent.SCALE, Object.assign(Object.assign({}, data), { target: element, editor: this, worldOrigin: element.getWorldPoint(data.origin) }));
         this.editTool.onScaleWithDrag(event);
         this.emitEvent(event);
     }
@@ -1476,28 +1542,28 @@ class Editor extends draw.Group {
         if (!this.mergeConfig.resizeable || this.element.locked)
             return;
         const { element } = this;
-        const worldOrigin = element.getWorldPoint(draw.LeafHelper.getInnerOrigin(element, origin));
-        let transform;
-        if (this.multiple) {
-            const oldMatrix = new draw.Matrix(element.worldTransform);
-            element.scaleOf(origin, scaleX, scaleY);
-            transform = new draw.Matrix(element.worldTransform).divide(oldMatrix);
-        }
+        const worldOrigin = this.getWorldOrigin(origin);
+        const transform = this.multiple && this.getChangedTransform(() => element.scaleOf(origin, scaleX, scaleY));
         const event = new EditorScaleEvent(EditorScaleEvent.SCALE, { target: element, editor: this, worldOrigin, scaleX, scaleY, transform });
         this.editTool.onScale(event);
         this.emitEvent(event);
     }
+    flip(axis) {
+        if (this.element.locked)
+            return;
+        const { element } = this;
+        const worldOrigin = this.getWorldOrigin('center');
+        const transform = this.multiple ? this.getChangedTransform(() => element.flip(axis)) : new draw.Matrix(draw.LeafHelper.getFlipTransform(element, axis));
+        const event = new EditorScaleEvent(EditorScaleEvent.SCALE, { target: element, editor: this, worldOrigin, scaleX: axis === 'x' ? -1 : 1, scaleY: axis === 'y' ? -1 : 1, transform });
+        this.editTool.onScale(event);
+        this.emitEvent(event);
+    }
     rotateOf(origin, rotation) {
         if (!this.mergeConfig.rotateable || this.element.locked)
             return;
         const { element } = this;
-        const worldOrigin = element.getWorldPoint(draw.LeafHelper.getInnerOrigin(element, origin));
-        let transform;
-        if (this.multiple) {
-            const oldMatrix = new draw.Matrix(element.worldTransform);
-            element.rotateOf(origin, rotation);
-            transform = new draw.Matrix(element.worldTransform).divide(oldMatrix);
-        }
+        const worldOrigin = this.getWorldOrigin(origin);
+        const transform = this.multiple && this.getChangedTransform(() => element.rotateOf(origin, rotation));
         const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, { target: element, editor: this, worldOrigin, rotation, transform });
         this.editTool.onRotate(event);
         this.emitEvent(event);
@@ -1506,19 +1572,21 @@ class Editor extends draw.Group {
         if (!this.mergeConfig.skewable || this.element.locked)
             return;
         const { element } = this;
-        const worldOrigin = element.getWorldPoint(draw.LeafHelper.getInnerOrigin(element, origin));
-        let transform;
-        if (this.multiple) {
-            const oldMatrix = new draw.Matrix(element.worldTransform);
-            element.skewOf(origin, skewX, skewY);
-            transform = new draw.Matrix(element.worldTransform).divide(oldMatrix);
-        }
-        const event = new EditorSkewEvent(EditorSkewEvent.SKEW, {
-            target: element, editor: this, skewX, skewY, transform, worldOrigin
-        });
+        const worldOrigin = this.getWorldOrigin(origin);
+        const transform = this.multiple && this.getChangedTransform(() => element.skewOf(origin, skewX, skewY));
+        const event = new EditorSkewEvent(EditorSkewEvent.SKEW, { target: element, editor: this, worldOrigin, skewX, skewY, transform });
         this.editTool.onSkew(event);
         this.emitEvent(event);
     }
+    getWorldOrigin(origin) {
+        return this.element.getWorldPoint(draw.LeafHelper.getInnerOrigin(this.element, origin));
+    }
+    getChangedTransform(func) {
+        const { element } = this;
+        const oldMatrix = new draw.Matrix(element.worldTransform);
+        func();
+        return new draw.Matrix(element.worldTransform).divide(oldMatrix);
+    }
     group(userGroup) {
         if (this.multiple) {
             this.target = EditorHelper.group(this.list, this.element, userGroup);
@@ -1629,6 +1697,9 @@ class Editor extends draw.Group {
         if (!this.targetEventIds.length) {
             const { leafer } = this.list[0];
             this.targetEventIds = [
+                this.app.on_(core.MoveEvent.BEFORE_MOVE, this.onMove, this, true),
+                this.app.on_(core.ZoomEvent.BEFORE_ZOOM, this.onScale, this, true),
+                this.app.on_(core.RotateEvent.BEFORE_ROTATE, this.onRotate, this, true),
                 leafer.on_(draw.RenderEvent.START, this.update, this),
                 leafer.on_([core.KeyEvent.HOLD, core.KeyEvent.UP], (e) => { updateCursor(this, e); }),
                 leafer.on_(core.KeyEvent.DOWN, this.editBox.onArrow, this.editBox)