Tidy up the Layers panel with a new bottom bar

frontend/src/components/floating-menus/ColorPicker.svelte

@@ -3,10 +3,11 @@
 
 	import type { Editor } from "@graphite/editor";
 	import type { HSV, RGB, FillChoice } from "@graphite/messages";
+	import type { MenuDirection } from "@graphite/messages";
 	import { Color, contrastingOutlineFactor, Gradient } from "@graphite/messages";
 	import { clamp } from "@graphite/utility-functions/math";
 
-	import FloatingMenu, { type MenuDirection } from "@graphite/components/layout/FloatingMenu.svelte";
+	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
 	import { preventEscapeClosingParentFloatingMenu } from "@graphite/components/layout/FloatingMenu.svelte";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";

frontend/src/components/floating-menus/MenuList.svelte

@@ -3,10 +3,10 @@
 <script lang="ts">
 	import { createEventDispatcher, tick, onDestroy, onMount } from "svelte";
 
-	import type { MenuListEntry } from "@graphite/messages";
+	import type { MenuListEntry, MenuDirection } from "@graphite/messages";
 
 	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
-	import FloatingMenu, { type MenuDirection } from "@graphite/components/layout/FloatingMenu.svelte";
+	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import TextInput from "@graphite/components/widgets/inputs/TextInput.svelte";

frontend/src/components/layout/FloatingMenu.svelte

@@ -1,5 +1,4 @@
 <script lang="ts" context="module">
-	export type MenuDirection = "Top" | "Bottom" | "Left" | "Right" | "TopLeft" | "TopRight" | "BottomLeft" | "BottomRight" | "Center";
 	export type MenuType = "Popover" | "Dropdown" | "Dialog" | "Cursor";
 
 	/// Prevents the escape key from closing the parent floating menu of the given element.
@@ -22,6 +21,7 @@
 <script lang="ts">
 	import { onMount, afterUpdate, createEventDispatcher, tick } from "svelte";
 
+	import type { MenuDirection } from "@graphite/messages";
 	import { browserVersion } from "@graphite/utility-functions/platform";
 
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@@ -184,6 +184,7 @@
 		const floatingMenuContentDiv = floatingMenuContent?.div?.();
 		if (!workspace || !self || !floatingMenuContainer || !floatingMenuContent || !floatingMenuContentDiv) return;
 
+		const viewportBounds = document.documentElement.getBoundingClientRect();
 		workspaceBounds = workspace.getBoundingClientRect();
 		floatingMenuBounds = self.getBoundingClientRect();
 		const floatingMenuContainerBounds = floatingMenuContainer.getBoundingClientRect();
@@ -195,17 +196,17 @@
 			// Required to correctly position content when scrolled (it has a `position: fixed` to prevent clipping)
 			// We use `.style` on a div (instead of a style DOM attribute binding) because the binding causes the `afterUpdate()` hook to call the function we're in recursively forever
 			const tailOffset = type === "Popover" ? 10 : 0;
-			if (direction === "Bottom") floatingMenuContentDiv.style.top = `${tailOffset + floatingMenuBounds.top}px`;
-			if (direction === "Top") floatingMenuContentDiv.style.bottom = `${tailOffset + floatingMenuBounds.bottom}px`;
-			if (direction === "Right") floatingMenuContentDiv.style.left = `${tailOffset + floatingMenuBounds.left}px`;
-			if (direction === "Left") floatingMenuContentDiv.style.right = `${tailOffset + floatingMenuBounds.right}px`;
+			if (direction === "Bottom") floatingMenuContentDiv.style.top = `${tailOffset + floatingMenuBounds.y}px`;
+			if (direction === "Top") floatingMenuContentDiv.style.bottom = `${tailOffset + (viewportBounds.height - floatingMenuBounds.y)}px`;
+			if (direction === "Right") floatingMenuContentDiv.style.left = `${tailOffset + floatingMenuBounds.x}px`;
+			if (direction === "Left") floatingMenuContentDiv.style.right = `${tailOffset + (viewportBounds.width - floatingMenuBounds.x)}px`;
 
 			// Required to correctly position tail when scrolled (it has a `position: fixed` to prevent clipping)
 			// We use `.style` on a div (instead of a style DOM attribute binding) because the binding causes the `afterUpdate()` hook to call the function we're in recursively forever
