@tableslayer/ui 0.0.1

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

@@ -0,0 +1,86 @@
+import type { Callbacks, StageProps } from './types';
+import type { CursorData } from './types';
+interface Props {
+    props: StageProps;
+    callbacks: Callbacks;
+    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;
+    cursors?: CursorData[];
+    trackLocalCursor?: boolean;
+    hoveredMarkerId?: string | null;
+    pinnedMarkerIds?: string[];
+    onPinToggle?: (markerId: string, pinned: boolean) => void;
+}
+declare const Stage: import("svelte").Component<Props, {
+    annotations: {
+        clear: (layerId: string) => void | undefined;
+        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 | undefined;
+        fit: () => void | undefined;
+        getSize: () => {
+            width: number;
+            height: number;
+        } | null;
+    };
+    fogOfWar: {
+        clear: () => void | undefined;
+        reset: () => void | undefined;
+        toPng: () => Promise<Blob>;
+        toRLE: () => Promise<Uint8Array<ArrayBufferLike>>;
+        fromRLE: (rleData: Uint8Array, width: number, height: number) => Promise<void>;
+        isDrawing: () => boolean;
+    };
+    scene: {
+        fill: () => void | undefined;
+        fit: () => void | undefined;
+        generateThumbnail: () => Promise<Blob>;
+    };
+    markers: {
+        readonly isHoveringMarker: boolean;
+        readonly isDraggingMarker: boolean;
+    };
+    measurement: {
+        getCurrentMeasurement: () => {
+            startPoint: {
+                x: number;
+                y: number;
+            } | null;
+            endPoint: {
+                x: number;
+                y: number;
+            } | null;
+            type: number;
+        } | null;
+        isDrawing: () => boolean;
+    };
+    onSceneChange: () => void;
+}, "">;
+type Stage = ReturnType<typeof Stage>;
+export default Stage;

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

