@hed-hog/lms 0.0.357 → 0.0.361

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

@@ -1,6 +1,8 @@
 'use client';
 
 import { useSidebar } from '@/components/ui/sidebar';
+import { useApp } from '@hed-hog/next-app-provider';
+import { ImageIcon, QrCode } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import {
   getCanvasAPI,
@@ -29,6 +31,90 @@ const MARGIN_INSET = 60; // px from canvas edge
 const MIN_ZOOM = 0.2;
 const MAX_ZOOM = 3.0;
 const FIT_PADDING = 24;
+type AppRequest = ReturnType<typeof useApp>['request'];
+type LucideNode = [string, Record<string, string | number>];
+const IMAGE_ICON_NODE_FALLBACK: LucideNode[] = [
+  ['rect', { width: '18', height: '18', x: '3', y: '3', rx: '2', ry: '2' }],
+  ['circle', { cx: '9', cy: '9', r: '2' }],
+  ['path', { d: 'm21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21' }],
+];
+const QRCODE_ICON_NODE_FALLBACK: LucideNode[] = [
+  ['rect', { width: '5', height: '5', x: '3', y: '3', rx: '1' }],
+  ['rect', { width: '5', height: '5', x: '16', y: '3', rx: '1' }],
+  ['rect', { width: '5', height: '5', x: '3', y: '16', rx: '1' }],
+  ['path', { d: 'M21 16h-3a2 2 0 0 0-2 2v3' }],
+  ['path', { d: 'M21 21v.01' }],
+  ['path', { d: 'M12 7v3a2 2 0 0 1-2 2H7' }],
+  ['path', { d: 'M3 12h.01' }],
+  ['path', { d: 'M12 3h.01' }],
+  ['path', { d: 'M12 16v.01' }],
+  ['path', { d: 'M16 12h1' }],
+  ['path', { d: 'M21 12v.01' }],
+  ['path', { d: 'M12 21v-1' }],
+];
+const QRCODE_ICON_NODE = (QrCode as unknown as { iconNode?: LucideNode[] })
+  .iconNode;
+const IMAGE_ICON_NODE = (ImageIcon as unknown as { iconNode?: LucideNode[] })
+  .iconNode;
+const RESOLVED_QRCODE_ICON_NODE = QRCODE_ICON_NODE?.length
+  ? QRCODE_ICON_NODE
+  : QRCODE_ICON_NODE_FALLBACK;
+const RESOLVED_IMAGE_ICON_NODE = IMAGE_ICON_NODE?.length
+  ? IMAGE_ICON_NODE
+  : IMAGE_ICON_NODE_FALLBACK;
+
+async function resolveProtectedOpenSrc(
+  request: AppRequest,
+  fileId: number
+): Promise<string> {
+  try {
+    const response = await request<{ url?: string }>({
+      url: `/file/open/${fileId}`,
+      method: 'PUT',
+    });
+    return response?.data?.url || `/file/open/${fileId}`;
+  } catch {
+    return `/file/open/${fileId}`;
+  }
+}
+
+function loadImageElementForObject(canvas: any, obj: any, src: string) {
+  const image = new Image();
+  image.crossOrigin = 'anonymous';
+  image.onload = () => {
+    obj._tplResolvedImageElement = image;
+    obj.dirty = true;
+    canvas.requestRenderAll();
+  };
+  image.onerror = () => {
+    obj._tplResolvedImageElement = null;
+    obj.dirty = true;
+    canvas.requestRenderAll();
+  };
+  image.src = src;
+}
+
+async function ensureObjectImageLoaded(
+  canvas: any,
+  obj: any,
+  request: AppRequest
+) {
+  if (!obj || obj._tplType !== 'image') {
+    return;
+  }
+
+  const fileId = Number(obj._tplImageFileId ?? 0);
+  if (!Number.isFinite(fileId) || fileId <= 0) {
+    obj._tplResolvedImageElement = null;
+    obj.dirty = true;
+    canvas.requestRenderAll();
+    return;
+  }
+
+  const src = await resolveProtectedOpenSrc(request, fileId);
+  obj._tplImageSrc = src;
+  loadImageElementForObject(canvas, obj, src);
+}
 
 function applyCanvasZoom(canvas: any, appliedZoom: number) {
   canvas.setZoom(appliedZoom);
@@ -39,11 +125,246 @@ function applyCanvasZoom(canvas: any, appliedZoom: number) {
   canvas.requestRenderAll();
 }
 
+function renderLucideIcon(
+  ctx: CanvasRenderingContext2D,
+  iconNode: LucideNode[] | undefined,
+  size: number,
+  color = '#334155'
+) {
+  if (!iconNode?.length) {
+    return;
+  }
+
+  const safeSize = Math.max(10, size);
+  const scale = safeSize / 24;
+
+  ctx.save();
+  ctx.translate(-safeSize / 2, -safeSize / 2);
+  ctx.scale(scale, scale);
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 2;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  for (const [tag, attrs] of iconNode) {
+    if (tag === 'path') {
+      const d = attrs.d;
+      if (typeof d === 'string') {
+        const path = new Path2D(d);
+        ctx.stroke(path);
+      }
+      continue;
+    }
+
+    if (tag === 'rect') {
+      const x = Number(attrs.x ?? 0);
+      const y = Number(attrs.y ?? 0);
+      const w = Number(attrs.width ?? 0);
+      const h = Number(attrs.height ?? 0);
+      const rx = Number(attrs.rx ?? 0);
+
+      if (typeof (ctx as any).roundRect === 'function' && rx > 0) {
+        ctx.beginPath();
+        (ctx as any).roundRect(x, y, w, h, rx);
+        ctx.stroke();
+      } else {
+        ctx.strokeRect(x, y, w, h);
+      }
+    }
+
+    if (tag === 'circle') {
+      const cx = Number(attrs.cx ?? 0);
+      const cy = Number(attrs.cy ?? 0);
+      const r = Number(attrs.r ?? 0);
+      ctx.beginPath();
+      ctx.arc(cx, cy, r, 0, Math.PI * 2);
+      ctx.stroke();
+    }
+  }
+
+  ctx.restore();
+}
+
+function drawImageOnObject(
+  ctx: CanvasRenderingContext2D,
+  obj: any,
+  image: HTMLImageElement
+) {
+  const width = Number(obj.width ?? 0);
+  const height = Number(obj.height ?? 0);
+  const scaleX = Number(obj.scaleX ?? 1);
+  const scaleY = Number(obj.scaleY ?? 1);
+  const imageWidth = image.naturalWidth || image.width || 1;
+  const imageHeight = image.naturalHeight || image.height || 1;
+  if (width <= 0 || height <= 0 || imageWidth <= 0 || imageHeight <= 0) {
+    return;
+  }
+
+  const resizeMode =
+    obj._tplImageResizeMode === 'cover' ||
+    obj._tplImageResizeMode === 'stretch' ||
+    obj._tplImageResizeMode === 'center'
+      ? obj._tplImageResizeMode
+      : 'contain';
+
+  let renderWidth = width;
+  let renderHeight = height;
+
+  ctx.save();
+  if (
+    resizeMode !== 'stretch' &&
+    Number.isFinite(scaleX) &&
+    Number.isFinite(scaleY) &&
+    scaleX !== 0 &&
+    scaleY !== 0
+  ) {
+    // Neutralize object non-uniform transform so contain/cover/center keep image ratio.
+    ctx.scale(1 / scaleX, 1 / scaleY);
+    renderWidth = width * scaleX;
+    renderHeight = height * scaleY;
+  }
+
+  const x = -renderWidth / 2;
+  const y = -renderHeight / 2;
+
+  if (typeof (ctx as any).roundRect === 'function') {
+    ctx.beginPath();
+    (ctx as any).roundRect(x, y, renderWidth, renderHeight, 4);
+    ctx.clip();
+  } else {
+    ctx.beginPath();
+    ctx.rect(x, y, renderWidth, renderHeight);
+    ctx.clip();
+  }
+
+  if (resizeMode === 'stretch') {
+    ctx.drawImage(image, x, y, renderWidth, renderHeight);
+    ctx.restore();
+    return;
+  }
+
+  if (resizeMode === 'center') {
+    const dx = x + (renderWidth - imageWidth) / 2;
+    const dy = y + (renderHeight - imageHeight) / 2;
+    ctx.drawImage(image, dx, dy, imageWidth, imageHeight);
+    ctx.restore();
+    return;
+  }
+
+  const scale =
+    resizeMode === 'cover'
+      ? Math.max(renderWidth / imageWidth, renderHeight / imageHeight)
+      : Math.min(renderWidth / imageWidth, renderHeight / imageHeight);
+  const dw = imageWidth * scale;
+  const dh = imageHeight * scale;
+  const dx = x + (renderWidth - dw) / 2;
+  const dy = y + (renderHeight - dh) / 2;
+
+  ctx.drawImage(image, dx, dy, dw, dh);
+  ctx.restore();
+}
+
+function attachPlaceholderOverlay(obj: any) {
+  if (!obj || obj._tplOverlayAttached) {
+    return;
+  }
+
+  if (obj._tplType !== 'field' && obj._tplType !== 'image') {
+    return;
+  }
+
+  const originalRender = obj._render?.bind(obj);
+  if (!originalRender) {
+    return;
+  }
+
+  obj._render = function (ctx: CanvasRenderingContext2D) {
+    originalRender(ctx);
+
+    if (
+      this._tplType === 'image' &&
+      this._tplImageFileId != null &&
+      this._tplResolvedImageElement
+    ) {
+      drawImageOnObject(ctx, this, this._tplResolvedImageElement);
+    }
+
+    const isQrPlaceholder =
+      this._tplType === 'field' &&
+      this._tplKey === 'qrCode' &&
+      this._tplQrPlaceholder === true;
+    const isLogoPlaceholder =
+      this._tplType === 'image' &&
+      this._tplImagePlaceholder &&
+      this._tplKey === 'courseLogo';
+    const isBannerPlaceholder =
+      this._tplType === 'image' &&
+      this._tplImagePlaceholder &&
+      this._tplKey === 'courseBanner';
+    const isGenericImagePlaceholder =
+      this._tplType === 'image' &&
+      !this._tplImagePlaceholder &&
+      this._tplImageFileId == null;
+
+    if (
+      !isQrPlaceholder &&
+      !isLogoPlaceholder &&
+      !isBannerPlaceholder &&
+      !isGenericImagePlaceholder
+    ) {
+      return;
+    }
+
+    const width = Number(this.width ?? 0);
+    const height = Number(this.height ?? 0);
+
+    if (width <= 0 || height <= 0) {
+      return;
+    }
+
+    ctx.save();
+
+    if (isQrPlaceholder) {
+      const iconSize = Math.min(width, height) * 0.72;
+      renderLucideIcon(ctx, RESOLVED_QRCODE_ICON_NODE, iconSize, '#475569');
+    }
+
+    if (isGenericImagePlaceholder) {
+      const iconSize = Math.min(width, height) * 0.58;
+      renderLucideIcon(ctx, RESOLVED_IMAGE_ICON_NODE, iconSize, '#64748b');
+    }
+
+    if (isLogoPlaceholder || isBannerPlaceholder) {
+      const label = isLogoPlaceholder ? 'LOGO' : 'BANNER';
+      const fontPx = Math.max(12, Math.min(26, Math.round(height * 0.28)));
+      ctx.fillStyle = '#475569';
+      ctx.font = `700 ${fontPx}px Inter, sans-serif`;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(label, 0, 0);
+    }
+
+    ctx.restore();
+  };
+
+  obj._tplOverlayAttached = true;
+  obj.dirty = true;
+}
+
+function attachOverlaysForCanvas(canvas: any) {
+  const objects = canvas.getObjects().filter((o: any) => !o._isGuide);
+  objects.forEach((obj: any) => {
+    attachPlaceholderOverlay(obj);
+    applyFixedAspectResizeBehavior(obj);
+  });
+}
+
 type CanvasStageProps = {
   isLoading?: boolean;
 };
 
 export default function CanvasStage({ isLoading = false }: CanvasStageProps) {
+  const { request } = useApp();
   const { state: sidebarState } = useSidebar();
   const canvasElRef = useRef<HTMLCanvasElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
@@ -94,8 +415,8 @@ export default function CanvasStage({ isLoading = false }: CanvasStageProps) {
       const el = canvasElRef.current;
       if (!el) return;
 
-      const { zoom: manualZoom, effectiveZoom } = useTemplateStore.getState();
-      const z = Math.min(manualZoom, effectiveZoom);
+      const { zoom: manualZoom } = useTemplateStore.getState();
+      const z = manualZoom;
 
       canvas = new Canvas(el, {
         width: CANVAS_W * z,
@@ -110,6 +431,13 @@ export default function CanvasStage({ isLoading = false }: CanvasStageProps) {
       /* load existing template objects */
       const template = useTemplateStore.getState().template;
       templateJSONToFabric(canvas, template, fabricMod);
+      attachOverlaysForCanvas(canvas);
+      const imageObjects = canvas
+        .getObjects()
+        .filter((o: any) => o._tplType === 'image');
+      imageObjects.forEach((obj: any) => {
+        void ensureObjectImageLoaded(canvas, obj, request);
+      });
 
       if (template.background.src) {
         await applyBg(canvas, fabricMod, template.background.src);
@@ -129,7 +457,10 @@ export default function CanvasStage({ isLoading = false }: CanvasStageProps) {
         if (snapRef.current) applySnapping(canvas, e.target);
         onModified(e);
       });
-      canvas.on('object:scaling', onModified);
+      canvas.on('object:scaling', (e: any) => {
+        enforceUniformScaling(e.target);
+        onModified(e);
+      });
       canvas.on('object:rotating', onModified);
       canvas.on('text:changed', onModified);
 
@@ -143,7 +474,7 @@ export default function CanvasStage({ isLoading = false }: CanvasStageProps) {
         const delta = -e.deltaY;
         const currentManualZoom = useTemplateStore.getState().zoom;
         const newManualZoom = clampZoom(currentManualZoom * (1 + delta / 500));
-        const appliedZoom = Math.min(newManualZoom, autoFitZoomRef.current);
+        const appliedZoom = newManualZoom;
 
         const point =
           typeof canvas.getScenePoint === 'function'
@@ -195,7 +526,7 @@ export default function CanvasStage({ isLoading = false }: CanvasStageProps) {
       });
 
       /* ── register API for other panels ── */
-      registerCanvasAPI(buildAPI(canvas, fabricMod));
+      registerCanvasAPI(buildAPI(canvas, fabricMod, request));
     }
 
     init();
@@ -254,7 +585,7 @@ export default function CanvasStage({ isLoading = false }: CanvasStageProps) {
   /* ── sync effective zoom to fit + manual zoom ── */
   useEffect(() => {
     const c = fabricRef.current;
-    const appliedZoom = Math.min(zoom, autoFitZoom);
+    const appliedZoom = zoom;
 
     setEffectiveZoom(appliedZoom);
 
@@ -591,6 +922,17 @@ export default function CanvasStage({ isLoading = false }: CanvasStageProps) {
       } else {
         api.addObject(data.type, { key: data.key, shape: data.shape });
       }
+
+      if (data.type === 'image' && !data.key) {
+        const selectedObjectId = useTemplateStore.getState().selectedObjectId;
+        if (selectedObjectId) {
+          window.dispatchEvent(
+            new CustomEvent('lms-certificate:auto-open-image-upload', {
+              detail: { objectId: selectedObjectId },
+            })
+          );
+        }
+      }
     } catch {
       /* ignore bad data */
     }
@@ -599,7 +941,7 @@ export default function CanvasStage({ isLoading = false }: CanvasStageProps) {
   return (
     <div
       ref={wrapperRef}
-      className={`relative flex flex-1 items-center justify-center overflow-auto bg-muted/60 p-6 transition-colors ${
+      className={`relative h-full min-h-0 min-w-0 w-full overflow-hidden bg-muted/60 transition-colors ${
         isDragOver ? 'ring-2 ring-inset ring-primary/40 bg-primary/5' : ''
       }`}
       onDragOver={handleDragOver}
@@ -620,8 +962,12 @@ export default function CanvasStage({ isLoading = false }: CanvasStageProps) {
           </div>
         </div>
       )}
-      <div className="shadow-lg" style={{ lineHeight: 0 }}>
-        <canvas ref={canvasElRef} />
+      <div className="absolute inset-0 overflow-auto overscroll-contain">
+        <div className="flex min-h-full min-w-full items-center justify-center p-6">
+          <div className="shadow-lg" style={{ lineHeight: 0 }}>
+            <canvas ref={canvasElRef} />
+          </div>
+        </div>
       </div>
     </div>
   );
@@ -632,17 +978,61 @@ export default function CanvasStage({ isLoading = false }: CanvasStageProps) {
 function onSelect(e: any) {
   const obj = e.selected?.[0];
   if (obj?._tplId) {
+    applyFixedAspectResizeBehavior(obj);
     useTemplateStore.getState().selectObject(obj._tplId);
   }
 }
 
+function shouldKeepUniformScaling(obj: any) {
+  const isQrCode = obj?._tplType === 'field' && obj?._tplKey === 'qrCode';
+  const isCourseLogo =
+    obj?._tplType === 'image' && obj?._tplKey === 'courseLogo';
+  return isQrCode || isCourseLogo;
+}
+
+function applyFixedAspectResizeBehavior(obj: any) {
+  if (!obj || !shouldKeepUniformScaling(obj)) {
+    return;
+  }
+
+  obj.setControlsVisibility({
+    mt: false,
+    mb: false,
+    ml: false,
+    mr: false,
+  });
+  obj.set({ lockUniScaling: true });
+}
+
+function enforceUniformScaling(obj: any) {
+  if (!obj || !shouldKeepUniformScaling(obj)) {
+    return;
+  }
+
+  const sx = Number(obj.scaleX ?? 1);
+  const sy = Number(obj.scaleY ?? 1);
+  const useX = Math.abs(sx - 1) >= Math.abs(sy - 1);
+  const uniform = useX ? sx : sy;
+
+  obj.set({ scaleX: uniform, scaleY: uniform });
+  obj.setCoords?.();
+}
+
 function onModified(e: any) {
   const obj = e.target ?? e;
   if (!obj?._tplId) return;
+  enforceUniformScaling(obj);
   const partial = fabricObjToTemplatePartial(obj);
 
   const extra: Partial<TemplateObject> = {};
-  if (obj._tplType === 'field' || obj._tplType === 'staticText') {
+  const isQrPlaceholder =
+    obj._tplType === 'field' &&
+    obj._tplKey === 'qrCode' &&
+    obj._tplQrPlaceholder === true;
+  if (
+    (obj._tplType === 'field' || obj._tplType === 'staticText') &&
+    !isQrPlaceholder
+  ) {
     extra.text = obj.text;
   }
 
@@ -677,7 +1067,7 @@ async function applyBg(canvas: any, fabricMod: any, src: string) {
 
 /* ────────────── canvas API (for panels) ────────────── */
 
-function buildAPI(canvas: any, fabricMod: any): CanvasAPI {
+function buildAPI(canvas: any, fabricMod: any, request: any): CanvasAPI {
   function findObj(id: string) {
     return canvas.getObjects().find((o: any) => o._tplId === id);
   }
@@ -695,23 +1085,30 @@ function buildAPI(canvas: any, fabricMod: any): CanvasAPI {
 
     if (type === 'field') {
       const isQrCode = key === 'qrCode';
-      fObj = new fabricMod.Textbox(`{{${key}}}`, {
-        left: cx - (isQrCode ? 90 : 120),
-        top: cy - (isQrCode ? 45 : 18),
-        width: isQrCode ? 180 : 240,
-        height: isQrCode ? 90 : undefined,
-        fontSize: isQrCode ? 20 : 28,
-        fontFamily: 'Inter',
-        fontWeight: '400',
-        fill: '#1e293b',
-        textAlign: 'center',
-      });
       if (isQrCode) {
-        fObj.set({
-          text: '[QR Code]',
-          stroke: '#94a3b8',
-          strokeWidth: 1,
-          backgroundColor: '#f8fafc',
+        fObj = new fabricMod.Rect({
+          left: cx - 90,
+          top: cy - 90,
+          width: 180,
+          height: 180,
+          fill: '#f8fafc',
+          stroke: '#64748b',
+          strokeWidth: 1.5,
+          strokeDashArray: [6, 4],
+          rx: 4,
+          ry: 4,
+        });
+        fObj._tplQrPlaceholder = true;
+      } else {
+        fObj = new fabricMod.Textbox(`{{${key}}}`, {
+          left: cx - 120,
+          top: cy - 18,
+          width: 240,
+          fontSize: 28,
+          fontFamily: 'Inter',
+          fontWeight: '400',
+          fill: '#1e293b',
+          textAlign: 'center',
         });
       }
       fObj._tplKey = key;
@@ -745,8 +1142,8 @@ function buildAPI(canvas: any, fabricMod: any): CanvasAPI {
     } else if (type === 'image') {
       const isCourseLogo = key === 'courseLogo';
       const isCourseBanner = key === 'courseBanner';
-      const boxWidth = isCourseBanner ? 420 : isCourseLogo ? 220 : 150;
-      const boxHeight = isCourseBanner ? 140 : isCourseLogo ? 120 : 150;
+      const boxWidth = isCourseBanner ? 420 : isCourseLogo ? 180 : 150;
+      const boxHeight = isCourseBanner ? 140 : isCourseLogo ? 180 : 150;
       fObj = new fabricMod.Rect({
         left: cx - boxWidth / 2,
         top: cy - boxHeight / 2,
@@ -773,6 +1170,8 @@ function buildAPI(canvas: any, fabricMod: any): CanvasAPI {
     fObj._tplType = type;
     fObj._tplKey = key;
     fObj._tplShape = shape;
+    applyFixedAspectResizeBehavior(fObj);
+    attachPlaceholderOverlay(fObj);
 
     canvas.add(fObj);
     canvas.setActiveObject(fObj);
@@ -812,6 +1211,8 @@ function buildAPI(canvas: any, fabricMod: any): CanvasAPI {
       if (!cloneData) return;
       const fObj = createFabricFromTemplate(cloneData, fabricMod);
       if (fObj) {
+        applyFixedAspectResizeBehavior(fObj);
+        attachPlaceholderOverlay(fObj);
         canvas.add(fObj);
         canvas.setActiveObject(fObj);
         canvas.requestRenderAll();
@@ -834,6 +1235,14 @@ function buildAPI(canvas: any, fabricMod: any): CanvasAPI {
       Object.entries(fabricProps).forEach(([k, v]) => {
         obj.set(k as any, v);
       });
+      enforceUniformScaling(obj);
+      if (
+        '_tplImageFileId' in fabricProps ||
+        '_tplImageSrc' in fabricProps ||
+        '_tplImageResizeMode' in fabricProps
+      ) {
+        void ensureObjectImageLoaded(canvas, obj, request);
+      }
       obj.setCoords?.();
       canvas.requestRenderAll();
 
@@ -879,11 +1288,18 @@ function buildAPI(canvas: any, fabricMod: any): CanvasAPI {
 
     loadTemplate(template) {
       canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
-      const { zoom: manualZoom, effectiveZoom } = useTemplateStore.getState();
-      const z = Math.min(manualZoom, effectiveZoom);
+      const { zoom: manualZoom } = useTemplateStore.getState();
+      const z = manualZoom;
       applyCanvasZoom(canvas, z);
 
       templateJSONToFabric(canvas, template, fabricMod);
+      attachOverlaysForCanvas(canvas);
+      const imageObjects = canvas
+        .getObjects()
+        .filter((o: any) => o._tplType === 'image');
+      imageObjects.forEach((obj: any) => {
+        void ensureObjectImageLoaded(canvas, obj, request);
+      });
       if (template.background.src) {
         applyBg(canvas, fabricMod, template.background.src);
       }