@flowgram-vue/fixed-drag-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,33 @@
+'use strict';
+
+var renderer = require('@flowgram-vue/renderer');
+var core = require('@flowgram-vue/core');
+
+// src/create-fixed-drag-plugin.ts
+var createFixedDragPlugin = core.definePluginCreator({
+  onInit(ctx, opts) {
+    if (opts.enable !== false) {
+      ctx.playground.registerLayer(renderer.FlowDragLayer, {
+        onDrop: opts.onDrop ? opts.onDrop.bind(null, ctx) : void 0,
+        canDrop: opts.canDrop ? opts.canDrop.bind(null, ctx) : void 0
+      });
+    }
+  }
+});
+function useStartDragNode() {
+  const playground = core.usePlayground();
+  const dragLayer = playground.getLayer(renderer.FlowDragLayer);
+  return {
+    startDrag: dragLayer ? dragLayer.startDrag.bind(dragLayer) : (_e) => {
+    },
+    dragOffset: dragLayer ? dragLayer.dragOffset : {
+      x: 0,
+      y: 0
+    }
+  };
+}
+
+exports.createFixedDragPlugin = createFixedDragPlugin;
+exports.useStartDragNode = useStartDragNode;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/create-fixed-drag-plugin.ts","../src/hooks/use-start-drag-node.ts"],"names":["definePluginCreator","FlowDragLayer","usePlayground"],"mappings":";;;;;;AAuCO,IAAM,wBAAwBA,wBAAA,CAA0C;AAAA,EAC7E,MAAA,CAAO,KAAK,IAAA,EAAY;AAEtB,IAAA,IAAI,IAAA,CAAK,WAAW,KAAA,EAAO;AACzB,MAAA,GAAA,CAAI,UAAA,CAAW,cAAcC,sBAAA,EAAe;AAAA,QAC1C,MAAA,EAAQ,KAAK,MAAA,GAAS,IAAA,CAAK,OAAO,IAAA,CAAK,IAAA,EAAM,GAAG,CAAA,GAAI,MAAA;AAAA,QACpD,OAAA,EAAS,KAAK,OAAA,GAAU,IAAA,CAAK,QAAQ,IAAA,CAAK,IAAA,EAAM,GAAG,CAAA,GAAI;AAAA,OACxD,CAAA;AAAA,IACH;AAAA,EACF;AACF,CAAC;ACzCM,SAAS,gBAAA,GAAmB;AACjC,EAAA,MAAM,aAAaC,kBAAA,EAAc;AAEjC,EAAA,MAAM,SAAA,GAAY,UAAA,CAAW,QAAA,CAASD,sBAAa,CAAA;AAEnD,EAAA,OAAO;AAAA,IACL,SAAA,EAAW,YAAY,SAAA,CAAU,SAAA,CAAU,KAAK,SAAS,CAAA,GAAI,CAAC,EAAA,KAAgB;AAAA,IAAC,CAAA;AAAA,IAC/E,UAAA,EAAY,SAAA,GACR,SAAA,CAAU,UAAA,GACV;AAAA,MACA,CAAA,EAAG,CAAA;AAAA,MACH,CAAA,EAAG;AAAA;AACL,GACJ;AACF","file":"index.cjs","sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { type Xor } from '@flowgram-vue/utils';\nimport { FlowDragLayer } from '@flowgram-vue/renderer';\nimport { FlowNodeEntity, FlowNodeJSON } from '@flowgram-vue/document';\nimport { definePluginCreator, PluginContext } from '@flowgram-vue/core';\n\n// import { SelectorBounds } from './selector-bounds';\n\nexport interface FixDragPluginOptions<CTX extends PluginContext = PluginContext> {\n  enable?: boolean;\n  /**\n   * Callback when drag drop\n   */\n  onDrop?: (ctx: CTX, dropData: { dragNodes: FlowNodeEntity[]; dropNode: FlowNodeEntity }) => void;\n  /**\n   * Check can drop\n   * @param ctx\n   * @param dropData\n   */\n  canDrop?: (\n    ctx: CTX,\n    dropData: {\n      dropNode: FlowNodeEntity;\n      isBranch?: boolean;\n    } & Xor<\n      {\n        dragNodes: FlowNodeEntity[];\n      },\n      {\n        dragJSON: FlowNodeJSON;\n      }\n    >\n  ) => boolean;\n}\n\nexport const createFixedDragPlugin = definePluginCreator<FixDragPluginOptions>({\n  onInit(ctx, opts): void {\n    // 默认可用，所以强制判断 false\n    if (opts.enable !== false) {\n      ctx.playground.registerLayer(FlowDragLayer, {\n        onDrop: opts.onDrop ? opts.onDrop.bind(null, ctx) : undefined,\n        canDrop: opts.canDrop ? opts.canDrop.bind(null, ctx) : undefined,\n      });\n    }\n  },\n});\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { usePlayground } from '@flowgram-vue/core';\nimport { FlowDragLayer } from '@flowgram-vue/renderer';\n\nexport function useStartDragNode() {\n  const playground = usePlayground();\n\n  const dragLayer = playground.getLayer(FlowDragLayer);\n\n  return {\n    startDrag: dragLayer ? dragLayer.startDrag.bind(dragLayer) : (_e: unknown) => {},\n    dragOffset: dragLayer\n      ? dragLayer.dragOffset\n      : {\n        x: 0,\n        y: 0,\n      },\n  };\n}\n"]}

