@leafer-in/editor 1.9.6 → 1.9.7

package/package.json

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

package/src/Editor.ts

@@ -1,5 +1,5 @@
 import { IGroupInputData, IUI, IEventListenerId, IPointData, ILeafList, IEditSize, IGroup, IObject, IAlign, IAxis, IFunction, IMatrix, IApp, ILeaferMode } from '@leafer-ui/interface'
-import { Group, DataHelper, LeafList, RenderEvent, LeafHelper, Direction9, Plugin, isString, PropertyEvent, LeaferEvent } from '@leafer-ui/draw'
+import { Group, DataHelper, LeafList, RenderEvent, LeafHelper, Direction9, Plugin, isString, PropertyEvent, LeaferEvent, isArray } 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'
@@ -29,11 +29,13 @@ export class Editor extends Group implements IEditor {
     readonly mergeConfig: IEditorConfig
     readonly mergedConfig: IEditorConfig
 
+    @targetAttr(onTarget)
+    public target?: IUI | IUI[]
+
     @targetAttr(onHover)
     public hoverTarget?: IUI
 
-    @targetAttr(onTarget)
-    public target?: IUI | IUI[]
+    public dimTarget?: IGroup | IGroup[] // 需要淡化的容器
 
     // 列表
 
@@ -121,6 +123,20 @@ export class Editor extends Group implements IEditor {
         this.hasItem(item) ? this.removeItem(item) : this.addItem(item)
     }
 
+    // 淡化 / 突出
+
+    public setDimOthers(value: boolean | number, attrName: 'bright' | 'dim' = 'dim', list?: IUI[]): void {
+        if (!list) {
+            const { dimTarget, targetLeafer } = this
+            list = dimTarget ? (isArray(dimTarget) ? dimTarget : [dimTarget]) : [targetLeafer]
+        }
+        if (list[0] && list[0][attrName] !== (value || false)) list.forEach(item => DataHelper.stintSet(item, attrName, value))
+    }
+
+    public setBright(value: boolean): void {
+        this.setDimOthers(value, 'bright', this.list)
+    }
+
     // update
 
     public update(): void {

package/src/decorator/data.ts

@@ -15,14 +15,19 @@ export function targetAttr(fn: IFunction) {
                 const old = (this as IObject)[privateKey]
                 if (old !== value) {
 
-                    if ((this as IEditor).config) { // Editor
+                    const t = this as IEditor
+
+                    if (t.config) { // Editor
 
                         const isSelect = key === 'target'
                         if (isSelect) {
+                            t.setDimOthers(false)
+                            t.setBright(false)
+
                             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() 设置
+                            if (t.single) t.element.syncEventer = null // 重置 EditBox.load() 设置
 
-                            const { beforeSelect } = (this as IEditor).config
+                            const { beforeSelect } = t.config
                             if (beforeSelect) {
                                 const check = beforeSelect({ target: value })
                                 if (isObject(check)) value = check
@@ -31,7 +36,7 @@ export function targetAttr(fn: IFunction) {
                         }
 
                         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 }))
+                        if (this.hasEvent(type)) this.emitEvent(new EditorEvent(type, { editor: t, value: value as IUI, oldValue: old }))
                     }
 
                     (this as IObject)[privateKey] = value, fn(this, old)

package/src/display/EditBox.ts

@@ -1,5 +1,5 @@
-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 { 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 } from '@leafer-ui/draw'
 import { DragEvent, PointerEvent, KeyEvent, RotateEvent, ZoomEvent, MoveEvent } from '@leafer-ui/core'
 
 import { IEditBox, IEditor, IEditPoint, IEditPointType } from '@leafer-in/interface'
@@ -25,7 +25,7 @@ export class EditBox extends Group implements IEditBox {
 
     public view: IGroup = new Group()  // 放置默认编辑工具控制点
 
-    public rect: IBox = new Box({ name: 'rect', hitFill: 'all', hitStroke: 'none', strokeAlign: 'center', hitRadius: 5 }) // target rect
+    public rect: IEditPoint = new EditPoint({ name: 'rect', hitFill: 'all', hitStroke: 'none', strokeAlign: 'center', hitRadius: 5 }) // target rect
     public circle: IEditPoint = new EditPoint({ name: 'circle', strokeAlign: 'center', around: 'center', cursor: 'crosshair', hitRadius: 5 }) // rotate point
     public buttons: IGroup = new Group({ around: 'center', hitSelf: false, visible: 0 })
 
@@ -101,6 +101,7 @@ 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)
         this.add(view)
@@ -108,8 +109,8 @@ export class EditBox extends Group implements IEditBox {
 
 
     public load(): void {
-        const { target, mergeConfig, single, rect, circle, resizePoints } = this
-        const { stroke, strokeWidth } = mergeConfig
+        const { target, mergeConfig, single, rect, circle, resizePoints, resizeLines } = this
+        const { stroke, strokeWidth, resizeLine } = mergeConfig
 
         const pointsStyle = this.getPointsStyle()
         const middlePointsStyle = this.getMiddlePointsStyle()
@@ -122,6 +123,7 @@ export class EditBox extends Group implements IEditBox {
             resizeP = resizePoints[i]
             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, ...(resizeLine || {}) } as IEditPointInputData)
         }
 
         // rotate
@@ -159,12 +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, hideRotatePoints, hideResizeLines } = mergeConfig
+        const { editor, mergeConfig, single, rect, circle, buttons, resizePoints, rotatePoints, resizeLines } = this
+        const { editMask } = editor
+        const { middlePoint, resizeable, rotateable, hideOnSmall, editBox, mask, dimOthers, bright, spread, hideRotatePoints, hideResizeLines } = mergeConfig
 
         editMask.visible = mask ? true : 0
 
+        editor.setDimOthers(dimOthers)
+        editor.setBright(!!dimOthers || bright)
+
         if (spread) BoundsHelper.spread(bounds, spread)
 
         if (this.view.worldOpacity) {
@@ -195,10 +200,10 @@ export class EditBox extends Group implements IEditBox {
                     resizeP.visible = rotateP.visible = showPoints && !!middlePoint
 
                     if (((i + 1) / 2) % 2) { // top, bottom
-                        resizeL.width = width
+                        resizeL.width = width + resizeL.height
                         if (hideOnSmall && resizeP.width * 2 > width) resizeP.visible = false
                     } else {
-                        resizeL.height = height
+                        resizeL.width = height + resizeL.height
                         if (hideOnSmall && resizeP.width * 2 > height) resizeP.visible = false
                     }
                 }
@@ -286,7 +291,7 @@ export class EditBox extends Group implements IEditBox {
         const { editor, dragStartData } = this, { target } = this, { moveable, resizeable, rotateable, skewable, hideOnMove } = this.mergeConfig
 
         // 确定模式
-        if (point.name === 'rect') {
+        if (pointType === 'move') {
             moveable && (this.moving = true)
             editor.opacity = hideOnMove ? 0 : 1 // move
         } else {
@@ -311,8 +316,8 @@ export class EditBox extends Group implements IEditBox {
 
         this.dragPoint = null
         this.resetDoing()
-        const { name, pointType } = e.current as IEditPoint
-        if (name === 'rect') this.editor.opacity = 1 // move
+        const { pointType } = e.current as IEditPoint
+        if (pointType === 'move') this.editor.opacity = 1 // move
         if (pointType && pointType.includes('resize')) ResizeEvent.resizingKeys = null
     }
 
@@ -320,15 +325,14 @@ export class EditBox extends Group implements IEditBox {
         const { transformTool, moving, resizing, rotating, skewing } = this
         if (moving) {
             transformTool.onMove(e)
-            updateMoveCursor(this)
         } else if (resizing || rotating || skewing) {
             const point = e.current as IEditPoint
             if (point.pointType) this.enterPoint = point// 防止变化
             if (rotating) transformTool.onRotate(e)
             if (resizing) transformTool.onScale(e)
             if (skewing) transformTool.onSkew(e)
-            updatePointCursor(this, e)
         }
+        updatePointCursor(this, e)
     }
 
     protected resetDoing(): void {
@@ -440,14 +444,16 @@ export class EditBox extends Group implements IEditBox {
         point.direction = direction
         point.pointType = type
 
-        const events: IEventParams[] = [
-            [DragEvent.START, this.onDragStart, this],
-            [DragEvent.DRAG, this.onDrag, this],
-            [DragEvent.END, this.onDragEnd, this],
-            [PointerEvent.LEAVE, () => { this.enterPoint = null }],
-        ]
-        if (point.name !== 'circle') events.push([PointerEvent.ENTER, (e: PointerEvent) => { this.enterPoint = point, updatePointCursor(this, e) }])
-        this.__eventIds.push(point.on_(events))
+        this.__eventIds.push(
+            point.on_([
+                [DragEvent.START, this.onDragStart, this],
+                [DragEvent.DRAG, this.onDrag, this],
+                [DragEvent.END, this.onDragEnd, this],
+
+                [PointerEvent.ENTER, (e: PointerEvent) => { this.enterPoint = point, updatePointCursor(this, e) }],
+                [PointerEvent.LEAVE, () => { this.enterPoint = null }]
+            ])
+        )
     }
 
     protected __listenEvents(): void {
@@ -455,11 +461,6 @@ export class EditBox extends Group implements IEditBox {
 
         events.push(
             rect.on_([
-                [DragEvent.START, this.onDragStart, this],
-                [DragEvent.DRAG, this.onDrag, this],
-                [DragEvent.END, this.onDragEnd, this],
-
-                [PointerEvent.ENTER, () => updateMoveCursor(this)],
                 [PointerEvent.DOUBLE_TAP, this.onDoubleTap, this],
                 [PointerEvent.LONG_PRESS, this.onLongPress, this]
             ])

package/src/editor/cursor.ts

@@ -11,15 +11,21 @@ const cacheCursors: IObject = {}
 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 === 'rect') return updateMoveCursor(editBox) // rect 移动元素
     if (point.name === 'circle') return // 独立旋转按钮
-    if (point.pointType === 'button') { // 普通按钮
+
+    let { rotation } = editBox
+    const { pointType } = point, { moveCursor, resizeCursor, rotateCursor, skewCursor, moveable, resizeable, rotateable, skewable } = editBox.mergeConfig
+
+    if (pointType === 'move') { // 移动类型
+        point.cursor = moveCursor
+        if (!moveable) point.visible = false
+        return
+    } else if (pointType === 'button') { // 普通按钮
         if (!point.cursor) point.cursor = 'pointer'
         return
     }
 
-    let { rotation } = editBox
-    const { pointType } = point, { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editBox.mergeConfig
-
     let showResize = pointType.includes('resize')
     if (showResize && rotateable && (editBox.isHoldRotateKey(e) || !resizeable)) showResize = false
     const showSkew = skewable && !showResize && (point.name === 'resize-line' || pointType === 'skew')

package/types/index.d.ts

@@ -1,5 +1,5 @@
 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, IBox, IEditorDragStartData, IEditorConfig as IEditorConfig$1, ITransformTool, IBoundsData, IBoxInputData, IUIEvent, 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, 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';
@@ -53,8 +53,9 @@ declare class Editor extends Group implements IEditor {
     config: IEditorConfig;
     readonly mergeConfig: IEditorConfig;
     readonly mergedConfig: IEditorConfig;
-    hoverTarget?: IUI;
     target?: IUI | IUI[];
+    hoverTarget?: IUI;
+    dimTarget?: IGroup | IGroup[];
     leafList: ILeafList;
     get list(): IUI[];
     get dragHoverExclude(): IUI[];
@@ -91,6 +92,8 @@ declare class Editor extends Group implements IEditor {
     addItem(item: IUI): void;
     removeItem(item: IUI): void;
     shiftItem(item: IUI): void;
+    setDimOthers(value: boolean | number, attrName?: 'bright' | 'dim', list?: IUI[]): void;
+    setBright(value: boolean): void;
     update(): void;
     updateEditBox(): void;
     updateEditTool(): void;
@@ -140,7 +143,7 @@ declare class EditBox extends Group implements IEditBox {
     rotating: boolean;
     skewing: boolean;
     view: IGroup;
-    rect: IBox;
+    rect: IEditPoint;
     circle: IEditPoint;
     buttons: IGroup;
     resizePoints: IEditPoint[];