From c70ef0372b6539a86bcfde23ca0c4b2cf5548b67 Mon Sep 17 00:00:00 2001
From: Val Erastov <xibyte@gmail.com>
Date: Tue, 15 Nov 2022 20:34:17 -0800
Subject: [PATCH] convert ViewCube to react

---
 modules/scene/sceneSetup.ts               | 37 ---------
 web/app/cad/actions/actionSystemBundle.ts |  2 +-
 web/app/cad/scene/controls/ViewCube.less  | 64 +++++++++++++++
 web/app/cad/scene/controls/ViewCube.tsx   | 64 +++++++++++++++
 web/app/cad/scene/sceneBundle.ts          |  2 +
 web/index.html                            | 98 -----------------------
 6 files changed, 131 insertions(+), 136 deletions(-)
 create mode 100644 web/app/cad/scene/controls/ViewCube.less
 create mode 100644 web/app/cad/scene/controls/ViewCube.tsx

diff --git a/modules/scene/sceneSetup.ts b/modules/scene/sceneSetup.ts
index 5bb4eed2..7d13d53f 100644
--- a/modules/scene/sceneSetup.ts
+++ b/modules/scene/sceneSetup.ts
@@ -277,11 +277,8 @@ export default class SceneSetUp {
 
 
   animate() {
-    let mat = new Matrix4();
-    mat.extractRotation( this.camera.matrixWorldInverse );
     requestAnimationFrame( () => this.animate() );
     const controlsChangedViewpoint = this.trackballControls.evaluate();
-    this.viewCube.style.transform = `translateZ(-300px) ${getCameraCSSMatrix( mat )}`;
     if (controlsChangedViewpoint || this.renderRequested) {
       this.__render_NeverCallMeFromOutside();
     }
@@ -311,37 +308,3 @@ export function getSceneSetup(object3D) {
 }
 
 const ORTHOGRAPHIC_CAMERA_FACTOR = 1;
-
-
-
-
-function getCameraCSSMatrix(matrix) {
-
-  var elements = matrix.elements;
-
-  return 'matrix3d(' +
-    epsilon(elements[0]) + ',' +
-    epsilon(-elements[1]) + ',' +
-    epsilon(elements[2]) + ',' +
-    epsilon(elements[3]) + ',' +
-    epsilon(elements[4]) + ',' +
-    epsilon(-elements[5]) + ',' +
-    epsilon(elements[6]) + ',' +
-    epsilon(elements[7]) + ',' +
-    epsilon(elements[8]) + ',' +
-    epsilon(-elements[9]) + ',' +
-    epsilon(elements[10]) + ',' +
-    epsilon(elements[11]) + ',' +
-    epsilon(elements[12]) + ',' +
-    epsilon(-elements[13]) + ',' +
-    epsilon(elements[14]) + ',' +
-    epsilon(elements[15]) +
-    ')';
-
-}
-
-function epsilon( value ) {
-
-  return Math.abs( value ) < 1e-10 ? 0 : value;
-
-}
\ No newline at end of file
diff --git a/web/app/cad/actions/actionSystemBundle.ts b/web/app/cad/actions/actionSystemBundle.ts
index ce1d3b8c..f1645c3a 100644
--- a/web/app/cad/actions/actionSystemBundle.ts
+++ b/web/app/cad/actions/actionSystemBundle.ts
@@ -145,7 +145,7 @@ export interface ActionDefinition<T = void> {
 
 export interface ActionService {
 
-  run(id: string, data: any): void;
+  run(id: string, data?: any): void;
   registerAction(action: ActionDefinition): void;
   registerActions(actions: ActionDefinition[]): void;
   showHintFor(request: HintRequest): void;
diff --git a/web/app/cad/scene/controls/ViewCube.less b/web/app/cad/scene/controls/ViewCube.less
new file mode 100644
index 00000000..29bfd363
--- /dev/null
+++ b/web/app/cad/scene/controls/ViewCube.less
@@ -0,0 +1,64 @@
+.cubeHolder {
+  pointer-events: auto;
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  right:50px;
+  bottom:100px;
+  z-index: 100000;
+  transform: scale(0.5);
+  cursor: pointer;
+  user-select: none;
+  /* transition: transform 1s; */
+}
+
+.cube {
+  width: 50px;
+  height: 50px;
+  position: relative;
+  transform-style: preserve-3d;
+  transform: translateZ(-300px);
+  /* transition: transform 1s; */
+}
+
+.face {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: 2px solid black;
+  line-height: 100px;
+  font-size: 20px;
+  font-weight: bold;
+  color: white;
+  text-align: center;
+}
+
+.front {
+  background: rgba(0, 0, 255, 0.7);
+  transform: rotateY(0deg) rotateX(180deg) translateZ(-50px);
+}
+
+.right {
+  background: rgba(255, 0, 0, 0.7);
+  transform: rotateY(90deg) rotateX(180deg) translateZ(-50px);
+}
+
+.back {
+  background: rgba(0, 255, 255, 0.7);
+  transform: rotateY(180deg) rotateX(180deg) translateZ(-50px);
+}
+
+.left {
+  background: rgba(255, 0, 255, 0.7);
+  transform: rotateY(-90deg) rotateX(180deg) translateZ(-50px);
+}
+
+.top {
+  background: rgba(0, 255, 0, 0.7);
+  transform: rotateX(-90deg) rotateX(180deg) translateZ(-50px);
+}
+
+.bottom {
+  background: rgba(255, 255, 0, 0.7);
+  transform: rotateX(90deg) rotateX(180deg) translateZ(-50px);
+}
diff --git a/web/app/cad/scene/controls/ViewCube.tsx b/web/app/cad/scene/controls/ViewCube.tsx
new file mode 100644
index 00000000..fb268512
--- /dev/null
+++ b/web/app/cad/scene/controls/ViewCube.tsx
@@ -0,0 +1,64 @@
+import React, {useContext} from "react";
+import {ApplicationContext} from "cad/context";
+import {ReactApplicationContext} from "cad/dom/ReactApplicationContext";
+import {useStream} from "ui/effects";
+import {Matrix4} from "three";
+import ls from './ViewCube.less';
+import cx from "classnames";
+
+export function ViewCube() {
+
+  const context: ApplicationContext = useContext(ReactApplicationContext);
+
+  const cssMatrix = useStream(ctx => ctx.viewer.sceneSetup.sceneRendered$.map(() => {
+    const mat = new Matrix4();
+    mat.extractRotation( ctx.viewer.sceneSetup.camera.matrixWorldInverse );
+    return getCameraCSSMatrix( mat );
+  }));
+
+  return <div className={ls.cubeHolder}>
+    <div className={ls.cube} style={{
+      transform: `translateZ(-300px) ${cssMatrix}`
+    }}>
+      <div className={cx(ls.face, ls.front)} onClick={() => context.actionService.run('StandardViewFront')}> front</div>
+      <div className={cx(ls.face, ls.back)} onClick={() => context.actionService.run('StandardViewBack')}>back</div>
+      <div className={cx(ls.face, ls.right)} onClick={() => context.actionService.run('StandardViewRight')}>right</div>
+      <div className={cx(ls.face, ls.left)} onClick={() => context.actionService.run('StandardViewLeft')}>left</div>
+      <div className={cx(ls.face, ls.top)} onClick={() => context.actionService.run('StandardViewTop')}>top</div>
+      <div className={cx(ls.face, ls.bottom)} onClick={() => context.actionService.run('StandardViewBottom')}>bottom</div>
+    </div>
+  </div>
+
+
+}
+
+function getCameraCSSMatrix(matrix) {
+
+  var elements = matrix.elements;
+
+  return 'matrix3d(' +
+    epsilon(elements[0]) + ',' +
+    epsilon(-elements[1]) + ',' +
+    epsilon(elements[2]) + ',' +
+    epsilon(elements[3]) + ',' +
+    epsilon(elements[4]) + ',' +
+    epsilon(-elements[5]) + ',' +
+    epsilon(elements[6]) + ',' +
+    epsilon(elements[7]) + ',' +
+    epsilon(elements[8]) + ',' +
+    epsilon(-elements[9]) + ',' +
+    epsilon(elements[10]) + ',' +
+    epsilon(elements[11]) + ',' +
+    epsilon(elements[12]) + ',' +
+    epsilon(-elements[13]) + ',' +
+    epsilon(elements[14]) + ',' +
+    epsilon(elements[15]) +
+    ')';
+
+}
+
+function epsilon( value ) {
+
+  return Math.abs( value ) < 1e-10 ? 0 : value;
+
+}
\ No newline at end of file
diff --git a/web/app/cad/scene/sceneBundle.ts b/web/app/cad/scene/sceneBundle.ts
index 5ccadda6..4fb2ba80 100644
--- a/web/app/cad/scene/sceneBundle.ts
+++ b/web/app/cad/scene/sceneBundle.ts
@@ -1,6 +1,7 @@
 import Viewer from './viewer';
 import CadScene from './cadScene';
 import {ApplicationContext} from "cad/context";
+import {ViewCube} from "cad/scene/controls/ViewCube";
 
 export function activate(ctx: ApplicationContext) {
   const {services} = ctx;
@@ -44,6 +45,7 @@ export function activate(ctx: ApplicationContext) {
     }
   });
 
+  ctx.domService.contributeComponent(ViewCube);
 }
 
 export function dispose(ctx) {
diff --git a/web/index.html b/web/index.html
index 529a062f..4f4d3773 100644
--- a/web/index.html
+++ b/web/index.html
@@ -9,109 +9,11 @@
   <script src="./lib/verb.js"></script>
 </head>
 <body>
-  <style>
-    .cubeHolder {
-    width: 100px;
-    height: 100px;
-    position: absolute;
-    right:50px;
-    bottom:100px;
-    z-index: 100000;
-    width: fit-content;
-    transform: scale(0.5);
-    cursor: pointer;
-    user-select: none;
-    /* transition: transform 1s; */
-  }
-
-  .cube {
-  width: 50px;
-  height: 50px;
-  position: relative;
-  transform-style: preserve-3d;
-  transform: translateZ(-300px);
-
-  /* transition: transform 1s; */
-}
-  
-  .cube__face {
-    position: absolute;
-    width: 100px;
-    height: 100px;
-    border: 2px solid black;
-    line-height: 100px;
-    font-size: 20px;
-    font-weight: bold;
-    color: white;
-    text-align: center;
-  }
-  
-  .cube__face--front {
-    background: rgba(0, 0, 255, 0.7);
-  }
-  
-  .cube__face--right {
-    background: rgba(255, 0, 0, 0.7);
-  }
-  
-  .cube__face--back {
-    background: rgba(0, 255, 255, 0.7);
-  }
-  
-  .cube__face--left {
-    background: rgba(255, 0, 255, 0.7);
-  }
-  
-  .cube__face--top {
-    background: rgba(0, 255, 0, 0.7);
-  }
-  
-  .cube__face--bottom {
-    background: rgba(255, 255, 0, 0.7);
-  }
-  
-  .cube__face--front {
-    transform: rotateY(0deg) rotateX(180deg) translateZ(-50px);
-  }
-  
-  .cube__face--right {
-    transform: rotateY(90deg) rotateX(180deg) translateZ(-50px);
-  }
-  
-  .cube__face--back {
-    transform: rotateY(180deg) rotateX(180deg) translateZ(-50px);
-  }
-  
-  .cube__face--left {
-    transform: rotateY(-90deg) rotateX(180deg) translateZ(-50px);
-  }
-  
-  .cube__face--top {
-    transform: rotateX(-90deg) rotateX(180deg) translateZ(-50px);
-  }
-  
-  .cube__face--bottom {
-    transform: rotateX(90deg) rotateX(180deg) translateZ(-50px);
-  }
-  
-  </style>
-  <div class="cubeHolder">
-    <div class="cube">
-      <div class="cube__face cube__face--front" onclick="__CAD_APP.actionService.run('StandardViewFront')"> front</div>
-      <div class="cube__face cube__face--back" onclick="__CAD_APP.actionService.run('StandardViewBack')">back</div>
-      <div class="cube__face cube__face--right" onclick="__CAD_APP.actionService.run('StandardViewRight')">right</div>
-      <div class="cube__face cube__face--left" onclick="__CAD_APP.actionService.run('StandardViewLeft')">left</div>
-      <div class="cube__face cube__face--top" onclick="__CAD_APP.actionService.run('StandardViewTop')">top</div>
-      <div class="cube__face cube__face--bottom" onclick="__CAD_APP.actionService.run('StandardViewBottom')">bottom</div>
-    </div>
-  </div>
 
   <a id="downloader" style="display: none;" ></a>
   <input id="uploader" style="display: none;" type="file">
   <div id="app" style="height: 100%;"></div>
 
-
-
   <script src="./static/index.bundle.js"></script>
 </body>
 </html>