package/dist/index.d.ts

@@ -0,0 +1,65 @@
+import * as _flowgram_vue_core from '@flowgram-vue/core';
+import { PluginContext } from '@flowgram-vue/core';
+import { Xor } from '@flowgram-vue/utils';
+import * as _flowgram_vue_document from '@flowgram-vue/document';
+import { FlowNodeEntity, FlowNodeJSON } from '@flowgram-vue/document';
+
+interface FixDragPluginOptions<CTX extends PluginContext = PluginContext> {
+    enable?: boolean;
+    /**
+     * Callback when drag drop
+     */
+    onDrop?: (ctx: CTX, dropData: {
+        dragNodes: FlowNodeEntity[];
+        dropNode: FlowNodeEntity;
+    }) => void;
+    /**
+     * Check can drop
+     * @param ctx
+     * @param dropData
+     */
+    canDrop?: (ctx: CTX, dropData: {
+        dropNode: FlowNodeEntity;
+        isBranch?: boolean;
+    } & Xor<{
+        dragNodes: FlowNodeEntity[];
+    }, {
+        dragJSON: FlowNodeJSON;
+    }>) => boolean;
+}
+declare const createFixedDragPlugin: _flowgram_vue_core.PluginCreator<FixDragPluginOptions<PluginContext>>;
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+declare function useStartDragNode(): {
+    startDrag: ((e: {
+        clientX: number;
+        clientY: number;
+    }, { dragStartEntity: startEntityFromProps, dragEntities, dragJSON, isBranch, onCreateNode, }: {
+        dragEntities?: _flowgram_vue_document.FlowNodeEntity[];
+    } & (({
+        dragStartEntity?: undefined;
+    } & {
+        dragJSON: _flowgram_vue_document.FlowNodeJSON;
+        isBranch?: boolean;
+        onCreateNode: (json: _flowgram_vue_document.FlowNodeJSON, dropEntity: _flowgram_vue_document.FlowNodeEntity) => Promise<_flowgram_vue_document.FlowNodeEntity>;
+    }) | ({
+        isBranch?: undefined;
+        dragJSON?: undefined;
+        onCreateNode?: undefined;
+    } & {
+        dragStartEntity: _flowgram_vue_document.FlowNodeEntity;
+    })), options?: {
+        dragOffsetX?: number;
+        dragOffsetY?: number;
+        disableDragScroll?: boolean;
+    }) => Promise<void>) | ((_e: unknown) => void);
+    dragOffset: {
+        x: number;
+        y: number;
+    };
+};
+
+export { type FixDragPluginOptions, createFixedDragPlugin, useStartDragNode };

package/dist/index.js

