@leafer-in/editor 1.0.4 → 1.0.5

package/dist/editor.cjs

@@ -318,31 +318,29 @@ class Stroker extends draw.UI {
         const { list } = this;
         if (list.length) {
             let leaf;
-            const { stroke, strokeWidth, fill } = this.__;
-            const { bounds } = options;
+            const data = this.__, { stroke, strokeWidth, fill } = data, { bounds } = options;
             for (let i = 0; i < list.length; i++) {
                 leaf = list[i];
-                if (bounds && bounds.hit(leaf.__world, options.matrix)) {
-                    const aScaleX = abs(leaf.__world.scaleX), aScaleY = abs(leaf.__world.scaleY);
+                const { worldTransform, worldRenderBounds } = leaf;
+                if (bounds && bounds.hit(worldRenderBounds, options.matrix)) {
+                    const aScaleX = abs(worldTransform.scaleX), aScaleY = abs(worldTransform.scaleY);
                     if (aScaleX !== aScaleY) {
-                        copy$1(matrix, leaf.__world);
+                        copy$1(matrix, worldTransform);
                         scale(matrix, 1 / aScaleX, 1 / aScaleY);
                         canvas.setWorld(matrix, options.matrix);
                         canvas.beginPath();
-                        this.__.strokeWidth = strokeWidth;
+                        data.strokeWidth = strokeWidth;
                         const { x, y, width, height } = leaf.__layout.boxBounds;
                         canvas.rect(x * aScaleX, y * aScaleY, width * aScaleX, height * aScaleY);
                     }
                     else {
-                        canvas.setWorld(leaf.__world, options.matrix);
+                        canvas.setWorld(worldTransform, options.matrix);
                         canvas.beginPath();
-                        if (leaf.__.__useArrow) {
+                        if (leaf.__.__useArrow)
                             leaf.__drawPath(canvas);
-                        }
-                        else {
+                        else
                             leaf.__.__pathForRender ? leaf.__drawRenderPath(canvas) : leaf.__drawPathByBox(canvas);
-                        }
-                        this.__.strokeWidth = strokeWidth / abs(leaf.__world.scaleX);
+                        data.strokeWidth = strokeWidth / abs(worldTransform.scaleX);
                     }
                     if (stroke)
                         typeof stroke === 'string' ? draw.Paint.stroke(stroke, this, canvas) : draw.Paint.strokes(stroke, this, canvas);
@@ -350,7 +348,7 @@ class Stroker extends draw.UI {
                         typeof fill === 'string' ? draw.Paint.fill(fill, this, canvas) : draw.Paint.fills(fill, this, canvas);
                 }
             }
-            this.__.strokeWidth = strokeWidth;
+            data.strokeWidth = strokeWidth;
         }
     }
     destroy() {
@@ -901,7 +899,6 @@ class EditBox extends draw.Group {
         this.editor = editor;
         this.visible = false;
         this.create();
-        this.rect.syncEventer = editor;
         this.__listenEvents();
     }
     create() {
@@ -941,8 +938,11 @@ class EditBox extends draw.Group {
         circle.set(this.getPointStyle(mergeConfig.circle || mergeConfig.rotatePoint || pointsStyle[0]));
         rect.set(Object.assign({ stroke, strokeWidth }, (mergeConfig.rect || {})));
         rect.hittable = !single && !!moveable;
-        element.syncEventer = (single && moveable) ? rect : null;
-        this.app.interaction.bottomList = (single && moveable) ? [{ target: rect, proxy: element }] : null;
+        rect.syncEventer = single && this.editor;
+        if (single && moveable) {
+            element.syncEventer = rect;
+            this.app.interaction.bottomList = [{ target: rect, proxy: element }];
+        }
     }
     update(bounds) {
         this.visible = !this.editor.element.locked;
@@ -1114,6 +1114,11 @@ class EditBox extends draw.Group {
         if (editor.single) {
             const { element } = editor;
             if (element.isBranch) {
+                if (element.textBox) {
+                    const find = element.children.find(item => item.editable && item instanceof draw.Text);
+                    if (find)
+                        return editor.openInnerEditor(find);
+                }
                 editor.openGroup(element);
                 editor.target = editor.selector.findDeepOne(e);
             }
@@ -1259,12 +1264,12 @@ const config = {
     skewable: true
 };
 
+const bounds = new draw.Bounds();
 function simulate(editor) {
-    const { simulateTarget, leafList: targetList } = editor;
-    const { x, y, width, height } = new draw.Bounds().setListWithFn(targetList.list, (leaf) => leaf.worldBoxBounds);
-    const parent = simulateTarget.parent = targetList.list[0].leafer.zoomLayer;
-    const { scaleX, scaleY, e: worldX, f: worldY } = parent.__world;
-    simulateTarget.reset({ x: (x - worldX) / scaleX, y: (y - worldY) / scaleY, width: width / scaleX, height: height / scaleY });
+    const { simulateTarget, list } = editor;
+    const { zoomLayer } = list[0].leafer.zoomLayer;
+    simulateTarget.safeChange(() => simulateTarget.reset(bounds.setListWithFn(list, (leaf) => leaf.getBounds('box', 'page')).get()));
+    zoomLayer.add(simulateTarget);
 }
 
 function onTarget(editor, oldValue) {
@@ -1273,6 +1278,7 @@ function onTarget(editor, oldValue) {
         editor.leafList = target instanceof draw.LeafList ? target : new draw.LeafList(target instanceof Array ? target : target);
     }
     else {
+        editor.simulateTarget.remove();
         editor.leafList.reset();
         editor.closeInnerEditor();
     }
@@ -1327,7 +1333,7 @@ const EditorHelper = {
         const ungroupList = [];
         app.lockLayout();
         list.forEach(leaf => {
-            if (leaf.isBranch) {
+            if (leaf.isBranch && !leaf.isBranchLeaf) {
                 const { parent, children } = leaf;
                 while (children.length) {
                     ungroupList.push(children[0]);
@@ -1398,17 +1404,77 @@ EditorGroupEvent.UNGROUP = 'editor.ungroup';
 EditorGroupEvent.OPEN = 'editor.open_group';
 EditorGroupEvent.CLOSE = 'editor.close_group';
 
+const { updateMatrix } = draw.LeafHelper;
+const checkMap = { x: 1, y: 1, scaleX: 1, scaleY: 1, rotation: 1, skewX: 1, skewY: 1 }, origin = 'top-left';
+class SimulateElement extends draw.Rect {
+    get __tag() { return 'SimulateElement'; }
+    constructor(editor) {
+        super();
+        this.checkChange = true;
+        this.canChange = true;
+        this.visible = this.hittable = false;
+        this.on(draw.PropertyEvent.CHANGE, (event) => {
+            if (this.checkChange && checkMap[event.attrName]) {
+                const { attrName, newValue, oldValue } = event;
+                const addValue = attrName[0] === 's' ? (newValue || 1) / (oldValue || 1) : (newValue || 0) - (oldValue || 0);
+                this.canChange = false;
+                const data = this.__;
+                data[attrName] = oldValue;
+                updateMatrix(this.parent);
+                updateMatrix(this);
+                const oldMatrix = new draw.Matrix(this.__world);
+                data[attrName] = newValue;
+                this.__layout.rotationChange();
+                updateMatrix(this);
+                this.changedTransform = new draw.Matrix(this.__world).divide(oldMatrix);
+                switch (attrName) {
+                    case 'x':
+                        editor.move(addValue, 0);
+                        break;
+                    case 'y':
+                        editor.move(0, addValue);
+                        break;
+                    case 'rotation':
+                        editor.rotateOf(origin, addValue);
+                        break;
+                    case 'scaleX':
+                        editor.scaleOf(origin, addValue, 1);
+                        break;
+                    case 'scaleY':
+                        editor.scaleOf(origin, 1, addValue);
+                        break;
+                    case 'skewX':
+                        editor.skewOf(origin, addValue, 0);
+                        break;
+                    case 'skewY':
+                        editor.skewOf(origin, 0, addValue);
+                }
+                this.canChange = true;
+            }
+        });
+    }
+    safeChange(changeFn) {
+        if (this.canChange) {
+            this.checkChange = false;
+            changeFn();
+            this.checkChange = true;
+        }
+    }
+}
+
 class Editor extends draw.Group {
     get mergeConfig() {
         const { element, config } = this;
         return this.single && element.editConfig ? Object.assign(Object.assign({}, config), element.editConfig) : config;
     }
     get list() { return this.leafList.list; }
+    get dragHoverExclude() { return [this.editBox.rect]; }
     get editing() { return !!this.list.length; }
     get groupOpening() { return !!this.openedGroupList.length; }
     get multiple() { return this.list.length > 1; }
     get single() { return this.list.length === 1; }
     get dragging() { return this.editBox.dragging; }
+    get moving() { return this.editBox.moving; }
     get element() { return this.multiple ? this.simulateTarget : this.list[0]; }
     get buttons() { return this.editBox.buttons; }
     constructor(userConfig, data) {
@@ -1416,7 +1482,7 @@ class Editor extends draw.Group {
         this.config = draw.DataHelper.clone(config);
         this.leafList = new draw.LeafList();
         this.openedGroupList = new draw.LeafList();
-        this.simulateTarget = new draw.Rect({ visible: false });
+        this.simulateTarget = new SimulateElement(this);
         this.editBox = new EditBox(this);
         this.editToolList = {};
         this.selector = new EditSelect(this);
@@ -1554,18 +1620,18 @@ class Editor extends draw.Group {
         this.skewOf(origin, skewX, skewY);
     }
     move(x, y = 0) {
-        if (!this.mergeConfig.moveable || this.element.locked)
+        if (!this.checkTransform('moveable'))
             return;
         const { element } = this;
         const world = element.getWorldPointByLocal(typeof x === 'object' ? Object.assign({}, x) : { x, y }, null, true);
+        if (this.multiple)
+            element.safeChange(() => element.move(x, y));
         const event = new EditorMoveEvent(EditorMoveEvent.MOVE, { target: element, editor: this, moveX: world.x, moveY: world.y });
         this.editTool.onMove(event);
         this.emitEvent(event);
-        if (this.multiple)
-            element.move(x, y);
     }
     scaleWithDrag(data) {
-        if (!this.mergeConfig.resizeable || this.element.locked)
+        if (!this.checkTransform('resizeable'))
             return;
         const { element } = this;
         const event = new EditorScaleEvent(EditorScaleEvent.SCALE, Object.assign(Object.assign({}, data), { target: element, editor: this, worldOrigin: element.getWorldPoint(data.origin) }));
@@ -1573,50 +1639,53 @@ class Editor extends draw.Group {
         this.emitEvent(event);
     }
     scaleOf(origin, scaleX, scaleY = scaleX, _resize) {
-        if (!this.mergeConfig.resizeable || this.element.locked)
+        if (!this.checkTransform('resizeable'))
             return;
         const { element } = this;
         const worldOrigin = this.getWorldOrigin(origin);
-        const transform = this.multiple && this.getChangedTransform(() => element.scaleOf(origin, scaleX, scaleY));
+        const transform = this.multiple && this.getChangedTransform(() => element.safeChange(() => 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)
+        if (!this.checkTransform('resizeable'))
             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 transform = this.multiple ? this.getChangedTransform(() => element.safeChange(() => 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)
+        if (!this.checkTransform('rotateable'))
             return;
         const { element } = this;
         const worldOrigin = this.getWorldOrigin(origin);
-        const transform = this.multiple && this.getChangedTransform(() => element.rotateOf(origin, rotation));
+        const transform = this.multiple && this.getChangedTransform(() => element.safeChange(() => element.rotateOf(origin, rotation)));
         const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, { target: element, editor: this, worldOrigin, rotation, transform });
         this.editTool.onRotate(event);
         this.emitEvent(event);
     }
     skewOf(origin, skewX, skewY = 0, _resize) {
-        if (!this.mergeConfig.skewable || this.element.locked)
+        if (!this.checkTransform('skewable'))
             return;
         const { element } = this;
         const worldOrigin = this.getWorldOrigin(origin);
-        const transform = this.multiple && this.getChangedTransform(() => element.skewOf(origin, skewX, skewY));
+        const transform = this.multiple && this.getChangedTransform(() => element.safeChange(() => 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);
     }
+    checkTransform(type) { return this.element && !this.element.locked && this.mergeConfig[type]; }
     getWorldOrigin(origin) {
         return this.element.getWorldPoint(draw.LeafHelper.getInnerOrigin(this.element, origin));
     }
     getChangedTransform(func) {
         const { element } = this;
+        if (this.multiple && !element.canChange)
+            return element.changedTransform;
         const oldMatrix = new draw.Matrix(element.worldTransform);
         func();
         return new draw.Matrix(element.worldTransform).divide(oldMatrix);
@@ -1673,11 +1742,11 @@ class Editor extends draw.Group {
         this.emitEvent(event);
         group.emitEvent(event);
     }
-    openInnerEditor(target) {
-        if (target)
+    openInnerEditor(target, select) {
+        if (target && select)
             this.target = target;
         if (this.single) {
-            const editTarget = this.element;
+            const editTarget = target || this.element;
             const tag = editTarget.editInner;
             if (tag && EditToolCreator.list[tag]) {
                 this.editTool.unload();
@@ -1729,14 +1798,15 @@ class Editor extends draw.Group {
     }
     listenTargetEvents() {
         if (!this.targetEventIds.length) {
-            const { leafer } = this.list[0];
+            const { app, leafer } = this;
             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)
+                app.on_(draw.RenderEvent.CHILD_START, this.forceRender, this),
+                app.on_(core.MoveEvent.BEFORE_MOVE, this.onMove, this, true),
+                app.on_(core.ZoomEvent.BEFORE_ZOOM, this.onScale, this, true),
+                app.on_(core.RotateEvent.BEFORE_ROTATE, this.onRotate, this, true),
+                app.on_([core.KeyEvent.HOLD, core.KeyEvent.UP], (e) => { updateCursor(this, e); }),
+                app.on_(core.KeyEvent.DOWN, this.editBox.onArrow, this.editBox)
             ];
         }
     }
@@ -1869,10 +1939,7 @@ exports.EditTool = class EditTool extends InnerEditor {
     }
     update() {
         const { editor, editBox } = this;
-        const { simulateTarget, element } = editor;
-        if (editor.multiple)
-            simulateTarget.parent.updateLayout();
-        const { x, y, scaleX, scaleY, rotation, skewX, skewY, width, height } = element.getLayoutBounds('box', editor, true);
+        const { x, y, scaleX, scaleY, rotation, skewX, skewY, width, height } = editor.element.getLayoutBounds('box', editor, true);
         editBox.set({ x, y, scaleX, scaleY, rotation, skewX, skewY });
         editBox.update({ x: 0, y: 0, width, height });
         this.onUpdate();