@knotx/plugins-canvas 0.4.3 → 0.4.5

package/dist/index.cjs

@@ -245,6 +245,47 @@ class Canvas extends (_a = core.BasePlugin, _transform_dec = [decorators.registe
     __publicField(this, "removeListener", __runInitializers(_init, 44, this, (type, listener) => {
       this.listeners[type].delete(listener);
     })), __runInitializers(_init, 47, this);
+    __publicField(this, "onClick", (e) => {
+      if (!this.isCanvasEvent(e)) {
+        return;
+      }
+      if (!this.interaction.canInteract(core.InteractionPriority.CanvasClick)) {
+        return;
+      }
+      this.listeners.click.forEach((listener) => {
+        listener(e);
+      });
+    });
+    __publicField(this, "onContextMenu", (e) => {
+      if (!this.isCanvasEvent(e)) {
+        return;
+      }
+      if (!this.interaction.canInteract(core.InteractionPriority.CanvasContextMenu)) {
+        return;
+      }
+      this.listeners.contextmenu.forEach((listener) => {
+        listener(e);
+      });
+    });
+    __publicField(this, "onMouseMove", (e) => {
+      if (this.edgeScroll.config.enabled) {
+        const rect = e.currentTarget.getBoundingClientRect();
+        this.mousePosition = {
+          x: e.clientX - rect.left,
+          y: e.clientY - rect.top
+        };
+        if (this.edgeScrollAnimationFrame === null) {
+          this.edgeScrollAnimationFrame = requestAnimationFrame(this.handleEdgeScroll);
+        }
+      }
+    });
+    __publicField(this, "onMouseLeave", () => {
+      this.mousePosition = null;
+      if (this.edgeScrollAnimationFrame !== null) {
+        cancelAnimationFrame(this.edgeScrollAnimationFrame);
+        this.edgeScrollAnimationFrame = null;
+      }
+    });
     __publicField(this, "handleEdgeScroll", () => {
       if (!this.edgeScroll.config.enabled || !this.mousePosition || !this.ref) {
         return;
@@ -323,30 +364,7 @@ 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 = __spreadValues({}, this.config.defaultLocated);
-      if (!(defaultLocated == null ? void 0 : defaultLocated.nodeId)) {
-        return this.transform;
-      }
-      const node = this.getNode({ id: defaultLocated.nodeId });
-      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,
-        contentSize: this.contentSize
-      }, defaultLocated));
-      const newTransform = {
-        previousScale: this.transform.scale,
-        scale: newScale,
-        positionX: -positionX,
-        positionY: -positionY
-      };
-      this.transform = newTransform;
-      return newTransform;
-    }, []);
+    const defaultTransform = react.useMemo(() => this.getDefaultTransform(), []);
     const [transformRef, setTransformRef] = react.useReducer((_, ref) => {
       var _a3;
       const dom = ref.instance.wrapperComponent;
@@ -358,21 +376,7 @@ class Canvas extends (_a = core.BasePlugin, _transform_dec = [decorators.registe
       }
       return ref;
     }, null);
-    const [fixedLayers, childrenLayers] = react.useMemo(() => {
-      const fixedLayers2 = [];
-      const childrenLayers2 = [];
-      for (const child of Array.isArray(children) ? children : [children]) {
-        if (!(child == null ? void 0 : child.key)) {
-          continue;
-        }
-        if (child.key <= core.Layer.Background << 1 || child.key > core.Layer.Foreground >> 1) {
-          fixedLayers2.push(child);
-        } else {
-          childrenLayers2.push(child);
-        }
-      }
-      return [fixedLayers2, childrenLayers2];
-    }, [children]);
+    const [fixedLayers, childrenLayers] = react.useMemo(() => this.groupLayers(children), [children]);
     react.useLayoutEffect(() => {
       const wrapperElement = transformRef == null ? void 0 : transformRef.instance.wrapperComponent;
       const onScroll = (event) => {
@@ -413,47 +417,6 @@ class Canvas extends (_a = core.BasePlugin, _transform_dec = [decorators.registe
         wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll, { capture: true });
       };
     }, [transformRef]);
-    const onClick = react.useCallback((e) => {
-      if (!this.isCanvasEvent(e)) {
-        return;
-      }
-      if (!this.interaction.canInteract(core.InteractionPriority.CanvasClick)) {
-        return;
-      }
-      this.listeners.click.forEach((listener) => {
-        listener(e);
-      });
-    }, []);
-    const onContextMenu = react.useCallback((e) => {
-      if (!this.isCanvasEvent(e)) {
-        return;
-      }
-      if (!this.interaction.canInteract(core.InteractionPriority.CanvasContextMenu)) {
-        return;
-      }
-      this.listeners.contextmenu.forEach((listener) => {
-        listener(e);
-      });
-    }, []);
-    const onMouseMove = react.useCallback((e) => {
-      if (this.edgeScroll.config.enabled) {
-        const rect = e.currentTarget.getBoundingClientRect();
-        this.mousePosition = {
-          x: e.clientX - rect.left,
-          y: e.clientY - rect.top
-        };
-        if (this.edgeScrollAnimationFrame === null) {
-          this.edgeScrollAnimationFrame = requestAnimationFrame(this.handleEdgeScroll);
-        }
-      }
-    }, []);
-    const onMouseLeave = react.useCallback(() => {
-      this.mousePosition = null;
-      if (this.edgeScrollAnimationFrame !== null) {
-        cancelAnimationFrame(this.edgeScrollAnimationFrame);
-        this.edgeScrollAnimationFrame = null;
-      }
-    }, []);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       reactZoomPanPinch.TransformWrapper,
       __spreadProps(__spreadValues({}, this.config), {
@@ -470,14 +433,15 @@ class Canvas extends (_a = core.BasePlugin, _transform_dec = [decorators.registe
               wrapperStyle: {
                 width: "100%",
                 height: "100%",
-                zIndex: core.Layer.Nodes | core.Layer.Edges,
+                zIndex: core.Layer.Nodes,
                 contain: "strict"
               },
               wrapperProps: {
-                onClick,
-                onContextMenu,
-                onMouseMove,
-                onMouseLeave
+                id: this.pluginId,
+                onClick: this.onClick,
+                onContextMenu: this.onContextMenu,
+                onMouseMove: this.onMouseMove,
+                onMouseLeave: this.onMouseLeave
               },
               contentClass: core.bem(this.name, "content"),
               contentStyle: {
@@ -514,6 +478,45 @@ class Canvas extends (_a = core.BasePlugin, _transform_dec = [decorators.registe
       this.rootElement = null;
     });
   }
+  groupLayers(children) {
+    const fixedLayers = [];
+    const childrenLayers = [];
+    for (const child of Array.isArray(children) ? children : [children]) {
+      if (!(child == null ? void 0 : child.key)) {
+        continue;
+      }
+      if (child.key <= core.Layer.Background << 1 || child.key > core.Layer.Foreground >> 1) {
+        fixedLayers.push(child);
+      } else {
+        childrenLayers.push(child);
+      }
+    }
+    return [fixedLayers, childrenLayers];
+  }
+  getDefaultTransform() {
+    const defaultLocated = __spreadValues({}, this.config.defaultLocated);
+    if (!(defaultLocated == null ? void 0 : defaultLocated.nodeId) && !defaultLocated.limitToBounds) {
+      return this.transform;
+    }
+    const node = defaultLocated.nodeId ? this.getNode({ id: defaultLocated.nodeId }) : void 0;
+    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,
+      contentSize: this.contentSize
+    }, defaultLocated));
+    const newTransform = {
+      previousScale: this.transform.scale,
+      scale: newScale,
+      positionX: -positionX,
+      positionY: -positionY
+    };
+    this.transform = newTransform;
+    return newTransform;
+  }
   isCanvasEvent(e) {
     return e.target === e.currentTarget || e.target.classList.contains(core.bem(this.name, "content"));
   }

package/dist/index.d.cts

@@ -25,6 +25,9 @@ interface ScrollNodeIntoViewOptions {
     animationTime?: number;
     limitToBounds?: boolean;
 }
+interface DefaultLocatedOptions extends Omit<ScrollNodeIntoViewOptions, 'nodeId'> {
+    nodeId?: string | null;
+}
 interface EdgeScrollConfig {
     enabled: boolean;
     edgeSize: number;
@@ -33,7 +36,7 @@ interface EdgeScrollConfig {
 }
 
 type CanvasConfig = ReactZoomPanPinchProps & {
-    defaultLocated?: ScrollNodeIntoViewOptions;
+    defaultLocated?: DefaultLocatedOptions;
 };
 declare module '@knotx/core' {
     interface PluginData {
@@ -176,12 +179,18 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
             };
         };
     }>): void;
-    private handleEdgeScroll;
     render({ children }?: {
         children: ReactNode;
     }): JSX.Element;
     init(config: CanvasConfig): void;
+    private groupLayers;
+    private getDefaultTransform;
+    private onClick;
+    private onContextMenu;
+    private onMouseMove;
+    private onMouseLeave;
+    private handleEdgeScroll;
     private isCanvasEvent;
 }
 
-export { Canvas, type CanvasConfig, type CanvasContentSize, type CanvasEventListener, type CanvasEventType, type CanvasTransformState, type EdgeScrollConfig, type ScrollNodeIntoViewOptions };
+export { Canvas, type CanvasConfig, type CanvasContentSize, type CanvasEventListener, type CanvasEventType, type CanvasTransformState, type DefaultLocatedOptions, type EdgeScrollConfig, type ScrollNodeIntoViewOptions };

package/dist/index.d.mts

@@ -25,6 +25,9 @@ interface ScrollNodeIntoViewOptions {
     animationTime?: number;
     limitToBounds?: boolean;
 }
+interface DefaultLocatedOptions extends Omit<ScrollNodeIntoViewOptions, 'nodeId'> {
+    nodeId?: string | null;
+}
 interface EdgeScrollConfig {
     enabled: boolean;
     edgeSize: number;
@@ -33,7 +36,7 @@ interface EdgeScrollConfig {
 }
 
 type CanvasConfig = ReactZoomPanPinchProps & {
-    defaultLocated?: ScrollNodeIntoViewOptions;
+    defaultLocated?: DefaultLocatedOptions;
 };
 declare module '@knotx/core' {
     interface PluginData {
@@ -176,12 +179,18 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
             };
         };
     }>): void;
