@knotx/plugins-canvas 0.3.5 → 0.3.6

package/dist/index.cjs

@@ -7,6 +7,79 @@ const lodashEs = require('lodash-es');
 const react = require('react');
 const reactZoomPanPinch = require('react-zoom-pan-pinch');
 
+function calculateTransform({
+  node,
+  container,
+  transform,
+  scale,
+  block = "nearest",
+  inline = "nearest",
+  offset = 0
+}) {
+  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;
+  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;
+  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 = -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 = -transform.positionY;
+      const currentBottom = currentTop + viewportHeight;
+      if (nodeBottom > currentBottom) {
+        positionY = nodeBottom - viewportHeight + offsetY;
+      } else if (nodeTop < currentTop) {
+        positionY = nodeTop - offsetY;
+      }
+      break;
+    }
+  }
+  return {
+    scale,
+    positionX,
+    positionY
+  };
+}
+
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -193,69 +266,22 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
       this.edgeScrollAnimationFrame = requestAnimationFrame(this.handleEdgeScroll);
     });
   }
-  scrollNodeIntoView({ nodeId, scale = this.transform.scale, block = "nearest", inline = "nearest", offset = 0, animationTime }) {
-    var _a2, _b, _c, _d, _e, _f, _g;
+  scrollNodeIntoView({ nodeId, scale = this.transform.scale, block, inline, offset, animationTime }) {
+    var _a2;
     const node = nodeId && this.getNode({ id: nodeId });
     if (!node) {
       return;
     }
-    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);
+    const { positionX, positionY, scale: newScale } = calculateTransform({
+      node,
+      container: this.container,
+      transform: this.transform,
+      scale,
+      block,
+      inline,
+      offset
+    });
+    (_a2 = this.ref) == null ? void 0 : _a2.setTransform(-positionX, -positionY, newScale, animationTime);
   }
   zoomIn({ step = 0.1, animationTime }) {
     var _a2;
@@ -270,15 +296,35 @@ 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 }) {
-    const [transformRef, setTransformRef] = react.useReducer((prevRef, ref) => {
-      this.ref = ref;
-      if (!prevRef && ref.instance.isInitialized && this.config.defaultLocated) {
-        this.scrollNodeIntoView(__spreadValues({
-          inline: "center",
-          block: "center",
-          scale: 1,
-          animationTime: 0
-        }, this.config.defaultLocated));
+    const defaultTransform = react.useMemo(() => {
+      const defaultLocated = 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
+      }, defaultLocated));
+      const newTransform = {
+        previousScale: this.transform.scale,
+        scale: newScale,
+        positionX: -positionX,
+        positionY: -positionY
+      };
+      this.transform = newTransform;
+      return newTransform;
+    }, []);
+    const [transformRef, setTransformRef] = react.useReducer((_, ref) => {
+      if (this.ref !== ref) {
+        this.ref = ref;
       }
       return ref;
     }, null);
@@ -297,31 +343,33 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
       }
       return [fixedLayers2, childrenLayers2];
     }, [children]);
