package.json

@@ -16,7 +16,6 @@
     "install": "^0.13.0",
     "mobx": "^6.15.4",
     "mobx-react-lite": "^4.1.1",
-    "mobx-utils": "^6.1.1",
     "npm": "^11.16.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",

pnpm-lock.yaml

@@ -26,9 +26,6 @@ importers:
       mobx-react-lite:
         specifier: ^4.1.1
         version: 4.1.1(mobx@6.15.4)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      mobx-utils:
-        specifier: ^6.1.1
-        version: 6.1.1(mobx@6.15.4)
       npm:
         specifier: ^11.16.0
         version: 11.16.0
@@ -1020,11 +1017,6 @@ packages:
       react-native:
         optional: true
 
-  mobx-utils@6.1.1:
-    resolution: {integrity: sha512-ZR4tOKucWAHOdMjqElRl2BEvrzK7duuDdKmsbEbt2kzgVpuLuoYLiDCjc3QwWQl8CmOlxPgaZQpZ7emwNqPkIg==}
-    peerDependencies:
-      mobx: ^6.0.0
-
   mobx@6.15.4:
     resolution: {integrity: sha512-do+2UsEKRVT70W/QqP2F2sju2x4p2xZo+5/azXqKjXgTk2jfmzsLjzwW0YI8CBEjy4ZUdU8EunXocXXwJdCrtw==}
 
@@ -2297,10 +2289,6 @@ snapshots:
     optionalDependencies:
       react-dom: 19.2.6(react@19.2.6)
 
-  mobx-utils@6.1.1(mobx@6.15.4):
-    dependencies:
-      mobx: 6.15.4
-
   mobx@6.15.4: {}
 
   ms@2.1.3: {}

src/components/ObjectView.tsx

@@ -1,6 +1,6 @@
 import { observer } from "mobx-react-lite";
 import type { ObjectInstance } from "../types";
-import { useRef, type RefObject } from "react";
+import { useEffect, useRef, type RefObject } from "react";
 import type { Group } from "three";
 import { TransformControls, useHelper } from "@react-three/drei";
 import { BoxHelper } from "three";
