@leafer-in/editor 1.7.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-in/editor",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "@leafer-in/editor",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -34,10 +34,10 @@
     "leaferjs"
   ],
   "peerDependencies": {
-    "@leafer-ui/draw": "^1.7.0",
-    "@leafer-ui/core": "^1.7.0",
-    "@leafer-in/resize": "^1.7.0",
-    "@leafer-ui/interface": "^1.7.0",
-    "@leafer-in/interface": "^1.7.0"
+    "@leafer-ui/draw": "^1.9.0",
+    "@leafer-ui/core": "^1.9.0",
+    "@leafer-in/resize": "^1.9.0",
+    "@leafer-ui/interface": "^1.9.0",
+    "@leafer-in/interface": "^1.9.0"
   }
 }

package/src/Editor.ts

@@ -1,5 +1,5 @@
 import { IGroupInputData, IUI, IEventListenerId, IPointData, ILeafList, IEditSize, IGroup, IObject, IAlign, IAxis, IFunction, IMatrix, IApp } from '@leafer-ui/interface'
-import { Group, DataHelper, LeafList, RenderEvent, LeafHelper, Direction9, Plugin } from '@leafer-ui/draw'
+import { Group, DataHelper, LeafList, RenderEvent, LeafHelper, Direction9, Plugin, isString } from '@leafer-ui/draw'
 import { DragEvent, RotateEvent, ZoomEvent, MoveEvent, useModule } from '@leafer-ui/core'
 
 import { IEditBox, IEditPoint, IEditor, IEditorConfig, IEditTool, IEditorScaleEvent, IInnerEditor, ISimulateElement } from '@leafer-in/interface'
