Fix offset when creating node with mouse

frontend/javascripts/libs/input.ts

@@ -676,6 +676,8 @@ export class InputMouse {
       width: 0,
       height: 0,
     };
+    // Don't use {...boundingRect, }, because boundingRect is a DOMRect
+    // which isn't compatible with the spreading, apparently.
     return _.extend({}, boundingRect, {
       left: boundingRect.left + window.scrollX,
       top: boundingRect.top + window.scrollY,

frontend/javascripts/oxalis/constants.ts

@@ -267,7 +267,7 @@ export const POSITION_REF_REGEX = /#\(([0-9]+,[0-9]+,[0-9]+)\)/g;
 // The plane in orthogonal mode is a little smaller than the viewport
 // There is an outer yellow CSS border and an inner (red/green/blue) border
 // that is a result of the plane being smaller than the renderer viewport
-export const OUTER_CSS_BORDER = 2;
+export const OUTER_CSS_BORDER = 0;
 const VIEWPORT_WIDTH = 376;
 export const ensureSmallerEdge = false;
 export const Unicode = {

frontend/javascripts/oxalis/geometries/plane.ts

@@ -140,12 +140,11 @@ class Plane {
   };
 
   setScale(xFactor: number, yFactor: number): void {
-    if (this.lastScaleFactors[0] !== xFactor || this.lastScaleFactors[1] !== yFactor) {
-      this.lastScaleFactors[0] = xFactor;
-      this.lastScaleFactors[1] = yFactor;
-    } else {
+    if (this.lastScaleFactors[0] === xFactor && this.lastScaleFactors[1] === yFactor) {
       return;
     }
+    this.lastScaleFactors[0] = xFactor;
+    this.lastScaleFactors[1] = yFactor;
 
     const scaleVec = new THREE.Vector3().multiplyVectors(
       new THREE.Vector3(xFactor, yFactor, 1),

frontend/javascripts/oxalis/view/input_catcher.tsx

@@ -146,30 +146,32 @@ function InputCatcher({
   );
 
   return (
-    <div
-      className="flexlayout-dont-overflow"
-      onContextMenu={ignoreContextMenu}
-      style={{ cursor: busyBlockingInfo.isBusy ? "wait" : cursorForTool[adaptedTool] }}
-    >
+    <div className={`inputcatcher-border ${viewportID}`}>
       <div
-        id={`inputcatcher_${viewportID}`}
-        ref={(domElement) => {
-          domElementRef.current = domElement;
-        }}
-        data-value={viewportID}
-        className={`inputcatcher ${viewportID}`}
-        style={{
-          position: "relative",
-          // Disable inputs while wk is busy. However, keep the custom cursor and the ignoreContextMenu handler
-          // which is why those are defined at the outer element.
-          pointerEvents: busyBlockingInfo.isBusy ? "none" : "auto",
-        }}
+        className="flexlayout-dont-overflow"
+        onContextMenu={ignoreContextMenu}
+        style={{ cursor: busyBlockingInfo.isBusy ? "wait" : cursorForTool[adaptedTool] }}
       >
-        <ViewportStatusIndicator />
-        {displayScalebars && viewportID !== "arbitraryViewport" ? (
-          <Scalebar viewportID={viewportID} />
-        ) : null}
-        {children}
+        <div
+          id={`inputcatcher_${viewportID}`}
+          ref={(domElement) => {
+            domElementRef.current = domElement;
+          }}
+          data-value={viewportID}
+          className={`inputcatcher ${viewportID}`}
+          style={{
+            position: "relative",
+            // Disable inputs while wk is busy. However, keep the custom cursor and the ignoreContextMenu handler
+            // which is why those are defined at the outer element.
+            pointerEvents: busyBlockingInfo.isBusy ? "none" : "auto",
+          }}
+        >
+          <ViewportStatusIndicator />
+          {displayScalebars && viewportID !== "arbitraryViewport" ? (
+            <Scalebar viewportID={viewportID} />
+          ) : null}
+          {children}
+        </div>
       </div>
     </div>
   );

frontend/javascripts/oxalis/view/scalebar.tsx

@@ -80,7 +80,7 @@ function Scalebar({ zoomValue, dataset, viewportWidthInPixels, viewportHeightInP
             ? 16
             : `calc(${scaleBarWidthFactor * 100}% - ${Math.round(
                 ((2 * OUTER_CSS_BORDER) / constants.VIEWPORT_WIDTH) * 100,
-              )}% + ${2 * padding}px)`,
+              )}%)`,
           height: constants.SCALEBAR_HEIGHT - padding * 2,
           background: "rgba(0, 0, 0, .3)",
           color: "white",

frontend/stylesheets/trace_view/_tracing_view.less

@@ -18,18 +18,15 @@
   position: absolute;
   width: 100%;
 }
-.inputcatcher {
+.inputcatcher-border {
   border-style: solid;
   border-width: 2px;
-  z-index: 20;
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  float: left;
-  margin: 0;
   opacity: 0.85;
   width: 100%;
   height: 100%;
-
+  &:hover {
+    opacity: 1;
+  }
   &.PLANE_XY {
     border-color: var(--color-xy-viewport);
   }
@@ -42,10 +39,13 @@
   &.TDView {
     border-color: white;
   }
-
-  &:hover {
-    opacity: 1;
-  }
+}
+.inputcatcher {
+  z-index: 20;
+  float: left;
+  margin: 0;
+  width: 100%;
+  height: 100%;
 }
 
 #inputcatcher_TDView {
@@ -549,7 +549,6 @@ img.keyboard-mouse-icon:first-child {
   opacity: 0.65;
 }
 
-
 .segment-context-icon {
   margin-inline-end: var(--ant-margin-xs);
   height: 12px;