@dcl-regenesislabs/opendcl 0.2.1 → 0.2.2-26850672477.commit-99ffd91

package/skills/editor-gizmo/src/__editor/input.ts

@@ -0,0 +1,55 @@
+/** Key bindings, mode toggle, gizmo click flag, undo/redo. */
+
+import { inputSystem, InputAction, PointerEventType } from '@dcl/sdk/ecs'
+import { state, gizmoClickConsumed, setGizmoClickConsumed } from './state'
+import { createGizmo } from './gizmo'
+import { deselectEntity } from './selection'
+import { toggleEditorCamera, deactivateEditorCamera, focusSelectedEntity } from './camera'
+import { undo, redo } from './history'
+
+export function modeToggleSystem() {
+  if (!state.editorActive) return
+
+  if (inputSystem.isTriggered(InputAction.IA_PRIMARY, PointerEventType.PET_DOWN)) {
+    if (state.isDragging) return
+    state.gizmoMode = state.gizmoMode === 'translate' ? 'rotate' : 'translate'
+    console.log(`[editor] mode: ${state.gizmoMode}`)
+    if (state.selectedEntity !== undefined) createGizmo()
+  }
+
+  // F = deselect (select mode)
+  if (inputSystem.isTriggered(InputAction.IA_SECONDARY, PointerEventType.PET_DOWN)) {
+    if (state.isDragging) return
+    if (state.selectedEntity !== undefined) {
+      deselectEntity()
+    }
+  }
+
+  // 1 = toggle editor camera
+  if (inputSystem.isTriggered(InputAction.IA_ACTION_3, PointerEventType.PET_DOWN)) {
+    toggleEditorCamera()
+  }
+
+  // 2 = focus selected entity
+  if (inputSystem.isTriggered(InputAction.IA_ACTION_4, PointerEventType.PET_DOWN)) {
+    if (state.isDragging) return
+    if (state.selectedEntity !== undefined) {
+      if (!state.editorCamActive) toggleEditorCamera()
+      focusSelectedEntity()
+    }
+  }
+
+  // 4 = undo, Shift+4 = redo
+  if (inputSystem.isTriggered(InputAction.IA_ACTION_6, PointerEventType.PET_DOWN)) {
+    if (state.isDragging) return
+    if (inputSystem.isPressed(InputAction.IA_WALK)) {
+      redo()
+    } else {
+      undo()
+    }
+  }
+}
+
+export function resetGizmoClickFlag() {
+  if (gizmoClickConsumed) setGizmoClickConsumed(false)
+}

package/skills/editor-gizmo/src/__editor/math-utils.ts