@@ -0,0 +1,30 @@
+import { FlowDragLayer } from '@flowgram-vue/renderer';
+import { definePluginCreator, usePlayground } from '@flowgram-vue/core';
+
+// src/create-fixed-drag-plugin.ts
+var createFixedDragPlugin = definePluginCreator({
+  onInit(ctx, opts) {
+    if (opts.enable !== false) {
+      ctx.playground.registerLayer(FlowDragLayer, {
+        onDrop: opts.onDrop ? opts.onDrop.bind(null, ctx) : void 0,
+        canDrop: opts.canDrop ? opts.canDrop.bind(null, ctx) : void 0
+      });
+    }
+  }
+});
+function useStartDragNode() {
+  const playground = usePlayground();
+  const dragLayer = playground.getLayer(FlowDragLayer);
+  return {
+    startDrag: dragLayer ? dragLayer.startDrag.bind(dragLayer) : (_e) => {
+    },
+    dragOffset: dragLayer ? dragLayer.dragOffset : {
+      x: 0,
+      y: 0
+    }
+  };
+}
+
+export { createFixedDragPlugin, useStartDragNode };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/create-fixed-drag-plugin.ts","../src/hooks/use-start-drag-node.ts"],"names":["FlowDragLayer"],"mappings":";;;;AAuCO,IAAM,wBAAwB,mBAAA,CAA0C;AAAA,EAC7E,MAAA,CAAO,KAAK,IAAA,EAAY;AAEtB,IAAA,IAAI,IAAA,CAAK,WAAW,KAAA,EAAO;AACzB,MAAA,GAAA,CAAI,UAAA,CAAW,cAAc,aAAA,EAAe;AAAA,QAC1C,MAAA,EAAQ,KAAK,MAAA,GAAS,IAAA,CAAK,OAAO,IAAA,CAAK,IAAA,EAAM,GAAG,CAAA,GAAI,MAAA;AAAA,QACpD,OAAA,EAAS,KAAK,OAAA,GAAU,IAAA,CAAK,QAAQ,IAAA,CAAK,IAAA,EAAM,GAAG,CAAA,GAAI;AAAA,OACxD,CAAA;AAAA,IACH;AAAA,EACF;AACF,CAAC;ACzCM,SAAS,gBAAA,GAAmB;AACjC,EAAA,MAAM,aAAa,aAAA,EAAc;AAEjC,EAAA,MAAM,SAAA,GAAY,UAAA,CAAW,QAAA,CAASA,aAAa,CAAA;AAEnD,EAAA,OAAO;AAAA,IACL,SAAA,EAAW,YAAY,SAAA,CAAU,SAAA,CAAU,KAAK,SAAS,CAAA,GAAI,CAAC,EAAA,KAAgB;AAAA,IAAC,CAAA;AAAA,IAC/E,UAAA,EAAY,SAAA,GACR,SAAA,CAAU,UAAA,GACV;AAAA,MACA,CAAA,EAAG,CAAA;AAAA,MACH,CAAA,EAAG;AAAA;AACL,GACJ;AACF","file":"index.js","sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { type Xor } from '@flowgram-vue/utils';\nimport { FlowDragLayer } from '@flowgram-vue/renderer';\nimport { FlowNodeEntity, FlowNodeJSON } from '@flowgram-vue/document';\nimport { definePluginCreator, PluginContext } from '@flowgram-vue/core';\n\n// import { SelectorBounds } from './selector-bounds';\n\nexport interface FixDragPluginOptions<CTX extends PluginContext = PluginContext> {\n  enable?: boolean;\n  /**\n   * Callback when drag drop\n   */\n  onDrop?: (ctx: CTX, dropData: { dragNodes: FlowNodeEntity[]; dropNode: FlowNodeEntity }) => void;\n  /**\n   * Check can drop\n   * @param ctx\n   * @param dropData\n   */\n  canDrop?: (\n    ctx: CTX,\n    dropData: {\n      dropNode: FlowNodeEntity;\n      isBranch?: boolean;\n    } & Xor<\n      {\n        dragNodes: FlowNodeEntity[];\n      },\n      {\n        dragJSON: FlowNodeJSON;\n      }\n    >\n  ) => boolean;\n}\n\nexport const createFixedDragPlugin = definePluginCreator<FixDragPluginOptions>({\n  onInit(ctx, opts): void {\n    // 默认可用，所以强制判断 false\n    if (opts.enable !== false) {\n      ctx.playground.registerLayer(FlowDragLayer, {\n        onDrop: opts.onDrop ? opts.onDrop.bind(null, ctx) : undefined,\n        canDrop: opts.canDrop ? opts.canDrop.bind(null, ctx) : undefined,\n      });\n    }\n  },\n});\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { usePlayground } from '@flowgram-vue/core';\nimport { FlowDragLayer } from '@flowgram-vue/renderer';\n\nexport function useStartDragNode() {\n  const playground = usePlayground();\n\n  const dragLayer = playground.getLayer(FlowDragLayer);\n\n  return {\n    startDrag: dragLayer ? dragLayer.startDrag.bind(dragLayer) : (_e: unknown) => {},\n    dragOffset: dragLayer\n      ? dragLayer.dragOffset\n      : {\n        x: 0,\n        y: 0,\n      },\n  };\n}\n"]}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@flowgram-vue/fixed-drag-plugin",
+  "version": "0.2.0",
+  "type": "module",
+  "homepage": "https://flowgram.ai/",
+  "repository": "https://github.com/Crayon-hua/flowgram-vue",
+  "license": "MIT",
+  "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"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@vitest/coverage-v8": "^3.2.4",
+    "eslint": "^9.0.0",
+    "jsdom": "^26.1.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.18",
+    "@flowgram-vue/ts-config": "0.2.0",
+    "@flowgram-vue/build-config": "0.2.0",
+    "@flowgram-vue/eslint-config": "0.2.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "flowgram-build",
+    "test": "vitest run --passWithNoTests",
+    "test:cov": "vitest run --coverage --passWithNoTests",
+    "lint": "eslint .",
+    "ts-check": "tsc --noEmit",
+    "type-check": "tsc --noEmit",
+    "build:fast": "flowgram-build --fast",
+    "build:watch": "flowgram-build --watch"
+  }
+}

