@knotx/plugins-drag 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 格桑
+
+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';
+
+const core = require('@knotx/core');
+const decorators = require('@knotx/decorators');
+const interact = require('interactjs');
+const rxjs = require('rxjs');
+const operators = require('rxjs/operators');
+require('@knotx/plugins-canvas');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+const interact__default = /*#__PURE__*/_interopDefaultCompat(interact);
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => {
+  var _a2;
+  return [, , , __create((_a2 = base == null ? void 0 : base[__knownSymbol("metadata")]) != null ? _a2 : null)];
+};
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _destroy_dec, _init_dec, _registerOptionsTransformer_dec, _options_dec, _canvasScale_dec, _canInteract_dec, _endInteraction_dec, _startInteraction_dec, _dispatchNodeOperation_dec, _getNode_dec, _a, _init;
+const DEFAULT_OPTIONS = {
+  inertia: {
+    enabled: true
+  },
+  modifiers: [
+    interact__default.modifiers.restrictRect({
+      restriction: `.${core.bem("canvas", "wrapper")}`,
+      endOnly: true
+    })
+  ]
+};
+class Drag extends (_a = core.BasePlugin, _getNode_dec = [decorators.inject.getNode()], _dispatchNodeOperation_dec = [decorators.inject.dispatchNodeOperation()], _startInteraction_dec = [decorators.inject.startInteraction()], _endInteraction_dec = [decorators.inject.endInteraction()], _canInteract_dec = [decorators.inject.canInteract()], _canvasScale_dec = [decorators.inject.canvas.transform((state) => state.scale)], _options_dec = [decorators.register("options")], _registerOptionsTransformer_dec = [decorators.register("registerOptionsTransformer")], _init_dec = [decorators.OnInit], _destroy_dec = [decorators.OnDestroy], _a) {
+  constructor() {
+    super(...arguments);
+    __runInitializers(_init, 5, this);
+    __publicField(this, "name", "drag");
+    __publicField(this, "getNode", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __publicField(this, "dispatchNodeOperation", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __publicField(this, "startInteraction", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __publicField(this, "endInteraction", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    __publicField(this, "canInteract", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
+    __publicField(this, "canvasScale", __runInitializers(_init, 28, this, 1)), __runInitializers(_init, 31, this);
+    __publicField(this, "subscription");
+    __publicField(this, "transformers$", new rxjs.BehaviorSubject([]));
+    __publicField(this, "currentInteractable");
+    __publicField(this, "options", __runInitializers(_init, 32, this, DEFAULT_OPTIONS)), __runInitializers(_init, 35, this);
+    __publicField(this, "registerOptionsTransformer", __runInitializers(_init, 36, this, (transformer) => {
+      const transformers = this.transformers$.value;
+      transformers.push(transformer);
+      this.transformers$.next(transformers);
+      return () => {
+        const currentTransformers = this.transformers$.value;
+        const index = currentTransformers.indexOf(transformer);
+        if (index > -1) {
+          currentTransformers.splice(index, 1);
+          this.transformers$.next(currentTransformers);
+        }
+      };
+    })), __runInitializers(_init, 39, this);
+  }
+  /**
+   * 应用所有转换器，生成最终的配置
+   */
+  applyTransformers(nodeId) {
+    const node = this.getNode(nodeId);
+    if (!node)
+      return this.options;
+    const context = {
+      nodeId,
+      node,
+      defaultOptions: this.options,
+      currentOptions: this.options
+    };
+    return this.transformers$.value.reduce(
+      (options, transformer) => {
+        var _a2;
+        context.currentOptions = options;
+        return (_a2 = transformer(context)) != null ? _a2 : options;
+      },
+      this.options
+    );
+  }
+  /**
+   * 更新 interactable 的配置
+   */
+  updateInteractableOptions(event) {
+    var _a2;
+    if (!this.currentInteractable)
+      return;
+    const target = ((_a2 = event.__set) == null ? void 0 : _a2.currentTarget) || event.target;
+    const nodeId = target.getAttribute("data-node-id");
+    if (!nodeId)
+      return;
+    const options = this.applyTransformers(nodeId);
+    this.currentInteractable.draggable(options);
+  }
+  init() {
+    const dragStart$ = new rxjs.Subject();
+    const dragMove$ = new rxjs.Subject();
+    const dragEnd$ = new rxjs.Subject();
+    const end = () => {
+      var _a2;
+      dragEnd$.next();
+      (_a2 = this.currentInteractable) == null ? void 0 : _a2.draggable(this.options);
+      this.endInteraction(this.pluginId, "position");
+    };
+    this.currentInteractable = interact__default(`.${core.bem("node", "wrapper")}[data-node-id]`).draggable(__spreadProps(__spreadValues({}, this.options), {
+      listeners: {
+        start: (event) => {
+          const target = event.target;
+          const nodeId = target.getAttribute("data-node-id");
+          if (!nodeId)
+            return;
+          dragStart$.next({
+            nodeId
+          });
+          this.startInteraction(this.pluginId, "position", core.InteractionPriority.EntityPositionDrag);
+        },
+        move: (event) => {
+          if (!this.canInteract(this.pluginId, "position")) {
+            end();
+            return;
+          }
+          const scale = this.canvasScale;
+          dragMove$.next({
+            dx: event.dx / scale,
+            dy: event.dy / scale
+          });
+        },
+        // 拖拽结束
+        end
+      }
+    })).on("down", (event) => this.updateInteractableOptions(event));
+    this.options = __spreadValues({}, this.currentInteractable.draggable());
+    this.subscription = dragStart$.pipe(
+      // 对每次拖拽开始事件，创建一个新的拖拽流程
+      operators.switchMap((startEvent) => {
+        var _a2;
+        const draftId = `${this.pluginId}-${startEvent.nodeId}`;
+        const { nodeId } = startEvent;
+        const startPosition = (_a2 = this.getNode(nodeId)) == null ? void 0 : _a2.position;
+        const currentPosition = { x: (startPosition == null ? void 0 : startPosition.x) || 0, y: (startPosition == null ? void 0 : startPosition.y) || 0 };
+        this.dispatchNodeOperation({
+          type: "startDraft",
+          draftId
+        });
+        return dragMove$.pipe(
+          operators.skip(1),
+          operators.map((moveEvent) => {
+            currentPosition.x += moveEvent.dx;
+            currentPosition.y += moveEvent.dy;
+            return {
+              nodeId,
+              position: currentPosition
+            };
+          }),
+          operators.tap((moveData) => {
+            this.dispatchNodeOperation({
+              type: "draftOperation",
+              draftId,
+              operation: {
+                type: "update",
+                id: moveData.nodeId,
+                data: {
+                  position: {
+                    x: currentPosition.x,
+                    y: currentPosition.y
+                  }
+                }
+              }
+            });
+          }),
+          operators.takeUntil(
+            dragEnd$.pipe(
+              operators.tap(() => {
+                this.dispatchNodeOperation({
+                  type: "commitDraft",
+                  draftId
+                });
+              })
+            )
+          )
+        );
+      })
+    ).subscribe();
+    this.subscription.add(() => {
+      var _a2;
+      (_a2 = this.currentInteractable) == null ? void 0 : _a2.unset();
+      dragStart$.complete();
+      dragMove$.complete();
+      dragEnd$.complete();
+    });
+  }
+  destroy() {
+    var _a2;
+    (_a2 = this.subscription) == null ? void 0 : _a2.unsubscribe();
+  }
+}
+_init = __decoratorStart(_a);
+__decorateElement(_init, 1, "init", _init_dec, Drag);
+__decorateElement(_init, 1, "destroy", _destroy_dec, Drag);
+__decorateElement(_init, 5, "getNode", _getNode_dec, Drag);
+__decorateElement(_init, 5, "dispatchNodeOperation", _dispatchNodeOperation_dec, Drag);
+__decorateElement(_init, 5, "startInteraction", _startInteraction_dec, Drag);
+__decorateElement(_init, 5, "endInteraction", _endInteraction_dec, Drag);
+__decorateElement(_init, 5, "canInteract", _canInteract_dec, Drag);
+__decorateElement(_init, 5, "canvasScale", _canvasScale_dec, Drag);
+__decorateElement(_init, 5, "options", _options_dec, Drag);
+__decorateElement(_init, 5, "registerOptionsTransformer", _registerOptionsTransformer_dec, Drag);
+__decoratorMetadata(_init, Drag);
+
+exports.Drag = Drag;

package/dist/index.d.cts

@@ -0,0 +1,45 @@
+import { DraggableOptions as DraggableOptions$1 } from '@interactjs/actions/drag/plugin';
+import { NodeData, BasePlugin, NodeOperation, InteractionPriority } from '@knotx/core';
+
+type DraggableOptions = Omit<DraggableOptions$1, 'listeners'>;
+interface DragTransformerContext {
+    nodeId: string;
+    node: NodeData;
+    defaultOptions: DraggableOptions;
+    currentOptions: DraggableOptions;
+}
+type DragOptionsTransformer = (context: DragTransformerContext) => DraggableOptions | undefined;
+declare module '@knotx/core' {
+    interface PluginData {
+        drag: {
+            options: DraggableOptions;
+            registerOptionsTransformer: (transformer: DragOptionsTransformer) => () => void;
+        };
+    }
+}
+declare class Drag extends BasePlugin {
+    name: "drag";
+    getNode: (id: string) => NodeData | undefined;
+    dispatchNodeOperation: (operation: NodeOperation) => void;
+    startInteraction: (pluginId: string, type: string, priority: InteractionPriority) => void;
+    endInteraction: (pluginId: string, type: string) => void;
+    canInteract: (pluginId: string, type: string, autoStartPriority?: InteractionPriority) => boolean;
+    canvasScale: number;
+    private subscription?;
+    private transformers$;
+    private currentInteractable?;
+    options: DraggableOptions;
+    registerOptionsTransformer: (transformer: DragOptionsTransformer) => () => void;
+    /**
+     * 应用所有转换器，生成最终的配置
+     */
+    private applyTransformers;
+    /**
+     * 更新 interactable 的配置
+     */
+    private updateInteractableOptions;
+    init(): void;
+    destroy(): void;
+}
+
+export { Drag, type DragOptionsTransformer, type DragTransformerContext, type DraggableOptions };

package/dist/index.d.mts

@@ -0,0 +1,45 @@
+import { DraggableOptions as DraggableOptions$1 } from '@interactjs/actions/drag/plugin';
+import { NodeData, BasePlugin, NodeOperation, InteractionPriority } from '@knotx/core';
+
+type DraggableOptions = Omit<DraggableOptions$1, 'listeners'>;
+interface DragTransformerContext {
+    nodeId: string;
+    node: NodeData;
+    defaultOptions: DraggableOptions;
+    currentOptions: DraggableOptions;
+}
+type DragOptionsTransformer = (context: DragTransformerContext) => DraggableOptions | undefined;
+declare module '@knotx/core' {
+    interface PluginData {
+        drag: {
+            options: DraggableOptions;
+            registerOptionsTransformer: (transformer: DragOptionsTransformer) => () => void;
+        };
+    }
+}
+declare class Drag extends BasePlugin {
+    name: "drag";
+    getNode: (id: string) => NodeData | undefined;
+    dispatchNodeOperation: (operation: NodeOperation) => void;
+    startInteraction: (pluginId: string, type: string, priority: InteractionPriority) => void;
+    endInteraction: (pluginId: string, type: string) => void;
+    canInteract: (pluginId: string, type: string, autoStartPriority?: InteractionPriority) => boolean;
+    canvasScale: number;
+    private subscription?;
+    private transformers$;
+    private currentInteractable?;
+    options: DraggableOptions;
+    registerOptionsTransformer: (transformer: DragOptionsTransformer) => () => void;
+    /**
+     * 应用所有转换器，生成最终的配置
+     */
+    private applyTransformers;
+    /**
+     * 更新 interactable 的配置
+     */
+    private updateInteractableOptions;
+    init(): void;
+    destroy(): void;
+}
+
+export { Drag, type DragOptionsTransformer, type DragTransformerContext, type DraggableOptions };

package/dist/index.d.ts

@@ -0,0 +1,45 @@
+import { DraggableOptions as DraggableOptions$1 } from '@interactjs/actions/drag/plugin';
+import { NodeData, BasePlugin, NodeOperation, InteractionPriority } from '@knotx/core';
+
+type DraggableOptions = Omit<DraggableOptions$1, 'listeners'>;
+interface DragTransformerContext {
+    nodeId: string;
+    node: NodeData;
+    defaultOptions: DraggableOptions;
+    currentOptions: DraggableOptions;
+}
+type DragOptionsTransformer = (context: DragTransformerContext) => DraggableOptions | undefined;
+declare module '@knotx/core' {
+    interface PluginData {
+        drag: {
+            options: DraggableOptions;
+            registerOptionsTransformer: (transformer: DragOptionsTransformer) => () => void;
+        };
+    }
+}
+declare class Drag extends BasePlugin {
+    name: "drag";
+    getNode: (id: string) => NodeData | undefined;
+    dispatchNodeOperation: (operation: NodeOperation) => void;
+    startInteraction: (pluginId: string, type: string, priority: InteractionPriority) => void;
+    endInteraction: (pluginId: string, type: string) => void;
+    canInteract: (pluginId: string, type: string, autoStartPriority?: InteractionPriority) => boolean;
+    canvasScale: number;
+    private subscription?;
+    private transformers$;
+    private currentInteractable?;
+    options: DraggableOptions;
+    registerOptionsTransformer: (transformer: DragOptionsTransformer) => () => void;
+    /**
+     * 应用所有转换器，生成最终的配置
+     */
+    private applyTransformers;
+    /**
+     * 更新 interactable 的配置
+     */
+    private updateInteractableOptions;
+    init(): void;
+    destroy(): void;
+}
+
+export { Drag, type DragOptionsTransformer, type DragTransformerContext, type DraggableOptions };

package/dist/index.mjs

@@ -0,0 +1,268 @@
+import { bem, BasePlugin, InteractionPriority } from '@knotx/core';
+import { inject, register, OnInit, OnDestroy } from '@knotx/decorators';
+import interact from 'interactjs';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { switchMap, skip, map, tap, takeUntil } from 'rxjs/operators';
+import '@knotx/plugins-canvas';
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => {
+  var _a2;
+  return [, , , __create((_a2 = base == null ? void 0 : base[__knownSymbol("metadata")]) != null ? _a2 : null)];
+};
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _destroy_dec, _init_dec, _registerOptionsTransformer_dec, _options_dec, _canvasScale_dec, _canInteract_dec, _endInteraction_dec, _startInteraction_dec, _dispatchNodeOperation_dec, _getNode_dec, _a, _init;
+const DEFAULT_OPTIONS = {
+  inertia: {
+    enabled: true
+  },
+  modifiers: [
+    interact.modifiers.restrictRect({
+      restriction: `.${bem("canvas", "wrapper")}`,
+      endOnly: true
+    })
+  ]
+};
+class Drag extends (_a = BasePlugin, _getNode_dec = [inject.getNode()], _dispatchNodeOperation_dec = [inject.dispatchNodeOperation()], _startInteraction_dec = [inject.startInteraction()], _endInteraction_dec = [inject.endInteraction()], _canInteract_dec = [inject.canInteract()], _canvasScale_dec = [inject.canvas.transform((state) => state.scale)], _options_dec = [register("options")], _registerOptionsTransformer_dec = [register("registerOptionsTransformer")], _init_dec = [OnInit], _destroy_dec = [OnDestroy], _a) {
+  constructor() {
+    super(...arguments);
+    __runInitializers(_init, 5, this);
+    __publicField(this, "name", "drag");
+    __publicField(this, "getNode", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __publicField(this, "dispatchNodeOperation", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __publicField(this, "startInteraction", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __publicField(this, "endInteraction", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    __publicField(this, "canInteract", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
+    __publicField(this, "canvasScale", __runInitializers(_init, 28, this, 1)), __runInitializers(_init, 31, this);
+    __publicField(this, "subscription");
+    __publicField(this, "transformers$", new BehaviorSubject([]));
+    __publicField(this, "currentInteractable");
+    __publicField(this, "options", __runInitializers(_init, 32, this, DEFAULT_OPTIONS)), __runInitializers(_init, 35, this);
+    __publicField(this, "registerOptionsTransformer", __runInitializers(_init, 36, this, (transformer) => {
+      const transformers = this.transformers$.value;
+      transformers.push(transformer);
+      this.transformers$.next(transformers);
+      return () => {
+        const currentTransformers = this.transformers$.value;
+        const index = currentTransformers.indexOf(transformer);
+        if (index > -1) {
+          currentTransformers.splice(index, 1);
+          this.transformers$.next(currentTransformers);
+        }
+      };
+    })), __runInitializers(_init, 39, this);
+  }
+  /**
+   * 应用所有转换器，生成最终的配置
+   */
+  applyTransformers(nodeId) {
+    const node = this.getNode(nodeId);
+    if (!node)
+      return this.options;
+    const context = {
+      nodeId,
+      node,
+      defaultOptions: this.options,
+      currentOptions: this.options
+    };
+    return this.transformers$.value.reduce(
+      (options, transformer) => {
+        var _a2;
+        context.currentOptions = options;
+        return (_a2 = transformer(context)) != null ? _a2 : options;
+      },
+      this.options
+    );
+  }
+  /**
+   * 更新 interactable 的配置
+   */
+  updateInteractableOptions(event) {
+    var _a2;
+    if (!this.currentInteractable)
+      return;
+    const target = ((_a2 = event.__set) == null ? void 0 : _a2.currentTarget) || event.target;
+    const nodeId = target.getAttribute("data-node-id");
+    if (!nodeId)
+      return;
+    const options = this.applyTransformers(nodeId);
+    this.currentInteractable.draggable(options);
+  }
+  init() {
+    const dragStart$ = new Subject();
+    const dragMove$ = new Subject();
+    const dragEnd$ = new Subject();
+    const end = () => {
+      var _a2;
+      dragEnd$.next();
+      (_a2 = this.currentInteractable) == null ? void 0 : _a2.draggable(this.options);
+      this.endInteraction(this.pluginId, "position");
+    };
+    this.currentInteractable = interact(`.${bem("node", "wrapper")}[data-node-id]`).draggable(__spreadProps(__spreadValues({}, this.options), {
+      listeners: {
+        start: (event) => {
+          const target = event.target;
+          const nodeId = target.getAttribute("data-node-id");
+          if (!nodeId)
+            return;
+          dragStart$.next({
+            nodeId
+          });
+          this.startInteraction(this.pluginId, "position", InteractionPriority.EntityPositionDrag);
+        },
+        move: (event) => {
+          if (!this.canInteract(this.pluginId, "position")) {
+            end();
+            return;
+          }
+          const scale = this.canvasScale;
+          dragMove$.next({
+            dx: event.dx / scale,
+            dy: event.dy / scale
+          });
+        },
+        // 拖拽结束
+        end
+      }
+    })).on("down", (event) => this.updateInteractableOptions(event));
+    this.options = __spreadValues({}, this.currentInteractable.draggable());
+    this.subscription = dragStart$.pipe(
+      // 对每次拖拽开始事件，创建一个新的拖拽流程
+      switchMap((startEvent) => {
+        var _a2;
+        const draftId = `${this.pluginId}-${startEvent.nodeId}`;
+        const { nodeId } = startEvent;
+        const startPosition = (_a2 = this.getNode(nodeId)) == null ? void 0 : _a2.position;
+        const currentPosition = { x: (startPosition == null ? void 0 : startPosition.x) || 0, y: (startPosition == null ? void 0 : startPosition.y) || 0 };
+        this.dispatchNodeOperation({
+          type: "startDraft",
+          draftId
+        });
+        return dragMove$.pipe(
+          skip(1),
+          map((moveEvent) => {
+            currentPosition.x += moveEvent.dx;
+            currentPosition.y += moveEvent.dy;
+            return {
+              nodeId,
+              position: currentPosition
+            };
+          }),
+          tap((moveData) => {
+            this.dispatchNodeOperation({
+              type: "draftOperation",
+              draftId,
+              operation: {
+                type: "update",
+                id: moveData.nodeId,
+                data: {
+                  position: {
+                    x: currentPosition.x,
+                    y: currentPosition.y
+                  }
+                }
+              }
+            });
+          }),
+          takeUntil(
+            dragEnd$.pipe(
+              tap(() => {
+                this.dispatchNodeOperation({
+                  type: "commitDraft",
+                  draftId
+                });
+              })
+            )
+          )
+        );
+      })
+    ).subscribe();
+    this.subscription.add(() => {
+      var _a2;
+      (_a2 = this.currentInteractable) == null ? void 0 : _a2.unset();
+      dragStart$.complete();
+      dragMove$.complete();
+      dragEnd$.complete();
+    });
+  }
+  destroy() {
+    var _a2;
+    (_a2 = this.subscription) == null ? void 0 : _a2.unsubscribe();
+  }
+}
+_init = __decoratorStart(_a);
+__decorateElement(_init, 1, "init", _init_dec, Drag);
+__decorateElement(_init, 1, "destroy", _destroy_dec, Drag);
+__decorateElement(_init, 5, "getNode", _getNode_dec, Drag);
+__decorateElement(_init, 5, "dispatchNodeOperation", _dispatchNodeOperation_dec, Drag);
+__decorateElement(_init, 5, "startInteraction", _startInteraction_dec, Drag);
+__decorateElement(_init, 5, "endInteraction", _endInteraction_dec, Drag);
+__decorateElement(_init, 5, "canInteract", _canInteract_dec, Drag);
+__decorateElement(_init, 5, "canvasScale", _canvasScale_dec, Drag);
+__decorateElement(_init, 5, "options", _options_dec, Drag);
+__decorateElement(_init, 5, "registerOptionsTransformer", _registerOptionsTransformer_dec, Drag);
+__decoratorMetadata(_init, Drag);
+
+export { Drag };

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@knotx/plugins-drag",
+  "type": "module",
+  "version": "0.0.0",
+  "description": "Drag Plugin for Knotx",
+  "author": "boenfu",
+  "license": "MIT",
+  "homepage": "https://github.com/boenfu/knotx#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/boenfu/knotx.git",
+    "directory": "packages/plugins-drag"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@interactjs/actions": "^1.10.27",
+    "@interactjs/core": "^1.10.27",
+    "@interactjs/modifiers": "^1.10.27",
+    "@interactjs/types": "^1.10.27",
+    "interactjs": "^1.10.27",
+    "rxjs": "^7.8.1",
+    "@knotx/decorators": "0.0.0",
+    "@knotx/plugins-canvas": "0.0.0",
+    "@knotx/core": "0.0.0"
+  },
+  "devDependencies": {
+    "@knotx/jsx": "0.0.0",
+    "@knotx/build-config": "0.0.0",
+    "@knotx/eslint-config": "0.0.0",
+    "@knotx/typescript-config": "0.0.0"
+  },
+  "scripts": {
+    "build": "unbuild --failOnWarn=false",
+    "dev": "unbuild --stub",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit"
+  }
+}