gardenjs 1.7.2 → 1.7.3

package/src/client/components/stage/panel/controls/ArrayControl.svelte

@@ -49,144 +49,194 @@
   const getFieldType = (config) => String(config?.type ?? 'text').toLowerCase()
 
   let items = $derived(Array.isArray(value) ? value : [])
+  let isUnset = $derived(value === undefined || value === null)
 </script>
 
-<div class="items">
-  {#if items.length > 0}
-    {#each items as item, index (index)}
-      <div class="item">
-        <div class="item_header">
-          <span class="item_number">#{index + 1}</span>
-          <button
-            class="btn btn_remove"
-            title="Remove item"
-            aria-label="Remove item"
-            onclick={() => removeItem(index)}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              viewBox="0 0 24 24"
-              height="16"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              ><path
-                d="M10 11v6m4-6v6m5-11v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"
-              /></svg
-            >
-          </button>
-        </div>
-        <div class="grid">
-          {#each Object.entries(schema) as [key, config] (key)}
-            {@const fieldType = getFieldType(config)}
-            <div class="label">
-              <div class="field-label">{config.label || key}</div>
+<div class="row">
+  <div class="container">
+    <div class="items">
+      {#if items.length > 0}
+        {#each items as item, index (index)}
+          <div class="item">
+            <div class="item_header">
+              <span class="item_number">#{index + 1}</span>
+              <div class="item_header_actions">
+                <button
+                  type="button"
+                  class="btn btn_remove"
+                  title="Remove item"
+                  aria-label="Remove item"
+                  onclick={() => removeItem(index)}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    viewBox="0 0 24 24"
+                    height="16"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    ><path
+                      d="M10 11v6m4-6v6m5-11v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"
+                    /></svg
+                  >
+                </button>
+              </div>
             </div>
-            <div class="input_wrapper">
-              {#if fieldType === 'array'}
-                <ArrayControl
-                  value={item[key] ?? []}
-                  onChange={(v) => updateItemProperty(index, key, v)}
-                />
-              {:else if fieldType === 'boolean'}
-                <BooleanControl
-                  value={item[key] ?? undefined}
-                  onChange={(v) => updateItemProperty(index, key, v)}
-                />
-              {:else if fieldType === 'color'}
-                <ColorPickerControl
-                  value={item[key] ?? undefined}
-                  onChange={(v) => updateItemProperty(index, key, v)}
-                />
-              {:else if fieldType === 'date'}
-                <DateControl
-                  value={item[key] ?? undefined}
-                  onChange={(v) => updateItemProperty(index, key, v)}
-                />
-              {:else if fieldType === 'datetime'}
-                <DatetimeControl
-                  value={item[key] ?? undefined}
-                  onChange={(v) => updateItemProperty(index, key, v)}
-                />
-              {:else if fieldType === 'multiselect'}
-                <MultiselectControl
-                  value={item[key] ?? []}
-                  onChange={(v) => updateItemProperty(index, key, v)}
-                  options={config.options ?? []}
-                  control={config.control ?? 'dropdown'}
-                />
-              {:else if fieldType === 'number'}
-                <NumberControl
-                  value={item[key] ?? null}
-                  onChange={(v) => updateItemProperty(index, key, v)}
-                />
-              {:else if fieldType === 'object'}
-                <ObjectControl
-                  value={item[key] ?? {}}
-                  onChange={(v) => updateItemProperty(index, key, v)}
-                  schema={config.schema ?? {}}
-                />
-              {:else if fieldType === 'range'}
-                <RangeControl
-                  value={item[key] ?? null}
-                  min={config.min}
-                  max={config.max}
-                  step={config.step}
-                  onChange={(v) => updateItemProperty(index, key, v)}
-                />
-              {:else if fieldType === 'select'}
-                <SelectControl
-                  value={item[key] ?? undefined}
-                  onChange={(v) => updateItemProperty(index, key, v)}
-                  options={config.options ?? []}
-                />
-              {:else if fieldType === 'time'}
-                <TimeControl
-                  value={item[key] ?? undefined}
-                  onChange={(v) => updateItemProperty(index, key, v)}
-                />
-              {:else}
-                <TextInputControl
-                  value={item[key] ?? ''}
-                  control={config.control ?? 'text'}
-                  numberOfRows={config.numberOfRows}
-                  onChange={(v) => updateItemProperty(index, key, v)}
-                />
-              {/if}
+            <div class="grid">
+              {#each Object.entries(schema) as [key, config] (key)}
+                {@const fieldType = getFieldType(config)}
+                <div class="label">
+                  <div class="field-label">{config.label || key}</div>
+                </div>
+                <div class="input_wrapper">
+                  {#if fieldType === 'array'}
+                    <ArrayControl
+                      value={item[key] ?? []}
+                      onChange={(v) => updateItemProperty(index, key, v)}
+                    />
+                  {:else if fieldType === 'boolean'}
+                    <BooleanControl
+                      value={item[key] ?? undefined}
+                      onChange={(v) => updateItemProperty(index, key, v)}
+                    />
+                  {:else if fieldType === 'color'}
+                    <ColorPickerControl
+                      value={item[key] ?? undefined}
+                      onChange={(v) => updateItemProperty(index, key, v)}
+                    />
+                  {:else if fieldType === 'date'}
+                    <DateControl
+                      value={item[key] ?? undefined}
+                      onChange={(v) => updateItemProperty(index, key, v)}
+                    />
+                  {:else if fieldType === 'datetime'}
+                    <DatetimeControl
+                      value={item[key] ?? undefined}
+                      onChange={(v) => updateItemProperty(index, key, v)}
+                    />
+                  {:else if fieldType === 'multiselect'}
+                    <MultiselectControl
+                      value={item[key] ?? []}
+                      onChange={(v) => updateItemProperty(index, key, v)}
+                      options={config.options ?? []}
+                      control={config.control ?? 'dropdown'}
+                    />
+                  {:else if fieldType === 'number'}
+                    <NumberControl
+                      value={item[key] ?? null}
+                      onChange={(v) => updateItemProperty(index, key, v)}
+                    />
+                  {:else if fieldType === 'object'}
+                    <ObjectControl
+                      value={item[key] ?? {}}
+                      onChange={(v) => updateItemProperty(index, key, v)}
+                      schema={config.schema ?? {}}
+                    />
+                  {:else if fieldType === 'range'}
+                    <RangeControl
+                      value={item[key] ?? null}
+                      min={config.min}
+                      max={config.max}
+                      step={config.step}
+                      onChange={(v) => updateItemProperty(index, key, v)}
+                    />
+                  {:else if fieldType === 'select'}
+                    <SelectControl
+                      value={item[key] ?? undefined}
+                      onChange={(v) => updateItemProperty(index, key, v)}
+                      options={config.options ?? []}
+                    />
+                  {:else if fieldType === 'time'}
+                    <TimeControl
+                      value={item[key] ?? undefined}
+                      onChange={(v) => updateItemProperty(index, key, v)}
+                    />
+                  {:else}
+                    <TextInputControl
+                      value={item[key] ?? ''}
+                      control={config.control ?? 'text'}
+                      numberOfRows={config.numberOfRows}
+                      onChange={(v) => updateItemProperty(index, key, v)}
+                    />
+                  {/if}
+                </div>
+              {/each}
             </div>
-          {/each}
+          </div>
+        {/each}
+      {/if}
+      <div class="actions">
+        <button class="btn btn_add" onclick={addItem}>
+          <svg
+            class="plus"
+            xmlns="http://www.w3.org/2000/svg"
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            ><path d="M5 12h14" /><path d="M12 5v14" /></svg
+          >
+          <span class="btn-label">Add Item</span>
+        </button>
+        <div class="unset-area">
+          {#if !isUnset && items.length > 0}
+            <button
+              type="button"
+              class="btn btn_unset_action"
+              title="Unset"
+              aria-label="Unset"
+              onclick={() => onChange?.(undefined)}
+            >
+              <svg
+                class="close"
+                xmlns="http://www.w3.org/2000/svg"
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M18 6L6 18M6 6l12 12" />
+              </svg>
+              <span class="btn-label">Unset</span>
+            </button>
+          {/if}
         </div>
       </div>
-    {/each}
-  {/if}
-  <button class="btn btn_add" onclick={addItem}>
-    <svg
-      class="plus"
-      xmlns="http://www.w3.org/2000/svg"
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"><path d="M5 12h14" /><path d="M12 5v14" /></svg
-    >
-    Add Item
-  </button>
+    </div>
+  </div>
 </div>
 
 <style>
   @import './button.scss';
 
+  .row {
+    display: flex;
+    gap: 0.5rem;
+    align-items: flex-start;
+  }
+
+  .container {
+    flex: 1;
+    min-width: 0;
+  }
+
   .items {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     width: 100%;
+    --delete-col-width: 4.75rem;
   }
 
   .item {
@@ -196,12 +246,20 @@
   }
 
   .item_header {
-    display: flex;
-    justify-content: space-between;
+    display: grid;
+    grid-template-columns: 1fr var(--delete-col-width);
     align-items: center;
+    gap: 0.5rem;
     margin-bottom: 0.75rem;
   }
 
+  .item_header_actions {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    width: var(--delete-col-width);
+  }
+
   .item_number {
     font-size: 0.875rem;
     font-weight: 600;
@@ -239,4 +297,24 @@
     display: block;
     margin-right: 0.25rem;
   }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .unset-area {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .btn_unset_action {
+    max-width: 8.5rem;
+  }
+
+  .btn_unset_action .close {
+    margin-right: 0.25rem;
+  }
 </style>

package/src/client/components/stage/panel/controls/NumberControl.svelte

@@ -51,7 +51,7 @@
 
 <style lang="scss">
   @use './button_unset.scss';
-  @import './input.scss';
+  @use './input.scss';
 
   .row {
     display: flex;

package/src/client/components/stage/panel/controls/ObjectControl.svelte

@@ -33,83 +33,150 @@
   }
 
   let entries = $derived(Object.entries(value || {}))
+  let isUnset = $derived(value === undefined || value === null)
 </script>
 
-<div class="object-param">
-  {#if entries.length > 0}
-    {#each entries as [key, val], index (index)}
-      <div class="object-item">
-        <input
-          class="input input_key"
-          type="text"
-          value={key}
-          placeholder="key"
-          oninput={(e) => updateKey(key, e.currentTarget.value)}
-        />
-        <span class="separator">:</span>
-        <input
-          type="text"
-          class="input input_value"
-          value={String(val ?? '')}
-          placeholder="value"
-          oninput={(e) => updateValue(key, e.currentTarget.value)}
-        />
-        <button
-          class="btn btn_remove"
-          title="Remove property"
-          aria-label="Remove property"
-          onclick={() => removeProperty(key)}
-        >
+<div class="row">
+  <div class="container">
+    <div class="object-param">
+      {#if entries.length > 0}
+        {#each entries as [key, val], index (index)}
+          <div class="object-item">
+            <div class="object-fields">
+              <input
+                class="input input_key"
+                type="text"
+                value={key}
+                placeholder="key"
+                oninput={(e) => updateKey(key, e.currentTarget.value)}
+              />
+              <span class="separator">:</span>
+              <input
+                type="text"
+                class="input input_value"
+                value={String(val ?? '')}
+                placeholder="value"
+                oninput={(e) => updateValue(key, e.currentTarget.value)}
+              />
+            </div>
+            <div class="object-actions">
+              <button
+                type="button"
+                class="btn btn_remove"
+                title="Remove property"
+                aria-label="Remove property"
+                onclick={() => removeProperty(key)}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  viewBox="0 0 24 24"
+                  height="16"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  ><path
+                    d="M10 11v6m4-6v6m5-11v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"
+                  /></svg
+                >
+              </button>
+            </div>
+          </div>
+        {/each}
+      {/if}
+      <div class="actions">
+        <button class="btn" onclick={addProperty}>
           <svg
+            class="plus"
             xmlns="http://www.w3.org/2000/svg"
-            width="16"
+            width="14"
+            height="14"
             viewBox="0 0 24 24"
-            height="16"
             fill="none"
             stroke="currentColor"
-            stroke-width="1.5"
+            stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
-            ><path
-              d="M10 11v6m4-6v6m5-11v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"
-            /></svg
+            ><path d="M5 12h14" /><path d="M12 5v14" /></svg
           >
+          <span class="btn-label">Add Property</span>
         </button>
+        <div class="unset-area">
+          {#if !isUnset}
+            <button
+              type="button"
+              class="btn btn_unset_action"
+              title="Unset"
+              aria-label="Unset"
+              onclick={() => onChange?.(undefined)}
+            >
+              <svg
+                class="close"
+                xmlns="http://www.w3.org/2000/svg"
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M18 6L6 18M6 6l12 12" />
+              </svg>
+              <span class="btn-label">Unset</span>
+            </button>
+          {/if}
+        </div>
       </div>
-    {/each}
-  {/if}
-  <button class="btn" onclick={addProperty}>
-    <svg
-      class="plus"
-      xmlns="http://www.w3.org/2000/svg"
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"><path d="M5 12h14" /><path d="M12 5v14" /></svg
-    >
-    Add Property
-  </button>
+    </div>
+  </div>
 </div>
 
-<style>
-  @import './button.scss';
-  @import './input.scss';
+<style lang="scss">
+  @use './button.scss';
+  @use './input.scss';
+
+  .row {
+    display: flex;
+    gap: 0.5rem;
+    align-items: flex-start;
+  }
+
+  .container {
+    flex: 1;
+    min-width: 0;
+  }
 
   .object-param {
     display: flex;
     flex-direction: column;
     gap: 0.375rem;
     width: 100%;
+    --delete-col-width: 4.75rem;
   }
 
   .object-item {
+    display: grid;
+    grid-template-columns: 1fr var(--delete-col-width);
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .object-fields {
     display: flex;
     gap: 0.25rem;
     align-items: center;
+    min-width: 0;
+  }
+
+  .object-actions {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    width: var(--delete-col-width);
   }
 
   .input_key {
@@ -128,6 +195,7 @@
   }
 
   .btn_remove {
+    flex-shrink: 0;
     width: 1.5rem;
     height: 1.5rem;
     padding: 0;
@@ -145,4 +213,24 @@
     display: block;
     margin-right: 0.25rem;
   }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .unset-area {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .btn_unset_action {
+    max-width: 8.5rem;
+  }
+
+  .btn_unset_action .close {
+    margin-right: 0.25rem;
+  }
 </style>

package/src/client/components/stage/panel/controls/button.scss

@@ -6,9 +6,12 @@
   background-color: var(--c-basic-100);
   font-size: 0.875rem;
   color: var(--c-basic-800);
-}
-.btn:hover,
-.btn:focus-visible {
-  background-color: var(--c-primary-bg);
-  color: var(--c-primary);
+  .btn-label {
+    margin-left: 0.25rem;
+  }
+  &:hover,
+  &:focus-visible {
+    background-color: var(--c-primary-bg);
+    color: var(--c-primary);
+  }
 }

package/src/client/components/stage/panel/controls/button_unset.scss

@@ -15,7 +15,6 @@
 .btn_unset {
   display: inline-flex;
   align-items: center;
-  justify-content: space-between;
   margin: 0 0 0 0.5rem;
   padding: 0.25rem 0.5rem;
   width: 4.25rem;

package/src/client/components/topbar/Topbar.svelte

@@ -8,6 +8,7 @@
     nodeVisibleInExplorer,
     showGrid,
     showInspector,
+    showDistanceMeasure,
     sidebarExpanded = true,
     stageMaxHeight,
     stageMaxWidth,
@@ -26,6 +27,7 @@
     onToggleOrientation,
     onToggleShowGrid,
     onToggleShowInspector,
+    onToggleShowDistanceMeasure,
     onRevealInExplorer,
   } = $props()
 
@@ -129,6 +131,11 @@
       </button>
       <button class="topbar_btn show-m-p_btn" class:active={showInspector === true} title="Visualise margins and paddings" onclick="{onToggleShowInspector}">
         <span class="is-hidden">Visualise margins and paddings</span>
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.034 12.681a.498.498 0 01.647-.647l9 3.5a.5.5 0 01-.033.943l-3.444 1.068a1 1 0 00-.66.66l-1.067 3.443a.5.5 0 01-.943.033zM5 3a2 2 0 00-2 2m16-2a2 2 0 012 2M5 21a2 2 0 01-2-2M9 3h1M9 21h2m3-18h1M3 9v1m18-1v2M3 14v1"/></svg>
+        <span class="dot"></span>
+      </button>
+      <button class="topbar_btn distance-measure-btn" class:active={showDistanceMeasure === true} title="Measure distances between selected points" onclick="{onToggleShowDistanceMeasure}">
+        <span class="is-hidden">Measure distances between selected points</span>
         <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15v-3.014M16 15v-3.014M20 6H4m16 2V4M4 8V4m4 11v-3.014"/><rect x="3" y="12" width="18" height="7" rx="1"/></svg>
         <span class="dot"></span>
       </button>