first sign of old ui built by new build process

package.json

@@ -7,14 +7,19 @@
   "author": "per <[email protected]>",
   "license": "GPL-3.0",
   "devDependencies": {
+    "@types/highlight.js": "^9.12.3",
     "@types/jest": "^23.0.0",
     "@types/react": "^16.3.16",
     "@types/react-dom": "^16.0.5",
+    "@types/react-measure": "^2.0.2",
     "@types/react-redux": "^6.0.1",
+    "@types/react-select": "^1.2.6",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.4",
+    "babel-preset-es2015": "^6.24.1",
     "babel-preset-es2015-node": "^6.1.1",
     "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
     "electron": "^2.0.2",
     "electron-builder": "^20.15.1",
     "html-webpack-plugin": "^3.2.0",
@@ -37,7 +42,6 @@
     "build-dev": "webpack --config webpack.config.js --mode development",
     "prebuild-dist": "trash build",
     "build-dist": "webpack --config webpack.config.js --mode production",
-    "predev-server": "yarn run build-dev",
     "predist": "yarn run build-dist",
     "predist-preview": "yarn run build-dist",
     "dist-preview": "electron-builder --dir",
@@ -50,9 +54,12 @@
     "test": "jest"
   },
   "dependencies": {
+    "highlight.js": "^9.12.0",
     "react": "^16.4.0",
     "react-dom": "^16.4.0",
+    "react-measure": "^2.0.2",
     "react-redux": "^5.0.7",
+    "react-select": "^1.2.1",
     "redux": "^4.0.0",
     "redux-thunk": "^2.3.0"
   },

src/gui/App.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import ImageContainer from './containers/image-container'
+import ResultContainer from './containers/result-container'
+import SettingsContainer from './containers/settings-container'
+import ExportDialog from './components/export-dialog/export-dialog'
+
+// import './App.css'
+import { StoreState } from './types/store-state'
+import { Dispatch, connect } from 'react-redux'
+import { AppAction, setExportDialogVisibility } from './actions'
+import { GlobalSettings, CalibrationMode } from './types/global-settings'
+import { UIState } from './types/ui-state'
+import CalibrationResult from './types/calibration-result'
+import { ImageState } from './types/image-state'
+
+interface AppProps {
+  uiState: UIState,
+  globalSettings: GlobalSettings,
+  calibrationResult: CalibrationResult,
+  image: ImageState,
+  onExportDialogVisiblityChange(isVisible: boolean): void
+}
+
+function App(props: AppProps) {
+  return (
+
+    <div id='app-container'>
+      <ExportDialog
+        isVisible={props.uiState.isExportDialogOpen}
+        solverResult={props.globalSettings.calibrationMode == CalibrationMode.OneVanishingPoint ? props.calibrationResult.calibrationResult1VP : props.calibrationResult.calibrationResult2VP}
+        image={props.image}
+        onOpen={() => props.onExportDialogVisiblityChange(true)}
+        onClose={() => props.onExportDialogVisiblityChange(false)}
+      />
+      <SettingsContainer isVisible={props.uiState.sidePanelsAreVisible} />
+      <ImageContainer />
+      <ResultContainer isVisible={props.uiState.sidePanelsAreVisible} />
+    </div>
+  )
+}
+
+export function mapStateToProps(state: StoreState) {
+  return {
+    uiState: state.uiState,
+    globalSettings: state.globalSettings,
+    calibrationResult: state.calibrationResult,
+    image: state.image
+  }
+}
+
+export function mapDispatchToProps(dispatch: Dispatch<AppAction>) {
+  return {
+    onExportDialogVisiblityChange: (isVisible: boolean) => {
+      dispatch(setExportDialogVisibility(isVisible))
+    }
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(App)

_old/src/components/common/button.tsx → src/gui/components/common/button.tsx

@@ -1,31 +1,31 @@
-import * as React from 'react';
-import { Palette } from '../../style/palette';
+import * as React from 'react'
+import { Palette } from '../../style/palette'
 
 interface ButtonProps {
   title: string
-  onClick(): void
   fillWidth?: boolean
-  isSelected?:boolean
+  isSelected?: boolean
+  onClick(): void
 }
 
 export default function Button(props: ButtonProps) {
 
   let style = {
-    minWidth: "90px",
-    height: "25px",
+    minWidth: '90px',
+    height: '25px',
     backgroundColor: props.isSelected ? Palette.white : Palette.gray,
-    outline: "none",
-    border: "none",
-    boxShadow: "none"
+    outline: 'none',
+    border: 'none',
+    boxShadow: 'none'
   }
 
   if (props.fillWidth === true) {
-    (style as any).width = "100%";
+    (style as any).width = '100%'
   }
 
   return (
     <button style={style} onClick={() => props.onClick()}>
       {props.title}
     </button>
   )
-}
+}

_old/src/components/common/camera-presets-dropdown.tsx → src/gui/components/common/camera-presets-dropdown.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import * as React from 'react'
 import Dropdown from './dropdown'
-import { cameraPresets } from '../../solver/camera-presets';
-import { CameraData } from '../../types/calibration-settings';
+import { cameraPresets } from '../../solver/camera-presets'
+import { CameraData } from '../../types/calibration-settings'
 
 export interface CameraPresetsDropdownProps {
   cameraData: CameraData
@@ -10,7 +10,7 @@ export interface CameraPresetsDropdownProps {
 
 export default function CameraPresetsDropdown(props: CameraPresetsDropdownProps) {
 
-  let ids: (string |  null)[] = [null]
+  let ids: (string | null)[] = [null]
   for (let id in cameraPresets) {
     ids.push(id)
   }
@@ -24,15 +24,15 @@ export default function CameraPresetsDropdown(props: CameraPresetsDropdownProps)
             (id: string | null) => {
               return {
                 value: id,
-                id: id == null ? "null" : id,
-                label: id == null ? "Custom camera" : cameraPresets[id].displayName
+                id: id == null ? 'null' : id,
+                label: id == null ? 'Custom camera' : cameraPresets[id].displayName
               }
             }
           )
         }
-        selectedOptionId={props.cameraData.presetId == null ? "null" : props.cameraData.presetId}
+        selectedOptionId={props.cameraData.presetId == null ? 'null' : props.cameraData.presetId}
         onChange={props.onPresetChanged}
       />
     </div>
   )
-}
+}