SY-1217 schematic edges incorrectly positioned (#829)

* [console] - fixed incorrectly positioned items on layout laod

* [console] - fixed schematic endpoints positioned incorrectly

* [console] - removed commented out code and added documentation for an unintuitive section

* [console] - removed commented out code and added documentation for an unintuitive section

* [console] - adjusted tank handle offset slightly

---------

Co-authored-by: Elham Islam <elham@synnaxlabs.com>

console/src/schematic/Schematic.tsx

@@ -328,7 +328,10 @@ export const Loaded: Layout.Renderer = ({ layoutKey }) => {
           onViewportChange={handleViewportChange}
           edges={schematic.edges}
           nodes={schematic.nodes}
-          viewport={schematic.viewport}
+          // Turns out that setting the zoom value to 1 here doesn't have any negative
+          // effects on teh schematic sizing and ensures that we position all the lines
+          // in the correct place.
+          viewport={{ ...schematic.viewport, zoom: 1 }}
           onEdgesChange={handleEdgesChange}
           onNodesChange={handleNodesChange}
           onEditableChange={handleEditableChange}

pluto/src/vis/diagram/aether/types.ts

@@ -155,6 +155,7 @@ export const translateNodesForward = (nodes: Node[]): rf.Node[] =>
     ...node,
     id: node.key,
     type: "custom",
+    zIndex: 8,
     data: {},
   }));
 

pluto/src/vis/diagram/edge/Edge.css

@@ -23,10 +23,8 @@
     }
 }
 
-
 .react-flow__edge {
     z-index: 6;
-
 }
 
 .react-flow__edge.selected {

pluto/src/vis/diagram/edge/connector/connector.ts

@@ -152,15 +152,16 @@ export const segmentsToPoints = (
       firstSeg.length,
     );
     const firstMag = orientationMagnitude(firstSegOrientation);
+    const zoomMultiplier = 4 * (2 - zoom ** 0.5);
     points[0] = xy.translate(points[0], {
-      [firstSeg.direction]: -1 * firstMag * 4 * zoom,
+      [firstSeg.direction]: -1 * firstMag * zoomMultiplier,
       [direction.swap(firstSeg.direction)]: 0,
     } as const as xy.XY);
     const lastSeg = segments[segments.length - 1];
     const lastSegOrientation = orientationFromLength(lastSeg.direction, lastSeg.length);
     const lastMag = orientationMagnitude(lastSegOrientation);
     points[points.length - 1] = xy.translate(points[points.length - 1], {
-      [lastSeg.direction]: lastMag * 4 * zoom,
+      [lastSeg.direction]: lastMag * zoomMultiplier,
       [direction.swap(lastSeg.direction)]: 0,
     } as const as xy.XY);
 

pluto/src/vis/diagram/util.ts

@@ -20,7 +20,7 @@ export const selectNodeBox = (flow: ReactFlowInstance, key: string): box.Box =>
   const n = selectNode(key);
   const flowN = flow.getNodes().find((n) => n.id === key);
   if (flowN == null) throw new Error(`[diagram] - cannot find node with key: ${key}`);
-  return box.construct(flowN.position, box.dims(box.construct(n)));
+  return box.construct(flowN.position, xy.scale(box.dims(box.construct(n)), 1 / flow.getZoom()));
 };
 
 export const selectNodeLayout = (key: string, flow: ReactFlowInstance): NodeLayout => {