Spaces:

Ramesh-vani
/

phy

Running

App Files Files Community

Ramesh-vani commited on Feb 25

Commit

71cfcfe

verified ·

1 Parent(s): 1ab6ab7

Update index.html

Browse files

Files changed (1) hide show

index.html +161 -109

index.html CHANGED Viewed

@@ -2,77 +2,76 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Advanced Physics Simulator – Connect Systems & More Elements</title>
   <style>
     body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; }
     canvas { display: block; }
-    /* Menus always on top */
-    #controls, #editPanel, #connectionPanel, #constraintEditPanel {
-      position: absolute;
-      background: rgba(255,255,255,0.95);
-      padding: 10px;
-      border-radius: 5px;
-      z-index: 1000;
-    }
-    #controls {
-      top: 10px;
-      left: 10px;
-      max-width: 320px;
-      max-height: 90vh;
-      overflow-y: auto;
     }
-    #controls label { display: block; margin-top: 8px; }
-    #controls input, #controls select, #controls button {
-      width: 100%; padding: 6px; margin-top: 4px; box-sizing: border-box;
     }
-    #buttonContainer {
-      display: flex;
-      justify-content: space-between;
-      gap: 5px;
     }
     #editPanel {
-      top: 10px;
       right: 10px;
       max-width: 300px;
-      max-height: 90vh;
       overflow-y: auto;
       display: none;
     }
-    #editPanel h3 { margin: 0 0 5px 0; }
-    #editPanel label { display: block; margin-top: 8px; }
-    #editPanel input, #editPanel select, #editPanel button {
-      width: 100%; padding: 6px; margin-top: 4px; box-sizing: border-box;
-    }
-    /* Connection Options Panel */
-    #connectionPanel {
-      top: 150px;
-      right: 10px;
-      max-width: 250px;
-      display: none;
-    }
-    #connectionPanel h3 { margin: 0 0 5px 0; }
-    #connectionPanel label { display: block; margin-top: 8px; }
-    #connectionPanel input, #connectionPanel select, #connectionPanel button {
-      width: 100%; padding: 6px; margin-top: 4px; box-sizing: border-box;
-    }
-    /* Constraint Edit Panel */
-    #constraintEditPanel {
-      bottom: 10px;
-      right: 10px;
       max-width: 250px;
       display: none;
     }
-    #constraintEditPanel h3 { margin: 0 0 5px 0; }
-    #constraintEditPanel label { display: block; margin-top: 8px; }
-    #constraintEditPanel input, #constraintEditPanel select, #constraintEditPanel button {
-      width: 100%; padding: 6px; margin-top: 4px; box-sizing: border-box;
-    }
   </style>
 </head>
 <body>
-  <!-- Controls Panel -->
-  <div id="controls">
-    <label for="simulationSelect">Choose Simulation Element:</label>
     <select id="simulationSelect">
       <option value="bouncingBall">Bouncing Ball</option>
       <option value="pendulum">Pendulum</option>
@@ -80,19 +79,20 @@
       <option value="inclinedPlane">Inclined Plane</option>
       <option value="springMass">Spring–Mass System</option>
       <option value="rectangleBlock">Rectangle Block</option>
     </select>
-    <!-- Dynamic Suboptions for creation parameters -->
-    <div id="subOptionsContainer"></div>
-    <div id="buttonContainer">
-      <button id="addElement">Add Element</button>
-      <button id="connectSystems">Connect Systems</button>
-      <button id="reset">Reset Simulation</button>
-    </div>
   </div>
   <!-- Edit Panel (opens on double-click on an element) -->
   <div id="editPanel"></div>
   <!-- Connection Options Panel -->
   <div id="connectionPanel">
     <h3>Connection Options</h3>
@@ -107,7 +107,6 @@
       <option value="element">Element</option>
       <option value="system">System</option>
     </select>
-    <!-- Show endpoint options only for springMass systems -->
     <div id="sourceEndpointDiv">
       <label for="sourceEndpoint">Source Endpoint:</label>
       <select id="sourceEndpoint">
