@flowgram-vue/free-layout-core 0.2.0

package/dist/typings.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+// src/typings/workflow-json.ts
+var WorkflowContentChangeType = /* @__PURE__ */ ((WorkflowContentChangeType2) => {
+  WorkflowContentChangeType2["ADD_NODE"] = "ADD_NODE";
+  WorkflowContentChangeType2["DELETE_NODE"] = "DELETE_NODE";
+  WorkflowContentChangeType2["MOVE_NODE"] = "MOVE_NODE";
+  WorkflowContentChangeType2["NODE_DATA_CHANGE"] = "NODE_DATA_CHANGE";
+  WorkflowContentChangeType2["ADD_LINE"] = "ADD_LINE";
+  WorkflowContentChangeType2["DELETE_LINE"] = "DELETE_LINE";
+  WorkflowContentChangeType2["LINE_DATA_CHANGE"] = "LINE_DATA_CHANGE";
+  WorkflowContentChangeType2["META_CHANGE"] = "META_CHANGE";
+  return WorkflowContentChangeType2;
+})(WorkflowContentChangeType || {});
+
+// src/typings/workflow-line.ts
+var LineType = /* @__PURE__ */ ((LineType2) => {
+  LineType2[LineType2["BEZIER"] = 0] = "BEZIER";
+  LineType2[LineType2["LINE_CHART"] = 1] = "LINE_CHART";
+  LineType2[LineType2["STRAIGHT"] = 2] = "STRAIGHT";
+  return LineType2;
+})(LineType || {});
+var LineColors = /* @__PURE__ */ ((LineColors2) => {
+  LineColors2["HIDDEN"] = "var(--g-workflow-line-color-hidden,transparent)";
+  LineColors2["DEFUALT"] = "var(--g-workflow-line-color-default,#4d53e8)";
+  LineColors2["DRAWING"] = "var(--g-workflow-line-color-drawing, #5DD6E3)";
+  LineColors2["HOVER"] = "var(--g-workflow-line-color-hover,#37d0ff)";
+  LineColors2["SELECTED"] = "var(--g-workflow-line-color-selected,#37d0ff)";
+  LineColors2["ERROR"] = "var(--g-workflow-line-color-error,red)";
+  LineColors2["FLOWING"] = "var(--g-workflow-line-color-flowing,#4d53e8)";
+  return LineColors2;
+})(LineColors || {});
+
+// src/typings/workflow-operation.ts
+var WorkflowOperationBaseService = /* @__PURE__ */ Symbol("WorkflowOperationBaseService");
+
+// src/typings/index.ts
+var URLParams = /* @__PURE__ */ Symbol("");
+
+exports.LineColors = LineColors;
+exports.LineType = LineType;
+exports.URLParams = URLParams;
+exports.WorkflowContentChangeType = WorkflowContentChangeType;
+exports.WorkflowOperationBaseService = WorkflowOperationBaseService;
+//# sourceMappingURL=typings.cjs.map
+//# sourceMappingURL=typings.cjs.map

