@leafer-in/editor 1.0.0-rc.9 → 1.0.0

package/src/display/EditBox.ts

@@ -1,7 +1,8 @@
-import { IRect, IAround, IEventListenerId, IBoundsData, IRectInputData, IPointData, IKeyEvent, IGroup, IBox } from '@leafer-ui/interface'
-import { Group, DragEvent, PointerEvent, Box, AroundHelper } from '@leafer-ui/core'
+import { IRect, IEventListenerId, IBoundsData, IPointData, IKeyEvent, IGroup, IBox, IBoxInputData, IAlign } from '@leafer-ui/interface'
+import { Group, Box, AroundHelper, Direction9 } from '@leafer-ui/draw'
+import { DragEvent, PointerEvent, RotateEvent, ZoomEvent } from '@leafer-ui/core'
 
-import { IEditBox, IEditor, IDirection8, IEditPoint, IEditPointType } from '@leafer-in/interface'
+import { IEditBox, IEditor, IEditPoint, IEditPointType } from '@leafer-in/interface'
 
 import { updateCursor, updateMoveCursor } from '../editor/cursor'
 import { EditorEvent } from '../event/EditorEvent'
@@ -15,9 +16,12 @@ export class EditBox extends Group implements IEditBox {
 
     public editor: IEditor
     public dragging: boolean
+    public moving: boolean
+
+    public view: IGroup = new Group()  // 放置默认编辑工具控制点
 
     public rect: IBox = new Box({ name: 'rect', hitFill: 'all', hitStroke: 'none', strokeAlign: 'center', hitRadius: 5 }) // target rect
-    public circle: IEditPoint = new EditPoint({ name: 'circle', strokeAlign: 'outside', around: 'center', cursor: 'crosshair', hitRadius: 5 }) // rotate point
+    public circle: IEditPoint = new EditPoint({ name: 'circle', strokeAlign: 'center', around: 'center', cursor: 'crosshair', hitRadius: 5 }) // rotate point
 
     public buttons: IGroup = new Group({ around: 'center', hitSelf: false })
 
@@ -40,16 +44,17 @@ export class EditBox extends Group implements IEditBox {
         this.editor = editor
         this.visible = false
         this.create()
+        this.rect.syncEventer = editor // rect的事件不会冒泡，需要手动传递给editor
         this.__listenEvents()
     }
 
     public create() {
         let rotatePoint: IEditPoint, resizeLine: IEditPoint, resizePoint: IEditPoint
-        const { resizePoints, rotatePoints, resizeLines, rect, circle, buttons } = this
-        const arounds: IAround[] = [{ x: 1, y: 1 }, { x: 0.5, y: 1 }, { x: 0, y: 1 }, { x: 0, y: 0.5 }, { x: 0, y: 0 }, { x: 0.5, y: 0 }, { x: 1, y: 0 }, { x: 1, y: 0.5 }]
+        const { view, resizePoints, rotatePoints, resizeLines, rect, circle, buttons } = this
+        const arounds: IAlign[] = ['bottom-right', 'bottom', 'bottom-left', 'left', 'top-left', 'top', 'top-right', 'right']
 
         for (let i = 0; i < 8; i++) {
-            rotatePoint = new EditPoint({ around: arounds[i], width: 15, height: 15, hitFill: "all" })
+            rotatePoint = new EditPoint({ name: 'rotate-point', around: arounds[i], width: 15, height: 15, hitFill: "all" })
             rotatePoints.push(rotatePoint)
             this.listenPointEvents(rotatePoint, 'rotate', i)
 
@@ -59,7 +64,7 @@ export class EditBox extends Group implements IEditBox {
                 this.listenPointEvents(resizeLine, 'resize', i)
             }
 
-            resizePoint = new EditPoint({ name: 'resize-point', around: 'center', strokeAlign: 'outside', hitRadius: 5 })
+            resizePoint = new EditPoint({ name: 'resize-point', hitRadius: 5 })
             resizePoints.push(resizePoint)
             this.listenPointEvents(resizePoint, 'resize', i)
         }
@@ -67,69 +72,100 @@ export class EditBox extends Group implements IEditBox {
         buttons.add(circle)
         this.listenPointEvents(circle, 'rotate', 2)
 
-        this.addMany(...rotatePoints, rect, buttons, ...resizeLines, ...resizePoints)
+        view.addMany(...rotatePoints, rect, buttons, ...resizeLines, ...resizePoints)
+        this.add(view)
     }
 
-    // update
-
-    public update(bounds: IBoundsData): void {
-        const { config, list } = this.editor
-        const { width, height } = bounds
-        const { rect, circle, resizePoints, rotatePoints, resizeLines } = this
-        const { middlePoint, resizeable, rotateable, stroke, strokeWidth } = config
+    public load(): void {
+        const { mergeConfig, element, single } = this.editor
+        const { rect, circle, resizePoints } = this
+        const { stroke, strokeWidth, moveable } = mergeConfig
 
         const pointsStyle = this.getPointsStyle()
         const middlePointsStyle = this.getMiddlePointsStyle()
 
-        this.visible = list[0] && !list[0].locked // check locked
-
-        let point = {} as IPointData, style: IRectInputData, rotateP: IRect, resizeP: IRect, resizeL: IRect
+        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
+        }
+
+        // rotate
+        circle.set(this.getPointStyle(mergeConfig.rotatePoint || pointsStyle[0]))
+
+        // rect
+        rect.set({ stroke, strokeWidth, ...(mergeConfig.rect || {}) })
+        rect.hittable = !single && moveable
 
-            AroundHelper.toPoint(AroundHelper.directionData[i], bounds, point)
-            style = this.getPointStyle((i % 2) ? middlePointsStyle[((i - 1) / 2) % middlePointsStyle.length] : pointsStyle[(i / 2) % pointsStyle.length])
-            resizeP = resizePoints[i], rotateP = rotatePoints[i], resizeL = resizeLines[Math.floor(i / 2)]
-            resizeP.set(style)
-            resizeP.set(point), rotateP.set(point), resizeL.set(point)
+        // 编辑框作为底部虚拟元素， 在 onSelect 方法移除
+        element.syncEventer = (single && moveable) ? rect : null
+        this.app.interaction.bottomList = (single && moveable) ? [{ target: rect, proxy: element }] : null
 
-            // visible 
-            resizeP.visible = resizeL.visible = resizeable || rotateable
-            rotateP.visible = rotateable && resizeable
+    }
+
+    public update(bounds: IBoundsData): void {
+        this.visible = !this.editor.element.locked
 
-            if (i % 2) { // top,  right, bottom, left
+        if (this.view.worldOpacity) {
+            const { mergeConfig } = this.editor
+            const { width, height } = bounds
+            const { rect, circle, resizePoints, rotatePoints, resizeLines } = this
+            const { middlePoint, resizeable, rotateable, hideOnSmall } = mergeConfig
 
-                resizeP.visible = rotateP.visible = !!middlePoint
+            const smallSize = typeof hideOnSmall === 'number' ? hideOnSmall : 10
+            const showPoints = !(hideOnSmall && width < smallSize && height < smallSize)
 
-                if (((i + 1) / 2) % 2) { // top, bottom
-                    resizeL.width = width
-                    if (resizeP.width > width - 30) resizeP.visible = false
-                } else {
-                    resizeL.height = height
-                    resizeP.rotation = 90
-                    if (resizeP.width > height - 30) resizeP.visible = false
+            let point = {} as IPointData, rotateP: IRect, resizeP: IRect, resizeL: IRect
+
+            for (let i = 0; i < 8; i++) {
+
+                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
+
+                if (i % 2) { // top,  right, bottom, left
+
+                    resizeP.visible = rotateP.visible = showPoints && !!middlePoint
+
+                    if (((i + 1) / 2) % 2) { // top, bottom
+                        resizeL.width = width
+                        if (resizeP.width > width - 30) resizeP.visible = false
+                    } else {
+                        resizeL.height = height
+                        resizeP.rotation = 90
+                        if (resizeP.width > height - 30) resizeP.visible = false
+                    }
                 }
-            } else {
-                resizeP.rotation = (i / 2) * 90
+
             }
 
-        }
+            // rotate
+            circle.visible = showPoints && rotateable && !!mergeConfig.rotatePoint
 
-        // rotate
-        circle.visible = rotateable && !!config.rotatePoint
-        circle.set(this.getPointStyle(config.rotatePoint || pointsStyle[0]))
+            // rect
+            if (rect.path) rect.path = null // line可能会变成path优先模式
+            rect.set({ ...bounds, visible: true })
 
-        // rect
-        rect.set({ stroke, strokeWidth, ...(config.rect || {}) })
-        rect.set({ ...bounds, visible: true })
-
-        // buttons
-        this.layoutButtons()
+            // buttons
+            const buttonVisible = showPoints && (circle.visible || this.buttons.children.length > 1)
+            this.buttons.visible = buttonVisible
+            if (buttonVisible) this.layoutButtons()
+        }
     }
 
     protected layoutButtons(): void {
         const { buttons, resizePoints } = this
-        const { buttonsDirection, buttonsFixed, buttonsMargin, middlePoint } = this.editor.config
+        const { buttonsDirection, buttonsFixed, buttonsMargin, middlePoint } = this.editor.mergeConfig
 
         const { flippedX, flippedY } = this
         let index = fourDirection.indexOf(buttonsDirection)
@@ -161,46 +197,66 @@ export class EditBox extends Group implements IEditBox {
 
     }
 
-    public getPointStyle(userStyle?: IRectInputData): IRectInputData {
-        const { stroke, strokeWidth, pointFill, pointSize, pointRadius } = this.editor.config
-        const defaultStyle = { fill: pointFill, stroke, strokeWidth, width: pointSize, height: pointSize, cornerRadius: pointRadius }
+    public unload(): void {
+        this.visible = false
+    }
+
+
+    public getPointStyle(userStyle?: IBoxInputData): IBoxInputData {
+        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 } as IBoxInputData
         return userStyle ? Object.assign(defaultStyle, userStyle) : defaultStyle
     }
 
-    public getPointsStyle(): IRectInputData[] {
-        const { point } = this.editor.config
+    public getPointsStyle(): IBoxInputData[] {
+        const { point } = this.editor.mergeConfig
         return point instanceof Array ? point : [point]
     }
 
-    public getMiddlePointsStyle(): IRectInputData[] {
-        const { middlePoint } = this.editor.config
+    public getMiddlePointsStyle(): IBoxInputData[] {
+        const { middlePoint } = this.editor.mergeConfig
         return middlePoint instanceof Array ? 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
-        if (e.target.name === 'rect') this.editor.opacity = this.editor.config.hideOnMove ? 0 : 1 // move
+        if (e.current.name === 'rect') {
+            const { editor } = this
+            this.moving = true
+            editor.dragStartPoint = { x: editor.element.x, y: editor.element.y }
+            editor.opacity = editor.mergeConfig.hideOnMove ? 0 : 1 // move
+        }
     }
 
     protected onDragEnd(e: DragEvent): void {
         this.dragging = false
-        if (e.target.name === 'rect') this.editor.opacity = 1 // move
+        this.moving = false
+        if (e.current.name === 'rect') this.editor.opacity = 1 // move
+
     }
 
     protected onDrag(e: DragEvent): void {
         const { editor } = this
-        const point = e.current as IEditPoint
-        if (point.pointType === 'rotate' || e.metaKey || e.ctrlKey || !editor.config.resizeable) {
-            if (editor.config.rotateable) editor.onRotate(e)
+        const point = this.enterPoint = e.current as IEditPoint
+        if (point.pointType === 'rotate' || e.metaKey || e.ctrlKey || !editor.mergeConfig.resizeable) {
+            if (editor.mergeConfig.rotateable) editor.onRotate(e)
         } else {
             editor.onScale(e)
         }
+        updateCursor(editor, e)
     }
 
     public onArrow(e: IKeyEvent): void {
-        if (this.editor.hasTarget) {
+        if (this.editor.editing && this.editor.mergeConfig.keyEvent) {
             const move = { x: 0, y: 0 }
             const distance = e.shiftKey ? 10 : 1
             switch (e.code) {
@@ -216,18 +272,34 @@ export class EditBox extends Group implements IEditBox {
                 case 'ArrowRight':
                     move.x = distance
             }
-            if (move.x || move.y) this.editor.move(move.x, move.y)
+            this.editor.move(move)
         }
     }
 
-    protected onDoubleClick(): void {
+
+    protected onDoubleTap(e: PointerEvent): void {
+        if (this.editor.mergeConfig.openInner === 'double') this.openInner(e)
+    }
+
+    protected onLongPress(e: PointerEvent): void {
+        if (this.editor.mergeConfig.openInner === 'long') this.openInner(e)
+    }
+
+    protected openInner(e: PointerEvent): void {
         const { editor } = this
-        if (editor.single && editor.element.isBranch) {
-            //list[0].hitChildren = true
+        if (editor.single) {
+            const { element } = editor
+            if (element.isBranch) {
+                editor.openGroup(element as IGroup)
+                editor.target = editor.selector.findDeepOne(e)
+            } else {
+                editor.openInnerEditor()
+            }
         }
     }
 
-    public listenPointEvents(point: IEditPoint, type: IEditPointType, direction: IDirection8): void {
+
+    public listenPointEvents(point: IEditPoint, type: IEditPointType, direction: Direction9): void {
         const { editor } = this
         point.direction = direction
         point.pointType = type
@@ -241,12 +313,18 @@ export class EditBox extends Group implements IEditBox {
     protected __listenEvents(): void {
         const { rect, editor } = this
         this.__eventIds = [
-            editor.on_(EditorEvent.SELECT, () => { this.visible = editor.hasTarget }),
+            editor.on_(EditorEvent.SELECT, this.onSelect, this),
+
             rect.on_(DragEvent.START, this.onDragStart, this),
             rect.on_(DragEvent.DRAG, editor.onMove, editor),
             rect.on_(DragEvent.END, this.onDragEnd, this),
+
+            rect.on_(ZoomEvent.BEFORE_ZOOM, editor.onScale, editor, true),
+            rect.on_(RotateEvent.BEFORE_ROTATE, editor.onRotate, editor, true),
+
             rect.on_(PointerEvent.ENTER, () => updateMoveCursor(editor)),
-            rect.on_(PointerEvent.DOUBLE_CLICK, this.onDoubleClick, this)
+            rect.on_(PointerEvent.DOUBLE_TAP, this.onDoubleTap, this),
+            rect.on_(PointerEvent.LONG_PRESS, this.onLongPress, this)
         ]
     }
 

package/src/display/EditMask.ts

@@ -0,0 +1,37 @@
+import { ILeaferCanvas, IRenderOptions } from '@leafer-ui/interface'
+import { UI } from '@leafer-ui/draw'
+
+import { IEditor } from '@leafer-in/interface'
+
+
+export class EditMask extends UI {
+
+    public editor: IEditor
+
+    constructor(editor: IEditor) {
+        super()
+        this.editor = editor
+        this.hittable = false
+    }
+
+    public __draw(canvas: ILeaferCanvas, options: IRenderOptions): void {
+        const { editor } = this
+        const { mask } = editor.mergeConfig
+
+        if (mask && editor.list.length) {
+            const { rect } = editor.editBox
+            const { width, height } = rect.__
+
+            canvas.resetTransform()
+            canvas.fillWorld(canvas.bounds, mask)
+            canvas.setWorld(rect.__world, options.matrix)
+            canvas.clearRect(0, 0, width, height)
+        }
+    }
+
+    public destroy(): void {
+        this.editor = null
+        super.destroy()
+    }
+
+}

package/src/display/EditPoint.ts

@@ -1,9 +1,9 @@
-import { Box } from '@leafer-ui/core'
+import { Box, Direction9 } from '@leafer-ui/draw'
 
-import { IDirection8, IEditPoint, IEditPointType } from '@leafer-in/interface'
+import { IEditPoint, IEditPointType } from '@leafer-in/interface'
 
 
 export class EditPoint extends Box implements IEditPoint {
-    public direction: IDirection8
+    public direction: Direction9
     public pointType: IEditPointType
 }

package/src/display/EditSelect.ts

@@ -1,5 +1,6 @@
-import { IBounds, ILeaf, ILeafList, IUI, IEventListenerId } from '@leafer-ui/interface'
-import { Bounds, PointerEvent, DragEvent, MoveEvent, LeafList, Group, ZoomEvent } from '@leafer-ui/core'
+import { IBounds, ILeaf, ILeafList, IUI, IEventListenerId, IPointerEvent } from '@leafer-ui/interface'
+import { Bounds, LeafList, Group } from '@leafer-ui/draw'
+import { PointerEvent, DragEvent, MoveEvent, ZoomEvent } from '@leafer-ui/core'
 
 import { IEditSelect, IEditor, ISelectArea, IStroker } from '@leafer-in/interface'
 
@@ -16,7 +17,7 @@ export class EditSelect extends Group implements IEditSelect {
     public editor: IEditor
 
     public get dragging(): boolean { return !!this.originList }
-    public get running(): boolean { return this.editor.hittable && this.editor.config.selector }
+    public get running(): boolean { const { editor } = this; return this.hittable && editor.visible && editor.hittable && editor.mergeConfig.selector }
     public get isMoveMode(): boolean { return this.app && this.app.interaction.moveMode }
 
     public hoverStroker: IStroker = new Stroker()
@@ -26,7 +27,7 @@ export class EditSelect extends Group implements IEditSelect {
     public selectArea: ISelectArea = new SelectArea()
 
     protected originList: ILeafList
-    protected lastDownLeaf: IUI
+    protected needRemoveItem: IUI
 
     protected __eventIds: IEventListenerId[] = []
 
@@ -43,8 +44,8 @@ export class EditSelect extends Group implements IEditSelect {
     protected onHover(): void {
         const { editor } = this
         if (this.running && !this.dragging && !editor.dragging) {
-            const { stroke, strokeWidth, hover } = editor.config
-            this.hoverStroker.setTarget(hover ? this.editor.hoverTarget : null, { stroke, strokeWidth })
+            const { stroke, strokeWidth, hover, hoverStyle } = editor.mergeConfig
+            this.hoverStroker.setTarget(hover ? this.editor.hoverTarget : null, { stroke, strokeWidth, ...(hoverStyle || {}) })
         } else {
             this.hoverStroker.target = null
         }
@@ -52,7 +53,7 @@ export class EditSelect extends Group implements IEditSelect {
 
     protected onSelect(): void {
         if (this.running) {
-            const { config, list } = this.editor
+            const { mergeConfig: config, list } = this.editor
             const { stroke, strokeWidth } = config
             this.targetStroker.setTarget(list, { stroke, strokeWidth: Math.max(1, strokeWidth / 2) })
             this.hoverStroker.target = null
@@ -60,66 +61,73 @@ export class EditSelect extends Group implements IEditSelect {
     }
 
     public update(): void {
-        if (this.running) this.targetStroker.forceUpdate()
+        if (this.targetStroker.target) this.targetStroker.forceUpdate()
     }
 
     // move / down
 
     protected onPointerMove(e: PointerEvent): void {
-        if (this.running && !this.isMoveMode) {
-            const find = e.shiftKey ? this.findDeepOne(e) : findOne(e.path)
-            this.editor.hoverTarget = this.editor.hasItem(find) ? null : find
+        const { app, editor } = this
+        if (this.running && !this.isMoveMode && app.config.pointer.hover && !app.interaction.dragging) {
+            const find = this.findUI(e)
+            editor.hoverTarget = editor.hasItem(find) ? null : find
         } if (this.isMoveMode) {
-            this.editor.hoverTarget = null //  move.dragEmpty
+            editor.hoverTarget = null //  move.dragEmpty
         }
     }
 
     protected onBeforeDown(e: PointerEvent): void {
-        if (this.running && !this.isMoveMode && !e.middle) {
-            const find = this.lastDownLeaf = findOne(e.path)
+        const { select } = this.editor.mergeConfig
+        if (select === 'press') this.checkAndSelect(e)
+    }
 
-            if (find) {
+    protected onTap(e: PointerEvent): void {
+        const { editor } = this
+        const { select } = editor.mergeConfig
+        if (select === 'tap') this.checkAndSelect(e)
+
+        if (this.needRemoveItem) {
+            editor.removeItem(this.needRemoveItem)
+        } else if (this.isMoveMode) {
+            editor.target = null  // move.dragEmpty
+        }
 
-                if (e.shiftKey) {
-                    this.editor.shiftItem(find)
+    }
+
+    protected checkAndSelect(e: PointerEvent): void { // pointer.down or tap
+        this.needRemoveItem = null
+
+        if (this.allowSelect(e)) {
+            const { editor } = this
+            const find = this.findUI(e)
+
+            if (find) {
+                if (this.isMultipleSelect(e)) {
+                    if (editor.hasItem(find)) this.needRemoveItem = find // 等待tap事件再实际移除
+                    else editor.addItem(find)
                 } else {
-                    this.editor.target = find
+                    editor.target = find
                 }
 
-                // change down data
-                this.editor.updateLayout()
-                find.leafer.interaction.updateDownData()
-
             } else if (this.allow(e.target)) {
 
-                if (!e.shiftKey) this.editor.target = null
+                if (!e.shiftKey) editor.target = null
 
             }
         }
     }
 
-    protected onTap(e: PointerEvent): void {
-        if (this.running && e.shiftKey && !e.middle && !this.lastDownLeaf) {
-            const find = this.findDeepOne(e)
-            if (find) this.editor.shiftItem(find)
-        } else if (this.isMoveMode) {
-            this.editor.target = null  // move.dragEmpty
-        }
-
-        this.lastDownLeaf = null
-    }
-
     // drag
 
     protected onDragStart(e: DragEvent): void {
-        if (this.running && this.allowDrag(e)) {
+        if (this.allowDrag(e)) {
             const { editor } = this
-            const { stroke, strokeWidth, area } = editor.config
+            const { stroke, area } = editor.mergeConfig
             const { x, y } = e.getInner(this)
 
             this.bounds.set(x, y)
 
-            this.selectArea.setStyle({ visible: true, stroke, strokeWidth, x, y }, area)
+            this.selectArea.setStyle({ visible: true, stroke, x, y }, area)
             this.selectArea.setBounds(this.bounds.get())
 
             this.originList = editor.leafList.clone()
@@ -158,7 +166,6 @@ export class EditSelect extends Group implements IEditSelect {
             } else {
 
                 editor.target = this.originList.list as IUI[]
-                if (editor.leafList.length) editor.update()
 
             }
         }
@@ -183,18 +190,30 @@ export class EditSelect extends Group implements IEditSelect {
     }
 
     protected allowDrag(e: DragEvent) {
-        if (this.editor.config.boxSelect && !e.target.draggable) {
-            return (!this.editor.hasTarget && this.allow(e.target)) || (e.shiftKey && !findOne(e.path))
+        if (this.running && this.editor.mergeConfig.boxSelect && !e.target.draggable) {
+            return (!this.editor.editing && this.allow(e.target)) || (e.shiftKey && !findOne(e.path))
         } else {
             return false
         }
     }
 
-    protected findDeepOne(e: PointerEvent): IUI {
+    protected allowSelect(e: IPointerEvent): boolean {
+        return this.running && !this.isMoveMode && !e.middle
+    }
+
+    public findDeepOne(e: PointerEvent): IUI {
         const options = { exclude: new LeafList(this.editor.editBox.rect) }
         return findOne(e.target.leafer.interaction.findPath(e, options)) as IUI
     }
 
+    public findUI(e: PointerEvent): IUI {
+        return this.isMultipleSelect(e) ? this.findDeepOne(e) : findOne(e.path)
+    }
+
+    public isMultipleSelect(e: IPointerEvent): boolean {
+        return e.shiftKey || this.editor.mergeConfig.continuousSelect
+    }
+
     protected __listenEvents(): void {
         const { editor } = this
         editor.waitLeafer(() => {
@@ -229,7 +248,7 @@ export class EditSelect extends Group implements IEditSelect {
     }
 
     public destroy(): void {
-        this.editor = this.originList = this.lastDownLeaf = null
+        this.editor = this.originList = this.needRemoveItem = null
         this.__removeListenEvents()
         super.destroy()
     }

package/src/display/SelectArea.ts

@@ -1,5 +1,5 @@
 import { IBoundsData, IGroupInputData, IRect, IRectInputData } from '@leafer-ui/interface'
-import { Group, Rect } from '@leafer-ui/core'
+import { Group, Rect } from '@leafer-ui/draw'
 
 import { ISelectArea } from '@leafer-in/interface'