refactor(draw): rename interface PlaitLine to PlaitArrowLine, add Pla…

…itVect… (#923)

.changeset/tender-mugs-bake.md

@@ -0,0 +1,5 @@
+---
+'@plait/draw': minor
+---
+
+change PlaitLine to PlaitArrowLine; and change bound function with arrowLine

packages/draw/src/line.component.ts → packages/draw/src/arrow-line.component.ts

@@ -1,11 +1,11 @@
 import { PlaitBoard, PlaitPluginElementContext, OnContextChanged, getElementById, createDebugGenerator, PlaitNode } from '@plait/core';
-import { LineText, PlaitGeometry, PlaitLine } from './interfaces';
-import { LineShapeGenerator } from './generators/line.generator';
-import { LineActiveGenerator } from './generators/line-active.generator';
+import { ArrowLineText, PlaitArrowLine, PlaitDrawElement, PlaitGeometry } from './interfaces';
+import { ArrowLineShapeGenerator } from './generators/arrow-line.generator';
+import { ArrowLineActiveGenerator } from './generators/arrow-line-active.generator';
 import { DrawTransforms } from './transforms';
 import { GeometryThreshold, MIN_TEXT_WIDTH } from './constants';
 import { CommonElementFlavour, TextManage, TextManageChangeData } from '@plait/common';
-import { getLinePoints, getLineTextRectangle } from './utils/line/line-basic';
+import { getArrowLinePoints, getArrowLineTextRectangle } from './utils/arrow-line/arrow-line-basic';
 import { memorizeLatestText } from './utils/memorize';
 
 interface BoundedElements {
@@ -16,10 +16,11 @@ interface BoundedElements {
 const debugKey = 'debug:plait:line-turning';
 const debugGenerator = createDebugGenerator(debugKey);
 
-export class LineComponent extends CommonElementFlavour<PlaitLine, PlaitBoard> implements OnContextChanged<PlaitLine, PlaitBoard> {
-    shapeGenerator!: LineShapeGenerator;
+export class ArrowLineComponent extends CommonElementFlavour<PlaitArrowLine, PlaitBoard>
+    implements OnContextChanged<PlaitArrowLine, PlaitBoard> {
+    shapeGenerator!: ArrowLineShapeGenerator;
 
-    activeGenerator!: LineActiveGenerator;
+    activeGenerator!: ArrowLineActiveGenerator;
 
     boundedElements: BoundedElements = {};
 
@@ -28,15 +29,15 @@ export class LineComponent extends CommonElementFlavour<PlaitLine, PlaitBoard> i
     }
 
     initializeGenerator() {
-        this.shapeGenerator = new LineShapeGenerator(this.board);
-        this.activeGenerator = new LineActiveGenerator(this.board);
+        this.shapeGenerator = new ArrowLineShapeGenerator(this.board);
+        this.activeGenerator = new ArrowLineActiveGenerator(this.board);
         this.initializeTextManagesByElement();
     }
 
     initialize(): void {
         this.initializeGenerator();
         this.shapeGenerator.processDrawing(this.element, this.getElementG());
-        const linePoints = getLinePoints(this.board, this.element);
+        const linePoints = getArrowLinePoints(this.board, this.element);
         this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
             selected: this.selected,
             linePoints
@@ -65,14 +66,17 @@ export class LineComponent extends CommonElementFlavour<PlaitLine, PlaitBoard> i
         return boundedElements;
     }
 
-    onContextChanged(value: PlaitPluginElementContext<PlaitLine, PlaitBoard>, previous: PlaitPluginElementContext<PlaitLine, PlaitBoard>) {
+    onContextChanged(
+        value: PlaitPluginElementContext<PlaitArrowLine, PlaitBoard>,
+        previous: PlaitPluginElementContext<PlaitArrowLine, PlaitBoard>
+    ) {
         this.initializeWeakMap();
         const boundedElements = this.getBoundedElements();
         const isBoundedElementsChanged =
             boundedElements.source !== this.boundedElements.source || boundedElements.target !== this.boundedElements.target;
         this.boundedElements = boundedElements;
         const isChangeTheme = this.board.operations.find(op => op.type === 'set_theme');
-        const linePoints = getLinePoints(this.board, this.element);
+        const linePoints = getArrowLinePoints(this.board, this.element);
         if (value.element !== previous.element || isChangeTheme) {
             this.shapeGenerator.processDrawing(this.element, this.getElementG());
             this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
@@ -104,7 +108,7 @@ export class LineComponent extends CommonElementFlavour<PlaitLine, PlaitBoard> i
     initializeTextManagesByElement() {
         if (this.element.texts?.length) {
             const textManages: TextManage[] = [];
-            this.element.texts.forEach((text, index) => {
+            this.element.texts.forEach((text: ArrowLineText, index: number) => {
                 const manage = this.createTextManage(text, index);
                 textManages.push(manage);
             });
@@ -121,14 +125,14 @@ export class LineComponent extends CommonElementFlavour<PlaitLine, PlaitBoard> i
         }
     }
 
-    createTextManage(text: LineText, index: number) {
+    createTextManage(text: ArrowLineText, index: number) {
         return new TextManage(this.board, {
             getRectangle: () => {
-                return getLineTextRectangle(this.board, this.element, index);
+                return getArrowLineTextRectangle(this.board, this.element as PlaitArrowLine, index);
             },
             onChange: (textManageChangeData: TextManageChangeData) => {
                 const path = PlaitBoard.findPath(this.board, this.element);
-                const node = PlaitNode.get(this.board, path) as PlaitLine;
+                const node = PlaitNode.get(this.board, path) as PlaitArrowLine;
                 const texts = [...node.texts];
                 const newWidth = textManageChangeData.width < MIN_TEXT_WIDTH ? MIN_TEXT_WIDTH : textManageChangeData.width;
                 texts.splice(index, 1, {
@@ -137,15 +141,15 @@ export class LineComponent extends CommonElementFlavour<PlaitLine, PlaitBoard> i
                     width: newWidth,
                     height: textManageChangeData.height
                 });
-                DrawTransforms.setLineTexts(this.board, this.element, texts);
+                DrawTransforms.setArrowLineTexts(this.board, this.element as PlaitArrowLine, texts);
                 textManageChangeData.operations && memorizeLatestText(this.element, textManageChangeData.operations);
             },
             getMaxWidth: () => GeometryThreshold.defaultTextMaxWidth,
             textPlugins: []
         });
     }
 
-    updateText(previousTexts: LineText[], currentTexts: LineText[]) {
+    updateText(previousTexts: ArrowLineText[], currentTexts: ArrowLineText[]) {
         if (previousTexts === currentTexts) return;
         const previousTextsLength = previousTexts.length;
         const currentTextsLength = currentTexts.length;

packages/draw/src/constants/pointer.ts

@@ -1,6 +1,6 @@
-import { BasicShapes, FlowchartSymbols, LineShape, SwimlaneDrawSymbols, TableSymbols, UMLSymbols } from '../interfaces';
+import { BasicShapes, FlowchartSymbols, ArrowLineShape, SwimlaneDrawSymbols, TableSymbols, UMLSymbols } from '../interfaces';
 
-export type DrawPointerType = BasicShapes | LineShape | FlowchartSymbols | SwimlaneDrawSymbols | TableSymbols | UMLSymbols;
+export type DrawPointerType = BasicShapes | ArrowLineShape | FlowchartSymbols | SwimlaneDrawSymbols | TableSymbols | UMLSymbols;
 
 export const getGeometryPointers = () => {
     return [...Object.keys(BasicShapes), ...Object.keys(FlowchartSymbols), ...Object.keys(UMLSymbols)];
@@ -22,6 +22,6 @@ export const getUMLPointers = () => {
     return Object.keys(UMLSymbols);
 };
 
-export const getLinePointers = () => {
-    return Object.keys(LineShape);
+export const getArrowLinePointers = () => {
+    return Object.keys(ArrowLineShape);
 };

packages/draw/src/generators/line-active.generator.ts → packages/draw/src/generators/arrow-line-active.generator.ts

@@ -1,39 +1,39 @@
 import { PlaitBoard, Point, createG, drawRectangle, getSelectedElements } from '@plait/core';
-import { LineShape, PlaitLine } from '../interfaces';
+import { ArrowLineShape, PlaitArrowLine } from '../interfaces';
 import { Generator, PRIMARY_COLOR, drawFillPrimaryHandle, drawPrimaryHandle } from '@plait/common';
-import { getMiddlePoints } from '../utils/line/line-basic';
-import { getNextRenderPoints } from '../utils/line/elbow';
-import { isUpdatedHandleIndex } from '../utils/line';
-import { getHitPointIndex } from '../utils/position/line';
+import { getMiddlePoints } from '../utils/arrow-line/arrow-line-basic';
+import { getNextRenderPoints } from '../utils/arrow-line/elbow';
+import { isUpdatedHandleIndex } from '../utils/arrow-line';
+import { getHitPointIndex } from '../utils/position/arrow-line';
 import { DefaultDrawActiveStyle } from '../constants';
 
 export interface ActiveData {
     selected: boolean;
     linePoints: Point[];
 }
 
-export class LineActiveGenerator extends Generator<PlaitLine, ActiveData> {
+export class ArrowLineActiveGenerator extends Generator<PlaitArrowLine, ActiveData> {
     onlySelectedCurrentLine = false;
 
-    canDraw(element: PlaitLine, data: ActiveData): boolean {
+    canDraw(element: PlaitArrowLine, data: ActiveData): boolean {
         if (data.selected) {
             return true;
         } else {
             return false;
         }
     }
 
-    draw(element: PlaitLine, data: ActiveData): SVGGElement {
+    draw(element: PlaitArrowLine, data: ActiveData): SVGGElement {
         const activeG = createG();
         const selectedElements = getSelectedElements(this.board);
         this.onlySelectedCurrentLine = selectedElements.length === 1;
         if (this.onlySelectedCurrentLine) {
             activeG.classList.add('active');
             activeG.classList.add('line-handle');
-            const points = PlaitLine.getPoints(this.board, element);
+            const points = PlaitArrowLine.getPoints(this.board, element);
             let updatePoints = [...points];
             let elbowNextRenderPoints: Point[] = [];
-            if (element.shape === LineShape.elbow) {
+            if (element.shape === ArrowLineShape.elbow) {
                 updatePoints = points.slice(0, 1).concat(points.slice(-1));
                 elbowNextRenderPoints = getNextRenderPoints(this.board, element, data.linePoints);
             }
@@ -45,7 +45,7 @@ export class LineActiveGenerator extends Generator<PlaitLine, ActiveData> {
             if (!PlaitBoard.hasBeenTextEditing(this.board)) {
                 for (let i = 0; i < middlePoints.length; i++) {
                     const point = middlePoints[i];
-                    if (element.shape === LineShape.elbow && elbowNextRenderPoints.length) {
+                    if (element.shape === ArrowLineShape.elbow && elbowNextRenderPoints.length) {
                         const handleIndex = getHitPointIndex(middlePoints, point);
                         const isUpdateHandleIndex = isUpdatedHandleIndex(
                             this.board,

packages/draw/src/generators/line-auto-complete.generator.ts → packages/draw/src/generators/arrow-line-auto-complete.generator.ts

@@ -4,7 +4,7 @@ import { ActiveGeneratorExtraData, Generator, PRIMARY_COLOR } from '@plait/commo
 import { getAutoCompletePoints } from '../utils';
 import { LINE_AUTO_COMPLETE_DIAMETER, LINE_AUTO_COMPLETE_OPACITY } from '../constants/line';
 
-export class LineAutoCompleteGenerator<T extends PlaitShapeElement = PlaitGeometry> extends Generator<T, ActiveGeneratorExtraData> {
+export class ArrowLineAutoCompleteGenerator<T extends PlaitShapeElement = PlaitGeometry> extends Generator<T, ActiveGeneratorExtraData> {
     static key = 'line-auto-complete-generator';
 
     autoCompleteG!: SVGGElement;

packages/draw/src/generators/arrow-line.generator.ts

@@ -0,0 +1,17 @@
+import { PlaitArrowLine } from '../interfaces';
+import { Generator } from '@plait/common';
+import { drawArrowLine } from '../utils/arrow-line/arrow-line-basic';
+
+export interface ShapeData {}
+
+export class ArrowLineShapeGenerator extends Generator<PlaitArrowLine, ShapeData> {
+    canDraw(element: PlaitArrowLine, data: ShapeData): boolean {
+        return true;
+    }
+
+    draw(element: PlaitArrowLine, data: ShapeData) {
+        let lineG: SVGGElement | undefined;
+        lineG = drawArrowLine(this.board, element);
+        return lineG;
+    }
+}

packages/draw/src/generators/index.ts

@@ -1,6 +1,6 @@
 export * from './geometry-shape.generator';
-export * from './line-active.generator';
-export * from './line-auto-complete.generator';
+export * from './arrow-line-active.generator';
+export * from './arrow-line-auto-complete.generator';
 export * from './single-text.generator';
 export * from './text.generator';
 export * from './table.generator';

packages/draw/src/geometry.component.ts

@@ -11,7 +11,7 @@ import { PlaitCommonGeometry, PlaitGeometry, PlaitMultipleTextGeometry } from '.
 import { GeometryShapeGenerator } from './generators/geometry-shape.generator';
 import { DrawTransforms } from './transforms';
 import { ActiveGenerator, CommonElementFlavour, TextManageChangeData, canResize } from '@plait/common';
-import { LineAutoCompleteGenerator } from './generators/line-auto-complete.generator';
+import { ArrowLineAutoCompleteGenerator } from './generators/arrow-line-auto-complete.generator';
 import { getTextRectangle, isGeometryIncludeText, isMultipleTextGeometry, memorizeLatestText } from './utils';
 import { PlaitDrawShapeText, TextGenerator } from './generators/text.generator';
 import { SingleTextGenerator } from './generators/single-text.generator';
@@ -23,7 +23,7 @@ export class GeometryComponent extends CommonElementFlavour<PlaitCommonGeometry,
     implements OnContextChanged<PlaitCommonGeometry, PlaitBoard> {
     activeGenerator!: ActiveGenerator<PlaitCommonGeometry>;
 
-    lineAutoCompleteGenerator!: LineAutoCompleteGenerator;
+    lineAutoCompleteGenerator!: ArrowLineAutoCompleteGenerator;
 
     shapeGenerator!: GeometryShapeGenerator;
 
@@ -58,12 +58,12 @@ export class GeometryComponent extends CommonElementFlavour<PlaitCommonGeometry,
                 return canResize(this.board, this.element);
             }
         });
-        this.lineAutoCompleteGenerator = new LineAutoCompleteGenerator(this.board);
+        this.lineAutoCompleteGenerator = new ArrowLineAutoCompleteGenerator(this.board);
         this.shapeGenerator = new GeometryShapeGenerator(this.board);
         if (isGeometryIncludeText(this.element)) {
             this.initializeTextManage();
         }
-        this.getRef().addGenerator(LineAutoCompleteGenerator.key, this.lineAutoCompleteGenerator);
+        this.getRef().addGenerator(ArrowLineAutoCompleteGenerator.key, this.lineAutoCompleteGenerator);
         this.getRef().addGenerator(ActiveGenerator.key, this.activeGenerator);
     }
 

packages/draw/src/image.component.ts

@@ -1,12 +1,12 @@
 import { PlaitBoard, PlaitPluginElementContext, OnContextChanged } from '@plait/core';
 import { CommonElementFlavour, ImageGenerator } from '@plait/common';
 import { PlaitImage } from './interfaces/image';
-import { LineAutoCompleteGenerator } from './generators/line-auto-complete.generator';
+import { ArrowLineAutoCompleteGenerator } from './generators/arrow-line-auto-complete.generator';
 
 export class ImageComponent extends CommonElementFlavour<PlaitImage, PlaitBoard> implements OnContextChanged<PlaitImage, PlaitBoard> {
     imageGenerator!: ImageGenerator<PlaitImage>;
 
-    lineAutoCompleteGenerator!: LineAutoCompleteGenerator<PlaitImage>;
+    lineAutoCompleteGenerator!: ArrowLineAutoCompleteGenerator<PlaitImage>;
 
     constructor() {
         super();
@@ -30,8 +30,8 @@ export class ImageComponent extends CommonElementFlavour<PlaitImage, PlaitBoard>
                 };
             }
         });
-        this.lineAutoCompleteGenerator = new LineAutoCompleteGenerator(this.board);
-        this.getRef().addGenerator(LineAutoCompleteGenerator.key, this.lineAutoCompleteGenerator);
+        this.lineAutoCompleteGenerator = new ArrowLineAutoCompleteGenerator(this.board);
+        this.getRef().addGenerator(ArrowLineAutoCompleteGenerator.key, this.lineAutoCompleteGenerator);
     }
 
     initialize(): void {