Added IDs to all palette controls.

wordplaydev · Dec 1, 2024 · c1aa13a · c1aa13a
1 parent 6e6b455
commit c1aa13a
Show file tree

Hide file tree

Showing 21 changed files with 174 additions and 101 deletions.
diff --git a/src/components/editor/TokenEditor.svelte b/src/components/editor/TokenEditor.svelte
@@ -22,7 +22,7 @@
         text = $bindable(),
         placeholder,
         validator,
-        creator
+        creator,
     }: Props = $props();
 
     let view: HTMLInputElement | undefined = $state(undefined);
@@ -114,7 +114,7 @@
 
 <TextField
     bind:text
-    id={token.id}
+    data={token.id}
     bind:view
     classes={['token-editor']}
     placeholder={placeholder ?? ''}

diff --git a/src/components/palette/AuraEditor.svelte b/src/components/palette/AuraEditor.svelte
@@ -18,9 +18,16 @@
         property: OutputProperty;
         values: OutputPropertyValueSet;
         editable: boolean;
+        id?: string | undefined;
     }
 
-    let { project, property, values, editable }: Props = $props();
+    let {
+        project,
+        property,
+        values,
+        editable,
+        id = undefined,
+    }: Props = $props();
 
     let blur = $state(
         getNumberBind(project.shares.output.Aura.inputs[1], values) ?? 0.05,
@@ -151,7 +158,7 @@
 </script>
 
 {project.shares.output.Aura.names.getSymbolicName()}
-<div class="aura">
+<div class="aura" {id}>
     <ColorChooser
         {lightness}
         {chroma}

diff --git a/src/components/palette/BindCheckbox.svelte b/src/components/palette/BindCheckbox.svelte
@@ -10,9 +10,10 @@
         property: OutputProperty;
         values: OutputPropertyValues;
         editable: boolean;
+        id?: string | undefined;
     }
 
-    let { property, values, editable }: Props = $props();
+    let { property, values, editable, id = undefined }: Props = $props();
 
     const project = getProject();
 
@@ -37,5 +38,5 @@
     on={values.getBool()}
     changed={handleChange}
     {editable}
-    id={property.getName()}
+    {id}
 />
diff --git a/src/components/palette/BindColor.svelte b/src/components/palette/BindColor.svelte
@@ -15,9 +15,10 @@
         property: OutputProperty;
         values: OutputPropertyValueSet;
         editable: boolean;
+        id?: string | undefined;
     }
 
-    let { property, values, editable }: Props = $props();
+    let { property, values, editable, id = undefined }: Props = $props();
 
     let project = getProject();
     let selection = getSelectedOutput();
@@ -96,4 +97,11 @@
     );
 </script>
 
-<ColorChooser {lightness} {chroma} {hue} change={handleChange} {editable} />
+<ColorChooser
+    {id}
+    {lightness}
+    {chroma}
+    {hue}
+    change={handleChange}
+    {editable}
+/>
diff --git a/src/components/palette/BindOptions.svelte b/src/components/palette/BindOptions.svelte
@@ -11,13 +11,15 @@
         values: OutputPropertyValues;
         options: OutputPropertyOptions;
         editable: boolean;
+        id?: string | undefined;
     }
 
     let {
         property,
         values,
         options,
-        editable
+        editable,
+        id = undefined,
     }: Props = $props();
 
     let project = getProject();
@@ -37,7 +39,7 @@
 </script>
 
 <Options
-    id={property.getName()}
+    {id}
     label={property.getName()}
     value={options.toText(values.getExpression())}
     width="7em"

diff --git a/src/components/palette/BindSlider.svelte b/src/components/palette/BindSlider.svelte
@@ -15,14 +15,10 @@
         values: OutputPropertyValues;
         range: OutputPropertyRange;
         editable: boolean;
+        id?: string | undefined;
     }
 
-    let {
-        property,
-        values,
-        range,
-        editable
-    }: Props = $props();
+    let { property, values, range, editable, id = undefined }: Props = $props();
 
     const project = getProject();
 
