@leafer-in/editor 1.9.9 → 1.9.11

package/package.json

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

package/src/decorator/data.ts

@@ -32,7 +32,10 @@ export function targetAttr(fn: IFunction) {
                             t.setBright(false)
 
                             if (isArray(value) && value.length > 1 && value[0].locked) value.splice(0, 1) // fix: 单个锁定 + shift多选
-                            if (t.single) t.element.syncEventer = null // 重置 EditBox.load() 设置
+                            if (t.single) {
+                                delete t.element.syncEventer // 重置 EditBox.load() 同步事件设置
+                                delete t.element.__world.ignorePixelSnap // 重置 EditBox.load() 忽略对齐像素设置
+                            }
                         }
 
                         const type = isSelect ? EditorEvent.BEFORE_SELECT : EditorEvent.BEFORE_HOVER
@@ -52,7 +55,15 @@ export function mergeConfigAttr() {
         defineKey(target, key, {
             get() {
                 const { config, element, dragPoint, editBox, app } = this, mergeConfig = { ...config } // 实时合并，后期可优化
-                if (element && element.editConfig) Object.assign(mergeConfig, element.editConfig) // 元素上的配置
+                if (element && element.editConfig) {
+                    let { editConfig } = element
+                    if (editConfig.hover || editConfig.hoverStyle) { // 元素的hover样式，不能覆盖到总配置里
+                        editConfig = { ...editConfig }
+                        delete editConfig.hover
+                        delete editConfig.hoverStyle
+                    }
+                    Object.assign(mergeConfig, editConfig) // 元素上的配置
+                }
                 if (editBox.config) Object.assign(mergeConfig, editBox.config) // EditBox 上的配置
                 if (dragPoint) {
                     if (dragPoint.editConfig) Object.assign(mergeConfig, dragPoint.editConfig)

package/src/display/EditBox.ts

@@ -1,5 +1,5 @@
 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, isArray, isString, isNumber, getPointData } from '@leafer-ui/draw'
+import { Group, Text, AroundHelper, Direction9, ResizeEvent, BoundsHelper, DataHelper, isArray, isString, isNumber, isNull, getPointData } from '@leafer-ui/draw'
 import { DragEvent, PointerEvent, KeyEvent, RotateEvent, ZoomEvent, MoveEvent } from '@leafer-ui/core'
 
 import { IEditBox, IEditor, IEditPoint, IEditPointType } from '@leafer-in/interface'
@@ -62,7 +62,7 @@ export class EditBox extends Group implements IEditBox {
     public get flippedY(): boolean { return this.scaleY < 0 }
     public get flippedOne(): boolean { return this.scaleX * this.scaleY < 0 }
 
-    public get canUse(): boolean { return (this.visible && this.view.visible) as boolean } // 编辑框是否处于激活状态
+    public get canUse(): boolean { return this.app && this.editor.editing } // 编辑框是否处于激活状态
     public get canGesture(): boolean { // 是否支持手势
         if (!this.canUse) return false
         const { moveable, resizeable, rotateable } = this.mergeConfig
@@ -111,7 +111,7 @@ export class EditBox extends Group implements IEditBox {
 
     public load(): void {
         const { target, mergeConfig, single, rect, circle, resizePoints, resizeLines } = this
-        const { stroke, strokeWidth, resizeLine } = mergeConfig
+        const { stroke, strokeWidth, resizeLine, ignorePixelSnap } = mergeConfig
 
         const pointsStyle = this.getPointsStyle()
         const middlePointsStyle = this.getMiddlePointsStyle()
@@ -133,20 +133,22 @@ export class EditBox extends Group implements IEditBox {
         // rect
         rect.set({ stroke, strokeWidth, editConfig, ...(mergeConfig.rect || {}) })
 
-        const syncEventer = single && this.transformTool.editTool
-
         // 编辑框作为底部虚拟元素， 在 unload() 中重置
-        rect.hittable = !syncEventer
-        rect.syncEventer = syncEventer && this.editor  // 单选下 rect 的事件不会冒泡，需要手动传递给editor
+        const rectThrough = isNull(mergeConfig.rectThrough) ? single : mergeConfig.rectThrough
+        rect.hittable = !rectThrough
 
-        if (syncEventer) {
-            target.syncEventer = rect // 在 target 属性装饰中重置
+        if (rectThrough) {
+            target.syncEventer = rect // 同步给 rect 冒泡，在 target 属性装饰器中重置
             this.app.interaction.bottomList = [{ target: rect, proxy: target }]
         }
 
+        // 忽略元素像素对齐，在 target 属性装饰器中重置
+        if (single) DataHelper.stintSet(target.__world, 'ignorePixelSnap', ignorePixelSnap)
+
         updateMoveCursor(this)
     }
 
+    // 必须来自 editor.update()，需同步更新编辑工具 
     public update(): void {
         const { editor } = this
         const { x, y, scaleX, scaleY, rotation, skewX, skewY, width, height } = this.target.getLayoutBounds('box', editor, true)
@@ -328,29 +330,25 @@ export class EditBox extends Group implements IEditBox {
     // 操作事件共用
 
     public onTransformStart(e: IUIEvent): void {
-        if (this.canUse) {
-            if (this.moving) this.editor.opacity = this.mergedConfig.hideOnMove ? 0 : 1 // move
-            if (this.resizing) ResizeEvent.resizingKeys = this.editor.leafList.keys // 记录正在resize中的元素列表
-
-            const { dragStartData, target } = this
-            dragStartData.x = e.x
-            dragStartData.y = e.y
-            dragStartData.totalOffset = getPointData() // 缩放、旋转造成的总偏移量，一般用于手势操作的move纠正
-            dragStartData.point = { x: target.x, y: target.y } // 用于移动
-            dragStartData.bounds = { ...target.getLayoutBounds('box', 'local') } // 用于resize
-            dragStartData.rotation = target.rotation // 用于旋转
-        }
+        if (this.moving) this.editor.opacity = this.mergedConfig.hideOnMove ? 0 : 1 // move
+        if (this.resizing) ResizeEvent.resizingKeys = this.editor.leafList.keys // 记录正在resize中的元素列表
+
+        const { dragStartData, target } = this
+        dragStartData.x = e.x
+        dragStartData.y = e.y
+        dragStartData.totalOffset = getPointData() // 缩放、旋转造成的总偏移量，一般用于手势操作的move纠正
+        dragStartData.point = { x: target.x, y: target.y } // 用于移动
+        dragStartData.bounds = { ...target.getLayoutBounds('box', 'local') } // 用于resize
+        dragStartData.rotation = target.rotation // 用于旋转
     }
 
     public onTransformEnd(e: IUIEvent): void {
-        if (this.canUse) {
-            if (this.canDragLimitAnimate && (e instanceof DragEvent || e instanceof MoveEvent)) this.transformTool.onMove(e)
-            if (this.resizing) ResizeEvent.resizingKeys = null
+        if (this.canDragLimitAnimate && (e instanceof DragEvent || e instanceof MoveEvent)) this.transformTool.onMove(e)
+        if (this.resizing) ResizeEvent.resizingKeys = null
 
-            this.dragging = this.gesturing = this.moving = this.resizing = this.rotating = this.skewing = false
-            this.editor.opacity = 1
-            this.update() // 移动端手势操作hideOnMove移动需强制更新一次           
-        }
+        this.dragging = this.gesturing = this.moving = this.resizing = this.rotating = this.skewing = false
+        this.editor.opacity = 1
+        this.editor.update() // 移动端手势操作hideOnMove移动需强制更新一次           
     }
 
     // 手势控制元素
@@ -385,6 +383,14 @@ export class EditBox extends Group implements IEditBox {
         }
     }
 
+    public onGestureStart(e: IUIEvent): void {
+        if (this.canGesture && (e as MoveEvent).moveType !== 'drag') this.onTransformStart(e)
+    }
+
+    public onGestureEnd(e: IUIEvent): void {
+        if (this.canGesture && (e as MoveEvent).moveType !== 'drag') this.onTransformEnd(e)
+    }
+
     // 键盘
 
     public isHoldRotateKey(e: IUIEvent): boolean { // 按住ctrl在控制点上变旋转功能
@@ -481,11 +487,12 @@ export class EditBox extends Group implements IEditBox {
                     [[KeyEvent.HOLD, KeyEvent.UP], this.onKey, this],
                     [KeyEvent.DOWN, this.onArrow, this],
 
-                    [[MoveEvent.START, MoveEvent.BEFORE_MOVE], this.onMove, this, true],
-                    [[ZoomEvent.START, ZoomEvent.BEFORE_ZOOM], this.onScale, this, true],
-                    [[RotateEvent.START, RotateEvent.BEFORE_ROTATE], this.onRotate, this, true],
+                    [MoveEvent.BEFORE_MOVE, this.onMove, this, true],
+                    [ZoomEvent.BEFORE_ZOOM, this.onScale, this, true],
+                    [RotateEvent.BEFORE_ROTATE, this.onRotate, this, true],
 
-                    [[MoveEvent.END, ZoomEvent.END, RotateEvent.END], this.onTransformEnd, this],
+                    [[MoveEvent.START, ZoomEvent.START, RotateEvent.START], this.onGestureStart, this],
+                    [[MoveEvent.END, ZoomEvent.END, RotateEvent.END], this.onGestureEnd, this],
                 ])
             )
         })

package/src/display/EditSelect.ts

@@ -45,8 +45,10 @@ export class EditSelect extends Group implements IEditSelect {
     protected onHover(): void {
         const { editor } = this
         if (this.running && !this.dragging && !editor.dragging) {
-            const { stroke, strokeWidth, hover, hoverStyle } = editor.mergeConfig
-            this.hoverStroker.setTarget(hover ? this.editor.hoverTarget : null, { stroke, strokeWidth, ...(hoverStyle || {}) })
+            const { hoverTarget, mergeConfig } = editor, config = { ...mergeConfig }
+            if (hoverTarget && hoverTarget.editConfig) Object.assign(config, hoverTarget.editConfig) // hover元素上的配置
+            const { stroke, strokeWidth, hover, hoverStyle } = config
+            this.hoverStroker.setTarget(hover ? hoverTarget : null, { stroke, strokeWidth, ...(hoverStyle || {}) })
         } else {
             this.hoverStroker.target = null
         }

package/src/helper/EditDataHelper.ts

@@ -1,17 +1,17 @@
 import { IBoundsData, IPointData, IAround, IAlign, IUI, ILayoutBoundsData } from '@leafer-ui/interface'
-import { AroundHelper, MathHelper, PointHelper, Direction9, DragBoundsHelper, isNumber } from '@leafer-ui/draw'
+import { AroundHelper, MathHelper, PointHelper, Direction9, isNumber } from '@leafer-ui/draw'
+import { DragBoundsHelper } from '@leafer-ui/core'
 
 import { IEditorScaleEvent, IEditorSkewEvent, IEditorRotateEvent } from '@leafer-in/interface'
 
 
 const { topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left } = Direction9
-const { toPoint } = AroundHelper
-const { within, sign } = MathHelper
+const { toPoint } = AroundHelper, { within, sign } = MathHelper, { abs } = Math
 
 export const EditDataHelper = {
 
     getScaleData(target: IUI, startBounds: ILayoutBoundsData, direction: Direction9, totalMoveOrScale: IPointData | number, lockRatio: boolean | 'corner', around: IAround, flipable: boolean, scaleMode: boolean): IEditorScaleEvent {
-        let align: IAlign, origin = {} as IPointData, scaleX: number = 1, scaleY: number = 1
+        let align: IAlign, origin = {} as IPointData, scaleX: number = 1, scaleY: number = 1, lockScale: number
 
         const { boxBounds, widthRange, heightRange, dragBounds, worldBoxBounds } = target
         const { width, height } = startBounds
@@ -86,21 +86,20 @@ export const EditDataHelper = {
                 if (lockRatio === 'corner' && direction % 2) {
                     lockRatio = false
                 } else {
-                    let scale: number
                     switch (direction) {
                         case top:
                         case bottom:
-                            scale = scaleY
+                            scaleX = scaleY
                             break
                         case left:
                         case right:
-                            scale = scaleX
+                            scaleY = scaleX
                             break
                         default:
-                            scale = Math.sqrt(Math.abs(scaleX * scaleY))
+                            lockScale = Math.sqrt(abs(scaleX * scaleY))
+                            scaleX = sign(scaleX) * lockScale
+                            scaleY = sign(scaleY) * lockScale
                     }
-                    scaleX = scaleX < 0 ? -scale : scale
-                    scaleY = scaleY < 0 ? -scale : scale
                 }
             }
 
@@ -123,7 +122,7 @@ export const EditDataHelper = {
 
         if (dragBounds) {
             const scaleData = { x: scaleX, y: scaleY }
-            DragBoundsHelper.limitScaleOf(target, origin, scaleData)
+            DragBoundsHelper.limitScaleOf(target, origin, scaleData, lockRatio as boolean)
             scaleX = scaleData.x
             scaleY = scaleData.y
         }
@@ -139,10 +138,14 @@ export const EditDataHelper = {
         }
 
         // 防止小于1px
-        if (useScaleX && Math.abs(scaleX * worldBoxBounds.width) < 1) scaleX = sign(scaleX) / worldBoxBounds.width
-        if (useScaleY && Math.abs(scaleY * worldBoxBounds.height) < 1) scaleY = sign(scaleY) / worldBoxBounds.height
+        if (useScaleX && abs(scaleX * worldBoxBounds.width) < 1) scaleX = sign(scaleX) / worldBoxBounds.width
+        if (useScaleY && abs(scaleY * worldBoxBounds.height) < 1) scaleY = sign(scaleY) / worldBoxBounds.height
 
-        if (lockRatio && scaleX !== scaleY) scaleY = scaleX = Math.min(scaleX, scaleY)
+        if (lockRatio && scaleX !== scaleY) {
+            lockScale = Math.min(abs(scaleX), abs(scaleY))
+            scaleX = sign(scaleX) * lockScale
+            scaleY = sign(scaleY) * lockScale
+        }
 
         return { origin, scaleX, scaleY, direction, lockRatio, around }
     },

package/types/index.d.ts

@@ -190,6 +190,8 @@ declare class EditBox extends Group implements IEditBox {
     onMove(e: MoveEvent): void;
     onScale(e: ZoomEvent): void;
     onRotate(e: RotateEvent): void;
+    onGestureStart(e: IUIEvent): void;
+    onGestureEnd(e: IUIEvent): void;
     isHoldRotateKey(e: IUIEvent): boolean;
     protected onKey(e: KeyEvent): void;
     onArrow(e: IKeyEvent): void;