-    react.useEffect(() => {
+    react.useLayoutEffect(() => {
       const wrapperElement = transformRef == null ? void 0 : transformRef.instance.wrapperComponent;
-      if (!wrapperElement) {
-        return;
+      if (wrapperElement) {
+        Object.defineProperty(wrapperElement, "scrollTop", {
+          get() {
+            return -transformRef.instance.transformState.positionY;
+          },
+          set(value) {
+            transformRef.instance.setTransformState(transformRef.instance.transformState.scale, transformRef.instance.transformState.positionX, -value);
+          }
+        });
+        Object.defineProperty(wrapperElement, "scrollLeft", {
+          get() {
+            return -transformRef.instance.transformState.positionX;
+          },
+          set(value) {
+            transformRef.instance.setTransformState(transformRef.instance.transformState.scale, -value, transformRef.instance.transformState.positionY);
+          }
+        });
       }
-      Object.defineProperty(wrapperElement, "scrollTop", {
-        get() {
-          return -transformRef.instance.transformState.positionY;
-        },
-        set(value) {
-          transformRef.instance.setTransformState(transformRef.instance.transformState.scale, transformRef.instance.transformState.positionX, -value);
-        }
-      });
-      Object.defineProperty(wrapperElement, "scrollLeft", {
-        get() {
-          return -transformRef.instance.transformState.positionX;
-        },
-        set(value) {
-          transformRef.instance.setTransformState(transformRef.instance.transformState.scale, -value, transformRef.instance.transformState.positionY);
-        }
-      });
       let frame;
       return transformRef == null ? void 0 : transformRef.instance.onChange((ref) => {
         cancelAnimationFrame(frame);
         frame = requestAnimationFrame(() => {
+          if (lodashEs.isEqual(this.transform, ref.state)) {
+            return;
+          }
           this.transform = __spreadValues({}, ref.state);
         });
       });
@@ -371,6 +419,9 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
       reactZoomPanPinch.TransformWrapper,
       __spreadProps(__spreadValues({}, this.config), {
         ref: setTransformRef,
+        initialPositionX: defaultTransform.positionX,
+        initialPositionY: defaultTransform.positionY,
+        initialScale: defaultTransform.scale,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: fixedLayers }),
           /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(

package/dist/index.js

@@ -1,10 +1,83 @@
 import { jsxs, jsx } from '@knotx/jsx/jsx-runtime';
 import { Layer, InteractionPriority, bem, BasePlugin } from '@knotx/core';
 import { register, inject, tool, layer, OnInit } from '@knotx/decorators';
-import { merge } from 'lodash-es';
-import { useReducer, useMemo, useEffect, useCallback, Fragment } from 'react';
+import { isEqual, merge } from 'lodash-es';
+import { useMemo, useReducer, useLayoutEffect, useCallback, Fragment } from 'react';
 import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
 
+function calculateTransform({
+  node,
+  container,
+  transform,
+  scale,
+  block = "nearest",
+  inline = "nearest",
+  offset = 0
+}) {
+  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;
+  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;
+  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 = -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 = -transform.positionY;
+      const currentBottom = currentTop + viewportHeight;
+      if (nodeBottom > currentBottom) {
+        positionY = nodeBottom - viewportHeight + offsetY;
+      } else if (nodeTop < currentTop) {
+        positionY = nodeTop - offsetY;
+      }
+      break;
+    }
+  }
+  return {
+    scale,
+    positionX,
+    positionY
+  };
+}
+
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -191,69 +264,22 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
       this.edgeScrollAnimationFrame = requestAnimationFrame(this.handleEdgeScroll);
     });
   }
-  scrollNodeIntoView({ nodeId, scale = this.transform.scale, block = "nearest", inline = "nearest", offset = 0, animationTime }) {
-    var _a2, _b, _c, _d, _e, _f, _g;
+  scrollNodeIntoView({ nodeId, scale = this.transform.scale, block, inline, offset, animationTime }) {
+    var _a2;
     const node = nodeId && this.getNode({ id: nodeId });
     if (!node) {
       return;
     }
-    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);
+    const { positionX, positionY, scale: newScale } = calculateTransform({
+      node,
+      container: this.container,
+      transform: this.transform,
+      scale,
+      block,
+      inline,
+      offset
+    });
+    (_a2 = this.ref) == null ? void 0 : _a2.setTransform(-positionX, -positionY, newScale, animationTime);
   }
   zoomIn({ step = 0.1, animationTime }) {
     var _a2;
@@ -268,15 +294,35 @@ 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 }) {
-    const [transformRef, setTransformRef] = useReducer((prevRef, ref) => {
-      this.ref = ref;
-      if (!prevRef && ref.instance.isInitialized && this.config.defaultLocated) {
-        this.scrollNodeIntoView(__spreadValues({
-          inline: "center",
-          block: "center",
-          scale: 1,
-          animationTime: 0
-        }, this.config.defaultLocated));
+    const defaultTransform = useMemo(() => {
+      const defaultLocated = 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
+      }, defaultLocated));
+      const newTransform = {
+        previousScale: this.transform.scale,
+        scale: newScale,
+        positionX: -positionX,
+        positionY: -positionY
+      };
+      this.transform = newTransform;
+      return newTransform;
+    }, []);
+    const [transformRef, setTransformRef] = useReducer((_, ref) => {
+      if (this.ref !== ref) {
+        this.ref = ref;
       }
       return ref;
     }, null);
@@ -295,31 +341,33 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
       }
       return [fixedLayers2, childrenLayers2];
     }, [children]);
-    useEffect(() => {
+    useLayoutEffect(() => {
       const wrapperElement = transformRef == null ? void 0 : transformRef.instance.wrapperComponent;
-      if (!wrapperElement) {
-        return;
+      if (wrapperElement) {
+        Object.defineProperty(wrapperElement, "scrollTop", {
+          get() {
+            return -transformRef.instance.transformState.positionY;
+          },
+          set(value) {
+            transformRef.instance.setTransformState(transformRef.instance.transformState.scale, transformRef.instance.transformState.positionX, -value);
+          }
+        });
+        Object.defineProperty(wrapperElement, "scrollLeft", {
+          get() {
+            return -transformRef.instance.transformState.positionX;
+          },
+          set(value) {
+            transformRef.instance.setTransformState(transformRef.instance.transformState.scale, -value, transformRef.instance.transformState.positionY);
+          }
+        });
       }
-      Object.defineProperty(wrapperElement, "scrollTop", {
-        get() {
-          return -transformRef.instance.transformState.positionY;
-        },
-        set(value) {
-          transformRef.instance.setTransformState(transformRef.instance.transformState.scale, transformRef.instance.transformState.positionX, -value);
-        }
-      });
-      Object.defineProperty(wrapperElement, "scrollLeft", {
-        get() {
-          return -transformRef.instance.transformState.positionX;
-        },
-        set(value) {
-          transformRef.instance.setTransformState(transformRef.instance.transformState.scale, -value, transformRef.instance.transformState.positionY);
-        }
-      });
       let frame;
       return transformRef == null ? void 0 : transformRef.instance.onChange((ref) => {
         cancelAnimationFrame(frame);
         frame = requestAnimationFrame(() => {
+          if (isEqual(this.transform, ref.state)) {
+            return;
+          }
           this.transform = __spreadValues({}, ref.state);
         });
       });
@@ -369,6 +417,9 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
       TransformWrapper,
       __spreadProps(__spreadValues({}, this.config), {
         ref: setTransformRef,
+        initialPositionX: defaultTransform.positionX,
+        initialPositionY: defaultTransform.positionY,
+        initialScale: defaultTransform.scale,
         children: [
           /* @__PURE__ */ jsx(Fragment, { children: fixedLayers }),
           /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(

package/package.json

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