@leafer-in/editor 1.0.0-rc.2 → 1.0.0-rc.20

package/src/display/EditBox.ts

@@ -0,0 +1,275 @@
+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 { IEditBox, IEditor, IDirection8, IEditPoint, IEditPointType } from '@leafer-in/interface'
+
+import { updateCursor, updateMoveCursor } from '../editor/cursor'
+import { EditorEvent } from '../event/EditorEvent'
+import { EditPoint } from './EditPoint'
+import { EditDataHelper } from '../helper/EditDataHelper'
+
+
+const fourDirection = ['top', 'right', 'bottom', 'left']
+
+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: '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
+    public rotatePoints: IEditPoint[] = [] // topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left
+    public resizeLines: IEditPoint[] = [] // top, right, bottom, left
+
+    // fliped
+    public get flipped(): boolean { return this.flippedX || this.flippedY }
+    public get flippedX(): boolean { return this.scaleX < 0 }
+    public get flippedY(): boolean { return this.scaleY < 0 }
+    public get flippedOne(): boolean { return this.scaleX * this.scaleY < 0 }
+
+    public enterPoint: IEditPoint
+
+    protected __eventIds: IEventListenerId[] = []
+
+    constructor(editor: IEditor) {
+        super()
+        this.editor = editor
+        this.visible = false
+        this.create()
+        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 }]
+
+        for (let i = 0; i < 8; i++) {
+            rotatePoint = new EditPoint({ name: 'rotate-point', around: arounds[i], width: 15, height: 15, hitFill: "all" })
+            rotatePoints.push(rotatePoint)
+            this.listenPointEvents(rotatePoint, 'rotate', i)
+
+            if (i % 2) {
+                resizeLine = new EditPoint({ name: 'resize-line', around: 'center', width: 10, height: 10, hitFill: "all" })
+                resizeLines.push(resizeLine)
+                this.listenPointEvents(resizeLine, 'resize', i)
+            }
+
+            resizePoint = new EditPoint({ name: 'resize-point', around: 'center', strokeAlign: 'center', 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)
+    }
+
+    // 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, hideOnSmall } = config
+
+        const pointsStyle = this.getPointsStyle()
+        const middlePointsStyle = this.getMiddlePointsStyle()
+        const smallSize = typeof hideOnSmall === 'number' ? hideOnSmall : 10
+        const showPoints = !(hideOnSmall && width < smallSize && height < smallSize)
+
+        this.visible = list[0] && !list[0].locked // check locked
+
+        let point = {} as IPointData, style: IRectInputData, rotateP: IRect, resizeP: IRect, resizeL: IRect
+
+        for (let i = 0; i < 8; i++) {
+
+            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)
+
+            // visible 
+            resizeP.visible = resizeL.visible = showPoints && (resizeable || rotateable)
+            rotateP.visible = showPoints && rotateable && resizeable && !config.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 && !!config.rotatePoint
+        circle.set(this.getPointStyle(config.rotatePoint || pointsStyle[0]))
+
+        // rect
+        rect.set({ stroke, strokeWidth, ...(config.rect || {}) })
+        rect.set({ ...bounds, visible: true })
+        rect.hittable = config.moveable
+
+        // buttons
+        this.buttons.visible = showPoints
+        this.layoutButtons()
+    }
+
+    protected layoutButtons(): void {
+        const { buttons, resizePoints } = this
+        const { buttonsDirection, buttonsFixed, buttonsMargin, middlePoint } = this.editor.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
+
+        const point = 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
+
+        if (useX) {
+            buttons.x = point.x + margin
+            buttons.y = point.y
+        } else {
+            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 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 }
+        return userStyle ? Object.assign(defaultStyle, userStyle) : defaultStyle
+    }
+
+    public getPointsStyle(): IRectInputData[] {
+        const { point } = this.editor.config
+        return point instanceof Array ? point : [point]
+    }
+
+    public getMiddlePointsStyle(): IRectInputData[] {
+        const { middlePoint } = this.editor.config
+        return middlePoint instanceof Array ? middlePoint : (middlePoint ? [middlePoint] : this.getPointsStyle())
+    }
+
+    // drag
+
+    protected onDragStart(e: DragEvent): void {
+        this.dragging = true
+        if (e.target.name === 'rect') {
+            this.moving = true
+            this.editor.opacity = this.editor.config.hideOnMove ? 0 : 1 // move
+        }
+    }
+
+    protected onDragEnd(e: DragEvent): void {
+        this.dragging = false
+        this.moving = false
+        if (e.target.name === 'rect') this.editor.opacity = 1 // move
+
+    }
+
+    protected onDrag(e: DragEvent): void {
+        const { editor } = this
+        const point = this.enterPoint = e.current as IEditPoint
+        if (point.pointType === 'rotate' || e.metaKey || e.ctrlKey || !editor.config.resizeable) {
+            if (editor.config.rotateable) editor.onRotate(e)
+        } else {
+            editor.onScale(e)
+        }
+        updateCursor(editor, e)
+    }
+
+    public onArrow(e: IKeyEvent): void {
+        if (this.editor.hasTarget && this.editor.config.keyEvent) {
+            const move = { x: 0, y: 0 }
+            const distance = e.shiftKey ? 10 : 1
+            switch (e.code) {
+                case 'ArrowDown':
+                    move.y = distance
+                    break
+                case 'ArrowUp':
+                    move.y = -distance
+                    break
+                case 'ArrowLeft':
+                    move.x = -distance
+                    break
+                case 'ArrowRight':
+                    move.x = distance
+            }
+            if (move.x || move.y) this.editor.move(move.x, move.y)
+        }
+    }
+
+    protected onDoubleClick(): void {
+        const { editor } = this
+        if (editor.single && editor.element.isBranch) {
+            //list[0].hitChildren = true
+        }
+    }
+
+    public listenPointEvents(point: IEditPoint, type: IEditPointType, direction: IDirection8): void {
+        const { editor } = this
+        point.direction = direction
+        point.pointType = type
+        point.on_(DragEvent.START, this.onDragStart, this)
+        point.on_(DragEvent.DRAG, this.onDrag, this)
+        point.on_(DragEvent.END, this.onDragEnd, this)
+        point.on_(PointerEvent.LEAVE, () => this.enterPoint = null)
+        if (point.name !== 'circle') point.on_(PointerEvent.ENTER, (e) => { this.enterPoint = point, updateCursor(editor, e) })
+    }
+
+    protected __listenEvents(): void {
+        const { rect, editor } = this
+        this.__eventIds = [
+            editor.on_(EditorEvent.SELECT, () => { this.visible = editor.hasTarget }),
+            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)
+        ]
+    }
+
+    protected __removeListenEvents(): void {
+        this.off_(this.__eventIds)
+        this.__eventIds.length = 0
+    }
+
+    public destroy(): void {
+        this.editor = null
+        this.__removeListenEvents()
+        super.destroy()
+    }
+
+}

