object rotation and scaling in editor

src/components/ObjectView.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef, type RefObject } from "react";
 import type { Group, Mesh } from "three";
 import { Edges, TransformControls } from "@react-three/drei";
 import { state } from "../state";
+import { nextSelectionEditMode } from "../state/worldEditor";
 
 type ObjectViewProps = {
     object: ObjectInstance;
@@ -18,6 +19,9 @@ export const ObjectView = observer(function ({ object }: ObjectViewProps) {
         return null;
     const isSelected = state.worldEditor.isEnabled &&
         state.worldEditor.selectedObjectId === object.id;
+    const selectionMode = isSelected
+        ? state.worldEditor.selectedObjectMode
+        : undefined;
 
     useEffect(() => {
         if (!isSelected)
@@ -38,7 +42,7 @@ export const ObjectView = observer(function ({ object }: ObjectViewProps) {
             return;
         e.stopPropagation();
 
-        state.worldEditor.setSelectedObjectId(object.id);
+        state.worldEditor.setSelectedObject(object.id, nextSelectionEditMode(selectionMode));
     };
 
     const handleObjectChange = () => {
@@ -46,13 +50,30 @@ export const ObjectView = observer(function ({ object }: ObjectViewProps) {
         if (!group)
             return;
 
-        const { x, y, z } = group.position;
-        state.worldEditor.setObjectPosition(object.id, [x, y, z]);
+        state.worldEditor.setObjectTransform(
+            object.id,
+            group.position.toArray(),
+            group.rotation.toArray().slice(0, 3), // chop EulerOrder off array
+            group.scale.toArray(),
+        );
     };
 
     return (<>
-        {(isSelected && groupRef.current) && <TransformControls object={groupRef as RefObject<Group>} onChange={handleObjectChange} mode="translate" />}
-        <group ref={groupRef} position={object.position} rotation={object.rotation} onClick={handleClick}>
+        {
+            (isSelected && (selectionMode !== undefined) && groupRef.current) &&
+            <TransformControls
+                object={groupRef as RefObject<Group>}
+                onChange={handleObjectChange}
+                mode={selectionMode}
+            />
+        }
+        <group
+            ref={groupRef}
+            position={object.position}
+            rotation={object.rotation}
+            scale={object.scale}
+            onClick={handleClick}
+        >
             {
                 objectType.voxels.map((v, idx) => {
                     const vt = state.world.getVoxelTypeById(v.typeId);

src/components/ThreeView.tsx

@@ -8,7 +8,7 @@ export const ThreeView = observer(function () {
         <div style={{ width: '800px', height: '600px', border: '1px solid #333', borderRadius: '8px', overflow: 'hidden' }}>
             <Canvas
                 camera={state.world.character.camera}
-                onPointerMissed={() => state.worldEditor.setSelectedObjectId(undefined)}
+                onPointerMissed={() => state.worldEditor.resetSelectedObject()}
             >
                 <WorldView />
             </Canvas>