@knotx/plugins-canvas 0.4.11 → 0.4.13

package/README.en.md

@@ -0,0 +1,371 @@
+# @knotx/plugins-canvas
+
+Canvas plugin that provides canvas container, transformation controls, and interaction features for KnotX.
+
+## Installation
+
+```bash
+npm install @knotx/plugins-canvas
+```
+
+## Overview
+
+The Canvas plugin is one of the core plugins for KnotX, providing canvas container, zoom, pan, scroll, and other basic functionalities. This plugin is built on top of the `react-zoom-pan-pinch` library and provides transformation state and container information for other plugins.
+
+## Implementation Principle
+
+The Canvas plugin implements canvas functionality through:
+
+1. **Transform Management**: Uses the `react-zoom-pan-pinch` library to manage canvas zoom and pan
+2. **Event System**: Provides canvas-level event listening and handling
+3. **Edge Scrolling**: Supports automatic scrolling when dragging to edges
+4. **Content Size Management**: Tracks and manages canvas content dimensions
+
+## Dependencies
+
+### Core Dependencies
+- `@knotx/core`: Provides base plugin architecture
+- `@knotx/decorators`: Provides decorator support
+- `@knotx/react-zoom-pan-pinch`: Provides zoom and pan functionality
+- `lodash-es`: Provides utility functions
+- `rxjs`: Provides reactive programming support
+
+### Optional Dependencies
+- `@knotx/plugins-history`: Provides history functionality
+- `react`: React framework support
+
+## API Documentation
+
+### Main Classes
+
+#### Canvas
+
+The main class of the Canvas plugin, extending `BasePlugin`.
+
+```typescript
+export class Canvas extends BasePlugin<'canvas', CanvasConfig> {
+  name = 'canvas' as const
+}
+```
+
+### Configuration Options
+
+#### CanvasConfig
+
+```typescript
+export type CanvasConfig = ReactZoomPanPinchProps & {
+  defaultLocated?: DefaultLocatedOptions
+}
+```
+
+Inherits all configuration options from `react-zoom-pan-pinch` and adds:
+
+- `defaultLocated`: Default positioning options
+
+### Plugin Data (PluginData)
+
+The Canvas plugin provides the following data to other plugins:
+
+```typescript
+interface PluginData {
+  canvas: {
+    transform: CanvasTransformState
+    rootElement: Element | null
+    contentSize: CanvasContentSize | undefined
+    updateContentSize: (contentSize: CanvasContentSize) => void
+    addListener: (event: CanvasEventType, listener: CanvasEventListener) => void
+    removeListener: (event: CanvasEventType, listener: CanvasEventListener) => void
+    edgeScroll: {
+      config: EdgeScrollConfig
+      setConfig: (config: Partial<EdgeScrollConfig>) => void
+    }
+  }
+}
+```
+
+### Plugin Tools (PluginTools)
+
+The Canvas plugin provides the following tool methods:
+
+```typescript
+interface PluginTools {
+  canvas: {
+    scrollNodeIntoView: (params: ScrollNodeIntoViewOptions) => void
+    zoomIn: (params: { step?: number, animationTime?: number }) => void
+    zoomOut: (params: { step?: number, animationTime?: number }) => void
+    setTransform: (params: {
+      positionX: number
+      positionY: number
+      scale: number
+      animationTime?: number
+    }) => void
+    resetTransform: (params: { animationTime?: number }) => void
+  }
+}
+```
+
+### Type Definitions
+
+#### CanvasTransformState
+
+```typescript
+interface CanvasTransformState {
+  positionX: number
+  positionY: number
+  scale: number
+  previousScale: number
+}
+```
+
+#### CanvasContentSize
+
+```typescript
+interface CanvasContentSize {
+  width: number
+  height: number
+}
+```
+
+#### EdgeScrollConfig
+
+```typescript
+interface EdgeScrollConfig {
+  enabled: boolean
+  edgeSize: number
+  maxSpeed: number
+}
+```
+
+## Usage Examples
+
+### Basic Usage
+
+```typescript
+import { Canvas } from '@knotx/plugins-canvas'
+
+const engine = new Engine({
+  plugins: [Canvas],
+  pluginConfig: {
+    canvas: {
+      minScale: 0.1,
+      maxScale: 3,
+      limitToBounds: false,
+    },
+  },
+})
+```
+
+### Custom Zoom Configuration
+
+```typescript
+const engine = new Engine({
+  plugins: [Canvas],
+  pluginConfig: {
+    canvas: {
+      minScale: 0.2,
+      maxScale: 5,
+      wheel: {
+        step: 0.1,
+        smoothStep: 0.006,
+      },
+      panning: {
+        allowLeftClickPan: false,
+        allowRightClickPan: true,
+        wheelPanning: true,
+      },
+      zoomAnimation: {
+        size: 0.1,
+      },
+    },
+  },
+})
+```
+
+### Edge Scrolling Configuration
+
+```typescript
+const engine = new Engine({
+  plugins: [Canvas],
+  pluginConfig: {
+    canvas: {
+      // Basic configuration
+    },
+  },
+})
+
+// Enable edge scrolling
+engine.callTool('canvas', 'edgeScroll.setConfig', {
+  enabled: true,
+  edgeSize: 100,
+  maxSpeed: 10,
+})
+```
+
+### Tool Methods Usage
+
+```typescript
+// Zoom in
+engine.callTool('canvas', 'zoomIn', { step: 0.2, animationTime: 300 })
+
+// Zoom out
+engine.callTool('canvas', 'zoomOut', { step: 0.2, animationTime: 300 })
+
+// Set transform
+engine.callTool('canvas', 'setTransform', {
+  positionX: 100,
+  positionY: 100,
+  scale: 1.5,
+  animationTime: 500,
+})
+
+// Reset transform
+engine.callTool('canvas', 'resetTransform', { animationTime: 300 })
+
+// Scroll node into view
+engine.callTool('canvas', 'scrollNodeIntoView', {
+  nodeId: 'node-1',
+  scale: 1.2,
+  block: 'center',
+  inline: 'center',
+})
+```
+
+### Event Listening
+
+```typescript
+// Get canvas data
+const canvasData = engine.getPluginData('canvas')
+
+// Add click event listener
+function handleClick(event: MouseEvent) {
+  console.log('Canvas clicked:', event)
+}
+
+canvasData.addListener('click', handleClick)
+
+// Remove listener
+canvasData.removeListener('click', handleClick)
+```
+
+### Getting Transform State
+
+```typescript
+// Get transform state in other plugins
+class MyPlugin extends BasePlugin {
+  @inject.canvas.transform()
+  transform!: CanvasTransformState
+
+  someMethod() {
+    console.log('Current scale:', this.transform.scale)
+    console.log('Position:', this.transform.positionX, this.transform.positionY)
+  }
+}
+```
+
+## Integration with Other Plugins
+
+### Integration with History Plugin
+
+```typescript
+import { Canvas } from '@knotx/plugins-canvas'
+import { History } from '@knotx/plugins-history'
+
+const engine = new Engine({
+  plugins: [Canvas, History],
+  pluginConfig: {
+    canvas: {
+      minScale: 0.1,
+      maxScale: 3,
+    },
+    history: {
+      maxHistory: 50,
+    },
+  },
+})
+```
+
+### Integration with Background Plugin
+
+```typescript
+import { Background } from '@knotx/plugins-background'
+import { Canvas } from '@knotx/plugins-canvas'
+
+const engine = new Engine({
+  plugins: [Canvas, Background],
+  pluginConfig: {
+    canvas: {
+      minScale: 0.1,
+      maxScale: 3,
+    },
+    background: {
+      variant: 'dots',
+      color: '#ddd',
+    },
+  },
+})
+```
+
+## File Directory Structure
+
+```
+packages/plugins-canvas/
+├── src/
+│   ├── canvas.tsx              # Main implementation file
+│   ├── transform.ts            # Transform calculation utilities
+│   ├── types.ts               # Type definitions
+│   └── index.ts               # Export file
+├── dist/                      # Build output directory
+├── package.json              # Package configuration
+├── build.config.ts           # Build configuration
+├── tsconfig.json             # TypeScript configuration
+├── eslint.config.mjs         # ESLint configuration
+└── CHANGELOG.md              # Changelog
+```
+
+### Core Files Description
+
+- **canvas.tsx**: Contains the main implementation of the Canvas plugin, including transform management, event handling, and tool methods
+- **transform.ts**: Transform calculation utility functions
+- **types.ts**: TypeScript type definitions
+- **index.ts**: Exports the Canvas class and related type definitions
+
+## Advanced Features
+
+### Custom Transform Calculation
+
+```typescript
+// Use utility functions from transform.ts
+import { calculateTransform } from '@knotx/plugins-canvas/transform'
+
+const result = calculateTransform({
+  // Transform parameters
+})
+```
+
+### Dynamic Content Size
+
+```typescript
+// Dynamically update content size in plugins
+class MyPlugin extends BasePlugin {
+  @inject.canvas.updateContentSize()
+  updateContentSize!: (size: CanvasContentSize) => void
+
+  updateSize() {
+    this.updateContentSize({
+      width: 2000,
+      height: 1500,
+    })
+  }
+}
+```
+
+## Notes
+
+1. **Performance Optimization**: The Canvas plugin frequently triggers re-renders; only listen to transform state when necessary
+2. **Event Bubbling**: Canvas events may conflict with other events; pay attention to event handling priority
+3. **Memory Management**: Remove unnecessary event listeners promptly to avoid memory leaks
+4. **React Version**: Ensure React version compatibility with `react-zoom-pan-pinch`
+
+## License
+
+MIT

