Merge branch 'main' into fix/dep-check

apps/demo-fixed-layout-simple/package.json

@@ -19,10 +19,10 @@
     "build:fast": "exit 0",
     "build:watch": "exit 0",
     "clean": "rimraf dist",
-    "dev": "MODE=app NODE_ENV=development rspack serve",
+    "dev": "MODE=app NODE_ENV=development rsbuild dev --open",
     "lint": "eslint ./src --cache",
     "lint:fix": "eslint ./src --fix",
-    "start": "NODE_ENV=development rspack serve",
+    "start": "NODE_ENV=development rsbuild dev --open",
     "test": "exit",
     "test:cov": "exit",
     "watch": "exit 0"
@@ -40,14 +40,12 @@
     "react-dom": "^18"
   },
   "devDependencies": {
-    "@rspack/cli": "0.2.1",
+    "@rsbuild/core": "^1.2.16",
+    "@rsbuild/plugin-react": "^1.1.1",
     "@types/node": "^18",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@typescript-eslint/parser": "^6.10.0",
-    "eslint": "^8.54.0",
-    "less": "^4.1.2",
-    "less-loader": "^6"
+    "eslint": "^8.54.0"
   },
   "publishConfig": {
     "access": "public",

apps/demo-fixed-layout-simple/rsbuild.config.ts

@@ -0,0 +1,14 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig } from '@rsbuild/core';
+
+export default defineConfig({
+  plugins: [pluginReact()],
+  source: {
+    entry: {
+      index: './src/app.tsx',
+    },
+  },
+  html: {
+    title: 'demo-fixed-layout-simple',
+  },
+});

apps/demo-fixed-layout-simple/rspack.config.js

@@ -1,64 +0,0 @@
-const path = require('path');
-
-const isCI = process.env.CI === 'true';
-const isSCM = !!process.env.BUILD_BRANCH;
-const isProd = process.env.NODE_ENV === 'production';
-/**
- * @type {import('@rspack/cli').Configuration}
- */
-module.exports = {
-  mode: process.env.NODE_ENV,
-  context: __dirname,
-  target: ['web'],
-  entry: {
-    main: './src/app.tsx',
-  },
-  resolve: {
-    alias: {
-      react: require.resolve('react'),
-      'react-dom': require.resolve('react-dom'),
-    },
-  },
-  builtins: {
-    // https://www.rspack.dev/config/builtins.html#builtinshtml
-    html: [
-      {
-        template: './index.html',
-      },
-    ],
-    progress: !isSCM ? {} : false,
-    treeShaking: isProd,
-  },
-  module: {
-    // https://www.rspack.dev/config/module.html#rule
-    rules: [
-      {
-        test: /\.(png|gif|jpg|jpeg|svg|woff2)$/,
-        type: 'asset',
-      },
-      {
-        test: /\.(less|css)$/,
-        use: [
-          {
-            loader: 'less-loader',
-            options: {
-              // ...
-            },
-          },
-        ],
-        type: 'css',
-      },
-    ],
-  },
-  plugins: [],
-  /** module is too large now, we may need better way to tackle this in the future */
-  stats: isCI
-    ? { all: false, modules: true, assets: true, chunks: true, warnings: true, errors: true }
-    : {
-        modules: false,
-        all: false,
-        warnings: false,
-        errors: true,
-        timings: true,
-      },
-};

apps/demo-fixed-layout/package.json

@@ -19,10 +19,10 @@
     "build:fast": "exit 0",
     "build:watch": "exit 0",
     "clean": "rimraf dist",
-    "dev": "MODE=app NODE_ENV=development rspack serve",
+    "dev": "MODE=app NODE_ENV=development rsbuild dev --open",
     "lint": "eslint ./src --cache",
     "lint:fix": "eslint ./src --fix",
-    "start": "NODE_ENV=development rspack serve",
+    "start": "NODE_ENV=development rsbuild dev --open",
     "test": "exit",
     "test:cov": "exit",
     "watch": "exit 0"
