@supersoniks/concorde 4.9.96 → 4.9.97-visual-stack.0

package/src/core/components/functional/3d/ops.ts

@@ -0,0 +1,126 @@
+import type * as THREE from "three";
+import { load, type LoadCtx } from "./load";
+import { orbit } from "./orbit";
+import { pick, type HighlightCtx, type SceneHit } from "./pick";
+import { snapshot } from "./snapshot";
+import type { Sonic3dAsset, Sonic3dOutput } from "./types";
+import type { Sonic3dCameraMode } from "./constants";
+import type { OrbitControls } from "three/addons/controls/OrbitControls.js";
+import type { OrbitLimits } from "./orbit";
+
+export type OpsCtx = HighlightCtx &
+  LoadCtx & {
+    loadToken: number;
+    _ready: boolean;
+    _loading: boolean;
+    lastError: string | null;
+    lights: THREE.Light[];
+    scene: THREE.Scene;
+    renderer: THREE.WebGLRenderer;
+    controls: OrbitControls | null;
+    bbox: THREE.Box3;
+    target: THREE.Vector3;
+    mode: Sonic3dCameraMode;
+    fov: number;
+    perspCam: THREE.PerspectiveCamera;
+    orthoCam: THREE.OrthographicCamera;
+    activeCam: THREE.Camera;
+    limits: OrbitLimits;
+    unbindWheelRelay: (() => void) | null;
+  };
+
+async function runLoad(
+  ctx: OpsCtx,
+  asset: Sonic3dAsset | null,
+): Promise<void> {
+  const token = ++ctx.loadToken;
+  ctx._loading = true;
+  ctx._ready = false;
+  ctx.lastError = null;
+  try {
+    const result = await load.asset(
+      ctx,
+      asset,
+      token,
+      (t) => t === ctx.loadToken,
+    );
+    if (token !== ctx.loadToken) return;
+    ctx._ready = result.ready;
+    ctx._loading = false;
+  } catch (err) {
+    if (token !== ctx.loadToken) return;
+    ctx._loading = false;
+    ctx._ready = false;
+    ctx.lastError = err instanceof Error ? err.message : String(err);
+    throw err;
+  }
+}
+
+function fitToContent(ctx: OpsCtx) {
+  orbit.fitToContent({
+    bbox: ctx.bbox,
+    target: ctx.target,
+    activeCam: ctx.activeCam,
+    controls: ctx.controls,
+    mode: ctx.mode,
+    fov: ctx.fov,
+    perspCam: ctx.perspCam,
+    orthoCam: ctx.orthoCam,
+  });
+}
+
+function buildSnapshot(
+  ctx: OpsCtx,
+  base: {
+    time: number;
+    frame: number;
+    hovering: number;
+    pointerX: number;
+    pointerY: number;
+    hit?: SceneHit | null;
+  },
+): Sonic3dOutput {
+  return snapshot.build(
+    {
+      activeCam: ctx.activeCam,
+      controls: ctx.controls,
+      target: ctx.target,
+      mode: ctx.mode,
+      perspCam: ctx.perspCam,
+      orthoCam: ctx.orthoCam,
+      bbox: ctx.bbox,
+      ready: ctx._ready,
+      loading: ctx._loading,
+    },
+    base,
+  );
+}
+
+function dispose(ctx: OpsCtx, loseContext = false) {
+  ctx.loadToken++;
+  ctx.unbindWheelRelay?.();
+  ctx.unbindWheelRelay = null;
+  ctx.controls?.dispose();
+  ctx.controls = null;
+  load.clearContent(ctx);
+  load.revokeBlob(ctx);
+  for (const light of ctx.lights) ctx.scene.remove(light);
+  ctx.lights = [];
+  ctx.renderer.dispose();
+  if (loseContext) {
+    const ext = ctx.renderer.getContext()?.getExtension?.("WEBGL_lose_context");
+    ext?.loseContext?.();
+  }
+  ctx._ready = false;
+}
+
+export const ops = {
+  runLoad,
+  fitToContent,
+  buildSnapshot,
+  dispose,
+  pick: (ctx: HighlightCtx, x: number, y: number) => pick.hit(ctx, x, y),
+  setHoverAt: (ctx: HighlightCtx, x: number, y: number) =>
+    pick.setHoverAt(ctx, x, y),
+  clearHighlight: (ctx: HighlightCtx) => pick.clearHighlight(ctx),
+} as const;

