@flowgram-vue/free-hover-plugin 0.2.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+Copyright (c) 2026 Crayon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,274 @@
+'use strict';
+
+var core = require('@flowgram-vue/core');
+var inversify = require('inversify');
+var renderer = require('@flowgram-vue/renderer');
+var freeLayoutCore = require('@flowgram-vue/free-layout-core');
+var document = require('@flowgram-vue/document');
+var utils = require('@flowgram-vue/utils');
+
+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;
+};
+var BOUNDS_PADDING = 2;
+function getSelectionBounds(selection, ignoreOneSelect = true) {
+  const selectedNodes = selection.filter((node) => node instanceof freeLayoutCore.WorkflowNodeEntity);
+  return selectedNodes.length > (ignoreOneSelect ? 1 : 0) ? utils.Rectangle.enlarge(selectedNodes.map((n) => n.getData(document.FlowNodeTransformData).bounds)).pad(
+    BOUNDS_PADDING
+  ) : utils.Rectangle.EMPTY;
+}
+
+// src/hover-layer.ts
+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 core.Layer {
+  constructor() {
+    super(...arguments);
+    /**
+     * 按选中排序
+     * @private
+     */
+    this.nodeTransformsWithSort = [];
+  }
+  autorun() {
+    const { activatedNode } = this.selectionService;
+    this.nodeTransformsWithSort = this.nodeTransforms.filter((n) => n.entity.id !== "root" && n.entity.flowNodeType !== document.FlowNodeBaseType.GROUP).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([
+      // 监听主动触发的 hover 事件
+      this.hoverService.onUpdateHoverPosition((hoverPosition) => {
+        const { position, target } = hoverPosition;
+        const canvasPosition = this.config.getPosFromMouseEvent({
+          clientX: position.x,
+          clientY: position.y
+        });
+        this.updateHoveredState(canvasPosition, target);
+      }),
+      // 监听画布鼠标移动事件
+      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("touchstart", (e) => {
+        if (!this.isEnabled() || this.isDrawing) {
+          return void 0;
+        }
+        return this.handleDragLine(e);
+      }),
+      // 控制选中逻辑
+      this.listenPlaygroundEvent("mousedown", (e) => {
+        if (!this.isEnabled() || this.isDrawing) {
+          return void 0;
+        }
+        const { hoveredNode } = this.hoverService;
+        const lineDrag = this.handleDragLine(e);
+        if (lineDrag) {
+          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 freeLayoutCore.WorkflowNodeEntity) {
+                if (e.shiftKey) {
+                  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 outputPortHovered = this.linesManager.getPortFromMousePos(mousePos, "output");
+    const inputPortHovered = this.linesManager.getPortFromMousePos(mousePos, "input");
+    const portHovered = outputPortHovered || inputPortHovered;
+    const lineDomNodes = this.playgroundNode.querySelectorAll(LINE_CLASS_NAME);
+    const checkTargetFromLine = [...lineDomNodes].some(
+      (lineDom) => lineDom.contains(target)
+    );
+    if (portHovered) {
+      if (this.document.options.twoWayConnection) {
+        hoverService.updateHoveredKey(portHovered.id);
+      } else {
+        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 lineHovered = checkTargetFromLine ? this.linesManager.getCloseInLineFromMousePos(mousePos) : void 0;
+    if (nodeHovered && lineHovered) {
+      const nodeStackIndex = nodeHovered.renderData.stackIndex;
+      const lineStackIndex = lineHovered.stackIndex;
+      if (nodeStackIndex > lineStackIndex) {
+        return this.updateHoveredKey(nodeHovered.id);
+      } else {
+        return this.updateHoveredKey(lineHovered.id);
+      }
+    }
+    if (nodeHovered) {
+      return this.updateHoveredKey(nodeHovered.id);
+    }
+    if (lineHovered) {
+      return this.updateHoveredKey(lineHovered.id);
+    }
+    hoverService.clearHovered();
+    const currentState = this.editorStateConfig.getCurrentState();
+    const isMouseFriendly = currentState === 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 === core.EditorState.STATE_SELECT || currentState === core.EditorState.STATE_MOUSE_FRIENDLY_SELECT) && !this.selectorBoxConfigEntity.isStart && !this.dragService.isDragging
+    );
+  }
+  handleDragLine(e) {
+    const { someHovered } = this.hoverService;
+    if (someHovered && someHovered instanceof freeLayoutCore.WorkflowLineEntity) {
+      this.dragService.resetLine(someHovered, e);
+      return true;
+    }
+    if (someHovered && someHovered instanceof freeLayoutCore.WorkflowPortEntity && !someHovered.disabled && e.button !== 1) {
+      e.stopPropagation();
+      e.preventDefault();
+      this.dragService.startDrawingLine(someHovered, e);
+      return true;
+    }
+  }
+};
+HoverLayer.type = "HoverLayer";
+__decorateClass([
+  inversify.inject(freeLayoutCore.WorkflowDocument)
+], HoverLayer.prototype, "document", 2);
+__decorateClass([
+  inversify.inject(freeLayoutCore.WorkflowSelectService)
+], HoverLayer.prototype, "selectionService", 2);
+__decorateClass([
+  inversify.inject(freeLayoutCore.WorkflowDragService)
+], HoverLayer.prototype, "dragService", 2);
+__decorateClass([
+  inversify.inject(freeLayoutCore.WorkflowHoverService)
+], HoverLayer.prototype, "hoverService", 2);
+__decorateClass([
+  inversify.inject(freeLayoutCore.WorkflowLinesManager)
+], HoverLayer.prototype, "linesManager", 2);
+__decorateClass([
+  core.observeEntity(core.EditorStateConfigEntity)
+], HoverLayer.prototype, "editorStateConfig", 2);
+__decorateClass([
+  core.observeEntity(renderer.SelectorBoxConfigEntity)
+], HoverLayer.prototype, "selectorBoxConfigEntity", 2);
+__decorateClass([
+  inversify.inject(core.PlaygroundConfigEntity)
+], HoverLayer.prototype, "configEntity", 2);
+__decorateClass([
+  core.observeEntityDatas(freeLayoutCore.WorkflowNodeEntity, document.FlowNodeTransformData)
+], HoverLayer.prototype, "nodeTransforms", 2);
+__decorateClass([
+  core.observeEntities(freeLayoutCore.WorkflowLineEntity)
+], HoverLayer.prototype, "lines", 2);
+HoverLayer = __decorateClass([
+  inversify.injectable()
+], HoverLayer);
+
+// src/create-free-hover-plugin.ts
+var createFreeHoverPlugin = core.definePluginCreator({
+  onInit(ctx) {
+    ctx.playground.registerLayer(HoverLayer);
+  }
+});
+
+exports.createFreeHoverPlugin = createFreeHoverPlugin;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/selection-utils.ts","../src/hover-layer.ts","../src/create-free-hover-plugin.ts"],"names":["WorkflowNodeEntity","Rectangle","FlowNodeTransformData","HoverLayerOptions","Layer","FlowNodeBaseType","lineHovered","EditorState","WorkflowLineEntity","WorkflowPortEntity","inject","WorkflowDocument","WorkflowSelectService","WorkflowDragService","WorkflowHoverService","WorkflowLinesManager","observeEntity","EditorStateConfigEntity","SelectorBoxConfigEntity","PlaygroundConfigEntity","observeEntityDatas","observeEntities","injectable","definePluginCreator"],"mappings":"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","file":"index.cjs","sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { Rectangle } from '@flowgram-vue/utils';\nimport { WorkflowNodeEntity } from '@flowgram-vue/free-layout-core';\nimport { FlowNodeTransformData } from '@flowgram-vue/document';\nimport { type Entity } from '@flowgram-vue/core';\n\nconst BOUNDS_PADDING = 2;\n\nexport function getSelectionBounds(\n  selection: Entity[],\n  ignoreOneSelect: boolean = true // 忽略单选\n): Rectangle {\n  const selectedNodes = selection.filter((node) => node instanceof WorkflowNodeEntity);\n\n  // 选中单个的时候不显示\n  return selectedNodes.length > (ignoreOneSelect ? 1 : 0)\n    ? Rectangle.enlarge(selectedNodes.map((n) => n.getData(FlowNodeTransformData)!.bounds)).pad(\n        BOUNDS_PADDING\n      )\n    : Rectangle.EMPTY;\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\n/* eslint-disable complexity */\nimport { inject, injectable } from 'inversify';\nimport { type IPoint } from '@flowgram-vue/utils';\nimport { SelectorBoxConfigEntity } from '@flowgram-vue/renderer';\nimport {\n  WorkflowDocument,\n  WorkflowDragService,\n  WorkflowHoverService,\n  WorkflowLineEntity,\n  WorkflowLinesManager,\n  WorkflowNodeEntity,\n  WorkflowSelectService,\n} from '@flowgram-vue/free-layout-core';\nimport { WorkflowPortEntity } from '@flowgram-vue/free-layout-core';\nimport { FlowNodeBaseType, FlowNodeTransformData } from '@flowgram-vue/document';\nimport {\n  EditorState,\n  EditorStateConfigEntity,\n  Layer,\n  PlaygroundConfigEntity,\n  observeEntities,\n  observeEntity,\n  observeEntityDatas,\n  type LayerOptions,\n} from '@flowgram-vue/core';\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.entity.flowNodeType !== FlowNodeBaseType.GROUP)\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      // 监听主动触发的 hover 事件\n      this.hoverService.onUpdateHoverPosition((hoverPosition) => {\n        const { position, target } = hoverPosition;\n        const canvasPosition = this.config.getPosFromMouseEvent({\n          clientX: position.x,\n          clientY: position.y,\n        });\n        this.updateHoveredState(canvasPosition, target);\n      }),\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('touchstart', (e: MouseEvent): boolean | undefined => {\n        if (!this.isEnabled() || this.isDrawing) {\n          return undefined;\n        }\n        return this.handleDragLine(e);\n      }),\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        const lineDrag = this.handleDragLine(e);\n        if (lineDrag) {\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                // 追加选择\n                if (e.shiftKey) {\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    const outputPortHovered = this.linesManager.getPortFromMousePos(mousePos, 'output');\n    const inputPortHovered = this.linesManager.getPortFromMousePos(mousePos, 'input');\n    // 在两个端口叠加情况，优先使用 outputPort\n    const portHovered = outputPortHovered || inputPortHovered;\n\n    const lineDomNodes = this.playgroundNode.querySelectorAll(LINE_CLASS_NAME);\n    const checkTargetFromLine = [...lineDomNodes].some((lineDom) =>\n      lineDom.contains(target as HTMLElement)\n    );\n    if (portHovered) {\n      if (this.document.options.twoWayConnection) {\n        hoverService.updateHoveredKey(portHovered.id);\n      } else {\n        // 默认 只有 output 点位可以 hover\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      }\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    // 获取最接近的线条\n    // 线条会相交需要获取最接近点位的线条，不能删除的线条不能被选中\n    const lineHovered = checkTargetFromLine\n      ? this.linesManager.getCloseInLineFromMousePos(mousePos)\n      : undefined;\n\n    if (nodeHovered && lineHovered) {\n      const nodeStackIndex = nodeHovered.renderData.stackIndex;\n      const lineStackIndex = lineHovered.stackIndex;\n      if (nodeStackIndex > lineStackIndex) {\n        return this.updateHoveredKey(nodeHovered.id);\n      } else {\n        return this.updateHoveredKey(lineHovered.id);\n      }\n    }\n\n    // 判断节点是否 hover\n    if (nodeHovered) {\n      return this.updateHoveredKey(nodeHovered.id);\n    }\n    // 判断线条是否 hover\n    if (lineHovered) {\n      return this.updateHoveredKey(lineHovered.id);\n    }\n\n    // 上述逻辑都未命中 则清空 hovered\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  private handleDragLine(e: MouseEvent): boolean | undefined {\n    const { someHovered } = this.hoverService;\n    // 重置线条\n    if (someHovered && someHovered instanceof WorkflowLineEntity) {\n      this.dragService.resetLine(someHovered, e);\n      return true;\n    }\n    if (\n      someHovered &&\n      someHovered instanceof WorkflowPortEntity &&\n      !someHovered.disabled &&\n      e.button !== 1\n    ) {\n      e.stopPropagation();\n      e.preventDefault();\n      this.dragService.startDrawingLine(someHovered, e);\n      return true;\n    }\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { definePluginCreator } from '@flowgram-vue/core';\n\nimport { HoverLayer } from './hover-layer';\n\nexport const createFreeHoverPlugin = definePluginCreator({\n  onInit(ctx): void {\n    ctx.playground.registerLayer(HoverLayer);\n  },\n});\n"]}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import * as _flowgram_vue_core from '@flowgram-vue/core';
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+declare const createFreeHoverPlugin: _flowgram_vue_core.PluginCreator<unknown>;
+
+export { createFreeHoverPlugin };

package/dist/index.js

@@ -0,0 +1,272 @@
+import { observeEntity, EditorStateConfigEntity, PlaygroundConfigEntity, observeEntityDatas, observeEntities, definePluginCreator, Layer, EditorState } from '@flowgram-vue/core';
+import { inject, injectable } from 'inversify';
+import { SelectorBoxConfigEntity } from '@flowgram-vue/renderer';
+import { WorkflowDocument, WorkflowSelectService, WorkflowDragService, WorkflowHoverService, WorkflowLinesManager, WorkflowNodeEntity, WorkflowLineEntity, WorkflowPortEntity } from '@flowgram-vue/free-layout-core';
+import { FlowNodeTransformData, FlowNodeBaseType } from '@flowgram-vue/document';
+import { Rectangle } from '@flowgram-vue/utils';
+
+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;
+};
+var BOUNDS_PADDING = 2;
+function getSelectionBounds(selection, ignoreOneSelect = true) {
+  const selectedNodes = selection.filter((node) => node instanceof WorkflowNodeEntity);
+  return selectedNodes.length > (ignoreOneSelect ? 1 : 0) ? Rectangle.enlarge(selectedNodes.map((n) => n.getData(FlowNodeTransformData).bounds)).pad(
+    BOUNDS_PADDING
+  ) : Rectangle.EMPTY;
+}
+
+// src/hover-layer.ts
+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" && n.entity.flowNodeType !== FlowNodeBaseType.GROUP).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([
+      // 监听主动触发的 hover 事件
+      this.hoverService.onUpdateHoverPosition((hoverPosition) => {
+        const { position, target } = hoverPosition;
+        const canvasPosition = this.config.getPosFromMouseEvent({
+          clientX: position.x,
+          clientY: position.y
+        });
+        this.updateHoveredState(canvasPosition, target);
+      }),
+      // 监听画布鼠标移动事件
+      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("touchstart", (e) => {
+        if (!this.isEnabled() || this.isDrawing) {
+          return void 0;
+        }
+        return this.handleDragLine(e);
+      }),
+      // 控制选中逻辑
+      this.listenPlaygroundEvent("mousedown", (e) => {
+        if (!this.isEnabled() || this.isDrawing) {
+          return void 0;
+        }
+        const { hoveredNode } = this.hoverService;
+        const lineDrag = this.handleDragLine(e);
+        if (lineDrag) {
+          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.shiftKey) {
+                  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 outputPortHovered = this.linesManager.getPortFromMousePos(mousePos, "output");
+    const inputPortHovered = this.linesManager.getPortFromMousePos(mousePos, "input");
+    const portHovered = outputPortHovered || inputPortHovered;
+    const lineDomNodes = this.playgroundNode.querySelectorAll(LINE_CLASS_NAME);
+    const checkTargetFromLine = [...lineDomNodes].some(
+      (lineDom) => lineDom.contains(target)
+    );
+    if (portHovered) {
+      if (this.document.options.twoWayConnection) {
+        hoverService.updateHoveredKey(portHovered.id);
+      } else {
+        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 lineHovered = checkTargetFromLine ? this.linesManager.getCloseInLineFromMousePos(mousePos) : void 0;
+    if (nodeHovered && lineHovered) {
+      const nodeStackIndex = nodeHovered.renderData.stackIndex;
+      const lineStackIndex = lineHovered.stackIndex;
+      if (nodeStackIndex > lineStackIndex) {
+        return this.updateHoveredKey(nodeHovered.id);
+      } else {
+        return this.updateHoveredKey(lineHovered.id);
+      }
+    }
+    if (nodeHovered) {
+      return this.updateHoveredKey(nodeHovered.id);
+    }
+    if (lineHovered) {
+      return this.updateHoveredKey(lineHovered.id);
+    }
+    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
+    );
+  }
+  handleDragLine(e) {
+    const { someHovered } = this.hoverService;
+    if (someHovered && someHovered instanceof WorkflowLineEntity) {
+      this.dragService.resetLine(someHovered, e);
+      return true;
+    }
+    if (someHovered && someHovered instanceof WorkflowPortEntity && !someHovered.disabled && e.button !== 1) {
+      e.stopPropagation();
+      e.preventDefault();
+      this.dragService.startDrawingLine(someHovered, e);
+      return true;
+    }
+  }
+};
+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, FlowNodeTransformData)
+], 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
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/selection-utils.ts","../src/hover-layer.ts","../src/create-free-hover-plugin.ts"],"names":["HoverLayerOptions","WorkflowNodeEntity","lineHovered","FlowNodeTransformData"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { Rectangle } from '@flowgram-vue/utils';\nimport { WorkflowNodeEntity } from '@flowgram-vue/free-layout-core';\nimport { FlowNodeTransformData } from '@flowgram-vue/document';\nimport { type Entity } from '@flowgram-vue/core';\n\nconst BOUNDS_PADDING = 2;\n\nexport function getSelectionBounds(\n  selection: Entity[],\n  ignoreOneSelect: boolean = true // 忽略单选\n): Rectangle {\n  const selectedNodes = selection.filter((node) => node instanceof WorkflowNodeEntity);\n\n  // 选中单个的时候不显示\n  return selectedNodes.length > (ignoreOneSelect ? 1 : 0)\n    ? Rectangle.enlarge(selectedNodes.map((n) => n.getData(FlowNodeTransformData)!.bounds)).pad(\n        BOUNDS_PADDING\n      )\n    : Rectangle.EMPTY;\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\n/* eslint-disable complexity */\nimport { inject, injectable } from 'inversify';\nimport { type IPoint } from '@flowgram-vue/utils';\nimport { SelectorBoxConfigEntity } from '@flowgram-vue/renderer';\nimport {\n  WorkflowDocument,\n  WorkflowDragService,\n  WorkflowHoverService,\n  WorkflowLineEntity,\n  WorkflowLinesManager,\n  WorkflowNodeEntity,\n  WorkflowSelectService,\n} from '@flowgram-vue/free-layout-core';\nimport { WorkflowPortEntity } from '@flowgram-vue/free-layout-core';\nimport { FlowNodeBaseType, FlowNodeTransformData } from '@flowgram-vue/document';\nimport {\n  EditorState,\n  EditorStateConfigEntity,\n  Layer,\n  PlaygroundConfigEntity,\n  observeEntities,\n  observeEntity,\n  observeEntityDatas,\n  type LayerOptions,\n} from '@flowgram-vue/core';\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.entity.flowNodeType !== FlowNodeBaseType.GROUP)\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      // 监听主动触发的 hover 事件\n      this.hoverService.onUpdateHoverPosition((hoverPosition) => {\n        const { position, target } = hoverPosition;\n        const canvasPosition = this.config.getPosFromMouseEvent({\n          clientX: position.x,\n          clientY: position.y,\n        });\n        this.updateHoveredState(canvasPosition, target);\n      }),\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('touchstart', (e: MouseEvent): boolean | undefined => {\n        if (!this.isEnabled() || this.isDrawing) {\n          return undefined;\n        }\n        return this.handleDragLine(e);\n      }),\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        const lineDrag = this.handleDragLine(e);\n        if (lineDrag) {\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                // 追加选择\n                if (e.shiftKey) {\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    const outputPortHovered = this.linesManager.getPortFromMousePos(mousePos, 'output');\n    const inputPortHovered = this.linesManager.getPortFromMousePos(mousePos, 'input');\n    // 在两个端口叠加情况，优先使用 outputPort\n    const portHovered = outputPortHovered || inputPortHovered;\n\n    const lineDomNodes = this.playgroundNode.querySelectorAll(LINE_CLASS_NAME);\n    const checkTargetFromLine = [...lineDomNodes].some((lineDom) =>\n      lineDom.contains(target as HTMLElement)\n    );\n    if (portHovered) {\n      if (this.document.options.twoWayConnection) {\n        hoverService.updateHoveredKey(portHovered.id);\n      } else {\n        // 默认 只有 output 点位可以 hover\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      }\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    // 获取最接近的线条\n    // 线条会相交需要获取最接近点位的线条，不能删除的线条不能被选中\n    const lineHovered = checkTargetFromLine\n      ? this.linesManager.getCloseInLineFromMousePos(mousePos)\n      : undefined;\n\n    if (nodeHovered && lineHovered) {\n      const nodeStackIndex = nodeHovered.renderData.stackIndex;\n      const lineStackIndex = lineHovered.stackIndex;\n      if (nodeStackIndex > lineStackIndex) {\n        return this.updateHoveredKey(nodeHovered.id);\n      } else {\n        return this.updateHoveredKey(lineHovered.id);\n      }\n    }\n\n    // 判断节点是否 hover\n    if (nodeHovered) {\n      return this.updateHoveredKey(nodeHovered.id);\n    }\n    // 判断线条是否 hover\n    if (lineHovered) {\n      return this.updateHoveredKey(lineHovered.id);\n    }\n\n    // 上述逻辑都未命中 则清空 hovered\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  private handleDragLine(e: MouseEvent): boolean | undefined {\n    const { someHovered } = this.hoverService;\n    // 重置线条\n    if (someHovered && someHovered instanceof WorkflowLineEntity) {\n      this.dragService.resetLine(someHovered, e);\n      return true;\n    }\n    if (\n      someHovered &&\n      someHovered instanceof WorkflowPortEntity &&\n      !someHovered.disabled &&\n      e.button !== 1\n    ) {\n      e.stopPropagation();\n      e.preventDefault();\n      this.dragService.startDrawingLine(someHovered, e);\n      return true;\n    }\n  }\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { definePluginCreator } from '@flowgram-vue/core';\n\nimport { HoverLayer } from './hover-layer';\n\nexport const createFreeHoverPlugin = definePluginCreator({\n  onInit(ctx): void {\n    ctx.playground.registerLayer(HoverLayer);\n  },\n});\n"]}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@flowgram-vue/free-hover-plugin",
+  "version": "0.2.0",
+  "type": "module",
+  "license": "MIT",
+  "homepage": "https://flowgram.ai/",
+  "repository": "https://github.com/Crayon-hua/flowgram-vue",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "dependencies": {
+    "inversify": "^6.0.1",
+    "reflect-metadata": "~0.2.2",
+    "@flowgram-vue/core": "0.2.0",
+    "@flowgram-vue/document": "0.2.0",
+    "@flowgram-vue/renderer": "0.2.0",
+    "@flowgram-vue/utils": "0.2.0",
+    "@flowgram-vue/free-layout-core": "0.2.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@types/bezier-js": "4.1.3",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^20",
+    "eslint": "^9.0.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.18",
+    "@flowgram-vue/eslint-config": "0.2.0",
+    "@flowgram-vue/ts-config": "0.2.0",
+    "@flowgram-vue/build-config": "0.2.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "flowgram-build",
+    "test": "exit 0",
+    "test:cov": "exit 0",
+    "lint": "eslint .",
+    "ts-check": "tsc --noEmit",
+    "build:fast": "flowgram-build --fast",
+    "build:watch": "flowgram-build --watch"
+  }
+}

package/src/create-free-hover-plugin.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { definePluginCreator } from '@flowgram-vue/core';
+
+import { HoverLayer } from './hover-layer';
+
+export const createFreeHoverPlugin = definePluginCreator({
+  onInit(ctx): void {
+    ctx.playground.registerLayer(HoverLayer);
+  },
+});

package/src/env.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<object, object, unknown>;
+  export default component;
+}

package/src/hover-layer.ts

@@ -0,0 +1,323 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/* eslint-disable complexity */
+import { inject, injectable } from 'inversify';
+import { type IPoint } from '@flowgram-vue/utils';
+import { SelectorBoxConfigEntity } from '@flowgram-vue/renderer';
+import {
+  WorkflowDocument,
+  WorkflowDragService,
+  WorkflowHoverService,
+  WorkflowLineEntity,
+  WorkflowLinesManager,
+  WorkflowNodeEntity,
+  WorkflowSelectService,
+} from '@flowgram-vue/free-layout-core';
+import { WorkflowPortEntity } from '@flowgram-vue/free-layout-core';
+import { FlowNodeBaseType, FlowNodeTransformData } from '@flowgram-vue/document';
+import {
+  EditorState,
+  EditorStateConfigEntity,
+  Layer,
+  PlaygroundConfigEntity,
+  observeEntities,
+  observeEntity,
+  observeEntityDatas,
+  type LayerOptions,
+} from '@flowgram-vue/core';
+
+import { getSelectionBounds } from './selection-utils';
+const PORT_BG_CLASS_NAME = 'workflow-port-bg';
+
+export interface HoverLayerOptions extends LayerOptions {
+  canHovered?: (e: MouseEvent, service: WorkflowHoverService) => boolean;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace HoverLayerOptions {
+  export const DEFAULT: HoverLayerOptions = {
+    canHovered: () => true,
+  };
+}
+
+const LINE_CLASS_NAME = '.gedit-flow-activity-line';
+const NODE_CLASS_NAME = '.gedit-flow-activity-node';
+
+@injectable()
+export class HoverLayer extends Layer<HoverLayerOptions> {
+  static type = 'HoverLayer';
+
+  @inject(WorkflowDocument) document: WorkflowDocument;
+
+  @inject(WorkflowSelectService) selectionService: WorkflowSelectService;
+
+  @inject(WorkflowDragService) dragService: WorkflowDragService;
+
+  @inject(WorkflowHoverService) hoverService: WorkflowHoverService;
+
+  @inject(WorkflowLinesManager)
+  linesManager: WorkflowLinesManager;
+
+  @observeEntity(EditorStateConfigEntity)
+  protected editorStateConfig: EditorStateConfigEntity;
+
+  @observeEntity(SelectorBoxConfigEntity)
+  protected selectorBoxConfigEntity: SelectorBoxConfigEntity;
+
+  @inject(PlaygroundConfigEntity) configEntity: PlaygroundConfigEntity;
+
+  /**
+   * 监听节点 transform
+   */
+  @observeEntityDatas(WorkflowNodeEntity, FlowNodeTransformData)
+  protected readonly nodeTransforms: FlowNodeTransformData[];
+
+  /**
+   * 按选中排序
+   * @private
+   */
+  protected nodeTransformsWithSort: FlowNodeTransformData[] = [];
+
+  autorun(): void {
+    const { activatedNode } = this.selectionService;
+    this.nodeTransformsWithSort = this.nodeTransforms
+      .filter((n) => n.entity.id !== 'root' && n.entity.flowNodeType !== FlowNodeBaseType.GROUP)
+      .reverse() // 后创建的排在前面
+      .sort((n1) => (n1.entity === activatedNode ? -1 : 0));
+  }
+
+  /**
+   * 监听线条
+   */
+  @observeEntities(WorkflowLineEntity)
+  protected readonly lines: WorkflowLineEntity[];
+
+  /**
+   * 是否正在调整线条
+   * @protected
+   */
+  get isDrawing(): boolean {
+    return this.linesManager.isDrawing;
+  }
+
+  onReady(): void {
+    this.options = {
+      ...HoverLayerOptions.DEFAULT,
+      ...this.options,
+    };
+    this.toDispose.pushAll([
+      // 监听主动触发的 hover 事件
+      this.hoverService.onUpdateHoverPosition((hoverPosition) => {
+        const { position, target } = hoverPosition;
+        const canvasPosition = this.config.getPosFromMouseEvent({
+          clientX: position.x,
+          clientY: position.y,
+        });
+        this.updateHoveredState(canvasPosition, target);
+      }),
+      // 监听画布鼠标移动事件
+      this.listenPlaygroundEvent('mousemove', (e: MouseEvent) => {
+        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);
+        // 更新 hover 状态
+        this.updateHoveredState(mousePos, e?.target as HTMLElement);
+      }),
+      this.selectionService.onSelectionChanged(() => this.autorun()),
+      // 控制触控
+      this.listenPlaygroundEvent('touchstart', (e: MouseEvent): boolean | undefined => {
+        if (!this.isEnabled() || this.isDrawing) {
+          return undefined;
+        }
+        return this.handleDragLine(e);
+      }),
+      // 控制选中逻辑
+      this.listenPlaygroundEvent('mousedown', (e: MouseEvent): boolean | undefined => {
+        if (!this.isEnabled() || this.isDrawing) {
+          return undefined;
+        }
+        const { hoveredNode } = this.hoverService;
+        const lineDrag = this.handleDragLine(e);
+        if (lineDrag) {
+          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.shiftKey) {
+                  this.selectionService.toggleSelect(hoveredNode);
+                } else {
+                  this.selectionService.selectNode(hoveredNode);
+                }
+              } else {
+                this.selectionService.clear();
+              }
+            }
+          });
+          // 这里会组织触发 selector box
+          return true;
+        } else {
+          if (!hoveredNode) {
+            this.selectionService.clear();
+          }
+        }
+        return undefined;
+      }),
+    ]);
+  }
+
+  /**
+   * 更新 hoverd
+   * @param mousePos
+   */
+  updateHoveredState(mousePos: IPoint, target?: HTMLElement): void {
+    const { hoverService } = this;
+    const nodeTransforms = this.nodeTransformsWithSort;
+    const outputPortHovered = this.linesManager.getPortFromMousePos(mousePos, 'output');
+    const inputPortHovered = this.linesManager.getPortFromMousePos(mousePos, 'input');
+    // 在两个端口叠加情况，优先使用 outputPort
+    const portHovered = outputPortHovered || inputPortHovered;
+
+    const lineDomNodes = this.playgroundNode.querySelectorAll(LINE_CLASS_NAME);
+    const checkTargetFromLine = [...lineDomNodes].some((lineDom) =>
+      lineDom.contains(target as HTMLElement)
+    );
+    if (portHovered) {
+      if (this.document.options.twoWayConnection) {
+        hoverService.updateHoveredKey(portHovered.id);
+      } else {
+        // 默认 只有 output 点位可以 hover
+        if (portHovered.portType === 'output') {
+          hoverService.updateHoveredKey(portHovered.id);
+        } else if (checkTargetFromLine || target?.className?.includes?.(PORT_BG_CLASS_NAME)) {
+          // 输入点采用获取最接近的线条
+          const lineHovered = this.linesManager.getCloseInLineFromMousePos(mousePos);
+          if (lineHovered) {
+            this.updateHoveredKey(lineHovered.id);
+          }
+        }
+      }
+      return;
+    }
+
+    // Drawing 情况，不能选中节点和线条
+    if (this.isDrawing) {
+      return;
+    }
+
+    const nodeHovered = nodeTransforms.find((trans: FlowNodeTransformData) =>
+      trans.bounds.contains(mousePos.x, mousePos.y)
+    )?.entity as WorkflowNodeEntity;
+
+    // 判断当前鼠标位置所在元素是否在节点内部
+    const nodeDomNodes = this.playgroundNode.querySelectorAll(NODE_CLASS_NAME);
+    const checkTargetFromNode = [...nodeDomNodes].some((nodeDom) =>
+      nodeDom.contains(target as HTMLElement)
+    );
+
+    if (nodeHovered || checkTargetFromNode) {
+      if (nodeHovered?.id) {
+        this.updateHoveredKey(nodeHovered.id);
+      }
+    }
+
+    // 获取最接近的线条
+    // 线条会相交需要获取最接近点位的线条，不能删除的线条不能被选中
+    const lineHovered = checkTargetFromLine
+      ? this.linesManager.getCloseInLineFromMousePos(mousePos)
+      : undefined;
+
+    if (nodeHovered && lineHovered) {
+      const nodeStackIndex = nodeHovered.renderData.stackIndex;
+      const lineStackIndex = lineHovered.stackIndex;
+      if (nodeStackIndex > lineStackIndex) {
+        return this.updateHoveredKey(nodeHovered.id);
+      } else {
+        return this.updateHoveredKey(lineHovered.id);
+      }
+    }
+
+    // 判断节点是否 hover
+    if (nodeHovered) {
+      return this.updateHoveredKey(nodeHovered.id);
+    }
+    // 判断线条是否 hover
+    if (lineHovered) {
+      return this.updateHoveredKey(lineHovered.id);
+    }
+
+    // 上述逻辑都未命中 则清空 hovered
+    hoverService.clearHovered();
+
+    const currentState = this.editorStateConfig.getCurrentState();
+    const isMouseFriendly = currentState === EditorState.STATE_MOUSE_FRIENDLY_SELECT;
+
+    // 鼠标优先，并且不是按住 shift 键，更新为小手
+    if (isMouseFriendly && !this.editorStateConfig.isPressingShift) {
+      this.configEntity.updateCursor('grab');
+    }
+  }
+
+  updateHoveredKey(key: string): void {
+    // 鼠标优先交互模式，如果是 hover，需要将鼠标的小手去掉，还原鼠标原有样式
+    this.configEntity.updateCursor('default');
+    this.hoverService.updateHoveredKey(key);
+  }
+
+  /**
+   * 判断是否能够 hover
+   * @returns 是否能 hover
+   */
+  isEnabled(): boolean {
+    const currentState = this.editorStateConfig.getCurrentState();
+    // 选择框情况禁止 hover
+    return (
+      // 鼠标友好模式下，也需要支持 hover 效果，不然线条选择不到
+      // Coze 中没有使用该插件，需要在 workflow/render 包相应位置改动
+      (currentState === EditorState.STATE_SELECT ||
+        currentState === EditorState.STATE_MOUSE_FRIENDLY_SELECT) &&
+      !this.selectorBoxConfigEntity.isStart &&
+      !this.dragService.isDragging
+    );
+  }
+
+  private handleDragLine(e: MouseEvent): boolean | undefined {
+    const { someHovered } = this.hoverService;
+    // 重置线条
+    if (someHovered && someHovered instanceof WorkflowLineEntity) {
+      this.dragService.resetLine(someHovered, e);
+      return true;
+    }
+    if (
+      someHovered &&
+      someHovered instanceof WorkflowPortEntity &&
+      !someHovered.disabled &&
+      e.button !== 1
+    ) {
+      e.stopPropagation();
+      e.preventDefault();
+      this.dragService.startDrawingLine(someHovered, e);
+      return true;
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './create-free-hover-plugin';

package/src/selection-utils.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Rectangle } from '@flowgram-vue/utils';
+import { WorkflowNodeEntity } from '@flowgram-vue/free-layout-core';
+import { FlowNodeTransformData } from '@flowgram-vue/document';
+import { type Entity } from '@flowgram-vue/core';
+
+const BOUNDS_PADDING = 2;
+
+export function getSelectionBounds(
+  selection: Entity[],
+  ignoreOneSelect: boolean = true // 忽略单选
+): Rectangle {
+  const selectedNodes = selection.filter((node) => node instanceof WorkflowNodeEntity);
+
+  // 选中单个的时候不显示
+  return selectedNodes.length > (ignoreOneSelect ? 1 : 0)
+    ? Rectangle.enlarge(selectedNodes.map((n) => n.getData(FlowNodeTransformData)!.bounds)).pad(
+        BOUNDS_PADDING
+      )
+    : Rectangle.EMPTY;
+}