@tableslayer/ui 0.1.5 → 0.1.6

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

@@ -1,88 +0,0 @@
-import * as THREE from 'three';
-import { type StageProps } from '../Stage/types';
-import type { CursorData } from '../CursorLayer/types';
-interface Props {
-    props: StageProps;
-    cursors?: CursorData[];
-    trackLocalCursor?: boolean;
-    receivedMeasurement?: {
-        startPoint: {
-            x: number;
-            y: number;
-        };
-        endPoint: {
-            x: number;
-            y: number;
-        };
-        type: number;
-        beamWidth?: number;
-        coneAngle?: number;
-        color?: string;
-        thickness?: number;
-        outlineColor?: string;
-        outlineThickness?: number;
-        opacity?: number;
-        markerSize?: number;
-        autoHideDelay?: number;
-        fadeoutTime?: number;
-        showDistance?: boolean;
-        snapToGrid?: boolean;
-        enableDMG252?: boolean;
-    } | null;
-}
-declare const Scene: import("svelte").Component<Props, {
-    fill: () => void;
-    fit: () => void;
-    generateThumbnail: (quality?: number) => Promise<Blob>;
-    annotations: {
-        clear: (layerId: string) => void;
-        toRLE: () => Promise<Uint8Array<ArrayBufferLike>>;
-        fromRLE: (rleData: Uint8Array, width: number, height: number) => Promise<void>;
-        loadMask: (layerId: string, rleData: Uint8Array) => Promise<void>;
-        isDrawing: () => boolean;
-    };
-    map: {
-        fill: () => void;
-        fit: () => void;
-        getSize: () => {
-            width: number;
-            height: number;
-        } | null;
-    };
-    fogOfWar: {
-        clear: () => void;
-        reset: () => void;
-        toPng: () => Promise<Blob>;
-        toRLE: () => Promise<Uint8Array<ArrayBufferLike>>;
-        fromRLE: (rleData: Uint8Array, width: number, height: number) => Promise<void>;
-        isDrawing: () => boolean;
-    };
-    markers: {
-        readonly isHoveringMarker: boolean;
-        readonly isDraggingMarker: boolean;
-        readonly hoveredMarker: import("../MarkerLayer/types").Marker | null;
-        readonly selectedMarker: import("../MarkerLayer/types").Marker | null;
-        maintainHover: (maintain: boolean) => void;
-        onSceneChange: () => void;
-    };
-    measurement: {
-        getCurrentMeasurement: () => {
-            startPoint: THREE.Vector2 | null;
-            endPoint: THREE.Vector2 | null;
-            type: number;
-        } | null;
-        isDrawing: () => boolean;
-    };
-    getMarkerSizeInScreenSpace: (markerSize?: number) => number;
-    getMarkerScreenPosition: (marker: {
-        position?: {
-            x: number;
-            y: number;
-        };
-    }) => {
-        x: number;
-        y: number;
-    } | null;
-}, "">;
-type Scene = ReturnType<typeof Scene>;
-export default Scene;

package/dist/components/Stage/components/Scene/luts.d.ts

@@ -1,7 +0,0 @@
-import { LookupTexture } from 'postprocessing';
-/**
- * Gets a LUT
- * @param url The URL of the LUT to get
- * @returns A promise that resolves to the LookupTexture
- */
-export declare const getLUT: (url: string | null) => Promise<LookupTexture | null>;

package/dist/components/Stage/components/Scene/luts.js

@@ -1,33 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { LookupTexture } from 'postprocessing';
-import * as THREE from 'three';
-import { LUTCubeLoader } from 'three/examples/jsm/loaders/LUTCubeLoader';
-const loadingManager = new THREE.LoadingManager();
-const lutLoader = new LUTCubeLoader(loadingManager);
-/**
- * Gets a LUT
- * @param url The URL of the LUT to get
- * @returns A promise that resolves to the LookupTexture
- */
-export const getLUT = (url) => __awaiter(void 0, void 0, void 0, function* () {
-    if (!url)
-        return null;
-    const result = yield lutLoader.loadAsync(url);
-    try {
-        const lookupTexture = LookupTexture.from(result.texture3D);
-        lookupTexture.colorSpace = THREE.LinearSRGBColorSpace;
-        return lookupTexture;
-    }
-    catch (error) {
-        console.error(error);
-        return null;
-    }
-});

package/dist/components/Stage/components/Scene/types.d.ts