@@ -0,0 +1,114 @@
+/** Pure math utilities — no ECS imports, fully unit-testable. */
+
+import { Vector3 } from '@dcl/sdk/math'
+import { Axis } from './state'
+
+export function axisToVector(axis: Axis): Vector3 {
+  switch (axis) {
+    case 'x': return Vector3.Right()
+    case 'y': return Vector3.Up()
+    case 'z': return Vector3.Forward()
+  }
+}
+
+/**
+ * Pick the drag plane normal most perpendicular to the camera forward.
+ * Avoids grazing-angle intersections.
+ *
+ * When worldAxis is provided (parent-rotated), candidates are computed
+ * as the two axes perpendicular to it. Otherwise falls back to world axes.
+ */
+export function getDragPlaneNormal(axis: Axis, cameraForward: Vector3, worldAxis?: Vector3): Vector3 {
+  let candidates: Vector3[]
+
+  if (worldAxis) {
+    // Build two axes perpendicular to the (potentially rotated) drag axis
+    const up = Vector3.Up()
+    let perp1 = Vector3.cross(worldAxis, up)
+    if (Vector3.length(perp1) < 0.001) {
+      // worldAxis is nearly vertical — use Forward as fallback
+      perp1 = Vector3.cross(worldAxis, Vector3.Forward())
+    }
+    perp1 = Vector3.normalize(perp1)
+    const perp2 = Vector3.normalize(Vector3.cross(worldAxis, perp1))
+    candidates = [perp1, perp2]
+  } else {
+    const others = getOtherAxes(axis)
+    candidates = [axisToVector(others[0]), axisToVector(others[1])]
+  }
+
+  let best = candidates[0]
+  let bestDot = 0
+  for (const n of candidates) {
+    const d = Math.abs(Vector3.dot(cameraForward, n))
+    if (d > bestDot) { bestDot = d; best = n }
+  }
+  return best
+}
+
+/** Cast a ray against an infinite plane. Returns hit point or null. */
+export function rayPlaneIntersect(
+  rayOrigin: Vector3, rayDir: Vector3, planePoint: Vector3, planeNormal: Vector3
+): Vector3 | null {
+  const denom = Vector3.dot(planeNormal, rayDir)
+  if (Math.abs(denom) < 1e-6) return null
+  const diff = Vector3.subtract(planePoint, rayOrigin)
+  const t = Vector3.dot(diff, planeNormal) / denom
+  if (t < 0) return null
+  return Vector3.add(rayOrigin, Vector3.scale(rayDir, t))
+}
+
+/** Compute the angle of a hit point on the rotation plane via atan2. */
+export function hitAngleOnPlane(hit: Vector3, center: Vector3, axis: Axis): number {
+  const d = Vector3.subtract(hit, center)
+  switch (axis) {
+    case 'x': return Math.atan2(d.z, d.y)
+    case 'y': return Math.atan2(d.x, d.z)
+    case 'z': return Math.atan2(d.y, d.x)
+  }
+}
+
+export function copyVec3(dst: { x: number; y: number; z: number }, src: { x: number; y: number; z: number }) {
+  dst.x = src.x; dst.y = src.y; dst.z = src.z
+}
+
+export function copyQuat(dst: { x: number; y: number; z: number; w: number }, src: { x: number; y: number; z: number; w: number }) {
+  dst.x = src.x; dst.y = src.y; dst.z = src.z; dst.w = src.w
+}
+
+/**
+ * Compute the angle of a hit point on an arbitrarily oriented rotation plane.
+ * worldAxis is the plane normal (rotation axis in world space).
+ */
+export function hitAngleOnWorldPlane(hit: Vector3, center: Vector3, worldAxis: Vector3): number {
+  const d = Vector3.subtract(hit, center)
+  // Build two perpendicular vectors in the plane
+  const up = Math.abs(Vector3.dot(worldAxis, Vector3.Up())) < 0.99
+    ? Vector3.Up() : Vector3.Forward()
+  const u = Vector3.normalize(Vector3.cross(worldAxis, up))
+  const v = Vector3.normalize(Vector3.cross(worldAxis, u))
+  return Math.atan2(Vector3.dot(d, v), Vector3.dot(d, u))
+}
+
+export function getOtherAxes(axis: Axis): [Axis, Axis] {
+  switch (axis) {
+    case 'x': return ['y', 'z']
+    case 'y': return ['x', 'z']
+    case 'z': return ['x', 'y']
+  }
+}
+
+export function applyFlatTransform(
+  t: { position: {x:number;y:number;z:number}; rotation: {x:number;y:number;z:number;w:number}; scale: {x:number;y:number;z:number} },
+  s: { px:number; py:number; pz:number; rx:number; ry:number; rz:number; rw:number; sx:number; sy:number; sz:number }
+) {
+  t.position.x = s.px; t.position.y = s.py; t.position.z = s.pz
+  t.rotation.x = s.rx; t.rotation.y = s.ry; t.rotation.z = s.rz; t.rotation.w = s.rw
+  t.scale.x = s.sx;    t.scale.y = s.sy;    t.scale.z = s.sz
+}
+
+/** Round a number to N decimal places. */
+export function round(v: number, decimals: number = 2): number {
+  const f = Math.pow(10, decimals)
+  return Math.round(v * f) / f
+}

package/skills/editor-gizmo/src/__editor/persistence.ts

