77 lines
2.6 KiB
TypeScript
77 lines
2.6 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useRef, useState } from "react";
|
||
|
||
/**
|
||
* SVGNest panel – same-origin iframe wrapper (clean, frameless).
|
||
* Also hides the legacy page’s heading/tagline for a minimal look.
|
||
*/
|
||
export default function SVGNestPanel() {
|
||
const iframeRef = useRef<HTMLIFrameElement | null>(null);
|
||
const [ready, setReady] = useState(false);
|
||
const [err, setErr] = useState<string | null>(null);
|
||
|
||
useEffect(() => {
|
||
const el = iframeRef.current;
|
||
if (!el) return;
|
||
|
||
const onLoad = () => {
|
||
setReady(true);
|
||
|
||
// Hide the legacy heading/tagline inside svgnest without touching the vendor files.
|
||
try {
|
||
const doc = el.contentDocument;
|
||
if (!doc) return;
|
||
|
||
// 1) Hide the first H1 (their title)
|
||
const h1 = doc.querySelector("h1");
|
||
if (h1) (h1 as HTMLElement).style.display = "none";
|
||
|
||
// 2) Hide any node that literally contains that tagline text
|
||
const all = Array.from(doc.querySelectorAll<HTMLElement>("body *"));
|
||
for (const n of all) {
|
||
const t = (n.textContent || "").trim().toLowerCase();
|
||
if (t.includes("automatically nests parts") && t.includes("exports svg")) {
|
||
n.style.display = "none";
|
||
}
|
||
}
|
||
|
||
// 3) Optional: tighten top padding/margins so content sits snugly
|
||
(doc.body as HTMLElement).style.marginTop = "4px";
|
||
} catch {
|
||
// ignore; same-origin so this should succeed
|
||
}
|
||
};
|
||
|
||
const onError = () => setErr("Failed to load /svgnest/index.html");
|
||
|
||
el.addEventListener("load", onLoad);
|
||
el.addEventListener("error", onError);
|
||
return () => {
|
||
el.removeEventListener("load", onLoad);
|
||
el.removeEventListener("error", onError);
|
||
};
|
||
}, []);
|
||
|
||
return (
|
||
<div className="w-full">
|
||
{!ready && !err && (
|
||
<div className="mb-2 text-sm text-zinc-400">Loading SVGnest…</div>
|
||
)}
|
||
{err && (
|
||
<div className="mb-2 rounded border border-rose-600/40 bg-rose-600/10 p-3 text-sm">
|
||
Couldn’t load SVGnest: {err}
|
||
</div>
|
||
)}
|
||
|
||
{/* Frameless iframe (no border, no wrapper frame) */}
|
||
<iframe
|
||
ref={iframeRef}
|
||
src="/svgnest/index.html"
|
||
title="SVGNest"
|
||
className="w-full"
|
||
style={{ height: "72vh", background: "transparent", border: "none" }}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|