From 0b65af00bdb6ce240dff85e646dd396c11cb13b3 Mon Sep 17 00:00:00 2001 From: "Lu[ke] Wilson" Date: Fri, 24 Nov 2023 12:09:38 +0000 Subject: [PATCH 1/5] custom frame svg --- src/app/globals.css | 4 ++++ src/components/live-image.tsx | 24 +++++++++++++++++++++++- 2 files changed, 27 insertions(+), 1 deletion(-) 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) { From 72ef944b8b9830917745d49724878b7806ba8895 Mon Sep 17 00:00:00 2001 From: "Lu[ke] Wilson" Date: Fri, 24 Nov 2023 12:19:10 +0000 Subject: [PATCH 2/5] mask frame --- src/app/page.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/app/page.tsx b/src/app/page.tsx index a2dfb74..0bb725c 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -17,6 +17,15 @@ const tools = [LiveImageTool]; export default function Home() { const onEditorMount = (editor: Editor) => { + // @ts-expect-error: patch + editor.isShapeOfType = function (arg, type) { + const shape = typeof arg === "string" ? this.getShape(arg)! : arg; + if (shape.type === "live-image" && type === "frame") { + return true; + } + return shape.type === type; + }; + // If there isn't a live image shape, create one const liveImage = editor.getCurrentPageShapes().find((shape) => { return shape.type === "live-image"; From 7d8529c63662146c4e80037ea16f643552e94df0 Mon Sep 17 00:00:00 2001 From: "Lu[ke] Wilson" Date: Fri, 24 Nov 2023 12:21:54 +0000 Subject: [PATCH 3/5] always update frame --- src/components/live-image.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/live-image.tsx b/src/components/live-image.tsx index ab3765a..c196529 100644 --- a/src/components/live-image.tsx +++ b/src/components/live-image.tsx @@ -157,9 +157,9 @@ export class LiveImageShapeUtil extends FrameShapeUtil { const iteration = startedIteration.current++; - const shapes = Array.from(editor.getShapeAndDescendantIds([shape.id])) - .filter((id) => id !== shape.id) - .map((id) => editor.getShape(id)) as TLShape[]; + const shapes = Array.from( + editor.getShapeAndDescendantIds([shape.id]) + ).map((id) => editor.getShape(id)) as TLShape[]; // Check if should submit request const shapesDigest = JSON.stringify(shapes); From 140018c6efe71da2c1fbafa280aecb272261331a Mon Sep 17 00:00:00 2001 From: "Lu[ke] Wilson" Date: Fri, 24 Nov 2023 12:25:06 +0000 Subject: [PATCH 4/5] comment out for now --- src/app/globals.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 45a1904..a52ec60 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -28,6 +28,6 @@ body { rgb(var(--background-start-rgb)); } -.tl-frame-heading { +/* .tl-frame-heading { display: none; -} +} */ From 9b6ae6d756ee470a5869863b5788ef4f23c59d17 Mon Sep 17 00:00:00 2001 From: "Lu[ke] Wilson" Date: Fri, 24 Nov 2023 12:40:39 +0000 Subject: [PATCH 5/5] cant unmount --- src/components/live-image.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/live-image.tsx b/src/components/live-image.tsx index c196529..56b554b 100644 --- a/src/components/live-image.tsx +++ b/src/components/live-image.tsx @@ -56,6 +56,8 @@ export class LiveImageShapeUtil extends FrameShapeUtil { }; } + override canUnmount = () => false; + override toSvg(shape: TLFrameShape) { const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode(),