@knotx/plugins-canvas 0.4.1 → 0.4.3

package/dist/index.cjs

@@ -14,19 +14,21 @@ function calculateTransform({
   scale,
   block = "nearest",
   inline = "nearest",
-  offset = 0
+  offset = 0,
+  contentSize,
+  limitToBounds
 }) {
-  var _a, _b, _c, _d, _e, _f;
-  const nodeX = node.position.x;
-  const nodeY = node.position.y;
-  const nodeWidth = (_b = (_a = node.measured) == null ? void 0 : _a.width) != null ? _b : 0;
-  const nodeHeight = (_d = (_c = node.measured) == null ? void 0 : _c.height) != null ? _d : 0;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const nodeX = (_a = node == null ? void 0 : node.position.x) != null ? _a : 0;
+  const nodeY = (_b = node == null ? void 0 : node.position.y) != null ? _b : 0;
+  const nodeWidth = (_d = (_c = node == null ? void 0 : node.measured) == null ? void 0 : _c.width) != null ? _d : 0;
+  const nodeHeight = (_f = (_e = node == null ? void 0 : node.measured) == null ? void 0 : _e.height) != null ? _f : 0;
   const viewportWidth = container.width;
   const viewportHeight = container.height;
   let positionX = -transform.positionX;
   let positionY = -transform.positionY;
-  const offsetX = typeof offset === "number" ? offset : (_e = offset.x) != null ? _e : 0;
-  const offsetY = typeof offset === "number" ? offset : (_f = offset.y) != null ? _f : 0;
+  const offsetX = typeof offset === "number" ? offset : (_g = offset.x) != null ? _g : 0;
+  const offsetY = typeof offset === "number" ? offset : (_h = offset.y) != null ? _h : 0;
   switch (inline) {
     case "center":
       positionX = (nodeX + nodeWidth / 2) * scale - viewportWidth / 2;
@@ -73,6 +75,14 @@ function calculateTransform({
       break;
     }
   }
+  if (limitToBounds && contentSize) {
+    if (contentSize.width * scale < viewportWidth) {
+      positionX = contentSize.width / 2 * scale - viewportWidth / 2;
+    }
+    if (contentSize.height * scale < viewportHeight) {
+      positionY = contentSize.height / 2 * scale - viewportHeight / 2;
+    }
+  }
   return {
     scale,
     positionX,
@@ -148,8 +158,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 +197,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;
@@ -280,10 +296,12 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
       node,
       container: this.container,
       transform: this.transform,
+      contentSize: this.contentSize,
       scale,
       block,
       inline,
-      offset
+      offset,
+      limitToBounds: false
     });
     (_a2 = this.ref) == null ? void 0 : _a2.setTransform(-positionX, -positionY, newScale, animationTime);
   }