@@ -15,6 +15,7 @@ type ObjectViewProps = {
 
 export const ObjectView = observer(function ({ object }: ObjectViewProps) {
     const groupRef = useRef<Group>(null);
+    const controlsRef = useRef<any>(null);
 
     const isSelected = state.worldEditor.isEnabled &&
         state.worldEditor.selectedObjectId === object.id;
@@ -28,24 +29,40 @@ export const ObjectView = observer(function ({ object }: ObjectViewProps) {
         ? state.worldEditor.selectedObjectMode
         : undefined;
 
-    function handleClick(e: ThreeEvent<MouseEvent>) {
+    useEffect(() => {
+        if (!isSelected)
+            return;
+        const controls = controlsRef.current;
+        if (!controls)
+            return;
+        const onDragChanged = (e: { value: boolean }) => {
+            state.worldEditor.setIsDragging(e.value);
+            if (!e.value) {
+                const group = groupRef.current;
+                if (group)
+                    state.worldEditor.setObjectTransform(
+                        object.id,
+                        group.position.toArray(),
+                        group.rotation.toArray().slice(0, 3) as R3,
+                        group.scale.toArray(),
+                    );
+            }
+        };
+        controls.addEventListener('dragging-changed', onDragChanged);
+        return () => {
+            controls.removeEventListener('dragging-changed', onDragChanged);
+            state.worldEditor.setIsDragging(false);
+        };
+    }, [isSelected]);
+
+    const handleClick = (e: ThreeEvent<MouseEvent>) => {
         if (!state.worldEditor.isEnabled)
             return;
         if (e.delta > 5)
             return;
         e.stopPropagation();
-        state.worldEditor.setSelectedObject(object.id, nextSelectionEditMode(selectionMode));
-    };
 
-    function handleTransformEnd() {
+        state.worldEditor.setSelectedObject(object.id, nextSelectionEditMode(selectionMode));
-        const group = groupRef.current;
-        if (group)
-            state.worldEditor.setObjectTransform(
-                object.id,
-                group.position.toArray(),
-                group.rotation.toArray().slice(0, 3) as R3,
-                group.scale.toArray(),
-            );
     };
 
     return (<>
@@ -54,7 +71,6 @@ export const ObjectView = observer(function ({ object }: ObjectViewProps) {
             <TransformControls
                 object={groupRef as RefObject<Group>}
                 mode={selectionMode}
-                onMouseUp={handleTransformEnd}
             />
         }
         <group

src/components/SceneEditorView.tsx

@@ -6,7 +6,6 @@ import { observer } from 'mobx-react-lite';
 import { state } from '../state';
 import { SceneView } from './SceneView';
 import type { Pos3 } from '../types/3d';
-import type { OrthographicCamera, PerspectiveCamera } from 'three';
 
 const CameraSync = observer(function ({ camera }: { camera: Pos3 }) {
     const { camera: threeCamera } = useThree();
@@ -23,29 +22,10 @@ const CameraSync = observer(function ({ camera }: { camera: Pos3 }) {
 export const SceneEditorView = observer(function () {
     const controlsRef = useRef<React.ComponentRef<typeof OrbitControls>>(null);
 
-    const cameraAtStart = useRef<string>('');
-
-    function cameraSnapshot(camera: OrthographicCamera | PerspectiveCamera): string {
-        return JSON.stringify({
-            position: camera.position,
-            rotation: camera.rotation,
-        });
-    }
-
-    const handleStart = () => {
-        const controls = controlsRef.current;
-        if (!controls)
-            return;
-        cameraAtStart.current = cameraSnapshot(controls.object);
-    };
-
     const handleEnd = () => {
         const controls = controlsRef.current;
         if (!controls)
             return;
-        const snapshot = cameraSnapshot(controls.object);
-        if (snapshot === cameraAtStart.current)
-            return;
         const [x, y, z] = controls.object.rotation.toArray();
         state.worldEditor.setCamera({
             position: controls.object.position.toArray(),
@@ -56,7 +36,7 @@ export const SceneEditorView = observer(function () {
     return (<>
         <OrbitControls
             ref={controlsRef}
-            onStart={handleStart}
+            enabled={!state.worldEditor.isDragging}
             onEnd={handleEnd}
             makeDefault
             enableDamping={false}

src/components/Toolbar.tsx

@@ -8,16 +8,11 @@ export const Toolbar = observer(function () {
         state.worldEditor.addObjectCloneAtRandomPosition('test1');
     }
 
-    function handleLoadWorld(): void {
-        state.world.load();
-    }
-
     function handleLoadMockWorld(): void {
         state.world.loadMock();
     }
 
     return <div className="toolbar">
-        <button onClick={handleLoadWorld}>Load</button>
         <button onClick={handleLoadMockWorld}>Load mock world</button>
         <button onClick={handleCloneTest1Object}>Clone test1</button>
     </div>

src/state/gameState.ts

@@ -1,6 +1,7 @@
 import { makeAutoObservable } from "mobx";
 import type { WorldState } from "./worldState";
 import type { RunningGameState, Scene } from "../types";
+import { clone } from "../utils";
 import type { Pos3 } from "../types/3d";
 import type { CameraProps } from "@react-three/fiber";
 
@@ -38,11 +39,15 @@ export class GameState {
     }
 
     public resume(): void {
-        this.state.paused = false;
+        const state = clone(this.world.data.state) as RunningGameState;
+        state.paused = false;
+        this.world.data.state = state;
     }
 
     public pause(): void {
-        this.state.paused = true;
+        const state = clone(this.world.data.state) as RunningGameState;
+        state.paused = true;
+        this.world.data.state = state;
     }
 
     public stop(): void {

src/state/worldEditorState.ts

@@ -1,6 +1,6 @@
-import { makeAutoObservable, runInAction } from "mobx";
+import { makeAutoObservable } from "mobx";
 import type { WorldState } from "./worldState";
-import type { ObjectInstance, Scene } from "../types";
+import type { ObjectInstance, Scene, World } from "../types";
 import { createObjectInstance } from "../utils/object";
 import { randomId } from "../utils";
 import type { Pos3, R3, V3 } from "../types/3d";
@@ -27,6 +27,7 @@ export class WorldEditorState {
 
     public selectedObjectId: string | undefined;
     public selectedObjectMode: SelectionEditMode | undefined;
+    public isDragging: boolean = false;
 
     constructor(world: WorldState) {
         this.world = world;
@@ -39,6 +40,7 @@ export class WorldEditorState {
 
     public setCamera(value: Pos3): void {
         this.world.data.editorCamera = value;
+        this.world.save();
     }
 
     public setSelectedObject(id: string, mode: SelectionEditMode): void {
@@ -51,6 +53,12 @@ export class WorldEditorState {
         this.selectedObjectMode = undefined;
     }
 
+    public setIsDragging(value: boolean): void {
+        this.isDragging = value;
+        if (!value)
+            this.world.save();
+    }
+
     public get scene(): Scene {
         return this.world.data.initialScene;
     }
@@ -59,15 +67,49 @@ export class WorldEditorState {
         return this.world.data.editorCamera;
     }
 
-    public setObjectTransform(id: string, position: V3, rotation: R3, scale: V3): void {
+    public mutateWorld(mutation: Partial<World>): void {
+        this.world.data = {
+            ...this.world.data,
+            ...mutation,
+        }
+    }
+
+    public mutateScene(mutation: Partial<Scene>): void {
+        this.mutateWorld({
+            initialScene: {
+                ...this.world.data.initialScene,
+                ...mutation,
+            }
+        });
+    }
+
+    public mutateObject(mutation: Partial<ObjectInstance> & Pick<ObjectInstance, 'id'>): void {
+        this.mutateScene({
+            objects: {
+                ...this.world.data.initialScene.objects,
+                [mutation.id]: {
+                    ...this.world.data.initialScene.objects[mutation.id],
+                    ...mutation,
+                },
+            },
+        });
+    }
+
+    public setObjectTransform(
+        id: string,
+        position: V3,
+        rotation: R3,
+        scale: V3,
+    ): void {
         const obj = this.scene.objects[id];
         if (!obj)
             return;
 
-        runInAction(() => { // all in one go
+        this.mutateObject({
-            obj.position = position;
+            ...obj,
-            obj.rotation = rotation;
+            position,
-            obj.scale = scale;
+            rotation,
+            scale,
         });
     }
 

src/state/worldState.ts

@@ -1,5 +1,4 @@
-import { makeAutoObservable, reaction, toJS } from "mobx";
+import { makeAutoObservable } from "mobx";
-import { deepObserve } from "mobx-utils";
 import { WorldFactory } from "../model/worldFactory";
 import type { ObjectType, World } from "../types";
 import type { VoxelType } from "../types/voxel";
@@ -11,35 +10,16 @@ import { clone } from "../utils";
 export class WorldState {
     public data: World = WorldFactory.create();
 
-    private saveTimer: ReturnType<typeof setTimeout> | undefined;
-
     constructor() {
         makeAutoObservable(this);
-        this.setupAutoSave();
-    }
-
-    private setupAutoSave() {
-        let disposeDeep: (() => void) | undefined;
-        reaction(
-            () => this.data,
-            (data) => {
-                disposeDeep?.();
-                disposeDeep = deepObserve(data, () => this.save());
-            },
-            { fireImmediately: true },
-        );
     }
 
     public reset() {
-        console.log('Resetting world...');
-
-        this.data = WorldFactory.create();
         state.worldEditor.resetSelectedObject();
+        this.data = WorldFactory.create();
     }
 
     public loadMock() {
-        console.log('Mocking world...');
-
         const objectId1 = 'object1';
 
         this.data = {
@@ -79,24 +59,16 @@ export class WorldState {
             },
         };
         state.worldEditor.resetSelectedObject();
+        this.save();
     }
 
     public load() {
-        console.log('Loading world...');
         this.data = WorldFactory.load() ?? WorldFactory.create();
         state.worldEditor.resetSelectedObject();
     }
 
     public save(): void {
-        console.log('Saving world...');
+        WorldFactory.save(this.data);
-        console.log((new Error('').stack!));
-        const { objectTypes, voxelTypes, ...debug } = toJS(this.data);
-        console.log(JSON.stringify(debug, undefined, 4));
-        // debounce
-        clearTimeout(this.saveTimer);
-        this.saveTimer = setTimeout(() => {
-            WorldFactory.save(toJS(this.data));
-        }, 500);
     }
 
     public getObjectTypeById(id: string): ObjectType | undefined {