@hed-hog/lms 0.0.304 → 0.0.306

package/hedhog/frontend/app/_lib/editor/types.ts.ejs

@@ -0,0 +1,94 @@
+export interface TextStyle {
+  fontFamily: string;
+  fontSizePct: number;
+  fontWeight: number;
+  italic: boolean;
+  fill: string;
+  align: 'left' | 'center' | 'right';
+  lineHeight: number;
+  letterSpacing: number;
+}
+
+export interface TemplateObject {
+  id: string;
+  type: 'field' | 'staticText' | 'image' | 'shape';
+  key?: string;
+  text?: string;
+  shape?: 'rect' | 'line';
+  xPct: number;
+  yPct: number;
+  wPct: number;
+  hPct: number;
+  rotation: number;
+  opacity: number;
+  zIndex: number;
+  visible: boolean;
+  locked: boolean;
+  textStyle?: TextStyle;
+  fill?: string;
+  effects?: {
+    stroke?: { color: string; widthPct: number };
+    shadow?: { xPct: number; yPct: number; blurPct: number; color: string };
+  };
+  image?: { src: string };
+}
+
+export interface Template {
+  version: 1;
+  name: string;
+  canvas: { width: number; height: number };
+  background: { src: string | null; fit: BackgroundFit };
+  objects: TemplateObject[];
+}
+
+export type BackgroundFit = 'contain' | 'cover' | 'stretch';
+
+export const CANVAS_W = 1600;
+export const CANVAS_H = 1131;
+
+export const FIELD_KEYS = [
+  'studentName',
+  'courseName',
+  'startDate',
+  'endDate',
+  'workloadHours',
+  'certificateId',
+] as const;
+
+export type FieldKey = (typeof FIELD_KEYS)[number];
+
+export const FIELD_LABELS: Record<FieldKey, string> = {
+  studentName: 'Nome do Aluno',
+  courseName: 'Nome do Curso',
+  startDate: 'Data Início',
+  endDate: 'Data Fim',
+  workloadHours: 'Carga Horária',
+  certificateId: 'ID Certificado',
+};
+
+export const FONT_FAMILIES = ['Inter', 'Montserrat', 'Roboto'] as const;
+
+export function createDefaultTemplate(): Template {
+  return {
+    version: 1,
+    name: 'Novo Certificado',
+    canvas: { width: CANVAS_W, height: CANVAS_H },
+    background: { src: null, fit: 'contain' },
+    objects: [],
+  };
+}
+
+export function getObjectLabel(obj: TemplateObject): string {
+  switch (obj.type) {
+    case 'field':
+      return `Field: ${obj.key ?? '?'}`;
+    case 'staticText':
+      return `Text: ${(obj.text ?? 'Texto').slice(0, 20)}`;
+    case 'shape':
+      return obj.shape === 'line' ? 'Line' : 'Rect';
+    case 'image':
+      return 'Image';
+    default:
+      return 'Object';
+  }
+}

package/hedhog/frontend/app/_lib/store/useTemplateStore.ts.ejs

