@leafer-in/editor 1.4.2 → 1.5.1

package/dist/editor.js

@@ -43,7 +43,9 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                 Object.assign(this, data);
         }
     }
+    EditorEvent.BEFORE_SELECT = 'editor.before_select';
     EditorEvent.SELECT = 'editor.select';
+    EditorEvent.BEFORE_HOVER = 'editor.before_hover';
     EditorEvent.HOVER = 'editor.hover';
 
     class EditorMoveEvent extends EditorEvent {
@@ -51,6 +53,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             super(type, data);
         }
     }
+    EditorMoveEvent.BEFORE_MOVE = 'editor.before_move';
     EditorMoveEvent.MOVE = 'editor.move';
 
     class EditorScaleEvent extends EditorEvent {
@@ -58,6 +61,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             super(type, data);
         }
     }
+    EditorScaleEvent.BEFORE_SCALE = 'editor.before_scale';
     EditorScaleEvent.SCALE = 'editor.scale';
 
     class EditorRotateEvent extends EditorEvent {
@@ -65,6 +69,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             super(type, data);
         }
     }
+    EditorRotateEvent.BEFORE_ROTATE = 'editor.before_rotate';
     EditorRotateEvent.ROTATE = 'editor.rotate';
 
     class EditorSkewEvent extends EditorEvent {
@@ -72,6 +77,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             super(type, data);
         }
     }
+    EditorSkewEvent.BEFORE_SKEW = 'editor.before_skew';
     EditorSkewEvent.SKEW = 'editor.skew';
 
     function targetAttr(fn) {
@@ -81,8 +87,12 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                 get() { return this[privateKey]; },
                 set(value) {
                     const old = this[privateKey];
-                    if (old !== value)
+                    if (old !== value) {
+                        const type = key === 'target' ? EditorEvent.BEFORE_SELECT : EditorEvent.BEFORE_HOVER;
+                        if (this.hasEvent(type))
+                            this.emitEvent(new EditorEvent(type, { editor: this, value: value, oldValue: old }));
                         this[privateKey] = value, fn(this, old);
+                    }
                 }
             });
         };
