fix: align PinMode default to 'none' in controller; robust pointer anisotropy; shared pointer radius helper; reset new palette states; raise MIN clamp to 46

Author: flyingrobots

src/App.tsx

@@ -610,11 +610,15 @@ function Demo() {
           setGravity(9.81)
           setImpulseMultiplier(1)
           setTessellationSegments(24)
+          setAutoTessellation(true)
+          setTessellationMin(6)
+          setTessellationMax(24)
           setConstraintIterations(4)
           setSubsteps(1)
           setCameraZoom(1)
           setPointerColliderVisible(false)
           setPinMode("none")
+          setWorldSleepGuard(true)
           controllerRef.current?.setSleepConfig({ velocityThreshold: 0.001, frameThreshold: 60 })
           actionsRef.current?.setSleepConfig(0.001, 60)
         }}

src/engine/render/DebugOverlaySystem.ts

@@ -82,14 +82,21 @@ export class DebugOverlaySystem implements EngineSystem {
       // Try to compensate for orthographic anisotropy; fall back to uniform if anything is invalid.
       const cam = this.view.camera as THREE.Camera & Partial<THREE.OrthographicCamera>
       const maybeOrtho = cam as Partial<THREE.OrthographicCamera>
-      const left = Number((maybeOrtho.left as unknown) ?? NaN)
-      const right = Number((maybeOrtho.right as unknown) ?? NaN)
-      const top = Number((maybeOrtho.top as unknown) ?? NaN)
-      const bottom = Number((maybeOrtho.bottom as unknown) ?? NaN)
+      const left = typeof maybeOrtho.left === 'number' ? maybeOrtho.left : NaN
+      const right = typeof maybeOrtho.right === 'number' ? maybeOrtho.right : NaN
+      const top = typeof maybeOrtho.top === 'number' ? maybeOrtho.top : NaN
+      const bottom = typeof maybeOrtho.bottom === 'number' ? maybeOrtho.bottom : NaN
       const hasOrthoExtents = [left, right, top, bottom].every((v) => Number.isFinite(v))
       if (hasOrthoExtents) {
-        const worldWidth = Math.max(1e-6, right - left)
-        const worldHeight = Math.max(1e-6, top - bottom)
+        const rawWidth = right - left
+        const rawHeight = top - bottom
+        const worldWidth = Math.max(1e-6, Math.abs(rawWidth))
+        const worldHeight = Math.max(1e-6, Math.abs(rawHeight))
+        // Guard: inverted extents → uniform scale fallback
+        if (rawWidth <= 0 || rawHeight <= 0) {
+          mesh.scale.set(r, r, 1)
+          return
+        }
         let viewportWidth = 1
         let viewportHeight = 1
         const anyView = this.view as unknown as { getViewportPixels?: () => { width: number; height: number } }

src/lib/clothSceneController.ts

@@ -374,7 +374,7 @@ export class ClothSceneController {
     tessellationMin: 6,
     tessellationMax: 24,
     pointerCollider: false,
-    pinMode: 'top',
+    pinMode: 'none',
     worldSleepGuardEnabled: true,
   }
   private onPointerMove = (event: PointerEvent) => this.handlePointerMove(event)
@@ -523,7 +523,7 @@ export class ClothSceneController {
     const screenArea = Math.max(1, vpW * vpH)
     const s = Math.sqrt(area / screenArea) // proportion of screen by diagonal
 
-    const MIN_SEGMENTS = clamp(round(this.debug.tessellationMin ?? 6), 1, 40)
+    const MIN_SEGMENTS = clamp(round(this.debug.tessellationMin ?? 6), 1, 46)
     const MAX_TESSELLATION_CAP = 48
     const rawMax = round(maxCap)
     const maxUser = clamp(round(this.debug.tessellationMax ?? maxCap), MIN_SEGMENTS + 2, MAX_TESSELLATION_CAP)
@@ -825,20 +825,44 @@ export class ClothSceneController {
       for (const p of pts) pins.push(p)
     }
     this.overlayState.pinMarkers = pins
-    // Pointer collider radius: derive from first available record (active or static) to approximate
+    // Pointer collider radius: derive using shared helper; prefer first active item, else first available
     let r = 0.01
+    let found = false
     for (const item of this.items.values()) {
-      const record = item.record
-      if (!record) continue
-      const base = Math.min(record.widthMeters || 0, record.heightMeters || 0)
-      const MIN = 0.0006
-      const DEFAULT = 0.0012
-      r = base > 0 ? Math.max(MIN, base / 12) : DEFAULT
+      if (!item.isActive) continue
+      r = this.computePointerRadiusFor(item)
+      found = true
       break
     }
+    if (!found) {
+      for (const item of this.items.values()) {
+        r = this.computePointerRadiusFor(item)
+        found = true
+        break
+      }
+    }
     this.overlayState.pointerRadius = r
   }
 
+  /** Computes pointer collider radius in meters mirroring ClothBodyAdapter.getImpulseRadius logic. */
+  private computePointerRadiusFor(item: ClothItem) {
+    const attr = item.element.dataset.clothImpulseRadius
+    const parsed = attr ? Number.parseFloat(attr) : NaN
+    if (!Number.isNaN(parsed) && parsed > 0) {
+      return parsed
+    }
+    const record = item.record
+    const widthMeters = record?.widthMeters ?? 0
+    const heightMeters = record?.heightMeters ?? 0
+    const base = Math.min(widthMeters, heightMeters)
+    const MIN_POINTER_RADIUS = 0.0006
+    const DEFAULT_POINTER_RADIUS = 0.0012
+    if (base > 0) {
+      return Math.max(MIN_POINTER_RADIUS, base / 12)
+    }
+    return DEFAULT_POINTER_RADIUS
+  }
+
   private isSimSnapshot(value: unknown): value is import('./simWorld').SimWorldSnapshot {
     return Boolean(value && typeof value === 'object' && Array.isArray((value as import('./simWorld').SimWorldSnapshot).bodies))
   }