@knotx/plugins-bounding 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,497 @@
+'use strict';
+
+const jsxRuntime = require('@knotx/jsx/jsx-runtime');
+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 _render_dec, _destroy_dec, _init_dec, _getResizeHandleAttributes_dec, _canvasScale_dec, _canInteract_dec, _endInteraction_dec, _startInteraction_dec, _dispatchNodeOperation_dec, _getNode_dec, _nodes_dec, _a, _init;
+const DEFAULT_CONNECT_HANDLE_POSITIONS = [
+  { top: true },
+  { right: true },
+  { bottom: true },
+  { left: true }
+];
+const DEFAULT_OPTIONS = {
+  features: {
+    resize: true,
+    connect: true,
+    boundingBox: true
+  },
+  sizes: {
+    resizeHandle: 6,
+    connectHandle: 5,
+    boundingBoxThreshold: 8
+  },
+  styles: {
+    resizeHandle: {
+      fill: "#fff",
+      stroke: "var(--knotx-plugin__bounding-resize-handle-color, #6366f1)",
+      strokeWidth: 1
+    },
+    connectHandle: {
+      fill: "var(--knotx-primary-color, #6366f1)",
+      stroke: "#fff",
+      strokeWidth: 1
+    },
+    boundingBox: {
+      stroke: "var(--knotx-plugin__bounding-resize-handle-color, #6366f1)",
+      strokeWidth: 1
+    }
+  },
+  resize: {
+    minWidth: 30,
+    minHeight: 30,
+    inertia: true,
+    handles: [
+      "left-top",
+      "right-top",
+      "right-bottom",
+      "left-bottom"
+    ]
+  }
+};
+class Bounding extends (_a = core.BasePlugin, _nodes_dec = [decorators.inject.nodes()], _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)], _getResizeHandleAttributes_dec = [decorators.register("getCustomResizeHandleAttributes")], _init_dec = [decorators.OnInit], _destroy_dec = [decorators.OnDestroy], _render_dec = [decorators.layer(core.Layer.Nodes, 1)], _a) {
+  constructor(options = {}) {
+    var _a2, _b, _c, _d, _e, _f;
+    super();
+    this.options = options;
+    __runInitializers(_init, 5, this);
+    __publicField(this, "name", "bounding");
+    __publicField(this, "nodes", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __publicField(this, "getNode", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __publicField(this, "dispatchNodeOperation", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __publicField(this, "startInteraction", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    __publicField(this, "endInteraction", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
+    __publicField(this, "canInteract", __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
+    __publicField(this, "canvasScale", __runInitializers(_init, 32, this, 1)), __runInitializers(_init, 35, this);
+    __publicField(this, "subscription");
+    __publicField(this, "resizeHandleClassName", core.bem(this.name, "resize-handle"));
+    __publicField(this, "connectHandleClassName", core.bem(this.name, "connect-handle"));
+    __publicField(this, "boundingBoxClassName", core.bem(this.name, "bounding-box"));
+    __publicField(this, "getResizeHandleAttributes", __runInitializers(_init, 36, this, (nodeId, position) => {
+      return {
+        "className": this.resizeHandleClassName,
+        "data-plugin-id": this.pluginId,
+        "data-resize-target": nodeId,
+        "data-resize-handle-position": position
+      };
+    })), __runInitializers(_init, 39, this);
+    this.options = __spreadProps(__spreadValues(__spreadValues({}, DEFAULT_OPTIONS), options), {
+      features: __spreadValues(__spreadValues({}, DEFAULT_OPTIONS.features), options.features),
+      sizes: __spreadValues(__spreadValues({}, DEFAULT_OPTIONS.sizes), options.sizes),
+      styles: {
+        resizeHandle: __spreadValues(__spreadValues({}, (_a2 = DEFAULT_OPTIONS.styles) == null ? void 0 : _a2.resizeHandle), (_b = options.styles) == null ? void 0 : _b.resizeHandle),
+        connectHandle: __spreadValues(__spreadValues({}, (_c = DEFAULT_OPTIONS.styles) == null ? void 0 : _c.connectHandle), (_d = options.styles) == null ? void 0 : _d.connectHandle),
+        boundingBox: __spreadValues(__spreadValues({}, (_e = DEFAULT_OPTIONS.styles) == null ? void 0 : _e.boundingBox), (_f = options.styles) == null ? void 0 : _f.boundingBox)
+      },
+      resize: __spreadValues(__spreadValues({}, DEFAULT_OPTIONS.resize), options.resize)
+    });
+  }
+  init() {
+    var _a2, _b, _c, _d, _e, _f;
+    const resizeStart$ = new rxjs.Subject();
+    const resizeMove$ = new rxjs.Subject();
+    const resizeEnd$ = new rxjs.Subject();
+    const startResize = (nodeId, position) => {
+      const node = this.getNode(nodeId);
+      if (!(node == null ? void 0 : node.measured))
+        return;
+      resizeStart$.next({
+        nodeId,
+        startWidth: node.measured.width,
+        startHeight: node.measured.height,
+        startX: node.position.x,
+        startY: node.position.y,
+        position
+      });
+      this.startInteraction(this.pluginId, "resize", core.InteractionPriority.EntityMeasureDrag);
+    };
+    const endResize = () => {
+      resizeEnd$.next();
+      this.endInteraction(this.pluginId, "resize");
+    };
+    const updateResize = (event) => {
+      if (!this.canInteract(this.pluginId, "resize")) {
+        endResize();
+        return;
+      }
+      const scale = this.canvasScale;
+      resizeMove$.next({
+        dx: event.dx / scale,
+        dy: event.dy / scale
+      });
+    };
+    if ((_a2 = this.options.features) == null ? void 0 : _a2.resize) {
+      const currentInteractable = interact__default(`[data-plugin-id="${this.pluginId}"].${this.resizeHandleClassName}`).resizable({
+        edges: { left: true, right: true, bottom: true, top: true },
+        inertia: (_b = this.options.resize) == null ? void 0 : _b.inertia,
+        cursorChecker: (_action, _interactable, element) => {
+          var _a3;
+          const position = (_a3 = element.getAttribute("data-resize-handle-position")) != null ? _a3 : "";
+          return this.getCursorStyle(position);
+        },
+        listeners: {
+          start: (event) => {
+            const nodeId = event.target.getAttribute("data-resize-target");
+            const position = event.target.getAttribute("data-resize-handle-position");
+            if (!nodeId)
+              return;
+            startResize(nodeId, position);
+          },
+          move: updateResize,
+          end: endResize
+        }
+      });
+      this.subscription = resizeStart$.pipe(
+        operators.switchMap((startEvent) => {
+          const draftId = `${this.pluginId}-${startEvent.nodeId}`;
+          const { nodeId, startWidth, startHeight, startX, startY, position } = startEvent;
+          let currentWidth = startWidth;
+          let currentHeight = startHeight;
+          let currentX = startX;
+          let currentY = startY;
+          this.dispatchNodeOperation({
+            type: "startDraft",
+            draftId
+          });
+          return resizeMove$.pipe(
+            operators.map((moveEvent) => {
+              var _a3, _b2, _c2, _d2;
+              let nextWidth = currentWidth;
+              let nextHeight = currentHeight;
+              let nextX = currentX;
+              let nextY = currentY;
+              const minWidth = (_b2 = (_a3 = this.options.resize) == null ? void 0 : _a3.minWidth) != null ? _b2 : 30;
+              const minHeight = (_d2 = (_c2 = this.options.resize) == null ? void 0 : _c2.minHeight) != null ? _d2 : 30;
+              if (position.includes("right")) {
+                nextWidth = Math.max(minWidth, currentWidth + moveEvent.dx);
+              }
+              if (position.includes("left")) {
+                const deltaX = Math.min(moveEvent.dx, currentWidth - minWidth);
+                nextX = currentX + deltaX;
+                nextWidth = currentWidth - deltaX;
+              }
+              if (position.includes("bottom")) {
+                nextHeight = Math.max(minHeight, currentHeight + moveEvent.dy);
+              }
+              if (position.includes("top")) {
+                const deltaY = Math.min(moveEvent.dy, currentHeight - minHeight);
+                nextY = currentY + deltaY;
+                nextHeight = currentHeight - deltaY;
+              }
+              currentWidth = nextWidth;
+              currentHeight = nextHeight;
+              currentX = nextX;
+              currentY = nextY;
+              return {
+                nodeId,
+                width: currentWidth,
+                height: currentHeight,
+                x: currentX,
+                y: currentY
+              };
+            }),
+            operators.tap((resizeData) => {
+              const node = this.getNode(resizeData.nodeId);
+              if (node) {
+                this.dispatchNodeOperation({
+                  type: "draftOperation",
+                  draftId,
+                  operation: {
+                    type: "update",
+                    id: resizeData.nodeId,
+                    data: {
+                      position: {
+                        x: resizeData.x,
+                        y: resizeData.y
+                      },
+                      measured: {
+                        width: resizeData.width,
+                        height: resizeData.height
+                      }
+                    }
+                  }
+                });
+              }
+            }),
+            operators.takeUntil(resizeEnd$.pipe(
+              operators.tap(() => {
+                this.dispatchNodeOperation({
+                  type: "commitDraft",
+                  draftId
+                });
+              })
+            ))
+          );
+        })
+      ).subscribe();
+      this.subscription.add(() => {
+        currentInteractable == null ? void 0 : currentInteractable.unset();
+        resizeStart$.complete();
+        resizeMove$.complete();
+        resizeEnd$.complete();
+      });
+      if ((_c = this.options.features) == null ? void 0 : _c.boundingBox) {
+        const boundingInteractable = interact__default(`[data-plugin-id="${this.pluginId}"].${this.boundingBoxClassName}`).resizable({
+          enabled: (_d = this.options.features) == null ? void 0 : _d.resize,
+          edges: { left: true, right: true, bottom: true, top: true },
+          inertia: (_e = this.options.resize) == null ? void 0 : _e.inertia,
+          cursorChecker: (action) => this.getCursorStyle(this.getPositionByEdges(action.edges)),
+          listeners: {
+            start: (event) => {
+              const nodeId = event.target.getAttribute("data-resize-target");
+              const position = this.getPositionByEdges(event.edges);
+              if (!nodeId)
+                return;
+              startResize(nodeId, position);
+            },
+            move: updateResize,
+            end: endResize
+          }
+        });
+        (_f = this.subscription) == null ? void 0 : _f.add(() => boundingInteractable.unset());
+      }
+    }
+  }
+  destroy() {
+    var _a2;
+    (_a2 = this.subscription) == null ? void 0 : _a2.unsubscribe();
+  }
+  render() {
+    var _a2;
+    const nodes = core.use(() => this.nodes);
+    const pluginId = this.pluginId;
+    const nodesType = (_a2 = this.options.resize) == null ? void 0 : _a2.nodesType;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        style: {
+          position: "absolute",
+          left: 0,
+          top: 0,
+          pointerEvents: "none",
+          overflow: "visible"
+        },
+        children: nodes.map((node) => {
+          var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
+          const { position: { x, y }, measured, type } = node;
+          if (!measured)
+            return null;
+          if (nodesType && !nodesType.includes(type))
+            return null;
+          const { width, height } = measured;
+          const resizeSize = (_c = (_a3 = this.options.sizes) == null ? void 0 : _a3.resizeHandle) != null ? _c : (_b = DEFAULT_OPTIONS.sizes) == null ? void 0 : _b.resizeHandle;
+          const resizeStyles = (_f = (_d = this.options.styles) == null ? void 0 : _d.resizeHandle) != null ? _f : (_e = DEFAULT_OPTIONS.styles) == null ? void 0 : _e.resizeHandle;
+          const connectSize = (_i = (_g = this.options.sizes) == null ? void 0 : _g.connectHandle) != null ? _i : (_h = DEFAULT_OPTIONS.sizes) == null ? void 0 : _h.connectHandle;
+          const connectStyles = (_l = (_j = this.options.styles) == null ? void 0 : _j.connectHandle) != null ? _l : (_k = DEFAULT_OPTIONS.styles) == null ? void 0 : _k.connectHandle;
+          return /* @__PURE__ */ jsxRuntime.jsxs("g", { style: { pointerEvents: "auto" }, children: [
+            ((_m = this.options.features) == null ? void 0 : _m.boundingBox) && /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                className: this.boundingBoxClassName,
+                "data-plugin-id": this.pluginId,
+                "data-resize-target": node.id,
+                x,
+                y,
+                width,
+                height,
+                fill: "none",
+                stroke: (_o = (_n = this.options.styles) == null ? void 0 : _n.boundingBox) == null ? void 0 : _o.stroke,
+                strokeWidth: (_q = (_p = this.options.styles) == null ? void 0 : _p.boundingBox) == null ? void 0 : _q.strokeWidth,
+                style: { pointerEvents: "auto" }
+              }
+            ),
+            ((_r = this.options.features) == null ? void 0 : _r.resize) && ((_t = (_s = this.options.resize) == null ? void 0 : _s.handles) == null ? void 0 : _t.map((position, index) => {
+              let handleX = x;
+              let handleY = y;
+              const [xPosition, yPosition] = position.split("-");
+              switch (xPosition) {
+                case "right":
+                  handleX += width;
+                  break;
+                case "left":
+                  break;
+                default:
+                  handleX += width / 2;
+                  break;
+              }
+              switch (yPosition != null ? yPosition : xPosition) {
+                case "bottom":
+                  handleY += height;
+                  break;
+                case "top":
+                  break;
+                default:
+                  handleY += height / 2;
+                  break;
+              }
+              return /* @__PURE__ */ jsxRuntime.jsx("g", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                "rect",
+                __spreadProps(__spreadValues({}, this.getResizeHandleAttributes(node.id, position)), {
+                  x: handleX - resizeSize / 2,
+                  y: handleY - resizeSize / 2,
+                  width: resizeSize,
+                  height: resizeSize,
+                  fill: resizeStyles == null ? void 0 : resizeStyles.fill,
+                  stroke: resizeStyles == null ? void 0 : resizeStyles.stroke,
+                  strokeWidth: resizeStyles == null ? void 0 : resizeStyles.strokeWidth
+                })
+              ) }, `resize-${index}`);
+            })),
+            ((_u = this.options.features) == null ? void 0 : _u.connect) && DEFAULT_CONNECT_HANDLE_POSITIONS.map((position, index) => {
+              let handleX = x + width / 2;
+              let handleY = y + height / 2;
+              if (position.right)
+                handleX = x + width;
+              if (position.left)
+                handleX = x;
+              if (position.bottom)
+                handleY = y + height;
+              if (position.top)
+                handleY = y;
+              return /* @__PURE__ */ jsxRuntime.jsx("g", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  className: this.connectHandleClassName,
+                  "data-plugin-id": pluginId,
+                  "data-handle-target": node.id,
+                  cx: handleX,
+                  cy: handleY,
+                  r: connectSize,
+                  fill: connectStyles == null ? void 0 : connectStyles.fill,
+                  stroke: connectStyles == null ? void 0 : connectStyles.stroke,
+                  strokeWidth: connectStyles == null ? void 0 : connectStyles.strokeWidth
+                }
+              ) }, `connect-${index}`);
+            })
+          ] }, node.id);
+        })
+      }
+    );
+  }
+  getCursorStyle(position) {
+    switch (position) {
+      case "left-top":
+      case "right-bottom":
+        return "nwse-resize";
+      case "right-top":
+      case "left-bottom":
+        return "nesw-resize";
+      case "left":
+      case "right":
+        return "ew-resize";
+      case "top":
+      case "bottom":
+        return "ns-resize";
+      default:
+        return "default";
+    }
+  }
+  getPositionByEdges(edges) {
+    const positions = [];
+    if (edges == null ? void 0 : edges.left) {
+      positions.push("left");
+    }
+    if (edges == null ? void 0 : edges.right) {
+      positions.push("right");
+    }
+    if (edges == null ? void 0 : edges.top) {
+      positions.push("top");
+    }
+    if (edges == null ? void 0 : edges.bottom) {
+      positions.push("bottom");
+    }
+    return positions.join("-");
+  }
+}
+_init = __decoratorStart(_a);
+__decorateElement(_init, 1, "init", _init_dec, Bounding);
+__decorateElement(_init, 1, "destroy", _destroy_dec, Bounding);
+__decorateElement(_init, 1, "render", _render_dec, Bounding);
+__decorateElement(_init, 5, "nodes", _nodes_dec, Bounding);
+__decorateElement(_init, 5, "getNode", _getNode_dec, Bounding);
+__decorateElement(_init, 5, "dispatchNodeOperation", _dispatchNodeOperation_dec, Bounding);
+__decorateElement(_init, 5, "startInteraction", _startInteraction_dec, Bounding);
+__decorateElement(_init, 5, "endInteraction", _endInteraction_dec, Bounding);
+__decorateElement(_init, 5, "canInteract", _canInteract_dec, Bounding);
+__decorateElement(_init, 5, "canvasScale", _canvasScale_dec, Bounding);
+__decorateElement(_init, 5, "getResizeHandleAttributes", _getResizeHandleAttributes_dec, Bounding);
+__decoratorMetadata(_init, Bounding);
+
+exports.Bounding = Bounding;

