@knotx/plugins-canvas 0.2.9 → 0.2.11

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, _scrollNodeIntoView_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()], _scrollNodeIntoView_dec = [decorators.tool("Scroll node into viewport center", {
+var _init_dec, _render_dec, _scrollNodeIntoView_dec, _removeListener_dec, _addListener_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()], _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" },
@@ -94,6 +94,16 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
     __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, "listeners", {
+      click: /* @__PURE__ */ new Set(),
+      contextmenu: /* @__PURE__ */ new Set()
+    });
+    __publicField(this, "addListener", __runInitializers(_init, 24, this, (type, listener) => {
+      this.listeners[type].add(listener);
+    })), __runInitializers(_init, 27, this);
+    __publicField(this, "removeListener", __runInitializers(_init, 28, this, (type, listener) => {
+      this.listeners[type].delete(listener);
+    })), __runInitializers(_init, 31, this);
   }
   scrollNodeIntoView({ nodeId, scale = this.transform.scale, animationTime }) {
     var _a2, _b, _c, _d, _e;
@@ -154,6 +164,22 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
         });
       });
     }, [transform]);
+    const onClick = react.useCallback((e) => {
+      if (!this.isCanvasEvent(e)) {
+        return;
+      }
+      this.listeners.click.forEach((listener) => {
+        listener(e);
+      });
+    }, []);
+    const onContextMenu = react.useCallback((e) => {
+      if (!this.isCanvasEvent(e)) {
+        return;
+      }
+      this.listeners.contextmenu.forEach((listener) => {
+        listener(e);
+      });
+    }, []);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       reactZoomPanPinch.TransformWrapper,
       __spreadProps(__spreadValues({}, this.config), {
@@ -170,6 +196,10 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
                 zIndex: core.Layer.Nodes | core.Layer.Edges,
                 contain: "strict"
               },
+              wrapperProps: {
+                onClick,
+                onContextMenu
+              },
               contentClass: core.bem(this.name, "content"),
               contentStyle: {
                 position: "relative",
@@ -196,6 +226,12 @@ class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref
       positionX: config.initialPositionX || 0,
       positionY: config.initialPositionY || 0
     };
+    this.subscriptions.push(() => {
+      Object.values(this.listeners).forEach((set) => set.clear());
+    });
+  }
+  isCanvasEvent(e) {
+    return e.target === e.currentTarget || e.target.classList.contains(core.bem(this.name, "content"));
   }
 }
 _init = __decoratorStart(_a);
@@ -206,6 +242,8 @@ __decorateElement(_init, 5, "ref", _ref_dec, Canvas);
 __decorateElement(_init, 5, "transform", _transform_dec, Canvas);
 __decorateElement(_init, 5, "getNode", _getNode_dec, Canvas);
 __decorateElement(_init, 5, "container", _container_dec, Canvas);
+__decorateElement(_init, 5, "addListener", _addListener_dec, Canvas);
+__decorateElement(_init, 5, "removeListener", _removeListener_dec, Canvas);
 __decoratorMetadata(_init, Canvas);
 
 exports.Canvas = Canvas;

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import { InferParamsFromSchema } from '@knotx/decorators';
-import { ReactNode } from 'react';
+import { MouseEvent, ReactNode } from 'react';
 import { ReactZoomPanPinchContentRef, ReactZoomPanPinchState, ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
 import { BasePlugin } from '@knotx/core';
 
@@ -11,6 +11,8 @@ declare module '@knotx/core' {
         canvas: {
             ref: CanvasRef | null;
             transform: CanvasTransformState;
+            addListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
+            removeListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
         };
     }
     interface PluginTools {
@@ -23,6 +25,8 @@ declare module '@knotx/core' {
         };
     }
 }
+type CanvasEventType = 'click' | 'contextmenu';
+type CanvasEventListener = (event: MouseEvent<HTMLElement>) => void;
 declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     private config;
     name: "canvas";
@@ -30,6 +34,9 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     transform: CanvasTransformState;
     private getNode;
     private container;
+    private listeners;
+    addListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
+    removeListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
     scrollNodeIntoView({ nodeId, scale, animationTime }: InferParamsFromSchema<{
         type: 'object';
         properties: {
@@ -49,6 +56,7 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
         children: ReactNode;
     }): JSX.Element;
     init(config: CanvasConfig): void;
+    private isCanvasEvent;
 }
 
-export { Canvas, type CanvasConfig, type CanvasRef, type CanvasTransformState };
+export { Canvas, type CanvasConfig, type CanvasEventListener, type CanvasEventType, type CanvasRef, type CanvasTransformState };

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import { InferParamsFromSchema } from '@knotx/decorators';
-import { ReactNode } from 'react';
+import { MouseEvent, ReactNode } from 'react';
 import { ReactZoomPanPinchContentRef, ReactZoomPanPinchState, ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
 import { BasePlugin } from '@knotx/core';
 
@@ -11,6 +11,8 @@ declare module '@knotx/core' {
         canvas: {
             ref: CanvasRef | null;
             transform: CanvasTransformState;
+            addListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
+            removeListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
         };
     }
     interface PluginTools {
@@ -23,6 +25,8 @@ declare module '@knotx/core' {
         };
     }
 }
+type CanvasEventType = 'click' | 'contextmenu';
+type CanvasEventListener = (event: MouseEvent<HTMLElement>) => void;
 declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     private config;
     name: "canvas";
@@ -30,6 +34,9 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     transform: CanvasTransformState;
     private getNode;
     private container;
