mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-07-07 15:55:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

phase 2: update bindings to svelte 5 for files in runesGlob

Browse source
This commit is contained in:
Smit 2025-06-19 03:04:55 +05:30
parent 7872610d14
commit c07f4b32af
42 changed files with 1299 additions and 898 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/app.d.ts vendored
View file

@ -2,6 +2,7 @@ declare global {
namespace Graphite {
type Platform = "Windows" | "Mac" | "Linux" | "Web";
type MenuType = "Popover" | "Dropdown" | "Dialog" | "Cursor";
type Axis = "Horizontal" | "Vertical";
// interface Error {}
}

208
frontend/src/components/floating-menus/ColorPicker.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts">
import { onDestroy, createEventDispatcher, getContext } from "svelte";
import { onDestroy, getContext } from "svelte";
import type { Editor } from "@graphite/editor";
import type { HSV, RGB, FillChoice } from "@graphite/messages";
@ -33,43 +33,48 @@
};
const editor = getContext<Editor>("editor");
interface Props {
colorOrGradient: FillChoice;
allowNone?: boolean;
// export let allowTransparency = false; // TODO: Implement
direction?: MenuDirection;
// TODO: See if this should be made to follow the pattern of DropdownInput.svelte so this could be removed
open: boolean;
oncolorOrGradient?: (colorOrGradient: FillChoice) => void;
onstartHistoryTransaction?: () => void;
}
const dispatch = createEventDispatcher<{ colorOrGradient: FillChoice; startHistoryTransaction: undefined }>();
export let colorOrGradient: FillChoice;
export let allowNone = false;
// export let allowTransparency = false; // TODO: Implement
export let direction: MenuDirection = "Bottom";
// TODO: See if this should be made to follow the pattern of DropdownInput.svelte so this could be removed
export let open: boolean;
let {
colorOrGradient,
allowNone = false,
direction = "Bottom",
open = $bindable(),
oncolorOrGradient,
onstartHistoryTransaction,
}: Props = $props();
const hsvaOrNone = colorOrGradient instanceof Color ? colorOrGradient.toHSVA() : colorOrGradient.firstColor()?.toHSVA();
const hsva = hsvaOrNone || { h: 0, s: 0, v: 0, a: 1 };
const hsva = hsvaOrNone ?? { h: 0, s: 0, v: 0, a: 1 };
// Gradient color stops
$: gradient = colorOrGradient instanceof Gradient ? colorOrGradient : undefined;
let activeIndex = 0 as number | undefined;
$: selectedGradientColor = (activeIndex !== undefined && gradient?.atIndex(activeIndex)?.color) || (Color.fromCSS("black") as Color);
// Currently viewed color
$: color = colorOrGradient instanceof Color ? colorOrGradient : selectedGradientColor;
let activeIndex = $state<number | undefined>(0);
// New color components
let hue = hsva.h;
let saturation = hsva.s;
let value = hsva.v;
let alpha = hsva.a;
let isNone = hsvaOrNone === undefined;
let hue = $state(hsva.h);
let saturation = $state(hsva.s);
let value = $state(hsva.v);
let alpha = $state(hsva.a);
let isNone = $state(hsvaOrNone === undefined);
// Old color components
let oldHue = hsva.h;
let oldSaturation = hsva.s;
let oldValue = hsva.v;
let oldAlpha = hsva.a;
let oldIsNone = hsvaOrNone === undefined;
let oldHue = $state(hsva.h);
let oldSaturation = $state(hsva.s);
let oldValue = $state(hsva.v);
let oldAlpha = $state(hsva.a);
let oldIsNone = $state(hsvaOrNone === undefined);
// Transient state
let draggingPickerTrack: HTMLDivElement | undefined = undefined;
let strayCloses = true;
let gradientSpectrumDragging = false;
let strayCloses = $state(true);
let gradientSpectrumDragging = $state(false);
let shiftPressed = false;
let alignedAxis: "saturation" | "value" | undefined = undefined;
let alignedAxis: "saturation" | "value" | undefined = $state(undefined);
let hueBeforeDrag = 0;
let saturationBeforeDrag = 0;
let valueBeforeDrag = 0;
@ -79,21 +84,9 @@
let saturationRestoreWhenShiftReleased: number | undefined = undefined;
let valueRestoreWhenShiftReleased: number | undefined = undefined;
let self: FloatingMenu | undefined;
let hexCodeInputWidget: TextInput | undefined;
let gradientSpectrumInputWidget: SpectrumInput | undefined;
$: watchOpen(open);
$: watchColor(color);
$: oldColor = generateColor(oldHue, oldSaturation, oldValue, oldAlpha, oldIsNone);
$: newColor = generateColor(hue, saturation, value, alpha, isNone);
$: rgbChannels = Object.entries(newColor.toRgb255() || { r: undefined, g: undefined, b: undefined }) as [keyof RGB, number | undefined][];
$: hsvChannels = Object.entries(!isNone ? { h: hue * 360, s: saturation * 100, v: value * 100 } : { h: undefined, s: undefined, v: undefined }) as [keyof HSV, number | undefined][];
$: opaqueHueColor = new Color({ h: hue, s: 1, v: 1, a: 1 });
$: outlineFactor = Math.max(contrastingOutlineFactor(newColor, "--color-2-mildblack", 0.01), contrastingOutlineFactor(oldColor, "--color-2-mildblack", 0.01));
$: outlined = outlineFactor > 0.0001;
$: transparency = newColor.alpha < 1 || oldColor.alpha < 1;
let self: FloatingMenu | undefined = $state();
let hexCodeInputWidget: TextInput | undefined = $state();
let gradientSpectrumInputWidget: SpectrumInput | undefined = $state();
function generateColor(h: number, s: number, v: number, a: number, none: boolean) {
if (none) return new Color("none");
@ -174,6 +167,7 @@
}
const color = new Color({ h: hue, s: saturation, v: value, a: alpha });
setColor(color);
if (!e.shiftKey) {
@ -226,7 +220,7 @@
document.addEventListener("keydown", onKeyDown);
document.addEventListener("keyup", onKeyUp);
dispatch("startHistoryTransaction");
onstartHistoryTransaction?.();
}
function removeEvents() {
@ -274,15 +268,14 @@
}
function setColor(color?: Color) {
const colorToEmit = color || new Color({ h: hue, s: saturation, v: value, a: alpha });
const colorToEmit = color ?? new Color({ h: hue, s: saturation, v: value, a: alpha });
const stop = gradientSpectrumInputWidget && activeIndex !== undefined && gradient?.atIndex(activeIndex);
if (stop && gradientSpectrumInputWidget instanceof SpectrumInput) {
if (stop && gradientSpectrumInputWidget !== undefined) {
stop.color = colorToEmit;
gradient = gradient;
}
dispatch("colorOrGradient", gradient || colorToEmit);
oncolorOrGradient?.(gradient ?? colorToEmit);
}
function swapNewWithOld() {
@ -338,7 +331,7 @@
}
function setColorPreset(preset: PresetColors) {
dispatch("startHistoryTransaction");
onstartHistoryTransaction?.()
if (preset === "none") {
setNewHSVA(0, 0, 0, 1, true);
setColor(new Color("none"));
@ -379,14 +372,14 @@
try {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const result = await new (window as any).EyeDropper().open();
dispatch("startHistoryTransaction");
onstartHistoryTransaction?.();
setColorCode(result.sRGBHex);
} catch {
// Do nothing
}
}
function gradientActiveMarkerIndexChange({ detail: index }: CustomEvent<number | undefined>) {
function gradientActiveMarkerIndexChange(index: number | undefined) {
activeIndex = index;
const color = index === undefined ? undefined : gradient?.colorAtIndex(index);
const hsva = color?.toHSVA();
@ -401,9 +394,34 @@
onDestroy(() => {
removeEvents();
});
// Gradient color stops
let gradient = $state<Gradient | undefined>(undefined);
let selectedGradientColor = $derived((activeIndex !== undefined && gradient?.atIndex(activeIndex)?.color) || (Color.fromCSS("black") as Color));
// Currently viewed color
let color = $derived(colorOrGradient instanceof Color ? colorOrGradient : selectedGradientColor);
$effect(() => {
watchOpen(open);
});
$effect(() => {
watchColor(color);
});
// gradient changed from outside
$effect(() => {
if (colorOrGradient instanceof Gradient) {
gradient = colorOrGradient;
}
})
let oldColor = $derived(generateColor(oldHue, oldSaturation, oldValue, oldAlpha, oldIsNone));
let newColor = $derived(generateColor(hue, saturation, value, alpha, isNone));
let rgbChannels = $derived(Object.entries(newColor.toRgb255() || { r: undefined, g: undefined, b: undefined }) as [keyof RGB, number | undefined][]);
let hsvChannels = $derived(Object.entries(!isNone ? { h: hue * 360, s: saturation * 100, v: value * 100 } : { h: undefined, s: undefined, v: undefined }) as [keyof HSV, number | undefined][]);
let opaqueHueColor = $derived(new Color({ h: hue, s: 1, v: 1, a: 1 }));
let outlineFactor = $derived(Math.max(contrastingOutlineFactor(newColor, "--color-2-mildblack", 0.01), contrastingOutlineFactor(oldColor, "--color-2-mildblack", 0.01)));
let outlined = $derived(outlineFactor > 0.0001);
let transparency = $derived(newColor.alpha < 1 || oldColor.alpha < 1);
</script>
<FloatingMenu class="color-picker" {open} on:open {strayCloses} escapeCloses={strayCloses && !gradientSpectrumDragging} {direction} type="Popover" bind:this={self}>
<FloatingMenu class="color-picker" bind:open={open} {strayCloses} escapeCloses={strayCloses && !gradientSpectrumDragging} {direction} type="Popover" bind:this={self}>
<LayoutRow
styles={{
"--new-color": newColor.toHexOptionalAlpha(),
@ -418,9 +436,9 @@
>
<LayoutCol class="pickers-and-gradient">
<LayoutRow class="pickers">
<LayoutCol class="saturation-value-picker" on:pointerdown={onPointerDown} data-saturation-value-picker>
<LayoutCol class="saturation-value-picker" onpointerdown={onPointerDown} data-saturation-value-picker>
{#if !isNone}
<div class="selection-circle" style:top={`${(1 - value) * 100}%`} style:left={`${saturation * 100}%`} />
<div class="selection-circle" style:top={`${(1 - value) * 100}%`} style:left={`${saturation * 100}%`}></div>
{/if}
{#if alignedAxis}
<div
@ -429,37 +447,37 @@
class:value={alignedAxis === "value"}
style:top={`${(1 - value) * 100}%`}
style:left={`${saturation * 100}%`}
/>
></div>
{/if}
</LayoutCol>
<LayoutCol class="hue-picker" on:pointerdown={onPointerDown} data-hue-picker>
<LayoutCol class="hue-picker" onpointerdown={onPointerDown} data-hue-picker>
{#if !isNone}
<div class="selection-needle" style:top={`${(1 - hue) * 100}%`} />
<div class="selection-needle" style:top={`${(1 - hue) * 100}%`}></div>
{/if}
</LayoutCol>
<LayoutCol class="alpha-picker" on:pointerdown={onPointerDown} data-alpha-picker>
<LayoutCol class="alpha-picker" onpointerdown={onPointerDown} data-alpha-picker>
{#if !isNone}
<div class="selection-needle" style:top={`${(1 - alpha) * 100}%`} />
<div class="selection-needle" style:top={`${(1 - alpha) * 100}%`}></div>
{/if}
</LayoutCol>
</LayoutRow>
{#if gradient}
<LayoutRow class="gradient">
<SpectrumInput
{gradient}
on:gradient={() => {
gradient = gradient;
if (gradient) dispatch("colorOrGradient", gradient);
gradient={gradient}
ongradient={(detail) => {
gradient = detail;
if (gradient) oncolorOrGradient?.(gradient);
}}
on:activeMarkerIndexChange={gradientActiveMarkerIndexChange}
onactiveMarkerIndexChange={gradientActiveMarkerIndexChange}
activeMarkerIndex={activeIndex}
on:dragging={({ detail }) => (gradientSpectrumDragging = detail)}
bind:drag={gradientSpectrumDragging}
bind:this={gradientSpectrumInputWidget}
/>
{#if gradientSpectrumInputWidget && activeIndex !== undefined}
<NumberInput
value={(gradient.positionAtIndex(activeIndex) || 0) * 100}
on:value={({ detail }) => {
onvalue={(detail) => {
if (gradientSpectrumInputWidget && activeIndex !== undefined && detail !== undefined) gradientSpectrumInputWidget.setPosition(activeIndex, detail / 100);
}}
displayDecimalPlaces={0}
@ -480,7 +498,7 @@
>
{#if !newColor.equals(oldColor)}
<div class="swap-button-background"></div>
<IconButton class="swap-button" icon="SwapHorizontal" size={16} action={swapNewWithOld} tooltip="Swap" />
<IconButton class="swap-button" icon="SwapHorizontal" size={16} onclick={swapNewWithOld} tooltip="Swap" />
{/if}
<LayoutCol class="new-color" classes={{ none: isNone }}>
{#if !newColor.equals(oldColor)}
@ -499,9 +517,9 @@
<Separator type="Related" />
<LayoutRow>
<TextInput
value={newColor.toHexOptionalAlpha() || "-"}
on:commitText={({ detail }) => {
dispatch("startHistoryTransaction");
value={newColor.toHexOptionalAlpha() ?? "-"}
oncommitText={(detail ) => {
onstartHistoryTransaction?.();
setColorCode(detail);
}}
centered={true}
@ -519,14 +537,12 @@
<Separator type="Related" />
{/if}
<NumberInput
value={strength}
on:value={({ detail }) => {
strength = detail;
value={rgbChannels[index][1]}
onvalue={(detail) => {
rgbChannels[index][1] = detail;
setColorRGB(channel, detail);
}}
on:startHistoryTransaction={() => {
dispatch("startHistoryTransaction");
}}
{onstartHistoryTransaction}
min={0}
max={255}
minWidth={1}
@ -546,14 +562,12 @@
<Separator type="Related" />
{/if}
<NumberInput
value={strength}
on:value={({ detail }) => {
strength = detail;
value={hsvChannels[index][1]}
onvalue={(detail) => {
hsvChannels[index][1] = detail;
setColorHSV(channel, detail);
}}
on:startHistoryTransaction={() => {
dispatch("startHistoryTransaction");
}}
{onstartHistoryTransaction}
min={0}
max={channel === "h" ? 360 : 100}
unit={channel === "h" ? "°" : "%"}
@ -573,13 +587,11 @@
<Separator type="Related" />
<NumberInput
value={!isNone ? alpha * 100 : undefined}
on:value={({ detail }) => {
onvalue={(detail) => {
if (detail !== undefined) alpha = detail / 100;
setColorAlphaPercent(detail);
}}
on:startHistoryTransaction={() => {
dispatch("startHistoryTransaction");
}}
{onstartHistoryTransaction}
min={0}
max={100}
rangeMin={0}
@ -593,23 +605,23 @@
<LayoutRow class="leftover-space" />
<LayoutRow>
{#if allowNone && !gradient}
<button class="preset-color none" on:click={() => setColorPreset("none")} title="Set to no color" tabindex="0"></button>
<button class="preset-color none" onclick={() => setColorPreset("none")} title="Set to no color" tabindex="0"></button>
<Separator type="Related" />
{/if}
<button class="preset-color black" on:click={() => setColorPreset("black")} title="Set to black" tabindex="0"></button>
<button class="preset-color black" onclick={() => setColorPreset("black")} title="Set to black" tabindex="0"></button>
<Separator type="Related" />
<button class="preset-color white" on:click={() => setColorPreset("white")} title="Set to white" tabindex="0"></button>
<button class="preset-color white" onclick={() => setColorPreset("white")} title="Set to white" tabindex="0"></button>
<Separator type="Related" />
<button class="preset-color pure" on:click={setColorPresetSubtile} tabindex="-1">
<div data-pure-tile="red" style="--pure-color: #ff0000; --pure-color-gray: #4c4c4c" title="Set to red" />
<div data-pure-tile="yellow" style="--pure-color: #ffff00; --pure-color-gray: #e3e3e3" title="Set to yellow" />
<div data-pure-tile="green" style="--pure-color: #00ff00; --pure-color-gray: #969696" title="Set to green" />
<div data-pure-tile="cyan" style="--pure-color: #00ffff; --pure-color-gray: #b2b2b2" title="Set to cyan" />
<div data-pure-tile="blue" style="--pure-color: #0000ff; --pure-color-gray: #1c1c1c" title="Set to blue" />
<div data-pure-tile="magenta" style="--pure-color: #ff00ff; --pure-color-gray: #696969" title="Set to magenta" />
<button class="preset-color pure" onclick={setColorPresetSubtile} tabindex="-1">
<div data-pure-tile="red" style="--pure-color: #ff0000; --pure-color-gray: #4c4c4c" title="Set to red"></div>
<div data-pure-tile="yellow" style="--pure-color: #ffff00; --pure-color-gray: #e3e3e3" title="Set to yellow"></div>
<div data-pure-tile="green" style="--pure-color: #00ff00; --pure-color-gray: #969696" title="Set to green"></div>
<div data-pure-tile="cyan" style="--pure-color: #00ffff; --pure-color-gray: #b2b2b2" title="Set to cyan"></div>
<div data-pure-tile="blue" style="--pure-color: #0000ff; --pure-color-gray: #1c1c1c" title="Set to blue"></div>
<div data-pure-tile="magenta" style="--pure-color: #ff00ff; --pure-color-gray: #696969" title="Set to magenta"></div>
</button>
<Separator type="Related" />
<IconButton icon="Eyedropper" size={24} action={activateEyedropperSample} tooltip="Sample a pixel color from the document" />
<IconButton icon="Eyedropper" size={24} onclick={activateEyedropperSample} tooltip="Sample a pixel color from the document" />
</LayoutRow>
</LayoutCol>
</LayoutRow>

2
frontend/src/components/floating-menus/Dialog.svelte
View file

@ -16,7 +16,7 @@
const dialog = getContext<DialogState>("dialog");
let self: FloatingMenu | undefined;
let self: FloatingMenu | undefined = $state();
onMount(() => {
// Focus the button which is marked as emphasized, or otherwise the first button, in the popup

155
frontend/src/components/floating-menus/MenuList.svelte
View file

@ -1,7 +1,5 @@
<svelte:options accessors={true} />
<script lang="ts">
import { createEventDispatcher, tick, onDestroy, onMount } from "svelte";
import { tick, onDestroy, onMount } from "svelte";
import type { MenuListEntry, MenuDirection } from "@graphite/messages";
@ -15,41 +13,51 @@
import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
import UserInputLabel from "@graphite/components/widgets/labels/UserInputLabel.svelte";
let self: FloatingMenu | undefined;
let scroller: LayoutCol | undefined;
let searchTextInput: TextInput | undefined;
let self: FloatingMenu | undefined = $state();
let scroller: LayoutCol | undefined = $state();
let searchTextInput: TextInput | undefined = $state();
const dispatch = createEventDispatcher<{ open: boolean; activeEntry: MenuListEntry; hoverInEntry: MenuListEntry; hoverOutEntry: undefined; naturalWidth: number }>();
interface Props {
entries: MenuListEntry[][];
activeEntry?: MenuListEntry | undefined;
open: boolean;
direction?: MenuDirection;
minWidth?: number;
drawIcon?: boolean;
interactive?: boolean;
scrollableY?: boolean;
virtualScrollingEntryHeight?: number;
tooltip?: string | undefined;
onhoverOutEntry?: () => void;
onhoverInEntry?: (entry: MenuListEntry) => void;
onnaturalWidth?: (width: number) => void;
onactiveEntry?: (activeEntry: MenuListEntry) => void;
}
export let entries: MenuListEntry[][];
export let activeEntry: MenuListEntry | undefined = undefined;
export let open: boolean;
export let direction: MenuDirection = "Bottom";
export let minWidth = 0;
export let drawIcon = false;
export let interactive = false;
export let scrollableY = false;
export let virtualScrollingEntryHeight = 0;
export let tooltip: string | undefined = undefined;
let {
entries = $bindable(),
activeEntry = undefined,
open = $bindable(false),
direction = "Bottom",
minWidth = 0,
drawIcon = false,
interactive = false,
scrollableY = false,
virtualScrollingEntryHeight = 0,
tooltip = undefined,
onhoverOutEntry,
onhoverInEntry,
onnaturalWidth,
onactiveEntry,
}: Props = $props();
// Keep the child references outside of the entries array so as to avoid infinite recursion.
let childReferences: MenuList[][] = [];
let search = "";
let childReferences: MenuList[][] = $state([]);
let search = $state("");
let highlighted = activeEntry as MenuListEntry | undefined;
let virtualScrollingEntriesStart = 0;
let highlighted = $state(activeEntry as MenuListEntry | undefined);
let virtualScrollingEntriesStart = $state(0);
// Called only when `open` is changed from outside this component
$: watchOpen(open);
$: watchEntries(entries);
$: watchRemeasureWidth(filteredEntries, drawIcon);
$: watchHighlightedWithSearch(filteredEntries, open);
$: filteredEntries = entries.map((section) => section.filter((entry) => inSearch(search, entry)));
$: virtualScrollingTotalHeight = filteredEntries.length === 0 ? 0 : filteredEntries[0].length * virtualScrollingEntryHeight;
$: virtualScrollingStartIndex = Math.floor(virtualScrollingEntriesStart / virtualScrollingEntryHeight) || 0;
$: virtualScrollingEndIndex = filteredEntries.length === 0 ? 0 : Math.min(filteredEntries[0].length, virtualScrollingStartIndex + 1 + 400 / virtualScrollingEntryHeight);
$: startIndex = virtualScrollingEntryHeight ? virtualScrollingStartIndex : 0;
// TODO: Move keyboard input handling entirely to the unified system in `input.ts`.
// TODO: The current approach is hacky and blocks the allowances for shortcuts like the key to open the browser's dev tools.
@ -116,12 +124,13 @@
return !search || entry.label.toLowerCase().includes(search.toLowerCase());
}
function watchOpen(open: boolean) {
function watchOpen(value: boolean) {
if (open && !inNestedMenuList()) addEventListener("keydown", keydown);
else if (!inNestedMenuList()) removeEventListener("keydown", keydown);
highlighted = activeEntry;
dispatch("open", open);
// dispatch("open", value);
// open = value;
search = "";
}
@ -151,42 +160,43 @@
if (menuListEntry.action) menuListEntry.action();
// Notify the parent about the clicked entry as the new active entry
dispatch("activeEntry", menuListEntry);
onactiveEntry?.(menuListEntry);
// Close the containing menu
let childReference = getChildReference(menuListEntry);
if (childReference) {
childReference.open = false;
entries = entries;
// entries = entries;
}
dispatch("open", false);
// dispatch("open", false);
open = false;
}
function onEntryPointerEnter(menuListEntry: MenuListEntry) {
if (!menuListEntry.children?.length) {
dispatch("hoverInEntry", menuListEntry);
onhoverInEntry?.(menuListEntry);
return;
}
let childReference = getChildReference(menuListEntry);
if (childReference) {
childReference.open = true;
entries = entries;
} else dispatch("open", true);
// entries = entries;
} else open = true;
}
function onEntryPointerLeave(menuListEntry: MenuListEntry) {
if (!menuListEntry.children?.length) {
dispatch("hoverOutEntry");
// dispatch("hoverOutEntry");
onhoverOutEntry?.();
return;
}
let childReference = getChildReference(menuListEntry);
if (childReference) {
childReference.open = false;
entries = entries;
} else dispatch("open", false);
// entries = entries;
} else open = false;
}
function isEntryOpen(menuListEntry: MenuListEntry): boolean {
@ -385,30 +395,60 @@
export function scrollViewTo(distanceDown: number) {
scroller?.div?.()?.scrollTo(0, distanceDown);
}
// Called only when `open` is changed from outside this component
$effect(() => {
watchOpen(open);
});
$effect(() => {
watchEntries(entries);
});
let filteredEntries = $derived(entries.map((section) => section.filter((entry) => inSearch(search, entry))));
$effect(() => {
watchRemeasureWidth(filteredEntries, drawIcon);
});
$effect(() => {
watchHighlightedWithSearch(filteredEntries, open);
});
let virtualScrollingTotalHeight = $derived(filteredEntries.length === 0 ? 0 : filteredEntries[0].length * virtualScrollingEntryHeight);
let virtualScrollingStartIndex = $derived(Math.floor(virtualScrollingEntriesStart / virtualScrollingEntryHeight) || 0);
let virtualScrollingEndIndex = $derived(filteredEntries.length === 0 ? 0 : Math.min(filteredEntries[0].length, virtualScrollingStartIndex + 1 + 400 / virtualScrollingEntryHeight));
let startIndex = $derived(virtualScrollingEntryHeight ? virtualScrollingStartIndex : 0);
export {
entries,
activeEntry,
open,
direction,
minWidth,
drawIcon,
interactive,
scrollableY,
virtualScrollingEntryHeight,
tooltip,
}
</script>
<FloatingMenu
class="menu-list"
{open}
on:open={({ detail }) => (open = detail)}
on:naturalWidth
bind:open
type="Dropdown"
windowEdgeMargin={0}
escapeCloses={false}
{direction}
{minWidth}
scrollableY={scrollableY && virtualScrollingEntryHeight === 0}
{onnaturalWidth}
bind:this={self}
>
{#if search.length > 0}
<TextInput class="search" value={search} on:value={({ detail }) => (search = detail)} bind:this={searchTextInput}></TextInput>
<TextInput class="search" bind:value={search} bind:this={searchTextInput}></TextInput>
{/if}
<!-- If we put the scrollableY on the layoutcol for non-font dropdowns then for some reason it always creates a tiny scrollbar.
However when we are using the virtual scrolling then we need the layoutcol to be scrolling so we can bind the events without using `self`. -->
<LayoutCol
bind:this={scroller}
scrollableY={scrollableY && virtualScrollingEntryHeight !== 0}
on:scroll={onScroll}
onscroll={onScroll}
styles={{ "min-width": virtualScrollingEntryHeight ? `${minWidth}px` : `inherit` }}
>
{#if virtualScrollingEntryHeight}
@ -424,14 +464,14 @@
classes={{ open: isEntryOpen(entry), active: entry.label === highlighted?.label, disabled: Boolean(entry.disabled) }}
styles={{ height: virtualScrollingEntryHeight || "20px" }}
{tooltip}
on:click={() => !entry.disabled && onEntryClick(entry)}
on:pointerenter={() => !entry.disabled && onEntryPointerEnter(entry)}
on:pointerleave={() => !entry.disabled && onEntryPointerLeave(entry)}
onclick={() => !entry.disabled && onEntryClick(entry)}
onpointerenter={() => !entry.disabled && onEntryPointerEnter(entry)}
onpointerleave={() => !entry.disabled && onEntryPointerLeave(entry)}
>
{#if entry.icon && drawIcon}
<IconLabel icon={entry.icon} iconSizeOverride={16} class="entry-icon" />
{:else if drawIcon}
<div class="no-icon" />
<div class="no-icon"></div>
{/if}
{#if entry.font}
@ -447,18 +487,13 @@
{#if entry.children?.length}
<IconLabel class="submenu-arrow" icon="DropdownArrow" />
{:else}
<div class="no-submenu-arrow" />
<div class="no-submenu-arrow"></div>
{/if}
{#if entry.children}
<MenuList
on:naturalWidth={({ detail }) => {
// We do a manual dispatch here instead of just `on:naturalWidth` as a workaround for the <script> tag
// at the top of this file displaying a "'render' implicitly has return type 'any' because..." error.
// See explanation at <https://github.com/sveltejs/language-tools/issues/452#issuecomment-723148184>.
dispatch("naturalWidth", detail);
}}
open={getChildReference(entry)?.open || false}
{onnaturalWidth}
open={entry?.open}
direction="TopRight"
entries={entry.children}
{minWidth}

2
frontend/src/components/floating-menus/NodeCatalog.svelte
View file

@ -110,7 +110,7 @@
</script>
<div class="node-catalog">
<TextInput placeholder="Search Nodes..." value={searchTerm} on:value={({ detail }) => (searchTerm = detail)} bind:this={nodeSearchInput} />
<TextInput placeholder="Search Nodes..." bind:value={searchTerm} bind:this={nodeSearchInput} />
<div class="list-results" on:wheel|passive|stopPropagation>
{#each nodeCategories as nodeCategory}
<details open={nodeCategory[1].open}>

15
frontend/src/components/layout/ConditionalWrapper.svelte
View file

@ -1,14 +1,21 @@
<script lang="ts">
export let condition: boolean;
export let wrapperClass = "";
import type { Snippet } from "svelte";
interface Props {
condition: boolean;
wrapperClass?: string;
children?: Snippet;
}
let { condition, wrapperClass = "", children }: Props = $props();
</script>
{#if condition}
<div class={wrapperClass}>
<slot />
{@render children?.()}
</div>
{:else}
<slot />
{@render children?.()}
{/if}
<style lang="scss" global></style>

141
frontend/src/components/layout/FloatingMenu.svelte
View file

@ -1,6 +1,4 @@
<script lang="ts" context="module">
export type MenuType = "Popover" | "Dropdown" | "Dialog" | "Cursor";
<script lang="ts" module>
/// Prevents the escape key from closing the parent floating menu of the given element.
/// This works by momentarily setting the `data-escape-does-not-close` attribute on the parent floating menu element.
/// After checking for the Escape key, it checks (in one `setTimeout`) for the attribute and ignores the key if it's present.
@ -17,9 +15,11 @@
}
}
</script>
<script lang="ts">
import { onMount, afterUpdate, createEventDispatcher, tick } from "svelte";
import type { SvelteHTMLElements } from 'svelte/elements';
import { onMount, tick } from "svelte";
import type { MenuDirection } from "@graphite/messages";
import { browserVersion } from "@graphite/utility-functions/platform";
@ -29,27 +29,47 @@
const BUTTON_LEFT = 0;
const POINTER_STRAY_DISTANCE = 100;
const dispatch = createEventDispatcher<{ open: boolean; naturalWidth: number }>();
type DivHTMLElementProps = SvelteHTMLElements["div"];
interface Props extends DivHTMLElementProps {
class?: string;
classes?: Record<string, boolean>;
style?: string;
styles?: Record<string, string | number | undefined>;
open: boolean;
type: Graphite.MenuType;
direction?: MenuDirection;
windowEdgeMargin?: number;
scrollableY?: boolean;
minWidth?: number;
escapeCloses?: boolean;
strayCloses?: boolean;
children?: import('svelte').Snippet;
onnaturalWidth?: (naturalWidht: number) => void;
}
let className = "";
export { className as class };
export let classes: Record<string, boolean> = {};
let styleName = "";
export { styleName as style };
export let styles: Record<string, string | number | undefined> = {};
export let open: boolean;
export let type: MenuType;
export let direction: MenuDirection = "Bottom";
export let windowEdgeMargin = 6;
export let scrollableY = false;
export let minWidth = 0;
export let escapeCloses = true;
export let strayCloses = true;
let {
class: className = "",
classes = {},
style: styleName = "",
styles = {},
open = $bindable(),
type,
direction = "Bottom",
windowEdgeMargin = 6,
scrollableY = false,
minWidth = 0,
escapeCloses = true,
strayCloses = true,
children,
onnaturalWidth,
...rest
}: Props = $props();
let tail: HTMLDivElement | undefined;
let self: HTMLDivElement | undefined;
let floatingMenuContainer: HTMLDivElement | undefined;
let floatingMenuContent: LayoutCol | undefined;
let tail: HTMLDivElement | undefined = $state();
let self: HTMLDivElement | undefined = $state();
let floatingMenuContainer: HTMLDivElement | undefined = $state();
let floatingMenuContent: LayoutCol | undefined = $state();
// The resize observer is attached to the floating menu container, which is the zero-height div of the width of the parent element's floating menu spawner.
// Since CSS doesn't let us make the floating menu (with `position: fixed`) have a 100% width of this container, we need to use JS to observe its size and
@ -60,25 +80,15 @@
resizeObserverCallback(entries);
});
let wasOpen = open;
let measuringOngoing = false;
let measuringOngoing = $state(false);
let measuringOngoingGuard = false;
let minWidthParentWidth = 0;
let minWidthParentWidth = $state(0);
let pointerStillDown = false;
let workspaceBounds = new DOMRect();
let floatingMenuBounds = new DOMRect();
let floatingMenuContentBounds = new DOMRect();
$: watchOpenChange(open);
$: minWidthStyleValue = measuringOngoing ? "0" : `${Math.max(minWidth, minWidthParentWidth)}px`;
$: displayTail = open && type === "Popover";
$: displayContainer = open || measuringOngoing;
$: extraClasses = Object.entries(classes)
.flatMap(([className, stateName]) => (stateName ? [className] : []))
.join(" ");
$: extraStyles = Object.entries(styles)
.flatMap((styleAndValue) => (styleAndValue[1] !== undefined ? [`${styleAndValue[0]}: ${styleAndValue[1]};`] : []))
.join(" ");
// Called only when `open` is changed from outside this component
async function watchOpenChange(isOpen: boolean) {
@ -157,20 +167,6 @@
}
});
afterUpdate(() => {
// Remove the size constraint after the content updates so the resize observer can measure the content and reapply a newly calculated one
const floatingMenuContentDiv = floatingMenuContent?.div?.();
if (type === "Dialog" && floatingMenuContentDiv) {
// We have to set the style properties directly because attempting to do it through a Svelte bound property results in `afterUpdate()` being triggered
floatingMenuContentDiv.style.setProperty("min-width", "unset");
floatingMenuContentDiv.style.setProperty("min-height", "unset");
}
// Gets the client bounds of the elements and apply relevant styles to them.
// TODO: Use DOM attribute bindings more whilst not causing recursive updates. Turning measuring on and off both causes the component to change,
// TODO: which causes the `afterUpdate()` Svelte event to fire extraneous times (hurting performance and sometimes causing an infinite loop).
if (!measuringOngoingGuard) positionAndStyleFloatingMenu();
});
function resizeObserverCallback(entries: ResizeObserverEntry[]) {
minWidthParentWidth = entries[0].contentRect.width;
@ -292,7 +288,7 @@
// Notify the parent about the measured natural width
if (naturalWidth !== undefined && naturalWidth >= 0) {
dispatch("naturalWidth", naturalWidth);
onnaturalWidth?.(naturalWidth);
}
}
@ -316,7 +312,7 @@
if (strayCloses && notHoveringOverOwnSpawner && isPointerEventOutsideFloatingMenu(e, POINTER_STRAY_DISTANCE)) {
// TODO: Extend this rectangle bounds check to all submenu bounds up the DOM tree since currently submenus disappear
// TODO: with zero stray distance if the cursor is further than the stray distance from only the top-level menu
dispatch("open", false);
open = false
}
// Clean up any messes from lost pointerup events
@ -385,7 +381,7 @@
const foundTarget = filteredListOfDescendantSpawners.find((item: Element): boolean => item === targetSpawner);
// If the currently hovered spawner is one of the found valid hover-transferrable spawners, swap to it by clicking on it
if (foundTarget) {
dispatch("open", false);
open = false;
(foundTarget as HTMLElement).click();
}
@ -399,7 +395,7 @@
if (escapeCloses && e.key === "Escape") {
setTimeout(() => {
if (!floatingMenuContainer?.querySelector("[data-floating-menu-content][data-escape-does-not-close]")) {
dispatch("open", false);
open = false;
}
}, 0);
@ -411,7 +407,7 @@
function pointerDownHandler(e: PointerEvent) {
// Close the floating menu if the pointer clicked outside the floating menu (but within stray distance)
if (isPointerEventOutsideFloatingMenu(e)) {
dispatch("open", false);
open = false;
// Track if the left pointer button is now down so its later click event can be canceled
const eventIsForLmb = e.button === BUTTON_LEFT;
@ -454,21 +450,50 @@
return false;
}
$effect(() => {
// Remove the size constraint after the content updates so the resize observer can measure the content and reapply a newly calculated one
const floatingMenuContentDiv = floatingMenuContent?.div?.();
if (type === "Dialog" && floatingMenuContentDiv) {
// We have to set the style properties directly because attempting to do it through a Svelte bound property results in `afterUpdate()` being triggered
floatingMenuContentDiv.style.setProperty("min-width", "unset");
floatingMenuContentDiv.style.setProperty("min-height", "unset");
}
// Gets the client bounds of the elements and apply relevant styles to them.
// TODO: Use DOM attribute bindings more whilst not causing recursive updates. Turning measuring on and off both causes the component to change,
// TODO: which causes the `afterUpdate()` Svelte event to fire extraneous times (hurting performance and sometimes causing an infinite loop).
if (!measuringOngoingGuard) positionAndStyleFloatingMenu();
});
$effect(() => {
watchOpenChange(open);
});
let minWidthStyleValue = $derived(measuringOngoing ? "0" : `${Math.max(minWidth, minWidthParentWidth)}px`);
let displayTail = $derived(open && type === "Popover");
let displayContainer = $derived(open || measuringOngoing);
let extraClasses = $derived(Object.entries(classes)
.flatMap(([className, stateName]) => (stateName ? [className] : []))
.join(" "));
let extraStyles = $derived(Object.entries(styles)
.flatMap((styleAndValue) => (styleAndValue[1] !== undefined ? [`${styleAndValue[0]}: ${styleAndValue[1]};`] : []))
.join(" "));
</script>
<div
class={`floating-menu ${direction.toLowerCase()} ${type.toLowerCase()} ${className} ${extraClasses}`.trim()}
style={`${styleName} ${extraStyles}`.trim() || undefined}
bind:this={self}
{...$$restProps}
{...rest}
>
{#if displayTail}
<div class="tail" bind:this={tail} />
<div class="tail" bind:this={tail}></div>
{/if}
{#if displayContainer}
<div class="floating-menu-container" bind:this={floatingMenuContainer}>
<LayoutCol class="floating-menu-content" styles={{ "min-width": minWidthStyleValue }} {scrollableY} bind:this={floatingMenuContent} data-floating-menu-content>
<slot />
{@render children?.()}
</LayoutCol>
</div>
{/if}

82
frontend/src/components/layout/LayoutCol.svelte
View file

@ -1,23 +1,43 @@
<script lang="ts">
let className = "";
export { className as class };
export let classes: Record<string, boolean> = {};
let styleName = "";
export { styleName as style };
export let styles: Record<string, string | number | undefined> = {};
export let tooltip: string | undefined = undefined;
// TODO: Add middle-click drag scrolling
export let scrollableX = false;
export let scrollableY = false;
import type { SvelteHTMLElements } from 'svelte/elements';
import { createBubbler } from 'svelte/legacy';
let self: HTMLDivElement | undefined;
const bubble = createBubbler();
$: extraClasses = Object.entries(classes)
type DivHTMLElementProps = SvelteHTMLElements["div"];
interface Props extends DivHTMLElementProps {
class?: string;
classes?: Record<string, boolean>;
style?: string;
styles?: Record<string, string | number | undefined>;
tooltip?: string | undefined;
// TODO: Add middle-click drag scrolling
scrollableX?: boolean;
scrollableY?: boolean;
children?: import('svelte').Snippet;
}
let {
class: className = "",
classes = {},
style: styleName = "",
styles = {},
tooltip = undefined,
scrollableX = false,
scrollableY = false,
children,
...rest
}: Props = $props();
let self: HTMLDivElement | undefined = $state();
let extraClasses = $derived(Object.entries(classes)
.flatMap(([className, stateName]) => (stateName ? [className] : []))
.join(" ");
$: extraStyles = Object.entries(styles)
.join(" "));
let extraStyles = $derived(Object.entries(styles)
.flatMap((styleAndValue) => (styleAndValue[1] !== undefined ? [`${styleAndValue[0]}: ${styleAndValue[1]};`] : []))
.join(" ");
.join(" "));
export function div(): HTMLDivElement | undefined {
return self;
@ -34,23 +54,23 @@
style={`${styleName} ${extraStyles}`.trim() || undefined}
title={tooltip}
bind:this={self}
on:auxclick
on:blur
on:click
on:dblclick
on:dragend
on:dragleave
on:dragover
on:dragstart
on:drop
on:mouseup
on:pointerdown
on:pointerenter
on:pointerleave
on:scroll
{...$$restProps}
onauxclick={bubble('auxclick')}
onblur={bubble('blur')}
onclick={bubble('click')}
ondblclick={bubble('dblclick')}
ondragend={bubble('dragend')}
ondragleave={bubble('dragleave')}
ondragover={bubble('dragover')}
ondragstart={bubble('dragstart')}
ondrop={bubble('drop')}
onmouseup={bubble('mouseup')}
onpointerdown={bubble('pointerdown')}
onpointerenter={bubble('pointerenter')}
onpointerleave={bubble('pointerleave')}
onscroll={bubble('scroll')}
{...rest}
>
<slot />
{@render children?.()}
</div>
<!-- Unused (each impacts performance, see <https://github.com/GraphiteEditor/Graphite/issues/1877>):

83
frontend/src/components/layout/LayoutRow.svelte
View file

@ -1,23 +1,44 @@
<script lang="ts">
let className = "";
export { className as class };
export let classes: Record<string, boolean> = {};
let styleName = "";
export { styleName as style };
export let styles: Record<string, string | number | undefined> = {};
export let tooltip: string | undefined = undefined;
// TODO: Add middle-click drag scrolling
export let scrollableX = false;
export let scrollableY = false;
import type { SvelteHTMLElements } from 'svelte/elements';
import { createBubbler } from 'svelte/legacy';
let self: HTMLDivElement | undefined;
const bubble = createBubbler();
$: extraClasses = Object.entries(classes)
type DivHTMLElementProps = SvelteHTMLElements["div"];
interface Props extends DivHTMLElementProps {
class?: string;
classes?: Record<string, boolean>;
style?: string;
styles?: Record<string, string | number | undefined>;
tooltip?: string | undefined;
// TODO: Add middle-click drag scrolling
scrollableX?: boolean;
scrollableY?: boolean;
children?: import('svelte').Snippet;
[key: string]: any
}
let {
class: className = "",
classes = {},
style: styleName = "",
styles = {},
tooltip = undefined,
scrollableX = false,
scrollableY = false,
children,
...rest
}: Props = $props();
let self: HTMLDivElement | undefined = $state();
let extraClasses = $derived(Object.entries(classes)
.flatMap(([className, stateName]) => (stateName ? [className] : []))
.join(" ");
$: extraStyles = Object.entries(styles)
.join(" "));
let extraStyles = $derived(Object.entries(styles)
.flatMap((styleAndValue) => (styleAndValue[1] !== undefined ? [`${styleAndValue[0]}: ${styleAndValue[1]};`] : []))
.join(" ");
.join(" "));
export function div(): HTMLDivElement | undefined {
return self;
@ -34,23 +55,23 @@
style={`${styleName} ${extraStyles}`.trim() || undefined}
title={tooltip}
bind:this={self}
on:auxclick
on:blur
on:click
on:dblclick
on:dragend
on:dragleave
on:dragover
on:dragstart
on:drop
on:mouseup
on:pointerdown
on:pointerenter
on:pointerleave
on:scroll
{...$$restProps}
onauxclick={bubble('auxclick')}
onblur={bubble('blur')}
onclick={bubble('click')}
ondblclick={bubble('dblclick')}
ondragend={bubble('dragend')}
ondragleave={bubble('dragleave')}
ondragover={bubble('dragover')}
ondragstart={bubble('dragstart')}
ondrop={bubble('drop')}
onmouseup={bubble('mouseup')}
onpointerdown={bubble('pointerdown')}
onpointerenter={bubble('pointerenter')}
onpointerleave={bubble('pointerleave')}
onscroll={bubble('scroll')}
{...rest}
>
<slot />
{@render children?.()}
</div>
<!-- Unused (each impacts performance, see <https://github.com/GraphiteEditor/Graphite/issues/1877>):

24
frontend/src/components/panels/Document.svelte
View file

@ -461,7 +461,7 @@
});
</script>
<LayoutCol class="document" on:dragover={(e) => e.preventDefault()} on:drop={dropFile}>
<LayoutCol class="document" ondragover={(e) => e.preventDefault()} ondrop={dropFile}>
<LayoutRow class="control-bar" classes={{ "for-graph": $document.graphViewOverlayOpen }} scrollableX={true}>
{#if !$document.graphViewOverlayOpen}
<WidgetLayout layout={$document.documentModeLayout} />
@ -517,13 +517,13 @@
y={cursorTop}
/>
{/if}
<div class="viewport" on:pointerdown={(e) => canvasPointerDown(e)} bind:this={viewport} data-viewport>
<div class="viewport" onpointerdown={(e) => canvasPointerDown(e)} bind:this={viewport} data-viewport>
<svg class="artboards" style:width={canvasWidthCSS} style:height={canvasHeightCSS}>
{@html artworkSvg}
</svg>
<div class="text-input" style:width={canvasWidthCSS} style:height={canvasHeightCSS} style:pointer-events={showTextInput ? "auto" : ""}>
{#if showTextInput}
<div bind:this={textInput} style:transform="matrix({textInputMatrix})" on:scroll={preventTextEditingScroll} />
<div bind:this={textInput} style:transform="matrix({textInputMatrix})" onscroll={preventTextEditingScroll} />
{/if}
</div>
<canvas
@ -545,10 +545,10 @@
direction="Vertical"
thumbLength={scrollbarSize.y}
thumbPosition={scrollbarPos.y}
on:trackShift={({ detail }) => editor.handle.panCanvasByFraction(0, detail)}
on:thumbPosition={({ detail }) => panCanvasY(detail)}
on:thumbDragStart={() => editor.handle.panCanvasAbortPrepare(false)}
on:thumbDragAbort={() => editor.handle.panCanvasAbort(false)}
ontrackShift={(detail) => editor.handle.panCanvasByFraction(0, detail)}
onthumbPosition={(detail) => panCanvasY(detail)}
onthumbDragStart={() => editor.handle.panCanvasAbortPrepare(false)}
onthumbDragAbort={() => editor.handle.panCanvasAbort(false)}
/>
</LayoutCol>
</LayoutRow>
@ -557,11 +557,11 @@
direction="Horizontal"
thumbLength={scrollbarSize.x}
thumbPosition={scrollbarPos.x}
on:trackShift={({ detail }) => editor.handle.panCanvasByFraction(detail, 0)}
on:thumbPosition={({ detail }) => panCanvasX(detail)}
on:thumbDragEnd={() => editor.handle.setGridAlignedEdges()}
on:thumbDragStart={() => editor.handle.panCanvasAbortPrepare(true)}
on:thumbDragAbort={() => editor.handle.panCanvasAbort(true)}
ontrackShift={(detail) => editor.handle.panCanvasByFraction(detail, 0)}
onthumbPosition={(detail) => panCanvasX(detail)}
onthumbDragEnd={() => editor.handle.setGridAlignedEdges()}
onthumbDragStart={() => editor.handle.panCanvasAbortPrepare(true)}
onthumbDragAbort={() => editor.handle.panCanvasAbort(true)}
/>
</LayoutRow>
</LayoutCol>

4
frontend/src/components/panels/Layers.svelte
View file

@ -564,7 +564,7 @@
<IconButton
class={"status-toggle"}
classes={{ inherited: !listing.entry.parentsUnlocked }}
action={(e) => (toggleLayerLock(listing.entry.id), e?.stopPropagation())}
onclick={(e) => (toggleLayerLock(listing.entry.id), e?.stopPropagation())}
size={24}
icon={listing.entry.unlocked ? "PadlockUnlocked" : "PadlockLocked"}
hoverIcon={listing.entry.unlocked ? "PadlockLocked" : "PadlockUnlocked"}
@ -574,7 +574,7 @@
<IconButton
class={"status-toggle"}
classes={{ inherited: !listing.entry.parentsVisible }}
action={(e) => (toggleNodeVisibilityLayerPanel(listing.entry.id), e?.stopPropagation())}
onclick={(e) => (toggleNodeVisibilityLayerPanel(listing.entry.id), e?.stopPropagation())}
size={24}
icon={listing.entry.visible ? "EyeVisible" : "EyeHidden"}
hoverIcon={listing.entry.visible ? "EyeHide" : "EyeShow"}

10
frontend/src/components/views/Graph.svelte
View file

@ -381,7 +381,7 @@
class="remove-button-import"
data-index={index}
data-import-text-edge
action={() => {
onclick={() => {
/* Button is purely visual, clicking is handled in NodeGraphMessage::PointerDown */
}}
/>
@ -401,7 +401,7 @@
<IconButton
size={24}
icon="Add"
action={() => {
onclick={() => {
/* Button is purely visual, clicking is handled in NodeGraphMessage::PointerDown */
}}
/>
@ -441,7 +441,7 @@
class="remove-button-export"
data-index={index}
data-export-text-edge
action={() => {
onclick={() => {
/* Button is purely visual, clicking is handled in NodeGraphMessage::PointerDown */
}}
/>
@ -472,7 +472,7 @@
<IconButton
size={24}
icon={"Add"}
action={() => {
onclick={() => {
/* Button is purely visual, clicking is handled in NodeGraphMessage::PointerDown */
}}
/>
@ -592,7 +592,7 @@
data-visibility-button
size={24}
icon={node.visible ? "EyeVisible" : "EyeHidden"}
action={() => {
onclick={() => {
/* Button is purely visual, clicking is handled in NodeGraphMessage::PointerDown */
}}
tooltip={node.visible ? "Visible" : "Hidden"}

6
frontend/src/components/widgets/WidgetSection.svelte
View file

@ -31,7 +31,7 @@
icon={widgetData.pinned ? "PinActive" : "PinInactive"}
tooltip={widgetData.pinned ? "Unpin this node so it's no longer shown here when nothing is selected" : "Pin this node so it's shown here when nothing is selected"}
size={24}
action={(e) => {
onclick={(e) => {
editor.handle.setNodePinned(widgetData.id, !widgetData.pinned);
e?.stopPropagation();
}}
@ -41,7 +41,7 @@
icon={"Trash"}
tooltip={"Delete this node from the layer chain"}
size={24}
action={(e) => {
onclick={(e) => {
editor.handle.deleteNode(widgetData.id);
e?.stopPropagation();
}}
@ -52,7 +52,7 @@
hoverIcon={widgetData.visible ? "EyeHide" : "EyeShow"}
tooltip={widgetData.visible ? "Hide this node" : "Show this node"}
size={24}
action={(e) => {
onclick={(e) => {
editor.handle.toggleNodeVisibilityLayerPanel(widgetData.id);
e?.stopPropagation();
}}

28
frontend/src/components/widgets/WidgetSpan.svelte
View file

@ -85,32 +85,32 @@
{#each widgets as component, index}
{@const checkboxInput = narrowWidgetProps(component.props, "CheckboxInput")}
{#if checkboxInput}
<CheckboxInput {...exclude(checkboxInput)} on:checked={({ detail }) => widgetValueCommitAndUpdate(index, detail)} />
<CheckboxInput {...exclude(checkboxInput)} onchecked={(detail) => widgetValueCommitAndUpdate(index, detail)} />
{/if}
{@const colorInput = narrowWidgetProps(component.props, "ColorInput")}
{#if colorInput}
<ColorInput {...exclude(colorInput)} on:value={({ detail }) => widgetValueUpdate(index, detail)} on:startHistoryTransaction={() => widgetValueCommit(index, colorInput.value)} />
<ColorInput {...exclude(colorInput)} onvalue={(detail) => widgetValueUpdate(index, detail)} onstartHistoryTransaction={() => widgetValueCommit(index, colorInput.value)} />
{/if}
{@const curvesInput = narrowWidgetProps(component.props, "CurveInput")}
{#if curvesInput}
<CurveInput {...exclude(curvesInput)} on:value={({ detail }) => debouncer((value) => widgetValueCommitAndUpdate(index, value), { debounceTime: 120 }).debounceUpdateValue(detail)} />
<CurveInput {...exclude(curvesInput)} onvalue={(detail) => debouncer((value) => widgetValueCommitAndUpdate(index, value), { debounceTime: 120 }).debounceUpdateValue(detail)} />
{/if}
{@const dropdownInput = narrowWidgetProps(component.props, "DropdownInput")}
{#if dropdownInput}
<DropdownInput
{...exclude(dropdownInput)}
on:hoverInEntry={({ detail }) => {
onhoverInEntry={(detail) => {
return widgetValueUpdate(index, detail);
}}
on:hoverOutEntry={({ detail }) => {
onhoverOutEntry={(detail) => {
return widgetValueUpdate(index, detail);
}}
on:selectedIndex={({ detail }) => widgetValueCommitAndUpdate(index, detail)}
onselectedIndex={(detail) => widgetValueCommitAndUpdate(index, detail)}
/>
{/if}
{@const fontInput = narrowWidgetProps(component.props, "FontInput")}
{#if fontInput}
<FontInput {...exclude(fontInput)} on:changeFont={({ detail }) => widgetValueCommitAndUpdate(index, detail)} />
<FontInput {...exclude(fontInput)} onchangeFont={(detail) => widgetValueCommitAndUpdate(index, detail)} />
{/if}
{@const parameterExposeButton = narrowWidgetProps(component.props, "ParameterExposeButton")}
{#if parameterExposeButton}
@ -118,7 +118,7 @@
{/if}
{@const iconButton = narrowWidgetProps(component.props, "IconButton")}
{#if iconButton}
<IconButton {...exclude(iconButton)} action={() => widgetValueCommitAndUpdate(index, undefined)} />
<IconButton {...exclude(iconButton)} onclick={() => widgetValueCommitAndUpdate(index, undefined)} />
{/if}
{@const iconLabel = narrowWidgetProps(component.props, "IconLabel")}
{#if iconLabel}
@ -136,15 +136,15 @@
{#if numberInput}
<NumberInput
{...exclude(numberInput)}
on:value={({ detail }) => debouncer((value) => widgetValueUpdate(index, value)).debounceUpdateValue(detail)}
on:startHistoryTransaction={() => widgetValueCommit(index, numberInput.value)}
onvalue={(detail) => debouncer((value) => widgetValueUpdate(index, value)).debounceUpdateValue(detail)}
onstartHistoryTransaction={() => widgetValueCommit(index, numberInput.value)}
incrementCallbackIncrease={() => widgetValueCommitAndUpdate(index, "Increment")}
incrementCallbackDecrease={() => widgetValueCommitAndUpdate(index, "Decrement")}
/>
{/if}
{@const referencePointInput = narrowWidgetProps(component.props, "ReferencePointInput")}
{#if referencePointInput}
<ReferencePointInput {...exclude(referencePointInput)} on:value={({ detail }) => widgetValueCommitAndUpdate(index, detail)} />
<ReferencePointInput {...exclude(referencePointInput)} onvalue={(detail) => widgetValueCommitAndUpdate(index, detail)} />
{/if}
{@const popoverButton = narrowWidgetProps(component.props, "PopoverButton")}
{#if popoverButton}
@ -154,7 +154,7 @@
{/if}
{@const radioInput = narrowWidgetProps(component.props, "RadioInput")}
{#if radioInput}
<RadioInput {...exclude(radioInput)} on:selectedIndex={({ detail }) => widgetValueCommitAndUpdate(index, detail)} />
<RadioInput {...exclude(radioInput)} onselect={(detail) => widgetValueCommitAndUpdate(index, detail)} />
{/if}
{@const separator = narrowWidgetProps(component.props, "Separator")}
{#if separator}
@ -166,7 +166,7 @@
{/if}
{@const textAreaInput = narrowWidgetProps(component.props, "TextAreaInput")}
{#if textAreaInput}
<TextAreaInput {...exclude(textAreaInput)} on:commitText={({ detail }) => widgetValueCommitAndUpdate(index, detail)} />
<TextAreaInput {...exclude(textAreaInput)} oncommitText={(detail) => widgetValueCommitAndUpdate(index, detail)} />
{/if}
{@const textButton = narrowWidgetProps(component.props, "TextButton")}
{#if textButton}
@ -178,7 +178,7 @@
{/if}
{@const textInput = narrowWidgetProps(component.props, "TextInput")}
{#if textInput}
<TextInput {...exclude(textInput)} on:commitText={({ detail }) => widgetValueCommitAndUpdate(index, detail)} />
<TextInput {...exclude(textInput)} oncommitText={(detail) => widgetValueCommitAndUpdate(index, detail)} />
{/if}
{@const textLabel = narrowWidgetProps(component.props, "TextLabel")}
{#if textLabel}

19
frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte
View file

@ -2,11 +2,20 @@
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
export let labels: string[];
export let disabled = false;
export let tooltip: string | undefined = undefined;
// Callbacks
export let action: (index: number) => void;
interface Props {
labels: string[];
disabled?: boolean;
tooltip?: string | undefined;
// Callbacks
action: (index: number) => void;
}
let {
labels,
disabled = false,
tooltip = undefined,
action
}: Props = $props();
</script>
<LayoutRow class="breadcrumb-trail-buttons" {tooltip}>

44
frontend/src/components/widgets/buttons/IconButton.svelte
View file

@ -1,24 +1,37 @@
<script lang="ts">
import { type IconName, type IconSize } from "@graphite/utility-functions/icons";
import type { SvelteHTMLElements } from 'svelte/elements';
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
export let icon: IconName;
export let hoverIcon: IconName | undefined = undefined;
export let size: IconSize;
export let disabled = false;
export let active = false;
export let tooltip: string | undefined = undefined;
// Callbacks
export let action: (e?: MouseEvent) => void;
type ButtonHTMLElementProps = SvelteHTMLElements["button"];
interface Props extends ButtonHTMLElementProps {
class?: string;
classes?: Record<string, boolean>;
icon: IconName;
hoverIcon?: IconName | undefined;
size: IconSize;
disabled?: boolean;
active?: boolean;
tooltip?: string | undefined;
}
let className = "";
export { className as class };
export let classes: Record<string, boolean> = {};
let {
class: className = "",
classes = {},
icon,
hoverIcon = undefined,
size,
disabled = false,
active = false,
tooltip = undefined,
...rest
}: Props = $props();
$: extraClasses = Object.entries(classes)
let extraClasses = $derived(Object.entries(classes)
.flatMap(([className, stateName]) => (stateName ? [className] : []))
.join(" ");
.join(" "));
</script>
<button
@ -26,11 +39,10 @@
class:hover-icon={hoverIcon && !disabled}
class:disabled
class:active
on:click={action}
{disabled}
title={tooltip}
tabindex={active ? -1 : 0}
{...$$restProps}
{...rest}
>
<IconLabel {icon} />
{#if hoverIcon && !disabled}
@ -55,7 +67,7 @@
}
// The `where` pseudo-class does not contribtue to specificity
& + :where(.icon-button) {
& + :where(:global(.icon-button)) {
margin-left: 0;
}

34
frontend/src/components/widgets/buttons/ImageButton.svelte
View file

@ -1,23 +1,33 @@
<script lang="ts">
import { IMAGE_BASE64_STRINGS } from "@graphite/utility-functions/images";
let className = "";
export { className as class };
export let classes: Record<string, boolean> = {};
interface Props {
class?: string;
classes?: Record<string, boolean>;
image: string;
width: string | undefined;
height: string | undefined;
tooltip?: string | undefined;
// Callbacks
action: (e?: MouseEvent) => void;
}
export let image: string;
export let width: string | undefined;
export let height: string | undefined;
export let tooltip: string | undefined = undefined;
// Callbacks
export let action: (e?: MouseEvent) => void;
let {
class: className = "",
classes = {},
image,
width,
height,
tooltip = undefined,
action
}: Props = $props();
$: extraClasses = Object.entries(classes)
let extraClasses = $derived(Object.entries(classes)
.flatMap(([className, stateName]) => (stateName ? [className] : []))
.join(" ");
.join(" "));
</script>
<img src={IMAGE_BASE64_STRINGS[image]} style:width style:height class={`image-label ${className} ${extraClasses}`.trim()} title={tooltip} alt="" on:click={action} />
<img src={IMAGE_BASE64_STRINGS[image]} style:width style:height class={`image-label ${className} ${extraClasses}`.trim()} title={tooltip} alt="" onclick={action} />
<style lang="scss" global>
.image-label {

21
frontend/src/components/widgets/buttons/ParameterExposeButton.svelte
View file

@ -3,11 +3,20 @@
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
export let exposed: boolean;
export let dataType: FrontendGraphDataType;
export let tooltip: string | undefined = undefined;
// Callbacks
export let action: (e?: MouseEvent) => void;
interface Props {
exposed: boolean;
dataType: FrontendGraphDataType;
tooltip?: string | undefined;
// Callbacks
action: (e?: MouseEvent) => void;
}
let {
exposed,
dataType,
tooltip = undefined,
action
}: Props = $props();
</script>
<LayoutRow class="parameter-expose-button">
@ -15,7 +24,7 @@
class:exposed
style:--data-type-color={`var(--color-data-${dataType.toLowerCase()})`}
style:--data-type-color-dim={`var(--color-data-${dataType.toLowerCase()}-dim)`}
on:click={action}
onclick={action}
title={tooltip}
tabindex="-1"
>

37
frontend/src/components/widgets/buttons/PopoverButton.svelte
View file

@ -7,17 +7,30 @@
import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
export let style: PopoverButtonStyle = "DropdownArrow";
export let menuDirection: MenuDirection = "Bottom";
export let icon: IconName | undefined = undefined;
export let tooltip: string | undefined = undefined;
export let disabled = false;
export let popoverMinWidth = 1;
interface Props {
style?: PopoverButtonStyle;
menuDirection?: MenuDirection;
icon?: IconName | undefined;
tooltip?: string | undefined;
disabled?: boolean;
popoverMinWidth?: number;
// Callbacks
action?: (() => void) | undefined;
children?: import('svelte').Snippet;
}
// Callbacks
export let action: (() => void) | undefined = undefined;
let {
style = "DropdownArrow",
menuDirection = "Bottom",
icon = undefined,
tooltip = undefined,
disabled = false,
popoverMinWidth = 1,
action = undefined,
children
}: Props = $props();
let open = false;
let open = $state(false);
function onClick() {
open = true;
@ -26,13 +39,13 @@
</script>
<LayoutRow class="popover-button" classes={{ "has-icon": icon !== undefined, "direction-top": menuDirection === "Top" }}>
<IconButton class="dropdown-icon" classes={{ open }} {disabled} action={() => onClick()} icon={style || "DropdownArrow"} size={16} {tooltip} data-floating-menu-spawner />
<IconButton class="dropdown-icon" classes={{ open }} {disabled} onclick={() => onClick()} icon={style || "DropdownArrow"} size={16} {tooltip} data-floating-menu-spawner />
{#if icon !== undefined}
<IconLabel class="descriptive-icon" classes={{ open }} {disabled} {icon} {tooltip} />
{/if}
<FloatingMenu {open} on:open={({ detail }) => (open = detail)} minWidth={popoverMinWidth} type="Popover" direction={menuDirection || "Bottom"}>
<slot />
<FloatingMenu bind:open minWidth={popoverMinWidth} type="Popover" direction={menuDirection || "Bottom"}>
{@render children?.()}
</FloatingMenu>
</LayoutRow>

52
frontend/src/components/widgets/buttons/TextButton.svelte
View file

@ -7,25 +7,38 @@
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
let self: MenuList;
let self: MenuList | undefined = $state();
let open: boolean = $state(false);
// Note: IconButton should be used if only an icon, but no label, is desired.
// However, if multiple TextButton widgets are used in a group with only some having no label, this component is able to accommodate that.
export let label: string;
export let icon: IconName | undefined = undefined;
export let hoverIcon: IconName | undefined = undefined;
export let emphasized = false;
export let flush = false;
export let minWidth = 0;
export let disabled = false;
export let tooltip: string | undefined = undefined;
export let menuListChildren: MenuListEntry[][] | undefined = undefined;
interface Props {
label: string;
icon?: IconName | undefined;
hoverIcon?: IconName | undefined;
emphasized?: boolean;
flush?: boolean;
minWidth?: number;
disabled?: boolean;
tooltip?: string | undefined;
menuListChildren?: MenuListEntry[][] | undefined;
// TODO: Replace this with an event binding (and on other components that do this)
action: (() => void) | undefined;
}
// Callbacks
// TODO: Replace this with an event binding (and on other components that do this)
export let action: (() => void) | undefined;
let {
label,
icon = undefined,
hoverIcon = undefined,
emphasized = false,
flush = false,
minWidth = 0,
disabled = false,
tooltip = undefined,
menuListChildren = $bindable([]),
action
}: Props = $props();
$: menuListChildrenExists = (menuListChildren?.length ?? 0) > 0;
let menuListChildrenExists = $derived((menuListChildren?.length ?? 0) > 0);
// Handles either a button click or, if applicable, the opening of the menu list floating menu
function onClick(e: MouseEvent) {
@ -50,7 +63,7 @@
<ConditionalWrapper condition={menuListChildrenExists} wrapperClass="text-button-container">
<button
class="text-button"
class:open={self?.open}
class:open={open}
class:hover-icon={hoverIcon && !disabled}
class:emphasized
class:disabled
@ -62,7 +75,7 @@
data-text-button
tabindex={disabled ? -1 : 0}
data-floating-menu-spawner={menuListChildrenExists ? "" : "no-hover-transfer"}
on:click={onClick}
onclick={onClick}
>
{#if icon}
<IconLabel {icon} />
@ -76,9 +89,8 @@
</button>
{#if menuListChildrenExists}
<MenuList
on:open={({ detail }) => self && (self.open = detail)}
open={self?.open || false}
entries={menuListChildren || []}
bind:open={open}
entries={menuListChildren}
direction="Bottom"
minWidth={240}
drawIcon={true}

35
frontend/src/components/widgets/inputs/CheckboxInput.svelte
View file

@ -1,25 +1,34 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import type { IconName } from "@graphite/utility-functions/icons";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
const dispatch = createEventDispatcher<{ checked: boolean }>();
export let checked = false;
export let disabled = false;
export let icon: IconName = "Checkmark";
export let tooltip: string | undefined = undefined;
export let forLabel: bigint | undefined = undefined;
interface Props {
checked?: boolean;
disabled?: boolean;
icon?: IconName;
tooltip?: string | undefined;
forLabel?: bigint | undefined;
onchecked?: (checked: boolean) => void;
}
let {
checked = false,
disabled = false,
icon = "Checkmark",
tooltip = undefined,
forLabel = undefined,
onchecked,
}: Props = $props();
let inputElement: HTMLInputElement | undefined;
let inputElement: HTMLInputElement | undefined = $state();
const backupId = String(Math.random()).substring(2);
$: id = forLabel !== undefined ? String(forLabel) : backupId;
$: displayIcon = (!checked && icon === "Checkmark" ? "Empty12px" : icon) as IconName;
let id = $derived(forLabel !== undefined ? String(forLabel) : backupId);
let displayIcon = $derived((!checked && icon === "Checkmark" ? "Empty12px" : icon) as IconName);
export function isChecked() {
return checked;
@ -41,12 +50,12 @@
type="checkbox"
id={`checkbox-input-${id}`}
bind:checked
on:change={(_) => dispatch("checked", inputElement?.checked || false)}
onchange={(_) => onchecked?.(inputElement?.checked ?? false)}
{disabled}
tabindex={disabled ? -1 : 0}
bind:this={inputElement}
/>
<label class:disabled class:checked for={`checkbox-input-${id}`} on:keydown={(e) => e.key === "Enter" && toggleCheckboxFromLabel(e)} title={tooltip}>
<label class:disabled class:checked for={`checkbox-input-${id}`} onkeydown={(e) => e.key === "Enter" && toggleCheckboxFromLabel(e)} title={tooltip}>
<LayoutRow class="checkbox-box">
<IconLabel icon={displayIcon} />
</LayoutRow>

52
frontend/src/components/widgets/inputs/ColorInput.svelte
View file

@ -1,6 +1,4 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import type { FillChoice } from "@graphite/messages";
import { Color, contrastingOutlineFactor, Gradient } from "@graphite/messages";
@ -8,41 +6,49 @@
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
const dispatch = createEventDispatcher<{ value: FillChoice; startHistoryTransaction: undefined }>();
let open = $state(false);
let open = false;
interface Props {
value: FillChoice;
disabled?: boolean;
allowNone?: boolean;
// export let allowTransparency = false; // TODO: Implement
tooltip?: string | undefined;
onvalue?: (value: FillChoice) => void;
onstartHistoryTransaction?: () => void;
}
export let value: FillChoice;
export let disabled = false;
export let allowNone = false;
// export let allowTransparency = false; // TODO: Implement
export let tooltip: string | undefined = undefined;
let {
value,
disabled = false,
allowNone = false,
tooltip = undefined,
onvalue,
onstartHistoryTransaction,
}: Props = $props();
let outlineFactor = $derived(contrastingOutlineFactor(value, ["--color-1-nearblack", "--color-3-darkgray"], 0.01));
let outlined = $derived(outlineFactor > 0.0001);
let chosenGradient = $derived(value instanceof Gradient ? value.toLinearGradientCSS() : `linear-gradient(${value.toHexOptionalAlpha()}, ${value.toHexOptionalAlpha()})`);
let none = $derived(value instanceof Color ? value.none : false);
let transparency = $derived(value instanceof Gradient ? value.stops.some((stop) => stop.color.alpha < 1) : value.alpha < 1);
$: outlineFactor = contrastingOutlineFactor(value, ["--color-1-nearblack", "--color-3-darkgray"], 0.01);
$: outlined = outlineFactor > 0.0001;
$: chosenGradient = value instanceof Gradient ? value.toLinearGradientCSS() : `linear-gradient(${value.toHexOptionalAlpha()}, ${value.toHexOptionalAlpha()})`;
$: none = value instanceof Color ? value.none : false;
$: transparency = value instanceof Gradient ? value.stops.some((stop) => stop.color.alpha < 1) : value.alpha < 1;
</script>
<LayoutCol class="color-button" classes={{ open, disabled, none, transparency, outlined }} {tooltip}>
<button {disabled} style:--chosen-gradient={chosenGradient} style:--outline-amount={outlineFactor} on:click={() => (open = true)} tabindex="0" data-floating-menu-spawner>
<button {disabled} style:--chosen-gradient={chosenGradient} style:--outline-amount={outlineFactor} onclick={() => (open = true)} tabindex="0" data-floating-menu-spawner>
{#if disabled && value instanceof Color && !value.none}
<TextLabel>sRGB</TextLabel>
{/if}
</button>
<ColorPicker
{open}
on:open={({ detail }) => (open = detail)}
bind:open
colorOrGradient={value}
on:colorOrGradient={({ detail }) => {
value = detail;
dispatch("value", detail);
}}
on:startHistoryTransaction={() => {
oncolorOrGradient={onvalue}
onstartHistoryTransaction={() => {
// This event is sent to the backend so it knows to start a transaction for the history system. See discussion for some explanation:
// <https://github.com/GraphiteEditor/Graphite/pull/1584#discussion_r1477592483>
dispatch("startHistoryTransaction");
onstartHistoryTransaction?.()
}}
{allowNone}
/>

63
frontend/src/components/widgets/inputs/CurveInput.svelte
View file

@ -1,26 +1,34 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import type { Curve, CurveManipulatorGroup } from "@graphite/messages";
import { clamp } from "@graphite/utility-functions/math";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
const dispatch = createEventDispatcher<{
interface Props {
classes?: Record<string, boolean>;
style?: string;
styles?: Record<string, string | number | undefined>;
value: Curve;
}>();
disabled?: boolean;
tooltip?: string | undefined;
children?: import('svelte').Snippet;
onvalue?: (curve: Curve) => void;
}
export let classes: Record<string, boolean> = {};
let styleName = "";
export { styleName as style };
export let styles: Record<string, string | number | undefined> = {};
export let value: Curve;
export let disabled = false;
export let tooltip: string | undefined = undefined;
let {
classes = {},
style: styleName = "",
styles = {},
value,
disabled = false,
tooltip = undefined,
children,
onvalue,
}: Props = $props();
const GRID_SIZE = 4;
let groups: CurveManipulatorGroup[] = [
let groups: CurveManipulatorGroup[] = $state([
{
anchor: [0, 0],
handles: [
@ -42,20 +50,14 @@
[2, 2],
],
},
];
let selectedNodeIndex: number | undefined = undefined;
]);
let selectedNodeIndex: number | undefined = $state(undefined);
let draggedNodeIndex: number | undefined = undefined;
let dAttribute = recalculateSvgPath();
let dAttribute = $state(recalculateSvgPath());
$: {
groups = [groups[0]].concat(value.manipulatorGroups).concat([groups[groups.length - 1]]);
groups[0].handles[1] = value.firstHandle;
groups[groups.length - 1].handles[0] = value.lastHandle;
dAttribute = recalculateSvgPath();
}
function updateCurve() {
dispatch("value", {
onvalue?.({
manipulatorGroups: groups.slice(1, groups.length - 1),
firstHandle: groups[0].handles[1],
lastHandle: groups[groups.length - 1].handles[0],
@ -83,7 +85,6 @@
selectedNodeIndex = undefined;
groups.splice(i, 1);
groups = groups;
dAttribute = recalculateSvgPath();
@ -186,10 +187,16 @@
dAttribute = recalculateSvgPath();
updateCurve();
}
$effect(() => {
groups = [groups[0]].concat(value.manipulatorGroups).concat([groups[groups.length - 1]]);
groups[0].handles[1] = value.firstHandle;
groups[groups.length - 1].handles[0] = value.lastHandle;
dAttribute = recalculateSvgPath();
});
</script>
<LayoutRow class={"curve-input"} classes={{ disabled, ...classes }} style={styleName} {styles} {tooltip}>
<svg viewBox="0 0 1 1" on:pointermove={handlePointerMove} on:pointerup={handlePointerUp}>
<svg viewBox="0 0 1 1" onpointermove={handlePointerMove} onpointerup={handlePointerUp}>
{#each { length: GRID_SIZE - 1 } as _, i}
<path class="grid" d={`M 0 ${(i + 1) / GRID_SIZE} L 1 ${(i + 1) / GRID_SIZE}`} />
<path class="grid" d={`M ${(i + 1) / GRID_SIZE} 0 L ${(i + 1) / GRID_SIZE} 1`} />
@ -199,14 +206,14 @@
{@const group = groups[selectedNodeIndex]}
{#each [0, 1] as i}
<path d={`M ${group.anchor[0]} ${1 - group.anchor[1]} L ${group.handles[i][0]} ${1 - group.handles[i][1]}`} class="handle-line" />
<circle cx={group.handles[i][0]} cy={1 - group.handles[i][1]} class="manipulator handle" r="0.02" on:pointerdown={(e) => handleManipulatorPointerDown(e, -i - 1)} />
<circle cx={group.handles[i][0]} cy={1 - group.handles[i][1]} class="manipulator handle" r="0.02" onpointerdown={(e) => handleManipulatorPointerDown(e, -i - 1)} />
{/each}
{/if}
{#each groups as group, i}
<circle cx={group.anchor[0]} cy={1 - group.anchor[1]} class="manipulator" r="0.02" on:pointerdown={(e) => handleManipulatorPointerDown(e, i)} />
<circle cx={group.anchor[0]} cy={1 - group.anchor[1]} class="manipulator" r="0.02" onpointerdown={(e) => handleManipulatorPointerDown(e, i)} />
{/each}
</svg>
<slot />
{@render children?.()}
</LayoutRow>
<style lang="scss" global>

82
frontend/src/components/widgets/inputs/DropdownInput.svelte
View file

@ -1,6 +1,4 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import type { MenuListEntry } from "@graphite/messages";
import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
@ -10,29 +8,41 @@
const DASH_ENTRY = { value: "", label: "-" };
const dispatch = createEventDispatcher<{ selectedIndex: number; hoverInEntry: number; hoverOutEntry: number }>();
let menuList: MenuList | undefined = $state();
let self: LayoutRow | undefined = $state();
let menuList: MenuList | undefined;
let self: LayoutRow | undefined;
interface Props {
entries: MenuListEntry[][];
selectedIndex?: number | undefined; // When not provided, a dash is displayed
drawIcon?: boolean;
interactive?: boolean;
disabled?: boolean;
tooltip?: string | undefined;
minWidth?: number;
maxWidth?: number;
onhoverOutEntry?: (index: number) => void;
onhoverInEntry?: (index: number) => void;
onselectedIndex?: (index: number) => void;
}
export let entries: MenuListEntry[][];
export let selectedIndex: number | undefined = undefined; // When not provided, a dash is displayed
export let drawIcon = false;
export let interactive = true;
export let disabled = false;
export let tooltip: string | undefined = undefined;
export let minWidth = 0;
export let maxWidth = 0;
let {
entries,
selectedIndex = undefined,
drawIcon = false,
interactive = true,
disabled = false,
tooltip = undefined,
minWidth = $bindable(0),
maxWidth = 0,
onhoverInEntry,
onhoverOutEntry,
onselectedIndex,
}: Props = $props();
let activeEntry = makeActiveEntry();
let activeEntry = $state(makeActiveEntry());
let activeEntrySkipWatcher = false;
let initialSelectedIndex: number | undefined = undefined;
let open = false;
$: watchSelectedIndex(selectedIndex);
$: watchEntries(entries);
$: watchActiveEntry(activeEntry);
$: watchOpen(open);
let open = $state(false);
function watchOpen(open: boolean) {
initialSelectedIndex = open ? selectedIndex : undefined;
@ -56,17 +66,17 @@
activeEntrySkipWatcher = false;
} else if (activeEntry !== DASH_ENTRY) {
// We need to set to the initial value first to track a right history step, as if we hover in initial selection.
if (initialSelectedIndex !== undefined) dispatch("hoverInEntry", initialSelectedIndex);
dispatch("selectedIndex", entries.flat().indexOf(activeEntry));
if (initialSelectedIndex !== undefined) onhoverInEntry?.(initialSelectedIndex);
onselectedIndex?.(entries.flat().indexOf(activeEntry));
}
}
function dispatchHoverInEntry(hoveredEntry: MenuListEntry) {
dispatch("hoverInEntry", entries.flat().indexOf(hoveredEntry));
onhoverInEntry?.(entries.flat().indexOf(hoveredEntry));
}
function dispatchHoverOutEntry() {
if (initialSelectedIndex !== undefined) dispatch("hoverOutEntry", initialSelectedIndex);
if (initialSelectedIndex !== undefined) onhoverOutEntry?.(initialSelectedIndex);
}
function makeActiveEntry(): MenuListEntry {
@ -82,6 +92,15 @@
const blurTarget = (e.target as HTMLDivElement | undefined)?.closest("[data-dropdown-input]") || undefined;
if (blurTarget !== self?.div?.()) open = false;
}
$effect(() => {
watchSelectedIndex(selectedIndex);
});
$effect(() => {
watchActiveEntry(activeEntry);
});
$effect(() => {
watchOpen(open);
});
</script>
<LayoutRow
@ -94,8 +113,8 @@
class="dropdown-box"
classes={{ disabled, open }}
{tooltip}
on:click={() => !disabled && (open = true)}
on:blur={unFocusDropdownBox}
onclick={() => !disabled && (open = true)}
onblur={unFocusDropdownBox}
tabindex={disabled ? -1 : 0}
data-floating-menu-spawner
>
@ -106,13 +125,12 @@
<IconLabel class="dropdown-arrow" icon="DropdownArrow" />
</LayoutRow>
<MenuList
on:naturalWidth={({ detail }) => (minWidth = detail)}
onnaturalWidth={(detail) => (minWidth = detail)}
{activeEntry}
on:activeEntry={({ detail }) => (activeEntry = detail)}
on:hoverInEntry={({ detail }) => dispatchHoverInEntry(detail)}
on:hoverOutEntry={() => dispatchHoverOutEntry()}
{open}
on:open={({ detail }) => (open = detail)}
onactiveEntry={(detail) => (activeEntry = detail)}
onhoverInEntry={dispatchHoverInEntry}
onhoverOutEntry={dispatchHoverOutEntry}
bind:open
{entries}
{drawIcon}
{interactive}

121
frontend/src/components/widgets/inputs/FieldInput.svelte
View file

@ -1,41 +1,65 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { platformIsMac } from "@graphite/utility-functions/platform";
import { preventEscapeClosingParentFloatingMenu } from "@graphite/components/layout/FloatingMenu.svelte";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import type { SvelteHTMLElements } from 'svelte/elements';
const dispatch = createEventDispatcher<{
type InputHTMLElementProps = SvelteHTMLElements["input"];
type TextAreaHTMLElementProps = SvelteHTMLElements["textarea"];
type CommonProps = {
class?: string;
classes?: Record<string, boolean>;
style?: string;
styles?: Record<string, string | number | undefined>;
value: string;
textFocused: undefined;
textChanged: undefined;
textChangeCanceled: undefined;
}>();
label?: string | undefined;
spellcheck?: boolean;
disabled?: boolean;
textarea?: boolean;
tooltip?: string | undefined;
placeholder?: string | undefined;
hideContextMenu?: boolean;
children?: import('svelte').Snippet;
onfocus?: (event: FocusEvent & { currentTarget: HTMLInputElement | HTMLTextAreaElement }) => void;
onblur?: (event: FocusEvent & { currentTarget: HTMLInputElement | HTMLTextAreaElement }) => void;
onchange?: (event: Event & { currentTarget: HTMLInputElement | HTMLTextAreaElement }) => void;
onkeydown?: (event: KeyboardEvent & { currentTarget: HTMLInputElement | HTMLTextAreaElement }) => void;
onpointerdown?: (event: PointerEvent & { currentTarget: HTMLInputElement | HTMLTextAreaElement | HTMLLabelElement }) => void;
ontextChangeCanceled?: () => void;
}
let className = "";
export { className as class };
export let classes: Record<string, boolean> = {};
let styleName = "";
export { styleName as style };
export let styles: Record<string, string | number | undefined> = {};
export let value: string;
export let label: string | undefined = undefined;
export let spellcheck = false;
export let disabled = false;
export let textarea = false;
export let tooltip: string | undefined = undefined;
export let placeholder: string | undefined = undefined;
export let hideContextMenu = false;
type Props = CommonProps & (
CommonProps['textarea'] extends true
? TextAreaHTMLElementProps // If 'textarea' is explicitly true
: InputHTMLElementProps // Otherwise (false, undefined, or missing)
);
let inputOrTextarea: HTMLInputElement | HTMLTextAreaElement | undefined;
let {
class: className = "",
classes = {},
style: styleName = "",
styles = {},
value = $bindable(),
label = undefined,
spellcheck = false,
disabled = false,
textarea = false,
tooltip = undefined,
placeholder = undefined,
hideContextMenu = false,
onfocus,
onchange,
children,
onpointerdown,
ontextChangeCanceled,
}: Props = $props();
let inputOrTextarea: HTMLInputElement | HTMLTextAreaElement | undefined = $state();
let id = String(Math.random()).substring(2);
let macKeyboardLayout = platformIsMac();
$: inputValue = value;
$: dispatch("value", inputValue);
// Select (highlight) all the text. For technical reasons, it is necessary to pass the current text.
export function selectAllText(currentText: string) {
if (!inputOrTextarea) return;
@ -54,7 +78,7 @@
}
export function getValue(): string {
return inputOrTextarea?.value || "";
return inputOrTextarea?.value ?? "";
}
export function setInputElementValue(value: string) {
@ -68,10 +92,15 @@
}
function cancel() {
dispatch("textChangeCanceled");
ontextChangeCanceled?.();
if (inputOrTextarea) preventEscapeClosingParentFloatingMenu(inputOrTextarea);
}
function onkeydown(e: KeyboardEvent) {
e.key === "Enter" && onchange?.(e);
e.key === "Escape" && cancel();
}
</script>
<!-- This is a base component, extended by others like NumberInput and TextInput. It should not be used directly. -->
@ -85,14 +114,13 @@
{disabled}
{placeholder}
bind:this={inputOrTextarea}
bind:value={inputValue}
on:focus={() => dispatch("textFocused")}
on:blur={() => dispatch("textChanged")}
on:change={() => dispatch("textChanged")}
on:keydown={(e) => e.key === "Enter" && dispatch("textChanged")}
on:keydown={(e) => e.key === "Escape" && cancel()}
on:pointerdown
on:contextmenu={(e) => hideContextMenu && e.preventDefault()}
bind:value={value}
onfocus={onfocus}
onblur={onchange}
onchange={onchange}
onkeydown={onkeydown}
onpointerdown={onpointerdown}
oncontextmenu={(e) => hideContextMenu && e.preventDefault()}
data-input-element
/>
{:else}
@ -104,20 +132,19 @@
{spellcheck}
{disabled}
bind:this={inputOrTextarea}
bind:value={inputValue}
on:focus={() => dispatch("textFocused")}
on:blur={() => dispatch("textChanged")}
on:change={() => dispatch("textChanged")}
on:keydown={(e) => (macKeyboardLayout ? e.metaKey : e.ctrlKey) && e.key === "Enter" && dispatch("textChanged")}
on:keydown={(e) => e.key === "Escape" && cancel()}
on:pointerdown
on:contextmenu={(e) => hideContextMenu && e.preventDefault()}
/>
bind:value={value}
onfocus={onfocus}
onblur={onchange}
onchange={onchange}
onkeydown={onkeydown}
onpointerdown={onpointerdown}
oncontextmenu={(e) => hideContextMenu && e.preventDefault()}
></textarea>
{/if}
{#if label}
<label for={`field-input-${id}`} on:pointerdown>{label}</label>
<label for={`field-input-${id}`} onpointerdown={onpointerdown}>{label}</label>
{/if}
<slot />
{@render children?.()}
</LayoutRow>
<style lang="scss" global>

59
frontend/src/components/widgets/inputs/FontInput.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts">
import { createEventDispatcher, getContext, onMount, tick } from "svelte";
import { getContext, onMount, tick } from "svelte";
import type { MenuListEntry } from "@graphite/messages";
import type { FontsState } from "@graphite/state-providers/fonts";
@ -11,26 +11,35 @@
const fonts = getContext<FontsState>("fonts");
const dispatch = createEventDispatcher<{
let menuList: MenuList | undefined = $state();
interface Props {
fontFamily: string;
fontStyle: string;
changeFont: { fontFamily: string; fontStyle: string; fontFileUrl: string | undefined };
}>();
isStyle?: boolean;
disabled?: boolean;
tooltip?: string | undefined;
onchangeFont?: (arg1: { fontFamily: string; fontStyle: string; fontFileUrl: string | undefined }) => void;
onfontFamily?: (fontFamily: string) => void;
onfontStyle?: (fontStyle: string) => void;
}
let menuList: MenuList | undefined;
let {
fontFamily,
fontStyle,
isStyle = false,
disabled = false,
tooltip = undefined,
onchangeFont,
onfontFamily,
onfontStyle,
}: Props = $props();
export let fontFamily: string;
export let fontStyle: string;
export let isStyle = false;
export let disabled = false;
export let tooltip: string | undefined = undefined;
let open = $state(false);
let entries: MenuListEntry[] = $state([]);
let activeEntry: MenuListEntry | undefined = $state(undefined);
let minWidth = $state(isStyle ? 0 : 300);
let open = false;
let entries: MenuListEntry[] = [];
let activeEntry: MenuListEntry | undefined = undefined;
let minWidth = isStyle ? 0 : 300;
$: watchFont(fontFamily, fontStyle);
async function watchFont(..._: string[]) {
// We set this function's result to a local variable to avoid reading from `entries` which causes Svelte to trigger an update that results in an infinite loop
@ -64,19 +73,19 @@
let style;
if (isStyle) {
dispatch("fontStyle", newName);
onfontStyle?.(newName);
family = fontFamily;
style = newName;
} else {
dispatch("fontFamily", newName);
onfontFamily?.(newName);
family = newName;
style = "Regular (400)";
}
const fontFileUrl = await fonts.getFontFileUrl(family, style);
dispatch("changeFont", { fontFamily: family, fontStyle: style, fontFileUrl });
onchangeFont?.({ fontFamily: family, fontStyle: style, fontFileUrl });
}
async function getEntries(): Promise<MenuListEntry[]> {
@ -100,6 +109,9 @@
activeEntry = getActiveEntry(entries);
});
$effect(() => {
watchFont(fontFamily, fontStyle);
});
</script>
<!-- TODO: Combine this widget into the DropdownInput widget -->
@ -110,18 +122,17 @@
styles={{ ...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}) }}
{tooltip}
tabindex={disabled ? -1 : 0}
on:click={toggleOpen}
onclick={toggleOpen}
data-floating-menu-spawner
>
<TextLabel class="dropdown-label">{activeEntry?.value || ""}</TextLabel>
<IconLabel class="dropdown-arrow" icon="DropdownArrow" />
</LayoutRow>
<MenuList
on:naturalWidth={({ detail }) => isStyle && (minWidth = detail)}
{activeEntry}
on:activeEntry={({ detail }) => (activeEntry = detail)}
{open}
on:open={({ detail }) => (open = detail)}
onnaturalWidth={(detail) => isStyle && (minWidth = detail)}
onactiveEntry={(detail) => (activeEntry = detail)}
bind:open
entries={[entries]}
minWidth={isStyle ? 0 : minWidth}
virtualScrollingEntryHeight={isStyle ? 0 : 20}

202
frontend/src/components/widgets/inputs/NumberInput.svelte
View file

@ -1,5 +1,8 @@
<script lang="ts">
import { createEventDispatcher, onMount, onDestroy } from "svelte";
import { createBubbler, preventDefault } from 'svelte/legacy';
const bubble = createBubbler();
import { onMount } from "svelte";
import { PRESS_REPEAT_DELAY_MS, PRESS_REPEAT_INTERVAL_MS } from "@graphite/io-managers/input";
import { type NumberInputMode, type NumberInputIncrementBehavior } from "@graphite/messages";
@ -12,71 +15,91 @@
const BUTTONS_RIGHT = 0b0000_0010;
const BUTTON_LEFT = 0;
const BUTTON_RIGHT = 2;
interface Props {
// Label
label?: string | undefined;
tooltip?: string | undefined;
// Disabled
disabled?: boolean;
// Value
// When `value` is not provided (i.e. it's `undefined`), a dash is displayed.
value?: number | undefined; // NOTE: Do not update this directly, do so by calling `updateValue()` instead.
min?: number | undefined;
max?: number | undefined;
isInteger?: boolean;
// Number presentation
displayDecimalPlaces?: number;
unit?: string;
unitIsHiddenWhenEditing?: boolean;
// Mode behavior
// "Increment" shows arrows and allows dragging left/right to change the value.
// "Range" shows a range slider between some minimum and maximum value.
mode?: NumberInputMode;
// When `mode` is "Increment", `step` is the multiplier or addend used with `incrementBehavior`.
// When `mode` is "Range", `step` is the range slider's snapping increment if `isInteger` is `true`.
step?: number;
// `incrementBehavior` is only applicable with a `mode` of "Increment".
// "Add"/"Multiply": The value is added or multiplied by `step`.
// "None": the increment arrows are not shown.
// "Callback": the functions `incrementCallbackIncrease` and `incrementCallbackDecrease` call custom behavior.
incrementBehavior?: NumberInputIncrementBehavior;
// `rangeMin` and `rangeMax` are only applicable with a `mode` of "Range".
// They set the lower and upper values of the slider to drag between.
rangeMin?: number;
rangeMax?: number;
// Styling
minWidth?: number;
maxWidth?: number;
// Callbacks
incrementCallbackIncrease?: (() => void) | undefined;
incrementCallbackDecrease?: (() => void) | undefined;
onvalue?: (value: number | undefined) => void;
onstartHistoryTransaction?: () => void;
}
const dispatch = createEventDispatcher<{ value: number | undefined; startHistoryTransaction: undefined }>();
let {
label = undefined,
tooltip = undefined,
disabled = false,
value = undefined,
min = undefined,
max = undefined,
isInteger = false,
displayDecimalPlaces = 2,
unit = "",
unitIsHiddenWhenEditing = true,
mode = "Increment",
step = 1,
incrementBehavior = "Add",
rangeMin = 0,
rangeMax = 1,
minWidth = 0,
maxWidth = 0,
incrementCallbackIncrease = undefined,
incrementCallbackDecrease = undefined,
onvalue,
onstartHistoryTransaction,
}: Props = $props();
// Label
export let label: string | undefined = undefined;
export let tooltip: string | undefined = undefined;
// Disabled
export let disabled = false;
// Value
// When `value` is not provided (i.e. it's `undefined`), a dash is displayed.
export let value: number | undefined = undefined; // NOTE: Do not update this directly, do so by calling `updateValue()` instead.
export let min: number | undefined = undefined;
export let max: number | undefined = undefined;
export let isInteger = false;
// Number presentation
export let displayDecimalPlaces = 2;
export let unit = "";
export let unitIsHiddenWhenEditing = true;
// Mode behavior
// "Increment" shows arrows and allows dragging left/right to change the value.
// "Range" shows a range slider between some minimum and maximum value.
export let mode: NumberInputMode = "Increment";
// When `mode` is "Increment", `step` is the multiplier or addend used with `incrementBehavior`.
// When `mode` is "Range", `step` is the range slider's snapping increment if `isInteger` is `true`.
export let step = 1;
// `incrementBehavior` is only applicable with a `mode` of "Increment".
// "Add"/"Multiply": The value is added or multiplied by `step`.
// "None": the increment arrows are not shown.
// "Callback": the functions `incrementCallbackIncrease` and `incrementCallbackDecrease` call custom behavior.
export let incrementBehavior: NumberInputIncrementBehavior = "Add";
// `rangeMin` and `rangeMax` are only applicable with a `mode` of "Range".
// They set the lower and upper values of the slider to drag between.
export let rangeMin = 0;
export let rangeMax = 1;
// Styling
export let minWidth = 0;
export let maxWidth = 0;
// Callbacks
export let incrementCallbackIncrease: (() => void) | undefined = undefined;
export let incrementCallbackDecrease: (() => void) | undefined = undefined;
let self: FieldInput | undefined;
let inputRangeElement: HTMLInputElement | undefined;
let text = displayText(value, unit);
let self: FieldInput | undefined = $state();
let inputRangeElement: HTMLInputElement | undefined = $state();
let text = $state(displayText(value, unit));
let editing = false;
let isDragging = false;
let pressingArrow = false;
let repeatTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
// Stays in sync with a binding to the actual input range slider element.
let rangeSliderValue = value !== undefined ? value : 0;
let rangeSliderValue = $state(value !== undefined ? value : 0);
// Value used to render the position of the fake slider when applicable, and length of the progress colored region to the slider's left.
// This is the same as `rangeSliderValue` except in the "Deciding" state, when it has the previous location before the user's mousedown.
let rangeSliderValueAsRendered = value !== undefined ? value : 0;
let rangeSliderValueAsRendered = $state(value !== undefined ? value : 0);
// Keeps track of the state of the slider drag as the user transitions through steps of the input process.
// - "Ready": no interaction is happening.
// - "Deciding": the user has pressed down the mouse and might next decide to either drag left/right or release without dragging.
// - "Dragging": the user is dragging the slider left/right.
// - "Aborted": the user has right clicked or pressed Escape to abort the drag, but hasn't yet released all mouse buttons.
let rangeSliderClickDragState: "Ready" | "Deciding" | "Dragging" | "Aborted" = "Ready";
let rangeSliderClickDragState: "Ready" | "Deciding" | "Dragging" | "Aborted" = $state("Ready");
// Stores the initial value upon beginning to drag so it can be restored upon aborting. Set to `undefined` when not dragging.
let initialValueBeforeDragging: number | undefined = undefined;
// Stores the total value change during the process of dragging the slider. Set to 0 when not dragging.
@ -84,14 +107,7 @@
// Track whether the Ctrl key is currently held down.
let ctrlKeyDown = false;
$: watchValue(value, unit);
$: sliderStepValue = isInteger ? (step === undefined ? 1 : step) : "any";
$: styles = {
...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}),
...(maxWidth > 0 ? { "max-width": `${maxWidth}px` } : {}),
...(mode === "Range" ? { "--progress-factor": Math.min(Math.max((rangeSliderValueAsRendered - rangeMin) / (rangeMax - rangeMin), 0), 1) } : {}),
};
// Keep track of the Ctrl key being held down.
const trackCtrl = (e: KeyboardEvent | MouseEvent) => (ctrlKeyDown = e.ctrlKey);
@ -99,12 +115,16 @@
addEventListener("keydown", trackCtrl);
addEventListener("keyup", trackCtrl);
addEventListener("mousemove", trackCtrl);
return () => {
removeEventListener("keydown", trackCtrl);
removeEventListener("keyup", trackCtrl);
removeEventListener("mousemove", trackCtrl);
}
});
onDestroy(() => {
removeEventListener("keydown", trackCtrl);
removeEventListener("keyup", trackCtrl);
removeEventListener("mousemove", trackCtrl);
});
// onDestroy(() => {
// });
// ===============================
// TRACKING AND UPDATING THE VALUE
@ -152,7 +172,7 @@
text = displayText(newValueValidated, unit);
if (newValue !== undefined) dispatch("value", newValueValidated);
if (newValue !== undefined) onvalue?.(newValueValidated);
// For any caller that needs to know what the value was changed to, we return it here
return newValueValidated;
@ -212,7 +232,7 @@
if (newValue !== undefined) {
const oldValue = value !== undefined && isInteger ? Math.round(value) : value;
if (newValue !== oldValue) dispatch("startHistoryTransaction");
if (newValue !== oldValue) onstartHistoryTransaction?.();
}
updateValue(newValue);
@ -541,7 +561,7 @@
function startDragging() {
// This event is sent to the backend so it knows to start a transaction for the history system. See discussion for some explanation:
// <https://github.com/GraphiteEditor/Graphite/pull/1584#discussion_r1477592483>
dispatch("startHistoryTransaction");
onstartHistoryTransaction?.()
}
// We want to let the user abort while dragging the slider by right clicking or pressing Escape.
@ -632,6 +652,15 @@
removeEventListener("pointermove", sliderAbortFromDragging);
removeEventListener("keydown", sliderAbortFromDragging);
}
$effect(() => {
watchValue(value, unit);
});
let sliderStepValue = $derived(isInteger ? (step === undefined ? 1 : step) : "any");
let styles = $derived({
...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}),
...(maxWidth > 0 ? { "max-width": `${maxWidth}px` } : {}),
...(mode === "Range" ? { "--progress-factor": Math.min(Math.max((rangeSliderValueAsRendered - rangeMin) / (rangeMax - rangeMin), 0), 1) } : {}),
});
</script>
<FieldInput
@ -640,12 +669,11 @@
increment: mode === "Increment",
range: mode === "Range",
}}
value={text}
on:value={({ detail }) => (text = detail)}
on:textFocused={onTextFocused}
on:textChanged={onTextChanged}
on:textChangeCanceled={onTextChangeCanceled}
on:pointerdown={onDragPointerDown}
bind:value={text}
onfocus={onTextFocused}
onchange={onTextChanged}
ontextChangeCanceled={onTextChangeCanceled}
onpointerdown={onDragPointerDown}
{label}
{disabled}
{tooltip}
@ -658,18 +686,18 @@
{#if mode === "Increment" && incrementBehavior !== "None"}
<button
class="arrow left"
on:pointerdown={(e) => onIncrementPointerDown(e, "Decrease")}
on:mousedown={incrementPressAbort}
on:pointerup={onIncrementPointerUp}
on:pointerleave={onIncrementPointerUp}
onpointerdown={(e) => onIncrementPointerDown(e, "Decrease")}
onmousedown={incrementPressAbort}
onpointerup={onIncrementPointerUp}
onpointerleave={onIncrementPointerUp}
tabindex="-1"
></button>
<button
class="arrow right"
on:pointerdown={(e) => onIncrementPointerDown(e, "Increase")}
on:mousedown={incrementPressAbort}
on:pointerup={onIncrementPointerUp}
on:pointerleave={onIncrementPointerUp}
onpointerdown={(e) => onIncrementPointerDown(e, "Increase")}
onmousedown={incrementPressAbort}
onpointerup={onIncrementPointerUp}
onpointerleave={onIncrementPointerUp}
tabindex="-1"
></button>
{/if}
@ -684,16 +712,16 @@
max={rangeMax}
step={sliderStepValue}
bind:value={rangeSliderValue}
on:input={onSliderInput}
on:pointerup={onSliderPointerUp}
on:contextmenu|preventDefault
on:wheel={(e) => /* Stops slider eating the scroll event in Firefox */ e.target instanceof HTMLInputElement && e.target.blur()}
oninput={onSliderInput}
onpointerup={onSliderPointerUp}
oncontextmenu={preventDefault(bubble('contextmenu'))}
onwheel={(e) => /* Stops slider eating the scroll event in Firefox */ e.target instanceof HTMLInputElement && e.target.blur()}
bind:this={inputRangeElement}
/>
{#if rangeSliderClickDragState === "Deciding"}
<div class="fake-slider-thumb" />
<div class="fake-slider-thumb"></div>
{/if}
<div class="slider-progress" />
<div class="slider-progress"></div>
{/if}
{/if}
</FieldInput>

27
frontend/src/components/widgets/inputs/RadioInput.svelte
View file

@ -1,24 +1,31 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { type RadioEntries, type RadioEntryData } from "@graphite/messages";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
const dispatch = createEventDispatcher<{ selectedIndex: number }>();
interface Props {
entries: RadioEntries;
selectedIndex?: number | undefined;
disabled?: boolean;
minWidth?: number;
onselect?: (position: number) => void;
}
export let entries: RadioEntries;
export let selectedIndex: number | undefined = undefined;
export let disabled = false;
export let minWidth = 0;
let {
entries,
selectedIndex = undefined,
disabled = false,
minWidth = 0,
onselect
}: Props = $props();
$: mixed = selectedIndex === undefined && !disabled;
let mixed = $derived(selectedIndex === undefined && !disabled);
function handleEntryClick(radioEntryData: RadioEntryData) {
const index = entries.indexOf(radioEntryData);
dispatch("selectedIndex", index);
onselect?.(index);
radioEntryData.action?.();
}
@ -26,7 +33,7 @@
<LayoutRow class="radio-input" classes={{ disabled, mixed }} styles={{ ...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}) }}>
{#each entries as entry, index}
<button class:active={!mixed ? index === selectedIndex : undefined} on:click={() => handleEntryClick(entry)} title={entry.tooltip} tabindex={index === selectedIndex ? -1 : 0} {disabled}>
<button class:active={!mixed ? index === selectedIndex : undefined} onclick={() => handleEntryClick(entry)} title={entry.tooltip} tabindex={index === selectedIndex ? -1 : 0} {disabled}>
{#if entry.icon}
<IconLabel icon={entry.icon} />
{/if}

35
frontend/src/components/widgets/inputs/ReferencePointInput.svelte
View file

@ -1,28 +1,31 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import type { ReferencePoint } from "@graphite/messages";
const dispatch = createEventDispatcher<{ value: ReferencePoint }>();
interface Props {
value: string;
disabled?: boolean;
onvalue?: (point: ReferencePoint) => void;
}
export let value: string;
export let disabled = false;
let { value, disabled = false, onvalue }: Props = $props();
function setValue(newValue: ReferencePoint) {
dispatch("value", newValue);
function setValue(event: MouseEvent) {
let element = event.target as HTMLElement;
let position = element.dataset.position as ReferencePoint;
onvalue?.(position);
}
</script>
<div class="reference-point-input" class:disabled>
<button on:click={() => setValue("TopLeft")} class="row-1 col-1" class:active={value === "TopLeft"} tabindex="-1" {disabled}><div /></button>
<button on:click={() => setValue("TopCenter")} class="row-1 col-2" class:active={value === "TopCenter"} tabindex="-1" {disabled}><div /></button>
<button on:click={() => setValue("TopRight")} class="row-1 col-3" class:active={value === "TopRight"} tabindex="-1" {disabled}><div /></button>
<button on:click={() => setValue("CenterLeft")} class="row-2 col-1" class:active={value === "CenterLeft"} tabindex="-1" {disabled}><div /></button>
<button on:click={() => setValue("Center")} class="row-2 col-2" class:active={value === "Center"} tabindex="-1" {disabled}><div /></button>
<button on:click={() => setValue("CenterRight")} class="row-2 col-3" class:active={value === "CenterRight"} tabindex="-1" {disabled}><div /></button>
<button on:click={() => setValue("BottomLeft")} class="row-3 col-1" class:active={value === "BottomLeft"} tabindex="-1" {disabled}><div /></button>
<button on:click={() => setValue("BottomCenter")} class="row-3 col-2" class:active={value === "BottomCenter"} tabindex="-1" {disabled}><div /></button>
<button on:click={() => setValue("BottomRight")} class="row-3 col-3" class:active={value === "BottomRight"} tabindex="-1" {disabled}><div /></button>
<button onclick={setValue} data-position="TopLeft" class="row-1 col-1" class:active={value === "TopLeft"} tabindex="-1" {disabled}><div></div></button>
<button onclick={setValue} data-position="TopCenter" class="row-1 col-2" class:active={value === "TopCenter"} tabindex="-1" {disabled}><div></div></button>
<button onclick={setValue} data-position="TopRight" class="row-1 col-3" class:active={value === "TopRight"} tabindex="-1" {disabled}><div></div></button>
<button onclick={setValue} data-position="CenterLeft" class="row-2 col-1" class:active={value === "CenterLeft"} tabindex="-1" {disabled}><div></div></button>
<button onclick={setValue} data-position="Center" class="row-2 col-2" class:active={value === "Center"} tabindex="-1" {disabled}><div></div></button>
<button onclick={setValue} data-position="CenterRight" class="row-2 col-3" class:active={value === "CenterRight"} tabindex="-1" {disabled}><div></div></button>
<button onclick={setValue} data-position="BottomLeft" class="row-3 col-1" class:active={value === "BottomLeft"} tabindex="-1" {disabled}><div></div></button>
<button onclick={setValue} data-position="BottomCenter" class="row-3 col-2" class:active={value === "BottomCenter"} tabindex="-1" {disabled}><div></div></button>
<button onclick={setValue} data-position="BottomRight" class="row-3 col-3" class:active={value === "BottomRight"} tabindex="-1" {disabled}><div></div></button>
</div>
<style lang="scss" global>

41
frontend/src/components/widgets/inputs/RulerInput.svelte
View file

@ -1,7 +1,3 @@
<script lang="ts" context="module">
export type RulerDirection = "Horizontal" | "Vertical";
</script>
<script lang="ts">
import { onMount } from "svelte";
@ -10,21 +6,30 @@
const MINOR_MARK_THICKNESS = 6;
const MICRO_MARK_THICKNESS = 3;
export let direction: RulerDirection = "Vertical";
export let origin: number;
export let numberInterval: number;
export let majorMarkSpacing: number;
export let minorDivisions = 5;
export let microDivisions = 2;
interface Props {
direction?: Graphite.Axis;
origin: number;
numberInterval: number;
majorMarkSpacing: number;
minorDivisions?: number;
microDivisions?: number;
}
let rulerInput: HTMLDivElement | undefined;
let rulerLength = 0;
let svgBounds = { width: "0px", height: "0px" };
let {
direction = "Vertical",
origin,
numberInterval,
majorMarkSpacing,
minorDivisions = 5,
microDivisions = 2
}: Props = $props();
$: svgPath = computeSvgPath(direction, origin, majorMarkSpacing, minorDivisions, microDivisions, rulerLength);
$: svgTexts = computeSvgTexts(direction, origin, majorMarkSpacing, numberInterval, rulerLength);
let rulerInput: HTMLDivElement | undefined = $state();
let rulerLength = $state(0);
let svgBounds = $state({ width: "0px", height: "0px" });
function computeSvgPath(direction: RulerDirection, origin: number, majorMarkSpacing: number, minorDivisions: number, microDivisions: number, rulerLength: number): string {
function computeSvgPath(direction: Graphite.Axis, origin: number, majorMarkSpacing: number, minorDivisions: number, microDivisions: number, rulerLength: number): string {
const isVertical = direction === "Vertical";
const lineDirection = isVertical ? "H" : "V";
@ -51,7 +56,7 @@
return dPathAttribute;
}
function computeSvgTexts(direction: RulerDirection, origin: number, majorMarkSpacing: number, numberInterval: number, rulerLength: number): { transform: string; text: string }[] {
function computeSvgTexts(direction: Graphite.Axis, origin: number, majorMarkSpacing: number, numberInterval: number, rulerLength: number): { transform: string; text: string }[] {
const isVertical = direction === "Vertical";
const offsetStart = mod(origin, majorMarkSpacing);
@ -102,6 +107,8 @@
}
onMount(resize);
let svgPath = $derived(computeSvgPath(direction, origin, majorMarkSpacing, minorDivisions, microDivisions, rulerLength));
let svgTexts = $derived(computeSvgTexts(direction, origin, majorMarkSpacing, numberInterval, rulerLength));
</script>
<div class={`ruler-input ${direction.toLowerCase()}`} bind:this={rulerInput}>

70
frontend/src/components/widgets/inputs/ScrollbarInput.svelte
View file

@ -1,10 +1,4 @@
<script lang="ts" context="module">
export type ScrollbarDirection = "Horizontal" | "Vertical";
</script>
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { PRESS_REPEAT_DELAY_MS, PRESS_REPEAT_INTERVAL_MS, PRESS_REPEAT_INTERVAL_RAPID_MS } from "@graphite/io-managers/input";
const ARROW_CLICK_DISTANCE = 0.05;
@ -19,26 +13,38 @@
const clamp01 = (value: number): number => Math.min(Math.max(value, 0), 1);
const dispatch = createEventDispatcher<{ trackShift: number; thumbPosition: number; thumbDragStart: undefined; thumbDragEnd: undefined; thumbDragAbort: undefined }>();
interface Props {
direction?: Graphite.Axis;
thumbPosition?: number;
thumbLength?: number;
ontrackShift?: (trackShift: number) => void;
onthumbPosition?: (trackShift: number) => void;
onthumbDragEnd?: () => void;
onthumbDragStart?: () => void;
onthumbDragAbort?: () => void;
}
export let direction: ScrollbarDirection = "Vertical";
export let thumbPosition = 0.5;
export let thumbLength = 0.5;
let {
direction = "Vertical",
thumbPosition = 0.5,
thumbLength = 0.5,
ontrackShift,
onthumbPosition,
onthumbDragEnd,
onthumbDragStart,
onthumbDragAbort,
}: Props = $props();
let scrollTrack: HTMLDivElement | undefined;
let dragging = false;
let scrollTrack: HTMLDivElement | undefined = $state();
let dragging = $state(false);
let pressingTrack = false;
let pressingArrow = false;
let repeatTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
let pointerPositionLastFrame = 0;
let thumbTop: string | undefined = undefined;
let thumbBottom: string | undefined = undefined;
let thumbLeft: string | undefined = undefined;
let thumbRight: string | undefined = undefined;
$: start = thumbToTrack(thumbLength, thumbPosition) - thumbLength / 2;
$: end = 1 - thumbToTrack(thumbLength, thumbPosition) - thumbLength / 2;
$: [thumbTop, thumbBottom, thumbLeft, thumbRight] = direction === "Vertical" ? [`${start * 100}%`, `${end * 100}%`, "0%", "0%"] : ["0%", "0%", `${start * 100}%`, `${end * 100}%`];
let start = $derived(thumbToTrack(thumbLength, thumbPosition) - thumbLength / 2);
let end = $derived(1 - thumbToTrack(thumbLength, thumbPosition) - thumbLength / 2);
let [thumbTop, thumbBottom, thumbLeft, thumbRight] = $derived(direction === "Vertical" ? [`${start * 100}%`, `${end * 100}%`, "0%", "0%"] : ["0%", "0%", `${start * 100}%`, `${end * 100}%`]);
function trackLength(): number | undefined {
if (scrollTrack === undefined) return undefined;
@ -54,7 +60,7 @@
if (dragging) return;
dragging = true;
dispatch("thumbDragStart");
onthumbDragStart?.();
pointerPositionLastFrame = pointerPosition(e);
addEvents();
@ -65,14 +71,14 @@
if (!pressingArrow) return;
const distance = afterInitialDelay ? ARROW_REPEAT_DISTANCE : ARROW_CLICK_DISTANCE;
dispatch("trackShift", -direction * distance);
ontrackShift?.( -direction * distance);
if (afterInitialDelay) repeatTimeout = setTimeout(sendMove, PRESS_REPEAT_INTERVAL_RAPID_MS);
afterInitialDelay = true;
};
pressingArrow = true;
dispatch("thumbDragStart");
onthumbDragStart?.();
let afterInitialDelay = false;
sendMove();
repeatTimeout = setTimeout(sendMove, PRESS_REPEAT_DELAY_MS);
@ -108,13 +114,13 @@
}
const move = newPointer - oldPointer < 0 ? 1 : -1;
dispatch("trackShift", move);
ontrackShift?.(move);
if (afterInitialDelay) repeatTimeout = setTimeout(sendMove, PRESS_REPEAT_INTERVAL_MS);
afterInitialDelay = true;
};
dispatch("thumbDragStart");
onthumbDragStart?.();
pressingTrack = true;
let afterInitialDelay = false;
sendMove();
@ -128,17 +134,17 @@
pressingTrack = false;
pressingArrow = false;
clearTimeout(repeatTimeout);
dispatch("thumbDragAbort");
onthumbDragAbort?.();
}
if (dragging) {
dragging = false;
dispatch("thumbDragAbort");
onthumbDragAbort?.();
}
}
function onPointerUp() {
if (dragging) dispatch("thumbDragEnd");
if (dragging) onthumbDragEnd?.();
dragging = false;
pressingTrack = false;
@ -172,7 +178,7 @@
const dragDelta = positionPositionThisFrame - pointerPositionLastFrame;
const movement = dragDelta / (length * (1 - thumbLength));
const newThumbPosition = clamp01(thumbPosition + movement);
dispatch("thumbPosition", newThumbPosition);
onthumbPosition?.(newThumbPosition)
pointerPositionLastFrame = positionPositionThisFrame;
@ -207,11 +213,11 @@
</script>
<div class={`scrollbar-input ${direction.toLowerCase()}`}>
<button class="arrow decrease" on:pointerdown={() => pressArrow(-1)} tabindex="-1" data-scrollbar-arrow></button>
<div class="scroll-track" on:pointerdown={pressTrack} bind:this={scrollTrack}>
<div class="scroll-thumb" on:pointerdown={dragThumb} class:dragging style:top={thumbTop} style:bottom={thumbBottom} style:left={thumbLeft} style:right={thumbRight} />
<button class="arrow decrease" onpointerdown={() => pressArrow(-1)} tabindex="-1" data-scrollbar-arrow></button>
<div class="scroll-track" onpointerdown={pressTrack} bind:this={scrollTrack}>
<div class="scroll-thumb" onpointerdown={dragThumb} class:dragging style:top={thumbTop} style:bottom={thumbBottom} style:left={thumbLeft} style:right={thumbRight}></div>
</div>
<button class="arrow increase" on:pointerdown={() => pressArrow(1)} tabindex="-1" data-scrollbar-arrow></button>
<button class="arrow increase" onpointerdown={() => pressArrow(1)} tabindex="-1" data-scrollbar-arrow></button>
</div>
<style lang="scss" global>

68
frontend/src/components/widgets/inputs/SpectrumInput.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts">
import { createEventDispatcher, onDestroy } from "svelte";
import { onMount } from "svelte";
import { Color, type Gradient } from "@graphite/messages";
@ -10,22 +10,33 @@
const BUTTON_LEFT = 0;
const BUTTON_RIGHT = 2;
const dispatch = createEventDispatcher<{ activeMarkerIndexChange: number | undefined; gradient: Gradient; dragging: boolean }>();
interface Props {
activeMarkerIndex: number | undefined;
drag: boolean;
gradient: Gradient;
ongradient?: (gradient: Gradient) => void;
onactiveMarkerIndexChange?: (index: number | undefined) => void;
}
export let gradient: Gradient;
export let activeMarkerIndex = 0 as number | undefined;
let {
activeMarkerIndex = 0,
drag = $bindable(),
gradient,
ongradient,
onactiveMarkerIndexChange,
}: Props = $props();
// export let disabled = false;
// export let tooltip: string | undefined = undefined;
let markerTrack: LayoutRow | undefined = undefined;
let markerTrack: LayoutRow | undefined = $state(undefined);
let positionRestore: number | undefined = undefined;
let deletionRestore: boolean | undefined = undefined;
function markerPointerDown(e: PointerEvent, index: number) {
// Left-click to select and begin potentially dragging
if (e.button === BUTTON_LEFT) {
activeMarkerIndex = index;
dispatch("activeMarkerIndexChange", index);
// activeMarkerIndex = index;
onactiveMarkerIndexChange?.(index);
addEvents();
return;
}
@ -69,11 +80,9 @@
if (index === -1) index = gradient.stops.length;
gradient.stops.splice(index, 0, { position, color });
activeMarkerIndex = index;
deletionRestore = true;
dispatch("activeMarkerIndexChange", index);
dispatch("gradient", gradient);
onactiveMarkerIndexChange?.(index);
ongradient?.(gradient)
addEvents();
}
@ -91,15 +100,10 @@
if (gradient.stops.length <= 2) return;
gradient.stops.splice(index, 1);
if (gradient.stops.length === 0) {
activeMarkerIndex = undefined;
} else {
activeMarkerIndex = Math.max(0, Math.min(gradient.stops.length - 1, index));
}
let newMarkerIndex = gradient.stops.length === 0 ? undefined : Math.max(0, Math.min(gradient.stops.length - 1, index));
deletionRestore = undefined;
dispatch("activeMarkerIndexChange", activeMarkerIndex);
dispatch("gradient", gradient);
onactiveMarkerIndexChange?.(newMarkerIndex);
ongradient?.(gradient);
}
function moveMarker(e: PointerEvent, index: number) {
@ -113,7 +117,7 @@
if (deletionRestore === undefined) {
deletionRestore = false;
dispatch("dragging", true);
drag = true;
}
setPosition(index, position);
@ -124,10 +128,9 @@
active.position = position;
gradient.stops.sort((a, b) => a.position - b.position);
if (gradient.stops.indexOf(active) !== activeMarkerIndex) {
activeMarkerIndex = gradient.stops.indexOf(active);
dispatch("activeMarkerIndexChange", gradient.stops.indexOf(active));
onactiveMarkerIndexChange?.(gradient.stops.indexOf(active));
}
dispatch("gradient", gradient);
ongradient?.(gradient);
}
function abortDrag() {
@ -148,7 +151,7 @@
positionRestore = undefined;
deletionRestore = undefined;
dispatch("dragging", false);
drag = false;
}
function onPointerMove(e: PointerEvent) {
@ -187,11 +190,14 @@
document.removeEventListener("keydown", onKeyDown);
}
document.addEventListener("keydown", deleteStop);
onDestroy(() => {
removeEvents();
document.removeEventListener("keydown", deleteStop);
});
onMount(() => {
document.addEventListener("keydown", deleteStop);
return () => {
removeEvents();
document.removeEventListener("keydown", deleteStop);
}
})
// # Backend -> Frontend
// Populate(gradient, { position, color }[], active) // The only way indexes get changed. Frontend drops marker if it's being dragged.
@ -218,7 +224,7 @@
"--gradient-stops": gradient.toLinearGradientCSS(),
}}
>
<LayoutRow class="gradient-strip" on:pointerdown={insertStop}></LayoutRow>
<LayoutRow class="gradient-strip" onpointerdown={insertStop}></LayoutRow>
<LayoutRow class="marker-track" bind:this={markerTrack}>
{#each gradient.stops as marker, index}
<svg
@ -226,7 +232,7 @@
class:active={index === activeMarkerIndex}
style:--marker-position={marker.position}
style:--marker-color={marker.color.toRgbCSS()}
on:pointerdown={(e) => markerPointerDown(e, index)}
onpointerdown={(e) => markerPointerDown(e, index)}
data-gradient-marker
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 12 12"

34
frontend/src/components/widgets/inputs/TextAreaInput.svelte
View file

@ -1,16 +1,23 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import FieldInput from "@graphite/components/widgets/inputs/FieldInput.svelte";
const dispatch = createEventDispatcher<{ commitText: string }>();
interface Props {
value: string;
label?: string | undefined;
tooltip?: string | undefined;
disabled?: boolean;
oncommitText?: (arg1: string) => void;
}
export let value: string;
export let label: string | undefined = undefined;
export let tooltip: string | undefined = undefined;
export let disabled = false;
let {
value = $bindable(),
label = undefined,
tooltip = undefined,
disabled = false,
oncommitText
}: Props = $props();
let self: FieldInput | undefined;
let self: FieldInput | undefined = $state();
let editing = false;
function onTextFocused() {
@ -26,7 +33,7 @@
onTextChangeCanceled();
// TODO: Find a less hacky way to do this
if (self) dispatch("commitText", self.getValue());
if (self) oncommitText?.(self.getValue());
// Required if value is not changed by the parent component upon update:value event
self?.setInputElementValue(self.getValue());
@ -46,11 +53,10 @@
<FieldInput
class="text-area-input"
classes={{ "has-label": Boolean(label) }}
{value}
on:value
on:textFocused={onTextFocused}
on:textChanged={onTextChanged}
on:textChangeCanceled={onTextChangeCanceled}
bind:value
onfocus={onTextFocused}
onchange={onTextChanged}
ontextChangeCanceled={onTextChangeCanceled}
textarea={true}
spellcheck={true}
{label}

59
frontend/src/components/widgets/inputs/TextInput.svelte
View file

@ -1,27 +1,37 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import FieldInput from "@graphite/components/widgets/inputs/FieldInput.svelte";
const dispatch = createEventDispatcher<{ commitText: string }>();
interface Props {
// Label
label?: string | undefined;
tooltip?: string | undefined;
placeholder?: string | undefined;
// Disabled
disabled?: boolean;
// Value
value: string;
// Styling
centered?: boolean;
minWidth?: number;
class?: string;
classes?: Record<string, boolean>;
oncommitText?: (arg1: string) => void;
}
// Label
export let label: string | undefined = undefined;
export let tooltip: string | undefined = undefined;
export let placeholder: string | undefined = undefined;
// Disabled
export let disabled = false;
// Value
export let value: string;
// Styling
export let centered = false;
export let minWidth = 0;
let {
label = undefined,
tooltip = undefined,
placeholder = undefined,
disabled = false,
value = $bindable(),
centered = false,
minWidth = 0,
class: className = "",
classes = {},
oncommitText,
}: Props = $props();
let className = "";
export { className as class };
export let classes: Record<string, boolean> = {};
let self: FieldInput | undefined;
let self: FieldInput | undefined = $state();
let editing = false;
function onTextFocused() {
@ -39,7 +49,7 @@
onTextChangeCanceled();
// TODO: Find a less hacky way to do this
if (self) dispatch("commitText", self.getValue());
if (self) oncommitText?.(self.getValue());
// Required if value is not changed by the parent component upon update:value event
self?.setInputElementValue(self.getValue());
@ -64,11 +74,10 @@
class={`text-input ${className}`.trim()}
classes={{ centered, ...classes }}
styles={{ ...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}) }}
{value}
on:value
on:textFocused={onTextFocused}
on:textChanged={onTextChanged}
on:textChangeCanceled={onTextChangeCanceled}
bind:value
onfocus={onTextFocused}
onchange={onTextChanged}
ontextChangeCanceled={onTextChangeCanceled}
spellcheck={true}
{label}
{disabled}

26
frontend/src/components/widgets/inputs/WorkingColorsInput.svelte
View file

@ -10,11 +10,15 @@
const editor = getContext<Editor>("editor");
export let primary: Color;
export let secondary: Color;
interface Props {
primary: Color;
secondary: Color;
}
let primaryOpen = false;
let secondaryOpen = false;
let { primary, secondary }: Props = $props();
let primaryOpen = $state(false);
let secondaryOpen = $state(false);
function clickPrimarySwatch() {
primaryOpen = true;
@ -37,22 +41,20 @@
<LayoutCol class="working-colors-button">
<LayoutRow class="primary swatch">
<button on:click={clickPrimarySwatch} class:open={primaryOpen} style:--swatch-color={primary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0"></button>
<button onclick={clickPrimarySwatch} class:open={primaryOpen} style:--swatch-color={primary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0"></button>
<ColorPicker
open={primaryOpen}
on:open={({ detail }) => (primaryOpen = detail)}
bind:open={primaryOpen}
colorOrGradient={primary}
on:colorOrGradient={({ detail }) => detail instanceof Color && primaryColorChanged(detail)}
oncolorOrGradient={(detail) => detail instanceof Color && primaryColorChanged(detail)}
direction="Right"
/>
</LayoutRow>
<LayoutRow class="secondary swatch">
<button on:click={clickSecondarySwatch} class:open={secondaryOpen} style:--swatch-color={secondary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0"></button>
<button onclick={clickSecondarySwatch} class:open={secondaryOpen} style:--swatch-color={secondary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0"></button>
<ColorPicker
open={secondaryOpen}
on:open={({ detail }) => (secondaryOpen = detail)}
bind:open={secondaryOpen}
colorOrGradient={secondary}
on:colorOrGradient={({ detail }) => detail instanceof Color && secondaryColorChanged(detail)}
oncolorOrGradient={(detail) => detail instanceof Color && secondaryColorChanged(detail)}
direction="Right"
/>
</LayoutRow>

32
frontend/src/components/widgets/labels/IconLabel.svelte
View file

@ -3,15 +3,25 @@
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
let className = "";
export { className as class };
export let classes: Record<string, boolean> = {};
export let icon: IconName;
export let iconSizeOverride: number | undefined = undefined;
export let disabled = false;
export let tooltip: string | undefined = undefined;
interface Props {
class?: string;
classes?: Record<string, boolean>;
icon: IconName;
iconSizeOverride?: number | undefined;
disabled?: boolean;
tooltip?: string | undefined;
}
$: iconSizeClass = ((icon: IconName) => {
let {
class: className = "",
classes = {},
icon,
iconSizeOverride = undefined,
disabled = false,
tooltip = undefined
}: Props = $props();
let iconSizeClass = $derived(((icon: IconName) => {
const iconData = ICONS[icon];
if (!iconData) {
// eslint-disable-next-line no-console
@ -20,10 +30,10 @@
}
if (iconData.size === undefined) return "";
return `size-${iconSizeOverride || iconData.size}`;
})(icon);
$: extraClasses = Object.entries(classes)
})(icon));
let extraClasses = $derived(Object.entries(classes)
.flatMap(([className, stateName]) => (stateName ? [className] : []))
.join(" ");
.join(" "));
</script>
<LayoutRow class={`icon-label ${iconSizeClass} ${className} ${extraClasses}`.trim()} classes={{ disabled }} {tooltip}>

10
frontend/src/components/widgets/labels/Separator.svelte
View file

@ -1,13 +1,17 @@
<script lang="ts">
import { type SeparatorDirection, type SeparatorType } from "@graphite/messages";
export let direction: SeparatorDirection = "Horizontal";
export let type: SeparatorType = "Unrelated";
interface Props {
direction?: SeparatorDirection;
type?: SeparatorType;
}
let { direction = "Horizontal", type = "Unrelated" }: Props = $props();
</script>
<div class={`separator ${direction.toLowerCase()} ${type.toLowerCase()}`}>
{#if type === "Section"}
<div />
<div></div>
{/if}
</div>

62
frontend/src/components/widgets/labels/TextLabel.svelte
View file

@ -1,26 +1,48 @@
<script lang="ts">
let className = "";
export { className as class };
export let classes: Record<string, boolean> = {};
let styleName = "";
export { styleName as style };
export let styles: Record<string, string | number | undefined> = {};
export let disabled = false;
export let bold = false;
export let italic = false;
export let centerAlign = false;
export let tableAlign = false;
export let minWidth = 0;
export let multiline = false;
export let tooltip: string | undefined = undefined;
export let checkboxId: bigint | undefined = undefined;
import type { SvelteHTMLElements } from 'svelte/elements';
type LabelHTMLElementProps = SvelteHTMLElements["label"];
interface Props extends LabelHTMLElementProps {
class?: string;
classes?: Record<string, boolean>;
style?: string;
styles?: Record<string, string | number | undefined>;
disabled?: boolean;
bold?: boolean;
italic?: boolean;
centerAlign?: boolean;
tableAlign?: boolean;
minWidth?: number;
multiline?: boolean;
tooltip?: string | undefined;
checkboxId?: bigint | undefined;
children?: import('svelte').Snippet;
}
$: extraClasses = Object.entries(classes)
let {
class: className = "",
classes = {},
style: styleName = "",
styles = {},
disabled = false,
bold = false,
italic = false,
centerAlign = false,
tableAlign = false,
minWidth = 0,
multiline = false,
tooltip = undefined,
checkboxId = undefined,
children
}: Props = $props();
let extraClasses = $derived(Object.entries(classes)
.flatMap(([className, stateName]) => (stateName ? [className] : []))
.join(" ");
$: extraStyles = Object.entries(styles)
.join(" "));
let extraStyles = $derived(Object.entries(styles)
.flatMap((styleAndValue) => (styleAndValue[1] !== undefined ? [`${styleAndValue[0]}: ${styleAndValue[1]};`] : []))
.join(" ");
.join(" "));
</script>
<label
@ -36,7 +58,7 @@
title={tooltip}
for={checkboxId !== undefined ? `checkbox-input-${checkboxId}` : undefined}
>
<slot />
{@render children?.()}
</label>
<style lang="scss" global>

27
frontend/src/components/widgets/labels/UserInputLabel.svelte
View file

@ -34,14 +34,21 @@
const fullscreen = getContext<FullscreenState>("fullscreen");
export let keysWithLabelsGroups: LayoutKeysGroup[] = [];
export let mouseMotion: MouseMotion | undefined = undefined;
export let requiresLock = false;
export let textOnly = false;
interface Props {
keysWithLabelsGroups?: LayoutKeysGroup[];
mouseMotion?: MouseMotion | undefined;
requiresLock?: boolean;
textOnly?: boolean;
children?: import('svelte').Snippet;
}
$: keyboardLockInfoMessage = watchKeyboardLockInfoMessage(fullscreen.keyboardLockApiSupported);
$: displayKeyboardLockNotice = requiresLock && !$fullscreen.keyboardLocked;
let {
keysWithLabelsGroups = [],
mouseMotion = undefined,
requiresLock = false,
textOnly = false,
children
}: Props = $props();
function watchKeyboardLockInfoMessage(keyboardLockApiSupported: boolean): string {
const RESERVED = "This hotkey is reserved by the browser. ";
@ -114,6 +121,8 @@
return undefined;
}
}
let keyboardLockInfoMessage = $derived(watchKeyboardLockInfoMessage(fullscreen.keyboardLockApiSupported));
let displayKeyboardLockNotice = $derived(requiresLock && !$fullscreen.keyboardLocked);
</script>
{#if displayKeyboardLockNotice}
@ -139,9 +148,9 @@
<IconLabel icon={mouseHintIcon(mouseMotion)} />
</div>
{/if}
{#if $$slots.default}
{#if children}
<div class="hint-text">
<slot />
{@render children?.()}
</div>
{/if}
</LayoutRow>

6
frontend/src/components/window/title-bar/TitleBar.svelte
View file

@ -1,7 +1,3 @@
<script lang="ts" context="module">
export type Platform = "Windows" | "Mac" | "Linux" | "Web";
</script>
<script lang="ts">
import { getContext, onMount } from "svelte";
@ -17,7 +13,7 @@
import WindowButtonsWindows from "@graphite/components/window/title-bar/WindowButtonsWindows.svelte";
import WindowTitle from "@graphite/components/window/title-bar/WindowTitle.svelte";
export let platform: Platform;
export let platform: Graphite.Platform;
export let maximized: boolean;
const editor = getContext<Editor>("editor");

99
frontend/src/components/window/workspace/Panel.svelte
View file

@ -1,4 +1,4 @@
<script lang="ts" context="module">
<script lang="ts" module>
import Document from "@graphite/components/panels/Document.svelte";
import Layers from "@graphite/components/panels/Layers.svelte";
import Properties from "@graphite/components/panels/Properties.svelte";
@ -34,15 +34,27 @@
const editor = getContext<Editor>("editor");
export let tabMinWidths = false;
export let tabCloseButtons = false;
export let tabLabels: { name: string; tooltip?: string }[];
export let tabActiveIndex: number;
export let panelType: PanelType | undefined = undefined;
export let clickAction: ((index: number) => void) | undefined = undefined;
export let closeAction: ((index: number) => void) | undefined = undefined;
interface Props {
tabMinWidths?: boolean;
tabCloseButtons?: boolean;
tabLabels: { name: string; tooltip?: string }[];
tabActiveIndex: number;
panelType?: PanelType | undefined;
clickAction?: ((index: number) => void) | undefined;
closeAction?: ((index: number) => void) | undefined;
}
let tabElements: (LayoutRow | undefined)[] = [];
let {
tabMinWidths = false,
tabCloseButtons = false,
tabLabels,
tabActiveIndex,
panelType = undefined,
clickAction = undefined,
closeAction = undefined
}: Props = $props();
let tabElements: (LayoutRow | undefined)[] = $state([]);
function platformModifiers(reservedKey: boolean): LayoutKeysGroup {
// TODO: Remove this by properly feeding these keys from a layout provided by the backend
@ -90,7 +102,7 @@
}
</script>
<LayoutCol class="panel" on:pointerdown={() => panelType && editor.handle.setActivePanel(panelType)}>
<LayoutCol class="panel" onpointerdown={() => panelType && editor.handle.setActivePanel(panelType)}>
<LayoutRow class="tab-bar" classes={{ "min-widths": tabMinWidths }}>
<LayoutRow class="tab-group" scrollableX={true}>
{#each tabLabels as tabLabel, tabIndex}
@ -98,18 +110,18 @@
class="tab"
classes={{ active: tabIndex === tabActiveIndex }}
tooltip={tabLabel.tooltip || undefined}
on:click={(e) => {
onclick={(e) => {
e.stopPropagation();
clickAction?.(tabIndex);
}}
on:auxclick={(e) => {
onauxclick={(e) => {
// Middle mouse button click
if (e.button === BUTTON_MIDDLE) {
e.stopPropagation();
closeAction?.(tabIndex);
}
}}
on:mouseup={(e) => {
onmouseup={(e) => {
// Middle mouse button click fallback for Safari:
// https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event#browser_compatibility
// The downside of using mouseup is that the mousedown didn't have to originate in the same element.
@ -124,7 +136,7 @@
<TextLabel>{tabLabel.name}</TextLabel>
{#if tabCloseButtons}
<IconButton
action={(e) => {
onclick={(e) => {
e?.stopPropagation();
closeAction?.(tabIndex);
}}
@ -142,41 +154,44 @@
</LayoutRow>
<LayoutCol class="panel-body">
{#if panelType}
<svelte:component this={PANEL_COMPONENTS[panelType]} />
{@const SvelteComponent = PANEL_COMPONENTS[panelType]}
<SvelteComponent />
{:else}
<LayoutCol class="empty-panel" on:dragover={(e) => e.preventDefault()} on:drop={dropFile}>
<LayoutCol class="empty-panel" ondragover={(e) => e.preventDefault()} ondrop={dropFile}>
<LayoutCol class="content">
<LayoutRow class="logotype">
<IconLabel icon="GraphiteLogotypeSolid" />
</LayoutRow>
<LayoutRow class="actions">
<table>
<tr>
<td>
<TextButton label="New Document" icon="File" flush={true} action={() => editor.handle.newDocumentDialog()} />
</td>
<td>
<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(true), { key: "KeyN", label: "N" }]]} />
</td>
</tr>
<tr>
<td>
<TextButton label="Open Document" icon="Folder" flush={true} action={() => editor.handle.openDocument()} />
</td>
<td>
<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(false), { key: "KeyO", label: "O" }]]} />
</td>
</tr>
<tr>
<td colspan="2">
<TextButton label="Open Demo Artwork" icon="Image" flush={true} action={() => editor.handle.demoArtworkDialog()} />
</td>
</tr>
<tr>
<td colspan="2">
<TextButton label="Support the Development Fund" icon="Heart" flush={true} action={() => editor.handle.visitUrl("https://graphite.rs/donate/")} />
</td>
</tr>
<tbody>
<tr>
<td>
<TextButton label="New Document" icon="File" flush={true} action={() => editor.handle.newDocumentDialog()} />
</td>
<td>
<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(true), { key: "KeyN", label: "N" }]]} />
</td>
</tr>
<tr>
<td>
<TextButton label="Open Document" icon="Folder" flush={true} action={() => editor.handle.openDocument()} />
</td>
<td>
<UserInputLabel keysWithLabelsGroups={[[...platformModifiers(false), { key: "KeyO", label: "O" }]]} />
</td>
</tr>
<tr>
<td colspan="2">
<TextButton label="Open Demo Artwork" icon="Image" flush={true} action={() => editor.handle.demoArtworkDialog()} />
</td>
</tr>
<tr>
<td colspan="2">
<TextButton label="Support the Development Fund" icon="Heart" flush={true} action={() => editor.handle.visitUrl("https://graphite.rs/donate/")} />
</td>
</tr>
</tbody>
</table>
</LayoutRow>
</LayoutCol>

19
frontend/vite.config.ts
View file

@ -35,17 +35,21 @@ const ALLOWED_LICENSES = [
];
const runesGlobs = [
"**/components/*.svelte"
"**/components/*.svelte"
"**/components/*.svelte"
"**/components/layout/*.svelte",
"**/components/widgets/labels/*.svelte",
"**/components/widgets/buttons/*.svelte",
"**/components/widgets/inputs/*.svelte",
"**/components/floating-menus/MenuList.svelte",
"**/components/floating-menus/ColorPicker.svelte",
"**/components/floating-menus/Dialog.svelte",
"**/components/window/workspace/Panel.svelte",
];
function forceRunes(filePath: string): boolean {
const relativePath = filePath.slice(filePath.indexOf("src"));
// Test the file path against each glob pattern
return runesGlobs.some((min) => {
console.log("🚀 ~ forceRunes ~ filePath:", relativePath, minimatch(filePath, min));
return minimatch(filePath, min);
return minimatch(relativePath, min);
});
}
@ -62,9 +66,12 @@ export default defineConfig({
defaultHandler?.(warning);
},
dynamicCompileOptions({ filename, compileOptions }) {
console.log("🚀 ~ dynamicCompileOptions ~ compileOptions:", compileOptions.runes);
if (forceRunes(filename) && !compileOptions.runes) {
console.log(`🚀 ~ runes ~`, filename, true);
return { runes: true };
} else {
console.log(`🚀 ~ runes ~`, filename, false);
}
},
}),