@leafer-in/editor 1.8.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-in/editor",
-  "version": "1.8.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.8.0",
-    "@leafer-ui/core": "^1.8.0",
-    "@leafer-in/resize": "^1.8.0",
-    "@leafer-ui/interface": "^1.8.0",
-    "@leafer-in/interface": "^1.8.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'
@@ -259,7 +259,7 @@ 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)
     }
 
@@ -267,7 +267,7 @@ export class Editor extends Group implements IEditor {
 
     public openInnerEditor(target?: IUI, nameOrSelect?: string | boolean, select?: boolean): void {
         let name: string
-        if (typeof nameOrSelect === 'string') name = nameOrSelect
+        if (isString(nameOrSelect)) name = nameOrSelect
         else if (!select) select = nameOrSelect
 
         if (target && select) this.target = target
@@ -284,6 +284,7 @@ export class Editor extends Group implements IEditor {
                 this.emitInnerEvent(InnerEditorEvent.BEFORE_OPEN)
                 this.innerEditor.load()
                 this.emitInnerEvent(InnerEditorEvent.OPEN)
+                console.log('hello')
             }
         }
     }
@@ -304,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)
     }
 

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,13 +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
                             }
                         }

package/src/display/EditBox.ts

@@ -1,5 +1,5 @@
-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, BoundsHelper } from '@leafer-ui/draw'
+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'
@@ -66,7 +66,7 @@ export class EditBox extends Group implements IEditBox {
     public get canGesture(): boolean { // 是否支持手势
         if (!this.canUse) return false
         const { moveable, resizeable, rotateable } = this.mergeConfig
-        return typeof moveable === 'string' || typeof resizeable === 'string' || typeof rotateable === 'string'
+        return isString(moveable) || isString(resizeable) || isString(rotateable)
     }
 
     protected __eventIds: IEventListenerId[] = []
@@ -114,6 +114,8 @@ 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++) {
@@ -145,6 +147,7 @@ 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 })
     }
@@ -158,16 +161,15 @@ export class EditBox extends Group implements IEditBox {
     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, spread } = 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
@@ -177,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
@@ -265,12 +269,12 @@ 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())
     }
 
 