-    private handleEdgeScroll;
     render({ children }?: {
         children: ReactNode;
     }): JSX.Element;
     init(config: CanvasConfig): void;
+    private groupLayers;
+    private getDefaultTransform;
+    private onClick;
+    private onContextMenu;
+    private onMouseMove;
+    private onMouseLeave;
+    private handleEdgeScroll;
     private isCanvasEvent;
 }
 
-export { Canvas, type CanvasConfig, type CanvasContentSize, type CanvasEventListener, type CanvasEventType, type CanvasTransformState, type EdgeScrollConfig, type ScrollNodeIntoViewOptions };
+export { Canvas, type CanvasConfig, type CanvasContentSize, type CanvasEventListener, type CanvasEventType, type CanvasTransformState, type DefaultLocatedOptions, type EdgeScrollConfig, type ScrollNodeIntoViewOptions };

package/dist/index.d.ts

@@ -25,6 +25,9 @@ interface ScrollNodeIntoViewOptions {
     animationTime?: number;
     limitToBounds?: boolean;
 }
+interface DefaultLocatedOptions extends Omit<ScrollNodeIntoViewOptions, 'nodeId'> {
+    nodeId?: string | null;
+}
 interface EdgeScrollConfig {
     enabled: boolean;
     edgeSize: number;
@@ -33,7 +36,7 @@ interface EdgeScrollConfig {
 }
 
 type CanvasConfig = ReactZoomPanPinchProps & {
-    defaultLocated?: ScrollNodeIntoViewOptions;
+    defaultLocated?: DefaultLocatedOptions;
 };
 declare module '@knotx/core' {
     interface PluginData {
@@ -176,12 +179,18 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
             };
         };
     }>): void;
