feat: refactor ComposeCanvas to use reactive style props and use complete declarative approach for editor+toolbar

2026-05-01 11:32:23 +05:30
parent 5f56b21823
commit 90b04f2397
3 changed files with 21 additions and 27 deletions
@@ -41,7 +41,6 @@ export type CanvasTools = {
  getData: () => CanvasJSON;
  getImages: () => { src: string; file: File }[];
  loadData: (data: CanvasJSON) => Promise<void>;
-  setStyle: (style: CanvasStyle) => void;
  getStyle: () => CanvasStyle;
 };

@@ -92,12 +91,14 @@ const DEFAULT_INIT_TEXT = "Take a deep breath...";
 interface ComposeCanvasProps {
  readOnly?: boolean;
  initialData?: CanvasJSON | null;
+  style?: CanvasStyle;
  ref?: React.Ref<CanvasTools>;
 }

 export function ComposeCanvas({
  readOnly = false,
  initialData = null,
+  style,
  ref,
 }: ComposeCanvasProps) {
  // wrapper is the parent div box
@@ -230,6 +231,15 @@ export function ComposeCanvas({
    [readOnly, syncViewport, focusTextbox],
  );

+  useEffect(() => {
+    if (style && textboxRef.current) {
+      const textBox = textboxRef.current;
+      textBox.fontFamily = style.fontFamily || textBox.fontFamily;
+      textBox.fill = style.fontColor || textBox.fill;
+      syncViewport();
+    }
+  }, [style, syncViewport]);
+
  useEffect(() => {
    let isMounted = true;
    let resizeObserver: ResizeObserver | null = null;
@@ -356,16 +366,6 @@ export function ComposeCanvas({
      await loadContent(data);
    },

-    setStyle: (style: CanvasStyle) => {
-      const textBox = textboxRef.current;
-      if (!textBox) return;
-
-      textBox.fontFamily = style.fontFamily || textBox.fontFamily;
-      textBox.fill = style.fontColor || textBox.fill;
-
-      syncViewport();
-    },
-
    getStyle: () => {
      const textBox = textboxRef.current;

@@ -14,7 +14,7 @@ import { Modal } from "../ui/Modal";
 import type { CanvasStyle } from "./ComposeCanvas.tsx";

 interface ToolBarProps {
-  fileInputRef: React.RefObject<HTMLInputElement | null>;
+  onAddImage: () => void;
  sealBtnClicked: boolean;
  setSealBtnClicked: (v: boolean) => void;
  onSave: (status: "SEALED" | "DRAFT" | "VAULT", date?: Date) => Promise<void>;
@@ -42,7 +42,7 @@ const FONT_COLORS: Map<string, string> = new Map([
 ]);

 export function ToolBar({
-  fileInputRef,
+  onAddImage,
  sealBtnClicked,
  setSealBtnClicked,
  onSave,
@@ -60,7 +60,7 @@ export function ToolBar({
        <button
          type="button"
          className="btn btn-ghost btn-sm group"
-          onClick={() => fileInputRef.current?.click()}
+          onClick={onAddImage}
        >
          <ImageIcon size={18} weight="bold" />
          <span className="hidden md:inline group-hover:inline transition-all duration-1000">
@@ -476,22 +476,12 @@ export default function Editor() {

          {status === "DRAFT" ? (
            <ToolBar
-              fileInputRef={fileInputRef}
+              onAddImage={() => fileInputRef.current?.click()}
              sealBtnClicked={sealBtnClicked}
              setSealBtnClicked={setSealBtnClicked}
              onSave={handleSave}
              setConfirmModal={setConfirmModal}
-              onFontChange={(style) => {
-                setCanvasFontStyle({
-                  fontFamily: style.fontFamily,
-                  fontColor: style.fontColor,
-                });
-                if (canvasRef?.current?.setStyle)
-                  canvasRef.current.setStyle({
-                    fontFamily: style.fontFamily,
-                    fontColor: style.fontColor,
-                  });
-              }}
+              onFontChange={setCanvasFontStyle}
              latestFontStyle={canvasFontStyle}
            />
          ) : (
@@ -506,7 +496,11 @@ export default function Editor() {
            className="hidden"
          />

-          <ComposeCanvas ref={canvasRef} readOnly={status !== "DRAFT"} />
+          <ComposeCanvas
+            ref={canvasRef}
+            readOnly={status !== "DRAFT"}
+            style={canvasFontStyle}
+          />
        </div>
      </section>
      <LogModal