@@ -299,24 +317,26 @@ 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(() => {
-      const defaultLocated = this.config.defaultLocated;
+      const defaultLocated = __spreadValues({}, this.config.defaultLocated);
       if (!(defaultLocated == null ? void 0 : defaultLocated.nodeId)) {
         return this.transform;
       }
       const node = this.getNode({ id: defaultLocated.nodeId });
-      if (!node) {
-        return this.transform;
-      }
       defaultLocated.inline || (defaultLocated.inline = "center");
       defaultLocated.block || (defaultLocated.block = "center");
       defaultLocated.scale || (defaultLocated.scale = this.transform.scale);
       const { positionX, positionY, scale: newScale } = calculateTransform(__spreadValues({
         node,
         container: this.container,
-        transform: this.transform
+        transform: this.transform,
+        contentSize: this.contentSize
       }, defaultLocated));
       const newTransform = {
         previousScale: this.transform.scale,
@@ -328,6 +348,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 +465,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 +484,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 +511,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 +523,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,38 +1,45 @@
-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 { ReactZoomPanPinchProps, ReactZoomPanPinchContentRef } from 'react-zoom-pan-pinch';
 
-type CanvasConfig = ReactZoomPanPinchProps & {
-    defaultLocated?: {
-        nodeId: string;
-        scale?: number;
-        block?: 'center' | 'end' | 'nearest' | 'start';
-        inline?: 'center' | 'end' | 'nearest' | 'start';
-        offset?: number | {
-            x: number;
-            y: number;
-        };
-        animationTime?: number;
-    };
-};
+interface CanvasTransformState {
+    previousScale: number;
+    scale: number;
+    positionX: number;
+    positionY: number;
+}
 interface CanvasContentSize {
     width: number;
     height: number;
 }
-type CanvasTransformState = ReactZoomPanPinchState;
-type CanvasRef = ReactZoomPanPinchContentRef;
+interface ScrollNodeIntoViewOptions {
+    nodeId: string;
+    scale?: number;
+    block?: 'center' | 'end' | 'nearest' | 'start';
+    inline?: 'center' | 'end' | 'nearest' | 'start';
+    offset?: {
+        x: number;
+        y: number;
+    };
+    animationTime?: number;
+    limitToBounds?: boolean;
+}
 interface EdgeScrollConfig {
     enabled: boolean;
     edgeSize: number;
     maxSpeed: number;
     cornerSize?: number;
 }
+
+type CanvasConfig = ReactZoomPanPinchProps & {
+    defaultLocated?: ScrollNodeIntoViewOptions;
+};
 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;
@@ -45,17 +52,7 @@ declare module '@knotx/core' {
     }
     interface PluginTools {
         canvas: {
-            scrollNodeIntoView: (params: {
-                nodeId: string;
-                scale?: number;
-                block?: 'center' | 'end' | 'nearest' | 'start';
-                inline?: 'center' | 'end' | 'nearest' | 'start';
-                offset?: {
-                    x: number;
-                    y: number;
-                };
-                animationTime?: number;
-            }) => void;
+            scrollNodeIntoView: (params: ScrollNodeIntoViewOptions) => void;
             zoomIn: (params: {
                 step?: number;
                 animationTime?: number;
@@ -70,6 +67,9 @@ declare module '@knotx/core' {
                 scale: number;
                 animationTime?: number;
             }) => void;
+            resetTransform: (params: {
+                animationTime?: number;
+            }) => void;
         };
     }
 }
@@ -78,8 +78,9 @@ type CanvasEventListener = (event: MouseEvent<HTMLElement>) => void;
 declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     private config;
     name: "canvas";
-    ref: CanvasRef | null;
+    ref: ReactZoomPanPinchContentRef | null;
     transform: CanvasTransformState;
+    rootElement: DOMElement | null;
     contentSize: CanvasContentSize | undefined;
     updateContentSize: (contentSize: CanvasContentSize) => void;
     edgeScroll: {
@@ -167,6 +168,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;
@@ -175,4 +184,4 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     private isCanvasEvent;
 }
 
-export { Canvas, type CanvasConfig, type CanvasContentSize, type CanvasEventListener, type CanvasEventType, type CanvasRef, type CanvasTransformState, type EdgeScrollConfig };
+export { Canvas, type CanvasConfig, type CanvasContentSize, type CanvasEventListener, type CanvasEventType, type CanvasTransformState, type EdgeScrollConfig, type ScrollNodeIntoViewOptions };

package/dist/index.d.mts

@@ -1,38 +1,45 @@
-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 { ReactZoomPanPinchProps, ReactZoomPanPinchContentRef } from 'react-zoom-pan-pinch';
 
-type CanvasConfig = ReactZoomPanPinchProps & {
-    defaultLocated?: {
-        nodeId: string;
-        scale?: number;
-        block?: 'center' | 'end' | 'nearest' | 'start';
-        inline?: 'center' | 'end' | 'nearest' | 'start';
-        offset?: number | {
-            x: number;
-            y: number;
-        };
-        animationTime?: number;
-    };
-};
+interface CanvasTransformState {
+    previousScale: number;
+    scale: number;
+    positionX: number;
+    positionY: number;
+}
 interface CanvasContentSize {
     width: number;
     height: number;
 }
-type CanvasTransformState = ReactZoomPanPinchState;
-type CanvasRef = ReactZoomPanPinchContentRef;
+interface ScrollNodeIntoViewOptions {
+    nodeId: string;
+    scale?: number;
+    block?: 'center' | 'end' | 'nearest' | 'start';
+    inline?: 'center' | 'end' | 'nearest' | 'start';
+    offset?: {
+        x: number;
+        y: number;
+    };
+    animationTime?: number;
+    limitToBounds?: boolean;
+}
 interface EdgeScrollConfig {
     enabled: boolean;
     edgeSize: number;
     maxSpeed: number;
     cornerSize?: number;
 }
+
+type CanvasConfig = ReactZoomPanPinchProps & {
+    defaultLocated?: ScrollNodeIntoViewOptions;
+};
 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;
@@ -45,17 +52,7 @@ declare module '@knotx/core' {
     }
     interface PluginTools {
         canvas: {
-            scrollNodeIntoView: (params: {
-                nodeId: string;
-                scale?: number;
-                block?: 'center' | 'end' | 'nearest' | 'start';
-                inline?: 'center' | 'end' | 'nearest' | 'start';
-                offset?: {
-                    x: number;
-                    y: number;
-                };
-                animationTime?: number;
-            }) => void;
+            scrollNodeIntoView: (params: ScrollNodeIntoViewOptions) => void;
             zoomIn: (params: {
                 step?: number;
                 animationTime?: number;
@@ -70,6 +67,9 @@ declare module '@knotx/core' {
                 scale: number;
                 animationTime?: number;
             }) => void;
+            resetTransform: (params: {
+                animationTime?: number;
+            }) => void;
         };
     }
 }
@@ -78,8 +78,9 @@ type CanvasEventListener = (event: MouseEvent<HTMLElement>) => void;
 declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     private config;
     name: "canvas";
-    ref: CanvasRef | null;
+    ref: ReactZoomPanPinchContentRef | null;
     transform: CanvasTransformState;
+    rootElement: DOMElement | null;
     contentSize: CanvasContentSize | undefined;
     updateContentSize: (contentSize: CanvasContentSize) => void;
     edgeScroll: {
@@ -167,6 +168,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;
@@ -175,4 +184,4 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     private isCanvasEvent;
 }
 
-export { Canvas, type CanvasConfig, type CanvasContentSize, type CanvasEventListener, type CanvasEventType, type CanvasRef, type CanvasTransformState, type EdgeScrollConfig };
+export { Canvas, type CanvasConfig, type CanvasContentSize, type CanvasEventListener, type CanvasEventType, type CanvasTransformState, type EdgeScrollConfig, type ScrollNodeIntoViewOptions };

package/dist/index.d.ts

@@ -1,38 +1,45 @@
-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 { ReactZoomPanPinchProps, ReactZoomPanPinchContentRef } from 'react-zoom-pan-pinch';
 
-type CanvasConfig = ReactZoomPanPinchProps & {
-    defaultLocated?: {
-        nodeId: string;
-        scale?: number;
-        block?: 'center' | 'end' | 'nearest' | 'start';
-        inline?: 'center' | 'end' | 'nearest' | 'start';
-        offset?: number | {
-            x: number;
-            y: number;
-        };
-        animationTime?: number;
-    };
-};
+interface CanvasTransformState {
+    previousScale: number;
+    scale: number;
+    positionX: number;
+    positionY: number;
+}
 interface CanvasContentSize {
     width: number;
     height: number;
 }
-type CanvasTransformState = ReactZoomPanPinchState;
-type CanvasRef = ReactZoomPanPinchContentRef;
+interface ScrollNodeIntoViewOptions {
+    nodeId: string;
+    scale?: number;
+    block?: 'center' | 'end' | 'nearest' | 'start';
+    inline?: 'center' | 'end' | 'nearest' | 'start';
+    offset?: {
+        x: number;
+        y: number;
+    };
+    animationTime?: number;
+    limitToBounds?: boolean;
+}
 interface EdgeScrollConfig {
     enabled: boolean;
     edgeSize: number;
     maxSpeed: number;
     cornerSize?: number;
 }
+
+type CanvasConfig = ReactZoomPanPinchProps & {
+    defaultLocated?: ScrollNodeIntoViewOptions;
+};
 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;
@@ -45,17 +52,7 @@ declare module '@knotx/core' {
     }
     interface PluginTools {
         canvas: {
-            scrollNodeIntoView: (params: {
-                nodeId: string;
-                scale?: number;
-                block?: 'center' | 'end' | 'nearest' | 'start';
-                inline?: 'center' | 'end' | 'nearest' | 'start';
-                offset?: {
-                    x: number;
-                    y: number;
-                };
-                animationTime?: number;
-            }) => void;
+            scrollNodeIntoView: (params: ScrollNodeIntoViewOptions) => void;
             zoomIn: (params: {
                 step?: number;
                 animationTime?: number;
@@ -70,6 +67,9 @@ declare module '@knotx/core' {
                 scale: number;
                 animationTime?: number;
             }) => void;
+            resetTransform: (params: {
+                animationTime?: number;
+            }) => void;
         };
     }
 }
@@ -78,8 +78,9 @@ type CanvasEventListener = (event: MouseEvent<HTMLElement>) => void;
 declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     private config;
     name: "canvas";
-    ref: CanvasRef | null;
+    ref: ReactZoomPanPinchContentRef | null;
     transform: CanvasTransformState;
+    rootElement: DOMElement | null;
     contentSize: CanvasContentSize | undefined;
     updateContentSize: (contentSize: CanvasContentSize) => void;
     edgeScroll: {
@@ -167,6 +168,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;
@@ -175,4 +184,4 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     private isCanvasEvent;
 }
 
-export { Canvas, type CanvasConfig, type CanvasContentSize, type CanvasEventListener, type CanvasEventType, type CanvasRef, type CanvasTransformState, type EdgeScrollConfig };
+export { Canvas, type CanvasConfig, type CanvasContentSize, type CanvasEventListener, type CanvasEventType, type CanvasTransformState, type EdgeScrollConfig, type ScrollNodeIntoViewOptions };

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';
@@ -12,19 +12,21 @@ function calculateTransform({
   scale,
   block = "nearest",
   inline = "nearest",
-  offset = 0
+  offset = 0,
+  contentSize,
+  limitToBounds
 }) {
-  var _a, _b, _c, _d, _e, _f;
-  const nodeX = node.position.x;
-  const nodeY = node.position.y;
-  const nodeWidth = (_b = (_a = node.measured) == null ? void 0 : _a.width) != null ? _b : 0;
-  const nodeHeight = (_d = (_c = node.measured) == null ? void 0 : _c.height) != null ? _d : 0;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const nodeX = (_a = node == null ? void 0 : node.position.x) != null ? _a : 0;
+  const nodeY = (_b = node == null ? void 0 : node.position.y) != null ? _b : 0;
+  const nodeWidth = (_d = (_c = node == null ? void 0 : node.measured) == null ? void 0 : _c.width) != null ? _d : 0;
+  const nodeHeight = (_f = (_e = node == null ? void 0 : node.measured) == null ? void 0 : _e.height) != null ? _f : 0;
   const viewportWidth = container.width;
   const viewportHeight = container.height;
   let positionX = -transform.positionX;
   let positionY = -transform.positionY;
-  const offsetX = typeof offset === "number" ? offset : (_e = offset.x) != null ? _e : 0;
-  const offsetY = typeof offset === "number" ? offset : (_f = offset.y) != null ? _f : 0;
+  const offsetX = typeof offset === "number" ? offset : (_g = offset.x) != null ? _g : 0;
+  const offsetY = typeof offset === "number" ? offset : (_h = offset.y) != null ? _h : 0;
   switch (inline) {
     case "center":
       positionX = (nodeX + nodeWidth / 2) * scale - viewportWidth / 2;
@@ -71,6 +73,14 @@ function calculateTransform({
       break;
     }
   }
+  if (limitToBounds && contentSize) {
+    if (contentSize.width * scale < viewportWidth) {
+      positionX = contentSize.width / 2 * scale - viewportWidth / 2;
+    }
+    if (contentSize.height * scale < viewportHeight) {
+      positionY = contentSize.height / 2 * scale - viewportHeight / 2;
+    }
+  }
   return {
     scale,
     positionX,
@@ -146,8 +156,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 +195,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;
@@ -278,10 +294,12 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
       node,
       container: this.container,
       transform: this.transform,
+      contentSize: this.contentSize,
       scale,
       block,
       inline,
-      offset
+      offset,
+      limitToBounds: false
     });
     (_a2 = this.ref) == null ? void 0 : _a2.setTransform(-positionX, -positionY, newScale, animationTime);
   }
@@ -297,24 +315,26 @@ 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(() => {
-      const defaultLocated = this.config.defaultLocated;
+      const defaultLocated = __spreadValues({}, this.config.defaultLocated);
       if (!(defaultLocated == null ? void 0 : defaultLocated.nodeId)) {
         return this.transform;
       }
       const node = this.getNode({ id: defaultLocated.nodeId });
-      if (!node) {
-        return this.transform;
-      }
       defaultLocated.inline || (defaultLocated.inline = "center");
       defaultLocated.block || (defaultLocated.block = "center");
       defaultLocated.scale || (defaultLocated.scale = this.transform.scale);
       const { positionX, positionY, scale: newScale } = calculateTransform(__spreadValues({
         node,
         container: this.container,
-        transform: this.transform
+        transform: this.transform,
+        contentSize: this.contentSize
       }, defaultLocated));
       const newTransform = {
         previousScale: this.transform.scale,
@@ -326,6 +346,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 +463,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 +482,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 +509,7 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
         cancelAnimationFrame(this.edgeScrollAnimationFrame);
         this.edgeScrollAnimationFrame = null;
       }
+      this.rootElement = null;
     });
   }
   isCanvasEvent(e) {
@@ -494,10 +521,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.3",
   "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.3"
   },
   "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.3",
+    "@knotx/decorators": "0.4.3"
   },
   "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.3",
+    "@knotx/eslint-config": "0.4.3",
+    "@knotx/jsx": "0.4.3",
+    "@knotx/typescript-config": "0.4.3"
   },
   "scripts": {
     "build": "unbuild",