@knotx/plugins-drag 0.3.4 → 0.3.6

package/dist/index.cjs

@@ -78,7 +78,7 @@ 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 _destroy_dec, _init_dec, _registerOptionsTransformer_dec, _options_dec, _canvasScale_dec, _interaction_dec, _dispatchNodeOperation_dec, _getNode_dec, _a, _init;
+var _destroy_dec, _init_dec, _registerOptionsTransformer_dec, _options_dec, _edgeScroll_dec, _canvasTransform_dec, _interaction_dec, _dispatchNodeOperation_dec, _getNode_dec, _a, _init;
 const DEFAULT_OPTIONS = {
   inertia: {
     enabled: true
@@ -90,7 +90,7 @@ const DEFAULT_OPTIONS = {
     })
   ]
 };
-class Drag extends (_a = core.BasePlugin, _getNode_dec = [decorators.inject.getNode()], _dispatchNodeOperation_dec = [decorators.inject.dispatchNodeOperation()], _interaction_dec = [decorators.inject.interaction()], _canvasScale_dec = [decorators.inject.canvas.transform((state) => state.scale)], _options_dec = [decorators.register("options")], _registerOptionsTransformer_dec = [decorators.register("registerOptionsTransformer")], _init_dec = [decorators.OnInit], _destroy_dec = [decorators.OnDestroy], _a) {
+class Drag extends (_a = core.BasePlugin, _getNode_dec = [decorators.inject.getNode()], _dispatchNodeOperation_dec = [decorators.inject.dispatchNodeOperation()], _interaction_dec = [decorators.inject.interaction()], _canvasTransform_dec = [decorators.inject.canvas.transform()], _edgeScroll_dec = [decorators.inject.canvas.edgeScroll()], _options_dec = [decorators.register("options")], _registerOptionsTransformer_dec = [decorators.register("registerOptionsTransformer")], _init_dec = [decorators.OnInit], _destroy_dec = [decorators.OnDestroy], _a) {
   constructor() {
     super(...arguments);
     __runInitializers(_init, 5, this);
@@ -98,12 +98,16 @@ class Drag extends (_a = core.BasePlugin, _getNode_dec = [decorators.inject.getN
     __publicField(this, "getNode", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
     __publicField(this, "dispatchNodeOperation", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
     __publicField(this, "interaction", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
-    __publicField(this, "canvasScale", __runInitializers(_init, 20, this, 1)), __runInitializers(_init, 23, this);
+    __publicField(this, "canvasTransform", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    __publicField(this, "edgeScroll", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
     __publicField(this, "subscription");
     __publicField(this, "transformers$", new rxjs.BehaviorSubject([]));
     __publicField(this, "currentInteractable");
-    __publicField(this, "options", __runInitializers(_init, 24, this, DEFAULT_OPTIONS)), __runInitializers(_init, 27, this);
-    __publicField(this, "registerOptionsTransformer", __runInitializers(_init, 28, this, (transformer) => {
+    __publicField(this, "lastCanvasPosition", { x: 0, y: 0 });
+    __publicField(this, "isDragging", false);
+    __publicField(this, "canvasScrollAnimationFrame", null);
+    __publicField(this, "options", __runInitializers(_init, 28, this, DEFAULT_OPTIONS)), __runInitializers(_init, 31, this);
+    __publicField(this, "registerOptionsTransformer", __runInitializers(_init, 32, this, (transformer) => {
       const transformers = this.transformers$.value;
       transformers.push(transformer);
       this.transformers$.next(transformers);
@@ -115,7 +119,7 @@ class Drag extends (_a = core.BasePlugin, _getNode_dec = [decorators.inject.getN
           this.transformers$.next(currentTransformers);
         }
       };
-    })), __runInitializers(_init, 31, this);
+    })), __runInitializers(_init, 35, this);
   }
   /**
    * 应用所有转换器，生成最终的配置
@@ -153,37 +157,84 @@ class Drag extends (_a = core.BasePlugin, _getNode_dec = [decorators.inject.getN
     const options = this.applyTransformers(nodeId);
     this.currentInteractable.draggable(options);
   }
+  /**
+   * 监听画布滚动，即使鼠标不动也更新拖拽元素位置
+   */
+  startCanvasScrollListener(dragMove$) {
+    if (this.canvasScrollAnimationFrame !== null) {
+      cancelAnimationFrame(this.canvasScrollAnimationFrame);
+    }
+    const checkCanvasScroll = () => {
+      if (!this.isDragging) {
+        this.canvasScrollAnimationFrame = null;
+        return;
+      }
+      const { positionX, positionY } = this.canvasTransform;
+      const deltaX = positionX - this.lastCanvasPosition.x;
+      const deltaY = positionY - this.lastCanvasPosition.y;
+      if (deltaX !== 0 || deltaY !== 0) {
+        dragMove$.next({
+          dx: 0,
+          // 鼠标没动，所以dx和dy为0
+          dy: 0,
+          canvasPositionDelta: { x: deltaX, y: deltaY }
+        });
+      }
+      this.lastCanvasPosition = { x: positionX, y: positionY };
+      this.canvasScrollAnimationFrame = requestAnimationFrame(checkCanvasScroll);
+    };
+    this.canvasScrollAnimationFrame = requestAnimationFrame(checkCanvasScroll);
+  }
   init() {
     const dragStart$ = new rxjs.Subject();
     const dragMove$ = new rxjs.Subject();
     const dragEnd$ = new rxjs.Subject();
     const end = () => {
-      var _a2;
+      var _a2, _b;
       dragEnd$.next();
+      this.isDragging = false;
+      if (this.canvasScrollAnimationFrame !== null) {
+        cancelAnimationFrame(this.canvasScrollAnimationFrame);
+        this.canvasScrollAnimationFrame = null;
+      }
       (_a2 = this.currentInteractable) == null ? void 0 : _a2.draggable(this.options);
       this.interaction.end(this.pluginId, "position");
+      (_b = this.edgeScroll) == null ? void 0 : _b.setConfig({ enabled: false });
     };
     this.currentInteractable = interact__default(`.${core.bem("node", "wrapper")}[data-node-id]`).draggable(__spreadProps(__spreadValues({}, this.options), {
       listeners: {
         start: (event) => {
+          var _a2;
           const target = event.target;
           const nodeId = target.getAttribute("data-node-id");
           if (!nodeId)
             return;
+          this.isDragging = true;
+          const { positionX, positionY } = this.canvasTransform;
+          this.lastCanvasPosition = { x: positionX, y: positionY };
           dragStart$.next({
             nodeId
           });
+          this.startCanvasScrollListener(dragMove$);
           this.interaction.start(this.pluginId, "position", core.InteractionPriority.EntityPositionDrag);
+          (_a2 = this.edgeScroll) == null ? void 0 : _a2.setConfig({ enabled: true });
         },
         move: (event) => {
           if (!this.interaction.canInteract(core.InteractionPriority.EntityPositionDrag)) {
             end();
             return;
           }
-          const scale = this.canvasScale;
+          const { positionX, positionY, scale } = this.canvasTransform || {};
+          let canvasPositionDelta = { x: 0, y: 0 };
+          canvasPositionDelta = {
+            x: positionX - this.lastCanvasPosition.x,
+            y: positionY - this.lastCanvasPosition.y
+          };
+          this.lastCanvasPosition = { x: positionX, y: positionY };
           dragMove$.next({
             dx: event.dx / scale,
-            dy: event.dy / scale
+            dy: event.dy / scale,
+            canvasPositionDelta
           });
         },
         // 拖拽结束
@@ -206,8 +257,8 @@ class Drag extends (_a = core.BasePlugin, _getNode_dec = [decorators.inject.getN
         return dragMove$.pipe(
           operators.skip(1),
           operators.map((moveEvent) => {
-            currentPosition.x += moveEvent.dx;
-            currentPosition.y += moveEvent.dy;
+            currentPosition.x += moveEvent.dx - moveEvent.canvasPositionDelta.x / this.canvasTransform.scale;
+            currentPosition.y += moveEvent.dy - moveEvent.canvasPositionDelta.y / this.canvasTransform.scale;
             return {
               nodeId,
               position: currentPosition
@@ -245,6 +296,10 @@ class Drag extends (_a = core.BasePlugin, _getNode_dec = [decorators.inject.getN
     this.subscription.add(() => {
       var _a2;
       (_a2 = this.currentInteractable) == null ? void 0 : _a2.unset();
+      if (this.canvasScrollAnimationFrame !== null) {
+        cancelAnimationFrame(this.canvasScrollAnimationFrame);
+        this.canvasScrollAnimationFrame = null;
+      }
       dragStart$.complete();
       dragMove$.complete();
       dragEnd$.complete();
@@ -261,7 +316,8 @@ __decorateElement(_init, 1, "destroy", _destroy_dec, Drag);
 __decorateElement(_init, 5, "getNode", _getNode_dec, Drag);
 __decorateElement(_init, 5, "dispatchNodeOperation", _dispatchNodeOperation_dec, Drag);
 __decorateElement(_init, 5, "interaction", _interaction_dec, Drag);
-__decorateElement(_init, 5, "canvasScale", _canvasScale_dec, Drag);
+__decorateElement(_init, 5, "canvasTransform", _canvasTransform_dec, Drag);
+__decorateElement(_init, 5, "edgeScroll", _edgeScroll_dec, Drag);
 __decorateElement(_init, 5, "options", _options_dec, Drag);
 __decorateElement(_init, 5, "registerOptionsTransformer", _registerOptionsTransformer_dec, Drag);
 __decoratorMetadata(_init, Drag);

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import { DraggableOptions as DraggableOptions$1 } from '@interactjs/actions/drag/plugin';
-import { Node, BasePlugin, Engine } from '@knotx/core';
+import { Node, BasePlugin, Engine, PluginData } from '@knotx/core';
 
 type DraggableOptions = Omit<DraggableOptions$1, 'listeners'>;
 interface DragTransformerContext {
@@ -22,10 +22,14 @@ declare class Drag extends BasePlugin {
     getNode: Engine['getNode'];
     dispatchNodeOperation: Engine['dispatchNodeOperation'];
     interaction: Engine['interaction'];
-    canvasScale: number;
+    canvasTransform: PluginData['canvas']['transform'];
+    edgeScroll: PluginData['canvas']['edgeScroll'];
     private subscription?;
     private transformers$;
     private currentInteractable?;
+    private lastCanvasPosition;
+    private isDragging;
+    private canvasScrollAnimationFrame;
     options: DraggableOptions;
     registerOptionsTransformer: (transformer: DragOptionsTransformer) => () => void;
     /**
@@ -36,6 +40,10 @@ declare class Drag extends BasePlugin {
      * 更新 interactable 的配置
      */
     private updateInteractableOptions;
+    /**
+     * 监听画布滚动，即使鼠标不动也更新拖拽元素位置
+     */
+    private startCanvasScrollListener;
     init(): void;
     destroy(): void;
 }

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import { DraggableOptions as DraggableOptions$1 } from '@interactjs/actions/drag/plugin';
-import { Node, BasePlugin, Engine } from '@knotx/core';
+import { Node, BasePlugin, Engine, PluginData } from '@knotx/core';
 
 type DraggableOptions = Omit<DraggableOptions$1, 'listeners'>;
 interface DragTransformerContext {
@@ -22,10 +22,14 @@ declare class Drag extends BasePlugin {
     getNode: Engine['getNode'];
     dispatchNodeOperation: Engine['dispatchNodeOperation'];
     interaction: Engine['interaction'];
-    canvasScale: number;
+    canvasTransform: PluginData['canvas']['transform'];
+    edgeScroll: PluginData['canvas']['edgeScroll'];
     private subscription?;
     private transformers$;
     private currentInteractable?;
+    private lastCanvasPosition;
+    private isDragging;
+    private canvasScrollAnimationFrame;
     options: DraggableOptions;
     registerOptionsTransformer: (transformer: DragOptionsTransformer) => () => void;
     /**
@@ -36,6 +40,10 @@ declare class Drag extends BasePlugin {
      * 更新 interactable 的配置
      */
     private updateInteractableOptions;
+    /**
+     * 监听画布滚动，即使鼠标不动也更新拖拽元素位置
+     */
+    private startCanvasScrollListener;
     init(): void;
     destroy(): void;
 }

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { DraggableOptions as DraggableOptions$1 } from '@interactjs/actions/drag/plugin';
-import { Node, BasePlugin, Engine } from '@knotx/core';
+import { Node, BasePlugin, Engine, PluginData } from '@knotx/core';
 
 type DraggableOptions = Omit<DraggableOptions$1, 'listeners'>;
 interface DragTransformerContext {
@@ -22,10 +22,14 @@ declare class Drag extends BasePlugin {
     getNode: Engine['getNode'];
     dispatchNodeOperation: Engine['dispatchNodeOperation'];
     interaction: Engine['interaction'];
-    canvasScale: number;
+    canvasTransform: PluginData['canvas']['transform'];
+    edgeScroll: PluginData['canvas']['edgeScroll'];
     private subscription?;
     private transformers$;
     private currentInteractable?;
+    private lastCanvasPosition;
+    private isDragging;
+    private canvasScrollAnimationFrame;
     options: DraggableOptions;
     registerOptionsTransformer: (transformer: DragOptionsTransformer) => () => void;
     /**
@@ -36,6 +40,10 @@ declare class Drag extends BasePlugin {
      * 更新 interactable 的配置
      */
     private updateInteractableOptions;
+    /**
+     * 监听画布滚动，即使鼠标不动也更新拖拽元素位置
+     */
+    private startCanvasScrollListener;
     init(): void;
     destroy(): void;
 }

package/dist/index.js

@@ -72,7 +72,7 @@ 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 _destroy_dec, _init_dec, _registerOptionsTransformer_dec, _options_dec, _canvasScale_dec, _interaction_dec, _dispatchNodeOperation_dec, _getNode_dec, _a, _init;
+var _destroy_dec, _init_dec, _registerOptionsTransformer_dec, _options_dec, _edgeScroll_dec, _canvasTransform_dec, _interaction_dec, _dispatchNodeOperation_dec, _getNode_dec, _a, _init;
 const DEFAULT_OPTIONS = {
   inertia: {
     enabled: true
@@ -84,7 +84,7 @@ const DEFAULT_OPTIONS = {
     })
   ]
 };
-class Drag extends (_a = BasePlugin, _getNode_dec = [inject.getNode()], _dispatchNodeOperation_dec = [inject.dispatchNodeOperation()], _interaction_dec = [inject.interaction()], _canvasScale_dec = [inject.canvas.transform((state) => state.scale)], _options_dec = [register("options")], _registerOptionsTransformer_dec = [register("registerOptionsTransformer")], _init_dec = [OnInit], _destroy_dec = [OnDestroy], _a) {
+class Drag extends (_a = BasePlugin, _getNode_dec = [inject.getNode()], _dispatchNodeOperation_dec = [inject.dispatchNodeOperation()], _interaction_dec = [inject.interaction()], _canvasTransform_dec = [inject.canvas.transform()], _edgeScroll_dec = [inject.canvas.edgeScroll()], _options_dec = [register("options")], _registerOptionsTransformer_dec = [register("registerOptionsTransformer")], _init_dec = [OnInit], _destroy_dec = [OnDestroy], _a) {
   constructor() {
     super(...arguments);
     __runInitializers(_init, 5, this);
@@ -92,12 +92,16 @@ class Drag extends (_a = BasePlugin, _getNode_dec = [inject.getNode()], _dispatc
     __publicField(this, "getNode", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
     __publicField(this, "dispatchNodeOperation", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
     __publicField(this, "interaction", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
-    __publicField(this, "canvasScale", __runInitializers(_init, 20, this, 1)), __runInitializers(_init, 23, this);
+    __publicField(this, "canvasTransform", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    __publicField(this, "edgeScroll", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
     __publicField(this, "subscription");
     __publicField(this, "transformers$", new BehaviorSubject([]));
     __publicField(this, "currentInteractable");
-    __publicField(this, "options", __runInitializers(_init, 24, this, DEFAULT_OPTIONS)), __runInitializers(_init, 27, this);
-    __publicField(this, "registerOptionsTransformer", __runInitializers(_init, 28, this, (transformer) => {
+    __publicField(this, "lastCanvasPosition", { x: 0, y: 0 });
+    __publicField(this, "isDragging", false);
+    __publicField(this, "canvasScrollAnimationFrame", null);
+    __publicField(this, "options", __runInitializers(_init, 28, this, DEFAULT_OPTIONS)), __runInitializers(_init, 31, this);
+    __publicField(this, "registerOptionsTransformer", __runInitializers(_init, 32, this, (transformer) => {
       const transformers = this.transformers$.value;
       transformers.push(transformer);
       this.transformers$.next(transformers);
@@ -109,7 +113,7 @@ class Drag extends (_a = BasePlugin, _getNode_dec = [inject.getNode()], _dispatc
           this.transformers$.next(currentTransformers);
         }
       };
-    })), __runInitializers(_init, 31, this);
+    })), __runInitializers(_init, 35, this);
   }
   /**
    * 应用所有转换器，生成最终的配置
@@ -147,37 +151,84 @@ class Drag extends (_a = BasePlugin, _getNode_dec = [inject.getNode()], _dispatc
     const options = this.applyTransformers(nodeId);
     this.currentInteractable.draggable(options);
   }
+  /**
+   * 监听画布滚动，即使鼠标不动也更新拖拽元素位置
+   */
+  startCanvasScrollListener(dragMove$) {
+    if (this.canvasScrollAnimationFrame !== null) {
+      cancelAnimationFrame(this.canvasScrollAnimationFrame);
+    }
+    const checkCanvasScroll = () => {
+      if (!this.isDragging) {
+        this.canvasScrollAnimationFrame = null;
+        return;
+      }
+      const { positionX, positionY } = this.canvasTransform;
+      const deltaX = positionX - this.lastCanvasPosition.x;
+      const deltaY = positionY - this.lastCanvasPosition.y;
+      if (deltaX !== 0 || deltaY !== 0) {
+        dragMove$.next({
+          dx: 0,
+          // 鼠标没动，所以dx和dy为0
+          dy: 0,
+          canvasPositionDelta: { x: deltaX, y: deltaY }
+        });
+      }
+      this.lastCanvasPosition = { x: positionX, y: positionY };
+      this.canvasScrollAnimationFrame = requestAnimationFrame(checkCanvasScroll);
+    };
+    this.canvasScrollAnimationFrame = requestAnimationFrame(checkCanvasScroll);
+  }
   init() {
     const dragStart$ = new Subject();
     const dragMove$ = new Subject();
     const dragEnd$ = new Subject();
     const end = () => {
-      var _a2;
+      var _a2, _b;
       dragEnd$.next();
+      this.isDragging = false;
+      if (this.canvasScrollAnimationFrame !== null) {
+        cancelAnimationFrame(this.canvasScrollAnimationFrame);
+        this.canvasScrollAnimationFrame = null;
+      }
       (_a2 = this.currentInteractable) == null ? void 0 : _a2.draggable(this.options);
       this.interaction.end(this.pluginId, "position");
+      (_b = this.edgeScroll) == null ? void 0 : _b.setConfig({ enabled: false });
     };
     this.currentInteractable = interact(`.${bem("node", "wrapper")}[data-node-id]`).draggable(__spreadProps(__spreadValues({}, this.options), {
       listeners: {
         start: (event) => {
+          var _a2;
           const target = event.target;
           const nodeId = target.getAttribute("data-node-id");
           if (!nodeId)
             return;
+          this.isDragging = true;
+          const { positionX, positionY } = this.canvasTransform;
+          this.lastCanvasPosition = { x: positionX, y: positionY };
           dragStart$.next({
             nodeId
           });
+          this.startCanvasScrollListener(dragMove$);
           this.interaction.start(this.pluginId, "position", InteractionPriority.EntityPositionDrag);
+          (_a2 = this.edgeScroll) == null ? void 0 : _a2.setConfig({ enabled: true });
         },
         move: (event) => {
           if (!this.interaction.canInteract(InteractionPriority.EntityPositionDrag)) {
             end();
             return;
           }
-          const scale = this.canvasScale;
+          const { positionX, positionY, scale } = this.canvasTransform || {};
+          let canvasPositionDelta = { x: 0, y: 0 };
+          canvasPositionDelta = {
+            x: positionX - this.lastCanvasPosition.x,
+            y: positionY - this.lastCanvasPosition.y
+          };
+          this.lastCanvasPosition = { x: positionX, y: positionY };
           dragMove$.next({
             dx: event.dx / scale,
-            dy: event.dy / scale
+            dy: event.dy / scale,
+            canvasPositionDelta
           });
         },
         // 拖拽结束
@@ -200,8 +251,8 @@ class Drag extends (_a = BasePlugin, _getNode_dec = [inject.getNode()], _dispatc
         return dragMove$.pipe(
           skip(1),
           map((moveEvent) => {
-            currentPosition.x += moveEvent.dx;
-            currentPosition.y += moveEvent.dy;
+            currentPosition.x += moveEvent.dx - moveEvent.canvasPositionDelta.x / this.canvasTransform.scale;
+            currentPosition.y += moveEvent.dy - moveEvent.canvasPositionDelta.y / this.canvasTransform.scale;
             return {
               nodeId,
               position: currentPosition
@@ -239,6 +290,10 @@ class Drag extends (_a = BasePlugin, _getNode_dec = [inject.getNode()], _dispatc
     this.subscription.add(() => {
       var _a2;
       (_a2 = this.currentInteractable) == null ? void 0 : _a2.unset();
+      if (this.canvasScrollAnimationFrame !== null) {
+        cancelAnimationFrame(this.canvasScrollAnimationFrame);
+        this.canvasScrollAnimationFrame = null;
+      }
       dragStart$.complete();
       dragMove$.complete();
       dragEnd$.complete();
@@ -255,7 +310,8 @@ __decorateElement(_init, 1, "destroy", _destroy_dec, Drag);
 __decorateElement(_init, 5, "getNode", _getNode_dec, Drag);
 __decorateElement(_init, 5, "dispatchNodeOperation", _dispatchNodeOperation_dec, Drag);
 __decorateElement(_init, 5, "interaction", _interaction_dec, Drag);
-__decorateElement(_init, 5, "canvasScale", _canvasScale_dec, Drag);
+__decorateElement(_init, 5, "canvasTransform", _canvasTransform_dec, Drag);
+__decorateElement(_init, 5, "edgeScroll", _edgeScroll_dec, Drag);
 __decorateElement(_init, 5, "options", _options_dec, Drag);
 __decorateElement(_init, 5, "registerOptionsTransformer", _registerOptionsTransformer_dec, Drag);
 __decoratorMetadata(_init, Drag);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knotx/plugins-drag",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "Drag Plugin for Knotx",
   "author": "boenfu",
   "license": "MIT",
@@ -28,8 +28,8 @@
     "dist"
   ],
   "peerDependencies": {
-    "@knotx/jsx": "0.3.4",
-    "@knotx/plugins-canvas": "0.3.4"
+    "@knotx/jsx": "0.3.6",
+    "@knotx/plugins-canvas": "0.3.6"
   },
   "dependencies": {
     "@interactjs/actions": "^1.10.27",
@@ -38,15 +38,15 @@
     "@interactjs/types": "^1.10.27",
     "interactjs": "^1.10.27",
     "rxjs": "^7.8.1",
-    "@knotx/core": "0.3.4",
-    "@knotx/decorators": "0.3.4"
+    "@knotx/core": "0.3.6",
+    "@knotx/decorators": "0.3.6"
   },
   "devDependencies": {
-    "@knotx/build-config": "0.3.4",
-    "@knotx/eslint-config": "0.3.4",
-    "@knotx/jsx": "0.3.4",
-    "@knotx/plugins-canvas": "0.3.4",
-    "@knotx/typescript-config": "0.3.4"
+    "@knotx/build-config": "0.3.6",
+    "@knotx/eslint-config": "0.3.6",
+    "@knotx/jsx": "0.3.6",
+    "@knotx/plugins-canvas": "0.3.6",
+    "@knotx/typescript-config": "0.3.6"
   },
   "scripts": {
     "build": "unbuild",