@@ -0,0 +1,113 @@
+/**
+ * Persistence — saves entity transforms to the preview server via HTTP.
+ *
+ *   POST {baseUrl}/editor/changes  → merge an entity update into main-entities.ts
+ *
+ * The server (sdk-commands in preview, opendcl-studio in web) is responsible
+ * for writing main-entities.ts on disk and triggering main.crdt regeneration.
+ *
+ * Uses `signedFetch` instead of plain `fetch` because opendcl-studio
+ * auth-gates this endpoint (signer address must match the scene owner).
+ * In the CLI preview server the endpoint is unauthenticated; the extra
+ * AuthChain headers signedFetch sends are simply ignored there. So the
+ * same call shape works in both contexts.
+ */
+
+import { Entity, Transform, engine, RealmInfo } from '@dcl/sdk/ecs'
+import { signedFetch } from '~system/SignedFetch'
+import { selectableInfoMap } from './state'
+import { round } from './math-utils'
+
+interface TransformPayload {
+  position: { x: number; y: number; z: number }
+  rotation: { x: number; y: number; z: number; w: number }
+  scale: { x: number; y: number; z: number }
+}
+
+interface ChangePayload {
+  components: { Transform: TransformPayload }
+}
+
+type ChangesMap = Record<string, ChangePayload>
+
+// Resolve baseUrl lazily at each send. RealmInfo is populated by the
+// runtime AFTER scene-module-load completes, so caching it once at
+// init time was racing with module init and pinning `null` forever —
+// the gizmo would work but every drag-end silently dropped the request.
+export function initPersistence(): void {
+  // Kept for symmetry with the editor's bootstrap call; no longer
+  // resolves baseUrl up front (see comment above).
+  const baseUrl = RealmInfo.getOrNull(engine.RootEntity)?.baseUrl
+  console.log(`[editor] persistence ready (baseUrl=${baseUrl ?? 'unresolved'})`)
+}
+
+function resolveBaseUrl(): string | null {
+  return RealmInfo.getOrNull(engine.RootEntity)?.baseUrl ?? null
+}
+
+/** Send the current transform of an entity to the server for persistence. */
+export function sendEntityUpdate(entity: Entity) {
+  const baseUrl = resolveBaseUrl()
+  if (!baseUrl) {
+    console.log('[editor] sendEntityUpdate: no realm baseUrl yet')
+    return
+  }
+  if (!Transform.has(entity)) return
+  const info = selectableInfoMap.get(entity)
+  if (!info) return
+
+  const t = Transform.get(entity)
+  const payload: ChangesMap = {
+    [info.name]: {
+      components: {
+        Transform: {
+          position: { x: round(t.position.x), y: round(t.position.y), z: round(t.position.z) },
+          rotation: {
+            x: round(t.rotation.x, 4),
+            y: round(t.rotation.y, 4),
+            z: round(t.rotation.z, 4),
+            w: round(t.rotation.w, 4),
+          },
+          scale: { x: round(t.scale.x), y: round(t.scale.y), z: round(t.scale.z) },
+        },
+      },
+    },
+  }
+
+  const url = `${baseUrl}/editor/changes`
+  const body = JSON.stringify(payload)
+
+  // signedFetch refuses non-https URLs by design. In local dev the studio
+  // serves http://localhost:3001 — fall back to plain fetch there. The
+  // server-side auth gate is correspondingly relaxed when DEV=true: in
+  // prod the editor-changes endpoint requires signedFetch + ownership.
+  if (url.startsWith('http://')) {
+    fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body,
+    })
+      .then((res) => {
+        if (!res.ok) console.log(`[editor] save returned ${res.status}`)
+      })
+      .catch((e) => console.log(`[editor] save failed: ${e}`))
+    return
+  }
+
+  signedFetch({
+    url,
+    init: {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body,
+    },
+  })
+    .then((res) => {
+      // signedFetch does NOT reject on non-2xx — log status so silent
+      // 401 (signer ≠ scene owner) or 400 (validation) is visible.
+      if (res.status !== undefined && (res.status < 200 || res.status >= 300)) {
+        console.log(`[editor] save returned ${res.status}: ${res.body ?? ''}`)
+      }
+    })
+    .catch((e) => console.log(`[editor] save failed: ${e}`))
+}

package/skills/editor-gizmo/src/__editor/selection.ts