@@ -116,9 +115,9 @@
       </select>
     </div>
     <button id="cancelConn">Cancel</button>
-    <p style="font-size: 12px; color: #555;">Now click on the target element to attach.</p>
   </div>
   <!-- Constraint Edit Panel -->
   <div id="constraintEditPanel">
     <h3>Edit Constraint</h3>
@@ -139,11 +138,11 @@
     <button id="updateConstraint">Update Constraint</button>
     <button id="deleteConstraint">Delete Constraint</button>
   </div>
   <!-- Matter.js Library -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
   <script>
-    // Module aliases and Engine Setup
     const Engine = Matter.Engine,
           Render = Matter.Render,
           Runner = Matter.Runner,
@@ -154,7 +153,7 @@
           Mouse = Matter.Mouse,
           MouseConstraint = Matter.MouseConstraint,
           Events = Matter.Events;
     const engine = Engine.create();
     const world = engine.world;
     const render = Render.create({
@@ -171,13 +170,13 @@
     const runner = Runner.create();
     Runner.run(runner, engine);
-    // Global boundaries (to be updated on resize)
     let floor, wallLeft, wallRight;
     function updateBoundaries() {
-      if (floor && wallLeft && wallRight) {
         World.remove(world, [floor, wallLeft, wallRight]);
       }
-      floor = Bodies.rectangle(window.innerWidth/2, window.innerHeight-50, window.innerWidth, 100, {
         isStatic: true,
         render: { fillStyle: '#060a19' }
       });
@@ -187,7 +186,7 @@
     }
     updateBoundaries();
-    // Mouse control for drag & drop
     let mouse = Mouse.create(render.canvas);
     let mouseConstraint = MouseConstraint.create(engine, {
       mouse: mouse,
@@ -196,10 +195,10 @@
     World.add(world, mouseConstraint);
     render.mouse = mouse;
-    // Global variables for editing & connection
     let selectedBody = null;
     let selectedConstraint = null;
-    let attachMode = false; // if true, next click will pick connection target
     let attachFrom = null;
     const connectionPanel = document.getElementById('connectionPanel');
     const editPanel = document.getElementById('editPanel');
@@ -318,6 +317,40 @@
           <label for="blockColor">Color:</label>
           <input type="color" id="blockColor" value="#2ecc71">
          `;
       }
       subOptionsContainer.innerHTML = html;
     }
@@ -435,6 +468,36 @@
       block.customOptions = { x, y, width, height, friction, restitution, color, isSystemRoot: false };
       World.add(world, block);
     }
     document.getElementById('addElement').addEventListener('click', function(){
       const selected = document.getElementById('simulationSelect').value;
       if(selected === 'bouncingBall') addBouncingBall();
@@ -443,13 +506,14 @@
       else if(selected === 'inclinedPlane') addInclinedPlane();
       else if(selected === 'springMass') addSpringMass();
       else if(selected === 'rectangleBlock') addRectangleBlock();
     });
-    // "Connect Systems" button (sets attach mode in SYSTEM mode)
     document.getElementById('connectSystems').addEventListener('click', function(){
       attachMode = true;
-      attachFrom = null; // will be set on first click
       connectionPanel.style.display = "block";
-      // Set connection mode to system by default
       document.getElementById('connMode').value = "system";
       alert("System connection mode activated. Click on the first system element (must be marked as system root) then the target system element.");
     });
@@ -465,8 +529,8 @@
       hideConnectionPanel();
       hideConstraintEditPanel();
     });
-    /* ---------- Edit Panel (opens on double-click) ---------- */
     function openEditPanel(body) {
       selectedBody = body;
       let html = `<h3>Edit Element</h3>
@@ -489,7 +553,7 @@
                   <label for="editBallFriction">Friction:</label>
                   <input type="number" id="editBallFriction" value="${opts.friction}" step="0.001" min="0" max="1">`;
       }
-      // (Additional type-specific options can be added similarly for other element types)
       html += `<div style="margin-top:10px;">
                  <button id="updateElement">Update</button>
                  <button id="deleteElement">Delete</button>
@@ -515,7 +579,6 @@
       Body.setPosition(selectedBody, { x: newX, y: newY });
       Body.setAngle(selectedBody, newAngle);
       selectedBody.render.fillStyle = newColor;
-      // Update the "isSystemRoot" flag
       const isSysRoot = document.getElementById("editSystemRoot").checked;
       selectedBody.customOptions.isSystemRoot = isSysRoot;
       if(selectedBody.elementType === "bouncingBall"){
@@ -533,8 +596,6 @@
       }
       hideEditPanel();
     }
-    // Open edit panel on double-click
     render.canvas.addEventListener("dblclick", function(event){
       const rect = render.canvas.getBoundingClientRect();
       const mousePos = { x: event.clientX - rect.left, y: event.clientY - rect.top };
@@ -546,9 +607,8 @@
          hideEditPanel();
       }
     });
-    /* ---------- Connection (Attachment) ---------- */
-    // In attach mode, when clicking on elements, create a constraint
     Events.on(mouseConstraint, 'mouseup', function(event){
       const mousePos = event.mouse.position;
       const bodies = Matter.Composite.allBodies(world);
@@ -557,19 +617,16 @@
          const clickedBody = clickedBodies[0];
          if(attachMode){
             if(!attachFrom){
-              // First selection for attachment
               attachFrom = clickedBody;
               alert("First element selected. Now click on the target element.");
               return;
-            } else if (clickedBody === attachFrom) {
               alert("Please select a different element.");
               return;
             }
-            // Get connection options from the connection panel
             const connType = document.getElementById('connType').value;
             const connMode = document.getElementById('connMode').value;
-            // If connection mode is "system", verify both elements are marked as system root
-            if(connMode === "system") {
               if(!attachFrom.customOptions.isSystemRoot){
                 alert("Source element is not marked as System Root. Please mark it in the edit panel.");
                 attachMode = false;
@@ -584,19 +641,16 @@
                 connectionPanel.style.display = "none";
                 return;
               }
-              // Use the system root's position (we assume the element itself is the root)
             }
-            // For springMass endpoints, get endpoint options if needed
             let sourceEndpoint = "mass";
             if(attachFrom.elementType === "springMass"){
-               sourceEndpoint = document.getElementById('sourceEndpoint').value;
             }
             let targetEndpoint = "mass";
             if(clickedBody.elementType === "springMass"){
-               targetEndpoint = prompt("For target springMass, choose 'fixed' or 'mass' (default: mass):", "mass") || "mass";
-               if(targetEndpoint !== "fixed") { targetEndpoint = "mass"; }
             }
-            // Determine attachment points
             let pointA = { x: 0, y: 0 }, bodyA = attachFrom;
             if(attachFrom.elementType === "springMass" && sourceEndpoint === "fixed"){
               bodyA = null;
@@ -607,8 +661,7 @@
               bodyB = null;
               pointB = clickedBody.fixedPoint || { x: clickedBody.position.x, y: clickedBody.position.y };
             }
-            // If connection mode is "system", override to use the elements as-is
-            if(connMode === "system") {
               bodyA = attachFrom;
               bodyB = clickedBody;
               pointA = { x: 0, y: 0 };
@@ -635,21 +688,20 @@
             alert("Attachment created using " + connType + " connection in " + connMode + " mode.");
          }
       } else {
-         // Check if near a constraint line for editing…
          const constraints = Matter.Composite.allConstraints(world);
          for(let cons of constraints){
-            let posA = cons.bodyA ? { x: cons.bodyA.position.x + cons.pointA.x, y: cons.bodyA.position.y + cons.pointA.y } : cons.pointA;
-            let posB = cons.bodyB ? { x: cons.bodyB.position.x + cons.pointB.x, y: cons.bodyB.position.y + cons.pointB.y } : cons.pointB;
-            let dist = distanceToSegment(mousePos, posA, posB);
-            if(dist < 5){
-              showConstraintEditPanel(cons);
-              return;
-            }
          }
          hideConstraintEditPanel();
       }
     });
-    // Helper: distance from point to segment
     function distanceToSegment(p, v, w){
       let l2 = (w.x - v.x)**2 + (w.y - v.y)**2;
       if(l2 === 0) return Math.hypot(p.x - v.x, p.y - v.y);
@@ -658,7 +710,7 @@
       let proj = { x: v.x + t*(w.x-v.x), y: v.y + t*(w.y-v.y) };
       return Math.hypot(p.x - proj.x, p.y - proj.y);
     }
     /* ---------- Constraint Edit Panel ---------- */
     const constraintEditPanel = document.getElementById('constraintEditPanel');
     function showConstraintEditPanel(cons){
@@ -696,7 +748,7 @@
         hideConstraintEditPanel();
       }
     });
     // Window resize: update renderer and boundaries
     window.addEventListener('resize', function(){
       Render.lookAt(render, { min: { x: 0, y: 0 }, max: { x: window.innerWidth, y: window.innerHeight } });

 <html lang="en">
 <head>
   <meta charset="UTF-8">
+  <title>Advanced Physics Simulator – Broad Elements Menu</title>
   <style>
     body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; }
+    /* The canvas fills the viewport */
     canvas { display: block; }
+    /* Top horizontal menu bar (outside the canvas) */
+    #topMenu {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      background: #ececec;
+      border-bottom: 1px solid #ccc;
+      padding: 5px;
+      z-index: 2000;
+      display: flex;
+      align-items: center;
+      gap: 15px;
     }