-			if (tail && direction === "Bottom") tail.style.top = `${floatingMenuBounds.top}px`;
-			if (tail && direction === "Top") tail.style.bottom = `${floatingMenuBounds.bottom}px`;
-			if (tail && direction === "Right") tail.style.left = `${floatingMenuBounds.left}px`;
-			if (tail && direction === "Left") tail.style.right = `${floatingMenuBounds.right}px`;
+			if (tail && direction === "Bottom") tail.style.top = `${floatingMenuBounds.y}px`;
+			if (tail && direction === "Top") tail.style.bottom = `${viewportBounds.height - floatingMenuBounds.y}px`;
+			if (tail && direction === "Right") tail.style.left = `${floatingMenuBounds.x}px`;
+			if (tail && direction === "Left") tail.style.right = `${viewportBounds.width - floatingMenuBounds.x}px`;
 		}
 
 		type Edge = "Top" | "Bottom" | "Left" | "Right";

frontend/src/components/panels/Layers.svelte

@@ -3,7 +3,15 @@
 
 	import type { Editor } from "@graphite/editor";
 	import { beginDraggingElement } from "@graphite/io-managers/drag";
-	import { defaultWidgetLayout, patchWidgetLayout, UpdateDocumentLayerDetails, UpdateDocumentLayerStructureJs, UpdateLayersPanelControlBarLayout } from "@graphite/messages";
+	import {
+		defaultWidgetLayout,
+		patchWidgetLayout,
+		UpdateDocumentLayerDetails,
+		UpdateDocumentLayerStructureJs,
+		UpdateLayersPanelControlBarLeftLayout,
+		UpdateLayersPanelControlBarRightLayout,
+		UpdateLayersPanelBottomBarLayout,
+	} from "@graphite/messages";
 	import type { DataBuffer, LayerPanelEntry } from "@graphite/messages";
 	import type { NodeGraphState } from "@graphite/state-providers/node-graph";
 	import { platformIsMac } from "@graphite/utility-functions/platform";
