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

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, IUI, IEditorConfig } from '@leafer-ui/interface'
+import { Group, Box, AroundHelper, Direction9 } from '@leafer-ui/draw'
+import { DragEvent, PointerEvent } 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,10 +16,12 @@ export class EditBox extends Group implements IEditBox {
 
     public editor: IEditor
     public dragging: boolean
+    public moving: boolean
 
-    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 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: 'center', around: 'center', cursor: 'crosshair', hitRadius: 5 }) // rotate point
     public buttons: IGroup = new Group({ around: 'center', hitSelf: false })
 
     public resizePoints: IEditPoint[] = [] // topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left
@@ -40,16 +43,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,91 +63,135 @@ 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)
         }
 
-        buttons.add(circle)
         this.listenPointEvents(circle, 'rotate', 2)
 
-        this.addMany(...rotatePoints, rect, buttons, ...resizeLines, ...resizePoints)
+        view.addMany(...rotatePoints, rect, circle, 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
+        }
 
-            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)
+        // rotate
+        circle.set(this.getPointStyle(mergeConfig.circle || mergeConfig.rotatePoint || pointsStyle[0]))
 
-            // visible 
-            resizeP.visible = resizeL.visible = resizeable || rotateable
-            rotateP.visible = rotateable && resizeable
+        // rect
+        rect.set({ stroke, strokeWidth, ...(mergeConfig.rect || {}) })
+        rect.hittable = !single && !!moveable
+
+        // 编辑框作为底部虚拟元素， 在 onSelect 方法移除
+        element.syncEventer = (single && moveable) ? rect : null
+        this.app.interaction.bottomList = (single && moveable) ? [{ target: rect, proxy: element }] : null
+
+    }
+
+    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, buttons, 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.circle || mergeConfig.rotatePoint)
+            if (circle.visible) this.layoutCircle(mergeConfig)
 
-        // 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
+            buttons.visible = showPoints && buttons.children.length > 0
+            if (buttons.visible) this.layoutButtons(mergeConfig)
+        }
+    }
 
-        // buttons
-        this.layoutButtons()
+    protected layoutCircle(config: IEditorConfig): void {
+        const { circleDirection, circleMargin, buttonsMargin, buttonsDirection, middlePoint } = config
+        const direction = fourDirection.indexOf(circleDirection || ((this.buttons.children.length && buttonsDirection === 'bottom') ? 'top' : 'bottom'))
+        this.setButtonPosition(this.circle, direction, circleMargin || buttonsMargin, !!middlePoint)
     }
 
-    protected layoutButtons(): void {
-        const { buttons, resizePoints } = this
-        const { buttonsDirection, buttonsFixed, buttonsMargin, middlePoint } = this.editor.config
+    protected layoutButtons(config: IEditorConfig): void {
+        const { buttons } = this
+        const { buttonsDirection, buttonsFixed, buttonsMargin, middlePoint } = config
 
         const { flippedX, flippedY } = this
         let index = fourDirection.indexOf(buttonsDirection)
         if ((index % 2 && flippedX) || ((index + 1) % 2 && flippedY)) {
             if (buttonsFixed) index = (index + 2) % 4 // flip x / y
         }
+
         const direction = buttonsFixed ? EditDataHelper.getRotateDirection(index, this.flippedOne ? this.rotation : -this.rotation, 4) : index
+        this.setButtonPosition(buttons, direction, buttonsMargin, !!middlePoint)
+
+        if (buttonsFixed) buttons.rotation = (direction - index) * 90
+        buttons.scaleX = flippedX ? -1 : 1
+        buttons.scaleY = flippedY ? -1 : 1
+    }
 
-        const point = resizePoints[direction * 2 + 1] // 4 map 8 direction
+    protected setButtonPosition(buttons: IUI, direction: number, buttonsMargin: number, useMiddlePoint: boolean): void {
+        const point = this.resizePoints[direction * 2 + 1] // 4 map 8 direction
         const useX = direction % 2  // left / right
         const sign = (!direction || direction === 3) ? -1 : 1 // top / left = -1
 
-        const useWidth = index % 2 // left / right  origin direction
-        const margin = (buttonsMargin + (useWidth ? ((middlePoint ? point.width : 0) + buttons.boxBounds.width) : ((middlePoint ? point.height : 0) + buttons.boxBounds.height)) / 2) * sign
+        const useWidth = direction % 2 // left / right  origin direction
+        const margin = (buttonsMargin + (useWidth ? ((useMiddlePoint ? point.width : 0) + buttons.boxBounds.width) : ((useMiddlePoint ? point.height : 0) + buttons.boxBounds.height)) / 2) * sign
 
         if (useX) {
             buttons.x = point.x + margin
@@ -152,55 +200,71 @@ export class EditBox extends Group implements IEditBox {
             buttons.x = point.x
             buttons.y = point.y + margin
         }
+    }
 
-        if (buttonsFixed) {
-            buttons.rotation = (direction - index) * 90
-            buttons.scaleX = flippedX ? -1 : 1
-            buttons.scaleY = flippedY ? -1 : 1
-        }
 
+    public unload(): void {
+        this.visible = false
     }
 
-    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 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
+        const { editor } = this
+        if (e.current.name === 'rect') {
+            this.moving = true
+            editor.dragStartPoint = { x: editor.element.x, y: editor.element.y }
+            editor.opacity = editor.mergeConfig.hideOnMove ? 0 : 1 // move
+        } else if ((e.current as IEditPoint).pointType === 'resize') {
+            editor.dragStartBounds = { ...editor.element.getLayoutBounds('box', 'local') }
+        }
     }
 
     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)
-        } else {
+        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 if (point.pointType === 'resize') {
             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 +280,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 +321,15 @@ 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_(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 === true ? 'rgba(0,0,0,0.8)' : 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
 }