@leafer-in/editor 1.0.0 → 1.0.1

package/dist/editor.js

@@ -434,7 +434,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
         }
         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;
             }
@@ -443,15 +443,27 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             }
         }
         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);
             }
@@ -482,6 +494,10 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             }
         }
         onDragStart(e) {
+            if (e.multiTouch)
+                return;
+            if (this.waitSelect)
+                this.waitSelect();
             if (this.allowDrag(e)) {
                 const { editor } = this;
                 const { stroke, area } = editor.mergeConfig;
@@ -493,10 +509,10 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             }
         }
         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);
@@ -520,7 +536,9 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                 }
             }
         }
-        onDragEnd() {
+        onDragEnd(e) {
+            if (e.multiTouch)
+                return;
             if (this.dragging)
                 this.originList = null, this.selectArea.visible = false;
         }
@@ -566,7 +584,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                     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),
@@ -589,22 +607,32 @@ this.LeaferIN.editor = (function (exports, draw, core) {
 
     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;
@@ -650,7 +678,24 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                     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) {
@@ -771,6 +816,11 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             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;
@@ -839,9 +889,8 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                 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() {
@@ -857,9 +906,9 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                 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;
         }
@@ -868,7 +917,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             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);
@@ -898,19 +947,25 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                         }
                     }
                 }
-                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)) {
@@ -918,11 +973,18 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                     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;
@@ -931,11 +993,6 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                 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;
@@ -962,12 +1019,15 @@ this.LeaferIN.editor = (function (exports, draw, core) {
         }
         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;
@@ -982,7 +1042,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                 if (editor.mergeConfig.rotateable)
                     editor.onRotate(e);
             }
-            else {
+            else if (point.pointType === 'resize') {
                 editor.onScale(e);
             }
             updateCursor(editor, e);
@@ -1046,8 +1106,6 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                 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)
@@ -1077,7 +1135,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                 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);
             }
@@ -1162,6 +1220,7 @@ ${filterStyle}
         boxSelect: true,
         moveable: true,
         resizeable: true,
+        flipable: true,
         rotateable: true,
         skewable: true
     };
@@ -1383,29 +1442,39 @@ ${filterStyle}
             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);
@@ -1416,23 +1485,21 @@ ${filterStyle}
             }
         }
         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;
             }
@@ -1466,8 +1533,7 @@ ${filterStyle}
             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);
         }
@@ -1475,28 +1541,28 @@ ${filterStyle}
             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);
@@ -1505,19 +1571,21 @@ ${filterStyle}
             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);
@@ -1628,6 +1696,9 @@ ${filterStyle}
             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)