@drauu/core - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

dist/index.d.ts

@@ -22,9 +22,7 @@ interface Unsubscribe {
     dasharray?: string;
-    draw?: {
-        /**
-         * WIP
-         * @default 0
-         */
-        pressure?: number;
-    };
+    /**
+     * @expiremental
+     * @default true
+     */
+    pressure?: boolean;
     rectangle?: {
@@ -40,4 +38,6 @@ /**
     y: number;
+    force?: number;
 }
 declare type DrawingMode = 'draw' | 'line' | 'rectangle' | 'ellipse';
+declare type InputEvents = MouseEvent | TouchEvent | PointerEvent;
 interface Options {
@@ -76,6 +76,3 @@ el?: string | SVGSVGElement;
     get altPressed(): boolean;
-    getMousePosition(event: MouseEvent | TouchEvent): {
-        x: number;
-        y: number;
-    };
+    getMousePosition(event: InputEvents): Point;
     protected createElement<K extends keyof SVGElementTagNameMap>(name: K): SVGElementTagNameMap[K];
@@ -134,2 +131,2 @@ protected attr(name: keyof T, value: string | number): void;
 
-export { Brush, Drauu, DrawingMode, EventsMap, Options, Point, createDrauu };
+export { Brush, Drauu, DrawingMode, EventsMap, InputEvents, Options, Point, createDrauu };

dist/index.global.js

@@ -16,2 +16,17 @@ (() => {
 
+  // src/utils.ts
+  function numSort(a, b) {
+    return a - b;
+  }
+  function getSymbol(a) {
+    if (a < 0)
+      return -1;
+    return 1;
+  }
+  function splitNum(a) {
+    return [Math.abs(a), getSymbol(a)];
+  }
+  var DECIMAL = 2;
+  var D = DECIMAL;
+
   // src/models/base.ts
@@ -45,9 +60,10 @@ var BaseModel = class {
     getMousePosition(event) {
-      var _a, _b, _c;
+      var _a, _b, _c, _d;
       const rect = this.drauu.el.getBoundingClientRect();
       const scale = (_a = this.drauu.options.corrdinateScale) != null ? _a : 1;
-      if (event instanceof MouseEvent) {
+      if (event instanceof PointerEvent || event instanceof MouseEvent) {
         return {
           x: (event.pageX - rect.left) * scale,
-          y: (event.pageY - rect.top) * scale
+          y: (event.pageY - rect.top) * scale,
+          force: event.pressure
         };
@@ -58,3 +74,4 @@ }
           x: ((((_b = event.targetTouches[0]) == null ? void 0 : _b.pageX) || 0) - rect.left) * scale,
-          y: ((((_c = event.targetTouches[0]) == null ? void 0 : _c.pageY) || 0) - rect.top) * scale
+          y: ((((_c = event.targetTouches[0]) == null ? void 0 : _c.pageY) || 0) - rect.top) * scale,
+          force: (_d = event.targetTouches[0]) == null ? void 0 : _d.force
         };
@@ -76,3 +93,3 @@ }
     attr(name, value) {
-      this.el.setAttribute(name, value.toString());
+      this.el.setAttribute(name, typeof value === "string" ? value : value.toFixed(D));
     }
@@ -99,2 +116,3 @@ _setEvent(event) {
   // src/models/draw.ts
+  var SEGMENT_LENGTH = 4;
   var DrawModel = class extends BaseModel {
@@ -104,6 +122,8 @@ constructor() {
       this.points = [];
+      this.index = 0;
     }
     onStart(point) {
-      this.el = this.createElement("path");
+      this.el = this.pressure ? this.createElement("g") : this.createElement("path");
       this.points = [point];
+      this.index = 0;
       return this.el;
@@ -116,3 +136,15 @@ }
         this.points.push(point);
-      this.el.setAttribute("d", toSvgData(this.points));
+      if (this.pressure) {
+        while (this.points.length - this.index >= SEGMENT_LENGTH) {
+          const seg = this.createElement("path");
+          const points = this.points.slice(this.index, this.index + SEGMENT_LENGTH);
+          const pressure = points.map((i) => i.force).filter((i) => i != null).reduce((a, b) => a + b, 0) / SEGMENT_LENGTH;
+          seg.setAttribute("d", toSvgData(points));
+          seg.setAttribute("stroke-width", (this.brush.size * pressure * 2).toString());
+          this.el.appendChild(seg);
+          this.index += Math.round(SEGMENT_LENGTH / 2);
+        }
+      } else {
+        this.attr("d", toSvgData(this.points));
+      }
       return true;
@@ -125,6 +157,11 @@ }
         return false;
-      if (!path.getTotalLength())
+      if (this.pressure && !(path == null ? void 0 : path.children.length))
         return false;
+      if (!this.pressure && !path.getTotalLength())
+        return false;
       return true;
     }
+    get pressure() {
+      return !!this.brush.pressure;
+    }
   };
@@ -153,21 +190,8 @@ function line(a, b) {
     const cpe = controlPoint(point, points[i - 1], points[i + 1], true);
-    return `C ${cps.x},${cps.y} ${cpe.x},${cpe.y} ${point.x},${point.y}`;
+    return `C ${cps.x.toFixed(D)},${cps.y.toFixed(D)} ${cpe.x.toFixed(D)},${cpe.y.toFixed(D)} ${point.x.toFixed(D)},${point.y.toFixed(D)}`;
   }
   function toSvgData(points) {
-    return points.reduce((acc, point, i, a) => i === 0 ? `M ${point.x},${point.y}` : `${acc} ${bezierCommand(point, i, a)}`, "");
+    return points.reduce((acc, point, i, a) => i === 0 ? `M ${point.x.toFixed(D)},${point.y.toFixed(D)}` : `${acc} ${bezierCommand(point, i, a)}`, "");
   }
 
-  // src/utils.ts
-  function numSort(a, b) {
-    return a - b;
-  }
-  function getSymbol(a) {
-    if (a < 0)
-      return -1;
-    return 1;
-  }
-  function splitNum(a) {
-    return [Math.abs(a), getSymbol(a)];
-  }
-
   // src/models/ellipse.ts
@@ -379,7 +403,7 @@ var EllipseModel = class extends BaseModel {
       const keyboard = this.eventKeyboard.bind(this);
-      el.addEventListener("mousedown", start, false);
+      el.addEventListener("pointerdown", start, false);
       el.addEventListener("touchstart", start, false);
-      el.addEventListener("mousemove", move, false);
+      el.addEventListener("pointermove", move, false);
       el.addEventListener("touchmove", move, false);
-      el.addEventListener("mouseup", end, false);
+      el.addEventListener("pointerup", end, false);
       el.addEventListener("touchend", end, false);
@@ -386,0 +410,0 @@ window.addEventListener("keydown", keyboard, false);

dist/index.js

@@ -29,2 +29,17 @@ var __defProp = Object.defineProperty;
 
+// src/utils.ts
+function numSort(a, b) {
+  return a - b;
+}
+function getSymbol(a) {
+  if (a < 0)
+    return -1;
+  return 1;
+}
+function splitNum(a) {
+  return [Math.abs(a), getSymbol(a)];
+}
+var DECIMAL = 2;
+var D = DECIMAL;
+
 // src/models/base.ts
@@ -58,9 +73,10 @@ var BaseModel = class {
   getMousePosition(event) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const rect = this.drauu.el.getBoundingClientRect();
     const scale = (_a = this.drauu.options.corrdinateScale) != null ? _a : 1;
-    if (event instanceof MouseEvent) {
+    if (event instanceof PointerEvent || event instanceof MouseEvent) {
       return {
         x: (event.pageX - rect.left) * scale,
-        y: (event.pageY - rect.top) * scale
+        y: (event.pageY - rect.top) * scale,
+        force: event.pressure
       };
@@ -71,3 +87,4 @@ }
         x: ((((_b = event.targetTouches[0]) == null ? void 0 : _b.pageX) || 0) - rect.left) * scale,
-        y: ((((_c = event.targetTouches[0]) == null ? void 0 : _c.pageY) || 0) - rect.top) * scale
+        y: ((((_c = event.targetTouches[0]) == null ? void 0 : _c.pageY) || 0) - rect.top) * scale,
+        force: (_d = event.targetTouches[0]) == null ? void 0 : _d.force
       };
@@ -89,3 +106,3 @@ }
   attr(name, value) {
-    this.el.setAttribute(name, value.toString());
+    this.el.setAttribute(name, typeof value === "string" ? value : value.toFixed(D));
   }
@@ -112,2 +129,3 @@ _setEvent(event) {
 // src/models/draw.ts
+var SEGMENT_LENGTH = 4;
 var DrawModel = class extends BaseModel {
@@ -117,6 +135,8 @@ constructor() {
     this.points = [];
+    this.index = 0;
   }
   onStart(point) {
-    this.el = this.createElement("path");
+    this.el = this.pressure ? this.createElement("g") : this.createElement("path");
     this.points = [point];
+    this.index = 0;
     return this.el;
@@ -129,3 +149,15 @@ }
       this.points.push(point);
-    this.el.setAttribute("d", toSvgData(this.points));
+    if (this.pressure) {
+      while (this.points.length - this.index >= SEGMENT_LENGTH) {
+        const seg = this.createElement("path");
+        const points = this.points.slice(this.index, this.index + SEGMENT_LENGTH);
+        const pressure = points.map((i) => i.force).filter((i) => i != null).reduce((a, b) => a + b, 0) / SEGMENT_LENGTH;
+        seg.setAttribute("d", toSvgData(points));
+        seg.setAttribute("stroke-width", (this.brush.size * pressure * 2).toString());
+        this.el.appendChild(seg);
+        this.index += Math.round(SEGMENT_LENGTH / 2);
+      }
+    } else {
+      this.attr("d", toSvgData(this.points));
+    }
     return true;
@@ -138,6 +170,11 @@ }
       return false;
-    if (!path.getTotalLength())
+    if (this.pressure && !(path == null ? void 0 : path.children.length))
       return false;
+    if (!this.pressure && !path.getTotalLength())
+      return false;
     return true;
   }
+  get pressure() {
+    return !!this.brush.pressure;
+  }
 };
@@ -166,21 +203,8 @@ function line(a, b) {
   const cpe = controlPoint(point, points[i - 1], points[i + 1], true);
-  return `C ${cps.x},${cps.y} ${cpe.x},${cpe.y} ${point.x},${point.y}`;
+  return `C ${cps.x.toFixed(D)},${cps.y.toFixed(D)} ${cpe.x.toFixed(D)},${cpe.y.toFixed(D)} ${point.x.toFixed(D)},${point.y.toFixed(D)}`;
 }
 function toSvgData(points) {
-  return points.reduce((acc, point, i, a) => i === 0 ? `M ${point.x},${point.y}` : `${acc} ${bezierCommand(point, i, a)}`, "");
+  return points.reduce((acc, point, i, a) => i === 0 ? `M ${point.x.toFixed(D)},${point.y.toFixed(D)}` : `${acc} ${bezierCommand(point, i, a)}`, "");
 }
 
-// src/utils.ts
-function numSort(a, b) {
-  return a - b;
-}
-function getSymbol(a) {
-  if (a < 0)
-    return -1;
-  return 1;
-}
-function splitNum(a) {
-  return [Math.abs(a), getSymbol(a)];
-}
-
 // src/models/ellipse.ts
@@ -392,7 +416,7 @@ var EllipseModel = class extends BaseModel {
     const keyboard = this.eventKeyboard.bind(this);
-    el.addEventListener("mousedown", start, false);
+    el.addEventListener("pointerdown", start, false);
     el.addEventListener("touchstart", start, false);
-    el.addEventListener("mousemove", move, false);
+    el.addEventListener("pointermove", move, false);
     el.addEventListener("touchmove", move, false);
-    el.addEventListener("mouseup", end, false);
+    el.addEventListener("pointerup", end, false);
     el.addEventListener("touchend", end, false);
@@ -399,0 +423,0 @@ window.addEventListener("keydown", keyboard, false);

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

48455

increased by7.97%

Lines of code

1635

increased by4.41%

No dependency changes