@knotx/plugins-group 0.0.0

package/dist/index.mjs

@@ -0,0 +1,499 @@
+import { jsx } from '@knotx/jsx/jsx-runtime';
+import { isDraftOperation, isInitOperation, bem, BasePlugin } from '@knotx/core';
+import { DualRelation } from '@knotx/data';
+import { inject, nodeType, register, OnInit, OnDestroy } from '@knotx/decorators';
+import { skip, pipe, tap, map } from 'rxjs';
+import '@knotx/plugins-base-render';
+
+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 _moveGroup_dec, _removeNodesFromGroup_dec, _addNodesToGroup_dec, _deleteGroup_dec, _dissolveGroup_dec, _createGroup_dec, _renderGroup_dec, _destroy_dec, _init_dec, _registerNodeLevelGetter_dec, _addNodePipe_dec, _dispatchNodeOperation_dec, _getNodeDraft_dec, _getNode_dec, _a, _init;
+const _Group = class _Group extends (_a = BasePlugin, _getNode_dec = [inject.getNode()], _getNodeDraft_dec = [inject.getNodeDraft()], _dispatchNodeOperation_dec = [inject.dispatchNodeOperation()], _addNodePipe_dec = [inject.addNodePipe()], _registerNodeLevelGetter_dec = [inject.baseRender.registerNodeLevelGetter()], _init_dec = [OnInit], _destroy_dec = [OnDestroy], _renderGroup_dec = [nodeType("group")], _createGroup_dec = [register("createGroup")], _dissolveGroup_dec = [register("dissolveGroup")], _deleteGroup_dec = [register("deleteGroup")], _addNodesToGroup_dec = [register("addNodesToGroup")], _removeNodesFromGroup_dec = [register("removeNodesFromGroup")], _moveGroup_dec = [register("moveGroup")], _a) {
+  constructor() {
+    super(...arguments);
+    __runInitializers(_init, 5, this);
+    __publicField(this, "name", "group");
+    __publicField(this, "getNode", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __publicField(this, "getNodeDraft", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __publicField(this, "dispatchNodeOperation", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __publicField(this, "addNodePipe", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    __publicField(this, "registerNodeLevelGetter", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
+    __publicField(this, "dualRelation", new DualRelation());
+    __publicField(this, "subscriptions", []);
+    __publicField(this, "createGroup", __runInitializers(_init, 28, this, ({ id: groupId, nodeIds, config, data = {} }) => {
+      const { autoBounds = true, padding = _Group.DEFAULT_GROUP_PADDING, style = _Group.DEFAULT_GROUP_STYLE } = config || {};
+      const groupNode = {
+        id: groupId,
+        type: "group",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data,
+        groupConfig: {
+          autoBounds,
+          padding,
+          style
+        }
+      };
+      const bounds = this.calculateBounds(groupNode, {
+        getChildren: () => nodeIds
+      });
+      groupNode.position = {
+        x: (bounds == null ? void 0 : bounds.x) || 0,
+        y: (bounds == null ? void 0 : bounds.y) || 0
+      };
+      groupNode.measured = {
+        width: (bounds == null ? void 0 : bounds.width) || 0,
+        height: (bounds == null ? void 0 : bounds.height) || 0
+      };
+      this.dispatchNodeOperation({
+        type: "batch",
+        operations: [
+          {
+            type: "add",
+            data: groupNode
+          },
+          ...nodeIds.map((id) => ({
+            type: "update",
+            id,
+            data: {
+              group: groupId
+            }
+          }))
+        ]
+      });
+      return groupId;
+    })), __runInitializers(_init, 31, this);
+    __publicField(this, "dissolveGroup", __runInitializers(_init, 32, this, (groupId) => {
+      this.dispatchNodeOperation({
+        type: "batch",
+        operations: [
+          {
+            type: "remove",
+            id: groupId
+          },
+          ...Array.from(this.dualRelation.getChildren(groupId)).map((id) => ({
+            type: "update",
+            id,
+            data: {
+              group: void 0
+            }
+          }))
+        ]
+      });
+      return true;
+    })), __runInitializers(_init, 35, this);
+    __publicField(this, "deleteGroup", __runInitializers(_init, 36, this, (groupId, recursive = false) => {
+      const children = Array.from(recursive ? this.dualRelation.getDescendants(groupId) : this.dualRelation.getChildren(groupId));
+      if (children.length === 0) {
+        this.dispatchNodeOperation({
+          type: "remove",
+          id: groupId
+        });
+        return true;
+      }
+      this.dispatchNodeOperation({
+        type: "batch",
+        operations: [
+          {
+            type: "remove",
+            id: groupId
+          },
+          ...children.map((id) => ({
+            type: "remove",
+            id
+          }))
+        ]
+      });
+      return true;
+    })), __runInitializers(_init, 39, this);
+    __publicField(this, "addNodesToGroup", __runInitializers(_init, 40, this, (groupId, nodeIds) => {
+      const groupNode = this.getNode(groupId);
+      if (!groupNode || groupNode.type !== "group") {
+        return false;
+      }
+      const validNodeIds = nodeIds.filter((id) => {
+        const node = this.getNode(id);
+        return node && node.group !== groupId;
+      });
+      if (validNodeIds.length === 0) {
+        return true;
+      }
+      this.dispatchNodeOperation({
+        type: "batch",
+        operations: validNodeIds.map((id) => ({
+          type: "update",
+          id,
+          data: {
+            group: groupId
+          }
+        }))
+      });
+      return true;
+    })), __runInitializers(_init, 43, this);
+    __publicField(this, "removeNodesFromGroup", __runInitializers(_init, 44, this, (groupId, nodeIds) => {
+      const groupNode = this.getNode(groupId);
+      if (!groupNode || groupNode.type !== "group") {
+        return false;
+      }
+      const validNodeIds = nodeIds.filter((id) => {
+        const node = this.getNode(id);
+        return node && node.group === groupId;
+      });
+      if (validNodeIds.length === 0) {
+        return true;
+      }
+      this.dispatchNodeOperation({
+        type: "batch",
+        operations: validNodeIds.map((id) => ({
+          type: "update",
+          id,
+          data: {
+            group: void 0
+          }
+        }))
+      });
+      return true;
+    })), __runInitializers(_init, 47, this);
+    __publicField(this, "moveGroup", __runInitializers(_init, 48, this, (groupId, position, isDelta = false) => {
+      const operation = this.buildMoveGroupOperation(groupId, position, isDelta);
+      if (operation.type === "batch" && operation.operations.length === 0) {
+        return false;
+      }
+      this.dispatchNodeOperation(operation);
+      return true;
+    })), __runInitializers(_init, 51, this);
+  }
+  init() {
+    this.subscriptions.push(
+      this.dualRelation.version.pipe(skip(1)).subscribe((version) => {
+        console.warn("dualRelation version changed", version, this.dualRelation.changeHistory);
+      })
+    );
+    this.subscriptions.push({
+      unsubscribe: this.registerNodeLevelGetter((node) => {
+        return this.dualRelation.getNodeLevel(node.id);
+      })
+    });
+    this.addNodePipe({
+      transform: () => pipe(
+        // 组关系维护检测
+        tap((operation) => {
+          if (isDraftOperation(operation)) {
+            return;
+          }
+          const checkRelation = (operation2) => {
+            switch (operation2.type) {
+              case "batch":
+                for (const op of operation2.operations) {
+                  checkRelation(op);
+                }
+                break;
+              case "add":
+                if (operation2.data.group) {
+                  this.dualRelation.add(operation2.data.group, operation2.data.id);
+                }
+                break;
+              case "update": {
+                const currentNode = this.getNode(operation2.id);
+                if (!("group" in operation2.data) || operation2.data.group === (currentNode == null ? void 0 : currentNode.group)) {
+                  return;
+                }
+                if (currentNode == null ? void 0 : currentNode.group) {
+                  this.dualRelation.removeChild(currentNode.id);
+                }
+                if (operation2.data.group) {
+                  this.dualRelation.add(operation2.data.group, operation2.id);
+                }
+                break;
+              }
+              case "remove":
+                this.dualRelation.removeParent(operation2.id);
+                this.dualRelation.removeChild(operation2.id);
+                break;
+            }
+          };
+          this.dualRelation.batch(() => {
+            checkRelation(operation);
+          });
+        }),
+        map((operation) => {
+          if (isInitOperation(operation)) {
+            const groupNodesMap = /* @__PURE__ */ new Map();
+            operation.operations.forEach((op) => {
+              if (op.type !== "add" || !op.data.group) {
+                return;
+              }
+              groupNodesMap.set(op.data.id, op.data);
+            });
+            return __spreadProps(__spreadValues({}, operation), { operations: operation.operations.map((op) => {
+              if (op.type !== "add" || op.data.type !== "group") {
+                return op;
+              }
+              const bounds = this.calculateBounds(op.data, {
+                getNode: (id) => groupNodesMap.get(id)
+              });
+              return __spreadProps(__spreadValues({}, op), {
+                data: __spreadProps(__spreadValues({}, op.data), {
+                  position: {
+                    x: (bounds == null ? void 0 : bounds.x) || 0,
+                    y: (bounds == null ? void 0 : bounds.y) || 0
+                  },
+                  measured: {
+                    width: (bounds == null ? void 0 : bounds.width) || 0,
+                    height: (bounds == null ? void 0 : bounds.height) || 0
+                  }
+                })
+              });
+            }) });
+          }
+          const isDraft = isDraftOperation(operation);
+          if (isDraft && operation.type === "draftOperation") {
+            switch (operation.operation.type) {
+              case "update": {
+                if (!operation.operation.data.position) {
+                  return operation;
+                }
+                const groupMoveOperation = this.buildMoveGroupOperation(operation.operation.id, operation.operation.data.position);
+                if (!groupMoveOperation.operations.length) {
+                  return operation;
+                }
+                return {
+                  type: "draftOperation",
+                  draftId: operation.draftId,
+                  operation: groupMoveOperation
+                };
+              }
+            }
+          }
+          return operation;
+        })
+      )
+    });
+  }
+  destroy() {
+    this.subscriptions.forEach((subscription) => subscription.unsubscribe());
+  }
+  renderGroup({ node: groupNode }) {
+    const getNode = (id) => this.getNodeDraft(id) || this.getNode(id);
+    const bounds = this.calculateBounds(groupNode, { getNode });
+    if (!bounds)
+      return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: _Group.GROUP_WRAPPER_CLASSNAME,
+        style: __spreadProps(__spreadValues({
+          width: `${bounds.width}px`,
+          height: `${bounds.height}px`
+        }, groupNode.groupConfig ? groupNode.groupConfig.style : _Group.DEFAULT_GROUP_STYLE), {
+          pointerEvents: "all"
+        })
+      },
+      groupNode.id
+    );
+  }
+  calculateBounds(node, {
+    getChildren = (nodeId) => Array.from(this.dualRelation.getChildren(nodeId)),
+    getNode = this.getNode
+  } = {}) {
+    var _a2, _b, _c;
+    const { padding = 0, autoBounds } = (_a2 = node.groupConfig) != null ? _a2 : {
+      padding: _Group.DEFAULT_GROUP_PADDING,
+      autoBounds: true
+    };
+    if (!autoBounds && node.position && node.measured) {
+      return {
+        x: node.position.x - padding,
+        y: node.position.y - padding,
+        width: node.measured.width + padding * 2,
+        height: node.measured.height + padding * 2
+      };
+    }
+    const nodeIds = getChildren(node.id);
+    if (!nodeIds.length)
+      return null;
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    let hasValidNode = false;
+    for (const nodeId of nodeIds) {
+      const node2 = getNode(nodeId);
+      if (!node2)
+        continue;
+      hasValidNode = true;
+      const { x, y } = node2.position;
+      const width = ((_b = node2.measured) == null ? void 0 : _b.width) || 0;
+      const height = ((_c = node2.measured) == null ? void 0 : _c.height) || 0;
+      minX = Math.min(minX, x);
+      minY = Math.min(minY, y);
+      maxX = Math.max(maxX, x + width);
+      maxY = Math.max(maxY, y + height);
+    }
+    if (!hasValidNode)
+      return null;
+    return {
+      x: minX - padding,
+      y: minY - padding,
+      width: maxX - minX + padding * 2,
+      height: maxY - minY + padding * 2
+    };
+  }
+  buildMoveGroupOperation(groupId, position, isDelta = false) {
+    const groupNode = this.getNode(groupId);
+    if (!groupNode || groupNode.type !== "group") {
+      return {
+        type: "batch",
+        operations: []
+      };
+    }
+    const children = Array.from(this.dualRelation.getDescendants(groupId));
+    if (children.length === 0) {
+      return {
+        type: "batch",
+        operations: []
+      };
+    }
+    const currentPosition = groupNode.position;
+    let dx = 0;
+    let dy = 0;
+    if (isDelta) {
+      dx = position.x;
+      dy = position.y;
+    } else {
+      dx = position.x - currentPosition.x;
+      dy = position.y - currentPosition.y;
+    }
+    if (dx === 0 && dy === 0) {
+      return {
+        type: "batch",
+        operations: []
+      };
+    }
+    return {
+      type: "batch",
+      operations: [
+        {
+          type: "update",
+          id: groupId,
+          data: {
+            position: {
+              x: isDelta ? currentPosition.x + position.x : position.x,
+              y: isDelta ? currentPosition.y + position.y : position.y
+            }
+          }
+        },
+        ...children.map((id) => {
+          var _a2;
+          const nodePosition = ((_a2 = this.getNode(id)) == null ? void 0 : _a2.position) || { x: 0, y: 0 };
+          return {
+            type: "update",
+            id,
+            data: {
+              position: {
+                x: nodePosition.x + dx,
+                y: nodePosition.y + dy
+              }
+            }
+          };
+        })
+      ]
+    };
+  }
+};
+_init = __decoratorStart(_a);
+__decorateElement(_init, 1, "init", _init_dec, _Group);
+__decorateElement(_init, 1, "destroy", _destroy_dec, _Group);
+__decorateElement(_init, 1, "renderGroup", _renderGroup_dec, _Group);
+__decorateElement(_init, 5, "getNode", _getNode_dec, _Group);
+__decorateElement(_init, 5, "getNodeDraft", _getNodeDraft_dec, _Group);
+__decorateElement(_init, 5, "dispatchNodeOperation", _dispatchNodeOperation_dec, _Group);
+__decorateElement(_init, 5, "addNodePipe", _addNodePipe_dec, _Group);
+__decorateElement(_init, 5, "registerNodeLevelGetter", _registerNodeLevelGetter_dec, _Group);
+__decorateElement(_init, 5, "createGroup", _createGroup_dec, _Group);
+__decorateElement(_init, 5, "dissolveGroup", _dissolveGroup_dec, _Group);
+__decorateElement(_init, 5, "deleteGroup", _deleteGroup_dec, _Group);
+__decorateElement(_init, 5, "addNodesToGroup", _addNodesToGroup_dec, _Group);
+__decorateElement(_init, 5, "removeNodesFromGroup", _removeNodesFromGroup_dec, _Group);
+__decorateElement(_init, 5, "moveGroup", _moveGroup_dec, _Group);
+__decoratorMetadata(_init, _Group);
+__publicField(_Group, "GROUP_WRAPPER_CLASSNAME", bem("group", "wrapper"));
+__publicField(_Group, "DEFAULT_GROUP_PADDING", 10);
+__publicField(_Group, "DEFAULT_GROUP_STYLE", {
+  backgroundColor: "rgba(0, 100, 255, 0.05)",
+  borderColor: "rgba(0, 100, 255, 0.3)",
+  borderWidth: 1,
+  borderStyle: "solid",
+  borderRadius: 4
+});
+let Group = _Group;
+
+export { Group };

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@knotx/plugins-group",
+  "type": "module",
+  "version": "0.0.0",
+  "description": "Group 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-group"
+  },
+  "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": {
+    "rxjs": "^7.8.1",
+    "@knotx/core": "0.0.0",
+    "@knotx/decorators": "0.0.0",
+    "@knotx/data": "0.0.0",
+    "@knotx/plugins-base-render": "0.0.0"
+  },
+  "devDependencies": {
+    "@knotx/build-config": "0.0.0",
+    "@knotx/eslint-config": "0.0.0",
+    "@knotx/typescript-config": "0.0.0",
+    "@knotx/jsx": "0.0.0"
+  },
+  "scripts": {
+    "build": "unbuild --failOnWarn=false",
+    "dev": "unbuild --stub",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit"
+  }
+}