package/dist/index.d.cts

@@ -0,0 +1,103 @@
+import { HorizontalAlignment, VerticalAlignment, BasePlugin, NodeData, NodeOperation, InteractionPriority } from '@knotx/core';
+
+declare module '@knotx/core' {
+    interface PluginData {
+        bounding: {
+            /**
+             * 获取自定义的 resize handle 属性
+             * @param nodeId 节点 ID
+             * @param position 位置
+             * @returns 属性对象
+             */
+            getCustomResizeHandleAttributes: (nodeId: string, position: ResizeHandlePosition) => Record<string, string>;
+        };
+    }
+}
+interface ResizeEvent {
+    nodeId: string;
+    startWidth: number;
+    startHeight: number;
+    startX: number;
+    startY: number;
+    position: string;
+}
+interface ResizeData {
+    nodeId: string;
+    width: number;
+    height: number;
+}
+interface ConnectHandlePosition {
+    top?: boolean;
+    right?: boolean;
+    bottom?: boolean;
+    left?: boolean;
+}
+type ResizeHandlePosition = `${HorizontalAlignment}-${VerticalAlignment}` | HorizontalAlignment | VerticalAlignment;
+interface BoundingOptions {
+    features?: {
+        resize?: boolean;
+        connect?: boolean;
+        boundingBox?: boolean;
+    };
+    sizes?: {
+        resizeHandle?: number;
+        connectHandle?: number;
+        boundingBoxThreshold?: number;
+    };
+    styles?: {
+        resizeHandle?: {
+            fill?: string;
+            stroke?: string;
+            strokeWidth?: number;
+        };
+        connectHandle?: {
+            fill?: string;
+            stroke?: string;
+            strokeWidth?: number;
+            shadowColor?: string;
+            shadowWidth?: number;
+        };
+        boundingBox?: {
+            stroke?: string;
+            strokeWidth?: number;
+        };
+    };
+    resize?: {
+        minWidth?: number;
+        minHeight?: number;
+        inertia?: boolean;
+        /**
+         * default: @var DEFAULT_RESIZE_HANDLES
+         */
+        handles?: ResizeHandlePosition[];
+        /**
+         * 指定哪些节点类型可以被 resize
+         * 默认所有节点
+         */
+        nodesType?: string[];
+    };
+}
+declare class Bounding extends BasePlugin<'bounding'> {
+    private options;
+    name: "bounding";
+    nodes: NodeData[];
+    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 resizeHandleClassName;
+    private connectHandleClassName;
+    private boundingBoxClassName;
+    private getResizeHandleAttributes;
+    constructor(options?: BoundingOptions);
+    init(): void;
+    destroy(): void;
+    render(): JSX.Element;
+    private getCursorStyle;
+    private getPositionByEdges;
+}
+
+export { Bounding, type BoundingOptions, type ConnectHandlePosition, type ResizeData, type ResizeEvent, type ResizeHandlePosition };

