From 28a5ff2f9f69680bf094a08d38f9e23a05ec95cd Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Tue, 25 Mar 2025 19:43:48 -0400
Subject: [PATCH] remove background from preview images

---
 frontend/realtime/src/KonvaApp/Nodes/index.ts |  1 +
 .../NodesManagers/SelectionManager.ts         | 13 ++++--
 .../NodesManagers/ToolbarNodeUtilities.ts     | 45 +++++++++++++++++++
 .../RenderingPrimitives/RealTimeDrawEngine.ts |  1 -
 4 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/frontend/realtime/src/KonvaApp/Nodes/index.ts b/frontend/realtime/src/KonvaApp/Nodes/index.ts
index ac42a11901..12954efed0 100644
--- a/frontend/realtime/src/KonvaApp/Nodes/index.ts
+++ b/frontend/realtime/src/KonvaApp/Nodes/index.ts
@@ -2,5 +2,6 @@ export { NodeType } from "./constants";
 export { BaseNode } from "./BaseNode";
 export { ImageNode } from "./ImageNode";
 export { VideoNode } from "./VideoNode";
+export { PreviewCopyNode } from "./PreviewCopy";
 export { TextNode } from "./TextNode";
 export { ShapeNode , ShapeType} from "./ShapeNode";
diff --git a/frontend/realtime/src/KonvaApp/NodesManagers/SelectionManager.ts b/frontend/realtime/src/KonvaApp/NodesManagers/SelectionManager.ts
index 4a8cf957e4..a1afa39e3b 100644
--- a/frontend/realtime/src/KonvaApp/NodesManagers/SelectionManager.ts
+++ b/frontend/realtime/src/KonvaApp/NodesManagers/SelectionManager.ts
@@ -4,11 +4,11 @@ import { MediaNode, Position, Transformation } from "../types";
 import { uiAccess, uiEvents } from "~/signals";
 import { NetworkedNode } from "../Nodes/NetworkedNode";
 import { LoadingBarStatus } from "~/components/ui";
-import { ImageNode, ShapeNode, TextNode, VideoNode } from "../Nodes";
+import { ImageNode, ShapeNode, TextNode, VideoNode, PreviewCopyNode } from "../Nodes";
 import {
   calculateContextualsPosition,
   getImageNodeButtonStates,
-  getMultiSelectButtonStates,
+  getMultiSelectButtonStates, getPreviewCopyNodeButtonStates,
   getShapeNodeButtonStates,
   getTextNodeButtonStates,
   getVideoNodeButtonStates,
@@ -292,8 +292,15 @@ export class SelectionManager {
           position: position
         });
       }
+      if (node instanceof PreviewCopyNode) {
+        showOrUpdate({
+          knodeIds: [node.kNode.id()],
+          locked: node.isLocked(),
+          buttonStates: getPreviewCopyNodeButtonStates({ locked: node.isLocked() }),
+          position: position
+        });
+      }
       else if (node instanceof ShapeNode) {
-        console.debug("Selected node is of type ShapeNode", node.kNode.id())
         showOrUpdate({
           knodeIds: [node.kNode.id()],
           locked: node.isLocked(),
diff --git a/frontend/realtime/src/KonvaApp/NodesManagers/ToolbarNodeUtilities.ts b/frontend/realtime/src/KonvaApp/NodesManagers/ToolbarNodeUtilities.ts
index 95c55cd7c5..747ec2bdc3 100644
--- a/frontend/realtime/src/KonvaApp/NodesManagers/ToolbarNodeUtilities.ts
+++ b/frontend/realtime/src/KonvaApp/NodesManagers/ToolbarNodeUtilities.ts
@@ -30,6 +30,7 @@ export function calculateContextualsPosition(kNode: Konva.Transformer) {
   }
   return { x: px, y: py };
 }
+
 export function getImageNodeButtonStates(
   props: { locked?: boolean | "unknown" } = {},
 ) {
@@ -73,6 +74,50 @@ export function getImageNodeButtonStates(
     {} as ContextualToolbarProps["buttonStates"],
   );
 }
+
+export function getPreviewCopyNodeButtonStates(
+    props: { locked?: boolean | "unknown" } = {},
+) {
+    const ButtonNames = ToolbarNodeButtonNames;
+    return Object.values(ButtonNames).reduce(
+        (buttonStates, buttonName) => {
+            // transform button depends on locked state
+            if (props.locked !== undefined && buttonName === ButtonNames.TRANSFORM) {
+                buttonStates.TRANSFORM = {
+                    disabled: props.locked === "unknown" || props.locked === true,
+                    hidden: false,
+                    active: true,
+                };
+                return buttonStates;
+            }
+
+            switch (buttonName) {
+                case ButtonNames.AI_STYLIZE:
+                case ButtonNames.SEGMENTATION:
+                case ButtonNames.DOWNLOAD:
+                case ButtonNames.CHROMA:
+                case ButtonNames.COLOR:
+                    // hidden buttons
+                    buttonStates[buttonName] = {
+                        disabled: true,
+                        hidden: true,
+                        active: false,
+                    };
+                    return buttonStates;
+
+                default:
+                    // all other buttons
+                    buttonStates[buttonName] = {
+                        disabled: false,
+                        hidden: false,
+                        active: false,
+                    };
+                    return buttonStates;
+            }
+        },
+        {} as ContextualToolbarProps["buttonStates"],
+    );
+}
 export function getTextNodeButtonStates(
   props: { locked?: boolean | "unknown" } = {},
 ) {
diff --git a/frontend/realtime/src/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts b/frontend/realtime/src/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts
index b050b5c023..28e5506d6c 100644
--- a/frontend/realtime/src/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts
+++ b/frontend/realtime/src/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts
@@ -217,7 +217,6 @@ export class RealTimeDrawEngine {
     this.previewCopyListener();
 
     this.listenToServerEvents();
-
   }
 
   public async listenToServerEvents() {