@@ -0,0 +1,163 @@
+import type { AnnotationsLayerProps } from '../AnnotationLayer/types';
+import type { EdgeOverlayProps } from '../EdgeOverlayLayer/types';
+import type { FogLayerProps } from '../FogLayer/types';
+import type { FogOfWarLayerProps } from '../FogOfWarLayer/types';
+import type { GridLayerProps } from '../GridLayer/types';
+import type { MapLayerProps, MapLayerType } from '../MapLayer/types';
+import type { Marker, MarkerLayerProps } from '../MarkerLayer/types';
+import type { MeasurementLayerProps } from '../MeasurementLayer/types';
+import type { PostProcessingProps, SceneLayerProps } from '../Scene/types';
+import type { WeatherLayerProps } from '../WeatherLayer/types';
+export type { CursorData } from '../CursorLayer/types';
+export interface Callbacks {
+    onAnnotationUpdate: (layerId: string, blob: Promise<Blob>, endPosition?: {
+        x: number;
+        y: number;
+    }) => void;
+    onFogUpdate: (blob: Promise<Blob>) => void;
+    onMapUpdate: (offset: {
+        x: number;
+        y: number;
+    }, zoom: number) => void;
+    onSceneUpdate: (offset: {
+        x: number;
+        y: number;
+    }, zoom: number) => void;
+    onStageLoading: () => void;
+    onStageInitialized: () => void;
+    onMarkerAdded: (marker: Marker) => void;
+    onMarkerMoved: (marker: Marker, position: {
+        x: number;
+        y: number;
+    }) => void;
+    onMarkerSelected: (marker: Marker | null) => void;
+    onMarkerContextMenu: (marker: Marker, event: MouseEvent | TouchEvent) => void;
+    onMeasurementStart?: (startPoint: {
+        x: number;
+        y: number;
+    }, type: number) => void;
+    onMeasurementUpdate?: (startPoint: {
+        x: number;
+        y: number;
+    }, endPoint: {
+        x: number;
+        y: number;
+    }, type: number) => void;
+    onMeasurementEnd?: () => void;
+    onCursorMove?: (worldPosition: {
+        x: number;
+        y: number;
+        z: number;
+    }) => void;
+    onMarkerHover?: (marker: Marker | null) => void;
+}
+export declare enum StageMode {
+    DM = 0,
+    Player = 1
+}
+export interface DisplayProps {
+    /**
+     * The minimum padding around the grid relative to the edge of the scene.
+     * The actual padding may be greater depending on the grid layout.
+     */
+    padding: {
+        x: number;
+        y: number;
+    };
+    /**
+     * The size of the display in inches
+     */
+    size: {
+        x: number;
+        y: number;
+    };
+    /**
+     * The resolution of the display in pixels
+     */
+    resolution: {
+        x: number;
+        y: number;
+    };
+    /**
+     * Maximum device pixel ratio to use for rendering.
+     * Caps the pixel ratio to improve performance on high-DPI devices with weak GPUs.
+     * Defaults to 2 if not specified.
+     */
+    maxPixelRatio?: number;
+}
+/**
+ * Properties for the Stage component
+ */
+export type StageProps = {
+    mode: StageMode;
+    activeLayer: MapLayerType;
+    annotations: AnnotationsLayerProps;
+    backgroundColor: string;
+    debug: {
+        enableStats: boolean;
+        loggingRate: number;
+        enableMetrics: boolean;
+        logMetricsToConsole: boolean;
+        disabledLayers: string[];
+    };
+    display: DisplayProps;
+    fog: FogLayerProps;
+    edgeOverlay: EdgeOverlayProps;
+    fogOfWar: FogOfWarLayerProps;
+    grid: GridLayerProps;
+    map: MapLayerProps;
+    marker: MarkerLayerProps;
+    measurement: MeasurementLayerProps;
+    postProcessing: PostProcessingProps;
+    scene: SceneLayerProps;
+    weather: WeatherLayerProps;
+};
+export interface StageExports {
+    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;
+    };
+    scene: {
+        fit: () => void;
+        fill: () => void;
+        generateThumbnail: () => Promise<Blob>;
+    };
+    markers: {
+        isHoveringMarker: boolean;
+        isDraggingMarker: boolean;
+    };
+    measurement: {
+        getCurrentMeasurement: () => {
+            startPoint: {
+                x: number;
+                y: number;
+            } | null;
+            endPoint: {
+                x: number;
+                y: number;
+            } | null;
+            type: number;
+        } | null;
+        isDrawing: () => boolean;
+    };
+    onSceneChange: () => void;
+}

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

@@ -0,0 +1,5 @@
+export var StageMode;
+(function (StageMode) {
+    StageMode[StageMode["DM"] = 0] = "DM";
+    StageMode[StageMode["Player"] = 1] = "Player";
+})(StageMode || (StageMode = {}));

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

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import * as THREE from 'three';
+  import { onMount, onDestroy, untrack } from 'svelte';
+  import { T, useTask, useThrelte, type Props as ThrelteProps } from '@threlte/core';
+  import { WeatherType, type WeatherLayerPreset } from './types';
+  import ParticleSystem from '../ParticleSystem/ParticleSystem.svelte';
+  import type { StageProps } from '../Stage/types';
+
+  import SnowPreset from './presets/SnowPreset';
+  import RainPreset from './presets/RainPreset';
+  import LeavesPreset from './presets/LeavesPreset';
+  import AshPreset from './presets/AshPreset';
+
+  interface Props extends ThrelteProps<typeof THREE.Mesh> {
+    props: StageProps;
+    size: { x: number; y: number };
+  }
+
+  const { props, size, ...meshProps }: Props = $props();
+
+  const { renderer, renderStage } = useThrelte();
+  let weatherType: WeatherType | null = $state(null);
+  let weatherPreset: WeatherLayerPreset = $state(RainPreset);
+  let mesh: THREE.Mesh = $state(new THREE.Mesh());
+  let particleScene = $state(new THREE.Scene());
+  let particleCamera = $state(new THREE.PerspectiveCamera(90, 1, 0.01, 10));
+  particleCamera.position.set(0, 0, -1);
+  particleCamera.rotation.x = Math.PI;
+
+  // Render target for particle scene
+  const renderTarget = new THREE.WebGLRenderTarget(1, 1, {
+    format: THREE.RGBAFormat,
+    minFilter: THREE.LinearFilter,
+    magFilter: THREE.LinearFilter
+  });
+
+  // Material for displaying particles
+  const quadMaterial = new THREE.MeshBasicMaterial({
+    map: renderTarget.texture,
+    transparent: true,
+    blending: THREE.NormalBlending
+  });
+
+  onMount(() => {
+    if (particleCamera && particleScene) {
+      renderTarget.setSize(size.x, size.y);
+    }
+  });
+
+  onDestroy(() => {
+    renderTarget.dispose();
+    quadMaterial.dispose();
+  });
+
+  // If weather type changes, update the preset
+  $effect(() => {
+    if (props.weather.type === weatherType) {
+      return;
+    }
+
+    untrack(() => {
+      weatherType = props.weather.type;
+      switch (weatherType) {
+        case WeatherType.Snow:
+          weatherPreset = { ...SnowPreset };
+          break;
+        case WeatherType.Rain:
+          weatherPreset = { ...RainPreset };
+          break;
+        case WeatherType.Leaves:
+          weatherPreset = { ...LeavesPreset };
+          break;
+        case WeatherType.Custom:
+          weatherPreset = { ...(props.weather.custom || RainPreset) };
+          break;
+        case WeatherType.Ash:
+          weatherPreset = { ...AshPreset };
+          break;
+        default:
+          // Fallback to rain preset
+          weatherPreset = { ...RainPreset };
+      }
+    });
+  });
+
+  // Overrides for fov, intensity, and opacity set in the UI
+  $effect(() => {
+    if (props.weather.fov) {
+      weatherPreset.fov = props.weather.fov;
+    }
+
+    if (props.weather.intensity) {
+      weatherPreset.intensity = props.weather.intensity;
+    }
+
+    if (props.weather.opacity) {
+      weatherPreset.opacity = props.weather.opacity;
+    }
+  });
+
+  // Update the camera and render target when size changes
+  $effect(() => {
+    particleCamera.aspect = size.x / size.y;
+    particleCamera.fov = weatherPreset.fov;
+    particleCamera.updateProjectionMatrix();
+    renderTarget.setSize(size.x, size.y);
+  });
+
+  // Render particle scene directly to render target (bypasses unnecessary EffectComposer overhead)
+  useTask(
+    () => {
+      if (!particleScene || !particleCamera || !size) return;
+
+      particleScene.visible = true;
+      renderer.setRenderTarget(renderTarget);
+      renderer.clear();
+      renderer.render(particleScene, particleCamera);
+      renderer.setRenderTarget(null);
+      particleScene.visible = false;
+      quadMaterial.needsUpdate = true;
+    },
+    { stage: renderStage }
+  );
+</script>
+
+<!-- Remove the stencil mesh and keep only the particle scenes -->
+<T.Scene is={particleScene} visible={false}>
+  <T.PerspectiveCamera is={particleCamera} manual />
+  <ParticleSystem props={weatherPreset.particles} opacity={weatherPreset.opacity} intensity={weatherPreset.intensity} />
+</T.Scene>
+
+<T.Mesh bind:ref={mesh} {...meshProps} visible={props.weather.type !== WeatherType.None}>
+  <T.MeshBasicMaterial is={quadMaterial} />
+  <T.PlaneGeometry args={[size.x, size.y]} />
+</T.Mesh>

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

@@ -0,0 +1,13 @@
+import * as THREE from 'three';
+import { type Props as ThrelteProps } from '@threlte/core';
+import type { StageProps } from '../Stage/types';
+interface Props extends ThrelteProps<typeof THREE.Mesh> {
+    props: StageProps;
+    size: {
+        x: number;
+        y: number;
+    };
+}
+declare const WeatherLayer: import("svelte").Component<Props, {}, "">;
+type WeatherLayer = ReturnType<typeof WeatherLayer>;
+export default WeatherLayer;

package/dist/components/Stage/components/WeatherLayer/presets/AshPreset.d.ts

@@ -0,0 +1,3 @@
+import type { WeatherLayerPreset } from '../types';
+declare const _default: WeatherLayerPreset;
+export default _default;

package/dist/components/Stage/components/WeatherLayer/presets/AshPreset.js

@@ -0,0 +1,69 @@
+import { KernelSize } from 'postprocessing';
+export default {
+    fov: 20,
+    intensity: 0.5,
+    opacity: 0.8,
+    depthOfField: {
+        enabled: true,
+        focus: 0.75,
+        focalLength: 6.6,
+        bokehScale: 250.0,
+        kernelSize: KernelSize.LARGE
+    },
+    particles: {
+        maxParticleCount: 500,
+        opacity: 0.5,
+        type: 4,
+        color: '#404040',
+        fadeInTime: 5,
+        fadeOutTime: 2,
+        lifetime: 10,
+        spawnArea: {
+            minRadius: 0.01,
+            maxRadius: 0.08
+        },
+        initialVelocity: {
+            x: 0,
+            y: 0,
+            z: 0
+        },
+        force: {
+            linear: {
+                x: 0,
+                y: 0,
+                z: 0.01
+            },
+            exponential: {
+                x: 0,
+                y: 0,
+                z: 0
+            },
+            sinusoidal: {
+                amplitude: {
+                    x: 0.015,
+                    y: 0.014,
+                    z: 0
+                },
+                frequency: {
+                    x: 0.002,
+                    y: 0.0025,
+                    z: 0
+                }
+            }
+        },
+        rotation: {
+            alignRadially: false,
+            offset: 0,
+            velocity: 1,
+            randomize: true
+        },
+        scale: {
+            x: 1,
+            y: 1
+        },
+        size: {
+            min: 0.001,
+            max: 0.0013
+        }
+    }
+};

package/dist/components/Stage/components/WeatherLayer/presets/LeavesPreset.d.ts

@@ -0,0 +1,3 @@
+import type { WeatherLayerPreset } from '../types';
+declare const _default: WeatherLayerPreset;
+export default _default;

package/dist/components/Stage/components/WeatherLayer/presets/LeavesPreset.js

@@ -0,0 +1,68 @@
+import { KernelSize } from 'postprocessing';
+export default {
+    fov: 30,
+    intensity: 0.5,
+    opacity: 1,
+    depthOfField: {
+        enabled: true,
+        focus: 0.7,
+        focalLength: 4,
+        bokehScale: 50,
+        kernelSize: KernelSize.VERY_LARGE
+    },
+    particles: {
+        maxParticleCount: 50,
+        type: 3,
+        color: '#ffffff',
+        fadeInTime: 7,
+        fadeOutTime: 1,
+        lifetime: 15,
+        spawnArea: {
+            minRadius: 0.20142663043478262,
+            maxRadius: 0.27751358695652173
+        },
+        initialVelocity: {
+            x: 0,
+            y: 0,
+            z: 0
+        },
+        force: {
+            linear: {
+                x: 0,
+                y: 0,
+                z: 0.02
+            },
+            exponential: {
+                x: 0,
+                y: 0,
+                z: 0
+            },
+            sinusoidal: {
+                amplitude: {
+                    x: 0.01,
+                    y: 0.015,
+                    z: 0
+                },
+                frequency: {
+                    x: 0.3,
+                    y: 0.5,
+                    z: 0
+                }
+            }
+        },
+        rotation: {
+            alignRadially: false,
+            offset: 0,
+            velocity: 0.9,
+            randomize: true
+        },
+        scale: {
+            x: 1,
+            y: 1
+        },
+        size: {
+            min: 0.025611413043478262,
+            max: 0.0484375
+        }
+    }
+};

