feat(free-lines-plugin): workflow lines layer depends on stack context manager directly

packages/client/free-layout-editor/src/preset/free-layout-preset.ts

@@ -198,9 +198,7 @@ export function createFreeLayoutPreset(
       /**
        * 线条渲染插件
        */
-      createFreeLinesPlugin({
-        renderElement: renderElement as FreeLinesPluginOptions['renderElement'],
-      }),
+      createFreeLinesPlugin({}),
       /**
        * 节点 hover 插件
        */

packages/plugins/free-lines-plugin/package.json

@@ -28,6 +28,7 @@
   "dependencies": {
     "@flowgram.ai/core": "workspace:*",
     "@flowgram.ai/free-layout-core": "workspace:*",
+    "@flowgram.ai/free-stack-plugin": "workspace:*",
     "@flowgram.ai/renderer": "workspace:*",
     "@flowgram.ai/utils": "workspace:*",
     "bezier-js": "^6.1.4",
@@ -61,4 +62,4 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   }
-}
+}

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

@@ -9,13 +9,6 @@ export const createFreeLinesPlugin = definePluginCreator({
   onInit: (ctx: PluginContext, opts: FreeLinesPluginOptions) => {
     ctx.playground.registerLayer(WorkflowLinesLayer, {
       ...opts,
-      renderElement: () => {
-        if (typeof opts.renderElement === 'function') {
-          return opts.renderElement(ctx);
-        } else {
-          return opts.renderElement;
-        }
-      },
     });
   },
   onReady: (ctx: PluginContext, opts: FreeLinesPluginOptions) => {

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

@@ -3,6 +3,7 @@ import React, { ReactNode, useLayoutEffect, useState } from 'react';
 
 import { inject, injectable } from 'inversify';
 import { domUtils } from '@flowgram.ai/utils';
+import { StackingContextManager } from '@flowgram.ai/free-stack-plugin';
 import {
   nanoid,
   WorkflowDocument,
@@ -35,6 +36,8 @@ export class WorkflowLinesLayer extends Layer<LinesLayerOptions> {
 
   @inject(WorkflowDocument) protected workflowDocument: WorkflowDocument;
 
+  @inject(StackingContextManager) protected stackContext: StackingContextManager;
+
   private layerID = nanoid();
 
   private mountedLines: Map<
@@ -166,14 +169,6 @@ export class WorkflowLinesLayer extends Layer<LinesLayerOptions> {
   }
 
   private get renderElement(): HTMLElement {
-    if (typeof this.options.renderElement === 'function') {
-      const element = this.options.renderElement();
-      if (element) {
-        return element;
-      }
-    } else if (typeof this.options.renderElement !== 'undefined') {
-      return this.options.renderElement as HTMLElement;
-    }
-    return this.node;
+    return this.stackContext.node;
   }
 }

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

@@ -5,7 +5,6 @@ import type {
   WorkflowLineRenderContributionFactory,
 } from '@flowgram.ai/free-layout-core';
 import { LineRenderType } from '@flowgram.ai/free-layout-core';
-import type { PluginContext } from '@flowgram.ai/core';
 
 export interface LineRenderProps {
   key: string;
@@ -19,12 +18,10 @@ export interface LineRenderProps {
 }
 
 export interface LinesLayerOptions {
-  renderElement?: HTMLElement | (() => HTMLElement | undefined);
   renderInsideLine?: FC<LineRenderProps>;
 }
 
-export interface FreeLinesPluginOptions extends Omit<LinesLayerOptions, 'renderElement'> {
-  renderElement?: HTMLElement | ((ctx: PluginContext) => HTMLElement | undefined);
+export interface FreeLinesPluginOptions extends LinesLayerOptions {
   contributions?: WorkflowLineRenderContributionFactory[];
   defaultLineType?: LineRenderType;
 }