🚧 More Display Panel progress

Author: SnaveSutit

src/lang/en.yml

@@ -117,13 +117,20 @@ config:
 
   animated_java:item_display:
     label: Item Display
+    description: Properties specific to Item Displays.
 
   animated_java:block_display:
     label: Block Display
+    description: Properties specific to Block Displays.
 
 panel:
   display:
     title: Display
+    linked.tooltip: Linked - This display option will be inherited from the parent node.
+    unlinked.tooltip: Unlinked - This display option is unique to this node.
+    set_all_linked.tooltip: Set All Linked - Set all display options to inherit the display properties from the parent node.
+    set_all_unlinked.tooltip: Set All Unlinked - Set all display options to be unique to this node.
+    reset_all.tooltip: Reset All - Reset all display options to their default values.
 
 node:
   structure.title: |-

src/svelte-components/inputs/number.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { roundTo } from '@aj/util/misc'
+	import { onDestroy } from 'svelte'
+
+	export let id: string
+	export let value: number
+	export let min = -Infinity
+	export let max = Infinity
+	/** Minimum difference between two unique values */
+	export let valueStep = 0.1
+	/** How much to change when dragging */
+	export let dragStep: number | undefined = valueStep
+
+	let input: HTMLInputElement
+	let slider: HTMLElement
+
+	function clampValue(value: number) {
+		return Math.clamp(roundTo(value, 1 / (valueStep ?? 1)), min, max) || 0
+	}
+
+	function onStartDrag(moveEvent: MouseEvent | TouchEvent) {
+		const mouseStartEvent = convertTouchEvent(moveEvent)
+		const originalValue = value
+
+		function drag(moveEvent: MouseEvent | TouchEvent) {
+			const mouseEndEvent = convertTouchEvent(moveEvent)
+			const diff =
+				Math.trunc((mouseEndEvent.clientX - mouseStartEvent.clientX) / 10) * (dragStep ?? 1)
+			const adjustedValue = clampValue(originalValue + diff)
+			if (adjustedValue !== value) {
+				value = adjustedValue
+			}
+		}
+
+		function end() {
+			removeEventListeners(document, 'mousemove touchmove', drag)
+		}
+		addEventListeners(document, 'mousemove touchmove', drag)
+		addEventListeners(document, 'mouseup touchend', end, { once: true })
+	}
+
+	const MOLANG_PARSER = new Molang()
+	const onInput = () => {
+		value = clampValue(MOLANG_PARSER.parse(value))
+	}
+
+	// onMount
+	requestAnimationFrame(() => {
+		addEventListeners(slider, 'mousedown touchstart', onStartDrag)
+		addEventListeners(input, 'focusout dblclick', onInput)
+	})
+
+	onDestroy(() => {
+		removeEventListeners(input, 'focusout dblclick', onInput)
+		removeEventListeners(slider, 'mousedown touchstart', onStartDrag)
+	})
+</script>
+
+<div class="numeric_input">
+	<input
+		bind:this={input}
+		{id}
+		class="dark_bordered focusable_input"
+		bind:value
+		inputmode="decimal"
+	/>
+	<div bind:this={slider} class="tool numaric_input_slider">
+		<i class="material-icons icon">code</i>
+	</div>
+</div>

src/ui/panels/display-panel/commonDisplayPage.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { BlockDisplay } from '@aj/blockbench-additions/outliner-elements/blockDisplay'
+	import { ItemDisplay } from '@aj/blockbench-additions/outliner-elements/itemDisplay'
+	import { TextDisplay } from '@aj/blockbench-additions/outliner-elements/textDisplay'
+	import Number from '@aj/svelte-components/inputs/number.svelte'
+	import { CommonDisplayConfig } from '@aj/systems/node-configs'
+	import EVENTS from '@aj/util/events'
+
+	export let node: TextDisplay | BlockDisplay | ItemDisplay | Group
+
+	const CONFIG = new CommonDisplayConfig().fromJSON(node.commonConfig)
+	const LINK_STATES = CONFIG.getAllLinkedStates()
+
+	// Key is a string, but I need it to be any to make TypeScript happy when indexing into the config object.
+	function toggleLinked(key: any) {
+		if (!CONFIG || !LINK_STATES) {
+			console.error('Attempted to cycle common mode without a common config')
+			return
+		}
+
+		const mode = LINK_STATES.get(key)
+		if (mode) {
+			CONFIG.makeDefault(key)
+			CONFIG.setKeyInheritance(key, false)
+			LINK_STATES.set(key, false)
+		} else {
+			CONFIG.set(key, undefined)
+			CONFIG.setKeyInheritance(key, true)
+			LINK_STATES.set(key, true)
+		}
+
+		Undo.initEdit({ elements: [node] })
+		node.commonConfig = CONFIG.toJSON()
+		Undo.finishEdit(`Set ${key} inheritance mode to ${mode}`, {
+			elements: [node],
+		})
+
+		EVENTS.UPDATE_SELECTION.dispatch()
+	}
+</script>
+
+<ul class="option-list">
+	{#each CONFIG.keys() as key}
+		{@const display = CONFIG.getPropertyDescription(key)}
+		<li>
+			<div>
+				<div class="option-title">
+					{display?.displayName}
+				</div>
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<i
+					on:click={() => toggleLinked(key)}
+					class="material-icons notranslate icon option-mode-toggle"
+				>
+					{LINK_STATES.get(key) ? 'link' : 'link_off'}
+				</i>
+			</div>
+			{#if LINK_STATES.get(key) === false}
+				{#if display?.displayMode === 'checkbox'}
+					<div class="option-value">
+						<input type="checkbox" checked={!!CONFIG[key]} />
+					</div>
+				{:else if display?.displayMode === 'number'}
+					<div class="option-value">
+						<Number
+							id={key}
+							bind:value={CONFIG[key]}
+							min={display?.min}
+							max={display?.max}
+							dragStep={display?.step}
+						/>
+					</div>
+				{:else}
+					<div class="option-value">
+						<input type="text" value={CONFIG[key]} />
+					</div>
+				{/if}
+			{/if}
+		</li>
+	{/each}
+</ul>