fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-17 07:18:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

[wip]fix: use svelte component for optionsWidget

Browse Source
This commit is contained in:
Dhruv Ahuja
2023-07-06 08:13:00 +05:30
parent 63dc2a4cb6
commit 521c4938ed
4 changed files with 14 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/components/widgets/WidgetLayout.svelte
View File

@@ -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 -->

4
frontend/src/components/widgets/WidgetRow.svelte
View File

@@ -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")}

12
frontend/src/components/widgets/buttons/PopoverButton.svelte
View File

@@ -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">

4
frontend/src/wasm-communication/messages.ts
View File

@@ -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 = {