@knotx/plugins-minimap 0.0.0

package/dist/index.mjs

@@ -0,0 +1,521 @@
+import { jsxs, jsx } from '@knotx/jsx/jsx-runtime';
+import { bem, use, BasePlugin } from '@knotx/core';
+import { inject, panel, OnInit, OnDestroy } from '@knotx/decorators';
+import interact from 'interactjs';
+import { Subject } from 'rxjs';
+import { switchMap, map, tap, takeUntil } from 'rxjs/operators';
+
+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, _nodes_dec, _canvasRef_dec, _transform_dec, _container_dec, _a, _init;
+const defaultProps = {
+  width: 200,
+  height: 150,
+  maskColor: "rgba(240, 240, 240, 0.6)",
+  viewBoxColor: "#4752E6",
+  showControls: true,
+  zoomable: true,
+  pannable: true,
+  padding: 12,
+  nodeBorderRadius: 2,
+  nodeStrokeWidth: 1,
+  zoomStep: 0.2
+};
+function getNodesBounds(nodes) {
+  var _a2, _b;
+  if (!nodes.length)
+    return { x: 0, y: 0, width: 0, height: 0 };
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const node of nodes) {
+    const { x, y } = node.position;
+    const width = ((_a2 = node.measured) == null ? void 0 : _a2.width) || 0;
+    const height = ((_b = node.measured) == null ? void 0 : _b.height) || 0;
+    minX = Math.min(minX, x);
+    minY = Math.min(minY, y);
+    maxX = Math.max(maxX, x + width);
+    maxY = Math.max(maxY, y + height);
+  }
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY
+  };
+}
+function getBoundsOfRects(bounds1, bounds2) {
+  const minX = Math.min(bounds1.x, bounds2.x);
+  const minY = Math.min(bounds1.y, bounds2.y);
+  const maxX = Math.max(bounds1.x + bounds1.width, bounds2.x + bounds2.width);
+  const maxY = Math.max(bounds1.y + bounds1.height, bounds2.y + bounds2.height);
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY
+  };
+}
+class Minimap extends (_a = BasePlugin, _container_dec = [inject.container()], _transform_dec = [inject.canvas.transform()], _canvasRef_dec = [inject.canvas.ref()], _nodes_dec = [inject.nodes()], _init_dec = [OnInit], _destroy_dec = [OnDestroy], _render_dec = [panel("right-bottom")], _a) {
+  constructor(props = {}) {
+    super();
+    this.props = props;
+    __runInitializers(_init, 5, this);
+    __publicField(this, "name", "minimap");
+    __publicField(this, "options");
+    __publicField(this, "subscription");
+    __publicField(this, "currentInteractable");
+    __publicField(this, "dragStart$", new Subject());
+    __publicField(this, "dragMove$", new Subject());
+    __publicField(this, "dragEnd$", new Subject());
+    __publicField(this, "container", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __publicField(this, "transform", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __publicField(this, "canvasRef", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __publicField(this, "nodes", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    /**
+     * 处理小地图上的点击事件，移动视图
+     */
+    __publicField(this, "handleMinimapClick", (event) => {
+      if (!this.options.pannable || !this.canvasRef)
+        return;
+      const svg = event.currentTarget;
+      const svgRect = svg.getBoundingClientRect();
+      const { left, top } = svgRect;
+      const svgPoint = {
+        x: event.clientX - left,
+        y: event.clientY - top
+      };
+      const { pointX, pointY } = this.getSvgToGraphCoordinates(svgPoint, svgRect);
+      const { scale } = this.transform;
+      const newPositionX = -pointX * scale + this.container.width / 2;
+      const newPositionY = -pointY * scale + this.container.height / 2;
+      this.canvasRef.setTransform(newPositionX, newPositionY, scale, 300);
+    });
+    /**
+     * 处理缩放按钮点击事件
+     */
+    __publicField(this, "handleZoom", (isZoomIn) => {
+      if (!this.options.zoomable || !this.canvasRef)
+        return;
+      const step = this.options.zoomStep;
+      if (isZoomIn) {
+        this.canvasRef.zoomIn(step, 300);
+      } else {
+        this.canvasRef.zoomOut(step, 300);
+      }
+    });
+    /**
+     * 重置视图
+     */
+    __publicField(this, "handleReset", () => {
+      if (!this.canvasRef)
+        return;
+      this.canvasRef.resetTransform(300);
+    });
+    this.options = __spreadProps(__spreadValues(__spreadValues({}, defaultProps), props), {
+      nodeColor: props.nodeColor || "#AB7BFE",
+      nodeStrokeColor: props.nodeStrokeColor || "transparent"
+    });
+  }
+  get classNames() {
+    return {
+      wrapper: bem(this.name, "wrapper"),
+      svg: bem(this.name, "svg"),
+      viewBox: bem(this.name, "view-box"),
+      mask: bem(this.name, "mask"),
+      node: bem(this.name, "node"),
+      control: bem(this.name, "control"),
+      zoomIn: bem(this.name, "zoom-in"),
+      zoomOut: bem(this.name, "zoom-out"),
+      reset: bem(this.name, "reset")
+    };
+  }
+  /**
+   * 计算视图变换和缩放
+   */
+  getViewTransform() {
+    const nodesBounds = getNodesBounds(this.nodes);
+    const viewRect = {
+      x: -this.transform.positionX / this.transform.scale,
+      y: -this.transform.positionY / this.transform.scale,
+      width: this.container.width / this.transform.scale,
+      height: this.container.height / this.transform.scale
+    };
+    const boundingRect = this.nodes.length > 0 ? getBoundsOfRects(nodesBounds, viewRect) : viewRect;
+    const { width: elementWidth, height: elementHeight } = this.options;
+    const scaledWidth = boundingRect.width / elementWidth;
+    const scaledHeight = boundingRect.height / elementHeight;
+    const viewScale = Math.max(scaledWidth, scaledHeight, 0.1);
+    const viewWidth = viewScale * elementWidth;
+    const viewHeight = viewScale * elementHeight;
+    const offset = this.options.padding * viewScale;
+    const x = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset;
+    const y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset;
+    const width = viewWidth + offset * 2;
+    const height = viewHeight + offset * 2;
+    return {
+      viewRect,
+      boundingRect,
+      offset,
+      viewBox: `${x} ${y} ${width} ${height}`,
+      viewScale,
+      x,
+      y,
+      width,
+      height
+    };
+  }
+  /**
+   * 计算节点颜色
+   */
+  getNodeColor(node) {
+    const { nodeColor } = this.options;
+    return typeof nodeColor === "function" ? nodeColor(node) : nodeColor;
+  }
+  /**
+   * 计算节点边框颜色
+   */
+  getNodeStrokeColor(node) {
+    const { nodeStrokeColor } = this.options;
+    return typeof nodeStrokeColor === "function" ? nodeStrokeColor(node) : nodeStrokeColor;
+  }
+  /**
+   * 从SVG坐标转换为流程图坐标
+   */
+  getSvgToGraphCoordinates(svgPoint, svgRect) {
+    const transform = this.getViewTransform();
+    const relativeX = svgPoint.x / svgRect.width;
+    const relativeY = svgPoint.y / svgRect.height;
+    const pointX = transform.x + relativeX * transform.width;
+    const pointY = transform.y + relativeY * transform.height;
+    return { pointX, pointY };
+  }
+  init() {
+    this.setupDragStream();
+    this.setupInteractable();
+  }
+  /**
+   * 设置拖拽流
+   */
+  setupDragStream() {
+    this.subscription = this.dragStart$.pipe(
+      // 对每次拖拽开始事件，创建一个新的拖拽流程
+      switchMap((startEvent) => {
+        const { startPositionX, startPositionY } = startEvent;
+        const viewTransform = this.getViewTransform();
+        const moveFactorX = this.transform.scale / viewTransform.viewScale;
+        const moveFactorY = this.transform.scale / viewTransform.viewScale;
+        let newPositionX = startPositionX;
+        let newPositionY = startPositionY;
+        return this.dragMove$.pipe(
+          // 计算新的位置
+          map((moveEvent) => {
+            const deltaX = moveEvent.dx / moveFactorX;
+            const deltaY = moveEvent.dy / moveFactorY;
+            newPositionX -= deltaX;
+            newPositionY -= deltaY;
+            return { newPositionX, newPositionY };
+          }),
+          // 实时更新位置
+          tap(({ newPositionX: newPositionX2, newPositionY: newPositionY2 }) => {
+            if (!this.canvasRef)
+              return;
+            this.canvasRef.setTransform(newPositionX2, newPositionY2, this.transform.scale, 0);
+          }),
+          // 直到拖拽结束
+          takeUntil(this.dragEnd$)
+        );
+      })
+    ).subscribe();
+  }
+  /**
+   * 初始化 interact.js 的拖拽功能
+   */
+  setupInteractable() {
+    if (this.currentInteractable)
+      return;
+    this.currentInteractable = interact(`.${this.classNames.viewBox}[data-plugin-id="${this.pluginId}"]`).draggable({
+      listeners: {
+        // 开始拖拽时，记录初始状态
+        start: (event) => {
+          if (!this.canvasRef)
+            return;
+          this.dragStart$.next({
+            x: event.clientX,
+            y: event.clientY,
+            startPositionX: this.transform.positionX,
+            startPositionY: this.transform.positionY
+          });
+        },
+        // 拖拽过程中，发送位移信息
+        move: (event) => {
+          this.dragMove$.next({
+            dx: event.dx,
+            dy: event.dy
+          });
+        },
+        // 拖拽结束
+        end: () => {
+          this.dragEnd$.next();
+        }
+      },
+      cursorChecker: () => "move"
+    });
+  }
+  destroy() {
+    var _a2, _b;
+    (_a2 = this.subscription) == null ? void 0 : _a2.unsubscribe();
+    (_b = this.currentInteractable) == null ? void 0 : _b.unset();
+    this.dragStart$.complete();
+    this.dragMove$.complete();
+    this.dragEnd$.complete();
+  }
+  render() {
+    const { wrapper, svg, mask, control, zoomIn, zoomOut, reset, viewBox } = this.classNames;
+    const { width, height, viewBoxColor, maskColor, showControls, nodeBorderRadius, nodeStrokeWidth } = this.options;
+    const container = use(() => this.container);
+    const transform = use(() => this.transform);
+    const nodes = use(() => this.nodes);
+    if (!container || !transform)
+      return null;
+    const viewTransform = this.getViewTransform();
+    const { viewBox: viewBoxAttr, viewRect } = viewTransform;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: wrapper,
+        style: {
+          width,
+          height: height + (showControls ? 30 : 0),
+          background: "white",
+          borderRadius: "4px",
+          boxShadow: "0 2px 5px rgba(0, 0, 0, 0.1)",
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden",
+          userSelect: "none"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: svg,
+              width,
+              height,
+              viewBox: viewBoxAttr,
+              onClick: this.handleMinimapClick,
+              style: {
+                cursor: this.options.pannable ? "pointer" : "default",
+                userSelect: "none",
+                flexShrink: 0
+              },
+              children: [
+                nodes.map((node) => {
+                  if (!node.measured)
+                    return null;
+                  const { x, y } = node.position;
+                  const width2 = node.measured.width || 0;
+                  const height2 = node.measured.height || 0;
+                  return /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      className: this.classNames.node,
+                      x,
+                      y,
+                      width: width2,
+                      height: height2,
+                      fill: this.getNodeColor(node),
+                      stroke: this.getNodeStrokeColor(node),
+                      strokeWidth: nodeStrokeWidth,
+                      rx: nodeBorderRadius,
+                      ry: nodeBorderRadius
+                    },
+                    node.id
+                  );
+                }),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    className: mask,
+                    d: `M${viewTransform.x - viewTransform.offset},${viewTransform.y - viewTransform.offset}
+               h${viewTransform.width + viewTransform.offset * 2}
+               v${viewTransform.height + viewTransform.offset * 2}
+               h${-viewTransform.width - viewTransform.offset * 2}z
+               M${viewRect.x},${viewRect.y}
+               h${viewRect.width}
+               v${viewRect.height}
+               h${-viewRect.width}z`,
+                    fill: maskColor,
+                    fillRule: "evenodd",
+                    pointerEvents: "none"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    className: viewBox,
+                    "data-plugin-id": this.pluginId,
+                    x: viewRect.x,
+                    y: viewRect.y,
+                    width: viewRect.width,
+                    height: viewRect.height,
+                    fill: "transparent",
+                    stroke: viewBoxColor,
+                    strokeWidth: 2,
+                    style: {
+                      cursor: "move",
+                      pointerEvents: "all"
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          showControls && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: control,
+              style: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                padding: "4px 0",
+                gap: "12px"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: zoomIn,
+                    onClick: () => this.handleZoom(true),
+                    disabled: !this.options.zoomable,
+                    style: {
+                      border: "none",
+                      background: "none",
+                      cursor: this.options.zoomable ? "pointer" : "default",
+                      fontSize: "16px",
+                      color: "#555",
+                      padding: "2px 6px"
+                    },
+                    children: "+"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: zoomOut,
+                    onClick: () => this.handleZoom(false),
+                    disabled: !this.options.zoomable,
+                    style: {
+                      border: "none",
+                      background: "none",
+                      cursor: this.options.zoomable ? "pointer" : "default",
+                      fontSize: "16px",
+                      color: "#555",
+                      padding: "2px 6px"
+                    },
+                    children: "-"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: reset,
+                    onClick: this.handleReset,
+                    style: {
+                      border: "none",
+                      background: "none",
+                      cursor: "pointer",
+                      fontSize: "14px",
+                      color: "#555",
+                      padding: "2px 6px"
+                    },
+                    children: "reset"
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+}
+_init = __decoratorStart(_a);
+__decorateElement(_init, 1, "init", _init_dec, Minimap);
+__decorateElement(_init, 1, "destroy", _destroy_dec, Minimap);
+__decorateElement(_init, 1, "render", _render_dec, Minimap);
+__decorateElement(_init, 5, "container", _container_dec, Minimap);
+__decorateElement(_init, 5, "transform", _transform_dec, Minimap);
+__decorateElement(_init, 5, "canvasRef", _canvasRef_dec, Minimap);
+__decorateElement(_init, 5, "nodes", _nodes_dec, Minimap);
+__decoratorMetadata(_init, Minimap);
+
+export { Minimap };

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@knotx/plugins-minimap",
+  "type": "module",
+  "version": "0.0.0",
+  "description": "Minimap 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-minimap"
+  },
+  "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"
+  ],
+  "peerDependencies": {
+    "interactjs": "^1.10.27"
+  },
+  "dependencies": {
+    "@interactjs/actions": "^1.10.27",
+    "@interactjs/core": "^1.10.27",
+    "@interactjs/modifiers": "^1.10.27",
+    "@interactjs/types": "^1.10.27",
+    "rxjs": "^7.8.1",
+    "@knotx/core": "0.0.0",
+    "@knotx/decorators": "0.0.0",
+    "@knotx/plugins-canvas": "0.0.0"
+  },
+  "devDependencies": {
+    "interactjs": "^1.10.27",
+    "@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"
+  }
+}