From 521c4938ed773263f9a3b597631465736a3c733f Mon Sep 17 00:00:00 2001
From: Dhruv Ahuja <dhruvahuja2k@gmail.com>
Date: Thu, 6 Jul 2023 08:13:00 +0530
Subject: [PATCH] [wip]fix: use svelte component for optionsWidget

---
 frontend/src/components/widgets/WidgetLayout.svelte  |  3 ++-
 frontend/src/components/widgets/WidgetRow.svelte     |  4 +---
 .../components/widgets/buttons/PopoverButton.svelte  | 12 ++++++++----
 frontend/src/wasm-communication/messages.ts          |  4 +++-
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/widgets/WidgetLayout.svelte b/frontend/src/components/widgets/WidgetLayout.svelte
index dcd265ed13..7e8485ae40 100644
--- a/frontend/src/components/widgets/WidgetLayout.svelte
+++ b/frontend/src/components/widgets/WidgetLayout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { isWidgetColumn, isWidgetRow, isWidgetSection, type WidgetLayout } from "@graphite/wasm-communication/messages";
+	import { isWidgetColumn, isWidgetRow, isWidgetSection, LayoutGroup, type WidgetLayout } from "@graphite/wasm-communication/messages";
 
 	import WidgetSection from "@graphite/components/widgets/groups/WidgetSection.svelte";
 	import WidgetRow from "@graphite/components/widgets/WidgetRow.svelte";
@@ -12,6 +12,7 @@
 	$: extraClasses = Object.entries(classes)
 		.flatMap((classAndState) => (classAndState[1] ? [classAndState[0]] : []))
 		.join(" ");
+    console.log(layout);
 </script>
 
 <!-- TODO: Refactor this component (together with `WidgetRow.svelte`) to be more logically consistent with our layout definition goals, in terms of naming and capabilities -->
diff --git a/frontend/src/components/widgets/WidgetRow.svelte b/frontend/src/components/widgets/WidgetRow.svelte
index fb6d099c74..e2820a54eb 100644
--- a/frontend/src/components/widgets/WidgetRow.svelte
+++ b/frontend/src/components/widgets/WidgetRow.svelte
@@ -138,11 +138,9 @@
 		{/if}
 		{@const popoverButton = narrowWidgetProps(component.props, "PopoverButton")}
 		{#if popoverButton}
-			<PopoverButton {...exclude(popoverButton, ["header", "text"])}>
+			<PopoverButton {...exclude(popoverButton, ["header", "text", "optionsWidget", "layoutTarget"])}>
 				<TextLabel bold={true}>{popoverButton.header}</TextLabel>
 				<TextLabel multiline={true}>{popoverButton.text}</TextLabel>
-                <!-- ! how will this work? -->
-                <!-- <DropdownInput entries={popoverButton.options_widget}></DropdownInput> -->
 			</PopoverButton>
 		{/if}
 		{@const radioInput = narrowWidgetProps(component.props, "RadioInput")}
diff --git a/frontend/src/components/widgets/buttons/PopoverButton.svelte b/frontend/src/components/widgets/buttons/PopoverButton.svelte
index bc86a7c42d..553a6a7009 100644
--- a/frontend/src/components/widgets/buttons/PopoverButton.svelte
+++ b/frontend/src/components/widgets/buttons/PopoverButton.svelte
@@ -1,15 +1,18 @@
 <script lang="ts">
 	import type { IconName } from "@graphite/utility-functions/icons";
+	// import { LayoutGroup, WidgetLayout } from "~src/wasm-communication/messages";
 
 	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
-	import WidgetLayout from "../WidgetLayout.svelte";
+    import WidgetLayout from "../WidgetLayout.svelte";
 
 	export let icon: IconName = "DropdownArrow";
 	export let tooltip: string | undefined = undefined;
 	export let disabled = false;
-    export let options_widget: WidgetLayout | undefined = undefined;
+    export let optionsWidget: WidgetLayout;
+    export let layoutTarget: unknown;
+
 	// Callbacks
 	export let action: (() => void) | undefined = undefined;
 
@@ -19,14 +22,15 @@
 		open = true;
 		action?.();
 	}
+    // console.log(optionsWidget, layoutTarget);
 </script>
 
 <LayoutRow class="popover-button">
-    {#if options_widget === undefined}
+    {#if optionsWidget === undefined}
 	    <IconButton classes={{ open }} {disabled} action={() => onClick()} icon={icon || "DropdownArrow"} size={16} {tooltip} data-floating-menu-spawner />
     
     {:else}
-        <IconButton classes={{ open }} {disabled} action={() => onClick()} icon={icon || "DropdownArrow"} size={16} {options_widget} data-floating-menu-spawner />
+        <IconButton classes={{ open }} {disabled} action={() => onClick()} icon={icon || "DropdownArrow"} size={16} options_widget={optionsWidget} data-floating-menu-spawner />
     {/if}
 
 	<FloatingMenu {open} on:open={({ detail }) => (open = detail)} type="Popover" direction="Bottom">
diff --git a/frontend/src/wasm-communication/messages.ts b/frontend/src/wasm-communication/messages.ts
index 0c6cfab5cf..88d955a01e 100644
--- a/frontend/src/wasm-communication/messages.ts
+++ b/frontend/src/wasm-communication/messages.ts
@@ -4,6 +4,7 @@ import { Transform, Type, plainToClass } from "class-transformer";
 
 import { type IconName, type IconSize } from "@graphite/utility-functions/icons";
 import { type WasmEditorInstance, type WasmRawInstance } from "@graphite/wasm-communication/editor";
+import WidgetLayout from "~src/components/widgets/WidgetLayout.svelte";
 
 export class JsMessage {
 	// The marker provides a way to check if an object is a sub-class constructor for a jsMessage.
@@ -932,7 +933,8 @@ export class PopoverButton extends WidgetProps {
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltip!: string | undefined;
 
-    options_widget: WidgetLayout | undefined;
+    optionsWidget: WidgetLayout = defaultWidgetLayout();
+    layoutTarget: unknown = undefined;
 }
 
 export type RadioEntryData = {