feat: wysiwyg toolbar for basic edits to a button's style

companion/lib/Controls/ControlTypes/Button/Layered.ts

@@ -235,6 +235,10 @@ export class ControlButtonLayered
 		return this.drawing.updateOption(id, key, newVal)
 	}
 
+	layeredStyleUpdateOptions(id: string, values: Record<string, ExpressionOrValue<JsonValue | undefined>>): boolean {
+		return this.drawing.updateOptions(id, values)
+	}
+
 	layeredStyleUpdateFromLegacyProperties(diff: Partial<ButtonStyleProperties>): boolean {
 		return this.drawing.updateFromLegacyProperties(diff, this.options.canModifyStyleInApis)
 	}

companion/lib/Controls/ControlTypes/Button/LayeredButtonStyleEditor.ts

@@ -199,9 +199,10 @@ export class LayeredButtonStyleEditor extends LayeredButtonDrawer {
 		return true
 	}
 
-	updateOption(id: string, key: string, newVal: ExpressionOrValue<JsonValue | undefined>): boolean {
-		// Ignore fixed/structural properties, to avoid corrupting the layer model
-		if (
+	// Fixed/structural properties, which must never be reassigned via the generic option setters as it
+	// would corrupt the layer model
+	static #isStructuralKey(key: string): boolean {
+		return (
 			key === 'id' ||
 			key === 'type' ||
 			key === 'name' ||
@@ -210,14 +211,29 @@ export class LayeredButtonStyleEditor extends LayeredButtonDrawer {
 			key === 'connectionId' ||
 			key === 'elementId'
 		)
-			return false
+	}
+
+	updateOption(id: string, key: string, newVal: ExpressionOrValue<JsonValue | undefined>): boolean {
+		return this.updateOptions(id, { [key]: newVal })
+	}
+
+	/**
+	 * Apply several option changes to an element as a single commit. Callers changing more than one key at
+	 * once (eg a drag that moves and resizes) should use this rather than repeated {@link updateOption}, so
+	 * the element is never persisted or redrawn in a partially-updated state.
+	 */
+	updateOptions(id: string, values: Record<string, ExpressionOrValue<JsonValue | undefined>>): boolean {
+		const entries = Object.entries(values).filter(([key]) => !LayeredButtonStyleEditor.#isStructuralKey(key))
+		if (entries.length === 0) return false
 
 		const currentElementLocation = this.#findElementIndexAndParent(this.drawElementsList, null, id)
 		if (!currentElementLocation) return false
 
 		const entry = currentElementLocation.element as any
 
-		entry[key] = newVal
+		for (const [key, newVal] of entries) {
+			entry[key] = newVal
+		}
 
 		this.elementConversionCache.queueInvalidate(id)
 		this.#host.commitChange(true)

companion/lib/Controls/ControlTypes/Button/Preset.ts

@@ -304,6 +304,13 @@ export class ControlButtonPreset
 		throw new Error('ControlButtonPreset does not support mutations')
 	}
 
+	/**
+	 * Update several options on an element from the layered style
+	 */
+	layeredStyleUpdateOptions(_id: string, _values: Record<string, ExpressionOrValue<JsonValue | undefined>>): boolean {
+		throw new Error('ControlButtonPreset does not support mutations')
+	}
+
 	/**
 	 * Update the style from legacy properties
 	 */

companion/lib/Controls/IControlFragments.ts

@@ -80,6 +80,14 @@ export interface ControlWithLayeredStyle extends ControlBase<any> {
 	 */
 	layeredStyleUpdateOption(id: string, key: string, value: ExpressionOrValue<JsonValue | undefined>): boolean
 
+	/**
+	 * Update several options on an element from the layered style, as a single commit
+	 * @param id Element id to update
+	 * @param values New ExpressionOrValue for each option key
+	 * @returns true if any changes were made
+	 */
+	layeredStyleUpdateOptions(id: string, values: Record<string, ExpressionOrValue<JsonValue | undefined>>): boolean
+
 	/**
 	 * Update the style from legacy properties
 	 * Future: Once the old button style is removed, this should be reworked to utilise the new style system better

companion/lib/Controls/StylesTrpcRouter.ts

@@ -125,5 +125,22 @@ export function createStylesTrpcRouter(controlsMap: Map<string, SomeControl<any>
 
 				return control.layeredStyleUpdateOption(input.elementId, input.key, input.value)
 			}),
+
+		updateOptions: publicProcedure
+			.input(
+				z.object({
+					controlId: z.string(),
+					elementId: z.string(),
+					values: z.record(z.string(), ExpressionOrJsonValueSchema),
+				})
+			)
+			.mutation(async ({ input }) => {
+				const control = controlsMap.get(input.controlId)
+				if (!control) return false
+
+				if (!control.supportsLayeredStyle) throw new Error(`Control "${input.controlId}" does not support layer styles`)
+
+				return control.layeredStyleUpdateOptions(input.elementId, input.values)
+			}),
 	})
 }

shared-lib/lib/Graphics/LayeredRenderer.ts

@@ -26,30 +26,51 @@ import { DrawBounds, parseColor, rgbRev } from './Util.js'
 const TEXT_OUTLINE_FACTOR = 1 / 16
 
 export class GraphicsLayeredButtonRenderer {
+	static #computeTopBarBounds(imgWidth: number, imgHeight: number, paddingPx: { x: number; y: number }): DrawBounds {
+		const drawHeight = imgHeight - paddingPx.y * 2
+
+		return new DrawBounds(
+			paddingPx.x,
+			paddingPx.y,
+			imgWidth - paddingPx.x * 2,
+			Math.max(ButtonDecorationRenderer.DEFAULT_HEIGHT, Math.floor(0.2 * drawHeight))
+		)
+	}
+
+	/**
+	 * Compute the bounds of the top-level content area (ie the space that root elements' x/y/width/height
+	 * fractions are relative to). Exposed so callers (eg the editor's selection overlay) can map between
+	 * pixel coordinates and the fractional coordinate space without duplicating this layout math.
+	 */
+	static computeContentBounds(
+		imgWidth: number,
+		imgHeight: number,
+		paddingPx: { x: number; y: number },
+		decoration: ButtonGraphicsDecorationType
+	): DrawBounds {
+		const drawWidth = imgWidth - paddingPx.x * 2
+		const drawHeight = imgHeight - paddingPx.y * 2
+
+		const topBarBounds = this.#computeTopBarBounds(imgWidth, imgHeight, paddingPx)
+		const topBarHeight = decoration === ButtonGraphicsDecorationType.TopBar ? topBarBounds.height : 0
+
+		return new DrawBounds(paddingPx.x, paddingPx.y + topBarHeight, drawWidth, drawHeight - topBarHeight)
+	}
+
 	static async draw(
 		img: ImageBase<any>,
 		drawStyle: RendererButtonStyle,
 		elementsToHide: ReadonlySet<string>,
 		selectedElementId: string | null,
 		paddingPx: { x: number; y: number }
-	): Promise<void> {
+	): Promise<DrawBounds | null> {
 		const backgroundElement = drawStyle.elements[0]?.type === 'canvas' ? drawStyle.elements[0] : undefined
 
-		const drawWidth = img.width - paddingPx.x * 2
-		const drawHeight = img.height - paddingPx.y * 2
-
 		// Read the resolved `decoration`, not the raw one off the canvas
 		const decoration = drawStyle.decoration
-		const showTopBar = decoration === ButtonGraphicsDecorationType.TopBar
 
-		const topBarBounds = new DrawBounds(
-			paddingPx.x,
-			paddingPx.y,
-			drawWidth,
-			Math.max(ButtonDecorationRenderer.DEFAULT_HEIGHT, Math.floor(0.2 * drawHeight))
-		)
-		const topBarHeight = showTopBar ? topBarBounds.height : 0
-		const drawBounds = new DrawBounds(paddingPx.x, paddingPx.y + topBarHeight, drawWidth, drawHeight - topBarHeight)
+		const topBarBounds = this.#computeTopBarBounds(img.width, img.height, paddingPx)
+		const drawBounds = this.computeContentBounds(img.width, img.height, paddingPx, decoration)
 
 		this.#drawBackgroundElement(img, drawBounds, backgroundElement)
 
@@ -84,6 +105,8 @@ export class GraphicsLayeredButtonRenderer {
 
 		// Draw a border around the selected element, do this last so it's on top
 		if (selectedElementBounds) this.#drawBoundsLines(img, selectedElementBounds)
+
+		return selectedElementBounds
 	}
 
 	/**

webui/src/Buttons/EditButton/LayeredButtonEditor/ElementsList.tsx

@@ -105,30 +105,32 @@ export const ElementsList = observer(function ElementsList({
 	return (
 		<>
 			<GenericConfirmModal ref={confirmModalRef} />
-			<div className="button-layer-elementlist-table">
-				<div className="button-layer-elementlist-table-row heading">
-					<div className="td-reorder-placeholder">&nbsp;</div>
-					<div>Name</div>
-					<div></div>
-					<div className="element-buttons">
-						<AddElementDropdownButton styleStore={styleStore} controlId={controlId} />
-					</div>
+			<div className="button-layer-elementlist-table-row heading">
+				<div className="td-reorder-placeholder">&nbsp;</div>
+				<div>Name</div>
+				<div></div>
+				<div className="element-buttons">
+					<AddElementDropdownButton styleStore={styleStore} controlId={controlId} />
+				</div>
+			</div>
+			<div className="button-layer-elementlist-body">
+				<div className="button-layer-elementlist-table">
+					{sortableElements.map((element, index) => (
+						<ElementListItem
+							key={element.id}
+							element={element}
+							group={ROOT_GROUP}
+							index={index}
+							depth={0}
+							styleStore={styleStore}
+							confirmModalRef={confirmModalRef}
+							controlId={controlId}
+						/>
+					))}
+					{canvasElements.map((element) => (
+						<CanvasElementRow key={element.id} element={element} styleStore={styleStore} />
+					))}
 				</div>
-				{sortableElements.map((element, index) => (
-					<ElementListItem
-						key={element.id}
-						element={element}
-						group={ROOT_GROUP}
-						index={index}
-						depth={0}
-						styleStore={styleStore}
-						confirmModalRef={confirmModalRef}
-						controlId={controlId}
-					/>
-				))}
-				{canvasElements.map((element) => (
-					<CanvasElementRow key={element.id} element={element} styleStore={styleStore} />
-				))}
 			</div>
 		</>
 	)

webui/src/Buttons/EditButton/LayeredButtonEditor/LayeredButtonEditor.tsx

@@ -1,12 +1,12 @@
 import { faLayerGroup } from '@fortawesome/free-solid-svg-icons'
 import { observer } from 'mobx-react-lite'
-import { useCallback, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState, type PropsWithChildren } from 'react'
 import { Group, Panel, Separator } from 'react-resizable-panels'
 import { useLocalStorage } from 'usehooks-ts'
 import type { LayeredButtonModel, SomeButtonModel } from '@companion-app/shared/Model/ButtonModel.js'
 import type { ControlLocation } from '@companion-app/shared/Model/Common.js'
+import { Button, ButtonGroup } from '~/Components/Button.js'
 import { NonIdealState } from '~/Components/NonIdealState.js'
-import { SwitchInputFieldWithLabel } from '~/Components/SwitchInputField.js'
 import { LayeredStyleElementsProvider } from '~/Controls/Components/LayeredStyleElementsContext.js'
 import { useLocalVariablesStore, type LocalVariablesStore } from '~/Controls/LocalVariablesStore.js'
 import { safeSetLocalStorage } from '~/Helpers/SafeStorage.js'
@@ -181,18 +181,33 @@ const LayeredButtonEditorStyle = observer(function LayeredButtonEditorStyle({
 				<div className="button-layer-elementlist">
 					<ElementsList styleStore={styleStore} controlId={controlId} />
 				</div>
-				<div className="button-layer-simple">
-					<SwitchInputFieldWithLabel
-						className="text-muted"
-						label="Simple"
-						value={simpleMode}
-						setValue={setSimpleMode}
-						tooltip={simpleMode ? 'Showing a reduced set of properties' : 'Showing the full set of properties'}
-						small
-					/>
-				</div>
 			</Panel>
-			<Separator className="button-layer-resize-handle" />
+			<Separator className="button-layer-resize-handle">
+				<SeparatorInteractive>
+					<ButtonGroup aria-label="Property detail level" className="button-layer-mode-toggle">
+						<Button
+							size="sm"
+							className={simpleMode ? 'active' : undefined}
+							aria-pressed={simpleMode}
+							onClick={() => setSimpleMode(true)}
+							// pointerdown: claim the gesture before the separator starts a resize (click may be suppressed)
+							onPointerDown={() => setSimpleMode(true)}
+						>
+							Basic
+						</Button>
+						<Button
+							size="sm"
+							className={!simpleMode ? 'active' : undefined}
+							aria-pressed={!simpleMode}
+							onClick={() => setSimpleMode(false)}
+							onPointerDown={() => setSimpleMode(false)}
+							title="Show every property for the selected element, including the less commonly used ones"
+						>
+							All Properties
+						</Button>
+					</ButtonGroup>
+				</SeparatorInteractive>
+			</Separator>
 			<Panel id="bottom" className="button-layer-options" minSize="250px">
 				{elementProps ? (
 					<ElementPropertiesEditor
@@ -211,3 +226,27 @@ const LayeredButtonEditorStyle = observer(function LayeredButtonEditorStyle({
 		</Group>
 	)
 })
+
+function SeparatorInteractive({ children }: PropsWithChildren): JSX.Element {
+	const ref = useRef<HTMLDivElement>(null)
+
+	useEffect(() => {
+		const root = ref.current
+		if (!root) return
+
+		const onPointerDown = (event: PointerEvent) => {
+			if (event.target instanceof Node && root.contains(event.target)) {
+				event.preventDefault()
+			}
+		}
+
+		window.addEventListener('pointerdown', onPointerDown, true)
+		return () => window.removeEventListener('pointerdown', onPointerDown, true)
+	}, [])
+
+	return (
+		<div ref={ref} className="button-layer-separator-interactive" data-separator-button>
+			{children}
+		</div>
+	)
+}