@@ -1,207 +0,0 @@
-import type { ToneMappingMode } from 'postprocessing';
-export declare enum SceneLoadingState {
-    LoadingMap = 1,
-    Resizing = 2,
-    Rendering = 3,
-    Initialized = 4
-}
-export declare enum SceneRotation {
-    Deg0 = 0,
-    Deg90 = 90,
-    Deg180 = 180,
-    Deg270 = 270
-}
-export declare enum SceneLayer {
-    Main = 0,
-    Overlay = 1,
-    Input = 2
-}
-export declare enum SceneLayerOrder {
-    Background = 0,
-    Map = 10,
-    Fog = 20,
-    Weather = 30,
-    EffectAnnotation = 35,// Effect annotations render under fog of war
-    Marker = 37,// Markers render above effect annotations but below fog of war
-    FogOfWar = 40,
-    Grid = 50,
-    EdgeOverlay = 70,
-    Annotation = 80,// Color annotations render over fog of war
-    Measurement = 90,
-    Cursor = 100
-}
-export interface SceneLayerProps {
-    /**
-     * Whether the scene layer should auto fit
-     */
-    autoFit: boolean;
-    /**
-     * The position of the scene layer within the canvas
-     */
-    offset: {
-        x: number;
-        y: number;
-    };
-    /**
-     * The rotation of the scene layer in degrees
-     */
-    rotation: SceneRotation;
-    /**
-     * The scale of the scene layer
-     */
-    zoom: number;
-}
-import type { Marker } from '../MarkerLayer/types';
-export interface SceneExports {
-    fill: () => void;
-    fit: () => void;
-    generateThumbnail: () => Promise<Blob>;
-    getMarkerScreenPosition: (marker: Marker) => {
-        x: number;
-        y: number;
-    } | null;
-    annotations: {
-        clear: (layerId: string) => void;
-        toRLE: () => Promise<Uint8Array>;
-        fromRLE: (rleData: Uint8Array, width: number, height: number) => Promise<void>;
-        loadMask: (layerId: string, rleData: Uint8Array) => Promise<void>;
-        isDrawing: () => boolean;
-    };
-    fogOfWar: {
-        clear: () => void;
-        reset: () => void;
-        toPng: () => Promise<Blob>;
-        toRLE: () => Promise<Uint8Array>;
-        fromRLE: (rleData: Uint8Array, width: number, height: number) => Promise<void>;
-        isDrawing: () => boolean;
-    };
-    map: {
-        fit: () => void;
-        fill: () => void;
-        getSize: () => {
-            width: number;
-            height: number;
-        } | null;
-    };
-    markers: {
-        isHoveringMarker: boolean;
-        isDraggingMarker: boolean;
-        hoveredMarker: Marker | null;
-        selectedMarker: Marker | null;
-        maintainHover: (maintain: boolean) => void;
-        onSceneChange: () => void;
-    };
-    getMarkerSizeInScreenSpace: (markerSize: number) => number;
-    measurement: {
-        getCurrentMeasurement: () => {
-            startPoint: {
-                x: number;
-                y: number;
-            } | null;
-            endPoint: {
-                x: number;
-                y: number;
-            } | null;
-            type: number;
-        } | null;
-        isDrawing: () => boolean;
-    };
-}
-/**
- * Properties for post-processing effects
- */
-export interface PostProcessingProps {
-    /**
-     * Whether post-processing is enabled
-     */
-    enabled: boolean;
-    /**
-     * Bloom effect properties
-     */
-    bloom: {
-        /**
-         * Whether the bloom effect is enabled
-         */
-        enabled: boolean;
-        /**
-         * Overall intensity of the bloom effect (0-1)
-         */
-        intensity: number;
-        /**
-         * Luminance threshold for what pixels will bloom (0-1)
-         */
-        threshold: number;
-        /**
-         * How smoothly the bloom transitions at the threshold (0-1)
-         */
-        smoothing: number;
-        /**
-         * Radius of the bloom effect
-         */
-        radius: number;
-        /**
-         * Levels of the bloom effect
-         */
-        levels: number;
-        /**
-         * Whether to apply mipmap blur
-         */
-        mipmapBlur: boolean;
-    };
-    /**
-     * Chromatic aberration effect properties
-     */
-    chromaticAberration: {
-        /**
-         * Whether the chromatic aberration effect is enabled
-         */
-        enabled: boolean;
-        /**
-         * The offset of the chromatic aberration effect
-         */
-        offset: number;
-    };
-    /**
-     * LUT effect properties
-     */
-    lut: {
-        /**
-         * Whether the LUT3D effect is enabled
-         */
-        enabled: boolean;
-        /**
-         * The URL of the LUT to use
-         */
-        url: string | null;
-    };
-    /**
-     * Tone mapping effect properties
-     */
-    toneMapping: {
-        /**
-         * Whether the tone mapping effect is enabled
-         */
-        enabled: boolean;
-        /**
-         * The mode of the tone mapping effect
-         */
-        mode: ToneMappingMode;
-    };
-    /**
-     * Vignette effect properties
-     */
-    vignette: {
-        /**
-         * Whether the vignette effect is enabled
-         */
-        enabled: boolean;
-        /**
-         * How far from the center the vignette starts (0-1)
-         */
-        offset: number;
-        /**
-         * How dark the vignette effect is (0-1)
-         */
-        darkness: number;
-    };
-}

