@mhamz.01/easyflow-whiteboard 2.96.0 → 2.98.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.
Files changed (6) hide show
  1. package/dist/components/toolbar/tooloptions-panel.d.ts.map +1 -1
  2. package/dist/components/toolbar/tooloptions-panel.js +22 -5
  3. package/dist/hooks/useLiveUpdate.d.ts.map +1 -1
  4. package/dist/hooks/useLiveUpdate.js +4 -9
  5. package/dist/hooks/useSelection.d.ts.map +1 -1
  6. package/package.json +1 -1
package/dist/components/toolbar/tooloptions-panel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tooloptions-panel.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/tooloptions-panel.tsx"],"names":[],"mappings":"AAGA,OAAc,EAAE,SAAS,EAAgC,MAAM,OAAO,CAAC;AAUvE,OAAO,MAA2C,MAAM,QAAQ,CAAC;AAIjE,UAAU,qBAAqB;IAC7B,YAAY,EAAE,SAAS,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAC/C;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,YAAY,GACb,EAAE,qBAAqB,2CA0MvB"}
1
+ {"version":3,"file":"tooloptions-panel.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/tooloptions-panel.tsx"],"names":[],"mappings":"AAGA,OAAc,EAAE,SAAS,EAAwC,MAAM,OAAO,CAAC;AAU/E,OAAO,MAA2C,MAAM,QAAQ,CAAC;AAIjE,UAAU,qBAAqB;IAC7B,YAAY,EAAE,SAAS,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAC/C;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,YAAY,GACb,EAAE,qBAAqB,2CA8NvB"}
package/dist/components/toolbar/tooloptions-panel.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
- import { useEffect, useMemo, useState } from "react";
3
+ import { useEffect, useMemo, useRef, useState } from "react";
4
4
  import { cn } from "../../lib/utils";
5
5
  import { useWhiteboardStore } from "../../store/whiteboard-store";
6
6
  import PenOptions from "./options/pen-option";
