@mdbase-dev/ui 0.1.0-beta.126 → 0.1.0-beta.147

package/dist/FeedbackMarkup.d.ts

@@ -12,7 +12,7 @@ export interface FeedbackMark {
 export declare function paintFeedbackMarks(context: CanvasRenderingContext2D, image: CanvasImageSource, marks: readonly FeedbackMark[]): void;
 export declare function FeedbackMarkup({ screenshot, onApply, onClose }: {
     screenshot: FeedbackScreenshot;
-    onApply(screenshot: FeedbackScreenshot): void;
+    onApply(screenshot: FeedbackScreenshot, count: number): void;
     onClose(): void;
 }): import("react").JSX.Element;
 export {};

package/dist/FeedbackMarkup.js

@@ -1,136 +1,337 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { i18n as _i18n } from "@lingui/core";
+import { useLocaleRevision } from "./i18n.js";
 import { useEffect, useId, useRef, useState } from "react";
 import { Dialog } from "./Dialog.js";
 import { screenshotFromCanvas, screenshotUrl } from "./feedback-data.js";
 /** Redactions render last and replace whole pixels. Export is a flattened raster, never layers. */
 export function paintFeedbackMarks(context, image, marks) {
-    const { width, height } = context.canvas;
-    context.clearRect(0, 0, width, height);
-    context.drawImage(image, 0, 0);
-    for (const mark of [...marks.filter((m) => m.tool !== "blackout"), ...marks.filter((m) => m.tool === "blackout")]) {
-        const first = mark.points[0], last = mark.points.at(-1);
-        if (!first || !last)
-            continue;
-        context.save();
-        if (mark.tool === "draw") {
-            context.strokeStyle = "#df3c32";
-            context.lineWidth = Math.max(3, width / 360);
-            context.lineCap = "round";
-            context.lineJoin = "round";
-            context.beginPath();
-            context.moveTo(first.x, first.y);
-            for (const point of mark.points.slice(1))
-                context.lineTo(point.x, point.y);
-            context.stroke();
-        }
-        else {
-            const x = Math.floor(Math.min(first.x, last.x)), y = Math.floor(Math.min(first.y, last.y));
-            context.fillStyle = mark.tool === "blackout" ? "#000" : "rgba(255, 214, 48, .42)";
-            context.fillRect(x, y, Math.ceil(Math.max(first.x, last.x)) - x, Math.ceil(Math.max(first.y, last.y)) - y);
-        }
-        context.restore();
+  const {
+    width,
+    height
+  } = context.canvas;
+  context.clearRect(0, 0, width, height);
+  context.drawImage(image, 0, 0);
+  for (const mark of [...marks.filter(m => m.tool !== "blackout"), ...marks.filter(m => m.tool === "blackout")]) {
+    const first = mark.points[0],
+      last = mark.points.at(-1);
+    if (!first || !last) continue;
+    context.save();
+    if (mark.tool === "draw") {
+      context.strokeStyle = "#df3c32";
+      context.lineWidth = Math.max(3, width / 360);
+      context.lineCap = "round";
+      context.lineJoin = "round";
+      context.beginPath();
+      context.moveTo(first.x, first.y);
+      for (const point of mark.points.slice(1)) context.lineTo(point.x, point.y);
+      context.stroke();
+    } else {
+      const x = Math.floor(Math.min(first.x, last.x)),
+        y = Math.floor(Math.min(first.y, last.y));
+      context.fillStyle = mark.tool === "blackout" ? "#000" : "rgba(255, 214, 48, .42)";
+      context.fillRect(x, y, Math.ceil(Math.max(first.x, last.x)) - x, Math.ceil(Math.max(first.y, last.y)) - y);
     }
+    context.restore();
+  }
 }
-export function FeedbackMarkup({ screenshot, onApply, onClose }) {
-    const canvas = useRef(null);
-    const image = useRef(null);
-    const marks = useRef([]);
-    const current = useRef(null);
-    const cursor = useRef(null);
-    const [tool, setTool] = useState("draw");
-    const [count, setCount] = useState(0);
-    const [ready, setReady] = useState(false);
-    const [busy, setBusy] = useState(false);
-    const [error, setError] = useState("");
-    const instructions = useId();
-    function paint(showCursor = true) {
-        const context = canvas.current?.getContext("2d");
-        if (!context || !image.current)
-            return;
-        paintFeedbackMarks(context, image.current, current.current ? [...marks.current, current.current] : marks.current);
-        if (showCursor && cursor.current) {
-            context.strokeStyle = "#1267ad";
-            context.lineWidth = 2;
-            context.beginPath();
-            context.arc(cursor.current.x, cursor.current.y, 7, 0, Math.PI * 2);
-            context.stroke();
-        }
+export function FeedbackMarkup({
+  screenshot,
+  onApply,
+  onClose
+}) {
+  useLocaleRevision();
+  const canvas = useRef(null);
+  const image = useRef(null);
+  const marks = useRef([]);
+  const current = useRef(null);
+  const cursor = useRef(null);
+  const [tool, setTool] = useState("draw");
+  const [count, setCount] = useState(0);
+  const [ready, setReady] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const instructions = useId();
+  function paint(showCursor = true) {
+    const context = canvas.current?.getContext("2d");
+    if (!context || !image.current) return;
+    paintFeedbackMarks(context, image.current, current.current ? [...marks.current, current.current] : marks.current);
+    if (showCursor && cursor.current) {
+      context.strokeStyle = "#1267ad";
+      context.lineWidth = 2;
+      context.beginPath();
+      context.arc(cursor.current.x, cursor.current.y, 7, 0, Math.PI * 2);
+      context.stroke();
     }
-    useEffect(() => {
-        let live = true;
-        const decoded = new Image();
-        decoded.src = screenshotUrl(screenshot);
-        void decoded.decode().then(() => {
-            if (!live || !canvas.current)
-                return;
-            image.current = decoded;
-            canvas.current.width = decoded.naturalWidth;
-            canvas.current.height = decoded.naturalHeight;
+  }
+  useEffect(() => {
+    let live = true;
+    const decoded = new Image();
+    decoded.src = screenshotUrl(screenshot);
+    void decoded.decode().then(() => {
+      if (!live || !canvas.current) return;
+      image.current = decoded;
+      canvas.current.width = decoded.naturalWidth;
+      canvas.current.height = decoded.naturalHeight;
+      paint();
+      setReady(true);
+    }).catch(() => {
+      if (live) setError(_i18n._(
+      /** i18n */
+      {
+        id: "lnc6-d",
+        message: "The screenshot could not be opened for markup."
+      }));
+    });
+    return () => {
+      live = false;
+      image.current = null;
+      marks.current = [];
+      current.current = null;
+    };
+  }, [screenshot]);
+  function finish() {
+    if (current.current && current.current.points.length > 1 && marks.current.length < 100) marks.current.push(current.current);
+    current.current = null;
+    setCount(marks.current.length);
+    paint();
+  }
+  function coordinate(clientX, clientY) {
+    const element = canvas.current;
+    const rect = element.getBoundingClientRect();
+    return {
+      x: Math.max(0, Math.min(element.width, (clientX - rect.left) * element.width / rect.width)),
+      y: Math.max(0, Math.min(element.height, (clientY - rect.top) * element.height / rect.height))
+    };
+  }
+  return _jsxs(Dialog, {
+    open: true,
+    onClose: onClose,
+    closeDisabled: busy,
+    title: _i18n._(
+    /** i18n */
+    {
+      id: "wsx-_Y",
+      message: "Mark up screenshot"
+    }),
+    className: "mdbase-feedback-markup",
+    children: [_jsxs("div", {
+      className: "mdbase-feedback-tools",
+      role: "group",
+      "aria-label": _i18n._(
+      /** i18n */
+      {
+        id: "VyuLii",
+        message: "Screenshot tools"
+      }),
+      children: [["draw", "highlight", "blackout"].map(value => _jsx("button", {
+        type: "button",
+        "aria-pressed": tool === value,
+        disabled: !ready || busy,
+        onClick: () => {
+          current.current = null;
+          setTool(value);
+          paint();
+        },
+        children: value === "draw" ? _i18n._(
+        /** i18n */
+        {
+          id: "2vTp2v",
+          message: "Draw"
+        }) : value === "highlight" ? _i18n._(
+        /** i18n */
+        {
+          id: "gtEbeW",
+          message: "Highlight"
+        }) : _i18n._(
+        /** i18n */
+        {
+          id: "o7QK4c",
+          message: "Blackout"
+        })
+      }, value)), _jsx("button", {
+        type: "button",
+        disabled: !count || busy,
+        onClick: () => {
+          current.current = null;
+          marks.current.pop();
+          setCount(marks.current.length);
+          paint();
+        },
+        children: _i18n._(
+        /** i18n */
+        {
+          id: "9uI_rE",
+          message: "Undo"
+        })
+      }), _jsx("button", {
+        type: "button",
+        disabled: !count || busy,
+        onClick: () => {
+          current.current = null;
+          marks.current = [];
+          setCount(0);
+          paint();
+        },
+        children: _i18n._(
+        /** i18n */
+        {
+          id: "1AZHba",
+          message: "Reset",
+          context: "Screenshot annotations"
+        })
+      })]
+    }), _jsx("div", {
+      className: "mdbase-feedback-canvas",
+      children: _jsx("canvas", {
+        ref: canvas,
+        tabIndex: 0,
+        "aria-label": _i18n._(
+        /** i18n */
+        {
+          id: "cM8Pei",
+          message: "Screenshot annotation canvas"
+        }),
+        "aria-describedby": instructions,
+        onPointerDown: event => {
+          if (!ready || busy || event.button !== 0) return;
+          if (marks.current.length >= 100) {
+            setError(_i18n._(
+            /** i18n */
+            {
+              id: "BfJnph",
+              message: "Up to 100 marks can be applied. Undo or reset to make another mark."
+            }));
+            return;
+          }
+          cursor.current = null;
+          event.currentTarget.setPointerCapture(event.pointerId);
+          current.current = {
+            tool,
+            points: [coordinate(event.clientX, event.clientY)]
+          };
+        },
+        onPointerMove: event => {
+          if (current.current && event.currentTarget.hasPointerCapture(event.pointerId) && current.current.points.length < 2000) {
+            current.current.points.push(coordinate(event.clientX, event.clientY));
             paint();
-            setReady(true);
-        }).catch(() => { if (live)
-            setError("The screenshot could not be opened for markup."); });
-        return () => { live = false; image.current = null; marks.current = []; current.current = null; };
-    }, [screenshot]);
-    function finish() {
-        if (current.current && current.current.points.length > 1 && marks.current.length < 100)
-            marks.current.push(current.current);
-        current.current = null;
-        setCount(marks.current.length);
-        paint();
-    }
-    function coordinate(clientX, clientY) {
-        const element = canvas.current;
-        const rect = element.getBoundingClientRect();
-        return { x: Math.max(0, Math.min(element.width, (clientX - rect.left) * element.width / rect.width)), y: Math.max(0, Math.min(element.height, (clientY - rect.top) * element.height / rect.height)) };
-    }
-    return _jsxs(Dialog, { open: true, onClose: onClose, closeDisabled: busy, title: "Mark up screenshot", className: "mdbase-feedback-markup", children: [_jsxs("div", { className: "mdbase-feedback-tools", role: "group", "aria-label": "Screenshot tools", children: [["draw", "highlight", "blackout"].map((value) => _jsx("button", { type: "button", "aria-pressed": tool === value, disabled: !ready || busy, onClick: () => { current.current = null; setTool(value); paint(); }, children: value === "draw" ? "Draw" : value === "highlight" ? "Highlight" : "Blackout" }, value)), _jsx("button", { type: "button", disabled: !count || busy, onClick: () => { current.current = null; marks.current.pop(); setCount(marks.current.length); paint(); }, children: "Undo" }), _jsx("button", { type: "button", disabled: !count || busy, onClick: () => { current.current = null; marks.current = []; setCount(0); paint(); }, children: "Reset" })] }), _jsx("div", { className: "mdbase-feedback-canvas", children: _jsx("canvas", { ref: canvas, tabIndex: 0, "aria-label": "Screenshot annotation canvas", "aria-describedby": instructions, onPointerDown: (event) => {
-                        if (!ready || busy || event.button !== 0)
-                            return;
-                        if (marks.current.length >= 100) {
-                            setError("Up to 100 marks can be applied. Undo or reset to make another mark.");
-                            return;
-                        }
-                        cursor.current = null;
-                        event.currentTarget.setPointerCapture(event.pointerId);
-                        current.current = { tool, points: [coordinate(event.clientX, event.clientY)] };
-                    }, onPointerMove: (event) => { if (current.current && event.currentTarget.hasPointerCapture(event.pointerId) && current.current.points.length < 2000) {
-                        current.current.points.push(coordinate(event.clientX, event.clientY));
-                        paint();
-                    } }, onPointerUp: (event) => { if (event.currentTarget.hasPointerCapture(event.pointerId)) {
-                        current.current?.points.push(coordinate(event.clientX, event.clientY));
-                        finish();
-                        event.currentTarget.releasePointerCapture(event.pointerId);
-                    } }, onPointerCancel: () => { current.current = null; paint(); }, onKeyDown: (event) => {
-                        if (!ready || busy || !["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", " ", "Enter"].includes(event.key))
-                            return;
-                        event.preventDefault();
-                        cursor.current ??= { x: event.currentTarget.width / 2, y: event.currentTarget.height / 2 };
-                        if (event.key === " " || event.key === "Enter") {
-                            if (current.current) {
-                                current.current.points.push({ ...cursor.current });
-                                finish();
-                            }
-                            else if (marks.current.length < 100)
-                                current.current = { tool, points: [{ ...cursor.current }] };
-                            else
-                                setError("Up to 100 marks can be applied. Undo or reset to make another mark.");
-                        }
-                        else {
-                            const step = event.shiftKey ? 50 : 10;
-                            cursor.current.x = Math.max(0, Math.min(event.currentTarget.width, cursor.current.x + (event.key === "ArrowRight" ? step : event.key === "ArrowLeft" ? -step : 0)));
-                            cursor.current.y = Math.max(0, Math.min(event.currentTarget.height, cursor.current.y + (event.key === "ArrowDown" ? step : event.key === "ArrowUp" ? -step : 0)));
-                            if (current.current && current.current.points.length < 2000)
-                                current.current.points.push({ ...cursor.current });
-                        }
-                        paint();
-                    } }) }), _jsx("p", { id: instructions, className: "mdbase-feedback-help", children: "Drag to mark. Keyboard: arrows move; Space starts or finishes. Blackout removes pixels." }), _jsxs("span", { className: "mdbase-feedback-sr-only", role: "status", children: [count, " marks applied."] }), error && _jsx("p", { role: "alert", children: error }), _jsxs("div", { className: "mdbase-feedback-actions", children: [_jsx("button", { type: "button", disabled: busy, onClick: onClose, children: "Cancel" }), _jsx("button", { type: "button", className: "mdbase-feedback-primary", disabled: !ready || busy, onClick: () => {
-                            if (!canvas.current)
-                                return;
-                            finish();
-                            paint(false);
-                            setBusy(true);
-                            setError("");
-                            void screenshotFromCanvas(canvas.current).then(onApply).catch((reason) => { setBusy(false); setError(reason instanceof Error ? reason.message : "The screenshot could not be saved."); });
-                        }, children: busy ? "Applying…" : "Apply changes" })] })] });
+          }
+        },
+        onPointerUp: event => {
+          if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+            current.current?.points.push(coordinate(event.clientX, event.clientY));
+            finish();
+            event.currentTarget.releasePointerCapture(event.pointerId);
+          }
+        },
+        onPointerCancel: () => {
+          current.current = null;
+          paint();
+        },
+        onKeyDown: event => {
+          if (!ready || busy || !["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", " ", "Enter"].includes(event.key)) return;
+          event.preventDefault();
+          cursor.current ??= {
+            x: event.currentTarget.width / 2,
+            y: event.currentTarget.height / 2
+          };
+          if (event.key === " " || event.key === "Enter") {
+            if (current.current) {
+              current.current.points.push({
+                ...cursor.current
+              });
+              finish();
+            } else if (marks.current.length < 100) current.current = {
+              tool,
+              points: [{
+                ...cursor.current
+              }]
+            };else setError(_i18n._(
+            /** i18n */
+            {
+              id: "BfJnph",
+              message: "Up to 100 marks can be applied. Undo or reset to make another mark."
+            }));
+          } else {
+            const step = event.shiftKey ? 50 : 10;
+            cursor.current.x = Math.max(0, Math.min(event.currentTarget.width, cursor.current.x + (event.key === "ArrowRight" ? step : event.key === "ArrowLeft" ? -step : 0)));
+            cursor.current.y = Math.max(0, Math.min(event.currentTarget.height, cursor.current.y + (event.key === "ArrowDown" ? step : event.key === "ArrowUp" ? -step : 0)));
+            if (current.current && current.current.points.length < 2000) current.current.points.push({
+              ...cursor.current
+            });
+          }
+          paint();
+        }
+      })
+    }), _jsx("p", {
+      id: instructions,
+      className: "mdbase-feedback-help",
+      children: _i18n._(
+      /** i18n */
+      {
+        id: "P71euV",
+        message: "Drag to mark. Keyboard: arrows move; Space starts or finishes. Blackout removes pixels."
+      })
+    }), _jsx("span", {
+      className: "mdbase-feedback-sr-only",
+      role: "status",
+      children: _i18n._(
+      /** i18n */
+      {
+        id: "ITLqil",
+        message: "{count, plural, one {# mark applied.} other {# marks applied.}}",
+        values: {
+          count: count
+        }
+      })
+    }), error && _jsx("p", {
+      role: "alert",
+      children: error
+    }), _jsxs("div", {
+      className: "mdbase-feedback-actions",
+      children: [_jsx("button", {
+        type: "button",
+        disabled: busy,
+        onClick: onClose,
+        children: _i18n._(
+        /** i18n */
+        {
+          id: "dEgA5A",
+          message: "Cancel"
+        })
+      }), _jsx("button", {
+        type: "button",
+        className: "mdbase-feedback-primary",
+        disabled: !ready || busy,
+        onClick: () => {
+          if (!canvas.current) return;
+          finish();
+          paint(false);
+          setBusy(true);
+          setError("");
+          const count = marks.current.length;
+          void screenshotFromCanvas(canvas.current).then(screenshot => onApply(screenshot, count)).catch(reason => {
+            setBusy(false);
+            setError(reason instanceof Error ? reason.message : _i18n._(
+            /** i18n */
+            {
+              id: "37unnc",
+              message: "The screenshot could not be saved."
+            }));
+          });
+        },
+        children: busy ? _i18n._(
+        /** i18n */
+        {
+          id: "wdRxTD",
+          message: "Applying\u2026"
+        }) : _i18n._(
+        /** i18n */
+        {
+          id: "PWh9Ii",
+          message: "Apply changes"
+        })
+      })]
+    })]
+  });
 }