package/dist/typings.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/typings/workflow-json.ts","../src/typings/workflow-line.ts","../src/typings/workflow-operation.ts","../src/typings/index.ts"],"names":["WorkflowContentChangeType","LineType","LineColors"],"mappings":";;;AAcO,IAAK,yBAAA,qBAAAA,0BAAAA,KAAL;AAIL,EAAAA,2BAAA,UAAA,CAAA,GAAW,UAAA;AAIX,EAAAA,2BAAA,aAAA,CAAA,GAAc,aAAA;AAId,EAAAA,2BAAA,WAAA,CAAA,GAAY,WAAA;AAIZ,EAAAA,2BAAA,kBAAA,CAAA,GAAmB,kBAAA;AAInB,EAAAA,2BAAA,UAAA,CAAA,GAAW,UAAA;AAIX,EAAAA,2BAAA,aAAA,CAAA,GAAc,aAAA;AAId,EAAAA,2BAAA,kBAAA,CAAA,GAAmB,kBAAA;AAInB,EAAAA,2BAAA,aAAA,CAAA,GAAc,aAAA;AAhCJ,EAAA,OAAAA,0BAAAA;AAAA,CAAA,EAAA,yBAAA,IAAA,EAAA;;;ACLL,IAAK,QAAA,qBAAAC,SAAAA,KAAL;AACL,EAAAA,SAAAA,CAAAA,SAAAA,CAAA,QAAA,CAAA,GAAA,CAAA,CAAA,GAAA,QAAA;AACA,EAAAA,SAAAA,CAAAA,SAAAA,CAAA,YAAA,CAAA,GAAA,CAAA,CAAA,GAAA,YAAA;AACA,EAAAA,SAAAA,CAAAA,SAAAA,CAAA,UAAA,CAAA,GAAA,CAAA,CAAA,GAAA,UAAA;AAHU,EAAA,OAAAA,SAAAA;AAAA,CAAA,EAAA,QAAA,IAAA,EAAA;AA+BL,IAAK,UAAA,qBAAAC,WAAAA,KAAL;AACL,EAAAA,YAAA,QAAA,CAAA,GAAS,iDAAA;AACT,EAAAA,YAAA,SAAA,CAAA,GAAU,8CAAA;AACV,EAAAA,YAAA,SAAA,CAAA,GAAU,+CAAA;AACV,EAAAA,YAAA,OAAA,CAAA,GAAQ,4CAAA;AACR,EAAAA,YAAA,UAAA,CAAA,GAAW,+CAAA;AACX,EAAAA,YAAA,OAAA,CAAA,GAAQ,wCAAA;AACR,EAAAA,YAAA,SAAA,CAAA,GAAU,8CAAA;AAPA,EAAA,OAAAA,WAAAA;AAAA,CAAA,EAAA,UAAA,IAAA,EAAA;;;ACDL,IAAM,4BAAA,0BAAsC,8BAA8B;;;ACzB1E,IAAM,SAAA,0BAAmB,EAAE","file":"typings.cjs","sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { type WorkflowLineEntity, type WorkflowNodeEntity } from '../entities';\nimport { type WorkflowNodeJSON } from './workflow-node';\nimport { type WorkflowEdgeJSON } from './workflow-edge';\n\nexport interface WorkflowJSON {\n  nodes: WorkflowNodeJSON[];\n  edges: WorkflowEdgeJSON[];\n}\n\nexport enum WorkflowContentChangeType {\n  /**\n   * 添加节点\n   */\n  ADD_NODE = 'ADD_NODE',\n  /**\n   * 删除节点\n   */\n  DELETE_NODE = 'DELETE_NODE',\n  /**\n   * 移动节点\n   */\n  MOVE_NODE = 'MOVE_NODE',\n  /**\n   * 节点数据更新 （表单引擎数据 或者 extInfo 数据）\n   */\n  NODE_DATA_CHANGE = 'NODE_DATA_CHANGE',\n  /**\n   * 添加线条\n   */\n  ADD_LINE = 'ADD_LINE',\n  /**\n   * 删除线条\n   */\n  DELETE_LINE = 'DELETE_LINE',\n  /**\n   * 线条数据修改\n   */\n  LINE_DATA_CHANGE = 'LINE_DATA_CHANGE',\n  /**\n   * 节点Meta信息变更\n   */\n  META_CHANGE = 'META_CHANGE',\n}\n\nexport interface WorkflowContentChangeEvent {\n  type: WorkflowContentChangeType;\n  /**\n   * 当前触发的元素的json数据，toJSON 需要主动触发\n   */\n  toJSON: () => any;\n  /**\n   * oldValue\n   */\n  oldValue?: any;\n  /*\n   * 当前的事件的 entity\n   */\n  entity: WorkflowNodeEntity | WorkflowLineEntity;\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport type { Rectangle, IPoint } from '@flowgram-vue/utils';\n\nimport { type WorkflowLineEntity } from '../entities';\n\nexport enum LineType {\n  BEZIER, // 贝塞尔曲线\n  LINE_CHART, // 折叠线\n  STRAIGHT, // 直线\n}\n\nexport type LineRenderType = LineType | string;\n\nexport type LinePointLocation = 'left' | 'top' | 'right' | 'bottom';\n\nexport interface LinePoint {\n  x: number;\n  y: number;\n  location: LinePointLocation;\n}\n\nexport interface LinePosition {\n  from: LinePoint;\n  to: LinePoint;\n}\n\nexport interface LineColor {\n  hidden: string;\n  default: string;\n  drawing: string;\n  hovered: string;\n  selected: string;\n  error: string;\n  flowing: string;\n}\n\nexport enum LineColors {\n  HIDDEN = 'var(--g-workflow-line-color-hidden,transparent)', // 隐藏线条\n  DEFUALT = 'var(--g-workflow-line-color-default,#4d53e8)',\n  DRAWING = 'var(--g-workflow-line-color-drawing, #5DD6E3)', // '#b5bbf8', // '#9197F1',\n  HOVER = 'var(--g-workflow-line-color-hover,#37d0ff)',\n  SELECTED = 'var(--g-workflow-line-color-selected,#37d0ff)',\n  ERROR = 'var(--g-workflow-line-color-error,red)',\n  FLOWING = 'var(--g-workflow-line-color-flowing,#4d53e8)', // 流动线条，默认使用主题色\n}\n\nexport interface LineCenterPoint {\n  x: number;\n  y: number;\n  labelX: number; // Relative to where the line begins\n  labelY: number; // Relative to where the line begins\n}\n\nexport interface WorkflowLineRenderContribution {\n  entity: WorkflowLineEntity;\n  path: string;\n  center?: LineCenterPoint;\n  bounds: Rectangle;\n  update: (params: { fromPos: LinePoint; toPos: LinePoint }) => void;\n  calcDistance: (pos: IPoint) => number;\n}\n\nexport type WorkflowLineRenderContributionFactory = (new (\n  entity: WorkflowLineEntity\n) => WorkflowLineRenderContribution) & {\n  type: LineRenderType;\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { IPoint, Event } from '@flowgram-vue/utils';\nimport {\n  FlowNodeEntity,\n  FlowNodeEntityOrId,\n  FlowOperationBaseService,\n} from '@flowgram-vue/document';\n\nimport { WorkflowJSON } from './workflow-json';\n\nexport interface NodePostionUpdateEvent {\n  node: FlowNodeEntity;\n  oldPosition: IPoint;\n  newPosition: IPoint;\n}\n\nexport interface WorkflowOperationBaseService extends FlowOperationBaseService {\n  /**\n   * 节点位置更新事件\n   */\n  readonly onNodePostionUpdate: Event<NodePostionUpdateEvent>;\n  /**\n   * 更新节点位置\n   * @param nodeOrId\n   * @param position\n   * @returns\n   */\n  updateNodePosition(nodeOrId: FlowNodeEntityOrId, position: IPoint): void;\n\n  /**\n   * 更新节点与线条\n   */\n  fromJSON(json: WorkflowJSON): void;\n}\n\nexport const WorkflowOperationBaseService = Symbol('WorkflowOperationBaseService');\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nexport * from './workflow-json';\nexport * from './workflow-edge';\nexport * from './workflow-node';\nexport * from './workflow-registry';\nexport * from './workflow-line';\nexport * from './workflow-sub-canvas';\nexport * from './workflow-operation';\nexport * from './workflow-drag';\n\nexport const URLParams = Symbol('');\n\nexport interface URLParams {\n  [key: string]: string;\n}\n"]}

package/dist/typings.d.ts

@@ -0,0 +1 @@
+export * from '../src/typings/index';

package/dist/typings.js

@@ -0,0 +1,40 @@
+// src/typings/workflow-json.ts
+var WorkflowContentChangeType = /* @__PURE__ */ ((WorkflowContentChangeType2) => {
+  WorkflowContentChangeType2["ADD_NODE"] = "ADD_NODE";
+  WorkflowContentChangeType2["DELETE_NODE"] = "DELETE_NODE";
+  WorkflowContentChangeType2["MOVE_NODE"] = "MOVE_NODE";
+  WorkflowContentChangeType2["NODE_DATA_CHANGE"] = "NODE_DATA_CHANGE";
+  WorkflowContentChangeType2["ADD_LINE"] = "ADD_LINE";
+  WorkflowContentChangeType2["DELETE_LINE"] = "DELETE_LINE";
+  WorkflowContentChangeType2["LINE_DATA_CHANGE"] = "LINE_DATA_CHANGE";
+  WorkflowContentChangeType2["META_CHANGE"] = "META_CHANGE";
+  return WorkflowContentChangeType2;
+})(WorkflowContentChangeType || {});
+
+// src/typings/workflow-line.ts
+var LineType = /* @__PURE__ */ ((LineType2) => {
+  LineType2[LineType2["BEZIER"] = 0] = "BEZIER";
+  LineType2[LineType2["LINE_CHART"] = 1] = "LINE_CHART";
+  LineType2[LineType2["STRAIGHT"] = 2] = "STRAIGHT";
+  return LineType2;
+})(LineType || {});
+var LineColors = /* @__PURE__ */ ((LineColors2) => {
+  LineColors2["HIDDEN"] = "var(--g-workflow-line-color-hidden,transparent)";
+  LineColors2["DEFUALT"] = "var(--g-workflow-line-color-default,#4d53e8)";
+  LineColors2["DRAWING"] = "var(--g-workflow-line-color-drawing, #5DD6E3)";
+  LineColors2["HOVER"] = "var(--g-workflow-line-color-hover,#37d0ff)";
+  LineColors2["SELECTED"] = "var(--g-workflow-line-color-selected,#37d0ff)";
+  LineColors2["ERROR"] = "var(--g-workflow-line-color-error,red)";
+  LineColors2["FLOWING"] = "var(--g-workflow-line-color-flowing,#4d53e8)";
+  return LineColors2;
+})(LineColors || {});
+
+// src/typings/workflow-operation.ts
+var WorkflowOperationBaseService = /* @__PURE__ */ Symbol("WorkflowOperationBaseService");
+
+// src/typings/index.ts
+var URLParams = /* @__PURE__ */ Symbol("");
+
+export { LineColors, LineType, URLParams, WorkflowContentChangeType, WorkflowOperationBaseService };
+//# sourceMappingURL=typings.js.map
+//# sourceMappingURL=typings.js.map

package/dist/typings.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/typings/workflow-json.ts","../src/typings/workflow-line.ts","../src/typings/workflow-operation.ts","../src/typings/index.ts"],"names":["WorkflowContentChangeType","LineType","LineColors"],"mappings":";AAcO,IAAK,yBAAA,qBAAAA,0BAAAA,KAAL;AAIL,EAAAA,2BAAA,UAAA,CAAA,GAAW,UAAA;AAIX,EAAAA,2BAAA,aAAA,CAAA,GAAc,aAAA;AAId,EAAAA,2BAAA,WAAA,CAAA,GAAY,WAAA;AAIZ,EAAAA,2BAAA,kBAAA,CAAA,GAAmB,kBAAA;AAInB,EAAAA,2BAAA,UAAA,CAAA,GAAW,UAAA;AAIX,EAAAA,2BAAA,aAAA,CAAA,GAAc,aAAA;AAId,EAAAA,2BAAA,kBAAA,CAAA,GAAmB,kBAAA;AAInB,EAAAA,2BAAA,aAAA,CAAA,GAAc,aAAA;AAhCJ,EAAA,OAAAA,0BAAAA;AAAA,CAAA,EAAA,yBAAA,IAAA,EAAA;;;ACLL,IAAK,QAAA,qBAAAC,SAAAA,KAAL;AACL,EAAAA,SAAAA,CAAAA,SAAAA,CAAA,QAAA,CAAA,GAAA,CAAA,CAAA,GAAA,QAAA;AACA,EAAAA,SAAAA,CAAAA,SAAAA,CAAA,YAAA,CAAA,GAAA,CAAA,CAAA,GAAA,YAAA;AACA,EAAAA,SAAAA,CAAAA,SAAAA,CAAA,UAAA,CAAA,GAAA,CAAA,CAAA,GAAA,UAAA;AAHU,EAAA,OAAAA,SAAAA;AAAA,CAAA,EAAA,QAAA,IAAA,EAAA;AA+BL,IAAK,UAAA,qBAAAC,WAAAA,KAAL;AACL,EAAAA,YAAA,QAAA,CAAA,GAAS,iDAAA;AACT,EAAAA,YAAA,SAAA,CAAA,GAAU,8CAAA;AACV,EAAAA,YAAA,SAAA,CAAA,GAAU,+CAAA;AACV,EAAAA,YAAA,OAAA,CAAA,GAAQ,4CAAA;AACR,EAAAA,YAAA,UAAA,CAAA,GAAW,+CAAA;AACX,EAAAA,YAAA,OAAA,CAAA,GAAQ,wCAAA;AACR,EAAAA,YAAA,SAAA,CAAA,GAAU,8CAAA;AAPA,EAAA,OAAAA,WAAAA;AAAA,CAAA,EAAA,UAAA,IAAA,EAAA;;;ACDL,IAAM,4BAAA,0BAAsC,8BAA8B;;;ACzB1E,IAAM,SAAA,0BAAmB,EAAE","file":"typings.js","sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { type WorkflowLineEntity, type WorkflowNodeEntity } from '../entities';\nimport { type WorkflowNodeJSON } from './workflow-node';\nimport { type WorkflowEdgeJSON } from './workflow-edge';\n\nexport interface WorkflowJSON {\n  nodes: WorkflowNodeJSON[];\n  edges: WorkflowEdgeJSON[];\n}\n\nexport enum WorkflowContentChangeType {\n  /**\n   * 添加节点\n   */\n  ADD_NODE = 'ADD_NODE',\n  /**\n   * 删除节点\n   */\n  DELETE_NODE = 'DELETE_NODE',\n  /**\n   * 移动节点\n   */\n  MOVE_NODE = 'MOVE_NODE',\n  /**\n   * 节点数据更新 （表单引擎数据 或者 extInfo 数据）\n   */\n  NODE_DATA_CHANGE = 'NODE_DATA_CHANGE',\n  /**\n   * 添加线条\n   */\n  ADD_LINE = 'ADD_LINE',\n  /**\n   * 删除线条\n   */\n  DELETE_LINE = 'DELETE_LINE',\n  /**\n   * 线条数据修改\n   */\n  LINE_DATA_CHANGE = 'LINE_DATA_CHANGE',\n  /**\n   * 节点Meta信息变更\n   */\n  META_CHANGE = 'META_CHANGE',\n}\n\nexport interface WorkflowContentChangeEvent {\n  type: WorkflowContentChangeType;\n  /**\n   * 当前触发的元素的json数据，toJSON 需要主动触发\n   */\n  toJSON: () => any;\n  /**\n   * oldValue\n   */\n  oldValue?: any;\n  /*\n   * 当前的事件的 entity\n   */\n  entity: WorkflowNodeEntity | WorkflowLineEntity;\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport type { Rectangle, IPoint } from '@flowgram-vue/utils';\n\nimport { type WorkflowLineEntity } from '../entities';\n\nexport enum LineType {\n  BEZIER, // 贝塞尔曲线\n  LINE_CHART, // 折叠线\n  STRAIGHT, // 直线\n}\n\nexport type LineRenderType = LineType | string;\n\nexport type LinePointLocation = 'left' | 'top' | 'right' | 'bottom';\n\nexport interface LinePoint {\n  x: number;\n  y: number;\n  location: LinePointLocation;\n}\n\nexport interface LinePosition {\n  from: LinePoint;\n  to: LinePoint;\n}\n\nexport interface LineColor {\n  hidden: string;\n  default: string;\n  drawing: string;\n  hovered: string;\n  selected: string;\n  error: string;\n  flowing: string;\n}\n\nexport enum LineColors {\n  HIDDEN = 'var(--g-workflow-line-color-hidden,transparent)', // 隐藏线条\n  DEFUALT = 'var(--g-workflow-line-color-default,#4d53e8)',\n  DRAWING = 'var(--g-workflow-line-color-drawing, #5DD6E3)', // '#b5bbf8', // '#9197F1',\n  HOVER = 'var(--g-workflow-line-color-hover,#37d0ff)',\n  SELECTED = 'var(--g-workflow-line-color-selected,#37d0ff)',\n  ERROR = 'var(--g-workflow-line-color-error,red)',\n  FLOWING = 'var(--g-workflow-line-color-flowing,#4d53e8)', // 流动线条，默认使用主题色\n}\n\nexport interface LineCenterPoint {\n  x: number;\n  y: number;\n  labelX: number; // Relative to where the line begins\n  labelY: number; // Relative to where the line begins\n}\n\nexport interface WorkflowLineRenderContribution {\n  entity: WorkflowLineEntity;\n  path: string;\n  center?: LineCenterPoint;\n  bounds: Rectangle;\n  update: (params: { fromPos: LinePoint; toPos: LinePoint }) => void;\n  calcDistance: (pos: IPoint) => number;\n}\n\nexport type WorkflowLineRenderContributionFactory = (new (\n  entity: WorkflowLineEntity\n) => WorkflowLineRenderContribution) & {\n  type: LineRenderType;\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { IPoint, Event } from '@flowgram-vue/utils';\nimport {\n  FlowNodeEntity,\n  FlowNodeEntityOrId,\n  FlowOperationBaseService,\n} from '@flowgram-vue/document';\n\nimport { WorkflowJSON } from './workflow-json';\n\nexport interface NodePostionUpdateEvent {\n  node: FlowNodeEntity;\n  oldPosition: IPoint;\n  newPosition: IPoint;\n}\n\nexport interface WorkflowOperationBaseService extends FlowOperationBaseService {\n  /**\n   * 节点位置更新事件\n   */\n  readonly onNodePostionUpdate: Event<NodePostionUpdateEvent>;\n  /**\n   * 更新节点位置\n   * @param nodeOrId\n   * @param position\n   * @returns\n   */\n  updateNodePosition(nodeOrId: FlowNodeEntityOrId, position: IPoint): void;\n\n  /**\n   * 更新节点与线条\n   */\n  fromJSON(json: WorkflowJSON): void;\n}\n\nexport const WorkflowOperationBaseService = Symbol('WorkflowOperationBaseService');\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nexport * from './workflow-json';\nexport * from './workflow-edge';\nexport * from './workflow-node';\nexport * from './workflow-registry';\nexport * from './workflow-line';\nexport * from './workflow-sub-canvas';\nexport * from './workflow-operation';\nexport * from './workflow-drag';\n\nexport const URLParams = Symbol('');\n\nexport interface URLParams {\n  [key: string]: string;\n}\n"]}

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@flowgram-vue/free-layout-core",
+  "version": "0.2.0",
+  "homepage": "https://flowgram.ai/",
+  "repository": "https://github.com/Crayon-hua/flowgram-vue",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./typings": {
+      "types": "./dist/typings.d.ts",
+      "import": "./dist/typings.js",
+      "require": "./dist/typings.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "typings": [
+        "./src/typings/index.ts"
+      ]
+    }
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "dependencies": {
+    "inversify": "^6.0.1",
+    "reflect-metadata": "~0.2.2",
+    "lodash-es": "^4.17.21",
+    "nanoid": "^5.0.9",
+    "@flowgram-vue/core": "0.2.0",
+    "@flowgram-vue/reactive": "0.2.0",
+    "@flowgram-vue/document": "0.2.0",
+    "@flowgram-vue/utils": "0.2.0",
+    "@flowgram-vue/node": "0.2.0",
+    "@flowgram-vue/form-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",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^9.0.0",
+    "jsdom": "^26.1.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": "vitest run",
+    "test:cov": "vitest run --coverage",
+    "lint": "eslint .",
+    "ts-check": "tsc --noEmit",
+    "build:fast": "flowgram-build --fast",
+    "build:watch": "flowgram-build --watch"
+  }
+}

package/src/composables/index.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export {
+  useConfigEntity,
+  useService,
+  usePlayground,
+  useListenEvents,
+  usePlaygroundContainer,
+  usePlaygroundContext,
+  useEntities,
+  useEntityFromContext,
+  useEntityDataFromContext,
+  useRefresh,
+} from '@flowgram-vue/core';
+export * from './typings';
+export * from './use-node-render';
+export * from './use-node-render-context';
+export * from './use-current-dom-node';
+export * from './use-current-entity';
+export * from './use-workflow-document';
+export * from './use-playground-readonly-state';

package/src/composables/typings.ts

@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { Ref } from 'vue';
+import { type NodeFormProps } from '@flowgram-vue/node';
+import { FlowNodeEntity } from '@flowgram-vue/document';
+
+import { type WorkflowPortEntity } from '../entities';
+
+export type NodePointerEvent = MouseEvent | TouchEvent;
+
+export interface NodeRenderReturnType {
+  id: string;
+  type: string | number;
+  /**
+   * 当前节点
+   */
+  node: FlowNodeEntity;
+  /**
+   * 节点 data 数据
+   */
+  data: any;
+  /**
+   * 更新节点 data 数据
+   */
+  updateData: (newData: any) => void;
+  /**
+   * 节点选中
+   */
+  selected: boolean;
+  /**
+   * 节点激活
+   */
+  activated: boolean;
+  /**
+   * 节点展开
+   */
+  expanded: boolean;
+  /**
+   * 触发拖拽
+   * @param e
+   */
+  startDrag: (e: NodePointerEvent) => void;
+  /**
+   * 当前节点的点位信息
+   */
+  ports: WorkflowPortEntity[];
+  /**
+   * 删除节点
+   */
+  deleteNode: () => void;
+  /**
+   * 选中节点
+   * @param e
+   */
+  selectNode: (e: MouseEvent) => void;
+  /**
+   * 全局 readonly 状态
+   */
+  readonly: boolean;
+  /**
+   * 拖拽线条的目标 node id
+   */
+  linkingNodeId: string;
+  /**
+   * 节点 ref
+   */
+  nodeRef: Ref<HTMLDivElement | null>;
+  /**
+   * 节点 focus 事件
+   */
+  onFocus: () => void;
+  /**
+   * 节点 blur 事件
+   */
+  onBlur: () => void;
+  /**
+   * 渲染表单，只有节点引擎开启才能使用
+   */
+  form: NodeFormProps<any> | undefined;
+  /**
+   * 获取节点的扩展数据
+   */
+  getExtInfo<T = any>(): T;
+  /**
+   * 更新节点的扩展数据
+   * @param extInfo
+   */
+  updateExtInfo<T = any>(extInfo: T, fullUpdate?: boolean): void;
+  /**
+   * 展开/收起节点
+   * @param expanded
+   */
+  toggleExpand(): void;
+}

package/src/composables/use-current-dom-node.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FlowNodeRenderData } from '@flowgram-vue/document';
+import { useEntityFromContext } from '@flowgram-vue/core';
+
+import { type WorkflowNodeEntity } from '../entities';
+
+/**
+ * 获取当前渲染的 dom 节点
+ */
+export function useCurrentDomNode(): HTMLDivElement {
+  const entity = useEntityFromContext<WorkflowNodeEntity>();
+  const renderData = entity.getData(FlowNodeRenderData)!;
+  return renderData.node;
+}