@@ -17,6 +17,7 @@ export default function ToolOptionsPanel({ fabricCanvas, }) {
17
17
  const toolOptions = useWhiteboardStore((state) => state.toolOptions);
18
18
  const [isMobileExpanded, setIsMobileExpanded] = useState(false);
19
19
  const displayTool = selectedObjectType || activeTool;
20
+ const isUpdatingRef = useRef(false);
20
21
  // Real-time fabric updates
21
22
  useEffect(() => {
22
23
  const canvas = fabricCanvas.current;
@@ -25,10 +26,27 @@ export default function ToolOptionsPanel({ fabricCanvas, }) {
25
26
  const selectedObject = canvas.getActiveObject();
26
27
  if (!selectedObject || !selectedObjectType)
27
28
  return;
29
+ // ⚠️ CRITICAL CHECK:
30
+ // We only want to push Store -> Canvas if the Store values
31
+ // are different from the Object's current values.
32
+ const updateIfChanged = (props) => {
33
+ let hasChanged = false;
34
+ Object.entries(props).forEach(([key, value]) => {
35
+ if (selectedObject.get(key) !== value) {
36
+ hasChanged = true;
37
+ }
38
+ });
39
+ if (hasChanged) {
40
+ selectedObject.set(props);
41
+ canvas.renderAll();
42
+ // Only push history if a real change happened
43
+ // pushHistory(JSON.stringify(canvas.toJSON(['fill', 'stroke', 'strokeWidth', 'id'])));
44
+ }
45
+ };
28
46
  switch (selectedObjectType) {
29
47
  case "rectangle":
30
48
  if (selectedObject instanceof Rect) {
31
- selectedObject.set({
49
+ updateIfChanged({
32
50
  fill: toolOptions.rectangle.fillColor,
33
51
  stroke: toolOptions.rectangle.strokeColor,
34
52
  strokeWidth: toolOptions.rectangle.strokeWidth,
@@ -37,7 +55,7 @@ export default function ToolOptionsPanel({ fabricCanvas, }) {
37
55
  break;
38
56
  case "circle":
39
57
  if (selectedObject instanceof Circle) {
40
- selectedObject.set({
58
+ updateIfChanged({
41
59
  fill: toolOptions.circle.fillColor,
42
60
  stroke: toolOptions.circle.strokeColor,
43
61
  strokeWidth: toolOptions.circle.strokeWidth,
@@ -46,7 +64,7 @@ export default function ToolOptionsPanel({ fabricCanvas, }) {
46
64
  break;
47
65
  case "text":
48
66
  if (selectedObject instanceof IText) {
49
- selectedObject.set({
67
+ updateIfChanged({
50
68
  fill: toolOptions.text.color,
51
69
  fontSize: toolOptions.text.fontSize,
52
70
  fontFamily: toolOptions.text.fontFamily,
@@ -54,7 +72,6 @@ export default function ToolOptionsPanel({ fabricCanvas, }) {
54
72
  }
55
73
  break;
56
74
  }
57
- canvas.renderAll();
58
75
  }, [toolOptions, selectedObjectType, fabricCanvas]);
59
76
  const toolsWithoutOptions = ["select", "pan", "undo", "redo", "eraser"];
60
77
  const isOpen = useMemo(() => {
package/dist/hooks/useLiveUpdate.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useLiveUpdate.d.ts","sourceRoot":"","sources":["../../src/hooks/useLiveUpdate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAU,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,MAAM,EAA6B,MAAM,QAAQ,CAAC;AAI3D,UAAU,kBAAkB;IAC1B,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,WAAW,EAAE,GAAG,CAAC;CAClB;AAED,eAAO,MAAM,aAAa,GAAI,+BAA+B,kBAAkB,SA6D9E,CAAC"}
1
+ {"version":3,"file":"useLiveUpdate.d.ts","sourceRoot":"","sources":["../../src/hooks/useLiveUpdate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,MAAM,EAA6B,MAAM,QAAQ,CAAC;AAI3D,UAAU,kBAAkB;IAC1B,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,WAAW,EAAE,GAAG,CAAC;CAClB;AAED,eAAO,MAAM,aAAa,GAAI,+BAA+B,kBAAkB,SAuD9E,CAAC"}
package/dist/hooks/useLiveUpdate.js CHANGED
@@ -1,22 +1,17 @@
1
- import { useEffect, useRef } from "react";
1
+ import { useEffect } from "react";
2
2
  import { FabricImage } from "fabric";
3
3
  import { Frame } from "../lib/fabric-frame";
4
4
  import { calculateDashArray } from "../lib/fabric-utils";
5
5
  export const useLiveUpdate = ({ fabricCanvas, toolOptions }) => {
6
- const prevToolOptionsRef = useRef(null);
7
6
  useEffect(() => {
8
7
  const canvas = fabricCanvas.current;
9
8
  if (!canvas)
10
9
  return;
10
+ // ← KEY FIX: This should only run when toolOptions CHANGES
11
+ // Not when selection changes!
11
12
  const activeObject = canvas.getActiveObject();
12
13
  if (!activeObject)
13
14
  return;
14
- // ← FIX: Only update if toolOptions actually changed
15
- const prevOptions = prevToolOptionsRef.current;
16
- if (prevOptions && JSON.stringify(prevOptions) === JSON.stringify(toolOptions)) {
17
- return; // No changes, skip update
18
- }
19
- prevToolOptionsRef.current = toolOptions;
20
15
  const updateObjectStyle = (obj) => {
21
16
  let options = null;
22
17
  if (obj.type === "rect")
@@ -61,5 +56,5 @@ export const useLiveUpdate = ({ fabricCanvas, toolOptions }) => {
61
56
  updateObjectStyle(activeObject);
62
57
  }
63
58
  canvas.requestRenderAll();
64
- }, [toolOptions, fabricCanvas]);
59
+ }, [toolOptions]); // ← REMOVED fabricCanvas from deps - only run when toolOptions changes
65
60
  };
package/dist/hooks/useSelection.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useSelection.d.ts","sourceRoot":"","sources":["../../src/hooks/useSelection.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAQ,YAAY,EAAe,MAAM,QAAQ,CAAC;AAMjE,UAAU,iBAAiB;IACzB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,eAAe,EAAE,CAAC,GAAG,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1F,wBAAwB,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAC5D,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,YAAY,GAAI,wFAM1B,iBAAiB,SAsJnB,CAAC"}
1
+ {"version":3,"file":"useSelection.d.ts","sourceRoot":"","sources":["../../src/hooks/useSelection.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAQ,YAAY,EAAe,MAAM,QAAQ,CAAC;AAMjE,UAAU,iBAAiB;IACzB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,eAAe,EAAE,CAAC,GAAG,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1F,wBAAwB,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAC5D,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,YAAY,GAAI,wFAM1B,iBAAiB,SAuJnB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mhamz.01/easyflow-whiteboard",
3
- "version": "2.96.0",
3
+ "version": "2.98.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",