package/src/display/EditPoint.ts

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

package/src/display/EditSelect.ts

@@ -0,0 +1,249 @@
+import { IBounds, ILeaf, ILeafList, IUI, IEventListenerId } from '@leafer-ui/interface'
+import { Bounds, PointerEvent, DragEvent, MoveEvent, LeafList, Group, ZoomEvent } from '@leafer-ui/core'
+
+import { IEditSelect, IEditor, ISelectArea, IStroker } from '@leafer-in/interface'
+
+import { Stroker } from './Stroker'
+import { SelectArea } from './SelectArea'
+import { EditSelectHelper } from '../helper/EditSelectHelper'
+import { EditorEvent } from '../event/EditorEvent'
+
+
+const { findOne } = EditSelectHelper
+
+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 isMoveMode(): boolean { return this.app && this.app.interaction.moveMode }
+
+    public hoverStroker: IStroker = new Stroker()
+    public targetStroker: IStroker = new Stroker()
+
+    public bounds: IBounds = new Bounds()
+    public selectArea: ISelectArea = new SelectArea()
+
+    protected originList: ILeafList
+    protected lastDownLeaf: IUI
+
+    protected __eventIds: IEventListenerId[] = []
+
+
+    constructor(editor: IEditor) {
+        super()
+        this.editor = editor
+        this.addMany(this.targetStroker, this.hoverStroker, this.selectArea)
+        this.__listenEvents()
+    }
+
+    // hover / select
+
+    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 })
+        } else {
+            this.hoverStroker.target = null
+        }
+    }
+
+    protected onSelect(): void {
+        if (this.running) {
+            const { config, list } = this.editor
+            const { stroke, strokeWidth } = config
+            this.targetStroker.setTarget(list, { stroke, strokeWidth: Math.max(1, strokeWidth / 2) })
+            this.hoverStroker.target = null
+        }
+    }
+
+    public update(): void {
+        if (this.running) this.targetStroker.forceUpdate()
+    }
+
+    // move / down
+
+    protected onPointerMove(e: PointerEvent): void {
+        const { app, editor } = this
+        if (this.running && !this.isMoveMode && app.config.pointer.hover && !app.interaction.dragging) {
+            const find = e.shiftKey ? this.findDeepOne(e) : findOne(e.path)
+            editor.hoverTarget = editor.hasItem(find) ? null : find
+        } if (this.isMoveMode) {
+            editor.hoverTarget = null //  move.dragEmpty
+        }
+    }
+
+    protected onBeforeDown(e: PointerEvent): void {
+        const { select } = this.editor.config
+        if (select === 'press') this.checkAndSelect(e, true)
+    }
+
+    protected onTap(e: PointerEvent): void {
+        const { editor } = this
+        const { select, continuousSelect } = editor.config
+        if (select === 'tap') this.checkAndSelect(e)
+
+        if (this.running && (e.shiftKey || continuousSelect) && !e.middle && !this.lastDownLeaf) {
+            const find = this.findDeepOne(e)
+            if (find) editor.shiftItem(find)
+            else if (!e.shiftKey && continuousSelect) editor.target = null
+        } else if (this.isMoveMode) {
+            editor.target = null  // move.dragEmpty
+        }
+
+        this.lastDownLeaf = null
+    }
+
+    protected checkAndSelect(e: PointerEvent, isDownType?: boolean): void { // pointer.down or tap
+        if (this.running && !this.isMoveMode && !e.middle) {
+            const { editor } = this
+            const find = this.lastDownLeaf = findOne(e.path)
+
+            if (find) {
+
+                if (e.shiftKey || editor.config.continuousSelect) {
+                    editor.shiftItem(find)
+                } else {
+                    editor.target = find
+                }
+
+                // change down data
+                if (isDownType) {
+                    editor.updateLayout()
+                    if (!find.locked) this.app.interaction.updateDownData(e, { findList: [editor.editBox.rect] }, editor.config.dualEvent)
+                }
+
+            } else if (this.allow(e.target)) {
+
+                if (!e.shiftKey) editor.target = null
+
+            }
+        }
+    }
+
+    // drag
+
+    protected onDragStart(e: DragEvent): void {
+        if (this.running && this.allowDrag(e)) {
+            const { editor } = this
+            const { stroke, strokeWidth, area } = editor.config
+            const { x, y } = e.getInner(this)
+
+            this.bounds.set(x, y)
+
+            this.selectArea.setStyle({ visible: true, stroke, strokeWidth, x, y }, area)
+            this.selectArea.setBounds(this.bounds.get())
+
+            this.originList = editor.leafList.clone()
+        }
+    }
+
+    protected onDrag(e: DragEvent): void {
+        if (this.editor.dragging) {
+            this.onDragEnd()
+            return
+        }
+
+        if (this.dragging) {
+            const { editor } = this
+            const total = e.getInnerTotal(this)
+
+            const dragBounds = this.bounds.clone().unsign()
+            const list = new LeafList(editor.app.find(EditSelectHelper.findBounds, dragBounds))
+
+            this.bounds.width = total.x
+            this.bounds.height = total.y
+
+            this.selectArea.setBounds(dragBounds.get())
+
+            if (list.length) {
+
+                const selectList: ILeaf[] = []
+
+                this.originList.forEach(item => { if (!list.has(item)) selectList.push(item) })
+                list.forEach(item => { if (!this.originList.has(item)) selectList.push(item) })
+
+                if (selectList.length !== editor.list.length || editor.list.some((child, index) => child !== selectList[index])) {
+                    editor.target = selectList as IUI[]
+                }
+
+            } else {
+
+                editor.target = this.originList.list as IUI[]
+
+            }
+        }
+    }
+
+    protected onDragEnd(): void {
+        if (this.dragging) this.originList = null, this.selectArea.visible = false
+    }
+
+    protected onAutoMove(e: MoveEvent): void {
+        if (this.dragging) {
+            const { x, y } = e.getLocalMove(this)
+            this.bounds.x += x
+            this.bounds.y += y
+        }
+    }
+
+    // helper
+
+    protected allow(target: ILeaf): boolean {
+        return target.leafer !== this.editor.leafer
+    }
+
+    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))
+        } else {
+            return false
+        }
+    }
+
+    protected findDeepOne(e: PointerEvent): IUI {
+        const options = { exclude: new LeafList(this.editor.editBox.rect) }
+        return findOne(e.target.leafer.interaction.findPath(e, options)) as IUI
+    }
+
+    protected __listenEvents(): void {
+        const { editor } = this
+        editor.waitLeafer(() => {
+
+            const { app } = editor
+            app.selector.proxy = editor
+
+            this.__eventIds = [
+                editor.on_(EditorEvent.HOVER, this.onHover, this),
+                editor.on_(EditorEvent.SELECT, this.onSelect, this),
+
+                app.on_(PointerEvent.MOVE, this.onPointerMove, this),
+                app.on_(PointerEvent.BEFORE_DOWN, this.onBeforeDown, this),
+                app.on_(PointerEvent.TAP, this.onTap, this),
+
+                app.on_(DragEvent.START, this.onDragStart, this),
+                app.on_(DragEvent.DRAG, this.onDrag, this),
+                app.on_(DragEvent.END, this.onDragEnd, this),
+
+                app.on_(MoveEvent.MOVE, this.onAutoMove, this),
+                app.on_([ZoomEvent.ZOOM, MoveEvent.MOVE], () => { this.editor.hoverTarget = null }),
+            ]
+
+        })
+    }
+
+    protected __removeListenEvents(): void {
+        if (this.__eventIds) {
+            this.off_(this.__eventIds)
+            this.__eventIds.length = 0
+        }
+    }
+
+    public destroy(): void {
+        this.editor = this.originList = this.lastDownLeaf = null
+        this.__removeListenEvents()
+        super.destroy()
+    }
+}