package/README.md

@@ -0,0 +1,371 @@
+# @knotx/plugins-canvas
+
+画布插件，为 KnotX 提供画布容器、变换控制和交互功能。
+
+## 安装
+
+```bash
+npm install @knotx/plugins-canvas
+```
+
+## 概述
+
+Canvas 插件是 KnotX 的核心插件之一，提供了画布容器、缩放、平移、滚动等基础功能。该插件基于 `react-zoom-pan-pinch` 库实现，为其他插件提供了变换状态和容器信息。
+
+## 实现原理
+
+Canvas 插件通过以下方式实现画布功能：
+
+1. **变换管理**：使用 `react-zoom-pan-pinch` 库管理画布的缩放和平移
+2. **事件系统**：提供画布级别的事件监听和处理
+3. **边缘滚动**：支持拖拽到边缘时的自动滚动
+4. **内容尺寸管理**：跟踪和管理画布内容的尺寸
+
+## 依赖关系
+
+### 核心依赖
+- `@knotx/core`：提供基础插件架构
+- `@knotx/decorators`：提供装饰器支持
+- `@knotx/react-zoom-pan-pinch`：提供缩放和平移功能
+- `lodash-es`：提供工具函数
+- `rxjs`：提供响应式编程支持
+
+### 可选依赖
+- `@knotx/plugins-history`：提供历史记录功能
+- `react`：React 框架支持
+
+## API 文档
+
+### 主要类
+
+#### Canvas
+
+画布插件的主要类，继承自 `BasePlugin`。
+
+```typescript
+export class Canvas extends BasePlugin<'canvas', CanvasConfig> {
+  name = 'canvas' as const
+}
+```
+
+### 配置选项
+
+#### CanvasConfig
+
+```typescript
+export type CanvasConfig = ReactZoomPanPinchProps & {
+  defaultLocated?: DefaultLocatedOptions
+}
+```
+
+继承自 `react-zoom-pan-pinch` 的所有配置选项，并添加了：
+
+- `defaultLocated`：默认定位选项
+
+### 插件数据 (PluginData)
+
+Canvas 插件向其他插件提供以下数据：
+
+```typescript
+interface PluginData {
+  canvas: {
+    transform: CanvasTransformState
+    rootElement: Element | null
+    contentSize: CanvasContentSize | undefined
+    updateContentSize: (contentSize: CanvasContentSize) => void
+    addListener: (event: CanvasEventType, listener: CanvasEventListener) => void
+    removeListener: (event: CanvasEventType, listener: CanvasEventListener) => void
+    edgeScroll: {
+      config: EdgeScrollConfig
+      setConfig: (config: Partial<EdgeScrollConfig>) => void
+    }
+  }
+}
+```
+
+### 插件工具 (PluginTools)
+
+Canvas 插件提供以下工具方法：
+
+```typescript
+interface PluginTools {
+  canvas: {
+    scrollNodeIntoView: (params: ScrollNodeIntoViewOptions) => void
+    zoomIn: (params: { step?: number, animationTime?: number }) => void
+    zoomOut: (params: { step?: number, animationTime?: number }) => void
+    setTransform: (params: {
+      positionX: number
+      positionY: number
+      scale: number
+      animationTime?: number
+    }) => void
+    resetTransform: (params: { animationTime?: number }) => void
+  }
+}
+```
+
+### 类型定义
+
+#### CanvasTransformState
+
+```typescript
+interface CanvasTransformState {
+  positionX: number
+  positionY: number
+  scale: number
+  previousScale: number
+}
+```
+
+#### CanvasContentSize
+
+```typescript
+interface CanvasContentSize {
+  width: number
+  height: number
+}
+```
+
+#### EdgeScrollConfig
+
+```typescript
+interface EdgeScrollConfig {
+  enabled: boolean
+  edgeSize: number
+  maxSpeed: number
+}
+```
+
+## 使用示例
+
+### 基本用法
+
+```typescript
+import { Canvas } from '@knotx/plugins-canvas'
+
+const engine = new Engine({
+  plugins: [Canvas],
+  pluginConfig: {
+    canvas: {
+      minScale: 0.1,
+      maxScale: 3,
+      limitToBounds: false,
+    },
+  },
+})
+```
+
+### 自定义缩放配置
+
+```typescript
+const engine = new Engine({
+  plugins: [Canvas],
+  pluginConfig: {
+    canvas: {
+      minScale: 0.2,
+      maxScale: 5,
+      wheel: {
+        step: 0.1,
+        smoothStep: 0.006,
+      },
+      panning: {
+        allowLeftClickPan: false,
+        allowRightClickPan: true,
+        wheelPanning: true,
+      },
+      zoomAnimation: {
+        size: 0.1,
+      },
+    },
+  },
+})
+```
+
+### 边缘滚动配置
+
+```typescript
+const engine = new Engine({
+  plugins: [Canvas],
+  pluginConfig: {
+    canvas: {
+      // 基础配置
+    },
+  },
+})
+
+// 启用边缘滚动
+engine.callTool('canvas', 'edgeScroll.setConfig', {
+  enabled: true,
+  edgeSize: 100,
+  maxSpeed: 10,
+})
+```
+
+### 工具方法使用
+
+```typescript
+// 放大
+engine.callTool('canvas', 'zoomIn', { step: 0.2, animationTime: 300 })
+
+// 缩小
+engine.callTool('canvas', 'zoomOut', { step: 0.2, animationTime: 300 })
+
+// 设置变换
+engine.callTool('canvas', 'setTransform', {
+  positionX: 100,
+  positionY: 100,
+  scale: 1.5,
+  animationTime: 500,
+})
+
+// 重置变换
+engine.callTool('canvas', 'resetTransform', { animationTime: 300 })
+
+// 滚动节点到视野内
+engine.callTool('canvas', 'scrollNodeIntoView', {
+  nodeId: 'node-1',
+  scale: 1.2,
+  block: 'center',
+  inline: 'center',
+})
+```
+
+### 事件监听
+
+```typescript
+// 获取画布数据
+const canvasData = engine.getPluginData('canvas')
+
+// 添加点击事件监听
+function handleClick(event: MouseEvent) {
+  console.log('Canvas clicked:', event)
+}
+
+canvasData.addListener('click', handleClick)
+
+// 移除监听
+canvasData.removeListener('click', handleClick)
+```
+
+### 获取变换状态
+
+```typescript
+// 在其他插件中获取变换状态
+class MyPlugin extends BasePlugin {
+  @inject.canvas.transform()
+  transform!: CanvasTransformState
+
+  someMethod() {
+    console.log('Current scale:', this.transform.scale)
+    console.log('Position:', this.transform.positionX, this.transform.positionY)
+  }
+}
+```
+
+## 与其他插件的集成
+
+### 与 History 插件集成
+
+```typescript
+import { Canvas } from '@knotx/plugins-canvas'
+import { History } from '@knotx/plugins-history'
+
+const engine = new Engine({
+  plugins: [Canvas, History],
+  pluginConfig: {
+    canvas: {
+      minScale: 0.1,
+      maxScale: 3,
+    },
+    history: {
+      maxHistory: 50,
+    },
+  },
+})
+```
+
+### 与 Background 插件集成
+
+```typescript
+import { Background } from '@knotx/plugins-background'
+import { Canvas } from '@knotx/plugins-canvas'
+
+const engine = new Engine({
+  plugins: [Canvas, Background],
+  pluginConfig: {
+    canvas: {
+      minScale: 0.1,
+      maxScale: 3,
+    },
+    background: {
+      variant: 'dots',
+      color: '#ddd',
+    },
+  },
+})
+```
+
+## 文件目录结构
+
+```
+packages/plugins-canvas/
+├── src/
+│   ├── canvas.tsx              # 主要实现文件
+│   ├── transform.ts            # 变换计算工具
+│   ├── types.ts               # 类型定义
+│   └── index.ts               # 导出文件
+├── dist/                      # 构建输出目录
+├── package.json              # 包配置文件
+├── build.config.ts           # 构建配置
+├── tsconfig.json             # TypeScript 配置
+├── eslint.config.mjs         # ESLint 配置
+└── CHANGELOG.md              # 更新日志
+```
+
+### 核心文件说明
+
+- **canvas.tsx**：包含 Canvas 插件的主要实现，包括变换管理、事件处理和工具方法
+- **transform.ts**：变换计算相关的工具函数
+- **types.ts**：TypeScript 类型定义
+- **index.ts**：导出 Canvas 类和相关类型定义
+
+## 高级功能
+
+### 自定义变换计算
+
+```typescript
+// 使用 transform.ts 中的工具函数
+import { calculateTransform } from '@knotx/plugins-canvas/transform'
+
+const result = calculateTransform({
+  // 变换参数
+})
+```
+
+### 动态内容尺寸
+
+```typescript
+// 在插件中动态更新内容尺寸
+class MyPlugin extends BasePlugin {
+  @inject.canvas.updateContentSize()
+  updateContentSize!: (size: CanvasContentSize) => void
+
+  updateSize() {
+    this.updateContentSize({
+      width: 2000,
+      height: 1500,
+    })
+  }
+}
+```
+
+## 注意事项
+
+1. **性能优化**：Canvas 插件会频繁触发重渲染，建议在需要时才监听变换状态
+2. **事件冒泡**：Canvas 事件可能会与其他事件冲突，注意事件处理的优先级
+3. **内存管理**：及时移除不需要的事件监听器，避免内存泄漏
+4. **React 版本**：确保 React 版本与 `react-zoom-pan-pinch` 兼容
+
+## 许可证
+
+MIT

