Start moving ui to typescript

cb_browser_ui/index.html

@@ -55,7 +55,7 @@ <h1>USER INTERFACE BROKE 😔</h1>
             skipTurnsPerTurnAhead: CB_SKIP_TURNS_PER_TURN_AHEAD
         };
     </script>
-    <script src="./src/citybound.js"></script>
+    <script src="./src/citybound.tsx"></script>
 </body>
 
 </html>

cb_browser_ui/package.json

@@ -2,7 +2,7 @@
   "scripts": {
     "build-js": "parcel build index.html --no-minify --log-level 3",
     "watch-js": "parcel watch index.html --no-hmr --log-level 3",
-    "build-rust": "cargo-web build && node copyWasm.js",
+    "build-rust": "cargo-web build --release && node copyWasm.js",
     "build": "npm run build-rust && npm run build-js",
     "start": "npm run build-rust && npm run watch-js"
   },
@@ -20,13 +20,16 @@
     "stacktrace-js": "^2.0.0"
   },
   "devDependencies": {
+    "@types/gl-matrix": "^2.4.5",
+    "@types/stacktrace-js": "^2.0.3",
+    "less": "^3.8.1",
     "parcel-bundler": "^1.12.4",
-    "less": "^3.8.1"
+    "typescript": "^3.8.3"
   },
   "less": {
     "javascriptEnabled": true
   },
   "browser": {
     "fs": false
   }
-}
+}

cb_browser_ui/src/citybound.js → cb_browser_ui/src/citybound.tsx

