@knotx/plugins-canvas 0.2.10 → 0.2.12

package/dist/index.cjs

@@ -75,15 +75,37 @@ 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, _scrollNodeIntoView_dec, _removeListener_dec, _addListener_dec, _container_dec, _getNode_dec, _transform_dec, _ref_dec, _a, _init;
+var _init_dec, _render_dec, _zoomOut_dec, _zoomIn_dec, _scrollNodeIntoView_dec, _removeListener_dec, _addListener_dec, _container_dec, _getNode_dec, _transform_dec, _ref_dec, _a, _init;
 class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref")], _transform_dec = [decorators.register("transform")], _getNode_dec = [decorators.inject.getNode()], _container_dec = [decorators.inject.container()], _addListener_dec = [decorators.register("addListener")], _removeListener_dec = [decorators.register("removeListener")], _scrollNodeIntoView_dec = [decorators.tool("Scroll node into viewport center", {
   type: "object",
   properties: {
     nodeId: { type: "string" },
     scale: { type: "number", description: "The scale of the canvas, default is current scale" },
+    block: { type: "string", enum: ["center", "end", "nearest", "start"], description: "Vertical alignment" },
+    inline: { type: "string", enum: ["center", "end", "nearest", "start"], description: "Horizontal alignment" },
+    offset: {
+      type: ["number", "object"],
+      description: "Offset from the viewport edge, can be a number or { x: number, y: number }",
+      properties: {
+        x: { type: "number" },
+        y: { type: "number" }
+      }
+    },
     animationTime: { type: "number", description: "The animation time(ms) of scroll behavior" }
   },
   required: ["nodeId"]
+})], _zoomIn_dec = [decorators.tool("Zoom in", {
+  type: "object",
+  properties: {
+    step: { type: "number" },
+    animationTime: { type: "number" }
+  }
+})], _zoomOut_dec = [decorators.tool("Zoom out", {
+  type: "object",
+  properties: {
+    step: { type: "number" },
+    animationTime: { type: "number" }
+  }
 })], _render_dec = [decorators.layer(core.Layer.Canvas)], _init_dec = [decorators.OnInit], _a) {
   constructor() {
     super(...arguments);
@@ -105,17 +127,77 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
       this.listeners[type].delete(listener);
     })), __runInitializers(_init, 31, this);
   }
