@leafer-in/editor 1.5.1 → 1.5.3

package/package.json

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

package/src/Editor.ts

@@ -168,7 +168,6 @@ export class Editor extends Group implements IEditor {
     // operate
 
     public onMove(e: DragEvent | MoveEvent): void {
-
         if (e instanceof MoveEvent) {
 
             if (e.moveType !== 'drag') {
@@ -190,7 +189,6 @@ export class Editor extends Group implements IEditor {
             this.move(DragEvent.getValidMove(this.element, this.editBox.dragStartData.point, total))
 
         }
-
     }
 
     public onScale(e: DragEvent | ZoomEvent): void {
@@ -217,7 +215,6 @@ export class Editor extends Group implements IEditor {
             }
 
         }
-
     }
 
     public onRotate(e: DragEvent | RotateEvent): void {
@@ -267,12 +264,19 @@ export class Editor extends Group implements IEditor {
     // transform
 
     public move(x: number | IPointData, y = 0): void {
-        const { element } = this
         if (!this.checkTransform('moveable')) return
+        if (typeof x === 'object') y = x.y, x = x.x
 
-        const world = element.getWorldPointByLocal(typeof x === 'object' ? { ...x } : { x, y }, null, true)
-        if (this.multiple) element.safeChange(() => element.move(x, y))
-        const data: IEditorMoveEvent = { target: element, editor: this, moveX: world.x, moveY: world.y }
+        const { element: target } = this, { beforeMove } = this.mergeConfig
+        if (beforeMove) {
+            const check = beforeMove({ target, x, y })
+            if (typeof check === 'object') x = check.x, y = check.y
+            else if (check === false) return
+        }
+
+        const world = target.getWorldPointByLocal({ x, y }, null, true)
+        if (this.multiple) target.safeChange(() => target.move(x, y))
+        const data: IEditorMoveEvent = { target, editor: this, moveX: world.x, moveY: world.y }
 
         this.emitEvent(new EditorMoveEvent(EditorMoveEvent.BEFORE_MOVE, data))
         const event = new EditorMoveEvent(EditorMoveEvent.MOVE, data)
@@ -283,8 +287,14 @@ export class Editor extends Group implements IEditor {
     public scaleWithDrag(data: IEditorScaleEvent): void {
         if (!this.checkTransform('resizeable')) return
 
-        const { element } = this
-        data = { ...data, target: element, editor: this, worldOrigin: element.getWorldPoint(data.origin) }
+        const { element: target } = this, { beforeScale } = this.mergeConfig
+        if (beforeScale) {
+            const { origin, scaleX, scaleY, drag } = data
+            const check = beforeScale({ target, drag, origin, scaleX, scaleY })
+            if (check === false) return
+        }
+
+        data = { ...data, target, editor: this, worldOrigin: target.getWorldPoint(data.origin) }
 
         this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data))
         const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data)
@@ -296,10 +306,16 @@ export class Editor extends Group implements IEditor {
     override scaleOf(origin: IPointData | IAlign, scaleX: number, scaleY = scaleX, _resize?: boolean): void {
         if (!this.checkTransform('resizeable')) return
 
-        const { element } = this
+        const { element: target } = this, { beforeScale } = this.mergeConfig
+        if (beforeScale) {
+            const check = beforeScale({ target, origin, scaleX, scaleY })
+            if (typeof check === 'object') scaleX = check.scaleX, scaleY = check.scaleY
+            else if (check === false) return
+        }
+
         const worldOrigin = this.getWorldOrigin(origin)
-        const transform = this.multiple && this.getChangedTransform(() => element.safeChange(() => element.scaleOf(origin, scaleX, scaleY)))
-        const data: IEditorScaleEvent = { target: element, editor: this, worldOrigin, scaleX, scaleY, transform }
+        const transform = this.multiple && this.getChangedTransform(() => target.safeChange(() => target.scaleOf(origin, scaleX, scaleY)))
+        const data: IEditorScaleEvent = { target, editor: this, worldOrigin, scaleX, scaleY, transform }
 
         this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data))
         const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data)
@@ -324,10 +340,16 @@ export class Editor extends Group implements IEditor {
     override rotateOf(origin: IPointData | IAlign, rotation: number): void {
         if (!this.checkTransform('rotateable')) return
 
-        const { element } = this
+        const { element: target } = this, { beforeRotate } = this.mergeConfig
+        if (beforeRotate) {
+            const check = beforeRotate({ target, origin, rotation })
+            if (typeof check === 'number') rotation = check
+            else if (check === false) return
+        }
+
         const worldOrigin = this.getWorldOrigin(origin)
-        const transform = this.multiple && this.getChangedTransform(() => element.safeChange(() => element.rotateOf(origin, rotation)))
-        const data: IEditorRotateEvent = { target: element, editor: this, worldOrigin, rotation, transform }
+        const transform = this.multiple && this.getChangedTransform(() => target.safeChange(() => target.rotateOf(origin, rotation)))
+        const data: IEditorRotateEvent = { target, editor: this, worldOrigin, rotation, transform }
 
         this.emitEvent(new EditorRotateEvent(EditorRotateEvent.BEFORE_ROTATE, data))
         const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, data)
@@ -338,10 +360,16 @@ export class Editor extends Group implements IEditor {
     override skewOf(origin: IPointData | IAlign, skewX: number, skewY = 0, _resize?: boolean): void {
         if (!this.checkTransform('skewable')) return
 
-        const { element } = this
+        const { element: target } = this, { beforeSkew } = this.mergeConfig
+        if (beforeSkew) {
+            const check = beforeSkew({ target, origin, skewX, skewY })
+            if (typeof check === 'object') skewX = check.skewX, skewY = check.skewY
+            else if (check === false) return
+        }
+
         const worldOrigin = this.getWorldOrigin(origin)
-        const transform = this.multiple && this.getChangedTransform(() => element.safeChange(() => element.skewOf(origin, skewX, skewY)))
-        const data: IEditorSkewEvent = { target: element, editor: this, worldOrigin, skewX, skewY, transform }
+        const transform = this.multiple && this.getChangedTransform(() => target.safeChange(() => target.skewOf(origin, skewX, skewY)))
+        const data: IEditorSkewEvent = { target, editor: this, worldOrigin, skewX, skewY, transform }
 
         this.emitEvent(new EditorSkewEvent(EditorSkewEvent.BEFORE_SKEW, data))
         const event = new EditorSkewEvent(EditorSkewEvent.SKEW, data)

package/src/config.ts

@@ -30,6 +30,7 @@ export const config: IEditorConfig = {
     hover: true,
     select: 'press',
     openInner: 'double',
+    multipleSelect: true,
     boxSelect: true,
 
     moveable: true,

package/src/decorator/data.ts

@@ -5,17 +5,33 @@ import { defineKey } from '@leafer-ui/draw'
 import { EditorEvent } from '../event/EditorEvent'
 
 
-
 export function targetAttr(fn: IFunction) {
     return (target: ILeaf, key: string) => {
         const privateKey = '_' + key
         defineKey(target, key, {
             get() { return (this as IObject)[privateKey] },
-            set(value: unknown) {
+            set(value: IUI | IUI[]) {
                 const old = (this as IObject)[privateKey]
                 if (old !== value) {
-                    const type = key === 'target' ? EditorEvent.BEFORE_SELECT : EditorEvent.BEFORE_HOVER
-                    if (this.hasEvent(type)) this.emitEvent(new EditorEvent(type, { editor: this as IEditor, value: value as IUI, oldValue: old }));
+
+                    if ((this as IEditor).config) { // Editor
+
+                        const isSelect = key === 'target'
+                        if (isSelect) {
+                            if (value instanceof Array && value.length > 1 && value[0].locked) value.splice(0, 1) // fix: 单个锁定 + shift多选
+
+                            const { beforeSelect } = (this as IEditor).config
+                            if (beforeSelect) {
+                                const check = beforeSelect({ target: value })
+                                if (typeof check === 'object') value = check
+                                else if (check === false) return
+                            }
+                        }
+
+                        const type = isSelect ? EditorEvent.BEFORE_SELECT : EditorEvent.BEFORE_HOVER
+                        if (this.hasEvent(type)) this.emitEvent(new EditorEvent(type, { editor: this as IEditor, value: value as IUI, oldValue: old }))
+                    }
+
                     (this as IObject)[privateKey] = value, fn(this, old)
                 }
             }

package/src/display/EditBox.ts

@@ -264,6 +264,7 @@ export class EditBox extends Group implements IEditBox {
         const { pointType } = this.enterPoint = e.current as IEditPoint
         if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !editor.mergeConfig.resizeable) editor.onRotate(e)
         if (pointType.includes('resize')) editor.onScale(e)
+        if (pointType === 'skew') editor.onSkew(e)
         updateCursor(editor, e)
     }
 

package/src/display/EditSelect.ts

@@ -207,7 +207,8 @@ export class EditSelect extends Group implements IEditSelect {
     }
 
     protected allowDrag(e: DragEvent) {
-        if (this.running && (this.editor.mergeConfig.boxSelect) && !e.target.draggable) {
+        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))
         } else {
             return false
@@ -228,7 +229,8 @@ export class EditSelect extends Group implements IEditSelect {
     }
 
     public isMultipleSelect(e: IPointerEvent): boolean {
-        return e.shiftKey || this.editor.mergeConfig.continuousSelect
+        const { multipleSelect, continuousSelect } = this.editor.mergeConfig
+        return multipleSelect && (e.shiftKey || continuousSelect)
     }
 
     protected __listenEvents(): void {

package/src/editor/cursor.ts

@@ -23,7 +23,7 @@ export function updateCursor(editor: IEditor, e: IUIEvent): void {
 
     let showResize = pointType.includes('resize')
     if (showResize && rotateable && (e.metaKey || e.ctrlKey || !resizeable)) showResize = false
-    const showSkew = skewable && !showResize && point.name === 'resize-line'
+    const showSkew = skewable && !showResize && (point.name === 'resize-line' || pointType === 'skew')
 
     const cursor = showSkew ? skewCursor : (showResize ? resizeCursor : rotateCursor)
     rotation += (EditDataHelper.getFlipDirection(point.direction, flippedX, flippedY) + 1) * 45

package/src/editor/target.ts

@@ -1,6 +1,6 @@
 import { LeafList } from '@leafer-ui/draw'
 
-import { IEditor, ILeaf, IUI } from '@leafer-in/interface'
+import { IEditor, IUI } from '@leafer-in/interface'
 
 import { simulate } from './simulate'
 import { updateMoveCursor } from './cursor'
@@ -10,11 +10,7 @@ import { EditorEvent } from '../event/EditorEvent'
 export function onTarget(editor: IEditor, oldValue: IUI | IUI[]): void {
     const { target } = editor
     if (target) {
-        const { list } = editor.leafList = target instanceof LeafList ? target : new LeafList(target instanceof Array ? target : target as IUI)
-        if (!list.every(checkEditable)) { // 过滤不合格的元素
-            editor.target = list.filter(checkEditable) as IUI[]
-            return
-        }
+        editor.leafList = target instanceof LeafList ? target : new LeafList(target)
         if (editor.multiple) simulate(editor) // 更新模拟元素
     } else {
         editor.simulateTarget.remove()
@@ -41,9 +37,4 @@ export function onTarget(editor: IEditor, oldValue: IUI | IUI[]): void {
 
 export function onHover(editor: IEditor, oldValue: IUI): void {
     editor.emitEvent(new EditorEvent(EditorEvent.HOVER, { editor, value: editor.hoverTarget, oldValue }))
-}
-
-
-function checkEditable(item: ILeaf): boolean {
-    return item.editable && !item.locked
 }

package/src/helper/EditDataHelper.ts

@@ -174,21 +174,25 @@ export const EditDataHelper = {
 
         switch (direction) {
             case top:
+            case topLeft:
                 last = { x: 0.5, y: 0 }
                 align = 'bottom'
                 skewX = 1
                 break
             case bottom:
+            case bottomRight:
                 last = { x: 0.5, y: 1 }
                 align = 'top'
                 skewX = 1
                 break
             case left:
+            case bottomLeft:
                 last = { x: 0, y: 0.5 }
                 align = 'right'
                 skewY = 1
                 break
             case right:
+            case topRight:
                 last = { x: 1, y: 0.5 }
                 align = 'left'
                 skewY = 1

package/src/helper/EditorHelper.ts

@@ -40,13 +40,14 @@ export const EditorHelper = {
 
         app.lockLayout()
         list.forEach(leaf => {
-            if (leaf.isBranch && !leaf.isBranchLeaf) {
+            if (leaf.isBranch) {
                 const { parent, children } = leaf
                 while (children.length) {
                     ungroupList.push(children[0])
                     children[0].dropTo(parent, parent.children.indexOf(leaf))
                 }
-                leaf.remove()
+                if (leaf.isBranchLeaf) ungroupList.push(leaf)
+                else leaf.remove()
             } else {
                 ungroupList.push(leaf)
             }