+    #topMenu select, #topMenu button {
+      padding: 5px 10px;
+      font-size: 14px;
     }
+    /* A container below the menu for additional options */
+    #subOptionsContainer {
+      position: fixed;
+      top: 45px;
+      left: 10px;
+      z-index: 2000;
+      background: rgba(255,255,255,0.95);
+      padding: 10px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
     }
+    /* Edit Panel (floating, triggered on double-click) */
     #editPanel {
+      position: fixed;
+      top: 45px;
       right: 10px;
+      z-index: 2000;
+      background: rgba(255,255,255,0.95);
+      padding: 10px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
       max-width: 300px;
+      max-height: 80vh;
       overflow-y: auto;
       display: none;
     }
+    /* Connection and Constraint panels (similar styling) */
+    #connectionPanel, #constraintEditPanel {
+      position: fixed;
+      z-index: 2000;
+      background: rgba(255,255,255,0.95);
+      padding: 10px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
       max-width: 250px;
       display: none;
     }
+    #connectionPanel { top: 45px; left: 50%; transform: translateX(-50%); }
+    #constraintEditPanel { bottom: 10px; right: 10px; }
+    /* Common styling for labels/inputs */
+    label { display: block; margin-top: 8px; font-size: 13px; }
+    input, select, button { width: 100%; padding: 5px; margin-top: 4px; font-size: 13px; }
   </style>
 </head>
 <body>