@@ -52,9 +52,15 @@ export class Editor extends Group implements IEditor {
     public get multiple(): boolean { return this.list.length > 1 }
     public get single(): boolean { return this.list.length === 1 }
 
+    public get dragPoint(): IEditPoint { return this.editBox.dragPoint }
+
     public get dragging(): boolean { return this.editBox.dragging }
+    public get gesturing(): boolean { return this.editBox.gesturing } // 手势操作元素中
+
     public get moving(): boolean { return this.editBox.moving }
-    public get dragPoint(): IEditPoint { return this.editBox.dragPoint }
+    public get resizing(): boolean { return this.editBox.resizing }
+    public get rotating(): boolean { return this.editBox.rotating }
+    public get skewing(): boolean { return this.editBox.skewing }
 
     // 组件
 
@@ -131,22 +137,26 @@ export class Editor extends Group implements IEditor {
     }
 
     public updateEditTool(): void {
-        let tool = this.editTool
-        if (tool) {
-            this.editBox.unload()
-            tool.unload()
-            this.editTool = null
-        }
+        this.unloadEditTool()
 
         if (this.editing) {
-            const tag = this.element.editOuter || 'EditTool'
-            tool = this.editTool = this.editToolList[tag] = this.editToolList[tag] || EditToolCreator.get(tag, this)
+            const name = this.element.editOuter || 'EditTool'
+            const tool = this.editTool = this.editToolList[name] = this.editToolList[name] || EditToolCreator.get(name, this)
             this.editBox.load()
             tool.load()
             this.update()
         }
     }
 
+    public unloadEditTool(): void {
+        let tool = this.editTool
+        if (tool) {
+            this.editBox.unload()
+            tool.unload()
+            this.editTool = null
+        }
+    }
+
 
     // get
 
@@ -249,31 +259,37 @@ export class Editor extends Group implements IEditor {
 
     public emitGroupEvent(type: string, group?: IGroup): void {
         const event = new EditorGroupEvent(type, { editTarget: group })
-        this.emitEvent(event)
+        if (!group || !group.syncEventer) this.emitEvent(event) // 单选时，元素会自动将事件传递给 editor，避免重复触发
         if (group) group.emitEvent(event)
     }
 
     // inner
 
-    public openInnerEditor(target?: IUI, select?: boolean): void {
+    public openInnerEditor(target?: IUI, nameOrSelect?: string | boolean, select?: boolean): void {
+        let name: string
+        if (isString(nameOrSelect)) name = nameOrSelect
+        else if (!select) select = nameOrSelect
+
         if (target && select) this.target = target
+
         if (this.single) {
             const editTarget = target || this.element
-            const tag = editTarget.editInner
-            if (tag && EditToolCreator.list[tag]) {
+            name || (name = editTarget.editInner)
+            if (name && EditToolCreator.list[name]) {
                 this.editTool.unload()
                 this.innerEditing = true
-                this.innerEditor = this.editToolList[tag] || EditToolCreator.get(tag, this)
+                this.innerEditor = this.editToolList[name] = this.editToolList[name] || EditToolCreator.get(name, this)
                 this.innerEditor.editTarget = editTarget
 
                 this.emitInnerEvent(InnerEditorEvent.BEFORE_OPEN)
                 this.innerEditor.load()
                 this.emitInnerEvent(InnerEditorEvent.OPEN)
+                console.log('hello')
             }
         }
     }
 
-    public closeInnerEditor(): void {
+    public closeInnerEditor(onlyInnerEditor?: boolean): void {
         if (this.innerEditing) {
             this.innerEditing = false
 
@@ -281,7 +297,7 @@ export class Editor extends Group implements IEditor {
             this.innerEditor.unload()
             this.emitInnerEvent(InnerEditorEvent.CLOSE)
 
-            this.editTool.load()
+            if (!onlyInnerEditor) this.updateEditTool()
             this.innerEditor = null
         }
     }
@@ -289,7 +305,7 @@ export class Editor extends Group implements IEditor {
     public emitInnerEvent(type: string): void {
         const { innerEditor } = this, { editTarget } = innerEditor
         const event = new InnerEditorEvent(type, { editTarget, innerEditor })
-        this.emitEvent(event)
+        if (!editTarget.syncEventer) this.emitEvent(event) // 单选时，元素会自动将事件传递给 editor，避免重复触发
         editTarget.emitEvent(event)
     }
 
@@ -337,14 +353,7 @@ export class Editor extends Group implements IEditor {
             const { app, leafer, editMask } = this
             this.targetEventIds = [
                 leafer.on_(RenderEvent.START, this.onRenderStart, this),
-
-                app.on_([
-                    [RenderEvent.CHILD_START, this.onAppRenderStart, this],
-
-                    [MoveEvent.BEFORE_MOVE, this.onMove, this, true],
-                    [ZoomEvent.BEFORE_ZOOM, this.onScale, this, true],
-                    [RotateEvent.BEFORE_ROTATE, this.onRotate, this, true],
-                ])
+                app.on_(RenderEvent.CHILD_START, this.onAppRenderStart, this)
             ]
             if (editMask.visible) editMask.forceRender()
         }

package/src/decorator/data.ts

@@ -1,6 +1,6 @@
 import { IFunction, ILeaf, IObject, IUI, } from '@leafer-ui/interface'
 import { IEditor } from '@leafer-in/interface'
-import { defineKey, isNull } from '@leafer-ui/draw'
+import { defineKey, isNull, isArray, isObject } from '@leafer-ui/draw'
 
 import { EditorEvent } from '../event/EditorEvent'
 
@@ -18,12 +18,13 @@ export function targetAttr(fn: IFunction) {
 
                         const isSelect = key === 'target'
                         if (isSelect) {
-                            if (value instanceof Array && value.length > 1 && value[0].locked) value.splice(0, 1) // fix: 单个锁定 + shift多选
+                            if (isArray(value) && value.length > 1 && value[0].locked) value.splice(0, 1) // fix: 单个锁定 + shift多选
+                            if ((this as IEditor).single) (this as IEditor).element.syncEventer = null // 重置 EditBox.load() 设置
 
                             const { beforeSelect } = (this as IEditor).config
                             if (beforeSelect) {
                                 const check = beforeSelect({ target: value })
-                                if (typeof check === 'object') value = check
+                                if (isObject(check)) value = check
                                 else if (check === false) return
                             }
                         }
@@ -44,8 +45,9 @@ export function mergeConfigAttr() {
     return (target: IEditor, key: string) => {
         defineKey(target, key, {
             get() {
-                const { config, element, dragPoint } = this, mergeConfig = { ...config } // 实时合并，后期可优化
-                if (element && element.editConfig) Object.assign(mergeConfig, element.editConfig)
+                const { config, element, dragPoint, editBox } = this, mergeConfig = { ...config } // 实时合并，后期可优化
+                if (element && element.editConfig) Object.assign(mergeConfig, element.editConfig) // 元素上的配置
+                if (editBox.config) Object.assign(mergeConfig, editBox.config) // EditBox 上的配置
                 if (dragPoint) {
                     if (dragPoint.editConfig) Object.assign(mergeConfig, dragPoint.editConfig)
                     if (mergeConfig.editSize === 'font-size') mergeConfig.lockRatio = true // 强制锁定比例

package/src/display/EditBox.ts

@@ -1,11 +1,10 @@
-import { IRect, IEventListenerId, IBoundsData, IPointData, IKeyEvent, IGroup, IBox, IBoxInputData, IAlign, IUI, IEditorConfig, IEditorDragStartData, IEventParams, ITransformTool } from '@leafer-ui/interface'
-import { Group, Box, Text, AroundHelper, Direction9, ResizeEvent } from '@leafer-ui/draw'
-import { DragEvent, PointerEvent, KeyEvent } from '@leafer-ui/core'
+import { IRect, IEventListenerId, IBoundsData, IPointData, IKeyEvent, IGroup, IBox, IBoxInputData, IAlign, IUI, IEditorConfig, IEditorDragStartData, IEventParams, ITransformTool, IUIEvent } from '@leafer-ui/interface'
+import { Group, Box, Text, AroundHelper, Direction9, ResizeEvent, BoundsHelper, isArray, isString, isNumber } from '@leafer-ui/draw'
+import { DragEvent, PointerEvent, KeyEvent, RotateEvent, ZoomEvent, MoveEvent } from '@leafer-ui/core'
 
 import { IEditBox, IEditor, IEditPoint, IEditPointType } from '@leafer-in/interface'
 
-import { updateCursor, updateMoveCursor } from '../editor/cursor'
-import { EditorEvent } from '../event/EditorEvent'
+import { updatePointCursor, updateMoveCursor } from '../editor/cursor'
 import { EditPoint } from './EditPoint'
 import { EditDataHelper } from '../helper/EditDataHelper'
 
@@ -17,7 +16,12 @@ export class EditBox extends Group implements IEditBox {
     public editor: IEditor
 
     public dragging: boolean
+    public gesturing: boolean
+
     public moving: boolean
+    public resizing: boolean
+    public rotating: boolean
+    public skewing: boolean
 
     public view: IGroup = new Group()  // 放置默认编辑工具控制点
 
@@ -38,8 +42,8 @@ export class EditBox extends Group implements IEditBox {
     public mergedConfig: IEditorConfig
 
     public get mergeConfig(): IEditorConfig {
-        const { config } = this, { mergeConfig } = this.editor
-        return this.mergedConfig = config ? { ...mergeConfig, ...config } : mergeConfig
+        const { config } = this, { mergeConfig, editBox } = this.editor
+        return this.mergedConfig = config && (editBox !== this) ? { ...mergeConfig, ...config } : mergeConfig // 可能会出现多个editBox的情况
     }
 
     protected _target: IUI
@@ -58,6 +62,13 @@ export class EditBox extends Group implements IEditBox {
     public get flippedY(): boolean { return this.scaleY < 0 }
     public get flippedOne(): boolean { return this.scaleX * this.scaleY < 0 }
 
+    public get canUse(): boolean { return (this.visible && this.view.visible) as boolean } // 编辑框是否处于激活状态
+    public get canGesture(): boolean { // 是否支持手势
+        if (!this.canUse) return false
+        const { moveable, resizeable, rotateable } = this.mergeConfig
+        return isString(moveable) || isString(resizeable) || isString(rotateable)
+    }
+
     protected __eventIds: IEventListenerId[] = []
 
     constructor(editor: IEditor) {
@@ -95,6 +106,7 @@ export class EditBox extends Group implements IEditBox {
         this.add(view)
     }
 
+
     public load(): void {
         const { target, mergeConfig, single, rect, circle, resizePoints } = this
         const { stroke, strokeWidth } = mergeConfig
@@ -102,12 +114,14 @@ export class EditBox extends Group implements IEditBox {
         const pointsStyle = this.getPointsStyle()
         const middlePointsStyle = this.getMiddlePointsStyle()
 
+        this.visible = !target.locked
+
         let resizeP: IRect
 
         for (let i = 0; i < 8; i++) {
             resizeP = resizePoints[i]
             resizeP.set(this.getPointStyle((i % 2) ? middlePointsStyle[((i - 1) / 2) % middlePointsStyle.length] : pointsStyle[(i / 2) % pointsStyle.length]))
-            if (!(i % 2)) resizeP.rotation = (i / 2) * 90
+            resizeP.rotation = ((i - (i % 2 ? 1 : 0)) / 2) * 90
         }
 
         // rotate
@@ -118,12 +132,12 @@ export class EditBox extends Group implements IEditBox {
 
         const syncEventer = single && this.transformTool.editTool
 
+        // 编辑框作为底部虚拟元素， 在 unload() 中重置
         rect.hittable = !syncEventer
         rect.syncEventer = syncEventer && this.editor  // 单选下 rect 的事件不会冒泡，需要手动传递给editor
 
-        // 编辑框作为底部虚拟元素， 在 onSelect 方法移除
         if (syncEventer) {
-            target.syncEventer = rect
+            target.syncEventer = rect // 在 target 属性装饰中重置
             this.app.interaction.bottomList = [{ target: rect, proxy: target }]
         }
 
@@ -133,21 +147,29 @@ export class EditBox extends Group implements IEditBox {
     public update(): void {
         const { editor } = this
         const { x, y, scaleX, scaleY, rotation, skewX, skewY, width, height } = this.target.getLayoutBounds('box', editor, true)
+        this.visible = !this.target.locked
         this.set({ x, y, scaleX, scaleY, rotation, skewX, skewY })
         this.updateBounds({ x: 0, y: 0, width, height })
     }
 
+    public unload(): void {
+        this.visible = false
+        if (this.app) this.rect.syncEventer = this.app.interaction.bottomList = null
+    }
+
+
     public updateBounds(bounds: IBoundsData): void {
         const { editMask } = this.editor
         const { mergeConfig, single, rect, circle, buttons, resizePoints, rotatePoints, resizeLines } = this
-        const { middlePoint, resizeable, rotateable, hideOnSmall, editBox, mask } = mergeConfig
+        const { middlePoint, resizeable, rotateable, hideOnSmall, editBox, mask, spread, hideRotatePoints, hideResizeLines } = mergeConfig
 
-        this.visible = !this.target.locked
         editMask.visible = mask ? true : 0
 
+        if (spread) BoundsHelper.spread(bounds, spread)
+
         if (this.view.worldOpacity) {
             const { width, height } = bounds
-            const smallSize = typeof hideOnSmall === 'number' ? hideOnSmall : 10
+            const smallSize = isNumber(hideOnSmall) ? hideOnSmall : 10
             const showPoints = editBox && !(hideOnSmall && width < smallSize && height < smallSize)
 
             let point = {} as IPointData, rotateP: IRect, resizeP: IRect, resizeL: IRect
@@ -157,17 +179,19 @@ export class EditBox extends Group implements IEditBox {
                 AroundHelper.toPoint(AroundHelper.directionData[i], bounds, point)
                 resizeP = resizePoints[i]
                 rotateP = rotatePoints[i]
-                resizeL = resizeLines[Math.floor(i / 2)]
                 resizeP.set(point)
                 rotateP.set(point)
-                resizeL.set(point)
 
                 // visible 
-                resizeP.visible = resizeL.visible = showPoints && !!(resizeable || rotateable)
-                rotateP.visible = showPoints && rotateable && resizeable && !mergeConfig.rotatePoint
+                resizeP.visible = showPoints && !!(resizeable || rotateable)
+                rotateP.visible = showPoints && rotateable && resizeable && !hideRotatePoints
 
                 if (i % 2) { // top,  right, bottom, left
 
+                    resizeL = resizeLines[(i - 1) / 2]
+                    resizeL.set(point)
+
+                    resizeL.visible = resizeP.visible && !hideResizeLines
                     resizeP.visible = rotateP.visible = showPoints && !!middlePoint
 
                     if (((i + 1) / 2) % 2) { // top, bottom
@@ -175,7 +199,6 @@ export class EditBox extends Group implements IEditBox {
                         if (hideOnSmall && resizeP.width * 2 > width) resizeP.visible = false
                     } else {
                         resizeL.height = height
-                        resizeP.rotation = 90
                         if (hideOnSmall && resizeP.width * 2 > height) resizeP.visible = false
                     }
                 }
@@ -238,11 +261,6 @@ export class EditBox extends Group implements IEditBox {
     }
 
 
-    public unload(): void {
-        this.visible = false
-    }
-
-
     public getPointStyle(userStyle?: IBoxInputData): IBoxInputData {
         const { stroke, strokeWidth, pointFill, pointSize, pointRadius } = this.mergedConfig
         const defaultStyle = { fill: pointFill, stroke, strokeWidth, around: 'center', strokeAlign: 'center', width: pointSize, height: pointSize, cornerRadius: pointRadius, offsetX: 0, offsetY: 0, editConfig } as IBoxInputData
@@ -251,31 +269,35 @@ export class EditBox extends Group implements IEditBox {
 
     public getPointsStyle(): IBoxInputData[] {
         const { point } = this.mergedConfig
-        return point instanceof Array ? point : [point]
+        return isArray(point) ? point : [point]
     }
 
     public getMiddlePointsStyle(): IBoxInputData[] {
         const { middlePoint } = this.mergedConfig
-        return middlePoint instanceof Array ? middlePoint : (middlePoint ? [middlePoint] : this.getPointsStyle())
+        return isArray(middlePoint) ? middlePoint : (middlePoint ? [middlePoint] : this.getPointsStyle())
     }
 
-    protected onSelect(e: EditorEvent): void {
-        if (e.oldList.length === 1) {
-            e.oldList[0].syncEventer = null
-            if (this.app) this.app.interaction.bottomList = null
-        }
-    }
 
     // drag
 
     protected onDragStart(e: DragEvent): void {
         this.dragging = true
         const point = this.dragPoint = e.current as IEditPoint, { pointType } = point
-        const { editor, dragStartData } = this, { target } = this
+        const { editor, dragStartData } = this, { target } = this, { moveable, resizeable, rotateable, skewable, hideOnMove } = this.mergeConfig
+
+        // 确定模式
         if (point.name === 'rect') {
-            this.moving = true
-            editor.opacity = this.mergeConfig.hideOnMove ? 0 : 1 // move
+            moveable && (this.moving = true)
+            editor.opacity = hideOnMove ? 0 : 1 // move
+        } else {
+            if (pointType.includes('rotate') || this.isHoldRotateKey(e) || !resizeable) {
+                rotateable && (this.rotating = true)
+                if (pointType === 'resize-rotate') resizeable && (this.resizing = true)
+                else if (point.name === 'resize-line') skewable && (this.skewing = true), this.rotating = false
+            } else if (pointType === 'resize') resizeable && (this.resizing = true)
+            if (pointType === 'skew') skewable && (this.skewing = true)
         }
+
         dragStartData.x = e.x
         dragStartData.y = e.y
         dragStartData.point = { x: target.x, y: target.y } // 用于移动
@@ -285,37 +307,80 @@ export class EditBox extends Group implements IEditBox {
     }
 
     protected onDragEnd(e: DragEvent): void {
-        this.dragging = false
+        if (this.mergeConfig.dragLimitAnimate && this.moving) this.transformTool.onMove(e)
+
         this.dragPoint = null
-        this.moving = false
+        this.resetDoing()
         const { name, pointType } = e.current as IEditPoint
         if (name === 'rect') this.editor.opacity = 1 // move
         if (pointType && pointType.includes('resize')) ResizeEvent.resizingKeys = null
     }
 
     protected onDrag(e: DragEvent): void {
-        const { transformTool } = this, point = e.current as IEditPoint
-        if (point.name === 'rect') {
+        const { transformTool, moving, resizing, rotating, skewing } = this
+        if (moving) {
             transformTool.onMove(e)
             updateMoveCursor(this)
-        } else {
-            const { pointType } = this.enterPoint = point
-            if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !this.mergeConfig.resizeable) {
-                transformTool.onRotate(e)
-                if (pointType === 'resize-rotate') transformTool.onScale(e)
-            } else if (pointType === 'resize') transformTool.onScale(e)
-            if (pointType === 'skew') transformTool.onSkew(e)
-            updateCursor(this, e)
+        } else if (resizing || rotating || skewing) {
+            const point = e.current as IEditPoint
+            if (point.pointType) this.enterPoint = point// 防止变化
+            if (rotating) transformTool.onRotate(e)
+            if (resizing) transformTool.onScale(e)
+            if (skewing) transformTool.onSkew(e)
+            updatePointCursor(this, e)
+        }
+    }
+
+    protected resetDoing(): void {
+        if (this.canUse) this.dragging = this.gesturing = this.moving = this.resizing = this.rotating = this.skewing = false
+    }
+
+    // 手势控制元素
+
+    public onMove(e: MoveEvent): void {
+        if (this.canGesture && e.moveType !== 'drag') {
+            e.stop()
+            if (isString(this.mergeConfig.moveable)) {
+                this.gesturing = this.moving = true
+                this.transformTool.onMove(e)
+            }
         }
     }
 
+    public onScale(e: ZoomEvent): void {
+        if (this.canGesture) {
+            e.stop()
+            if (isString(this.mergeConfig.resizeable)) {
+                this.gesturing = this.resizing = true
+                this.transformTool.onScale(e)
+            }
+        }
+    }
+
+    public onRotate(e: RotateEvent): void {
+        if (this.canGesture) {
+            e.stop()
+            if (isString(this.mergeConfig.rotateable)) {
+                this.gesturing = this.rotating = true
+                this.transformTool.onRotate(e)
+            }
+        }
+    }
+
+    // 键盘
+    public isHoldRotateKey(e: IUIEvent): boolean { // 按住ctrl在控制点上变旋转功能
+        const { rotateKey } = this.mergedConfig
+        if (rotateKey) return e.isHoldKeys(rotateKey)
+        return e.metaKey || e.ctrlKey
+    }
+
     protected onKey(e: KeyEvent): void {
-        updateCursor(this, e)
+        updatePointCursor(this, e)
     }
 
     public onArrow(e: IKeyEvent): void {
-        const { editor } = this
-        if (editor.editing && this.mergeConfig.keyEvent) {
+        const { editor, transformTool } = this
+        if (this.canUse && editor.editing && this.mergeConfig.keyEvent) {
             let x = 0, y = 0
             const distance = e.shiftKey ? 10 : 1
             switch (e.code) {
@@ -331,7 +396,7 @@ export class EditBox extends Group implements IEditBox {
                 case 'ArrowRight':
                     x = distance
             }
-            if (x || y) editor.move(x, y)
+            if (x || y) transformTool.move(x, y)
         }
     }
 
@@ -376,7 +441,7 @@ export class EditBox extends Group implements IEditBox {
             [DragEvent.END, this.onDragEnd, this],
             [PointerEvent.LEAVE, () => { this.enterPoint = null }],
         ]
-        if (point.name !== 'circle') events.push([PointerEvent.ENTER, (e: PointerEvent) => { this.enterPoint = point, updateCursor(this, e) }])
+        if (point.name !== 'circle') events.push([PointerEvent.ENTER, (e: PointerEvent) => { this.enterPoint = point, updatePointCursor(this, e) }])
         this.__eventIds.push(point.on_(events))
     }
 
@@ -384,8 +449,6 @@ export class EditBox extends Group implements IEditBox {
         const { rect, editor, __eventIds: events } = this
 
         events.push(
-            editor.on_(EditorEvent.SELECT, this.onSelect, this),
-
             rect.on_([
                 [DragEvent.START, this.onDragStart, this],
                 [DragEvent.DRAG, this.onDrag, this],
@@ -401,7 +464,13 @@ export class EditBox extends Group implements IEditBox {
             events.push(
                 editor.app.on_([
                     [[KeyEvent.HOLD, KeyEvent.UP], this.onKey, this],
-                    [KeyEvent.DOWN, this.onArrow, 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.resetDoing, this],
+                    [ZoomEvent.END, this.resetDoing, this],
+                    [RotateEvent.END, this.resetDoing, this],
                 ])
             )
         })

package/src/display/EditSelect.ts

@@ -54,16 +54,16 @@ export class EditSelect extends Group implements IEditSelect {
 
     protected onSelect(): void {
         if (this.running) {
-            const { mergeConfig, list } = this.editor
-            const { stroke, strokeWidth, selectedStyle } = mergeConfig
-            this.targetStroker.setTarget(list, { stroke, strokeWidth: Math.max(1, strokeWidth / 2), ...(selectedStyle || {}) })
+            this.targetStroker.setTarget(this.editor.list)
             this.hoverStroker.target = null
         }
     }
 
     public update(): void {
         this.hoverStroker.update()
-        this.targetStroker.update()
+
+        const { stroke, strokeWidth, selectedStyle } = this.editor.mergedConfig
+        this.targetStroker.update({ stroke, strokeWidth: strokeWidth && Math.max(1, strokeWidth / 2), ...(selectedStyle || {}) })
     }
 
     // move / down
@@ -125,7 +125,7 @@ export class EditSelect extends Group implements IEditSelect {
 
             } else if (this.allow(e.target)) {
 
-                if (!e.shiftKey) editor.target = null
+                if (!this.isHoldMultipleSelectKey(e)) editor.target = null
 
             }
         }
@@ -209,7 +209,7 @@ export class EditSelect extends Group implements IEditSelect {
     protected allowDrag(e: DragEvent) {
         const { boxSelect, multipleSelect } = this.editor.mergeConfig
         if (this.running && (multipleSelect && boxSelect) && !e.target.draggable) {
-            return (!this.editor.editing && this.allow(e.target)) || (e.shiftKey && !findOne(e.path))
+            return (!this.editor.editing && this.allow(e.target)) || (this.isHoldMultipleSelectKey(e) && !findOne(e.path))
         } else {
             return false
         }
@@ -230,7 +230,13 @@ export class EditSelect extends Group implements IEditSelect {
 
     public isMultipleSelect(e: IPointerEvent): boolean {
         const { multipleSelect, continuousSelect } = this.editor.mergeConfig
-        return multipleSelect && (e.shiftKey || continuousSelect)
+        return multipleSelect && (this.isHoldMultipleSelectKey(e) || continuousSelect)
+    }
+
+    public isHoldMultipleSelectKey(e: IPointerEvent): boolean {
+        const { multipleSelectKey } = this.editor.mergedConfig
+        if (multipleSelectKey) return e.isHoldKeys(multipleSelectKey)
+        return e.shiftKey
     }
 
     protected __listenEvents(): void {

package/src/display/Stroker.ts

@@ -1,5 +1,5 @@
 import { IUI, ILeaferCanvas, IRenderOptions, IRectInputData, IMatrixWithOptionHalfData } from '@leafer-ui/interface'
-import { Paint, UI, MatrixHelper, getBoundsData, getMatrixData, BoundsHelper, LeafBoundsHelper } from '@leafer-ui/draw'
+import { Paint, UI, MatrixHelper, getBoundsData, getMatrixData, BoundsHelper, LeafBoundsHelper, isArray, isString } from '@leafer-ui/draw'
 
 import { IStroker } from '@leafer-in/interface'
 
@@ -27,16 +27,17 @@ export class Stroker extends UI implements IStroker {
         this.strokeAlign = 'center'
     }
 
-    public setTarget(target: IUI | IUI[], style: IRectInputData): void {
-        this.set(style)
+    public setTarget(target: IUI | IUI[], style?: IRectInputData): void {
+        if (style) this.set(style)
         this.target = target
         this.update()
     }
 
-    public update(): void {
+    public update(style?: IRectInputData): void {
         const { list } = this
         if (list.length) {
             setListWithFn(bounds, list, worldBounds)
+            if (style) this.set(style)
             this.set(bounds)
             this.visible = true
         } else this.visible = 0
@@ -83,8 +84,8 @@ export class Stroker extends UI implements IStroker {
 
                     }
 
-                    if (stroke) typeof stroke === 'string' ? Paint.stroke(stroke, this, canvas) : Paint.strokes(stroke, this, canvas)
-                    if (fill) typeof fill === 'string' ? Paint.fill(fill, this, canvas) : Paint.fills(fill, this, canvas)
+                    if (stroke) isString(stroke) ? Paint.stroke(stroke, this, canvas) : Paint.strokes(stroke, this, canvas)
+                    if (fill) isString(fill) ? Paint.fill(fill, this, canvas) : Paint.fills(fill, this, canvas)
                 }
             }
 
@@ -101,5 +102,5 @@ export class Stroker extends UI implements IStroker {
 
 function onTarget(stroker: Stroker): void {
     const value = stroker.target
-    stroker.list = value ? (value instanceof Array ? value : [value]) : []
+    stroker.list = value ? (isArray(value) ? value : [value]) : []
 }