package/src/composables/use-current-entity.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useEntityFromContext } from '@flowgram-vue/core';
+
+import { type WorkflowNodeEntity } from '../entities';
+
+/**
+ * 获取当前节点
+ */
+export function useCurrentEntity(): WorkflowNodeEntity {
+  return useEntityFromContext<WorkflowNodeEntity>();
+}

package/src/composables/use-node-render-context.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject, type InjectionKey } from 'vue';
+
+import { NodeRenderReturnType } from './typings';
+
+export const NodeRenderContextKey: InjectionKey<NodeRenderReturnType> =
+  Symbol('NodeRenderContext');
+
+/** @deprecated 使用 NodeRenderContextKey */
+export const NodeRenderContext = NodeRenderContextKey;
+
+export function useNodeRenderContext(): NodeRenderReturnType {
+  return inject(NodeRenderContextKey, {} as NodeRenderReturnType);
+}

package/src/composables/use-node-render.ts

@@ -0,0 +1,192 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject, onBeforeUnmount, ref } from 'vue';
+
+import { useObserve } from '@flowgram-vue/reactive';
+import { getNodeForm } from '@flowgram-vue/node';
+import { FlowNodeRenderData } from '@flowgram-vue/document';
+import {
+  MouseTouchEvent,
+  PlaygroundEntityContextKey,
+  useListenEvents,
+  useRefresh,
+  useService,
+} from '@flowgram-vue/core';
+
+import { WorkflowDragService, WorkflowSelectService } from '../service';
+import { type WorkflowNodeEntity } from '../entities';
+import { usePlaygroundReadonlyState } from './use-playground-readonly-state';
+import { type NodePointerEvent, type NodeRenderReturnType } from './typings';
+
+function checkTargetDraggable(el: any): boolean {
+  return (
+    el &&
+    el.tagName !== 'INPUT' &&
+    el.tagName !== 'TEXTAREA' &&
+    !el.closest('.flow-canvas-not-draggable')
+  );
+}
+/**
+ * - 下面的 firefox 为了修复一个 bug
+ * - firefox 下 draggable 属性会影响节点 input 内容 focus：https://jsfiddle.net/Aydar/ztsvbyep/3/
+ * - 该 bug 在 firefox 浏览器上存在了很久，需要作兼容：https://bugzilla.mozilla.org/show_bug.cgi?id=739071
+ */
+const isFirefox = typeof navigator !== 'undefined' && navigator?.userAgent?.includes?.('Firefox');
+
+export function useNodeRender(nodeFromProps?: WorkflowNodeEntity): NodeRenderReturnType {
+  const node =
+    nodeFromProps || (inject(PlaygroundEntityContextKey, undefined) as WorkflowNodeEntity);
+  const renderData = node.getData(FlowNodeRenderData)!;
+  const portsData = node.ports!;
+  const readonly = usePlaygroundReadonlyState();
+  const dragService = useService<WorkflowDragService>(WorkflowDragService);
+  const selectionService = useService<WorkflowSelectService>(WorkflowSelectService);
+  const isDragging = { current: false };
+  const formValueDependRef = { current: false };
+  const refresh = useRefresh();
+  const nodeRef = ref<HTMLDivElement | null>(null);
+  const linkingNodeId = ref('');
+
+  const lineDragDisposable = dragService.onDragLineEventChange(({ type, onDragNodeId }) => {
+    if (type === 'onDrag') {
+      linkingNodeId.value = onDragNodeId || '';
+    } else {
+      linkingNodeId.value = '';
+    }
+  });
+
+  const startDrag = (e: NodePointerEvent) => {
+    MouseTouchEvent.preventDefault(e);
+    if (!selectionService.isSelected(node.id)) {
+      selectNode(e as MouseEvent);
+    }
+    if (!MouseTouchEvent.isTouchEvent(e)) {
+      // 输入框不能拖拽
+      if (!checkTargetDraggable(e.target) || !checkTargetDraggable(document.activeElement)) {
+        return;
+      }
+    }
+    isDragging.current = true;
+    // 拖拽选中的节点
+    dragService.startDragSelectedNodes(e)?.finally(() =>
+      setTimeout(() => {
+        isDragging.current = false;
+      })
+    );
+  };
+  /**
+   * 单选节点
+   */
+  const selectNode = (e: MouseEvent) => {
+    // 触发了拖拽就不要再触发单选
+    if (isDragging.current) {
+      return;
+    }
+    // 追加选择
+    if (e.shiftKey) {
+      selectionService.toggleSelect(node);
+    } else {
+      selectionService.selectNode(node);
+    }
+    if (e.target) {
+      (e.target as HTMLDivElement).focus();
+    }
+  };
+  const deleteNode = () => node.dispose();
+  // 监听端口变化
+  useListenEvents(portsData.onDataChange);
+
+  const onFocus = () => {
+    if (isFirefox) {
+      nodeRef.value?.setAttribute('draggable', 'false');
+    }
+  };
+  const onBlur = () => {
+    if (isFirefox) {
+      nodeRef.value?.setAttribute('draggable', 'true');
+    }
+  };
+  const getExtInfo = () => node.getExtInfo() as any;
+  const updateExtInfo = (data: any, fullUpdate?: boolean) => {
+    node.updateExtInfo(data, fullUpdate);
+  };
+  const form = getNodeForm(node);
+  // Listen FormState change
+  const formState = useObserve<any>(form?.state);
+  const toggleExpand = () => {
+    renderData.toggleExpand();
+  };
+  const formValuesDisposable = form?.onFormValuesChange(() => {
+    if (formValueDependRef.current) {
+      refresh();
+    }
+  });
+
+  onBeforeUnmount(() => {
+    lineDragDisposable.dispose();
+    formValuesDisposable?.dispose();
+  });
+
+  return {
+    id: node.id,
+    type: node.flowNodeType,
+    get data() {
+      if (form) {
+        formValueDependRef.current = true;
+        return form.values;
+      }
+      return getExtInfo();
+    },
+    updateData(values: any) {
+      if (form) {
+        form.updateFormValues(values);
+      } else {
+        updateExtInfo(values, true);
+      }
+    },
+    node,
+    get selected() {
+      return selectionService.isSelected(node.id);
+    },
+    get activated() {
+      return selectionService.isActivated(node.id);
+    },
+    get expanded() {
+      return renderData.expanded;
+    },
+    startDrag,
+    get ports() {
+      return portsData.allPorts;
+    },
+    deleteNode,
+    selectNode,
+    get readonly() {
+      return readonly.value;
+    },
+    get linkingNodeId() {
+      return linkingNodeId.value;
+    },
+    nodeRef,
+    onFocus,
+    onBlur,
+    getExtInfo,
+    updateExtInfo,
+    toggleExpand,
+    get form() {
+      if (!form) return undefined;
+      return {
+        ...form,
+        get values() {
+          formValueDependRef.current = true;
+          return form.values!;
+        },
+        get state() {
+          return formState;
+        },
+      };
+    },
+  };
+}