@@ -43,7 +43,8 @@
   "devDependencies": {
     "@flowgram.ai/ts-config": "workspace:*",
     "@flowgram.ai/eslint-config": "workspace:*",
-    "@rspack/cli": "0.2.1",
+    "@rsbuild/core": "^1.2.16",
+    "@rsbuild/plugin-react": "^1.1.1",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^18",
     "@types/react": "^18",

apps/demo-fixed-layout/rsbuild.config.ts

@@ -0,0 +1,14 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig } from '@rsbuild/core';
+
+export default defineConfig({
+  plugins: [pluginReact()],
+  source: {
+    entry: {
+      index: './src/app.tsx',
+    },
+  },
+  html: {
+    title: 'demo-fixed-layout',
+  },
+});

apps/demo-fixed-layout/rspack.config.js

@@ -1,64 +0,0 @@
-const path = require('path');
-
-const isCI = process.env.CI === 'true';
-const isSCM = !!process.env.BUILD_BRANCH;
-const isProd = process.env.NODE_ENV === 'production';
-/**
- * @type {import('@rspack/cli').Configuration}
- */
-module.exports = {
-  mode: process.env.NODE_ENV,
-  context: __dirname,
-  target: ['web'],
-  entry: {
-    main: './src/app.tsx',
-  },
-  resolve: {
-    alias: {
-      react: require.resolve('react'),
-      'react-dom': require.resolve('react-dom'),
-    },
-  },
-  builtins: {
-    // https://www.rspack.dev/config/builtins.html#builtinshtml
-    html: [
-      {
-        template: './index.html',
-      },
-    ],
-    progress: !isSCM ? {} : false,
-    treeShaking: isProd,
-  },
-  module: {
-    // https://www.rspack.dev/config/module.html#rule
-    rules: [
-      {
-        test: /\.(png|gif|jpg|jpeg|svg|woff2)$/,
-        type: 'asset',
-      },
-      {
-        test: /\.(less|css)$/,
-        use: [
-          {
-            loader: 'less-loader',
-            options: {
-              // ...
-            },
-          },
-        ],
-        type: 'css',
-      },
-    ],
-  },
-  plugins: [],
-  /** module is too large now, we may need better way to tackle this in the future */
-  stats: isCI
-    ? { all: false, modules: true, assets: true, chunks: true, warnings: true, errors: true }
-    : {
-        modules: false,
-        all: false,
-        warnings: false,
-        errors: true,
-        timings: true,
-      },
-};

apps/demo-free-layout-simple/package.json

@@ -19,10 +19,10 @@
     "build:fast": "exit 0",
     "build:watch": "exit 0",
     "clean": "rimraf dist",
-    "dev": "MODE=app NODE_ENV=development rspack serve",
+    "dev": "MODE=app NODE_ENV=development rsbuild dev --open",
     "lint": "eslint ./src --cache",
     "lint:fix": "eslint ./src --fix",
-    "start": "NODE_ENV=development rspack serve",
+    "start": "NODE_ENV=development rsbuild dev --open",
     "test": "exit",
     "test:cov": "exit",
     "watch": "exit 0"
@@ -37,13 +37,13 @@
   "devDependencies": {
     "@flowgram.ai/ts-config": "workspace:*",
     "@flowgram.ai/eslint-config": "workspace:*",
-    "@rspack/cli": "0.2.1",
+    "@rsbuild/core": "^1.2.16",
+    "@rsbuild/plugin-react": "^1.1.1",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^18",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/styled-components": "^5",
-    "@typescript-eslint/parser": "^6.10.0",
     "eslint": "^8.54.0"
   },
   "publishConfig": {

apps/demo-free-layout-simple/rsbuild.config.ts

@@ -0,0 +1,14 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig } from '@rsbuild/core';
+
+export default defineConfig({
+  plugins: [pluginReact()],
+  source: {
+    entry: {
+      index: './src/app.tsx',
+    },
+  },
+  html: {
+    title: 'demo-free-layout-simple',
+  },
+});

apps/demo-free-layout-simple/rspack.config.js