@@ -13,6 +21,7 @@
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
+	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
 	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
 
 	type LayerListingInfo = {
@@ -47,12 +56,24 @@
 	let dragInPanel = false;
 
 	// Layouts
-	let layersPanelControlBarLayout = defaultWidgetLayout();
+	let layersPanelControlBarLeftLayout = defaultWidgetLayout();
+	let layersPanelControlBarRightLayout = defaultWidgetLayout();
+	let layersPanelBottomBarLayout = defaultWidgetLayout();
 
 	onMount(() => {
-		editor.subscriptions.subscribeJsMessage(UpdateLayersPanelControlBarLayout, (updateLayersPanelControlBarLayout) => {
-			patchWidgetLayout(layersPanelControlBarLayout, updateLayersPanelControlBarLayout);
-			layersPanelControlBarLayout = layersPanelControlBarLayout;
+		editor.subscriptions.subscribeJsMessage(UpdateLayersPanelControlBarLeftLayout, (updateLayersPanelControlBarLeftLayout) => {
+			patchWidgetLayout(layersPanelControlBarLeftLayout, updateLayersPanelControlBarLeftLayout);
+			layersPanelControlBarLeftLayout = layersPanelControlBarLeftLayout;
+		});
+
+		editor.subscriptions.subscribeJsMessage(UpdateLayersPanelControlBarRightLayout, (updateLayersPanelControlBarRightLayout) => {
+			patchWidgetLayout(layersPanelControlBarRightLayout, updateLayersPanelControlBarRightLayout);
+			layersPanelControlBarRightLayout = layersPanelControlBarRightLayout;
+		});
+
+		editor.subscriptions.subscribeJsMessage(UpdateLayersPanelBottomBarLayout, (updateLayersPanelBottomBarLayout) => {
+			patchWidgetLayout(layersPanelBottomBarLayout, updateLayersPanelBottomBarLayout);
+			layersPanelBottomBarLayout = layersPanelBottomBarLayout;
 		});
 
 		editor.subscriptions.subscribeJsMessage(UpdateDocumentLayerStructureJs, (updateDocumentLayerStructure) => {
@@ -407,7 +428,9 @@
 
 <LayoutCol class="layers" on:dragleave={() => (dragInPanel = false)}>
 	<LayoutRow class="control-bar" scrollableX={true}>
-		<WidgetLayout layout={layersPanelControlBarLayout} />
+		<WidgetLayout layout={layersPanelControlBarLeftLayout} />
+		<Separator />
+		<WidgetLayout layout={layersPanelControlBarRightLayout} />
 	</LayoutRow>
 	<LayoutRow class="list-area" scrollableY={true}>
 		<LayoutCol class="list" data-layer-panel bind:this={list} on:click={() => deselectAllLayers()} on:dragover={updateInsertLine} on:dragend={drop} on:drop={drop}>
@@ -490,6 +513,9 @@
 			<div class="insert-mark" style:left={`${4 + draggingData.insertDepth * 16}px`} style:top={`${draggingData.markerHeight}px`} />
 		{/if}
 	</LayoutRow>
+	<LayoutRow class="bottom-bar" scrollableX={true}>
+		<WidgetLayout layout={layersPanelBottomBarLayout} />
+	</LayoutRow>
 </LayoutCol>
 
 <style lang="scss" global>
@@ -499,33 +525,25 @@
 			height: 32px;
 			flex: 0 0 auto;
 			margin: 0 4px;
+			border-bottom: 1px solid var(--color-2-mildblack);
+			justify-content: space-between;
 
-			.widget-span {
-				width: 100%;
-				height: 100%;
-				min-width: 300px;
-			}
-
-			// Blend mode selector and opacity slider
-			.dropdown-input,
-			.number-input {
+			.widget-span:first-child {
 				flex: 1 1 auto;
 			}
+		}
 
-			// Blend mode selector
-			.dropdown-input {
-				max-width: 120px;
-				flex-basis: 120px;
-			}
+		// Bottom bar
+		.bottom-bar {
+			height: 24px;
+			padding-top: 4px;
+			flex: 0 0 auto;
+			margin: 0 4px;
+			justify-content: flex-end;
+			border-top: 1px solid var(--color-2-mildblack);
 
-			// Opacity slider
-			.number-input {
-				max-width: 180px;
-				flex-basis: 180px;
-
-				+ .separator ~ .separator {
-					flex-grow: 1;
-				}
+			.widget-span > * {
+				margin: 0;
 			}
 		}
 

frontend/src/components/widgets/buttons/PopoverButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { MenuDirection } from "@graphite/messages";
 	import { type IconName, type PopoverButtonStyle } from "@graphite/utility-functions/icons";
 
 	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
@@ -7,6 +8,7 @@
 	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;
@@ -23,13 +25,13 @@
 	}
 </script>
 
-<LayoutRow class="popover-button" classes={{ "has-icon": icon !== undefined }}>
+<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 />
 	{#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="Bottom">
+	<FloatingMenu {open} on:open={({ detail }) => (open = detail)} minWidth={popoverMinWidth} type="Popover" direction={menuDirection || "Bottom"}>
 		<slot />
 	</FloatingMenu>
 </LayoutRow>
@@ -48,6 +50,10 @@
 				padding-left: calc(36px - 16px);
 				box-sizing: content-box;
 			}
+
+			&.direction-top .dropdown-icon .icon-label {
+				transform: rotate(180deg);
+			}
 		}
 
 		.dropdown-icon {
@@ -86,5 +92,9 @@
 				margin-bottom: -8px;
 			}
 		}
+
+		&.direction-top .floating-menu {
+			bottom: 100%;
+		}
 	}
 </style>

frontend/src/components/widgets/buttons/TextButton.svelte

@@ -55,7 +55,7 @@
 		class:emphasized
 		class:disabled
 		class:flush
-		style:min-width={minWidth > 0 ? `${minWidth}px` : ""}
+		style:min-width={minWidth > 0 ? `${minWidth}px` : undefined}
 		title={tooltip}
 		data-emphasized={emphasized || undefined}
 		data-disabled={disabled || undefined}

frontend/src/components/widgets/inputs/DropdownInput.svelte

@@ -21,12 +21,13 @@
 	export let interactive = true;
 	export let disabled = false;
 	export let tooltip: string | undefined = undefined;
+	export let minWidth = 0;
+	export let maxWidth = 0;
 
 	let activeEntry = makeActiveEntry();
 	let activeEntrySkipWatcher = false;
 	let initialSelectedIndex: number | undefined = undefined;
 	let open = false;
-	let minWidth = 0;
 
 	$: watchSelectedIndex(selectedIndex);
 	$: watchActiveEntry(activeEntry);
@@ -76,11 +77,15 @@
 	}
 </script>
 
-<LayoutRow class="dropdown-input" bind:this={self} data-dropdown-input>
+<LayoutRow
+	class="dropdown-input"
+	styles={{ ...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}), ...(maxWidth > 0 ? { "max-width": `${maxWidth}px` } : {}) }}
+	bind:this={self}
+	data-dropdown-input
+>
 	<LayoutRow
 		class="dropdown-box"
 		classes={{ disabled, open }}
-		styles={{ "min-width": `${minWidth}px` }}
 		{tooltip}
 		on:click={() => !disabled && (open = true)}
 		on:blur={unFocusDropdownBox}

frontend/src/components/widgets/inputs/FontInput.svelte

@@ -104,7 +104,15 @@
 
 <!-- TODO: Combine this widget into the DropdownInput widget -->
 <LayoutRow class="font-input">
-	<LayoutRow class="dropdown-box" classes={{ disabled }} styles={{ "min-width": `${minWidth}px` }} {tooltip} tabindex={disabled ? -1 : 0} on:click={toggleOpen} data-floating-menu-spawner>
+	<LayoutRow
+		class="dropdown-box"
+		classes={{ disabled }}
+		styles={{ ...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}) }}
+		{tooltip}
+		tabindex={disabled ? -1 : 0}
+		on:click={toggleOpen}
+		data-floating-menu-spawner
+	>
 		<TextLabel class="dropdown-label">{activeEntry?.value || ""}</TextLabel>
 		<IconLabel class="dropdown-arrow" icon="DropdownArrow" />
 	</LayoutRow>

