diff --git a/src/app/globals.css b/src/app/globals.css index 85d9838..45a1904 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -27,3 +27,7 @@ body { ) rgb(var(--background-start-rgb)); } + +.tl-frame-heading { + display: none; +} diff --git a/src/components/live-image.tsx b/src/components/live-image.tsx index f8ddd63..ab3765a 100644 --- a/src/components/live-image.tsx +++ b/src/components/live-image.tsx @@ -1,9 +1,12 @@ /* eslint-disable @next/next/no-img-element */ /* eslint-disable react-hooks/rules-of-hooks */ import { + canonicalizeRotation, FrameShapeUtil, + getDefaultColorTheme, getSvgAsImage, HTMLContainer, + SelectionEdge, TLEventMapHandler, TLFrameShape, TLShape, @@ -53,6 +56,21 @@ export class LiveImageShapeUtil extends FrameShapeUtil { }; } + override toSvg(shape: TLFrameShape) { + const theme = getDefaultColorTheme({ + isDarkMode: this.editor.user.getIsDarkMode(), + }); + const g = document.createElementNS("http://www.w3.org/2000/svg", "g"); + + const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); + rect.setAttribute("width", shape.props.w.toString()); + rect.setAttribute("height", shape.props.h.toString()); + rect.setAttribute("fill", theme.solid); + g.appendChild(rect); + + return g; + } + override component(shape: TLFrameShape) { const editor = useEditor(); const component = super.component(shape); @@ -150,7 +168,11 @@ export class LiveImageShapeUtil extends FrameShapeUtil { } imageDigest.current = shapesDigest; - const svg = await editor.getSvg(shapes, { background: true }); + const svg = await editor.getSvg([shape], { + background: true, + padding: 0, + darkMode: editor.user.getIsDarkMode(), + }); if (iteration <= finishedIteration.current) return; if (!svg) {