@leafer-in/editor 2.1.11 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-in/editor",
-  "version": "2.1.11",
+  "version": "2.2.1",
   "description": "@leafer-in/editor",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -34,10 +34,10 @@
     "leaferjs"
   ],
   "peerDependencies": {
-    "@leafer-ui/draw": "^2.1.11",
-    "@leafer-ui/core": "^2.1.11",
-    "@leafer-in/resize": "^2.1.11",
-    "@leafer-ui/interface": "^2.1.11",
-    "@leafer-in/interface": "^2.1.11"
+    "@leafer-ui/draw": "^2.2.1",
+    "@leafer-ui/core": "^2.2.1",
+    "@leafer-in/resize": "^2.2.1",
+    "@leafer-ui/interface": "^2.2.1",
+    "@leafer-in/interface": "^2.2.1"
   }
 }

package/src/decorator/data.ts

@@ -1,9 +1,10 @@
 import { IFunction, ILeaf, IObject, IUI, } from '@leafer-ui/interface'
-import { defineKey, isNull, isArray, isObject, isUndefined } from '@leafer-ui/draw'
+import { defineKey, isNull, isArray, isObject, isUndefined, DataHelper } from '@leafer-ui/draw'
 
-import { IEditor } from '@leafer-in/interface'
+import { IEditor, IInnerEditor } from '@leafer-in/interface'
 
 import { EditorEvent } from '../event/EditorEvent'
