@drauu/core - npm Package Compare versions

Comparing version 0.0.11 to 0.0.12

dist/index.d.ts

@@ -5,4 +5,9 @@ interface Unsubscribe {
 
+declare type DrawingMode = 'draw' | 'line' | 'rectangle' | 'ellipse';
 interface Brush {
     /**
+     * @default 'brush'
+     */
+    mode?: DrawingMode;
+    /**
      * Stroke color
@@ -16,2 +21,3 @@ */
     /**
+     * Color filled, only works in `rectangle` and `ellipse` mode.
      * @default 'transparent'
@@ -21,27 +27,36 @@ */
     /**
+     * Pattern of dashes, set to `undefined` for solid line.
      * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray
      */
     dasharray?: string;
-    draw?: {
-        /**
-         * Read the presure from the given sensor and change the weight of the stroke
-         *
-         * @expiremental
-         * @default false
-         */
-        pressure?: boolean;
-        /**
-         * Simplify the points of the lines
-         *
-         * @expiremental
-         * @default false
-         */
-        simplify?: boolean;
-    };
-    rectangle?: {
-        /**
-         * @default 0
-         */
-        radius?: number;
-    };
+    /**
+     * Read the presure from the given sensor and change the weight of the stroke.
+     * Works only in `draw` mode.
+     *
+     * @expiremental
+     * @default false
+     */
+    pressure?: boolean;
+    /**
+     * Simplify the points of the lines.
+     * Works only in `draw` mode.
+     *
+     * @expiremental
+     * @default false
+     */
+    simplify?: boolean;
+    /**
+     * Corner radius of the rectangle.
+     * Works only in `rectangle` mode.
+     *
+     * @default 0
+     */
+    cornerRadius?: number;
+    /**
+     * Show an arrow at the end of the line.
+     * Works only in `draw` and `line` mode.
+     *
+     * @default false
+     */
+    arrowEnd?: boolean;
 }
@@ -53,3 +68,2 @@ interface Point {
 }
-declare type DrawingMode = 'draw' | 'line' | 'rectangle' | 'ellipse';
 declare type InputEvents = MouseEvent | TouchEvent | PointerEvent;
@@ -60,6 +74,2 @@ interface Options {
     /**
-     * @default 'brush'
-     */
-    mode?: DrawingMode;
-    /**
      * @default 1
@@ -91,4 +101,4 @@ */
     getMousePosition(event: InputEvents): Point;
-    protected createElement<K extends keyof SVGElementTagNameMap>(name: K): SVGElementTagNameMap[K];
-    protected attr(name: keyof T, value: string | number): void;
+    protected createElement<K extends keyof SVGElementTagNameMap>(name: K, overrides?: Partial<Brush>): SVGElementTagNameMap[K];
+    protected attr(name: string, value: string | number): void;
     private _setEvent;
@@ -95,0 +105,0 @@ /**

dist/index.global.js

 (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __propIsEnum = Object.prototype.propertyIsEnumerable;
+  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;
+  };
+
   // ../../node_modules/.pnpm/nanoevents@6.0.0/node_modules/nanoevents/index.js
@@ -28,6 +45,29 @@ var createNanoEvents = () => ({
   }
+  function guid() {
+    const S4 = () => ((1 + Math.random()) * 65536 | 0).toString(16).substring(1);
+    return `${S4() + S4()}-${S4()}-${S4()}-${S4()}-${S4()}${S4()}${S4()}`;
+  }
   var DECIMAL = 2;
   var D = DECIMAL;
 
-  // src/utils/simpify.ts
+  // src/utils/dom.ts
+  function createArrowHead(id, fill) {
+    const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+    const marker = document.createElementNS("http://www.w3.org/2000/svg", "marker");
+    const head = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    head.setAttribute("fill", fill);
+    marker.setAttribute("id", id);
+    marker.setAttribute("viewBox", "0 -5 10 10");
+    marker.setAttribute("refX", "5");
+    marker.setAttribute("refY", "0");
+    marker.setAttribute("markerWidth", "4");
+    marker.setAttribute("markerHeight", "4");
+    marker.setAttribute("orient", "auto");
+    head.setAttribute("d", "M0,-5L10,0L0,5");
+    marker.appendChild(head);
+    defs.appendChild(marker);
+    return defs;
+  }
+
+  // src/utils/simplify.ts
   function getSqDist(p1, p2) {
@@ -153,11 +193,12 @@ const dx = p1.x - p2.x;
     }
-    createElement(name) {
+    createElement(name, overrides) {
       var _a;
       const el = document.createElementNS("http://www.w3.org/2000/svg", name);
-      el.setAttribute("fill", (_a = this.brush.fill) != null ? _a : "transparent");
-      el.setAttribute("stroke", this.brush.color);
-      el.setAttribute("stroke-width", this.brush.size.toString());
+      const brush = overrides ? __spreadValues(__spreadValues({}, this.brush), overrides) : this.brush;
+      el.setAttribute("fill", (_a = brush.fill) != null ? _a : "transparent");
+      el.setAttribute("stroke", brush.color);
+      el.setAttribute("stroke-width", brush.size.toString());
       el.setAttribute("stroke-linecap", "round");
-      if (this.brush.dasharray)
-        el.setAttribute("stroke-dasharray", this.brush.dasharray);
+      if (brush.dasharray)
+        el.setAttribute("stroke-dasharray", brush.dasharray);
       return el;
@@ -197,8 +238,22 @@ }
     onStart(point) {
-      this.el = this.pressure ? this.createElement("g") : this.createElement("path");
+      this.el = this.pressure ? document.createElementNS("http://www.w3.org/2000/svg", "g") : this.createElement("path", { fill: "transparent" });
       this.points = [point];
       this.index = 0;
+      if (this.brush.arrowEnd) {
+        this.arrowId = guid();
+        const head = createArrowHead(this.arrowId, this.brush.color);
+        if (this.pressure) {
+          this.el.appendChild(head);
+        } else {
+          const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+          g.append(head);
+          g.append(this.el);
+          this.attr("marker-end", `url(#${this.arrowId})`);
+          return g;
+        }
+      }
       return this.el;
     }
     onMove(point) {
+      var _a;
       if (!this.el)
@@ -212,3 +267,3 @@ return false;
         while (this.points.length - this.index >= SEGMENT_LENGTH) {
-          const seg = this.createElement("path");
+          const seg = this.createElement("path", { fill: "transparent" });
           const points = this.points.slice(this.index, this.index + SEGMENT_LENGTH);
@@ -218,2 +273,5 @@ const pressure = points.map((i) => i.force).filter((i) => i != null).reduce((a, b) => a + b, 0) / SEGMENT_LENGTH;
           seg.setAttribute("stroke-width", (this.brush.size * pressure * 2).toString());
+          seg.setAttribute("marker-end", `url(#${this.arrowId})`);
+          (_a = this.prevSeg) == null ? void 0 : _a.removeAttribute("marker-end");
+          this.prevSeg = seg;
           this.el.appendChild(seg);
@@ -232,4 +290,2 @@ this.index += Math.round(SEGMENT_LENGTH / 2);
     onEnd() {
-      if (!this.pressure && this.simplify)
-        this.attr("d", toSvgData(simplify(this.points, 1, true)));
       const path = this.el;
@@ -243,11 +299,11 @@ this.el = null;
         return false;
+      if (!this.pressure && this.simplify)
+        path.setAttribute("d", toSvgData(simplify(this.points, 1, true)));
       return true;
     }
     get pressure() {
-      var _a;
-      return !!((_a = this.brush.draw) == null ? void 0 : _a.pressure);
+      return !!this.brush.pressure;
     }
     get simplify() {
-      var _a;
-      return !!((_a = this.brush.draw) == null ? void 0 : _a.simplify);
+      return !!this.brush.simplify;
     }
@@ -330,3 +386,3 @@ };
     onStart(point) {
-      this.el = this.createElement("line");
+      this.el = this.createElement("line", { fill: "transparent" });
       this.attr("x1", point.x);
@@ -336,2 +392,10 @@ this.attr("y1", point.y);
       this.attr("y2", point.y);
+      if (this.brush.arrowEnd) {
+        const id = guid();
+        const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+        g.append(createArrowHead(id, this.brush.color));
+        g.append(this.el);
+        this.attr("marker-end", `url(#${id})`);
+        return g;
+      }
       return this.el;
@@ -376,3 +440,3 @@ }
         return false;
-      if (!path.getTotalLength())
+      if (path.getTotalLength() < 5)
         return false;
@@ -386,7 +450,6 @@ return true;
     onStart(point) {
-      var _a;
       this.el = this.createElement("rect");
-      if ((_a = this.brush.rectangle) == null ? void 0 : _a.radius) {
-        this.attr("rx", this.brush.rectangle.radius);
-        this.attr("ry", this.brush.rectangle.radius);
+      if (this.brush.cornerRadius) {
+        this.attr("rx", this.brush.cornerRadius);
+        this.attr("ry", this.brush.cornerRadius);
       }
@@ -455,3 +518,3 @@ this.attr("x", point.x);
       if (!this.options.brush)
-        this.options.brush = { color: "black", size: 2 };
+        this.options.brush = { color: "black", size: 3, mode: "draw" };
       if (options.el)
@@ -467,6 +530,6 @@ this.mount(options.el);
     get mode() {
-      return this.options.mode || "draw";
+      return this.options.brush.mode || "draw";
     }
     set mode(v) {
-      this.options.mode = v;
+      this.options.brush.mode = v;
     }
@@ -557,2 +620,4 @@ get brush() {
       event.preventDefault();
+      if (this._currentNode)
+        this.cancel();
       this._emitter.emit("start");
@@ -559,0 +624,0 @@ this._currentNode = this.model._eventDown(event);

dist/index.js

 var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
@@ -41,6 +56,29 @@ var __export = (target, all) => {
 }
+function guid() {
+  const S4 = () => ((1 + Math.random()) * 65536 | 0).toString(16).substring(1);
+  return `${S4() + S4()}-${S4()}-${S4()}-${S4()}-${S4()}${S4()}${S4()}`;
+}
 var DECIMAL = 2;
 var D = DECIMAL;
 
-// src/utils/simpify.ts
+// src/utils/dom.ts
+function createArrowHead(id, fill) {
+  const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+  const marker = document.createElementNS("http://www.w3.org/2000/svg", "marker");
+  const head = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  head.setAttribute("fill", fill);
+  marker.setAttribute("id", id);
+  marker.setAttribute("viewBox", "0 -5 10 10");
+  marker.setAttribute("refX", "5");
+  marker.setAttribute("refY", "0");
+  marker.setAttribute("markerWidth", "4");
+  marker.setAttribute("markerHeight", "4");
+  marker.setAttribute("orient", "auto");
+  head.setAttribute("d", "M0,-5L10,0L0,5");
+  marker.appendChild(head);
+  defs.appendChild(marker);
+  return defs;
+}
+
+// src/utils/simplify.ts
 function getSqDist(p1, p2) {
@@ -166,11 +204,12 @@ const dx = p1.x - p2.x;
   }
-  createElement(name) {
+  createElement(name, overrides) {
     var _a;
     const el = document.createElementNS("http://www.w3.org/2000/svg", name);
-    el.setAttribute("fill", (_a = this.brush.fill) != null ? _a : "transparent");
-    el.setAttribute("stroke", this.brush.color);
-    el.setAttribute("stroke-width", this.brush.size.toString());
+    const brush = overrides ? __spreadValues(__spreadValues({}, this.brush), overrides) : this.brush;
+    el.setAttribute("fill", (_a = brush.fill) != null ? _a : "transparent");
+    el.setAttribute("stroke", brush.color);
+    el.setAttribute("stroke-width", brush.size.toString());
     el.setAttribute("stroke-linecap", "round");
-    if (this.brush.dasharray)
-      el.setAttribute("stroke-dasharray", this.brush.dasharray);
+    if (brush.dasharray)
+      el.setAttribute("stroke-dasharray", brush.dasharray);
     return el;
@@ -210,8 +249,22 @@ }
   onStart(point) {
-    this.el = this.pressure ? this.createElement("g") : this.createElement("path");
+    this.el = this.pressure ? document.createElementNS("http://www.w3.org/2000/svg", "g") : this.createElement("path", { fill: "transparent" });
     this.points = [point];
     this.index = 0;
+    if (this.brush.arrowEnd) {
+      this.arrowId = guid();
+      const head = createArrowHead(this.arrowId, this.brush.color);
+      if (this.pressure) {
+        this.el.appendChild(head);
+      } else {
+        const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+        g.append(head);
+        g.append(this.el);
+        this.attr("marker-end", `url(#${this.arrowId})`);
+        return g;
+      }
+    }
     return this.el;
   }
   onMove(point) {
+    var _a;
     if (!this.el)
@@ -225,3 +278,3 @@ return false;
       while (this.points.length - this.index >= SEGMENT_LENGTH) {
-        const seg = this.createElement("path");
+        const seg = this.createElement("path", { fill: "transparent" });
         const points = this.points.slice(this.index, this.index + SEGMENT_LENGTH);
@@ -231,2 +284,5 @@ const pressure = points.map((i) => i.force).filter((i) => i != null).reduce((a, b) => a + b, 0) / SEGMENT_LENGTH;
         seg.setAttribute("stroke-width", (this.brush.size * pressure * 2).toString());
+        seg.setAttribute("marker-end", `url(#${this.arrowId})`);
+        (_a = this.prevSeg) == null ? void 0 : _a.removeAttribute("marker-end");
+        this.prevSeg = seg;
         this.el.appendChild(seg);
@@ -245,4 +301,2 @@ this.index += Math.round(SEGMENT_LENGTH / 2);
   onEnd() {
-    if (!this.pressure && this.simplify)
-      this.attr("d", toSvgData(simplify(this.points, 1, true)));
     const path = this.el;
@@ -256,11 +310,11 @@ this.el = null;
       return false;
+    if (!this.pressure && this.simplify)
+      path.setAttribute("d", toSvgData(simplify(this.points, 1, true)));
     return true;
   }
   get pressure() {
-    var _a;
-    return !!((_a = this.brush.draw) == null ? void 0 : _a.pressure);
+    return !!this.brush.pressure;
   }
   get simplify() {
-    var _a;
-    return !!((_a = this.brush.draw) == null ? void 0 : _a.simplify);
+    return !!this.brush.simplify;
   }
@@ -343,3 +397,3 @@ };
   onStart(point) {
-    this.el = this.createElement("line");
+    this.el = this.createElement("line", { fill: "transparent" });
     this.attr("x1", point.x);
@@ -349,2 +403,10 @@ this.attr("y1", point.y);
     this.attr("y2", point.y);
+    if (this.brush.arrowEnd) {
+      const id = guid();
+      const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+      g.append(createArrowHead(id, this.brush.color));
+      g.append(this.el);
+      this.attr("marker-end", `url(#${id})`);
+      return g;
+    }
     return this.el;
@@ -389,3 +451,3 @@ }
       return false;
-    if (!path.getTotalLength())
+    if (path.getTotalLength() < 5)
       return false;
@@ -399,7 +461,6 @@ return true;
   onStart(point) {
-    var _a;
     this.el = this.createElement("rect");
-    if ((_a = this.brush.rectangle) == null ? void 0 : _a.radius) {
-      this.attr("rx", this.brush.rectangle.radius);
-      this.attr("ry", this.brush.rectangle.radius);
+    if (this.brush.cornerRadius) {
+      this.attr("rx", this.brush.cornerRadius);
+      this.attr("ry", this.brush.cornerRadius);
     }
@@ -468,3 +529,3 @@ this.attr("x", point.x);
     if (!this.options.brush)
-      this.options.brush = { color: "black", size: 2 };
+      this.options.brush = { color: "black", size: 3, mode: "draw" };
     if (options.el)
@@ -480,6 +541,6 @@ this.mount(options.el);
   get mode() {
-    return this.options.mode || "draw";
+    return this.options.brush.mode || "draw";
   }
   set mode(v) {
-    this.options.mode = v;
+    this.options.brush.mode = v;
   }
@@ -570,2 +631,4 @@ get brush() {
     event.preventDefault();
+    if (this._currentNode)
+      this.cancel();
     this._emitter.emit("start");
@@ -572,0 +635,0 @@ this._currentNode = this.model._eventDown(event);

package.json

 {
   "name": "@drauu/core",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "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

64843

increased by14.69%

Lines of code

2105

increased by10.38%

No dependency changes