package/src/create-fixed-drag-plugin.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type Xor } from '@flowgram-vue/utils';
+import { FlowDragLayer } from '@flowgram-vue/renderer';
+import { FlowNodeEntity, FlowNodeJSON } from '@flowgram-vue/document';
+import { definePluginCreator, PluginContext } from '@flowgram-vue/core';
+
+// import { SelectorBounds } from './selector-bounds';
+
+export interface FixDragPluginOptions<CTX extends PluginContext = PluginContext> {
+  enable?: boolean;
+  /**
+   * Callback when drag drop
+   */
+  onDrop?: (ctx: CTX, dropData: { dragNodes: FlowNodeEntity[]; dropNode: FlowNodeEntity }) => void;
+  /**
+   * Check can drop
+   * @param ctx
+   * @param dropData
+   */
+  canDrop?: (
+    ctx: CTX,
+    dropData: {
+      dropNode: FlowNodeEntity;
+      isBranch?: boolean;
+    } & Xor<
+      {
+        dragNodes: FlowNodeEntity[];
+      },
+      {
+        dragJSON: FlowNodeJSON;
+      }
+    >
+  ) => boolean;
+}
+
+export const createFixedDragPlugin = definePluginCreator<FixDragPluginOptions>({
+  onInit(ctx, opts): void {
+    // 默认可用，所以强制判断 false
+    if (opts.enable !== false) {
+      ctx.playground.registerLayer(FlowDragLayer, {
+        onDrop: opts.onDrop ? opts.onDrop.bind(null, ctx) : undefined,
+        canDrop: opts.canDrop ? opts.canDrop.bind(null, ctx) : undefined,
+      });
+    }
+  },
+});

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/hooks/use-start-drag-node.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { usePlayground } from '@flowgram-vue/core';
+import { FlowDragLayer } from '@flowgram-vue/renderer';
+
+export function useStartDragNode() {
+  const playground = usePlayground();
+
+  const dragLayer = playground.getLayer(FlowDragLayer);
+
+  return {
+    startDrag: dragLayer ? dragLayer.startDrag.bind(dragLayer) : (_e: unknown) => {},
+    dragOffset: dragLayer
+      ? dragLayer.dragOffset
+      : {
+        x: 0,
+        y: 0,
+      },
+  };
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './create-fixed-drag-plugin';
+export { useStartDragNode } from './hooks/use-start-drag-node';