@@ -1,46 +0,0 @@
-const path = require('path');
-
-const isCI = process.env.CI === 'true';
-const isSCM = !!process.env.BUILD_BRANCH;
-const isProd = process.env.NODE_ENV === 'production';
-/**
- * @type {import('@rspack/cli').Configuration}
- */
-module.exports = {
-  mode: process.env.NODE_ENV,
-  context: __dirname,
-  target: ['web'],
-  entry: {
-    main: './src/app.tsx',
-  },
-  builtins: {
-    // https://www.rspack.dev/config/builtins.html#builtinshtml
-    html: [
-      {
-        template: './index.html',
-      },
-    ],
-    progress: !isSCM ? {} : false,
-    treeShaking: isProd,
-  },
-  module: {
-    // https://www.rspack.dev/config/module.html#rule
-    rules: [
-      {
-        test: /\.(png|gif|jpg|jpeg|svg|woff2)$/,
-        type: 'asset',
-      },
-    ],
-  },
-  plugins: [],
-  /** module is too large now, we may need better way to tackle this in the future */
-  stats: isCI
-    ? { all: false, modules: true, assets: true, chunks: true, warnings: true, errors: true }
-    : {
-        modules: false,
-        all: false,
-        warnings: false,
-        errors: true,
-        timings: true,
-      },
-};

apps/demo-free-layout/package.json

@@ -19,10 +19,10 @@
     "build:fast": "exit 0",
     "build:watch": "exit 0",
     "clean": "rimraf dist",
-    "dev": "MODE=app NODE_ENV=development rspack serve",
+    "dev": "MODE=app NODE_ENV=development rsbuild dev --open",
     "lint": "eslint ./src --cache",
     "lint:fix": "eslint ./src --fix",
-    "start": "NODE_ENV=development rspack serve",
+    "start": "NODE_ENV=development rsbuild dev --open",
     "test": "exit",
     "test:cov": "exit",
     "watch": "exit 0"
@@ -45,16 +45,15 @@
   "devDependencies": {
     "@flowgram.ai/ts-config": "workspace:*",
     "@flowgram.ai/eslint-config": "workspace:*",
-    "@rspack/cli": "0.2.1",
+    "@rsbuild/core": "^1.2.16",
+    "@rsbuild/plugin-react": "^1.1.1",
+    "@rsbuild/plugin-less": "^1.1.1",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^18",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/styled-components": "^5",
-    "@typescript-eslint/parser": "^6.10.0",
-    "eslint": "^8.54.0",
-    "less": "^4.1.2",
-    "less-loader": "^6"
+    "eslint": "^8.54.0"
   },
   "publishConfig": {
     "access": "public",

apps/demo-free-layout/rsbuild.config.ts

@@ -0,0 +1,15 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginLess } from '@rsbuild/plugin-less';
+import { defineConfig } from '@rsbuild/core';
+
+export default defineConfig({
+  plugins: [pluginReact(), pluginLess()],
+  source: {
+    entry: {
+      index: './src/app.tsx',
+    },
+  },
+  html: {
+    title: 'demo-free-layout',
+  },
+});

apps/demo-free-layout/rspack.config.js

@@ -1,64 +0,0 @@
-const path = require('path');
-
-const isCI = process.env.CI === 'true';
-const isSCM = !!process.env.BUILD_BRANCH;
-const isProd = process.env.NODE_ENV === 'production';
-/**
- * @type {import('@rspack/cli').Configuration}
- */
-module.exports = {
-  mode: process.env.NODE_ENV,
-  context: __dirname,
-  target: ['web'],
-  entry: {
-    main: './src/app.tsx',
-  },
-  resolve: {
-    alias: {
-      react: require.resolve('react'),
-      'react-dom': require.resolve('react-dom'),
-    },
-  },
-  builtins: {
-    // https://www.rspack.dev/config/builtins.html#builtinshtml
-    html: [
-      {
-        template: './index.html',
-      },
-    ],
-    progress: !isSCM ? {} : false,
-    treeShaking: isProd,
-  },
-  module: {
-    // https://www.rspack.dev/config/module.html#rule
-    rules: [
-      {
-        test: /\.(png|gif|jpg|jpeg|svg|woff2)$/,
-        type: 'asset',
-      },
-      {
-        test: /\.(less|css)$/,
-        use: [
-          {
-            loader: 'less-loader',
-            options: {
-              // ...
-            },
-          },
-        ],
-        type: 'css',
-      },
-    ],
-  },
-  plugins: [],
-  /** module is too large now, we may need better way to tackle this in the future */
-  stats: isCI
-    ? { all: false, modules: true, assets: true, chunks: true, warnings: true, errors: true }
-    : {
-        modules: false,
-        all: false,
-        warnings: false,
-        errors: true,
-        timings: true,
-      },
-};

