@tableslayer/ui 0.1.3 → 0.1.4

package/src/lib/components/MarkerTooltip/MarkerTooltip.svelte

@@ -0,0 +1,435 @@
+<script lang="ts">
+  import { MarkerVisibility } from '../Stage/components/MarkerLayer/types';
+  import { computePosition, flip, shift, offset, autoUpdate } from '@floating-ui/dom';
+  import { Editor } from '../Editor';
+  import { onMount, onDestroy } from 'svelte';
+  import { IconPin, IconPinFilled } from '@tabler/icons-svelte';
+
+  interface MarkerData {
+    id: string;
+    title?: string;
+    note?: unknown;
+    visibility?: MarkerVisibility;
+    size?: number;
+    tooltip?: {
+      title?: string;
+      content?: unknown;
+    };
+  }
+
+  interface Props {
+    marker: MarkerData | null;
+    position: { x: number; y: number } | null;
+    containerElement: HTMLElement | null;
+    markerDiameter?: number;
+    onTooltipHover?: (isHovering: boolean) => void;
+    isDM?: boolean;
+    isPinned?: boolean;
+    onPinToggle?: (markerId: string, pinned: boolean) => void;
+    existingTooltips?: Array<{ element: HTMLElement; bounds: DOMRect }>;
+    preferredPlacement?: 'top' | 'bottom' | 'left' | 'right';
+    onTooltipMount?: (element: HTMLElement, bounds: DOMRect) => void;
+    onTooltipUnmount?: (element: HTMLElement) => void;
+  }
+
+  let {
+    marker,
+    position,
+    containerElement,
+    markerDiameter = 40,
+    onTooltipHover,
+    isDM = false,
+    isPinned = false,
+    onPinToggle,
+    existingTooltips = [],
+    preferredPlacement = 'top',
+    onTooltipMount,
+    onTooltipUnmount
+  }: Props = $props();
+
+  let tooltipElement = $state<HTMLDivElement>();
+  let portalContainer: HTMLDivElement | undefined = $state();
+  let cleanup: (() => void) | null = null;
+  let currentPlacement = $state<'top' | 'bottom' | 'left' | 'right'>('top');
+
+  function handleTooltipMouseEnter() {
+    if (onTooltipHover) {
+      onTooltipHover(true);
+    }
+  }
+
+  function handleTooltipMouseLeave() {
+    if (onTooltipHover) {
+      onTooltipHover(false);
+    }
+  }
+
+  const getMarkerContent = (marker: MarkerData | null) => {
+    if (!marker) return null;
+
+    if (marker.note) {
+      return marker.note;
+    }
+
+    if (marker.tooltip?.content) {
+      if (typeof marker.tooltip.content === 'string') {
+        try {
+          return JSON.parse(marker.tooltip.content);
+        } catch {
+          return marker.tooltip.content;
+        }
+      }
+      return marker.tooltip.content;
+    }
+
+    return null;
+  };
+
+  const getMarkerTitle = (marker: MarkerData | null) => {
+    if (!marker) return null;
+
+    if (marker.title) {
+      return marker.title;
+    }
+
+    if (marker.tooltip?.title) {
+      return marker.tooltip.title;
+    }
+
+    return null;
+  };
+
+  let markerContent = $derived(getMarkerContent(marker));
+  let markerTitle = $derived(getMarkerTitle(marker));
+
+  function getEstimatedBounds(
+    virtualEl: {
+      getBoundingClientRect: () => {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+      };
+    },
+    element: HTMLElement,
+    placement: string,
+    offset: number
+  ) {
+    const rect = virtualEl.getBoundingClientRect();
+    const width = element.offsetWidth || 200;
+    const height = element.offsetHeight || 100;
+
+    let x = rect.left;
+    let y = rect.top;
+
+    switch (placement) {
+      case 'top':
+        x -= width / 2;
+        y -= height + offset;
+        break;
+      case 'bottom':
+        x -= width / 2;
+        y += offset;
+        break;
+      case 'left':
+        x -= width + offset;
+        y -= height / 2;
+        break;
+      case 'right':
+        x += offset;
+        y -= height / 2;
+        break;
+    }
+
+    return { x, y, width, height, left: x, top: y, right: x + width, bottom: y + height };
+  }
+
+  function calculateOverlap(
+    rect1: DOMRect | { left: number; right: number; top: number; bottom: number },
+    rect2: DOMRect | { left: number; right: number; top: number; bottom: number }
+  ) {
+    const xOverlap = Math.max(0, Math.min(rect1.right, rect2.right) - Math.max(rect1.left, rect2.left));
+    const yOverlap = Math.max(0, Math.min(rect1.bottom, rect2.bottom) - Math.max(rect1.top, rect2.top));
+    return xOverlap * yOverlap;
+  }
+
+  function calculateTotalOverlap(
+    testBounds: DOMRect | { left: number; right: number; top: number; bottom: number },
+    existingTooltips: Array<{ bounds: DOMRect }>
+  ) {
+    return existingTooltips.reduce((total, tooltip) => {
+      return total + calculateOverlap(testBounds, tooltip.bounds);
+    }, 0);
+  }
+
+  function createPortalContainer() {
+    const existingContainer = document.getElementById('markerTooltipPortal');
+    if (existingContainer) {
+      portalContainer = existingContainer as HTMLDivElement;
+      return;
+    }
+
+    const container = document.createElement('div');
+    container.id = 'markerTooltipPortal';
+    container.style.position = 'absolute';
+    container.style.top = '0';
+    container.style.left = '0';
+    container.style.width = '0';
+    container.style.height = '0';
+    container.style.pointerEvents = 'none';
+    container.style.zIndex = '1';
+    document.body.appendChild(container);
+    portalContainer = container;
+  }
+
+  onMount(() => {
+    createPortalContainer();
+  });
+
+  onDestroy(() => {
+    if (cleanup) {
+      cleanup();
+      cleanup = null;
+    }
+
+    if (onTooltipUnmount && tooltipElement) {
+      onTooltipUnmount(tooltipElement);
+    }
+
+    if (tooltipElement && portalContainer && portalContainer.contains(tooltipElement)) {
+      portalContainer.removeChild(tooltipElement);
+    }
+
+    if (portalContainer && portalContainer.childNodes.length === 0) {
+      if (document.body.contains(portalContainer)) {
+        document.body.removeChild(portalContainer);
+      }
+    }
+  });
+
+  $effect(() => {
+    if (tooltipElement && position && containerElement && portalContainer) {
+      if (!portalContainer.contains(tooltipElement)) {
+        portalContainer.appendChild(tooltipElement);
+      }
+
+      if (cleanup) {
+        cleanup();
+        cleanup = null;
+      }
+
+      const virtualEl = {
+        getBoundingClientRect() {
+          const rect = containerElement.getBoundingClientRect();
+          const viewportX = rect.left + position.x;
+          const viewportY = rect.top + position.y;
+
+          return {
+            width: 0,
+            height: 0,
+            x: viewportX,
+            y: viewportY,
+            top: viewportY,
+            left: viewportX,
+            right: viewportX,
+            bottom: viewportY
+          };
+        }
+      };
+
+      cleanup = autoUpdate(virtualEl, tooltipElement!, async () => {
+        const markerRadius = markerDiameter / 2;
+        const arrowSize = 8;
+        const dynamicOffset = markerRadius + arrowSize;
+
+        let bestPlacement = preferredPlacement;
+
+        if (existingTooltips.length > 0 && tooltipElement && tooltipElement.offsetWidth > 0) {
+          const placements: ('top' | 'bottom' | 'left' | 'right')[] = ['top', 'bottom', 'left', 'right'];
+          let minOverlap = Infinity;
+
+          for (const placement of placements) {
+            const testBounds = getEstimatedBounds(virtualEl, tooltipElement!, placement, dynamicOffset);
+            const overlap = calculateTotalOverlap(testBounds, existingTooltips);
+            if (overlap < minOverlap) {
+              minOverlap = overlap;
+              bestPlacement = placement;
+            }
+          }
+        }
+
+        const fallbackOptions: ('top' | 'bottom' | 'left' | 'right')[] = ['bottom', 'left', 'right', 'top'];
+        const middleware = [
+          offset(dynamicOffset),
+          flip({
+            fallbackPlacements: fallbackOptions.filter((p) => p !== bestPlacement)
+          }),
+          shift({ padding: 10 })
+        ];
+
+        const { x, y, placement } = await computePosition(virtualEl, tooltipElement!, {
+          placement: bestPlacement,
+          middleware,
+          strategy: 'fixed'
+        });
+
+        currentPlacement = placement.split('-')[0] as 'top' | 'bottom' | 'left' | 'right';
+
+        Object.assign(tooltipElement!.style, {
+          position: 'fixed',
+          left: `${x}px`,
+          top: `${y}px`,
+          pointerEvents: 'auto'
+        });
+
+        if (onTooltipMount && tooltipElement) {
+          setTimeout(() => {
+            if (tooltipElement) {
+              const bounds = tooltipElement.getBoundingClientRect();
+              onTooltipMount(tooltipElement, bounds);
+            }
+          }, 100);
+        }
+      });
+
+      tooltipElement.style.display = 'block';
+    } else if (tooltipElement) {
+      tooltipElement.style.display = 'none';
+    }
+
+    return () => {
+      if (cleanup) {
+        cleanup();
+        cleanup = null;
+      }
+    };
+  });
+</script>
+
+{#if (markerContent || markerTitle) && position}
+  <div
+    bind:this={tooltipElement}
+    class="markerTooltip"
+    style="display: none;"
+    role="tooltip"
+    data-placement={currentPlacement}
+    onmouseenter={handleTooltipMouseEnter}
+    onmouseleave={handleTooltipMouseLeave}
+  >
+    <div class="markerTooltip__arrow markerTooltip__arrow--{currentPlacement}"></div>
+    {#if isDM && onPinToggle && marker && marker.visibility !== MarkerVisibility.DM}
+      <button
+        class="markerTooltip__pin"
+        onclick={() => onPinToggle(marker.id, !isPinned)}
+        title={isPinned ? 'Unpin from player view' : 'Pin to player view'}
+      >
+        {#if isPinned}
+          <IconPinFilled size={16} />
+        {:else}
+          <IconPin size={16} />
+        {/if}
+      </button>
+    {/if}
+    {#if markerTitle}
+      <div class="markerTooltip__title {isDM ? 'markerTooltip__title--dm' : ''}">{markerTitle}</div>
+    {/if}
+    {#if markerContent}
+      <Editor content={markerContent} editable={false} />
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .markerTooltip {
+    max-width: 400px;
+    background-color: var(--bg);
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--border);
+    border-radius: 0.25rem;
+    box-shadow: var(--shadow-3);
+    position: relative;
+  }
+
+  .markerTooltip__pin {
+    position: absolute;
+    top: 0.25rem;
+    right: 0.25rem;
+    background: transparent;
+    border: none;
+    color: var(--fgMuted);
+    cursor: pointer;
+    padding: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius);
+    transition:
+      color 0.2s,
+      background 0.2s;
+  }
+
+  .markerTooltip__pin:hover {
+    color: var(--fgPrimary);
+    background: var(--bgHover);
+  }
+
+  .markerTooltip__title {
+    font-weight: 600;
+    font-size: 1rem;
+    margin-bottom: 0.5rem;
+    color: var(--fg);
+  }
+  .markerTooltip__title--dm {
+    padding-right: 2rem;
+  }
+
+  .markerTooltip__title:last-child {
+    margin-bottom: 0;
+  }
+
+  /* Arrow indicator */
+  .markerTooltip__arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    pointer-events: none;
+  }
+
+  /* Arrow modifiers for different placements */
+  .markerTooltip__arrow--top {
+    bottom: -8px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 8px 8px 0 8px;
+    border-color: var(--bg) transparent transparent transparent;
+  }
+
+  .markerTooltip__arrow--bottom {
+    top: -8px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 0 8px 8px 8px;
+    border-color: transparent transparent var(--bg) transparent;
+  }
+
+  .markerTooltip__arrow--left {
+    right: -8px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: 8px 0 8px 8px;
+    border-color: transparent transparent transparent var(--bg);
+  }
+
+  .markerTooltip__arrow--right {
+    left: -8px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: 8px 8px 8px 0;
+    border-color: transparent var(--bg) transparent transparent;
+  }
+</style>

package/src/lib/components/MarkerTooltip/index.ts

@@ -0,0 +1 @@
+export { default as MarkerTooltip } from './MarkerTooltip.svelte';

package/src/lib/components/Menu/SelectorMenu.svelte

@@ -0,0 +1,280 @@
+<script lang="ts">
+  import { computePosition, offset, flip, shift, platform } from '@floating-ui/dom';
+  import { tick, type Snippet } from 'svelte';
+  import { type SelectorMenuProps } from './types';
+  import { IconButton } from '../Button';
+  import { Icon } from '../Icon';
+  import { IconSelector } from '@tabler/icons-svelte';
+  import { type SelectOption } from '../Select';
+  let {
+    trigger,
+    options,
+    selected = $bindable(),
+    disabled = false,
+    variant = 'default',
+    positioning = { placement: 'bottom-start', offset: 8 },
+    onSelectedChange,
+    footer,
+    ...restProps
+  }: SelectorMenuProps = $props();
+
+  let button: HTMLElement | null = null;
+  let menu = $state<HTMLElement | null>(null);
+  let isOpen = $state(false);
+  let activeIndex = $state<number | null>(null);
+  let floatingStyles = $state('');
+
+  function updatePosition() {
+    if (!button || !menu) {
+      return;
+    }
+
+    computePosition(button, menu, {
+      placement: positioning.placement,
+      middleware: [offset(positioning.offset), flip(), shift()],
+      platform
+    })
+      .then(({ x, y, strategy }) => {
+        floatingStyles = `left: ${x}px; top: ${y}px; position: ${strategy};`;
+      })
+      .catch((error) => {
+        console.error('Error in computePosition:', error);
+      });
+  }
+
+  async function toggleMenu() {
+    if (disabled) return;
+
+    isOpen = !isOpen;
+    if (isOpen) {
+      if (options.length > 0) {
+        activeIndex = 0;
+      }
+
+      await tick();
+      updatePosition();
+    }
+  }
+
+  const handleGlobalClick = (e: MouseEvent) => {
+    if (isOpen && menu && button) {
+      const target = e.target as Node;
+      if (!menu.contains(target) && !button.contains(target)) {
+        closeMenu();
+      }
+    }
+  };
+
+  function closeMenu() {
+    isOpen = false;
+    activeIndex = null;
+  }
+
+  function handleSelection(value: string) {
+    selected = value;
+    closeMenu();
+    if (onSelectedChange) {
+      onSelectedChange(selected);
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (!isOpen) return;
+    const currentIndex = activeIndex ?? -1;
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        activeIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0;
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        activeIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1;
+        break;
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        if (activeIndex !== null) {
+          handleSelection(options[activeIndex].value);
+        }
+        break;
+      case 'Escape':
+        closeMenu();
+        break;
+    }
+  }
+
+  function isSelected(value: string) {
+    return selected === value;
+  }
+
+  function isSnippet(value: string | Snippet): value is Snippet {
+    return typeof value === 'function';
+  }
+
+  function getOptionIndex(option: SelectOption): number {
+    return options.findIndex((o) => o.value === option.value);
+  }
+
+  const footerProps = {
+    close: closeMenu
+  };
+</script>
+
+<svelte:window onclick={handleGlobalClick} />
+
+<div class={['selectorMenu', `selectorMenu--${variant}`, restProps.class]}>
+  <button
+    bind:this={button}
+    onclick={toggleMenu}
+    onkeydown={handleKeydown}
+    data-testid="menuButton"
+    aria-haspopup="listbox"
+    aria-expanded={isOpen}
+    aria-disabled={disabled}
+    {...restProps}
+  >
+    {#if trigger}
+      {@render trigger()}
+    {:else}
+      <IconButton as="div" variant="ghost">
+        <Icon Icon={IconSelector} />
+      </IconButton>
+    {/if}
+  </button>
+  {#if isOpen}
+    <div bind:this={menu} class="selectorMenu__popover" style={floatingStyles}>
+      <ul role="listbox" class="selectorMenu__optionList">
+        {#each options as option (option.value)}
+          <li
+            class={[
+              'selectorMenu__option',
+              isSelected(option.value) && 'selectorMenu__option--isSelected',
+              getOptionIndex(option) === activeIndex && ' selectorMenu__option--isActive'
+            ]}
+            tabindex="0"
+            onclick={() => handleSelection(option.value)}
+            onkeydown={handleKeydown}
+            role="option"
+            data-testid="menuItem"
+            aria-selected={isSelected(option.value)}
+          >
+            <div class="selectorMenu__start">
+              <div class="selectorMenu__space">
+                {#if isSelected(option.value)}
+                  <div class="selectorMenu__dot"></div>
+                {/if}
+              </div>
+              {#if option.icon}
+                <Icon Icon={option.icon} size="1.25rem" />
+              {/if}
+              {#if isSnippet(option.label)}
+                {@render option.label()}
+              {:else}
+                {option.label}
+              {/if}
+            </div>
+            {#if option.key}
+              <div class="selectorMenu__end">
+                <div class="selectorMenu__key">{option.key}</div>
+              </div>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+      {#if footer}
+        <div class="selectorMenu__footer">
+          {@render footer({ footerProps })}
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .selectorMenu {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+  }
+  .selectorMenu--transparent .select__button {
+    border-color: transparent;
+    background: transparent;
+    &:hover {
+      border-color: var(--inputBorderColor);
+    }
+  }
+
+  .selectorMenu__popover {
+    position: absolute;
+    background: var(--popoverBg);
+    border: var(--borderThin);
+    border-radius: var(--radius-2);
+    box-shadow: var(--shadow-1);
+    white-space: nowrap;
+    z-index: 1000;
+    padding: 0.25rem;
+    list-style: none;
+  }
+  .selectorMenu__optionList {
+    max-height: 300px;
+    overflow-y: auto;
+  }
+
+  .selectorMenu__option {
+    width: 100%;
+    padding: 0.25rem 1rem;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.875rem;
+    gap: 3rem;
+    border: solid 2px transparent;
+    text-indent: -0.5rem;
+    line-height: 1.2rem;
+  }
+
+  .selectorMenu__option:hover,
+  .selectorMenu__option:focus {
+    background-color: var(--menuItemHover);
+    border: var(--menuItemBorderHover);
+    outline: none;
+  }
+  .selectorMenu__option--isActive {
+    background-color: var(--menuItemHover);
+  }
+
+  .selectorMenu__icon {
+    margin-left: auto;
+  }
+
+  .selectorMenu__dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    background: var(--fgPrimary);
+    border-radius: 50%;
+  }
+  .selectorMenu__space {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+  .selectorMenu__selected {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex-wrap: wrap;
+  }
+  .selectorMenu__start {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+  .selectorMenu__key {
+    display: flex;
+    text-indent: 0;
+    color: var(--fgMuted);
+    font-size: 0.75rem;
+    font-family: var(--font-mono);
+  }
+</style>

package/src/lib/components/Menu/index.ts

@@ -0,0 +1,2 @@
+export { default as SelectorMenu } from './SelectorMenu.svelte';
+export * from './types';