@@ -286,7 +290,7 @@ export class EditBox extends Group implements IEditBox {
             moveable && (this.moving = true)
             editor.opacity = hideOnMove ? 0 : 1 // move
         } else {
-            if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !resizeable) {
+            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
@@ -303,6 +307,8 @@ export class EditBox extends Group implements IEditBox {
     }
 
     protected onDragEnd(e: DragEvent): void {
+        if (this.mergeConfig.dragLimitAnimate && this.moving) this.transformTool.onMove(e)
+
         this.dragPoint = null
         this.resetDoing()
         const { name, pointType } = e.current as IEditPoint
@@ -334,7 +340,7 @@ export class EditBox extends Group implements IEditBox {
     public onMove(e: MoveEvent): void {
         if (this.canGesture && e.moveType !== 'drag') {
             e.stop()
-            if (typeof this.mergeConfig.moveable === 'string') {
+            if (isString(this.mergeConfig.moveable)) {
                 this.gesturing = this.moving = true
                 this.transformTool.onMove(e)
             }
@@ -344,7 +350,7 @@ export class EditBox extends Group implements IEditBox {
     public onScale(e: ZoomEvent): void {
         if (this.canGesture) {
             e.stop()
-            if (typeof this.mergeConfig.resizeable === 'string') {
+            if (isString(this.mergeConfig.resizeable)) {
                 this.gesturing = this.resizing = true
                 this.transformTool.onScale(e)
             }
@@ -354,7 +360,7 @@ export class EditBox extends Group implements IEditBox {
     public onRotate(e: RotateEvent): void {
         if (this.canGesture) {
             e.stop()
-            if (typeof this.mergeConfig.rotateable === 'string') {
+            if (isString(this.mergeConfig.rotateable)) {
                 this.gesturing = this.rotating = true
                 this.transformTool.onRotate(e)
             }
@@ -362,6 +368,11 @@ export class EditBox extends Group implements IEditBox {
     }
 
     // 键盘
+    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 {
         updatePointCursor(this, e)

package/src/display/EditSelect.ts

@@ -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'
 
@@ -84,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)
                 }
             }
 
@@ -102,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]) : []
 }

package/src/editor/cursor.ts

@@ -21,7 +21,7 @@ export function updatePointCursor(editBox: IEditBox, e: IUIEvent): void {
     const { pointType } = point, { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editBox.mergeConfig
 
     let showResize = pointType.includes('resize')
-    if (showResize && rotateable && (e.metaKey || e.ctrlKey || !resizeable)) showResize = false
+    if (showResize && rotateable && (editBox.isHoldRotateKey(e) || !resizeable)) showResize = false
     const showSkew = skewable && !showResize && (point.name === 'resize-line' || pointType === 'skew')
 
     const cursor = dragging

package/src/event/EditorEvent.ts

@@ -1,11 +1,11 @@
 import { IUI, IPointData } from '@leafer-ui/interface'
-import { Event } from '@leafer-ui/draw'
+import { Event, isArray } from '@leafer-ui/draw'
 
 import { IEditor, IEditorEvent } from '@leafer-in/interface'
 
 
 function toList(value: IUI | IUI[]): IUI[] {
-    return value ? (value instanceof Array ? value : [value]) : []
+    return value ? (isArray(value) ? value : [value]) : []
 }
 
 export class EditorEvent extends Event implements IEditorEvent {

package/src/tool/TransformTool.ts

@@ -1,5 +1,5 @@
-import { IEvent, IPointData, IAlign, IAxis, IFunction, IMatrix } from '@leafer-ui/interface'
-import { MathHelper, Matrix, LeafHelper, AroundHelper } from '@leafer-ui/draw'
+import { IEvent, IPointData, IAlign, IAxis, IFunction, IMatrix, IUI } from '@leafer-ui/interface'
+import { MathHelper, Matrix, LeafHelper, AroundHelper, isObject, isNumber, isUndefined } from '@leafer-ui/draw'
 import { DragEvent, RotateEvent, ZoomEvent, MoveEvent } from '@leafer-ui/core'
 
 import { IEditBox, IEditPoint, IEditTool, IEditorScaleEvent, ISimulateElement, IEditorMoveEvent, IEditorRotateEvent, IEditorSkewEvent } from '@leafer-in/interface'
@@ -23,12 +23,18 @@ export class TransformTool implements ITransformTool { // Editor use
 
     public onMove(e: DragEvent | MoveEvent): void {
 
-        const { target, dragStartData } = this.editBox
+        const { target, mergeConfig, dragStartData, app } = this.editBox
+
+        let move: IPointData, { dragLimitAnimate } = mergeConfig
+        if (isUndefined(dragLimitAnimate)) dragLimitAnimate = app && app.config.pointer.dragLimitAnimate
+
+        const isMoveEnd = e.type === DragEvent.END || e.type === DragEvent.END
+        const checkLimitMove = !dragLimitAnimate || isMoveEnd
 
         if (e instanceof MoveEvent) {
 
-            const move = e.getLocalMove(target)
-            this.move(move.x, move.y)
+            move = e.getLocalMove(target)
+            if (checkLimitMove) DragEvent.limitMove(target, move)
 
         } else {
 
@@ -39,9 +45,13 @@ export class TransformTool implements ITransformTool { // Editor use
                 else total.x = 0
             }
 
-            this.move(DragEvent.getValidMove(target, dragStartData.point, total))
+            move = DragEvent.getValidMove(target, dragStartData.point, total, checkLimitMove)
 
         }
+
+        if (dragLimitAnimate && isMoveEnd) LeafHelper.animateMove(this as unknown as IUI, move, isNumber(dragLimitAnimate) ? dragLimitAnimate : 0.3)  // 是否进行动画
+        else this.move(move)
+
     }
 
     public onScale(e: DragEvent | ZoomEvent): void {
@@ -113,13 +123,13 @@ export class TransformTool implements ITransformTool { // Editor use
 
     public move(x: number | IPointData, y = 0): void {
         if (!this.checkTransform('moveable')) return
-        if (typeof x === 'object') y = x.y, x = x.x
+        if (isObject(x)) y = x.y, x = x.x
 
         const { target, mergeConfig, single, editor } = this.editBox
         const { beforeMove } = mergeConfig
         if (beforeMove) {
             const check = beforeMove({ target, x, y })
-            if (typeof check === 'object') x = check.x, y = check.y
+            if (isObject(check)) x = check.x, y = check.y
             else if (check === false) return
         }
 
@@ -160,7 +170,7 @@ export class TransformTool implements ITransformTool { // Editor use
         const { beforeScale } = mergeConfig
         if (beforeScale) {
             const check = beforeScale({ target, origin, scaleX, scaleY })
-            if (typeof check === 'object') scaleX = check.scaleX, scaleY = check.scaleY
+            if (isObject(check)) scaleX = check.scaleX, scaleY = check.scaleY
             else if (check === false) return
         }
 
@@ -197,7 +207,7 @@ export class TransformTool implements ITransformTool { // Editor use
         const { beforeRotate } = mergeConfig
         if (beforeRotate) {
             const check = beforeRotate({ target, origin, rotation })
-            if (typeof check === 'number') rotation = check
+            if (isNumber(check)) rotation = check
             else if (check === false) return
         }
 
@@ -219,7 +229,7 @@ export class TransformTool implements ITransformTool { // Editor use
         const { beforeSkew } = mergeConfig
         if (beforeSkew) {
             const check = beforeSkew({ target, origin, skewX, skewY })
-            if (typeof check === 'object') skewX = check.skewX, skewY = check.skewY
+            if (isObject(check)) skewX = check.skewX, skewY = check.skewY
             else if (check === false) return
         }
 

package/types/index.d.ts

@@ -1,4 +1,4 @@
-import { IBounds, ILeafList, IUI, IFunction, IEventListenerId, ILeaf, IPointerEvent, ILeaferCanvas, IRenderOptions, IGroup, IObject, IGroupInputData, IEditSize, IPointData, IAlign, IAxis, IMatrix, IApp, IBox, IEditorDragStartData, IEditorConfig as IEditorConfig$1, ITransformTool, IBoundsData, IBoxInputData, IKeyEvent, IRect, IRectInputData, IMatrixData, IDragEvent, IAround, IEvent, ILayoutBoundsData } from '@leafer-ui/interface';
+import { IBounds, ILeafList, IUI, IFunction, IEventListenerId, ILeaf, IPointerEvent, ILeaferCanvas, IRenderOptions, IGroup, IObject, IGroupInputData, IEditSize, IPointData, IAlign, IAxis, IMatrix, IApp, IBox, IEditorDragStartData, IEditorConfig as IEditorConfig$1, ITransformTool, IBoundsData, IBoxInputData, IUIEvent, IKeyEvent, IRect, IRectInputData, IMatrixData, IDragEvent, IAround, IEvent, ILayoutBoundsData } from '@leafer-ui/interface';
 import { Group, UI, Direction9, Box, Event } from '@leafer-ui/draw';
 import { PointerEvent, DragEvent, MoveEvent, ZoomEvent, RotateEvent, KeyEvent } from '@leafer-ui/core';
 import { IEditSelect, IEditor, IStroker, ISelectArea, IEditorConfig, IEditPoint, ISimulateElement, IEditBox, IEditTool, IInnerEditor, IEditorScaleEvent, IEditPointType, IEditPointInputData, IEditorEvent, IEditorMoveEvent, IEditorRotateEvent, IEditorSkewEvent, IEditorGroupEvent, IInnerEditorEvent, IInnerEditorMode, IUI as IUI$1, IDragEvent as IDragEvent$1, IPointData as IPointData$1, IPathCommandData, IFromToData, IAround as IAround$1 } from '@leafer-in/interface';
@@ -34,6 +34,7 @@ declare class EditSelect extends Group implements IEditSelect {
     findDeepOne(e: PointerEvent): IUI;
     findUI(e: PointerEvent): IUI;
     isMultipleSelect(e: IPointerEvent): boolean;
+    isHoldMultipleSelectKey(e: IPointerEvent): boolean;
     protected __listenEvents(): void;
     protected __removeListenEvents(): void;
     destroy(): void;
@@ -181,6 +182,7 @@ declare class EditBox extends Group implements IEditBox {
     onMove(e: MoveEvent): void;
     onScale(e: ZoomEvent): void;
     onRotate(e: RotateEvent): void;
+    isHoldRotateKey(e: IUIEvent): boolean;
     protected onKey(e: KeyEvent): void;
     onArrow(e: IKeyEvent): void;
     protected onDoubleTap(e: PointerEvent): void;