@leafer-in/editor 1.9.5 → 1.9.7

package/dist/editor.cjs

@@ -54,12 +54,15 @@ function targetAttr(fn) {
             set(value) {
                 const old = this[privateKey];
                 if (old !== value) {
-                    if (this.config) {
+                    const t = this;
+                    if (t.config) {
                         const isSelect = key === "target";
                         if (isSelect) {
+                            t.setDimOthers(false);
+                            t.setBright(false);
                             if (draw.isArray(value) && value.length > 1 && value[0].locked) value.splice(0, 1);
-                            if (this.single) this.element.syncEventer = null;
-                            const {beforeSelect: beforeSelect} = this.config;
+                            if (t.single) t.element.syncEventer = null;
+                            const {beforeSelect: beforeSelect} = t.config;
                             if (beforeSelect) {
                                 const check = beforeSelect({
                                     target: value
@@ -69,7 +72,7 @@ function targetAttr(fn) {
                         }
                         const type = isSelect ? EditorEvent.BEFORE_SELECT : EditorEvent.BEFORE_HOVER;
                         if (this.hasEvent(type)) this.emitEvent(new EditorEvent(type, {
-                            editor: this,
+                            editor: t,
                             value: value,
                             oldValue: old
                         }));
@@ -252,7 +255,7 @@ class EditSelect extends draw.Group {
     }
     get running() {
         const {editor: editor} = this;
-        return this.hittable && editor.visible && editor.hittable && editor.mergeConfig.selector;
+        return this.hittable && editor.visible && editor.hittable && editor.mergeConfig.selector && this.app.mode === "normal";
     }
     get isMoveMode() {
         return this.app && this.app.interaction.moveMode;
@@ -554,17 +557,13 @@ const EditDataHelper = {
         }
         toPoint(around || align, boxBounds, origin, true);
         if (dragBounds) {
-            const allowBounds = dragBounds === "parent" ? target.parent.boxBounds : dragBounds;
-            const childBounds = new draw.Bounds(target.__localBoxBounds);
-            if (draw.BoundsHelper.includes(new draw.Bounds(allowBounds).spread(.1), childBounds)) {
-                childBounds.scaleOf(target.getLocalPointByInner(origin), scaleX, scaleY);
-                if (!draw.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;
-                }
-            }
+            const scaleData = {
+                x: scaleX,
+                y: scaleY
+            };
+            draw.DragBoundsHelper.limitScaleOf(target, origin, scaleData);
+            scaleX = scaleData.x;
+            scaleY = scaleData.y;
         }
         if (useScaleX && widthRange) {
             const nowWidth = boxBounds.width * target.scaleX;
@@ -744,13 +743,18 @@ const cacheCursors = {};
 function updatePointCursor(editBox, e) {
     const {enterPoint: point, dragging: dragging, skewing: skewing, resizing: resizing, flippedX: flippedX, flippedY: flippedY} = editBox;
     if (!point || !editBox.editor.editing || !editBox.canUse) return;
+    if (point.name === "rect") return updateMoveCursor(editBox);
     if (point.name === "circle") return;
-    if (point.pointType === "button") {
+    let {rotation: rotation} = editBox;
+    const {pointType: pointType} = point, {moveCursor: moveCursor, resizeCursor: resizeCursor, rotateCursor: rotateCursor, skewCursor: skewCursor, moveable: moveable, resizeable: resizeable, rotateable: rotateable, skewable: skewable} = editBox.mergeConfig;
+    if (pointType === "move") {
+        point.cursor = moveCursor;
+        if (!moveable) point.visible = false;
+        return;
+    } else if (pointType === "button") {
         if (!point.cursor) point.cursor = "pointer";
         return;
     }
-    let {rotation: rotation} = editBox;
-    const {pointType: pointType} = point, {resizeCursor: resizeCursor, rotateCursor: rotateCursor, skewCursor: skewCursor, resizeable: resizeable, rotateable: rotateable, skewable: skewable} = editBox.mergeConfig;
     let showResize = pointType.includes("resize");
     if (showResize && rotateable && (editBox.isHoldRotateKey(e) || !resizeable)) showResize = false;
     const showSkew = skewable && !showResize && (point.name === "resize-line" || pointType === "skew");
@@ -831,7 +835,7 @@ class EditBox extends draw.Group {
     constructor(editor) {
         super();
         this.view = new draw.Group;
-        this.rect = new draw.Box({
+        this.rect = new EditPoint({
             name: "rect",
             hitFill: "all",
             hitStroke: "none",
@@ -893,12 +897,13 @@ class EditBox extends draw.Group {
             this.listenPointEvents(resizePoint, "resize", i);
         }
         this.listenPointEvents(circle, "rotate", 2);
+        this.listenPointEvents(rect, "move", 8);
         view.addMany(...rotatePoints, rect, circle, buttons, ...resizeLines, ...resizePoints);
         this.add(view);
     }
     load() {
-        const {target: target, mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, resizePoints: resizePoints} = this;
-        const {stroke: stroke, strokeWidth: strokeWidth} = mergeConfig;
+        const {target: target, mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, resizePoints: resizePoints, resizeLines: resizeLines} = this;
+        const {stroke: stroke, strokeWidth: strokeWidth, resizeLine: resizeLine} = mergeConfig;
         const pointsStyle = this.getPointsStyle();
         const middlePointsStyle = this.getMiddlePointsStyle();
         this.visible = !target.locked;
@@ -907,6 +912,10 @@ class EditBox extends draw.Group {
             resizeP = resizePoints[i];
             resizeP.set(this.getPointStyle(i % 2 ? middlePointsStyle[(i - 1) / 2 % middlePointsStyle.length] : pointsStyle[i / 2 % pointsStyle.length]));
             resizeP.rotation = (i - (i % 2 ? 1 : 0)) / 2 * 90;
+            if (i % 2) resizeLines[(i - 1) / 2].set(Object.assign({
+                pointType: "resize",
+                rotation: (i - 1) / 2 * 90
+            }, resizeLine || {}));
         }
         circle.set(this.getPointStyle(mergeConfig.circle || mergeConfig.rotatePoint || pointsStyle[0]));
         rect.set(Object.assign({
@@ -951,10 +960,12 @@ class EditBox extends draw.Group {
         if (this.app) this.rect.syncEventer = this.app.interaction.bottomList = null;
     }
     updateBounds(bounds) {
-        const {editMask: editMask} = this.editor;
-        const {mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, buttons: buttons, resizePoints: resizePoints, rotatePoints: rotatePoints, resizeLines: resizeLines} = this;
-        const {middlePoint: middlePoint, resizeable: resizeable, rotateable: rotateable, hideOnSmall: hideOnSmall, editBox: editBox, mask: mask, spread: spread, hideRotatePoints: hideRotatePoints, hideResizeLines: hideResizeLines} = mergeConfig;
+        const {editor: editor, mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, buttons: buttons, resizePoints: resizePoints, rotatePoints: rotatePoints, resizeLines: resizeLines} = this;
+        const {editMask: editMask} = editor;
+        const {middlePoint: middlePoint, resizeable: resizeable, rotateable: rotateable, hideOnSmall: hideOnSmall, editBox: editBox, mask: mask, dimOthers: dimOthers, bright: bright, spread: spread, hideRotatePoints: hideRotatePoints, hideResizeLines: hideResizeLines} = mergeConfig;
         editMask.visible = mask ? true : 0;
+        editor.setDimOthers(dimOthers);
+        editor.setBright(!!dimOthers || bright);
         if (spread) draw.BoundsHelper.spread(bounds, spread);
         if (this.view.worldOpacity) {
             const {width: width, height: height} = bounds;
@@ -975,10 +986,10 @@ class EditBox extends draw.Group {
                     resizeL.visible = resizeP.visible && !hideResizeLines;
                     resizeP.visible = rotateP.visible = showPoints && !!middlePoint;
                     if ((i + 1) / 2 % 2) {
-                        resizeL.width = width;
+                        resizeL.width = width + resizeL.height;
                         if (hideOnSmall && resizeP.width * 2 > width) resizeP.visible = false;
                     } else {
-                        resizeL.height = height;
+                        resizeL.width = height + resizeL.height;
                         if (hideOnSmall && resizeP.width * 2 > height) resizeP.visible = false;
                     }
                 }
@@ -1055,7 +1066,7 @@ class EditBox extends draw.Group {
         this.dragging = true;
         const point = this.dragPoint = e.current, {pointType: pointType} = point;
         const {editor: editor, dragStartData: dragStartData} = this, {target: target} = this, {moveable: moveable, resizeable: resizeable, rotateable: rotateable, skewable: skewable, hideOnMove: hideOnMove} = this.mergeConfig;
-        if (point.name === "rect") {
+        if (pointType === "move") {
             moveable && (this.moving = true);
             editor.opacity = hideOnMove ? 0 : 1;
         } else {
@@ -1080,23 +1091,22 @@ class EditBox extends draw.Group {
         if (this.moving && this.mergeConfig.dragLimitAnimate && this.target.dragBounds) this.transformTool.onMove(e);
         this.dragPoint = null;
         this.resetDoing();
-        const {name: name, pointType: pointType} = e.current;
-        if (name === "rect") this.editor.opacity = 1;
+        const {pointType: pointType} = e.current;
+        if (pointType === "move") this.editor.opacity = 1;
         if (pointType && pointType.includes("resize")) draw.ResizeEvent.resizingKeys = null;
     }
     onDrag(e) {
         const {transformTool: transformTool, moving: moving, resizing: resizing, rotating: rotating, skewing: skewing} = this;
         if (moving) {
             transformTool.onMove(e);
-            updateMoveCursor(this);
         } else if (resizing || rotating || skewing) {
             const point = e.current;
             if (point.pointType) this.enterPoint = point;
             if (rotating) transformTool.onRotate(e);
             if (resizing) transformTool.onScale(e);
             if (skewing) transformTool.onSkew(e);
-            updatePointCursor(this, e);
         }
+        updatePointCursor(this, e);
     }
     resetDoing() {
         if (this.canUse) this.dragging = this.gesturing = this.moving = this.resizing = this.rotating = this.skewing = false;
@@ -1192,17 +1202,15 @@ class EditBox extends draw.Group {
     listenPointEvents(point, type, direction) {
         point.direction = direction;
         point.pointType = type;
-        const events = [ [ core.DragEvent.START, this.onDragStart, this ], [ core.DragEvent.DRAG, this.onDrag, this ], [ core.DragEvent.END, this.onDragEnd, this ], [ core.PointerEvent.LEAVE, () => {
-            this.enterPoint = null;
-        } ] ];
-        if (point.name !== "circle") events.push([ core.PointerEvent.ENTER, e => {
+        this.__eventIds.push(point.on_([ [ core.DragEvent.START, this.onDragStart, this ], [ core.DragEvent.DRAG, this.onDrag, this ], [ core.DragEvent.END, this.onDragEnd, this ], [ core.PointerEvent.ENTER, e => {
             this.enterPoint = point, updatePointCursor(this, e);
-        } ]);
-        this.__eventIds.push(point.on_(events));
+        } ], [ core.PointerEvent.LEAVE, () => {
+            this.enterPoint = null;
+        } ] ]));
     }
     __listenEvents() {
         const {rect: rect, editor: editor, __eventIds: events} = this;
-        events.push(rect.on_([ [ core.DragEvent.START, this.onDragStart, this ], [ core.DragEvent.DRAG, this.onDrag, this ], [ core.DragEvent.END, this.onDragEnd, this ], [ core.PointerEvent.ENTER, () => updateMoveCursor(this) ], [ core.PointerEvent.DOUBLE_TAP, this.onDoubleTap, this ], [ core.PointerEvent.LONG_PRESS, this.onLongPress, this ] ]));
+        events.push(rect.on_([ [ core.PointerEvent.DOUBLE_TAP, this.onDoubleTap, this ], [ core.PointerEvent.LONG_PRESS, this.onLongPress, this ] ]));
         this.waitLeafer(() => {
             events.push(editor.app.on_([ [ [ core.KeyEvent.HOLD, core.KeyEvent.UP ], this.onKey, this ], [ core.KeyEvent.DOWN, this.onArrow, this ], [ core.MoveEvent.BEFORE_MOVE, this.onMove, this, true ], [ core.ZoomEvent.BEFORE_ZOOM, this.onScale, this, true ], [ core.RotateEvent.BEFORE_ROTATE, this.onRotate, this, true ], [ core.MoveEvent.END, this.onMoveEnd, this ], [ core.ZoomEvent.END, this.resetDoing, this ], [ core.RotateEvent.END, this.resetDoing, this ] ]));
         });
@@ -1930,6 +1938,16 @@ exports.Editor = class Editor extends draw.Group {
     shiftItem(item) {
         this.hasItem(item) ? this.removeItem(item) : this.addItem(item);
     }
+    setDimOthers(value, attrName = "dim", list) {
+        if (!list) {
+            const {dimTarget: dimTarget, targetLeafer: targetLeafer} = this;
+            list = dimTarget ? draw.isArray(dimTarget) ? dimTarget : [ dimTarget ] : [ targetLeafer ];
+        }
+        if (list[0] && list[0][attrName] !== (value || false)) list.forEach(item => draw.DataHelper.stintSet(item, attrName, value));
+    }
+    setBright(value) {
+        this.setDimOthers(value, "bright", this.list);
+    }
     update() {
         if (this.editing) {
             if (!this.element.parent) return this.cancel();
@@ -2125,7 +2143,9 @@ exports.Editor = class Editor extends draw.Group {
     listenTargetEvents() {
         if (!this.targetEventIds.length) {
             const {app: app, leafer: leafer, targetLeafer: targetLeafer, editMask: editMask} = this;
-            this.targetEventIds = [ leafer.on_(draw.RenderEvent.START, this.onRenderStart, this), targetLeafer && targetLeafer.on_(draw.PropertyEvent.SCROLL, this.onChildScroll, this), app.on_(draw.RenderEvent.CHILD_START, this.onAppRenderStart, this) ];
+            this.targetEventIds = [ leafer.on_(draw.RenderEvent.START, this.onRenderStart, this), targetLeafer && targetLeafer.on_(draw.PropertyEvent.SCROLL, this.onChildScroll, this), app.on_(draw.RenderEvent.CHILD_START, this.onAppRenderStart, this), app.on_(draw.LeaferEvent.UPDATE_MODE, data => {
+                if (data.mode && data.mode !== "normal") this.cancel();
+            }) ];
             if (editMask.visible) editMask.forceRender();
         }
     }
@@ -2150,10 +2170,10 @@ exports.Editor = class Editor extends draw.Group {
 
 __decorate([ mergeConfigAttr() ], exports.Editor.prototype, "mergeConfig", void 0);
 
-__decorate([ targetAttr(onHover) ], exports.Editor.prototype, "hoverTarget", void 0);
-
 __decorate([ targetAttr(onTarget) ], exports.Editor.prototype, "target", void 0);
 
+__decorate([ targetAttr(onHover) ], exports.Editor.prototype, "hoverTarget", void 0);
+
 exports.Editor = __decorate([ core.useModule(TransformTool, [ "editBox", "editTool", "emitEvent" ]) ], exports.Editor);
 
 class InnerEditor {

package/dist/editor.esm.js

@@ -1,4 +1,4 @@
-import { Event, isArray, defineKey, isNull, isUndefined, isObject, MatrixHelper, BoundsHelper, LeafBoundsHelper, getMatrixData, getBoundsData, UI, isString, Paint, Group, Rect, Bounds, LeafList, Direction9, AroundHelper, MathHelper, PointHelper, Box, isNumber, ResizeEvent, Text, Matrix, Debug, LeafHelper, PropertyEvent, DataHelper, Plugin, RenderEvent, getPointData, Creator, dataType } from "@leafer-ui/draw";
+import { Event, isArray, defineKey, isNull, isUndefined, isObject, MatrixHelper, BoundsHelper, LeafBoundsHelper, getMatrixData, getBoundsData, UI, isString, Paint, Group, Rect, Bounds, LeafList, Direction9, AroundHelper, MathHelper, PointHelper, DragBoundsHelper, Box, isNumber, ResizeEvent, Text, Matrix, Debug, LeafHelper, PropertyEvent, DataHelper, Plugin, RenderEvent, LeaferEvent, getPointData, Creator, dataType } from "@leafer-ui/draw";
 
 import { PointerEvent, DragEvent, MoveEvent, ZoomEvent, KeyEvent, RotateEvent, useModule } from "@leafer-ui/core";
 
@@ -52,12 +52,15 @@ function targetAttr(fn) {
             set(value) {
                 const old = this[privateKey];
                 if (old !== value) {
-                    if (this.config) {
+                    const t = this;
+                    if (t.config) {
                         const isSelect = key === "target";
                         if (isSelect) {
+                            t.setDimOthers(false);
+                            t.setBright(false);
                             if (isArray(value) && value.length > 1 && value[0].locked) value.splice(0, 1);
-                            if (this.single) this.element.syncEventer = null;
-                            const {beforeSelect: beforeSelect} = this.config;
+                            if (t.single) t.element.syncEventer = null;
+                            const {beforeSelect: beforeSelect} = t.config;
                             if (beforeSelect) {
                                 const check = beforeSelect({
                                     target: value
@@ -67,7 +70,7 @@ function targetAttr(fn) {
                         }
                         const type = isSelect ? EditorEvent.BEFORE_SELECT : EditorEvent.BEFORE_HOVER;
                         if (this.hasEvent(type)) this.emitEvent(new EditorEvent(type, {
-                            editor: this,
+                            editor: t,
                             value: value,
                             oldValue: old
                         }));
@@ -250,7 +253,7 @@ class EditSelect extends Group {
     }
     get running() {
         const {editor: editor} = this;
-        return this.hittable && editor.visible && editor.hittable && editor.mergeConfig.selector;
+        return this.hittable && editor.visible && editor.hittable && editor.mergeConfig.selector && this.app.mode === "normal";
     }
     get isMoveMode() {
         return this.app && this.app.interaction.moveMode;
@@ -552,17 +555,13 @@ const EditDataHelper = {
         }
         toPoint(around || align, boxBounds, origin, true);
         if (dragBounds) {
-            const allowBounds = dragBounds === "parent" ? target.parent.boxBounds : dragBounds;
-            const childBounds = new Bounds(target.__localBoxBounds);
-            if (BoundsHelper.includes(new Bounds(allowBounds).spread(.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;
-                }
-            }
+            const scaleData = {
+                x: scaleX,
+                y: scaleY
+            };
+            DragBoundsHelper.limitScaleOf(target, origin, scaleData);
+            scaleX = scaleData.x;
+            scaleY = scaleData.y;
         }
         if (useScaleX && widthRange) {
             const nowWidth = boxBounds.width * target.scaleX;
@@ -742,13 +741,18 @@ const cacheCursors = {};
 function updatePointCursor(editBox, e) {
     const {enterPoint: point, dragging: dragging, skewing: skewing, resizing: resizing, flippedX: flippedX, flippedY: flippedY} = editBox;
     if (!point || !editBox.editor.editing || !editBox.canUse) return;
+    if (point.name === "rect") return updateMoveCursor(editBox);
     if (point.name === "circle") return;
-    if (point.pointType === "button") {
+    let {rotation: rotation} = editBox;
+    const {pointType: pointType} = point, {moveCursor: moveCursor, resizeCursor: resizeCursor, rotateCursor: rotateCursor, skewCursor: skewCursor, moveable: moveable, resizeable: resizeable, rotateable: rotateable, skewable: skewable} = editBox.mergeConfig;
+    if (pointType === "move") {
+        point.cursor = moveCursor;
+        if (!moveable) point.visible = false;
+        return;
+    } else if (pointType === "button") {
         if (!point.cursor) point.cursor = "pointer";
         return;
     }
-    let {rotation: rotation} = editBox;
-    const {pointType: pointType} = point, {resizeCursor: resizeCursor, rotateCursor: rotateCursor, skewCursor: skewCursor, resizeable: resizeable, rotateable: rotateable, skewable: skewable} = editBox.mergeConfig;
     let showResize = pointType.includes("resize");
     if (showResize && rotateable && (editBox.isHoldRotateKey(e) || !resizeable)) showResize = false;
     const showSkew = skewable && !showResize && (point.name === "resize-line" || pointType === "skew");
@@ -829,7 +833,7 @@ class EditBox extends Group {
     constructor(editor) {
         super();
         this.view = new Group;
-        this.rect = new Box({
+        this.rect = new EditPoint({
             name: "rect",
             hitFill: "all",
             hitStroke: "none",
@@ -891,12 +895,13 @@ class EditBox extends Group {
             this.listenPointEvents(resizePoint, "resize", i);
         }
         this.listenPointEvents(circle, "rotate", 2);
+        this.listenPointEvents(rect, "move", 8);
         view.addMany(...rotatePoints, rect, circle, buttons, ...resizeLines, ...resizePoints);
         this.add(view);
     }
     load() {
-        const {target: target, mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, resizePoints: resizePoints} = this;
-        const {stroke: stroke, strokeWidth: strokeWidth} = mergeConfig;
+        const {target: target, mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, resizePoints: resizePoints, resizeLines: resizeLines} = this;
+        const {stroke: stroke, strokeWidth: strokeWidth, resizeLine: resizeLine} = mergeConfig;
         const pointsStyle = this.getPointsStyle();
         const middlePointsStyle = this.getMiddlePointsStyle();
         this.visible = !target.locked;
@@ -905,6 +910,10 @@ class EditBox extends Group {
             resizeP = resizePoints[i];
             resizeP.set(this.getPointStyle(i % 2 ? middlePointsStyle[(i - 1) / 2 % middlePointsStyle.length] : pointsStyle[i / 2 % pointsStyle.length]));
             resizeP.rotation = (i - (i % 2 ? 1 : 0)) / 2 * 90;
+            if (i % 2) resizeLines[(i - 1) / 2].set(Object.assign({
+                pointType: "resize",
+                rotation: (i - 1) / 2 * 90
+            }, resizeLine || {}));
         }
         circle.set(this.getPointStyle(mergeConfig.circle || mergeConfig.rotatePoint || pointsStyle[0]));
         rect.set(Object.assign({
@@ -949,10 +958,12 @@ class EditBox extends Group {
         if (this.app) this.rect.syncEventer = this.app.interaction.bottomList = null;
     }
     updateBounds(bounds) {
-        const {editMask: editMask} = this.editor;
-        const {mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, buttons: buttons, resizePoints: resizePoints, rotatePoints: rotatePoints, resizeLines: resizeLines} = this;
-        const {middlePoint: middlePoint, resizeable: resizeable, rotateable: rotateable, hideOnSmall: hideOnSmall, editBox: editBox, mask: mask, spread: spread, hideRotatePoints: hideRotatePoints, hideResizeLines: hideResizeLines} = mergeConfig;
+        const {editor: editor, mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, buttons: buttons, resizePoints: resizePoints, rotatePoints: rotatePoints, resizeLines: resizeLines} = this;
+        const {editMask: editMask} = editor;
+        const {middlePoint: middlePoint, resizeable: resizeable, rotateable: rotateable, hideOnSmall: hideOnSmall, editBox: editBox, mask: mask, dimOthers: dimOthers, bright: bright, spread: spread, hideRotatePoints: hideRotatePoints, hideResizeLines: hideResizeLines} = mergeConfig;
         editMask.visible = mask ? true : 0;
+        editor.setDimOthers(dimOthers);
+        editor.setBright(!!dimOthers || bright);
         if (spread) BoundsHelper.spread(bounds, spread);
         if (this.view.worldOpacity) {
             const {width: width, height: height} = bounds;
@@ -973,10 +984,10 @@ class EditBox extends Group {
                     resizeL.visible = resizeP.visible && !hideResizeLines;
                     resizeP.visible = rotateP.visible = showPoints && !!middlePoint;
                     if ((i + 1) / 2 % 2) {
-                        resizeL.width = width;
+                        resizeL.width = width + resizeL.height;
                         if (hideOnSmall && resizeP.width * 2 > width) resizeP.visible = false;
                     } else {
-                        resizeL.height = height;
+                        resizeL.width = height + resizeL.height;
                         if (hideOnSmall && resizeP.width * 2 > height) resizeP.visible = false;
                     }
                 }
@@ -1053,7 +1064,7 @@ class EditBox extends Group {
         this.dragging = true;
         const point = this.dragPoint = e.current, {pointType: pointType} = point;
         const {editor: editor, dragStartData: dragStartData} = this, {target: target} = this, {moveable: moveable, resizeable: resizeable, rotateable: rotateable, skewable: skewable, hideOnMove: hideOnMove} = this.mergeConfig;
-        if (point.name === "rect") {
+        if (pointType === "move") {
             moveable && (this.moving = true);
             editor.opacity = hideOnMove ? 0 : 1;
         } else {
@@ -1078,23 +1089,22 @@ class EditBox extends Group {
         if (this.moving && this.mergeConfig.dragLimitAnimate && this.target.dragBounds) this.transformTool.onMove(e);
         this.dragPoint = null;
         this.resetDoing();
-        const {name: name, pointType: pointType} = e.current;
-        if (name === "rect") this.editor.opacity = 1;
+        const {pointType: pointType} = e.current;
+        if (pointType === "move") this.editor.opacity = 1;
         if (pointType && pointType.includes("resize")) ResizeEvent.resizingKeys = null;
     }
     onDrag(e) {
         const {transformTool: transformTool, moving: moving, resizing: resizing, rotating: rotating, skewing: skewing} = this;
         if (moving) {
             transformTool.onMove(e);
-            updateMoveCursor(this);
         } else if (resizing || rotating || skewing) {
             const point = e.current;
             if (point.pointType) this.enterPoint = point;
             if (rotating) transformTool.onRotate(e);
             if (resizing) transformTool.onScale(e);
             if (skewing) transformTool.onSkew(e);
-            updatePointCursor(this, e);
         }
+        updatePointCursor(this, e);
     }
     resetDoing() {
         if (this.canUse) this.dragging = this.gesturing = this.moving = this.resizing = this.rotating = this.skewing = false;
@@ -1190,17 +1200,15 @@ class EditBox extends Group {
     listenPointEvents(point, type, direction) {
         point.direction = direction;
         point.pointType = type;
-        const events = [ [ DragEvent.START, this.onDragStart, this ], [ DragEvent.DRAG, this.onDrag, this ], [ DragEvent.END, this.onDragEnd, this ], [ PointerEvent.LEAVE, () => {
-            this.enterPoint = null;
-        } ] ];
-        if (point.name !== "circle") events.push([ PointerEvent.ENTER, e => {
+        this.__eventIds.push(point.on_([ [ DragEvent.START, this.onDragStart, this ], [ DragEvent.DRAG, this.onDrag, this ], [ DragEvent.END, this.onDragEnd, this ], [ PointerEvent.ENTER, e => {
             this.enterPoint = point, updatePointCursor(this, e);
-        } ]);
-        this.__eventIds.push(point.on_(events));
+        } ], [ PointerEvent.LEAVE, () => {
+            this.enterPoint = null;
+        } ] ]));
     }
     __listenEvents() {
         const {rect: rect, editor: editor, __eventIds: events} = this;
-        events.push(rect.on_([ [ DragEvent.START, this.onDragStart, this ], [ DragEvent.DRAG, this.onDrag, this ], [ DragEvent.END, this.onDragEnd, this ], [ PointerEvent.ENTER, () => updateMoveCursor(this) ], [ PointerEvent.DOUBLE_TAP, this.onDoubleTap, this ], [ PointerEvent.LONG_PRESS, this.onLongPress, this ] ]));
+        events.push(rect.on_([ [ PointerEvent.DOUBLE_TAP, this.onDoubleTap, this ], [ PointerEvent.LONG_PRESS, this.onLongPress, this ] ]));
         this.waitLeafer(() => {
             events.push(editor.app.on_([ [ [ KeyEvent.HOLD, KeyEvent.UP ], this.onKey, 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.onMoveEnd, this ], [ ZoomEvent.END, this.resetDoing, this ], [ RotateEvent.END, this.resetDoing, this ] ]));
         });
@@ -1928,6 +1936,16 @@ let Editor = class Editor extends Group {
     shiftItem(item) {
         this.hasItem(item) ? this.removeItem(item) : this.addItem(item);
     }
+    setDimOthers(value, attrName = "dim", list) {
+        if (!list) {
+            const {dimTarget: dimTarget, targetLeafer: targetLeafer} = this;
+            list = dimTarget ? isArray(dimTarget) ? dimTarget : [ dimTarget ] : [ targetLeafer ];
+        }
+        if (list[0] && list[0][attrName] !== (value || false)) list.forEach(item => DataHelper.stintSet(item, attrName, value));
+    }
+    setBright(value) {
+        this.setDimOthers(value, "bright", this.list);
+    }
     update() {
         if (this.editing) {
             if (!this.element.parent) return this.cancel();
@@ -2123,7 +2141,9 @@ let Editor = class Editor extends Group {
     listenTargetEvents() {
         if (!this.targetEventIds.length) {
             const {app: app, leafer: leafer, targetLeafer: targetLeafer, editMask: editMask} = this;
-            this.targetEventIds = [ leafer.on_(RenderEvent.START, this.onRenderStart, this), targetLeafer && targetLeafer.on_(PropertyEvent.SCROLL, this.onChildScroll, this), app.on_(RenderEvent.CHILD_START, this.onAppRenderStart, this) ];
+            this.targetEventIds = [ leafer.on_(RenderEvent.START, this.onRenderStart, this), targetLeafer && targetLeafer.on_(PropertyEvent.SCROLL, this.onChildScroll, this), app.on_(RenderEvent.CHILD_START, this.onAppRenderStart, this), app.on_(LeaferEvent.UPDATE_MODE, data => {
+                if (data.mode && data.mode !== "normal") this.cancel();
+            }) ];
             if (editMask.visible) editMask.forceRender();
         }
     }
@@ -2148,10 +2168,10 @@ let Editor = class Editor extends Group {
 
 __decorate([ mergeConfigAttr() ], Editor.prototype, "mergeConfig", void 0);
 
-__decorate([ targetAttr(onHover) ], Editor.prototype, "hoverTarget", void 0);
-
 __decorate([ targetAttr(onTarget) ], Editor.prototype, "target", void 0);
 
+__decorate([ targetAttr(onHover) ], Editor.prototype, "hoverTarget", void 0);
+
 Editor = __decorate([ useModule(TransformTool, [ "editBox", "editTool", "emitEvent" ]) ], Editor);
 
 class InnerEditor {