1import { i as if_block, s as slot, d as bind_this, a as set_attribute, b as set_class, r as rest_props, g as spread_props } from './i18n-CGlVUOvE.js'; 2import { M as push, a8 as onMount, t as template_effect, a as append, O as pop, S as sibling, R as from_html, Q as child, I as tick, Z as get, T as reset, a2 as user_derived } from './index-Bq2njFOY.js'; 3import { G as Gradio } from './utils.svelte-Bi9ASwv9.js'; 4import { S as Static } from './index-1GCmrSlD.js'; 5import './StreamingBar.svelte_svelte_type_style_lang-DWGn5tT_.js'; 6import './ScrollFade.svelte_svelte_type_style_lang-D0JPkGar.js'; 7import './snippet-BG7qkY_1.js'; 8import './MarkdownCode.svelte_svelte_type_style_lang-B29zDiob.js'; 9import './prism-python-NrKIQnfs.js'; 10import './Clear-C8Tfa7QP.js'; 11import './html-Bwif0JPw.js'; 12 13var root = from_html(`<div role="region" aria-label="Draggable items container"><!> <!></div>`); 14 15function Index($$anchor, $$props) { 16 push($$props, true); 17 18 const props = rest_props($$props, ['$$slots', '$$events', '$$legacy']); 19 const gradio = new Gradio(props); 20 let container_el; 21 let dragged_el = null; 22 let items = []; 23 let current_drop_target = null; 24 25 const drag_event_handlers = [ 26 { event: "dragstart", handler: handle_drag_start }, 27 { event: "dragend", handler: handle_drag_end } 28 ]; 29 30 const drop_event_handlers = [ 31 { event: "dragover", handler: handle_drag_over }, 32 { event: "drop", handler: handle_drop }, 33 { event: "dragenter", handler: handle_drag_enter } 34 ]; 35 36 function add_drag_listeners(element) { 37 drag_event_handlers.forEach(({ event, handler }) => { 38 element.addEventListener(event, handler); 39 }); 40 } 41 42 function remove_drag_listeners(element) { 43 drag_event_handlers.forEach(({ event, handler }) => { 44 element.removeEventListener(event, handler); 45 }); 46 } 47 48 function add_drop_listeners(element) { 49 drop_event_handlers.forEach(({ event, handler }) => { 50 element.addEventListener(event, handler); 51 }); 52 } 53 54 function remove_drop_listeners(element) { 55 drop_event_handlers.forEach(({ event, handler }) => { 56 element.removeEventListener(event, handler); 57 }); 58 } 59 60 function setup_draggable_item(element, index) { 61 element.classList.add("draggable-item"); 62 element.setAttribute("data-index", index.toString()); 63 element.style.position = "relative"; 64 65 const handle = document.createElement("div"); 66 67 handle.className = "drag-handle"; 68 handle.setAttribute("draggable", "true"); 69 handle.setAttribute("aria-grabbed", "false"); 70 handle.setAttribute("data-index", index.toString()); 71 handle.innerHTML = "â®â®"; 72 element.appendChild(handle); 73 add_drag_listeners(handle); 74 add_drop_listeners(element); 75 } 76 77 function setup_drag_and_drop() { 78 if (!container_el) return; 79 80 items.forEach((item) => { 81 const handle = item.querySelector(".drag-handle"); 82 83 if (handle) { 84 remove_drag_listeners(handle); 85 handle.remove(); 86 } 87 88 remove_drop_listeners(item); 89 }); 90 91 items = []; 92 93 const children = Array.from(container_el.children); 94 let item_index = 0; 95 96 children.forEach((child) => { 97 if (child.classList.contains("status-tracker")) return; 98 99 if (child.classList.contains("form") && child.children.length > 0) { 100 const form_children = Array.from(child.children); 101 102 form_children.forEach((form_child) => { 103 items.push(form_child); 104 setup_draggable_item(form_child, item_index); 105 item_index++; 106 }); 107 } else { 108 items.push(child); 109 setup_draggable_item(child, item_index); 110 item_index++; 111 } 112 }); 113 } 114 115 function handle_drag_start(e) { 116 e.stopPropagation?.(); 117 118 const handle = e.currentTarget; 119 const element = handle.parentElement; 120 121 dragged_el = element; 122 parseInt(handle.dataset.index || "-1"); 123 handle.setAttribute("aria-grabbed", "true"); 124 element.classList.add("dragging"); 125 126 if (e.dataTransfer) { 127 e.dataTransfer.effectAllowed = "move"; 128 e.dataTransfer.setData("text/html", element.outerHTML); 129 e.dataTransfer.setDragImage(element, 10, 10); 130 } 131 } 132 133 function handle_drag_end(e) { 134 e.stopPropagation?.(); 135 136 const handle = e.currentTarget; 137 const element = handle.parentElement; 138 139 element.classList.remove("dragging"); 140 handle.setAttribute("aria-grabbed", "false"); 141 142 if (current_drop_target) { 143 current_drop_target.classList.remove("drop-target"); 144 current_drop_target = null; 145 } 146 147 dragged_el = null; 148 } 149 150 function handle_drag_over(e) { 151 e.preventDefault(); 152 e.dataTransfer && (e.dataTransfer.dropEffect = "move"); 153 154 return false;
155 } 156 157 function handle_drag_enter(e) { 158 e.stopPropagation?.(); 159 160 const target = e.currentTarget; 161 162 if (target === dragged_el) return; 163 if (!dragged_el || !container_el) return; 164 165 const dragged_parent = dragged_el.parentElement; 166 const target_parent = target.parentElement; 167 const is_dragged_in_form = dragged_parent?.classList.contains("form") && dragged_parent.parentElement === container_el; 168 const is_target_in_form = target_parent?.classList.contains("form") && target_parent.parentElement === container_el; 169 const is_dragged_direct = dragged_parent === container_el; 170 const is_target_direct = target_parent === container_el; 171 172 if (!((is_dragged_in_form || is_dragged_direct) && (is_target_in_form || is_target_direct))) { 173 return; 174 } 175 176 if (current_drop_target && current_drop_target !== target) { 177 current_drop_target.classList.remove("drop-target"); 178 } 179 180 target.classList.add("drop-target"); 181 current_drop_target = target; 182 } 183 184 async function handle_drop(e) { 185 e.stopPropagation?.(); 186 187 const target = e.currentTarget; 188 189 target.classList.remove("drop-target"); 190 191 if (current_drop_target) { 192 current_drop_target.classList.remove("drop-target"); 193 current_drop_target = null; 194 } 195 196 if (dragged_el && dragged_el !== target && container_el) { 197 const dragged_parent = dragged_el.parentElement; 198 const target_parent = target.parentElement; 199 const is_dragged_in_form = dragged_parent?.classList.contains("form") && dragged_parent.parentElement === container_el; 200 const is_target_in_form = target_parent?.classList.contains("form") && target_parent.parentElement === container_el; 201 const is_dragged_direct = dragged_parent === container_el; 202 const is_target_direct = target_parent === container_el; 203 204 if (!((is_dragged_in_form || is_dragged_direct) && (is_target_in_form || is_target_direct))) { 205 return false; 206 } 207 208 const placeholder = document.createElement("div"); 209 210 placeholder.style.display = "none"; 211 dragged_parent.insertBefore(placeholder, dragged_el); 212 target_parent.insertBefore(dragged_el, target); 213 dragged_parent.insertBefore(target, placeholder); 214 placeholder.remove(); 215 dragged_el?.classList.remove("dragging"); 216 217 const dragged_handle = dragged_el?.querySelector(".drag-handle"); 218 219 if (dragged_handle) { 220 dragged_handle.setAttribute("aria-grabbed", "false"); 221 } 222 223 await tick(); 224 setup_drag_and_drop(); 225 } 226 227 return false; 228 } 229 230 onMount(() => { 231 setup_drag_and_drop(); 232 233 const observer = new MutationObserver(setup_drag_and_drop); 234 235 if (container_el) { 236 observer.observe(container_el, { childList: true, subtree: false }); 237 } 238 239 return () => { 240 observer.disconnect(); 241 242 items.forEach((item) => { 243 const handle = item.querySelector(".drag-handle"); 244 245 if (handle) { 246 remove_drag_listeners(handle); 247 } 248 249 remove_drop_listeners(item); 250 }); 251 }; 252 }); 253 254 var div = root(); 255 let classes; 256 var node = child(div); 257 258 { 259 var consequent = ($$anchor) => { 260 { 261 let $0 = user_derived(() => gradio.shared.loading_status 262 ? gradio.shared.loading_status.status == "pending" ? "generating" : gradio.shared.loading_status.status 263 : null); 264 265 Static($$anchor, spread_props( 266 { 267 get autoscroll() { 268 return gradio.shared.autoscroll; 269 }, 270 271 get i18n() { 272 return gradio.i18n; 273 } 274 }, 275 () => gradio.shared.loading_status, 276 { 277 get status() { 278 return get($0); 279 } 280 } 281 )); 282 } 283 }; 284 285 if_block(node, ($$render) => { 286 if (gradio.shared.loading_status && gradio.props.show_progress) $$render(consequent); 287 }); 288 } 289 290 var node_1 = sibling(node, 2); 291 292 slot(node_1, $$props, 'default', {}, null); 293 reset(div); 294 bind_this(div, ($$value) => container_el = $$value, () => container_el); 295 296 template_effect( 297 ($0) => { 298 set_attribute(div, 'id', gradio.shared.elem_id); 299 300 classes = set_class(div, 1, `draggable ${$0 ?? ''}`, 'svelte-1kr8imm', classes, { 301 hide: !gradio.shared.visible, 302 horizontal: gradio.props.orientation === "row", 303 vertical: gradio.props.orientation === "column" 304 }); 305 }, 306 [() => (gradio.shared.elem_classes || []).join(' ')] 307 ); 308 309 append($$anchor, div); 310 pop(); 311} 312 313export { Index as default }; 314//# sourceMappingURL=Index-oRYO6L1a.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.