@nubase/terminal 0.0.0-stage → 0.1.0

package/out/renderer/assets/ImagePreview-DpnKfbxj.js

@@ -0,0 +1,120 @@
+import { $t as __toESM, Dt as Maximize, Yt as require_react, b as Button, g as formatBytes, nt as require_jsx_runtime, pt as Scan, q as cn, vt as Plus, wt as Minus, y as ActivityIndicator } from "./fileTypes-nBt-Y6NI.js";
+//#region src/builtin-extensions/files/previewers/ImagePreview.tsx
+var import_react = /* @__PURE__ */ __toESM(require_react(), 1);
+var import_jsx_runtime = /* @__PURE__ */ __toESM(require_jsx_runtime(), 1);
+var CHECKERBOARD = "repeating-conic-gradient(var(--muted) 0% 25%, transparent 0% 50%) 50% / 16px 16px";
+/** Fit-to-block by default; zoom with the buttons, ⌘/ctrl+wheel or a pinch. */
+var ImageView = ({ src, alt, caption }) => {
+	const [zoom, setZoom] = (0, import_react.useState)("fit");
+	const [size, setSize] = (0, import_react.useState)();
+	const [failed, setFailed] = (0, import_react.useState)(false);
+	const scrollRef = (0, import_react.useRef)(null);
+	(0, import_react.useEffect)(() => {
+		const element = scrollRef.current;
+		if (!element) return;
+		const onWheel = (event) => {
+			if (!event.ctrlKey && !event.metaKey) return;
+			event.preventDefault();
+			setZoom((current) => {
+				return clampZoom((current === "fit" ? fitScale(element, size) : current) * Math.exp(-event.deltaY / 200));
+			});
+		};
+		element.addEventListener("wheel", onWheel, { passive: false });
+		return () => element.removeEventListener("wheel", onWheel);
+	}, [size]);
+	const scale = zoom === "fit" ? void 0 : zoom;
+	const step = (factor) => setZoom((current) => clampZoom((current === "fit" ? fitScale(scrollRef.current, size) : current) * factor));
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex h-full flex-col",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			ref: scrollRef,
+			className: cn("relative min-h-0 flex-1 overflow-auto", zoom === "fit" && "flex items-center justify-center p-4"),
+			children: [!size && !failed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "absolute inset-0 flex items-center justify-center",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActivityIndicator, {})
+			}), failed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "flex h-full items-center justify-center text-muted-foreground text-sm",
+				children: "This image could not be decoded."
+			}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
+				src,
+				alt,
+				draggable: false,
+				onLoad: (e) => setSize({
+					width: e.currentTarget.naturalWidth,
+					height: e.currentTarget.naturalHeight
+				}),
+				onError: () => setFailed(true),
+				onDoubleClick: () => setZoom((z) => z === "fit" ? 1 : "fit"),
+				className: cn("shadow-sm", zoom === "fit" && "max-h-full max-w-full object-contain", !size && "invisible"),
+				style: {
+					background: CHECKERBOARD,
+					imageRendering: scale && scale >= 3 ? "pixelated" : void 0,
+					...scale && size ? {
+						width: size.width * scale,
+						height: size.height * scale,
+						maxWidth: "none",
+						margin: "auto",
+						display: "block"
+					} : {}
+				}
+			})]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "flex h-8 shrink-0 items-center gap-1 border-t px-2 text-muted-foreground text-xs",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+					className: "truncate px-1",
+					children: [size ? `${size.width} × ${size.height}` : "", caption ? ` · ${caption}` : ""]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1" }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+					variant: "ghost",
+					size: "icon-sm",
+					className: "size-6",
+					title: "Zoom out",
+					onClick: () => step(1 / 1.25),
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Minus, { size: 13 })
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "w-11 text-center tabular-nums",
+					children: zoom === "fit" ? "fit" : `${Math.round(zoom * 100)}%`
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+					variant: "ghost",
+					size: "icon-sm",
+					className: "size-6",
+					title: "Zoom in",
+					onClick: () => step(1.25),
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Plus, { size: 13 })
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+					variant: "ghost",
+					size: "icon-sm",
+					className: "size-6",
+					title: "Actual size",
+					onClick: () => setZoom(1),
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Scan, { size: 13 })
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+					variant: "ghost",
+					size: "icon-sm",
+					className: "size-6",
+					title: "Fit",
+					onClick: () => setZoom("fit"),
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Maximize, { size: 13 })
+				})
+			]
+		})]
+	});
+};
+var clampZoom = (value) => Math.min(32, Math.max(.05, value));
+var fitScale = (element, size) => {
+	if (!element || !size) return 1;
+	return Math.min(1, (element.clientWidth - 32) / size.width, (element.clientHeight - 32) / size.height);
+};
+var ImagePreview = ({ file }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImageView, {
+	src: file.url,
+	alt: file.name,
+	caption: formatBytes(file.size)
+}, file.url);
+//#endregion
+export { ImageView, ImagePreview as default };