@knotx/plugins-canvas 0.4.1 → 0.4.2

package/dist/index.cjs

@@ -148,8 +148,8 @@ 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, _setTransform_dec, _zoomOut_dec, _zoomIn_dec, _scrollNodeIntoView_dec, _removeListener_dec, _addListener_dec, _interaction_dec, _container_dec, _getNode_dec, _edgeScroll_dec, _updateContentSize_dec, _contentSize_dec, _transform_dec, _ref_dec, _a, _init;
-class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref")], _transform_dec = [decorators.register("transform")], _contentSize_dec = [decorators.register("contentSize")], _updateContentSize_dec = [decorators.register("updateContentSize")], _edgeScroll_dec = [decorators.register("edgeScroll")], _getNode_dec = [decorators.inject.getNode()], _container_dec = [decorators.inject.container()], _interaction_dec = [decorators.inject.interaction()], _addListener_dec = [decorators.register("addListener")], _removeListener_dec = [decorators.register("removeListener")], _scrollNodeIntoView_dec = [decorators.tool("Scroll node into view", {
+var _init_dec, _render_dec, _resetTransform_dec, _setTransform_dec, _zoomOut_dec, _zoomIn_dec, _scrollNodeIntoView_dec, _removeListener_dec, _addListener_dec, _interaction_dec, _container_dec, _getNode_dec, _edgeScroll_dec, _updateContentSize_dec, _contentSize_dec, _rootElement_dec, _transform_dec, _a, _init;
+class Canvas extends (_a = core.BasePlugin, _transform_dec = [decorators.register("transform")], _rootElement_dec = [decorators.register("rootElement")], _contentSize_dec = [decorators.register("contentSize")], _updateContentSize_dec = [decorators.register("updateContentSize")], _edgeScroll_dec = [decorators.register("edgeScroll")], _getNode_dec = [decorators.inject.getNode()], _container_dec = [decorators.inject.container()], _interaction_dec = [decorators.inject.interaction()], _addListener_dec = [decorators.register("addListener")], _removeListener_dec = [decorators.register("removeListener")], _scrollNodeIntoView_dec = [decorators.tool("Scroll node into view", {
   type: "object",
   properties: {
     nodeId: { type: "string" },
@@ -187,14 +187,20 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
     scale: { type: "number" },
     animationTime: { type: "number" }
   }
+})], _resetTransform_dec = [decorators.tool("Reset transform", {
+  type: "object",
+  properties: {
+    animationTime: { type: "number" }
+  }
 })], _render_dec = [decorators.layer(core.Layer.Canvas)], _init_dec = [decorators.OnInit], _a) {
   constructor() {
     super(...arguments);
     __runInitializers(_init, 5, this);
     __publicField(this, "config");
     __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, "ref", null);
+    __publicField(this, "transform", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __publicField(this, "rootElement", __runInitializers(_init, 12, this, null)), __runInitializers(_init, 15, this);
     __publicField(this, "contentSize", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
     __publicField(this, "updateContentSize", __runInitializers(_init, 20, this, (contentSize) => {
       this.contentSize = contentSize;
@@ -299,6 +305,10 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
     var _a2;
     (_a2 = this.ref) == null ? void 0 : _a2.setTransform(positionX != null ? positionX : this.transform.positionX, positionY != null ? positionY : this.transform.positionY, scale != null ? scale : this.transform.scale, animationTime);
   }
+  resetTransform({ animationTime } = {}) {
+    var _a2;
+    (_a2 = this.ref) == null ? void 0 : _a2.resetTransform(animationTime);
+  }
   render({ children } = { children: null }) {
     var _a2, _b, _c, _d;
     const defaultTransform = react.useMemo(() => {
@@ -328,6 +338,11 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
       return newTransform;
     }, []);
     const [transformRef, setTransformRef] = react.useReducer((_, ref) => {
+      var _a3;
+      const dom = ref.instance.wrapperComponent;
+      if (dom && ((_a3 = this.rootElement) == null ? void 0 : _a3.dom) !== dom) {
+        this.rootElement = core.DOMElement.fromDOM(dom);
+      }
       if (this.ref !== ref) {
         this.ref = ref;
       }
@@ -440,7 +455,7 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
           /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: fixedLayers }),
           /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
             reactZoomPanPinch.TransformComponent,
-            {
+            __spreadProps(__spreadValues({
               wrapperClass: core.bem(this.name, "wrapper"),
               wrapperStyle: {
                 width: "100%",
@@ -459,9 +474,10 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
                 position: "relative",
                 width: (_b = (_a2 = this.contentSize) == null ? void 0 : _a2.width) != null ? _b : "100%",
                 height: (_d = (_c = this.contentSize) == null ? void 0 : _c.height) != null ? _d : "100%"
-              },
+              }
+            }, { [`data-${this.pluginId}`]: "" }), {
               children: childrenLayers
-            }
+            })
           ) })
         ]
       })