package/dist/index.d.mts

@@ -0,0 +1,103 @@
+import { HorizontalAlignment, VerticalAlignment, BasePlugin, NodeData, NodeOperation, InteractionPriority } from '@knotx/core';
+
+declare module '@knotx/core' {
+    interface PluginData {
+        bounding: {
+            /**
+             * 获取自定义的 resize handle 属性
+             * @param nodeId 节点 ID
+             * @param position 位置
+             * @returns 属性对象
+             */
+            getCustomResizeHandleAttributes: (nodeId: string, position: ResizeHandlePosition) => Record<string, string>;
+        };
+    }
+}
+interface ResizeEvent {
+    nodeId: string;
+    startWidth: number;
+    startHeight: number;
+    startX: number;
+    startY: number;
+    position: string;
+}
+interface ResizeData {
+    nodeId: string;
+    width: number;
+    height: number;
+}
+interface ConnectHandlePosition {
+    top?: boolean;
+    right?: boolean;
+    bottom?: boolean;
+    left?: boolean;
+}
+type ResizeHandlePosition = `${HorizontalAlignment}-${VerticalAlignment}` | HorizontalAlignment | VerticalAlignment;
+interface BoundingOptions {
+    features?: {
+        resize?: boolean;
+        connect?: boolean;
+        boundingBox?: boolean;
+    };
+    sizes?: {
+        resizeHandle?: number;
+        connectHandle?: number;
+        boundingBoxThreshold?: number;
+    };
+    styles?: {
+        resizeHandle?: {
+            fill?: string;
+            stroke?: string;
+            strokeWidth?: number;
+        };
+        connectHandle?: {
+            fill?: string;
+            stroke?: string;
+            strokeWidth?: number;
+            shadowColor?: string;
+            shadowWidth?: number;
+        };
+        boundingBox?: {
+            stroke?: string;
+            strokeWidth?: number;
+        };
+    };
+    resize?: {
+        minWidth?: number;
+        minHeight?: number;
+        inertia?: boolean;
+        /**
+         * default: @var DEFAULT_RESIZE_HANDLES
+         */
+        handles?: ResizeHandlePosition[];
+        /**
+         * 指定哪些节点类型可以被 resize
+         * 默认所有节点
+         */
+        nodesType?: string[];
+    };
+}
+declare class Bounding extends BasePlugin<'bounding'> {
+    private options;
+    name: "bounding";
+    nodes: NodeData[];
+    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 resizeHandleClassName;
+    private connectHandleClassName;
+    private boundingBoxClassName;
+    private getResizeHandleAttributes;
+    constructor(options?: BoundingOptions);
+    init(): void;
+    destroy(): void;
+    render(): JSX.Element;
+    private getCursorStyle;
+    private getPositionByEdges;
+}
+
+export { Bounding, type BoundingOptions, type ConnectHandlePosition, type ResizeData, type ResizeEvent, type ResizeHandlePosition };