@@ -0,0 +1,284 @@
+import { create } from 'zustand';
+import type { BackgroundFit, Template, TemplateObject } from '../editor/types';
+import { createDefaultTemplate } from '../editor/types';
+
+const LS_KEY = 'certificate_template_draft';
+
+function normalizeBackgroundSrc(src: string | null | undefined) {
+  if (!src) return null;
+
+  const value = src.trim();
+  if (!value) return null;
+
+  if (value.startsWith('data:') || value.startsWith('blob:')) {
+    return value;
+  }
+
+  const dedupeApiPath = (pathname: string) =>
+    pathname.replace(/\/api(?:\/api)+(\/|$)/g, '/api$1');
+
+  if (value.startsWith('http://') || value.startsWith('https://')) {
+    try {
+      const url = new URL(value);
+      url.pathname = dedupeApiPath(url.pathname);
+      return url.toString();
+    } catch {
+      return value;
+    }
+  }
+
+  const rootRelative = value.startsWith('/') ? value : `/${value}`;
+  const apiBase = String(process.env.NEXT_PUBLIC_API_BASE_URL || '')
+    .trim()
+    .replace(/\/+$/, '');
+
+  if (rootRelative.startsWith('/api/')) {
+    return dedupeApiPath(rootRelative);
+  }
+
+  if (apiBase) {
+    const combined = `${apiBase}${rootRelative}`;
+    try {
+      const url = new URL(combined);
+      url.pathname = dedupeApiPath(url.pathname);
+      return url.toString();
+    } catch {
+      return combined.replace(/\/api(?:\/api)+(\/|$)/g, '/api$1');
+    }
+  }
+
+  return rootRelative;
+}
+
+function normalizeTemplateBackground(template: Template): Template {
+  const fitValue = (template.background as { fit?: unknown })?.fit;
+  const fit: BackgroundFit =
+    fitValue === 'cover' || fitValue === 'stretch' ? fitValue : 'contain';
+
+  return {
+    ...template,
+    background: {
+      src: normalizeBackgroundSrc(template.background?.src),
+      fit,
+    },
+  };
+}
+
+function loadFromStorage(): Template {
+  if (typeof window === 'undefined') return createDefaultTemplate();
+  try {
+    const raw = localStorage.getItem(LS_KEY);
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      if (isValidTemplate(parsed)) {
+        return normalizeTemplateBackground(parsed as Template);
+      }
+    }
+  } catch {
+    /* ignore */
+  }
+  return createDefaultTemplate();
+}
+
+/** Minimal schema validation for imported JSON */
+export function isValidTemplate(t: unknown): t is Template {
+  if (!t || typeof t !== 'object') return false;
+  const obj = t as Record<string, unknown>;
+  return (
+    obj.version === 1 &&
+    typeof obj.name === 'string' &&
+    typeof obj.canvas === 'object' &&
+    obj.canvas !== null &&
+    typeof obj.background === 'object' &&
+    obj.background !== null &&
+    Array.isArray(obj.objects)
+  );
+}
+
+interface EditorToggles {
+  snapEnabled: boolean;
+  gridEnabled: boolean;
+  marginsEnabled: boolean;
+}
+
+interface TemplateState extends EditorToggles {
+  template: Template;
+  selectedObjectId: string | null;
+  zoom: number;
+  effectiveZoom: number;
+
+  /* template-level */
+  setTemplate: (t: Template) => void;
+  setName: (name: string) => void;
+  resetTemplate: () => void;
+  setBackground: (src: string | null, fit?: BackgroundFit) => void;
+
+  /* object-level */
+  addObject: (obj: TemplateObject) => void;
+  updateObject: (id: string, partial: Partial<TemplateObject>) => void;
+  removeObject: (id: string) => void;
+  duplicateObject: (id: string) => TemplateObject | null;
+  reorderObjects: (ids: string[]) => void;
+  reorderFromLayers: (idsTopFirst: string[]) => void;
+
+  /* selection */
+  selectObject: (id: string | null) => void;
+
+  /* zoom */
+  setZoom: (z: number) => void;
+  setEffectiveZoom: (z: number) => void;
+
+  /* toggles */
+  toggleSnap: () => void;
+  toggleGrid: () => void;
+  toggleMargins: () => void;
+}
+
+export const useTemplateStore = create<TemplateState>((set, get) => ({
+  template: loadFromStorage(),
+  selectedObjectId: null,
+  zoom: 0.5,
+  effectiveZoom: 0.5,
+
+  /* toggles (default on for snap) */
+  snapEnabled: true,
+  gridEnabled: false,
+  marginsEnabled: false,
+
+  setTemplate: (t) =>
+    set({
+      template: normalizeTemplateBackground(t),
+      selectedObjectId: null,
+    }),
+
+  setName: (name) => set((s) => ({ template: { ...s.template, name } })),
+
+  resetTemplate: () =>
+    set({
+      template: createDefaultTemplate(),
+      selectedObjectId: null,
+      zoom: 0.5,
+      effectiveZoom: 0.5,
+    }),
+
+  setBackground: (src, fit) =>
+    set((s) => ({
+      template: {
+        ...s.template,
+        background: {
+          src: normalizeBackgroundSrc(src),
+          fit: fit ?? s.template.background.fit ?? 'contain',
+        },
+      },
+    })),
+
+  addObject: (obj) =>
+    set((s) => ({
+      template: {
+        ...s.template,
+        objects: [...s.template.objects, obj],
+      },
+    })),
+
+  updateObject: (id, partial) =>
+    set((s) => ({
+      template: {
+        ...s.template,
+        objects: s.template.objects.map((o) =>
+          o.id === id ? { ...o, ...partial } : o
+        ),
+      },
+    })),
+
+  removeObject: (id) =>
+    set((s) => ({
+      template: {
+        ...s.template,
+        objects: s.template.objects.filter((o) => o.id !== id),
+      },
+      selectedObjectId: s.selectedObjectId === id ? null : s.selectedObjectId,
+    })),
+
+  duplicateObject: (id) => {
+    const state = get();
+    const orig = state.template.objects.find((o) => o.id === id);
+    if (!orig) return null;
+    const clone: TemplateObject = {
+      ...structuredClone(orig),
+      id: crypto.randomUUID(),
+      xPct: orig.xPct + 1.5,
+      yPct: orig.yPct + 1.5,
+      zIndex: state.template.objects.length,
+    };
+    set((s) => ({
+      template: {
+        ...s.template,
+        objects: [...s.template.objects, clone],
+      },
+      selectedObjectId: clone.id,
+    }));
+    return clone;
+  },
+
+  reorderObjects: (ids) =>
+    set((s) => {
+      const lookup = new Map(s.template.objects.map((o) => [o.id, o]));
+      const reordered = ids
+        .map((id) => lookup.get(id))
+        .filter(Boolean) as TemplateObject[];
+      reordered.forEach((o, i) => {
+        o.zIndex = i;
+      });
+      const missing = s.template.objects.filter((o) => !ids.includes(o.id));
+      return {
+        template: { ...s.template, objects: [...reordered, ...missing] },
+      };
+    }),
+
+  reorderFromLayers: (idsTopFirst) =>
+    set((s) => {
+      const lookup = new Map(s.template.objects.map((o) => [o.id, o]));
+      const reversed = [...idsTopFirst].reverse();
+      const reordered = reversed
+        .map((id) => lookup.get(id))
+        .filter(Boolean) as TemplateObject[];
+      reordered.forEach((o, i) => {
+        o.zIndex = i;
+      });
+      const missing = s.template.objects.filter(
+        (o) => !idsTopFirst.includes(o.id)
+      );
+      return {
+        template: { ...s.template, objects: [...reordered, ...missing] },
+      };
+    }),
+
+  selectObject: (id) => set({ selectedObjectId: id }),
+
+  setZoom: (z) => set({ zoom: Math.max(0.2, Math.min(3.0, z)) }),
+  setEffectiveZoom: (z) =>
+    set((s) => {
+      const nextZoom = Math.max(0.2, Math.min(3.0, z));
+      return Math.abs(s.effectiveZoom - nextZoom) < 0.001
+        ? s
+        : { effectiveZoom: nextZoom };
+    }),
+
+  toggleSnap: () => set((s) => ({ snapEnabled: !s.snapEnabled })),
+  toggleGrid: () => set((s) => ({ gridEnabled: !s.gridEnabled })),
+  toggleMargins: () => set((s) => ({ marginsEnabled: !s.marginsEnabled })),
+}));
+
+/* ── debounced localStorage persist + onChange log ── */
+if (typeof window !== 'undefined') {
+  let timer: ReturnType<typeof setTimeout>;
+  useTemplateStore.subscribe((state, prev) => {
+    if (state.template !== prev.template) {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        localStorage.setItem(LS_KEY, JSON.stringify(state.template));
+        console.log('[onChange] template atualizado:', state.template);
+      }, 300);
+    }
+  });
+}