anton
/
blockly3d
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

world autosave on any edit/change

This commit is contained in:
azykov@mail.ru 2026-06-02 19:07:30 +03:00
parent 9217220505
commit 9145277681
No known key found for this signature in database
7 changed files with 86 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -16,6 +16,7 @@
"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",

12
pnpm-lock.yaml
View File

@ -26,6 +26,9 @@ 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
@ -1017,6 +1020,11 @@ 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==}
@ -2289,6 +2297,10 @@ 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: {}

44
src/components/ObjectView.tsx
View File

@ -1,6 +1,6 @@
import { observer } from "mobx-react-lite";
import type { ObjectInstance } from "../types";
import { useEffect, useRef, type RefObject } from "react";
import { useRef, type RefObject } from "react";
import type { Group } from "three";
import { TransformControls, useHelper } from "@react-three/drei";
import { BoxHelper } from "three";
@ -15,7 +15,6 @@ 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;
@ -29,48 +28,33 @@ export const ObjectView = observer(function ({ object }: ObjectViewProps) {
? state.worldEditor.selectedObjectMode
: undefined;
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>) => {
function 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() {
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 (<>
{
(isSelected && (selectionMode !== undefined) && groupRef.current) &&
<TransformControls
object={groupRef as RefObject<Group>}
mode={selectionMode}
onMouseUp={handleTransformEnd}
/>
}
<group

22
src/components/SceneEditorView.tsx
View File

@ -6,6 +6,7 @@ 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();
@ -22,10 +23,29 @@ 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(),
@ -36,7 +56,7 @@ export const SceneEditorView = observer(function () {
return (<>
<OrbitControls
ref={controlsRef}
enabled={!state.worldEditor.isDragging}
onStart={handleStart}
onEnd={handleEnd}
makeDefault
enableDamping={false}

5
src/components/Toolbar.tsx
View File

@ -8,11 +8,16 @@ 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>

8
src/state/worldEditorState.ts
View File

@ -27,7 +27,6 @@ export class WorldEditorState {
public selectedObjectId: string | undefined;
public selectedObjectMode: SelectionEditMode | undefined;
public isDragging: boolean = false;
constructor(world: WorldState) {
this.world = world;
@ -40,7 +39,6 @@ export class WorldEditorState {
public setCamera(value: Pos3): void {
this.world.data.editorCamera = value;
this.world.save();
}
public setSelectedObject(id: string, mode: SelectionEditMode): void {
@ -53,12 +51,6 @@ 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;
}

36
src/state/worldState.ts
View File

@ -1,4 +1,5 @@
import { makeAutoObservable, toJS } from "mobx";
import { makeAutoObservable, reaction, toJS } from "mobx";
import { deepObserve } from "mobx-utils";
import { WorldFactory } from "../model/worldFactory";
import type { ObjectType, World } from "../types";
import type { VoxelType } from "../types/voxel";
@ -10,16 +11,35 @@ 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() {
state.worldEditor.resetSelectedObject();
console.log('Resetting world...');
this.data = WorldFactory.create();
state.worldEditor.resetSelectedObject();
}
public loadMock() {
console.log('Mocking world...');
const objectId1 = 'object1';
this.data = {
@ -59,16 +79,24 @@ 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 {
WorldFactory.save(toJS(this.data));
console.log('Saving world...');
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 {