package/src/core/components/functional/3d/opts.ts

@@ -0,0 +1,16 @@
+import type { Sonic3dCameraMode } from "./constants";
+
+export type SceneRuntimeOptions = {
+  canvas: HTMLCanvasElement;
+  dprMax?: number;
+  camera?: Sonic3dCameraMode;
+  fov?: number;
+  exposure?: number;
+  autoRotate?: boolean;
+  fit?: boolean;
+  minDistance?: number;
+  maxDistance?: number;
+  /** Polar angles in radians. */
+  minPolar?: number;
+  maxPolar?: number;
+};

package/src/core/components/functional/3d/orbit.ts

@@ -0,0 +1,185 @@
+import * as THREE from "three";
+import type { OrbitControls } from "three/addons/controls/OrbitControls.js";
+import { DEFAULT_FOV, Sonic3dCameraMode } from "./constants";
+
+export type OrbitLimits = {
+  minDistance: number;
+  maxDistance: number;
+  minPolar: number;
+  maxPolar: number;
+};
+
+export type OrbitSphericalCtx = {
+  activeCam: THREE.Camera;
+  controls: OrbitControls | null;
+  target: THREE.Vector3;
+  limits: OrbitLimits;
+};
+
+/** Applique les bornes distance / polar sur les OrbitControls. */
+function applyLimitsToControls(
+  controls: OrbitControls | null,
+  limits: OrbitLimits,
+) {
+  if (!controls) return;
+  controls.minDistance = limits.minDistance;
+  controls.maxDistance = limits.maxDistance;
+  controls.minPolarAngle = limits.minPolar;
+  controls.maxPolarAngle = limits.maxPolar;
+}
+
+/**
+ * Place la caméra en sphérique autour de la cible orbit
+ * (même convention que `Sonic3dOutput.yaw` / `pitch` / `distance`).
+ */
+function setSpherical(
+  ctx: OrbitSphericalCtx,
+  yaw: number,
+  pitch: number,
+  distance: number,
+) {
+  const t = ctx.controls?.target ?? ctx.target;
+  let d = Number.isFinite(distance) ? distance : 1;
+  d = Math.max(ctx.limits.minDistance, d);
+  if (Number.isFinite(ctx.limits.maxDistance)) {
+    d = Math.min(ctx.limits.maxDistance, d);
+  }
+  const elev = Math.max(
+    -(Math.PI / 2 - 0.05),
+    Math.min(Math.PI / 2 - 0.05, pitch),
+  );
+  const horiz = d * Math.cos(elev);
+  ctx.activeCam.position.set(
+    t.x + horiz * Math.sin(yaw),
+    t.y + d * Math.sin(elev),
+    t.z + horiz * Math.cos(yaw),
+  );
+  if (ctx.controls) {
+    ctx.controls.target.copy(t);
+    ctx.controls.update();
+  } else {
+    ctx.activeCam.lookAt(t);
+  }
+}
+
+export type FitCtx = {
+  bbox: THREE.Box3;
+  target: THREE.Vector3;
+  activeCam: THREE.Camera;
+  controls: OrbitControls | null;
+  mode: Sonic3dCameraMode;
+  fov: number;
+  perspCam: THREE.PerspectiveCamera;
+  orthoCam: THREE.OrthographicCamera;
+};
+
+function fitToContent(ctx: FitCtx) {
+  if (ctx.bbox.isEmpty()) return;
+  const size = new THREE.Vector3();
+  const center = new THREE.Vector3();
+  ctx.bbox.getSize(size);
+  ctx.bbox.getCenter(center);
+  ctx.target.copy(center);
+
+  const maxDim = Math.max(size.x, size.y, size.z, 0.001);
+  const dist =
+    ctx.mode === Sonic3dCameraMode.Ortho
+      ? maxDim * 1.8
+      : maxDim /
+          (2 * Math.tan(((ctx.fov || DEFAULT_FOV) * Math.PI) / 360)) *
+        1.35;
+
+  const dir = new THREE.Vector3(1, 0.65, 1).normalize();
+  ctx.activeCam.position.copy(center).addScaledVector(dir, dist);
+  if (ctx.controls) {
+    ctx.controls.target.copy(center);
+    ctx.controls.update();
+  } else {
+    ctx.activeCam.lookAt(center);
+  }
+
+  if (ctx.mode === Sonic3dCameraMode.Ortho) {
+    const aspect = ctx.perspCam.aspect || 1;
+    const frustum = maxDim * 0.75;
+    ctx.orthoCam.left = -frustum * aspect;
+    ctx.orthoCam.right = frustum * aspect;
+    ctx.orthoCam.top = frustum;
+    ctx.orthoCam.bottom = -frustum;
+    ctx.orthoCam.updateProjectionMatrix();
+  }
+}
+
+/** Merge partiel de bornes orbit (distances monde, polar radians). */
+function mergeLimits(
+  current: OrbitLimits,
+  opts: Partial<OrbitLimits>,
+): OrbitLimits {
+  const next = { ...current };
+  if (opts.minDistance != null && Number.isFinite(opts.minDistance)) {
+    next.minDistance = Math.max(0, opts.minDistance);
+  }
+  if (opts.maxDistance != null && Number.isFinite(opts.maxDistance)) {
+    next.maxDistance =
+      opts.maxDistance <= 0
+        ? Infinity
+        : Math.max(next.minDistance, opts.maxDistance);
+  }
+  if (opts.minPolar != null && Number.isFinite(opts.minPolar)) {
+    next.minPolar = Math.max(0, opts.minPolar);
+  }
+  if (opts.maxPolar != null && Number.isFinite(opts.maxPolar)) {
+    next.maxPolar = Math.min(Math.PI, Math.max(next.minPolar, opts.maxPolar));
+  }
+  return next;
+}
+
+const WHEEL_LIMIT_EPS = 1e-6;
+
+/**
+ * `true` si la molette changerait encore le zoom (marge restante).
+ * Aligné sur OrbitControls : deltaY < 0 = zoom in, > 0 = zoom out.
+ */
+function wheelAffectsZoom(controls: OrbitControls, deltaY: number): boolean {
+  if (!Number.isFinite(deltaY) || deltaY === 0) return false;
+  const zoomingIn = deltaY < 0;
+  const obj = controls.object;
+  if ((obj as THREE.OrthographicCamera).isOrthographicCamera) {
+    const z = (obj as THREE.OrthographicCamera).zoom;
+    return zoomingIn
+      ? z < controls.maxZoom - WHEEL_LIMIT_EPS
+      : z > controls.minZoom + WHEEL_LIMIT_EPS;
+  }
+  const dist = controls.getDistance();
+  if (zoomingIn) return dist > controls.minDistance + WHEEL_LIMIT_EPS;
+  if (!Number.isFinite(controls.maxDistance)) return true;
+  return dist < controls.maxDistance - WHEEL_LIMIT_EPS;
+}
+
+/**
+ * Aux bornes zoom : stoppe OrbitControls (qui fait toujours preventDefault)
+ * pour laisser le scroll page reprendre — comportement nav embarqué.
+ */
+function bindWheelPageScrollRelay(
+  canvas: HTMLElement,
+  getControls: () => OrbitControls | null,
+): () => void {
+  const onWheel = (event: WheelEvent) => {
+    const controls = getControls();
+    if (!controls?.enabled || !controls.enableZoom) return;
+    if (wheelAffectsZoom(controls, event.deltaY)) return;
+    event.stopImmediatePropagation();
+  };
+  canvas.addEventListener("wheel", onWheel, { capture: true, passive: true });
+  return () => {
+    canvas.removeEventListener("wheel", onWheel, { capture: true });
+  };
+}
+
+export const orbit = {
+  applyLimitsToControls,
+  setSpherical,
+  fitToContent,
+  mergeLimits,
+  wheelAffectsZoom,
+  bindWheelPageScrollRelay,
+} as const;