@@ -124,7 +134,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                 for (let i = 0; i < list.length; i++) {
                     leaf = list[i];
                     const { worldTransform, worldRenderBounds } = leaf;
-                    if (!bounds || bounds.hit(worldRenderBounds, options.matrix)) {
+                    if (worldRenderBounds.width && worldRenderBounds.height && (!bounds || bounds.hit(worldRenderBounds, options.matrix))) {
                         const aScaleX = abs(worldTransform.scaleX), aScaleY = abs(worldTransform.scaleY);
                         if (aScaleX !== aScaleY) {
                             copy$1(matrix, worldTransform);
@@ -250,9 +260,9 @@ this.LeaferIN.editor = (function (exports, draw, core) {
         }
         onSelect() {
             if (this.running) {
-                const { mergeConfig: config, list } = this.editor;
-                const { stroke, strokeWidth } = config;
-                this.targetStroker.setTarget(list, { stroke, strokeWidth: Math.max(1, strokeWidth / 2) });
+                const { mergeConfig, list } = this.editor;
+                const { stroke, strokeWidth, selectedStyle } = mergeConfig;
+                this.targetStroker.setTarget(list, Object.assign({ stroke, strokeWidth: Math.max(1, strokeWidth / 2) }, (selectedStyle || {})));
                 this.hoverStroker.target = null;
             }
         }
@@ -439,7 +449,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
     const EditDataHelper = {
         getScaleData(element, startBounds, direction, totalMove, lockRatio, around, flipable, scaleMode) {
             let align, origin = {}, scaleX = 1, scaleY = 1;
-            const { boxBounds, widthRange, heightRange, dragBounds } = element;
+            const { boxBounds, widthRange, heightRange, dragBounds, worldBoxBounds } = element;
             const { width, height } = startBounds;
             if (around) {
                 totalMove.x *= 2;
@@ -453,10 +463,6 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             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;
@@ -546,6 +552,10 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                 const nowHeight = boxBounds.height * element.scaleY;
                 scaleY = within(nowHeight * scaleY, heightRange) / nowHeight;
             }
+            if (Math.abs(scaleX * worldBoxBounds.width) < 1)
+                scaleX = (scaleX < 0 ? -1 : 1) / worldBoxBounds.width;
+            if (Math.abs(scaleY * worldBoxBounds.height) < 1)
+                scaleY = (scaleY < 0 ? -1 : 1) / worldBoxBounds.height;
             return { origin, scaleX, scaleY, direction, lockRatio, around };
         },
         getRotateData(bounds, direction, current, last, around) {
@@ -674,7 +684,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
         let { rotation } = editBox;
         const { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editor.mergeConfig;
         const { pointType } = point, { flippedX, flippedY } = editBox;
-        let showResize = pointType === 'resize';
+        let showResize = pointType.includes('resize');
         if (showResize && rotateable && (e.metaKey || e.ctrlKey || !resizeable))
             showResize = false;
         const showSkew = skewable && !showResize && point.name === 'resize-line';
@@ -701,7 +711,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
     class EditPoint extends draw.Box {
     }
 
-    const fourDirection = ['top', 'right', 'bottom', 'left'];
+    const fourDirection = ['top', 'right', 'bottom', 'left'], editConfig = undefined;
     class EditBox extends draw.Group {
         get flipped() { return this.flippedX || this.flippedY; }
         get flippedX() { return this.scaleX < 0; }
@@ -716,6 +726,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             this.resizePoints = [];
             this.rotatePoints = [];
             this.resizeLines = [];
+            this.dragStartData = {};
             this.__eventIds = [];
             this.editor = editor;
             this.visible = false;
@@ -757,7 +768,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                     resizeP.rotation = (i / 2) * 90;
             }
             circle.set(this.getPointStyle(mergeConfig.circle || mergeConfig.rotatePoint || pointsStyle[0]));
-            rect.set(Object.assign({ stroke, strokeWidth }, (mergeConfig.rect || {})));
+            rect.set(Object.assign({ stroke, strokeWidth, editConfig }, (mergeConfig.rect || {})));
             rect.hittable = !single;
             rect.syncEventer = single && this.editor;
             if (single) {
@@ -766,14 +777,14 @@ this.LeaferIN.editor = (function (exports, draw, core) {
             }
         }
         update(bounds) {
-            this.visible = !this.editor.element.locked;
+            const { mergeConfig, element, multiple } = this.editor;
+            const { middlePoint, resizeable, rotateable, hideOnSmall, editBox } = mergeConfig;
+            this.visible = !element.locked;
             if (this.view.worldOpacity) {
-                const { mergeConfig } = this.editor;
                 const { width, height } = bounds;
                 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);
+                const showPoints = editBox && !(hideOnSmall && width < smallSize && height < smallSize);
                 let point = {}, rotateP, resizeP, resizeL;
                 for (let i = 0; i < 8; i++) {
                     draw.AroundHelper.toPoint(draw.AroundHelper.directionData[i], bounds, point);
@@ -789,13 +800,13 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                         resizeP.visible = rotateP.visible = showPoints && !!middlePoint;
                         if (((i + 1) / 2) % 2) {
                             resizeL.width = width;
-                            if (resizeP.width > width - 30)
+                            if (hideOnSmall && resizeP.width * 2 > width)
                                 resizeP.visible = false;
                         }
                         else {
                             resizeL.height = height;
                             resizeP.rotation = 90;
-                            if (resizeP.width > height - 30)
+                            if (hideOnSmall && resizeP.width * 2 > height)
                                 resizeP.visible = false;
                         }
                     }
@@ -805,7 +816,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
                     this.layoutCircle(mergeConfig);
                 if (rect.path)
                     rect.path = null;
-                rect.set(Object.assign(Object.assign({}, bounds), { visible: true }));
+                rect.set(Object.assign(Object.assign({}, bounds), { visible: multiple ? true : editBox }));
                 buttons.visible = showPoints && buttons.children.length > 0;
                 if (buttons.visible)
                     this.layoutButtons(mergeConfig);
@@ -852,7 +863,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
         }
         getPointStyle(userStyle) {
             const { stroke, strokeWidth, pointFill, pointSize, pointRadius } = this.editor.mergeConfig;
-            const defaultStyle = { fill: pointFill, stroke, strokeWidth, around: 'center', strokeAlign: 'center', width: pointSize, height: pointSize, cornerRadius: pointRadius, offsetX: 0, offsetY: 0 };
+            const defaultStyle = { fill: pointFill, stroke, strokeWidth, around: 'center', strokeAlign: 'center', width: pointSize, height: pointSize, cornerRadius: pointRadius, offsetX: 0, offsetY: 0, editConfig };
             return userStyle ? Object.assign(defaultStyle, userStyle) : defaultStyle;
         }
         getPointsStyle() {
@@ -872,34 +883,32 @@ this.LeaferIN.editor = (function (exports, draw, core) {
         }
         onDragStart(e) {
             this.dragging = true;
-            const { editor } = this;
-            if (e.current.name === 'rect') {
+            const point = this.dragPoint = e.current;
+            const { editor, dragStartData } = this, { element } = editor;
+            if (point.name === 'rect') {
                 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'));
-                editor.resizeDirection = e.current.direction;
-            }
+            dragStartData.x = e.x;
+            dragStartData.y = e.y;
+            dragStartData.point = { x: element.x, y: element.y };
+            dragStartData.bounds = Object.assign({}, element.getLayoutBounds('box', 'local'));
+            dragStartData.rotation = element.rotation;
         }
         onDragEnd(e) {
             this.dragging = false;
+            this.dragPoint = null;
             this.moving = false;
             if (e.current.name === 'rect')
                 this.editor.opacity = 1;
-            this.editor.resizeDirection = undefined;
         }
         onDrag(e) {
             const { editor } = this;
-            const point = this.enterPoint = e.current;
-            if (point.pointType === 'rotate' || e.metaKey || e.ctrlKey || !editor.mergeConfig.resizeable) {
-                if (editor.mergeConfig.rotateable)
-                    editor.onRotate(e);
-            }
-            else if (point.pointType === 'resize') {
+            const { pointType } = this.enterPoint = e.current;
+            if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !editor.mergeConfig.resizeable)
+                editor.onRotate(e);
+            if (pointType.includes('resize'))
                 editor.onScale(e);
-            }
             updateCursor(editor, e);
         }
         onArrow(e) {
@@ -1077,6 +1086,7 @@ ${filterStyle}
         rotateCursor: { url: rotateSVG, x: 12, y: 12 },
         skewCursor: { url: skewSVG, x: 12, y: 12 },
         selector: true,
+        editBox: true,
         hover: true,
         select: 'press',
         openInner: 'double',
@@ -1106,7 +1116,11 @@ ${filterStyle}
     function onTarget(editor, oldValue) {
         const { target } = editor;
         if (target) {
-            editor.leafList = target instanceof draw.LeafList ? target : new draw.LeafList(target instanceof Array ? target : target);
+            const { list } = editor.leafList = target instanceof draw.LeafList ? target : new draw.LeafList(target instanceof Array ? target : target);
+            if (!list.every(checkEditable)) {
+                editor.target = list.filter(checkEditable);
+                return;
+            }
             if (editor.multiple)
                 simulate(editor);
         }
@@ -1133,6 +1147,9 @@ ${filterStyle}
     function onHover(editor, oldValue) {
         editor.emitEvent(new EditorEvent(EditorEvent.HOVER, { editor, value: editor.hoverTarget, oldValue }));
     }
+    function checkEditable(item) {
+        return item.editable && !item.locked;
+    }
 
     const order = (a, b) => a.parent.children.indexOf(a) - b.parent.children.indexOf(b);
     const reverseOrder = (a, b) => b.parent.children.indexOf(b) - a.parent.children.indexOf(a);
@@ -1230,10 +1247,13 @@ ${filterStyle}
             super(type, data);
         }
     }
+    EditorGroupEvent.BEFORE_GROUP = 'editor.before_group';
     EditorGroupEvent.GROUP = 'editor.group';
     EditorGroupEvent.BEFORE_UNGROUP = 'editor.before_ungroup';
     EditorGroupEvent.UNGROUP = 'editor.ungroup';
+    EditorGroupEvent.BEFORE_OPEN = 'editor.before_open_group';
     EditorGroupEvent.OPEN = 'editor.open_group';
+    EditorGroupEvent.BEFORE_CLOSE = 'editor.before_close_group';
     EditorGroupEvent.CLOSE = 'editor.close_group';
 
     const { updateMatrix } = draw.LeafHelper;
@@ -1296,8 +1316,20 @@ ${filterStyle}
 
     class Editor extends draw.Group {
         get mergeConfig() {
-            const { element, config } = this;
-            return this.single && element.editConfig ? Object.assign(Object.assign({}, config), element.editConfig) : config;
+            const { config, element, dragPoint } = this, mergeConfig = Object.assign({}, config);
+            if (element && element.editConfig)
+                Object.assign(mergeConfig, element.editConfig);
+            if (dragPoint) {
+                if (dragPoint.editConfig)
+                    Object.assign(mergeConfig, dragPoint.editConfig);
+                if (mergeConfig.editSize === 'font-size')
+                    mergeConfig.lockRatio = true;
+                if (dragPoint.pointType === 'resize-rotate') {
+                    mergeConfig.around || (mergeConfig.around = 'center');
+                    draw.isNull(mergeConfig.lockRatio) && (mergeConfig.lockRatio = true);
+                }
+            }
+            return mergeConfig;
         }
         get list() { return this.leafList.list; }
         get dragHoverExclude() { return [this.editBox.rect]; }
@@ -1307,6 +1339,7 @@ ${filterStyle}
         get single() { return this.list.length === 1; }
         get dragging() { return this.editBox.dragging; }
         get moving() { return this.editBox.moving; }
+        get dragPoint() { return this.editBox.dragPoint; }
         get element() { return this.multiple ? this.simulateTarget : this.list[0]; }
         get buttons() { return this.editBox.buttons; }
         constructor(userConfig, data) {
@@ -1397,7 +1430,7 @@ ${filterStyle}
                     else
                         total.x = 0;
                 }
-                this.move(core.DragEvent.getValidMove(this.element, this.dragStartPoint, total));
+                this.move(core.DragEvent.getValidMove(this.element, this.editBox.dragStartData.point, total));
             }
         }
         onScale(e) {
@@ -1411,7 +1444,7 @@ ${filterStyle}
                 const { direction } = e.current;
                 if (e.shiftKey || element.lockRatio)
                     lockRatio = true;
-                const data = EditDataHelper.getScaleData(element, this.dragStartBounds, direction, e.getInnerTotal(element), lockRatio, EditDataHelper.getAround(around, e.altKey), flipable, this.multiple || editSize === 'scale');
+                const data = EditDataHelper.getScaleData(element, this.editBox.dragStartData.bounds, 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);
@@ -1426,26 +1459,29 @@ ${filterStyle}
             const { direction, name } = e.current;
             if (skewable && name === 'resize-line')
                 return this.onSkew(e);
-            const { element } = this;
+            const { element } = this, { dragStartData } = this.editBox;
             let origin, rotation;
             if (e instanceof core.RotateEvent) {
                 if (rotateable === 'rotate')
                     e.stop(), rotation = e.rotation, origin = element.getBoxPoint(e);
                 else
                     return;
+                if (element.scaleX * element.scaleY < 0)
+                    rotation = -rotation;
             }
             else {
-                const last = { x: e.x - e.moveX, y: e.y - e.moveY };
-                const data = EditDataHelper.getRotateData(element.boxBounds, direction, e.getBoxPoint(element), element.getBoxPoint(last), e.shiftKey ? null : (element.around || element.origin || around || 'center'));
+                const data = EditDataHelper.getRotateData(element.boxBounds, direction, e.getBoxPoint(element), element.getBoxPoint(dragStartData), e.shiftKey ? null : (element.around || element.origin || around || 'center'));
                 rotation = data.rotation;
                 origin = data.origin;
             }
-            rotation = draw.MathHelper.getGapRotation(rotation, rotateGap, element.rotation);
-            if (!rotation)
-                return;
             if (element.scaleX * element.scaleY < 0)
                 rotation = -rotation;
-            this.rotateOf(origin, draw.MathHelper.float(rotation, 2));
+            if (e instanceof core.DragEvent)
+                rotation = dragStartData.rotation + rotation - element.rotation;
+            rotation = draw.MathHelper.float(draw.MathHelper.getGapRotation(rotation, rotateGap, element.rotation), 2);
+            if (!rotation)
+                return;
+            this.rotateOf(origin, rotation);
         }
         onSkew(e) {
             const { element } = this;
@@ -1462,7 +1498,9 @@ ${filterStyle}
             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 });
+            const data = { target: element, editor: this, moveX: world.x, moveY: world.y };
+            this.emitEvent(new EditorMoveEvent(EditorMoveEvent.BEFORE_MOVE, data));
+            const event = new EditorMoveEvent(EditorMoveEvent.MOVE, data);
             this.editTool.onMove(event);
             this.emitEvent(event);
         }
@@ -1470,7 +1508,9 @@ ${filterStyle}
             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) }));
+            data = Object.assign(Object.assign({}, data), { target: element, editor: this, worldOrigin: element.getWorldPoint(data.origin) });
+            this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data));
+            const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data);
             this.editTool.onScaleWithDrag(event);
             this.emitEvent(event);
         }