package/dist/components/Stage/components/Scene/types.js

@@ -1,35 +0,0 @@
-export var SceneLoadingState;
-(function (SceneLoadingState) {
-    SceneLoadingState[SceneLoadingState["LoadingMap"] = 1] = "LoadingMap";
-    SceneLoadingState[SceneLoadingState["Resizing"] = 2] = "Resizing";
-    SceneLoadingState[SceneLoadingState["Rendering"] = 3] = "Rendering";
-    SceneLoadingState[SceneLoadingState["Initialized"] = 4] = "Initialized";
-})(SceneLoadingState || (SceneLoadingState = {}));
-export var SceneRotation;
-(function (SceneRotation) {
-    SceneRotation[SceneRotation["Deg0"] = 0] = "Deg0";
-    SceneRotation[SceneRotation["Deg90"] = 90] = "Deg90";
-    SceneRotation[SceneRotation["Deg180"] = 180] = "Deg180";
-    SceneRotation[SceneRotation["Deg270"] = 270] = "Deg270";
-})(SceneRotation || (SceneRotation = {}));
-export var SceneLayer;
-(function (SceneLayer) {
-    SceneLayer[SceneLayer["Main"] = 0] = "Main";
-    SceneLayer[SceneLayer["Overlay"] = 1] = "Overlay";
-    SceneLayer[SceneLayer["Input"] = 2] = "Input";
-})(SceneLayer || (SceneLayer = {}));
-export var SceneLayerOrder;
-(function (SceneLayerOrder) {
-    SceneLayerOrder[SceneLayerOrder["Background"] = 0] = "Background";
-    SceneLayerOrder[SceneLayerOrder["Map"] = 10] = "Map";
-    SceneLayerOrder[SceneLayerOrder["Fog"] = 20] = "Fog";
-    SceneLayerOrder[SceneLayerOrder["Weather"] = 30] = "Weather";
-    SceneLayerOrder[SceneLayerOrder["EffectAnnotation"] = 35] = "EffectAnnotation";
-    SceneLayerOrder[SceneLayerOrder["Marker"] = 37] = "Marker";
-    SceneLayerOrder[SceneLayerOrder["FogOfWar"] = 40] = "FogOfWar";
-    SceneLayerOrder[SceneLayerOrder["Grid"] = 50] = "Grid";
-    SceneLayerOrder[SceneLayerOrder["EdgeOverlay"] = 70] = "EdgeOverlay";
-    SceneLayerOrder[SceneLayerOrder["Annotation"] = 80] = "Annotation";
-    SceneLayerOrder[SceneLayerOrder["Measurement"] = 90] = "Measurement";
-    SceneLayerOrder[SceneLayerOrder["Cursor"] = 100] = "Cursor";
-})(SceneLayerOrder || (SceneLayerOrder = {}));

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