package/src/display/SelectArea.ts

@@ -0,0 +1,30 @@
+import { IBoundsData, IGroupInputData, IRect, IRectInputData } from '@leafer-ui/interface'
+import { Group, Rect } from '@leafer-ui/core'
+
+import { ISelectArea } from '@leafer-in/interface'
+
+
+export class SelectArea extends Group implements ISelectArea {
+
+    protected strokeArea: IRect = new Rect({ strokeAlign: 'center' })
+    protected fillArea: IRect = new Rect()
+
+    constructor(data?: IGroupInputData) {
+        super(data)
+        this.visible = this.hittable = false
+        this.addMany(this.fillArea, this.strokeArea)
+    }
+
+    public setStyle(style: IRectInputData, userStyle?: IRectInputData): void {
+        const { visible, stroke, strokeWidth } = style
+        this.visible = visible
+        this.strokeArea.reset({ stroke, strokeWidth, ...(userStyle || {}) })
+        this.fillArea.reset({ visible: userStyle ? false : true, fill: stroke, opacity: 0.2 })
+    }
+
+    public setBounds(bounds: IBoundsData): void {
+        this.strokeArea.set(bounds)
+        this.fillArea.set(bounds)
+    }
+
+}

package/src/display/Stroker.ts

@@ -0,0 +1,95 @@
+import { IUI, ILeaferCanvas, IRenderOptions, IRectInputData } from '@leafer-ui/interface'
+import { Paint, UI, MatrixHelper } from '@leafer-ui/core'
+
+import { IStroker } from '@leafer-in/interface'
+
+import { targetAttr } from '../decorator/data'
+
+
+const matrix = MatrixHelper.get()
+const { abs } = Math
+const { copy, scale } = MatrixHelper
+
+export class Stroker extends UI implements IStroker {
+
+    @targetAttr(onTarget)
+    public target: IUI | IUI[]
+
+    public list: IUI[] = []
+
+    constructor() {
+        super()
+        this.hittable = false
+        this.strokeAlign = 'center'
+    }
+
+    public setTarget(target: IUI | IUI[], style: IRectInputData): void {
+        const { stroke, strokeWidth } = style
+        this.set({ stroke, strokeWidth })
+        this.target = target
+    }
+
+    public __draw(canvas: ILeaferCanvas, options: IRenderOptions): void {
+        const { list } = this
+        if (list.length) {
+
+            let leaf: IUI
+            const { stroke, strokeWidth } = this.__
+            const { bounds } = options
+
+            for (let i = 0; i < list.length; i++) {
+                leaf = list[i]
+                if (bounds && bounds.hit(leaf.__world, options.matrix)) {
+
+                    let drewPath: boolean
+
+                    if (leaf.__.editSize === 'scale') {
+                        const aScaleX = abs(leaf.__world.scaleX), aScaleY = abs(leaf.__world.scaleY)
+                        if (aScaleX !== aScaleY) { // need no scale stroke
+                            copy(matrix, leaf.__world)
+                            scale(matrix, 1 / aScaleX, 1 / aScaleY)
+
+                            canvas.setWorld(matrix, options.matrix)
+                            canvas.beginPath()
+                            this.__.strokeWidth = strokeWidth
+
+                            const { x, y, width, height } = leaf.__layout.boxBounds
+                            canvas.rect(x * aScaleX, y * aScaleY, width * aScaleX, height * aScaleY)
+
+                            drewPath = true
+                        }
+                    }
+
+                    if (!drewPath) {
+                        canvas.setWorld(leaf.__world, options.matrix)
+                        canvas.beginPath()
+
+                        if (leaf.__.__useArrow) {
+                            leaf.__drawPath(canvas)
+                        } else {
+                            leaf.__.__pathForRender ? leaf.__drawRenderPath(canvas) : leaf.__drawPathByBox(canvas)
+                        }
+
+                        this.__.strokeWidth = strokeWidth / abs(leaf.__world.scaleX)
+                    }
+
+                    typeof stroke === 'string' ? Paint.stroke(stroke, this, canvas) : Paint.strokes(stroke, this, canvas)
+                }
+            }
+
+            this.__.strokeWidth = strokeWidth
+        }
+    }
+
+    public destroy(): void {
+        this.target = null
+        super.destroy()
+    }
+
+}
+
+function onTarget(stroker: Stroker): void {
+    const value = stroker.target
+    stroker.list = value ? (value instanceof Array ? value : [value]) : []
+    stroker.forceUpdate()
+}