Model viewer options are now stored in url parameters so you can link to a specific set of options.

src/core/enums.ts

@@ -9,22 +9,13 @@ export function enum_values<E>(e: any): E[] {
     }
 }
 
-/**
+export function string_to_enum<E>(e: any, str: string): E | undefined {
- * Map with a guaranteed value per enum key.
+    if (str === "") return undefined;
- */
-export class EnumMap<K, V> {
-    private readonly keys: K[];
-    private readonly values = new Map<K, V>();
 
-    constructor(enum_: any, initial_value: (key: K) => V) {
+    // Filter out strings that start with a digit to avoid index `e` with a number string which
-        this.keys = enum_values(enum_);
+    // could result in return a string.
+    const first_char_code = str.charCodeAt(0);
+    if (48 <= first_char_code && first_char_code <= 57) return undefined;
 
-        for (const key of this.keys) {
+    return e[str];
-            this.values.set(key, initial_value(key));
-        }
-    }
-
-    get(key: K): V {
-        return this.values.get(key)!;
-    }
 }

src/core/stores/GuiStore.ts

@@ -5,6 +5,8 @@ import { Property } from "../observable/property/Property";
 import { Server } from "../model";
 import { Store } from "./Store";
 import { disposable_listener } from "../gui/dom";
+import { assert, map_get_or_put } from "../util";
+import { Observable } from "../observable/Observable";
 
 export enum GuiTool {
     Viewer,
@@ -22,6 +24,19 @@ const STRING_TO_GUI_TOOL = new Map([...GUI_TOOL_TO_STRING.entries()].map(([k, v]
 export class GuiStore extends Store {
     private readonly _tool: WritableProperty<GuiTool> = property(GuiTool.Viewer);
     private readonly _path: WritableProperty<string> = property("");
+
+    /**
+     * Path prefixed with tool path.
+     */
+    private get full_path(): string {
+        return `/${gui_tool_to_string(this.tool.val)}${this.path.val}`;
+    }
+
+    /**
+     * Maps full paths to maps of parameters and their values. In other words we keep track of
+     * parameter values per {@link full_path}.
+     */
+    private readonly parameters: Map<string, Map<string, string>> = new Map();
     private readonly _server: WritableProperty<Server> = property(Server.Ephinea);
     private readonly global_keydown_handlers = new Map<string, (e: KeyboardEvent) => void>();
     private readonly features: Set<string> = new Set();
@@ -33,29 +48,33 @@ export class GuiStore extends Store {
     constructor() {
         super();
 
-        const url = window.location.hash.slice(2);
+        const url = window.location.hash.slice(1);
         const [full_path, params_str] = url.split("?");
+        const second_slash_idx = full_path.indexOf("/", 1);
+        const tool_str = second_slash_idx === -1 ? full_path : full_path.slice(1, second_slash_idx);
 
-        const first_slash_idx = full_path.indexOf("/");
+        const tool = string_to_gui_tool(tool_str) ?? GuiTool.Viewer;
-        const tool_str = first_slash_idx === -1 ? full_path : full_path.slice(0, first_slash_idx);
+        const path = second_slash_idx === -1 ? "" : full_path.slice(second_slash_idx);
-        const path = first_slash_idx === -1 ? "" : full_path.slice(first_slash_idx);
 
         if (params_str) {
-            const features = params_str
+            const params = new Map<string, string>();
-                .split("&")
-                .map(p => p.split("="))
-                .find(([key]) => key === "features");
 
-            if (features && features.length >= 2) {
+            for (const [param, value] of params_str.split("&").map(p => p.split("=", 2))) {
-                for (const feature of features[1].split(",")) {
+                if (param === "features") {
+                    for (const feature of value.split(",")) {
                         this.features.add(feature);
                     }
+                } else {
+                    params.set(param, value);
                 }
             }
 
+            this.parameters.set(full_path, params);
+        }
+
         this.disposables(disposable_listener(window, "keydown", this.dispatch_global_keydown));
 
-        this.set_tool(string_to_gui_tool(tool_str) ?? GuiTool.Viewer, path);
+        this.set_tool(tool, path);
     }
 
     set_tool(tool: GuiTool, path: string = ""): void {
@@ -74,14 +93,62 @@ export class GuiStore extends Store {
         }
     }
 
-    private update_location(): void {
+    get_parameter(tool: GuiTool, path: string, parameter: string): string | undefined {
-        let hash = `#/${gui_tool_to_string(this.tool.val)}${this.path.val}`;
+        return map_get_or_put(
-
+            this.parameters,
-        if (this.features.size) {
+            `/${gui_tool_to_string(tool)}${path}`,
-            hash += "?features=" + [...this.features].join(",");
+            () => new Map(),
+        ).get(parameter);
     }
 
-        window.location.hash = hash;
+    bind_parameter(
+        tool: GuiTool,
+        path: string,
+        parameter: string,
+        observable: Observable<string | undefined>,
+    ): Disposable {
+        assert(
+            parameter !== "features",
+            "features can't be bound because it is a global parameter.",
+        );
+
+        const params: Map<string, string> = map_get_or_put(
+            this.parameters,
+            this.full_path,
+            () => new Map(),
+        );
+
+        return observable.observe(({ value }) => {
+            if (this.tool.val !== tool || this.path.val !== path) return;
+
+            if (value === undefined) {
+                params.delete(parameter);
+            } else {
+                params.set(parameter, value);
+            }
+
+            this.update_location();
+        });
+    }
+
+    private update_location(): void {
+        const params_array: [string, string][] = [];
+        const params = this.parameters.get(this.full_path);
+
+        if (params) {
+            for (const [param, value] of params.entries()) {
+                params_array.push([param, value]);
+            }
+        }
+
+        if (this.features.size) {
+            params_array.push(["features", [...this.features].join(",")]);
+        }
+
+        const param_str =
+            params_array.length === 0 ? "" : "?" + params_array.map(kv => kv.join("=")).join("&");
+
+        window.location.hash = `#${this.full_path}${param_str}`;
     }
 
     on_global_keydown(

src/core/util.ts

@@ -47,6 +47,17 @@ export function array_buffers_equal(a: ArrayBuffer, b: ArrayBuffer): boolean {
     return true;
 }
 
+export function map_get_or_put<K, V>(map: Map<K, V>, key: K, get_default: () => V): V {
+    let value = map.get(key);
+
+    if (value === undefined) {
+        value = get_default();
+        map.set(key, value);
+    }
+
+    return value;
+}
+
 /**
  * Returns the given filename without the file extension.
  */

src/viewer/gui/model/ModelView.test.ts

@@ -11,11 +11,13 @@ import { ModelToolBarView } from "./ModelToolBarView";
 import { ModelToolBarController } from "../../controllers/model/ModelToolBarController";
 import { CharacterClassOptionsView } from "./CharacterClassOptionsView";
 import { CharacterClassOptionsController } from "../../controllers/model/CharacterClassOptionsController";
+import { GuiStore } from "../../../core/stores/GuiStore";
 
 test("Renders correctly.", () =>
     with_disposer(disposer => {
         const store = disposer.add(
             new ModelStore(
+                disposer.add(new GuiStore()),
                 disposer.add(new CharacterClassAssetLoader(new FileSystemHttpClient())),
                 new Random(() => 0.04),
             ),

src/viewer/index.ts

@@ -31,7 +31,7 @@ export function initialize_viewer(
                 "./loading/CharacterClassAssetLoader"
             );
             const asset_loader = disposer.add(new CharacterClassAssetLoader(http_client));
-            const store = disposer.add(new ModelStore(asset_loader, random));
+            const store = disposer.add(new ModelStore(gui_store, asset_loader, random));
             const model_controller = new ModelController(store);
             const model_tool_bar_controller = new ModelToolBarController(store);
             const character_class_options_controller = new CharacterClassOptionsController(store);

src/viewer/rendering/ModelRenderer.ts

@@ -39,7 +39,7 @@ const DEFAULT_SKINNED_MATERIAL = new MeshLambertMaterial({
     side: DoubleSide,
 });
 const CAMERA_POSITION = Object.freeze(new Vector3(0, 10, 20));
-const CAMERA_LOOKAT = Object.freeze(new Vector3(0, 0, 0));
+const CAMERA_LOOK_AT = Object.freeze(new Vector3(0, 0, 0));
 
 export class ModelRenderer extends Renderer implements Disposable {
     private readonly disposer = new Disposer();
@@ -72,7 +72,7 @@ export class ModelRenderer extends Renderer implements Disposable {
         );
 
         this.init_camera_controls();
-        this.reset_camera(CAMERA_POSITION, CAMERA_LOOKAT);
+        this.reset_camera(CAMERA_POSITION, CAMERA_LOOK_AT);
     }
 
     set_size(width: number, height: number): void {
@@ -106,7 +106,7 @@ export class ModelRenderer extends Renderer implements Disposable {
         const character_class_active = change.value != undefined;
 
         if (this.character_class_active !== character_class_active) {
-            this.reset_camera(CAMERA_POSITION, CAMERA_LOOKAT);
+            this.reset_camera(CAMERA_POSITION, CAMERA_LOOK_AT);
         }
 
         this.character_class_active = character_class_active;

src/viewer/stores/ModelStore.ts

@@ -27,6 +27,8 @@ import { Random } from "../../core/Random";
 import { SectionId, SectionIds } from "../../core/model";
 import { LogManager } from "../../core/Logger";
 import { NjObject } from "../../core/data_formats/parsing/ninja";
+import { GuiStore, GuiTool } from "../../core/stores/GuiStore";
+import { string_to_enum } from "../../core/enums";
 
 const logger = LogManager.get("viewer/stores/ModelStore");
 
@@ -35,8 +37,10 @@ export class ModelStore extends Store {
     private readonly _current_character_class: WritableProperty<
         CharacterClassModel | undefined
     > = property(undefined);
-    private readonly _current_section_id: WritableProperty<SectionId>;
+    private readonly _current_section_id: WritableProperty<SectionId | undefined> = property(
-    private readonly _current_body: WritableProperty<number | undefined> = property(0);
+        undefined,
+    );
+    private readonly _current_body: WritableProperty<number | undefined> = property(undefined);
     private readonly _current_animation: WritableProperty<
         CharacterClassAnimationModel | undefined
     > = property(undefined);
@@ -69,7 +73,7 @@ export class ModelStore extends Store {
     ];
     readonly current_character_class: Property<CharacterClassModel | undefined> = this
         ._current_character_class;
-    readonly current_section_id: Property<SectionId>;
+    readonly current_section_id: Property<SectionId | undefined> = this._current_section_id;
     readonly current_body: Property<number | undefined> = this._current_body;
     readonly animations: readonly CharacterClassAnimationModel[] = new Array(572)
         .fill(undefined)
@@ -92,14 +96,12 @@ export class ModelStore extends Store {
     readonly animation_frame: Property<number> = this._animation_frame;
 
     constructor(
+        gui_store: GuiStore,
         private readonly asset_loader: CharacterClassAssetLoader,
         private readonly random: Random,
     ) {
         super();
 
-        this._current_section_id = property(random.sample_array(SectionIds));
-        this.current_section_id = this._current_section_id;
-
         this.disposables(
             this.current_character_class.observe(this.load_character_class_model),
             this.current_section_id.observe(this.load_character_class_model),
@@ -107,18 +109,70 @@ export class ModelStore extends Store {
             this.current_animation.observe(this.load_animation),
         );
 
-        const character_class = random.sample_array(this.character_classes);
+        // Parameters.
-        this.set_current_character_class(character_class);
+        this.disposables(
+            gui_store.bind_parameter(
+                GuiTool.Viewer,
+                "/models",
+                "model",
+                this.current_character_class.map(cc => (cc === undefined ? undefined : cc.name)),
+            ),
+            gui_store.bind_parameter(
+                GuiTool.Viewer,
+                "/models",
+                "section_id",
+                this.current_section_id.map(section_id =>
+                    section_id === undefined ? undefined : SectionId[section_id],
+                ),
+            ),
+            gui_store.bind_parameter(
+                GuiTool.Viewer,
+                "/models",
+                "body",
+                this.current_body.map(body => (body === undefined ? undefined : String(body + 1))),
+            ),
+        );
+
+        const model = gui_store.get_parameter(GuiTool.Viewer, "/models", "model");
+        let character_class = this.character_classes.find(cc => cc.name === model);
+
+        if (character_class == undefined) {
+            character_class = random.sample_array(this.character_classes);
+        }
+
+        const body_arg = gui_store.get_parameter(GuiTool.Viewer, "/models", "body");
+        let body = body_arg == undefined ? undefined : parseInt(body_arg, 10);
+
+        if (body == undefined || !Number.isInteger(body)) {
+            body = random.integer(0, character_class.body_style_count);
+        } else {
+            body--;
+        }
+
+        const section_id_arg = gui_store.get_parameter(GuiTool.Viewer, "/models", "section_id");
+        const section_id =
+            section_id_arg === undefined
+                ? undefined
+                : string_to_enum<SectionId>(SectionId, section_id_arg);
+
+        this._current_section_id.val = section_id ?? random.sample_array(SectionIds);
+        this._current_body.val = body;
+        this._current_character_class.val = character_class;
     }
 
     set_current_character_class = (character_class?: CharacterClassModel): void => {
         if (this._current_character_class.val !== character_class) {
+            if (character_class == undefined) {
+                this.set_current_body(undefined);
+            } else {
+                const body = this.current_body.val;
+
+                if (body === undefined || body >= character_class?.body_style_count) {
+                    this.set_current_body(character_class.body_style_count - 1);
+                }
+            }
+
             this._current_character_class.val = character_class;
-            this.set_current_body(
-                character_class
-                    ? this.random.integer(0, character_class.body_style_count)
-                    : undefined,
-            );
 
             if (this.current_animation.val == undefined) {
                 this.set_current_nj_motion(undefined);
@@ -177,6 +231,9 @@ export class ModelStore extends Store {
         const character_class = this.current_character_class.val;
         if (character_class == undefined) return;
 
+        const section_id = this.current_section_id.val;
+        if (section_id == undefined) return;
+
         const body = this.current_body.val;
         if (body == undefined) return;
 
@@ -187,7 +244,7 @@ export class ModelStore extends Store {
 
             this._current_textures.val = await this.asset_loader.load_textures(
                 character_class,
-                this.current_section_id.val,
+                section_id,
                 body,
             );