@knotx/plugins-canvas 0.3.6 → 0.3.7

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, _transform_dec, _ref_dec, _a, _init;
-class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref")], _transform_dec = [decorators.register("transform")], _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 viewport center", {
+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", {
   type: "object",
   properties: {
     nodeId: { type: "string" },
@@ -195,7 +195,11 @@ 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, "edgeScroll", __runInitializers(_init, 16, this, {
+    __publicField(this, "contentSize", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __publicField(this, "updateContentSize", __runInitializers(_init, 20, this, (contentSize) => {
+      this.contentSize = contentSize;
+    })), __runInitializers(_init, 23, this);
+    __publicField(this, "edgeScroll", __runInitializers(_init, 24, this, {
       config: {
         enabled: false,
         edgeSize: 50,
@@ -209,22 +213,22 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
           this.edgeScrollAnimationFrame = null;
         }
       }
-    })), __runInitializers(_init, 19, this);
-    __publicField(this, "getNode", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
-    __publicField(this, "container", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
-    __publicField(this, "interaction", __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
+    })), __runInitializers(_init, 27, this);
+    __publicField(this, "getNode", __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
+    __publicField(this, "container", __runInitializers(_init, 32, this)), __runInitializers(_init, 35, this);
+    __publicField(this, "interaction", __runInitializers(_init, 36, this)), __runInitializers(_init, 39, this);
     __publicField(this, "listeners", {
       click: /* @__PURE__ */ new Set(),
       contextmenu: /* @__PURE__ */ new Set()
     });
     __publicField(this, "edgeScrollAnimationFrame", null);
     __publicField(this, "mousePosition", null);
-    __publicField(this, "addListener", __runInitializers(_init, 32, this, (type, listener) => {
+    __publicField(this, "addListener", __runInitializers(_init, 40, this, (type, listener) => {
       this.listeners[type].add(listener);
-    })), __runInitializers(_init, 35, this);
-    __publicField(this, "removeListener", __runInitializers(_init, 36, this, (type, listener) => {
+    })), __runInitializers(_init, 43, this);
+    __publicField(this, "removeListener", __runInitializers(_init, 44, this, (type, listener) => {
       this.listeners[type].delete(listener);
-    })), __runInitializers(_init, 39, this);
+    })), __runInitializers(_init, 47, this);
     __publicField(this, "handleEdgeScroll", () => {
       if (!this.edgeScroll.config.enabled || !this.mousePosition || !this.ref) {
         return;
@@ -296,6 +300,7 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
     (_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);
   }
   render({ children } = { children: null }) {
+    var _a2, _b, _c, _d;
     const defaultTransform = react.useMemo(() => {
       const defaultLocated = this.config.defaultLocated;
       if (!(defaultLocated == null ? void 0 : defaultLocated.nodeId)) {
@@ -443,8 +448,8 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
               contentClass: core.bem(this.name, "content"),
               contentStyle: {
                 position: "relative",
-                width: "100%",
-                height: "100%",
+                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%",
                 willChange: "auto"
               },
               children: childrenLayers
@@ -487,6 +492,8 @@ __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, "contentSize", _contentSize_dec, Canvas);
+__decorateElement(_init, 5, "updateContentSize", _updateContentSize_dec, Canvas);
 __decorateElement(_init, 5, "edgeScroll", _edgeScroll_dec, Canvas);
 __decorateElement(_init, 5, "getNode", _getNode_dec, Canvas);
 __decorateElement(_init, 5, "container", _container_dec, Canvas);

package/dist/index.d.cts

@@ -16,6 +16,10 @@ type CanvasConfig = ReactZoomPanPinchProps & {
         animationTime?: number;
     };
 };
+interface CanvasContentSize {
+    width: number;
+    height: number;
+}
 type CanvasTransformState = ReactZoomPanPinchState;
 type CanvasRef = ReactZoomPanPinchContentRef;
 interface EdgeScrollConfig {
@@ -29,6 +33,8 @@ declare module '@knotx/core' {
         canvas: {
             ref: CanvasRef | null;
             transform: CanvasTransformState;
+            contentSize: CanvasContentSize | undefined;
+            updateContentSize: (contentSize: CanvasContentSize) => void;
             addListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
             removeListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
             edgeScroll: {
@@ -74,6 +80,8 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     name: "canvas";
     ref: CanvasRef | null;
     transform: CanvasTransformState;
+    contentSize: CanvasContentSize | undefined;
+    updateContentSize: (contentSize: CanvasContentSize) => void;
     edgeScroll: {
         config: EdgeScrollConfig;
         setConfig: (config: Partial<EdgeScrollConfig>) => void;
@@ -167,4 +175,4 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     private isCanvasEvent;
 }
 
-export { Canvas, type CanvasConfig, type CanvasEventListener, type CanvasEventType, type CanvasRef, type CanvasTransformState, type EdgeScrollConfig };
+export { Canvas, type CanvasConfig, type CanvasContentSize, type CanvasEventListener, type CanvasEventType, type CanvasRef, type CanvasTransformState, type EdgeScrollConfig };

package/dist/index.d.mts

@@ -16,6 +16,10 @@ type CanvasConfig = ReactZoomPanPinchProps & {
         animationTime?: number;
     };
 };
+interface CanvasContentSize {
+    width: number;
+    height: number;
+}
 type CanvasTransformState = ReactZoomPanPinchState;
 type CanvasRef = ReactZoomPanPinchContentRef;
 interface EdgeScrollConfig {
@@ -29,6 +33,8 @@ declare module '@knotx/core' {
         canvas: {
             ref: CanvasRef | null;
             transform: CanvasTransformState;
+            contentSize: CanvasContentSize | undefined;
+            updateContentSize: (contentSize: CanvasContentSize) => void;
             addListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
             removeListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
             edgeScroll: {
@@ -74,6 +80,8 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     name: "canvas";
     ref: CanvasRef | null;
     transform: CanvasTransformState;
+    contentSize: CanvasContentSize | undefined;
+    updateContentSize: (contentSize: CanvasContentSize) => void;
     edgeScroll: {
         config: EdgeScrollConfig;
         setConfig: (config: Partial<EdgeScrollConfig>) => void;
@@ -167,4 +175,4 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     private isCanvasEvent;
 }
 
-export { Canvas, type CanvasConfig, type CanvasEventListener, type CanvasEventType, type CanvasRef, type CanvasTransformState, type EdgeScrollConfig };
+export { Canvas, type CanvasConfig, type CanvasContentSize, type CanvasEventListener, type CanvasEventType, type CanvasRef, type CanvasTransformState, type EdgeScrollConfig };

package/dist/index.d.ts

@@ -16,6 +16,10 @@ type CanvasConfig = ReactZoomPanPinchProps & {
         animationTime?: number;
     };
 };
+interface CanvasContentSize {
+    width: number;
+    height: number;
+}
 type CanvasTransformState = ReactZoomPanPinchState;
 type CanvasRef = ReactZoomPanPinchContentRef;
 interface EdgeScrollConfig {
@@ -29,6 +33,8 @@ declare module '@knotx/core' {
         canvas: {
             ref: CanvasRef | null;
             transform: CanvasTransformState;
+            contentSize: CanvasContentSize | undefined;
+            updateContentSize: (contentSize: CanvasContentSize) => void;
             addListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
             removeListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
             edgeScroll: {
@@ -74,6 +80,8 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     name: "canvas";
     ref: CanvasRef | null;
     transform: CanvasTransformState;
+    contentSize: CanvasContentSize | undefined;
+    updateContentSize: (contentSize: CanvasContentSize) => void;
     edgeScroll: {
         config: EdgeScrollConfig;
         setConfig: (config: Partial<EdgeScrollConfig>) => void;
@@ -167,4 +175,4 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     private isCanvasEvent;
 }
 
-export { Canvas, type CanvasConfig, type CanvasEventListener, type CanvasEventType, type CanvasRef, type CanvasTransformState, type EdgeScrollConfig };
+export { Canvas, type CanvasConfig, type CanvasContentSize, type CanvasEventListener, type CanvasEventType, type CanvasRef, type CanvasTransformState, type EdgeScrollConfig };

package/dist/index.js

@@ -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, _transform_dec, _ref_dec, _a, _init;
-class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_dec = [register("transform")], _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 viewport center", {
+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", {
   type: "object",
   properties: {
     nodeId: { type: "string" },
@@ -193,7 +193,11 @@ 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, "edgeScroll", __runInitializers(_init, 16, this, {
+    __publicField(this, "contentSize", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __publicField(this, "updateContentSize", __runInitializers(_init, 20, this, (contentSize) => {
+      this.contentSize = contentSize;
+    })), __runInitializers(_init, 23, this);
+    __publicField(this, "edgeScroll", __runInitializers(_init, 24, this, {
       config: {
         enabled: false,
         edgeSize: 50,
@@ -207,22 +211,22 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
           this.edgeScrollAnimationFrame = null;
         }
       }
-    })), __runInitializers(_init, 19, this);
-    __publicField(this, "getNode", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
-    __publicField(this, "container", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
-    __publicField(this, "interaction", __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
+    })), __runInitializers(_init, 27, this);
+    __publicField(this, "getNode", __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
+    __publicField(this, "container", __runInitializers(_init, 32, this)), __runInitializers(_init, 35, this);
+    __publicField(this, "interaction", __runInitializers(_init, 36, this)), __runInitializers(_init, 39, this);
     __publicField(this, "listeners", {
       click: /* @__PURE__ */ new Set(),
       contextmenu: /* @__PURE__ */ new Set()
     });
     __publicField(this, "edgeScrollAnimationFrame", null);
     __publicField(this, "mousePosition", null);
-    __publicField(this, "addListener", __runInitializers(_init, 32, this, (type, listener) => {
+    __publicField(this, "addListener", __runInitializers(_init, 40, this, (type, listener) => {
       this.listeners[type].add(listener);
-    })), __runInitializers(_init, 35, this);
-    __publicField(this, "removeListener", __runInitializers(_init, 36, this, (type, listener) => {
+    })), __runInitializers(_init, 43, this);
+    __publicField(this, "removeListener", __runInitializers(_init, 44, this, (type, listener) => {
       this.listeners[type].delete(listener);
-    })), __runInitializers(_init, 39, this);
+    })), __runInitializers(_init, 47, this);
     __publicField(this, "handleEdgeScroll", () => {
       if (!this.edgeScroll.config.enabled || !this.mousePosition || !this.ref) {
         return;
@@ -294,6 +298,7 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
     (_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);
   }
   render({ children } = { children: null }) {
+    var _a2, _b, _c, _d;
     const defaultTransform = useMemo(() => {
       const defaultLocated = this.config.defaultLocated;
       if (!(defaultLocated == null ? void 0 : defaultLocated.nodeId)) {
@@ -441,8 +446,8 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
               contentClass: bem(this.name, "content"),
               contentStyle: {
                 position: "relative",
-                width: "100%",
-                height: "100%",
+                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%",
                 willChange: "auto"
               },
               children: childrenLayers
@@ -485,6 +490,8 @@ __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, "contentSize", _contentSize_dec, Canvas);
+__decorateElement(_init, 5, "updateContentSize", _updateContentSize_dec, Canvas);
 __decorateElement(_init, 5, "edgeScroll", _edgeScroll_dec, Canvas);
 __decorateElement(_init, 5, "getNode", _getNode_dec, Canvas);
 __decorateElement(_init, 5, "container", _container_dec, Canvas);

package/package.json

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