+    private listeners;
+    addListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
+    removeListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
     scrollNodeIntoView({ nodeId, scale, animationTime }: InferParamsFromSchema<{
         type: 'object';
         properties: {
@@ -49,6 +56,7 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
         children: ReactNode;
     }): JSX.Element;
     init(config: CanvasConfig): void;
+    private isCanvasEvent;
 }
 
-export { Canvas, type CanvasConfig, type CanvasRef, type CanvasTransformState };
+export { Canvas, type CanvasConfig, type CanvasEventListener, type CanvasEventType, type CanvasRef, type CanvasTransformState };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { InferParamsFromSchema } from '@knotx/decorators';
-import { ReactNode } from 'react';
+import { MouseEvent, ReactNode } from 'react';
 import { ReactZoomPanPinchContentRef, ReactZoomPanPinchState, ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
 import { BasePlugin } from '@knotx/core';
 
@@ -11,6 +11,8 @@ declare module '@knotx/core' {
         canvas: {
             ref: CanvasRef | null;
             transform: CanvasTransformState;
+            addListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
+            removeListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
         };
     }
     interface PluginTools {
@@ -23,6 +25,8 @@ declare module '@knotx/core' {
         };
     }
 }
+type CanvasEventType = 'click' | 'contextmenu';
+type CanvasEventListener = (event: MouseEvent<HTMLElement>) => void;
 declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     private config;
     name: "canvas";
@@ -30,6 +34,9 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
     transform: CanvasTransformState;
     private getNode;
     private container;
+    private listeners;
+    addListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
+    removeListener: (event: CanvasEventType, listener: CanvasEventListener) => void;
     scrollNodeIntoView({ nodeId, scale, animationTime }: InferParamsFromSchema<{
         type: 'object';
         properties: {
@@ -49,6 +56,7 @@ declare class Canvas extends BasePlugin<'canvas', CanvasConfig> {
         children: ReactNode;
     }): JSX.Element;
     init(config: CanvasConfig): void;
+    private isCanvasEvent;
 }
 
-export { Canvas, type CanvasConfig, type CanvasRef, type CanvasTransformState };
+export { Canvas, type CanvasConfig, type CanvasEventListener, type CanvasEventType, type CanvasRef, type CanvasTransformState };

package/dist/index.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from '@knotx/jsx/jsx-runtime';
 import { Layer, bem, BasePlugin } from '@knotx/core';
 import { register, inject, tool, layer, OnInit } from '@knotx/decorators';
 import { merge } from 'lodash-es';
-import { useState, useMemo, useEffect, Fragment } from 'react';
+import { useState, 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, _scrollNodeIntoView_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()], _scrollNodeIntoView_dec = [tool("Scroll node into viewport center", {
+var _init_dec, _render_dec, _scrollNodeIntoView_dec, _removeListener_dec, _addListener_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()], _addListener_dec = [register("addListener")], _removeListener_dec = [register("removeListener")], _scrollNodeIntoView_dec = [tool("Scroll node into viewport center", {
   type: "object",
   properties: {
     nodeId: { type: "string" },
@@ -92,6 +92,16 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
     __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, "listeners", {
+      click: /* @__PURE__ */ new Set(),
+      contextmenu: /* @__PURE__ */ new Set()
+    });
+    __publicField(this, "addListener", __runInitializers(_init, 24, this, (type, listener) => {
+      this.listeners[type].add(listener);
+    })), __runInitializers(_init, 27, this);
+    __publicField(this, "removeListener", __runInitializers(_init, 28, this, (type, listener) => {
+      this.listeners[type].delete(listener);
+    })), __runInitializers(_init, 31, this);
   }
   scrollNodeIntoView({ nodeId, scale = this.transform.scale, animationTime }) {
     var _a2, _b, _c, _d, _e;
@@ -152,6 +162,22 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
         });
       });
     }, [transform]);
+    const onClick = useCallback((e) => {
+      if (!this.isCanvasEvent(e)) {
+        return;
+      }
+      this.listeners.click.forEach((listener) => {
+        listener(e);
+      });
+    }, []);
+    const onContextMenu = useCallback((e) => {
+      if (!this.isCanvasEvent(e)) {
+        return;
+      }
+      this.listeners.contextmenu.forEach((listener) => {
+        listener(e);
+      });
+    }, []);
     return /* @__PURE__ */ jsxs(
       TransformWrapper,
       __spreadProps(__spreadValues({}, this.config), {
@@ -168,6 +194,10 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
                 zIndex: Layer.Nodes | Layer.Edges,
                 contain: "strict"
               },
+              wrapperProps: {
+                onClick,
+                onContextMenu
+              },
               contentClass: bem(this.name, "content"),
               contentStyle: {
                 position: "relative",
@@ -194,6 +224,12 @@ class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_
       positionX: config.initialPositionX || 0,
       positionY: config.initialPositionY || 0
     };
+    this.subscriptions.push(() => {
+      Object.values(this.listeners).forEach((set) => set.clear());
+    });
+  }
+  isCanvasEvent(e) {
+    return e.target === e.currentTarget || e.target.classList.contains(bem(this.name, "content"));
   }
 }
 _init = __decoratorStart(_a);
@@ -204,6 +240,8 @@ __decorateElement(_init, 5, "ref", _ref_dec, Canvas);
 __decorateElement(_init, 5, "transform", _transform_dec, Canvas);
 __decorateElement(_init, 5, "getNode", _getNode_dec, Canvas);
 __decorateElement(_init, 5, "container", _container_dec, Canvas);
+__decorateElement(_init, 5, "addListener", _addListener_dec, Canvas);
+__decorateElement(_init, 5, "removeListener", _removeListener_dec, Canvas);
 __decoratorMetadata(_init, Canvas);
 
 export { Canvas };

package/package.json

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