package/src/composables/use-playground-readonly-state.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { onBeforeUnmount, type Ref, shallowRef } from 'vue';
+
+import { usePlayground } from '@flowgram-vue/core';
+import { type Disposable } from '@flowgram-vue/utils';
+
+/**
+ * 获取 readonly 状态。返回 Ref，listenChange 为 true 时订阅 playground 只读变化。
+ */
+export function usePlaygroundReadonlyState(listenChange?: boolean): Ref<boolean> {
+  const playground = usePlayground();
+  const readonly = shallowRef(playground.config.readonly);
+  let dispose: Disposable | undefined;
+  if (listenChange) {
+    dispose = playground.config.onReadonlyOrDisabledChange(() => {
+      readonly.value = playground.config.readonly;
+    });
+  }
+  onBeforeUnmount(() => dispose?.dispose());
+  return readonly;
+}

package/src/composables/use-workflow-document.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useService } from '@flowgram-vue/core';
+
+import { WorkflowDocument } from '../workflow-document';
+
+export function useWorkflowDocument(): WorkflowDocument {
+  return useService<WorkflowDocument>(WorkflowDocument);
+}

package/src/constants.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export enum EditorCursorState {
+  GRAB = 'GRAB',
+  SELECT = 'SELECT',
+}
+
+export enum InteractiveType {
+  /** 鼠标优先交互模式 */
+  MOUSE = 'MOUSE',
+
+  /** 触控板优先交互模式 */
+  PAD = 'PAD',
+}

package/src/entities/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './workflow-node-entity';
+export * from './workflow-line-entity';
+export * from './workflow-port-entity';