@@ -1,332 +0,0 @@
-<script lang="ts">
-  import { Canvas, T } from '@threlte/core';
-  import * as THREE from 'three';
-  import type { Callbacks, StageProps } from './types';
-  import Scene from '../Scene/Scene.svelte';
-  import { type SceneExports, SceneLayerOrder } from '../Scene/types';
-  import { setContext } from 'svelte';
-  import { PerfMonitor } from '@threlte/extras';
-  import { MarkerTooltip } from '../../../MarkerTooltip';
-
-  import type { CursorData } from './types';
-
-  /**
-   * Creates a custom WebGL renderer with high-performance settings.
-   * This fixes Chrome/Mac performance issues by:
-   * - Requesting high-performance GPU mode (critical for macOS)
-   * - Disabling unnecessary features like stencil buffer
-   */
-  const createRenderer = (canvas: HTMLCanvasElement) => {
-    return new THREE.WebGLRenderer({
-      canvas,
-      powerPreference: 'high-performance',
-      antialias: true,
-      alpha: false,
-      stencil: false,
-      depth: true
-    });
-  };
-
-  interface Props {
-    props: StageProps;
-    callbacks: Callbacks;
-    receivedMeasurement?: {
-      startPoint: { x: number; y: number };
-      endPoint: { x: number; y: number };
-      type: number;
-      beamWidth?: number;
-      coneAngle?: number;
-      // Visual properties
-      color?: string;
-      thickness?: number;
-      outlineColor?: string;
-      outlineThickness?: number;
-      opacity?: number;
-      markerSize?: number;
-      // Timing properties
-      autoHideDelay?: number;
-      fadeoutTime?: number;
-      // Distance properties
-      showDistance?: boolean;
-      snapToGrid?: boolean;
-      enableDMG252?: boolean;
-    } | null;
-    cursors?: CursorData[];
-    trackLocalCursor?: boolean;
-    hoveredMarkerId?: string | null;
-    pinnedMarkerIds?: string[];
-    onPinToggle?: (markerId: string, pinned: boolean) => void;
-  }
-
-  let {
-    props,
-    callbacks,
-    receivedMeasurement = null,
-    cursors = [],
-    trackLocalCursor = false,
-    hoveredMarkerId = null,
-    pinnedMarkerIds = [],
-    onPinToggle
-  }: Props = $props();
-
-  let sceneRef = $state<SceneExports>();
-  let containerElement = $state<HTMLDivElement>();
-  let tooltipPosition = $state<{ x: number; y: number } | null>(null);
-  interface MarkerData {
-    id: string;
-    title?: string;
-    note?: unknown;
-    visibility?: number;
-    size?: number;
-    tooltip?: {
-      title?: string;
-      content?: unknown;
-    };
-  }
-
-  let hoveredMarkerData = $state<MarkerData | null>(null);
-  let markerSizeInPixels = $state<number>(40);
-
-  let pinnedTooltips = $state<
-    Array<{
-      marker: MarkerData;
-      position: { x: number; y: number };
-      preferredPlacement: 'top' | 'bottom' | 'left' | 'right';
-    }>
-  >([]);
-
-  const renderedTooltips = new Map<string, { element: HTMLElement; bounds: DOMRect }>();
-
-  let stageContext = $state({ mode: props.mode, hoveredMarkerId, pinnedMarkerIds });
-  setContext('stage', stageContext);
-
-  $effect(() => {
-    stageContext.mode = props.mode;
-    stageContext.hoveredMarkerId = hoveredMarkerId;
-    stageContext.pinnedMarkerIds = pinnedMarkerIds;
-  });
-
-  setContext('callbacks', callbacks);
-
-  export const annotations = {
-    clear: (layerId: string) => sceneRef?.annotations.clear(layerId),
-    toRLE: () => sceneRef?.annotations?.toRLE() ?? Promise.resolve(new Uint8Array()),
-    fromRLE: (rleData: Uint8Array, width: number, height: number) =>
-      sceneRef?.annotations?.fromRLE(rleData, width, height) ?? Promise.resolve(),
-    loadMask: (layerId: string, rleData: Uint8Array) =>
-      sceneRef?.annotations?.loadMask(layerId, rleData) ?? Promise.resolve(),
-    isDrawing: () => sceneRef?.annotations?.isDrawing() ?? false
-  };
-
-  export const map = {
-    fill: () => sceneRef?.map.fill(),
-    fit: () => sceneRef?.map.fit(),
-    getSize: () => sceneRef?.map?.getSize?.() ?? null
-  };
-
-  export const fogOfWar = {
-    clear: () => sceneRef?.fogOfWar.clear(),
-    reset: () => sceneRef?.fogOfWar.reset(),
-    toPng: () => sceneRef?.fogOfWar.toPng() ?? Promise.resolve(new Blob()),
-    toRLE: () => sceneRef?.fogOfWar.toRLE() ?? Promise.resolve(new Uint8Array()),
-    fromRLE: (rleData: Uint8Array, width: number, height: number) =>
-      sceneRef?.fogOfWar.fromRLE(rleData, width, height) ?? Promise.resolve(),
-    isDrawing: () => sceneRef?.fogOfWar?.isDrawing() ?? false
-  };
-
-  export const scene = {
-    fill: () => sceneRef?.fill(),
-    fit: () => sceneRef?.fit(),
-    generateThumbnail: () => sceneRef?.generateThumbnail() ?? Promise.resolve(new Blob())
-  };
-
-  export const markers = {
-    get isHoveringMarker() {
-      return sceneRef?.markers?.isHoveringMarker ?? false;
-    },
-    get isDraggingMarker() {
-      return sceneRef?.markers?.isDraggingMarker ?? false;
-    }
-  };
-
-  export const measurement = {
-    getCurrentMeasurement: () => sceneRef?.measurement?.getCurrentMeasurement() ?? null,
-    isDrawing: () => sceneRef?.measurement?.isDrawing() ?? false
-  };
-
-  /**
-   * Called when the scene changes to clear all transient state.
-   * Clears tooltips, marker hover/selection, and other scene-specific state.
-   */
-  export function onSceneChange() {
-    // Clear tooltip state
-    hoveredMarkerData = null;
-    tooltipPosition = null;
-
-    // Clear marker interaction state
-    sceneRef?.markers?.onSceneChange?.();
-  }
-
-  $effect(() => {
-    // Update marker size when zoom changes or marker data changes
-    const zoom = props.scene.zoom;
-    if (sceneRef?.getMarkerSizeInScreenSpace) {
-      const markerSize = hoveredMarkerData?.size || 1;
-      markerSizeInPixels = sceneRef.getMarkerSizeInScreenSpace(markerSize);
-    }
-    // Use zoom to avoid unused variable warning
-    void zoom;
-  });
-
-  $effect(() => {
-    // Only show pinned tooltips in DM mode when activeLayer is None (0) or Marker (2)
-    // In player mode, always show pinned tooltips
-    const shouldShowPinnedTooltips = props.mode === 1 || props.activeLayer === 0 || props.activeLayer === 2;
-
-    if (
-      pinnedMarkerIds &&
-      pinnedMarkerIds.length > 0 &&
-      containerElement &&
-      sceneRef?.getMarkerScreenPosition &&
-      shouldShowPinnedTooltips
-    ) {
-      const newPinnedTooltips = [];
-
-      const placementPatterns = [
-        ['top', 'bottom', 'left', 'right'],
-        ['bottom', 'top', 'right', 'left'],
-        ['left', 'right', 'top', 'bottom'],
-        ['right', 'left', 'bottom', 'top']
-      ];
-
-      for (let i = 0; i < pinnedMarkerIds.length; i++) {
-        const markerId = pinnedMarkerIds[i];
-        const marker = props.marker.markers.find((m) => m.id === markerId);
-        if (marker) {
-          const screenPos = sceneRef.getMarkerScreenPosition(marker);
-          if (screenPos) {
-            const pattern = placementPatterns[i % placementPatterns.length];
-            const preferredPlacement = pattern[0] as 'top' | 'bottom' | 'left' | 'right';
-
-            newPinnedTooltips.push({ marker, position: screenPos, preferredPlacement });
-          }
-        }
-      }
-      pinnedTooltips = newPinnedTooltips;
-    } else {
-      pinnedTooltips = [];
-    }
-  });
-
-  $effect(() => {
-    let markerForTooltip = null;
-
-    if (props.mode === 0) {
-      const hoveredMarker = sceneRef?.markers?.hoveredMarker;
-      const isDragging = sceneRef?.markers?.isDraggingMarker;
-      // Only show tooltips when activeLayer is None (0) or Marker (2)
-      // MapLayerType: None = 0, FogOfWar = 1, Marker = 2, Annotation = 3, Measurement = 4
-      const isMarkerOrNoneLayer = props.activeLayer === 0 || props.activeLayer === 2;
-      if (hoveredMarker && !pinnedMarkerIds.includes(hoveredMarker.id) && !isDragging && isMarkerOrNoneLayer) {
-        // Look up the current marker from the markers array by ID to handle Y.js updates
-        // This prevents stale marker references from breaking tooltips after sync
-        const currentMarker = props.marker.markers.find((m) => m.id === hoveredMarker.id);
-        markerForTooltip = currentMarker || hoveredMarker;
-      }
-    } else if (props.mode === 1) {
-      // Player mode - only show tooltips for markers where:
-      // 1. The marker is pinned (handled separately in pinnedTooltips)
-      // 2. The marker visibility is "On hover" (MarkerVisibility.Hover = 3) AND DM is hovering
-      // 3. The marker visibility is "Everyone" (MarkerVisibility.Always = 0) AND DM is hovering
-      let dmBroadcastMarker = null;
-      if (hoveredMarkerId) {
-        if (!pinnedMarkerIds.includes(hoveredMarkerId)) {
-          const marker = props.marker.markers.find((m) => m.id === hoveredMarkerId);
-          // Only show if marker visibility is "On hover" or "Everyone"
-          // MarkerVisibility: Always = 0, DM = 1, Player = 2, Hover = 3
-          if (marker && (marker.visibility === 0 || marker.visibility === 3)) {
-            dmBroadcastMarker = marker;
-          }
-        }
-      }
-
-      // In player mode, also check if player has selected a marker
-      // But only show tooltip if it has appropriate visibility (not DM-only)
-      const selectedByPlayer = sceneRef?.markers?.selectedMarker;
-      const isDragging = sceneRef?.markers?.isDraggingMarker;
-      let selectedNotPinned = null;
-      if (selectedByPlayer && !pinnedMarkerIds.includes(selectedByPlayer.id) && !isDragging) {
-        // Only show if marker visibility is not DM-only (i.e., not visibility = 1)
-        // MarkerVisibility: Always = 0, DM = 1, Player = 2, Hover = 3
-        if (selectedByPlayer.visibility !== 1) {
-          selectedNotPinned = selectedByPlayer;
-        }
-      }
-
-      markerForTooltip = dmBroadcastMarker || selectedNotPinned;
-    }
-
-    if (markerForTooltip && containerElement) {
-      hoveredMarkerData = markerForTooltip;
-      const screenPos = sceneRef?.getMarkerScreenPosition?.(markerForTooltip);
-      if (screenPos) {
-        tooltipPosition = screenPos;
-      }
-    } else {
-      hoveredMarkerData = null;
-      tooltipPosition = null;
-    }
-  });
-</script>
-
-<div bind:this={containerElement} style="height: 100%; width: 100%; position: relative;">
-  <Canvas {createRenderer} renderMode="always">
-    <T.Mesh scale={[100000, 100000, 1]} layers={[SceneLayerOrder.Background]}>
-      <T.PlaneGeometry />
-      <T.MeshBasicMaterial color={props.backgroundColor} />
-    </T.Mesh>
-
-    <Scene bind:this={sceneRef} {props} {receivedMeasurement} {cursors} {trackLocalCursor} />
-    {#if props.debug.enableStats}
-      <PerfMonitor logsPerSecond={props.debug.loggingRate} anchorX={'right'} anchorY={'bottom'} />
-    {/if}
-  </Canvas>
-
-  {#each pinnedTooltips as { marker, position, preferredPlacement }, index}
-    <MarkerTooltip
-      {marker}
-      {position}
-      {containerElement}
-      markerDiameter={sceneRef?.getMarkerSizeInScreenSpace ? sceneRef.getMarkerSizeInScreenSpace(marker.size || 1) : 40}
-      isDM={props.mode === 0}
-      isPinned={true}
-      {onPinToggle}
-      {preferredPlacement}
-      existingTooltips={Array.from(renderedTooltips.values()).filter((t, i) => i < index)}
-      onTooltipMount={(element, bounds) => {
-        renderedTooltips.set(marker.id, { element, bounds });
-      }}
-      onTooltipUnmount={() => {
-        renderedTooltips.delete(marker.id);
-      }}
-    />
-  {/each}
-
-  {#if hoveredMarkerData}
-    <MarkerTooltip
-      marker={hoveredMarkerData}
-      position={tooltipPosition}
-      {containerElement}
-      markerDiameter={markerSizeInPixels}
-      isDM={props.mode === 0}
-      isPinned={false}
-      {onPinToggle}
-      existingTooltips={Array.from(renderedTooltips.values())}
-      onTooltipHover={(isHovering) => {
-        if (props.mode === 0 && sceneRef?.markers?.maintainHover) {
-          sceneRef.markers.maintainHover(isHovering);
-        }
-      }}
-    />
-  {/if}
-</div>