@mhamz.01/easyflow-whiteboard 2.117.0 → 2.119.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -196,7 +196,7 @@ export default function FabricWhiteboard({ initialData, onSave, saveDebounceMs,
196
196
  { ...docTemplate, id: `${docTemplate.id}-${Date.now()}`, x: cx - 160, y: cy - 80 },
197
197
  ]);
198
198
  };
199
- return (_jsx("div", { className: "easyflow-whiteboard h-full w-full", children: _jsxs("div", { ref: containerRef, className: "relative w-full h-full overflow-hidden bg-[#0b0b0b]", style: { touchAction: "none", overscrollBehavior: "none" }, children: [_jsx("div", { className: "absolute inset-0 pointer-events-none", style: {
199
+ return (_jsx("div", { className: "easyflow-whiteboard w-screen h-screen", children: _jsxs("div", { ref: containerRef, className: "relative w-full h-full overflow-hidden bg-[#0b0b0b]", style: { touchAction: "none", overscrollBehavior: "none" }, children: [_jsx("div", { className: "absolute inset-0 pointer-events-none", style: {
200
200
  backgroundImage: `radial-gradient(circle, rgba(255,255,255,0.2) 1.2px, transparent 1.2px)`,
201
201
  backgroundSize: "40px 40px",
202
202
  zIndex: 0,
@@ -1 +1 @@
1
- {"version":3,"file":"useEraser.d.ts","sourceRoot":"","sources":["../../src/hooks/useEraser.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACtD,OAAO,KAAK,MAAM,MAAM,QAAQ,CAAC;AAEjC,UAAU,cAAc;IACtB,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,GAAG,CAAC;IACjB,cAAc,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACzC,gBAAgB,EAAE,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC;IAC/C,eAAe,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACpC,aAAa,EAAE,SAAS,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IAC7C,mBAAmB,EAAE,SAAS,CAAC,MAAM,EAAE,CAAC,CAAC;IACzC,kBAAkB,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACvC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,SAAS,GAAI,oKAWvB,cAAc;;;;gCAsBoB;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;;CA0I5D,CAAC"}
1
+ {"version":3,"file":"useEraser.d.ts","sourceRoot":"","sources":["../../src/hooks/useEraser.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACtD,OAAO,KAAK,MAAM,MAAM,QAAQ,CAAC;AAEjC,UAAU,cAAc;IACtB,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,GAAG,CAAC;IACjB,cAAc,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACzC,gBAAgB,EAAE,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC;IAC/C,eAAe,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACpC,aAAa,EAAE,SAAS,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IAC7C,mBAAmB,EAAE,SAAS,CAAC,MAAM,EAAE,CAAC,CAAC;IACzC,kBAAkB,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACvC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,SAAS,GAAI,oKAWvB,cAAc;;;;gCAsBoB;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;;CA0H5D,CAAC"}
@@ -24,7 +24,7 @@ export const useEraser = ({ fabricCanvas, activeTool, toolOptions, eraserTraceRe
24
24
  const canvas = fabricCanvas.current;
25
25
  if (!canvas || activeTool !== "eraser")
26
26
  return;
27
- // Create or update trace circle
27
+ // Update or create trace circle
28
28
  if (!eraserTraceRef.current) {
29
29
  eraserTraceRef.current = new Circle({
30
30
  radius: toolOptions.eraser.size / 1.5,
@@ -45,66 +45,54 @@ export const useEraser = ({ fabricCanvas, activeTool, toolOptions, eraserTraceRe
45
45
  eraserTraceRef.current.set({ left: pointer.x, top: pointer.y });
46
46
  eraserTraceRef.current.setCoords();
47
47
  canvas.bringObjectToFront(eraserTraceRef.current);
48
- // Smooth continuous trail
49
48
  if (eraserActiveRef.current) {
50
49
  suppressHistoryRef.current = true;
51
50
  if (eraserPathPointsRef.current.length === 0) {
52
51
  eraserPathPointsRef.current = [`M ${pointer.x} ${pointer.y}`];
53
52
  const path = new fabric.Path(eraserPathPointsRef.current.join(" "), {
54
- stroke: "rgba(220, 220, 220, 0.7)",
53
+ stroke: "rgba(53, 53, 53, 0.7)",
55
54
  strokeWidth: toolOptions.eraser.size,
56
55
  fill: null,
57
56
  selectable: false,
58
57
  evented: false,
59
58
  strokeLineCap: "round",
60
59
  strokeLineJoin: "round",
61
- opacity: 1,
62
60
  excludeFromExport: true,
63
61
  });
64
62
  canvas.add(path);
65
63
  eraserPathRef.current = path;
66
64
  }
67
65
  else {
66
+ // ── FIX 1: Mutate path in place — no remove/add, no events fired ──
68
67
  eraserPathPointsRef.current.push(`L ${pointer.x} ${pointer.y}`);
69
68
  const pathString = eraserPathPointsRef.current.join(" ");
70
69
  if (eraserPathRef.current) {
71
- canvas.remove(eraserPathRef.current);
70
+ const parsed = new fabric.Path(pathString);
71
+ eraserPathRef.current.set({ path: parsed.path });
72
+ eraserPathRef.current.setCoords();
72
73
  }
73
- const path = new fabric.Path(pathString, {
74
- stroke: "rgba(53, 53, 53, 0.7)",
75
- strokeWidth: toolOptions.eraser.size,
76
- fill: null,
77
- selectable: false,
78
- evented: false,
79
- strokeLineCap: "round",
80
- strokeLineJoin: "round",
81
- opacity: 1,
82
- excludeFromExport: true,
83
- });
84
- canvas.add(path);
85
- eraserPathRef.current = path;
86
74
  }
87
75
  canvas.bringObjectToFront(eraserTraceRef.current);
88
76
  }
89
- // Find objects under eraser
90
- const previousTargets = new Set(eraserTargetsRef.current);
91
- eraserTargetsRef.current.clear();
92
- canvas.forEachObject((obj) => {
93
- if (obj === eraserTraceRef.current)
94
- return;
95
- if (obj === eraserPathRef.current)
96
- return;
97
- if (obj.intersectsWithObject(eraserTraceRef.current)) {
98
- eraserTargetsRef.current.add(obj);
99
- if (eraserActiveRef.current && obj.opacity !== 0.3) {
100
- obj.set({ opacity: 0.3 });
77
+ // ── FIX 2: Intersection check only while actively erasing ──
78
+ if (eraserActiveRef.current) {
79
+ const previousTargets = new Set(eraserTargetsRef.current);
80
+ eraserTargetsRef.current.clear();
81
+ canvas.forEachObject((obj) => {
82
+ if (obj === eraserTraceRef.current || obj === eraserPathRef.current)
83
+ return;
84
+ if (obj.intersectsWithObject(eraserTraceRef.current)) {
85
+ eraserTargetsRef.current.add(obj);
86
+ if (obj.opacity !== 0.3)
87
+ obj.set({ opacity: 0.3 });
101
88
  }
102
- }
103
- else if (previousTargets.has(obj)) {
104
- obj.set({ opacity: 1 });
105
- }
106
- });
107
- canvas.renderAll();
89
+ else if (previousTargets.has(obj)) {
90
+ obj.set({ opacity: 1 });
91
+ }
92
+ });
93
+ }
94
+ // ── FIX 3: requestRenderAll instead of renderAll ──
95
+ canvas.requestRenderAll();
108
96
  };
109
97
  const handleEraserUp = () => {
110
98
  const canvas = fabricCanvas.current;
package/dist/styles.css CHANGED
@@ -570,6 +570,9 @@
570
570
  .w-px {
571
571
  width: 1px;
572
572
  }
573
+ .w-screen {
574
+ width: 100vw;
575
+ }
573
576
  .max-w-\[120px\] {
574
577
  max-width: 120px;
575
578
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mhamz.01/easyflow-whiteboard",
3
- "version": "2.117.0",
3
+ "version": "2.119.0",
4
4
  "description": "A feature-rich whiteboard component built with Fabric.js and React",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",