Added horizontal entity translation.

web/build.gradle.kts

@@ -39,7 +39,7 @@ dependencies {
     implementation("io.ktor:ktor-client-serialization-js:$ktorVersion")
     implementation("org.jetbrains.kotlinx:kotlinx-serialization-core-js:1.0.0")
     implementation(npm("golden-layout", "1.5.9"))
-    implementation(npm("@babylonjs/core", "4.1.0"))
+    implementation(npm("@babylonjs/core", "4.2.0-rc.5"))
 
     testImplementation(kotlin("test-js"))
     testImplementation(project(":test-utils"))

web/src/main/kotlin/world/phantasmal/web/Main.kt

@@ -8,6 +8,8 @@ import kotlinx.browser.window
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.SupervisorJob
 import kotlinx.coroutines.cancel
+import mu.KotlinLoggingConfiguration
+import mu.KotlinLoggingLevel
 import org.w3c.dom.PopStateEvent
 import world.phantasmal.core.disposable.Disposable
 import world.phantasmal.core.disposable.Disposer
@@ -30,6 +32,10 @@ fun main() {
 }
 
 private fun init(): Disposable {
+    if (window.location.hostname == "localhost") {
+        KotlinLoggingConfiguration.LOG_LEVEL = KotlinLoggingLevel.TRACE
+    }
+
     val disposer = Disposer()
 
     val rootElement = document.body!!.root()

web/src/main/kotlin/world/phantasmal/web/core/BabylonExtensions.kt

@@ -4,6 +4,9 @@ import world.phantasmal.web.externals.babylon.Matrix
 import world.phantasmal.web.externals.babylon.Quaternion
 import world.phantasmal.web.externals.babylon.Vector3
 
+operator fun Vector3.plus(other: Vector3): Vector3 =
+    add(other)
+
 operator fun Vector3.plusAssign(other: Vector3) {
     addInPlace(other)
 }
@@ -15,6 +18,9 @@ operator fun Vector3.minusAssign(other: Vector3) {
     subtractInPlace(other)
 }
 
+operator fun Vector3.times(scalar: Double): Vector3 =
+    scale(scalar)
+
 infix fun Vector3.dot(other: Vector3): Double =
     Vector3.Dot(this, other)
 
@@ -41,3 +47,21 @@ fun Matrix.multiply3x3(v: Vector3) {
 operator fun Quaternion.timesAssign(other: Quaternion) {
     multiplyInPlace(other)
 }
+
+/**
+ * Returns a new quaternion that's the inverse of this quaternion.
+ */
+fun Quaternion.inverse(): Quaternion = Quaternion.Inverse(this)
+
+/**
+ * Transforms [p] by this versor.
+ */
+fun Quaternion.transform(p: Vector3) {
+    p.rotateByQuaternionToRef(this, p)
+}
+
+/**
+ * Returns a new point equal to [p] transformed by this versor.
+ */
+fun Quaternion.transformed(p: Vector3): Vector3 =
+    p.rotateByQuaternionToRef(this, Vector3.Zero())

web/src/main/kotlin/world/phantasmal/web/externals/babylon/babylon.kt

@@ -35,6 +35,7 @@ external class Vector3(x: Double, y: Double, z: Double) {
 
     fun set(x: Double, y: Double, z: Double): Vector2
     fun toQuaternion(): Quaternion
+    fun add(otherVector: Vector3): Vector3
     fun addInPlace(otherVector: Vector3): Vector3
     fun addInPlaceFromFloats(x: Double, y: Double, z: Double): Vector3
     fun subtract(otherVector: Vector3): Vector3
@@ -42,6 +43,19 @@ external class Vector3(x: Double, y: Double, z: Double) {
     fun negate(): Vector3
     fun negateInPlace(): Vector3
     fun cross(other: Vector3): Vector3
+
+    /**
+     * Returns a new Vector3 set with the current Vector3 coordinates multiplied by the float "scale"
+     */
+    fun scale(scale: Double): Vector3
+
+    /**
+     * Multiplies the Vector3 coordinates by the float "scale"
+     *
+     * @return the current updated Vector3
+     */
+    fun scaleInPlace(scale: Double): Vector3
+
     fun rotateByQuaternionToRef(quaternion: Quaternion, result: Vector3): Vector3
     fun clone(): Vector3
     fun copyFrom(source: Vector3): Vector3
@@ -94,6 +108,7 @@ external class Quaternion(
         fun FromEulerAngles(x: Double, y: Double, z: Double): Quaternion
         fun FromEulerAnglesToRef(x: Double, y: Double, z: Double, result: Quaternion): Quaternion
         fun RotationYawPitchRoll(yaw: Double, pitch: Double, roll: Double): Quaternion
+        fun Inverse(q: Quaternion): Quaternion
     }
 }
 
@@ -105,6 +120,8 @@ external class Matrix {
     fun equals(value: Matrix): Boolean
 
     companion object {
+        val IdentityReadOnly: Matrix
+
         fun Identity(): Matrix
         fun Compose(scale: Vector3, rotation: Quaternion, translation: Vector3): Matrix
     }
@@ -157,7 +174,17 @@ external class Engine(
     antialias: Boolean = definedExternally,
 ) : ThinEngine
 
-external class Ray(origin: Vector3, direction: Vector3, length: Double = definedExternally)
+external class Ray(origin: Vector3, direction: Vector3, length: Double = definedExternally) {
+    var origin: Vector3
+    var direction: Vector3
+    var length: Double
+
+    fun intersectsPlane(plane: Plane): Double?
+
+    companion object {
+        fun Zero(): Ray
+    }
+}
 
 external class PickingInfo {
     val bu: Double
@@ -191,6 +218,31 @@ external class Scene(engine: Engine) {
     fun removeLight(toRemove: Light)
     fun removeMesh(toRemove: TransformNode, recursive: Boolean? = definedExternally)
     fun removeTransformNode(toRemove: TransformNode)
+
+    fun createPickingRay(
+        x: Double,
+        y: Double,
+        world: Matrix,
+        camera: Camera?,
+        cameraViewSpace: Boolean = definedExternally,
+    ): Ray
+
+    fun createPickingRayToRef(
+        x: Double,
+        y: Double,
+        world: Matrix,
+        result: Ray,
+        camera: Camera?,
+        cameraViewSpace: Boolean = definedExternally,
+    ): Scene
+
+    fun createPickingRayInCameraSpaceToRef(
+        x: Double,
+        y: Double,
+        result: Ray,
+        camera: Camera = definedExternally,
+    ): Scene
+
     fun pick(
         x: Double,
         y: Double,
@@ -233,10 +285,9 @@ open external class Node {
     var metadata: Any?
     var parent: Node?
 
+    fun isEnabled(checkAncestors: Boolean = definedExternally): Boolean
     fun setEnabled(value: Boolean)
-    fun getViewMatrix(force: Boolean = definedExternally): Matrix
+    fun getWorldMatrix(): Matrix
-    fun getProjectionMatrix(force: Boolean = definedExternally): Matrix
-    fun getTransformationMatrix(): Matrix
 
     /**
      * Releases resources associated with this node.
@@ -257,7 +308,11 @@ open external class Camera : Node {
     val onViewMatrixChangedObservable: Observable<Camera>
     val onAfterCheckInputsObservable: Observable<Camera>
 
+    fun getViewMatrix(force: Boolean = definedExternally): Matrix
+    fun getProjectionMatrix(force: Boolean = definedExternally): Matrix
+    fun getTransformationMatrix(): Matrix
     fun attachControl(noPreventDefault: Boolean = definedExternally)
+    fun detachControl()
     fun storeState(): Camera
     fun restoreState(): Boolean
 }
@@ -290,6 +345,7 @@ external class ArcRotateCamera(
     var pinchDeltaPercentage: Double
     var wheelDeltaPercentage: Double
     var lowerBetaLimit: Double
+    val inputs: ArcRotateCameraInputsManager
 
     fun attachControl(
         element: HTMLCanvasElement,
@@ -299,6 +355,13 @@ external class ArcRotateCamera(
     )
 }
 
+open external class CameraInputsManager<TCamera : Camera> {
+    fun attachElement(noPreventDefault: Boolean = definedExternally)
+    fun detachElement(disconnect: Boolean = definedExternally)
+}
+
+external class ArcRotateCameraInputsManager : CameraInputsManager<ArcRotateCamera>
+
 abstract external class Light : Node
 
 external class HemisphericLight(name: String, direction: Vector3, scene: Scene) : Light {
@@ -389,6 +452,18 @@ external class MeshBuilder {
     }
 }
 
+external class Plane(a: Double, b: Double, c: Double, d: Double) {
+    var normal: Vector3
+    var d: Double
+
+    companion object {
+        /**
+         *	Note : the vector "normal" is updated because normalized.
+         */
+        fun FromPositionAndNormal(origin: Vector3, normal: Vector3): Plane
+    }
+}
+
 external class VertexData {
     var positions: Float32Array? // number[] | Float32Array
     var normals: Float32Array? // number[] | Float32Array

web/src/main/kotlin/world/phantasmal/web/questEditor/loading/AreaAssetLoader.kt

@@ -68,7 +68,7 @@ class AreaAssetLoader(
             scope.async {
                 val buffer = getAreaAsset(episode, areaVariant, AssetType.Collision)
                 val obj = parseAreaCollisionGeometry(buffer.cursor(Endianness.Little))
-                areaCollisionGeometryToTransformNode(scene, obj)
+                areaCollisionGeometryToTransformNode(scene, obj, episode, areaVariant)
             }
         }.await()
 
@@ -226,10 +226,15 @@ private fun areaGeometryToTransformNodeAndSections(
 private fun areaCollisionGeometryToTransformNode(
     scene: Scene,
     obj: CollisionObject,
+    episode: Episode,
+    areaVariant: AreaVariantModel,
 ): TransformNode {
-    val node = TransformNode("Collision Geometry", scene)
+    val node = TransformNode(
+        "Collision Geometry $episode-${areaVariant.area.id}-${areaVariant.id}",
+        scene
+    )
 
-    for (collisionMesh in obj.meshes) {
+    obj.meshes.forEachIndexed { i, collisionMesh ->
         val builder = VertexDataBuilder()
 
         for (triangle in collisionMesh.triangles) {
@@ -260,7 +265,11 @@ private fun areaCollisionGeometryToTransformNode(
         }
 
         if (builder.vertexCount > 0) {
-            val mesh = Mesh("Collision Geometry", scene, parent = node)
+            val mesh = Mesh(
+                "Collision Geometry $episode-${areaVariant.area.id}-${areaVariant.id}-$i",
+                scene,
+                parent = node
+            )
             builder.build().applyToMesh(mesh)
             mesh.metadata = CollisionMetadata()
         }

web/src/main/kotlin/world/phantasmal/web/questEditor/models/QuestEntityModel.kt

@@ -5,10 +5,9 @@ import world.phantasmal.lib.fileFormats.quest.EntityType
 import world.phantasmal.lib.fileFormats.quest.QuestEntity
 import world.phantasmal.observable.value.Val
 import world.phantasmal.observable.value.mutableVal
-import world.phantasmal.web.core.plusAssign
+import world.phantasmal.web.core.*
 import world.phantasmal.web.core.rendering.conversion.babylonToVec3
 import world.phantasmal.web.core.rendering.conversion.vec3ToBabylon
-import world.phantasmal.web.core.timesAssign
 import world.phantasmal.web.externals.babylon.Quaternion
 import world.phantasmal.web.externals.babylon.Vector3
 import kotlin.math.PI
@@ -75,11 +74,24 @@ abstract class QuestEntityModel<Type : EntityType, Entity : QuestEntity<Type>>(
         val section = section.value
 
         _worldPosition.value =
+            section?.rotationQuaternion?.transformed(pos)?.also {
+                it += section.position
+            } ?: pos
+    }
+
+    fun setWorldPosition(pos: Vector3) {
+        _worldPosition.value = pos
+
+        val section = section.value
+
+        val relPos =
             if (section == null) pos
-            else Vector3.Zero().also { worldPos ->
+            else (pos - section.position).also {
-                pos.rotateByQuaternionToRef(section.rotationQuaternion, worldPos)
+                section.inverseRotationQuaternion.transform(it)
-                worldPos += section.position
             }
+
+        entity.position = babylonToVec3(relPos)
+        _position.value = relPos
     }
 
     fun setRotation(rot: Vector3) {

web/src/main/kotlin/world/phantasmal/web/questEditor/models/SectionModel.kt

@@ -1,5 +1,6 @@
 package world.phantasmal.web.questEditor.models
 
+import world.phantasmal.web.core.inverse
 import world.phantasmal.web.externals.babylon.Quaternion
 import world.phantasmal.web.externals.babylon.Vector3
 
@@ -17,4 +18,6 @@ class SectionModel(
 
     val rotationQuaternion: Quaternion =
         Quaternion.FromEulerAngles(rotation.x, rotation.y, rotation.z)
+
+    val inverseRotationQuaternion: Quaternion = rotationQuaternion.inverse()
 }

web/src/main/kotlin/world/phantasmal/web/questEditor/rendering/AreaMeshManager.kt

@@ -20,8 +20,10 @@ class AreaMeshManager(
 
         try {
             val geom = areaAssetLoader.loadCollisionGeometry(episode, areaVariant)
-            geom.setEnabled(true)
+            // Call setEnabled(false) on renderer.collisionGeometry before calling setEnabled(true)
+            // on geom, because they can refer to the same object.
             renderer.collisionGeometry?.setEnabled(false)
+            geom.setEnabled(true)
             renderer.collisionGeometry = geom
         } catch (e: Exception) {
             logger.error(e) {

web/src/main/kotlin/world/phantasmal/web/questEditor/rendering/QuestRenderer.kt

@@ -16,12 +16,6 @@ class QuestRenderer(canvas: HTMLCanvasElement, engine: Engine) : Renderer(canvas
 
     init {
         with(camera) {
-            attachControl(
-                canvas,
-                noPreventDefault = false,
-                useCtrlForPanning = false,
-                panningMouseButton = 0
-            )
             inertia = 0.0
             angularSensibilityX = 200.0
             angularSensibilityY = 200.0
@@ -38,6 +32,8 @@ class QuestRenderer(canvas: HTMLCanvasElement, engine: Engine) : Renderer(canvas
                 updatePanningSensibility()
             })
 
+            enableCameraControls()
+
             camera.storeState()
         }
     }
@@ -46,6 +42,19 @@ class QuestRenderer(canvas: HTMLCanvasElement, engine: Engine) : Renderer(canvas
         camera.restoreState()
     }
 
+    fun enableCameraControls() {
+        camera.attachControl(
+            canvas,
+            noPreventDefault = false,
+            useCtrlForPanning = false,
+            panningMouseButton = 0
+        )
+    }
+
+    fun disableCameraControls() {
+        camera.detachControl()
+    }
+
     override fun render() {
         camera.minZ = max(0.01, camera.radius / 100)
         camera.maxZ = max(2_000.0, 10 * camera.radius)
@@ -53,8 +62,8 @@ class QuestRenderer(canvas: HTMLCanvasElement, engine: Engine) : Renderer(canvas
     }
 
     /**
-     * Make "panningSensibility" an inverse function of radius to make panning work "sensibly"
+     * Make "panningSensibility" an inverse function of radius to make panning work "sensibly" at
-     * at all distances.
+     * all distances.
      */
     private fun updatePanningSensibility() {
         camera.panningSensibility = 1_000 / camera.radius

web/src/main/kotlin/world/phantasmal/web/questEditor/rendering/UserInputManager.kt

@@ -5,25 +5,31 @@ import mu.KotlinLogging
 import org.w3c.dom.pointerevents.PointerEvent
 import world.phantasmal.core.disposable.Disposable
 import world.phantasmal.web.core.minus
+import world.phantasmal.web.core.plusAssign
+import world.phantasmal.web.core.times
 import world.phantasmal.web.externals.babylon.*
 import world.phantasmal.web.questEditor.models.QuestEntityModel
+import world.phantasmal.web.questEditor.models.SectionModel
 import world.phantasmal.web.questEditor.stores.QuestEditorStore
 import world.phantasmal.webui.DisposableContainer
 import world.phantasmal.webui.dom.disposableListener
 
 private val logger = KotlinLogging.logger {}
 
+private val ZERO_VECTOR = Vector3.Zero()
 private val DOWN_VECTOR = Vector3.Down()
 
 class UserInputManager(
-    private val questEditorStore: QuestEditorStore,
+    questEditorStore: QuestEditorStore,
     private val renderer: QuestRenderer,
 ) : DisposableContainer() {
+    private val stateContext = StateContext(questEditorStore, renderer)
     private val pointerPosition = Vector2.Zero()
     private val lastPointerPosition = Vector2.Zero()
     private var movedSinceLastPointerDown = false
     private var state: State
     private var onPointerUpListener: Disposable? = null
+    private var onPointerMoveListener: Disposable? = null
 
     /**
      * Whether entity transformations, deletions, etc. are enabled or not.
@@ -33,44 +39,79 @@ class UserInputManager(
         set(enabled) {
             field = enabled
             state.cancel()
-            state = IdleState(questEditorStore, renderer, enabled)
+            state = IdleState(stateContext, enabled)
         }
 
     init {
-        state = IdleState(questEditorStore, renderer, entityManipulationEnabled)
+        state = IdleState(stateContext, entityManipulationEnabled)
 
         observe(questEditorStore.selectedEntity) { state.cancel() }
 
         addDisposables(
             disposableListener(renderer.canvas, "pointerdown", ::onPointerDown)
         )
+
+        onPointerMoveListener = disposableListener(document, "pointermove", ::onPointerMove)
+    }
+
+    override fun internalDispose() {
+        onPointerUpListener?.dispose()
+        onPointerMoveListener?.dispose()
+        super.internalDispose()
     }
 
     private fun onPointerDown(e: PointerEvent) {
         processPointerEvent(e)
 
-        state = state.processEvent(PointerDownEvt(
+        state = state.processEvent(
-            e.buttons.toInt(),
+            PointerDownEvt(
-            movedSinceLastPointerDown
+                e.buttons.toInt(),
-        ))
+                shiftKeyDown = e.shiftKey,
+                movedSinceLastPointerDown,
+            )
+        )
 
         onPointerUpListener = disposableListener(document, "pointerup", ::onPointerUp)
+
+        // Stop listening to canvas move events and start listening to document move events.
+        onPointerMoveListener?.dispose()
+        onPointerMoveListener = disposableListener(document, "pointermove", ::onPointerMove)
     }
 
     private fun onPointerUp(e: PointerEvent) {
         try {
             processPointerEvent(e)
 
-            state = state.processEvent(PointerUpEvt(
+            state = state.processEvent(
-                e.buttons.toInt(),
+                PointerUpEvt(
-                movedSinceLastPointerDown
+                    e.buttons.toInt(),
-            ))
+                    shiftKeyDown = e.shiftKey,
+                    movedSinceLastPointerDown,
+                )
+            )
         } finally {
             onPointerUpListener?.dispose()
             onPointerUpListener = null
+
+            // Stop listening to document move events and start listening to canvas move events.
+            onPointerMoveListener?.dispose()
+            onPointerMoveListener =
+                disposableListener(renderer.canvas, "pointermove", ::onPointerMove)
         }
     }
 
+    private fun onPointerMove(e: PointerEvent) {
+        processPointerEvent(e)
+
+        state = state.processEvent(
+            PointerMoveEvt(
+                e.buttons.toInt(),
+                shiftKeyDown = e.shiftKey,
+                movedSinceLastPointerDown,
+            )
+        )
+    }
+
     private fun processPointerEvent(e: PointerEvent) {
         val rect = renderer.canvas.getBoundingClientRect()
         pointerPosition.set(e.clientX - rect.left, e.clientY - rect.top)
@@ -90,20 +131,134 @@ class UserInputManager(
     }
 }
 
+private class StateContext(
+    private val questEditorStore: QuestEditorStore,
+    val renderer: QuestRenderer,
+) {
+    private val plane = Plane.FromPositionAndNormal(Vector3.Up(), Vector3.Up())
+    private val ray = Ray.Zero()
+
+    val scene = renderer.scene
+
+    fun setSelectedEntity(entity: QuestEntityModel<*, *>?) {
+        questEditorStore.setSelectedEntity(entity)
+    }
+
+    fun translate(
+        entity: QuestEntityModel<*, *>,
+        dragAdjust: Vector3,
+        grabOffset: Vector3,
+        vertically: Boolean,
+    ) {
+        if (vertically) {
+            // TODO: Vertical translation.
+        } else {
+            translateEntityHorizontally(entity, dragAdjust, grabOffset)
+        }
+    }
+
+    /**
+     * If the drag-adjusted pointer is over the ground, translate an entity horizontally across the
+     * ground. Otherwise translate the entity over the horizontal plane that intersects its origin.
+     */
+    private fun translateEntityHorizontally(
+        entity: QuestEntityModel<*, *>,
+        dragAdjust: Vector3,
+        grabOffset: Vector3,
+    ) {
+        val pick = pickGround(scene.pointerX, scene.pointerY, dragAdjust)
+
+        if (pick == null) {
+            // If the pointer is not over the ground, we translate the entity across the horizontal
+            // plane in which the entity's origin lies.
+            scene.createPickingRayToRef(
+                scene.pointerX,
+                scene.pointerY,
+                Matrix.IdentityReadOnly,
+                ray,
+                renderer.camera
+            )
+
+            plane.d = -entity.worldPosition.value.y + grabOffset.y
+
+            ray.intersectsPlane(plane)?.let { distance ->
+                // Compute the intersection point.
+                val pos = ray.direction * distance
+                pos += ray.origin
+                // Compute the entity's new world position.
+                pos.x += grabOffset.x
+                pos.y = entity.worldPosition.value.y
+                pos.z += grabOffset.z
+
+                entity.setWorldPosition(pos)
+            }
+        } else {
+            // TODO: Set entity section.
+            entity.setWorldPosition(
+                Vector3(
+                    pick.pickedPoint!!.x,
+                    pick.pickedPoint.y + grabOffset.y - dragAdjust.y,
+                    pick.pickedPoint.z,
+                )
+            )
+        }
+    }
+
+    fun pickGround(x: Double, y: Double, dragAdjust: Vector3 = ZERO_VECTOR): PickingInfo? {
+        scene.createPickingRayToRef(
+            x,
+            y,
+            Matrix.IdentityReadOnly,
+            ray,
+            renderer.camera
+        )
+
+        ray.origin += dragAdjust
+
+        val pickingInfoArray = scene.multiPickWithRay(
+            ray,
+            { it.isEnabled() && it.metadata is CollisionMetadata },
+        )
+
+        if (pickingInfoArray != null) {
+            for (pickingInfo in pickingInfoArray) {
+                pickingInfo.getNormal()?.let { n ->
+                    // Don't allow entities to be placed on very steep terrain. E.g. walls.
+                    // TODO: make use of the flags field in the collision data.
+                    if (n.y > 0.75) {
+                        return pickingInfo
+                    }
+                }
+            }
+        }
+
+        return null
+    }
+}
+
 private sealed class Evt
 
 private sealed class PointerEvt : Evt() {
     abstract val buttons: Int
+    abstract val shiftKeyDown: Boolean
     abstract val movedSinceLastPointerDown: Boolean
 }
 
 private class PointerDownEvt(
     override val buttons: Int,
+    override val shiftKeyDown: Boolean,
     override val movedSinceLastPointerDown: Boolean,
 ) : PointerEvt()
 
 private class PointerUpEvt(
     override val buttons: Int,
+    override val shiftKeyDown: Boolean,
+    override val movedSinceLastPointerDown: Boolean,
+) : PointerEvt()
+
+private class PointerMoveEvt(
+    override val buttons: Int,
+    override val shiftKeyDown: Boolean,
     override val movedSinceLastPointerDown: Boolean,
 ) : PointerEvt()
 
@@ -113,13 +268,13 @@ private class Pick(
 
     /**
      * Vector that points from the grabbing point (somewhere on the model's surface) to the entity's
-     * position.
+     * origin.
      */
     val grabOffset: Vector3,
 
     /**
      * Vector that points from the grabbing point to the terrain point directly under the entity's
-     * position.
+     * origin.
      */
     val dragAdjust: Vector3,
 )
@@ -139,24 +294,28 @@ private abstract class State {
 }
 
 private class IdleState(
-    private val questEditorStore: QuestEditorStore,
+    private val ctx: StateContext,
-    private val renderer: QuestRenderer,
     private val entityManipulationEnabled: Boolean,
 ) : State() {
-    override fun processEvent(event: Evt): State =
+    override fun processEvent(event: Evt): State {
         when (event) {
             is PointerDownEvt -> {
                 pickEntity()?.let { pick ->
                     when (event.buttons) {
                         1 -> {
-                            questEditorStore.setSelectedEntity(pick.entity)
+                            ctx.setSelectedEntity(pick.entity)
 
                             if (entityManipulationEnabled) {
-                                // TODO: Enter TranslationState.
+                                return TranslationState(
+                                    ctx,
+                                    pick.entity,
+                                    pick.dragAdjust,
+                                    pick.grabOffset
+                                )
                             }
                         }
                         2 -> {
-                            questEditorStore.setSelectedEntity(pick.entity)
+                            ctx.setSelectedEntity(pick.entity)
 
                             if (entityManipulationEnabled) {
                                 // TODO: Enter RotationState.
@@ -164,8 +323,6 @@ private class IdleState(
                         }
                     }
                 }
-
-                this
             }
 
             is PointerUpEvt -> {
@@ -173,13 +330,18 @@ private class IdleState(
 
                 // If the user clicks on nothing, deselect the currently selected entity.
                 if (!event.movedSinceLastPointerDown && pickEntity() == null) {
-                    questEditorStore.setSelectedEntity(null)
+                    ctx.setSelectedEntity(null)
                 }
+            }
 
-                this
+            else -> {
+                // Do nothing.
             }
         }
 
+        return this
+    }
+
     override fun cancel() {
         // Do nothing.
     }
@@ -187,14 +349,17 @@ private class IdleState(
     private fun updateCameraTarget() {
         // If the user moved the camera, try setting the camera
         // target to a better point.
-        pickGround()?.pickedPoint?.let { newTarget ->
+        ctx.pickGround(
-            renderer.camera.target = newTarget
+            ctx.renderer.engine.getRenderWidth() / 2,
+            ctx.renderer.engine.getRenderHeight() / 2,
+        )?.pickedPoint?.let { newTarget ->
+            ctx.renderer.camera.target = newTarget
         }
     }
 
     private fun pickEntity(): Pick? {
         // Find the nearest object and NPC under the pointer.
-        val pickInfo = renderer.scene.pick(renderer.scene.pointerX, renderer.scene.pointerY)
+        val pickInfo = ctx.scene.pick(ctx.scene.pointerX, ctx.scene.pointerY)
         if (pickInfo?.pickedMesh == null) return null
 
         val entity = (pickInfo.pickedMesh.metadata as? EntityMetadata)?.entity
@@ -208,9 +373,9 @@ private class IdleState(
         val dragAdjust = grabOffset.clone()
 
         // Find vertical distance to the ground.
-        renderer.scene.pickWithRay(
+        ctx.scene.pickWithRay(
             Ray(pickInfo.pickedMesh.position, DOWN_VECTOR),
-            { it.metadata is CollisionMetadata },
+            { it.isEnabled() && it.metadata is CollisionMetadata },
         )?.let { groundPick ->
             dragAdjust.y -= groundPick.distance
         }
@@ -222,26 +387,81 @@ private class IdleState(
             dragAdjust,
         )
     }
+}
 
-    private fun pickGround(): PickingInfo? {
+private class TranslationState(
-        renderer.scene.multiPick(
+    private val ctx: StateContext,
-            renderer.engine.getRenderWidth() / 2,
+    private val entity: QuestEntityModel<*, *>,
-            renderer.engine.getRenderHeight() / 2,
+    private val dragAdjust: Vector3,
-            { it.metadata is CollisionMetadata },
+    private val grabOffset: Vector3,
-            renderer.camera,
+) : State() {
-        )?.let { pickingInfoArray ->
+    private val initialSection: SectionModel? = entity.section.value
-            // Don't allow entities to be placed on very steep terrain.
+    private val initialPosition: Vector3 = entity.worldPosition.value
-            // E.g. walls.
+    private var cancelled = false
-            // TODO: make use of the flags field in the collision data.
+
-            for (pickingInfo in pickingInfoArray) {
+    init {
-                pickingInfo.getNormal()?.let { n ->
+        ctx.renderer.disableCameraControls()
-                    if (n.y > 0.75) {
+    }
-                        return pickingInfo
+
+    override fun processEvent(event: Evt): State =
+        when (event) {
+            is PointerMoveEvt -> {
+                if (cancelled) {
+                    IdleState(ctx, entityManipulationEnabled = true)
+                } else {
+                    if (event.movedSinceLastPointerDown) {
+                        ctx.translate(
+                            entity,
+                            dragAdjust,
+                            grabOffset,
+                            vertically = event.shiftKeyDown,
+                        )
                     }
+
+                    this
                 }
             }
+
+            is PointerUpEvt -> {
+                ctx.renderer.enableCameraControls()
+
+                if (!cancelled && event.movedSinceLastPointerDown) {
+                    // TODO
+//                    questEditorStore.undo
+//                        .push(
+//                            new TranslateEntityAction (
+//                                    this.questEditorStore,
+//                            this.entity,
+//                            this.initialSection,
+//                            this.entity.section.
+//                            val ,
+//                                    this.initial_position,
+//                            this.entity.world_position.
+//                            val ,
+//                            true,
+//                        ),
+//                    )
+//                    .redo()
+                }
+
+                IdleState(ctx, entityManipulationEnabled = true)
+            }
+
+            else -> {
+                if (cancelled) {
+                    IdleState(ctx, entityManipulationEnabled = true)
+                } else this
+            }
         }
 
-        return null
+    override fun cancel() {
+        cancelled = true
+        ctx.renderer.enableCameraControls()
+
+        initialSection?.let {
+            entity.setSection(initialSection)
+        }
+
+        entity.setWorldPosition(initialPosition)
     }
 }