@@ -57,4 +53,5 @@
     change={handleChange}
     precision={range.precision}
     {editable}
+    {id}
 />
diff --git a/src/components/palette/BindText.svelte b/src/components/palette/BindText.svelte
@@ -22,13 +22,15 @@
         values: OutputPropertyValues;
         validator: (text: string) => boolean;
         editable: boolean;
+        id?: string | undefined;
     }
 
     let {
         property,
         values,
         validator,
-        editable
+        editable,
+        id = undefined,
     }: Props = $props();
 
     let project = getProject();
@@ -80,6 +82,7 @@
         changed={handleChange}
         bind:view
         {editable}
+        {id}
     />
     {isMarkup
         ? FORMATTED_SYMBOL

diff --git a/src/components/palette/ContentEditor.svelte b/src/components/palette/ContentEditor.svelte
@@ -14,9 +14,10 @@
         project: Project;
         list: ListLiteral | undefined;
         editable: boolean;
+        id?: string | undefined;
     }
 
-    let { project, list, editable }: Props = $props();
+    let { project, list, editable, id = undefined }: Props = $props();
 
     const selection = getSelectedOutput();
 
@@ -50,7 +51,7 @@
     }
 </script>
 
-<div class="list">
+<div class="list" {id}>
     {#if list && valid}
         {#each list.values as content, index}
             <div class="content">

diff --git a/src/components/palette/MotionEditor.svelte b/src/components/palette/MotionEditor.svelte
@@ -8,21 +8,26 @@
         project: Project;
         motion: Evaluate;
         editable: boolean;
+        id?: string | undefined;
     }
 
-    let { project, motion, editable }: Props = $props();
+    let { project, motion, editable, id = undefined }: Props = $props();
 
-    let place = $derived(motion.getInput(
-        project.shares.input.Motion.inputs[0],
-        project.getNodeContext(motion)
-    ));
-    let velocity = $derived(motion.getInput(
-        project.shares.input.Motion.inputs[1],
-        project.getNodeContext(motion)
-    ));
+    let place = $derived(
+        motion.getInput(
+            project.shares.input.Motion.inputs[0],
+            project.getNodeContext(motion),
+        ),
+    );
+    let velocity = $derived(
+        motion.getInput(
+            project.shares.input.Motion.inputs[1],
+            project.getNodeContext(motion),
+        ),
+    );
 </script>
 
-<div class="motion">
+<div class="motion" {id}>
     {project.shares.input.Motion.names.getPreferredNameString([], true)}
     {#if place instanceof Evaluate}
         <div class="field"

diff --git a/src/components/palette/PaletteProperty.svelte b/src/components/palette/PaletteProperty.svelte
@@ -45,6 +45,7 @@
     let bind = $derived(values.getBind());
     let bindConcept = $derived(bind ? index?.getBindConcept(bind) : undefined);
     let valuesAreSet = $derived(values.areSet());
+    let propertyID = $derived(`property-${property.getName()}`);
 
     let toggleView: HTMLButtonElement | undefined = $state();
 
@@ -66,7 +67,7 @@
                     label={DOCUMENTATION_SYMBOL}
                 /></small
             >{/if}
-        <label for={property.getName()}
+        <label for={propertyID}
             >{bindConcept?.getName($locales, false) ?? '—'}</label
         >
         {#if editable}
@@ -81,11 +82,13 @@
     {/snippet}
     {#snippet control()}
         {#if values.areMixed()}
-            <Note>{$locales.get((l) => l.ui.palette.labels.mixed)}</Note>
+            <Note id={propertyID}
+                >{$locales.get((l) => l.ui.palette.labels.mixed)}</Note
+            >
         {:else if !values.areSet()}
             {@const expression = values.getExpression()}
             <!-- If the values arent set, show as inherited if inherited, and otherwise show the default -->
-            <Note
+            <Note id={propertyID}
                 >{#if property.inherited}{$locales.get(
                         (l) => l.ui.palette.labels.inherited,
                     )}{:else if values.areDefault() && expression !== undefined}<NodeView
@@ -96,38 +99,50 @@
                     )}{:else}&mdash;{/if}</Note
             >
         {:else if !values.areEditable(project)}
-            <Note>{$locales.get((l) => l.ui.palette.labels.computed)}</Note>
+            <Note id={propertyID}
+                >{$locales.get((l) => l.ui.palette.labels.computed)}</Note
+            >
         {:else if property.type instanceof OutputPropertyRange}
-            <BindSlider {property} {values} range={property.type} {editable} />
+            <BindSlider
+                id={propertyID}
+                {property}
+                {values}
+                range={property.type}
+                {editable}
+            />
         {:else if property.type instanceof OutputPropertyOptions}
             <BindOptions
+                id={propertyID}
                 {property}
                 {values}
                 options={property.type}
                 {editable}
             />
         {:else if property.type instanceof OutputPropertyText}
             <BindText
+                id={propertyID}
                 {property}
                 {values}
                 validator={property.type.validator}
                 {editable}
             />
         {:else if property.type === 'color'}
-            <BindColor {property} {values} {editable} />
+            <BindColor id={propertyID} {property} {values} {editable} />
         {:else if property.type === 'bool'}
-            <BindCheckbox {property} {values} {editable} />
+            <BindCheckbox id={propertyID} {property} {values} {editable} />
         {:else if property.type === 'pose'}
             {@const expression = values.getExpression()}
             {#if expression instanceof Evaluate && expression.is(project.shares.output.Pose, project.getNodeContext(expression))}
                 <PoseEditor
+                    id={propertyID}
                     {project}
                     outputs={values.getOutputExpressions(project, $locales)}
                     sequence={false}
                     {editable}
                 />
             {:else if expression instanceof Evaluate && expression.is(project.shares.output.Sequence, project.getNodeContext(expression))}
                 <SequenceEditor
+                    id={propertyID}
                     {project}
                     outputs={values.getOutputExpressions(project, $locales)}
                     {editable}
@@ -136,9 +151,19 @@
         {:else if property.type === 'aura'}
             <AuraEditor {project} {property} {values} {editable} />
         {:else if property.type == 'poses'}
-            <SequencePosesEditor {project} map={values.getMap()} {editable} />
+            <SequencePosesEditor
+                id={propertyID}
+                {project}
+                map={values.getMap()}
+                {editable}
+            />
         {:else if property.type === 'content'}
-            <ContentEditor {project} list={values.getList()} {editable} />
+            <ContentEditor
+                id={propertyID}
+                {project}
+                list={values.getList()}
+                {editable}
+            />
         {:else if property.type === 'place'}
             {@const place = values.getEvaluationOf(
                 project,
@@ -153,11 +178,22 @@
                 project.shares.input.Placement,
             )}
             {#if place}
-                <PlaceEditor {project} {place} {editable} convertable={true} />
+                <PlaceEditor
+                    id={propertyID}
+                    {project}
+                    {place}
+                    {editable}
+                    convertable={true}
+                />
             {:else if motion}
-                <MotionEditor {project} {motion} {editable} />
+                <MotionEditor id={propertyID} {project} {motion} {editable} />
             {:else if placement}
-                <PlacementEditor {project} {placement} {editable} />
+                <PlacementEditor
+                    id={propertyID}
+                    {project}
+                    {placement}
+                    {editable}
+                />
             {/if}
         {/if}
     {/snippet}

diff --git a/src/components/palette/PlaceEditor.svelte b/src/components/palette/PlaceEditor.svelte
@@ -20,13 +20,15 @@
         place: Evaluate;
         editable: boolean;
         convertable: boolean;
+        id?: string | undefined;
     }
 
     let {
         project,
         place,
         editable,
-        convertable
+        convertable,
+        id = undefined,
     }: Props = $props();
 
     let views: HTMLInputElement[] = $state([]);
@@ -82,7 +84,7 @@
 </script>
 
 {project.shares.output.Place.names.getSymbolicName()}
-<div class="place">
+<div class="place" {id}>
     {#each project.shares.output.Place.inputs as dimension, index}
         {@const given = place?.getInput(
             dimension,