apps/demo-node-form/package.json

@@ -19,10 +19,10 @@
     "build:fast": "exit 0",
     "build:watch": "exit 0",
     "clean": "rimraf dist",
-    "dev": "MODE=app NODE_ENV=development rspack serve",
+    "dev": "MODE=app NODE_ENV=development rsbuild dev --open",
     "lint": "eslint ./src --cache",
     "lint:fix": "eslint ./src --fix",
-    "start": "NODE_ENV=development rspack serve",
+    "start": "NODE_ENV=development rsbuild dev --open",
     "test": "exit",
     "test:cov": "exit",
     "watch": "exit 0"
@@ -40,7 +40,8 @@
   "devDependencies": {
     "@flowgram.ai/ts-config": "workspace:*",
     "@flowgram.ai/eslint-config": "workspace:*",
-    "@rspack/cli": "0.2.1",
+    "@rsbuild/core": "^1.2.16",
+    "@rsbuild/plugin-react": "^1.1.1",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^18",
     "@types/react": "^18",

apps/demo-node-form/rsbuild.config.ts

@@ -0,0 +1,14 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig } from '@rsbuild/core';
+
+export default defineConfig({
+  plugins: [pluginReact()],
+  source: {
+    entry: {
+      index: './src/app.tsx',
+    },
+  },
+  html: {
+    title: 'demo-node-form',
+  },
+});

apps/demo-node-form/rspack.config.js

@@ -1,46 +0,0 @@
-const path = require('path');
-
-const isCI = process.env.CI === 'true';
-const isSCM = !!process.env.BUILD_BRANCH;
-const isProd = process.env.NODE_ENV === 'production';
-/**
- * @type {import('@rspack/cli').Configuration}
- */
-module.exports = {
-  mode: process.env.NODE_ENV,
-  context: __dirname,
-  target: ['web'],
-  entry: {
-    main: './src/app.tsx',
-  },
-  builtins: {
-    // https://www.rspack.dev/config/builtins.html#builtinshtml
-    html: [
-      {
-        template: './index.html',
-      },
-    ],
-    progress: !isSCM ? {} : false,
-    treeShaking: isProd,
-  },
-  module: {
-    // https://www.rspack.dev/config/module.html#rule
-    rules: [
-      {
-        test: /\.(png|gif|jpg|jpeg|svg|woff2)$/,
-        type: 'asset',
-      },
-    ],
-  },
-  plugins: [],
-  /** module is too large now, we may need better way to tackle this in the future */
-  stats: isCI
-    ? { all: false, modules: true, assets: true, chunks: true, warnings: true, errors: true }
-    : {
-        modules: false,
-        all: false,
-        warnings: false,
-        errors: true,
-        timings: true,
-      },
-};

apps/docs/src/en/api/core/flow-node-entity.mdx

@@ -39,7 +39,7 @@ node.getExtInfo<{ test: string }>()
 
 ### updateExtInfo
 
