[WIP] Early implementation of serializable_models and user settings.

public/styles/main.css

@@ -120,3 +120,9 @@ input {
 #toolbar button {
     margin-right: 5px;
 }
+
+fieldset input {
+    width: auto;
+    height: auto;
+    float: left;
+}

public/views/index.pug

@@ -59,5 +59,26 @@ html
             div.input
               button#delete(disabled) Delete this guide
 
+      .row
+        .column
+          h1 Settings
+          hr
+          h3 Theme
+          fieldset(id="theme")
+
+          h3 Keybindings
+          fieldset#editor.column
+            .group
+              input(type="radio", id="normal", name="editor", value="normal")
+              label(for="normal") Normal
+            .group
+              input(type="radio", id="emacs", name="editor", value="emacs")
+              label(for="emacs") Emacs
+            .group
+              input(type="radio", id="vim", name="editor", value="vim")
+              label(for="vim") Vim
+
+          button#saveSettings Save Settings
+
     script#code(type='x-code')!= source
     script(src='js/client.js')

src/frontend/costFn.ts

@@ -7,13 +7,13 @@ import { List } from 'immutable';
 // tslint:disable-next-line:import-name
 import Bezier = require('bezier-js');
 
-import { commit, onChange, setState, state } from './state';
+import { commit, onChange, state } from './state';
 import { addModel } from './model';
 import { renderer } from './renderer';
 
 const costControls = <HTMLDivElement>document.getElementById('cost');
 const distanceMultiplierControls = range(3)
-    .map((i) => <HTMLInputElement>document.getElementById(`distance${i+1}`));
+    .map((i) => <HTMLInputElement>document.getElementById(`distance${i + 1}`));
 const alignmentOffsetControl = <HTMLInputElement>document.getElementById('alignmentOffset');
 const alignmentMultiplierControl = <HTMLInputElement>document.getElementById('alignmentMultiplier');
 const deleteBtn = <HTMLButtonElement>document.getElementById('delete');
