matterviz 0.3.2 → 0.3.3

package/dist/overlays/DraggablePane.svelte

@@ -1,154 +1,223 @@
-<script lang="ts">import Icon from '../Icon.svelte';
-import { draggable, tooltip } from 'svelte-multiselect/attachments';
-let { show = $bindable(false), show_pane = true, children, toggle_props = {}, open_icon = `Cross`, closed_icon = `Settings`, icon_style = ``, offset = { x: 5, y: 5 }, max_width = `450px`, pane_props = {}, onclose = () => { }, on_drag_start = () => { }, toggle_pane_btn = $bindable(), pane_div = $bindable(), persistent = false, has_been_dragged = $bindable(false), currently_dragging = $bindable(false), resizable = `none`, } = $props();
-let initial_position = $state({ left: `50px`, top: `50px` });
-let show_control_buttons = $state(false);
-let resizing = $state(false);
-// Resize via bottom-right grip
-function handle_resize_start(event) {
-    if (resizable === `none` || !pane_div)
-        return;
-    event.preventDefault();
-    event.stopPropagation();
-    resizing = true;
-    has_been_dragged = true;
-    show_control_buttons = true;
-    const start_x = event.clientX;
-    const start_y = event.clientY;
-    const start_w = pane_div.offsetWidth;
-    const start_h = pane_div.offsetHeight;
-    function on_move(evt) {
-        if (!pane_div)
-            return;
-        if (resizable !== `height`) {
-            pane_div.style.width = `${Math.max(200, start_w + evt.clientX - start_x)}px`;
-        }
-        if (resizable !== `width`) {
-            pane_div.style.maxHeight = `${Math.max(100, start_h + evt.clientY - start_y)}px`;
-        }
+<script lang="ts">
+  import Icon from '../Icon.svelte'
+  import type { IconName } from '../icons'
+  import type { Snippet } from 'svelte'
+  import { draggable, tooltip } from 'svelte-multiselect/attachments'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let {
+    show = $bindable(false),
+    show_pane = true,
+    children,
+    toggle_props = {},
+    open_icon = `Cross`,
+    closed_icon = `Settings`,
+    icon_style = ``,
+    offset = { x: 5, y: 5 },
+    max_width = `450px`,
+    pane_props = {},
+    onclose = () => {},
+    on_drag_start = () => {},
+    toggle_pane_btn = $bindable(),
+    pane_div = $bindable(),
+    persistent = false,
+    has_been_dragged = $bindable(false),
+    currently_dragging = $bindable(false),
+    resizable = `none`,
+  }: {
+    show?: boolean
+    show_pane?: boolean
+    children: Snippet<
+      [{
+        show: boolean
+        show_control_buttons: boolean
+        has_been_dragged: boolean
+        currently_dragging: boolean
+      }]
+    >
+    // Toggle button
+    toggle_props?: HTMLAttributes<HTMLButtonElement>
+    open_icon?: IconName
+    closed_icon?: IconName
+    icon_style?: string
+    // Pane positioning and styling
+    offset?: { x?: number; y?: number }
+    max_width?: string
+    pane_props?: HTMLAttributes<HTMLDivElement>
+    // If true, only closes via Escape or explicit close button (not click-outside)
+    persistent?: boolean
+    // Resize mode: 'both' | 'width' | 'height' | 'none'
+    resizable?: `both` | `width` | `height` | `none`
+    // Callbacks
+    onclose?: () => void
+    on_drag_start?: () => void
+    // Bindable state
+    toggle_pane_btn?: HTMLButtonElement
+    pane_div?: HTMLDivElement
+    has_been_dragged?: boolean
+    currently_dragging?: boolean
+  } = $props()
+
+  let initial_position = $state({ left: `50px`, top: `50px` })
+  let show_control_buttons = $state(false)
+  let resizing = $state(false)
+  let resize_end_time = 0
+
+  // Resize via bottom-right grip
+  function handle_resize_start(event: PointerEvent) {
+    if (resizable === `none` || !pane_div) return
+    event.preventDefault()
+    event.stopPropagation()
+    resizing = true
+    has_been_dragged = true
+    show_control_buttons = true
+    const start_x = event.clientX
+    const start_y = event.clientY
+    const start_w = pane_div.offsetWidth
+    const start_h = pane_div.offsetHeight
+
+    function on_move(evt: PointerEvent) {
+      if (!pane_div) return
+      if (resizable !== `height`) {
+        pane_div.style.width = `${Math.max(200, start_w + evt.clientX - start_x)}px`
+      }
+      if (resizable !== `width`) {
+        pane_div.style.maxHeight = `${
+          Math.max(100, start_h + evt.clientY - start_y)
+        }px`
+      }
     }
     function on_up() {
-        document.removeEventListener(`pointermove`, on_move);
-        document.removeEventListener(`pointerup`, on_up);
-        // Swallow the click that fires after pointerup to prevent the
-        // click-outside handler from closing the pane. Use
-        // stopImmediatePropagation so same-element bubble listeners
-        // (like Svelte's document onclick) are also blocked.
-        document.addEventListener(`click`, (evt) => evt.stopImmediatePropagation(), { capture: true, once: true });
-        // Delay clearing the resizing flag so any late-arriving click events
-        // are still suppressed by the handle_click_outside guard
-        setTimeout(() => {
-            resizing = false;
-        }, 150);
+      document.removeEventListener(`pointermove`, on_move)
+      document.removeEventListener(`pointerup`, on_up)
+      resize_end_time = Date.now()
+      requestAnimationFrame(() => {
+        resizing = false
+      })
     }
-    document.addEventListener(`pointermove`, on_move);
-    document.addEventListener(`pointerup`, on_up);
-}
-function toggle_pane(event) {
-    event.stopPropagation();
-    show = !show;
-    if (!show)
-        onclose();
-}
-function close_pane() {
-    show = false;
-    onclose();
-}
-function reset_position() {
+    document.addEventListener(`pointermove`, on_move)
+    document.addEventListener(`pointerup`, on_up)
+  }
+
+  function toggle_pane(event: MouseEvent) {
+    event.stopPropagation()
+    show = !show
+    if (!show) onclose()
+  }
+
+  function close_pane() {
+    show = false
+    onclose()
+  }
+
+  function reset_position() {
     if (toggle_pane_btn) {
-        const pos = calculate_position();
-        initial_position = pos;
-        if (pane_div) {
-            Object.assign(pane_div.style, {
-                left: pos.left,
-                top: pos.top,
-                right: `auto`,
-                bottom: `auto`,
-                width: ``,
-                maxHeight: ``,
-            });
-        }
+      const pos = calculate_position()
+      initial_position = pos
+      if (pane_div) {
+        Object.assign(pane_div.style, {
+          left: pos.left,
+          top: pos.top,
+          right: `auto`,
+          bottom: `auto`,
+          width: ``,
+          maxHeight: ``,
+        })
+      }
     }
     // Hide the control buttons after reset
-    show_control_buttons = false;
-    has_been_dragged = false;
-}
-// Drag handlers
-function handle_drag_start() {
-    has_been_dragged = true;
-    show_control_buttons = true;
-    currently_dragging = true;
-    on_drag_start();
-}
-// Position calculation
-function calculate_position() {
-    if (!toggle_pane_btn)
-        return { left: `50px`, top: `50px` };
-    const toggle_rect = toggle_pane_btn.getBoundingClientRect();
-    const pane_width = pane_div?.getBoundingClientRect().width || 450;
-    const positioned_ancestor = toggle_pane_btn.offsetParent;
-    const ancestor_rect = positioned_ancestor?.getBoundingClientRect();
+    show_control_buttons = false
+    has_been_dragged = false
+  }
+
+  // Drag handlers
+  function handle_drag_start() {
+    has_been_dragged = true
+    show_control_buttons = true
+    currently_dragging = true
+    on_drag_start()
+  }
+
+  // Position calculation
+  function calculate_position() {
+    if (!toggle_pane_btn) return { left: `50px`, top: `50px` }
+
+    const toggle_rect = toggle_pane_btn.getBoundingClientRect()
+    const pane_width = pane_div?.getBoundingClientRect().width || 450
+    const ox = offset.x ?? 5
+    const oy = offset.y ?? 5
+    const positioned_ancestor = toggle_pane_btn.offsetParent
+    const ancestor_rect = positioned_ancestor?.getBoundingClientRect()
+
     if (!ancestor_rect) { // Fallback to document positioning
-        const scroll_x = window.scrollX || document.documentElement.scrollLeft;
-        const scroll_y = window.scrollY || document.documentElement.scrollTop;
-        return {
-            left: `${toggle_rect.right - pane_width + (offset.x ?? 5) + scroll_x}px`,
-            top: `${toggle_rect.bottom + (offset.y ?? 5) + scroll_y}px`,
-        };
+      const scroll_x = window.scrollX || document.documentElement.scrollLeft
+      const scroll_y = window.scrollY || document.documentElement.scrollTop
+      return {
+        left: `${toggle_rect.right - pane_width + ox + scroll_x}px`,
+        top: `${toggle_rect.bottom + oy + scroll_y}px`,
+      }
+    }
+
+    return {
+      left: `${toggle_rect.right - ancestor_rect.left - pane_width + ox}px`,
+      top: `${toggle_rect.bottom - ancestor_rect.top + oy}px`,
     }
-    const left = `${toggle_rect.right - ancestor_rect.left - pane_width + (offset.x ?? 5)}px`;
-    const top = `${toggle_rect.bottom - ancestor_rect.top + (offset.y ?? 5)}px`;
-    return { left, top }; // Position relative to positioned ancestor
-}
-// Click outside handler (skipped when persistent)
-function handle_click_outside(event) {
-    if (!show || persistent)
-        return;
-    const target = event.target;
+  }
+
+  // Click outside handler (skipped when persistent)
+  function handle_click_outside(event: MouseEvent) {
+    if (!show || persistent) return
+    // Ignore click events fired shortly after a resize/drag operation ends
+    // (Playwright and some browsers synthesize a click after pointer up)
+    if (Date.now() - resize_end_time < 200) return
+
+    const target = event.target
     const is_toggle_button = target instanceof Node && toggle_pane_btn &&
-        (target === toggle_pane_btn || toggle_pane_btn.contains(target));
+      (target === toggle_pane_btn || toggle_pane_btn.contains(target))
     const is_inside_pane = target instanceof Node && pane_div &&
-        (target === pane_div || pane_div.contains(target));
+      (target === pane_div || pane_div.contains(target))
+
     if (!is_toggle_button && !is_inside_pane && !currently_dragging && !resizing) {
-        close_pane();
+      close_pane()
     }
-}
-// Debounced resize handler for better performance
-let resize_timeout = $state(undefined);
-function handle_resize() {
-    if (!show || has_been_dragged || currently_dragging)
-        return;
-    if (resize_timeout)
-        clearTimeout(resize_timeout);
+  }
+
+  // Debounced resize handler for better performance
+  let resize_timeout: ReturnType<typeof setTimeout> | undefined = $state(undefined)
+
+  function handle_resize() { // Only reposition if pane is visible and hasn't been manually dragged
+    if (!show || has_been_dragged || currently_dragging) return
+
+    if (resize_timeout) clearTimeout(resize_timeout)
     const current_timeout = setTimeout(() => {
-        if (resize_timeout !== current_timeout)
-            return;
-        if (show && toggle_pane_btn && !has_been_dragged && pane_div) {
-            const pos = calculate_position();
-            initial_position = pos;
-            pane_div.style.left = pos.left;
-            pane_div.style.top = pos.top;
-        }
-    }, 50); // Debounce resize events
-    resize_timeout = current_timeout;
-}
-// Position pane when shown
-$effect(() => {
+      if (resize_timeout !== current_timeout) return
+      if (show && toggle_pane_btn && !has_been_dragged && pane_div) {
+        const pos = calculate_position()
+        initial_position = pos
+        pane_div.style.left = pos.left
+        pane_div.style.top = pos.top
+      }
+    }, 50) // Debounce resize events
+    resize_timeout = current_timeout
+  }
+
+  // Position pane when shown
+  $effect(() => {
     if (show && toggle_pane_btn && !has_been_dragged) {
-        const pos = calculate_position();
-        initial_position = pos;
-        if (pane_div) {
-            Object.assign(pane_div.style, {
-                left: pos.left,
-                top: pos.top,
-                right: `auto`,
-                bottom: `auto`,
-                width: ``,
-                maxHeight: ``,
-            });
-        }
+      const pos = calculate_position()
+      initial_position = pos
+      if (pane_div) {
+        Object.assign(pane_div.style, {
+          left: pos.left,
+          top: pos.top,
+          right: `auto`,
+          bottom: `auto`,
+          width: ``,
+          maxHeight: ``,
+        })
+      }
     }
-});
+  })
 </script>
 
 <svelte:window
@@ -374,16 +443,19 @@ $effect(() => {
     display: none;
   }
   .draggable-pane :global(:where(button)) {
-    width: max-content;
     background-color: var(
       --pane-btn-bg,
-      var(--btn-bg, light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1)))
+      var(--btn-bg, light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.1)))
     );
   }
+  .draggable-pane .pane-content :global(:where(button)) {
+    font-size: 1em;
+    padding: var(--pane-btn-padding, 3px 6px);
+  }
   .draggable-pane :global(:where(button:hover)) {
     background-color: var(
       --pane-btn-bg-hover,
-      var(--btn-bg-hover, light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.2)))
+      var(--btn-bg-hover, light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.2)))
     );
   }
   .draggable-pane :global(select) {