-    private handleEdgeScroll;
     render({ children }?: {
         children: ReactNode;
     }): JSX.Element;
     init(config: CanvasConfig): void;
+    private groupLayers;
+    private getDefaultTransform;
+    private onClick;
+    private onContextMenu;
+    private onMouseMove;
+    private onMouseLeave;
+    private handleEdgeScroll;
     private isCanvasEvent;
 }
 
-export { Canvas, type CanvasConfig, type CanvasContentSize, type CanvasEventListener, type CanvasEventType, type CanvasTransformState, type EdgeScrollConfig, type ScrollNodeIntoViewOptions };
+export { Canvas, type CanvasConfig, type CanvasContentSize, type CanvasEventListener, type CanvasEventType, type CanvasTransformState, type DefaultLocatedOptions, type EdgeScrollConfig, type ScrollNodeIntoViewOptions };

package/dist/index.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from '@knotx/jsx/jsx-runtime';
-import { Layer, DOMElement, InteractionPriority, bem, BasePlugin } from '@knotx/core';
+import { Layer, DOMElement, bem, BasePlugin, InteractionPriority } 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';
+import { useMemo, useReducer, useLayoutEffect, Fragment } from 'react';
 import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
 
 function calculateTransform({
@@ -243,6 +243,47 @@ class Canvas extends (_a = BasePlugin, _transform_dec = [register("transform")],
     __publicField(this, "removeListener", __runInitializers(_init, 44, this, (type, listener) => {
       this.listeners[type].delete(listener);
     })), __runInitializers(_init, 47, this);
+    __publicField(this, "onClick", (e) => {
+      if (!this.isCanvasEvent(e)) {
+        return;
+      }
+      if (!this.interaction.canInteract(InteractionPriority.CanvasClick)) {
+        return;
+      }
+      this.listeners.click.forEach((listener) => {
+        listener(e);
+      });
+    });
+    __publicField(this, "onContextMenu", (e) => {
+      if (!this.isCanvasEvent(e)) {
+        return;
+      }
+      if (!this.interaction.canInteract(InteractionPriority.CanvasContextMenu)) {
+        return;
+      }
+      this.listeners.contextmenu.forEach((listener) => {
+        listener(e);
+      });
+    });
+    __publicField(this, "onMouseMove", (e) => {
+      if (this.edgeScroll.config.enabled) {
+        const rect = e.currentTarget.getBoundingClientRect();
+        this.mousePosition = {
+          x: e.clientX - rect.left,
+          y: e.clientY - rect.top
+        };
+        if (this.edgeScrollAnimationFrame === null) {
+          this.edgeScrollAnimationFrame = requestAnimationFrame(this.handleEdgeScroll);
+        }
+      }
+    });
+    __publicField(this, "onMouseLeave", () => {
+      this.mousePosition = null;
+      if (this.edgeScrollAnimationFrame !== null) {
+        cancelAnimationFrame(this.edgeScrollAnimationFrame);
+        this.edgeScrollAnimationFrame = null;
+      }
+    });
     __publicField(this, "handleEdgeScroll", () => {
       if (!this.edgeScroll.config.enabled || !this.mousePosition || !this.ref) {
         return;
@@ -321,30 +362,7 @@ class Canvas extends (_a = BasePlugin, _transform_dec = [register("transform")],
   }
   render({ children } = { children: null }) {
     var _a2, _b, _c, _d;
-    const defaultTransform = useMemo(() => {
-      const defaultLocated = __spreadValues({}, this.config.defaultLocated);
-      if (!(defaultLocated == null ? void 0 : defaultLocated.nodeId)) {
-        return this.transform;
-      }
-      const node = this.getNode({ id: defaultLocated.nodeId });
-      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,
-        contentSize: this.contentSize
-      }, defaultLocated));
-      const newTransform = {
-        previousScale: this.transform.scale,
-        scale: newScale,
-        positionX: -positionX,
-        positionY: -positionY
-      };
-      this.transform = newTransform;
-      return newTransform;
-    }, []);
+    const defaultTransform = useMemo(() => this.getDefaultTransform(), []);
     const [transformRef, setTransformRef] = useReducer((_, ref) => {
       var _a3;
       const dom = ref.instance.wrapperComponent;
@@ -356,21 +374,7 @@ class Canvas extends (_a = BasePlugin, _transform_dec = [register("transform")],
       }
       return ref;
     }, null);
-    const [fixedLayers, childrenLayers] = useMemo(() => {
-      const fixedLayers2 = [];
-      const childrenLayers2 = [];
-      for (const child of Array.isArray(children) ? children : [children]) {
-        if (!(child == null ? void 0 : child.key)) {
-          continue;
-        }
-        if (child.key <= Layer.Background << 1 || child.key > Layer.Foreground >> 1) {
-          fixedLayers2.push(child);
-        } else {
-          childrenLayers2.push(child);
-        }
-      }
-      return [fixedLayers2, childrenLayers2];
-    }, [children]);
+    const [fixedLayers, childrenLayers] = useMemo(() => this.groupLayers(children), [children]);
     useLayoutEffect(() => {
       const wrapperElement = transformRef == null ? void 0 : transformRef.instance.wrapperComponent;
       const onScroll = (event) => {
@@ -411,47 +415,6 @@ class Canvas extends (_a = BasePlugin, _transform_dec = [register("transform")],
         wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll, { capture: true });
       };
     }, [transformRef]);
-    const onClick = useCallback((e) => {
-      if (!this.isCanvasEvent(e)) {
-        return;
-      }
-      if (!this.interaction.canInteract(InteractionPriority.CanvasClick)) {
-        return;
-      }
-      this.listeners.click.forEach((listener) => {
-        listener(e);
-      });
-    }, []);
-    const onContextMenu = useCallback((e) => {
-      if (!this.isCanvasEvent(e)) {
-        return;
-      }
-      if (!this.interaction.canInteract(InteractionPriority.CanvasContextMenu)) {
-        return;
-      }
-      this.listeners.contextmenu.forEach((listener) => {
-        listener(e);
-      });
-    }, []);
-    const onMouseMove = useCallback((e) => {
-      if (this.edgeScroll.config.enabled) {
-        const rect = e.currentTarget.getBoundingClientRect();
-        this.mousePosition = {
-          x: e.clientX - rect.left,
-          y: e.clientY - rect.top
-        };
-        if (this.edgeScrollAnimationFrame === null) {
-          this.edgeScrollAnimationFrame = requestAnimationFrame(this.handleEdgeScroll);
-        }
-      }
-    }, []);
-    const onMouseLeave = useCallback(() => {
-      this.mousePosition = null;
-      if (this.edgeScrollAnimationFrame !== null) {
-        cancelAnimationFrame(this.edgeScrollAnimationFrame);
-        this.edgeScrollAnimationFrame = null;
-      }
-    }, []);
     return /* @__PURE__ */ jsxs(
       TransformWrapper,
       __spreadProps(__spreadValues({}, this.config), {
@@ -468,14 +431,15 @@ class Canvas extends (_a = BasePlugin, _transform_dec = [register("transform")],
               wrapperStyle: {
                 width: "100%",
                 height: "100%",
-                zIndex: Layer.Nodes | Layer.Edges,
+                zIndex: Layer.Nodes,
                 contain: "strict"
               },
               wrapperProps: {
-                onClick,
-                onContextMenu,
-                onMouseMove,
-                onMouseLeave
+                id: this.pluginId,
+                onClick: this.onClick,
+                onContextMenu: this.onContextMenu,
+                onMouseMove: this.onMouseMove,
+                onMouseLeave: this.onMouseLeave
               },
               contentClass: bem(this.name, "content"),
               contentStyle: {
@@ -512,6 +476,45 @@ class Canvas extends (_a = BasePlugin, _transform_dec = [register("transform")],
       this.rootElement = null;
     });
   }
+  groupLayers(children) {
+    const fixedLayers = [];
+    const childrenLayers = [];
+    for (const child of Array.isArray(children) ? children : [children]) {
+      if (!(child == null ? void 0 : child.key)) {
+        continue;
+      }
+      if (child.key <= Layer.Background << 1 || child.key > Layer.Foreground >> 1) {
+        fixedLayers.push(child);
+      } else {
+        childrenLayers.push(child);
+      }
+    }
+    return [fixedLayers, childrenLayers];
+  }
+  getDefaultTransform() {
+    const defaultLocated = __spreadValues({}, this.config.defaultLocated);
+    if (!(defaultLocated == null ? void 0 : defaultLocated.nodeId) && !defaultLocated.limitToBounds) {
+      return this.transform;
+    }
+    const node = defaultLocated.nodeId ? this.getNode({ id: defaultLocated.nodeId }) : void 0;
+    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,
+      contentSize: this.contentSize
+    }, defaultLocated));
+    const newTransform = {
+      previousScale: this.transform.scale,
+      scale: newScale,
+      positionX: -positionX,
+      positionY: -positionY
+    };
+    this.transform = newTransform;
+    return newTransform;
+  }
   isCanvasEvent(e) {
     return e.target === e.currentTarget || e.target.classList.contains(bem(this.name, "content"));
   }

package/package.json

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