@@ -1480,7 +1520,9 @@ ${filterStyle}
             const { element } = this;
             const worldOrigin = this.getWorldOrigin(origin);
             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 });
+            const data = { target: element, editor: this, worldOrigin, scaleX, scaleY, transform };
+            this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data));
+            const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data);
             this.editTool.onScale(event);
             this.emitEvent(event);
         }
@@ -1490,7 +1532,9 @@ ${filterStyle}
             const { element } = this;
             const worldOrigin = this.getWorldOrigin('center');
             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 });
+            const data = { target: element, editor: this, worldOrigin, scaleX: axis === 'x' ? -1 : 1, scaleY: axis === 'y' ? -1 : 1, transform };
+            this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data));
+            const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data);
             this.editTool.onScale(event);
             this.emitEvent(event);
         }
@@ -1500,7 +1544,9 @@ ${filterStyle}
             const { element } = this;
             const worldOrigin = this.getWorldOrigin(origin);
             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 });
+            const data = { target: element, editor: this, worldOrigin, rotation, transform };
+            this.emitEvent(new EditorRotateEvent(EditorRotateEvent.BEFORE_ROTATE, data));
+            const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, data);
             this.editTool.onRotate(event);
             this.emitEvent(event);
         }
@@ -1510,7 +1556,9 @@ ${filterStyle}
             const { element } = this;
             const worldOrigin = this.getWorldOrigin(origin);
             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 });