-  scrollNodeIntoView({ nodeId, scale = this.transform.scale, animationTime }) {
-    var _a2, _b, _c, _d, _e;
+  scrollNodeIntoView({ nodeId, scale = this.transform.scale, block = "nearest", inline = "nearest", offset = 0, animationTime }) {
+    var _a2, _b, _c, _d, _e, _f, _g;
     const node = nodeId && this.getNode(nodeId);
     if (!node) {
       return;
     }
-    const nodeCenterX = node.position.x + ((_b = (_a2 = node.measured) == null ? void 0 : _a2.width) != null ? _b : 0) / 2;
-    const nodeCenterY = node.position.y + ((_d = (_c = node.measured) == null ? void 0 : _c.height) != null ? _d : 0) / 2;
-    const positionX = nodeCenterX * scale - this.container.width / 2;
-    const positionY = nodeCenterY * scale - this.container.height / 2;
-    (_e = this.ref) == null ? void 0 : _e.setTransform(-positionX, -positionY, scale, animationTime);
+    const nodeX = node.position.x;
+    const nodeY = node.position.y;
+    const nodeWidth = (_b = (_a2 = node.measured) == null ? void 0 : _a2.width) != null ? _b : 0;
+    const nodeHeight = (_d = (_c = node.measured) == null ? void 0 : _c.height) != null ? _d : 0;
+    const viewportWidth = this.container.width;
+    const viewportHeight = this.container.height;
+    let positionX = -this.transform.positionX;
+    let positionY = -this.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;
+    switch (inline) {
+      case "center":
+        positionX = (nodeX + nodeWidth / 2) * scale - viewportWidth / 2;
+        break;
+      case "start":
+        positionX = nodeX * scale - offsetX;
+        break;
+      case "end":
+        positionX = (nodeX + nodeWidth) * scale - viewportWidth + offsetX;
+        break;
+      case "nearest": {
+        const nodeRight = (nodeX + nodeWidth) * scale;
+        const nodeLeft = nodeX * scale;
+        const currentLeft = -this.transform.positionX;
+        const currentRight = currentLeft + viewportWidth;
+        if (nodeRight > currentRight) {
+          positionX = nodeRight - viewportWidth + offsetX;
+        } else if (nodeLeft < currentLeft) {
+          positionX = nodeLeft - offsetX;
+        }
+        break;
+      }
+    }
+    switch (block) {
+      case "center":
+        positionY = (nodeY + nodeHeight / 2) * scale - viewportHeight / 2;
+        break;
+      case "start":
+        positionY = nodeY * scale - offsetY;
+        break;
+      case "end":
+        positionY = (nodeY + nodeHeight) * scale - viewportHeight + offsetY;
+        break;
+      case "nearest": {
+        const nodeBottom = (nodeY + nodeHeight) * scale;
+        const nodeTop = nodeY * scale;
+        const currentTop = -this.transform.positionY;
+        const currentBottom = currentTop + viewportHeight;
+        if (nodeBottom > currentBottom) {
+          positionY = nodeBottom - viewportHeight + offsetY;
+        } else if (nodeTop < currentTop) {
+          positionY = nodeTop - offsetY;
+        }
+        break;
+      }
+    }
+    (_g = this.ref) == null ? void 0 : _g.setTransform(-positionX, -positionY, scale, animationTime);
+  }
+  zoomIn({ step = 0.1, animationTime }) {
+    var _a2;
+    (_a2 = this.ref) == null ? void 0 : _a2.zoomIn(step, animationTime);
+  }
+  zoomOut({ step = 0.1, animationTime }) {
+    var _a2;
+    (_a2 = this.ref) == null ? void 0 : _a2.zoomOut(step, animationTime);
   }
   render({ children } = { children: null }) {
     const [transform, setTransform] = react.useState(null);
@@ -236,6 +318,8 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
 }
 _init = __decoratorStart(_a);
 __decorateElement(_init, 1, "scrollNodeIntoView", _scrollNodeIntoView_dec, Canvas);
+__decorateElement(_init, 1, "zoomIn", _zoomIn_dec, Canvas);
+__decorateElement(_init, 1, "zoomOut", _zoomOut_dec, Canvas);
 __decorateElement(_init, 1, "render", _render_dec, Canvas);
 __decorateElement(_init, 1, "init", _init_dec, Canvas);
 __decorateElement(_init, 5, "ref", _ref_dec, Canvas);

package/dist/index.d.cts

@@ -20,6 +20,20 @@ declare module '@knotx/core' {
             scrollNodeIntoView: (params: {
                 nodeId: string;
                 scale?: number;
+                block?: 'center' | 'end' | 'nearest' | 'start';
+                inline?: 'center' | 'end' | 'nearest' | 'start';
+                offset?: number | {
+                    x: number;
+                    y: number;
+                };
+                animationTime?: number;
+            }) => void;
+            zoomIn: (params: {
+                step?: number;
+                animationTime?: number;
+            }) => void;
+            zoomOut: (params: {
+                step?: number;
                 animationTime?: number;
             }) => void;
         };
@@ -37,7 +51,7 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     private listeners;
     addListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
     removeListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
-    scrollNodeIntoView({ nodeId, scale, animationTime }: InferParamsFromSchema<{
+    scrollNodeIntoView({ nodeId, scale, block, inline, offset, animationTime }: InferParamsFromSchema<{
         type: 'object';
         properties: {
             nodeId: {
@@ -46,12 +60,53 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
             scale: {
                 type: 'number';
             };
+            block: {
+                type: 'string';
+                enum: ['center', 'end', 'nearest', 'start'];
+            };
+            inline: {
+                type: 'string';
+                enum: ['center', 'end', 'nearest', 'start'];
+            };
+            offset: {
+                type: ['number', 'object'];
+                properties: {
+                    x: {
+                        type: 'number';
+                    };
+                    y: {
+                        type: 'number';
+                    };
+                };
+            };
             animationTime: {
                 type: 'number';
             };
         };
         required: ['nodeId'];
     }>): void;
+    zoomIn({ step, animationTime }: InferParamsFromSchema<{
+        type: 'object';
+        properties: {
+            step: {
+                type: 'number';
+            };
+            animationTime: {
+                type: 'number';
+            };
+        };
+    }>): void;
+    zoomOut({ step, animationTime }: InferParamsFromSchema<{
+        type: 'object';
+        properties: {
+            step: {
+                type: 'number';
+            };
+            animationTime: {
+                type: 'number';
+            };
+        };
+    }>): void;
     render({ children }?: {
         children: ReactNode;
     }): JSX.Element;

package/dist/index.d.mts

@@ -20,6 +20,20 @@ declare module '@knotx/core' {
             scrollNodeIntoView: (params: {
                 nodeId: string;
                 scale?: number;
+                block?: 'center' | 'end' | 'nearest' | 'start';
+                inline?: 'center' | 'end' | 'nearest' | 'start';
+                offset?: number | {
+                    x: number;
+                    y: number;
+                };
+                animationTime?: number;
+            }) => void;
+            zoomIn: (params: {
+                step?: number;
+                animationTime?: number;
+            }) => void;
+            zoomOut: (params: {
+                step?: number;
                 animationTime?: number;
             }) => void;
         };
@@ -37,7 +51,7 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     private listeners;
     addListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
     removeListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
-    scrollNodeIntoView({ nodeId, scale, animationTime }: InferParamsFromSchema<{
+    scrollNodeIntoView({ nodeId, scale, block, inline, offset, animationTime }: InferParamsFromSchema<{
         type: 'object';
         properties: {
             nodeId: {
@@ -46,12 +60,53 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
             scale: {
                 type: 'number';
             };
+            block: {
+                type: 'string';
+                enum: ['center', 'end', 'nearest', 'start'];
+            };
+            inline: {
+                type: 'string';
+                enum: ['center', 'end', 'nearest', 'start'];
+            };
+            offset: {
+                type: ['number', 'object'];
+                properties: {
+                    x: {
+                        type: 'number';
+                    };
+                    y: {
+                        type: 'number';
+                    };
+                };
+            };
             animationTime: {
                 type: 'number';
             };
         };
         required: ['nodeId'];
     }>): void;
+    zoomIn({ step, animationTime }: InferParamsFromSchema<{
+        type: 'object';
+        properties: {
+            step: {
+                type: 'number';
+            };
+            animationTime: {
+                type: 'number';
+            };
+        };
+    }>): void;
+    zoomOut({ step, animationTime }: InferParamsFromSchema<{
+        type: 'object';
+        properties: {
+            step: {
+                type: 'number';
+            };
+            animationTime: {
+                type: 'number';
+            };
+        };
+    }>): void;
     render({ children }?: {
         children: ReactNode;
     }): JSX.Element;

package/dist/index.d.ts

@@ -20,6 +20,20 @@ declare module '@knotx/core' {
             scrollNodeIntoView: (params: {
                 nodeId: string;
                 scale?: number;
+                block?: 'center' | 'end' | 'nearest' | 'start';
+                inline?: 'center' | 'end' | 'nearest' | 'start';
+                offset?: number | {
+                    x: number;
+                    y: number;
+                };
+                animationTime?: number;
+            }) => void;
+            zoomIn: (params: {
+                step?: number;
+                animationTime?: number;
+            }) => void;
+            zoomOut: (params: {
+                step?: number;
                 animationTime?: number;
             }) => void;
         };
@@ -37,7 +51,7 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     private listeners;
     addListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
     removeListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
-    scrollNodeIntoView({ nodeId, scale, animationTime }: InferParamsFromSchema<{
+    scrollNodeIntoView({ nodeId, scale, block, inline, offset, animationTime }: InferParamsFromSchema<{
         type: 'object';
         properties: {
             nodeId: {
@@ -46,12 +60,53 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
             scale: {
                 type: 'number';
             };
+            block: {
+                type: 'string';
+                enum: ['center', 'end', 'nearest', 'start'];
+            };
+            inline: {
+                type: 'string';
+                enum: ['center', 'end', 'nearest', 'start'];
+            };
+            offset: {
+                type: ['number', 'object'];
+                properties: {
+                    x: {
+                        type: 'number';
+                    };
+                    y: {
+                        type: 'number';
+                    };
+                };
+            };
             animationTime: {
                 type: 'number';
             };
         };
         required: ['nodeId'];
     }>): void;
+    zoomIn({ step, animationTime }: InferParamsFromSchema<{
+        type: 'object';
+        properties: {
+            step: {
+                type: 'number';
+            };
+            animationTime: {
+                type: 'number';
+            };
+        };
+    }>): void;
+    zoomOut({ step, animationTime }: InferParamsFromSchema<{
+        type: 'object';
+        properties: {
+            step: {
+                type: 'number';
+            };
+            animationTime: {
+                type: 'number';
+            };
+        };
+    }>): void;
     render({ children }?: {
         children: ReactNode;
     }): JSX.Element;

package/dist/index.js

@@ -73,15 +73,37 @@ 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, _scrollNodeIntoView_dec, _removeListener_dec, _addListener_dec, _container_dec, _getNode_dec, _transform_dec, _ref_dec, _a, _init;
+var _init_dec, _render_dec, _zoomOut_dec, _zoomIn_dec, _scrollNodeIntoView_dec, _removeListener_dec, _addListener_dec, _container_dec, _getNode_dec, _transform_dec, _ref_dec, _a, _init;
 class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_dec = [register("transform")], _getNode_dec = [inject.getNode()], _container_dec = [inject.container()], _addListener_dec = [register("addListener")], _removeListener_dec = [register("removeListener")], _scrollNodeIntoView_dec = [tool("Scroll node into viewport center", {
   type: "object",
   properties: {
     nodeId: { type: "string" },
     scale: { type: "number", description: "The scale of the canvas, default is current scale" },
+    block: { type: "string", enum: ["center", "end", "nearest", "start"], description: "Vertical alignment" },
+    inline: { type: "string", enum: ["center", "end", "nearest", "start"], description: "Horizontal alignment" },
+    offset: {
+      type: ["number", "object"],
+      description: "Offset from the viewport edge, can be a number or { x: number, y: number }",
+      properties: {
+        x: { type: "number" },
+        y: { type: "number" }
+      }
+    },
     animationTime: { type: "number", description: "The animation time(ms) of scroll behavior" }
   },
   required: ["nodeId"]
+})], _zoomIn_dec = [tool("Zoom in", {
+  type: "object",
+  properties: {
+    step: { type: "number" },
+    animationTime: { type: "number" }
+  }
+})], _zoomOut_dec = [tool("Zoom out", {
+  type: "object",
+  properties: {
+    step: { type: "number" },
+    animationTime: { type: "number" }
+  }
 })], _render_dec = [layer(Layer.Canvas)], _init_dec = [OnInit], _a) {
   constructor() {
     super(...arguments);
@@ -103,17 +125,77 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
       this.listeners[type].delete(listener);
     })), __runInitializers(_init, 31, this);
   }
-  scrollNodeIntoView({ nodeId, scale = this.transform.scale, animationTime }) {
-    var _a2, _b, _c, _d, _e;
+  scrollNodeIntoView({ nodeId, scale = this.transform.scale, block = "nearest", inline = "nearest", offset = 0, animationTime }) {
+    var _a2, _b, _c, _d, _e, _f, _g;
     const node = nodeId && this.getNode(nodeId);
     if (!node) {
       return;
     }
-    const nodeCenterX = node.position.x + ((_b = (_a2 = node.measured) == null ? void 0 : _a2.width) != null ? _b : 0) / 2;
-    const nodeCenterY = node.position.y + ((_d = (_c = node.measured) == null ? void 0 : _c.height) != null ? _d : 0) / 2;
-    const positionX = nodeCenterX * scale - this.container.width / 2;
-    const positionY = nodeCenterY * scale - this.container.height / 2;
-    (_e = this.ref) == null ? void 0 : _e.setTransform(-positionX, -positionY, scale, animationTime);
+    const nodeX = node.position.x;
+    const nodeY = node.position.y;
+    const nodeWidth = (_b = (_a2 = node.measured) == null ? void 0 : _a2.width) != null ? _b : 0;
+    const nodeHeight = (_d = (_c = node.measured) == null ? void 0 : _c.height) != null ? _d : 0;
+    const viewportWidth = this.container.width;
+    const viewportHeight = this.container.height;
+    let positionX = -this.transform.positionX;
+    let positionY = -this.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;
+    switch (inline) {
+      case "center":
+        positionX = (nodeX + nodeWidth / 2) * scale - viewportWidth / 2;
+        break;
+      case "start":
+        positionX = nodeX * scale - offsetX;
+        break;
+      case "end":
+        positionX = (nodeX + nodeWidth) * scale - viewportWidth + offsetX;
+        break;
+      case "nearest": {
+        const nodeRight = (nodeX + nodeWidth) * scale;
+        const nodeLeft = nodeX * scale;
+        const currentLeft = -this.transform.positionX;
+        const currentRight = currentLeft + viewportWidth;
+        if (nodeRight > currentRight) {
+          positionX = nodeRight - viewportWidth + offsetX;
+        } else if (nodeLeft < currentLeft) {
+          positionX = nodeLeft - offsetX;
+        }
+        break;
+      }
+    }
+    switch (block) {
+      case "center":
+        positionY = (nodeY + nodeHeight / 2) * scale - viewportHeight / 2;
+        break;
+      case "start":
+        positionY = nodeY * scale - offsetY;
+        break;
+      case "end":
+        positionY = (nodeY + nodeHeight) * scale - viewportHeight + offsetY;
+        break;
+      case "nearest": {
+        const nodeBottom = (nodeY + nodeHeight) * scale;
+        const nodeTop = nodeY * scale;
+        const currentTop = -this.transform.positionY;
+        const currentBottom = currentTop + viewportHeight;
+        if (nodeBottom > currentBottom) {
+          positionY = nodeBottom - viewportHeight + offsetY;
+        } else if (nodeTop < currentTop) {
+          positionY = nodeTop - offsetY;
+        }
+        break;
+      }
+    }
+    (_g = this.ref) == null ? void 0 : _g.setTransform(-positionX, -positionY, scale, animationTime);
+  }
+  zoomIn({ step = 0.1, animationTime }) {
+    var _a2;
+    (_a2 = this.ref) == null ? void 0 : _a2.zoomIn(step, animationTime);
+  }
+  zoomOut({ step = 0.1, animationTime }) {
+    var _a2;
+    (_a2 = this.ref) == null ? void 0 : _a2.zoomOut(step, animationTime);
   }
   render({ children } = { children: null }) {
     const [transform, setTransform] = useState(null);
@@ -234,6 +316,8 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
 }
 _init = __decoratorStart(_a);
 __decorateElement(_init, 1, "scrollNodeIntoView", _scrollNodeIntoView_dec, Canvas);
+__decorateElement(_init, 1, "zoomIn", _zoomIn_dec, Canvas);
+__decorateElement(_init, 1, "zoomOut", _zoomOut_dec, Canvas);
 __decorateElement(_init, 1, "render", _render_dec, Canvas);
 __decorateElement(_init, 1, "init", _init_dec, Canvas);
 __decorateElement(_init, 5, "ref", _ref_dec, Canvas);

package/package.json

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