Merge pull request #51 from lambdaclass/pr/5-basic-mode-overhaul

[4] Basic-mode interaction overhaul + PRO connectors / eccentric connection (Phase B)

Author: diegokingston

.gitignore

@@ -24,6 +24,8 @@ target/
 engine/target/
 engine/pkg/
 web/src/lib/wasm/
+# also match a symlinked wasm pkg (worktree setups)
+web/src/lib/wasm
 
 # Nix
 result

web/node_modules

@@ -0,0 +1 @@
+/tmp/stabileo-review/web/node_modules

web/src/components/Viewport.svelte

@@ -1176,7 +1176,8 @@
           if (nearElem) {
             const ni = modelStore.getNode(nearElem.nodeI);
             const nj = modelStore.getNode(nearElem.nodeJ);
-            if (ni && nj) {
+            if (ni && nj && ((nj.x - ni.x) ** 2 + (nj.y - ni.y) ** 2) > 1e-10) {
+              // (zero-length guard: a degenerate element would make t NaN)
               const edx = nj.x - ni.x;
               const edy = nj.y - ni.y;
               const lenSq = edx * edx + edy * edy;
@@ -1194,14 +1195,105 @@
           }
         }
       } else {
-        // Create node mode (default)
+        // Create node mode (default).
+        //
+        // Auto-split-on-node-place (opt-in via uiStore.autoSplitOnNodePlace):
+        // when ON and the click lands on the interior of an existing element
+        // (and not on/near an existing node), subdivide that element instead
+        // of creating a free-floating node. We delegate to the existing
+        // splitElementAtPoint so distributed/point/thermal loads are
+        // redistributed by the same logic the hinge-mode subdivide already
+        // uses in production.
         const ms = snapWithMidpoint(world.x, world.y);
-        const p3d = to3D(uiStore.drawPlane2D, ms.x, ms.y, { x: 0, y: 0, z: 0 });
-        modelStore.addNode(p3d.x, p3d.y, p3d.z || undefined);
+        let didSplit = false;
+        // Attempt to subdivide the element nearest to (searchX, searchY),
+        // splitting at the projection of (projX, projY) onto it. Interior
+        // guard: endpoints + thin slivers would either duplicate an existing
+        // node or produce near-zero-length sub-elements.
+        const attemptSplit = (searchX: number, searchY: number, maxDist: number, projX: number, projY: number): boolean => {
+          const nearElem = findNearestElement(searchX, searchY, maxDist);
+          if (!nearElem) return false;
+          const ni = modelStore.getNode(nearElem.nodeI);
+          const nj = modelStore.getNode(nearElem.nodeJ);
+          if (!ni || !nj) return false;
+          const edx = nj.x - ni.x;
+          const edy = nj.y - ni.y;
+          const lenSq = edx * edx + edy * edy;
+          if (lenSq <= 1e-10) return false;
+          const tParam = ((projX - ni.x) * edx + (projY - ni.y) * edy) / lenSq;
+          if (tParam < 0.05 || tParam > 0.95) return false;
+          const result = modelStore.splitElementAtPoint(nearElem.id, tParam);
+          if (!result) return false;
+          uiStore.selectNode(result.nodeId);
+          uiStore.toast(t('viewport.barSubdivided'), 'info');
+          resultsStore.clear();
+          return true;
+        };
+        // One shared scan: both the auto-split guard and the
+        // duplicate-coincident-node guard below answer the same question
+        // ('is the cursor on an existing node?') with the same threshold —
+        // two separate calls would silently diverge if one threshold is tuned.
+        const nodeAtCursor = findNearestNode(world.x, world.y, 0.5);
+        if (uiStore.autoSplitOnNodePlace) {
+          // Only auto-split when the cursor isn't already targeting an
+          // existing node. snapWithMidpoint returns node coords if a node is
+          // within nodeThreshold of the raw cursor; we re-check explicitly
+          // to keep the guard tight (also handles the same threshold).
+          if (!nodeAtCursor) {
+            // 1st attempt — cursor-based: use the RAW cursor to find which
+            // element the user is pointing at (grid-snap can warp the cursor
+            // off the element line), but project the GRID-SNAPPED cursor so
+            // the new node lands at a grid-aligned position on the bar when
+            // snap-to-grid is on. When it's off, `snapped` equals `world`.
+            const projInputX = uiStore.snapToGrid ? snapped.x : world.x;
+            const projInputY = uiStore.snapToGrid ? snapped.y : world.y;
+            didSplit = attemptSplit(world.x, world.y, 0.3, projInputX, projInputY);
+            // 2nd attempt — placement-point-based: snapWithMidpoint can
+            // resolve `ms` ONTO a bar even when the cursor attempt missed
+            // (its midpoint snap reaches 0.4 > the 0.3 search above, and a
+            // grid intersection can lie on the bar). Without this, the node
+            // would sit exactly on the element without subdividing it — the
+            // coincident-unconnected trap auto-split exists to prevent.
+            // Tight tolerance: only when ms is effectively ON the element.
+            if (!didSplit) {
+              didSplit = attemptSplit(ms.x, ms.y, 0.01, ms.x, ms.y);
+            }
+          }
+        }
+        if (!didSplit) {
+          // Duplicate-coincident-node guard: if the click effectively lands
+          // on an existing node (within nodeThreshold of the raw cursor),
+          // treat it as "select that node" + start a drag so the user can
+          // reposition. Node-tool create-mode is the only place where
+          // node repositioning lives — the select tool no longer drags
+          // (would silently move nodes whenever the user just wanted to
+          // click around). Checked at the raw cursor AND at the resolved
+          // placement point `ms`: with grid snap on, `ms` can land exactly
+          // on an existing grid-aligned node that is >0.5m from the cursor —
+          // creating an exact coincident duplicate.
+          const onExisting = nodeAtCursor
+            ?? findNearestNode(ms.x, ms.y, 0.01);
+          if (onExisting) {
+            if (!uiStore.selectedNodes.has(onExisting.id)) {
+              uiStore.selectNode(onExisting.id, e.shiftKey);
+            }
+            historyStore.pushState();
+            draggedNodeId = onExisting.id;
+            dragMoved = false;
+            dragStartWorld = { x: snapped.x, y: snapped.y };
+          } else {
+            const p3d = to3D(uiStore.drawPlane2D, ms.x, ms.y, { x: 0, y: 0, z: 0 });
+            modelStore.addNode(p3d.x, p3d.y, p3d.z || undefined);
+          }
+        }
       }
     } else if (uiStore.currentTool === 'element') {
-      // For element tool: snap to existing node, or midpoint (create node there), or grid
-      const nearNode = findNearestNode(snapped.x, snapped.y, 0.5);
+      // For element tool: snap to existing node, or midpoint (create node there), or grid.
+      // Node search uses RAW world coords so off-grid nodes are reachable when
+      // grid snap is on — searching from `snapped` would warp the search center
+      // to the nearest grid intersection and miss any node further than 0.5m
+      // from that intersection (matches snapWithMidpoint's precedence rule).
+      const nearNode = findNearestNode(world.x, world.y, 0.5);
       const targetNode = nearNode ?? (() => {
         const mid = findNearestMidpoint(world.x, world.y, 0.4);
         if (mid) {
@@ -1461,16 +1553,14 @@
           }
         }
 
-        // Try to select/drag a node
+        // Select a node. Drag-to-reposition has been moved out of the
+        // select tool because users were accidentally moving nodes while
+        // just trying to inspect / click around the model. Node
+        // repositioning now lives in the node tool only — this branch is
+        // strictly for selection.
         const nearNode = findNearestNode(snapped.x, snapped.y, 0.3);
         if (nearNode) {
-          if (!uiStore.selectedNodes.has(nearNode.id)) {
-            uiStore.selectNode(nearNode.id, e.shiftKey);
-          }
-          historyStore.pushState();
-          draggedNodeId = nearNode.id;
-          dragMoved = false;
-          dragStartWorld = { x: snapped.x, y: snapped.y };
+          uiStore.selectNode(nearNode.id, e.shiftKey);
         } else {
           const nearElem = findNearestElement(world.x, world.y, 0.3);
           if (nearElem) {

web/src/components/Viewport3D.svelte

@@ -470,12 +470,15 @@
     // there is no need for a separate proxy. During orbit we force it visible
     // as the LOD stand-in; at idle its visibility follows `renderMode3D`.
     function setLowDetail(on: boolean): void {
+      const dt = resultsStore.diagramType;
+      const resultsColoringActive = !!resultsStore.results3D
+        && (dt === 'axialColor' || dt === 'colorMap' || dt === 'verification');
       applyLowDetail(on, {
         nodesParent, supportsParent, loadsParent, resultsParent, shellsParent,
         elementsParent,
         elementsBatchedMesh: elementsBatched.mesh,
         renderMode: uiStore.renderMode3D,
-      });
+      }, { resultsColoringActive });
     }
     controls.addEventListener('start', () => {
       isOrbiting = true;
@@ -562,6 +565,7 @@
       initialized: false,
       resultsParent, scene,
       elementGroups,
+      elementsBatched,
       shellGroups: sceneCtx.shellGroups,
       deformedGroup: null, diagramGroup: null, overlayDiagramGroup: null,
       reactionGroup: null, constraintForcesGroup: null, nodeLabelsGroup: null, elementLabelsGroup: null, lengthLabelsGroup: null, verificationLabelsGroup: null,
@@ -1807,8 +1811,12 @@
       if (group) {
         const dt = resultsStore.diagramType;
         if (resultsStore.results3D && (dt === 'axialColor' || dt === 'colorMap' || dt === 'verification')) {
-          // Re-apply color map instead of base color
-          syncColorMap3D();
+          // No-op: applyHoverColor skips painting while a color mode is
+          // active, so there is nothing to restore — and a full
+          // syncColorMap3D() here recolored EVERY element (plus a batched
+          // position+color re-upload) per hover-out, a multi-ms stall per
+          // element crossed on large models. Mode changes mid-hover are
+          // covered by the colorMap $effect, which repaints everything.
         } else {
           // In shells mode selectedElements holds plate/quad ids — a frame
           // element with an overlapping id is not selected.

web/src/components/pro/ProAdvancedTab.svelte

@@ -74,7 +74,8 @@
     const input = buildSolverInput3D(
       { nodes: modelStore.nodes, elements: modelStore.elements, supports: modelStore.supports,
         loads: modelStore.loads, materials: modelStore.materials, sections: modelStore.sections,
-        quads: modelStore.quads, plates: modelStore.plates, constraints: modelStore.constraints },
+        quads: modelStore.quads, plates: modelStore.plates, constraints: modelStore.constraints,
+        connectors: modelStore.connectors },
       uiStore.includeSelfWeight,
     );
     if (!input) throw new Error(t('advanced.emptyModel'));