@tableslayer/ui 0.0.1

package/dist/components/Stage/components/PerformanceDebugger/index.d.ts

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

package/dist/components/Stage/components/PerformanceDebugger/index.js

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

package/dist/components/Stage/components/PerformanceOverlay/PerformanceOverlay.svelte

@@ -0,0 +1,208 @@
+<script lang="ts">
+  import {
+    performanceMetrics,
+    getAverageFps,
+    get1PercentLowFps,
+    getFrameTimes
+  } from '../../helpers/performanceMetrics.svelte';
+
+  interface Props {
+    visible?: boolean;
+    disabledLayers?: string[];
+  }
+
+  const { visible = true, disabledLayers = [] }: Props = $props();
+
+  const metrics = $derived(performanceMetrics.value);
+  const frameTimes = $derived(getFrameTimes());
+  const avgFps = $derived(getAverageFps());
+  const lowFps = $derived(get1PercentLowFps());
+
+  // Graph dimensions
+  const GRAPH_WIDTH = 200;
+  const GRAPH_HEIGHT = 60;
+  const MAX_FRAME_TIME = 50; // Cap at 50ms (20fps) for graph scale
+
+  // Generate SVG path for frame time graph
+  const graphPath = $derived(() => {
+    if (frameTimes.length < 2) return '';
+
+    const points = frameTimes.map((ft, i) => {
+      const x = (i / (frameTimes.length - 1)) * GRAPH_WIDTH;
+      const y = GRAPH_HEIGHT - Math.min(ft / MAX_FRAME_TIME, 1) * GRAPH_HEIGHT;
+      return `${x},${y}`;
+    });
+
+    return `M${points.join(' L')}`;
+  });
+
+  // Color based on FPS
+  const fpsColor = $derived(() => {
+    const fps = metrics.fps;
+    if (fps >= 55) return 'var(--fgSuccess)';
+    if (fps >= 30) return 'var(--fgWarning)';
+    return 'var(--fgDanger)';
+  });
+</script>
+
+{#if visible}
+  <div class="perfOverlay">
+    <div class="perfOverlay__header">Performance</div>
+
+    <div class="perfOverlay__section">
+      <div class="perfOverlay__row">
+        <span class="perfOverlay__label">FPS</span>
+        <span class="perfOverlay__value" style="color: {fpsColor()}">{metrics.fps.toFixed(0)}</span>
+      </div>
+      <div class="perfOverlay__row">
+        <span class="perfOverlay__label">Avg</span>
+        <span class="perfOverlay__value">{avgFps.toFixed(0)}</span>
+      </div>
+      <div class="perfOverlay__row">
+        <span class="perfOverlay__label">1% Low</span>
+        <span class="perfOverlay__value">{lowFps.toFixed(0)}</span>
+      </div>
+    </div>
+
+    <div class="perfOverlay__graph">
+      <svg width={GRAPH_WIDTH} height={GRAPH_HEIGHT} class="perfOverlay__svg">
+        <!-- 60fps line (16.67ms) -->
+        <line
+          x1="0"
+          y1={GRAPH_HEIGHT - (16.67 / MAX_FRAME_TIME) * GRAPH_HEIGHT}
+          x2={GRAPH_WIDTH}
+          y2={GRAPH_HEIGHT - (16.67 / MAX_FRAME_TIME) * GRAPH_HEIGHT}
+          stroke="var(--fgSuccess)"
+          stroke-opacity="0.3"
+          stroke-width="1"
+          stroke-dasharray="4,4"
+        />
+        <!-- 30fps line (33.33ms) -->
+        <line
+          x1="0"
+          y1={GRAPH_HEIGHT - (33.33 / MAX_FRAME_TIME) * GRAPH_HEIGHT}
+          x2={GRAPH_WIDTH}
+          y2={GRAPH_HEIGHT - (33.33 / MAX_FRAME_TIME) * GRAPH_HEIGHT}
+          stroke="var(--fgWarning)"
+          stroke-opacity="0.3"
+          stroke-width="1"
+          stroke-dasharray="4,4"
+        />
+        <!-- Frame time path -->
+        <path d={graphPath()} fill="none" stroke="var(--fgPrimary)" stroke-width="1.5" />
+      </svg>
+    </div>
+
+    <div class="perfOverlay__section">
+      <div class="perfOverlay__row">
+        <span class="perfOverlay__label">Frame</span>
+        <span class="perfOverlay__value">{metrics.frameTime.toFixed(2)}ms</span>
+      </div>
+      <div class="perfOverlay__row">
+        <span class="perfOverlay__label">Composer</span>
+        <span class="perfOverlay__value">{metrics.composerTime.toFixed(2)}ms</span>
+      </div>
+      <div class="perfOverlay__row">
+        <span class="perfOverlay__label">Overlay</span>
+        <span class="perfOverlay__value">{metrics.overlayTime.toFixed(2)}ms</span>
+      </div>
+    </div>
+
+    <div class="perfOverlay__section">
+      <div class="perfOverlay__row">
+        <span class="perfOverlay__label">Draw calls</span>
+        <span class="perfOverlay__value">{metrics.drawCalls}</span>
+      </div>
+      <div class="perfOverlay__row">
+        <span class="perfOverlay__label">Triangles</span>
+        <span class="perfOverlay__value">{metrics.triangles}</span>
+      </div>
+      <div class="perfOverlay__row">
+        <span class="perfOverlay__label">Textures</span>
+        <span class="perfOverlay__value">{metrics.textures}</span>
+      </div>
+      <div class="perfOverlay__row">
+        <span class="perfOverlay__label">Geometries</span>
+        <span class="perfOverlay__value">{metrics.geometries}</span>
+      </div>
+    </div>
+
+    {#if disabledLayers.length > 0}
+      <div class="perfOverlay__section">
+        <div class="perfOverlay__sublabel">Disabled layers</div>
+        {#each disabledLayers as layer}
+          <div class="perfOverlay__disabledLayer">{layer}</div>
+        {/each}
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .perfOverlay {
+    position: absolute;
+    top: 0.5rem;
+    left: 0.5rem;
+    background: rgba(0, 0, 0, 0.85);
+    color: var(--fg);
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    padding: 0.5rem;
+    border-radius: var(--radius-2);
+    z-index: 1000;
+    pointer-events: none;
+    min-width: 14rem;
+  }
+
+  .perfOverlay__header {
+    font-weight: var(--font-weight-7);
+    margin-bottom: 0.5rem;
+    padding-bottom: 0.25rem;
+    border-bottom: 1px solid var(--fgMuted);
+  }
+
+  .perfOverlay__section {
+    margin-bottom: 0.5rem;
+  }
+
+  .perfOverlay__section:last-child {
+    margin-bottom: 0;
+  }
+
+  .perfOverlay__row {
+    display: flex;
+    justify-content: space-between;
+    line-height: var(--font-lineheight-2);
+  }
+
+  .perfOverlay__label {
+    color: var(--fgMuted);
+  }
+
+  .perfOverlay__value {
+    font-weight: var(--font-weight-5);
+  }
+
+  .perfOverlay__sublabel {
+    color: var(--fgMuted);
+    font-size: 0.625rem;
+    margin-bottom: 0.125rem;
+  }
+
+  .perfOverlay__disabledLayer {
+    color: var(--fgWarning);
+    font-size: 0.625rem;
+    padding-left: 0.5rem;
+  }
+
+  .perfOverlay__graph {
+    margin: 0.5rem 0;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--radius-1);
+    overflow: hidden;
+  }
+
+  .perfOverlay__svg {
+    display: block;
+  }
+</style>

package/dist/components/Stage/components/PerformanceOverlay/PerformanceOverlay.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    visible?: boolean;
+    disabledLayers?: string[];
+}
+declare const PerformanceOverlay: import("svelte").Component<Props, {}, "">;
+type PerformanceOverlay = ReturnType<typeof PerformanceOverlay>;
+export default PerformanceOverlay;

package/dist/components/Stage/components/PerformanceOverlay/index.d.ts

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

package/dist/components/Stage/components/PerformanceOverlay/index.js

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

package/dist/components/Stage/components/PointerInputManager/PointerInputManager.svelte

@@ -0,0 +1,201 @@
+<script lang="ts">
+  import type { StageProps } from '../Stage/types';
+
+  interface Props {
+    minZoom: number;
+    maxZoom: number;
+    zoomSensitivity: number;
+    stageElement: HTMLDivElement;
+    stageProps: StageProps;
+    onMapPan: (dx: number, dy: number) => void;
+    onMapRotate: (angle: number) => void;
+    onMapZoom: (zoom: number) => void;
+    onScenePan: (dx: number, dy: number) => void;
+    onSceneRotate: (angle: number) => void;
+    onSceneZoom: (zoom: number) => void;
+  }
+
+  // Props
+  let {
+    minZoom,
+    maxZoom,
+    zoomSensitivity,
+    stageElement,
+    stageProps,
+    onMapPan,
+    onMapRotate,
+    onMapZoom,
+    onScenePan,
+    onSceneRotate,
+    onSceneZoom
+  }: Props = $props();
+
+  // State for pointer tracking
+  let pointerCache: PointerEvent[] = $state([]);
+  let prevDiff = $state(-1);
+  let prevAngle = $state(0);
+  let isDragging = $state(false);
+  let lastPointerCount = $state(0);
+  let prevCentroid = $state<{ x: number; y: number } | null>(null);
+
+  $effect(() => {
+    if (!stageElement) return;
+
+    stageElement.addEventListener('pointerdown', onPointerDown as EventListener);
+    stageElement.addEventListener('pointermove', onPointerMove as EventListener);
+    stageElement.addEventListener('pointerup', onPointerUp as EventListener);
+    stageElement.addEventListener('pointercancel', onPointerUp as EventListener);
+    stageElement.addEventListener('pointerout', onPointerUp as EventListener);
+    stageElement.addEventListener('pointerleave', onPointerUp as EventListener);
+
+    // Cleanup when stageElement changes or component unmounts
+    return () => {
+      stageElement.removeEventListener('pointerdown', onPointerDown as EventListener);
+      stageElement.removeEventListener('pointermove', onPointerMove as EventListener);
+      stageElement.removeEventListener('pointerup', onPointerUp as EventListener);
+      stageElement.removeEventListener('pointercancel', onPointerUp as EventListener);
+      stageElement.removeEventListener('pointerout', onPointerUp as EventListener);
+      stageElement.removeEventListener('pointerleave', onPointerUp as EventListener);
+    };
+  });
+
+  // Event handlers
+  function onPointerDown(e: PointerEvent) {
+    pointerCache.push(e);
+    isDragging = true;
+  }
+
+  // Helper functions for pointer calculations
+  function calculateRotatedMovement(e: PointerEvent, rotation: number) {
+    const radians = (Math.PI / 180) * rotation;
+    return {
+      dx: e.movementX * Math.cos(radians) + e.movementY * Math.sin(radians),
+      dy: -1 * (-e.movementX * Math.sin(radians) + e.movementY * Math.cos(radians))
+    };
+  }
+
+  function calculatePinchAndRotation(pointers: PointerEvent[]) {
+    const [p1, p2] = pointers;
+    const curDiff = Math.hypot(p1.clientX - p2.clientX, p1.clientY - p2.clientY);
+    const zoomDelta = -(curDiff - prevDiff) * zoomSensitivity;
+
+    const curAngle = Math.atan2(p2.clientY - p1.clientY, p2.clientX - p1.clientX);
+    let angleDelta = curAngle - prevAngle;
+
+    // Normalize angle delta to handle wrapping around ±π boundary
+    if (angleDelta > Math.PI) {
+      angleDelta -= 2 * Math.PI;
+    } else if (angleDelta < -Math.PI) {
+      angleDelta += 2 * Math.PI;
+    }
+
+    return { curDiff, zoomDelta, curAngle, angleDelta };
+  }
+
+  function calculateCentroidMovement(pointers: PointerEvent[], rotation: number) {
+    const [p1, p2] = pointers;
+    const curCentroid = {
+      x: (p1.clientX + p2.clientX) / 2,
+      y: (p1.clientY + p2.clientY) / 2
+    };
+
+    if (!prevCentroid) {
+      return { dx: 0, dy: 0, curCentroid };
+    }
+
+    const rawDx = curCentroid.x - prevCentroid.x;
+    const rawDy = curCentroid.y - prevCentroid.y;
+
+    // Apply rotation transformation
+    const radians = (Math.PI / 180) * rotation;
+    const dx = rawDx * Math.cos(radians) + rawDy * Math.sin(radians);
+    const dy = -1 * (-rawDx * Math.sin(radians) + rawDy * Math.cos(radians));
+
+    return { dx, dy, curCentroid };
+  }
+
+  function handleSinglePointer(e: PointerEvent) {
+    const { dx, dy } = calculateRotatedMovement(e, stageProps.scene.rotation);
+
+    if (e.shiftKey) {
+      const movementFactor = 1 / stageProps.scene.zoom;
+      onMapPan(dx * movementFactor, dy * movementFactor);
+    } else if (e.ctrlKey) {
+      onScenePan(dx, dy);
+    }
+  }
+
+  function handleMultiPointer(pointers: PointerEvent[], isMapControl: boolean) {
+    const { curDiff, zoomDelta, curAngle, angleDelta } = calculatePinchAndRotation(pointers);
+
+    // Use centroid-based movement (center of the two pointers)
+    const { dx, dy, curCentroid } = calculateCentroidMovement(pointers, stageProps.scene.rotation);
+    prevCentroid = curCentroid;
+
+    if (prevDiff > 0) {
+      if (isMapControl) {
+        onMapPan(dx, dy);
+        onMapZoom(Math.max(minZoom, Math.min(stageProps.map.zoom - zoomDelta, maxZoom)));
+        onMapRotate(stageProps.map.rotation - (angleDelta * 180) / Math.PI);
+      } else {
+        onScenePan(dx, dy);
+        onSceneZoom(Math.max(minZoom, Math.min(stageProps.scene.zoom - zoomDelta, maxZoom)));
+        onSceneRotate(stageProps.scene.rotation + (angleDelta * 180) / Math.PI);
+      }
+    }
+
+    prevDiff = curDiff;
+    prevAngle = curAngle;
+  }
+
+  function onPointerMove(e: PointerEvent) {
+    if (!isDragging) return;
+
+    // Update pointer cache
+    const index = pointerCache.findIndex((cachedEv) => cachedEv.pointerId === e.pointerId);
+    if (index !== -1) {
+      pointerCache[index] = e;
+    }
+
+    // Reset multi-touch state when transitioning from single to multi-touch
+    // This prevents using stale movement data from single-touch phase
+    if (lastPointerCount !== pointerCache.length) {
+      if (pointerCache.length >= 2 && lastPointerCount < 2) {
+        prevDiff = -1;
+        prevAngle = 0;
+        prevCentroid = null;
+      }
+      lastPointerCount = pointerCache.length;
+    }
+
+    // Handle different pointer counts
+    switch (pointerCache.length) {
+      case 1:
+        handleSinglePointer(e);
+        break;
+      case 2:
+        handleMultiPointer(pointerCache, false); // Scene controls
+        break;
+      case 3:
+        handleMultiPointer([pointerCache[0], pointerCache[2]], true); // Map controls
+        break;
+    }
+  }
+
+  function onPointerUp(e: PointerEvent) {
+    // Remove this pointer from the cache
+    const index = pointerCache.findIndex((cachedEv) => cachedEv.pointerId === e.pointerId);
+    if (index !== -1) {
+      pointerCache.splice(index, 1);
+    }
+
+    // Reset state if no pointers are down
+    if (pointerCache.length === 0) {
+      isDragging = false;
+      prevDiff = -1;
+      prevAngle = 0;
+      lastPointerCount = 0;
+      prevCentroid = null;
+    }
+  }
+</script>

package/dist/components/Stage/components/PointerInputManager/PointerInputManager.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { StageProps } from '../Stage/types';
+interface Props {
+    minZoom: number;
+    maxZoom: number;
+    zoomSensitivity: number;
+    stageElement: HTMLDivElement;
+    stageProps: StageProps;
+    onMapPan: (dx: number, dy: number) => void;
+    onMapRotate: (angle: number) => void;
+    onMapZoom: (zoom: number) => void;
+    onScenePan: (dx: number, dy: number) => void;
+    onSceneRotate: (angle: number) => void;
+    onSceneZoom: (zoom: number) => void;
+}
+declare const PointerInputManager: import("svelte").Component<Props, {}, "">;
+type PointerInputManager = ReturnType<typeof PointerInputManager>;
+export default PointerInputManager;