Add UI to change gizmo mode (#37)

application/electron-app/src/global.d.ts

@@ -1,2 +1,7 @@
-declare const CESIUM_ION_TOKEN: string;
-declare const TERRAIN_TILESET_URL: string;
+declare const CESIUM_ION_TOKEN: string
+declare const TERRAIN_TILESET_URL: string
+
+declare module '*.png' {
+  const value: string
+  export = value
+}

application/server-client-app/src-client/global.d.ts

@@ -1,2 +1,7 @@
-declare const CESIUM_ION_TOKEN: string;
-declare const TERRAIN_TILESET_URL: string;
+declare const CESIUM_ION_TOKEN: string
+declare const TERRAIN_TILESET_URL: string
+
+declare module '*.png' {
+  const value: string
+  export = value
+}

application/web-client-app/src/global.d.ts

@@ -1,2 +1,7 @@
-declare const CESIUM_ION_TOKEN: string;
-declare const TERRAIN_TILESET_URL: string;
+declare const CESIUM_ION_TOKEN: string
+declare const TERRAIN_TILESET_URL: string
+
+declare module '*.png' {
+  const value: string
+  export = value
+}

library/spirare-babylonjs/src/app.ts

@@ -24,6 +24,7 @@ import {
   ScrollViewer,
   Grid,
   TextBlock,
+  Button,
 } from '@babylonjs/gui'
 import { Guid } from 'guid-typescript'
 import { LoadPomlOptions, PomlLoader } from './pomlLoader'
@@ -48,7 +49,7 @@ import {
   MaybeSpirareNode,
   SpirareNode,
 } from './spirareNode/spirareNode'
-import { GizmoController } from './gizmoController'
+import { GizmoController, GizmoMode } from './gizmoController'
 import { GeoManager } from './cesium/geoManager'
 import { B3dmLoader } from './cesium/b3dmLoader'
 import {
@@ -78,6 +79,11 @@ import { CoordinateConverter } from './coordinateConverter'
 import { openFilePicker } from './filePicker'
 import clone from 'clone'
 
+import gizmoNoneIcon from './images/hand.png'
+import gizmoScaleIcon from './images/scale.png'
+import gizmoRotationIcon from './images/refresh_alt.png'
+import gizmoPositionIcon from './images/move.png'
+
 export type CameraControllerFactory = (
   app: App,
   scene: Scene,
@@ -149,6 +155,8 @@ export class App {
   private dataAttribution: string[] = []
   private dataAttributionTextBlock: TextBlock | undefined
 
+  private gizmoModeButtons = new Map<GizmoMode, Button>()
+
   public get title(): string | undefined {
     return this._title
   }
@@ -707,22 +715,27 @@ export class App {
 
       if (e.key == 'x') {
         this.gizmoController.switchGizmoCoordinate()
+        this.updateGizmoModePanel()
       }
 
       if (e.key == 'q') {
         this.gizmoController.setGizmoMode('none')
+        this.updateGizmoModePanel()
       }
 
       if (e.key == 'w') {
         this.gizmoController.setGizmoMode('position')
+        this.updateGizmoModePanel()
       }
 
       if (e.key == 'e') {
         this.gizmoController.setGizmoMode('rotation')
+        this.updateGizmoModePanel()
       }
 
       if (e.key == 'r') {
         this.gizmoController.setGizmoMode('scale')
+        this.updateGizmoModePanel()
       }
 
       if (e.key == 'm') {
@@ -1047,6 +1060,10 @@ export class App {
       panelRows.push(this.createNewNodePanel())
     }
 
+    if (isEditor) {
+      panelRows.push(this.createGizmoModePanel())
+    }
+
     // Load poml from URL.
     // This feature is only enabled in Viewer mode.
     if (isViewer) {
@@ -1186,6 +1203,70 @@ export class App {
     )
   }
 
+  private updateGizmoModePanel() {
+    this.gizmoModeButtons.forEach((button, buttonMode) => {
+      if (buttonMode === this.gizmoController.gizmoMode) {
+        button.background = '#778899'
+      } else {
+        button.background = 'gray'
+      }
+    })
+  }
+
+  private createGizmoModePanel() {
+    const buttonParam = {
+      margin: '14px',
+    }
+
+    const buttonAction = (gizmoMode: GizmoMode): (() => void) => {
+      return () => {
+        this.gizmoController.setGizmoMode(gizmoMode)
+        this.updateGizmoModePanel()
+      }
+    }
+
+    const noneButton = UIHelper.createImageButton(
+      gizmoNoneIcon,
+      buttonParam,
+      buttonAction('none')
+    )
+
+    const positionButton = UIHelper.createImageButton(
+      gizmoPositionIcon,
+      buttonParam,
+      buttonAction('position')
+    )
+
+    const rotationButton = UIHelper.createImageButton(
+      gizmoRotationIcon,
+      buttonParam,
+      buttonAction('rotation')
+    )
+
+    const scaleButton = UIHelper.createImageButton(
+      gizmoScaleIcon,
+      buttonParam,
+      buttonAction('scale')
+    )
+
+    this.gizmoModeButtons.set('none', noneButton)
+    this.gizmoModeButtons.set('position', positionButton)
+    this.gizmoModeButtons.set('rotation', rotationButton)
+    this.gizmoModeButtons.set('scale', scaleButton)
+
+    this.updateGizmoModePanel()
+
+    return UIHelper.createStackPanel(
+      {
+        isVertical: false,
+        width: '400px',
+        height: '30px',
+        spacing: 1,
+      },
+      [noneButton, positionButton, rotationButton, scaleButton]
+    )
+  }
+
   private createNewNodePanel(): Control {
     const grid = UIHelper.createGrid({
       background: 'gray',

library/spirare-babylonjs/src/gizmoController.ts

@@ -14,7 +14,11 @@ export class GizmoController {
   private readonly gizmoManager: GizmoManager
 
   private gizmoCoordinate: GizmoCoordinate = 'world'
-  private gizmoMode: GizmoMode = 'position'
+  private _gizmoMode: GizmoMode = 'position'
+
+  public get gizmoMode(): GizmoMode {
+    return this._gizmoMode
+  }
 
   private validInput: boolean = false
   private gizmoIsHidden: boolean = false
@@ -50,11 +54,11 @@ export class GizmoController {
   }
 
   public setGizmoMode(mode: GizmoMode) {
-    if (this.gizmoMode == mode) {
+    if (this._gizmoMode == mode) {
       return
     }
 
-    this.gizmoMode = mode
+    this._gizmoMode = mode
     if (!this.gizmoIsHidden) {
       this.showGizmo()
     }
@@ -149,7 +153,7 @@ export class GizmoController {
   private showGizmo() {
     const gm = this.gizmoManager
 
-    switch (this.gizmoMode) {
+    switch (this._gizmoMode) {
       case 'none':
         gm.positionGizmoEnabled = false
         gm.rotationGizmoEnabled = false

library/spirare-babylonjs/src/global.d.ts

@@ -1,2 +1,7 @@
-declare const CESIUM_ION_TOKEN: string;
-declare const TERRAIN_TILESET_URL: string;
+declare const CESIUM_ION_TOKEN: string
+declare const TERRAIN_TILESET_URL: string
+
+declare module '*.png' {
+  const value: string
+  export = value
+}

library/spirare-babylonjs/src/uiHelper.ts

@@ -165,6 +165,33 @@ export class UIHelper {
     return button
   }
 
+  public static createImageButton(
+    imageUrl: string,
+    param?: object,
+    onPointerUp?: () => void
+  ) {
+    const defaultParam = {
+      horizontalAlignment: Button.HORIZONTAL_ALIGNMENT_LEFT,
+      verticalAlignment: Button.VERTICAL_ALIGNMENT_TOP,
+      width: '28px',
+      height: '28px',
+      color: 'black', // border color
+      background: 'white',
+    }
+    const button = Object.assign(Button.CreateImageOnlyButton('', imageUrl), {
+      ...defaultParam,
+      ...param,
+    })
+
+    // Invoke onPointerUp only on left-click.
+    button.onPointerUpObservable.add((event) => {
+      if (event.buttonIndex == 0) {
+        onPointerUp?.()
+      }
+    })
+    return button
+  }
+
   public static createInputText(
     text: string,
     param?: object,