@leafer-in/editor 1.0.0-rc.22 → 1.0.0-rc.24

package/src/tool/LineEditTool.ts

@@ -1,13 +1,13 @@
-import { IEditorScaleEvent, ILine, IEditorSkewEvent } from '@leafer-in/interface'
+import { IEditorScaleEvent, ILine, IEditorSkewEvent, IPointData, IAround, IPathCommandData, IFromToData, IUI, IDragEvent } from '@leafer-in/interface'
 
-import { getPointData, Direction9 } from '@leafer-ui/draw'
+import { getPointData, Direction9, PointHelper } from '@leafer-ui/draw'
 
 import { EditTool } from './EditTool'
 import { registerEditTool } from './EditToolCreator'
 
 
-
 const { left, right } = Direction9
+const { move, copy } = PointHelper
 
 @registerEditTool()
 export class LineEditTool extends EditTool {
@@ -18,53 +18,86 @@ export class LineEditTool extends EditTool {
 
     onScaleWithDrag(e: IEditorScaleEvent): void {
         const { drag, direction, lockRatio, around } = e
-        const target = e.target as ILine
+        const line = e.target as ILine
+        const isDragFrom = direction === left
 
-        const fromPoint = getPointData()
-        const { toPoint } = target
+        if (line.pathInputed) {
 
-        target.rotation = 0
+            const { path } = line.__
+            const { from, to } = this.getFromToByPath(path)
 
-        let { x, y } = drag.getInnerMove(target)
+            this.dragPoint(from, to, isDragFrom, around, this.getInnerMove(line, drag, lockRatio))
 
-        if (lockRatio) {
-            if (Math.abs(x) > Math.abs(y)) {
-                y = 0
-            } else {
-                x = 0
-            }
-        }
+            path[1] = from.x, path[2] = from.y
+            path[4] = to.x, path[5] = to.y
+            line.path = path
 
-        if (direction === left) {
+        } else if (line.points) {
 
-            fromPoint.x += x
-            fromPoint.y += y
+            const { points } = line
+            const { from, to } = this.getFromToByPoints(points)
 
-            if (around) {
-                toPoint.x -= x
-                toPoint.y -= y
-            }
+            this.dragPoint(from, to, isDragFrom, around, this.getInnerMove(line, drag, lockRatio))
+
+            points[0] = from.x, points[1] = from.y
+            points[2] = to.x, points[3] = to.y
+            line.points = points
 
         } else {
 
-            if (around) {
-                fromPoint.x -= x
-                fromPoint.y -= y
-            }
+            const from = getPointData()
+            const { toPoint } = line
+            line.rotation = 0
+
+            this.dragPoint(from, toPoint, isDragFrom, around, this.getInnerMove(line, drag, lockRatio))
+
+            line.getLocalPointByInner(from, null, null, true)
+            line.getLocalPointByInner(toPoint, null, null, true)
+            line.x = from.x
+            line.y = from.y
+
+            line.getInnerPointByLocal(toPoint, null, null, true)
+            line.toPoint = toPoint
+
+        }
 
-            toPoint.x += x
-            toPoint.y += y
+    }
 
+    getInnerMove(ui: IUI, event: IDragEvent, lockRatio: boolean | 'corner'): IPointData {
+        const movePoint = event.getInnerMove(ui)
+        if (lockRatio) {
+            if (Math.abs(movePoint.x) > Math.abs(movePoint.y)) {
+                movePoint.y = 0
+            } else {
+                movePoint.x = 0
+            }
         }
+        return movePoint
+    }
 
-        target.getLocalPointByInner(fromPoint, null, null, true)
-        target.getLocalPointByInner(toPoint, null, null, true)
-        target.x = fromPoint.x
-        target.y = fromPoint.y
+    getFromToByPath(path: IPathCommandData): IFromToData {
+        return {
+            from: { x: path[1], y: path[2] },
+            to: { x: path[4], y: path[5] }
+        }
+    }
 
-        target.getInnerPointByLocal(toPoint, null, null, true)
-        target.toPoint = toPoint
+    getFromToByPoints(points: number[]): IFromToData {
+        return {
+            from: { x: points[0], y: points[1] },
+            to: { x: points[2], y: points[3] }
+        }
+    }
 
+    dragPoint(fromPoint: IPointData, toPoint: IPointData, isDragFrom: boolean, around: IAround, movePoint: IPointData): void {
+        const { x, y } = movePoint
+        if (isDragFrom) {
+            move(fromPoint, x, y)
+            if (around) move(toPoint, -x, -y)
+        } else {
+            if (around) move(fromPoint, -x, -y)
+            move(toPoint, x, y)
+        }
     }
 
     onSkew(_e: IEditorSkewEvent): void {
@@ -72,10 +105,29 @@ export class LineEditTool extends EditTool {
     }
 
     onUpdate() {
-        const { rotatePoints, resizeLines, resizePoints } = this.editor.editBox
+        const { editBox } = this, { rotatePoints, resizeLines, resizePoints, rect } = editBox
+        const line = this.editor.element as ILine
+
+        let fromTo: IFromToData, leftOrRight: boolean
+        if (line.pathInputed) fromTo = this.getFromToByPath(line.__.path)
+        else if (line.points) fromTo = this.getFromToByPoints(line.__.points)
+
+        if (fromTo) {
+            const { from, to } = fromTo
+            line.innerToWorld(from, from, false, editBox)
+            line.innerToWorld(to, to, false, editBox)
+            rect.pen.clearPath().moveTo(from.x, from.y).lineTo(to.x, to.y)
+            copy(resizePoints[7] as IPointData, from)
+            copy(rotatePoints[7] as IPointData, from)
+            copy(resizePoints[3] as IPointData, to)
+            copy(rotatePoints[3] as IPointData, to)
+        }
+
         for (let i = 0; i < 8; i++) {
             if (i < 4) resizeLines[i].visible = false
-            resizePoints[i].visible = rotatePoints[i].visible = (i === left || i === right)
+            leftOrRight = i === left || i === right
+            resizePoints[i].visible = leftOrRight
+            rotatePoints[i].visible = fromTo ? false : leftOrRight
         }
     }
 

package/types/index.d.ts

@@ -2,7 +2,7 @@ export * from '@leafer-ui/scale';
 import { IBounds, ILeafList, IUI, IEventListenerId, ILeaf, IPointerEvent, IGroup, IObject, IPointData, IGroupInputData, IEditSize, IBox, IBoundsData, IBoxInputData, IKeyEvent, IRect, IRectInputData, ILeaferCanvas, IRenderOptions, IMatrixData, IDragEvent, IAround } from '@leafer-ui/interface';
 import { Group, Event, Direction9, Box, UI, Answer } from '@leafer-ui/draw';
 import { PointerEvent, DragEvent, MoveEvent, RotateEvent } from '@leafer-ui/core';
-import { IEditSelect, IEditor, IStroker, ISelectArea, IEditorConfig, IEditBox, IEditTool, IInnerEditor, IEditorScaleEvent, IEditorEvent, IEditPoint, IEditPointType, IEditorMoveEvent, IEditorRotateEvent, IEditorSkewEvent } from '@leafer-in/interface';
+import { IEditSelect, IEditor, IStroker, ISelectArea, IEditorConfig, IEditBox, IEditTool, IInnerEditor, IEditorScaleEvent, IEditorEvent, IEditPoint, IEditPointType, IEditorMoveEvent, IEditorRotateEvent, IEditorSkewEvent, 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;
@@ -72,7 +72,7 @@ declare class Editor extends Group implements IEditor {
     shiftItem(item: IUI): void;
     update(): void;
     updateEditTool(): void;
-    getEditSize(ui: IUI): IEditSize;
+    getEditSize(_ui: IUI): IEditSize;
     onMove(e: DragEvent): void;
     onScale(e: DragEvent): void;
     onRotate(e: DragEvent | RotateEvent): void;
@@ -250,6 +250,10 @@ declare class LineEditTool extends EditTool {
     get tag(): string;
     scaleOfEvent: boolean;
     onScaleWithDrag(e: IEditorScaleEvent): void;
+    getInnerMove(ui: IUI$1, event: IDragEvent$1, lockRatio: boolean | 'corner'): IPointData$1;
+    getFromToByPath(path: IPathCommandData): IFromToData;
+    getFromToByPoints(points: number[]): IFromToData;
+    dragPoint(fromPoint: IPointData$1, toPoint: IPointData$1, isDragFrom: boolean, around: IAround$1, movePoint: IPointData$1): void;
     onSkew(_e: IEditorSkewEvent): void;
     onUpdate(): void;
 }