@@ -45,22 +45,22 @@ const initialCostFnParams = [
 ]
 
 export const addCostFn = () => {
-    let { costFnParams } = state;
+    let { costFnParams } = state.asBakedType();
     if (!costFnParams) {
         costFnParams = List(initialCostFnParams);
     }
     const costFn = calder.CostFunction.guidingVectors(costFnParams.toJS(), );
 
-    setState({ costFnParams, costFn });
+    state.setState({ costFnParams, costFn });
 };
 
 export const addCostFunctionViz = () => {
-    const { costFn, costFnParams, selectedCurve } = state;
+    const { costFn, costFnParams, selectedCurve } = state.asBakedType();
     if (!costFn || !costFnParams) {
         return;
     }
 
-    const vectorField = costFn.generateVectorField(3, 0.5, {x: 0, y: 2, z: 0});
+    const vectorField = costFn.generateVectorField(3, 0.5, { x: 0, y: 2, z: 0 });
     const guidingCurves = List(costFn.generateGuidingCurve().map((path: [number, number, number][], index: number) => {
         return {
             path,
@@ -69,11 +69,11 @@ export const addCostFunctionViz = () => {
         };
     }));
 
-    setState({ vectorField, guidingCurves });
+    state.setState({ vectorField, guidingCurves });
 };
 
-export const addNewCurve = (polyline: {x: number; y: number}[]) => {
-    const [ bezier ] = fitCurve(polyline.map((point) => [point.x, point.y]), 100, undefined, true);
+export const addNewCurve = (polyline: { x: number; y: number }[]) => {
+    const [bezier] = fitCurve(polyline.map((point) => [point.x, point.y]), 100, undefined, true);
     const depth = vec3.distance(renderer.camera.position, renderer.camera.target);
 
     const transform = mat4.invert(mat4.create(), renderer.camera.getTransform());
@@ -97,20 +97,20 @@ export const addNewCurve = (polyline: {x: number; y: number}[]) => {
     const lastCurve = state.costFnParams && state.costFnParams[state.costFnParams.size - 1];
 
     const curve = {
-        bezier: new Bezier(bezier3D.map(([x, y, z]) => { return {x, y, z}; })),
+        bezier: new Bezier(bezier3D.map(([x, y, z]) => { return { x, y, z }; })),
         distanceMultiplier: lastCurve ? [...lastCurve.distanceMultiplier] : [...scale],
         alignmentMultiplier: lastCurve ? lastCurve.alignmentMultiplier : 500,
         alignmentOffset: lastCurve ? lastCurve.alignmentOffset : 0.7
     };
 
-    let { costFnParams = List([]) } = state;
+    let { costFnParams = List([]) } = state.asBakedType();
     costFnParams = costFnParams.push(curve);
 
-    setState({ costFnParams });
+    state.setState({ costFnParams });
 }
 
 onChange('selectedCurve', () => {
-    const { guidingCurves, costFnParams, selectedCurve } = state;
+    const { guidingCurves, costFnParams, selectedCurve } = state.asBakedType();
     if (!costFnParams) {
         return;
     }
@@ -120,7 +120,7 @@ onChange('selectedCurve', () => {
             curve.selected = index === selectedCurve;
         });
 
-        setState({ guidingCurves });
+        state.setState({ guidingCurves });
     }
 
     if (selectedCurve !== null && selectedCurve !== undefined) {
@@ -144,7 +144,7 @@ onChange('selectedCurve', () => {
 });
 
 const updateCostFnParams = throttle(() => {
-    let { costFnParams, selectedCurve } = state;
+    let { costFnParams, selectedCurve } = state.asBakedType();
     if (!costFnParams || selectedCurve === undefined || selectedCurve === null) {
         return;
     }
@@ -166,14 +166,14 @@ const updateCostFnParams = throttle(() => {
 
     costFnParams = costFnParams.set(selectedCurve, updatedParams);
 
-    setState({ costFnParams });
+    state.setState({ costFnParams });
     addCostFn();
     addModel();
     commit();
 }, 100, { trailing: true });
 
 const deleteCurve = () => {
-    let { guidingCurves, costFnParams, selectedCurve } = state;
+    let { guidingCurves, costFnParams, selectedCurve } = state.asBakedType();
     if (!guidingCurves || !costFnParams || selectedCurve === undefined || selectedCurve === null) {
         return;
     }
@@ -186,7 +186,7 @@ const deleteCurve = () => {
     guidingCurves = guidingCurves.delete(selectedCurve);
     costFnParams = costFnParams.delete(selectedCurve);
 
-    setState({ guidingCurves, costFnParams, selectedCurve: null });
+    state.setState({ guidingCurves, costFnParams, selectedCurve: null });
     addCostFn();
     addCostFunctionViz();
     addModel();

src/frontend/editor.ts

@@ -5,7 +5,7 @@ import 'brace/ext/language_tools';
 import { Completion } from './Completion';
 import { onChange, state } from './state';
 
-const codeElement = <HTMLScriptElement> document.getElementById('code');
+const codeElement = <HTMLScriptElement>document.getElementById('code');
 export const defaultSource = codeElement.innerText;
 
 export const editor = ace.edit('source');
@@ -18,7 +18,7 @@ editor.setOptions({
 
 onChange('source', () => {
     if (editor.getSession().getValue() === state.source) {
-      return;
+        return;
     }
     editor.getSession().setValue(state.source || '');
 });

src/frontend/generator.ts

@@ -1,7 +1,7 @@
 import * as calder from 'calder-gl';
 import { transform } from '@babel/standalone';
 
-import { setState, state } from './state';
+import { state } from './state';
 import { editor } from './editor';
 import { renderer } from './renderer';
 
@@ -22,10 +22,10 @@ export const addGenerator = () => {
         const generator = calder.Armature.generator();
         setup(generator);
 
-        setState({ source, generator });
+        state.setState({ source, generator });
     } catch (e) {
         console.log(e);
 
-        setState({ source, generator: undefined });
+        state.setState({ source, generator: undefined });
     }
 };

src/frontend/interactions.ts

@@ -1,6 +1,6 @@
 import { Camera, vec3ToVector } from 'calder-gl';
 import { renderer } from './renderer';
-import { commit, setState, state } from './state'
+import { commit, state } from './state'
 import { addCostFn, addCostFunctionViz, addNewCurve } from './costFn';
 import { addModel } from './model';
 import { mat4, quat, vec3, vec4 } from 'gl-matrix';
@@ -41,7 +41,7 @@ function handleMouseDown(event: MouseEvent) {
 
     controlState.dragged = false;
 
-    const button = <MouseButton> event.button;
+    const button = <MouseButton>event.button;
 
     if (button === MouseButton.LEFT) {
         if (event.shiftKey) {
@@ -53,7 +53,7 @@ function handleMouseDown(event: MouseEvent) {
             const x = event.clientX - bounds.left;
             const y = event.clientY - bounds.top;
 
-            setState({ pencilLine: [{x, y}] });
+            state.setState({ pencilLine: [{ x, y }] });
         } else {
             controlState.selectedHandle = null;
             let closestDistance = Infinity;
@@ -100,7 +100,7 @@ function handleMouseUp(event: MouseEvent) {
             y: event.clientY - boundingRect.top
         });
 
-        setState({ selectedCurve: selectedIndex < guidingCurves.size ? selectedIndex : null });
+        state.setState({ selectedCurve: selectedIndex < guidingCurves.size ? selectedIndex : null });
         commit();
     }
 
@@ -116,12 +116,12 @@ function handleMouseUp(event: MouseEvent) {
             addCostFn();
             addCostFunctionViz();
             addModel();
-            setState({ pencilLine: undefined });
+            state.setState({ pencilLine: undefined });
 
             const { guidingCurves } = state;
             if (guidingCurves) {
                 const selectedCurve = guidingCurves.size - 1;
-                setState({ selectedCurve, guidingCurves });
+                state.setState({ selectedCurve, guidingCurves });
                 commit();
             }
         }
@@ -154,7 +154,7 @@ function handleMouseMove(event: MouseEvent) {
             const y = event.clientY - bounds.top;
 
             pencilLine.push({ x, y });
-            setState({ pencilLine });
+            state.setState({ pencilLine });
         }
 
     } else if (controlState.mode === ControlMode.DRAG_CURVE) {
@@ -165,7 +165,7 @@ function handleMouseMove(event: MouseEvent) {
         // Bring the transform into world coordinates by applying the inverse camera transform
         const inverseTransform = mat4.invert(tmpMat4, renderer.camera.getTransform());
         if (inverseTransform && state.guidingCurves && state.costFnParams &&
-                state.selectedCurve !== undefined && state.selectedCurve !== null && controlState.selectedHandle !== null) {
+            state.selectedCurve !== undefined && state.selectedCurve !== null && controlState.selectedHandle !== null) {
             const points = state.costFnParams.get(state.selectedCurve).bezier.points;
 
             // We need to scale the direction vector so that when the control point moves, it moves the right
@@ -213,7 +213,7 @@ function handleMouseMove(event: MouseEvent) {
             };
             const guidingCurves = state.guidingCurves.set(state.selectedCurve, newGuidingCurve);
 
-            setState({ costFnParams, guidingCurves });
+            state.setState({ costFnParams, guidingCurves });
         }
 
     } else if (controlState.mode === ControlMode.CAMERA_MOVE) {
@@ -259,11 +259,11 @@ function handleMouseMove(event: MouseEvent) {
                 Camera.up,
                 direction);
             vec3.normalize(axis, axis);
-                renderer.camera.rotateAboutTarget(quat.setAxisAngle(
-                    tmpQuat,
-                    axis,
-                    event.movementY / 100
-                ));
+            renderer.camera.rotateAboutTarget(quat.setAxisAngle(
+                tmpQuat,
+                axis,
+                event.movementY / 100
+            ));
         }
     }
 }