package/dist/components/Stage/components/WeatherLayer/presets/RainPreset.d.ts

@@ -0,0 +1,3 @@
+import type { WeatherLayerPreset } from '../types';
+declare const _default: WeatherLayerPreset;
+export default _default;

package/dist/components/Stage/components/WeatherLayer/presets/RainPreset.js

@@ -0,0 +1,67 @@
+export default {
+    fov: 70,
+    intensity: 0.7,
+    opacity: 1.0,
+    depthOfField: {
+        enabled: false,
+        focus: 0,
+        focalLength: 0,
+        bokehScale: 0,
+        kernelSize: 0
+    },
+    particles: {
+        maxParticleCount: 5000,
+        type: 2,
+        color: '#e0e0e0',
+        fadeInTime: 1,
+        fadeOutTime: 3,
+        lifetime: 3,
+        spawnArea: {
+            minRadius: 0.008,
+            maxRadius: 0.02
+        },
+        initialVelocity: {
+            x: 0,
+            y: 0,
+            z: 0
+        },
+        force: {
+            linear: {
+                x: 0,
+                y: 0,
+                z: 0.02
+            },
+            exponential: {
+                x: 0,
+                y: 0,
+                z: 0
+            },
+            sinusoidal: {
+                amplitude: {
+                    x: 0,
+                    y: 0,
+                    z: 0
+                },
+                frequency: {
+                    x: 5,
+                    y: 5,
+                    z: 5
+                }
+            }
+        },
+        rotation: {
+            alignRadially: true,
+            offset: 270,
+            velocity: 0,
+            randomize: false
+        },
+        scale: {
+            x: 0.2,
+            y: 1
+        },
+        size: {
+            min: 0.001,
+            max: 0.001
+        }
+    }
+};

package/dist/components/Stage/components/WeatherLayer/presets/SnowPreset.d.ts

@@ -0,0 +1,3 @@
+import type { WeatherLayerPreset } from '../types';
+declare const _default: WeatherLayerPreset;
+export default _default;

package/dist/components/Stage/components/WeatherLayer/presets/SnowPreset.js

@@ -0,0 +1,68 @@
+import { KernelSize } from 'postprocessing';
+export default {
+    fov: 90,
+    intensity: 0.2,
+    opacity: 0.8,
+    depthOfField: {
+        enabled: true,
+        focus: 0.7,
+        focalLength: 5.0,
+        bokehScale: 50.0,
+        kernelSize: KernelSize.LARGE
+    },
+    particles: {
+        maxParticleCount: 1000,
+        type: 1,
+        color: '#ffffff',
+        fadeInTime: 8,
+        fadeOutTime: 2,
+        lifetime: 10,
+        spawnArea: {
+            minRadius: 0.02,
+            maxRadius: 0.5
+        },
+        initialVelocity: {
+            x: 0,
+            y: 0,
+            z: 0
+        },
+        force: {
+            linear: {
+                x: 0,
+                y: 0,
+                z: 0.005
+            },
+            exponential: {
+                x: 0,
+                y: 0,
+                z: 0
+            },
+            sinusoidal: {
+                amplitude: {
+                    x: 0.002,
+                    y: 0.003,
+                    z: 0
+                },
+                frequency: {
+                    x: 2,
+                    y: 1,
+                    z: 0
+                }
+            }
+        },
+        rotation: {
+            alignRadially: false,
+            offset: 0,
+            velocity: 0,
+            randomize: true
+        },
+        scale: {
+            x: 1,
+            y: 1
+        },
+        size: {
+            min: 0.001,
+            max: 0.005
+        }
+    }
+};

package/dist/components/Stage/components/WeatherLayer/presets/index.d.ts

@@ -0,0 +1,5 @@
+import AshPreset from './AshPreset';
+import LeavesPreset from './LeavesPreset';
+import RainPreset from './RainPreset';
+import SnowPreset from './SnowPreset';
+export { AshPreset, LeavesPreset, RainPreset, SnowPreset };