-Update extended data, update will not be recorded in `redo/undo`, if you need to record, please implement the [history](https://flowgram.ai/guide/advanced/history.html) service
+Update extended data, update will not be recorded in `redo/undo`, if you need to record, please implement the [history](/guide/advanced/history.html) service
 
 ```
 node.updateExtInfo<{ test: string }>({

apps/docs/src/en/api/core/workflow-document.mdx

@@ -1,6 +1,6 @@
 # WorkflowDocument (free)
 
-Free layout document data, inherited from [FlowDocument](https://flowgram.ai/api/core/flow-document.html)
+Free layout document data, inherited from [FlowDocument](/api/core/flow-document.html)
 
 [> API Detail](https://flowgram.ai/auto-docs/free-layout-core/classes/WorkflowDocument.html)
 

apps/docs/src/en/api/services/command-service.mdx

@@ -1,6 +1,6 @@
 # CommandService
 
-Command Service, needs to be used with [Shortcuts](https://flowgram.ai/guide/advanced/interactive/shortcuts.html)
+Command Service, needs to be used with [Shortcuts](/guide/advanced/interactive/shortcuts.html)
 
 [> API Detail](https://flowgram.ai/auto-docs/command/interfaces/CommandService.html)
 

apps/docs/src/en/guide/advanced/lines.mdx

@@ -1,6 +1,6 @@
 # Free Layout Lines
 
-The lines in the free layout are managed by [WorkflowLinesManager](https://flowgram.ai/api/core/workflow-lines-manager.html).
+The lines in the free layout are managed by [WorkflowLinesManager](/api/core/workflow-lines-manager.html).
 
 ## Get the Input/Output Nodes of the Current Node
 

apps/docs/src/zh/api/core/flow-node-entity.mdx

@@ -39,7 +39,7 @@ node.getExtInfo<{ test: string }>()
 
 ### updateExtInfo
 
-更新扩展数据, 更新不会记录到 `redo/undo`, 如果需要记录，请实现 [history](https://flowgram.ai/guide/advanced/history.html) 服务
+更新扩展数据, 更新不会记录到 `redo/undo`, 如果需要记录，请实现 [history](/guide/advanced/history.html) 服务
 
 ```
 node.updateExtInfo<{ test: string }>({

apps/docs/src/zh/api/core/workflow-document.mdx

@@ -1,6 +1,6 @@
 # WorkflowDocument (free)
 
-自由布局文档数据，继承自 [FlowDocument](https://flowgram.ai/api/core/flow-document.html)
+自由布局文档数据，继承自 [FlowDocument](/api/core/flow-document.html)
 
 [> API Detail](https://flowgram.ai/auto-docs/free-layout-core/classes/WorkflowDocument.html)
 

apps/docs/src/zh/api/services/command-service.mdx

@@ -1,6 +1,6 @@
 # CommandService
 
-指令服务，需要和 [Shortcuts](https://flowgram.ai/guide/advanced/interactive/shortcuts.html) 一起使用
+指令服务，需要和 [Shortcuts](/guide/advanced/interactive/shortcuts.html) 一起使用
 
 [> API Detail](https://flowgram.ai/auto-docs/command/interfaces/CommandService.html)
 

apps/docs/src/zh/guide/advanced/lines.mdx

@@ -1,6 +1,6 @@
 # 自由布局线条
 
-自由布局的线条通过 [WorkflowLinesManager](https://flowgram.ai/api/core/workflow-lines-manager.html) 管理
+自由布局的线条通过 [WorkflowLinesManager](/api/core/workflow-lines-manager.html) 管理
 
 ## 获取当前节点的输入/输出节点
 

packages/canvas-engine/document/src/datas/flow-node-render-data.ts

@@ -13,6 +13,7 @@ export interface FlowNodeRenderSchema {
   activated: boolean; // 是否高亮节点
   hovered: boolean; // 是否悬浮在节点上
   dragging: boolean; // 是否正在拖拽
+  stackIndex: number; // 渲染层级
   extInfo?: Record<string, any>; // 扩展渲染状态字段
 }
 
@@ -43,6 +44,7 @@ export class FlowNodeRenderData extends EntityData<FlowNodeRenderSchema> {
       activated: false,
       hovered: false,
       dragging: false,
+      stackIndex: 0,
     };
   }
 
@@ -183,6 +185,14 @@ export class FlowNodeRenderData extends EntityData<FlowNodeRenderSchema> {
     return this.data.activated;
   }
 
+  get stackIndex(): number {
+    return this.data.stackIndex;
+  }
+
+  set stackIndex(index: number) {
+    this.data.stackIndex = index;
+  }
+
   get lineActivated() {
     const { activated } = this;
     if (!activated) return false;

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

@@ -599,6 +599,7 @@ export class WorkflowDragService {
       return { dragSuccess: false, newLine: undefined };
     }
 
+    this.selectService.clear();
     const config = this.playgroundConfig;
     const deferred = new PromiseDeferred<{
       dragSuccess?: boolean;

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

@@ -1,7 +1,7 @@
 import { last } from 'lodash-es';
 import { inject, injectable } from 'inversify';
 import { Disposable, DisposableCollection, Emitter, type IPoint } from '@flowgram.ai/utils';
-import { FlowNodeTransformData } from '@flowgram.ai/document';
+import { FlowNodeRenderData, FlowNodeTransformData } from '@flowgram.ai/document';
 import { EntityManager, PlaygroundConfigEntity, TransformData } from '@flowgram.ai/core';
 
 import { WorkflowDocumentOptions } from './workflow-document-option';
@@ -428,7 +428,9 @@ export class WorkflowLinesManager {
    * @param pos - 鼠标位置
    */
   getNodeFromMousePos(pos: IPoint): WorkflowNodeEntity | undefined {
-    const allNodes = this.document.getAllNodes();
+    const allNodes = this.document
+      .getAllNodes()
+      .sort((a, b) => this.getNodeIndex(a) - this.getNodeIndex(b));
     // 先挑选出 bounds 区域符合的 node
     const containNodes: WorkflowNodeEntity[] = [];
     const { selection } = this.selectService;
@@ -468,4 +470,9 @@ export class WorkflowLinesManager {
   private registerData(line: WorkflowLineEntity) {
     line.addData(WorkflowLineRenderData);
   }
+
+  private getNodeIndex(node: WorkflowNodeEntity): number {
+    const nodeRenderData = node.getData(FlowNodeRenderData);
+    return nodeRenderData.stackIndex;
+  }
 }

packages/plugins/free-stack-plugin/src/manager.ts

@@ -1,7 +1,7 @@
 import { debounce } from 'lodash';
 import { inject, injectable } from 'inversify';
-import { FlowNodeRenderData } from '@flowgram.ai/document';
-import { EntityManager, PipelineRegistry, PipelineRenderer } from '@flowgram.ai/core';
+import { domUtils } from '@flowgram.ai/utils';
+import { Disposable } from '@flowgram.ai/utils';
 import {
   WorkflowHoverService,
   WorkflowNodeEntity,
@@ -9,8 +9,8 @@ import {
 } from '@flowgram.ai/free-layout-core';
 import { WorkflowLineEntity } from '@flowgram.ai/free-layout-core';
 import { WorkflowDocument } from '@flowgram.ai/free-layout-core';
-import { domUtils } from '@flowgram.ai/utils';
-import { Disposable } from '@flowgram.ai/utils';
+import { FlowNodeRenderData } from '@flowgram.ai/document';
+import { EntityManager, PipelineRegistry, PipelineRenderer } from '@flowgram.ai/core';
 
 import type { StackingContext } from './type';
 import { StackingComputing } from './stacking-computing';
@@ -36,7 +36,7 @@ export class StackingContextManager {
   private readonly selectService: WorkflowSelectService;
 
   public readonly node = domUtils.createDivWithClass(
-    'gedit-playground-layer gedit-flow-render-layer',
+    'gedit-playground-layer gedit-flow-render-layer'
   );
 
   private disposers: Disposable[] = [];
@@ -56,7 +56,7 @@ export class StackingContextManager {
   }
 
   public dispose(): void {
-    this.disposers.forEach(disposer => disposer.dispose());
+    this.disposers.forEach((disposer) => disposer.dispose());
   }
 
   /**
@@ -85,18 +85,21 @@ export class StackingContextManager {
       nodes: this.nodes,
       context,
     });
-    this.nodes.forEach(node => {
+    this.nodes.forEach((node) => {
       const level = nodeLevel.get(node.id);
       const nodeRenderData = node.getData<FlowNodeRenderData>(FlowNodeRenderData);
       const element = nodeRenderData.node;
       element.style.position = 'absolute';
       if (!level) {
         element.style.zIndex = 'auto';
+        nodeRenderData.stackIndex = 0;
         return;
       }
-      element.style.zIndex = String(StackingConfig.startIndex + level);
+      const stackIndex = StackingConfig.startIndex + level;
+      element.style.zIndex = String(stackIndex);
+      nodeRenderData.stackIndex = stackIndex;
     });
-    this.lines.forEach(line => {
+    this.lines.forEach((line) => {
       const level = lineLevel.get(line.id);
       const element = line.node;
       element.style.position = 'absolute';
@@ -121,7 +124,7 @@ export class StackingContextManager {
       hoveredEntity: this.hoverService.hoveredNode,
       hoveredEntityID: this.hoverService.hoveredNode?.id,
       selectedEntities: this.selectService.selection,
-      selectedIDs: this.selectService.selection.map(entity => entity.id),
+      selectedIDs: this.selectService.selection.map((entity) => entity.id),
     };
   }