auto-git:
[add] playwright.config.js [add] src/app/App.js [add] src/app/editor-store.js [add] src/app/use-editor-store.js [add] src/assets/audio-assets.js [add] src/assets/gltf-model-import.js [add] src/assets/image-assets.js [add] src/assets/model-instance-labels.js [add] src/assets/model-instance-rendering.js [add] src/assets/model-instances.js [add] src/assets/project-asset-storage.js [add] src/assets/project-assets.js [add] src/commands/brush-command-helpers.js [add] src/commands/command-history.js [add] src/commands/command.js [add] src/commands/commit-transform-session-command.js [add] src/commands/create-box-brush-command.js [add] src/commands/delete-box-brush-command.js [add] src/commands/delete-entity-command.js [add] src/commands/delete-interaction-link-command.js [add] src/commands/delete-model-instance-command.js [add] src/commands/import-audio-asset-command.js [add] src/commands/import-background-image-asset-command.js [add] src/commands/import-model-asset-command.js [add] src/commands/move-box-brush-command.js [add] src/commands/resize-box-brush-command.js [add] src/commands/rotate-box-brush-command.js [add] src/commands/set-box-brush-face-material-command.js [add] src/commands/set-box-brush-face-uv-state-command.js [add] src/commands/set-box-brush-name-command.js [add] src/commands/set-box-brush-transform-command.js [add] src/commands/set-entity-name-command.js [add] src/commands/set-model-instance-name-command.js [add] src/commands/set-player-start-command.js [add] src/commands/set-scene-name-command.js [add] src/commands/set-world-settings-command.js [add] src/commands/upsert-entity-command.js [add] src/commands/upsert-interaction-link-command.js [add] src/commands/upsert-model-instance-command.js [add] src/core/ids.js [add] src/core/selection.js [add] src/core/tool-mode.js [add] src/core/transform-session.js [add] src/core/vector.js [add] src/core/whitebox-selection-feedback.js [add] src/core/whitebox-selection-mode.js [add] src/document/brushes.js [add] src/document/migrate-scene-document.js [add] src/document/scene-document-validation.js [add] src/document/scene-document.js [add] src/document/world-settings.js [add] src/entities/entity-instances.js [add] src/entities/entity-labels.js [add] src/geometry/box-brush-components.js [add] src/geometry/box-brush-mesh.js [add] src/geometry/box-brush.js [add] src/geometry/box-face-uvs.js [add] src/geometry/grid-snapping.js [add] src/geometry/model-instance-collider-debug-mesh.js [add] src/geometry/model-instance-collider-generation.js [add] src/interactions/interaction-links.js [add] src/main.js [add] src/materials/starter-material-library.js [add] src/materials/starter-material-textures.js [add] src/rendering/advanced-rendering.js [add] src/runner-web/RunnerCanvas.js [add] src/runtime-three/first-person-navigation-controller.js [add] src/runtime-three/navigation-controller.js [add] src/runtime-three/orbit-visitor-navigation-controller.js [add] src/runtime-three/player-collision.js [add] src/runtime-three/rapier-collision-world.js [add] src/runtime-three/runtime-audio-system.js [add] src/runtime-three/runtime-host.js [add] src/runtime-three/runtime-interaction-system.js [add] src/runtime-three/runtime-scene-build.js [add] src/runtime-three/runtime-scene-validation.js [add] src/serialization/local-draft-storage.js [add] src/serialization/scene-document-json.js [add] src/shared-ui/HierarchicalMenu.js [add] src/shared-ui/Panel.js [add] src/shared-ui/world-background-style.js [add] src/viewport-three/ViewportCanvas.js [add] src/viewport-three/ViewportPanel.js [add] src/viewport-three/viewport-entity-markers.js [add] src/viewport-three/viewport-focus.js [add] src/viewport-three/viewport-host.js [add] src/viewport-three/viewport-layout.js [add] src/viewport-three/viewport-transient-state.js [add] src/viewport-three/viewport-view-modes.js [add] tests/domain/box-brush-face-editing.command.test.js [add] tests/domain/build-runtime-scene.test.js [add] tests/domain/create-box-brush.command.test.js [add] tests/domain/create-empty-scene-document.test.js [add] tests/domain/editor-store.test.js [add] tests/domain/entity.command.test.js [add] tests/domain/interaction-links.validation.test.js [add] tests/domain/model-import.test.js [add] tests/domain/model-instance.command.test.js [add] tests/domain/player-start.command.test.js [add] tests/domain/rapier-collision-world.test.js [add] tests/domain/runtime-audio-system.test.js [add] tests/domain/runtime-interaction-system.test.js [add] tests/domain/runtime-scene-validation.test.js [add] tests/domain/scene-document-validation.test.js [add] tests/domain/transform-session.command.test.js [add] tests/domain/world-settings.command.test.js [add] tests/domain/world-settings.test.js [add] tests/e2e/app-smoke.e2e.js [add] tests/e2e/box-brush-authoring.e2e.js [add] tests/e2e/entities-foundation.e2e.js [add] tests/e2e/face-material-authoring.e2e.js [add] tests/e2e/first-room-workflow.e2e.js [add] tests/e2e/import-draco-model-asset.e2e.js [add] tests/e2e/import-external-model-asset.e2e.js [add] tests/e2e/import-model-asset.e2e.js [add] tests/e2e/local-lights-and-background.e2e.js [add] tests/e2e/orthographic-views.e2e.js [add] tests/e2e/runner-v1.e2e.js [add] tests/e2e/runtime-click-interaction.e2e.js [add] tests/e2e/runtime-trigger-teleport.e2e.js [add] tests/e2e/viewport-quad-layout.e2e.js [add] tests/e2e/viewport-test-helpers.js [add] tests/e2e/whitebox-component-selection.e2e.js [add] tests/e2e/world-environment.e2e.js [add] tests/geometry/box-brush-geometry.test.js [add] tests/geometry/box-face-uvs.test.js [add] tests/geometry/model-instance-collider-generation.test.js [add] tests/helpers/model-collider-fixtures.js [add] tests/serialization/local-draft-storage.test.js [add] tests/serialization/project-asset-storage.test.js [add] tests/serialization/scene-document-json.test.js [add] tests/setup/vitest.setup.js [add] tests/unit/audio-assets.test.js [add] tests/unit/entity-instances.test.js [add] tests/unit/package-scripts.test.js [add] tests/unit/transform-foundation.integration.test.js [add] tests/unit/viewport-canvas.test.js [add] tests/unit/viewport-entity-markers.test.js [add] tests/unit/viewport-focus.test.js [add] tests/unit/viewport-layout.test.js [add] tests/unit/viewport-view-modes.test.js [add] vite.config.js [add] vitest.config.js
This commit is contained in:
3547
src/app/App.js
Normal file
3547
src/app/App.js
Normal file
File diff suppressed because one or more lines are too long
391
src/app/editor-store.js
Normal file
391
src/app/editor-store.js
Normal file
@@ -0,0 +1,391 @@
|
||||
import { CommandHistory } from "../commands/command-history";
|
||||
import { areEditorSelectionsEqual, normalizeSelectionForWhiteboxSelectionMode } from "../core/selection";
|
||||
import {} from "../core/whitebox-selection-mode";
|
||||
import { areTransformSessionsEqual, cloneTransformSession, createInactiveTransformSession } from "../core/transform-session";
|
||||
import { createEmptySceneDocument } from "../document/scene-document";
|
||||
import { DEFAULT_SCENE_DRAFT_STORAGE_KEY, loadSceneDocumentDraft, saveSceneDocumentDraft } from "../serialization/local-draft-storage";
|
||||
import { parseSceneDocumentJson, serializeSceneDocument } from "../serialization/scene-document-json";
|
||||
import { areViewportToolPreviewsEqual, cloneViewportToolPreview, createDefaultViewportTransientState, isViewportToolPreviewCompatible } from "../viewport-three/viewport-transient-state";
|
||||
import { areViewportPanelCameraStatesEqual, cloneViewportLayoutState, cloneViewportPanelCameraState, createDefaultViewportLayoutState } from "../viewport-three/viewport-layout";
|
||||
export class EditorStore {
|
||||
document;
|
||||
selection = { kind: "none" };
|
||||
whiteboxSelectionMode = "object";
|
||||
toolMode = "select";
|
||||
viewportLayoutMode;
|
||||
activeViewportPanelId;
|
||||
viewportPanels;
|
||||
viewportQuadSplit;
|
||||
viewportTransientState = createDefaultViewportTransientState();
|
||||
previousEditingToolMode = "select";
|
||||
history = new CommandHistory();
|
||||
listeners = new Set();
|
||||
storage;
|
||||
storageKey;
|
||||
lastCommandLabel = null;
|
||||
snapshot;
|
||||
commandContext = {
|
||||
getDocument: () => this.document,
|
||||
setDocument: (document) => {
|
||||
this.document = document;
|
||||
},
|
||||
getSelection: () => this.selection,
|
||||
setSelection: (selection) => {
|
||||
this.selection = selection;
|
||||
},
|
||||
getToolMode: () => this.toolMode,
|
||||
setToolMode: (toolMode) => {
|
||||
this.toolMode = toolMode;
|
||||
}
|
||||
};
|
||||
constructor(options = {}) {
|
||||
const initialViewportLayoutState = cloneViewportLayoutState(options.initialViewportLayoutState ?? createDefaultViewportLayoutState());
|
||||
this.document = options.initialDocument ?? createEmptySceneDocument();
|
||||
this.viewportLayoutMode = initialViewportLayoutState.layoutMode;
|
||||
this.activeViewportPanelId = initialViewportLayoutState.activePanelId;
|
||||
this.viewportPanels = initialViewportLayoutState.panels;
|
||||
this.viewportQuadSplit = initialViewportLayoutState.viewportQuadSplit;
|
||||
this.storage = options.storage ?? null;
|
||||
this.storageKey = options.storageKey ?? DEFAULT_SCENE_DRAFT_STORAGE_KEY;
|
||||
this.snapshot = this.createSnapshot();
|
||||
}
|
||||
subscribe = (listener) => {
|
||||
this.listeners.add(listener);
|
||||
return () => {
|
||||
this.listeners.delete(listener);
|
||||
};
|
||||
};
|
||||
getState = () => this.snapshot;
|
||||
setToolMode(toolMode) {
|
||||
if (this.toolMode === toolMode) {
|
||||
return;
|
||||
}
|
||||
if (toolMode !== "play") {
|
||||
this.previousEditingToolMode = toolMode;
|
||||
}
|
||||
this.toolMode = toolMode;
|
||||
if (!isViewportToolPreviewCompatible(toolMode, this.viewportTransientState.toolPreview)) {
|
||||
this.viewportTransientState = {
|
||||
...this.viewportTransientState,
|
||||
toolPreview: createDefaultViewportTransientState().toolPreview
|
||||
};
|
||||
}
|
||||
if (toolMode !== "select" && this.viewportTransientState.transformSession.kind !== "none") {
|
||||
this.viewportTransientState = {
|
||||
...this.viewportTransientState,
|
||||
transformSession: createInactiveTransformSession()
|
||||
};
|
||||
}
|
||||
this.emit();
|
||||
}
|
||||
setViewportLayoutMode(viewportLayoutMode) {
|
||||
if (this.viewportLayoutMode === viewportLayoutMode) {
|
||||
return;
|
||||
}
|
||||
this.viewportLayoutMode = viewportLayoutMode;
|
||||
this.emit();
|
||||
}
|
||||
setActiveViewportPanel(panelId) {
|
||||
if (this.activeViewportPanelId === panelId) {
|
||||
return;
|
||||
}
|
||||
this.activeViewportPanelId = panelId;
|
||||
this.emit();
|
||||
}
|
||||
setViewportPanelViewMode(panelId, viewMode) {
|
||||
if (this.viewportPanels[panelId].viewMode === viewMode) {
|
||||
return;
|
||||
}
|
||||
this.viewportPanels = {
|
||||
...this.viewportPanels,
|
||||
[panelId]: {
|
||||
...this.viewportPanels[panelId],
|
||||
viewMode
|
||||
}
|
||||
};
|
||||
this.emit();
|
||||
}
|
||||
setViewportPanelDisplayMode(panelId, displayMode) {
|
||||
if (this.viewportPanels[panelId].displayMode === displayMode) {
|
||||
return;
|
||||
}
|
||||
this.viewportPanels = {
|
||||
...this.viewportPanels,
|
||||
[panelId]: {
|
||||
...this.viewportPanels[panelId],
|
||||
displayMode
|
||||
}
|
||||
};
|
||||
this.emit();
|
||||
}
|
||||
setViewportPanelCameraState(panelId, cameraState) {
|
||||
if (areViewportPanelCameraStatesEqual(this.viewportPanels[panelId].cameraState, cameraState)) {
|
||||
return;
|
||||
}
|
||||
this.viewportPanels = {
|
||||
...this.viewportPanels,
|
||||
[panelId]: {
|
||||
...this.viewportPanels[panelId],
|
||||
cameraState: cloneViewportPanelCameraState(cameraState)
|
||||
}
|
||||
};
|
||||
this.emit();
|
||||
}
|
||||
setViewportQuadSplit(viewportQuadSplit) {
|
||||
if (this.viewportQuadSplit.x === viewportQuadSplit.x && this.viewportQuadSplit.y === viewportQuadSplit.y) {
|
||||
return;
|
||||
}
|
||||
this.viewportQuadSplit = {
|
||||
x: viewportQuadSplit.x,
|
||||
y: viewportQuadSplit.y
|
||||
};
|
||||
this.emit();
|
||||
}
|
||||
setViewportToolPreview(toolPreview) {
|
||||
const nextToolPreview = cloneViewportToolPreview(toolPreview);
|
||||
if (areViewportToolPreviewsEqual(this.viewportTransientState.toolPreview, nextToolPreview)) {
|
||||
return;
|
||||
}
|
||||
this.viewportTransientState = {
|
||||
...this.viewportTransientState,
|
||||
toolPreview: nextToolPreview
|
||||
};
|
||||
this.emit();
|
||||
}
|
||||
clearViewportToolPreview(sourcePanelId) {
|
||||
const currentToolPreview = this.viewportTransientState.toolPreview;
|
||||
if (currentToolPreview.kind === "none") {
|
||||
return;
|
||||
}
|
||||
if (sourcePanelId !== undefined && currentToolPreview.sourcePanelId !== sourcePanelId) {
|
||||
return;
|
||||
}
|
||||
this.viewportTransientState = {
|
||||
...this.viewportTransientState,
|
||||
toolPreview: createDefaultViewportTransientState().toolPreview
|
||||
};
|
||||
this.emit();
|
||||
}
|
||||
setTransformSession(transformSession) {
|
||||
const nextTransformSession = cloneTransformSession(transformSession);
|
||||
if (areTransformSessionsEqual(this.viewportTransientState.transformSession, nextTransformSession)) {
|
||||
return;
|
||||
}
|
||||
this.viewportTransientState = {
|
||||
...this.viewportTransientState,
|
||||
transformSession: nextTransformSession
|
||||
};
|
||||
this.emit();
|
||||
}
|
||||
clearTransformSession() {
|
||||
if (this.viewportTransientState.transformSession.kind === "none") {
|
||||
return;
|
||||
}
|
||||
this.viewportTransientState = {
|
||||
...this.viewportTransientState,
|
||||
transformSession: createInactiveTransformSession()
|
||||
};
|
||||
this.emit();
|
||||
}
|
||||
setTransformAxisConstraint(axisConstraint) {
|
||||
if (this.viewportTransientState.transformSession.kind !== "active") {
|
||||
return;
|
||||
}
|
||||
if (this.viewportTransientState.transformSession.axisConstraint === axisConstraint) {
|
||||
return;
|
||||
}
|
||||
this.viewportTransientState = {
|
||||
...this.viewportTransientState,
|
||||
transformSession: {
|
||||
...cloneTransformSession(this.viewportTransientState.transformSession),
|
||||
axisConstraint
|
||||
}
|
||||
};
|
||||
this.emit();
|
||||
}
|
||||
setViewportViewMode(viewportViewMode) {
|
||||
this.setViewportPanelViewMode(this.activeViewportPanelId, viewportViewMode);
|
||||
}
|
||||
enterPlayMode() {
|
||||
if (this.toolMode === "play") {
|
||||
return;
|
||||
}
|
||||
this.previousEditingToolMode = this.toolMode;
|
||||
this.toolMode = "play";
|
||||
if (this.viewportTransientState.toolPreview.kind !== "none") {
|
||||
this.viewportTransientState = createDefaultViewportTransientState();
|
||||
}
|
||||
this.emit();
|
||||
}
|
||||
exitPlayMode() {
|
||||
if (this.toolMode !== "play") {
|
||||
return;
|
||||
}
|
||||
this.toolMode = this.previousEditingToolMode;
|
||||
this.emit();
|
||||
}
|
||||
setSelection(selection) {
|
||||
if (this.viewportTransientState.transformSession.kind === "active" && !areEditorSelectionsEqual(this.selection, selection)) {
|
||||
this.viewportTransientState = {
|
||||
...this.viewportTransientState,
|
||||
transformSession: createInactiveTransformSession()
|
||||
};
|
||||
}
|
||||
this.selection = selection;
|
||||
this.emit();
|
||||
}
|
||||
setWhiteboxSelectionMode(mode) {
|
||||
if (this.whiteboxSelectionMode === mode) {
|
||||
return;
|
||||
}
|
||||
if (this.viewportTransientState.transformSession.kind !== "none") {
|
||||
this.viewportTransientState = {
|
||||
...this.viewportTransientState,
|
||||
transformSession: createInactiveTransformSession()
|
||||
};
|
||||
}
|
||||
this.whiteboxSelectionMode = mode;
|
||||
this.selection = normalizeSelectionForWhiteboxSelectionMode(this.selection, mode);
|
||||
this.emit();
|
||||
}
|
||||
executeCommand(command) {
|
||||
if (this.viewportTransientState.transformSession.kind !== "none") {
|
||||
this.viewportTransientState = {
|
||||
...this.viewportTransientState,
|
||||
transformSession: createInactiveTransformSession()
|
||||
};
|
||||
}
|
||||
this.history.execute(command, this.commandContext);
|
||||
this.lastCommandLabel = command.label;
|
||||
this.emit();
|
||||
}
|
||||
undo() {
|
||||
let clearedTransformSession = false;
|
||||
if (this.viewportTransientState.transformSession.kind !== "none") {
|
||||
this.viewportTransientState = {
|
||||
...this.viewportTransientState,
|
||||
transformSession: createInactiveTransformSession()
|
||||
};
|
||||
clearedTransformSession = true;
|
||||
}
|
||||
const command = this.history.undo(this.commandContext);
|
||||
if (command === null) {
|
||||
if (clearedTransformSession) {
|
||||
this.emit();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
this.lastCommandLabel = `Undid ${command.label}`;
|
||||
this.emit();
|
||||
return true;
|
||||
}
|
||||
redo() {
|
||||
let clearedTransformSession = false;
|
||||
if (this.viewportTransientState.transformSession.kind !== "none") {
|
||||
this.viewportTransientState = {
|
||||
...this.viewportTransientState,
|
||||
transformSession: createInactiveTransformSession()
|
||||
};
|
||||
clearedTransformSession = true;
|
||||
}
|
||||
const command = this.history.redo(this.commandContext);
|
||||
if (command === null) {
|
||||
if (clearedTransformSession) {
|
||||
this.emit();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
this.lastCommandLabel = `Redid ${command.label}`;
|
||||
this.emit();
|
||||
return true;
|
||||
}
|
||||
replaceDocument(document, resetHistory = true) {
|
||||
this.document = document;
|
||||
this.selection = { kind: "none" };
|
||||
this.whiteboxSelectionMode = "object";
|
||||
this.toolMode = "select";
|
||||
this.previousEditingToolMode = "select";
|
||||
this.viewportTransientState = createDefaultViewportTransientState();
|
||||
if (resetHistory) {
|
||||
this.history.clear();
|
||||
this.lastCommandLabel = null;
|
||||
}
|
||||
this.emit();
|
||||
}
|
||||
saveDraft() {
|
||||
if (this.storage === null) {
|
||||
return {
|
||||
status: "error",
|
||||
message: "Browser local storage is unavailable."
|
||||
};
|
||||
}
|
||||
return saveSceneDocumentDraft(this.storage, this.document, this.createViewportLayoutState(), this.storageKey);
|
||||
}
|
||||
loadDraft() {
|
||||
if (this.storage === null) {
|
||||
return {
|
||||
status: "error",
|
||||
message: "Browser local storage is unavailable."
|
||||
};
|
||||
}
|
||||
const draftResult = loadSceneDocumentDraft(this.storage, this.storageKey);
|
||||
if (draftResult.status !== "loaded") {
|
||||
return draftResult;
|
||||
}
|
||||
this.replaceDocument(draftResult.document);
|
||||
if (draftResult.viewportLayoutState !== null) {
|
||||
this.applyViewportLayoutState(draftResult.viewportLayoutState);
|
||||
this.emit();
|
||||
}
|
||||
return draftResult;
|
||||
}
|
||||
exportDocumentJson() {
|
||||
return serializeSceneDocument(this.document);
|
||||
}
|
||||
importDocumentJson(source) {
|
||||
const document = parseSceneDocumentJson(source);
|
||||
this.replaceDocument(document);
|
||||
return document;
|
||||
}
|
||||
emit() {
|
||||
this.snapshot = this.createSnapshot();
|
||||
for (const listener of this.listeners) {
|
||||
listener();
|
||||
}
|
||||
}
|
||||
createViewportLayoutState() {
|
||||
return cloneViewportLayoutState({
|
||||
layoutMode: this.viewportLayoutMode,
|
||||
activePanelId: this.activeViewportPanelId,
|
||||
panels: this.viewportPanels,
|
||||
viewportQuadSplit: this.viewportQuadSplit
|
||||
});
|
||||
}
|
||||
applyViewportLayoutState(viewportLayoutState) {
|
||||
const nextViewportLayoutState = cloneViewportLayoutState(viewportLayoutState);
|
||||
this.viewportLayoutMode = nextViewportLayoutState.layoutMode;
|
||||
this.activeViewportPanelId = nextViewportLayoutState.activePanelId;
|
||||
this.viewportPanels = nextViewportLayoutState.panels;
|
||||
this.viewportQuadSplit = nextViewportLayoutState.viewportQuadSplit;
|
||||
}
|
||||
createSnapshot() {
|
||||
return {
|
||||
document: this.document,
|
||||
selection: this.selection,
|
||||
whiteboxSelectionMode: this.whiteboxSelectionMode,
|
||||
toolMode: this.toolMode,
|
||||
viewportLayoutMode: this.viewportLayoutMode,
|
||||
activeViewportPanelId: this.activeViewportPanelId,
|
||||
viewportPanels: this.viewportPanels,
|
||||
viewportQuadSplit: this.viewportQuadSplit,
|
||||
viewportTransientState: this.viewportTransientState,
|
||||
canUndo: this.history.canUndo(),
|
||||
canRedo: this.history.canRedo(),
|
||||
lastCommandLabel: this.lastCommandLabel,
|
||||
storageAvailable: this.storage !== null
|
||||
};
|
||||
}
|
||||
}
|
||||
export function createEditorStore(options) {
|
||||
return new EditorStore(options);
|
||||
}
|
||||
4
src/app/use-editor-store.js
Normal file
4
src/app/use-editor-store.js
Normal file
@@ -0,0 +1,4 @@
|
||||
import { useSyncExternalStore } from "react";
|
||||
export function useEditorStoreState(store) {
|
||||
return useSyncExternalStore(store.subscribe, store.getState, store.getState);
|
||||
}
|
||||
Reference in New Issue
Block a user