+import { EditorHelper } from '../helper/EditorHelper'
 
 
 export function targetAttr(fn: IFunction) {
@@ -58,6 +59,8 @@ export function mergeConfigAttr() {
                 if (innerEditor) innerEditor.editConfig && Object.assign(mergeConfig, innerEditor.editConfig) // innerEditor 上的配置
                 else if (editTool) editTool.editConfig && Object.assign(mergeConfig, editTool.editConfig) // editTool 上的配置
 
+                if (element && element.mask) EditorHelper.mergeMaskConfig(mergeConfig, this) // 扩展
+
                 if (element && element.editConfig) {
                     let { editConfig } = element
                     if (editConfig.hover || editConfig.hoverStyle || editConfig.hoverPathType) { // 元素的hover样式，不能覆盖到总配置里
@@ -85,3 +88,28 @@ export function mergeConfigAttr() {
 }
 
 
+
+// 合并编辑工具配置装饰器
+export function editToolMergeConfigAttr() {
+    return (target: IInnerEditor, key: string) => {
+        defineKey(target, key, {
+            get() {
+                const t = this as IInnerEditor
+                const { config, userConfig, configKeepKeys } = t, mergedConfig: IObject = config ? DataHelper.clone(config) : {}
+
+                if (configKeepKeys) {
+                    for (let key in userConfig) {
+                        if (!configKeepKeys.includes(key)) mergedConfig[key] = userConfig[key] // 不直接覆盖 configKeepKeys
+                    }
+                }
+
+                if (t.preMergedConfig) t.preMergedConfig(mergedConfig)
+
+                if (configKeepKeys) configKeepKeys.forEach(key => { userConfig[key] && Object.assign(mergedConfig[key], userConfig[key]) }) // 单独 assign configKeepKeys
+
+                return t.mergedConfig = mergedConfig
+            }
+        } as ThisType<any>)
+    }
+}
+

package/src/display/EditBox.ts

@@ -1,8 +1,8 @@
-import { IRect, IEventListenerId, IBoundsData, IPointData, IKeyEvent, IGroup, IBox, IBoxInputData, IAlign, IUI, IEditorConfig, IEditorDragStartData, ITransformTool, IUIEvent, IEditPointInputData } from '@leafer-ui/interface'
-import { Group, Text, AroundHelper, Direction9, ResizeEvent, BoundsHelper, DataHelper, isArray, isString, isNumber, isNull, getPointData, isUndefined } from '@leafer-ui/draw'
+import { IRect, IEventListenerId, IBoundsData, IPointData, IKeyEvent, IGroup, IBox, IBoxInputData, IAlign, IUI, IEditorConfig, IEditorDragStartData, ITransformTool, IUIEvent, IEditPointInputData, IObject } from '@leafer-ui/interface'
+import { Group, Text, AroundHelper, Direction9, ResizeEvent, BoundsHelper, DataHelper, isArray, isString, isNumber, isNull, getPointData, isUndefined, Debug } from '@leafer-ui/draw'
 import { DragEvent, PointerEvent, KeyEvent, RotateEvent, ZoomEvent, MoveEvent } from '@leafer-ui/core'
 
-import { IEditBox, IEditor, IEditPoint, IEditPointType } from '@leafer-in/interface'
+import { IEditBox, IEditBoxWidget, IEditor, IEditPoint, IEditPointType } from '@leafer-in/interface'
 
 import { updatePointCursor, updateMoveCursor } from '../editor/cursor'
 import { EditPoint } from './EditPoint'
@@ -10,6 +10,7 @@ import { EditDataHelper } from '../helper/EditDataHelper'
 
 
 const fourDirection = ['top', 'right', 'bottom', 'left'], editConfig: IEditorConfig = undefined
+const debug = Debug.get('EditBox')
 
 export class EditBox extends Group implements IEditBox {
 
@@ -32,12 +33,16 @@ export class EditBox extends Group implements IEditBox {
     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
+    public linkPoints: IEditPoint[]  // top, right, bottom, left
 
     public enterPoint: IEditPoint
     public dragPoint: IEditPoint // 正在拖拽的控制点
 
     public dragStartData = {} as IEditorDragStartData
 
+    public rectBounds: IBoundsData
+    public showPoints: boolean
+
     public config: IEditorConfig
     public mergedConfig: IEditorConfig
 
@@ -78,6 +83,7 @@ export class EditBox extends Group implements IEditBox {
         this.visible = false
         this.create()
         this.__listenEvents()
+        this.createWidgets()
     }
 
     public create() {
@@ -104,11 +110,10 @@ export class EditBox extends Group implements IEditBox {
         this.listenPointEvents(circle, 'rotate', 2)
         this.listenPointEvents(rect, 'move', 8) // center
 
-        view.addMany(...rotatePoints, rect, circle, buttons, ...resizeLines, ...resizePoints)
+        view.add([...rotatePoints, rect, circle, buttons, ...resizeLines, ...resizePoints])
         this.add(view)
     }
 
-
     public load(): void {
         const { target, mergeConfig, single, rect, circle, resizePoints, resizeLines } = this
         const { stroke, strokeWidth, ignorePixelSnap } = mergeConfig
@@ -119,10 +124,11 @@ export class EditBox extends Group implements IEditBox {
 
         this.visible = !target.locked
 
-        let resizeP: IRect
+        let resizeP: IBox
 
         for (let i = 0; i < 8; i++) {
             resizeP = resizePoints[i]
+            if (resizeP.children.length) resizeP.clear()
             resizeP.set(this.getPointStyle((i % 2) ? middlePointsStyle[((i - 1) / 2) % middlePointsStyle.length] : pointsStyle[(i / 2) % pointsStyle.length]))
             resizeP.rotation = ((i - (i % 2 ? 1 : 0)) / 2) * 90
             if (i % 2) resizeLines[(i - 1) / 2].set({ pointType: 'resize', rotation: (i - 1) / 2 * 90, ...(resizeLinesStyle[((i - 1) / 2) % resizeLinesStyle.length] || {}) } as IEditPointInputData)
@@ -147,6 +153,7 @@ export class EditBox extends Group implements IEditBox {
         if (single) DataHelper.stintSet(target.__world, 'ignorePixelSnap', ignorePixelSnap)
 
         updateMoveCursor(this)
+        this.loadWidgets()
     }
 
     // 必须来自 editor.update()，需同步更新编辑工具 
@@ -156,9 +163,11 @@ export class EditBox extends Group implements IEditBox {
         this.visible = !this.target.locked
         this.set({ x, y, scaleX, scaleY, rotation, skewX, skewY })
         this.updateBounds({ x: 0, y: 0, width, height })
+        this.updateWidgets()
     }
 
     public unload(): void {
+        this.unloadWidgets()
         this.visible = false
         if (this.app) this.rect.syncEventer = this.app.interaction.bottomList = null
     }
@@ -175,6 +184,7 @@ export class EditBox extends Group implements IEditBox {
         }
 
         if (spread) BoundsHelper.spread(bounds, spread)
+        this.rectBounds = bounds
 
         editMask.visible = mask ? true : 0
 
@@ -189,7 +199,7 @@ export class EditBox extends Group implements IEditBox {
         if (this.view.worldOpacity) {
             const { width, height } = bounds
             const smallSize = isNumber(hideOnSmall) ? hideOnSmall : 10
-            const showPoints = editBox && !(hideOnSmall && width < smallSize && height < smallSize)
+            const showPoints = this.showPoints = editBox && !(hideOnSmall && width < smallSize && height < smallSize)
 
             let point = {} as IPointData, rotateP: IRect, resizeP: IRect, resizeL: IRect
 
@@ -528,9 +538,42 @@ export class EditBox extends Group implements IEditBox {
         this.off_(this.__eventIds)
     }
 
+    // widgets
+
+    static WidgetList: IObject = {}
+
+    protected widgets: IEditBoxWidget[] = []
+
+    static registerWidget(Widget: IObject): void {
+        const { tag } = Widget.prototype as IEditBoxWidget
+        EditBox.WidgetList[tag] && debug.repeat(tag)
+        EditBox.WidgetList[tag] = Widget
+    }
+
+    protected createWidgets(): void {
+        Object.values(EditBox.WidgetList).forEach(item => { this.widgets.push(new item(this)) })
+    }
+
+    protected loadWidgets(): void {
+        this.widgets.forEach(item => item.onLoad())
+    }
+
+    protected updateWidgets(): void {
+        this.widgets.forEach(item => item.onUpdate())
+    }
+
+    protected unloadWidgets(): void {
+        this.widgets.forEach(item => item.onUnload())
+    }
+
+    protected destroyWidgets(): void {
+        this.widgets.forEach(item => item.onDestroy())
+    }
+
     public destroy(): void {
         this.editor = null
         this.__removeListenEvents()
+        this.destroyWidgets()
         super.destroy()
     }
 

package/src/display/EditSelect.ts

@@ -8,6 +8,7 @@ import { Stroker } from './Stroker'
 import { SelectArea } from './SelectArea'
 import { EditSelectHelper } from '../helper/EditSelectHelper'
 import { EditorEvent } from '../event/EditorEvent'
+import { EditorHelper } from '../helper/EditorHelper'
 
 
 const { findOne, findByBounds } = EditSelectHelper
@@ -56,7 +57,11 @@ export class EditSelect extends Group implements IEditSelect {
 
     protected onSelect(): void {
         if (this.running) {
-            this.targetStroker.setTarget(this.editor.list)
+            const { editor } = this
+            let { list } = editor
+            const maskList = EditorHelper.getSiblingMaskElements(editor)
+            if (maskList) list = maskList.concat(list)
+            this.targetStroker.setTarget(list)
             this.hoverStroker.target = null
         }
     }

package/src/helper/EditorHelper.ts

@@ -1,6 +1,8 @@
-import { IGroup, IGroupInputData, ILeaf, IUI } from '@leafer-ui/interface'
+import { IEditorConfig, IGroup, IGroupInputData, ILeaf, IUI } from '@leafer-ui/interface'
 import { Group, Matrix } from '@leafer-ui/draw'
 
+import { IEditor } from '@leafer-in/interface'
+
 
 const order = (a: ILeaf, b: ILeaf) => a.parent.children.indexOf(a) - b.parent.children.indexOf(b)
 const reverseOrder = (a: ILeaf, b: ILeaf) => b.parent.children.indexOf(b) - a.parent.children.indexOf(a)
@@ -69,6 +71,10 @@ export const EditorHelper = {
         list.forEach(leaf => {
             if (leaf.parent) leaf.parent.addAt(leaf, 0)
         })
-    }
+    },
+
+    // need rewrite
+    mergeMaskConfig(_mergeConfig: IEditorConfig, _editor: IEditor): void { },
+    getSiblingMaskElements(_editor: IEditor): IUI[] { return undefined }
 
 }

package/src/index.ts

@@ -21,6 +21,7 @@ export { EditTool } from './tool/EditTool'
 export { LineEditTool } from './tool/LineEditTool'
 export { TransformTool } from './tool/TransformTool'
 
+export { editToolMergeConfigAttr } from './decorator/data'
 
 export { EditorHelper } from './helper/EditorHelper'
 export { EditDataHelper } from './helper/EditDataHelper'

package/src/tool/InnerEditor.ts

@@ -1,9 +1,12 @@
-import { IGroup, IEventListenerId, IUI, IObject, IEditorConfig } from '@leafer-ui/interface'
+import { IGroup, IEventListenerId, IUI, IObject, IPointData, IEditorConfig } from '@leafer-ui/interface'
 import { IInnerEditor, IEditor, IEditBox, IInnerEditorMode } from '@leafer-in/interface'
 
-import { Group } from '@leafer-ui/draw'
+import { Group, PointHelper } from '@leafer-ui/draw'
 import { EditToolCreator } from './EditToolCreator'
 
+
+const { abs } = Math, { scale } = PointHelper
+
 export class InnerEditor implements IInnerEditor {
 
     static registerInnerEditor() {
@@ -16,10 +19,10 @@ export class InnerEditor implements IInnerEditor {
     public get mode(): IInnerEditorMode { return 'focus' } // 专注模式
 
     public editTarget: IUI
+    public editConfig?: IEditorConfig
 
     public config: IObject
-
-    public editConfig?: IEditorConfig
+    public get userConfig(): IObject { return (this.editBox.mergeConfig[this.tag] || {}) }
 
     public editor: IEditor
 
@@ -38,6 +41,19 @@ export class InnerEditor implements IInnerEditor {
     }
 
 
+    public getEditBoxPoint(editTargetPoint: IPointData, change?: boolean): IPointData {
+        const point = change ? editTargetPoint : { x: editTargetPoint.x, y: editTargetPoint.y }, { scaleX, scaleY } = this.editTarget.worldTransform
+        scale(point, abs(scaleX), abs(scaleY))
+        return point
+    }
+
+    public getEditTargetPoint(editBoxPoint: IPointData, change?: boolean): IPointData {
+        const point = change ? editBoxPoint : { x: editBoxPoint.x, y: editBoxPoint.y }, { scaleX, scaleY } = this.editTarget.worldTransform
+        scale(point, Math.abs(1 / scaleX), abs(1 / scaleY))
+        return point
+    }
+
+
     public onCreate(): void { }
     public create(): void {
         this.view = new Group()

package/types/index.d.ts

@@ -1,8 +1,8 @@
 import * as _leafer_ui_interface from '@leafer-ui/interface';
-import { IBounds, ILeafList, IUI, IFunction, IEventListenerId, ILeaf, IPointerEvent, ILeaferCanvas, IRenderOptions, IGroup, IObject, IGroupInputData, IEditSize, IPointData, IAlign, IAxis, IMatrix, IApp, IEditorDragStartData, IEditorConfig as IEditorConfig$1, ITransformTool, IBoundsData, IBoxInputData, IUIEvent, IKeyEvent, IRect, IRectInputData, IUIInputData, 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, IEditorDragStartData, IBoundsData, IEditorConfig as IEditorConfig$1, ITransformTool, IBoxInputData, IUIEvent, IKeyEvent, IRect, IRectInputData, IUIInputData, 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';
+import { IEditSelect, IEditor, IStroker, ISelectArea, IEditorConfig, IEditPoint, ISimulateElement, IEditBox, IEditTool, IInnerEditor, IEditorScaleEvent, IEditPointType, IEditBoxWidget, 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;
@@ -154,9 +154,12 @@ declare class EditBox extends Group implements IEditBox {
     resizePoints: IEditPoint[];
     rotatePoints: IEditPoint[];
     resizeLines: IEditPoint[];
+    linkPoints: IEditPoint[];
     enterPoint: IEditPoint;
     dragPoint: IEditPoint;
     dragStartData: IEditorDragStartData;
+    rectBounds: IBoundsData;
+    showPoints: boolean;
     config: IEditorConfig$1;
     mergedConfig: IEditorConfig$1;
     get mergeConfig(): IEditorConfig$1;
@@ -205,6 +208,14 @@ declare class EditBox extends Group implements IEditBox {
     listenPointEvents(point: IEditPoint, type: IEditPointType, direction: Direction9): void;
     protected __listenEvents(): void;
     protected __removeListenEvents(): void;
+    static WidgetList: IObject;
+    protected widgets: IEditBoxWidget[];
+    static registerWidget(Widget: IObject): void;
+    protected createWidgets(): void;
+    protected loadWidgets(): void;
+    protected updateWidgets(): void;
+    protected unloadWidgets(): void;
+    protected destroyWidgets(): void;
     destroy(): void;
 }
 
@@ -325,8 +336,9 @@ declare class InnerEditor implements IInnerEditor {
     get tag(): string;
     get mode(): IInnerEditorMode;
     editTarget: IUI;
-    config: IObject;
     editConfig?: IEditorConfig$1;
+    config: IObject;
+    get userConfig(): IObject;
     editor: IEditor;
     protected _editBox: IEditBox;
     get editBox(): IEditBox;
@@ -334,6 +346,8 @@ declare class InnerEditor implements IInnerEditor {
     view: IGroup;
     eventIds: IEventListenerId[];
     constructor(editor: IEditor);
+    getEditBoxPoint(editTargetPoint: IPointData, change?: boolean): IPointData;
+    getEditTargetPoint(editBoxPoint: IPointData, change?: boolean): IPointData;
     onCreate(): void;
     create(): void;
     onLoad(): void;
@@ -393,11 +407,15 @@ declare class TransformTool implements ITransformTool {
     emitEvent(event?: IEvent, capture?: boolean): void;
 }
 
+declare function editToolMergeConfigAttr(): (target: IInnerEditor, key: string) => void;
+
 declare const EditorHelper: {
     group(list: IUI[], element?: IUI, userGroup?: IGroup | IGroupInputData): IGroup;
     ungroup(list: IUI[]): IUI[];
     toTop(list: IUI[]): void;
     toBottom(list: IUI[]): void;
+    mergeMaskConfig(_mergeConfig: IEditorConfig$1, _editor: IEditor): void;
+    getSiblingMaskElements(_editor: IEditor): IUI[];
 };
 
 declare const EditDataHelper: {
@@ -414,4 +432,4 @@ declare const EditSelectHelper: {
     findByBounds(branch: IUI, bounds: IBounds): IUI[];
 };
 
-export { EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, EditToolCreator, Editor, EditorEvent, EditorGroupEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, InnerEditor, InnerEditorEvent, LineEditTool, SelectArea, Stroker, TransformTool, registerEditTool, registerInnerEditor };
+export { EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, EditToolCreator, Editor, EditorEvent, EditorGroupEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, InnerEditor, InnerEditorEvent, LineEditTool, SelectArea, Stroker, TransformTool, editToolMergeConfigAttr, registerEditTool, registerInnerEditor };