@@ -485,6 +501,7 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
         cancelAnimationFrame(this.edgeScrollAnimationFrame);
         this.edgeScrollAnimationFrame = null;
       }
+      this.rootElement = null;
     });
   }
   isCanvasEvent(e) {
@@ -496,10 +513,11 @@ __decorateElement(_init, 1, "scrollNodeIntoView", _scrollNodeIntoView_dec, Canva
 __decorateElement(_init, 1, "zoomIn", _zoomIn_dec, Canvas);
 __decorateElement(_init, 1, "zoomOut", _zoomOut_dec, Canvas);
 __decorateElement(_init, 1, "setTransform", _setTransform_dec, Canvas);
+__decorateElement(_init, 1, "resetTransform", _resetTransform_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, "rootElement", _rootElement_dec, Canvas);
 __decorateElement(_init, 5, "contentSize", _contentSize_dec, Canvas);
 __decorateElement(_init, 5, "updateContentSize", _updateContentSize_dec, Canvas);
 __decorateElement(_init, 5, "edgeScroll", _edgeScroll_dec, Canvas);

package/dist/index.d.cts

@@ -1,7 +1,7 @@
-import { BasePlugin, Engine } from '@knotx/core';
+import { Element, BasePlugin, DOMElement, Engine } from '@knotx/core';
 import { InferParamsFromSchema } from '@knotx/decorators';
 import { MouseEvent, ReactNode } from 'react';
-import { ReactZoomPanPinchContentRef, ReactZoomPanPinchState, ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
+import { ReactZoomPanPinchState, ReactZoomPanPinchProps, ReactZoomPanPinchContentRef } from 'react-zoom-pan-pinch';
 
 type CanvasConfig = ReactZoomPanPinchProps & {
     defaultLocated?: {
@@ -31,8 +31,8 @@ interface EdgeScrollConfig {
 declare module '@knotx/core' {
     interface PluginData {
         canvas: {
-            ref: CanvasRef | null;
             transform: CanvasTransformState;
+            rootElement: Element | null;
             contentSize: CanvasContentSize | undefined;
             updateContentSize: (contentSize: CanvasContentSize) => void;
             addListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
@@ -70,6 +70,9 @@ declare module '@knotx/core' {
                 scale: number;
                 animationTime?: number;
             }) => void;
+            resetTransform: (params: {
+                animationTime?: number;
+            }) => void;
         };
     }
 }
@@ -80,6 +83,7 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     name: "canvas";
     ref: CanvasRef | null;
     transform: CanvasTransformState;
+    rootElement: DOMElement | null;
     contentSize: CanvasContentSize | undefined;
     updateContentSize: (contentSize: CanvasContentSize) => void;
     edgeScroll: {
@@ -167,6 +171,14 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
             };
         };
     }>): void;
+    resetTransform({ animationTime }?: InferParamsFromSchema<{
+        type: 'object';
+        properties: {
+            animationTime: {
+                type: 'number';
+            };
+        };
+    }>): void;
     private handleEdgeScroll;
     render({ children }?: {
         children: ReactNode;

package/dist/index.d.mts

@@ -1,7 +1,7 @@
-import { BasePlugin, Engine } from '@knotx/core';
+import { Element, BasePlugin, DOMElement, Engine } from '@knotx/core';
 import { InferParamsFromSchema } from '@knotx/decorators';
 import { MouseEvent, ReactNode } from 'react';
-import { ReactZoomPanPinchContentRef, ReactZoomPanPinchState, ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
+import { ReactZoomPanPinchState, ReactZoomPanPinchProps, ReactZoomPanPinchContentRef } from 'react-zoom-pan-pinch';
 
 type CanvasConfig = ReactZoomPanPinchProps & {
     defaultLocated?: {
@@ -31,8 +31,8 @@ interface EdgeScrollConfig {
 declare module '@knotx/core' {
     interface PluginData {
         canvas: {
-            ref: CanvasRef | null;
             transform: CanvasTransformState;
+            rootElement: Element | null;
             contentSize: CanvasContentSize | undefined;
             updateContentSize: (contentSize: CanvasContentSize) => void;
             addListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
@@ -70,6 +70,9 @@ declare module '@knotx/core' {
                 scale: number;
                 animationTime?: number;
             }) => void;
+            resetTransform: (params: {
+                animationTime?: number;
+            }) => void;
         };
     }
 }
@@ -80,6 +83,7 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     name: "canvas";
     ref: CanvasRef | null;
     transform: CanvasTransformState;
+    rootElement: DOMElement | null;
     contentSize: CanvasContentSize | undefined;
     updateContentSize: (contentSize: CanvasContentSize) => void;
     edgeScroll: {
@@ -167,6 +171,14 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
             };
         };
     }>): void;
+    resetTransform({ animationTime }?: InferParamsFromSchema<{
+        type: 'object';
+        properties: {
+            animationTime: {
+                type: 'number';
+            };
+        };
+    }>): void;
     private handleEdgeScroll;
     render({ children }?: {
         children: ReactNode;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-import { BasePlugin, Engine } from '@knotx/core';
+import { Element, BasePlugin, DOMElement, Engine } from '@knotx/core';
 import { InferParamsFromSchema } from '@knotx/decorators';
 import { MouseEvent, ReactNode } from 'react';
-import { ReactZoomPanPinchContentRef, ReactZoomPanPinchState, ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
+import { ReactZoomPanPinchState, ReactZoomPanPinchProps, ReactZoomPanPinchContentRef } from 'react-zoom-pan-pinch';
 
 type CanvasConfig = ReactZoomPanPinchProps & {
     defaultLocated?: {
@@ -31,8 +31,8 @@ interface EdgeScrollConfig {
 declare module '@knotx/core' {
     interface PluginData {
         canvas: {
-            ref: CanvasRef | null;
             transform: CanvasTransformState;
+            rootElement: Element | null;
             contentSize: CanvasContentSize | undefined;
             updateContentSize: (contentSize: CanvasContentSize) => void;
             addListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
@@ -70,6 +70,9 @@ declare module '@knotx/core' {
                 scale: number;
                 animationTime?: number;
             }) => void;
+            resetTransform: (params: {
+                animationTime?: number;
+            }) => void;
         };
     }
 }
@@ -80,6 +83,7 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     name: "canvas";
     ref: CanvasRef | null;
     transform: CanvasTransformState;
+    rootElement: DOMElement | null;
     contentSize: CanvasContentSize | undefined;
     updateContentSize: (contentSize: CanvasContentSize) => void;
     edgeScroll: {
@@ -167,6 +171,14 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
             };
         };
     }>): void;
+    resetTransform({ animationTime }?: InferParamsFromSchema<{
+        type: 'object';
+        properties: {
+            animationTime: {
+                type: 'number';
+            };
+        };
+    }>): void;
     private handleEdgeScroll;
     render({ children }?: {
         children: ReactNode;

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from '@knotx/jsx/jsx-runtime';
-import { Layer, InteractionPriority, bem, BasePlugin } from '@knotx/core';
+import { Layer, DOMElement, InteractionPriority, bem, BasePlugin } from '@knotx/core';
 import { register, inject, tool, layer, OnInit } from '@knotx/decorators';
 import { isEqual, merge } from 'lodash-es';
 import { useMemo, useReducer, useLayoutEffect, useCallback, Fragment } from 'react';
@@ -146,8 +146,8 @@ 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, _setTransform_dec, _zoomOut_dec, _zoomIn_dec, _scrollNodeIntoView_dec, _removeListener_dec, _addListener_dec, _interaction_dec, _container_dec, _getNode_dec, _edgeScroll_dec, _updateContentSize_dec, _contentSize_dec, _transform_dec, _ref_dec, _a, _init;
-class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_dec = [register("transform")], _contentSize_dec = [register("contentSize")], _updateContentSize_dec = [register("updateContentSize")], _edgeScroll_dec = [register("edgeScroll")], _getNode_dec = [inject.getNode()], _container_dec = [inject.container()], _interaction_dec = [inject.interaction()], _addListener_dec = [register("addListener")], _removeListener_dec = [register("removeListener")], _scrollNodeIntoView_dec = [tool("Scroll node into view", {
+var _init_dec, _render_dec, _resetTransform_dec, _setTransform_dec, _zoomOut_dec, _zoomIn_dec, _scrollNodeIntoView_dec, _removeListener_dec, _addListener_dec, _interaction_dec, _container_dec, _getNode_dec, _edgeScroll_dec, _updateContentSize_dec, _contentSize_dec, _rootElement_dec, _transform_dec, _a, _init;
+class Canvas extends (_a = BasePlugin, _transform_dec = [register("transform")], _rootElement_dec = [register("rootElement")], _contentSize_dec = [register("contentSize")], _updateContentSize_dec = [register("updateContentSize")], _edgeScroll_dec = [register("edgeScroll")], _getNode_dec = [inject.getNode()], _container_dec = [inject.container()], _interaction_dec = [inject.interaction()], _addListener_dec = [register("addListener")], _removeListener_dec = [register("removeListener")], _scrollNodeIntoView_dec = [tool("Scroll node into view", {
   type: "object",
   properties: {
     nodeId: { type: "string" },
@@ -185,14 +185,20 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
     scale: { type: "number" },
     animationTime: { type: "number" }
   }
+})], _resetTransform_dec = [tool("Reset transform", {
+  type: "object",
+  properties: {
+    animationTime: { type: "number" }
+  }
 })], _render_dec = [layer(Layer.Canvas)], _init_dec = [OnInit], _a) {
   constructor() {
     super(...arguments);
     __runInitializers(_init, 5, this);
     __publicField(this, "config");
     __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, "ref", null);
+    __publicField(this, "transform", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __publicField(this, "rootElement", __runInitializers(_init, 12, this, null)), __runInitializers(_init, 15, this);
     __publicField(this, "contentSize", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
     __publicField(this, "updateContentSize", __runInitializers(_init, 20, this, (contentSize) => {
       this.contentSize = contentSize;
@@ -297,6 +303,10 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
     var _a2;
     (_a2 = this.ref) == null ? void 0 : _a2.setTransform(positionX != null ? positionX : this.transform.positionX, positionY != null ? positionY : this.transform.positionY, scale != null ? scale : this.transform.scale, animationTime);
   }
+  resetTransform({ animationTime } = {}) {
+    var _a2;
+    (_a2 = this.ref) == null ? void 0 : _a2.resetTransform(animationTime);
+  }
   render({ children } = { children: null }) {
     var _a2, _b, _c, _d;
     const defaultTransform = useMemo(() => {
@@ -326,6 +336,11 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
       return newTransform;
     }, []);
     const [transformRef, setTransformRef] = useReducer((_, ref) => {
+      var _a3;
+      const dom = ref.instance.wrapperComponent;
+      if (dom && ((_a3 = this.rootElement) == null ? void 0 : _a3.dom) !== dom) {
+        this.rootElement = DOMElement.fromDOM(dom);
+      }
       if (this.ref !== ref) {
         this.ref = ref;
       }
@@ -438,7 +453,7 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
           /* @__PURE__ */ jsx(Fragment, { children: fixedLayers }),
           /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
             TransformComponent,
-            {
+            __spreadProps(__spreadValues({
               wrapperClass: bem(this.name, "wrapper"),
               wrapperStyle: {
                 width: "100%",
@@ -457,9 +472,10 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
                 position: "relative",
                 width: (_b = (_a2 = this.contentSize) == null ? void 0 : _a2.width) != null ? _b : "100%",
                 height: (_d = (_c = this.contentSize) == null ? void 0 : _c.height) != null ? _d : "100%"
-              },
+              }
+            }, { [`data-${this.pluginId}`]: "" }), {
               children: childrenLayers
-            }
+            })
           ) })
         ]
       })
@@ -483,6 +499,7 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
         cancelAnimationFrame(this.edgeScrollAnimationFrame);
         this.edgeScrollAnimationFrame = null;
       }
+      this.rootElement = null;
     });
   }
   isCanvasEvent(e) {
@@ -494,10 +511,11 @@ __decorateElement(_init, 1, "scrollNodeIntoView", _scrollNodeIntoView_dec, Canva
 __decorateElement(_init, 1, "zoomIn", _zoomIn_dec, Canvas);
 __decorateElement(_init, 1, "zoomOut", _zoomOut_dec, Canvas);
 __decorateElement(_init, 1, "setTransform", _setTransform_dec, Canvas);
+__decorateElement(_init, 1, "resetTransform", _resetTransform_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, "rootElement", _rootElement_dec, Canvas);
 __decorateElement(_init, 5, "contentSize", _contentSize_dec, Canvas);
 __decorateElement(_init, 5, "updateContentSize", _updateContentSize_dec, Canvas);
 __decorateElement(_init, 5, "edgeScroll", _edgeScroll_dec, Canvas);

package/package.json

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