@umituz/web-canvas 1.1.0 → 1.1.1

package/dist/{chunk-HJ24NSQA.mjs → chunk-YKXOSUMF.mjs}

@@ -615,6 +615,7 @@ function useFreehandCanvas(options = {}) {
   const canvasRef = useRef4(null);
   const strokesRef = useRef4([]);
   const activeStrokeRef = useRef4(null);
+  const activePointerIdRef = useRef4(null);
   const dprRef = useRef4(1);
   const [strokeCount, setStrokeCount] = useState4(0);
   const redraw = useCallback4(() => {
@@ -702,8 +703,10 @@ function useFreehandCanvas(options = {}) {
     }
     function onPointerDown(event) {
       if (event.button !== 0 && event.pointerType === "mouse") return;
+      if (activeStrokeRef.current != null) return;
       event.preventDefault();
       el.setPointerCapture(event.pointerId);
+      activePointerIdRef.current = event.pointerId;
       const { brushSize: size, color: ink, pressureEnabled: dynamic } = optionsRef.current;
       const stroke = {
         size,
@@ -716,7 +719,7 @@ function useFreehandCanvas(options = {}) {
     }
     function onPointerMove(event) {
       const stroke = activeStrokeRef.current;
-      if (!stroke) return;
+      if (!stroke || event.pointerId !== activePointerIdRef.current) return;
       event.preventDefault();
       const point = pointFrom(event);
       const previous = stroke.points[stroke.points.length - 1];
@@ -725,8 +728,9 @@ function useFreehandCanvas(options = {}) {
     }
     function commit(event) {
       const stroke = activeStrokeRef.current;
-      if (!stroke) return;
+      if (!stroke || event.pointerId !== activePointerIdRef.current) return;
       activeStrokeRef.current = null;
+      activePointerIdRef.current = null;
       if (el.hasPointerCapture(event.pointerId)) {
         el.releasePointerCapture(event.pointerId);
       }

package/dist/index.js

@@ -1755,6 +1755,7 @@ function useFreehandCanvas(options = {}) {
   const canvasRef = (0, import_react4.useRef)(null);
   const strokesRef = (0, import_react4.useRef)([]);
   const activeStrokeRef = (0, import_react4.useRef)(null);
+  const activePointerIdRef = (0, import_react4.useRef)(null);
   const dprRef = (0, import_react4.useRef)(1);
   const [strokeCount, setStrokeCount] = (0, import_react4.useState)(0);
   const redraw = (0, import_react4.useCallback)(() => {
@@ -1842,8 +1843,10 @@ function useFreehandCanvas(options = {}) {
     }
     function onPointerDown(event) {
       if (event.button !== 0 && event.pointerType === "mouse") return;
+      if (activeStrokeRef.current != null) return;
       event.preventDefault();
       el.setPointerCapture(event.pointerId);
+      activePointerIdRef.current = event.pointerId;
       const { brushSize: size, color: ink, pressureEnabled: dynamic } = optionsRef.current;
       const stroke = {
         size,
@@ -1856,7 +1859,7 @@ function useFreehandCanvas(options = {}) {
     }
     function onPointerMove(event) {
       const stroke = activeStrokeRef.current;
-      if (!stroke) return;
+      if (!stroke || event.pointerId !== activePointerIdRef.current) return;
       event.preventDefault();
       const point = pointFrom(event);
       const previous = stroke.points[stroke.points.length - 1];
@@ -1865,8 +1868,9 @@ function useFreehandCanvas(options = {}) {
     }
     function commit(event) {
       const stroke = activeStrokeRef.current;
-      if (!stroke) return;
+      if (!stroke || event.pointerId !== activePointerIdRef.current) return;
       activeStrokeRef.current = null;
+      activePointerIdRef.current = null;
       if (el.hasPointerCapture(event.pointerId)) {
         el.releasePointerCapture(event.pointerId);
       }

package/dist/index.mjs

@@ -3,7 +3,7 @@ import {
   useFreehandCanvas,
   useReportExport,
   useScreenshotStudio
-} from "./chunk-HJ24NSQA.mjs";
+} from "./chunk-YKXOSUMF.mjs";
 import {
   ReportService,
   ScreenshotStudioService

package/dist/presentation/index.js

@@ -1749,6 +1749,7 @@ function useFreehandCanvas(options = {}) {
   const canvasRef = (0, import_react4.useRef)(null);
   const strokesRef = (0, import_react4.useRef)([]);
   const activeStrokeRef = (0, import_react4.useRef)(null);
+  const activePointerIdRef = (0, import_react4.useRef)(null);
   const dprRef = (0, import_react4.useRef)(1);
   const [strokeCount, setStrokeCount] = (0, import_react4.useState)(0);
   const redraw = (0, import_react4.useCallback)(() => {
@@ -1836,8 +1837,10 @@ function useFreehandCanvas(options = {}) {
     }
     function onPointerDown(event) {
       if (event.button !== 0 && event.pointerType === "mouse") return;
+      if (activeStrokeRef.current != null) return;
       event.preventDefault();
       el.setPointerCapture(event.pointerId);
+      activePointerIdRef.current = event.pointerId;
       const { brushSize: size, color: ink, pressureEnabled: dynamic } = optionsRef.current;
       const stroke = {
         size,
@@ -1850,7 +1853,7 @@ function useFreehandCanvas(options = {}) {
     }
     function onPointerMove(event) {
       const stroke = activeStrokeRef.current;
-      if (!stroke) return;
+      if (!stroke || event.pointerId !== activePointerIdRef.current) return;
       event.preventDefault();
       const point = pointFrom(event);
       const previous = stroke.points[stroke.points.length - 1];
@@ -1859,8 +1862,9 @@ function useFreehandCanvas(options = {}) {
     }
     function commit(event) {
       const stroke = activeStrokeRef.current;
-      if (!stroke) return;
+      if (!stroke || event.pointerId !== activePointerIdRef.current) return;
       activeStrokeRef.current = null;
+      activePointerIdRef.current = null;
       if (el.hasPointerCapture(event.pointerId)) {
         el.releasePointerCapture(event.pointerId);
       }

package/dist/presentation/index.mjs

@@ -3,7 +3,7 @@ import {
   useFreehandCanvas,
   useReportExport,
   useScreenshotStudio
-} from "../chunk-HJ24NSQA.mjs";
+} from "../chunk-YKXOSUMF.mjs";
 import "../chunk-DNKRSL6D.mjs";
 import "../chunk-UOGTEMIJ.mjs";
 import "../chunk-Z6IB4BQV.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-canvas",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Comprehensive canvas and screenshot generation library with device frames, patterns, and PDF export",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -100,4 +100,4 @@
     "jszip": "^3.10.1",
     "xlsx": "^0.18.5"
   }
-}
+}

package/src/presentation/hooks/useFreehandCanvas.ts

@@ -64,6 +64,7 @@ export function useFreehandCanvas(
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const strokesRef = useRef<FreehandStroke[]>([]);
   const activeStrokeRef = useRef<FreehandStroke | null>(null);
+  const activePointerIdRef = useRef<number | null>(null);
   const dprRef = useRef(1);
 
   const [strokeCount, setStrokeCount] = useState(0);
@@ -168,8 +169,12 @@ export function useFreehandCanvas(
 
     function onPointerDown(event: PointerEvent): void {
       if (event.button !== 0 && event.pointerType === 'mouse') return;
+      // Only one stroke at a time: a resting palm or second finger touching
+      // mid-stroke must not hijack or corrupt the active stroke.
+      if (activeStrokeRef.current != null) return;
       event.preventDefault();
       el.setPointerCapture(event.pointerId);
+      activePointerIdRef.current = event.pointerId;
       const { brushSize: size, color: ink, pressureEnabled: dynamic } = optionsRef.current;
       const stroke: FreehandStroke = {
         size,
@@ -183,7 +188,7 @@ export function useFreehandCanvas(
 
     function onPointerMove(event: PointerEvent): void {
       const stroke = activeStrokeRef.current;
-      if (!stroke) return;
+      if (!stroke || event.pointerId !== activePointerIdRef.current) return;
       event.preventDefault();
       const point = pointFrom(event);
       const previous = stroke.points[stroke.points.length - 1];
@@ -193,8 +198,9 @@ export function useFreehandCanvas(
 
     function commit(event: PointerEvent): void {
       const stroke = activeStrokeRef.current;
-      if (!stroke) return;
+      if (!stroke || event.pointerId !== activePointerIdRef.current) return;
       activeStrokeRef.current = null;
+      activePointerIdRef.current = null;
       if (el.hasPointerCapture(event.pointerId)) {
         el.releasePointerCapture(event.pointerId);
       }