package/dist/index.d.ts

@@ -0,0 +1,103 @@
+import { HorizontalAlignment, VerticalAlignment, BasePlugin, NodeData, NodeOperation, InteractionPriority } from '@knotx/core';
+
+declare module '@knotx/core' {
+    interface PluginData {
+        bounding: {
+            /**
+             * 获取自定义的 resize handle 属性
+             * @param nodeId 节点 ID
+             * @param position 位置
+             * @returns 属性对象
+             */
+            getCustomResizeHandleAttributes: (nodeId: string, position: ResizeHandlePosition) => Record<string, string>;
+        };
+    }
+}
+interface ResizeEvent {
+    nodeId: string;
+    startWidth: number;
+    startHeight: number;
+    startX: number;
+    startY: number;
+    position: string;
+}
+interface ResizeData {
+    nodeId: string;
+    width: number;
+    height: number;
+}
+interface ConnectHandlePosition {
+    top?: boolean;
+    right?: boolean;
+    bottom?: boolean;
+    left?: boolean;
+}
+type ResizeHandlePosition = `${HorizontalAlignment}-${VerticalAlignment}` | HorizontalAlignment | VerticalAlignment;
+interface BoundingOptions {
+    features?: {
+        resize?: boolean;
+        connect?: boolean;
+        boundingBox?: boolean;
+    };
+    sizes?: {
+        resizeHandle?: number;
+        connectHandle?: number;
+        boundingBoxThreshold?: number;
+    };
+    styles?: {
+        resizeHandle?: {
+            fill?: string;
+            stroke?: string;
+            strokeWidth?: number;
+        };
+        connectHandle?: {
+            fill?: string;
+            stroke?: string;
+            strokeWidth?: number;
+            shadowColor?: string;
+            shadowWidth?: number;
+        };
+        boundingBox?: {
+            stroke?: string;
+            strokeWidth?: number;
+        };
+    };
+    resize?: {
+        minWidth?: number;
+        minHeight?: number;
+        inertia?: boolean;
+        /**
+         * default: @var DEFAULT_RESIZE_HANDLES
+         */
+        handles?: ResizeHandlePosition[];
+        /**
+         * 指定哪些节点类型可以被 resize
+         * 默认所有节点
+         */
+        nodesType?: string[];
+    };
+}
+declare class Bounding extends BasePlugin<'bounding'> {
+    private options;
+    name: "bounding";
+    nodes: NodeData[];
+    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 resizeHandleClassName;
+    private connectHandleClassName;
+    private boundingBoxClassName;
+    private getResizeHandleAttributes;
+    constructor(options?: BoundingOptions);
+    init(): void;
+    destroy(): void;
+    render(): JSX.Element;
+    private getCursorStyle;
+    private getPositionByEdges;
+}
+
+export { Bounding, type BoundingOptions, type ConnectHandlePosition, type ResizeData, type ResizeEvent, type ResizeHandlePosition };