@@ -0,0 +1,157 @@
+/** Select/deselect entities, highlight, collider management. */
+
+import {
+  Entity,
+  Transform,
+  MeshCollider,
+  Material,
+  MaterialTransparencyMode,
+  GltfContainer,
+  GltfNodeModifiers,
+  ColliderLayer,
+  PointerEvents,
+  pointerEventsSystem,
+  InputAction,
+} from '@dcl/sdk/ecs'
+import { Color4, Color3 } from '@dcl/sdk/math'
+import { state, selectableInfoMap, originalMaterials, gizmoClickConsumed } from './state'
+import { createGizmo, destroyGizmo } from './gizmo'
+
+const HIGHLIGHT_EMISSIVE = 0.6
+const HIGHLIGHT_ALPHA = 0.35
+
+/** Remove all collision so clicks pass through to gizmo handles behind the entity. */
+function disableCollider(entity: Entity) {
+  if (MeshCollider.has(entity)) {
+    MeshCollider.deleteFrom(entity)
+  }
+  if (GltfContainer.has(entity)) {
+    const gltf = GltfContainer.getMutable(entity)
+    gltf.visibleMeshesCollisionMask = 0
+    gltf.invisibleMeshesCollisionMask = 0
+  }
+}
+
+function restoreCollider(entity: Entity) {
+  const info = selectableInfoMap.get(entity)
+  if (!info) return
+
+  switch (info.colliderShape) {
+    case 'box':
+      MeshCollider.setBox(entity, ColliderLayer.CL_POINTER)
+      break
+    case 'sphere':
+      MeshCollider.setSphere(entity, ColliderLayer.CL_POINTER)
+      break
+    case 'cylinder':
+      MeshCollider.setCylinder(entity, undefined, undefined, ColliderLayer.CL_POINTER)
+      break
+  }
+
+  if (GltfContainer.has(entity) && info.originalVisibleMask !== undefined) {
+    const gltf = GltfContainer.getMutable(entity)
+    gltf.visibleMeshesCollisionMask = info.originalVisibleMask
+    gltf.invisibleMeshesCollisionMask = info.originalInvisibleMask ?? 0
+  }
+}
+
+function highlight(entity: Entity) {
+  // GLB models: use GltfNodeModifiers with empty path to make all nodes semi-transparent
+  if (GltfContainer.has(entity)) {
+    GltfNodeModifiers.createOrReplace(entity, {
+      modifiers: [{
+        path: '',
+        material: {
+          material: {
+            $case: 'pbr' as const,
+            pbr: {
+              albedoColor: Color4.create(1, 1, 1, HIGHLIGHT_ALPHA),
+              transparencyMode: MaterialTransparencyMode.MTM_ALPHA_BLEND,
+              metallic: 0.1,
+              roughness: 0.5,
+            }
+          }
+        }
+      }]
+    })
+    return
+  }
+
+  // Primitives: override Material directly
+  const m = originalMaterials.get(entity)
+  if (!m) return
+  Material.setPbrMaterial(entity, {
+    albedoColor: Color4.create(m.r, m.g, m.b, HIGHLIGHT_ALPHA),
+    emissiveColor: Color3.create(m.r * 0.4, m.g * 0.4, m.b * 0.4),
+    emissiveIntensity: HIGHLIGHT_EMISSIVE,
+    metallic: 0.1,
+    roughness: 0.4,
+    transparencyMode: MaterialTransparencyMode.MTM_ALPHA_BLEND,
+  })
+}
+
+function unhighlight(entity: Entity) {
+  // GLB models: remove the modifier
+  if (GltfContainer.has(entity) && GltfNodeModifiers.has(entity)) {
+    GltfNodeModifiers.deleteFrom(entity)
+    return
+  }
+
+  // Primitives: restore original material
+  const m = originalMaterials.get(entity)
+  if (!m) return
+  Material.setPbrMaterial(entity, {
+    albedoColor: Color4.create(m.r, m.g, m.b, m.a),
+    metallic: 0.1,
+    roughness: 0.5,
+  })
+}
+
+export function selectEntity(entity: Entity) {
+  if (state.selectedEntity === entity) {
+    deselectEntity()
+    return
+  }
+
+  const info = selectableInfoMap.get(entity)
+  if (!info) return
+
+  // Deselect previous
+  if (state.selectedEntity !== undefined) {
+    deselectEntity()
+  }
+
+  state.selectedEntity = entity
+  state.selectedName = info.name
+  // Remove pointer events completely so model doesn't intercept gizmo clicks
+  pointerEventsSystem.removeOnPointerDown(entity)
+  if (PointerEvents.has(entity)) PointerEvents.deleteFrom(entity)
+  highlight(entity)
+  disableCollider(entity)
+  createGizmo()
+  console.log(`[editor] selected: ${info.name}`)
+}
+
+export function deselectEntity() {
+  if (state.selectedEntity === undefined) return
+
+  const entity = state.selectedEntity
+  const info = selectableInfoMap.get(entity)
+  unhighlight(entity)
+  restoreCollider(entity)
+  destroyGizmo()
+
+  // Restore pointer event so entity is clickable again
+  if (info) {
+    pointerEventsSystem.onPointerDown(
+      { entity, opts: { button: InputAction.IA_POINTER, hoverText: `Select ${info.name}`, maxDistance: 100 } },
+      () => {
+        if (!state.editorActive || state.isDragging || gizmoClickConsumed) return
+        selectEntity(entity)
+      }
+    )
+  }
+
+  state.selectedEntity = undefined
+  state.selectedName = ''
+}

