@knotx/plugins-minimap 0.0.6 → 0.2.1

package/dist/index.cjs

@@ -130,12 +130,11 @@ function getBoundsOfRects(bounds1, bounds2) {
   };
 }
 class Minimap extends (_a = core.BasePlugin, _container_dec = [decorators.inject.container()], _transform_dec = [decorators.inject.canvas.transform()], _canvasRef_dec = [decorators.inject.canvas.ref()], _nodes_dec = [decorators.inject.nodes()], _init_dec = [decorators.OnInit], _destroy_dec = [decorators.OnDestroy], _render_dec = [decorators.panel("right-bottom")], _a) {
-  constructor(props = {}) {
-    super();
-    this.props = props;
+  constructor() {
+    super(...arguments);
     __runInitializers(_init, 5, this);
     __publicField(this, "name", "minimap");
-    __publicField(this, "options");
+    __publicField(this, "config");
     __publicField(this, "subscription");
     __publicField(this, "currentInteractable");
     __publicField(this, "dragStart$", new rxjs.Subject());
@@ -149,7 +148,7 @@ class Minimap extends (_a = core.BasePlugin, _container_dec = [decorators.inject
      * 处理小地图上的点击事件，移动视图
      */
     __publicField(this, "handleMinimapClick", (event) => {
-      if (!this.options.pannable || !this.canvasRef)
+      if (!this.config.pannable || !this.canvasRef)
         return;
       const svg = event.currentTarget;
       const svgRect = svg.getBoundingClientRect();
@@ -168,9 +167,9 @@ class Minimap extends (_a = core.BasePlugin, _container_dec = [decorators.inject
      * 处理缩放按钮点击事件
      */
     __publicField(this, "handleZoom", (isZoomIn) => {
-      if (!this.options.zoomable || !this.canvasRef)
+      if (!this.config.zoomable || !this.canvasRef)
         return;
-      const step = this.options.zoomStep;
+      const step = this.config.zoomStep;
       if (isZoomIn) {
         this.canvasRef.zoomIn(step, 300);
       } else {
@@ -185,10 +184,6 @@ class Minimap extends (_a = core.BasePlugin, _container_dec = [decorators.inject
         return;
       this.canvasRef.resetTransform(300);
     });
-    this.options = __spreadProps(__spreadValues(__spreadValues({}, defaultProps), props), {
-      nodeColor: props.nodeColor || "#AB7BFE",
-      nodeStrokeColor: props.nodeStrokeColor || "transparent"
-    });
   }
   get classNames() {
     return {
@@ -215,13 +210,13 @@ class Minimap extends (_a = core.BasePlugin, _container_dec = [decorators.inject
       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 { width: elementWidth, height: elementHeight } = this.config;
     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 offset = this.config.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;
@@ -242,14 +237,14 @@ class Minimap extends (_a = core.BasePlugin, _container_dec = [decorators.inject
    * 计算节点颜色
    */
   getNodeColor(node) {
-    const { nodeColor } = this.options;
+    const { nodeColor } = this.config;
     return typeof nodeColor === "function" ? nodeColor(node) : nodeColor;
   }
   /**
    * 计算节点边框颜色
    */
   getNodeStrokeColor(node) {
-    const { nodeStrokeColor } = this.options;
+    const { nodeStrokeColor } = this.config;
     return typeof nodeStrokeColor === "function" ? nodeStrokeColor(node) : nodeStrokeColor;
   }
   /**
@@ -263,7 +258,11 @@ class Minimap extends (_a = core.BasePlugin, _container_dec = [decorators.inject
     const pointY = transform.y + relativeY * transform.height;
     return { pointX, pointY };
   }
-  init() {
+  init(config) {
+    this.config = __spreadProps(__spreadValues(__spreadValues({}, defaultProps), config), {
+      nodeColor: config.nodeColor || "#AB7BFE",
+      nodeStrokeColor: config.nodeStrokeColor || "transparent"
+    });
     this.setupDragStream();
     this.setupInteractable();
   }
@@ -345,7 +344,7 @@ class Minimap extends (_a = core.BasePlugin, _container_dec = [decorators.inject
   }
   render() {
     const { wrapper, svg, mask, control, zoomIn, zoomOut, reset, viewBox } = this.classNames;
-    const { width, height, viewBoxColor, maskColor, showControls, nodeBorderRadius, nodeStrokeWidth } = this.options;
+    const { width, height, viewBoxColor, maskColor, showControls, nodeBorderRadius, nodeStrokeWidth } = this.config;
     const container = core.use(() => this.container);
     const transform = core.use(() => this.transform);
     const nodes = core.use(() => this.nodes);
@@ -378,7 +377,7 @@ class Minimap extends (_a = core.BasePlugin, _container_dec = [decorators.inject
               viewBox: viewBoxAttr,
               onClick: this.handleMinimapClick,
               style: {
-                cursor: this.options.pannable ? "pointer" : "default",
+                cursor: this.config.pannable ? "pointer" : "default",
                 userSelect: "none",
                 flexShrink: 0
               },
@@ -461,11 +460,11 @@ class Minimap extends (_a = core.BasePlugin, _container_dec = [decorators.inject
                   {
                     className: zoomIn,
                     onClick: () => this.handleZoom(true),
-                    disabled: !this.options.zoomable,
+                    disabled: !this.config.zoomable,
                     style: {
                       border: "none",
                       background: "none",
-                      cursor: this.options.zoomable ? "pointer" : "default",
+                      cursor: this.config.zoomable ? "pointer" : "default",
                       fontSize: "16px",
                       color: "#555",
                       padding: "2px 6px"
@@ -478,11 +477,11 @@ class Minimap extends (_a = core.BasePlugin, _container_dec = [decorators.inject
                   {
                     className: zoomOut,
                     onClick: () => this.handleZoom(false),
-                    disabled: !this.options.zoomable,
+                    disabled: !this.config.zoomable,
                     style: {
                       border: "none",
                       background: "none",
-                      cursor: this.options.zoomable ? "pointer" : "default",
+                      cursor: this.config.zoomable ? "pointer" : "default",
                       fontSize: "16px",
                       color: "#555",
                       padding: "2px 6px"

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import { NodeData, BasePlugin, Container } from '@knotx/core';
 import { CanvasTransformState, CanvasRef } from '@knotx/plugins-canvas';
 
-interface MinimapProps {
+interface MinimapConfig {
     /**
      * 小地图宽度
      * @default 200
@@ -71,16 +71,14 @@ interface MinimapProps {
 /**
  * Minimap 插件 - 提供画布内容的缩略图预览和交互
  */
-declare class Minimap extends BasePlugin<'minimap'> {
-    private props;
+declare class Minimap extends BasePlugin<'minimap', MinimapConfig> {
     name: "minimap";
-    private options;
+    private config;
     private subscription?;
     private currentInteractable?;
     private dragStart$;
     private dragMove$;
     private dragEnd$;
-    constructor(props?: MinimapProps);
     container: Container;
     transform: CanvasTransformState;
     canvasRef: CanvasRef | null;
@@ -127,7 +125,7 @@ declare class Minimap extends BasePlugin<'minimap'> {
     /**
      * 初始化拖拽功能
      */
-    init(): void;
+    init(config: MinimapConfig): void;
     /**
      * 设置拖拽流
      */
@@ -143,4 +141,4 @@ declare class Minimap extends BasePlugin<'minimap'> {
     render(): JSX.Element | null;
 }
 
-export { Minimap, type MinimapProps };
+export { Minimap, type MinimapConfig };

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import { NodeData, BasePlugin, Container } from '@knotx/core';
 import { CanvasTransformState, CanvasRef } from '@knotx/plugins-canvas';
 
-interface MinimapProps {
+interface MinimapConfig {
     /**
      * 小地图宽度
      * @default 200
@@ -71,16 +71,14 @@ interface MinimapProps {
 /**
  * Minimap 插件 - 提供画布内容的缩略图预览和交互
  */
-declare class Minimap extends BasePlugin<'minimap'> {
-    private props;
+declare class Minimap extends BasePlugin<'minimap', MinimapConfig> {
     name: "minimap";
-    private options;
+    private config;
     private subscription?;
     private currentInteractable?;
     private dragStart$;
     private dragMove$;
     private dragEnd$;
-    constructor(props?: MinimapProps);
     container: Container;
     transform: CanvasTransformState;
     canvasRef: CanvasRef | null;
@@ -127,7 +125,7 @@ declare class Minimap extends BasePlugin<'minimap'> {
     /**
      * 初始化拖拽功能
      */
-    init(): void;
+    init(config: MinimapConfig): void;
     /**
      * 设置拖拽流
      */
@@ -143,4 +141,4 @@ declare class Minimap extends BasePlugin<'minimap'> {
     render(): JSX.Element | null;
 }
 
-export { Minimap, type MinimapProps };
+export { Minimap, type MinimapConfig };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { NodeData, BasePlugin, Container } from '@knotx/core';
 import { CanvasTransformState, CanvasRef } from '@knotx/plugins-canvas';
 
-interface MinimapProps {
+interface MinimapConfig {
     /**
      * 小地图宽度
      * @default 200
@@ -71,16 +71,14 @@ interface MinimapProps {
 /**
  * Minimap 插件 - 提供画布内容的缩略图预览和交互
  */
-declare class Minimap extends BasePlugin<'minimap'> {
-    private props;
+declare class Minimap extends BasePlugin<'minimap', MinimapConfig> {
     name: "minimap";
-    private options;
+    private config;
     private subscription?;
     private currentInteractable?;
     private dragStart$;
     private dragMove$;
     private dragEnd$;
-    constructor(props?: MinimapProps);
     container: Container;
     transform: CanvasTransformState;
     canvasRef: CanvasRef | null;
@@ -127,7 +125,7 @@ declare class Minimap extends BasePlugin<'minimap'> {
     /**
      * 初始化拖拽功能
      */
-    init(): void;
+    init(config: MinimapConfig): void;
     /**
      * 设置拖拽流
      */
@@ -143,4 +141,4 @@ declare class Minimap extends BasePlugin<'minimap'> {
     render(): JSX.Element | null;
 }
 
-export { Minimap, type MinimapProps };
+export { Minimap, type MinimapConfig };

package/dist/index.mjs

@@ -124,12 +124,11 @@ function getBoundsOfRects(bounds1, bounds2) {
   };
 }
 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;
+  constructor() {
+    super(...arguments);
     __runInitializers(_init, 5, this);
     __publicField(this, "name", "minimap");
-    __publicField(this, "options");
+    __publicField(this, "config");
     __publicField(this, "subscription");
     __publicField(this, "currentInteractable");
     __publicField(this, "dragStart$", new Subject());
@@ -143,7 +142,7 @@ class Minimap extends (_a = BasePlugin, _container_dec = [inject.container()], _
      * 处理小地图上的点击事件，移动视图
      */
     __publicField(this, "handleMinimapClick", (event) => {
-      if (!this.options.pannable || !this.canvasRef)
+      if (!this.config.pannable || !this.canvasRef)
         return;
       const svg = event.currentTarget;
       const svgRect = svg.getBoundingClientRect();
@@ -162,9 +161,9 @@ class Minimap extends (_a = BasePlugin, _container_dec = [inject.container()], _
      * 处理缩放按钮点击事件
      */
     __publicField(this, "handleZoom", (isZoomIn) => {
-      if (!this.options.zoomable || !this.canvasRef)
+      if (!this.config.zoomable || !this.canvasRef)
         return;
-      const step = this.options.zoomStep;
+      const step = this.config.zoomStep;
       if (isZoomIn) {
         this.canvasRef.zoomIn(step, 300);
       } else {
@@ -179,10 +178,6 @@ class Minimap extends (_a = BasePlugin, _container_dec = [inject.container()], _
         return;
       this.canvasRef.resetTransform(300);
     });
-    this.options = __spreadProps(__spreadValues(__spreadValues({}, defaultProps), props), {
-      nodeColor: props.nodeColor || "#AB7BFE",
-      nodeStrokeColor: props.nodeStrokeColor || "transparent"
-    });
   }
   get classNames() {
     return {
@@ -209,13 +204,13 @@ class Minimap extends (_a = BasePlugin, _container_dec = [inject.container()], _
       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 { width: elementWidth, height: elementHeight } = this.config;
     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 offset = this.config.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;
@@ -236,14 +231,14 @@ class Minimap extends (_a = BasePlugin, _container_dec = [inject.container()], _
    * 计算节点颜色
    */
   getNodeColor(node) {
-    const { nodeColor } = this.options;
+    const { nodeColor } = this.config;
     return typeof nodeColor === "function" ? nodeColor(node) : nodeColor;
   }
   /**
    * 计算节点边框颜色
    */
   getNodeStrokeColor(node) {
-    const { nodeStrokeColor } = this.options;
+    const { nodeStrokeColor } = this.config;
     return typeof nodeStrokeColor === "function" ? nodeStrokeColor(node) : nodeStrokeColor;
   }
   /**
@@ -257,7 +252,11 @@ class Minimap extends (_a = BasePlugin, _container_dec = [inject.container()], _
     const pointY = transform.y + relativeY * transform.height;
     return { pointX, pointY };
   }
-  init() {
+  init(config) {
+    this.config = __spreadProps(__spreadValues(__spreadValues({}, defaultProps), config), {
+      nodeColor: config.nodeColor || "#AB7BFE",
+      nodeStrokeColor: config.nodeStrokeColor || "transparent"
+    });
     this.setupDragStream();
     this.setupInteractable();
   }
@@ -339,7 +338,7 @@ class Minimap extends (_a = BasePlugin, _container_dec = [inject.container()], _
   }
   render() {
     const { wrapper, svg, mask, control, zoomIn, zoomOut, reset, viewBox } = this.classNames;
-    const { width, height, viewBoxColor, maskColor, showControls, nodeBorderRadius, nodeStrokeWidth } = this.options;
+    const { width, height, viewBoxColor, maskColor, showControls, nodeBorderRadius, nodeStrokeWidth } = this.config;
     const container = use(() => this.container);
     const transform = use(() => this.transform);
     const nodes = use(() => this.nodes);
@@ -372,7 +371,7 @@ class Minimap extends (_a = BasePlugin, _container_dec = [inject.container()], _
               viewBox: viewBoxAttr,
               onClick: this.handleMinimapClick,
               style: {
-                cursor: this.options.pannable ? "pointer" : "default",
+                cursor: this.config.pannable ? "pointer" : "default",
                 userSelect: "none",
                 flexShrink: 0
               },
@@ -455,11 +454,11 @@ class Minimap extends (_a = BasePlugin, _container_dec = [inject.container()], _
                   {
                     className: zoomIn,
                     onClick: () => this.handleZoom(true),
-                    disabled: !this.options.zoomable,
+                    disabled: !this.config.zoomable,
                     style: {
                       border: "none",
                       background: "none",
-                      cursor: this.options.zoomable ? "pointer" : "default",
+                      cursor: this.config.zoomable ? "pointer" : "default",
                       fontSize: "16px",
                       color: "#555",
                       padding: "2px 6px"
@@ -472,11 +471,11 @@ class Minimap extends (_a = BasePlugin, _container_dec = [inject.container()], _
                   {
                     className: zoomOut,
                     onClick: () => this.handleZoom(false),
-                    disabled: !this.options.zoomable,
+                    disabled: !this.config.zoomable,
                     style: {
                       border: "none",
                       background: "none",
-                      cursor: this.options.zoomable ? "pointer" : "default",
+                      cursor: this.config.zoomable ? "pointer" : "default",
                       fontSize: "16px",
                       color: "#555",
                       padding: "2px 6px"

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@knotx/plugins-minimap",
-  "type": "module",
-  "version": "0.0.6",
+  "version": "0.2.1",
   "description": "Minimap Plugin for Knotx",
   "author": "boenfu",
   "license": "MIT",
@@ -30,7 +29,8 @@
   ],
   "peerDependencies": {
     "interactjs": "^1.10.27",
-    "@knotx/plugins-canvas": "0.0.6"
+    "@knotx/jsx": "0.2.1",
+    "@knotx/plugins-canvas": "0.2.1"
   },
   "dependencies": {
     "@interactjs/actions": "^1.10.27",
@@ -38,16 +38,16 @@
     "@interactjs/modifiers": "^1.10.27",
     "@interactjs/types": "^1.10.27",
     "rxjs": "^7.8.1",
-    "@knotx/core": "0.0.6",
-    "@knotx/decorators": "0.0.6"
+    "@knotx/core": "0.2.1",
+    "@knotx/decorators": "0.2.1"
   },
   "devDependencies": {
     "interactjs": "^1.10.27",
-    "@knotx/build-config": "0.0.6",
-    "@knotx/eslint-config": "0.0.6",
-    "@knotx/jsx": "0.0.6",
-    "@knotx/plugins-canvas": "0.0.6",
-    "@knotx/typescript-config": "0.0.6"
+    "@knotx/build-config": "0.2.1",
+    "@knotx/eslint-config": "0.2.1",
+    "@knotx/jsx": "0.2.1",
+    "@knotx/plugins-canvas": "0.2.1",
+    "@knotx/typescript-config": "0.2.1"
   },
   "scripts": {
     "build": "unbuild --failOnWarn=false",