@flowgram.ai/free-stack-plugin 0.1.0-alpha.3 → 0.1.0-alpha.31

package/dist/index.d.ts

@@ -1,38 +1,32 @@
 import * as _flowgram_ai_core from '@flowgram.ai/core';
-import { Entity } from '@flowgram.ai/core';
-import { WorkfloEntityHoverable, WorkflowNodeEntity, WorkflowLineEntity } from '@flowgram.ai/free-layout-core';
+import { WorkflowNodeEntity } from '@flowgram.ai/free-layout-core';
 
-declare enum StackingItem {
-    Line = "line",
-    Node = "node"
-}
-declare enum StackingType {
-    Line = "line",
-    Node = "node"
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+interface StackingContext {
+    hoveredEntityID?: string;
+    selectedNodes: WorkflowNodeEntity[];
+    selectedIDs: Set<string>;
+    sortNodes: (nodes: WorkflowNodeEntity[]) => WorkflowNodeEntity[];
 }
-declare const StackingBaseIndex: Record<StackingType, number>;
-declare const StackingConfig: {
-    /** index 起始值 */
-    startIndex: number;
-    /** 允许存在的层级 */
-    allowLevel: number;
-    /** 每层 index 跨度 */
-    levelIndexStep: number;
-    /** 叠加计算后出现的最深层级 */
-    maxLevel: number;
-    /** 最大 index */
-    maxIndex: number;
-};
-declare enum StackingComputeMode {
-    /** 层叠计算模式 */
-    Stacking = "stacking",
-    /** 层级计算模式 */
-    Layers = "layers"
+interface StackContextManagerOptions {
+    sortNodes: (nodes: WorkflowNodeEntity[]) => WorkflowNodeEntity[];
 }
+type FreeStackPluginOptions = Partial<StackContextManagerOptions>;
 
-declare const createFreeStackPlugin: _flowgram_ai_core.PluginCreator<{
-    mode?: StackingComputeMode | undefined;
-}>;
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+declare const createFreeStackPlugin: _flowgram_ai_core.PluginCreator<Partial<StackContextManagerOptions>>;
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
 
 declare class StackingContextManager {
     private readonly document;
@@ -42,10 +36,10 @@ declare class StackingContextManager {
     private readonly hoverService;
     private readonly selectService;
     readonly node: HTMLDivElement;
+    private options;
     private disposers;
-    private mode;
     constructor();
-    init(mode?: StackingComputeMode): void;
+    init(options?: Partial<StackContextManagerOptions>): void;
     ready(): void;
     dispose(): void;
     /**
@@ -54,7 +48,6 @@ declare class StackingContextManager {
      */
     private compute;
     private _compute;
-    private stackingCompute;
     private get nodes();
     private get lines();
     private get context();
@@ -65,18 +58,16 @@ declare class StackingContextManager {
     private onSelect;
 }
 
-type StackingContext = {
-    hoveredEntity?: WorkfloEntityHoverable;
-    hoveredEntityID?: string;
-    selectedEntities: Entity[];
-    selectedIDs: string[];
-};
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+declare const BASE_Z_INDEX = 8;
 
-declare const layersComputing: (params: {
-    nodes: WorkflowNodeEntity[];
-    lines: WorkflowLineEntity[];
-    context: StackingContext;
-}) => void;
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
 
 declare class StackingComputing {
     private currentLevel;
@@ -85,6 +76,7 @@ declare class StackingComputing {
     private nodeIndexes;
     private nodeLevel;
     private lineLevel;
+    private selectedNodeParentSet;
     private context;
     compute(params: {
         root: WorkflowNodeEntity;
@@ -102,10 +94,15 @@ declare class StackingComputing {
     };
     private clearCache;
     private computeNodeIndexesMap;
+    private computeSelectedNodeParentSet;
+    private getNodeParents;
     private computeTopLevel;
     private layerHandler;
+    private sortNodes;
+    private getNodesAllLines;
+    private isHigherFirstLine;
     private getLevel;
     private levelIncrease;
 }
 
-export { StackingBaseIndex, StackingComputeMode, StackingComputing, StackingConfig, type StackingContext, StackingContextManager, StackingItem, StackingType, createFreeStackPlugin, layersComputing };
+export { BASE_Z_INDEX, type FreeStackPluginOptions, type StackContextManagerOptions, StackingComputing, type StackingContext, StackingContextManager, createFreeStackPlugin };

package/dist/index.js

@@ -26,45 +26,41 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  StackingBaseIndex: () => StackingBaseIndex,
-  StackingComputeMode: () => StackingComputeMode,
+var index_exports = {};
+__export(index_exports, {
+  BASE_Z_INDEX: () => BASE_Z_INDEX,
   StackingComputing: () => StackingComputing,
-  StackingConfig: () => StackingConfig,
   StackingContextManager: () => StackingContextManager,
-  StackingItem: () => StackingItem,
-  StackingType: () => StackingType,
-  createFreeStackPlugin: () => createFreeStackPlugin,
-  layersComputing: () => layersComputing
+  createFreeStackPlugin: () => createFreeStackPlugin
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/create-free-stack-plugin.ts
 var import_core2 = require("@flowgram.ai/core");
 
 // src/manager.ts
-var import_lodash = require("lodash");
+var import_lodash_es = require("lodash-es");
 var import_inversify = require("inversify");
-var import_document3 = require("@flowgram.ai/document");
-var import_core = require("@flowgram.ai/core");
+var import_utils = require("@flowgram.ai/utils");
 var import_free_layout_core2 = require("@flowgram.ai/free-layout-core");
 var import_free_layout_core3 = require("@flowgram.ai/free-layout-core");
 var import_free_layout_core4 = require("@flowgram.ai/free-layout-core");
-var import_utils = require("@flowgram.ai/utils");
+var import_document2 = require("@flowgram.ai/document");
+var import_core = require("@flowgram.ai/core");
 
 // src/stacking-computing.ts
-var import_document = require("@flowgram.ai/document");
 var import_free_layout_core = require("@flowgram.ai/free-layout-core");
+var import_document = require("@flowgram.ai/document");
 var StackingComputing = class {
   compute(params) {
     this.clearCache();
     const { root, nodes, context } = params;
     this.context = context;
     this.nodeIndexes = this.computeNodeIndexesMap(nodes);
+    this.selectedNodeParentSet = this.computeSelectedNodeParentSet(nodes);
     this.topLevel = this.computeTopLevel(nodes);
     this.maxLevel = this.topLevel * 2;
-    this.layerHandler(root.collapsedChildren);
+    this.layerHandler(root.blocks);
     return {
       nodeLevel: this.nodeLevel,
       lineLevel: this.lineLevel,
@@ -87,10 +83,25 @@ var StackingComputing = class {
     });
     return nodeIndexMap;
   }
+  computeSelectedNodeParentSet(nodes) {
+    const selectedNodeParents = this.context.selectedNodes.flatMap(
+      (node) => this.getNodeParents(node)
+    );
+    return new Set(selectedNodeParents.map((node) => node.id));
+  }
+  getNodeParents(node) {
+    const nodes = [];
+    let currentNode = node;
+    while (currentNode && currentNode.flowNodeType !== import_document.FlowNodeBaseType.ROOT) {
+      nodes.unshift(currentNode);
+      currentNode = currentNode.parent;
+    }
+    return nodes;
+  }
   computeTopLevel(nodes) {
     const nodesWithoutRoot = nodes.filter((node) => node.id !== import_document.FlowNodeBaseType.ROOT);
     const nodeHasChildren = nodesWithoutRoot.reduce((count, node) => {
-      if (node.collapsedChildren.length > 0) {
+      if (node.blocks.length > 0) {
         return count + 1;
       } else {
         return count;
@@ -98,44 +109,69 @@ var StackingComputing = class {
     }, 0);
     return nodesWithoutRoot.length + nodeHasChildren + 1;
   }
-  layerHandler(nodes, pinTop = false) {
-    const sortedNodes = nodes.sort((a, b) => {
-      const aIndex = this.nodeIndexes.get(a.id);
-      const bIndex = this.nodeIndexes.get(b.id);
-      if (aIndex === void 0 || bIndex === void 0) {
-        return 0;
-      }
-      return aIndex - bIndex;
-    });
-    const lines = nodes.map((node) => {
-      const linesData = node.getData(import_free_layout_core.WorkflowNodeLinesData);
-      const outputLines = linesData.outputLines.filter(Boolean);
-      const inputLines = linesData.inputLines.filter(Boolean);
-      return [...outputLines, ...inputLines];
-    }).flat();
+  layerHandler(layerNodes, pinTop = false) {
+    const nodes = this.sortNodes(layerNodes);
+    const lines = this.getNodesAllLines(nodes);
     lines.forEach((line) => {
       if (line.isDrawing || // 正在绘制
       this.context.hoveredEntityID === line.id || // hover
-      this.context.selectedIDs.includes(line.id)) {
+      this.context.selectedIDs.has(line.id)) {
         this.lineLevel.set(line.id, this.maxLevel);
       } else {
         this.lineLevel.set(line.id, this.getLevel(pinTop));
       }
     });
     this.levelIncrease();
-    sortedNodes.forEach((node) => {
-      const selected = this.context.selectedIDs.includes(node.id);
+    nodes.forEach((node) => {
+      const selected = this.context.selectedIDs.has(node.id);
       if (selected) {
         this.nodeLevel.set(node.id, this.topLevel);
       } else {
         this.nodeLevel.set(node.id, this.getLevel(pinTop));
       }
       this.levelIncrease();
-      if (node.collapsedChildren.length > 0) {
-        this.layerHandler(node.collapsedChildren, pinTop || selected);
+      if (node.blocks.length > 0) {
+        this.layerHandler(node.blocks, pinTop || selected);
+      }
+    });
+  }
+  sortNodes(nodes) {
+    const baseSortNodes = nodes.sort((a, b) => {
+      const aIndex = this.nodeIndexes.get(a.id);
+      const bIndex = this.nodeIndexes.get(b.id);
+      if (aIndex === void 0 || bIndex === void 0) {
+        return 0;
+      }
+      return aIndex - bIndex;
+    });
+    const contextSortNodes = this.context.sortNodes(baseSortNodes);
+    return contextSortNodes.sort((a, b) => {
+      const aIsSelectedParent = this.selectedNodeParentSet.has(a.id);
+      const bIsSelectedParent = this.selectedNodeParentSet.has(b.id);
+      if (aIsSelectedParent && !bIsSelectedParent) {
+        return 1;
+      } else if (!aIsSelectedParent && bIsSelectedParent) {
+        return -1;
+      } else {
+        return 0;
       }
     });
   }
+  getNodesAllLines(nodes) {
+    const lines = nodes.map((node) => {
+      const linesData = node.getData(import_free_layout_core.WorkflowNodeLinesData);
+      const outputLines = linesData.outputLines.filter(Boolean);
+      const inputLines = linesData.inputLines.filter(Boolean);
+      return [...outputLines, ...inputLines];
+    }).flat();
+    const filteredLines = lines.filter(
+      (line) => this.lineLevel.get(line.id) === void 0 || this.isHigherFirstLine(line)
+    );
+    return filteredLines;
+  }
+  isHigherFirstLine(line) {
+    return line.to?.parent === line.from || line.from?.parent === line.to;
+  }
   getLevel(pinTop) {
     if (pinTop) {
       return this.topLevel + this.currentLevel;
@@ -147,138 +183,8 @@ var StackingComputing = class {
   }
 };
 
-// src/layers-computing.ts
-var import_document2 = require("@flowgram.ai/document");
-
 // src/constant.ts
-var StackingItem = /* @__PURE__ */ ((StackingItem2) => {
-  StackingItem2["Line"] = "line";
-  StackingItem2["Node"] = "node";
-  return StackingItem2;
-})(StackingItem || {});
-var StackingType = /* @__PURE__ */ ((StackingType2) => {
-  StackingType2["Line"] = "line" /* Line */;
-  StackingType2["Node"] = "node" /* Node */;
-  return StackingType2;
-})(StackingType || {});
-var StackingBaseIndex = {
-  ["line" /* Line */]: 0,
-  ["node" /* Node */]: 1
-};
-var startIndex = 8;
-var allowLevel = 2;
-var levelIndexStep = Object.keys(StackingType).length;
-var maxLevel = allowLevel * 2;
-var maxIndex = startIndex + maxLevel * levelIndexStep;
-var StackingConfig = {
-  /** index 起始值 */
-  startIndex,
-  /** 允许存在的层级 */
-  allowLevel,
-  /** 每层 index 跨度 */
-  levelIndexStep,
-  /** 叠加计算后出现的最深层级 */
-  maxLevel,
-  /** 最大 index */
-  maxIndex
-};
-var StackingComputeMode = /* @__PURE__ */ ((StackingComputeMode2) => {
-  StackingComputeMode2["Stacking"] = "stacking";
-  StackingComputeMode2["Layers"] = "layers";
-  return StackingComputeMode2;
-})(StackingComputeMode || {});
-
-// src/layers-computing.ts
-var NodeComputing;
-((NodeComputing2) => {
-  NodeComputing2.compute = (node, context) => {
-    const zIndex = nodeZIndex(node, context);
-    const element = nodeElement(node);
-    element.style.position = "absolute";
-    element.style.zIndex = (0, NodeComputing2.zIndexStringify)(zIndex);
-  };
-  NodeComputing2.stackingIndex = (stackingType, level) => {
-    if (level < 1) {
-      return void 0;
-    }
-    const baseZIndex = StackingBaseIndex[stackingType];
-    const zIndex = StackingConfig.startIndex + StackingConfig.levelIndexStep * (level - 1) + baseZIndex;
-    return zIndex;
-  };
-  NodeComputing2.nodeStackingLevel = (node, context, disableTopLevel = false) => {
-    const unReversedLinage = [];
-    let currentNode = node;
-    while (currentNode) {
-      unReversedLinage.push(currentNode);
-      currentNode = currentNode.parent;
-    }
-    const linage = unReversedLinage.reverse();
-    const nodeLevel = linage.length - 1;
-    const topLevelIndex = linage.findIndex((node2) => {
-      if (context.selectedIDs.includes(node2.id)) {
-        return true;
-      }
-      return false;
-    });
-    const topLevel = StackingConfig.allowLevel + (linage.length - topLevelIndex);
-    if (!disableTopLevel && topLevelIndex !== -1) {
-      return topLevel;
-    }
-    return nodeLevel;
-  };
-  NodeComputing2.zIndexStringify = (zIndex) => {
-    if (zIndex === void 0) {
-      return "auto";
-    }
-    return zIndex.toString();
-  };
-  const nodeZIndex = (node, context) => {
-    const level = (0, NodeComputing2.nodeStackingLevel)(node, context);
-    const zIndex = (0, NodeComputing2.stackingIndex)("node" /* Node */, level);
-    return zIndex;
-  };
-  const nodeElement = (node) => {
-    const nodeRenderData = node.getData(import_document2.FlowNodeRenderData);
-    return nodeRenderData.node;
-  };
-})(NodeComputing || (NodeComputing = {}));
-var LineComputing;
-((LineComputing2) => {
-  LineComputing2.compute = (line, context) => {
-    const zIndex = lineZIndex(line, context);
-    const element = line.node;
-    element.style.position = "absolute";
-    element.style.zIndex = NodeComputing.zIndexStringify(zIndex);
-  };
-  const lineStackingLevel = (line, context) => {
-    if (line.isDrawing || // 正在绘制
-    context.hoveredEntityID === line.id || // hover
-    context.selectedIDs.includes(line.id)) {
-      return StackingConfig.maxLevel + 1;
-    }
-    const fromLevel = NodeComputing.nodeStackingLevel(line.from, context, true);
-    if (!line.to) {
-      return fromLevel;
-    }
-    const toLevel = NodeComputing.nodeStackingLevel(line.to, context, true);
-    const level = Math.min(fromLevel, toLevel);
-    return level;
-  };
-  const lineZIndex = (line, context) => {
-    const level = lineStackingLevel(line, context);
-    const zIndex = NodeComputing.stackingIndex("line" /* Line */, level);
-    return zIndex;
-  };
-})(LineComputing || (LineComputing = {}));
-var layersComputing = (params) => {
-  const { nodes, lines, context } = params;
-  nodes.forEach((node) => {
-    NodeComputing.compute(node, context);
-  });
-  lines.forEach((line) => {
-    LineComputing.compute(line, context);
-  });
-};
+var BASE_Z_INDEX = 8;
 
 // src/manager.ts
 var StackingContextManager = class {
@@ -286,16 +192,18 @@ var StackingContextManager = class {
     this.node = import_utils.domUtils.createDivWithClass(
       "gedit-playground-layer gedit-flow-render-layer"
     );
+    this.options = {
+      sortNodes: (nodes) => nodes
+    };
     this.disposers = [];
-    this.mode = "stacking" /* Stacking */;
     /**
      * 触发计算
      * 10ms内仅计算一次
      */
-    this.compute = (0, import_lodash.debounce)(this._compute, 10);
+    this.compute = (0, import_lodash_es.debounce)(this._compute, 10);
   }
-  init(mode) {
-    if (mode) this.mode = mode;
+  init(options = {}) {
+    this.options = { ...this.options, ...options };
     this.pipelineRenderer.node.appendChild(this.node);
     this.mountListener();
   }
@@ -306,17 +214,6 @@ var StackingContextManager = class {
     this.disposers.forEach((disposer) => disposer.dispose());
   }
   _compute() {
-    if (this.mode === "stacking" /* Stacking */) {
-      return this.stackingCompute();
-    } else {
-      return layersComputing({
-        nodes: this.nodes,
-        lines: this.lines,
-        context: this.context
-      });
-    }
-  }
-  stackingCompute() {
     const context = this.context;
     const stackingComputing = new StackingComputing();
     const { nodeLevel, lineLevel } = stackingComputing.compute({
@@ -326,24 +223,30 @@ var StackingContextManager = class {
     });
     this.nodes.forEach((node) => {
       const level = nodeLevel.get(node.id);
-      const nodeRenderData = node.getData(import_document3.FlowNodeRenderData);
+      const nodeRenderData = node.getData(import_document2.FlowNodeRenderData);
       const element = nodeRenderData.node;
       element.style.position = "absolute";
-      if (!level) {
+      if (level === void 0) {
+        nodeRenderData.stackIndex = 0;
         element.style.zIndex = "auto";
         return;
       }
-      element.style.zIndex = String(StackingConfig.startIndex + level);
+      nodeRenderData.stackIndex = level;
+      const zIndex = BASE_Z_INDEX + level;
+      element.style.zIndex = String(zIndex);
     });
     this.lines.forEach((line) => {
       const level = lineLevel.get(line.id);
       const element = line.node;
       element.style.position = "absolute";
-      if (!level) {
+      if (level === void 0) {
+        line.stackIndex = 0;
         element.style.zIndex = "auto";
         return;
       }
-      element.style.zIndex = String(StackingConfig.startIndex + level);
+      line.stackIndex = level;
+      const zIndex = BASE_Z_INDEX + level;
+      element.style.zIndex = String(zIndex);
     });
   }
   get nodes() {
@@ -354,10 +257,10 @@ var StackingContextManager = class {
   }
   get context() {
     return {
-      hoveredEntity: this.hoverService.hoveredNode,
-      hoveredEntityID: this.hoverService.hoveredNode?.id,
-      selectedEntities: this.selectService.selection,
-      selectedIDs: this.selectService.selection.map((entity) => entity.id)
+      hoveredEntityID: this.hoverService.someHovered?.id,
+      selectedNodes: this.selectService.selectedNodes,
+      selectedIDs: new Set(this.selectService.selection.map((entity) => entity.id)),
+      sortNodes: this.options.sortNodes
     };
   }
   mountListener() {
@@ -412,12 +315,13 @@ StackingContextManager = __decorateClass([
 
 // src/create-free-stack-plugin.ts
 var createFreeStackPlugin = (0, import_core2.definePluginCreator)({
+  singleton: true,
   onBind({ bind }) {
     bind(StackingContextManager).toSelf().inSingletonScope();
   },
-  onInit(ctx, opts) {
+  onInit(ctx, options) {
     const stackingContextManager = ctx.get(StackingContextManager);
-    stackingContextManager.init(opts?.mode);
+    stackingContextManager.init(options);
   },
   onReady(ctx) {
     const stackingContextManager = ctx.get(StackingContextManager);
@@ -430,14 +334,9 @@ var createFreeStackPlugin = (0, import_core2.definePluginCreator)({
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  StackingBaseIndex,
-  StackingComputeMode,
+  BASE_Z_INDEX,
   StackingComputing,
-  StackingConfig,
   StackingContextManager,
-  StackingItem,
-  StackingType,
-  createFreeStackPlugin,
-  layersComputing
+  createFreeStackPlugin
 });
 //# sourceMappingURL=index.js.map