fix(line): lines not re-rendering after hover (#181)

apps/demo-free-layout/src/components/line-add-button/index.tsx

@@ -21,8 +21,8 @@ import { useVisible } from './use-visible';
 import { IconPlusCircle } from './button';
 
 export const LineAddButton = (props: LineRenderProps) => {
-  const { line, selected, color } = props;
-  const visible = useVisible({ line, selected, color });
+  const { line, selected, hovered, color } = props;
+  const visible = useVisible({ line, selected, hovered });
   const nodePanelService = useService<WorkflowNodePanelService>(WorkflowNodePanelService);
   const document = useService(WorkflowDocument);
   const dragService = useService(WorkflowDragService);

apps/demo-free-layout/src/components/line-add-button/use-visible.ts

@@ -1,14 +1,14 @@
-import { LineColors, usePlayground, WorkflowLineEntity } from '@flowgram.ai/free-layout-editor';
+import { usePlayground, WorkflowLineEntity } from '@flowgram.ai/free-layout-editor';
 
 import './index.less';
 
 export const useVisible = (params: {
   line: WorkflowLineEntity;
   selected?: boolean;
-  color?: string;
+  hovered?: boolean;
 }): boolean => {
   const playground = usePlayground();
-  const { line, selected = false, color } = params;
+  const { line, selected = false, hovered } = params;
   if (line.disposed) {
     // 在 dispose 后，再去获取 line.to | line.from 会导致错误创建端口
     return false;
@@ -16,19 +16,7 @@ export const useVisible = (params: {
   if (playground.config.readonly) {
     return false;
   }
-  if (!selected && color !== LineColors.HOVER) {
-    return false;
-  }
-  if (
-    line.fromPort.portID === 'loop-output-to-function' &&
-    line.toPort?.portID === 'loop-function-input'
-  ) {
-    return false;
-  }
-  if (
-    line.fromPort.portID === 'batch-output-to-function' &&
-    line.toPort?.portID === 'batch-function-input'
-  ) {
+  if (!selected && !hovered) {
     return false;
   }
   return true;

packages/plugins/free-lines-plugin/src/layer/workflow-lines-layer.tsx

@@ -118,17 +118,16 @@ export class WorkflowLinesLayer extends Layer<LinesLayerOptions> {
   }
 
   private lineProps(line: WorkflowLineEntity): LineRenderProps {
-    const renderData = line.getData(WorkflowLineRenderData);
-    const { renderVersion } = renderData;
     const { lineType } = this.workflowDocument.linesManager;
     const selected = this.selectService.isSelected(line.id);
-    const { version: lineVersion, color } = line;
+    const hovered = this.hoverService.isHovered(line.id);
+    const version = this.lineVersion(line);
 
-    const version = `${this._version}:${lineVersion}:${renderVersion}:${color}:${selected}`;
     return {
       key: line.id,
       color: line.color,
       selected,
+      hovered,
       line,
       lineType,
       version,
@@ -136,6 +135,20 @@ export class WorkflowLinesLayer extends Layer<LinesLayerOptions> {
     };
   }
 
+  private lineVersion(line: WorkflowLineEntity): string {
+    const renderData = line.getData(WorkflowLineRenderData);
+    const { renderVersion } = renderData;
+    const selected = this.selectService.isSelected(line.id);
+    const hovered = this.hoverService.isHovered(line.id);
+    const { version: lineVersion, color } = line;
+
+    const version = `v:${this._version},lv:${lineVersion},rv:${renderVersion},c:${color},s:${
+      selected ? 'T' : 'F'
+    },h:${hovered ? 'T' : 'F'}`;
+
+    return version;
+  }
+
   private lineComponent(props: LineRenderProps): ReactNode {
     const RenderInsideLine = this.options.renderInsideLine ?? (() => <></>);
     return (

packages/plugins/free-lines-plugin/src/type.ts

@@ -10,6 +10,7 @@ export interface LineRenderProps {
   key: string;
   color?: string; // 高亮颜色，优先级最高
   selected?: boolean;
+  hovered?: boolean;
   line: WorkflowLineEntity;
   lineType: LineRenderType;
   version: string; // 用于控制 memo 刷新