svgnest render fix
This commit is contained in:
parent
13879407f7
commit
582cafca0b
2 changed files with 48 additions and 110 deletions
|
|
@ -1,4 +1,3 @@
|
|||
// components/portal/UtilitySwitcher.tsx
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
|
|
@ -35,71 +34,13 @@ const FileBrowserPanel = dynamic(
|
|||
);
|
||||
|
||||
const ITEMS: Item[] = [
|
||||
// ✅ Laser Toolkit now renders inline with sub-tabs
|
||||
{
|
||||
key: "laser-toolkit",
|
||||
label: "Laser Toolkit",
|
||||
note: "convert laser settings, interval and more",
|
||||
icon: "toolkit.png",
|
||||
component: LaserToolkitSwitcher,
|
||||
href: "https://makearmy.io/laser-toolkit", // optional; component takes precedence
|
||||
},
|
||||
|
||||
// ✅ File Server inline (no iframe)
|
||||
{
|
||||
key: "files",
|
||||
label: "File Server",
|
||||
note: "download from our file explorer",
|
||||
icon: "fs.png",
|
||||
component: FileBrowserPanel,
|
||||
href: "https://makearmy.io/files",
|
||||
},
|
||||
|
||||
// Buying Guide moved to main portal tab — remove here to avoid duplication
|
||||
// { key: "buying-guide", ... }
|
||||
|
||||
// ✅ SVGnest inline (micro-frontend wrapper)
|
||||
{
|
||||
key: "svgnest",
|
||||
label: "SVGnest",
|
||||
note: "automatically nests parts and exports svg",
|
||||
icon: "nest.png",
|
||||
component: SVGNestPanel,
|
||||
href: "https://makearmy.io/svgnest",
|
||||
},
|
||||
|
||||
// ✅ Background Remover inline
|
||||
{
|
||||
key: "background-remover",
|
||||
label: "BG Remover",
|
||||
note: "open source background remover",
|
||||
icon: "bgrm.png",
|
||||
component: BackgroundRemoverPanel,
|
||||
href: "https://makearmy.io/background-remover",
|
||||
},
|
||||
|
||||
// Subdomains (new tab)
|
||||
{
|
||||
key: "picsur",
|
||||
label: "Picsur",
|
||||
note: "Simple Image Host",
|
||||
icon: "picsur.png",
|
||||
href: "https://images.makearmy.io",
|
||||
},
|
||||
{
|
||||
key: "privatebin",
|
||||
label: "PrivateBin",
|
||||
note: "Encrypted internet clipboard",
|
||||
icon: "privatebin.png",
|
||||
href: "https://paste.makearmy.io/",
|
||||
},
|
||||
{
|
||||
key: "forgejo",
|
||||
label: "Forgejo",
|
||||
note: "git for our community members",
|
||||
icon: "forgejo.png",
|
||||
href: "https://forge.makearmy.io",
|
||||
},
|
||||
{ key: "laser-toolkit", label: "Laser Toolkit", note: "convert laser settings, interval and more", icon: "toolkit.png", component: LaserToolkitSwitcher, href: "https://makearmy.io/laser-toolkit" },
|
||||
{ key: "files", label: "File Server", note: "download from our file explorer", icon: "fs.png", component: FileBrowserPanel, href: "https://makearmy.io/files" },
|
||||
{ key: "svgnest", label: "SVGnest", note: "automatically nests parts and exports svg", icon: "nest.png", component: SVGNestPanel, href: "https://makearmy.io/svgnest" },
|
||||
{ key: "background-remover", label: "BG Remover", note: "open source background remover", icon: "bgrm.png", component: BackgroundRemoverPanel, href: "https://makearmy.io/background-remover" },
|
||||
{ key: "picsur", label: "Picsur", note: "Simple Image Host", icon: "picsur.png", href: "https://images.makearmy.io" },
|
||||
{ key: "privatebin", label: "PrivateBin", note: "Encrypted internet clipboard", icon: "privatebin.png", href: "https://paste.makearmy.io/" },
|
||||
{ key: "forgejo", label: "Forgejo", note: "git for our community members", icon: "forge.png", href: "https://forge.makearmy.io" },
|
||||
];
|
||||
|
||||
function isExternal(urlStr: string | undefined) {
|
||||
|
|
@ -112,7 +53,6 @@ function isExternal(urlStr: string | undefined) {
|
|||
}
|
||||
}
|
||||
|
||||
/** For on-site URLs, convert absolute https://makearmy.io/path → /path for iframe src */
|
||||
function toOnsitePath(urlStr: string): string {
|
||||
try {
|
||||
const u = new URL(urlStr);
|
||||
|
|
@ -128,7 +68,7 @@ function Panel({ item }: { item: Item }) {
|
|||
const Cmp = item.component;
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{item.note ? <div className="text-sm opacity-70">{item.note}</div> : null}
|
||||
{/* Removed notes/headers to keep UI clean */}
|
||||
<Cmp embedded />
|
||||
</div>
|
||||
);
|
||||
|
|
@ -138,16 +78,8 @@ function Panel({ item }: { item: Item }) {
|
|||
if (external) {
|
||||
return (
|
||||
<div className="space-y-2 text-sm">
|
||||
<div>
|
||||
Opened <span className="font-medium">{item.label}</span> in a new tab.
|
||||
</div>
|
||||
<a
|
||||
href={item.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline"
|
||||
>
|
||||
Click here if it didn’t open.
|
||||
<a href={item.href} target="_blank" rel="noopener noreferrer" className="underline">
|
||||
Open {item.label}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -155,15 +87,13 @@ function Panel({ item }: { item: Item }) {
|
|||
|
||||
const src = toOnsitePath(item.href || "/");
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{item.note ? <div className="text-sm opacity-70">{item.note}</div> : null}
|
||||
<iframe
|
||||
key={src}
|
||||
src={src}
|
||||
className="w-full h-[72vh] rounded-md border"
|
||||
sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
|
||||
className="w-full"
|
||||
style={{ height: "72vh" }}
|
||||
// no sandbox; needs drag/drop etc.
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -212,6 +142,7 @@ export default function UtilitySwitcher() {
|
|||
|
||||
return (
|
||||
<div>
|
||||
{/* top buttons unchanged */}
|
||||
<div className="mb-4 flex flex-wrap items-center gap-2">
|
||||
{ITEMS.map((it) => {
|
||||
const isInline = Boolean(it.component);
|
||||
|
|
@ -257,9 +188,8 @@ export default function UtilitySwitcher() {
|
|||
})}
|
||||
</div>
|
||||
|
||||
<div className="rounded-md border p-4">
|
||||
{/* ⛔️ removed the old border/padding frame here */}
|
||||
<Panel item={activeItem} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,21 +3,46 @@
|
|||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
/**
|
||||
* SVGNest panel – same-origin iframe wrapper.
|
||||
* Renders /public/svgnest/index.html in an isolated doc so the legacy app can
|
||||
* own the DOM/CSS/JS without conflicting with Next.js styles or scripts.
|
||||
* 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);
|
||||
|
||||
// Basic load/error status for UX
|
||||
useEffect(() => {
|
||||
const el = iframeRef.current;
|
||||
if (!el) return;
|
||||
|
||||
const onLoad = () => setReady(true);
|
||||
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);
|
||||
|
|
@ -39,31 +64,14 @@ export default function SVGNestPanel() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* Same-origin iframe, no sandbox to allow drag/drop, file dialogs, workers, etc. */}
|
||||
{/* Frameless iframe (no border, no wrapper frame) */}
|
||||
<iframe
|
||||
ref={iframeRef}
|
||||
src="/svgnest/index.html"
|
||||
title="SVGNest"
|
||||
className="w-full rounded-md border"
|
||||
style={{
|
||||
height: "72vh",
|
||||
background: "transparent",
|
||||
}}
|
||||
className="w-full"
|
||||
style={{ height: "72vh", background: "transparent", border: "none" }}
|
||||
/>
|
||||
|
||||
{/* Fallback open-in-new-tab helper */}
|
||||
<div className="mt-2 text-xs text-zinc-400">
|
||||
If the app doesn’t respond,{" "}
|
||||
<a
|
||||
href="/svgnest/index.html"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline"
|
||||
>
|
||||
open SVGnest in a new tab
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue