matterviz 0.3.1 → 0.3.3

package/dist/overlays/DraggablePane.svelte

@@ -1,110 +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(), has_been_dragged = $bindable(false), currently_dragging = $bindable(false), } = $props();
-let initial_position = $state({ left: `50px`, top: `50px` });
-let show_control_buttons = $state(false);
-function toggle_pane(event) {
-    event.stopPropagation();
-    show = !show;
-    if (!show)
-        onclose();
-}
-function close_pane() {
-    show = false;
-    onclose();
-}
-function reset_position() {
+<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)
+      resize_end_time = Date.now()
+      requestAnimationFrame(() => {
+        resizing = false
+      })
+    }
+    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: ``,
-            });
-        }
+      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`,
+    }
+  }
+
+  // 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))
+    const is_inside_pane = target instanceof Node && pane_div &&
+      (target === pane_div || pane_div.contains(target))
+
+    if (!is_toggle_button && !is_inside_pane && !currently_dragging && !resizing) {
+      close_pane()
     }
-    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
-function handle_click_outside(event) {
-    if (!show)
-        return;
-    const target = event.target;
-    const is_toggle_button = toggle_pane_btn &&
-        (target === toggle_pane_btn || toggle_pane_btn.contains(target));
-    const is_inside_pane = pane_div &&
-        (target === pane_div || pane_div.contains(target));
-    if (!is_toggle_button && !is_inside_pane && !currently_dragging)
-        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: ``,
-            });
-        }
+      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
@@ -149,16 +262,24 @@ $effect(() => {
     {...pane_props}
     class="draggable-pane {show ? `pane-open` : ``} {pane_props.class ?? ``}"
   >
-    <div class="control-buttons">
+    <div class="control-tab">
+      <Icon
+        icon="DragIndicator"
+        class="drag-handle"
+        style="width: 1em; height: 1em"
+      />
       {#if show_control_buttons}
         <button
           type="button"
           class="reset-button"
-          onclick={reset_position}
+          onclick={(event: MouseEvent) => {
+            event.stopPropagation()
+            reset_position()
+          }}
           title="Reset pane position"
           aria-label="Reset pane position"
         >
-          <Icon icon="Reset" style="width: 1.25em; height: 1.25em" />
+          <Icon icon="Reset" style="width: 1em; height: 1em" />
         </button>
         <button
           type="button"
@@ -167,21 +288,47 @@ $effect(() => {
           title="Close pane"
           aria-label="Close pane"
         >
-          <Icon icon="Cross" style="width: 1.25em; height: 1.25em" />
+          <Icon icon="Cross" style="width: 1em; height: 1em" />
         </button>
       {/if}
-      <Icon
-        icon="DragIndicator"
-        class="drag-handle"
-        style="width: 1.25em; height: 1.25em"
-      />
     </div>
-
-    {@render children?.({ show, show_control_buttons, has_been_dragged, currently_dragging })}
+    <div class="pane-content">
+      {@render children?.({
+        show,
+        show_control_buttons,
+        has_been_dragged,
+        currently_dragging,
+      })}
+    </div>
+    {#if resizable !== `none`}
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div
+        class="resize-grip"
+        class:resize-width={resizable === `width`}
+        class:resize-height={resizable === `height`}
+        onpointerdown={handle_resize_start}
+        ondblclick={() => {
+          if (pane_div) {
+            pane_div.style.width = ``
+            pane_div.style.maxHeight = ``
+          }
+        }}
+      >
+        <svg viewBox="0 0 10 10" width="10" height="10">
+          <line x1="9" y1="1" x2="1" y2="9" />
+          <line x1="9" y1="4" x2="4" y2="9" />
+          <line x1="9" y1="7" x2="7" y2="9" />
+        </svg>
+      </div>
+    {/if}
   </div>
 {/if}
 
 <style>
+  :global(.hover-visible:has(.draggable-pane.pane-open)) {
+    opacity: 1;
+    pointer-events: auto;
+  }
   button.pane-toggle {
     box-sizing: border-box;
     display: flex;
@@ -190,7 +337,7 @@ $effect(() => {
     border-radius: var(--pane-toggle-border-radius, var(--border-radius, 3pt));
     background-color: transparent;
     transition: var(--pane-toggle-transition, background-color 0.2s);
-    font-size: var(--pane-toggle-font-size, clamp(0.85em, 2cqmin, 1.3em));
+    font-size: var(--pane-toggle-font-size, 0.875rem);
   }
   button.pane-toggle:hover {
     background-color: color-mix(in srgb, currentColor 8%, transparent);
@@ -203,7 +350,6 @@ $effect(() => {
       1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.15))
     );
     border-radius: var(--pane-border-radius, var(--border-radius, 3pt));
-    padding: var(--pane-padding, 1ex);
     box-sizing: border-box;
     box-shadow: var(
       --pane-box-shadow,
@@ -214,18 +360,24 @@ $effect(() => {
     );
     z-index: var(--pane-z-index, 10);
     display: grid;
-    gap: var(--pane-gap, 4pt);
     text-align: left;
     /* Exclude position from being transitioned to prevent sluggish dragging */
     transition: opacity 0.3s, background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
     width: 28em;
     max-width: var(--pane-max-width, 80cqw);
-    overflow-x: var(--pane-overflow-x, hidden);
-    overflow-y: var(--pane-overflow-y, auto);
-    /* Height constraints: use viewport-based max-height as primary constraint */
+    overflow: visible; /* Allow control-tab to protrude above the pane border */
     min-height: var(--pane-min-height, auto);
     max-height: var(--pane-max-height, 80vh);
-    overscroll-behavior: contain; /* Prevent scroll chaining to parent containers (e.g. Jupyter cells) */
+  }
+  .draggable-pane .pane-content {
+    padding: var(--pane-padding, 1ex);
+    display: grid;
+    gap: var(--pane-gap, 4pt);
+    overflow-x: var(--pane-overflow-x, hidden);
+    overflow-y: var(--pane-overflow-y, auto);
+    max-height: inherit;
+    box-sizing: border-box;
+    overscroll-behavior: contain;
   }
   :global(body.fullscreen) .draggable-pane {
     position: fixed !important; /* In fullscreen, we want viewport-relative positioning */
@@ -247,15 +399,15 @@ $effect(() => {
     margin: var(--pane-hr-margin, 4pt 0);
     height: 1px;
   }
-  .draggable-pane :global(> section > div) {
+  .draggable-pane :global(section > div) {
     text-align: right; /* right align long line-breaking trajectory file names */
   }
-  .draggable-pane :global(label) {
+  .draggable-pane :global(:where(label)) {
     display: inline-flex;
     align-items: center;
     gap: var(--pane-label-gap, 2pt);
   }
-  .draggable-pane :global(input[type='text']) {
+  .draggable-pane :global(:where(input[type='text'])) {
     flex: 1;
     padding: var(--pane-input-padding, 4px 6px);
     margin: var(--pane-input-margin, 0 0 0 5pt);
@@ -290,17 +442,20 @@ $effect(() => {
   .draggable-pane :global(input::-webkit-inner-spin-button) {
     display: none;
   }
-  .draggable-pane :global(button) {
-    width: max-content;
+  .draggable-pane :global(:where(button)) {
     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 :global(button:hover) {
+  .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) {
@@ -329,59 +484,81 @@ $effect(() => {
   .draggable-pane :global(label:has(input[type='range'])) {
     flex: 1;
   }
-  .draggable-pane .control-buttons {
+  .draggable-pane .control-tab {
+    position: absolute;
+    top: 6px;
+    right: -1px;
+    transform: translateX(100%);
     display: flex;
-    justify-content: end;
+    flex-direction: column;
     align-items: center;
-    position: sticky;
-    top: 0;
-    right: 0;
-    height: 0;
-    /* Cancel the 12 pt top/bottom padding without relying on width-based percentages */
-    gap: 5px;
-    padding: 12pt 3pt;
-    margin-bottom: calc(-2 * 12pt);
-    box-sizing: border-box;
-    justify-self: end;
-    z-index: var(--pane-control-buttons-z-index, 1);
+    gap: 1px;
+    padding: 3px 2px;
+    background: var(--pane-bg, var(--page-bg, light-dark(white, black)));
+    border: var(
+      --pane-border,
+      1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.15))
+    );
+    border-left: none;
+    border-radius: 0 5px 5px 0;
+    z-index: var(--pane-control-tab-z-index, var(--pane-control-buttons-z-index, 1));
   }
   .draggable-pane :global(.drag-handle) {
-    width: 1.3em;
-    height: 1.3em;
+    width: 1.1em;
+    height: 1.1em;
     cursor: grab;
     border-radius: 3px;
-    padding: 2px;
+    padding: 1px;
     box-sizing: border-box;
-    opacity: 0.6;
-    background-color: color-mix(in srgb, currentColor 10%, transparent);
-    pointer-events: auto; /* Re-enable pointer events for drag handle */
+    opacity: 0.5;
+    pointer-events: auto;
   }
   .draggable-pane :global(.drag-handle:hover) {
     opacity: 0.8;
-    background-color: color-mix(in srgb, currentColor 20%, transparent);
+    background-color: color-mix(in srgb, currentColor 15%, transparent);
   }
-  /* Ensure drag handle cursor changes properly */
   .draggable-pane :global(.drag-handle:active) {
     cursor: grabbing;
   }
-  /* Reset and close button styling */
   .draggable-pane :where(.reset-button, .close-button) {
     background: none;
     border: none;
-    padding: 2px;
+    padding: 1px;
     border-radius: 3px;
     box-sizing: border-box;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: all 0.2s ease;
-    width: 1.3em;
-    height: 1.3em;
-    opacity: 0.6;
-    background-color: color-mix(in srgb, currentColor 10%, transparent);
+    width: 1.1em;
+    height: 1.1em;
+    opacity: 0.5;
   }
   .draggable-pane :where(.reset-button:hover, .close-button:hover) {
     opacity: 0.8;
-    background-color: color-mix(in srgb, currentColor 20%, transparent);
+    background-color: color-mix(in srgb, currentColor 15%, transparent);
+  }
+  .draggable-pane .resize-grip {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    padding: 2px;
+    cursor: nwse-resize;
+    opacity: 0.3;
+    touch-action: none;
+    line-height: 0;
+    svg {
+      stroke: currentColor;
+      stroke-width: 1.5;
+      stroke-linecap: round;
+    }
+  }
+  .draggable-pane .resize-grip:hover {
+    opacity: 0.6;
+  }
+  .draggable-pane .resize-grip.resize-width {
+    cursor: ew-resize;
+  }
+  .draggable-pane .resize-grip.resize-height {
+    cursor: ns-resize;
   }
 </style>

package/dist/overlays/DraggablePane.svelte.d.ts

@@ -22,6 +22,8 @@ type $$ComponentProps = {
     };
     max_width?: string;
     pane_props?: HTMLAttributes<HTMLDivElement>;
+    persistent?: boolean;
+    resizable?: `both` | `width` | `height` | `none`;
     onclose?: () => void;
     on_drag_start?: () => void;
     toggle_pane_btn?: HTMLButtonElement;