@knotx/plugins-canvas 0.2.5 → 0.2.6

package/dist/index.cjs

@@ -75,8 +75,16 @@ 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 _init_dec, _render_dec, _transform_dec, _ref_dec, _a, _init;
-class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref")], _transform_dec = [decorators.register("transform")], _render_dec = [decorators.layer(core.Layer.Canvas)], _init_dec = [decorators.OnInit], _a) {
+var _init_dec, _render_dec, _scrollNodeIntoView_dec, _container_dec, _getNode_dec, _transform_dec, _ref_dec, _a, _init;
+class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref")], _transform_dec = [decorators.register("transform")], _getNode_dec = [decorators.inject.getNode()], _container_dec = [decorators.inject.container()], _scrollNodeIntoView_dec = [decorators.tool("Scroll node into viewport center", {
+  type: "object",
+  properties: {
+    nodeId: { type: "string" },
+    scale: { type: "number", description: "The scale of the canvas, default is current scale" },
+    animationTime: { type: "number", description: "The animation time(ms) of scroll behavior" }
+  },
+  required: ["nodeId"]
+})], _render_dec = [decorators.layer(core.Layer.Canvas)], _init_dec = [decorators.OnInit], _a) {
   constructor() {
     super(...arguments);
     __runInitializers(_init, 5, this);
@@ -84,12 +92,20 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
     __publicField(this, "name", "canvas");
     __publicField(this, "ref", __runInitializers(_init, 8, this, null)), __runInitializers(_init, 11, this);
     __publicField(this, "transform", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __publicField(this, "getNode", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __publicField(this, "container", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
   }
-  get classNames() {
-    return {
-      wrapper: core.bem(this.name, "wrapper"),
-      content: core.bem(this.name, "content")
-    };
+  scrollNodeIntoView({ nodeId, scale = this.transform.scale, animationTime }) {
+    var _a2, _b, _c, _d, _e;
+    const node = nodeId && this.getNode(nodeId);
+    if (!node) {
+      return;
+    }
+    const nodeCenterX = node.position.x + ((_b = (_a2 = node.measured) == null ? void 0 : _a2.width) != null ? _b : 0) / 2;
+    const nodeCenterY = node.position.y + ((_d = (_c = node.measured) == null ? void 0 : _c.height) != null ? _d : 0) / 2;
+    const positionX = nodeCenterX * scale - this.container.width / 2;
+    const positionY = nodeCenterY * scale - this.container.height / 2;
+    (_e = this.ref) == null ? void 0 : _e.setTransform(-positionX, -positionY, scale, animationTime);
   }
   render({ children } = { children: null }) {
     const [transform, setTransform] = react.useState(null);
@@ -108,7 +124,6 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
       }
       return [fixedLayers2, childrenLayers2];
     }, [children]);
-    const { wrapper, content } = this.classNames;
     react.useEffect(() => {
       this.ref = transform;
       const wrapperElement = transform == null ? void 0 : transform.instance.wrapperComponent;
@@ -148,14 +163,14 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
           /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
             reactZoomPanPinch.TransformComponent,
             {
-              wrapperClass: wrapper,
+              wrapperClass: core.bem(this.name, "wrapper"),
               wrapperStyle: {
                 width: "100%",
                 height: "100%",
                 zIndex: core.Layer.Nodes | core.Layer.Edges,
                 contain: "strict"
               },
-              contentClass: content,
+              contentClass: core.bem(this.name, "content"),
               contentStyle: {
                 position: "relative",
                 width: "100%",
@@ -184,10 +199,13 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
   }
 }
 _init = __decoratorStart(_a);
+__decorateElement(_init, 1, "scrollNodeIntoView", _scrollNodeIntoView_dec, Canvas);
 __decorateElement(_init, 1, "render", _render_dec, Canvas);
 __decorateElement(_init, 1, "init", _init_dec, Canvas);
 __decorateElement(_init, 5, "ref", _ref_dec, Canvas);
 __decorateElement(_init, 5, "transform", _transform_dec, Canvas);
+__decorateElement(_init, 5, "getNode", _getNode_dec, Canvas);
+__decorateElement(_init, 5, "container", _container_dec, Canvas);
 __decoratorMetadata(_init, Canvas);
 
 exports.Canvas = Canvas;

package/dist/index.d.cts

@@ -1,3 +1,4 @@
+import { InferParamsFromSchema } from '@knotx/decorators';
 import { ReactNode } from 'react';
 import { ReactZoomPanPinchContentRef, ReactZoomPanPinchState, ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
 import { BasePlugin } from '@knotx/core';
@@ -12,16 +13,38 @@ declare module '@knotx/core' {
             transform: CanvasTransformState;
         };
     }
+    interface PluginTools {
+        canvas: {
+            scrollNodeIntoView: (params: {
+                nodeId: string;
+                scale?: number;
+                animationTime?: number;
+            }) => void;
+        };
+    }
 }
 declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     private config;
     name: "canvas";
     ref: CanvasRef | null;
     transform: CanvasTransformState;
-    get classNames(): {
-        wrapper: string;
-        content: string;
-    };
+    private getNode;
+    private container;
+    scrollNodeIntoView({ nodeId, scale, animationTime }: InferParamsFromSchema<{
+        type: 'object';
+        properties: {
+            nodeId: {
+                type: 'string';
+            };
+            scale: {
+                type: 'number';
+            };
+            animationTime: {
+                type: 'number';
+            };
+        };
+        required: ['nodeId'];
+    }>): void;
     render({ children }?: {
         children: ReactNode;
     }): JSX.Element;

package/dist/index.d.mts

@@ -1,3 +1,4 @@
+import { InferParamsFromSchema } from '@knotx/decorators';
 import { ReactNode } from 'react';
 import { ReactZoomPanPinchContentRef, ReactZoomPanPinchState, ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
 import { BasePlugin } from '@knotx/core';
@@ -12,16 +13,38 @@ declare module '@knotx/core' {
             transform: CanvasTransformState;
         };
     }
+    interface PluginTools {
+        canvas: {
+            scrollNodeIntoView: (params: {
+                nodeId: string;
+                scale?: number;
+                animationTime?: number;
+            }) => void;
+        };
+    }
 }
 declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     private config;
     name: "canvas";
     ref: CanvasRef | null;
     transform: CanvasTransformState;
-    get classNames(): {
-        wrapper: string;
-        content: string;
-    };
+    private getNode;
+    private container;
+    scrollNodeIntoView({ nodeId, scale, animationTime }: InferParamsFromSchema<{
+        type: 'object';
+        properties: {
+            nodeId: {
+                type: 'string';
+            };
+            scale: {
+                type: 'number';
+            };
+            animationTime: {
+                type: 'number';
+            };
+        };
+        required: ['nodeId'];
+    }>): void;
     render({ children }?: {
         children: ReactNode;
     }): JSX.Element;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { InferParamsFromSchema } from '@knotx/decorators';
 import { ReactNode } from 'react';
 import { ReactZoomPanPinchContentRef, ReactZoomPanPinchState, ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
 import { BasePlugin } from '@knotx/core';
@@ -12,16 +13,38 @@ declare module '@knotx/core' {
             transform: CanvasTransformState;
         };
     }
+    interface PluginTools {
+        canvas: {
+            scrollNodeIntoView: (params: {
+                nodeId: string;
+                scale?: number;
+                animationTime?: number;
+            }) => void;
+        };
+    }
 }
 declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     private config;
     name: "canvas";
     ref: CanvasRef | null;
     transform: CanvasTransformState;
-    get classNames(): {
-        wrapper: string;
-        content: string;
-    };
+    private getNode;
+    private container;
+    scrollNodeIntoView({ nodeId, scale, animationTime }: InferParamsFromSchema<{
+        type: 'object';
+        properties: {
+            nodeId: {
+                type: 'string';
+            };
+            scale: {
+                type: 'number';
+            };
+            animationTime: {
+                type: 'number';
+            };
+        };
+        required: ['nodeId'];
+    }>): void;
     render({ children }?: {
         children: ReactNode;
     }): JSX.Element;

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from '@knotx/jsx/jsx-runtime';
 import { Layer, bem, BasePlugin } from '@knotx/core';
-import { register, layer, OnInit } from '@knotx/decorators';
+import { register, inject, tool, layer, OnInit } from '@knotx/decorators';
 import { merge } from 'lodash-es';
 import { useState, useMemo, useEffect, Fragment } from 'react';
 import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
@@ -73,8 +73,16 @@ 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 _init_dec, _render_dec, _transform_dec, _ref_dec, _a, _init;
-class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_dec = [register("transform")], _render_dec = [layer(Layer.Canvas)], _init_dec = [OnInit], _a) {
+var _init_dec, _render_dec, _scrollNodeIntoView_dec, _container_dec, _getNode_dec, _transform_dec, _ref_dec, _a, _init;
+class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_dec = [register("transform")], _getNode_dec = [inject.getNode()], _container_dec = [inject.container()], _scrollNodeIntoView_dec = [tool("Scroll node into viewport center", {
+  type: "object",
+  properties: {
+    nodeId: { type: "string" },
+    scale: { type: "number", description: "The scale of the canvas, default is current scale" },
+    animationTime: { type: "number", description: "The animation time(ms) of scroll behavior" }
+  },
+  required: ["nodeId"]
+})], _render_dec = [layer(Layer.Canvas)], _init_dec = [OnInit], _a) {
   constructor() {
     super(...arguments);
     __runInitializers(_init, 5, this);
@@ -82,12 +90,20 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
     __publicField(this, "name", "canvas");
     __publicField(this, "ref", __runInitializers(_init, 8, this, null)), __runInitializers(_init, 11, this);
     __publicField(this, "transform", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __publicField(this, "getNode", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __publicField(this, "container", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
   }
-  get classNames() {
-    return {
-      wrapper: bem(this.name, "wrapper"),
-      content: bem(this.name, "content")
-    };
+  scrollNodeIntoView({ nodeId, scale = this.transform.scale, animationTime }) {
+    var _a2, _b, _c, _d, _e;
+    const node = nodeId && this.getNode(nodeId);
+    if (!node) {
+      return;
+    }
+    const nodeCenterX = node.position.x + ((_b = (_a2 = node.measured) == null ? void 0 : _a2.width) != null ? _b : 0) / 2;
+    const nodeCenterY = node.position.y + ((_d = (_c = node.measured) == null ? void 0 : _c.height) != null ? _d : 0) / 2;
+    const positionX = nodeCenterX * scale - this.container.width / 2;
+    const positionY = nodeCenterY * scale - this.container.height / 2;
+    (_e = this.ref) == null ? void 0 : _e.setTransform(-positionX, -positionY, scale, animationTime);
   }
   render({ children } = { children: null }) {
     const [transform, setTransform] = useState(null);
@@ -106,7 +122,6 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
       }
       return [fixedLayers2, childrenLayers2];
     }, [children]);
-    const { wrapper, content } = this.classNames;
     useEffect(() => {
       this.ref = transform;
       const wrapperElement = transform == null ? void 0 : transform.instance.wrapperComponent;
@@ -146,14 +161,14 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
           /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
             TransformComponent,
             {
-              wrapperClass: wrapper,
+              wrapperClass: bem(this.name, "wrapper"),
               wrapperStyle: {
                 width: "100%",
                 height: "100%",
                 zIndex: Layer.Nodes | Layer.Edges,
                 contain: "strict"
               },
-              contentClass: content,
+              contentClass: bem(this.name, "content"),
               contentStyle: {
                 position: "relative",
                 width: "100%",
@@ -182,10 +197,13 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
   }
 }
 _init = __decoratorStart(_a);
+__decorateElement(_init, 1, "scrollNodeIntoView", _scrollNodeIntoView_dec, Canvas);
 __decorateElement(_init, 1, "render", _render_dec, Canvas);
 __decorateElement(_init, 1, "init", _init_dec, Canvas);
 __decorateElement(_init, 5, "ref", _ref_dec, Canvas);
 __decorateElement(_init, 5, "transform", _transform_dec, Canvas);
+__decorateElement(_init, 5, "getNode", _getNode_dec, Canvas);
+__decorateElement(_init, 5, "container", _container_dec, Canvas);
 __decoratorMetadata(_init, Canvas);
 
 export { Canvas };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knotx/plugins-canvas",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Canvas Plugin for Knotx",
   "author": "boenfu",
   "license": "MIT",
@@ -30,14 +30,14 @@
   "peerDependencies": {
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0",
-    "@knotx/jsx": "0.2.5"
+    "@knotx/jsx": "0.2.6"
   },
   "dependencies": {
     "lodash-es": "^4.17.21",
     "react-zoom-pan-pinch": "^3.7.0",
     "rxjs": "^7.8.1",
-    "@knotx/core": "0.2.5",
-    "@knotx/decorators": "0.2.5"
+    "@knotx/core": "0.2.6",
+    "@knotx/decorators": "0.2.6"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
@@ -45,10 +45,10 @@
     "@types/react-dom": "^17.0.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
-    "@knotx/build-config": "0.2.5",
-    "@knotx/eslint-config": "0.2.5",
-    "@knotx/jsx": "0.2.5",
-    "@knotx/typescript-config": "0.2.5"
+    "@knotx/build-config": "0.2.6",
+    "@knotx/eslint-config": "0.2.6",
+    "@knotx/jsx": "0.2.6",
+    "@knotx/typescript-config": "0.2.6"
   },
   "scripts": {
     "build": "unbuild",