@@ -1,4 +1,4 @@
-const StackTrace = require("stacktrace-js");
+import StackTrace from "stacktrace-js";
 
 function displayError(prefix, error) {
     const el = document.getElementById("errors");
@@ -28,8 +28,13 @@ window.addEventListener('unhandledrejection', function (e) {
 });
 
 import Monet from 'monet';
-import React from 'react';
-import ReactDOM from 'react-dom';
+
+window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () { };
+window.__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE = function () { };
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
 import ContainerDimensions from 'react-container-dimensions';
 import update from 'immutability-helper';
 import * as Camera from './camera/Camera';
@@ -45,9 +50,60 @@ import * as Menu from './menu';
 import * as Utils from './browser_utils/Utils';
 import Stage from './stage/Stage';
 import colors from './colors';
+
+declare module '../target/wasm32-unknown-unknown/release/cb_browser_ui' {
+    type Intent = {};
+
+    export default interface CBRustAPI {
+        start(): void;
+
+        set_intent(projectId: string, gestureId: string, intent: Intent, doneAdding: boolean);
+
+        move_gesture_point(projectId: string, gestureId: string, pointIdx: number, position: [number, number], doneMoving: boolean): void;
+        start_new_gesture(projectId: string, gestureId: string, intent: Intent): void;
+        with_control_point_added(intent: Intent, point: [number, number], addToEnd: boolean): Intent;
+        insert_control_point(projectId: string, gestureId: string, point: [number, number], doneInserting: boolean);
+        split_gesture(projectId: string, gestureId: string, point: [number, number], doneSplitting: boolean);
+        set_n_lanes(projectId: string, gestureId: string, nLanesForward: number, nLanesBackward: number, doneChanging: boolean);
+    }
+}
+
+type CBRustAPI = import('../target/wasm32-unknown-unknown/release/cb_browser_ui').default;
+
+declare global {
+    interface Window {
+        update: typeof update;
+        cbRustBrowser: CBRustAPI;
+        __REACT_DEVTOOLS_GLOBAL_HOOK__: any;
+    }
+}
+
+export type SharedState = {
+    planning: Planning.PlanningSharedState,
+    transport: any,
+    landUse: any,
+    households: any,
+    vegetation: any,
+    debug: any,
+    uiMode: any,
+    system: {
+        networkingTurns: string
+    },
+    rendering: {
+        enabled: boolean
+    },
+    time: any,
+    camera: any,
+
+    menu: any,
+    settings: any
+}
+
+export type SetSharedState = (updater: (oldState: SharedState) => SharedState) => void;
+
 window.update = update;
 
-require('../target/wasm32-unknown-unknown/release/cb_browser_ui').then(cbRustBrowser => {
+import('../target/wasm32-unknown-unknown/release/cb_browser_ui').then(mod => mod.default as CBRustAPI).then(cbRustBrowser => {
     window.cbRustBrowser = cbRustBrowser;
 
     const settingSpecs = {
@@ -60,6 +116,10 @@ require('../target/wasm32-unknown-unknown/release/cb_browser_ui').then(cbRustBro
     };
 
     class CityboundReactApp extends React.Component {
+        renderer: React.RefObject<Monet>;
+        state: SharedState;
+        boundSetState: SetSharedState;
+
         constructor(props) {
             super(props);
 
@@ -110,19 +170,19 @@ require('../target/wasm32-unknown-unknown/release/cb_browser_ui').then(cbRustBro
                     <Camera.Camera state={this.state} {... { width, height }}>
                         {({ project2dTo3d, project3dTo2d, view, perspective }) =>
                             <div style={{ width, height }}>
-                                <div key="ui2dTools" className="ui2dTools">
+                                <div key="ui2dTools" className="ui2dTools" >
                                     <Planning.Tools state={this.state} setState={this.boundSetState} />
                                     <Menu.Tools state={this.state} setState={this.boundSetState} />
                                 </div>
-                                <div key="ui2d" className="ui2d">
+                                < div key="ui2d" className="ui2d" >
                                     <Time.Windows state={this.state} setState={this.boundSetState} />
                                     <Debug.Windows state={this.state} setState={this.boundSetState} />
                                     <Households.Windows state={this.state} setState={this.boundSetState} project3dTo2d={project3dTo2d} />
                                     <Menu.Windows state={this.state} setState={this.boundSetState} settingSpecs={settingSpecs} />
                                 </div>
 
-                                <Utils.Interactive3DContext.Provider value={interactive3Dshapes}>
-                                    <Utils.RenderContext.Provider value={layers}>
+                                <Utils.Interactive3DContext.Provider value={interactive3Dshapes} >
+                                    <Utils.RenderContext.Provider value={layers} >
 
                                         <Households.Shapes state={this.state} setState={this.boundSetState} />
 

cb_browser_ui/src/planning_browser/ControlPointInteractable.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Interactive3DShape } from '../browser_utils/Utils.js';
+import { vec3 } from 'gl-matrix';
 
-export default function ControlPointInteractable({ point, isFirst, isLast, onHover, onHoverEnd, onControlPointMoved, onEndClicked, finishDistance, gestureActive }) {
+export default function ControlPointInteractable({ point, isFirst, isLast, onHover, onHoverEnd, onControlPointMoved, gestureActive, onEndClicked, finishDistance }) {
     return <Interactive3DShape
         shape={{
             type: "circle",
@@ -20,7 +21,7 @@ export default function ControlPointInteractable({ point, isFirst, isLast, onHov
             if (e.drag) {
                 if (e.drag.end) {
                     if ((isFirst || isLast) && vec3.dist(e.drag.end, e.drag.start) < finishDistance) {
-                        onEndClicked(isLast)
+                        onEndClicked(isLast, e.drag.end)
                     } else {
                         onControlPointMoved(e.drag.end, true);
                     }

cb_browser_ui/src/planning_browser/GestureCanvas.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { Interactive3DShape } from '../browser_utils/Utils';
+import { vec3 } from 'gl-matrix';
+
+export default function GestureCanvas(props: { gestureActive, intentActive, onStartGesture, onAddPoint, onFinishGesture, finishDistance }) {
+    const [previousClick, setPreviousClick] = useState<vec3 | undefined>(undefined);
+
+    return <Interactive3DShape
+        id="planningCanvas"
+        key="planningCanvas"
+        shape={{
+            type: "everywhere",
+        }}
+        zIndex={1}
+        cursorHover={"crosshair"}
+        cursorActive="pointer"
+        onEvent={e => {
+            if (e.hover && e.hover.now) {
+                if (props.gestureActive) props.onAddPoint(e.hover.now, false);
+            }
+            if (e.drag && e.drag.end) {
+                if (props.gestureActive) {
+                    if (previousClick
+                        && vec3.dist(e.drag.end, previousClick) < props.finishDistance) {
+                        props.onFinishGesture();
+                    } else {
+                        setPreviousClick(e.drag.end);
+                        props.onAddPoint(e.drag.end, true);
+                    }
+                } else if (props.intentActive) {
+                    setPreviousClick(e.drag.end);
+                    props.onStartGesture(e.drag.end);
+                }
+            }
+        }} />
+}