refactor: optimize flowchart's hover to preview and click to commit function

Author: pubuzhixing8

.changeset/wicked-lions-yell.md

@@ -0,0 +1,8 @@
+---
+'@plait/common': minor
+'@plait/core': minor
+'@plait/draw': minor
+---
+
+extract point-placement to common package
+optimize flowchart's hover to preview and click to commit function

packages/common/src/utils/point-placement.ts

@@ -1,5 +1,17 @@
 import { Direction, Point } from '@plait/core';
 
+// Based on right
+// Right -> Left:
+// 1. End point -> starting point/start point -> end point
+// 2. Add -> Subtract
+
+// Horizontal -> Vertical:
+// 1. Starting point/end point -> vertical axis
+// 2. Addition and subtraction -> vertical axis
+
+// Bottom -> Top:
+// 1. End point -> starting point/end point -> starting point
+// 2. Add -> Subtract
 export const moveXOfPoint = (point: Point, distance: number, direction: Direction = Direction.right): Point => {
     if (direction === Direction.left) {
         return [point[0] - distance, point[1]];

packages/draw/src/constants/line.ts

@@ -7,11 +7,11 @@ export const LINE_TEXT_SPACE = 4;
 
 export const LINE_AUTO_COMPLETE_DIAMETER = 6;
 
-export const LINE_AUTO_COMPLETE_OPACITY = 0.6;
+export const LINE_AUTO_COMPLETE_OPACITY = 1;
 
-export const LINE_AUTO_COMPLETE_HOVERED_OPACITY = 0.8;
+export const LINE_AUTO_COMPLETE_HOVERED_OPACITY = 1;
 
-export const LINE_AUTO_COMPLETE_HOVERED_DIAMETER = 10;
+export const LINE_AUTO_COMPLETE_HOVERED_DIAMETER = 12;
 
 export const LINE_ALIGN_TOLERANCE = 3;
 

packages/draw/src/interfaces/text.ts

@@ -4,8 +4,3 @@ export interface PlaitText extends PlaitGeometry {
     shape: BasicShapes.text;
     autoSize: boolean;
 }
-
-export enum TextColor {
-    gray = '#828282',
-    nomal = '#333333'
-}

packages/draw/src/plugins/arrow-line/with-arrow-line-auto-complete-reaction.ts

@@ -2,166 +2,141 @@ import {
     CursorClass,
     PlaitBoard,
     PlaitElement,
-    Point,
     RectangleClient,
     rgbaToHEX,
     drawCircle,
     hasValidAngle,
     isSelectionMoving,
     rotateAntiPointsByElement,
     setAngleForG,
-    addSelectedElement,
-    clearSelectedElement,
     toActivePoint,
-    Transforms,
-    PlaitOptionsBoard,
     toActiveRectangleFromViewBoxRectangle,
     createG,
     rotatePointsByElement,
-    toHostPoint,
-    toScreenPointFromActivePoint,
-    toViewBoxPoint,
     isHorizontalDirection,
-    idCreator
+    idCreator,
+    Point
 } from '@plait/core';
-import {
-    createGeometryElement,
-    getAutoCompletePoints,
-    getHitIndexOfAutoCompletePoint,
-    getSelectedDrawElements,
-    handleArrowLineCreating
-} from '../../utils';
-import {
-    PRIMARY_COLOR,
-    PlaitCommonElementRef,
-    getDirectionByIndex,
-    getXDistanceBetweenPoint,
-    moveXOfPoint,
-    moveYOfPoint
-} from '@plait/common';
-import {
-    ArrowLineAutoCompleteOptions,
-    BOARD_TO_PRELOADING_SHAPE,
-    WithArrowLineAutoCompletePluginKey
-} from './with-arrow-line-auto-complete';
+import { getAutoCompletePoints, getHitConnection, getHitIndexOfAutoCompletePoint, getSelectedDrawElements, handleArrowLineCreating } from '../../utils';
+import { PRIMARY_COLOR, PlaitCommonElementRef, getDirectionByIndex, getXDistanceBetweenPoint, moveXOfPoint } from '@plait/common';
+import { BOARD_TO_PRE_COMMIT } from './with-arrow-line-auto-complete';
 import { DrawPointerType, LINE_AUTO_COMPLETE_HOVERED_DIAMETER, LINE_AUTO_COMPLETE_HOVERED_OPACITY } from '../../constants';
 import { ArrowLineAutoCompleteGenerator } from '../../generators';
 import { getGeometryGeneratorByShape } from '../with-geometry-create';
-import { ArrowLineShape, PlaitArrowLine, PlaitDrawElement, PlaitGeometry, PlaitShapeElement, TextColor } from '../../interfaces';
+import { ArrowLineShape, PlaitArrowLine, PlaitDrawElement, PlaitGeometry } from '../../interfaces';
+
+const PREVIEW_ARROW_LINE_DISTANCE = 100;
 
 export const withArrowLineAutoCompleteReaction = (board: PlaitBoard) => {
-    const { pointerMove, globalPointerUp } = board;
+    const { pointerMove, pointerLeave, globalPointerUp } = board;
     let reactionG: SVGGElement | null = null;
     let temporaryArrowLineElement: PlaitArrowLine | null = null;
     let temporaryShapeElement: PlaitGeometry | null = null;
-    let sourceElement: PlaitShapeElement | null;
-    let lineShapeG: SVGGElement | null = null;
-    let geometryShapeG: SVGGElement | null = null;
-    let selectedElements: ReturnType<typeof getSelectedDrawElements>;
+    let temporaryArrowLineG: SVGGElement | null = null;
+    let temporaryShapeG: SVGGElement | null = null;
 
     board.pointerMove = (event: PointerEvent) => {
         reactionG?.remove();
         PlaitBoard.getBoardContainer(board).classList.remove(CursorClass.crosshair);
-        selectedElements = getSelectedDrawElements(board);
-        lineShapeG?.remove();
-        geometryShapeG?.remove();
-        const targetElement = selectedElements.length === 1 && selectedElements[0];
+        const selectedElements = getSelectedDrawElements(board);
+        temporaryArrowLineG?.remove();
+        temporaryShapeG?.remove();
+        const originElement = selectedElements.length === 1 && selectedElements[0];
         const activePoint = toActivePoint(board, event.x, event.y);
-        if (!PlaitBoard.isReadonly(board) && !isSelectionMoving(board) && targetElement && PlaitDrawElement.isShapeElement(targetElement)) {
-            const points = getAutoCompletePoints(board, targetElement, true);
+        if (!PlaitBoard.isReadonly(board) && !isSelectionMoving(board) && originElement && PlaitDrawElement.isShapeElement(originElement)) {
+            const points = getAutoCompletePoints(board, originElement, true);
             const hitIndex = getHitIndexOfAutoCompletePoint(
-                rotateAntiPointsByElement(board, activePoint, targetElement, true) || activePoint,
+                rotateAntiPointsByElement(board, activePoint, originElement, true) || activePoint,
                 points
             );
-            // 0上 1右 2下 3左
             const hitPoint = points[hitIndex];
-            const ref = PlaitElement.getElementRef<PlaitCommonElementRef>(targetElement);
+            const ref = PlaitElement.getElementRef<PlaitCommonElementRef>(originElement);
             const lineAutoCompleteGenerator = ref.getGenerator<ArrowLineAutoCompleteGenerator>(ArrowLineAutoCompleteGenerator.key);
             lineAutoCompleteGenerator.recoverAutoCompleteG();
             if (hitPoint) {
                 reactionG = drawCircle(PlaitBoard.getRoughSVG(board), hitPoint, LINE_AUTO_COMPLETE_HOVERED_DIAMETER, {
                     stroke: 'none',
-                    strokeWidth: 2,
                     fill: rgbaToHEX(PRIMARY_COLOR, LINE_AUTO_COMPLETE_HOVERED_OPACITY),
                     fillStyle: 'solid'
                 });
-                sourceElement = targetElement;
-                const sourceRect = RectangleClient.getRectangleByPoints(targetElement.points);
-                let sourcePoint = RectangleClient.getEdgeCenterPoints(sourceRect)[hitIndex];
-                const direction = getDirectionByIndex(hitIndex);
-                let targetPoint = moveXOfPoint(sourcePoint, 100, direction);
+                const originRect = RectangleClient.getRectangleByPoints(originElement.points);
+                let arrowLineStartPoint = RectangleClient.getEdgeCenterPoints(originRect)[hitIndex];
+                const arrowLineDirection = getDirectionByIndex(hitIndex);
+                let arrowLineEndPoint = moveXOfPoint(arrowLineStartPoint, PREVIEW_ARROW_LINE_DISTANCE, arrowLineDirection);
                 const pointer = PlaitBoard.getPointer(board) as DrawPointerType;
                 const geometryGenerator = getGeometryGeneratorByShape(board, pointer);
-                const temporaryShapePoints = targetElement.points.map((point) =>
+                const temporaryShapePoints = originElement.points.map((point) =>
                     moveXOfPoint(
                         point,
-                        100 + getXDistanceBetweenPoint(targetElement.points[0], targetElement.points[1], isHorizontalDirection(direction)),
-                        direction
+                        PREVIEW_ARROW_LINE_DISTANCE +
+                            getXDistanceBetweenPoint(
+                                originElement.points[0],
+                                originElement.points[1],
+                                isHorizontalDirection(arrowLineDirection)
+                            ),
+                        arrowLineDirection
                     )
                 );
-                const temporaryShapeElement = {
-                    ...targetElement,
-                    points: temporaryShapePoints,
+                temporaryArrowLineG = createG();
+                temporaryShapeG = createG();
+                temporaryArrowLineG.style.opacity = '0.6';
+                temporaryShapeG.style.opacity = '0.6';
+                temporaryShapeElement = {
+                    ...(originElement as PlaitGeometry),
+                    points: temporaryShapePoints as [Point, Point],
                     id: idCreator()
                 };
-                lineShapeG = createG();
-                geometryShapeG = createG();
-                const rotatedSourcePoint = rotatePointsByElement(sourcePoint, sourceElement) || sourcePoint;
+                const rotatedArrowLineStartPoint = rotatePointsByElement(arrowLineStartPoint, originElement) || arrowLineStartPoint;
+                const rotatedArrowLineEndPoint = rotatePointsByElement(arrowLineEndPoint, temporaryShapeElement) || arrowLineEndPoint;
                 temporaryArrowLineElement = handleArrowLineCreating(
                     board,
                     ArrowLineShape.elbow,
-                    rotatedSourcePoint,
-                    targetPoint,
-                    sourceElement,
-                    lineShapeG,
-                    {
-                        strokeColor: TextColor.gray
-                    }
+                    rotatedArrowLineStartPoint,
+                    rotatedArrowLineEndPoint,
+                    originElement,
+                    temporaryArrowLineG
                 );
-
-                // arrow bound geometry
-                const connectionMap: Record<number, [number, number]> = {
-                    0: [0.5, 1],
-                    1: [0, 0.5],
-                    2: [0.5, 0],
-                    3: [1, 0.5]
-                };
-                // temporaryArrowLineElement.target.boundId = temporaryShapeElement.id;
-                // temporaryArrowLineElement.target.connection = connectionMap[hitIndex] || [0.1, 0];
-                geometryGenerator.processDrawing(temporaryShapeElement as PlaitGeometry, geometryShapeG);
-                PlaitBoard.getElementTopHost(board).append(geometryShapeG);
+                BOARD_TO_PRE_COMMIT.set(board, { temporaryArrowLineElement, temporaryShapeElement });
+                const connectionInfo = getHitConnection(board, rotatedArrowLineEndPoint, temporaryShapeElement);
+                temporaryArrowLineElement.target.boundId = temporaryShapeElement.id;
+                temporaryArrowLineElement.target.connection = connectionInfo;
+                geometryGenerator.processDrawing(temporaryShapeElement as PlaitGeometry, temporaryShapeG);
+                PlaitBoard.getElementTopHost(board).append(temporaryShapeG);
                 PlaitBoard.getActiveHost(board).append(reactionG);
                 PlaitBoard.getBoardContainer(board).classList.add(CursorClass.crosshair);
-                if (hasValidAngle(targetElement)) {
-                    const rectangle = board.getRectangle(targetElement)!;
+                if (hasValidAngle(originElement)) {
+                    const rectangle = board.getRectangle(originElement)!;
                     const activeRectangle = toActiveRectangleFromViewBoxRectangle(board, rectangle);
-                    setAngleForG(reactionG, RectangleClient.getCenterPoint(activeRectangle), targetElement.angle!);
+                    setAngleForG(reactionG, RectangleClient.getCenterPoint(activeRectangle), originElement.angle!);
                 }
+                return;
             }
         }
+        BOARD_TO_PRE_COMMIT.delete(board);
         pointerMove(event);
     };
-    board.globalPointerUp = (event: PointerEvent) => {
-        if (temporaryArrowLineElement && temporaryShapeElement) {
-            BOARD_TO_PRELOADING_SHAPE.set(board, { tempArrow: temporaryArrowLineElement, drawElement: temporaryShapeElement });
 
-            clearSelectedElement(board);
-            addSelectedElement(board, temporaryArrowLineElement);
-            const afterComplete = (board as PlaitOptionsBoard).getPluginOptions<ArrowLineAutoCompleteOptions>(
-                WithArrowLineAutoCompletePluginKey
-            )?.afterComplete;
-            afterComplete && afterComplete(temporaryArrowLineElement);
-        } else {
-            BOARD_TO_PRELOADING_SHAPE.delete(board);
+    board.pointerLeave = (pointer: PointerEvent) => {
+        clearRef();
+        pointerLeave(pointer);
+    };
+
+    const clearRef = () => {
+        if (reactionG) {
+            reactionG?.remove();
+            PlaitBoard.getBoardContainer(board).classList.remove(CursorClass.crosshair);
+            temporaryArrowLineG?.remove();
+            temporaryShapeG?.remove();
         }
-        lineShapeG?.remove();
-        lineShapeG = null;
-        sourceElement = null;
-        temporaryArrowLineElement = null;
-        geometryShapeG?.remove();
-        geometryShapeG = null;
-        temporaryShapeElement = null;
+        if (BOARD_TO_PRE_COMMIT.get(board)) {
+            BOARD_TO_PRE_COMMIT.delete(board);
+        }
+    }
+
+    board.globalPointerUp = (event: PointerEvent) => {
         globalPointerUp(event);
-    };
+        clearRef();
+    }
+
     return board;
 };

packages/draw/src/plugins/arrow-line/with-arrow-line-auto-complete.ts

@@ -33,9 +33,9 @@ export interface ArrowLineAutoCompleteOptions {
     afterComplete: (element: PlaitArrowLine) => {};
 }
 
-export type PreloadingShapeRef = { tempArrow: PlaitArrowLine; drawElement: PlaitGeometry };
-export const BOARD_TO_PRELOADING_SHAPE = new WeakMap<PlaitBoard, PreloadingShapeRef>();
-// 改为weakMap存出
+export type PreCommitRef = { temporaryArrowLineElement: PlaitArrowLine; temporaryShapeElement: PlaitGeometry };
+
+export const BOARD_TO_PRE_COMMIT = new WeakMap<PlaitBoard, PreCommitRef>();
 
 export const withArrowLineAutoComplete = (board: PlaitBoard) => {
     const { pointerDown, pointerMove, globalPointerUp } = board;
@@ -76,7 +76,7 @@ export const withArrowLineAutoComplete = (board: PlaitBoard) => {
                 ...(rotateAntiPointsByElement(board, movingPoint, sourceElement) || movingPoint),
                 ...autoCompletePoint
             );
-            if (distance > PRESS_AND_MOVE_BUFFER) {
+            if (distance > PRESS_AND_MOVE_BUFFER * 2) {
                 const rectangle = RectangleClient.getRectangleByPoints(sourceElement.points);
                 const shape = getElementShape(sourceElement);
                 const engine = getEngine(shape);
@@ -111,11 +111,11 @@ export const withArrowLineAutoComplete = (board: PlaitBoard) => {
             )?.afterComplete;
             afterComplete && afterComplete(temporaryElement);
         } else {
-            const preloadingRef = BOARD_TO_PRELOADING_SHAPE.get(board);
-            if (preloadingRef) {
-                Transforms.insertNode(board, preloadingRef.tempArrow, [board.children.length]);
-                insertElement(board, preloadingRef.drawElement);
-                BOARD_TO_PRELOADING_SHAPE.delete(board);
+            const preCommitRef = BOARD_TO_PRE_COMMIT.get(board);
+            if (preCommitRef) {
+                Transforms.insertNode(board, preCommitRef.temporaryArrowLineElement, [board.children.length]);
+                insertElement(board, preCommitRef.temporaryShapeElement);
+                BOARD_TO_PRE_COMMIT.delete(board);
             }
         }
         if (autoCompletePoint) {

packages/mind/src/generators/node-more.generator.ts

@@ -1,4 +1,5 @@
 import {
+    Direction,
     PlaitBoard,
     Point,
     createG,
@@ -26,9 +27,9 @@ import {
 import { MindLayoutType, isHorizontalLayout, isIndentedLayout, isTopLayout } from '@plait/layouts';
 import { MindQueries } from '../queries';
 import { getBranchColorByMindElement } from '../utils/node-style/branch';
-import { getLayoutDirection, getPointByPlacement, moveXOfPoint, transformPlacement } from '../utils/point-placement';
+import { getLayoutDirection, getPointByPlacement, transformPlacement } from '../utils/point-placement';
 import { HorizontalPlacement, PointPlacement, VerticalPlacement } from '../interfaces/types';
-import { buildText, DEFAULT_FONT_FAMILY, Generator, isResizing, measureElement, TRANSPARENT } from '@plait/common';
+import { buildText, DEFAULT_FONT_FAMILY, Generator, isResizing, measureElement, moveXOfPoint, TRANSPARENT } from '@plait/common';
 import { getChildrenCount } from '../utils/mind';
 import { FontSizes } from '@plait/text-plugins';
 
@@ -65,7 +66,11 @@ export class NodeMoreGenerator extends Generator<MindElement, NodeMoreExtraData>
         const stroke = getBranchColorByMindElement(this.board, element);
         const layoutDirection = getNodeMoreLayoutDirection(this.board, element);
         const moreStartAndEnd = getMoreStartAndEnd(this.board, element, layoutDirection);
-        const collapseOrExpandCenter = moveXOfPoint(moreStartAndEnd[1], NODE_MORE_ICON_DIAMETER / 2, layoutDirection);
+        const collapseOrExpandCenter = moveXOfPoint(
+            moreStartAndEnd[1],
+            NODE_MORE_ICON_DIAMETER / 2,
+            layoutDirection as unknown as Direction
+        );
         const hasChildren = element.children.length > 0;
         const isShowCollapseOrAdd =
             !element.isCollapsed &&
@@ -254,7 +259,7 @@ export class NodeMoreGenerator extends Generator<MindElement, NodeMoreExtraData>
 export const getCollapseAndAddCenterPoint = (board: PlaitBoard, element: MindElement) => {
     const layoutDirection = getNodeMoreLayoutDirection(board, element);
     const [startPoint, endPoint] = getMoreStartAndEnd(board, element, layoutDirection);
-    const collapseCenter = moveXOfPoint(endPoint, NODE_MORE_ICON_DIAMETER / 2, layoutDirection);
+    const collapseCenter = moveXOfPoint(endPoint, NODE_MORE_ICON_DIAMETER / 2, layoutDirection as unknown as Direction);
     const addCenter = getAddCenterByCollapseOrExpandCenter(element, collapseCenter, layoutDirection);
     return { collapseCenter, addCenter };
 };
@@ -266,7 +271,7 @@ export const getAddCenterByCollapseOrExpandCenter = (
 ) => {
     let addCenter = collapseOrExpandCenter;
     if (target.children?.length > 0 && !PlaitMind.isMind(target)) {
-        addCenter = moveXOfPoint(addCenter, NODE_MORE_LINE_DISTANCE + NODE_MORE_ICON_DIAMETER, layoutDirection);
+        addCenter = moveXOfPoint(addCenter, NODE_MORE_LINE_DISTANCE + NODE_MORE_ICON_DIAMETER, layoutDirection as unknown as Direction);
     }
     return addCenter;
 };
@@ -295,7 +300,7 @@ export const getMoreStartAndEnd = (board: PlaitBoard, element: MindElement, link
         placement[1] = VerticalPlacement.bottom;
     }
     let startPoint = getPointByPlacement(nodeClient, placement);
-    const endPoint = moveXOfPoint(startPoint, NODE_MORE_LINE_DISTANCE, linkLineDirection);
+    const endPoint = moveXOfPoint(startPoint, NODE_MORE_LINE_DISTANCE, linkLineDirection as unknown as Direction);
     return [startPoint, endPoint] as [Point, Point];
 };