@tableslayer/ui 0.1.4 → 0.1.6

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

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

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

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

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

@@ -1,208 +0,0 @@
-<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

@@ -1,7 +0,0 @@
-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

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

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

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

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

@@ -1,201 +0,0 @@
-<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

@@ -1,17 +0,0 @@
-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;