Add colour options for landmarks and connections

package.json

@@ -48,6 +48,7 @@
     "node-sass": "^3.13.0",
     "postcss-loader": "^1.1.1",
     "react": "^15.4.0",
+    "react-color": "^2.8.0",
     "react-dom": "^15.4.0",
     "resolve-url-loader": "^1.6.0",
     "sass-loader": "^4.0.2",

src/ts/app/model/app.ts

@@ -41,6 +41,9 @@ export class App extends Backbone.Model {
         })
         this.set(opts)
         this.landmarkSize = 0.2
+        this.connectionColour = 'ffff00'
+        this.unselectedLandmarkColour = 'ffff00'
+        this.selectedLandmarkColour = 'ff75ff'
 
         // New collection? Need to find the assets on them again
         this.listenTo(this, 'change:activeCollection', this.reloadAssetSource)
@@ -182,6 +185,30 @@ export class App extends Backbone.Model {
         this.set('landmarkSize', landmarkSize)
     }
 
+    get connectionColour() {
+        return this.get('connectionColour')
+    }
+
+    set connectionColour (colour: string) {
+        this.set('connectionColour', colour)
+    }
+
+    get unselectedLandmarkColour() {
+        return this.get('unselectedLandmarkColour')
+    }
+
+    set unselectedLandmarkColour (colour: string) {
+        this.set('unselectedLandmarkColour', colour)
+    }
+
+    get selectedLandmarkColour() {
+        return this.get('selectedLandmarkColour')
+    }
+
+    set selectedLandmarkColour (colour: string) {
+        this.set('selectedLandmarkColour', colour)
+    }
+
     budgeLandmarks(vector:  [number, number]) {
         if (this.onBudgeLandmarks !== null) {
             // call our onBudgeLandmarks callback

src/ts/app/view/bbviewport.ts

@@ -40,11 +40,14 @@ export class BackboneViewport {
         this.viewport = new Viewport(element, app.meshMode, on, true)
         window.vp = this.viewport
 
-        this.model.on('newMeshAvailable', this.setMesh)
-        this.model.on("change:landmarks", this.setLandmarks)
-        this.model.on("change:landmarkSize", this.setLandmarkSize)
-        this.model.on("change:connectivityOn", this.updateConnectivityDisplay)
-        this.model.on("change:editingOn", this.updateEditingDisplay)
+        this.model.on('newMeshAvailable', () => this.setMesh())
+        this.model.on("change:landmarks", () => this.setLandmarks())
+        this.model.on("change:landmarkSize", () => this.setLandmarkSize())
+        this.model.on("change:connectivityOn", () => this.updateConnectivityDisplay())
+        this.model.on("change:editingOn", () => this.updateEditingDisplay())
+        this.model.on("change:connectionColour", () => this.setConnectionColour())
+        this.model.on("change:unselectedLandmarkColour", () => this.setUnselectedLandmarkColour())
+        this.model.on("change:selectedLandmarkColour", () => this.setSelectedLandmarkColour())
 
         // make sure we didn't miss any state changes on load
         this.setMesh()
@@ -53,15 +56,15 @@ export class BackboneViewport {
         this.updateEditingDisplay()
     }
 
-    setMesh = () => {
+    setMesh() {
         const meshPayload = this.model.mesh
         if (meshPayload === null) {
             return
         }
         this.viewport.setMesh(meshPayload.mesh, meshPayload.up, meshPayload.front)
     }
 
-    setLandmarks = () => {
+    setLandmarks() {
         const landmarks = this.model.landmarks
         if (landmarks !== null) {
             this.viewport.setLandmarksAndConnectivity(landmarks.landmarks.map(landmarkForBBLandmark),
@@ -72,19 +75,31 @@ export class BackboneViewport {
         }
     }
 
-    setLandmarkSize = () => {
+    setLandmarkSize() {
         this.viewport.setLandmarkSize(this.model.landmarkSize)
     }
 
-    updateEditingDisplay = () => {
+    setConnectionColour() {
+        this.viewport.setConnectionColour(this.model.connectionColour)
+    }
+
+    setUnselectedLandmarkColour() {
+        this.viewport.setUnselectedLandmarkColour(this.model.unselectedLandmarkColour)
+    }
+
+    setSelectedLandmarkColour() {
+        this.viewport.setSelectedLandmarkColour(this.model.selectedLandmarkColour)
+    }
+
+    updateEditingDisplay() {
         this.viewport.snapModeEnabled = this.model.isEditingOn
     }
 
-    updateConnectivityDisplay = () => {
+    updateConnectivityDisplay() {
         this.viewport.connectivityVisable = this.model.isConnectivityOn
     }
 
-    updateLandmark = (i: number) => {
+    updateLandmark(i: number) {
         // console.log(`updating landmark ${i}`)
         this.viewport.updateLandmarks([
                 landmarkForBBLandmark(this.model.landmarks.landmarks[i])

src/ts/app/view/components/ColourPicker.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+import { TwitterPicker } from 'react-color'
+
+interface ColourPickerProps {
+    label: string
+    colour: string
+    setColour: (colour, event) => void
+}
+
+export function ColourPicker(props: ColourPickerProps) {
+    return (
+        <div>
+            <div className="Toolbar-Row">
+                <div className="Toolbar-Row-Item">{props.label}</div>
+            </div>
+            <div className="Toolbar-Row">
+                <div className="Toolbar-Row-Item">
+                    <TwitterPicker triangle="hide" width="172px"
+                    colors={['#FF6900', '#FFFF00', '#00D084', '#8ED1FC', '#0693E3', '#EB144C', '#FF75FF', '#9900EF']}
+                    color={props.colour} onChange={props.setColour} />
+                </div>
+            </div>
+        </div>
+    )
+}

src/ts/app/view/components/Toolbar.tsx

@@ -1,6 +1,7 @@
 import * as React from "react"
 import { Toggle } from '../components/Toggle'
 import { Slider } from '../components/Slider'
+import { ColourPicker } from '../components/ColourPicker'
 
 export interface ToolbarProps {
     isConnectivityOn: boolean
@@ -14,6 +15,12 @@ export interface ToolbarProps {
     setAutosave: (isOn: boolean) => void
     landmarkSize: number
     setLandmarkSize: (size: number) => void
+    connectionColour: string
+    setConnectionColour: (colour, event) => void
+    unselectedLandmarkColour: string
+    setUnselectedLandmarkColour: (colour, event) => void
+    selectedLandmarkColour: string
+    setSelectedLandmarkColour: (colour, event) => void
 }
 
 export function Toolbar(props: ToolbarProps) {
@@ -24,6 +31,9 @@ export function Toolbar(props: ToolbarProps) {
             { props.textureToggleEnabled ? <Toggle label="Texture" checked={props.isTextureOn} onClick={props.setTexture} /> : null }
             <Toggle label="Snap" checked={props.isSnapOn} onClick={props.setSnap} />
             <Slider label="●" min={0} max={100} value={props.landmarkSize} onChange={props.setLandmarkSize} />
+            <ColourPicker label="Connection Colour" colour={props.connectionColour} setColour={props.setConnectionColour} />
+            <ColourPicker label="Unselected Landmark Colour" colour={props.unselectedLandmarkColour} setColour={props.setUnselectedLandmarkColour} />
+            <ColourPicker label="Selected Landmark Colour" colour={props.selectedLandmarkColour} setColour={props.setSelectedLandmarkColour} />
         </div>
     )
 }

src/ts/app/view/reactbridge.ts

@@ -128,7 +128,13 @@ export class ReactBridge {
             setSnap: (on) => this.app.toggleEditing(),
             setTexture: (on) => this.app.asset ? this.app.asset.textureToggle() : null,
             landmarkSize: this.app.landmarkSize * 100,
-            setLandmarkSize: (size) => { this.app.landmarkSize = size / 100 }
+            setLandmarkSize: (size) => { this.app.landmarkSize = size / 100 },
+            connectionColour: this.app.connectionColour,
+            setConnectionColour: (colour, event) => { this.app.connectionColour = colour.hex },
+            unselectedLandmarkColour: this.app.unselectedLandmarkColour,
+            setUnselectedLandmarkColour: (colour, event) => { this.app.unselectedLandmarkColour = colour.hex },
+            selectedLandmarkColour: this.app.selectedLandmarkColour,
+            setSelectedLandmarkColour: (colour, event) => { this.app.selectedLandmarkColour = colour.hex }
         }
         const toolbar = Toolbar(props)
         const el = document.getElementById('toolbar')

src/ts/app/view/viewport/index.ts

@@ -32,6 +32,9 @@ export interface IViewport {
     removeMeshIfPresent: () => void
     budgeLandmarks: (vector: [number, number]) => void
     setLandmarkSize: (lmSize: number) => void
+    setConnectionColour: (colour: string) => void
+    setUnselectedLandmarkColour: (colour: string) => void
+    setSelectedLandmarkColour: (colour: string) => void
     resetCamera: () => void,
     toggleCamera: () => void
     snapModeEnabled: boolean
@@ -341,6 +344,21 @@ export class Viewport implements IViewport {
         this.requestUpdate()
     }
 
+    setConnectionColour = (connectionColour: string) => {
+        this.scene.connectionColour = connectionColour
+        this.requestUpdate()
+    }
+
+    setUnselectedLandmarkColour = (unselectedLandmarkColour: string) => {
+        this.scene.unselectedLMColour = unselectedLandmarkColour
+        this.requestUpdate()
+    }
+
+    setSelectedLandmarkColour = (selectedLandmarkColour: string) => {
+        this.scene.selectedLMColour = selectedLandmarkColour
+        this.requestUpdate()
+    }
+
     toggleCamera = () => {
         const currentMode = this.scene.cameraMode
         // trigger the changeover of the primary camera

src/ts/app/view/viewport/scene/elements/connection.ts

@@ -61,6 +61,10 @@ export class LandmarkConnectionTHREEView {
         geometry.verticesNeedUpdate = true
     }
 
+    updateColour = (colour: string) => {
+        LINE_MATERIAL.color = new THREE.Color(colour)
+    }
+
     dispose = () => {
         if (this.symbol) {
             this.onDispose(this.symbol)

src/ts/app/view/viewport/scene/elements/landmark.ts

@@ -74,6 +74,14 @@ export class LandmarkTHREEView {
         this.symbol.material = lmMaterialForSelected(lm.isSelected)
     }
 
+    updateUnselectedColour = (colour: string) => {
+        UNSELECTED_LM_MATERIAL.color = new THREE.Color(colour)
+    }
+
+    updateSelectedColour = (colour: string) => {
+        SELECTED_LM_MATERIAL.color = new THREE.Color(colour)
+    }
+
     dispose = () => {
         if (this.symbol) {
             this.onDispose(this.symbol)

src/ts/app/view/viewport/scene/index.ts

@@ -33,6 +33,9 @@ export interface IScene {
     sceneHelpers: THREE.Scene,
     sLms: THREE.Object3D
     lmScale: number
+    connectionColour: string
+    unselectedLMColour: string
+    selectedLMColour: string
 
     // Intersection related
     localToScreen: (v: THREE.Vector3) => THREE.Vector2
@@ -152,6 +155,18 @@ export class Scene implements IScene {
         this.scaleLandmarks()
     }
 
+    set connectionColour(colour: string) {
+        this.connectivityViews.forEach(cv => cv.updateColour(colour))
+    }
+
+    set unselectedLMColour(colour: string) {
+        this.landmarkViews.forEach(lmv => lmv.updateUnselectedColour(colour))
+    }
+
+    set selectedLMColour(colour: string) {
+        this.landmarkViews.forEach(lmv => lmv.updateSelectedColour(colour))
+    }
+
     get meshScale() {
         return this._meshScale
     }