Update splitview control

jupytercad · Nov 13, 2024 · 26b85c7 · 26b85c7
1 parent fd1fa58
commit 26b85c7
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 36 deletions.
diff --git a/packages/base/src/3dview/helpers.ts b/packages/base/src/3dview/helpers.ts
@@ -23,6 +23,7 @@ THREE.Mesh.prototype.raycast = acceleratedRaycast;
 export const DEFAULT_MESH_COLOR_CSS = '--jp-inverse-layout-color4';
 export const DEFAULT_EDGE_COLOR_CSS = '--jp-inverse-layout-color2';
 export const BOUNDING_BOX_COLOR_CSS = '--jp-brand-color0';
+export const SPLITVIEW_BACKGROUND_COLOR_CSS = '--jcad-splitview-background';
 export const SELECTION_BOUNDING_BOX = 'selectionBoundingBox';
 
 export const DEFAULT_MESH_COLOR = new THREE.Color(
@@ -35,6 +36,10 @@ export const BOUNDING_BOX_COLOR = new THREE.Color(
   getCSSVariableColor(BOUNDING_BOX_COLOR_CSS)
 );
 
+export const SPLITVIEW_BACKGROUND_COLOR = new THREE.Color(
+  getCSSVariableColor(SPLITVIEW_BACKGROUND_COLOR_CSS)
+);
+
 export type BasicMesh = THREE.Mesh<
   THREE.BufferGeometry,
   THREE.MeshBasicMaterial | THREE.MeshStandardMaterial

diff --git a/packages/base/src/3dview/mainview.tsx b/packages/base/src/3dview/mainview.tsx
@@ -49,7 +49,9 @@ import {
   buildShape,
   computeExplodedState,
   projectVector,
-  IMouseDrag
+  IMouseDrag,
+  SPLITVIEW_BACKGROUND_COLOR,
+  SPLITVIEW_BACKGROUND_COLOR_CSS
 } from './helpers';
 import { MainViewModel } from './mainviewmodel';
 import { Spinner } from './spinner';
@@ -211,11 +213,13 @@ export class MainView extends React.Component<IProps, IStates> {
   };
 
   sceneSetup = (): void => {
-    if (this.divRef.current !== null) {
+    if (this._divRef.current !== null) {
       DEFAULT_MESH_COLOR.set(getCSSVariableColor(DEFAULT_MESH_COLOR_CSS));
       DEFAULT_EDGE_COLOR.set(getCSSVariableColor(DEFAULT_EDGE_COLOR_CSS));
       BOUNDING_BOX_COLOR.set(getCSSVariableColor(BOUNDING_BOX_COLOR_CSS));
-
+      SPLITVIEW_BACKGROUND_COLOR.set(
+        getCSSVariableColor(SPLITVIEW_BACKGROUND_COLOR_CSS)
+      );
       this._camera = new THREE.PerspectiveCamera(
         50,
         2,
@@ -248,7 +252,7 @@ export class MainView extends React.Component<IProps, IStates> {
       this._renderer.autoClear = false;
       this._renderer.setClearColor(0x000000, 0);
       this._renderer.setSize(500, 500, false);
-      this.divRef.current.appendChild(this._renderer.domElement); // mount using React ref
+      this._divRef.current.appendChild(this._renderer.domElement); // mount using React ref
 
       this._syncPointer = throttle(
         (position: THREE.Vector3 | undefined, parent: string | undefined) => {
@@ -451,9 +455,9 @@ export class MainView extends React.Component<IProps, IStates> {
     // Remove the existing ViewHelperDiv if it already exists
     if (
       this._viewHelperDiv &&
-      this.divRef.current?.contains(this._viewHelperDiv)
+      this._divRef.current?.contains(this._viewHelperDiv)
     ) {
-      this.divRef.current.removeChild(this._viewHelperDiv);
+      this._divRef.current.removeChild(this._viewHelperDiv);
     }
 
     // Create new ViewHelper
@@ -469,7 +473,7 @@ export class MainView extends React.Component<IProps, IStates> {
 
     this._viewHelperDiv = viewHelperDiv;
 
-    this.divRef.current?.appendChild(this._viewHelperDiv);
+    this._divRef.current?.appendChild(this._viewHelperDiv);
 
     this._viewHelperDiv.addEventListener('pointerup', event =>
       this._viewHelper.handleClick(event)
@@ -508,15 +512,15 @@ export class MainView extends React.Component<IProps, IStates> {
         0,
         0,
         this._sliderPos,
-        this.divRef.current?.clientHeight || 0
+        this._divRef.current?.clientHeight || 0
       );
       this._renderer.render(this._sceneL, this._camera);
 
       this._renderer.setScissor(
         this._sliderPos,
         0,
-        this.divRef.current?.clientWidth || 0,
-        this.divRef.current?.clientHeight || 0
+        this._divRef.current?.clientWidth || 0,
+        this._divRef.current?.clientHeight || 0
       );
       this._renderer.render(this._scene, this._camera);
     } else {
@@ -528,20 +532,20 @@ export class MainView extends React.Component<IProps, IStates> {
   };
 
   resizeCanvasToDisplaySize = (): void => {
-    if (this.divRef.current !== null) {
+    if (this._divRef.current !== null) {
       this._renderer.setSize(
-        this.divRef.current.clientWidth,
-        this.divRef.current.clientHeight,
+        this._divRef.current.clientWidth,
+        this._divRef.current.clientHeight,
         false
       );
       if (this._camera instanceof THREE.PerspectiveCamera) {
         this._camera.aspect =
-          this.divRef.current.clientWidth / this.divRef.current.clientHeight;
+          this._divRef.current.clientWidth / this._divRef.current.clientHeight;
       } else if (this._camera instanceof THREE.OrthographicCamera) {
-        this._camera.left = this.divRef.current.clientWidth / -2;
-        this._camera.right = this.divRef.current.clientWidth / 2;
-        this._camera.top = this.divRef.current.clientHeight / 2;
-        this._camera.bottom = this.divRef.current.clientHeight / -2;
+        this._camera.left = this._divRef.current.clientWidth / -2;
+        this._camera.right = this._divRef.current.clientWidth / 2;
+        this._camera.top = this._divRef.current.clientHeight / 2;
+        this._camera.bottom = this._divRef.current.clientHeight / -2;
       }
       this._camera.updateProjectionMatrix();
     }
@@ -1541,8 +1545,8 @@ export class MainView extends React.Component<IProps, IStates> {
         CAMERA_FAR
       );
     } else {
-      const width = this.divRef.current?.clientWidth || 0;
-      const height = this.divRef.current?.clientHeight || 0;
+      const width = this._divRef.current?.clientWidth || 0;
+      const height = this._divRef.current?.clientHeight || 0;
 
       const distance = position.distanceTo(target);
       const zoomFactor = 1000 / distance;
@@ -1578,16 +1582,15 @@ export class MainView extends React.Component<IProps, IStates> {
       if (!this._meshGroup) {
         return;
       }
-      // const currentGroup = this._meshGroup;
       this._renderer.setScissorTest(true);
 
-      this._sliderPos = (this.divRef.current?.clientWidth ?? 0) / 2;
+      this._sliderPos = (this._divRef.current?.clientWidth ?? 0) / 2;
       this._sceneL = new THREE.Scene();
-      const color =
-        document.body.getAttribute('data-jp-theme-light') === 'true'
-          ? 0xedf4f8
-          : 0x120b07;
-      this._sceneL.background = new THREE.Color(color);
+      // const color =
+      //   document.body.getAttribute('data-jp-theme-light') === 'true'
+      //     ? 0xedf4f8
+      //     : 0x120b07;
+      this._sceneL.background = SPLITVIEW_BACKGROUND_COLOR;
       this._sceneL.add(new THREE.AmbientLight(0xffffff, 0.5)); // soft white light
       const light = new THREE.HemisphereLight(0xffffff, 0x444444, 0.5);
       this._sceneL.add(light);
@@ -1602,19 +1605,24 @@ export class MainView extends React.Component<IProps, IStates> {
   }
 
   initSlider(display: boolean) {
-    const slider = document.querySelector(
+    if (!this._mainViewRef.current) {
+      return;
+    }
+    const slider = this._mainViewRef.current.querySelector(
       '.jpcad-SplitSlider'
     ) as HTMLDivElement;
-    const sliderLabelLeft = document.querySelector(
+    const sliderLabelLeft = this._mainViewRef.current.querySelector(
       '#split-label-left'
     ) as HTMLDivElement;
-    const sliderLabelRight = document.querySelector(
+    const sliderLabelRight = this._mainViewRef.current.querySelector(
       '#split-label-right'
     ) as HTMLDivElement;
+
     if (display) {
       slider.style.display = 'unset';
       sliderLabelLeft.style.display = 'unset';
       sliderLabelRight.style.display = 'unset';
+      slider.style.left = this._sliderPos - slider.offsetWidth / 2 + 'px';
     } else {
       slider.style.display = 'none';
       sliderLabelLeft.style.display = 'none';
@@ -1624,15 +1632,19 @@ export class MainView extends React.Component<IProps, IStates> {
       this._slideInit = true;
       let currentX = 0;
       let currentPost = 0;
+
       const onPointerDown = (e: PointerEvent) => {
+        e.preventDefault();
+
         this._controls.enabled = false;
         currentX = e.clientX;
         currentPost = this._sliderPos;
         window.addEventListener('pointermove', onPointerMove);
         window.addEventListener('pointerup', onPointerUp);
       };
 
-      const onPointerUp = () => {
+      const onPointerUp = e => {
+        e.preventDefault();
         this._controls.enabled = true;
         currentX = 0;
         currentPost = 0;
@@ -1641,7 +1653,8 @@ export class MainView extends React.Component<IProps, IStates> {
       };
 
       const onPointerMove = (e: PointerEvent) => {
-        if (!this.divRef.current || !slider) {
+        e.preventDefault();
+        if (!this._divRef.current || !slider) {
           return;
         }
 
@@ -1683,6 +1696,9 @@ export class MainView extends React.Component<IProps, IStates> {
     DEFAULT_MESH_COLOR.set(getCSSVariableColor(DEFAULT_MESH_COLOR_CSS));
     DEFAULT_EDGE_COLOR.set(getCSSVariableColor(DEFAULT_EDGE_COLOR_CSS));
     BOUNDING_BOX_COLOR.set(getCSSVariableColor(BOUNDING_BOX_COLOR_CSS));
+    SPLITVIEW_BACKGROUND_COLOR.set(
+      getCSSVariableColor(SPLITVIEW_BACKGROUND_COLOR_CSS)
+    );
 
     this._clippingPlaneMeshControl.material.color = DEFAULT_MESH_COLOR;
   };
@@ -1734,6 +1750,7 @@ export class MainView extends React.Component<IProps, IStates> {
             ? `solid 3px ${this.state.remoteUser.color}`
             : 'unset'
         }}
+        ref={this._mainViewRef}
       >
         <Spinner loading={this.state.loading} />
         <FollowIndicator remoteUser={this.state.remoteUser} />
@@ -1763,7 +1780,7 @@ export class MainView extends React.Component<IProps, IStates> {
         })}
         <div className="jpcad-SplitSlider" style={{ display: 'none' }}></div>
         <div
-          ref={this.divRef}
+          ref={this._divRef}
           style={{
             width: '100%',
             height: 'calc(100%)'
@@ -1795,7 +1812,8 @@ export class MainView extends React.Component<IProps, IStates> {
     );
   }
 
-  private divRef = React.createRef<HTMLDivElement>(); // Reference of render div
+  private _divRef = React.createRef<HTMLDivElement>(); // Reference of render div
+  private _mainViewRef = React.createRef<HTMLDivElement>(); // Reference of the main view element
 
   private _model: IJupyterCadModel;
   private _mainViewModel: MainViewModel;

diff --git a/python/jupytercad_lab/style/base.css b/python/jupytercad_lab/style/base.css
@@ -453,3 +453,10 @@ div.jpcad-toolbar-widget > div.jp-Toolbar-item:last-child {
   border: 2px solid #bdbdbd;
   opacity: 0.75;
 }
+
+body[data-jp-theme-light='false'] {
+  --jcad-splitview-background: #120b07;
+}
+body[data-jp-theme-light='true'] {
+  --jcad-splitview-background: #edf4f8;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -796,7 +796,7 @@ __metadata:
 
 "@jupyter/docprovider@file:../jupyter-collaboration/packages/docprovider::locator=%40jupytercad%2Fjupytercad-root%40workspace%3A.":
   version: 3.0.0
-  resolution: "@jupyter/docprovider@file:../jupyter-collaboration/packages/docprovider#../jupyter-collaboration/packages/docprovider::hash=36a685&locator=%40jupytercad%2Fjupytercad-root%40workspace%3A."
+  resolution: "@jupyter/docprovider@file:../jupyter-collaboration/packages/docprovider#../jupyter-collaboration/packages/docprovider::hash=2387a0&locator=%40jupytercad%2Fjupytercad-root%40workspace%3A."
   dependencies:
     "@jupyter/collaborative-drive": ^3.0.0
     "@jupyter/ydoc": ^2.0.0 || ^3.0.0
@@ -813,7 +813,7 @@ __metadata:
     y-protocols: ^1.0.5
     y-websocket: ^1.3.15
     yjs: ^13.5.40
-  checksum: 1d03c7111b788ba3095ea5a447e2fef39a5105369830d4ab1575a26cabd35038050efc1b8f3551eadf26b9ee853dca86d2d2b4fd7e00ed894dfdf976e4c6d62f
+  checksum: ba63045378c1e4079a86273d9a0e96458b841b42ba3368e8971ec6cf0860548ab7419224fcebebd4c149163d427dbaf9a01ce417541f8ff16a8ba51f306a2e8b
   languageName: node
   linkType: hard