@knotx/plugins-canvas 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 格桑
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,190 @@
+'use strict';
+
+const jsxRuntime = require('@knotx/jsx/jsx-runtime');
+const core = require('@knotx/core');
+const decorators = require('@knotx/decorators');
+const lodashEs = require('lodash-es');
+const react = require('react');
+const reactZoomPanPinch = require('react-zoom-pan-pinch');
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => {
+  var _a2;
+  return [, , , __create((_a2 = base == null ? void 0 : base[__knownSymbol("metadata")]) != null ? _a2 : null)];
+};
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+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 _render_dec, _transform_dec, _ref_dec, _a, _init;
+class Canvas extends (_a = core.BasePlugin, _ref_dec = [decorators.register("ref")], _transform_dec = [decorators.register("transform")], _render_dec = [decorators.layer(core.Layer.Canvas)], _a) {
+  constructor(options) {
+    super();
+    __runInitializers(_init, 5, this);
+    __publicField(this, "options");
+    __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);
+    this.options = lodashEs.merge({}, options, {
+      doubleClick: {
+        excluded: [core.bem("node", "wrapper"), core.bem("edge", "wrapper")]
+      }
+    });
+    this.transform = {
+      previousScale: options.initialScale || 1,
+      scale: options.initialScale || 1,
+      positionX: options.initialPositionX || 0,
+      positionY: options.initialPositionY || 0
+    };
+  }
+  get classNames() {
+    return {
+      wrapper: core.bem(this.name, "wrapper"),
+      content: core.bem(this.name, "content")
+    };
+  }
+  render({ children } = { children: null }) {
+    const [transform, setTransform] = react.useState(null);
+    const [fixedLayers, childrenLayers] = react.useMemo(() => {
+      const fixedLayers2 = [];
+      const childrenLayers2 = [];
+      for (const child of Array.isArray(children) ? children : [children]) {
+        if (!(child == null ? void 0 : child.key)) {
+          continue;
+        }
+        if (child.key <= core.Layer.Background << 1 || child.key > core.Layer.Foreground >> 1) {
+          fixedLayers2.push(child);
+        } else {
+          childrenLayers2.push(child);
+        }
+      }
+      return [fixedLayers2, childrenLayers2];
+    }, [children]);
+    const { wrapper, content } = this.classNames;
+    react.useEffect(() => {
+      this.ref = transform;
+      const wrapperElement = transform == null ? void 0 : transform.instance.wrapperComponent;
+      if (!wrapperElement) {
+        return;
+      }
+      Object.defineProperty(wrapperElement, "scrollTop", {
+        get() {
+          return -transform.instance.transformState.positionY;
+        },
+        set(value) {
+          transform.instance.setTransformState(transform.instance.transformState.scale, transform.instance.transformState.positionX, -value);
+        }
+      });
+      Object.defineProperty(wrapperElement, "scrollLeft", {
+        get() {
+          return -transform.instance.transformState.positionX;
+        },
+        set(value) {
+          transform.instance.setTransformState(transform.instance.transformState.scale, -value, transform.instance.transformState.positionY);
+        }
+      });
+      let frame;
+      return transform == null ? void 0 : transform.instance.onChange((ref) => {
+        cancelIdleCallback(frame);
+        frame = requestIdleCallback(() => {
+          this.transform = __spreadValues({}, ref.state);
+        });
+      });
+    }, [transform]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactZoomPanPinch.TransformWrapper,
+      __spreadProps(__spreadValues({}, this.options), {
+        ref: setTransform,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: fixedLayers }),
+          /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactZoomPanPinch.TransformComponent,
+            {
+              wrapperClass: wrapper,
+              wrapperStyle: {
+                width: "100%",
+                height: "100%",
+                zIndex: core.Layer.Nodes | core.Layer.Edges,
+                contain: "strict"
+              },
+              contentClass: content,
+              contentStyle: {
+                position: "relative",
+                width: "100%",
+                height: "100%",
+                willChange: "auto"
+              },
+              children: childrenLayers
+            }
+          ) })
+        ]
+      })
+    );
+  }
+}
+_init = __decoratorStart(_a);
+__decorateElement(_init, 1, "render", _render_dec, Canvas);
+__decorateElement(_init, 5, "ref", _ref_dec, Canvas);
+__decorateElement(_init, 5, "transform", _transform_dec, Canvas);
+__decoratorMetadata(_init, Canvas);
+
+exports.Canvas = Canvas;

