@flowgram.ai/free-hover-plugin 0.1.0

package/dist/esm/index.js

@@ -0,0 +1,277 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/create-free-hover-plugin.ts
+import { definePluginCreator } from "@flowgram.ai/core";
+
+// src/hover-layer.tsx
+import { inject, injectable } from "inversify";
+import { SelectorBoxConfigEntity } from "@flowgram.ai/renderer";
+import { FlowNodeTransformData as FlowNodeTransformData2 } from "@flowgram.ai/document";
+import {
+  EditorState,
+  EditorStateConfigEntity,
+  Layer,
+  PlaygroundConfigEntity,
+  observeEntities,
+  observeEntity,
+  observeEntityDatas
+} from "@flowgram.ai/core";
+import {
+  WorkflowDocument,
+  WorkflowDragService,
+  WorkflowHoverService,
+  WorkflowLineEntity,
+  WorkflowLinesManager,
+  WorkflowNodeEntity,
+  WorkflowSelectService
+} from "@flowgram.ai/free-layout-core";
+import { WorkflowPortEntity } from "@flowgram.ai/free-layout-core";
+
+// src/selection-utils.ts
+import { FlowNodeTransformData, FlowNodeEntity } from "@flowgram.ai/document";
+import { Rectangle } from "@flowgram.ai/utils";
+var BOUNDS_PADDING = 2;
+function getSelectionBounds(selection, ignoreOneSelect) {
+  const selectedNodes = selection.filter((node) => node instanceof FlowNodeEntity);
+  if (!selectedNodes?.length) {
+    return Rectangle.EMPTY;
+  }
+  if (ignoreOneSelect && selectedNodes.length === 1 && // 选中的节点不包含多个子节点
+  selectedNodes[0].childrenLength <= 1) {
+    return Rectangle.EMPTY;
+  }
+  return Rectangle.enlarge(selectedNodes.map((n) => n.getData(FlowNodeTransformData).bounds)).pad(
+    BOUNDS_PADDING
+  );
+}
+
+// src/hover-layer.tsx
+var PORT_BG_CLASS_NAME = "workflow-port-bg";
+var HoverLayerOptions;
+((HoverLayerOptions2) => {
+  HoverLayerOptions2.DEFAULT = {
+    canHovered: () => true
+  };
+})(HoverLayerOptions || (HoverLayerOptions = {}));
+var LINE_CLASS_NAME = ".gedit-flow-activity-line";
+var NODE_CLASS_NAME = ".gedit-flow-activity-node";
+var HoverLayer = class extends Layer {
+  constructor() {
+    super(...arguments);
+    /**
+     * 按选中排序
+     * @private
+     */
+    this.nodeTransformsWithSort = [];
+  }
+  autorun() {
+    const { activatedNode } = this.selectionService;
+    this.nodeTransformsWithSort = this.nodeTransforms.filter((n) => n.entity.id !== "root").reverse().sort((n1) => n1.entity === activatedNode ? -1 : 0);
+  }
+  /**
+   * 是否正在调整线条
+   * @protected
+   */
+  get isDrawing() {
+    return this.linesManager.isDrawing;
+  }
+  onReady() {
+    this.options = {
+      ...HoverLayerOptions.DEFAULT,
+      ...this.options
+    };
+    this.toDispose.pushAll([
+      // 监听画布鼠标移动事件
+      this.listenPlaygroundEvent("mousemove", (e) => {
+        this.hoverService.hoveredPos = this.config.getPosFromMouseEvent(e);
+        if (!this.isEnabled()) {
+          return;
+        }
+        if (!this.options.canHovered(e, this.hoverService)) {
+          return;
+        }
+        const mousePos = this.config.getPosFromMouseEvent(e);
+        this.updateHoveredState(mousePos, e?.target);
+      }),
+      this.selectionService.onSelectionChanged(() => this.autorun()),
+      // 控制选中逻辑
+      this.listenPlaygroundEvent("mousedown", (e) => {
+        if (!this.isEnabled() || this.isDrawing) {
+          return void 0;
+        }
+        const { hoveredNode } = this.hoverService;
+        if (hoveredNode && hoveredNode instanceof WorkflowLineEntity) {
+          this.dragService.resetLine(hoveredNode, e);
+          return true;
+        }
+        if (hoveredNode && hoveredNode instanceof WorkflowPortEntity && hoveredNode.portType !== "input" && !hoveredNode.disabled && e.button !== 1) {
+          e.stopPropagation();
+          e.preventDefault();
+          this.dragService.startDrawingLine(hoveredNode, e);
+          return true;
+        }
+        const mousePos = this.config.getPosFromMouseEvent(e);
+        const selectionBounds = getSelectionBounds(
+          this.selectionService.selection,
+          // 这里只考虑多选模式，单选模式已经下沉到 use-node-render 中
+          true
+        );
+        if (selectionBounds.width > 0 && selectionBounds.contains(mousePos.x, mousePos.y)) {
+          this.dragService.startDragSelectedNodes(e).then((dragSuccess) => {
+            if (!dragSuccess) {
+              if (hoveredNode && hoveredNode instanceof WorkflowNodeEntity) {
+                if (e.metaKey || e.shiftKey || e.ctrlKey) {
+                  this.selectionService.toggleSelect(hoveredNode);
+                } else {
+                  this.selectionService.selectNode(hoveredNode);
+                }
+              } else {
+                this.selectionService.clear();
+              }
+            }
+          });
+          return true;
+        } else {
+          if (!hoveredNode) {
+            this.selectionService.clear();
+          }
+        }
+        return void 0;
+      })
+    ]);
+  }
+  /**
+   * 更新 hoverd
+   * @param mousePos
+   */
+  updateHoveredState(mousePos, target) {
+    const { hoverService } = this;
+    const nodeTransforms = this.nodeTransformsWithSort;
+    const portHovered = this.linesManager.getPortFromMousePos(mousePos);
+    const lineDomNodes = this.playgroundNode.querySelectorAll(LINE_CLASS_NAME);
+    const checkTargetFromLine = [...lineDomNodes].some(
+      (lineDom) => lineDom.contains(target)
+    );
+    if (portHovered) {
+      if (portHovered.portType === "output") {
+        hoverService.updateHoveredKey(portHovered.id);
+      } else if (checkTargetFromLine || target?.className?.includes?.(PORT_BG_CLASS_NAME)) {
+        const lineHovered2 = this.linesManager.getCloseInLineFromMousePos(mousePos);
+        if (lineHovered2) {
+          this.updateHoveredKey(lineHovered2.id);
+        }
+      }
+      return;
+    }
+    if (this.isDrawing) {
+      return;
+    }
+    const nodeHovered = nodeTransforms.find(
+      (trans) => trans.bounds.contains(mousePos.x, mousePos.y)
+    )?.entity;
+    const nodeDomNodes = this.playgroundNode.querySelectorAll(NODE_CLASS_NAME);
+    const checkTargetFromNode = [...nodeDomNodes].some(
+      (nodeDom) => nodeDom.contains(target)
+    );
+    if (nodeHovered || checkTargetFromNode) {
+      if (nodeHovered?.id) {
+        this.updateHoveredKey(nodeHovered.id);
+      }
+    }
+    const nodeInContainer = !!(nodeHovered?.parent && nodeHovered.parent.flowNodeType !== "root");
+    const lineHovered = checkTargetFromLine ? this.linesManager.getCloseInLineFromMousePos(mousePos) : void 0;
+    const lineInContainer = !!lineHovered?.inContainer;
+    if (nodeHovered && nodeInContainer) {
+      this.updateHoveredKey(nodeHovered.id);
+      return;
+    }
+    if (lineHovered && lineInContainer) {
+      this.updateHoveredKey(lineHovered.id);
+      return;
+    }
+    if (nodeHovered) {
+      this.updateHoveredKey(nodeHovered.id);
+      return;
+    }
+    if (lineHovered) {
+      this.hoverService.updateHoveredKey(lineHovered.id);
+      return;
+    }
+    hoverService.clearHovered();
+    const currentState = this.editorStateConfig.getCurrentState();
+    const isMouseFriendly = currentState === EditorState.STATE_MOUSE_FRIENDLY_SELECT;
+    if (isMouseFriendly && !this.editorStateConfig.isPressingShift) {
+      this.configEntity.updateCursor("grab");
+    }
+  }
+  updateHoveredKey(key) {
+    this.configEntity.updateCursor("default");
+    this.hoverService.updateHoveredKey(key);
+  }
+  /**
+   * 判断是否能够 hover
+   * @returns 是否能 hover
+   */
+  isEnabled() {
+    const currentState = this.editorStateConfig.getCurrentState();
+    return (
+      // 鼠标友好模式下，也需要支持 hover 效果，不然线条选择不到
+      // Coze 中没有使用该插件，需要在 workflow/render 包相应位置改动
+      (currentState === EditorState.STATE_SELECT || currentState === EditorState.STATE_MOUSE_FRIENDLY_SELECT) && !this.selectorBoxConfigEntity.isStart && !this.dragService.isDragging
+    );
+  }
+};
+HoverLayer.type = "HoverLayer";
+__decorateClass([
+  inject(WorkflowDocument)
+], HoverLayer.prototype, "document", 2);
+__decorateClass([
+  inject(WorkflowSelectService)
+], HoverLayer.prototype, "selectionService", 2);
+__decorateClass([
+  inject(WorkflowDragService)
+], HoverLayer.prototype, "dragService", 2);
+__decorateClass([
+  inject(WorkflowHoverService)
+], HoverLayer.prototype, "hoverService", 2);
+__decorateClass([
+  inject(WorkflowLinesManager)
+], HoverLayer.prototype, "linesManager", 2);
+__decorateClass([
+  observeEntity(EditorStateConfigEntity)
+], HoverLayer.prototype, "editorStateConfig", 2);
+__decorateClass([
+  observeEntity(SelectorBoxConfigEntity)
+], HoverLayer.prototype, "selectorBoxConfigEntity", 2);
+__decorateClass([
+  inject(PlaygroundConfigEntity)
+], HoverLayer.prototype, "configEntity", 2);
+__decorateClass([
+  observeEntityDatas(WorkflowNodeEntity, FlowNodeTransformData2)
+], HoverLayer.prototype, "nodeTransforms", 2);
+__decorateClass([
+  observeEntities(WorkflowLineEntity)
+], HoverLayer.prototype, "lines", 2);
+HoverLayer = __decorateClass([
+  injectable()
+], HoverLayer);
+
+// src/create-free-hover-plugin.ts
+var createFreeHoverPlugin = definePluginCreator({
+  onInit(ctx) {
+    ctx.playground.registerLayer(HoverLayer);
+  }
+});
+export {
+  createFreeHoverPlugin
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/create-free-hover-plugin.ts","../../src/hover-layer.tsx","../../src/selection-utils.ts"],"sourcesContent":["import { definePluginCreator } from '@flowgram.ai/core';\n\nimport { HoverLayer } from './hover-layer';\n\nexport const createFreeHoverPlugin = definePluginCreator({\n  onInit(ctx): void {\n    ctx.playground.registerLayer(HoverLayer);\n  },\n});\n","/* eslint-disable complexity */\nimport { inject, injectable } from 'inversify';\nimport { SelectorBoxConfigEntity } from '@flowgram.ai/renderer';\nimport { FlowNodeTransformData } from '@flowgram.ai/document';\nimport {\n  EditorState,\n  EditorStateConfigEntity,\n  Layer,\n  PlaygroundConfigEntity,\n  observeEntities,\n  observeEntity,\n  observeEntityDatas,\n  type LayerOptions,\n} from '@flowgram.ai/core';\nimport {\n  WorkflowDocument,\n  WorkflowDragService,\n  WorkflowHoverService,\n  WorkflowLineEntity,\n  WorkflowLinesManager,\n  WorkflowNodeEntity,\n  WorkflowSelectService,\n} from '@flowgram.ai/free-layout-core';\nimport { WorkflowPortEntity } from '@flowgram.ai/free-layout-core';\nimport { type IPoint } from '@flowgram.ai/utils';\n\nimport { getSelectionBounds } from './selection-utils';\nconst PORT_BG_CLASS_NAME = 'workflow-port-bg';\n\nexport interface HoverLayerOptions extends LayerOptions {\n  canHovered?: (e: MouseEvent, service: WorkflowHoverService) => boolean;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nexport namespace HoverLayerOptions {\n  export const DEFAULT: HoverLayerOptions = {\n    canHovered: () => true,\n  };\n}\n\nconst LINE_CLASS_NAME = '.gedit-flow-activity-line';\nconst NODE_CLASS_NAME = '.gedit-flow-activity-node';\n\n@injectable()\nexport class HoverLayer extends Layer<HoverLayerOptions> {\n  static type = 'HoverLayer';\n\n  @inject(WorkflowDocument) document: WorkflowDocument;\n\n  @inject(WorkflowSelectService) selectionService: WorkflowSelectService;\n\n  @inject(WorkflowDragService) dragService: WorkflowDragService;\n\n  @inject(WorkflowHoverService) hoverService: WorkflowHoverService;\n\n  @inject(WorkflowLinesManager)\n  linesManager: WorkflowLinesManager;\n\n  @observeEntity(EditorStateConfigEntity)\n  protected editorStateConfig: EditorStateConfigEntity;\n\n  @observeEntity(SelectorBoxConfigEntity)\n  protected selectorBoxConfigEntity: SelectorBoxConfigEntity;\n\n  @inject(PlaygroundConfigEntity) configEntity: PlaygroundConfigEntity;\n\n  /**\n   * 监听节点 transform\n   */\n  @observeEntityDatas(WorkflowNodeEntity, FlowNodeTransformData)\n  protected readonly nodeTransforms: FlowNodeTransformData[];\n\n  /**\n   * 按选中排序\n   * @private\n   */\n  protected nodeTransformsWithSort: FlowNodeTransformData[] = [];\n\n  autorun(): void {\n    const { activatedNode } = this.selectionService;\n    this.nodeTransformsWithSort = this.nodeTransforms\n      .filter(n => n.entity.id !== 'root')\n      .reverse() // 后创建的排在前面\n      .sort(n1 => (n1.entity === activatedNode ? -1 : 0));\n  }\n\n  /**\n   * 监听线条\n   */\n  @observeEntities(WorkflowLineEntity)\n  protected readonly lines: WorkflowLineEntity[];\n\n  /**\n   * 是否正在调整线条\n   * @protected\n   */\n  get isDrawing(): boolean {\n    return this.linesManager.isDrawing;\n  }\n\n  onReady(): void {\n    this.options = {\n      ...HoverLayerOptions.DEFAULT,\n      ...this.options,\n    };\n    this.toDispose.pushAll([\n      // 监听画布鼠标移动事件\n      this.listenPlaygroundEvent('mousemove', (e: MouseEvent) => {\n        this.hoverService.hoveredPos = this.config.getPosFromMouseEvent(e);\n        if (!this.isEnabled()) {\n          return;\n        }\n        if (!this.options.canHovered!(e, this.hoverService)) {\n          return;\n        }\n        const mousePos = this.config.getPosFromMouseEvent(e);\n        // 更新 hover 状态\n        this.updateHoveredState(mousePos, e?.target as HTMLElement);\n      }),\n      this.selectionService.onSelectionChanged(() => this.autorun()),\n      // 控制选中逻辑\n      this.listenPlaygroundEvent('mousedown', (e: MouseEvent): boolean | undefined => {\n        if (!this.isEnabled() || this.isDrawing) {\n          return undefined;\n        }\n        const { hoveredNode } = this.hoverService;\n        // 重置线条\n        if (hoveredNode && hoveredNode instanceof WorkflowLineEntity) {\n          this.dragService.resetLine(hoveredNode, e);\n          return true;\n        }\n        if (\n          hoveredNode &&\n          hoveredNode instanceof WorkflowPortEntity &&\n          hoveredNode.portType !== 'input' &&\n          !hoveredNode.disabled &&\n          e.button !== 1\n        ) {\n          e.stopPropagation();\n          e.preventDefault();\n          this.dragService.startDrawingLine(hoveredNode, e);\n          return true;\n        }\n        const mousePos = this.config.getPosFromMouseEvent(e);\n        const selectionBounds = getSelectionBounds(\n          this.selectionService.selection,\n          // 这里只考虑多选模式，单选模式已经下沉到 use-node-render 中\n          true,\n        );\n        if (selectionBounds.width > 0 && selectionBounds.contains(mousePos.x, mousePos.y)) {\n          /**\n           * 拖拽选择框\n           */\n          this.dragService.startDragSelectedNodes(e).then(dragSuccess => {\n            if (!dragSuccess) {\n              // 拖拽没有成功触发了点击\n              if (hoveredNode && hoveredNode instanceof WorkflowNodeEntity) {\n                if (e.metaKey || e.shiftKey || e.ctrlKey) {\n                  this.selectionService.toggleSelect(hoveredNode);\n                } else {\n                  this.selectionService.selectNode(hoveredNode);\n                }\n              } else {\n                this.selectionService.clear();\n              }\n            }\n          });\n          // 这里会组织触发 selector box\n          return true;\n        } else {\n          if (!hoveredNode) {\n            this.selectionService.clear();\n          }\n        }\n        return undefined;\n      }),\n    ]);\n  }\n\n  /**\n   * 更新 hoverd\n   * @param mousePos\n   */\n  updateHoveredState(mousePos: IPoint, target?: HTMLElement): void {\n    const { hoverService } = this;\n    const nodeTransforms = this.nodeTransformsWithSort;\n    // // 判断连接点是否 hover\n    const portHovered = this.linesManager.getPortFromMousePos(mousePos);\n\n    const lineDomNodes = this.playgroundNode.querySelectorAll(LINE_CLASS_NAME);\n    const checkTargetFromLine = [...lineDomNodes].some(lineDom =>\n      lineDom.contains(target as HTMLElement),\n    );\n    // 默认 只有 output 点位可以 hover\n    if (portHovered) {\n      // 输出点可以直接选中\n      if (portHovered.portType === 'output') {\n        hoverService.updateHoveredKey(portHovered.id);\n      } else if (checkTargetFromLine || target?.className?.includes?.(PORT_BG_CLASS_NAME)) {\n        // 输入点采用获取最接近的线条\n        const lineHovered = this.linesManager.getCloseInLineFromMousePos(mousePos);\n        if (lineHovered) {\n          this.updateHoveredKey(lineHovered.id);\n        }\n      }\n      return;\n    }\n\n    // Drawing 情况，不能选中节点和线条\n    if (this.isDrawing) {\n      return;\n    }\n\n    const nodeHovered = nodeTransforms.find((trans: FlowNodeTransformData) =>\n      trans.bounds.contains(mousePos.x, mousePos.y),\n    )?.entity as WorkflowNodeEntity;\n\n    // 判断当前鼠标位置所在元素是否在节点内部\n    const nodeDomNodes = this.playgroundNode.querySelectorAll(NODE_CLASS_NAME);\n    const checkTargetFromNode = [...nodeDomNodes].some(nodeDom =>\n      nodeDom.contains(target as HTMLElement),\n    );\n\n    if (nodeHovered || checkTargetFromNode) {\n      if (nodeHovered?.id) {\n        this.updateHoveredKey(nodeHovered.id);\n      }\n    }\n\n    const nodeInContainer = !!(nodeHovered?.parent && nodeHovered.parent.flowNodeType !== 'root');\n\n    // 获取最接近的线条\n    // 线条会相交需要获取最接近点位的线条，不能删除的线条不能被选中\n    const lineHovered = checkTargetFromLine\n      ? this.linesManager.getCloseInLineFromMousePos(mousePos)\n      : undefined;\n    const lineInContainer = !!lineHovered?.inContainer;\n\n    // 判断容器内节点是否 hover\n    if (nodeHovered && nodeInContainer) {\n      this.updateHoveredKey(nodeHovered.id);\n      return;\n    }\n    // 判断容器内线条是否 hover\n    if (lineHovered && lineInContainer) {\n      this.updateHoveredKey(lineHovered.id);\n      return;\n    }\n\n    // 判断节点是否 hover\n    if (nodeHovered) {\n      this.updateHoveredKey(nodeHovered.id);\n      return;\n    }\n    // 判断线条是否 hover\n    if (lineHovered) {\n      this.hoverService.updateHoveredKey(lineHovered.id);\n      return;\n    }\n\n    // 上述逻辑都未命中 则清空 hoverd\n    hoverService.clearHovered();\n\n    const currentState = this.editorStateConfig.getCurrentState();\n    const isMouseFriendly = currentState === EditorState.STATE_MOUSE_FRIENDLY_SELECT;\n\n    // 鼠标优先，并且不是按住 shift 键，更新为小手\n    if (isMouseFriendly && !this.editorStateConfig.isPressingShift) {\n      this.configEntity.updateCursor('grab');\n    }\n  }\n\n  updateHoveredKey(key: string): void {\n    // 鼠标优先交互模式，如果是 hover，需要将鼠标的小手去掉，还原鼠标原有样式\n    this.configEntity.updateCursor('default');\n    this.hoverService.updateHoveredKey(key);\n  }\n\n  /**\n   * 判断是否能够 hover\n   * @returns 是否能 hover\n   */\n  isEnabled(): boolean {\n    const currentState = this.editorStateConfig.getCurrentState();\n    // 选择框情况禁止 hover\n    return (\n      // 鼠标友好模式下，也需要支持 hover 效果，不然线条选择不到\n      // Coze 中没有使用该插件，需要在 workflow/render 包相应位置改动\n      (currentState === EditorState.STATE_SELECT ||\n        currentState === EditorState.STATE_MOUSE_FRIENDLY_SELECT) &&\n      !this.selectorBoxConfigEntity.isStart &&\n      !this.dragService.isDragging\n    );\n  }\n}\n","import { FlowNodeTransformData, FlowNodeEntity } from '@flowgram.ai/document';\nimport { type Entity } from '@flowgram.ai/core';\nimport { Rectangle } from '@flowgram.ai/utils';\n\nconst BOUNDS_PADDING = 2;\n\nexport function getSelectionBounds(\n  selection: Entity[],\n  ignoreOneSelect?: boolean, // 忽略单选\n): Rectangle {\n  const selectedNodes = selection.filter(node => node instanceof FlowNodeEntity);\n\n  if (!selectedNodes?.length) {\n    return Rectangle.EMPTY;\n  }\n\n  // 选中单个的时候不显示\n  if (\n    ignoreOneSelect &&\n    selectedNodes.length === 1 &&\n    // 选中的节点不包含多个子节点\n    (selectedNodes[0] as FlowNodeEntity).childrenLength <= 1\n  ) {\n    return Rectangle.EMPTY;\n  }\n\n  return Rectangle.enlarge(selectedNodes.map(n => n.getData(FlowNodeTransformData)!.bounds)).pad(\n    BOUNDS_PADDING,\n  );\n}\n"],"mappings":"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","names":["FlowNodeTransformData","HoverLayerOptions","lineHovered","FlowNodeTransformData"]}

package/dist/index.d.mts

@@ -0,0 +1,5 @@
+import * as _flowgram_ai_core from '@flowgram.ai/core';
+
+declare const createFreeHoverPlugin: _flowgram_ai_core.PluginCreator<unknown>;
+
+export { createFreeHoverPlugin };

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import * as _flowgram_ai_core from '@flowgram.ai/core';
+
+declare const createFreeHoverPlugin: _flowgram_ai_core.PluginCreator<unknown>;
+
+export { createFreeHoverPlugin };

package/dist/index.js

@@ -0,0 +1,285 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  createFreeHoverPlugin: () => createFreeHoverPlugin
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/create-free-hover-plugin.ts
+var import_core2 = require("@flowgram.ai/core");
+
+// src/hover-layer.tsx
+var import_inversify = require("inversify");
+var import_renderer = require("@flowgram.ai/renderer");
+var import_document2 = require("@flowgram.ai/document");
+var import_core = require("@flowgram.ai/core");
+var import_free_layout_core = require("@flowgram.ai/free-layout-core");
+var import_free_layout_core2 = require("@flowgram.ai/free-layout-core");
+
+// src/selection-utils.ts
+var import_document = require("@flowgram.ai/document");
+var import_utils = require("@flowgram.ai/utils");
+var BOUNDS_PADDING = 2;
+function getSelectionBounds(selection, ignoreOneSelect) {
+  const selectedNodes = selection.filter((node) => node instanceof import_document.FlowNodeEntity);
+  if (!selectedNodes?.length) {
+    return import_utils.Rectangle.EMPTY;
+  }
+  if (ignoreOneSelect && selectedNodes.length === 1 && // 选中的节点不包含多个子节点
+  selectedNodes[0].childrenLength <= 1) {
+    return import_utils.Rectangle.EMPTY;
+  }
+  return import_utils.Rectangle.enlarge(selectedNodes.map((n) => n.getData(import_document.FlowNodeTransformData).bounds)).pad(
+    BOUNDS_PADDING
+  );
+}
+
+// src/hover-layer.tsx
+var PORT_BG_CLASS_NAME = "workflow-port-bg";
+var HoverLayerOptions;
+((HoverLayerOptions2) => {
+  HoverLayerOptions2.DEFAULT = {
+    canHovered: () => true
+  };
+})(HoverLayerOptions || (HoverLayerOptions = {}));
+var LINE_CLASS_NAME = ".gedit-flow-activity-line";
+var NODE_CLASS_NAME = ".gedit-flow-activity-node";
+var HoverLayer = class extends import_core.Layer {
+  constructor() {
+    super(...arguments);
+    /**
+     * 按选中排序
+     * @private
+     */
+    this.nodeTransformsWithSort = [];
+  }
+  autorun() {
+    const { activatedNode } = this.selectionService;
+    this.nodeTransformsWithSort = this.nodeTransforms.filter((n) => n.entity.id !== "root").reverse().sort((n1) => n1.entity === activatedNode ? -1 : 0);
+  }
+  /**
+   * 是否正在调整线条
+   * @protected
+   */
+  get isDrawing() {
+    return this.linesManager.isDrawing;
+  }
+  onReady() {
+    this.options = {
+      ...HoverLayerOptions.DEFAULT,
+      ...this.options
+    };
+    this.toDispose.pushAll([
+      // 监听画布鼠标移动事件
+      this.listenPlaygroundEvent("mousemove", (e) => {
+        this.hoverService.hoveredPos = this.config.getPosFromMouseEvent(e);
+        if (!this.isEnabled()) {
+          return;
+        }
+        if (!this.options.canHovered(e, this.hoverService)) {
+          return;
+        }
+        const mousePos = this.config.getPosFromMouseEvent(e);
+        this.updateHoveredState(mousePos, e?.target);
+      }),
+      this.selectionService.onSelectionChanged(() => this.autorun()),
+      // 控制选中逻辑
+      this.listenPlaygroundEvent("mousedown", (e) => {
+        if (!this.isEnabled() || this.isDrawing) {
+          return void 0;
+        }
+        const { hoveredNode } = this.hoverService;
+        if (hoveredNode && hoveredNode instanceof import_free_layout_core.WorkflowLineEntity) {
+          this.dragService.resetLine(hoveredNode, e);
+          return true;
+        }
+        if (hoveredNode && hoveredNode instanceof import_free_layout_core2.WorkflowPortEntity && hoveredNode.portType !== "input" && !hoveredNode.disabled && e.button !== 1) {
+          e.stopPropagation();
+          e.preventDefault();
+          this.dragService.startDrawingLine(hoveredNode, e);
+          return true;
+        }
+        const mousePos = this.config.getPosFromMouseEvent(e);
+        const selectionBounds = getSelectionBounds(
+          this.selectionService.selection,
+          // 这里只考虑多选模式，单选模式已经下沉到 use-node-render 中
+          true
+        );
+        if (selectionBounds.width > 0 && selectionBounds.contains(mousePos.x, mousePos.y)) {
+          this.dragService.startDragSelectedNodes(e).then((dragSuccess) => {
+            if (!dragSuccess) {
+              if (hoveredNode && hoveredNode instanceof import_free_layout_core.WorkflowNodeEntity) {
+                if (e.metaKey || e.shiftKey || e.ctrlKey) {
+                  this.selectionService.toggleSelect(hoveredNode);
+                } else {
+                  this.selectionService.selectNode(hoveredNode);
+                }
+              } else {
+                this.selectionService.clear();
+              }
+            }
+          });
+          return true;
+        } else {
+          if (!hoveredNode) {
+            this.selectionService.clear();
+          }
+        }
+        return void 0;
+      })
+    ]);
+  }
+  /**
+   * 更新 hoverd
+   * @param mousePos
+   */
+  updateHoveredState(mousePos, target) {
+    const { hoverService } = this;
+    const nodeTransforms = this.nodeTransformsWithSort;
+    const portHovered = this.linesManager.getPortFromMousePos(mousePos);
+    const lineDomNodes = this.playgroundNode.querySelectorAll(LINE_CLASS_NAME);
+    const checkTargetFromLine = [...lineDomNodes].some(
+      (lineDom) => lineDom.contains(target)
+    );
+    if (portHovered) {
+      if (portHovered.portType === "output") {
+        hoverService.updateHoveredKey(portHovered.id);
+      } else if (checkTargetFromLine || target?.className?.includes?.(PORT_BG_CLASS_NAME)) {
+        const lineHovered2 = this.linesManager.getCloseInLineFromMousePos(mousePos);
+        if (lineHovered2) {
+          this.updateHoveredKey(lineHovered2.id);
+        }
+      }
+      return;
+    }
+    if (this.isDrawing) {
+      return;
+    }
+    const nodeHovered = nodeTransforms.find(
+      (trans) => trans.bounds.contains(mousePos.x, mousePos.y)
+    )?.entity;
+    const nodeDomNodes = this.playgroundNode.querySelectorAll(NODE_CLASS_NAME);
+    const checkTargetFromNode = [...nodeDomNodes].some(
+      (nodeDom) => nodeDom.contains(target)
+    );
+    if (nodeHovered || checkTargetFromNode) {
+      if (nodeHovered?.id) {
+        this.updateHoveredKey(nodeHovered.id);
+      }
+    }
+    const nodeInContainer = !!(nodeHovered?.parent && nodeHovered.parent.flowNodeType !== "root");
+    const lineHovered = checkTargetFromLine ? this.linesManager.getCloseInLineFromMousePos(mousePos) : void 0;
+    const lineInContainer = !!lineHovered?.inContainer;
+    if (nodeHovered && nodeInContainer) {
+      this.updateHoveredKey(nodeHovered.id);
+      return;
+    }
+    if (lineHovered && lineInContainer) {
+      this.updateHoveredKey(lineHovered.id);
+      return;
+    }
+    if (nodeHovered) {
+      this.updateHoveredKey(nodeHovered.id);
+      return;
+    }
+    if (lineHovered) {
+      this.hoverService.updateHoveredKey(lineHovered.id);
+      return;
+    }
+    hoverService.clearHovered();
+    const currentState = this.editorStateConfig.getCurrentState();
+    const isMouseFriendly = currentState === import_core.EditorState.STATE_MOUSE_FRIENDLY_SELECT;
+    if (isMouseFriendly && !this.editorStateConfig.isPressingShift) {
+      this.configEntity.updateCursor("grab");
+    }
+  }
+  updateHoveredKey(key) {
+    this.configEntity.updateCursor("default");
+    this.hoverService.updateHoveredKey(key);
+  }
+  /**
+   * 判断是否能够 hover
+   * @returns 是否能 hover
+   */
+  isEnabled() {
+    const currentState = this.editorStateConfig.getCurrentState();
+    return (
+      // 鼠标友好模式下，也需要支持 hover 效果，不然线条选择不到
+      // Coze 中没有使用该插件，需要在 workflow/render 包相应位置改动
+      (currentState === import_core.EditorState.STATE_SELECT || currentState === import_core.EditorState.STATE_MOUSE_FRIENDLY_SELECT) && !this.selectorBoxConfigEntity.isStart && !this.dragService.isDragging
+    );
+  }
+};
+HoverLayer.type = "HoverLayer";
+__decorateClass([
+  (0, import_inversify.inject)(import_free_layout_core.WorkflowDocument)
+], HoverLayer.prototype, "document", 2);
+__decorateClass([
+  (0, import_inversify.inject)(import_free_layout_core.WorkflowSelectService)
+], HoverLayer.prototype, "selectionService", 2);
+__decorateClass([
+  (0, import_inversify.inject)(import_free_layout_core.WorkflowDragService)
+], HoverLayer.prototype, "dragService", 2);
+__decorateClass([
+  (0, import_inversify.inject)(import_free_layout_core.WorkflowHoverService)
+], HoverLayer.prototype, "hoverService", 2);
+__decorateClass([
+  (0, import_inversify.inject)(import_free_layout_core.WorkflowLinesManager)
+], HoverLayer.prototype, "linesManager", 2);
+__decorateClass([
+  (0, import_core.observeEntity)(import_core.EditorStateConfigEntity)
+], HoverLayer.prototype, "editorStateConfig", 2);
+__decorateClass([
+  (0, import_core.observeEntity)(import_renderer.SelectorBoxConfigEntity)
+], HoverLayer.prototype, "selectorBoxConfigEntity", 2);
+__decorateClass([
+  (0, import_inversify.inject)(import_core.PlaygroundConfigEntity)
+], HoverLayer.prototype, "configEntity", 2);
+__decorateClass([
+  (0, import_core.observeEntityDatas)(import_free_layout_core.WorkflowNodeEntity, import_document2.FlowNodeTransformData)
+], HoverLayer.prototype, "nodeTransforms", 2);
+__decorateClass([
+  (0, import_core.observeEntities)(import_free_layout_core.WorkflowLineEntity)
+], HoverLayer.prototype, "lines", 2);
+HoverLayer = __decorateClass([
+  (0, import_inversify.injectable)()
+], HoverLayer);
+
+// src/create-free-hover-plugin.ts
+var createFreeHoverPlugin = (0, import_core2.definePluginCreator)({
+  onInit(ctx) {
+    ctx.playground.registerLayer(HoverLayer);
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createFreeHoverPlugin
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/create-free-hover-plugin.ts","../src/hover-layer.tsx","../src/selection-utils.ts"],"sourcesContent":["export * from './create-free-hover-plugin';\n","import { definePluginCreator } from '@flowgram.ai/core';\n\nimport { HoverLayer } from './hover-layer';\n\nexport const createFreeHoverPlugin = definePluginCreator({\n  onInit(ctx): void {\n    ctx.playground.registerLayer(HoverLayer);\n  },\n});\n","/* eslint-disable complexity */\nimport { inject, injectable } from 'inversify';\nimport { SelectorBoxConfigEntity } from '@flowgram.ai/renderer';\nimport { FlowNodeTransformData } from '@flowgram.ai/document';\nimport {\n  EditorState,\n  EditorStateConfigEntity,\n  Layer,\n  PlaygroundConfigEntity,\n  observeEntities,\n  observeEntity,\n  observeEntityDatas,\n  type LayerOptions,\n} from '@flowgram.ai/core';\nimport {\n  WorkflowDocument,\n  WorkflowDragService,\n  WorkflowHoverService,\n  WorkflowLineEntity,\n  WorkflowLinesManager,\n  WorkflowNodeEntity,\n  WorkflowSelectService,\n} from '@flowgram.ai/free-layout-core';\nimport { WorkflowPortEntity } from '@flowgram.ai/free-layout-core';\nimport { type IPoint } from '@flowgram.ai/utils';\n\nimport { getSelectionBounds } from './selection-utils';\nconst PORT_BG_CLASS_NAME = 'workflow-port-bg';\n\nexport interface HoverLayerOptions extends LayerOptions {\n  canHovered?: (e: MouseEvent, service: WorkflowHoverService) => boolean;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nexport namespace HoverLayerOptions {\n  export const DEFAULT: HoverLayerOptions = {\n    canHovered: () => true,\n  };\n}\n\nconst LINE_CLASS_NAME = '.gedit-flow-activity-line';\nconst NODE_CLASS_NAME = '.gedit-flow-activity-node';\n\n@injectable()\nexport class HoverLayer extends Layer<HoverLayerOptions> {\n  static type = 'HoverLayer';\n\n  @inject(WorkflowDocument) document: WorkflowDocument;\n\n  @inject(WorkflowSelectService) selectionService: WorkflowSelectService;\n\n  @inject(WorkflowDragService) dragService: WorkflowDragService;\n\n  @inject(WorkflowHoverService) hoverService: WorkflowHoverService;\n\n  @inject(WorkflowLinesManager)\n  linesManager: WorkflowLinesManager;\n\n  @observeEntity(EditorStateConfigEntity)\n  protected editorStateConfig: EditorStateConfigEntity;\n\n  @observeEntity(SelectorBoxConfigEntity)\n  protected selectorBoxConfigEntity: SelectorBoxConfigEntity;\n\n  @inject(PlaygroundConfigEntity) configEntity: PlaygroundConfigEntity;\n\n  /**\n   * 监听节点 transform\n   */\n  @observeEntityDatas(WorkflowNodeEntity, FlowNodeTransformData)\n  protected readonly nodeTransforms: FlowNodeTransformData[];\n\n  /**\n   * 按选中排序\n   * @private\n   */\n  protected nodeTransformsWithSort: FlowNodeTransformData[] = [];\n\n  autorun(): void {\n    const { activatedNode } = this.selectionService;\n    this.nodeTransformsWithSort = this.nodeTransforms\n      .filter(n => n.entity.id !== 'root')\n      .reverse() // 后创建的排在前面\n      .sort(n1 => (n1.entity === activatedNode ? -1 : 0));\n  }\n\n  /**\n   * 监听线条\n   */\n  @observeEntities(WorkflowLineEntity)\n  protected readonly lines: WorkflowLineEntity[];\n\n  /**\n   * 是否正在调整线条\n   * @protected\n   */\n  get isDrawing(): boolean {\n    return this.linesManager.isDrawing;\n  }\n\n  onReady(): void {\n    this.options = {\n      ...HoverLayerOptions.DEFAULT,\n      ...this.options,\n    };\n    this.toDispose.pushAll([\n      // 监听画布鼠标移动事件\n      this.listenPlaygroundEvent('mousemove', (e: MouseEvent) => {\n        this.hoverService.hoveredPos = this.config.getPosFromMouseEvent(e);\n        if (!this.isEnabled()) {\n          return;\n        }\n        if (!this.options.canHovered!(e, this.hoverService)) {\n          return;\n        }\n        const mousePos = this.config.getPosFromMouseEvent(e);\n        // 更新 hover 状态\n        this.updateHoveredState(mousePos, e?.target as HTMLElement);\n      }),\n      this.selectionService.onSelectionChanged(() => this.autorun()),\n      // 控制选中逻辑\n      this.listenPlaygroundEvent('mousedown', (e: MouseEvent): boolean | undefined => {\n        if (!this.isEnabled() || this.isDrawing) {\n          return undefined;\n        }\n        const { hoveredNode } = this.hoverService;\n        // 重置线条\n        if (hoveredNode && hoveredNode instanceof WorkflowLineEntity) {\n          this.dragService.resetLine(hoveredNode, e);\n          return true;\n        }\n        if (\n          hoveredNode &&\n          hoveredNode instanceof WorkflowPortEntity &&\n          hoveredNode.portType !== 'input' &&\n          !hoveredNode.disabled &&\n          e.button !== 1\n        ) {\n          e.stopPropagation();\n          e.preventDefault();\n          this.dragService.startDrawingLine(hoveredNode, e);\n          return true;\n        }\n        const mousePos = this.config.getPosFromMouseEvent(e);\n        const selectionBounds = getSelectionBounds(\n          this.selectionService.selection,\n          // 这里只考虑多选模式，单选模式已经下沉到 use-node-render 中\n          true,\n        );\n        if (selectionBounds.width > 0 && selectionBounds.contains(mousePos.x, mousePos.y)) {\n          /**\n           * 拖拽选择框\n           */\n          this.dragService.startDragSelectedNodes(e).then(dragSuccess => {\n            if (!dragSuccess) {\n              // 拖拽没有成功触发了点击\n              if (hoveredNode && hoveredNode instanceof WorkflowNodeEntity) {\n                if (e.metaKey || e.shiftKey || e.ctrlKey) {\n                  this.selectionService.toggleSelect(hoveredNode);\n                } else {\n                  this.selectionService.selectNode(hoveredNode);\n                }\n              } else {\n                this.selectionService.clear();\n              }\n            }\n          });\n          // 这里会组织触发 selector box\n          return true;\n        } else {\n          if (!hoveredNode) {\n            this.selectionService.clear();\n          }\n        }\n        return undefined;\n      }),\n    ]);\n  }\n\n  /**\n   * 更新 hoverd\n   * @param mousePos\n   */\n  updateHoveredState(mousePos: IPoint, target?: HTMLElement): void {\n    const { hoverService } = this;\n    const nodeTransforms = this.nodeTransformsWithSort;\n    // // 判断连接点是否 hover\n    const portHovered = this.linesManager.getPortFromMousePos(mousePos);\n\n    const lineDomNodes = this.playgroundNode.querySelectorAll(LINE_CLASS_NAME);\n    const checkTargetFromLine = [...lineDomNodes].some(lineDom =>\n      lineDom.contains(target as HTMLElement),\n    );\n    // 默认 只有 output 点位可以 hover\n    if (portHovered) {\n      // 输出点可以直接选中\n      if (portHovered.portType === 'output') {\n        hoverService.updateHoveredKey(portHovered.id);\n      } else if (checkTargetFromLine || target?.className?.includes?.(PORT_BG_CLASS_NAME)) {\n        // 输入点采用获取最接近的线条\n        const lineHovered = this.linesManager.getCloseInLineFromMousePos(mousePos);\n        if (lineHovered) {\n          this.updateHoveredKey(lineHovered.id);\n        }\n      }\n      return;\n    }\n\n    // Drawing 情况，不能选中节点和线条\n    if (this.isDrawing) {\n      return;\n    }\n\n    const nodeHovered = nodeTransforms.find((trans: FlowNodeTransformData) =>\n      trans.bounds.contains(mousePos.x, mousePos.y),\n    )?.entity as WorkflowNodeEntity;\n\n    // 判断当前鼠标位置所在元素是否在节点内部\n    const nodeDomNodes = this.playgroundNode.querySelectorAll(NODE_CLASS_NAME);\n    const checkTargetFromNode = [...nodeDomNodes].some(nodeDom =>\n      nodeDom.contains(target as HTMLElement),\n    );\n\n    if (nodeHovered || checkTargetFromNode) {\n      if (nodeHovered?.id) {\n        this.updateHoveredKey(nodeHovered.id);\n      }\n    }\n\n    const nodeInContainer = !!(nodeHovered?.parent && nodeHovered.parent.flowNodeType !== 'root');\n\n    // 获取最接近的线条\n    // 线条会相交需要获取最接近点位的线条，不能删除的线条不能被选中\n    const lineHovered = checkTargetFromLine\n      ? this.linesManager.getCloseInLineFromMousePos(mousePos)\n      : undefined;\n    const lineInContainer = !!lineHovered?.inContainer;\n\n    // 判断容器内节点是否 hover\n    if (nodeHovered && nodeInContainer) {\n      this.updateHoveredKey(nodeHovered.id);\n      return;\n    }\n    // 判断容器内线条是否 hover\n    if (lineHovered && lineInContainer) {\n      this.updateHoveredKey(lineHovered.id);\n      return;\n    }\n\n    // 判断节点是否 hover\n    if (nodeHovered) {\n      this.updateHoveredKey(nodeHovered.id);\n      return;\n    }\n    // 判断线条是否 hover\n    if (lineHovered) {\n      this.hoverService.updateHoveredKey(lineHovered.id);\n      return;\n    }\n\n    // 上述逻辑都未命中 则清空 hoverd\n    hoverService.clearHovered();\n\n    const currentState = this.editorStateConfig.getCurrentState();\n    const isMouseFriendly = currentState === EditorState.STATE_MOUSE_FRIENDLY_SELECT;\n\n    // 鼠标优先，并且不是按住 shift 键，更新为小手\n    if (isMouseFriendly && !this.editorStateConfig.isPressingShift) {\n      this.configEntity.updateCursor('grab');\n    }\n  }\n\n  updateHoveredKey(key: string): void {\n    // 鼠标优先交互模式，如果是 hover，需要将鼠标的小手去掉，还原鼠标原有样式\n    this.configEntity.updateCursor('default');\n    this.hoverService.updateHoveredKey(key);\n  }\n\n  /**\n   * 判断是否能够 hover\n   * @returns 是否能 hover\n   */\n  isEnabled(): boolean {\n    const currentState = this.editorStateConfig.getCurrentState();\n    // 选择框情况禁止 hover\n    return (\n      // 鼠标友好模式下，也需要支持 hover 效果，不然线条选择不到\n      // Coze 中没有使用该插件，需要在 workflow/render 包相应位置改动\n      (currentState === EditorState.STATE_SELECT ||\n        currentState === EditorState.STATE_MOUSE_FRIENDLY_SELECT) &&\n      !this.selectorBoxConfigEntity.isStart &&\n      !this.dragService.isDragging\n    );\n  }\n}\n","import { FlowNodeTransformData, FlowNodeEntity } from '@flowgram.ai/document';\nimport { type Entity } from '@flowgram.ai/core';\nimport { Rectangle } from '@flowgram.ai/utils';\n\nconst BOUNDS_PADDING = 2;\n\nexport function getSelectionBounds(\n  selection: Entity[],\n  ignoreOneSelect?: boolean, // 忽略单选\n): Rectangle {\n  const selectedNodes = selection.filter(node => node instanceof FlowNodeEntity);\n\n  if (!selectedNodes?.length) {\n    return Rectangle.EMPTY;\n  }\n\n  // 选中单个的时候不显示\n  if (\n    ignoreOneSelect &&\n    selectedNodes.length === 1 &&\n    // 选中的节点不包含多个子节点\n    (selectedNodes[0] as FlowNodeEntity).childrenLength <= 1\n  ) {\n    return Rectangle.EMPTY;\n  }\n\n  return Rectangle.enlarge(selectedNodes.map(n => n.getData(FlowNodeTransformData)!.bounds)).pad(\n    BOUNDS_PADDING,\n  );\n}\n"],"mappings":"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","names":["import_core","import_document","import_free_layout_core","HoverLayerOptions","lineHovered"]}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@flowgram.ai/free-hover-plugin",
+  "version": "0.1.0",
+  "license": "MIT",
+  "exports": {
+    "types": "./dist/index.d.ts",
+    "import": "./dist/esm/index.js",
+    "require": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "inversify": "^6.0.1",
+    "@flowgram.ai/core": "0.1.0",
+    "@flowgram.ai/free-layout-core": "0.1.0",
+    "@flowgram.ai/document": "0.1.0",
+    "@flowgram.ai/select-box-plugin": "0.1.0",
+    "@flowgram.ai/renderer": "0.1.0",
+    "@flowgram.ai/utils": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/bezier-js": "4.1.3",
+    "@types/lodash": "^4.14.137",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@vitest/coverage-v8": "^0.32.0",
+    "eslint": "^8.54.0",
+    "react": "^18",
+    "react-dom": "^18",
+    "tsup": "^8.0.1",
+    "typescript": "^5.0.4",
+    "vitest": "^0.34.6",
+    "@flowgram.ai/eslint-config": "0.1.0",
+    "@flowgram.ai/ts-config": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "scripts": {
+    "build": "npm run build:fast -- --dts-resolve",
+    "build:fast": "tsup src/index.ts --format cjs,esm --sourcemap --legacy-output",
+    "build:watch": "npm run build:fast -- --dts-resolve",
+    "clean": "rimraf dist",
+    "test": "exit 0",
+    "test:cov": "exit 0",
+    "ts-check": "tsc --noEmit",
+    "watch": "npm run build:fast -- --dts-resolve --watch --ignore-watch dist"
+  }
+}