@knotx/plugins-canvas 0.3.4 → 0.3.5

package/dist/index.cjs

@@ -75,8 +75,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, _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()], _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, _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", {
   type: "object",
   properties: {
     nodeId: { type: "string" },
@@ -122,19 +122,76 @@ 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, "getNode", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
-    __publicField(this, "container", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
-    __publicField(this, "interaction", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
+    __publicField(this, "edgeScroll", __runInitializers(_init, 16, this, {
+      config: {
+        enabled: false,
+        edgeSize: 50,
+        maxSpeed: 10,
+        cornerSize: 25
+      },
+      setConfig: (config) => {
+        this.edgeScroll.config = __spreadValues(__spreadValues({}, this.edgeScroll.config), config);
+        if (this.edgeScroll.config.enabled && this.edgeScrollAnimationFrame !== null) {
+          cancelAnimationFrame(this.edgeScrollAnimationFrame);
+          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);
     __publicField(this, "listeners", {
       click: /* @__PURE__ */ new Set(),
       contextmenu: /* @__PURE__ */ new Set()
     });
-    __publicField(this, "addListener", __runInitializers(_init, 28, this, (type, listener) => {
+    __publicField(this, "edgeScrollAnimationFrame", null);
+    __publicField(this, "mousePosition", null);
+    __publicField(this, "addListener", __runInitializers(_init, 32, this, (type, listener) => {
       this.listeners[type].add(listener);
-    })), __runInitializers(_init, 31, this);
-    __publicField(this, "removeListener", __runInitializers(_init, 32, this, (type, listener) => {
-      this.listeners[type].delete(listener);
     })), __runInitializers(_init, 35, this);
+    __publicField(this, "removeListener", __runInitializers(_init, 36, this, (type, listener) => {
+      this.listeners[type].delete(listener);
+    })), __runInitializers(_init, 39, this);
+    __publicField(this, "handleEdgeScroll", () => {
+      if (!this.edgeScroll.config.enabled || !this.mousePosition || !this.ref) {
+        return;
+      }
+      const { x, y } = this.mousePosition;
+      const { edgeSize, maxSpeed, cornerSize = edgeSize / 2 } = this.edgeScroll.config;
+      const viewportWidth = this.container.width;
+      const viewportHeight = this.container.height;
+      let deltaX = 0;
+      let deltaY = 0;
+      let isCorner = false;
+      if (x <= cornerSize && y <= cornerSize || x <= cornerSize && y >= viewportHeight - cornerSize || x >= viewportWidth - cornerSize && y <= cornerSize || x >= viewportWidth - cornerSize && y >= viewportHeight - cornerSize) {
+        isCorner = true;
+      }
+      if (x <= edgeSize) {
+        const distance = isCorner ? cornerSize - x : edgeSize - x;
+        const factor = Math.min(distance / (isCorner ? cornerSize : edgeSize), 1);
+        deltaX = maxSpeed * factor;
+      } else if (x >= viewportWidth - edgeSize) {
+        const distance = isCorner ? x - (viewportWidth - cornerSize) : x - (viewportWidth - edgeSize);
+        const factor = Math.min(distance / (isCorner ? cornerSize : edgeSize), 1);
+        deltaX = -maxSpeed * factor;
+      }
+      if (y <= edgeSize) {
+        const distance = isCorner ? cornerSize - y : edgeSize - y;
+        const factor = Math.min(distance / (isCorner ? cornerSize : edgeSize), 1);
+        deltaY = maxSpeed * factor;
+      } else if (y >= viewportHeight - edgeSize) {
+        const distance = isCorner ? y - (viewportHeight - cornerSize) : y - (viewportHeight - edgeSize);
+        const factor = Math.min(distance / (isCorner ? cornerSize : edgeSize), 1);
+        deltaY = -maxSpeed * factor;
+      }
+      if (deltaX !== 0 || deltaY !== 0) {
+        const currentState = this.ref.instance.transformState;
+        const newPositionX = currentState.positionX + deltaX;
+        const newPositionY = currentState.positionY + deltaY;
+        this.ref.setTransform(newPositionX, newPositionY, currentState.scale, 0);
+      }
+      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;
@@ -213,7 +270,18 @@ 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 [transform, setTransform] = react.useState(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));
+      }
+      return ref;
+    }, null);
     const [fixedLayers, childrenLayers] = react.useMemo(() => {
       const fixedLayers2 = [];
       const childrenLayers2 = [];
@@ -230,35 +298,34 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
       return [fixedLayers2, childrenLayers2];
     }, [children]);
     react.useEffect(() => {
-      this.ref = transform;
-      const wrapperElement = transform == null ? void 0 : transform.instance.wrapperComponent;
+      const wrapperElement = transformRef == null ? void 0 : transformRef.instance.wrapperComponent;
       if (!wrapperElement) {
         return;
       }
       Object.defineProperty(wrapperElement, "scrollTop", {
         get() {
-          return -transform.instance.transformState.positionY;
+          return -transformRef.instance.transformState.positionY;
         },
         set(value) {
-          transform.instance.setTransformState(transform.instance.transformState.scale, transform.instance.transformState.positionX, -value);
+          transformRef.instance.setTransformState(transformRef.instance.transformState.scale, transformRef.instance.transformState.positionX, -value);
         }
       });
       Object.defineProperty(wrapperElement, "scrollLeft", {
         get() {
-          return -transform.instance.transformState.positionX;
+          return -transformRef.instance.transformState.positionX;
         },
         set(value) {
-          transform.instance.setTransformState(transform.instance.transformState.scale, -value, transform.instance.transformState.positionY);
+          transformRef.instance.setTransformState(transformRef.instance.transformState.scale, -value, transformRef.instance.transformState.positionY);
         }
       });
       let frame;
-      return transform == null ? void 0 : transform.instance.onChange((ref) => {
+      return transformRef == null ? void 0 : transformRef.instance.onChange((ref) => {
         cancelAnimationFrame(frame);
         frame = requestAnimationFrame(() => {
           this.transform = __spreadValues({}, ref.state);
         });
       });
-    }, [transform]);
+    }, [transformRef]);
     const onClick = react.useCallback((e) => {
       if (!this.isCanvasEvent(e)) {
         return;
@@ -281,10 +348,29 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
         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), {
-        ref: setTransform,
+        ref: setTransformRef,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: fixedLayers }),
           /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -299,7 +385,9 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
               },
               wrapperProps: {
                 onClick,
-                onContextMenu
+                onContextMenu,
+                onMouseMove,
+                onMouseLeave
               },
               contentClass: core.bem(this.name, "content"),
               contentStyle: {
@@ -329,6 +417,10 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
     };
     this.subscriptions.push(() => {
       Object.values(this.listeners).forEach((set) => set.clear());
+      if (this.edgeScrollAnimationFrame !== null) {
+        cancelAnimationFrame(this.edgeScrollAnimationFrame);
+        this.edgeScrollAnimationFrame = null;
+      }
     });
   }
   isCanvasEvent(e) {
@@ -344,6 +436,7 @@ __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, "edgeScroll", _edgeScroll_dec, Canvas);
 __decorateElement(_init, 5, "getNode", _getNode_dec, Canvas);
 __decorateElement(_init, 5, "container", _container_dec, Canvas);
 __decorateElement(_init, 5, "interaction", _interaction_dec, Canvas);

package/dist/index.d.cts

@@ -3,9 +3,27 @@ import { InferParamsFromSchema } from '@knotx/decorators';
 import { MouseEvent, ReactNode } from 'react';
 import { ReactZoomPanPinchContentRef, ReactZoomPanPinchState, ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
 
-type CanvasConfig = ReactZoomPanPinchProps;
+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;
+    };
+};
 type CanvasTransformState = ReactZoomPanPinchState;
 type CanvasRef = ReactZoomPanPinchContentRef;
+interface EdgeScrollConfig {
+    enabled: boolean;
+    edgeSize: number;
+    maxSpeed: number;
+    cornerSize?: number;
+}
 declare module '@knotx/core' {
     interface PluginData {
         canvas: {
@@ -13,6 +31,10 @@ declare module '@knotx/core' {
             transform: CanvasTransformState;
             addListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
             removeListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
+            edgeScroll: {
+                config: EdgeScrollConfig;
+                setConfig: (config: Partial<EdgeScrollConfig>) => void;
+            };
         };
     }
     interface PluginTools {
@@ -52,10 +74,16 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     name: "canvas";
     ref: CanvasRef | null;
     transform: CanvasTransformState;
+    edgeScroll: {
+        config: EdgeScrollConfig;
+        setConfig: (config: Partial<EdgeScrollConfig>) => void;
+    };
     private getNode;
     private container;
     interaction: Engine['interaction'];
     private listeners;
+    private edgeScrollAnimationFrame;
+    private mousePosition;
     addListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
     removeListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
     scrollNodeIntoView({ nodeId, scale, block, inline, offset, animationTime }: InferParamsFromSchema<{
@@ -131,6 +159,7 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
             };
         };
     }>): void;
+    private handleEdgeScroll;
     render({ children }?: {
         children: ReactNode;
     }): JSX.Element;
@@ -138,4 +167,4 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     private isCanvasEvent;
 }
 
-export { Canvas, type CanvasConfig, type CanvasEventListener, type CanvasEventType, type CanvasRef, type CanvasTransformState };
+export { Canvas, type CanvasConfig, type CanvasEventListener, type CanvasEventType, type CanvasRef, type CanvasTransformState, type EdgeScrollConfig };

package/dist/index.d.mts

@@ -3,9 +3,27 @@ import { InferParamsFromSchema } from '@knotx/decorators';
 import { MouseEvent, ReactNode } from 'react';
 import { ReactZoomPanPinchContentRef, ReactZoomPanPinchState, ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
 
-type CanvasConfig = ReactZoomPanPinchProps;
+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;
+    };
+};
 type CanvasTransformState = ReactZoomPanPinchState;
 type CanvasRef = ReactZoomPanPinchContentRef;
+interface EdgeScrollConfig {
+    enabled: boolean;
+    edgeSize: number;
+    maxSpeed: number;
+    cornerSize?: number;
+}
 declare module '@knotx/core' {
     interface PluginData {
         canvas: {
@@ -13,6 +31,10 @@ declare module '@knotx/core' {
             transform: CanvasTransformState;
             addListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
             removeListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
+            edgeScroll: {
+                config: EdgeScrollConfig;
+                setConfig: (config: Partial<EdgeScrollConfig>) => void;
+            };
         };
     }
     interface PluginTools {
@@ -52,10 +74,16 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     name: "canvas";
     ref: CanvasRef | null;
     transform: CanvasTransformState;
+    edgeScroll: {
+        config: EdgeScrollConfig;
+        setConfig: (config: Partial<EdgeScrollConfig>) => void;
+    };
     private getNode;
     private container;
     interaction: Engine['interaction'];
     private listeners;
+    private edgeScrollAnimationFrame;
+    private mousePosition;
     addListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
     removeListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
     scrollNodeIntoView({ nodeId, scale, block, inline, offset, animationTime }: InferParamsFromSchema<{
@@ -131,6 +159,7 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
             };
         };
     }>): void;
+    private handleEdgeScroll;
     render({ children }?: {
         children: ReactNode;
     }): JSX.Element;
@@ -138,4 +167,4 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     private isCanvasEvent;
 }
 
-export { Canvas, type CanvasConfig, type CanvasEventListener, type CanvasEventType, type CanvasRef, type CanvasTransformState };
+export { Canvas, type CanvasConfig, type CanvasEventListener, type CanvasEventType, type CanvasRef, type CanvasTransformState, type EdgeScrollConfig };

package/dist/index.d.ts

@@ -3,9 +3,27 @@ import { InferParamsFromSchema } from '@knotx/decorators';
 import { MouseEvent, ReactNode } from 'react';
 import { ReactZoomPanPinchContentRef, ReactZoomPanPinchState, ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
 
-type CanvasConfig = ReactZoomPanPinchProps;
+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;
+    };
+};
 type CanvasTransformState = ReactZoomPanPinchState;
 type CanvasRef = ReactZoomPanPinchContentRef;
+interface EdgeScrollConfig {
+    enabled: boolean;
+    edgeSize: number;
+    maxSpeed: number;
+    cornerSize?: number;
+}
 declare module '@knotx/core' {
     interface PluginData {
         canvas: {
@@ -13,6 +31,10 @@ declare module '@knotx/core' {
             transform: CanvasTransformState;
             addListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
             removeListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
+            edgeScroll: {
+                config: EdgeScrollConfig;
+                setConfig: (config: Partial<EdgeScrollConfig>) => void;
+            };
         };
     }
     interface PluginTools {
@@ -52,10 +74,16 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     name: "canvas";
     ref: CanvasRef | null;
     transform: CanvasTransformState;
+    edgeScroll: {
+        config: EdgeScrollConfig;
+        setConfig: (config: Partial<EdgeScrollConfig>) => void;
+    };
     private getNode;
     private container;
     interaction: Engine['interaction'];
     private listeners;
+    private edgeScrollAnimationFrame;
+    private mousePosition;
     addListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
     removeListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
     scrollNodeIntoView({ nodeId, scale, block, inline, offset, animationTime }: InferParamsFromSchema<{
@@ -131,6 +159,7 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
             };
         };
     }>): void;
+    private handleEdgeScroll;
     render({ children }?: {
         children: ReactNode;
     }): JSX.Element;
@@ -138,4 +167,4 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     private isCanvasEvent;
 }
 
-export { Canvas, type CanvasConfig, type CanvasEventListener, type CanvasEventType, type CanvasRef, type CanvasTransformState };
+export { Canvas, type CanvasConfig, type CanvasEventListener, type CanvasEventType, type CanvasRef, type CanvasTransformState, type EdgeScrollConfig };

package/dist/index.js

@@ -2,7 +2,7 @@ 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 { useState, useMemo, useEffect, useCallback, Fragment } from 'react';
+import { useReducer, useMemo, useEffect, useCallback, Fragment } from 'react';
 import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
 
 var __create = Object.create;
@@ -73,8 +73,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, _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()], _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, _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", {
   type: "object",
   properties: {
     nodeId: { type: "string" },
@@ -120,19 +120,76 @@ 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, "getNode", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
-    __publicField(this, "container", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
-    __publicField(this, "interaction", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
+    __publicField(this, "edgeScroll", __runInitializers(_init, 16, this, {
+      config: {
+        enabled: false,
+        edgeSize: 50,
+        maxSpeed: 10,
+        cornerSize: 25
+      },
+      setConfig: (config) => {
+        this.edgeScroll.config = __spreadValues(__spreadValues({}, this.edgeScroll.config), config);
+        if (this.edgeScroll.config.enabled && this.edgeScrollAnimationFrame !== null) {
+          cancelAnimationFrame(this.edgeScrollAnimationFrame);
+          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);
     __publicField(this, "listeners", {
       click: /* @__PURE__ */ new Set(),
       contextmenu: /* @__PURE__ */ new Set()
     });
-    __publicField(this, "addListener", __runInitializers(_init, 28, this, (type, listener) => {
+    __publicField(this, "edgeScrollAnimationFrame", null);
+    __publicField(this, "mousePosition", null);
+    __publicField(this, "addListener", __runInitializers(_init, 32, this, (type, listener) => {
       this.listeners[type].add(listener);
-    })), __runInitializers(_init, 31, this);
-    __publicField(this, "removeListener", __runInitializers(_init, 32, this, (type, listener) => {
-      this.listeners[type].delete(listener);
     })), __runInitializers(_init, 35, this);
+    __publicField(this, "removeListener", __runInitializers(_init, 36, this, (type, listener) => {
+      this.listeners[type].delete(listener);
+    })), __runInitializers(_init, 39, this);
+    __publicField(this, "handleEdgeScroll", () => {
+      if (!this.edgeScroll.config.enabled || !this.mousePosition || !this.ref) {
+        return;
+      }
+      const { x, y } = this.mousePosition;
+      const { edgeSize, maxSpeed, cornerSize = edgeSize / 2 } = this.edgeScroll.config;
+      const viewportWidth = this.container.width;
+      const viewportHeight = this.container.height;
+      let deltaX = 0;
+      let deltaY = 0;
+      let isCorner = false;
+      if (x <= cornerSize && y <= cornerSize || x <= cornerSize && y >= viewportHeight - cornerSize || x >= viewportWidth - cornerSize && y <= cornerSize || x >= viewportWidth - cornerSize && y >= viewportHeight - cornerSize) {
+        isCorner = true;
+      }
+      if (x <= edgeSize) {
+        const distance = isCorner ? cornerSize - x : edgeSize - x;
+        const factor = Math.min(distance / (isCorner ? cornerSize : edgeSize), 1);
+        deltaX = maxSpeed * factor;
+      } else if (x >= viewportWidth - edgeSize) {
+        const distance = isCorner ? x - (viewportWidth - cornerSize) : x - (viewportWidth - edgeSize);
+        const factor = Math.min(distance / (isCorner ? cornerSize : edgeSize), 1);
+        deltaX = -maxSpeed * factor;
+      }
+      if (y <= edgeSize) {
+        const distance = isCorner ? cornerSize - y : edgeSize - y;
+        const factor = Math.min(distance / (isCorner ? cornerSize : edgeSize), 1);
+        deltaY = maxSpeed * factor;
+      } else if (y >= viewportHeight - edgeSize) {
+        const distance = isCorner ? y - (viewportHeight - cornerSize) : y - (viewportHeight - edgeSize);
+        const factor = Math.min(distance / (isCorner ? cornerSize : edgeSize), 1);
+        deltaY = -maxSpeed * factor;
+      }
+      if (deltaX !== 0 || deltaY !== 0) {
+        const currentState = this.ref.instance.transformState;
+        const newPositionX = currentState.positionX + deltaX;
+        const newPositionY = currentState.positionY + deltaY;
+        this.ref.setTransform(newPositionX, newPositionY, currentState.scale, 0);
+      }
+      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;
@@ -211,7 +268,18 @@ 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 [transform, setTransform] = useState(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));
+      }
+      return ref;
+    }, null);
     const [fixedLayers, childrenLayers] = useMemo(() => {
       const fixedLayers2 = [];
       const childrenLayers2 = [];
@@ -228,35 +296,34 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
       return [fixedLayers2, childrenLayers2];
     }, [children]);
     useEffect(() => {
-      this.ref = transform;
-      const wrapperElement = transform == null ? void 0 : transform.instance.wrapperComponent;
+      const wrapperElement = transformRef == null ? void 0 : transformRef.instance.wrapperComponent;
       if (!wrapperElement) {
         return;
       }
       Object.defineProperty(wrapperElement, "scrollTop", {
         get() {
-          return -transform.instance.transformState.positionY;
+          return -transformRef.instance.transformState.positionY;
         },
         set(value) {
-          transform.instance.setTransformState(transform.instance.transformState.scale, transform.instance.transformState.positionX, -value);
+          transformRef.instance.setTransformState(transformRef.instance.transformState.scale, transformRef.instance.transformState.positionX, -value);
         }
       });
       Object.defineProperty(wrapperElement, "scrollLeft", {
         get() {
-          return -transform.instance.transformState.positionX;
+          return -transformRef.instance.transformState.positionX;
         },
         set(value) {
-          transform.instance.setTransformState(transform.instance.transformState.scale, -value, transform.instance.transformState.positionY);
+          transformRef.instance.setTransformState(transformRef.instance.transformState.scale, -value, transformRef.instance.transformState.positionY);
         }
       });
       let frame;
-      return transform == null ? void 0 : transform.instance.onChange((ref) => {
+      return transformRef == null ? void 0 : transformRef.instance.onChange((ref) => {
         cancelAnimationFrame(frame);
         frame = requestAnimationFrame(() => {
           this.transform = __spreadValues({}, ref.state);
         });
       });
-    }, [transform]);
+    }, [transformRef]);
     const onClick = useCallback((e) => {
       if (!this.isCanvasEvent(e)) {
         return;
@@ -279,10 +346,29 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
         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), {
-        ref: setTransform,
+        ref: setTransformRef,
         children: [
           /* @__PURE__ */ jsx(Fragment, { children: fixedLayers }),
           /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
@@ -297,7 +383,9 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
               },
               wrapperProps: {
                 onClick,
-                onContextMenu
+                onContextMenu,
+                onMouseMove,
+                onMouseLeave
               },
               contentClass: bem(this.name, "content"),
               contentStyle: {
@@ -327,6 +415,10 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
     };
     this.subscriptions.push(() => {
       Object.values(this.listeners).forEach((set) => set.clear());
+      if (this.edgeScrollAnimationFrame !== null) {
+        cancelAnimationFrame(this.edgeScrollAnimationFrame);
+        this.edgeScrollAnimationFrame = null;
+      }
     });
   }
   isCanvasEvent(e) {
@@ -342,6 +434,7 @@ __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, "edgeScroll", _edgeScroll_dec, Canvas);
 __decorateElement(_init, 5, "getNode", _getNode_dec, Canvas);
 __decorateElement(_init, 5, "container", _container_dec, Canvas);
 __decorateElement(_init, 5, "interaction", _interaction_dec, Canvas);

package/package.json

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