@leafer-in/editor 1.4.1 → 1.5.0

package/dist/editor.cjs

@@ -53,6 +53,7 @@ class EditorMoveEvent extends EditorEvent {
         super(type, data);
     }
 }
+EditorMoveEvent.BEFORE_MOVE = 'editor.before_move';
 EditorMoveEvent.MOVE = 'editor.move';
 
 class EditorScaleEvent extends EditorEvent {
@@ -60,6 +61,7 @@ class EditorScaleEvent extends EditorEvent {
         super(type, data);
     }
 }
+EditorScaleEvent.BEFORE_SCALE = 'editor.before_scale';
 EditorScaleEvent.SCALE = 'editor.scale';
 
 class EditorRotateEvent extends EditorEvent {
@@ -67,6 +69,7 @@ class EditorRotateEvent extends EditorEvent {
         super(type, data);
     }
 }
+EditorRotateEvent.BEFORE_ROTATE = 'editor.before_rotate';
 EditorRotateEvent.ROTATE = 'editor.rotate';
 
 class EditorSkewEvent extends EditorEvent {
@@ -74,6 +77,7 @@ class EditorSkewEvent extends EditorEvent {
         super(type, data);
     }
 }
+EditorSkewEvent.BEFORE_SKEW = 'editor.before_skew';
 EditorSkewEvent.SKEW = 'editor.skew';
 
 function targetAttr(fn) {
@@ -126,7 +130,7 @@ class Stroker extends draw.UI {
             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);
@@ -252,9 +256,9 @@ class EditSelect extends draw.Group {
     }
     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;
         }
     }
@@ -441,7 +445,7 @@ const { within } = draw.MathHelper;
 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;
@@ -455,10 +459,6 @@ const EditDataHelper = {
         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;
@@ -548,6 +548,10 @@ const EditDataHelper = {
             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) {
@@ -676,7 +680,7 @@ function updateCursor(editor, e) {
     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';
@@ -703,7 +707,7 @@ function toDataURL(svg, rotation) {
 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; }
@@ -718,6 +722,7 @@ class EditBox extends draw.Group {
         this.resizePoints = [];
         this.rotatePoints = [];
         this.resizeLines = [];
+        this.dragStartData = {};
         this.__eventIds = [];
         this.editor = editor;
         this.visible = false;
@@ -759,7 +764,7 @@ class EditBox extends draw.Group {
                 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) {
@@ -768,14 +773,14 @@ class EditBox extends draw.Group {
         }
     }
     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);
@@ -791,13 +796,13 @@ class EditBox extends draw.Group {
                     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;
                     }
                 }
@@ -807,7 +812,7 @@ class EditBox extends draw.Group {
                 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);
@@ -854,7 +859,7 @@ class EditBox extends draw.Group {
     }
     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() {
@@ -874,34 +879,32 @@ class EditBox extends draw.Group {
     }
     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) {
@@ -1079,6 +1082,7 @@ const config = {
     rotateCursor: { url: rotateSVG, x: 12, y: 12 },
     skewCursor: { url: skewSVG, x: 12, y: 12 },
     selector: true,
+    editBox: true,
     hover: true,
     select: 'press',
     openInner: 'double',
@@ -1094,14 +1098,25 @@ const bounds = new draw.Bounds();
 function simulate(editor) {
     const { simulateTarget, list } = editor;
     const { zoomLayer } = list[0].leafer.zoomLayer;
-    simulateTarget.safeChange(() => simulateTarget.reset(bounds.setListWithFn(list, (leaf) => leaf.getBounds('box', 'page')).get()));
+    simulateTarget.safeChange(() => {
+        bounds.setListWithFn(list, (leaf) => leaf.getBounds('box', 'page'));
+        if (bounds.width === 0)
+            bounds.width = 0.1;
+        if (bounds.height === 0)
+            bounds.height = 0.1;
+        simulateTarget.reset(bounds.get());
+    });
     zoomLayer.add(simulateTarget);
 }
 
 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);
     }
@@ -1128,6 +1143,9 @@ function onTarget(editor, oldValue) {
 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);
@@ -1225,10 +1243,13 @@ class EditorGroupEvent extends EditorEvent {
         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;
@@ -1291,8 +1312,20 @@ class SimulateElement extends draw.Rect {
 
 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]; }
@@ -1302,6 +1335,7 @@ class Editor extends draw.Group {
     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) {
@@ -1392,7 +1426,7 @@ class Editor extends draw.Group {
                 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) {
@@ -1406,7 +1440,7 @@ class Editor extends draw.Group {
             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);
@@ -1421,26 +1455,29 @@ class Editor extends draw.Group {
         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;
@@ -1457,7 +1494,9 @@ class Editor extends draw.Group {
         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);
     }
@@ -1465,7 +1504,9 @@ class Editor extends draw.Group {
         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);
     }
@@ -1475,7 +1516,9 @@ class Editor extends draw.Group {
         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);
     }
@@ -1485,7 +1528,9 @@ class Editor extends draw.Group {
         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);
     }
@@ -1495,7 +1540,9 @@ class Editor extends draw.Group {
         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);
     }
@@ -1505,7 +1552,9 @@ class Editor extends draw.Group {
         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);
     }
@@ -1523,6 +1572,7 @@ class Editor extends draw.Group {
     }
     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);
         }
@@ -1538,11 +1588,13 @@ class Editor extends draw.Group {
         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);
@@ -1571,7 +1623,8 @@ class Editor extends draw.Group {
     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)
@@ -1901,34 +1954,15 @@ exports.LineEditTool = __decorate([
 
 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;