package/dist/index.d.cts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { ReactZoomPanPinchContentRef, ReactZoomPanPinchState, ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
+import { BasePlugin } from '@knotx/core';
+
+type CanvasProps = ReactZoomPanPinchProps;
+type CanvasTransformState = ReactZoomPanPinchState;
+type CanvasRef = ReactZoomPanPinchContentRef;
+declare module '@knotx/core' {
+    interface PluginData {
+        canvas: {
+            ref: CanvasRef | null;
+            transform: CanvasTransformState;
+        };
+    }
+}
+declare class Canvas extends BasePlugin<'canvas'> {
+    private options;
+    name: "canvas";
+    ref: CanvasRef | null;
+    transform: CanvasTransformState;
+    constructor(options: CanvasProps);
+    get classNames(): {
+        wrapper: string;
+        content: string;
+    };
+    render({ children }?: {
+        children: ReactNode;
+    }): JSX.Element;
+}
+
+export { Canvas, type CanvasProps, type CanvasRef, type CanvasTransformState };

package/dist/index.d.mts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { ReactZoomPanPinchContentRef, ReactZoomPanPinchState, ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
+import { BasePlugin } from '@knotx/core';
+
+type CanvasProps = ReactZoomPanPinchProps;
+type CanvasTransformState = ReactZoomPanPinchState;
+type CanvasRef = ReactZoomPanPinchContentRef;
+declare module '@knotx/core' {
+    interface PluginData {
+        canvas: {
+            ref: CanvasRef | null;
+            transform: CanvasTransformState;
+        };
+    }
+}
+declare class Canvas extends BasePlugin<'canvas'> {
+    private options;
+    name: "canvas";
+    ref: CanvasRef | null;
+    transform: CanvasTransformState;
+    constructor(options: CanvasProps);
+    get classNames(): {
+        wrapper: string;
+        content: string;
+    };
+    render({ children }?: {
+        children: ReactNode;
+    }): JSX.Element;
+}
+
+export { Canvas, type CanvasProps, type CanvasRef, type CanvasTransformState };

package/dist/index.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { ReactZoomPanPinchContentRef, ReactZoomPanPinchState, ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
+import { BasePlugin } from '@knotx/core';
+
+type CanvasProps = ReactZoomPanPinchProps;
+type CanvasTransformState = ReactZoomPanPinchState;
+type CanvasRef = ReactZoomPanPinchContentRef;
+declare module '@knotx/core' {
+    interface PluginData {
+        canvas: {
+            ref: CanvasRef | null;
+            transform: CanvasTransformState;
+        };
+    }
+}
+declare class Canvas extends BasePlugin<'canvas'> {
+    private options;
+    name: "canvas";
+    ref: CanvasRef | null;
+    transform: CanvasTransformState;
+    constructor(options: CanvasProps);
+    get classNames(): {
+        wrapper: string;
+        content: string;
+    };
+    render({ children }?: {
+        children: ReactNode;
+    }): JSX.Element;
+}
+
+export { Canvas, type CanvasProps, type CanvasRef, type CanvasTransformState };

package/dist/index.mjs

@@ -0,0 +1,188 @@
+import { jsxs, jsx } from '@knotx/jsx/jsx-runtime';
+import { Layer, bem, BasePlugin } from '@knotx/core';
+import { register, layer } from '@knotx/decorators';
+import { merge } from 'lodash-es';
+import { useState, useMemo, useEffect, Fragment } from 'react';
+import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => {
+  var _a2;
+  return [, , , __create((_a2 = base == null ? void 0 : base[__knownSymbol("metadata")]) != null ? _a2 : null)];
+};
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+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 _render_dec, _transform_dec, _ref_dec, _a, _init;
+class Canvas extends (_a = BasePlugin, _ref_dec = [register("ref")], _transform_dec = [register("transform")], _render_dec = [layer(Layer.Canvas)], _a) {
+  constructor(options) {
+    super();
+    __runInitializers(_init, 5, this);
+    __publicField(this, "options");
+    __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);
+    this.options = merge({}, options, {
+      doubleClick: {
+        excluded: [bem("node", "wrapper"), bem("edge", "wrapper")]
+      }
+    });
+    this.transform = {
+      previousScale: options.initialScale || 1,
+      scale: options.initialScale || 1,
+      positionX: options.initialPositionX || 0,
+      positionY: options.initialPositionY || 0
+    };
+  }
+  get classNames() {
+    return {
+      wrapper: bem(this.name, "wrapper"),
+      content: bem(this.name, "content")
+    };
+  }
+  render({ children } = { children: null }) {
+    const [transform, setTransform] = useState(null);
+    const [fixedLayers, childrenLayers] = useMemo(() => {
+      const fixedLayers2 = [];
+      const childrenLayers2 = [];
+      for (const child of Array.isArray(children) ? children : [children]) {
+        if (!(child == null ? void 0 : child.key)) {
+          continue;
+        }
+        if (child.key <= Layer.Background << 1 || child.key > Layer.Foreground >> 1) {
+          fixedLayers2.push(child);
+        } else {
+          childrenLayers2.push(child);
+        }
+      }
+      return [fixedLayers2, childrenLayers2];
+    }, [children]);
+    const { wrapper, content } = this.classNames;
+    useEffect(() => {
+      this.ref = transform;
+      const wrapperElement = transform == null ? void 0 : transform.instance.wrapperComponent;
+      if (!wrapperElement) {
+        return;
+      }
+      Object.defineProperty(wrapperElement, "scrollTop", {
+        get() {
+          return -transform.instance.transformState.positionY;
+        },
+        set(value) {
+          transform.instance.setTransformState(transform.instance.transformState.scale, transform.instance.transformState.positionX, -value);
+        }
+      });
+      Object.defineProperty(wrapperElement, "scrollLeft", {
+        get() {
+          return -transform.instance.transformState.positionX;
+        },
+        set(value) {
+          transform.instance.setTransformState(transform.instance.transformState.scale, -value, transform.instance.transformState.positionY);
+        }
+      });
+      let frame;
+      return transform == null ? void 0 : transform.instance.onChange((ref) => {
+        cancelIdleCallback(frame);
+        frame = requestIdleCallback(() => {
+          this.transform = __spreadValues({}, ref.state);
+        });
+      });
+    }, [transform]);
+    return /* @__PURE__ */ jsxs(
+      TransformWrapper,
+      __spreadProps(__spreadValues({}, this.options), {
+        ref: setTransform,
+        children: [
+          /* @__PURE__ */ jsx(Fragment, { children: fixedLayers }),
+          /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+            TransformComponent,
+            {
+              wrapperClass: wrapper,
+              wrapperStyle: {
+                width: "100%",
+                height: "100%",
+                zIndex: Layer.Nodes | Layer.Edges,
+                contain: "strict"
+              },
+              contentClass: content,
+              contentStyle: {
+                position: "relative",
+                width: "100%",
+                height: "100%",
+                willChange: "auto"
+              },
+              children: childrenLayers
+            }
+          ) })
+        ]
+      })
+    );
+  }
+}
+_init = __decoratorStart(_a);
+__decorateElement(_init, 1, "render", _render_dec, Canvas);
+__decorateElement(_init, 5, "ref", _ref_dec, Canvas);
+__decorateElement(_init, 5, "transform", _transform_dec, Canvas);
+__decoratorMetadata(_init, Canvas);
+
+export { Canvas };

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@knotx/plugins-canvas",
+  "type": "module",
+  "version": "0.0.0",
+  "description": "Canvas Plugin for Knotx",
+  "author": "boenfu",
+  "license": "MIT",
+  "homepage": "https://github.com/boenfu/knotx#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/boenfu/knotx.git",
+    "directory": "packages/plugins-canvas"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "dependencies": {
+    "lodash-es": "^4.17.21",
+    "react-zoom-pan-pinch": "^3.7.0",
+    "rxjs": "^7.8.1",
+    "@knotx/decorators": "0.0.0",
+    "@knotx/core": "0.0.0"
+  },
+  "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/eslint-config": "0.0.0",
+    "@knotx/build-config": "0.0.0",
+    "@knotx/jsx": "0.0.0",
+    "@knotx/typescript-config": "0.0.0"
+  },
+  "scripts": {
+    "build": "unbuild --failOnWarn=false",
+    "dev": "unbuild --stub",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit"
+  }
+}