@mhamz.01/easyflow-whiteboard 2.98.0 → 2.99.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 (5) hide show
  1. package/dist/components/toolbar/tooloptions-panel.d.ts.map +1 -1
  2. package/dist/components/toolbar/tooloptions-panel.js +5 -22
  3. package/dist/hooks/useSelection.d.ts.map +1 -1
  4. package/dist/hooks/useSelection.js +14 -0
  5. 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,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
+ {"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"}
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, useRef, useState } from "react";
3
+ import { useEffect, useMemo, 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,7 +17,6 @@ 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);
21
20
  // Real-time fabric updates
22
21
  useEffect(() => {
23
22
  const canvas = fabricCanvas.current;
@@ -26,27 +25,10 @@ export default function ToolOptionsPanel({ fabricCanvas, }) {
26
25
  const selectedObject = canvas.getActiveObject();
27
26
  if (!selectedObject || !selectedObjectType)
28
27
  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
- };
46
28
  switch (selectedObjectType) {
47
29
  case "rectangle":
48
30
  if (selectedObject instanceof Rect) {
49
- updateIfChanged({
31
+ selectedObject.set({
50
32
  fill: toolOptions.rectangle.fillColor,
51
33
  stroke: toolOptions.rectangle.strokeColor,
52
34
  strokeWidth: toolOptions.rectangle.strokeWidth,
@@ -55,7 +37,7 @@ export default function ToolOptionsPanel({ fabricCanvas, }) {
55
37
  break;
56
38
  case "circle":
57
39
  if (selectedObject instanceof Circle) {
58
- updateIfChanged({
40
+ selectedObject.set({
59
41
  fill: toolOptions.circle.fillColor,
60
42
  stroke: toolOptions.circle.strokeColor,
61
43
  strokeWidth: toolOptions.circle.strokeWidth,
@@ -64,7 +46,7 @@ export default function ToolOptionsPanel({ fabricCanvas, }) {
64
46
  break;
65
47
  case "text":
66
48
  if (selectedObject instanceof IText) {
67
- updateIfChanged({
49
+ selectedObject.set({
68
50
  fill: toolOptions.text.color,
69
51
  fontSize: toolOptions.text.fontSize,
70
52
  fontFamily: toolOptions.text.fontFamily,
@@ -72,6 +54,7 @@ export default function ToolOptionsPanel({ fabricCanvas, }) {
72
54
  }
73
55
  break;
74
56
  }
57
+ canvas.renderAll();
75
58
  }, [toolOptions, selectedObjectType, fabricCanvas]);
76
59
  const toolsWithoutOptions = ["select", "pan", "undo", "redo", "eraser"];
77
60
  const isOpen = useMemo(() => {
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,SAuJnB,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,SAsKnB,CAAC"}
package/dist/hooks/useSelection.js CHANGED
@@ -103,6 +103,20 @@ export const useSelection = ({ fabricCanvas, activeTool, setSelectionBox, setSel
103
103
  : sel instanceof BidirectionalArrow ? "arrow"
104
104
  : typeMap[sel.type] ?? null;
105
105
  setSelectedObjectType(t);
106
+ if (t && sel.type !== "activeSelection") {
107
+ const store = useWhiteboardStore.getState();
108
+ if (t === "rectangle" && sel.fill) {
109
+ store.setToolOption("rectangle", "fillColor", sel.fill);
110
+ store.setToolOption("rectangle", "strokeColor", sel.stroke || "#ffffff");
111
+ store.setToolOption("rectangle", "strokeWidth", sel.strokeWidth || 2);
112
+ }
113
+ else if (t === "circle" && sel.fill) {
114
+ store.setToolOption("circle", "fillColor", sel.fill);
115
+ store.setToolOption("circle", "strokeColor", sel.stroke || "#ffffff");
116
+ store.setToolOption("circle", "strokeWidth", sel.strokeWidth || 2);
117
+ }
118
+ // Add for other types as needed...
119
+ }
106
120
  };
107
121
  const onDeselected = () => {
108
122
  setSelectedObjectType(null);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mhamz.01/easyflow-whiteboard",
3
- "version": "2.98.0",
3
+ "version": "2.99.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",