@tableslayer/ui 0.1.4 → 0.1.6

package/src/lib/components/Stage/components/WeatherLayer/WeatherLayer.svelte

@@ -1,135 +0,0 @@
-<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/src/lib/components/Stage/components/WeatherLayer/presets/AshPreset.ts

@@ -1,71 +0,0 @@
-import { KernelSize } from 'postprocessing';
-import type { WeatherLayerPreset } from '../types';
-
-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
-    }
-  }
-} as WeatherLayerPreset;

package/src/lib/components/Stage/components/WeatherLayer/presets/LeavesPreset.ts

@@ -1,70 +0,0 @@
-import { KernelSize } from 'postprocessing';
-import type { WeatherLayerPreset } from '../types';
-
-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
-    }
-  }
-} as WeatherLayerPreset;

package/src/lib/components/Stage/components/WeatherLayer/presets/RainPreset.ts

@@ -1,68 +0,0 @@
-import type { WeatherLayerPreset } from '../types';
-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
-    }
-  }
-} as WeatherLayerPreset;

package/src/lib/components/Stage/components/WeatherLayer/presets/SnowPreset.ts

@@ -1,70 +0,0 @@
-import { KernelSize } from 'postprocessing';
-import type { WeatherLayerPreset } from '../types';
-
-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
-    }
-  }
-} as WeatherLayerPreset;

package/src/lib/components/Stage/components/WeatherLayer/presets/index.ts

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

package/src/lib/components/Stage/components/WeatherLayer/types.ts

@@ -1,35 +0,0 @@
-import type { KernelSize } from 'postprocessing';
-import type { ParticleSystemProps } from '../ParticleSystem/types';
-
-export enum WeatherType {
-  None = 0,
-  Rain = 1,
-  Snow = 2,
-  Leaves = 3,
-  Ash = 4,
-  Custom = 99
-}
-
-export interface DepthOfFieldConfig {
-  enabled: boolean;
-  focus: number;
-  focalLength: number;
-  bokehScale: number;
-  kernelSize: KernelSize;
-}
-
-export interface WeatherLayerPreset {
-  fov: number;
-  intensity: number;
-  opacity: number;
-  depthOfField: DepthOfFieldConfig;
-  particles: ParticleSystemProps;
-}
-
-export interface WeatherLayerProps {
-  type: WeatherType;
-  fov?: number;
-  intensity?: number;
-  opacity?: number;
-  custom?: WeatherLayerPreset;
-}

package/src/lib/components/Stage/helpers/clippingPlaneStore.svelte.ts

@@ -1,28 +0,0 @@
-import * as THREE from 'three';
-import type { SceneLayerProps } from '../components/Scene/types';
-import type { DisplayProps } from '../components/Stage/types';
-
-export const clippingPlaneStore: { value: THREE.Plane[] } = $state({
-  value: [
-    new THREE.Plane(new THREE.Vector3(-1, 0, 0)),
-    new THREE.Plane(new THREE.Vector3(1, 0, 0)),
-    new THREE.Plane(new THREE.Vector3(0, 1, 0)),
-    new THREE.Plane(new THREE.Vector3(0, -1, 0))
-  ]
-});
-
-export function updateClippingPlanes(sceneProps: SceneLayerProps, displayProps: DisplayProps) {
-  // Whenever the scene is translated/zoomed, update the clipping planes
-  const { x, y } = sceneProps.offset;
-  const worldExtents = {
-    x: sceneProps.zoom * (displayProps.resolution.x / 2),
-    y: sceneProps.zoom * (displayProps.resolution.y / 2)
-  };
-
-  clippingPlaneStore.value = [
-    new THREE.Plane(new THREE.Vector3(-1, 0, 0), worldExtents.x + x),
-    new THREE.Plane(new THREE.Vector3(1, 0, 0), worldExtents.x - x),
-    new THREE.Plane(new THREE.Vector3(0, 1, 0), worldExtents.y - y),
-    new THREE.Plane(new THREE.Vector3(0, -1, 0), worldExtents.y + y)
-  ];
-}

package/src/lib/components/Stage/helpers/debugState.svelte.ts

@@ -1,18 +0,0 @@
-/**
- * Global debug state that persists independently of stageProps.
- * This prevents debug settings from being reset when stageProps are rebuilt.
- */
-export const debugState: {
-  enableMetrics: boolean;
-  logMetricsToConsole: boolean;
-} = $state({
-  enableMetrics: false,
-  logMetricsToConsole: false
-});
-
-export const setDebugEnabled = (enabled: boolean) => {
-  debugState.enableMetrics = enabled;
-  debugState.logMetricsToConsole = enabled;
-};
-
-export const isDebugEnabled = () => debugState.enableMetrics;