+  <!-- Top horizontal menu bar (outside the canvas) -->
+  <div id="topMenu">
     <select id="simulationSelect">
       <option value="bouncingBall">Bouncing Ball</option>
       <option value="pendulum">Pendulum</option>
       <option value="inclinedPlane">Inclined Plane</option>
       <option value="springMass">Spring–Mass System</option>
       <option value="rectangleBlock">Rectangle Block</option>
+      <option value="rotatingRectangle">Rotating Rectangle</option>
+      <option value="triangle">Triangle</option>
     </select>
+    <button id="addElement">Add Element</button>
+    <button id="connectSystems">Connect Systems</button>
+    <button id="reset">Reset Simulation</button>
   </div>
+  <!-- Container for dynamic suboptions -->
+  <div id="subOptionsContainer"></div>
   <!-- Edit Panel (opens on double-click on an element) -->
   <div id="editPanel"></div>
   <!-- Connection Options Panel -->
   <div id="connectionPanel">
     <h3>Connection Options</h3>
       <option value="element">Element</option>
       <option value="system">System</option>
     </select>
     <div id="sourceEndpointDiv">
       <label for="sourceEndpoint">Source Endpoint:</label>
       <select id="sourceEndpoint">
       </select>
     </div>
     <button id="cancelConn">Cancel</button>
