feat(flow): handle edge's g hierarchy logic

.changeset/curvy-penguins-help.md

@@ -0,0 +1,27 @@
+---
+'@plait/flow': minor
+---
+
+handle edge's g hierarchy logic
+
+edge 层级需求：
+
+1. 默认情况下 edge 的 label 部件层级应该高于其它 edge 连线
+2. 默认情况下 node 部件层级应该高于 edge 连线
+3. edge 元素处于 active（选中）/ highlight（选中关联节点）/ hovering 时给 edge 元素置于最高层，可以盖住其它 edge 的 label 和 其它任何 node 节点
+
+处理思路：
+
+1. 默认情况下将 edge 的「连线部件」放到 lowerHost 中，保证默认情况下 edge label 和 node 节点部件的层级高于 edge 的连线
+2. 其它情况（active/highlight/hovering）将 edge 的「连线部件」放到当前 edge 元素的 elementG 中，并且提升 elementG 整体层级（放到 upperHost 中，默认放到 host 中）
+
+edge level requirements:
+
+1. By default, the edge label component level should be higher than other edge connections.
+2. By default, the node component level should be higher than the edge connection
+3. When the edge element is active (selected)/highlight (selected associated node)/hovering, place the edge element at the top level, which can cover other edge labels and any other node nodes.
+
+Processing ideas:
+
+1. By default, the edge's "connection component" is placed in lowerHost to ensure that the edge label and node node components are higher than the edge's connection by default.
+2. In other cases (active/highlight/hovering), place the edge's "connection component" in elementG of the current edge element, and raise the overall level of elementG (put it in upperHost, by default it will be placed in host)

.changeset/popular-items-worry.md

@@ -3,3 +3,5 @@
 ---
 
 refactor plait/flow's rendering
+
+remove getComponent invoking in plait/flow

packages/common/src/generators/generator.ts

@@ -36,6 +36,9 @@ export abstract class Generator<
                 if (this.g && parentG.contains(this.g)) {
                     this.g.replaceWith(g);
                 } else {
+                    if (this.g) {
+                        this.g.remove();
+                    }
                     if (this.options?.prepend) {
                         parentG.prepend(g);
                     } else {

packages/flow/src/edge.component.ts

@@ -5,7 +5,7 @@ import { TextManage } from '@plait/text';
 import { EdgeStableState, FlowEdge } from './interfaces/edge';
 import { FlowBaseData } from './interfaces/element';
 import { PlaitFlowBoard } from './interfaces';
-import { EdgeLabelSpace } from './utils';
+import { EdgeLabelSpace, renderEdge } from './utils';
 import { FlowNode } from './interfaces/node';
 import { EdgeGenerator } from './generators/edge-generator';
 import { CommonPluginElement } from '@plait/common';
@@ -53,8 +53,7 @@ export class FlowEdgeComponent<T extends FlowBaseData = FlowBaseData>
         super.ngOnInit();
         this.initializeGenerator();
         this.getRef().buildPathPoints(this.board, this.element);
-        this.edgeGenerator.processDrawing(this.element, this.getElementG(), { state: this.getRef().getState() });
-        this.edgeLabelGenerator.processDrawing(this.element, this.getElementG(), { state: this.getRef().getState() });
+        renderEdge(this.board, this.element, this.getRef().getState());
         this.boundedElements = this.getBoundedElements();
     }
 
@@ -75,8 +74,7 @@ export class FlowEdgeComponent<T extends FlowBaseData = FlowBaseData>
                     ? EdgeStableState.highlight
                     : EdgeStableState['']
             );
-            this.edgeGenerator.processDrawing(this.element, this.getElementG(), { state: this.getRef().getState() });
-            this.edgeLabelGenerator.processDrawing(this.element, this.getElementG(), { state: this.getRef().getState() });
+            renderEdge(this.board, this.element, this.getRef().getState());
         }
     }
 

packages/flow/src/generators/edge-generator.ts

