@mhamz.01/easyflow-whiteboard 2.97.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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooloptions-panel.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/tooloptions-panel.tsx"],"names":[],"mappings":"AAGA,OAAc,EAAE,SAAS,
|
|
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"}
|
|
@@ -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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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(() => {
|
|
@@ -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,
|
|
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"}
|