package/dist/index.mjs

@@ -0,0 +1,491 @@
+import { jsx, jsxs } from '@knotx/jsx/jsx-runtime';
+import { Layer, bem, use, BasePlugin, InteractionPriority } from '@knotx/core';
+import { inject, register, layer, OnInit, OnDestroy } from '@knotx/decorators';
+import interact from 'interactjs';
+import { Subject } from 'rxjs';
+import { switchMap, 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 _render_dec, _destroy_dec, _init_dec, _getResizeHandleAttributes_dec, _canvasScale_dec, _canInteract_dec, _endInteraction_dec, _startInteraction_dec, _dispatchNodeOperation_dec, _getNode_dec, _nodes_dec, _a, _init;
+const DEFAULT_CONNECT_HANDLE_POSITIONS = [
+  { top: true },
+  { right: true },
+  { bottom: true },
+  { left: true }
+];
+const DEFAULT_OPTIONS = {
+  features: {
+    resize: true,
+    connect: true,
+    boundingBox: true
+  },
+  sizes: {
+    resizeHandle: 6,
+    connectHandle: 5,
+    boundingBoxThreshold: 8
+  },
+  styles: {
+    resizeHandle: {
+      fill: "#fff",
+      stroke: "var(--knotx-plugin__bounding-resize-handle-color, #6366f1)",
+      strokeWidth: 1
+    },
+    connectHandle: {
+      fill: "var(--knotx-primary-color, #6366f1)",
+      stroke: "#fff",
+      strokeWidth: 1
+    },
+    boundingBox: {
+      stroke: "var(--knotx-plugin__bounding-resize-handle-color, #6366f1)",
+      strokeWidth: 1
+    }
+  },
+  resize: {
+    minWidth: 30,
+    minHeight: 30,
+    inertia: true,
+    handles: [
+      "left-top",
+      "right-top",
+      "right-bottom",
+      "left-bottom"
+    ]
+  }
+};
+class Bounding extends (_a = BasePlugin, _nodes_dec = [inject.nodes()], _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)], _getResizeHandleAttributes_dec = [register("getCustomResizeHandleAttributes")], _init_dec = [OnInit], _destroy_dec = [OnDestroy], _render_dec = [layer(Layer.Nodes, 1)], _a) {
+  constructor(options = {}) {
+    var _a2, _b, _c, _d, _e, _f;
+    super();
+    this.options = options;
+    __runInitializers(_init, 5, this);
+    __publicField(this, "name", "bounding");
+    __publicField(this, "nodes", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __publicField(this, "getNode", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __publicField(this, "dispatchNodeOperation", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __publicField(this, "startInteraction", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    __publicField(this, "endInteraction", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
+    __publicField(this, "canInteract", __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
+    __publicField(this, "canvasScale", __runInitializers(_init, 32, this, 1)), __runInitializers(_init, 35, this);
+    __publicField(this, "subscription");
+    __publicField(this, "resizeHandleClassName", bem(this.name, "resize-handle"));
+    __publicField(this, "connectHandleClassName", bem(this.name, "connect-handle"));
+    __publicField(this, "boundingBoxClassName", bem(this.name, "bounding-box"));
+    __publicField(this, "getResizeHandleAttributes", __runInitializers(_init, 36, this, (nodeId, position) => {
+      return {
+        "className": this.resizeHandleClassName,
+        "data-plugin-id": this.pluginId,
+        "data-resize-target": nodeId,
+        "data-resize-handle-position": position
+      };
+    })), __runInitializers(_init, 39, this);
+    this.options = __spreadProps(__spreadValues(__spreadValues({}, DEFAULT_OPTIONS), options), {
+      features: __spreadValues(__spreadValues({}, DEFAULT_OPTIONS.features), options.features),
+      sizes: __spreadValues(__spreadValues({}, DEFAULT_OPTIONS.sizes), options.sizes),
+      styles: {
+        resizeHandle: __spreadValues(__spreadValues({}, (_a2 = DEFAULT_OPTIONS.styles) == null ? void 0 : _a2.resizeHandle), (_b = options.styles) == null ? void 0 : _b.resizeHandle),
+        connectHandle: __spreadValues(__spreadValues({}, (_c = DEFAULT_OPTIONS.styles) == null ? void 0 : _c.connectHandle), (_d = options.styles) == null ? void 0 : _d.connectHandle),
+        boundingBox: __spreadValues(__spreadValues({}, (_e = DEFAULT_OPTIONS.styles) == null ? void 0 : _e.boundingBox), (_f = options.styles) == null ? void 0 : _f.boundingBox)
+      },
+      resize: __spreadValues(__spreadValues({}, DEFAULT_OPTIONS.resize), options.resize)
+    });
+  }
+  init() {
+    var _a2, _b, _c, _d, _e, _f;
+    const resizeStart$ = new Subject();
+    const resizeMove$ = new Subject();
+    const resizeEnd$ = new Subject();
+    const startResize = (nodeId, position) => {
+      const node = this.getNode(nodeId);
+      if (!(node == null ? void 0 : node.measured))
+        return;
+      resizeStart$.next({
+        nodeId,
+        startWidth: node.measured.width,
+        startHeight: node.measured.height,
+        startX: node.position.x,
+        startY: node.position.y,
+        position
+      });
+      this.startInteraction(this.pluginId, "resize", InteractionPriority.EntityMeasureDrag);
+    };
+    const endResize = () => {
+      resizeEnd$.next();
+      this.endInteraction(this.pluginId, "resize");
+    };
+    const updateResize = (event) => {
+      if (!this.canInteract(this.pluginId, "resize")) {
+        endResize();
+        return;
+      }
+      const scale = this.canvasScale;
+      resizeMove$.next({
+        dx: event.dx / scale,
+        dy: event.dy / scale
+      });
+    };
+    if ((_a2 = this.options.features) == null ? void 0 : _a2.resize) {
+      const currentInteractable = interact(`[data-plugin-id="${this.pluginId}"].${this.resizeHandleClassName}`).resizable({
+        edges: { left: true, right: true, bottom: true, top: true },
+        inertia: (_b = this.options.resize) == null ? void 0 : _b.inertia,
+        cursorChecker: (_action, _interactable, element) => {
+          var _a3;
+          const position = (_a3 = element.getAttribute("data-resize-handle-position")) != null ? _a3 : "";
+          return this.getCursorStyle(position);
+        },
+        listeners: {
+          start: (event) => {
+            const nodeId = event.target.getAttribute("data-resize-target");
+            const position = event.target.getAttribute("data-resize-handle-position");
+            if (!nodeId)
+              return;
+            startResize(nodeId, position);
+          },
+          move: updateResize,
+          end: endResize
+        }
+      });
+      this.subscription = resizeStart$.pipe(
+        switchMap((startEvent) => {
+          const draftId = `${this.pluginId}-${startEvent.nodeId}`;
+          const { nodeId, startWidth, startHeight, startX, startY, position } = startEvent;
+          let currentWidth = startWidth;
+          let currentHeight = startHeight;
+          let currentX = startX;
+          let currentY = startY;
+          this.dispatchNodeOperation({
+            type: "startDraft",
+            draftId
+          });
+          return resizeMove$.pipe(
+            map((moveEvent) => {
+              var _a3, _b2, _c2, _d2;
+              let nextWidth = currentWidth;
+              let nextHeight = currentHeight;
+              let nextX = currentX;
+              let nextY = currentY;
+              const minWidth = (_b2 = (_a3 = this.options.resize) == null ? void 0 : _a3.minWidth) != null ? _b2 : 30;
+              const minHeight = (_d2 = (_c2 = this.options.resize) == null ? void 0 : _c2.minHeight) != null ? _d2 : 30;
+              if (position.includes("right")) {
+                nextWidth = Math.max(minWidth, currentWidth + moveEvent.dx);
+              }
+              if (position.includes("left")) {
+                const deltaX = Math.min(moveEvent.dx, currentWidth - minWidth);
+                nextX = currentX + deltaX;
+                nextWidth = currentWidth - deltaX;
+              }
+              if (position.includes("bottom")) {
+                nextHeight = Math.max(minHeight, currentHeight + moveEvent.dy);
+              }
+              if (position.includes("top")) {
+                const deltaY = Math.min(moveEvent.dy, currentHeight - minHeight);
+                nextY = currentY + deltaY;
+                nextHeight = currentHeight - deltaY;
+              }
+              currentWidth = nextWidth;
+              currentHeight = nextHeight;
+              currentX = nextX;
+              currentY = nextY;
+              return {
+                nodeId,
+                width: currentWidth,
+                height: currentHeight,
+                x: currentX,
+                y: currentY
+              };
+            }),
+            tap((resizeData) => {
+              const node = this.getNode(resizeData.nodeId);
+              if (node) {
+                this.dispatchNodeOperation({
+                  type: "draftOperation",
+                  draftId,
+                  operation: {
+                    type: "update",
+                    id: resizeData.nodeId,
+                    data: {
+                      position: {
+                        x: resizeData.x,
+                        y: resizeData.y
+                      },
+                      measured: {
+                        width: resizeData.width,
+                        height: resizeData.height
+                      }
+                    }
+                  }
+                });
+              }
+            }),
+            takeUntil(resizeEnd$.pipe(
+              tap(() => {
+                this.dispatchNodeOperation({
+                  type: "commitDraft",
+                  draftId
+                });
+              })
+            ))
+          );
+        })
+      ).subscribe();
+      this.subscription.add(() => {
+        currentInteractable == null ? void 0 : currentInteractable.unset();
+        resizeStart$.complete();
+        resizeMove$.complete();
+        resizeEnd$.complete();
+      });
+      if ((_c = this.options.features) == null ? void 0 : _c.boundingBox) {
+        const boundingInteractable = interact(`[data-plugin-id="${this.pluginId}"].${this.boundingBoxClassName}`).resizable({
+          enabled: (_d = this.options.features) == null ? void 0 : _d.resize,
+          edges: { left: true, right: true, bottom: true, top: true },
+          inertia: (_e = this.options.resize) == null ? void 0 : _e.inertia,
+          cursorChecker: (action) => this.getCursorStyle(this.getPositionByEdges(action.edges)),
+          listeners: {
+            start: (event) => {
+              const nodeId = event.target.getAttribute("data-resize-target");
+              const position = this.getPositionByEdges(event.edges);
+              if (!nodeId)
+                return;
+              startResize(nodeId, position);
+            },
+            move: updateResize,
+            end: endResize
+          }
+        });
+        (_f = this.subscription) == null ? void 0 : _f.add(() => boundingInteractable.unset());
+      }
+    }
+  }
+  destroy() {
+    var _a2;
+    (_a2 = this.subscription) == null ? void 0 : _a2.unsubscribe();
+  }
+  render() {
+    var _a2;
+    const nodes = use(() => this.nodes);
+    const pluginId = this.pluginId;
+    const nodesType = (_a2 = this.options.resize) == null ? void 0 : _a2.nodesType;
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        style: {
+          position: "absolute",
+          left: 0,
+          top: 0,
+          pointerEvents: "none",
+          overflow: "visible"
+        },
+        children: nodes.map((node) => {
+          var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
+          const { position: { x, y }, measured, type } = node;
+          if (!measured)
+            return null;
+          if (nodesType && !nodesType.includes(type))
+            return null;
+          const { width, height } = measured;
+          const resizeSize = (_c = (_a3 = this.options.sizes) == null ? void 0 : _a3.resizeHandle) != null ? _c : (_b = DEFAULT_OPTIONS.sizes) == null ? void 0 : _b.resizeHandle;
+          const resizeStyles = (_f = (_d = this.options.styles) == null ? void 0 : _d.resizeHandle) != null ? _f : (_e = DEFAULT_OPTIONS.styles) == null ? void 0 : _e.resizeHandle;
+          const connectSize = (_i = (_g = this.options.sizes) == null ? void 0 : _g.connectHandle) != null ? _i : (_h = DEFAULT_OPTIONS.sizes) == null ? void 0 : _h.connectHandle;
+          const connectStyles = (_l = (_j = this.options.styles) == null ? void 0 : _j.connectHandle) != null ? _l : (_k = DEFAULT_OPTIONS.styles) == null ? void 0 : _k.connectHandle;
+          return /* @__PURE__ */ jsxs("g", { style: { pointerEvents: "auto" }, children: [
+            ((_m = this.options.features) == null ? void 0 : _m.boundingBox) && /* @__PURE__ */ jsx(
+              "rect",
+              {
+                className: this.boundingBoxClassName,
+                "data-plugin-id": this.pluginId,
+                "data-resize-target": node.id,
+                x,
+                y,
+                width,
+                height,
+                fill: "none",
+                stroke: (_o = (_n = this.options.styles) == null ? void 0 : _n.boundingBox) == null ? void 0 : _o.stroke,
+                strokeWidth: (_q = (_p = this.options.styles) == null ? void 0 : _p.boundingBox) == null ? void 0 : _q.strokeWidth,
+                style: { pointerEvents: "auto" }
+              }
+            ),
+            ((_r = this.options.features) == null ? void 0 : _r.resize) && ((_t = (_s = this.options.resize) == null ? void 0 : _s.handles) == null ? void 0 : _t.map((position, index) => {
+              let handleX = x;
+              let handleY = y;
+              const [xPosition, yPosition] = position.split("-");
+              switch (xPosition) {
+                case "right":
+                  handleX += width;
+                  break;
+                case "left":
+                  break;
+                default:
+                  handleX += width / 2;
+                  break;
+              }
+              switch (yPosition != null ? yPosition : xPosition) {
+                case "bottom":
+                  handleY += height;
+                  break;
+                case "top":
+                  break;
+                default:
+                  handleY += height / 2;
+                  break;
+              }
+              return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+                "rect",
+                __spreadProps(__spreadValues({}, this.getResizeHandleAttributes(node.id, position)), {
+                  x: handleX - resizeSize / 2,
+                  y: handleY - resizeSize / 2,
+                  width: resizeSize,
+                  height: resizeSize,
+                  fill: resizeStyles == null ? void 0 : resizeStyles.fill,
+                  stroke: resizeStyles == null ? void 0 : resizeStyles.stroke,
+                  strokeWidth: resizeStyles == null ? void 0 : resizeStyles.strokeWidth
+                })
+              ) }, `resize-${index}`);
+            })),
+            ((_u = this.options.features) == null ? void 0 : _u.connect) && DEFAULT_CONNECT_HANDLE_POSITIONS.map((position, index) => {
+              let handleX = x + width / 2;
+              let handleY = y + height / 2;
+              if (position.right)
+                handleX = x + width;
+              if (position.left)
+                handleX = x;
+              if (position.bottom)
+                handleY = y + height;
+              if (position.top)
+                handleY = y;
+              return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: this.connectHandleClassName,
+                  "data-plugin-id": pluginId,
+                  "data-handle-target": node.id,
+                  cx: handleX,
+                  cy: handleY,
+                  r: connectSize,
+                  fill: connectStyles == null ? void 0 : connectStyles.fill,
+                  stroke: connectStyles == null ? void 0 : connectStyles.stroke,
+                  strokeWidth: connectStyles == null ? void 0 : connectStyles.strokeWidth
+                }
+              ) }, `connect-${index}`);
+            })
+          ] }, node.id);
+        })
+      }
+    );
+  }
+  getCursorStyle(position) {
+    switch (position) {
+      case "left-top":
+      case "right-bottom":
+        return "nwse-resize";
+      case "right-top":
+      case "left-bottom":
+        return "nesw-resize";
+      case "left":
+      case "right":
+        return "ew-resize";
+      case "top":
+      case "bottom":
+        return "ns-resize";
+      default:
+        return "default";
+    }
+  }
+  getPositionByEdges(edges) {
+    const positions = [];
+    if (edges == null ? void 0 : edges.left) {
+      positions.push("left");
+    }
+    if (edges == null ? void 0 : edges.right) {
+      positions.push("right");
+    }
+    if (edges == null ? void 0 : edges.top) {
+      positions.push("top");
+    }
+    if (edges == null ? void 0 : edges.bottom) {
+      positions.push("bottom");
+    }
+    return positions.join("-");
+  }
+}
+_init = __decoratorStart(_a);
+__decorateElement(_init, 1, "init", _init_dec, Bounding);
+__decorateElement(_init, 1, "destroy", _destroy_dec, Bounding);
+__decorateElement(_init, 1, "render", _render_dec, Bounding);
+__decorateElement(_init, 5, "nodes", _nodes_dec, Bounding);
+__decorateElement(_init, 5, "getNode", _getNode_dec, Bounding);
+__decorateElement(_init, 5, "dispatchNodeOperation", _dispatchNodeOperation_dec, Bounding);
+__decorateElement(_init, 5, "startInteraction", _startInteraction_dec, Bounding);
+__decorateElement(_init, 5, "endInteraction", _endInteraction_dec, Bounding);
+__decorateElement(_init, 5, "canInteract", _canInteract_dec, Bounding);
+__decorateElement(_init, 5, "canvasScale", _canvasScale_dec, Bounding);
+__decorateElement(_init, 5, "getResizeHandleAttributes", _getResizeHandleAttributes_dec, Bounding);
+__decoratorMetadata(_init, Bounding);
+
+export { Bounding };

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@knotx/plugins-bounding",
+  "type": "module",
+  "version": "0.0.0",
+  "description": "Bounding 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-bounding"
+  },
+  "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/plugins-canvas": "0.0.0",
+    "@knotx/decorators": "0.0.0",
+    "@knotx/core": "0.0.0",
+    "@knotx/render": "0.0.0"
+  },
+  "devDependencies": {
+    "@knotx/build-config": "0.0.0",
+    "@knotx/eslint-config": "0.0.0",
+    "@knotx/jsx": "0.0.0",
+    "@knotx/typescript-config": "0.0.0"
+  },
+  "scripts": {
+    "build": "unbuild --failOnWarn=false",
+    "dev": "unbuild --stub",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit"
+  }
+}