package/dist/index.cjs

@@ -14,9 +14,7 @@ function calculateTransform({
   scale,
   block = "nearest",
   inline = "nearest",
-  offset = 0,
-  contentSize,
-  limitToBounds
+  offset = 0
 }) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
   const nodeX = (_a = node == null ? void 0 : node.position.x) != null ? _a : 0;
@@ -75,14 +73,6 @@ function calculateTransform({
       break;
     }
   }
-  if (limitToBounds && contentSize) {
-    if (contentSize.width * scale < viewportWidth) {
-      positionX = contentSize.width / 2 * scale - viewportWidth / 2;
-    }
-    if (contentSize.height * scale < viewportHeight) {
-      positionY = contentSize.height / 2 * scale - viewportHeight / 2;
-    }
-  }
   return {
     scale,
     positionX,
@@ -209,6 +199,7 @@ class Canvas extends (_a = core.BasePlugin, _transform_dec = [decorators.registe
     __publicField(this, "config");
     __publicField(this, "name", "canvas");
     __publicField(this, "ref", null);
+    __publicField(this, "zoomPanPinch");
     __publicField(this, "dataManager", new core.DataManager(this.name));
     __publicField(this, "transform", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
     __publicField(this, "rootElement", __runInitializers(_init, 12, this, null)), __runInitializers(_init, 15, this);
@@ -339,7 +330,7 @@ class Canvas extends (_a = core.BasePlugin, _transform_dec = [decorators.registe
         deltaY = -maxSpeed * factor;
       }
       if (deltaX !== 0 || deltaY !== 0) {
-        const currentState = this.ref.instance.transformState;
+        const currentState = this.zoomPanPinch.transformState;
         const newPositionX = currentState.positionX + deltaX;
         const newPositionY = currentState.positionY + deltaY;
         this.ref.setTransform(newPositionX, newPositionY, currentState.scale, 0);
@@ -357,12 +348,10 @@ class Canvas extends (_a = core.BasePlugin, _transform_dec = [decorators.registe
       node,
       container: this.container,
       transform: this.transform,
-      contentSize: this.contentSize,
       scale,
       block,
       inline,
-      offset,
-      limitToBounds: false
+      offset
     });
     (_a2 = this.ref) == null ? void 0 : _a2.setTransform(-positionX, -positionY, newScale, animationTime);
   }
@@ -385,7 +374,9 @@ class Canvas extends (_a = core.BasePlugin, _transform_dec = [decorators.registe
   render({ children } = { children: null }) {
     var _a2, _b;
     const contentSize = core.use(() => this.contentSize);
-    const defaultTransform = react.useMemo(() => this.getDefaultTransform(), []);
+    if (!this.zoomPanPinch) {
+      this.createZoomPanPinch();
+    }
     const [transformRef, setTransformRef] = react.useReducer((_, ref) => {
       var _a3;
       const dom = ref.instance.wrapperComponent;
@@ -442,9 +433,7 @@ class Canvas extends (_a = core.BasePlugin, _transform_dec = [decorators.registe
       reactZoomPanPinch.TransformWrapper,
       __spreadProps(__spreadValues({}, this.config), {
         ref: setTransformRef,
-        initialPositionX: defaultTransform.positionX,
-        initialPositionY: defaultTransform.positionY,
-        initialScale: defaultTransform.scale,
+        initialInstance: this.zoomPanPinch,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: fixedLayers }),
           /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -511,6 +500,14 @@ class Canvas extends (_a = core.BasePlugin, _transform_dec = [decorators.registe
       })
     );
   }
+  createZoomPanPinch() {
+    const defaultTransform = this.getDefaultTransform();
+    this.zoomPanPinch = new reactZoomPanPinch.ZoomPanPinch(this.config);
+    if (defaultTransform) {
+      this.zoomPanPinch.calcNewPosition(defaultTransform.positionX, defaultTransform.positionY);
+    }
+    this.transform = __spreadValues({}, this.zoomPanPinch.transformState);
+  }
   groupLayers(children) {
     const fixedLayers = [];
     const childrenLayers = [];
@@ -527,27 +524,31 @@ class Canvas extends (_a = core.BasePlugin, _transform_dec = [decorators.registe
     return [fixedLayers, childrenLayers];
   }
   getDefaultTransform() {
+    var _a2, _b, _c;
     const defaultLocated = __spreadValues({}, this.config.defaultLocated);
-    if (!(defaultLocated == null ? void 0 : defaultLocated.nodeId) && !defaultLocated.limitToBounds) {
-      return this.transform;
+    if (!(defaultLocated == null ? void 0 : defaultLocated.nodeId)) {
+      return void 0;
     }
     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);
+    defaultLocated.scale || (defaultLocated.scale = (_a2 = this.config.initialScale) != null ? _a2 : 1);
     const { positionX, positionY, scale: newScale } = calculateTransform(__spreadValues({
       node,
       container: this.container,
-      transform: this.transform,
-      contentSize: this.contentSize
+      transform: {
+        previousScale: defaultLocated.scale,
+        scale: defaultLocated.scale,
+        positionX: (_b = this.config.initialPositionX) != null ? _b : 0,
+        positionY: (_c = this.config.initialPositionY) != null ? _c : 0
+      }
     }, defaultLocated));
     const newTransform = {
-      previousScale: this.transform.scale,
+      previousScale: defaultLocated.scale,
       scale: newScale,
       positionX: -positionX,
       positionY: -positionY
     };
-    this.transform = newTransform;
     return newTransform;
   }
   isCanvasEvent(e) {

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import { Element, BasePlugin, DataManager, DOMElement, Engine, PluginData } from '@knotx/core';
 import { InferParamsFromSchema } from '@knotx/decorators';
-import { ReactZoomPanPinchProps, ReactZoomPanPinchContentRef } from '@knotx/react-zoom-pan-pinch';
+import { ReactZoomPanPinchProps, ReactZoomPanPinchContentRef, ZoomPanPinch } from '@knotx/react-zoom-pan-pinch';
 import { MouseEvent, ReactNode } from 'react';
 
 interface CanvasTransformState {
@@ -23,7 +23,6 @@ interface ScrollNodeIntoViewOptions {
         y: number;
     };
     animationTime?: number;
-    limitToBounds?: boolean;
 }
 interface DefaultLocatedOptions extends Omit<ScrollNodeIntoViewOptions, 'nodeId'> {
     nodeId?: string | null;
@@ -86,6 +85,7 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     private config;
     name: "canvas";
     ref: ReactZoomPanPinchContentRef | null;
+    zoomPanPinch: ZoomPanPinch;
     dataManager: DataManager<CanvasDataType, "canvas">;
     transform: CanvasTransformState;
     rootElement: DOMElement | null;
@@ -189,6 +189,7 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
         children: ReactNode;
     }): JSX.Element;
     init(config: CanvasConfig): void;
+    private createZoomPanPinch;
     private groupLayers;
     private getDefaultTransform;
     private onClick;

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import { Element, BasePlugin, DataManager, DOMElement, Engine, PluginData } from '@knotx/core';
 import { InferParamsFromSchema } from '@knotx/decorators';
-import { ReactZoomPanPinchProps, ReactZoomPanPinchContentRef } from '@knotx/react-zoom-pan-pinch';
+import { ReactZoomPanPinchProps, ReactZoomPanPinchContentRef, ZoomPanPinch } from '@knotx/react-zoom-pan-pinch';
 import { MouseEvent, ReactNode } from 'react';
 
 interface CanvasTransformState {
@@ -23,7 +23,6 @@ interface ScrollNodeIntoViewOptions {
         y: number;
     };
     animationTime?: number;
-    limitToBounds?: boolean;
 }
 interface DefaultLocatedOptions extends Omit<ScrollNodeIntoViewOptions, 'nodeId'> {
     nodeId?: string | null;
@@ -86,6 +85,7 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     private config;
     name: "canvas";
     ref: ReactZoomPanPinchContentRef | null;
+    zoomPanPinch: ZoomPanPinch;
     dataManager: DataManager<CanvasDataType, "canvas">;
     transform: CanvasTransformState;
     rootElement: DOMElement | null;
@@ -189,6 +189,7 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
         children: ReactNode;
     }): JSX.Element;
     init(config: CanvasConfig): void;
+    private createZoomPanPinch;
     private groupLayers;
     private getDefaultTransform;
     private onClick;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { Element, BasePlugin, DataManager, DOMElement, Engine, PluginData } from '@knotx/core';
 import { InferParamsFromSchema } from '@knotx/decorators';
-import { ReactZoomPanPinchProps, ReactZoomPanPinchContentRef } from '@knotx/react-zoom-pan-pinch';
+import { ReactZoomPanPinchProps, ReactZoomPanPinchContentRef, ZoomPanPinch } from '@knotx/react-zoom-pan-pinch';
 import { MouseEvent, ReactNode } from 'react';
 
 interface CanvasTransformState {
@@ -23,7 +23,6 @@ interface ScrollNodeIntoViewOptions {
         y: number;
     };
     animationTime?: number;
-    limitToBounds?: boolean;
 }
 interface DefaultLocatedOptions extends Omit<ScrollNodeIntoViewOptions, 'nodeId'> {
     nodeId?: string | null;
@@ -86,6 +85,7 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     private config;
     name: "canvas";
     ref: ReactZoomPanPinchContentRef | null;
+    zoomPanPinch: ZoomPanPinch;
     dataManager: DataManager<CanvasDataType, "canvas">;
     transform: CanvasTransformState;
     rootElement: DOMElement | null;
@@ -189,6 +189,7 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
         children: ReactNode;
     }): JSX.Element;
     init(config: CanvasConfig): void;
+    private createZoomPanPinch;
     private groupLayers;
     private getDefaultTransform;
     private onClick;

package/dist/index.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from '@knotx/jsx/jsx-runtime';
 import { Layer, DataManager, use, DOMElement, bem, BasePlugin, InteractionPriority } from '@knotx/core';
 import { register, inject, tool, layer, OnInit } from '@knotx/decorators';
-import { TransformWrapper, TransformComponent } from '@knotx/react-zoom-pan-pinch';
+import { TransformWrapper, TransformComponent, ZoomPanPinch } from '@knotx/react-zoom-pan-pinch';
 import { isEqual, merge } from 'lodash-es';
-import { useMemo, useReducer, useLayoutEffect, Fragment } from 'react';
+import { useReducer, useMemo, useLayoutEffect, Fragment } from 'react';
 
 function calculateTransform({
   node,
@@ -12,9 +12,7 @@ function calculateTransform({
   scale,
   block = "nearest",
   inline = "nearest",
-  offset = 0,
-  contentSize,
-  limitToBounds
+  offset = 0
 }) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
   const nodeX = (_a = node == null ? void 0 : node.position.x) != null ? _a : 0;
@@ -73,14 +71,6 @@ function calculateTransform({
       break;
     }
   }
-  if (limitToBounds && contentSize) {
-    if (contentSize.width * scale < viewportWidth) {
-      positionX = contentSize.width / 2 * scale - viewportWidth / 2;
-    }
-    if (contentSize.height * scale < viewportHeight) {
-      positionY = contentSize.height / 2 * scale - viewportHeight / 2;
-    }
-  }
   return {
     scale,
     positionX,
@@ -207,6 +197,7 @@ class Canvas extends (_a = BasePlugin, _transform_dec = [register("transform")],
     __publicField(this, "config");
     __publicField(this, "name", "canvas");
     __publicField(this, "ref", null);
+    __publicField(this, "zoomPanPinch");
     __publicField(this, "dataManager", new DataManager(this.name));
     __publicField(this, "transform", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
     __publicField(this, "rootElement", __runInitializers(_init, 12, this, null)), __runInitializers(_init, 15, this);
@@ -337,7 +328,7 @@ class Canvas extends (_a = BasePlugin, _transform_dec = [register("transform")],
         deltaY = -maxSpeed * factor;
       }
       if (deltaX !== 0 || deltaY !== 0) {
-        const currentState = this.ref.instance.transformState;
+        const currentState = this.zoomPanPinch.transformState;
         const newPositionX = currentState.positionX + deltaX;
         const newPositionY = currentState.positionY + deltaY;
         this.ref.setTransform(newPositionX, newPositionY, currentState.scale, 0);
@@ -355,12 +346,10 @@ class Canvas extends (_a = BasePlugin, _transform_dec = [register("transform")],
       node,
       container: this.container,
       transform: this.transform,
-      contentSize: this.contentSize,
       scale,
       block,
       inline,
-      offset,
-      limitToBounds: false
+      offset
     });
     (_a2 = this.ref) == null ? void 0 : _a2.setTransform(-positionX, -positionY, newScale, animationTime);
   }
@@ -383,7 +372,9 @@ class Canvas extends (_a = BasePlugin, _transform_dec = [register("transform")],
   render({ children } = { children: null }) {
     var _a2, _b;
     const contentSize = use(() => this.contentSize);
-    const defaultTransform = useMemo(() => this.getDefaultTransform(), []);
+    if (!this.zoomPanPinch) {
+      this.createZoomPanPinch();
+    }
     const [transformRef, setTransformRef] = useReducer((_, ref) => {
       var _a3;
       const dom = ref.instance.wrapperComponent;
@@ -440,9 +431,7 @@ class Canvas extends (_a = BasePlugin, _transform_dec = [register("transform")],
       TransformWrapper,
       __spreadProps(__spreadValues({}, this.config), {
         ref: setTransformRef,
-        initialPositionX: defaultTransform.positionX,
-        initialPositionY: defaultTransform.positionY,
-        initialScale: defaultTransform.scale,
+        initialInstance: this.zoomPanPinch,
         children: [
           /* @__PURE__ */ jsx(Fragment, { children: fixedLayers }),
           /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
@@ -509,6 +498,14 @@ class Canvas extends (_a = BasePlugin, _transform_dec = [register("transform")],
       })
     );
   }
+  createZoomPanPinch() {
+    const defaultTransform = this.getDefaultTransform();
+    this.zoomPanPinch = new ZoomPanPinch(this.config);
+    if (defaultTransform) {
+      this.zoomPanPinch.calcNewPosition(defaultTransform.positionX, defaultTransform.positionY);
+    }
+    this.transform = __spreadValues({}, this.zoomPanPinch.transformState);
+  }
   groupLayers(children) {
     const fixedLayers = [];
     const childrenLayers = [];
@@ -525,27 +522,31 @@ class Canvas extends (_a = BasePlugin, _transform_dec = [register("transform")],
     return [fixedLayers, childrenLayers];
   }
   getDefaultTransform() {
+    var _a2, _b, _c;
     const defaultLocated = __spreadValues({}, this.config.defaultLocated);
-    if (!(defaultLocated == null ? void 0 : defaultLocated.nodeId) && !defaultLocated.limitToBounds) {
-      return this.transform;
+    if (!(defaultLocated == null ? void 0 : defaultLocated.nodeId)) {
+      return void 0;
     }
     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);
+    defaultLocated.scale || (defaultLocated.scale = (_a2 = this.config.initialScale) != null ? _a2 : 1);
     const { positionX, positionY, scale: newScale } = calculateTransform(__spreadValues({
       node,
       container: this.container,
-      transform: this.transform,
-      contentSize: this.contentSize
+      transform: {
+        previousScale: defaultLocated.scale,
+        scale: defaultLocated.scale,
+        positionX: (_b = this.config.initialPositionX) != null ? _b : 0,
+        positionY: (_c = this.config.initialPositionY) != null ? _c : 0
+      }
     }, defaultLocated));
     const newTransform = {
-      previousScale: this.transform.scale,
+      previousScale: defaultLocated.scale,
       scale: newScale,
       positionX: -positionX,
       positionY: -positionY
     };
-    this.transform = newTransform;
     return newTransform;
   }
   isCanvasEvent(e) {

package/package.json

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