frontend/src/components/widgets/inputs/NumberInput.svelte

@@ -53,6 +53,7 @@
 
 	// Styling
 	export let minWidth = 0;
+	export let maxWidth = 0;
 
 	// Callbacks
 	export let incrementCallbackIncrease: (() => void) | undefined = undefined;
@@ -88,6 +89,7 @@
 	$: 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) } : {}),
 	};
 

frontend/src/components/widgets/inputs/RadioInput.svelte

@@ -24,7 +24,7 @@
 	}
 </script>
 
-<LayoutRow class="radio-input" classes={{ disabled }} styles={{ "min-width": minWidth > 0 ? `${minWidth}px` : "" }}>
+<LayoutRow class="radio-input" classes={{ disabled }} styles={{ ...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}) }}>
 	{#each entries as entry, index}
 		<button class:active={index === selectedIndex} class:mixed class:disabled on:click={() => handleEntryClick(entry)} title={entry.tooltip} tabindex={index === selectedIndex ? -1 : 0} {disabled}>
 			{#if entry.icon}

frontend/src/components/widgets/inputs/TextInput.svelte

@@ -63,7 +63,7 @@
 <FieldInput
 	class={`text-input ${className}`.trim()}
 	classes={{ centered, ...classes }}
-	styles={{ "min-width": minWidth > 0 ? `${minWidth}px` : undefined }}
+	styles={{ ...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}) }}
 	{value}
 	on:value
 	on:textFocused={onTextFocused}

frontend/src/components/widgets/labels/TextLabel.svelte

@@ -30,7 +30,7 @@
 	class:multiline
 	class:center-align={centerAlign}
 	class:table-align={tableAlign}
