Add custom toolbox card covers

website/src/features/toolboxes/ToolboxCoverEditor.jsx

@@ -0,0 +1,213 @@
+// Rôle : édite une image utilisateur en cover rectangulaire de card toolbox.
+/* eslint-disable react-refresh/only-export-components -- expose aussi les helpers purs de calcul/export du crop. */
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Icon } from "../../components/Icon.jsx";
+import { lockBodyScroll } from "../../utils/bodyScrollLock.js";
+
+const OUTPUT_WIDTH = 620;
+const OUTPUT_HEIGHT = 248;
+const WEBP_QUALITY = 0.82;
+
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+
+function canvasToDataUrl(canvas) {
+  const webp = canvas.toDataURL("image/webp", WEBP_QUALITY);
+  return webp.startsWith("data:image/webp") ? webp : canvas.toDataURL("image/jpeg", WEBP_QUALITY);
+}
+
+export function getCoverCropSourceRect({ imageWidth, imageHeight, frameWidth, frameHeight, scale, offsetX, offsetY }) {
+  const displayWidth = imageWidth * scale;
+  const displayHeight = imageHeight * scale;
+  const sourceX = ((displayWidth - frameWidth) / 2 - offsetX) / scale;
+  const sourceY = ((displayHeight - frameHeight) / 2 - offsetY) / scale;
+  const x = clamp(sourceX, 0, imageWidth);
+  const y = clamp(sourceY, 0, imageHeight);
+  return {
+    x,
+    y,
+    width: Math.min(imageWidth - x, frameWidth / scale),
+    height: Math.min(imageHeight - y, frameHeight / scale)
+  };
+}
+
+export async function createToolboxCoverDataUrl(bitmap, frame, transform) {
+  const crop = getCoverCropSourceRect({
+    imageWidth: bitmap.width,
+    imageHeight: bitmap.height,
+    frameWidth: frame.width,
+    frameHeight: frame.height,
+    scale: transform.scale,
+    offsetX: transform.x,
+    offsetY: transform.y
+  });
+  const canvas = document.createElement("canvas");
+  canvas.width = OUTPUT_WIDTH;
+  canvas.height = OUTPUT_HEIGHT;
+  canvas.getContext("2d").drawImage(bitmap, crop.x, crop.y, crop.width, crop.height, 0, 0, OUTPUT_WIDTH, OUTPUT_HEIGHT);
+  return canvasToDataUrl(canvas);
+}
+
+function createPreviewSource(file, existingCover) {
+  if (file) return URL.createObjectURL(file);
+  return existingCover || "";
+}
+
+async function decodePreviewImage(source, file) {
+  if (file) return createImageBitmap(file);
+  const response = await fetch(source);
+  return createImageBitmap(await response.blob());
+}
+
+export function ToolboxCoverEditor({ file, existingCover = "", onClose, onSave }) {
+  const frameRef = useRef(null);
+  const imageBitmapRef = useRef(null);
+  const dragRef = useRef(null);
+  const [source, setSource] = useState("");
+  const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
+  const [frame, setFrame] = useState({ width: 0, height: 0 });
+  const [transform, setTransform] = useState({ x: 0, y: 0, scale: 1 });
+  const [baseScale, setBaseScale] = useState(1);
+  const [error, setError] = useState("");
+
+  const maxScale = useMemo(() => baseScale * 4, [baseScale]);
+
+  useEffect(() => lockBodyScroll(), []);
+
+  useEffect(() => () => imageBitmapRef.current?.close?.(), []);
+
+  useEffect(() => {
+    const nextSource = createPreviewSource(file, existingCover);
+    setSource(nextSource);
+    setError("");
+    return () => {
+      if (file && nextSource) URL.revokeObjectURL(nextSource);
+    };
+  }, [existingCover, file]);
+
+  useEffect(() => {
+    if (!source) return undefined;
+    let cancelled = false;
+    decodePreviewImage(source, file)
+      .then((bitmap) => {
+        if (cancelled) {
+          bitmap.close?.();
+          return;
+        }
+        imageBitmapRef.current?.close?.();
+        imageBitmapRef.current = bitmap;
+        setImageSize({ width: bitmap.width, height: bitmap.height });
+      })
+      .catch(() => setError("Image illisible. Choisis un autre fichier."));
+    return () => {
+      cancelled = true;
+    };
+  }, [file, source]);
+
+  useEffect(() => {
+    const frameElement = frameRef.current;
+    if (!frameElement) return undefined;
+    const updateFrame = () => {
+      const rect = frameElement.getBoundingClientRect();
+      setFrame({ width: rect.width, height: rect.height });
+    };
+    updateFrame();
+    const observer = new ResizeObserver(updateFrame);
+    observer.observe(frameElement);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (!frame.width || !frame.height || !imageSize.width || !imageSize.height) return;
+    const nextBaseScale = Math.max(frame.width / imageSize.width, frame.height / imageSize.height);
+    setBaseScale(nextBaseScale);
+    setTransform({ x: 0, y: 0, scale: nextBaseScale });
+  }, [frame.height, frame.width, imageSize.height, imageSize.width]);
+
+  function clampTransform(nextTransform) {
+    const displayWidth = imageSize.width * nextTransform.scale;
+    const displayHeight = imageSize.height * nextTransform.scale;
+    const maxX = Math.max(0, (displayWidth - frame.width) / 2);
+    const maxY = Math.max(0, (displayHeight - frame.height) / 2);
+    return {
+      scale: nextTransform.scale,
+      x: clamp(nextTransform.x, -maxX, maxX),
+      y: clamp(nextTransform.y, -maxY, maxY)
+    };
+  }
+
+  function updateScale(value) {
+    const scale = clamp(Number(value) || baseScale, baseScale, maxScale);
+    setTransform((current) => clampTransform({ ...current, scale }));
+  }
+
+  function startDrag(event) {
+    if (!imageSize.width) return;
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    dragRef.current = { pointerId: event.pointerId, x: event.clientX, y: event.clientY, start: transform };
+  }
+
+  function moveDrag(event) {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    setTransform(clampTransform({
+      ...drag.start,
+      x: drag.start.x + event.clientX - drag.x,
+      y: drag.start.y + event.clientY - drag.y
+    }));
+  }
+
+  function endDrag(event) {
+    if (dragRef.current?.pointerId === event.pointerId) dragRef.current = null;
+  }
+
+  async function saveCover() {
+    const bitmap = imageBitmapRef.current;
+    if (!bitmap || !frame.width || !frame.height) return;
+    onSave(await createToolboxCoverDataUrl(bitmap, frame, transform));
+  }
+
+  return (
+    <div className="confirm-modal-root toolbox-cover-editor-root">
+      <div className="confirm-backdrop nds-modal-backdrop" onClick={onClose} />
+      <section className="confirm-modal nds-modal toolbox-cover-editor" role="dialog" aria-modal="true" aria-labelledby="toolbox-cover-editor-title">
+        <header>
+          <h2 id="toolbox-cover-editor-title">Image de card</h2>
+          <button className="nds-icon-button" data-size="xs" type="button" onClick={onClose} aria-label="Fermer" title="Fermer"><Icon name="close" /></button>
+        </header>
+        <div
+          className="toolbox-cover-crop-frame"
+          ref={frameRef}
+          onPointerDown={startDrag}
+          onPointerMove={moveDrag}
+          onPointerUp={endDrag}
+          onPointerCancel={endDrag}
+        >
+          {source && imageSize.width > 0 && (
+            <img
+              src={source}
+              alt=""
+              draggable="false"
+              style={{
+                width: `${imageSize.width * transform.scale}px`,
+                height: `${imageSize.height * transform.scale}px`,
+                transform: `translate(-50%, -50%) translate(${transform.x}px, ${transform.y}px)`
+              }}
+            />
+          )}
+        </div>
+        {error && <p className="nds-inline-notice toolbox-cover-editor-error" data-variant="danger">{error}</p>}
+        <label className="toolbox-cover-zoom-field">
+          <span>Zoom</span>
+          <input className="nds-input" data-size="sm" type="range" min={baseScale} max={maxScale} step={Math.max(0.001, baseScale / 50)} value={transform.scale} onChange={(event) => updateScale(event.target.value)} />
+        </label>
+        <footer className="nds-modal-footer">
+          <button className="nds-button" data-size="sm" type="button" onClick={() => setTransform({ x: 0, y: 0, scale: baseScale })}>Réinitialiser</button>
+          <button className="nds-button" data-size="sm" type="button" onClick={onClose}>Annuler</button>
+          <button className="nds-button" data-size="sm" data-variant="primary" type="button" disabled={!imageSize.width || Boolean(error)} onClick={saveCover}>Valider</button>
+        </footer>
+      </section>
+    </div>
+  );
+}