@hed-hog/lms 0.0.304 → 0.0.306

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

@@ -0,0 +1,769 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Slider } from '@/components/ui/slider';
+import { Switch } from '@/components/ui/switch';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  ChevronDown,
+  ChevronUp,
+  Copy,
+  Eye,
+  EyeOff,
+  GripVertical,
+  Lock,
+  MousePointer2,
+  Trash2,
+  Unlock,
+} from 'lucide-react';
+import { useCallback, useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { getCanvasAPI } from '../../_lib/editor/canvasInstance';
+import { fromPctH, fromPctW } from '../../_lib/editor/pctHelpers';
+import type { TemplateObject } from '../../_lib/editor/types';
+import { FONT_FAMILIES, getObjectLabel } from '../../_lib/editor/types';
+import { useTemplateStore } from '../../_lib/store/useTemplateStore';
+
+export default function RightPanel() {
+  return (
+    <aside className="flex w-75 shrink-0 flex-col border-l border-border bg-background">
+      <Tabs
+        defaultValue="props"
+        className="flex flex-1 flex-col overflow-hidden"
+      >
+        <TabsList className="mx-3 mt-3 w-auto">
+          <TabsTrigger value="props" className="flex-1">
+            Propriedades
+          </TabsTrigger>
+          <TabsTrigger value="layers" className="flex-1">
+            Camadas
+          </TabsTrigger>
+          <TabsTrigger value="data" className="flex-1">
+            Dados
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="props" className="flex-1 overflow-hidden">
+          <ScrollArea className="h-full">
+            <PropertiesInspector />
+          </ScrollArea>
+        </TabsContent>
+
+        <TabsContent value="layers" className="flex-1 overflow-hidden">
+          <ScrollArea className="h-full">
+            <LayersList />
+          </ScrollArea>
+        </TabsContent>
+
+        <TabsContent value="data" className="flex-1 overflow-hidden">
+          <ScrollArea className="h-full">
+            <DataView />
+          </ScrollArea>
+        </TabsContent>
+      </Tabs>
+    </aside>
+  );
+}
+
+/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+ *  PROPERTIES INSPECTOR
+ * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+
+function PropertiesInspector() {
+  const selectedId = useTemplateStore((s) => s.selectedObjectId);
+  const objects = useTemplateStore((s) => s.template.objects);
+  const obj = objects.find((o) => o.id === selectedId);
+
+  const setProp = useCallback(
+    (fabricProps: Record<string, unknown>) => {
+      if (!selectedId) return;
+      getCanvasAPI()?.updateObjectProp(selectedId, fabricProps);
+    },
+    [selectedId]
+  );
+
+  if (!obj) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-2 p-8 text-center text-muted-foreground">
+        <MousePointer2 className="size-8" />
+        <p className="text-sm">
+          Selecione um objeto no canvas para editar suas propriedades.
+        </p>
+      </div>
+    );
+  }
+
+  const isText = obj.type === 'field' || obj.type === 'staticText';
+  const isShape = obj.type === 'shape';
+  const isImage = obj.type === 'image';
+
+  return (
+    <div className="flex flex-col gap-4 p-3">
+      <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+        {getObjectLabel(obj)}
+      </p>
+
+      {isText && <TextProperties obj={obj} setProp={setProp} />}
+      {isText && <TextStrokeProperties obj={obj} setProp={setProp} />}
+      {isText && <TextShadowProperties obj={obj} setProp={setProp} />}
+      {isShape && <ShapeProperties obj={obj} setProp={setProp} />}
+      {isImage && <ImageProperties obj={obj} setProp={setProp} />}
+      <CommonProperties obj={obj} setProp={setProp} />
+    </div>
+  );
+}
+
+/* ── text core ── */
+function TextProperties({
+  obj,
+  setProp,
+}: {
+  obj: TemplateObject;
+  setProp: (p: Record<string, unknown>) => void;
+}) {
+  const ts = obj.textStyle;
+
+  return (
+    <>
+      <div className="flex flex-col gap-1.5">
+        <Label className="text-xs">Fonte</Label>
+        <Select
+          value={ts?.fontFamily ?? 'Inter'}
+          onValueChange={(v) => setProp({ fontFamily: v })}
+        >
+          <SelectTrigger className="w-full">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {FONT_FAMILIES.map((f) => (
+              <SelectItem key={f} value={f}>
+                {f}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <Label className="text-xs">
+          Tamanho ({Math.round(fromPctH(ts?.fontSizePct ?? 2.12))}px)
+        </Label>
+        <Slider
+          min={8}
+          max={120}
+          step={1}
+          value={[Math.round(fromPctH(ts?.fontSizePct ?? 2.12))]}
+          onValueChange={([v]) => setProp({ fontSize: v })}
+        />
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <Label className="text-xs">Peso</Label>
+        <Select
+          value={String(ts?.fontWeight ?? 400)}
+          onValueChange={(v) => setProp({ fontWeight: v })}
+        >
+          <SelectTrigger className="w-full">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="400">Normal (400)</SelectItem>
+            <SelectItem value="600">Semi-Bold (600)</SelectItem>
+            <SelectItem value="700">Bold (700)</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="flex items-center justify-between">
+        <Label className="text-xs">Italico</Label>
+        <Switch
+          checked={ts?.italic ?? false}
+          onCheckedChange={(v) =>
+            setProp({ fontStyle: v ? 'italic' : 'normal' })
+          }
+        />
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <Label className="text-xs">Cor do Texto</Label>
+        <div className="flex items-center gap-2">
+          <input
+            type="color"
+            value={ts?.fill ?? '#333333'}
+            onChange={(e) => setProp({ fill: e.target.value })}
+            className="h-8 w-10 cursor-pointer rounded border border-border bg-transparent"
+          />
+          <span className="text-xs text-muted-foreground">
+            {ts?.fill ?? '#333333'}
+          </span>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <Label className="text-xs">Alinhamento</Label>
+        <Select
+          value={ts?.align ?? 'left'}
+          onValueChange={(v) => setProp({ textAlign: v })}
+        >
+          <SelectTrigger className="w-full">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="left">Esquerda</SelectItem>
+            <SelectItem value="center">Centro</SelectItem>
+            <SelectItem value="right">Direita</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </>
+  );
+}
+
+/* ── text stroke ── */
+function TextStrokeProperties({
+  obj,
+  setProp,
+}: {
+  obj: TemplateObject;
+  setProp: (p: Record<string, unknown>) => void;
+}) {
+  const stroke = obj.effects?.stroke;
+  const hasStroke = !!stroke && fromPctW(stroke.widthPct) > 0;
+
+  return (
+    <div className="flex flex-col gap-2 rounded-md border border-border p-2.5">
+      <div className="flex items-center justify-between">
+        <Label className="text-xs font-semibold">Contorno do Texto</Label>
+        <Switch
+          checked={hasStroke}
+          onCheckedChange={(on) => {
+            if (on) {
+              setProp({ stroke: '#000000', strokeWidth: 1 });
+            } else {
+              setProp({ stroke: '', strokeWidth: 0 });
+            }
+          }}
+        />
+      </div>
+      {hasStroke && (
+        <>
+          <div className="flex items-center gap-2">
+            <Label className="w-12 text-xs">Cor</Label>
+            <input
+              type="color"
+              value={stroke?.color ?? '#000000'}
+              onChange={(e) => setProp({ stroke: e.target.value })}
+              className="h-7 w-9 cursor-pointer rounded border border-border bg-transparent"
+            />
+            <span className="text-xs text-muted-foreground">
+              {stroke?.color ?? '#000000'}
+            </span>
+          </div>
+          <div className="flex flex-col gap-1">
+            <Label className="text-xs">
+              Espessura ({Math.round(fromPctW(stroke?.widthPct ?? 0))}px)
+            </Label>
+            <Slider
+              min={1}
+              max={10}
+              step={0.5}
+              value={[fromPctW(stroke?.widthPct ?? 0)]}
+              onValueChange={([v]) => setProp({ strokeWidth: v })}
+            />
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+/* ── text shadow ── */
+function TextShadowProperties({
+  obj,
+  setProp,
+}: {
+  obj: TemplateObject;
+  setProp: (p: Record<string, unknown>) => void;
+}) {
+  const shadow = obj.effects?.shadow;
+  const hasShadow = !!shadow;
+
+  /* We need to build a fabric.Shadow object for the updateObjectProp call */
+  function setShadowProp(partial: {
+    offsetX?: number;
+    offsetY?: number;
+    blur?: number;
+    color?: string;
+  }) {
+    const cur = {
+      offsetX: shadow ? fromPctW(shadow.xPct) : 2,
+      offsetY: shadow ? fromPctH(shadow.yPct) : 2,
+      blur: shadow ? fromPctW(shadow.blurPct) : 4,
+      color: shadow?.color ?? 'rgba(0,0,0,0.3)',
+    };
+    const merged = { ...cur, ...partial };
+    /* pass the raw shadow config; updateObjectProp will set it directly */
+    setProp({
+      shadow: `${merged.color} ${merged.offsetX}px ${merged.offsetY}px ${merged.blur}px`,
+    });
+  }
+
+  return (
+    <div className="flex flex-col gap-2 rounded-md border border-border p-2.5">
+      <div className="flex items-center justify-between">
+        <Label className="text-xs font-semibold">Sombra</Label>
+        <Switch
+          checked={hasShadow}
+          onCheckedChange={(on) => {
+            if (on) {
+              setProp({
+                shadow: 'rgba(0,0,0,0.3) 2px 2px 4px',
+              });
+            } else {
+              setProp({ shadow: null });
+            }
+          }}
+        />
+      </div>
+      {hasShadow && (
+        <>
+          <div className="flex items-center gap-2">
+            <Label className="w-12 text-xs">Cor</Label>
+            <input
+              type="color"
+              value={shadow?.color?.startsWith('#') ? shadow.color : '#000000'}
+              onChange={(e) => setShadowProp({ color: e.target.value })}
+              className="h-7 w-9 cursor-pointer rounded border border-border bg-transparent"
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <Label className="text-xs">
+              Offset X ({Math.round(fromPctW(shadow?.xPct ?? 0))}px)
+            </Label>
+            <Slider
+              min={-20}
+              max={20}
+              step={1}
+              value={[Math.round(fromPctW(shadow?.xPct ?? 0))]}
+              onValueChange={([v]) => setShadowProp({ offsetX: v })}
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <Label className="text-xs">
+              Offset Y ({Math.round(fromPctH(shadow?.yPct ?? 0))}px)
+            </Label>
+            <Slider
+              min={-20}
+              max={20}
+              step={1}
+              value={[Math.round(fromPctH(shadow?.yPct ?? 0))]}
+              onValueChange={([v]) => setShadowProp({ offsetY: v })}
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <Label className="text-xs">
+              Blur ({Math.round(fromPctW(shadow?.blurPct ?? 0))}px)
+            </Label>
+            <Slider
+              min={0}
+              max={30}
+              step={1}
+              value={[Math.round(fromPctW(shadow?.blurPct ?? 0))]}
+              onValueChange={([v]) => setShadowProp({ blur: v })}
+            />
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+/* ── shape ── */
+function ShapeProperties({
+  obj,
+  setProp,
+}: {
+  obj: TemplateObject;
+  setProp: (p: Record<string, unknown>) => void;
+}) {
+  const stroke = obj.effects?.stroke;
+
+  return (
+    <>
+      {obj.shape !== 'line' && (
+        <div className="flex flex-col gap-1.5">
+          <Label className="text-xs">Preenchimento</Label>
+          <div className="flex items-center gap-2">
+            <input
+              type="color"
+              value={obj.fill ?? '#e2e8f0'}
+              onChange={(e) => setProp({ fill: e.target.value })}
+              className="h-8 w-10 cursor-pointer rounded border border-border bg-transparent"
+            />
+            <span className="text-xs text-muted-foreground">
+              {obj.fill ?? '#e2e8f0'}
+            </span>
+          </div>
+        </div>
+      )}
+
+      <div className="flex flex-col gap-1.5">
+        <Label className="text-xs">Cor da Borda</Label>
+        <div className="flex items-center gap-2">
+          <input
+            type="color"
+            value={stroke?.color ?? '#94a3b8'}
+            onChange={(e) => setProp({ stroke: e.target.value })}
+            className="h-8 w-10 cursor-pointer rounded border border-border bg-transparent"
+          />
+          <span className="text-xs text-muted-foreground">
+            {stroke?.color ?? '#94a3b8'}
+          </span>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <Label className="text-xs">
+          Espessura Borda ({Math.round(fromPctW(stroke?.widthPct ?? 0.0625))}px)
+        </Label>
+        <Slider
+          min={0}
+          max={20}
+          step={1}
+          value={[Math.round(fromPctW(stroke?.widthPct ?? 0.0625))]}
+          onValueChange={([v]) => setProp({ strokeWidth: v })}
+        />
+      </div>
+    </>
+  );
+}
+
+/* ── image ── */
+function ImageProperties({
+  obj,
+  setProp,
+}: {
+  obj: TemplateObject;
+  setProp: (p: Record<string, unknown>) => void;
+}) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <Label className="text-xs">Rotacao ({Math.round(obj.rotation)}deg)</Label>
+      <Slider
+        min={0}
+        max={360}
+        step={1}
+        value={[Math.round(obj.rotation)]}
+        onValueChange={([v]) => setProp({ angle: v })}
+      />
+    </div>
+  );
+}
+
+/* ── common: opacity + rotation ── */
+function CommonProperties({
+  obj,
+  setProp,
+}: {
+  obj: TemplateObject;
+  setProp: (p: Record<string, unknown>) => void;
+}) {
+  return (
+    <>
+      <div className="flex flex-col gap-1.5">
+        <Label className="text-xs">
+          Opacidade ({Math.round(obj.opacity * 100)}%)
+        </Label>
+        <Slider
+          min={0}
+          max={100}
+          step={1}
+          value={[Math.round(obj.opacity * 100)]}
+          onValueChange={([v]) =>
+            setProp({ opacity: (v ?? Math.round(obj.opacity * 100)) / 100 })
+          }
+        />
+      </div>
+
+      {obj.type !== 'image' && (
+        <div className="flex flex-col gap-1.5">
+          <Label className="text-xs">
+            Rotacao ({Math.round(obj.rotation)}deg)
+          </Label>
+          <Slider
+            min={0}
+            max={360}
+            step={1}
+            value={[Math.round(obj.rotation)]}
+            onValueChange={([v]) => setProp({ angle: v })}
+          />
+        </div>
+      )}
+    </>
+  );
+}
+
+/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+ *  LAYERS LIST
+ * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+
+function LayersList() {
+  const objects = useTemplateStore((s) => s.template.objects);
+  const selectedId = useTemplateStore((s) => s.selectedObjectId);
+  const reorderFromLayers = useTemplateStore((s) => s.reorderFromLayers);
+
+  const sorted = [...objects].sort((a, b) => b.zIndex - a.zIndex);
+
+  const [dragIdx, setDragIdx] = useState<number | null>(null);
+  const [overIdx, setOverIdx] = useState<number | null>(null);
+  const dragIdRef = useRef<string | null>(null);
+
+  function handleDragStart(idx: number, id: string) {
+    setDragIdx(idx);
+    dragIdRef.current = id;
+  }
+
+  function handleDragOver(e: React.DragEvent, idx: number) {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    setOverIdx(idx);
+  }
+
+  function handleDrop(targetIdx: number) {
+    if (dragIdx === null || dragIdx === targetIdx) {
+      setDragIdx(null);
+      setOverIdx(null);
+      return;
+    }
+
+    const ids = sorted.map((o) => o.id);
+    const [moved] = ids.splice(dragIdx, 1);
+    if (!moved) {
+      setDragIdx(null);
+      setOverIdx(null);
+      return;
+    }
+    ids.splice(targetIdx, 0, moved);
+
+    reorderFromLayers(ids);
+
+    const idsBottomTop = [...ids].reverse();
+    getCanvasAPI()?.reorderByIds(idsBottomTop);
+
+    setDragIdx(null);
+    setOverIdx(null);
+  }
+
+  function handleDragEnd() {
+    setDragIdx(null);
+    setOverIdx(null);
+  }
+
+  if (sorted.length === 0) {
+    return (
+      <div className="p-6 text-center text-sm text-muted-foreground">
+        Nenhum objeto adicionado.
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-0.5 p-2">
+      {sorted.map((obj, idx) => (
+        <LayerItem
+          key={obj.id}
+          obj={obj}
+          idx={idx}
+          isSelected={obj.id === selectedId}
+          isDragging={dragIdx === idx}
+          isDropTarget={overIdx === idx && dragIdx !== idx}
+          onDragStart={() => handleDragStart(idx, obj.id)}
+          onDragOver={(e) => handleDragOver(e, idx)}
+          onDrop={() => handleDrop(idx)}
+          onDragEnd={handleDragEnd}
+        />
+      ))}
+    </div>
+  );
+}
+
+function LayerItem({
+  obj,
+  isSelected,
+  isDragging,
+  isDropTarget,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd,
+}: {
+  obj: TemplateObject;
+  idx: number;
+  isSelected: boolean;
+  isDragging: boolean;
+  isDropTarget: boolean;
+  onDragStart: () => void;
+  onDragOver: (e: React.DragEvent) => void;
+  onDrop: () => void;
+  onDragEnd: () => void;
+}) {
+  const handleSelect = useCallback(() => {
+    getCanvasAPI()?.selectObject(obj.id);
+  }, [obj.id]);
+
+  const handleDelete = useCallback(() => {
+    getCanvasAPI()?.removeObject(obj.id);
+  }, [obj.id]);
+
+  const handleToggleLock = useCallback(() => {
+    getCanvasAPI()?.lockObject(obj.id, !obj.locked);
+  }, [obj.id, obj.locked]);
+
+  const handleToggleVisible = useCallback(() => {
+    getCanvasAPI()?.setObjectVisible(obj.id, !obj.visible);
+  }, [obj.id, obj.visible]);
+
+  const handleMoveUp = useCallback(() => {
+    getCanvasAPI()?.reorderObject(obj.id, 'up');
+  }, [obj.id]);
+
+  const handleMoveDown = useCallback(() => {
+    getCanvasAPI()?.reorderObject(obj.id, 'down');
+  }, [obj.id]);
+
+  return (
+    <div
+      draggable
+      onDragStart={(e) => {
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData('text/plain', obj.id);
+        onDragStart();
+      }}
+      onDragOver={onDragOver}
+      onDrop={(e) => {
+        e.preventDefault();
+        onDrop();
+      }}
+      onDragEnd={onDragEnd}
+      className={`flex items-center gap-1 rounded-md px-1.5 py-1.5 text-xs transition-all
+        ${isSelected ? 'bg-primary/10 text-foreground' : 'text-muted-foreground hover:bg-accent'}
+        ${isDragging ? 'opacity-40' : ''}
+        ${isDropTarget ? 'ring-2 ring-primary/50 ring-inset' : ''}
+      `}
+    >
+      <GripVertical className="size-3 shrink-0 cursor-grab text-muted-foreground/50 active:cursor-grabbing" />
+
+      <button
+        type="button"
+        onClick={handleSelect}
+        className="flex flex-1 items-center gap-1.5 truncate text-left"
+      >
+        <span className="truncate">{getObjectLabel(obj)}</span>
+      </button>
+
+      <div className="flex items-center gap-0.5">
+        <button
+          type="button"
+          onClick={handleMoveUp}
+          className="rounded p-0.5 hover:bg-accent"
+          title="Mover para cima"
+        >
+          <ChevronUp className="size-3" />
+        </button>
+        <button
+          type="button"
+          onClick={handleMoveDown}
+          className="rounded p-0.5 hover:bg-accent"
+          title="Mover para baixo"
+        >
+          <ChevronDown className="size-3" />
+        </button>
+
+        <button
+          type="button"
+          onClick={handleToggleVisible}
+          className="rounded p-0.5 hover:bg-accent"
+          title={obj.visible ? 'Ocultar' : 'Mostrar'}
+        >
+          {obj.visible ? (
+            <Eye className="size-3.5" />
+          ) : (
+            <EyeOff className="size-3.5" />
+          )}
+        </button>
+
+        <button
+          type="button"
+          onClick={handleToggleLock}
+          className="rounded p-0.5 hover:bg-accent"
+          title={obj.locked ? 'Destravar' : 'Travar'}
+        >
+          {obj.locked ? (
+            <Lock className="size-3.5" />
+          ) : (
+            <Unlock className="size-3.5" />
+          )}
+        </button>
+
+        <button
+          type="button"
+          onClick={handleDelete}
+          className="rounded p-0.5 text-destructive hover:bg-destructive/10"
+          title="Excluir"
+        >
+          <Trash2 className="size-3.5" />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+ *  DATA / JSON VIEW
+ * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+
+function DataView() {
+  const template = useTemplateStore((s) => s.template);
+  const json = JSON.stringify(template, null, 2);
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(json).then(() => {
+      toast.success('JSON copiado!');
+    });
+  }, [json]);
+
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      <div className="flex items-center justify-between">
+        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+          Template JSON
+        </p>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleCopy}
+          className="h-7 gap-1.5 text-xs"
+        >
+          <Copy className="size-3" />
+          Copiar
+        </Button>
+      </div>
+      <Textarea
+        readOnly
+        value={json}
+        rows={24}
+        className="font-mono text-[11px] leading-relaxed"
+      />
+    </div>
+  );
+}