@hed-hog/lms 0.0.304 → 0.0.306

package/hedhog/frontend/app/certificates/models/CanvasStage.tsx.ejs

@@ -0,0 +1,916 @@
+'use client';
+
+import { useSidebar } from '@/components/ui/sidebar';
+import { useEffect, useRef, useState } from 'react';
+import {
+  getCanvasAPI,
+  registerCanvasAPI,
+  unregisterCanvasAPI,
+  type CanvasAPI,
+} from '../../_lib/editor/canvasInstance';
+import {
+  createFabricFromTemplate,
+  fabricObjToFull,
+  fabricObjToTemplatePartial,
+  templateJSONToFabric,
+} from '../../_lib/editor/templateSerializer';
+import type { TemplateObject } from '../../_lib/editor/types';
+import { CANVAS_H, CANVAS_W } from '../../_lib/editor/types';
+import { useTemplateStore } from '../../_lib/store/useTemplateStore';
+
+/* ── snapping constants ── */
+const SNAP_TOLERANCE = 6; // px in canvas space
+
+/* guide colours */
+const GUIDE_COLOR = '#3b82f6'; // blue-500
+const GRID_COLOR = '#e2e8f0'; // slate-200
+const MARGIN_COLOR = '#f97316'; // orange-500
+const MARGIN_INSET = 60; // px from canvas edge
+const MIN_ZOOM = 0.2;
+const MAX_ZOOM = 3.0;
+const FIT_PADDING = 24;
+
+function applyCanvasZoom(canvas: any, appliedZoom: number) {
+  canvas.setZoom(appliedZoom);
+  canvas.setDimensions({
+    width: CANVAS_W * appliedZoom,
+    height: CANVAS_H * appliedZoom,
+  });
+  canvas.requestRenderAll();
+}
+
+type CanvasStageProps = {
+  isLoading?: boolean;
+};
+
+export default function CanvasStage({ isLoading = false }: CanvasStageProps) {
+  const { state: sidebarState } = useSidebar();
+  const canvasElRef = useRef<HTMLCanvasElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  const fabricRef = useRef<any>(null);
+  const fabricModRef = useRef<any>(null);
+  const initDone = useRef(false);
+  const isPanning = useRef(false);
+  const lastPanPoint = useRef<{ x: number; y: number } | null>(null);
+  const spaceHeld = useRef(false);
+  /** Refs to guide line objects currently on canvas */
+  const guideLines = useRef<any[]>([]);
+  /** Refs to grid/margin objects */
+  const gridObjects = useRef<any[]>([]);
+  const marginRect = useRef<any>(null);
+
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [autoFitZoom, setAutoFitZoom] = useState(0.5);
+
+  const zoom = useTemplateStore((s) => s.zoom);
+  const setEffectiveZoom = useTemplateStore((s) => s.setEffectiveZoom);
+  const snapEnabled = useTemplateStore((s) => s.snapEnabled);
+  const gridEnabled = useTemplateStore((s) => s.gridEnabled);
+  const marginsEnabled = useTemplateStore((s) => s.marginsEnabled);
+
+  /* keep refs current for use inside Fabric callbacks */
+  const snapRef = useRef(snapEnabled);
+  const autoFitZoomRef = useRef(autoFitZoom);
+  snapRef.current = snapEnabled;
+  autoFitZoomRef.current = autoFitZoom;
+
+  function clampZoom(value: number) {
+    return Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, value));
+  }
+
+  /* ── initialise fabric (once) ── */
+  useEffect(() => {
+    if (initDone.current) return;
+    initDone.current = true;
+
+    let canvas: any;
+
+    async function init() {
+      const fabricMod = await import('fabric');
+      fabricModRef.current = fabricMod;
+      const { Canvas } = fabricMod;
+
+      const el = canvasElRef.current;
+      if (!el) return;
+
+      const { zoom: manualZoom, effectiveZoom } = useTemplateStore.getState();
+      const z = Math.min(manualZoom, effectiveZoom);
+
+      canvas = new Canvas(el, {
+        width: CANVAS_W * z,
+        height: CANVAS_H * z,
+        backgroundColor: '#ffffff',
+        selection: true,
+        preserveObjectStacking: true,
+      });
+      canvas.setZoom(z);
+      fabricRef.current = canvas;
+
+      /* load existing template objects */
+      const template = useTemplateStore.getState().template;
+      templateJSONToFabric(canvas, template, fabricMod);
+
+      if (template.background.src) {
+        await applyBg(canvas, fabricMod, template.background.src);
+      }
+
+      /* ── fabric events ── */
+      canvas.on('selection:created', onSelect);
+      canvas.on('selection:updated', onSelect);
+      canvas.on('selection:cleared', () =>
+        useTemplateStore.getState().selectObject(null)
+      );
+      canvas.on('object:modified', (e: any) => {
+        clearGuides(canvas);
+        onModified(e);
+      });
+      canvas.on('object:moving', (e: any) => {
+        if (snapRef.current) applySnapping(canvas, e.target);
+        onModified(e);
+      });
+      canvas.on('object:scaling', onModified);
+      canvas.on('object:rotating', onModified);
+      canvas.on('text:changed', onModified);
+
+      /* ── ctrl+wheel zoom ── */
+      canvas.on('mouse:wheel', (opt: any) => {
+        const e: WheelEvent = opt.e;
+        if (!e.ctrlKey && !e.metaKey) return;
+        e.preventDefault();
+        e.stopPropagation();
+
+        const delta = -e.deltaY;
+        const currentManualZoom = useTemplateStore.getState().zoom;
+        const newManualZoom = clampZoom(currentManualZoom * (1 + delta / 500));
+        const appliedZoom = Math.min(newManualZoom, autoFitZoomRef.current);
+
+        const point =
+          typeof canvas.getScenePoint === 'function'
+            ? canvas.getScenePoint(e)
+            : typeof canvas.getViewportPoint === 'function'
+              ? canvas.getViewportPoint(e)
+              : canvas.getPointer(e, true);
+        canvas.zoomToPoint(point, appliedZoom);
+        canvas.setDimensions({
+          width: CANVAS_W * appliedZoom,
+          height: CANVAS_H * appliedZoom,
+        });
+        canvas.requestRenderAll();
+        useTemplateStore.getState().setZoom(newManualZoom);
+        useTemplateStore.getState().setEffectiveZoom(appliedZoom);
+      });
+
+      /* ── mouse pan (middle-click or space+drag) ── */
+      canvas.on('mouse:down', (opt: any) => {
+        const e: MouseEvent = opt.e;
+        if (e.button === 1 || spaceHeld.current) {
+          isPanning.current = true;
+          lastPanPoint.current = { x: e.clientX, y: e.clientY };
+          canvas.selection = false;
+          canvas.defaultCursor = 'grabbing';
+          e.preventDefault();
+        }
+      });
+
+      canvas.on('mouse:move', (opt: any) => {
+        if (!isPanning.current || !lastPanPoint.current) return;
+        const e: MouseEvent = opt.e;
+        const vpt = canvas.viewportTransform.slice();
+        vpt[4] += e.clientX - lastPanPoint.current.x;
+        vpt[5] += e.clientY - lastPanPoint.current.y;
+        canvas.setViewportTransform(vpt);
+        lastPanPoint.current = { x: e.clientX, y: e.clientY };
+      });
+
+      canvas.on('mouse:up', () => {
+        if (isPanning.current) {
+          isPanning.current = false;
+          lastPanPoint.current = null;
+          canvas.selection = true;
+          canvas.defaultCursor = 'default';
+        }
+        /* clear guides on mouse up */
+        clearGuides(canvas);
+      });
+
+      /* ── register API for other panels ── */
+      registerCanvasAPI(buildAPI(canvas, fabricMod));
+    }
+
+    init();
+
+    return () => {
+      unregisterCanvasAPI();
+      canvas?.dispose();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  /* ── measure available stage size and compute fit zoom ── */
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return;
+    const el: HTMLDivElement = wrapper;
+
+    function measureFitZoom() {
+      const styles = window.getComputedStyle(el);
+      const horizontalPadding =
+        parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight);
+      const verticalPadding =
+        parseFloat(styles.paddingTop) + parseFloat(styles.paddingBottom);
+      const availableWidth = Math.max(
+        1,
+        el.clientWidth - horizontalPadding - FIT_PADDING * 2
+      );
+      const availableHeight = Math.max(
+        1,
+        el.clientHeight - verticalPadding - FIT_PADDING * 2
+      );
+
+      const fitZoom = clampZoom(
+        Math.min(availableWidth / CANVAS_W, availableHeight / CANVAS_H)
+      );
+      setAutoFitZoom((current) =>
+        Math.abs(current - fitZoom) < 0.001 ? current : fitZoom
+      );
+    }
+
+    measureFitZoom();
+
+    const observer = new ResizeObserver(() => {
+      measureFitZoom();
+    });
+    observer.observe(el);
+
+    const transitionTimer = window.setTimeout(measureFitZoom, 220);
+
+    return () => {
+      window.clearTimeout(transitionTimer);
+      observer.disconnect();
+    };
+  }, [sidebarState]);
+
+  /* ── sync effective zoom to fit + manual zoom ── */
+  useEffect(() => {
+    const c = fabricRef.current;
+    const appliedZoom = Math.min(zoom, autoFitZoom);
+
+    setEffectiveZoom(appliedZoom);
+
+    if (!c) return;
+    const current = c.getZoom();
+    if (Math.abs(current - appliedZoom) < 0.001) return;
+    applyCanvasZoom(c, appliedZoom);
+  }, [autoFitZoom, setEffectiveZoom, zoom]);
+
+  /* ── grid overlay ── */
+  useEffect(() => {
+    const c = fabricRef.current;
+    const fm = fabricModRef.current;
+    if (!c || !fm) return;
+
+    // remove existing grid objects
+    gridObjects.current.forEach((o) => c.remove(o));
+    gridObjects.current = [];
+
+    if (gridEnabled) {
+      const step = 50; // px grid step
+      const lines: any[] = [];
+
+      // vertical lines
+      for (let x = step; x < CANVAS_W; x += step) {
+        const line = new fm.Line([x, 0, x, CANVAS_H], {
+          stroke: GRID_COLOR,
+          strokeWidth: x % 200 === 0 ? 0.8 : 0.4,
+          selectable: false,
+          evented: false,
+          excludeFromExport: true,
+        });
+        line._isGuide = true;
+        lines.push(line);
+      }
+      // horizontal lines
+      for (let y = step; y < CANVAS_H; y += step) {
+        const line = new fm.Line([0, y, CANVAS_W, y], {
+          stroke: GRID_COLOR,
+          strokeWidth: y % 200 === 0 ? 0.8 : 0.4,
+          selectable: false,
+          evented: false,
+          excludeFromExport: true,
+        });
+        line._isGuide = true;
+        lines.push(line);
+      }
+
+      lines.forEach((l) => c.add(l));
+      // send grid to back
+      lines.forEach((l) => c.sendObjectToBack(l));
+      gridObjects.current = lines;
+      c.requestRenderAll();
+    }
+  }, [gridEnabled]);
+
+  /* ── safe margins overlay ── */
+  useEffect(() => {
+    const c = fabricRef.current;
+    const fm = fabricModRef.current;
+    if (!c || !fm) return;
+
+    // remove existing margin rect
+    if (marginRect.current) {
+      c.remove(marginRect.current);
+      marginRect.current = null;
+    }
+
+    if (marginsEnabled) {
+      const rect = new fm.Rect({
+        left: MARGIN_INSET,
+        top: MARGIN_INSET,
+        width: CANVAS_W - MARGIN_INSET * 2,
+        height: CANVAS_H - MARGIN_INSET * 2,
+        fill: 'transparent',
+        stroke: MARGIN_COLOR,
+        strokeWidth: 1,
+        strokeDashArray: [8, 4],
+        selectable: false,
+        evented: false,
+        excludeFromExport: true,
+      });
+      rect._isGuide = true;
+      c.add(rect);
+      // bring to front (above grid, but guides are transparent)
+      c.bringObjectToFront(rect);
+      marginRect.current = rect;
+      c.requestRenderAll();
+    }
+  }, [marginsEnabled]);
+
+  /* ── keyboard events ── */
+  useEffect(() => {
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.code === 'Space' && !e.repeat) {
+        const tag = (e.target as HTMLElement)?.tagName;
+        if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
+        spaceHeld.current = true;
+        if (fabricRef.current) fabricRef.current.defaultCursor = 'grab';
+        e.preventDefault();
+      }
+
+      if (e.code === 'Delete' || e.code === 'Backspace') {
+        const tag = (e.target as HTMLElement)?.tagName;
+        if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
+        const c = fabricRef.current;
+        if (c?.getActiveObject()?.isEditing) return;
+        const selId = useTemplateStore.getState().selectedObjectId;
+        if (selId) {
+          getCanvasAPI()?.removeObject(selId);
+          e.preventDefault();
+        }
+      }
+
+      if ((e.ctrlKey || e.metaKey) && e.code === 'KeyD') {
+        e.preventDefault();
+        const selId = useTemplateStore.getState().selectedObjectId;
+        if (selId) {
+          getCanvasAPI()?.duplicateObject(selId);
+        }
+      }
+    }
+
+    function onKeyUp(e: KeyboardEvent) {
+      if (e.code === 'Space') {
+        spaceHeld.current = false;
+        if (!isPanning.current) {
+          if (fabricRef.current) fabricRef.current.defaultCursor = 'default';
+        }
+      }
+    }
+
+    window.addEventListener('keydown', onKeyDown);
+    window.addEventListener('keyup', onKeyUp);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+      window.removeEventListener('keyup', onKeyUp);
+    };
+  }, []);
+
+  /* ── snapping helper ── */
+  function applySnapping(canvas: any, target: any) {
+    if (!target || target._isGuide) return;
+
+    const objLeft = target.left ?? 0;
+    const objTop = target.top ?? 0;
+    const w = (target.width ?? 0) * (target.scaleX ?? 1);
+    const h = (target.height ?? 0) * (target.scaleY ?? 1);
+    const objCX = objLeft + w / 2;
+    const objCY = objTop + h / 2;
+    const objRight = objLeft + w;
+    const objBottom = objTop + h;
+
+    // tolerance scales with zoom
+    const tol = SNAP_TOLERANCE / (canvas.getZoom() || 1);
+
+    // collect snap lines
+    const vSnaps: { pos: number; guideX: number }[] = [];
+    const hSnaps: { pos: number; guideY: number }[] = [];
+
+    // canvas center & edges
+    const canvasCX = CANVAS_W / 2;
+    const canvasCY = CANVAS_H / 2;
+
+    // Check canvas center X
+    if (Math.abs(objCX - canvasCX) < tol) {
+      vSnaps.push({ pos: canvasCX - w / 2, guideX: canvasCX });
+    }
+    // canvas left edge
+    if (Math.abs(objLeft) < tol) {
+      vSnaps.push({ pos: 0, guideX: 0 });
+    }
+    // canvas right edge
+    if (Math.abs(objRight - CANVAS_W) < tol) {
+      vSnaps.push({ pos: CANVAS_W - w, guideX: CANVAS_W });
+    }
+    // canvas center Y
+    if (Math.abs(objCY - canvasCY) < tol) {
+      hSnaps.push({ pos: canvasCY - h / 2, guideY: canvasCY });
+    }
+    // canvas top edge
+    if (Math.abs(objTop) < tol) {
+      hSnaps.push({ pos: 0, guideY: 0 });
+    }
+    // canvas bottom edge
+    if (Math.abs(objBottom - CANVAS_H) < tol) {
+      hSnaps.push({ pos: CANVAS_H - h, guideY: CANVAS_H });
+    }
+
+    // margins
+    if (useTemplateStore.getState().marginsEnabled) {
+      if (Math.abs(objLeft - MARGIN_INSET) < tol) {
+        vSnaps.push({ pos: MARGIN_INSET, guideX: MARGIN_INSET });
+      }
+      if (Math.abs(objRight - (CANVAS_W - MARGIN_INSET)) < tol) {
+        vSnaps.push({
+          pos: CANVAS_W - MARGIN_INSET - w,
+          guideX: CANVAS_W - MARGIN_INSET,
+        });
+      }
+      if (Math.abs(objTop - MARGIN_INSET) < tol) {
+        hSnaps.push({ pos: MARGIN_INSET, guideY: MARGIN_INSET });
+      }
+      if (Math.abs(objBottom - (CANVAS_H - MARGIN_INSET)) < tol) {
+        hSnaps.push({
+          pos: CANVAS_H - MARGIN_INSET - h,
+          guideY: CANVAS_H - MARGIN_INSET,
+        });
+      }
+    }
+
+    // snap to other objects (edges and center)
+    const others = canvas
+      .getObjects()
+      .filter((o: any) => o !== target && !o._isGuide);
+    for (const other of others) {
+      const oL = other.left ?? 0;
+      const oT = other.top ?? 0;
+      const oW = (other.width ?? 0) * (other.scaleX ?? 1);
+      const oH = (other.height ?? 0) * (other.scaleY ?? 1);
+      const oCX = oL + oW / 2;
+      const oCY = oT + oH / 2;
+      const oR = oL + oW;
+      const oB = oT + oH;
+
+      // vertical snaps (x-axis alignment)
+      if (Math.abs(objLeft - oL) < tol) vSnaps.push({ pos: oL, guideX: oL });
+      if (Math.abs(objRight - oR) < tol)
+        vSnaps.push({ pos: oR - w, guideX: oR });
+      if (Math.abs(objCX - oCX) < tol)
+        vSnaps.push({ pos: oCX - w / 2, guideX: oCX });
+      if (Math.abs(objLeft - oR) < tol) vSnaps.push({ pos: oR, guideX: oR });
+      if (Math.abs(objRight - oL) < tol)
+        vSnaps.push({ pos: oL - w, guideX: oL });
+
+      // horizontal snaps (y-axis alignment)
+      if (Math.abs(objTop - oT) < tol) hSnaps.push({ pos: oT, guideY: oT });
+      if (Math.abs(objBottom - oB) < tol)
+        hSnaps.push({ pos: oB - h, guideY: oB });
+      if (Math.abs(objCY - oCY) < tol)
+        hSnaps.push({ pos: oCY - h / 2, guideY: oCY });
+      if (Math.abs(objTop - oB) < tol) hSnaps.push({ pos: oB, guideY: oB });
+      if (Math.abs(objBottom - oT) < tol)
+        hSnaps.push({ pos: oT - h, guideY: oT });
+    }
+
+    // clear old guides
+    clearGuides(canvas);
+
+    // apply closest snap
+    if (vSnaps.length > 0) {
+      const best = vSnaps.reduce((a, b) =>
+        Math.abs(a.pos - objLeft) < Math.abs(b.pos - objLeft) ? a : b
+      );
+      target.set('left', best.pos);
+      addGuideLine(canvas, 'vertical', best.guideX);
+    }
+
+    if (hSnaps.length > 0) {
+      const best = hSnaps.reduce((a, b) =>
+        Math.abs(a.pos - objTop) < Math.abs(b.pos - objTop) ? a : b
+      );
+      target.set('top', best.pos);
+      addGuideLine(canvas, 'horizontal', best.guideY);
+    }
+  }
+
+  function addGuideLine(
+    canvas: any,
+    dir: 'vertical' | 'horizontal',
+    pos: number
+  ) {
+    const fm = fabricModRef.current;
+    if (!fm) return;
+
+    const coords =
+      dir === 'vertical' ? [pos, 0, pos, CANVAS_H] : [0, pos, CANVAS_W, pos];
+
+    const line = new fm.Line(coords, {
+      stroke: GUIDE_COLOR,
+      strokeWidth: 1,
+      strokeDashArray: [4, 3],
+      selectable: false,
+      evented: false,
+      excludeFromExport: true,
+    });
+    line._isGuide = true;
+    canvas.add(line);
+    canvas.bringObjectToFront(line);
+    guideLines.current.push(line);
+  }
+
+  function clearGuides(canvas: any) {
+    guideLines.current.forEach((l) => canvas.remove(l));
+    guideLines.current = [];
+  }
+
+  /* ── HTML5 drop target ── */
+  function handleDragOver(e: React.DragEvent) {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'copy';
+    if (!isDragOver) setIsDragOver(true);
+  }
+
+  function handleDragLeave(e: React.DragEvent) {
+    if (!wrapperRef.current?.contains(e.relatedTarget as Node)) {
+      setIsDragOver(false);
+    }
+  }
+
+  function handleDrop(e: React.DragEvent) {
+    e.preventDefault();
+    setIsDragOver(false);
+
+    const raw = e.dataTransfer.getData('application/x-editor-element');
+    if (!raw) return;
+
+    try {
+      const data = JSON.parse(raw) as {
+        type: 'field' | 'staticText' | 'image' | 'shape';
+        key?: string;
+        shape?: 'rect' | 'line';
+      };
+
+      const api = getCanvasAPI();
+      if (!api) return;
+
+      const pt = api.clientToCanvas(e.clientX, e.clientY);
+      if (pt) {
+        api.addObjectAt(data.type, pt.x, pt.y, {
+          key: data.key,
+          shape: data.shape,
+        });
+      } else {
+        api.addObject(data.type, { key: data.key, shape: data.shape });
+      }
+    } catch {
+      /* ignore bad data */
+    }
+  }
+
+  return (
+    <div
+      ref={wrapperRef}
+      className={`relative flex flex-1 items-center justify-center overflow-auto bg-muted/60 p-6 transition-colors ${
+        isDragOver ? 'ring-2 ring-inset ring-primary/40 bg-primary/5' : ''
+      }`}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      {isDragOver && (
+        <div className="pointer-events-none absolute inset-0 z-50 flex items-center justify-center">
+          <div className="rounded-lg bg-primary/10 px-4 py-2 text-sm font-medium text-primary backdrop-blur-sm">
+            Solte para adicionar ao canvas
+          </div>
+        </div>
+      )}
+      {isLoading && (
+        <div className="pointer-events-none absolute inset-0 z-40 flex items-center justify-center bg-background/70 backdrop-blur-sm">
+          <div className="rounded-md border bg-card px-4 py-2 text-sm text-muted-foreground">
+            Carregando template...
+          </div>
+        </div>
+      )}
+      <div className="shadow-lg" style={{ lineHeight: 0 }}>
+        <canvas ref={canvasElRef} />
+      </div>
+    </div>
+  );
+}
+
+/* ─────────────────── helpers ─────────────────── */
+
+function onSelect(e: any) {
+  const obj = e.selected?.[0];
+  if (obj?._tplId) {
+    useTemplateStore.getState().selectObject(obj._tplId);
+  }
+}
+
+function onModified(e: any) {
+  const obj = e.target ?? e;
+  if (!obj?._tplId) return;
+  const partial = fabricObjToTemplatePartial(obj);
+
+  const extra: Partial<TemplateObject> = {};
+  if (obj._tplType === 'field' || obj._tplType === 'staticText') {
+    extra.text = obj.text;
+  }
+
+  useTemplateStore
+    .getState()
+    .updateObject(obj._tplId, { ...partial, ...extra });
+}
+
+async function applyBg(canvas: any, fabricMod: any, src: string) {
+  try {
+    const img = await fabricMod.FabricImage.fromURL(src, {
+      crossOrigin: 'anonymous',
+    });
+    const scaleX = CANVAS_W / (img.width || 1);
+    const scaleY = CANVAS_H / (img.height || 1);
+    img.set({ scaleX, scaleY, selectable: false, evented: false });
+    canvas.backgroundImage = img;
+    canvas.requestRenderAll();
+  } catch {
+    /* ignore bad image */
+  }
+}
+
+/* ────────────── canvas API (for panels) ────────────── */
+
+function buildAPI(canvas: any, fabricMod: any): CanvasAPI {
+  function findObj(id: string) {
+    return canvas.getObjects().find((o: any) => o._tplId === id);
+  }
+
+  function createAndAdd(
+    type: 'field' | 'staticText' | 'image' | 'shape',
+    cx: number,
+    cy: number,
+    opts?: { key?: string; shape?: 'rect' | 'line' }
+  ) {
+    const id = crypto.randomUUID();
+    const key = opts?.key;
+    const shape = opts?.shape;
+    let fObj: any = null;
+
+    if (type === 'field') {
+      fObj = new fabricMod.Textbox(`{{${key}}}`, {
+        left: cx - 120,
+        top: cy - 18,
+        width: 240,
+        fontSize: 28,
+        fontFamily: 'Inter',
+        fontWeight: '400',
+        fill: '#1e293b',
+      });
+      fObj._tplKey = key;
+    } else if (type === 'staticText') {
+      fObj = new fabricMod.Textbox('Texto', {
+        left: cx - 80,
+        top: cy - 18,
+        width: 200,
+        fontSize: 28,
+        fontFamily: 'Inter',
+        fontWeight: '400',
+        fill: '#1e293b',
+      });
+    } else if (type === 'shape' && shape === 'rect') {
+      fObj = new fabricMod.Rect({
+        left: cx - 100,
+        top: cy - 50,
+        width: 200,
+        height: 100,
+        fill: '#e2e8f0',
+        stroke: '#94a3b8',
+        strokeWidth: 1,
+      });
+    } else if (type === 'shape' && shape === 'line') {
+      fObj = new fabricMod.Line([0, 0, 300, 0], {
+        left: cx - 150,
+        top: cy,
+        stroke: '#334155',
+        strokeWidth: 2,
+      });
+    } else if (type === 'image') {
+      fObj = new fabricMod.Rect({
+        left: cx - 75,
+        top: cy - 75,
+        width: 150,
+        height: 150,
+        fill: '#e2e8f0',
+        stroke: '#cbd5e1',
+        strokeWidth: 1,
+        rx: 4,
+        ry: 4,
+      });
+      fObj._tplImageSrc = '';
+    }
+
+    if (!fObj) return;
+
+    fObj._tplId = id;
+    fObj._tplType = type;
+    fObj._tplKey = key;
+    fObj._tplShape = shape;
+
+    canvas.add(fObj);
+    canvas.setActiveObject(fObj);
+    canvas.requestRenderAll();
+
+    const tObj = fabricObjToFull(fObj);
+    tObj.id = id;
+    tObj.zIndex =
+      canvas.getObjects().filter((o: any) => !o._isGuide).length - 1;
+
+    useTemplateStore.getState().addObject(tObj);
+    useTemplateStore.getState().selectObject(id);
+  }
+
+  return {
+    addObject(type, opts) {
+      createAndAdd(type, CANVAS_W / 2, CANVAS_H / 2, opts);
+    },
+
+    addObjectAt(type, canvasX, canvasY, opts) {
+      createAndAdd(type, canvasX, canvasY, opts);
+    },
+
+    removeObject(id) {
+      const obj = findObj(id);
+      if (obj) {
+        canvas.remove(obj);
+        canvas.discardActiveObject();
+        canvas.requestRenderAll();
+      }
+      useTemplateStore.getState().removeObject(id);
+      useTemplateStore.getState().selectObject(null);
+    },
+
+    duplicateObject(id) {
+      const cloneData = useTemplateStore.getState().duplicateObject(id);
+      if (!cloneData) return;
+      const fObj = createFabricFromTemplate(cloneData, fabricMod);
+      if (fObj) {
+        canvas.add(fObj);
+        canvas.setActiveObject(fObj);
+        canvas.requestRenderAll();
+      }
+    },
+
+    selectObject(id) {
+      const obj = findObj(id);
+      if (obj) {
+        canvas.setActiveObject(obj);
+        canvas.requestRenderAll();
+      }
+      useTemplateStore.getState().selectObject(id);
+    },
+
+    updateObjectProp(id, fabricProps) {
+      const obj = findObj(id);
+      if (!obj) return;
+
+      Object.entries(fabricProps).forEach(([k, v]) => {
+        obj.set(k as any, v);
+      });
+      obj.setCoords?.();
+      canvas.requestRenderAll();
+
+      const full = fabricObjToFull(obj);
+      useTemplateStore.getState().updateObject(id, full);
+    },
+
+    async setBackground(dataUrl) {
+      await applyBg(canvas, fabricMod, dataUrl);
+      useTemplateStore.getState().setBackground(dataUrl);
+    },
+
+    lockObject(id, locked) {
+      const obj = findObj(id);
+      if (!obj) return;
+      obj.set({
+        lockMovementX: locked,
+        lockMovementY: locked,
+        lockRotation: locked,
+        lockScalingX: locked,
+        lockScalingY: locked,
+        hasControls: !locked,
+        selectable: !locked,
+        evented: !locked,
+      });
+      if (locked) {
+        canvas.discardActiveObject();
+      }
+      canvas.requestRenderAll();
+      useTemplateStore.getState().updateObject(id, { locked });
+    },
+
+    setObjectVisible(id, visible) {
+      const obj = findObj(id);
+      if (!obj) return;
+      obj.set({ visible });
+      if (!visible) {
+        canvas.discardActiveObject();
+      }
+      canvas.requestRenderAll();
+      useTemplateStore.getState().updateObject(id, { visible });
+    },
+
+    loadTemplate(template) {
+      canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
+      const { zoom: manualZoom, effectiveZoom } = useTemplateStore.getState();
+      const z = Math.min(manualZoom, effectiveZoom);
+      applyCanvasZoom(canvas, z);
+
+      templateJSONToFabric(canvas, template, fabricMod);
+      if (template.background.src) {
+        applyBg(canvas, fabricMod, template.background.src);
+      }
+      canvas.requestRenderAll();
+    },
+
+    setZoom(z) {
+      useTemplateStore.getState().setZoom(z);
+    },
+
+    reorderObject(id, direction) {
+      const obj = findObj(id);
+      if (!obj) return;
+      if (direction === 'up') {
+        canvas.bringObjectForward(obj);
+      } else if (direction === 'down') {
+        canvas.sendObjectBackwards(obj);
+      }
+      canvas.requestRenderAll();
+
+      const ids = canvas
+        .getObjects()
+        .filter((o: any) => !o._isGuide)
+        .map((o: any) => o._tplId)
+        .filter(Boolean);
+      useTemplateStore.getState().reorderObjects(ids);
+    },
+
+    reorderByIds(idsBottomToTop: string[]) {
+      const objMap = new Map<string, any>();
+      canvas.getObjects().forEach((o: any) => {
+        if (o._tplId && !o._isGuide) objMap.set(o._tplId, o);
+      });
+      objMap.forEach((o) => canvas.remove(o));
+      idsBottomToTop.forEach((id) => {
+        const o = objMap.get(id);
+        if (o) canvas.add(o);
+      });
+      canvas.requestRenderAll();
+    },
+
+    clientToCanvas(clientX: number, clientY: number) {
+      const el = canvas.getElement?.() ?? canvas.lowerCanvasEl;
+      if (!el) return null;
+      const rect = el.getBoundingClientRect();
+      const vpt = canvas.viewportTransform;
+      if (!vpt) return null;
+      const sx = clientX - rect.left;
+      const sy = clientY - rect.top;
+      const invZoom = 1 / vpt[0];
+      const x = (sx - vpt[4]) * invZoom;
+      const y = (sy - vpt[5]) * invZoom;
+      return { x, y };
+    },
+
+    getCanvasElement() {
+      return canvas.getElement?.() ?? canvas.lowerCanvasEl ?? null;
+    },
+  };
+}