fix(free-layout): line add lockedColor (#528)

* fix(free-layout): line add lockedColor

* feat(docs): update line and node docs

apps/docs/src/en/guide/advanced/free-layout/line.mdx

@@ -159,6 +159,21 @@ interface FreeLayoutProps {
 
 ### 1. Custom Colors
 
+- Different lines specify a specific color (highest priority)
+
+```tsx pure
+
+ctx.document.linesManager.getAllLines().forEach(line => {
+  if (line.from.flowNodeType === 'start') {
+    line.lockedColor = 'blue'
+  } else if (line.to.flowNodeType === 'end') {
+    line.lockedColor = 'yellow'
+  }
+})
+
+```
+- Global color configuration
+
 ```tsx pure
 
 function App() {

apps/docs/src/en/guide/advanced/free-layout/node.mdx

@@ -42,6 +42,25 @@ function BaseNode() {
 }
 ```
 
+## Get Input/Output Nodes or Lines for Current Node
+
+```ts pure
+import { WorkflowNodeLinesData } from '@flowgram.ai/free-layout-editor'
+
+// get input nodes (calculated through connection lines)
+node.getData(WorkflowNodeLinesData).inputNodes
+// get all input nodes (recursively gets all upstream nodes)
+node.getData(WorkflowNodeLinesData).allInputNodes
+// get output nodes
+node.getData(WorkflowNodeLinesData).outputNodes
+// get all output nodes
+node.getData(WorkflowNodeLinesData).allOutputNodes
+// input lines
+node.getData(WorkflowNodeLinesData).inputLines
+// output lines
+node.getData(WorkflowNodeLinesData).outputLines
+```
+
 ## Create Node
 
 - Through [WorkflowDocument](/api/core/workflow-document.html)

apps/docs/src/zh/guide/advanced/free-layout/line.mdx

@@ -164,6 +164,22 @@ interface FreeLayoutProps {
 
 ### 1.自定义颜色
 
+- 不同线条指定特定的颜色 (优先级最高)
+
+```tsx pure
+
+ctx.document.linesManager.getAllLines().forEach(line => {
+  if (line.from.flowNodeType === 'start') {
+    line.lockedColor = 'blue'
+  } else if (line.to.flowNodeType === 'end') {
+    line.lockedColor = 'yellow'
+  }
+})
+
+```
+
+- 全局颜色配置
+
 ```tsx pure
 
 function App() {

apps/docs/src/zh/guide/advanced/free-layout/node.mdx

@@ -43,6 +43,26 @@ function BaseNode() {
 }
 ```
 
+## 获取当前节点的输入/输出节点或线条
+
+```ts pure
+import { WorkflowNodeLinesData } from '@flowgram.ai/free-layout-editor'
+
+// 获取当前节点的输入节点（通过连接线计算）
+node.getData(WorkflowNodeLinesData).inputNodes
+// 获取所有输入节点 （会往上递归获取所有）
+node.getData(WorkflowNodeLinesData).allInputNodes
+// 获取输出节点
+node.getData(WorkflowNodeLinesData).outputNodes
+// 获取所有输出节点
+node.getData(WorkflowNodeLinesData).allOutputNodes
+// 输入线条
+node.getData(WorkflowNodeLinesData).inputLines
+// 输出线条
+node.getData(WorkflowNodeLinesData).outputLines
+
+```
+
 ## 创建节点
 
 - 通过 [WorkflowDocument](/api/core/workflow-document.html) 创建

packages/canvas-engine/free-layout-core/src/entities/workflow-line-entity.ts

@@ -46,6 +46,7 @@ export interface WorkflowLineUIState {
   reverse: boolean; // 箭头反转
   hideArrow: boolean; // 隐藏箭头
   highlightColor: string; // 高亮显示
+  lockedColor: string; // 锁定颜色
 }
 
 /**
@@ -81,6 +82,7 @@ export class WorkflowLineEntity extends Entity<WorkflowLineEntityOpts> {
     hideArrow: false,
     reverse: false,
     highlightColor: '',
+    lockedColor: '',
   };
 
   /**
@@ -283,6 +285,16 @@ export class WorkflowLineEntity extends Entity<WorkflowLineEntityOpts> {
     });
   }
 
+  get lockedColor(): string {
+    return this.uiState.lockedColor;
+  }
+
+  set lockedColor(lockedColor: string) {
+    this.updateUIState({
+      lockedColor,
+    });
+  }
+
   /**
    * 获取线条的边框位置大小
    */

packages/canvas-engine/free-layout-core/src/service/workflow-drag-service.ts

@@ -615,7 +615,7 @@ export class WorkflowDragService {
             return;
           }
           config.updateCursor('grab');
-          line.highlightColor = this.linesManager.lineColor.drawing;
+          line.highlightColor = originLine?.lockedColor || this.linesManager.lineColor.drawing;
           this.hoverService.updateHoveredKey('');
         }
         if (!line) {
@@ -645,7 +645,7 @@ export class WorkflowDragService {
           type: 'onDrag',
         });
 
-        this.setLineColor(line, this.linesManager.lineColor.drawing);
+        this.setLineColor(line, originLine?.lockedColor || this.linesManager.lineColor.drawing);
         if (toNode && this.canBuildContainerLine(toNode, dragPos)) {
           // 如果鼠标 hover 在 node 中的时候，默认连线到这个 node 的初始位置
           toPort = this.getNearestPort(toNode, dragPos);

packages/canvas-engine/free-layout-core/src/workflow-lines-manager.ts

@@ -327,6 +327,10 @@ export class WorkflowLinesManager {
     if (line.isHidden) {
       return this.lineColor.hidden;
     }
+    // 颜色锁定
+    if (line.lockedColor) {
+      return line.lockedColor;
+    }
     if (line.hasError) {
       return this.lineColor.error;
     }