@knotx/plugins-canvas 0.4.2 → 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,
@@ -286,10 +296,12 @@ class Canvas extends (_a = core.BasePlugin, _transform_dec = [decorators.registe
       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);
   }
@@ -312,21 +324,19 @@ class Canvas extends (_a = core.BasePlugin, _transform_dec = [decorators.registe
   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,

package/dist/index.d.cts

@@ -1,33 +1,40 @@
 import { Element, BasePlugin, DOMElement, Engine } from '@knotx/core';
 import { InferParamsFromSchema } from '@knotx/decorators';
 import { MouseEvent, ReactNode } from 'react';
-import { ReactZoomPanPinchState, ReactZoomPanPinchProps, ReactZoomPanPinchContentRef } 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: {
@@ -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;
@@ -81,7 +78,7 @@ 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;
@@ -187,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,33 +1,40 @@
 import { Element, BasePlugin, DOMElement, Engine } from '@knotx/core';
 import { InferParamsFromSchema } from '@knotx/decorators';
 import { MouseEvent, ReactNode } from 'react';
-import { ReactZoomPanPinchState, ReactZoomPanPinchProps, ReactZoomPanPinchContentRef } 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: {
@@ -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;
@@ -81,7 +78,7 @@ 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;
@@ -187,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,33 +1,40 @@
 import { Element, BasePlugin, DOMElement, Engine } from '@knotx/core';
 import { InferParamsFromSchema } from '@knotx/decorators';
 import { MouseEvent, ReactNode } from 'react';
-import { ReactZoomPanPinchState, ReactZoomPanPinchProps, ReactZoomPanPinchContentRef } 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: {
@@ -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;
@@ -81,7 +78,7 @@ 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;
@@ -187,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

@@ -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,
@@ -284,10 +294,12 @@ class Canvas extends (_a = BasePlugin, _transform_dec = [register("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);
   }
@@ -310,21 +322,19 @@ class Canvas extends (_a = BasePlugin, _transform_dec = [register("transform")],
   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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knotx/plugins-canvas",
-  "version": "0.4.2",
+  "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.2"
+    "@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.2",
-    "@knotx/decorators": "0.4.2"
+    "@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.2",
-    "@knotx/eslint-config": "0.4.2",
-    "@knotx/jsx": "0.4.2",
-    "@knotx/typescript-config": "0.4.2"
+    "@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",