package/src/core/components/functional/3d/out-publish.ts

@@ -0,0 +1,140 @@
+import {
+  DEFAULT_OUT_INTERVAL_MS,
+  FORM_INPUT_ONLY_KEYS,
+  MIN_OUT_INTERVAL_MS,
+  OUT_CONSUMER_KEYS,
+} from "./constants";
+import { frameCapture } from "./frame-capture";
+import type { SceneHit } from "./pick";
+import { publisherFieldHasListener } from "./publisher-listen";
+import type { SceneRuntime } from "./runtime";
+import type { Sonic3dOutput } from "./types";
+
+type OutPublisherLike = {
+  _proxies_?: Map<string, { hasListener?: () => boolean }>;
+  get?: () => Record<string, unknown>;
+};
+
+export type OutPublishHost = {
+  outPublisher: OutPublisherLike | null;
+  outEventListeners: number;
+  outInterval: number;
+  snapshotInterval: number;
+  frameOut: boolean;
+  lastOutAt: number;
+  lastSnapshotAt: number;
+  snapshotBusy: boolean;
+  frameUrls: string[];
+  snapshotSeq: number;
+  runtime: SceneRuntime | null;
+  frame: number;
+  hovering: boolean;
+  pointerX: number;
+  pointerY: number;
+  lastHit: SceneHit | null;
+  fov: number;
+  formPublisher: OutPublisherLike | null;
+  bindOutPublisher: () => void;
+  dispatchEvent: (event: Event) => boolean;
+};
+
+function hasOutConsumers(host: OutPublishHost): boolean {
+  if (host.outEventListeners > 0) return true;
+  if (host.frameOut && host.outPublisher) return true;
+  if (!host.outPublisher) return false;
+  for (const key of OUT_CONSUMER_KEYS) {
+    if (publisherFieldHasListener(host.outPublisher, key)) return true;
+  }
+  return false;
+}
+
+/**
+ * Si form et out partagent le DP : ne pas réécrire les entrées pures
+ * (fov, exposure, autoRotate…). yaw/distance restent publiables.
+ */
+function shouldSkipFormControlOutWrite(
+  host: OutPublishHost,
+  key: string,
+): boolean {
+  if (!(FORM_INPUT_ONLY_KEYS as readonly string[]).includes(key)) return false;
+  if (!host.formPublisher || host.formPublisher !== host.outPublisher) {
+    return false;
+  }
+  return true;
+}
+
+function buildOutput(host: OutPublishHost, time: number): Sonic3dOutput {
+  return (
+    host.runtime?.snapshot({
+      time,
+      frame: host.frame,
+      hovering: host.hovering ? 1 : 0,
+      pointerX: host.pointerX,
+      pointerY: host.pointerY,
+      hit: host.lastHit,
+    }) ?? {
+      time,
+      frame: host.frame,
+      ready: 0,
+      loading: 0,
+      hovering: host.hovering ? 1 : 0,
+      pointerX: host.pointerX,
+      pointerY: host.pointerY,
+      camX: 0,
+      camY: 0,
+      camZ: 0,
+      targetX: 0,
+      targetY: 0,
+      targetZ: 0,
+      fov: host.fov,
+      zoom: 1,
+      distance: 0,
+      yaw: 0,
+      pitch: 0,
+    }
+  );
+}
+
+function writePayload(host: OutPublishHost, payload: Sonic3dOutput) {
+  const pub = host.outPublisher;
+  if (!pub) return;
+  for (const [key, value] of Object.entries(payload)) {
+    if (value === undefined) continue;
+    if (shouldSkipFormControlOutWrite(host, key)) continue;
+    // frameUrl / snapshot : écrits async par frameCapture
+    if ((frameCapture.FRAME_KEYS as readonly string[]).includes(key)) continue;
+    try {
+      (pub as Record<string, { set: (v: unknown) => void }>)[key].set(value);
+    } catch {
+      /* leaf manquant */
+    }
+  }
+}
+
+function maybePublish(host: OutPublishHost, now: number, time: number) {
+  if (!host.outPublisher) host.bindOutPublisher();
+  if (!hasOutConsumers(host) || !host.runtime) return;
+  const interval = Math.max(
+    MIN_OUT_INTERVAL_MS,
+    host.outInterval || DEFAULT_OUT_INTERVAL_MS,
+  );
+  if (now - host.lastOutAt >= interval) {
+    host.lastOutAt = now;
+    const payload = buildOutput(host, time);
+    writePayload(host, payload);
+    const outEventInit: CustomEventInit = {
+      detail: payload,
+      bubbles: true,
+      composed: true,
+    };
+    host.dispatchEvent(new CustomEvent("out", outEventInit));
+  }
+  frameCapture.maybeCapture(host, now);
+}
+
+export const outPublish = {
+  hasOutConsumers,
+  maybePublish,
+  buildOutput,
+  shouldSkipFormControlOutWrite,
+} as const;

