Simplify annotations update

jupytercad · May 16, 2023 · 7ad2b13 · 7ad2b13
1 parent e8c008f
commit 7ad2b13
Showing 1 changed file with 28 additions and 42 deletions.
diff --git a/packages/jupytercad-extension/src/mainview.tsx b/packages/jupytercad-extension/src/mainview.tsx
@@ -265,12 +265,8 @@ export class MainView extends React.Component<IProps, IStates> {
         this._onPointerMove.bind(this)
       );
       this._renderer.domElement.addEventListener('mouseup', e => {
-        this._updateAnnotation({ updateDisplay: 1, updatePosition: true });
         this._onClick.bind(this)(e);
       });
-      this._renderer.domElement.addEventListener('mousedown', e => {
-        this._updateAnnotation({ updateDisplay: 0 });
-      });
 
       this._renderer.domElement.addEventListener('contextmenu', e => {
         e.preventDefault();
@@ -292,11 +288,12 @@ export class MainView extends React.Component<IProps, IStates> {
       );
       this._controls = controls;
 
+      this._controls.addEventListener('change', () => {
+        this._updateAnnotation();
+      });
       this._controls.addEventListener(
         'change',
         throttle(() => {
-          this._updateAnnotation({ updatePosition: true });
-
           // Not syncing camera state if following someone else
           if (this._model.localState?.remoteUser) {
             return;
@@ -406,52 +403,41 @@ export class MainView extends React.Component<IProps, IStates> {
     );
   };
 
-  private _updateAnnotation = (options: {
-    updatePosition?: boolean;
-    updateDisplay?: number;
-  }) => {
+  private _updateAnnotation() {
     Object.keys(this.state.annotations).forEach(key => {
       const el = document.getElementById(key);
       if (el) {
-        if (
-          options.updatePosition &&
-          (el.style.opacity !== '0' || options.updateDisplay !== undefined)
-        ) {
-          const annotation = this._model.annotationModel?.getAnnotation(key);
-          let screenPosition = new THREE.Vector2();
-
-          if (annotation) {
-            const parent = this._meshGroup?.getObjectByName(
-              annotation.parent
-            ) as BasicMesh;
-            const position = new THREE.Vector3(
-              annotation.position[0],
-              annotation.position[1],
-              annotation.position[2]
-            );
+        const annotation = this._model.annotationModel?.getAnnotation(key);
+        let screenPosition = new THREE.Vector2();
 
-            // If in exploded view, we explode the annotation position as well
-            if (this._explodedView.enabled && parent) {
-              const explodedState = this._computeExplodedState(parent);
-              const explodeVector = explodedState.vector.multiplyScalar(
-                explodedState.distance
-              );
+        if (annotation) {
+          const parent = this._meshGroup?.getObjectByName(
+            annotation.parent
+          ) as BasicMesh;
+          const position = new THREE.Vector3(
+            annotation.position[0],
+            annotation.position[1],
+            annotation.position[2]
+          );
 
-              position.add(explodeVector);
-            }
+          // If in exploded view, we explode the annotation position as well
+          if (this._explodedView.enabled && parent) {
+            const explodedState = this._computeExplodedState(parent);
+            const explodeVector = explodedState.vector.multiplyScalar(
+              explodedState.distance
+            );
 
-            screenPosition = this._projectVector(position);
+            position.add(explodeVector);
           }
 
-          el.style.left = `${screenPosition.x}px`;
-          el.style.top = `${screenPosition.y}px`;
-        }
-        if (options.updateDisplay !== undefined) {
-          el.style.opacity = options.updateDisplay.toString();
+          screenPosition = this._projectVector(position);
         }
+
+        el.style.left = `${Math.round(screenPosition.x)}px`;
+        el.style.top = `${Math.round(screenPosition.y)}px`;
       }
     });
-  };
+  }
 
   private _onPointerMove(e: MouseEvent) {
     const rect = this._renderer.domElement.getBoundingClientRect();
@@ -1065,7 +1051,7 @@ export class MainView extends React.Component<IProps, IStates> {
 
   private _handleWindowResize = (): void => {
     this.resizeCanvasToDisplaySize();
-    this._updateAnnotation({ updatePosition: true, updateDisplay: 1 });
+    this._updateAnnotation();
   };
 
   render(): JSX.Element {