@@ -14,7 +14,7 @@ export class EdgeGenerator extends Generator<FlowEdge, EdgeData, GeneratorOption
     static key = 'edge-generator';
 
     constructor(board: PlaitFlowBoard, public viewContainerRef: ViewContainerRef) {
-        super(board);
+        super(board, { prepend: true });
     }
 
     canDraw(element: FlowEdge, data: EdgeData): boolean {

packages/flow/src/node.component.ts

@@ -11,7 +11,7 @@ import { TextManage } from '@plait/text';
 import { PlaitPluginElementContext, PlaitBoard, normalizePoint, OnContextChanged } from '@plait/core';
 import { FlowNode } from './interfaces/node';
 import { FlowBaseData } from './interfaces/element';
-import { updateRelatedEdgeHighlight } from './utils/edge/edge-state';
+import { updateRelatedEdgeHighlight } from './utils/edge/edge-render';
 import { NodeGenerator } from './generators/node.generator';
 import { NodeActiveGenerator } from './generators/node-active.generator';
 import { CommonPluginElement } from '@plait/common';

packages/flow/src/plugins/with-edge-dnd.ts

@@ -19,9 +19,8 @@ import { getHitHandleTypeByEdge } from '../utils/handle/edge';
 import { getHoverHandleInfo } from '../utils/handle/hover-handle';
 import { FlowElement } from '../interfaces/element';
 import { EdgeElementRef } from '../core/edge-ref';
-import { PlaitFlowBoard } from '../interfaces';
 import { EdgeGenerator } from '../generators/edge-generator';
-import { renderEdgeOnDragging } from '../utils/edge/edge-state';
+import { renderEdgeOnDragging } from '../utils/edge/edge-render';
 
 export const withFlowEdgeDnd: PlaitPlugin = (board: PlaitBoard) => {
     const { pointerDown, pointerMove, globalPointerUp } = board;

packages/flow/src/utils/edge/edge-state.ts → packages/flow/src/utils/edge/edge-render.ts

@@ -29,8 +29,18 @@ export const renderEdge = (board: PlaitBoard, edge: FlowEdge, state?: EdgeState)
     if (state === 'hovering' && (currentEdgeState === EdgeStableState.active || currentEdgeState === EdgeStableState.highlight)) {
         return;
     }
-    edgeGenerator.processDrawing(edge, PlaitElement.getElementG(edge), { state: state || elementRef.getState() });
-    edgeLabelGenerator.processDrawing(edge, PlaitElement.getElementG(edge), { state: state || elementRef.getState() });
+    const renderState = state || elementRef.getState();
+    edgeGenerator.processDrawing(edge, getEdgeLayer(board, edge, renderState), { state: renderState });
+    edgeLabelGenerator.processDrawing(edge, PlaitElement.getElementG(edge), { state: renderState });
+    if (renderState !== EdgeStableState['']) {
+        const upperHost = PlaitBoard.getElementUpperHost(board);
+        const elementG = PlaitElement.getElementG(edge);
+        upperHost.append(elementG);
+    } else {
+        const elementHost = PlaitBoard.getElementHost(board);
+        const elementG = PlaitElement.getElementG(edge);
+        elementHost.append(elementG);
+    }
 };
 
 export const renderRelatedEdges = (board: PlaitBoard, nodeId: string, state?: EdgeState) => {
@@ -46,6 +56,15 @@ export const renderEdgeOnDragging = (board: PlaitBoard, edge: FlowEdge) => {
     const edgeGenerator = edgeRef.getGenerator<EdgeGenerator>(EdgeGenerator.key);
     const edgeLabelGenerator = edgeRef.getGenerator<EdgeLabelGenerator>(EdgeLabelGenerator.key);
     const state = edgeRef.getState();
-    edgeGenerator.processDrawing(edge, PlaitElement.getElementG(edge), { state });
+    edgeGenerator.processDrawing(edge, getEdgeLayer(board, edge, state), { state });
     edgeLabelGenerator.processDrawing(edge, PlaitElement.getElementG(edge), { state });
 };
+
+export const getEdgeLayer = (board: PlaitBoard, edge: FlowEdge, state: EdgeState) => {
+    if (state === EdgeStableState['']) {
+        const lowerHost = PlaitBoard.getElementLowerHost(board);
+        return lowerHost;
+    } else {
+        return PlaitElement.getElementG(edge);
+    }
+};

packages/flow/src/utils/index.ts

@@ -10,7 +10,7 @@ export * from './edge/text';
 export * from './edge/label-space';
 export * from './edge/get-hit-edge';
 export * from './edge/placeholder-edge';
-export * from './edge/edge-state';
+export * from './edge/edge-render';
 export * from './edge/get-overlap-edges';
 
 export * from './handle/get-default-handles';