package/src/core/components/functional/3d/parse.ts

@@ -0,0 +1,95 @@
+import { Sonic3dCameraMode } from "./constants";
+import type { Sonic3dAsset, Sonic3dAssetKind } from "./types";
+import { toMediaUrl } from "@supersoniks/concorde/core/utils/mediaRef";
+
+const ASSET_KINDS: readonly Sonic3dAssetKind[] = [
+  "gltf",
+  "glb",
+  "obj",
+  "ply",
+  "url",
+];
+
+function guessKind(url: string): Sonic3dAssetKind {
+  const path = url.split("?")[0].toLowerCase();
+  if (path.endsWith(".glb")) return "glb";
+  if (path.endsWith(".gltf")) return "gltf";
+  if (path.endsWith(".obj")) return "obj";
+  if (path.endsWith(".ply")) return "ply";
+  return "url";
+}
+
+/** Parse `camera` attr → mode connu ou Orbit. */
+function parseCameraMode(
+  value: string | null | undefined,
+): Sonic3dCameraMode {
+  const s = (value ?? "").trim().toLowerCase();
+  if (
+    s === Sonic3dCameraMode.Perspective ||
+    s === Sonic3dCameraMode.Ortho ||
+    s === Sonic3dCameraMode.Orbit
+  ) {
+    return s;
+  }
+  return Sonic3dCameraMode.Orbit;
+}
+
+/** Normalise une valeur DP / attr en `Sonic3dAsset | null`. */
+function parseAsset(value: unknown): Sonic3dAsset | null {
+  if (value == null || value === "") return null;
+  if (typeof value === "string") {
+    const url = value.trim();
+    return url ? { kind: guessKind(url), url } : null;
+  }
+  if (typeof value !== "object") return null;
+  const record = value as Record<string, unknown>;
+  const fromMedia = toMediaUrl(record);
+  const urlFromField =
+    typeof record.url === "string" ? record.url.trim() : "";
+  const url = urlFromField || fromMedia || "";
+  const blob = record.blob instanceof Blob ? record.blob : undefined;
+  if (!url && !blob) return null;
+  const kindRaw =
+    typeof record.kind === "string" ? record.kind.trim().toLowerCase() : "";
+  let kind: Sonic3dAssetKind;
+  if (ASSET_KINDS.includes(kindRaw as Sonic3dAssetKind)) {
+    kind = kindRaw as Sonic3dAssetKind;
+  } else if (url) {
+    kind = guessKind(url);
+  } else {
+    kind = "url";
+  }
+  const asset: Sonic3dAsset = { kind };
+  if (url) asset.url = url;
+  if (blob) asset.blob = blob;
+  if (record.morphTargets && typeof record.morphTargets === "object") {
+    asset.morphTargets = record.morphTargets as Record<string, number>;
+  }
+  return asset;
+}
+
+function toNum(v: unknown, fallback: number): number {
+  if (typeof v === "number" && Number.isFinite(v)) return v;
+  if (typeof v === "string" && v.trim() !== "") {
+    const n = Number(v);
+    if (Number.isFinite(n)) return n;
+  }
+  return fallback;
+}
+
+/**
+ * Flag form type checkbox unique : uniquement les valeurs explicitement vraies.
+ * `null` / absent / `"false"` → false (pas de fallback « garder l’ancien »).
+ */
+function isFormFlagOn(v: unknown): boolean {
+  return v === true || v === 1 || v === "1" || v === "true" || v === "on";
+}
+
+/** Parse / coerce helpers for sonic-3d attrs & form DP. */
+export const parse = {
+  cameraMode: parseCameraMode,
+  asset: parseAsset,
+  guessKind,
+  toNum,
+  isFormFlagOn,
+} as const;

