feat(free-layout): line-color support css var (#349)

apps/demo-free-layout/src/hooks/use-editor-props.tsx

@@ -6,7 +6,7 @@ import { createMinimapPlugin } from '@flowgram.ai/minimap-plugin';
 import { createFreeSnapPlugin } from '@flowgram.ai/free-snap-plugin';
 import { createFreeNodePanelPlugin } from '@flowgram.ai/free-node-panel-plugin';
 import { createFreeLinesPlugin } from '@flowgram.ai/free-lines-plugin';
-import { FreeLayoutProps, WorkflowNodeLinesData, Form } from '@flowgram.ai/free-layout-editor';
+import { FreeLayoutProps, WorkflowNodeLinesData } from '@flowgram.ai/free-layout-editor';
 import { createFreeGroupPlugin } from '@flowgram.ai/free-group-plugin';
 import { createContainerNodePlugin } from '@flowgram.ai/free-container-plugin';
 
@@ -76,12 +76,12 @@ export function useEditorProps(
         return json;
       },
       lineColor: {
-        hidden: 'transparent',
-        default: '#4d53e8',
-        drawing: '#5DD6E3',
-        hovered: '#37d0ff',
-        selected: '#37d0ff',
-        error: 'red',
+        hidden: 'var(--g-line-color-hidden,transparent)',
+        default: 'var(--g-line-color-default,#4d53e8)',
+        drawing: 'var(--g-line-color-drawing, #5DD6E3)',
+        hovered: 'var(--g-line-color-hover,#37d0ff)',
+        selected: 'var(--g-line-color-selected,#37d0ff)',
+        error: 'var(--g-line-color-hover,red)',
       },
       /*
        * Check whether the line can be added

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

@@ -24,11 +24,12 @@ export interface LineColor {
 }
 
 export enum LineColors {
-  HIDDEN = 'transparent', // 隐藏线条
-  DEFUALT = '#4d53e8',
-  DRAWING = '#5DD6E3', // '#b5bbf8', // '#9197F1',
-  HOVER = '#37d0ff',
-  ERROR = 'red',
+  HIDDEN = 'var(--g-line-color-hidden,transparent)', // 隐藏线条
+  DEFUALT = 'var(--g-line-color-default,#4d53e8)',
+  DRAWING = 'var(--g-line-color-drawing, #5DD6E3)', // '#b5bbf8', // '#9197F1',
+  HOVER = 'var(--g-line-color-hover,#37d0ff)',
+  SELECTED = 'var(--g-line-color-selected,#37d0ff)',
+  ERROR = 'var(--g-line-color-error,red)',
 }
 
 export interface WorkflowLineRenderContribution {

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

@@ -85,7 +85,7 @@ export class WorkflowLinesManager {
       hidden: LineColors.HIDDEN,
       drawing: LineColors.DRAWING,
       hovered: LineColors.HOVER,
-      selected: LineColors.HOVER,
+      selected: LineColors.SELECTED,
     };
     if (this.options.lineColor) {
       Object.assign(color, this.options.lineColor);