+    <p style="font-size: 12px; color: #555;">Click on the target element to attach.</p>
   </div>
   <!-- Constraint Edit Panel -->
   <div id="constraintEditPanel">
     <h3>Edit Constraint</h3>
     <button id="updateConstraint">Update Constraint</button>
     <button id="deleteConstraint">Delete Constraint</button>
   </div>
   <!-- Matter.js Library -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
   <script>
+    // Module aliases and engine setup
     const Engine = Matter.Engine,
           Render = Matter.Render,
           Runner = Matter.Runner,
           Mouse = Matter.Mouse,
           MouseConstraint = Matter.MouseConstraint,
           Events = Matter.Events;
     const engine = Engine.create();
     const world = engine.world;
     const render = Render.create({
     const runner = Runner.create();
     Runner.run(runner, engine);
+    // Boundaries (responsive)
     let floor, wallLeft, wallRight;
     function updateBoundaries() {
+      if(floor && wallLeft && wallRight) {
         World.remove(world, [floor, wallLeft, wallRight]);
       }
+      floor = Bodies.rectangle(window.innerWidth/2, window.innerHeight - 50, window.innerWidth, 100, {
         isStatic: true,
         render: { fillStyle: '#060a19' }
       });
     }
     updateBoundaries();
+    // Mouse control
     let mouse = Mouse.create(render.canvas);
     let mouseConstraint = MouseConstraint.create(engine, {
       mouse: mouse,
     World.add(world, mouseConstraint);
     render.mouse = mouse;
+    // Global variables for editing and connection
     let selectedBody = null;
     let selectedConstraint = null;
+    let attachMode = false;
     let attachFrom = null;
     const connectionPanel = document.getElementById('connectionPanel');
     const editPanel = document.getElementById('editPanel');
           <label for="blockColor">Color:</label>
           <input type="color" id="blockColor" value="#2ecc71">
          `;
+      } else if(selected === 'rotatingRectangle'){
+         html += `
+          <label for="rotRectInitX">Initial X:</label>
+          <input type="number" id="rotRectInitX" value="200">
+          <label for="rotRectInitY">Initial Y:</label>
+          <input type="number" id="rotRectInitY" value="200">
+          <label for="rotRectWidth">Width:</label>
+          <input type="number" id="rotRectWidth" value="100">
+          <label for="rotRectHeight">Height:</label>
+          <input type="number" id="rotRectHeight" value="50">
+          <label for="rotRectRotationSpeed">Rotation Speed (rad/s):</label>
+          <input type="number" id="rotRectRotationSpeed" value="0.05" step="0.01">
+          <label for="rotRectFriction">Friction:</label>
+          <input type="number" id="rotRectFriction" value="0.1" step="0.01" min="0" max="1">
+          <label for="rotRectRestitution">Restitution:</label>
+          <input type="number" id="rotRectRestitution" value="0.3" step="0.1" min="0" max="1">
+          <label for="rotRectColor">Color:</label>
+          <input type="color" id="rotRectColor" value="#9b59b6">
+         `;
+      } else if(selected === 'triangle'){
+         html += `
+          <label for="triInitX">Initial X:</label>
+          <input type="number" id="triInitX" value="300">
+          <label for="triInitY">Initial Y:</label>
+          <input type="number" id="triInitY" value="300">
+          <label for="triSize">Size (radius):</label>
+          <input type="number" id="triSize" value="40">
+          <label for="triFriction">Friction:</label>
+          <input type="number" id="triFriction" value="0.1" step="0.01" min="0" max="1">
+          <label for="triRestitution">Restitution:</label>
+          <input type="number" id="triRestitution" value="0.3" step="0.1" min="0" max="1">
+          <label for="triColor">Color:</label>
+          <input type="color" id="triColor" value="#e74c3c">
+         `;
       }
       subOptionsContainer.innerHTML = html;
     }
       block.customOptions = { x, y, width, height, friction, restitution, color, isSystemRoot: false };
       World.add(world, block);
     }
+    function addRotatingRectangle(){
+      const x = parseFloat(document.getElementById("rotRectInitX").value);
+      const y = parseFloat(document.getElementById("rotRectInitY").value);
+      const width = parseFloat(document.getElementById("rotRectWidth").value);
+      const height = parseFloat(document.getElementById("rotRectHeight").value);
+      const rotationSpeed = parseFloat(document.getElementById("rotRectRotationSpeed").value);
+      const friction = parseFloat(document.getElementById("rotRectFriction").value);
+      const restitution = parseFloat(document.getElementById("rotRectRestitution").value);
+      const color = document.getElementById("rotRectColor").value || getRandomColor();
+      const rect = Bodies.rectangle(x, y, width, height, { friction, restitution, render: { fillStyle: color } });
+      rect.elementType = "rotatingRectangle";
+      rect.customOptions = { x, y, width, height, rotationSpeed, friction, restitution, color, isSystemRoot: false };
+      // Continuously rotate the rectangle
+      Events.on(engine, "beforeUpdate", function(){
+         Body.rotate(rect, rotationSpeed);
+      });
+      World.add(world, rect);
+    }
+    function addTriangle(){
+      const x = parseFloat(document.getElementById("triInitX").value);
+      const y = parseFloat(document.getElementById("triInitY").value);
+      const radius = parseFloat(document.getElementById("triSize").value);
+      const friction = parseFloat(document.getElementById("triFriction").value);
+      const restitution = parseFloat(document.getElementById("triRestitution").value);
+      const color = document.getElementById("triColor").value || getRandomColor();
+      const tri = Bodies.polygon(x, y, 3, radius, { friction, restitution, render: { fillStyle: color } });
+      tri.elementType = "triangle";
+      tri.customOptions = { x, y, radius, friction, restitution, color, isSystemRoot: false };
+      World.add(world, tri);
+    }
     document.getElementById('addElement').addEventListener('click', function(){
       const selected = document.getElementById('simulationSelect').value;
       if(selected === 'bouncingBall') addBouncingBall();
       else if(selected === 'inclinedPlane') addInclinedPlane();
       else if(selected === 'springMass') addSpringMass();
       else if(selected === 'rectangleBlock') addRectangleBlock();
+      else if(selected === 'rotatingRectangle') addRotatingRectangle();
+      else if(selected === 'triangle') addTriangle();
     });
+    // "Connect Systems" button to initiate attach mode (for connecting elements or systems)
     document.getElementById('connectSystems').addEventListener('click', function(){
       attachMode = true;
+      attachFrom = null;
       connectionPanel.style.display = "block";
       document.getElementById('connMode').value = "system";
       alert("System connection mode activated. Click on the first system element (must be marked as system root) then the target system element.");
     });
       hideConnectionPanel();
       hideConstraintEditPanel();
     });
+    /* ---------- Edit Panel Functions (Double-click on element) ---------- */
     function openEditPanel(body) {
       selectedBody = body;
       let html = `<h3>Edit Element</h3>
                   <label for="editBallFriction">Friction:</label>
                   <input type="number" id="editBallFriction" value="${opts.friction}" step="0.001" min="0" max="1">`;
       }
+      // Additional type-specific options can be added similarly
       html += `<div style="margin-top:10px;">
                  <button id="updateElement">Update</button>
                  <button id="deleteElement">Delete</button>
       Body.setPosition(selectedBody, { x: newX, y: newY });
       Body.setAngle(selectedBody, newAngle);
       selectedBody.render.fillStyle = newColor;
       const isSysRoot = document.getElementById("editSystemRoot").checked;
       selectedBody.customOptions.isSystemRoot = isSysRoot;
       if(selectedBody.elementType === "bouncingBall"){
       }
       hideEditPanel();
     }
     render.canvas.addEventListener("dblclick", function(event){
       const rect = render.canvas.getBoundingClientRect();
       const mousePos = { x: event.clientX - rect.left, y: event.clientY - rect.top };
          hideEditPanel();
       }
     });
+    /* ---------- Connection / Attachment ---------- */
     Events.on(mouseConstraint, 'mouseup', function(event){
       const mousePos = event.mouse.position;
       const bodies = Matter.Composite.allBodies(world);
          const clickedBody = clickedBodies[0];
          if(attachMode){
             if(!attachFrom){
               attachFrom = clickedBody;
               alert("First element selected. Now click on the target element.");
               return;
+            } else if(clickedBody === attachFrom){
               alert("Please select a different element.");
               return;
             }
             const connType = document.getElementById('connType').value;
             const connMode = document.getElementById('connMode').value;
+            if(connMode === "system"){
               if(!attachFrom.customOptions.isSystemRoot){
                 alert("Source element is not marked as System Root. Please mark it in the edit panel.");
                 attachMode = false;
                 connectionPanel.style.display = "none";
                 return;
               }
             }
             let sourceEndpoint = "mass";
             if(attachFrom.elementType === "springMass"){
+              sourceEndpoint = document.getElementById('sourceEndpoint').value;
             }
             let targetEndpoint = "mass";
             if(clickedBody.elementType === "springMass"){
+              targetEndpoint = prompt("For target springMass, choose 'fixed' or 'mass' (default: mass):", "mass") || "mass";
+              if(targetEndpoint !== "fixed") { targetEndpoint = "mass"; }
             }
             let pointA = { x: 0, y: 0 }, bodyA = attachFrom;
             if(attachFrom.elementType === "springMass" && sourceEndpoint === "fixed"){
               bodyA = null;
               bodyB = null;
               pointB = clickedBody.fixedPoint || { x: clickedBody.position.x, y: clickedBody.position.y };
             }
+            if(connMode === "system"){
               bodyA = attachFrom;
               bodyB = clickedBody;
               pointA = { x: 0, y: 0 };
             alert("Attachment created using " + connType + " connection in " + connMode + " mode.");
          }
       } else {
+         // Check if near a constraint for editing
          const constraints = Matter.Composite.allConstraints(world);
          for(let cons of constraints){
+           let posA = cons.bodyA ? { x: cons.bodyA.position.x + cons.pointA.x, y: cons.bodyA.position.y + cons.pointA.y } : cons.pointA;
+           let posB = cons.bodyB ? { x: cons.bodyB.position.x + cons.pointB.x, y: cons.bodyB.position.y + cons.pointB.y } : cons.pointB;
+           let dist = distanceToSegment(mousePos, posA, posB);
+           if(dist < 5){
+             showConstraintEditPanel(cons);
+             return;
+           }
          }
          hideConstraintEditPanel();
       }
     });
     function distanceToSegment(p, v, w){
       let l2 = (w.x - v.x)**2 + (w.y - v.y)**2;
       if(l2 === 0) return Math.hypot(p.x - v.x, p.y - v.y);
       let proj = { x: v.x + t*(w.x-v.x), y: v.y + t*(w.y-v.y) };
       return Math.hypot(p.x - proj.x, p.y - proj.y);
     }
     /* ---------- Constraint Edit Panel ---------- */
     const constraintEditPanel = document.getElementById('constraintEditPanel');
     function showConstraintEditPanel(cons){
         hideConstraintEditPanel();
       }
     });
     // Window resize: update renderer and boundaries
     window.addEventListener('resize', function(){
       Render.lookAt(render, { min: { x: 0, y: 0 }, max: { x: window.innerWidth, y: window.innerHeight } });