@knotx/plugins-minimap 0.4.0 → 0.4.2

package/dist/index.cjs

@@ -79,7 +79,7 @@ var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use
 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;
+var _render_dec, _destroy_dec, _init_dec, _nodes_dec, _transform_dec, _container_dec, _a, _init;
 const defaultProps = {
   width: 200,
   height: 150,
@@ -129,7 +129,7 @@ function getBoundsOfRects(bounds1, bounds2) {
     height: maxY - minY
   };
 }
-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) {
+class Minimap extends (_a = core.BasePlugin, _container_dec = [decorators.inject.container()], _transform_dec = [decorators.inject.canvas.transform()], _nodes_dec = [decorators.inject.nodes()], _init_dec = [decorators.OnInit], _destroy_dec = [decorators.OnDestroy], _render_dec = [decorators.panel("right-bottom")], _a) {
   constructor() {
     super(...arguments);
     __runInitializers(_init, 5, this);
@@ -142,13 +142,12 @@ class Minimap extends (_a = core.BasePlugin, _container_dec = [decorators.inject
     __publicField(this, "dragEnd$", new rxjs.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, "nodes", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
     /**
      * 处理小地图上的点击事件，移动视图
      */
     __publicField(this, "handleMinimapClick", (event) => {
-      if (!this.config.pannable || !this.canvasRef)
+      if (!this.config.pannable)
         return;
       const svg = event.currentTarget;
       const svgRect = svg.getBoundingClientRect();
@@ -161,28 +160,34 @@ class Minimap extends (_a = core.BasePlugin, _container_dec = [decorators.inject
       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);
+      this.callTool("canvas", "setTransform", {
+        positionX: newPositionX,
+        positionY: newPositionY,
+        scale
+      });
     });
     /**
      * 处理缩放按钮点击事件
      */
     __publicField(this, "handleZoom", (isZoomIn) => {
-      if (!this.config.zoomable || !this.canvasRef)
+      if (!this.config.zoomable)
         return;
       const step = this.config.zoomStep;
       if (isZoomIn) {
-        this.canvasRef.zoomIn(step, 300);
+        this.callTool("canvas", "zoomIn", {
+          step
+        });
       } else {
-        this.canvasRef.zoomOut(step, 300);
+        this.callTool("canvas", "zoomOut", {
+          step
+        });
       }
     });
     /**
      * 重置视图
      */
     __publicField(this, "handleReset", () => {
-      if (!this.canvasRef)
-        return;
-      this.canvasRef.resetTransform(300);
+      this.callTool("canvas", "resetTransform", {});
     });
   }
   get classNames() {
@@ -290,9 +295,12 @@ class Minimap extends (_a = core.BasePlugin, _container_dec = [decorators.inject
           }),
           // 实时更新位置
           operators.tap(({ newPositionX: newPositionX2, newPositionY: newPositionY2 }) => {
-            if (!this.canvasRef)
-              return;
-            this.canvasRef.setTransform(newPositionX2, newPositionY2, this.transform.scale, 0);
+            this.callTool("canvas", "setTransform", {
+              positionX: newPositionX2,
+              positionY: newPositionY2,
+              scale: this.transform.scale,
+              animationTime: 0
+            });
           }),
           // 直到拖拽结束
           operators.takeUntil(this.dragEnd$)
@@ -306,12 +314,10 @@ class Minimap extends (_a = core.BasePlugin, _container_dec = [decorators.inject
   setupInteractable() {
     if (this.currentInteractable)
       return;
-    this.currentInteractable = interact__default(`.${this.classNames.viewBox}[data-plugin-id="${this.pluginId}"]`).draggable({
+    this.currentInteractable = interact__default(`.${this.classNames.viewBox}[data-${this.pluginId}]`).draggable({
       listeners: {
         // 开始拖拽时，记录初始状态
         start: (event) => {
-          if (!this.canvasRef)
-            return;
           this.dragStart$.next({
             x: event.clientX,
             y: event.clientY,
@@ -424,9 +430,8 @@ class Minimap extends (_a = core.BasePlugin, _container_dec = [decorators.inject
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "rect",
-                  {
+                  __spreadValues({
                     className: viewBox,
-                    "data-plugin-id": this.pluginId,
                     x: viewRect.x,
                     y: viewRect.y,
                     width: viewRect.width,
@@ -438,7 +443,7 @@ class Minimap extends (_a = core.BasePlugin, _container_dec = [decorators.inject
                       cursor: "move",
                       pointerEvents: "all"
                     }
-                  }
+                  }, { [`data-${this.pluginId}`]: "" })
                 )
               ]
             }
@@ -519,7 +524,6 @@ __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);
 

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import { Node, BasePlugin, Container } from '@knotx/core';
-import { CanvasTransformState, CanvasRef } from '@knotx/plugins-canvas';
+import { CanvasTransformState } from '@knotx/plugins-canvas';
 
 interface MinimapConfig {
     /**
@@ -81,7 +81,6 @@ declare class Minimap extends BasePlugin<'minimap', MinimapConfig> {
     private dragEnd$;
     container: Container;
     transform: CanvasTransformState;
-    canvasRef: CanvasRef | null;
     nodes: Node[];
     get classNames(): {
         wrapper: string;

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import { Node, BasePlugin, Container } from '@knotx/core';
-import { CanvasTransformState, CanvasRef } from '@knotx/plugins-canvas';
+import { CanvasTransformState } from '@knotx/plugins-canvas';
 
 interface MinimapConfig {
     /**
@@ -81,7 +81,6 @@ declare class Minimap extends BasePlugin<'minimap', MinimapConfig> {
     private dragEnd$;
     container: Container;
     transform: CanvasTransformState;
-    canvasRef: CanvasRef | null;
     nodes: Node[];
     get classNames(): {
         wrapper: string;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { Node, BasePlugin, Container } from '@knotx/core';
-import { CanvasTransformState, CanvasRef } from '@knotx/plugins-canvas';
+import { CanvasTransformState } from '@knotx/plugins-canvas';
 
 interface MinimapConfig {
     /**
@@ -81,7 +81,6 @@ declare class Minimap extends BasePlugin<'minimap', MinimapConfig> {
     private dragEnd$;
     container: Container;
     transform: CanvasTransformState;
-    canvasRef: CanvasRef | null;
     nodes: Node[];
     get classNames(): {
         wrapper: string;

package/dist/index.js

@@ -73,7 +73,7 @@ var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use
 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;
+var _render_dec, _destroy_dec, _init_dec, _nodes_dec, _transform_dec, _container_dec, _a, _init;
 const defaultProps = {
   width: 200,
   height: 150,
@@ -123,7 +123,7 @@ function getBoundsOfRects(bounds1, bounds2) {
     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) {
+class Minimap extends (_a = BasePlugin, _container_dec = [inject.container()], _transform_dec = [inject.canvas.transform()], _nodes_dec = [inject.nodes()], _init_dec = [OnInit], _destroy_dec = [OnDestroy], _render_dec = [panel("right-bottom")], _a) {
   constructor() {
     super(...arguments);
     __runInitializers(_init, 5, this);
@@ -136,13 +136,12 @@ class Minimap extends (_a = BasePlugin, _container_dec = [inject.container()], _
     __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, "nodes", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
     /**
      * 处理小地图上的点击事件，移动视图
      */
     __publicField(this, "handleMinimapClick", (event) => {
-      if (!this.config.pannable || !this.canvasRef)
+      if (!this.config.pannable)
         return;
       const svg = event.currentTarget;
       const svgRect = svg.getBoundingClientRect();
@@ -155,28 +154,34 @@ class Minimap extends (_a = BasePlugin, _container_dec = [inject.container()], _
       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);
+      this.callTool("canvas", "setTransform", {
+        positionX: newPositionX,
+        positionY: newPositionY,
+        scale
+      });
     });
     /**
      * 处理缩放按钮点击事件
      */
     __publicField(this, "handleZoom", (isZoomIn) => {
-      if (!this.config.zoomable || !this.canvasRef)
+      if (!this.config.zoomable)
         return;
       const step = this.config.zoomStep;
       if (isZoomIn) {
-        this.canvasRef.zoomIn(step, 300);
+        this.callTool("canvas", "zoomIn", {
+          step
+        });
       } else {
-        this.canvasRef.zoomOut(step, 300);
+        this.callTool("canvas", "zoomOut", {
+          step
+        });
       }
     });
     /**
      * 重置视图
      */
     __publicField(this, "handleReset", () => {
-      if (!this.canvasRef)
-        return;
-      this.canvasRef.resetTransform(300);
+      this.callTool("canvas", "resetTransform", {});
     });
   }
   get classNames() {
@@ -284,9 +289,12 @@ class Minimap extends (_a = BasePlugin, _container_dec = [inject.container()], _
           }),
           // 实时更新位置
           tap(({ newPositionX: newPositionX2, newPositionY: newPositionY2 }) => {
-            if (!this.canvasRef)
-              return;
-            this.canvasRef.setTransform(newPositionX2, newPositionY2, this.transform.scale, 0);
+            this.callTool("canvas", "setTransform", {
+              positionX: newPositionX2,
+              positionY: newPositionY2,
+              scale: this.transform.scale,
+              animationTime: 0
+            });
           }),
           // 直到拖拽结束
           takeUntil(this.dragEnd$)
@@ -300,12 +308,10 @@ class Minimap extends (_a = BasePlugin, _container_dec = [inject.container()], _
   setupInteractable() {
     if (this.currentInteractable)
       return;
-    this.currentInteractable = interact(`.${this.classNames.viewBox}[data-plugin-id="${this.pluginId}"]`).draggable({
+    this.currentInteractable = interact(`.${this.classNames.viewBox}[data-${this.pluginId}]`).draggable({
       listeners: {
         // 开始拖拽时，记录初始状态
         start: (event) => {
-          if (!this.canvasRef)
-            return;
           this.dragStart$.next({
             x: event.clientX,
             y: event.clientY,
@@ -418,9 +424,8 @@ class Minimap extends (_a = BasePlugin, _container_dec = [inject.container()], _
                 ),
                 /* @__PURE__ */ jsx(
                   "rect",
-                  {
+                  __spreadValues({
                     className: viewBox,
-                    "data-plugin-id": this.pluginId,
                     x: viewRect.x,
                     y: viewRect.y,
                     width: viewRect.width,
@@ -432,7 +437,7 @@ class Minimap extends (_a = BasePlugin, _container_dec = [inject.container()], _
                       cursor: "move",
                       pointerEvents: "all"
                     }
-                  }
+                  }, { [`data-${this.pluginId}`]: "" })
                 )
               ]
             }
@@ -513,7 +518,6 @@ __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);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knotx/plugins-minimap",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Minimap Plugin for Knotx",
   "author": "boenfu",
   "license": "MIT",
@@ -29,8 +29,8 @@
   ],
   "peerDependencies": {
     "interactjs": "^1.10.27",
-    "@knotx/jsx": "0.4.0",
-    "@knotx/plugins-canvas": "0.4.0"
+    "@knotx/jsx": "0.4.2",
+    "@knotx/plugins-canvas": "0.4.2"
   },
   "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.4.0",
-    "@knotx/decorators": "0.4.0"
+    "@knotx/core": "0.4.2",
+    "@knotx/decorators": "0.4.2"
   },
   "devDependencies": {
     "interactjs": "^1.10.27",
-    "@knotx/build-config": "0.4.0",
-    "@knotx/eslint-config": "0.4.0",
-    "@knotx/jsx": "0.4.0",
-    "@knotx/plugins-canvas": "0.4.0",
-    "@knotx/typescript-config": "0.4.0"
+    "@knotx/build-config": "0.4.2",
+    "@knotx/eslint-config": "0.4.2",
+    "@knotx/jsx": "0.4.2",
+    "@knotx/plugins-canvas": "0.4.2",
+    "@knotx/typescript-config": "0.4.2"
   },
   "scripts": {
     "build": "unbuild",