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/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/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,15 @@
   &.TDView {
     border-color: white;
   }
-
-  &:hover {
-    opacity: 1;
-  }
+}
+.inputcatcher {
+  z-index: 20;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  float: left;
+  margin: 0;
+  width: 100%;
+  height: 100%;
 }
 
 #inputcatcher_TDView {
@@ -549,7 +551,6 @@ img.keyboard-mouse-icon:first-child {
   opacity: 0.65;
 }
 
-
 .segment-context-icon {
   margin-inline-end: var(--ant-margin-xs);
   height: 12px;