sveltekit-ui 1.0.28 → 1.0.30

package/src/lib/Components/ContentInput/index.svelte.js

@@ -39,6 +39,8 @@ export function create_content_input_manager(config) {
   let attributes_input = $state(null)
   let focused_selector_id = $state(null)
   let definition_stack = $state([])
+  let dragging_selector_id = $state(null)
+  let dragged_over_element_child = $state(null)
 
   let mapkit_js_token = $derived(set_closurable(config?.mapkit_js_token, null))
 
@@ -109,6 +111,7 @@ export function create_content_input_manager(config) {
     let preempt_add_child_element_button_manager = $state(null)
     let small_preempt_add_child_element_button_manager = $state(null)
     let preempt_add_sibling_element_below_button_manager = $state(null)
+    let reset_ids_button_manager = $state(null)
     let copy_markdown_button_manager = $state(null)
     let copy_astc_button_manager = $state(null)
     let shift_element_up_5_button_manager = $state(null)
@@ -177,6 +180,19 @@ export function create_content_input_manager(config) {
       border_radius: 0.5,
       on_click: () => initiate_add_child_el_to_selector(element?.selector_id),
     })
+    reset_ids_button_manager = create_button_manager({
+      type: "soft",
+      support_icon: "refresh",
+      text_align: "left",
+      text: "Reset IDs",
+      is_success_animation: true,
+      on_click: () => {
+        extra_popover_manager.close()
+        setTimeout(() => {
+          reset_ids(element?.selector_id)
+        }, 200)
+      },
+    })
     copy_markdown_button_manager = create_button_manager({
       type: "soft",
       support_icon: "clipboard",
@@ -336,6 +352,9 @@ export function create_content_input_manager(config) {
       get preempt_add_sibling_element_below_button_manager() {
         return preempt_add_sibling_element_below_button_manager
       },
+      get reset_ids_button_manager() {
+        return reset_ids_button_manager
+      },
       get copy_markdown_button_manager() {
         return copy_markdown_button_manager
       },
@@ -376,7 +395,7 @@ export function create_content_input_manager(config) {
     }
   }
 
-  function get_parent_el(selector_id) {
+  function get_parent_el(selector_id, element = null) {
     function get_parent_el_recursive(selector_id, element) {
       if (selector_id && element && Array.isArray(element?.children)) {
         for (let child of element.children) {
@@ -393,7 +412,7 @@ export function create_content_input_manager(config) {
       }
       return null
     }
-    return get_parent_el_recursive(selector_id, versions?.[selected_version_index])
+    return get_parent_el_recursive(selector_id, element ?? versions?.[selected_version_index])
   }
 
   function add_version(version) {
@@ -405,6 +424,92 @@ export function create_content_input_manager(config) {
     }
   }
 
+  function handle_element_child_drag_over(e, selector_id, is_children = false) {
+    e.preventDefault()
+    e.stopPropagation()
+    dragged_over_element_child = { selector_id, is_children }
+  }
+
+  function handle_element_child_drag_drop(e, selector_id, is_children = false) {
+    e.stopPropagation()
+    console.log("handle_element_child_drag_drop", { selector_id, dragging_selector_id, is_children })
+    if (selector_id == dragging_selector_id) {
+      dragging_selector_id = null
+      return
+    }
+    const found_element = traverse_els_for_match(dragging_selector_id)
+    const removed_version = remove_el_recursive(selected_version_prepped?.element, dragging_selector_id)
+    let readded_version = null
+    if (is_children) {
+      readded_version = add_child_to_el_recursive(removed_version, selector_id, found_element)
+    } else {
+      let dom_el_parent = get_parent_el(selector_id, removed_version)
+      const element_index_of_siblings = Array.isArray(dom_el_parent?.children)
+        ? dom_el_parent.children.findIndex((h) => h.selector_id == selector_id)
+        : null
+      if (dom_el_parent && found_element) {
+        if (Array.isArray(dom_el_parent?.children)) {
+          dom_el_parent.children.splice(element_index_of_siblings, 0, found_element)
+        } else {
+          dom_el_parent.children = [found_element]
+        }
+        readded_version = replace_el_recursive(removed_version, dom_el_parent?.selector_id, dom_el_parent)
+      }
+    }
+    add_version(readded_version)
+    dragging_selector_id = null
+  }
+  function handle_element_child_drag_start(e, selector_id) {
+    e.stopPropagation()
+    dragging_selector_id = selector_id
+  }
+  function handle_element_child_drag_end(e, selector_id) {
+    dragged_over_element_child = null
+    dragging_selector_id = null
+  }
+
+  function reset_ids(selector_id) {
+    const found_element = traverse_els_for_match(selector_id)
+    const clean_element = reset_ids_recursive(found_element)
+    const new_version = find_and_replace_element(selector_id, selected_version_prepped?.element, clean_element)
+    add_version(new_version)
+  }
+
+  function reset_ids_recursive(element, selector_id) {
+    if (!element?.selector_id || element?.selector_id == selector_id) {
+      return null
+    }
+    element.selector_id = create_unique_id(null, 8)
+    let new_children = []
+    if (Array.isArray(element?.children)) {
+      for (let child of element?.children) {
+        const child_new_el = reset_ids_recursive(child, selector_id)
+        if (child_new_el) {
+          new_children.push(child_new_el)
+        }
+      }
+    }
+    element.children = new_children
+    return element
+  }
+
+  function find_and_replace_element(selector_id, root_el, replacement_el) {
+    function replace_recursive(node) {
+      if (!node) return null
+      if (node.selector_id === selector_id) {
+        return deep_copy(replacement_el)
+      }
+      const new_children = Array.isArray(node.children) ? node.children.map(replace_recursive).filter(Boolean) : []
+      return {
+        type_id: node.type_id,
+        selector_id: node.selector_id,
+        attributes: node.attributes ? { ...node.attributes } : node.attributes,
+        children: new_children,
+      }
+    }
+    return replace_recursive(root_el)
+  }
+
   function copy_markdown() {
     copy_to_clipboard(astc_to_markdown(selected_version_prepped?.element))
   }
@@ -449,7 +554,6 @@ export function create_content_input_manager(config) {
   }
 
   function add_sibling_el(selector_id, el_type_id, element_to_add = null) {
-    console.log("add_sibling_el", selector_id, el_type_id)
     let dom_el_parent = get_parent_el(selector_id)
     const element_index_of_siblings = Array.isArray(dom_el_parent?.children)
       ? dom_el_parent.children.findIndex((h) => h.selector_id == selector_id)
@@ -469,10 +573,8 @@ export function create_content_input_manager(config) {
   }
 
   function initiate_add_sibling_el_to_selector(selector_id) {
-    console.log("initiate_add_sibling_el_to_selector", selector_id)
     const dom_el_parent = get_parent_el(selector_id)
     const avail_element_ids = calc_child_element_options(dom_el_parent)
-    console.log("avail_element_ids", avail_element_ids)
     if (avail_element_ids.length > 1) {
       location_to_add_element = "sibling"
       find_and_open_add_element_popover_selector_id(selected_version_prepped, selector_id ?? "root")
@@ -518,7 +620,6 @@ export function create_content_input_manager(config) {
   }
 
   function add_el_to_el_children(selector_id, new_element) {
-    console.log("add_el_to_el_children", selector_id)
     add_version(add_child_to_el_recursive(selected_version_prepped?.element, selector_id, new_element))
   }
 
@@ -1013,6 +1114,12 @@ export function create_content_input_manager(config) {
     get attributes_input() {
       return attributes_input
     },
+    get dragging_selector_id() {
+      return dragging_selector_id
+    },
+    get dragged_over_element_child() {
+      return dragged_over_element_child
+    },
 
     init,
     clean_content,
@@ -1049,5 +1156,11 @@ export function create_content_input_manager(config) {
     set_element_attributes,
 
     pass_event_down,
+    reset_ids,
+
+    handle_element_child_drag_over,
+    handle_element_child_drag_drop,
+    handle_element_child_drag_start,
+    handle_element_child_drag_end,
   }
 }

package/src/lib/client/types/index.js

@@ -689,6 +689,10 @@ export const content_types = {
         type: "text_literal",
         display_name: "Justify Content",
       },
+      gap: {
+        type: "float_literal",
+        display_name: "Gap",
+      },
     },
     child_elements: {
       ...main_child_element_options,