package/skills/editor-gizmo/src/__editor/state.ts

@@ -0,0 +1,117 @@
+/** Shared editor state — the single source of truth for all editor modules. */
+
+import { Entity } from '@dcl/sdk/ecs'
+import { Vector3, Quaternion } from '@dcl/sdk/math'
+
+export const EDITOR_VERSION = '0.6.0'
+
+export type Axis = 'x' | 'y' | 'z'
+export type GizmoMode = 'translate' | 'rotate'
+
+/** Maximum depth for parent chain walking (prevents infinite loops). */
+export const MAX_PARENT_DEPTH = 16
+
+// ── Per-entity info (populated by discovery) ────────────
+
+export interface SelectableInfo {
+  name: string
+  centerOffset: { x: number; y: number; z: number }
+  boundsSize: { x: number; y: number; z: number }
+  isModel: boolean
+  colliderShape: 'box' | 'sphere' | 'cylinder'
+  originalVisibleMask?: number
+  originalInvisibleMask?: number
+  src?: string
+  meshType?: 'box' | 'sphere' | 'cylinder'
+  parentEntity?: number
+}
+
+// ── Editor state ────────────────────────────────────────
+
+export interface EditorState {
+  selectedEntity: Entity | undefined
+  selectedName: string
+  gizmoMode: GizmoMode
+  isDragging: boolean
+  dragAxis: Axis
+
+  // Translate drag
+  dragPlaneMode: Axis | undefined  // when set, drag on plane perpendicular to this axis
+  dragStartPos: { x: number; y: number; z: number }
+  dragStartWorldPos: { x: number; y: number; z: number }
+  dragStartHit: { x: number; y: number; z: number }
+  dragPlaneNormal: { x: number; y: number; z: number }
+
+  // Rotate drag
+  dragStartRot: { x: number; y: number; z: number; w: number }
+  dragStartAngle: number
+  dragRotCenter: { x: number; y: number; z: number }
+
+  // Camera
+  editorCamActive: boolean
+
+  // Editor toggle (starts ON in preview)
+  editorActive: boolean
+
+  // Whether the scene is running in preview mode (set on init)
+  isPreview: boolean
+}
+
+export const state: EditorState = {
+  selectedEntity: undefined,
+  selectedName: '',
+  gizmoMode: 'translate',
+  isDragging: false,
+  dragPlaneMode: undefined,
+  dragAxis: 'x',
+  dragStartPos: Vector3.Zero(),
+  dragStartWorldPos: Vector3.Zero(),
+  dragStartHit: Vector3.Zero(),
+  dragPlaneNormal: Vector3.Up(),
+  dragStartRot: Quaternion.Identity(),
+  dragStartAngle: 0,
+  dragRotCenter: Vector3.Zero(),
+  editorCamActive: false,
+  editorActive: true,
+  isPreview: false,
+}
+
+// ── Entity tracking ─────────────────────────────────────
+
+/** Entities created by the editor (gizmo, ground plane) — skipped by discovery. */
+export const editorEntities = new Set<Entity>()
+
+/** Discovered scene entities → their info. */
+export const selectableInfoMap = new Map<Entity, SelectableInfo>()
+
+/** Original material colors for primitive highlight/unhighlight. */
+export const originalMaterials = new Map<Entity, { r: number; g: number; b: number; a: number }>()
+
+// ── Gizmo entities ──────────────────────────────────────
+
+export const gizmoEntities: Entity[] = []
+
+export let gizmoRoot: Entity | undefined
+export function setGizmoRoot(e: Entity | undefined) { gizmoRoot = e }
+
+export const handleAxisMap = new Map<Entity, Axis>()
+export const handleDiscMap = new Map<Entity, Entity>()
+export const handleArrowMap = new Map<Entity, Entity[]>()
+
+// ── Editor toggle callback ──────────────────────────────
+
+/** Set by index.ts to handle toggle cleanup (deselect, camera off, etc.) */
+let _onToggle: (() => void) | undefined
+export function setToggleHandler(fn: () => void) { _onToggle = fn }
+
+/** Toggle the editor on/off. Safe to call from UI — no circular deps. */
+export function toggleEditorActive() {
+  if (!state.isPreview) return
+  if (_onToggle) _onToggle()
+  else state.editorActive = !state.editorActive
+}
+
+// ── Click consumption flag ──────────────────────────────
+
+export let gizmoClickConsumed = false
+export function setGizmoClickConsumed(v: boolean) { gizmoClickConsumed = v }