@leafer-in/editor 1.7.0 → 1.9.0

package/src/editor/cursor.ts

@@ -8,23 +8,26 @@ import { EditDataHelper } from '../helper/EditDataHelper'
 
 const cacheCursors: IObject = {}
 
-export function updateCursor(editBox: IEditBox, e: IUIEvent): void {
-    const { enterPoint: point } = editBox
-    if (!point || !editBox.editor.editing || !editBox.visible) return
+export function updatePointCursor(editBox: IEditBox, e: IUIEvent): void {
+    const { enterPoint: point, dragging, skewing, resizing, flippedX, flippedY } = editBox
+    if (!point || !editBox.editor.editing || !editBox.canUse) return
     if (point.name === 'circle') return // 独立旋转按钮
     if (point.pointType === 'button') { // 普通按钮
         if (!point.cursor) point.cursor = 'pointer'
         return
     }
 
-    let { rotation, flippedX, flippedY } = editBox
+    let { rotation } = editBox
     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 = showSkew ? skewCursor : (showResize ? resizeCursor : rotateCursor)
+    const cursor = dragging
+        ? (skewing ? skewCursor : (resizing ? resizeCursor : rotateCursor))
+        : (showSkew ? skewCursor : (showResize ? resizeCursor : rotateCursor))
+
     rotation += (EditDataHelper.getFlipDirection(point.direction, flippedX, flippedY) + 1) * 45
     rotation = Math.round(MathHelper.formatRotation(rotation, true) / 2) * 2
 
@@ -40,7 +43,7 @@ export function updateCursor(editBox: IEditBox, e: IUIEvent): void {
 
 export function updateMoveCursor(editBox: IEditBox): void {
     const { moveCursor, moveable } = editBox.mergeConfig
-    editBox.rect.cursor = moveable ? moveCursor : undefined
+    if (editBox.canUse) editBox.rect.cursor = moveable ? moveCursor : undefined
 }
 
 

package/src/editor/target.ts

@@ -16,7 +16,8 @@ export function onTarget(editor: IEditor, oldValue: IUI | IUI[]): void {
         editor.leafList.reset()
     }
 
-    editor.closeInnerEditor()
+    editor.closeInnerEditor(true)
+    editor.unloadEditTool()
 
     const data = { editor, value: target, oldValue }
     editor.emitEvent(new EditorEvent(EditorEvent.SELECT, data))

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/helper/EditDataHelper.ts

@@ -116,14 +116,18 @@ export const EditDataHelper = {
 
         if (dragBounds) {
             const allowBounds = dragBounds === 'parent' ? target.parent.boxBounds : dragBounds
-            const localBounds = new Bounds(target.__localBoxBounds)
-            localBounds.scaleOf(target.getLocalPointByInner(origin), scaleX, scaleY)
-
-            if (!BoundsHelper.includes(allowBounds, localBounds)) {
-                const realBounds = localBounds.getIntersect(allowBounds)
-                const fitScaleX = realBounds.width / localBounds.width, fitScaleY = realBounds.height / localBounds.height
-                if (useScaleX) scaleX *= fitScaleX
-                if (useScaleY) scaleY *= fitScaleY // 后续需优化带旋转的场景
+            const childBounds = new Bounds(target.__localBoxBounds)
+
+            if (BoundsHelper.includes(new Bounds(allowBounds).spread(0.1), childBounds)) {
+
+                childBounds.scaleOf(target.getLocalPointByInner(origin), scaleX, scaleY)
+
+                if (!BoundsHelper.includes(allowBounds, childBounds)) {
+                    const realBounds = childBounds.getIntersect(allowBounds)
+                    const fitScaleX = realBounds.width / childBounds.width, fitScaleY = realBounds.height / childBounds.height
+                    if (useScaleX) scaleX *= fitScaleX
+                    if (useScaleY) scaleY *= fitScaleY // 后续需优化带旋转的场景
+                }
             }
         }
 

package/src/index.ts

@@ -47,7 +47,7 @@ Creator.editor = function (options?: IEditorConfig, app?: IApp): IEditor {
 Box.addAttr('textBox', false, dataType)
 
 UI.addAttr('editConfig', undefined, dataType)
-UI.addAttr('editOuter', (ui: UI) => ui.__.__isLinePath ? 'LineEditTool' : 'EditTool', dataType)
+UI.addAttr('editOuter', (ui: UI) => { ui.updateLayout(); return ui.__.__isLinePath ? 'LineEditTool' : 'EditTool' }, dataType) // fix: Line 需要更新布局才能精准确定
 
 UI.addAttr('editInner', 'PathEditor', dataType)
 Group.addAttr('editInner', '', dataType)  // 必须设为空

package/src/tool/TransformTool.ts

@@ -1,5 +1,5 @@
-import { IEvent, IPointData, IAlign, IAxis, IFunction, IMatrix } from '@leafer-ui/interface'
-import { MathHelper, Matrix, LeafHelper } 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,17 +23,18 @@ export class TransformTool implements ITransformTool { // Editor use
 
     public onMove(e: DragEvent | MoveEvent): void {
 
-        const { target, mergeConfig, dragStartData } = this.editBox
+        const { target, mergeConfig, dragStartData, app } = this.editBox
 
-        if (e instanceof MoveEvent) {
+        let move: IPointData, { dragLimitAnimate } = mergeConfig
+        if (isUndefined(dragLimitAnimate)) dragLimitAnimate = app && app.config.pointer.dragLimitAnimate
 
-            if (e.moveType !== 'drag') {
-                const { moveable, resizeable } = mergeConfig
-                const move = e.getLocalMove(target)
+        const isMoveEnd = e.type === DragEvent.END || e.type === DragEvent.END
+        const checkLimitMove = !dragLimitAnimate || isMoveEnd
 
-                if (moveable === 'move') e.stop(), this.move(move.x, move.y)
-                else if (resizeable === 'zoom') e.stop()
-            }
+        if (e instanceof MoveEvent) {
+
+            move = e.getLocalMove(target)
+            if (checkLimitMove) DragEvent.limitMove(target, move)
 
         } else {
 
@@ -44,19 +45,23 @@ 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 {
 
         const { target, mergeConfig, single, dragStartData } = this.editBox
-        let { around, lockRatio, resizeable, flipable, editSize } = mergeConfig
+        let { around, lockRatio, flipable, editSize } = mergeConfig
 
         if (e instanceof ZoomEvent) {
 
-            if (resizeable === 'zoom') e.stop(), this.scaleOf(target.getBoxPoint(e), e.scale, e.scale)
+            this.scaleOf(target.getBoxPoint(e), e.scale, e.scale)
 
         } else {
 
@@ -78,31 +83,24 @@ export class TransformTool implements ITransformTool { // Editor use
     public onRotate(e: DragEvent | RotateEvent): void {
 
         const { target, mergeConfig, dragStartData } = this.editBox
-        const { skewable, rotateable, around, rotateGap } = mergeConfig
-        const { direction, name } = e.current as IEditPoint
-
-        if (skewable && name === 'resize-line') return this.onSkew(e as DragEvent)
+        const { around, rotateAround, rotateGap } = mergeConfig
+        const { direction } = e.current as IEditPoint
 
         let origin: IPointData, rotation: number
 
         if (e instanceof RotateEvent) {
 
-            if (rotateable === 'rotate') e.stop(), rotation = e.rotation, origin = target.getBoxPoint(e)
-            else return
-
-            if (target.scaleX * target.scaleY < 0) rotation = -rotation // flippedOne
+            rotation = e.rotation
+            origin = rotateAround ? AroundHelper.getPoint(rotateAround, target.boxBounds) : target.getBoxPoint(e)
 
         } else {
 
-            const data = EditDataHelper.getRotateData(target, direction, e, dragStartData, e.shiftKey ? null : (target.around || target.origin || around || 'center'))
-            rotation = data.rotation
+            const data = EditDataHelper.getRotateData(target, direction, e, dragStartData, e.shiftKey ? null : (rotateAround || target.around || target.origin || around || 'center'))
+            rotation = dragStartData.rotation + data.rotation - target.rotation
             origin = data.origin
 
         }
 
-        if (target.scaleX * target.scaleY < 0) rotation = -rotation // flippedOne
-        if (e instanceof DragEvent) rotation = dragStartData.rotation + rotation - target.rotation
-
         rotation = MathHelper.float(MathHelper.getGapRotation(rotation, rotateGap, target.rotation), 2)
         if (!rotation) return
 
@@ -125,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
         }
 
@@ -172,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
         }
 
@@ -209,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
         }
 
@@ -231,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,7 +1,7 @@
-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 { Group, UI, Direction9, Event, Box } from '@leafer-ui/draw';
+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, IEditorEvent, IEditPointType, IEditPointInputData, 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';
+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';
 
 declare class EditSelect extends Group implements IEditSelect {
     editor: IEditor;
@@ -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;
@@ -63,9 +64,13 @@ declare class Editor extends Group implements IEditor {
     resizeDirection?: Direction9;
     get multiple(): boolean;
     get single(): boolean;
+    get dragPoint(): IEditPoint;
     get dragging(): boolean;
+    get gesturing(): boolean;
     get moving(): boolean;
-    get dragPoint(): IEditPoint;
+    get resizing(): boolean;
+    get rotating(): boolean;
+    get skewing(): boolean;
     get element(): ISimulateElement;
     simulateTarget: ISimulateElement;
     editBox: IEditBox;
@@ -87,6 +92,7 @@ declare class Editor extends Group implements IEditor {
     update(): void;
     updateEditBox(): void;
     updateEditTool(): void;
+    unloadEditTool(): void;
     getEditSize(_ui: IUI): IEditSize;
     onMove(_e: DragEvent | MoveEvent): void;
     onScale(_e: DragEvent | ZoomEvent): void;
@@ -108,8 +114,8 @@ declare class Editor extends Group implements IEditor {
     checkOpenedGroups(): void;
     checkDeepSelect(): void;
     emitGroupEvent(type: string, group?: IGroup): void;
-    openInnerEditor(target?: IUI, select?: boolean): void;
-    closeInnerEditor(): void;
+    openInnerEditor(target?: IUI, nameOrSelect?: string | boolean, select?: boolean): void;
+    closeInnerEditor(onlyInnerEditor?: boolean): void;
     emitInnerEvent(type: string): void;
     lock(): void;
     unlock(): void;
@@ -122,27 +128,14 @@ declare class Editor extends Group implements IEditor {
     destroy(): void;
 }
 
-declare class EditorEvent extends Event implements IEditorEvent {
-    static BEFORE_SELECT: string;
-    static SELECT: string;
-    static AFTER_SELECT: string;
-    static BEFORE_HOVER: string;
-    static HOVER: string;
-    readonly target: IUI;
-    readonly editor: IEditor;
-    readonly value: IUI | IUI[];
-    readonly oldValue: IUI | IUI[];
-    get list(): IUI[];
-    get oldList(): IUI[];
-    readonly worldOrigin: IPointData;
-    readonly origin: IPointData;
-    constructor(type: string, data?: IEditorEvent);
-}
-
 declare class EditBox extends Group implements IEditBox {
     editor: IEditor;
     dragging: boolean;
+    gesturing: boolean;
     moving: boolean;
+    resizing: boolean;
+    rotating: boolean;
+    skewing: boolean;
     view: IGroup;
     rect: IBox;
     circle: IEditPoint;
@@ -167,23 +160,29 @@ declare class EditBox extends Group implements IEditBox {
     get flippedX(): boolean;
     get flippedY(): boolean;
     get flippedOne(): boolean;
+    get canUse(): boolean;
+    get canGesture(): boolean;
     protected __eventIds: IEventListenerId[];
     constructor(editor: IEditor);
     create(): void;
     load(): void;
     update(): void;
+    unload(): void;
     updateBounds(bounds: IBoundsData): void;
     protected layoutCircle(): void;
     protected layoutButtons(): void;
     protected setButtonPosition(buttons: IUI, direction: number, buttonsMargin: number, useMiddlePoint: boolean): void;
-    unload(): void;
     getPointStyle(userStyle?: IBoxInputData): IBoxInputData;
     getPointsStyle(): IBoxInputData[];
     getMiddlePointsStyle(): IBoxInputData[];
-    protected onSelect(e: EditorEvent): void;
     protected onDragStart(e: DragEvent): void;
     protected onDragEnd(e: DragEvent): void;
     protected onDrag(e: DragEvent): void;
+    protected resetDoing(): void;
+    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;
@@ -213,12 +212,29 @@ declare class Stroker extends UI implements IStroker {
     target: IUI | IUI[];
     list: IUI[];
     constructor();
-    setTarget(target: IUI | IUI[], style: IRectInputData): void;
-    update(): void;
+    setTarget(target: IUI | IUI[], style?: IRectInputData): void;
+    update(style?: IRectInputData): void;
     __draw(canvas: ILeaferCanvas, options: IRenderOptions): void;
     destroy(): void;
 }
 
+declare class EditorEvent extends Event implements IEditorEvent {
+    static BEFORE_SELECT: string;
+    static SELECT: string;
+    static AFTER_SELECT: string;
+    static BEFORE_HOVER: string;
+    static HOVER: string;
+    readonly target: IUI;
+    readonly editor: IEditor;
+    readonly value: IUI | IUI[];
+    readonly oldValue: IUI | IUI[];
+    get list(): IUI[];
+    get oldList(): IUI[];
+    readonly worldOrigin: IPointData;
+    readonly origin: IPointData;
+    constructor(type: string, data?: IEditorEvent);
+}
+
 declare class EditorMoveEvent extends EditorEvent implements IEditorMoveEvent {
     static BEFORE_MOVE: string;
     static MOVE: string;