@drauu/core - npm Package Compare versions

Comparing version 0.1.0-beta.5 to 0.1.0-beta.6

dist/index.d.ts

@@ -65,2 +65,8 @@ import { StrokeOptions } from 'perfect-freehand';
     /**
+     * Use different element to listen on the events
+     *
+     * @default the `el` option
+     */
+    eventTarget?: string | Element;
+    /**
      * When you apply a scale transform to the svg container,
@@ -116,2 +122,3 @@ * set this property to let drauu aware of the currect coordinates.
     el: SVGSVGElement | null;
+    eventEl: Element | null;
     shiftPressed: boolean;
@@ -131,3 +138,4 @@ altPressed: boolean;
     set brush(v: Brush);
-    mount(selector: string | SVGSVGElement): void;
+    resolveSelector<T>(selector: string | T | null | undefined): T | null;
+    mount(el: string | SVGSVGElement, eventEl?: string | Element): void;
     unmount(): void;
@@ -134,0 +142,0 @@ on<K extends keyof EventsMap>(type: K, fn: EventsMap[K]): Unsubscribe;

dist/index.global.js

@@ -531,2 +531,3 @@ (() => {
       this.el = null;
+      this.eventEl = null;
       this.shiftPressed = false;
@@ -541,3 +542,3 @@ this.altPressed = false;
       if (options.el)
-        this.mount(options.el);
+        this.mount(options.el, options.eventTarget);
     }
@@ -562,9 +563,12 @@ get model() {
     }
-    mount(selector) {
+    resolveSelector(selector) {
+      if (typeof selector === "string")
+        return document.querySelector(selector);
+      else
+        return selector || null;
+    }
+    mount(el, eventEl) {
       if (this.el)
         throw new Error("[drauu] already mounted, unmount previous target first");
-      if (typeof selector === "string")
-        this.el = document.querySelector(selector);
-      else
-        this.el = selector;
+      this.el = this.resolveSelector(el);
       if (!this.el)
@@ -574,3 +578,3 @@ throw new Error("[drauu] target element not found");
         throw new Error("[drauu] can only mount to a SVG element");
-      const el = this.el;
+      const target = this.resolveSelector(eventEl) || this.el;
       const start = this.eventStart.bind(this);
@@ -580,13 +584,13 @@ const move = this.eventMove.bind(this);
       const keyboard = this.eventKeyboard.bind(this);
-      el.addEventListener("pointerdown", start, { passive: false });
-      el.addEventListener("pointermove", move, { passive: false });
-      el.addEventListener("pointerup", end, { passive: false });
-      el.addEventListener("pointercancel", end, { passive: false });
+      target.addEventListener("pointerdown", start, { passive: false });
+      target.addEventListener("pointermove", move, { passive: false });
+      target.addEventListener("pointerup", end, { passive: false });
+      target.addEventListener("pointercancel", end, { passive: false });
       window.addEventListener("keydown", keyboard, false);
       window.addEventListener("keyup", keyboard, false);
       this._disposables.push(() => {
-        el.removeEventListener("pointerdown", start);
-        el.removeEventListener("pointermove", move);
-        el.removeEventListener("pointerup", end);
-        el.removeEventListener("pointercancel", end);
+        target.removeEventListener("pointerdown", start);
+        target.removeEventListener("pointermove", move);
+        target.removeEventListener("pointerup", end);
+        target.removeEventListener("pointercancel", end);
         window.removeEventListener("keydown", keyboard, false);
@@ -593,0 +597,0 @@ window.removeEventListener("keyup", keyboard, false);

dist/index.js

@@ -536,2 +536,3 @@ var __create = Object.create;
     this.el = null;
+    this.eventEl = null;
     this.shiftPressed = false;
@@ -546,3 +547,3 @@ this.altPressed = false;
     if (options.el)
-      this.mount(options.el);
+      this.mount(options.el, options.eventTarget);
   }
@@ -567,9 +568,12 @@ get model() {
   }
-  mount(selector) {
+  resolveSelector(selector) {
+    if (typeof selector === "string")
+      return document.querySelector(selector);
+    else
+      return selector || null;
+  }
+  mount(el, eventEl) {
     if (this.el)
       throw new Error("[drauu] already mounted, unmount previous target first");
-    if (typeof selector === "string")
-      this.el = document.querySelector(selector);
-    else
-      this.el = selector;
+    this.el = this.resolveSelector(el);
     if (!this.el)
@@ -579,3 +583,3 @@ throw new Error("[drauu] target element not found");
       throw new Error("[drauu] can only mount to a SVG element");
-    const el = this.el;
+    const target = this.resolveSelector(eventEl) || this.el;
     const start = this.eventStart.bind(this);
@@ -585,13 +589,13 @@ const move = this.eventMove.bind(this);
     const keyboard = this.eventKeyboard.bind(this);
-    el.addEventListener("pointerdown", start, { passive: false });
-    el.addEventListener("pointermove", move, { passive: false });
-    el.addEventListener("pointerup", end, { passive: false });
-    el.addEventListener("pointercancel", end, { passive: false });
+    target.addEventListener("pointerdown", start, { passive: false });
+    target.addEventListener("pointermove", move, { passive: false });
+    target.addEventListener("pointerup", end, { passive: false });
+    target.addEventListener("pointercancel", end, { passive: false });
     window.addEventListener("keydown", keyboard, false);
     window.addEventListener("keyup", keyboard, false);
     this._disposables.push(() => {
-      el.removeEventListener("pointerdown", start);
-      el.removeEventListener("pointermove", move);
-      el.removeEventListener("pointerup", end);
-      el.removeEventListener("pointercancel", end);
+      target.removeEventListener("pointerdown", start);
+      target.removeEventListener("pointermove", move);
+      target.removeEventListener("pointerup", end);
+      target.removeEventListener("pointercancel", end);
       window.removeEventListener("keydown", keyboard, false);
@@ -598,0 +602,0 @@ window.removeEventListener("keyup", keyboard, false);

package.json

 {
   "name": "@drauu/core",
-  "version": "0.1.0-beta.5",
+  "version": "0.1.0-beta.6",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "module": "dist/index.mjs",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

67173

increased by1.3%

Lines of code

2211

increased by0.91%

No dependency changes