package/src/core/components/functional/3d/pick.ts

@@ -0,0 +1,92 @@
+import * as THREE from "three";
+
+export type SceneHit = {
+  x: number;
+  y: number;
+  z: number;
+  objectId: string;
+};
+
+export type PickCtx = {
+  content: THREE.Object3D | null;
+  activeCam: THREE.Camera;
+  raycaster: THREE.Raycaster;
+  pointerNdc: THREE.Vector2;
+};
+
+export type HighlightCtx = PickCtx & {
+  highlighted: THREE.Mesh | null;
+  prevEmissive: THREE.Color;
+  prevEmissiveIntensity: number;
+};
+
+function raycastHits(
+  ctx: PickCtx,
+  normX: number,
+  normY: number,
+): THREE.Intersection[] {
+  if (!ctx.content) return [];
+  ctx.pointerNdc.set(normX * 2 - 1, -(normY * 2 - 1));
+  ctx.raycaster.setFromCamera(ctx.pointerNdc, ctx.activeCam);
+  return ctx.raycaster.intersectObject(ctx.content, true);
+}
+
+function hitFromIntersection(h: THREE.Intersection): SceneHit {
+  return {
+    x: h.point.x,
+    y: h.point.y,
+    z: h.point.z,
+    objectId: h.object.name || h.object.uuid,
+  };
+}
+
+/** Pick en coords normalisées host (0–1, origine haut-gauche CSS). */
+function hit(ctx: PickCtx, normX: number, normY: number): SceneHit | null {
+  const hits = raycastHits(ctx, normX, normY);
+  if (!hits.length) return null;
+  return hitFromIntersection(hits[0]);
+}
+
+function clearHighlight(ctx: HighlightCtx) {
+  if (!ctx.highlighted) return;
+  const mat = ctx.highlighted.material;
+  const std = (Array.isArray(mat) ? mat[0] : mat) as THREE.MeshStandardMaterial;
+  if (std && "emissive" in std) {
+    std.emissive.copy(ctx.prevEmissive);
+    std.emissiveIntensity = ctx.prevEmissiveIntensity;
+  }
+  ctx.highlighted = null;
+}
+
+/** Survol : léger emissive sur le mesh sous le pointeur. */
+function setHoverAt(
+  ctx: HighlightCtx,
+  normX: number,
+  normY: number,
+): SceneHit | null {
+  const hits = raycastHits(ctx, normX, normY);
+  const mesh = hits[0]?.object as THREE.Mesh | undefined;
+  const next = mesh?.isMesh ? mesh : null;
+  if (next === ctx.highlighted) {
+    return hits.length ? hitFromIntersection(hits[0]) : null;
+  }
+  clearHighlight(ctx);
+  if (!next) return null;
+  const mat = next.material;
+  const std = (Array.isArray(mat) ? mat[0] : mat) as THREE.MeshStandardMaterial;
+  if (std && "emissive" in std) {
+    ctx.highlighted = next;
+    ctx.prevEmissive.copy(std.emissive);
+    ctx.prevEmissiveIntensity = std.emissiveIntensity ?? 1;
+    std.emissive.set(0x3b82f6);
+    std.emissiveIntensity = 0.45;
+  }
+  return hitFromIntersection(hits[0]);
+}
+
+export const pick = {
+  hit,
+  setHoverAt,
+  clearHighlight,
+  raycastHits,
+} as const;