+            const data = { target: element, editor: this, worldOrigin, skewX, skewY, transform };
+            this.emitEvent(new EditorSkewEvent(EditorSkewEvent.BEFORE_SKEW, data));
+            const event = new EditorSkewEvent(EditorSkewEvent.SKEW, data);
             this.editTool.onSkew(event);
             this.emitEvent(event);
         }
@@ -1528,6 +1576,7 @@ ${filterStyle}
         }
         group(userGroup) {
             if (this.multiple) {
+                this.emitGroupEvent(EditorGroupEvent.BEFORE_GROUP);
                 this.target = EditorHelper.group(this.list, this.element, userGroup);
                 this.emitGroupEvent(EditorGroupEvent.GROUP, this.target);
             }
@@ -1543,11 +1592,13 @@ ${filterStyle}
             return this.list;
         }
         openGroup(group) {
+            this.emitGroupEvent(EditorGroupEvent.BEFORE_OPEN, group);
             this.openedGroupList.add(group);
             group.hitChildren = true;
             this.emitGroupEvent(EditorGroupEvent.OPEN, group);
         }
         closeGroup(group) {
+            this.emitGroupEvent(EditorGroupEvent.BEFORE_CLOSE, group);
             this.openedGroupList.remove(group);
             group.hitChildren = false;
             this.emitGroupEvent(EditorGroupEvent.CLOSE, group);
@@ -1576,7 +1627,8 @@ ${filterStyle}
         emitGroupEvent(type, group) {
             const event = new EditorGroupEvent(type, { editTarget: group });
             this.emitEvent(event);
-            group.emitEvent(event);
+            if (group)
+                group.emitEvent(event);
         }
         openInnerEditor(target, select) {
             if (target && select)
@@ -1906,34 +1958,15 @@ ${filterStyle}
 
     draw.Plugin.add('editor', 'resize');
     draw.Creator.editor = function (options) { return new Editor(options); };
-    draw.dataType(false)(draw.Box.prototype, 'textBox');
-    draw.defineKey(draw.UI.prototype, 'editOuter', {
-        get() { return this.__.__isLinePath ? 'LineEditTool' : 'EditTool'; }
-    });
-    draw.defineKey(draw.UI.prototype, 'editInner', {
-        get() { return 'PathEditor'; }
-    });
-    draw.defineKey(draw.Group.prototype, 'editInner', {
-        get() { return ''; }
-    });
-    draw.defineKey(draw.Text.prototype, 'editInner', {
-        get() { return 'TextEditor'; }
-    });
-    draw.UI.setEditConfig = function (config) {
-        draw.defineKey(this.prototype, 'editConfig', {
-            get() { return typeof config === 'function' ? config(this) : config; }
-        });
-    };
-    draw.UI.setEditOuter = function (toolName) {
-        draw.defineKey(this.prototype, 'editOuter', {
-            get() { return typeof toolName === 'string' ? toolName : toolName(this); }
-        });
-    };
-    draw.UI.setEditInner = function (editorName) {
-        draw.defineKey(this.prototype, 'editInner', {
-            get() { return typeof editorName === 'string' ? editorName : editorName(this); }
-        });
-    };
+    draw.Box.addAttr('textBox', false, draw.dataType);
+    draw.UI.addAttr('editConfig', undefined, draw.dataType);
+    draw.UI.addAttr('editOuter', (ui) => ui.__.__isLinePath ? 'LineEditTool' : 'EditTool', draw.dataType);
+    draw.UI.addAttr('editInner', 'PathEditor', draw.dataType);
+    draw.Group.addAttr('editInner', '', draw.dataType);
+    draw.Text.addAttr('editInner', 'TextEditor', draw.dataType);
+    draw.UI.setEditConfig = function (config) { this.changeAttr('editConfig', config); };
+    draw.UI.setEditOuter = function (toolName) { this.changeAttr('editOuter', toolName); };
+    draw.UI.setEditInner = function (editorName) { this.changeAttr('editInner', editorName); };
 
     exports.EditBox = EditBox;
     exports.EditDataHelper = EditDataHelper;