avoid adding siblings only array and object types can add children

src/lib/editor/form/AbstractField.svelte

@@ -25,10 +25,9 @@
  let isHover = false;
  let isFocus = false;
 
- $: showContextMenu = !field.is.root && (isHover || isFocus);
- $: parentField = field.parent as UIModelField;
+ $: showContextMenu = isHover || isFocus;
  $: addMenuEmptyItem = field.is.empty;
- $: addMenu = !addMenuEmptyItem && showAddMenu && !parentField.is.complete;
+ $: addMenu = !addMenuEmptyItem && showAddMenu && !field.is.complete;
 
  $: {
  if (addMenuRef) {
@@ -41,7 +40,6 @@
 
  function handleHover(e: CustomEvent<boolean>) {
  // @note: Prevent undesired hover events on other items while dragging
- console.log(e.detail);
  isHover = e.detail;
  }
 
@@ -58,15 +56,16 @@
  }
 
  function handleAddField() {
- if (parentField.is.complete) return;
+ if (field.is.complete) return;
 
  showAddMenu = false;
 
  // @note: Add field directly instead of showing the dropdown option list
- if (parentField.type === "array" || parentField.controlType === "dictionary") {
- const [childOption] = parentField.options || [];
+ if (field.type === "array" || field.controlType === "dictionary") {
+ console.log(field.options);
+ const [childOption] = field.options || [];
 
- addField(parentField, childOption);
+ addField(field, childOption);
  return;
  }
 
@@ -101,7 +100,7 @@
  const nextItem = field.getNextFocusableField();
 
  // @note: Last item but the parent is not complete, show the add field menu
- if (nextItem?.isContainer() && !parentField.is.complete) {
+ if (nextItem?.isContainer() && !field.is.complete) {
  return handleAddField();
  } else {
  return focusNextField(nextItem);
@@ -126,22 +125,17 @@
  on:focusin={handleFocusIn}
  on:focusout={handleFocusOut}
 >
- <div class="p-0.5 pl-2.5 pr-0" class:pr-2.5={!field.children} class:bg-slate-200={showContextMenu}>
+ <div class="p-0.5 pl-2.5 pr-0" class:pr-2.5={!field.children} class:bg-slate-50={showContextMenu}>
  <svelte:component this={componentsMap[field.type] || FallbackField} {field} />
  </div>
  <div class="absolute top-0 right-0">
- <div on:hover={handleHover} class="absolute top-0 left-0 -ml-2.5" class:bg-slate-200={showContextMenu}>
- <span class:invisible={!showContextMenu}>
+ <div on:hover={handleHover} class="absolute top-0 left-0 -ml-2.5" class:bg-slate-50={showContextMenu}>
+ <span class:invisible={!field.is.root && !showContextMenu}>
  <FieldContextMenu {field} on:addField={handleAddField} />
  </span>
  </div>
  </div>
 </div>
 {#if addMenu}
- <AddFieldMenu
- field={parentField}
- showModal={true}
- bind:inputRef={addMenuRef}
- on:closeAddFieldMenu={handleAddFieldMenuClose}
- />
+ <AddFieldMenu {field} showModal={true} bind:inputRef={addMenuRef} on:closeAddFieldMenu={handleAddFieldMenuClose} />
 {/if}

src/lib/editor/form/FieldButton.svelte

@@ -1,22 +1,44 @@
 <script lang="ts">
  import Tooltip from "$lib/ui/Tooltip.svelte";
+ import { createEventDispatcher } from "svelte";
  import { Icon, type IconSource } from "svelte-hero-icons";
 
  export let icon: IconSource;
+ export let confirmationIcon: IconSource | null = null;
  export let tooltipText = "";
  export let isDestructive = false;
+
+ let needsConfirmation = false;
+
+ $: buttonIcon = !isDestructive ? icon : needsConfirmation ? confirmationIcon : icon;
+
+ const dispatch = createEventDispatcher();
+
+ const handleClick = () => {
+ if (isDestructive && !needsConfirmation) {
+ needsConfirmation = true;
+ setTimeout(() => {
+ needsConfirmation = false;
+ }, 3000);
+ return;
+ }
+
+ needsConfirmation = false;
+
+ dispatch("click");
+ };
 </script>
 
 <Tooltip>
  <svelte:fragment slot="content">
  <p class="whitespace-nowrap">{tooltipText}</p>
  </svelte:fragment>
  <button
- on:click
+ on:click={handleClick}
  class="flex items-center justify-start w-full p-2 {isDestructive
  ? 'hover:bg-red-400 hover:text-white'
  : 'hover:bg-gray-200'}"
  >
- <Icon src={icon} class="h-4 w-4 p-0.5" />
+ <Icon src={buttonIcon} class="h-4 w-4 p-0.5" />
  </button>
 </Tooltip>

src/lib/editor/form/FieldButtons.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
  import { fade } from "svelte/transition";
- import { Trash, DocumentDuplicate, ArrowUp, ArrowDown, Plus } from "svelte-hero-icons";
+ import { Trash, DocumentDuplicate, ArrowUp, ArrowDown, Plus, Minus } from "svelte-hero-icons";
  import { createEventDispatcher } from "svelte";
  import type { UIModelField } from "./utils/model.js";
  import FieldButton from "./FieldButton.svelte";
@@ -30,7 +30,13 @@
  {/if}
  {#if field?.is.disposable}
  <li>
- <FieldButton icon={Trash} tooltipText="Remove" isDestructive={true} on:click={() => dispatch("remove")} />
+ <FieldButton
+ icon={Minus}
+ confirmationIcon={Trash}
+ tooltipText="Remove"
+ isDestructive={true}
+ on:click={() => dispatch("remove")}
+ />
  </li>
  {/if}
  {#if canMoveUp}

src/lib/editor/form/FieldContextMenu.svelte

@@ -12,7 +12,7 @@
 
 <FieldButtons
  {field}
- showAdd={!field.parent?.is.complete}
+ showAdd={["object", "array"].includes(field.type)}
  on:add={() => dispatch("addField")}
  on:duplicate={() => duplicateField(field)}
  on:remove={() => deleteField(field)}