-	style:min-width={minWidth > 0 ? `${minWidth}px` : ""}
+	style:min-width={minWidth > 0 ? `${minWidth}px` : undefined}
 	style={`${styleName} ${extraStyles}`.trim() || undefined}
 	title={tooltip}
 >

frontend/src/messages.ts

@@ -1085,6 +1085,12 @@ export class DropdownInput extends WidgetProps {
 
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltip!: string | undefined;
+
+	// Styling
+
+	minWidth!: number;
+
+	maxWidth!: number;
 }
 
 export class FontInput extends WidgetProps {
@@ -1185,6 +1191,8 @@ export class NumberInput extends WidgetProps {
 	// Styling
 
 	minWidth!: number;
+
+	maxWidth!: number;
 }
 
 export class NodeCatalog extends WidgetProps {
@@ -1194,6 +1202,8 @@ export class NodeCatalog extends WidgetProps {
 export class PopoverButton extends WidgetProps {
 	style!: PopoverButtonStyle | undefined;
 
+	menuDirection!: MenuDirection | undefined;
+
 	icon!: IconName | undefined;
 
 	disabled!: boolean;
@@ -1207,6 +1217,8 @@ export class PopoverButton extends WidgetProps {
 	popoverMinWidth: number | undefined;
 }
 
+export type MenuDirection = "Top" | "Bottom" | "Left" | "Right" | "TopLeft" | "TopRight" | "BottomLeft" | "BottomRight" | "Center";
+
 export type RadioEntryData = {
 	value?: string;
 	label?: string;
@@ -1581,7 +1593,11 @@ export class UpdateDocumentBarLayout extends WidgetDiffUpdate {}
 
 export class UpdateDocumentModeLayout extends WidgetDiffUpdate {}
 
-export class UpdateLayersPanelControlBarLayout extends WidgetDiffUpdate {}
+export class UpdateLayersPanelControlBarLeftLayout extends WidgetDiffUpdate {}
+
+export class UpdateLayersPanelControlBarRightLayout extends WidgetDiffUpdate {}
+
+export class UpdateLayersPanelBottomBarLayout extends WidgetDiffUpdate {}
 
 // Extends JsMessage instead of WidgetDiffUpdate because the menu bar isn't diffed
 export class UpdateMenuBarLayout extends JsMessage {
@@ -1680,7 +1696,9 @@ export const messageMakers: Record<string, MessageMaker> = {
 	UpdateImportsExports,
 	UpdateInputHints,
 	UpdateInSelectedNetwork,
-	UpdateLayersPanelControlBarLayout,
+	UpdateLayersPanelControlBarLeftLayout,
+	UpdateLayersPanelControlBarRightLayout,
+	UpdateLayersPanelBottomBarLayout,
 	UpdateLayerWidths,
 	UpdateMenuBarLayout,
 	UpdateMouseCursor,

frontend/src/utility-functions/icons.ts

@@ -10,6 +10,7 @@ const GRAPHICS = {
 // 12px Solid
 import Add from "@graphite-frontend/assets/icon-12px-solid/add.svg";
 import Checkmark from "@graphite-frontend/assets/icon-12px-solid/checkmark.svg";
+import Clipped from "@graphite-frontend/assets/icon-12px-solid/clipped.svg";
 import CloseX from "@graphite-frontend/assets/icon-12px-solid/close-x.svg";
 import Delay from "@graphite-frontend/assets/icon-12px-solid/delay.svg";
 import DropdownArrow from "@graphite-frontend/assets/icon-12px-solid/dropdown-arrow.svg";
@@ -51,6 +52,7 @@ import WorkingColors from "@graphite-frontend/assets/icon-12px-solid/working-col
 const SOLID_12PX = {
 	Add: { svg: Add, size: 12 },
 	Checkmark: { svg: Checkmark, size: 12 },
+	Clipped: { svg: Clipped, size: 12 },
 	CloseX: { svg: CloseX, size: 12 },
 	Delay: { svg: Delay, size: 12 },
 	DropdownArrow: { svg: DropdownArrow, size: 12 },