Spaces:

Ramesh-vani
/

phy

Running

App Files Files Community

Ramesh-vani commited on Feb 25

Commit

cc20f6c

verified ·

1 Parent(s): cc43bb5

Update index.html

Browse files

Files changed (1) hide show

index.html +694 -18

index.html CHANGED Viewed

@@ -1,19 +1,695 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="hi">
+<head>
+  <meta charset="UTF-8">
+  <title>Responsive Physics Simulator with Menus on Top</title>
+  <style>
+    body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; }
+    /* Full-page canvas */
+    canvas { display: block; }
+    /* Controls Panel (Menus) – z-index high to always appear on top */
+    #controls {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      z-index: 1000;
+      background: rgba(255,255,255,0.95);
+      padding: 10px;
+      border-radius: 5px;
+      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; }
+    /* Edit Panel – Always on top */
+    #editPanel {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      z-index: 1000;
+      background: rgba(255,255,255,0.95);
+      padding: 10px;
+      border-radius: 5px;
+      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 {
+      position: absolute;
+      top: 150px;
+      right: 10px;
+      z-index: 1000;
+      background: rgba(255,255,255,0.95);
+      padding: 10px;
+      border-radius: 5px;
+      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 {
+      position: absolute;
+      bottom: 10px;
+      right: 10px;
+      z-index: 1000;
+      background: rgba(255,255,255,0.95);
+      padding: 10px;
+      border-radius: 5px;
+      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 (Menus) -->
+  <div id="controls">
+    <label for="simulationSelect">Simulation Element Chunein:</label>
+    <select id="simulationSelect">
+      <option value="bouncingBall">Bouncing Ball</option>
+      <option value="pendulum">Pendulum</option>
+      <option value="projectile">Projectile Motion</option>
+      <option value="inclinedPlane">Inclined Plane</option>
+      <option value="springMass">Spring–Mass System</option>
+    </select>
+    <!-- Dynamic Suboptions Container -->
+    <div id="subOptionsContainer"></div>
+    <div id="buttonContainer">
+      <button id="addElement">Add Element</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>
+    <label for="connType">Connection Type:</label>
+    <select id="connType">
+      <option value="string">String</option>
+      <option value="spring">Spring</option>
+      <option value="stick">Stick</option>
+    </select>
+    <div id="sourceEndpointDiv">
+      <label for="sourceEndpoint">Source Endpoint:</label>
+      <select id="sourceEndpoint">
+        <option value="mass">Mass</option>
+        <option value="fixed">Fixed</option>
+      </select>
+    </div>
+    <button id="cancelConn">Cancel</button>
+    <p style="font-size: 12px; color: #555;">Ab target element par click karein jisse attach karna hai.</p>
+  </div>
+  <!-- Constraint Edit Panel -->
+  <div id="constraintEditPanel">
+    <h3>Edit Constraint</h3>
+    <label for="consA_X">Endpoint A X:</label>
+    <input type="number" id="consA_X" step="1">
+    <label for="consA_Y">Endpoint A Y:</label>
+    <input type="number" id="consA_Y" step="1">
+    <label for="consB_X">Endpoint B X:</label>
+    <input type="number" id="consB_X" step="1">
+    <label for="consB_Y">Endpoint B Y:</label>
+    <input type="number" id="consB_Y" step="1">
+    <label for="consType">Connection Type:</label>
+    <select id="consType">
+      <option value="string">String</option>
+      <option value="spring">Spring</option>
+      <option value="stick">Stick</option>
+    </select>
+    <button id="updateConstraint">Update Constraint</button>
+    <button id="deleteConstraint">Delete Constraint</button>
+  </div>
+  <!-- Matter.js Library and Script -->
+  <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,
+          World = Matter.World,
+          Bodies = Matter.Bodies,
+          Body = Matter.Body,
+          Constraint = Matter.Constraint,
+          Mouse = Matter.Mouse,
+          MouseConstraint = Matter.MouseConstraint,
+          Events = Matter.Events;
+    const engine = Engine.create();
+    const world = engine.world;
+    const render = Render.create({
+      element: document.body,
+      engine: engine,
+      options: {
+        width: window.innerWidth,
+        height: window.innerHeight,
+        wireframes: false,
+        background: '#f0f0f0'
+      }
+    });
+    Render.run(render);
+    const runner = Runner.create();
+    Runner.run(runner, engine);
+    // Global variables for boundaries (declare as let so we can update them)
+    let floor, wallLeft, wallRight;
+    // Function to create/update boundaries based on current window dimensions
+    function updateBoundaries() {
+      // Agar boundaries already exist, remove unhein
+      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' }
+      });
+      wallLeft = Bodies.rectangle(-50, window.innerHeight/2, 100, window.innerHeight, { isStatic: true });
+      wallRight = Bodies.rectangle(window.innerWidth+50, window.innerHeight/2, 100, window.innerHeight, { isStatic: true });
+      World.add(world, [floor, wallLeft, wallRight]);
+    }
+    // Initial boundaries creation
+    updateBoundaries();
+    // Mouse control for drag & drop
+    let mouse = Mouse.create(render.canvas);
+    let mouseConstraint = MouseConstraint.create(engine, {
+      mouse: mouse,
+      constraint: { stiffness: 0.2, render: { visible: false } }
+    });
+    World.add(world, mouseConstraint);
+    render.mouse = mouse;
+    // Global Variables for Editing & Attachment
+    let selectedBody = null;
+    let selectedConstraint = null;
+    let attachMode = false;
+    let attachFrom = null;
+    const connectionPanel = document.getElementById('connectionPanel');
+    const editPanel = document.getElementById('editPanel');
+    // Helper function for random color
+    function getRandomColor() {
+      return '#' + Math.floor(Math.random()*16777215).toString(16);
+    }
+    /* ---------- Dynamic Suboptions for Adding Elements ---------- */
+    function updateSubOptions() {
+      const simulationSelect = document.getElementById('simulationSelect');
+      const subOptionsContainer = document.getElementById('subOptionsContainer');
+      let selected = simulationSelect.value;
+      let html = '';
+      if(selected === 'bouncingBall'){
+         html += `
+          <label for="ballInitialX">Initial X:</label>
+          <input type="number" id="ballInitialX" value="100">
+          <label for="ballInitialY">Initial Y:</label>
+          <input type="number" id="ballInitialY" value="50">
+          <label for="ballRadius">Radius:</label>
+          <input type="number" id="ballRadius" value="30">
+          <label for="ballRestitution">Restitution:</label>
+          <input type="number" id="ballRestitution" value="0.9" step="0.1" min="0" max="1">
+          <label for="ballFriction">Friction:</label>
+          <input type="number" id="ballFriction" value="0.005" step="0.001" min="0" max="1">
+          <label for="ballColor">Color:</label>
+          <input type="color" id="ballColor" value="#3498db">
+         `;
+      } else if(selected === 'pendulum'){
+         html += `
+          <label for="pendulumPivotX">Pivot X:</label>
+          <input type="number" id="pendulumPivotX" value="${window.innerWidth-200}">
+          <label for="pendulumPivotY">Pivot Y:</label>
+          <input type="number" id="pendulumPivotY" value="50">
+          <label for="pendulumBobRadius">Bob Radius:</label>
+          <input type="number" id="pendulumBobRadius" value="40">
+          <label for="pendulumLength">Length:</label>
+          <input type="number" id="pendulumLength" value="250">
+          <label for="pendulumStiffness">Stiffness:</label>
+          <input type="number" id="pendulumStiffness" value="1" step="0.1" min="0" max="1">
+          <label for="pendulumBobColor">Color:</label>
+          <input type="color" id="pendulumBobColor" value="#ff0000">
+         `;
+      } else if(selected === 'projectile'){
+         html += `
+          <label for="projectileInitialX">Initial X:</label>
+          <input type="number" id="projectileInitialX" value="100">
+          <label for="projectileInitialY">Initial Y:</label>
+          <input type="number" id="projectileInitialY" value="300">
+          <label for="projectileRadius">Radius:</label>
+          <input type="number" id="projectileRadius" value="20">
+          <label for="projectileVelX">Velocity X:</label>
+          <input type="number" id="projectileVelX" value="15">
+          <label for="projectileVelY">Velocity Y:</label>
+          <input type="number" id="projectileVelY" value="-15">
+          <label for="projectileColor">Color:</label>
+          <input type="color" id="projectileColor" value="#e67e22">
+         `;
+      } else if(selected === 'inclinedPlane'){
+         html += `
+          <label for="rampWidth">Ramp Width:</label>
+          <input type="number" id="rampWidth" value="300">
+          <label for="rampHeight">Ramp Height:</label>
+          <input type="number" id="rampHeight" value="20">
+          <label for="rampAngle">Ramp Angle (°):</label>
+          <input type="number" id="rampAngle" value="30">
+          <label for="rampX">Ramp X:</label>
+          <input type="number" id="rampX" value="400">
+          <label for="rampY">Ramp Y:</label>
+          <input type="number" id="rampY" value="${window.innerHeight-150}">
+          <label for="rampColor">Ramp Color:</label>
+          <input type="color" id="rampColor" value="#8e44ad">
+          <hr>
+          <label for="blockWidth">Block Width:</label>
+          <input type="number" id="blockWidth" value="40">
+          <label for="blockHeight">Block Height:</label>
+          <input type="number" id="blockHeight" value="40">
+          <label for="blockFriction">Block Friction:</label>
+          <input type="number" id="blockFriction" value="0.05" step="0.01" min="0" max="1">
+          <label for="blockColor">Block Color:</label>
+          <input type="color" id="blockColor" value="#1abc9c">
+         `;
+      } else if(selected === 'springMass'){
+         html += `
+          <label for="springMassRadius">Mass Radius:</label>
+          <input type="number" id="springMassRadius" value="25">
+          <label for="springMassRestitution">Restitution:</label>
+          <input type="number" id="springMassRestitution" value="0.8" step="0.1" min="0" max="1">
+          <label for="fixedPointX">Fixed X:</label>
+          <input type="number" id="fixedPointX" value="${Math.floor(window.innerWidth/2)}">
+          <label for="fixedPointY">Fixed Y:</label>
+          <input type="number" id="fixedPointY" value="100">
+          <label for="springLength">Spring Length:</label>
+          <input type="number" id="springLength" value="200">
+          <label for="springStiffness">Stiffness:</label>
+          <input type="number" id="springStiffness" value="0.02" step="0.01" min="0" max="1">
+          <label for="springMassColor">Color:</label>
+          <input type="color" id="springMassColor" value="#f39c12">
+         `;
+      }
+      subOptionsContainer.innerHTML = html;
+    }
+    updateSubOptions();
+    document.getElementById('simulationSelect').addEventListener('change', updateSubOptions);
+    /* ---------- Functions to Add Simulation Elements ---------- */
+    function addBouncingBall(){
+      const x = parseFloat(document.getElementById("ballInitialX").value);
+      const y = parseFloat(document.getElementById("ballInitialY").value);
+      const radius = parseFloat(document.getElementById("ballRadius").value);
+      const restitution = parseFloat(document.getElementById("ballRestitution").value);
+      const friction = parseFloat(document.getElementById("ballFriction").value);
+      const color = document.getElementById("ballColor").value || getRandomColor();
+      const ball = Bodies.circle(x, y, radius, { restitution, friction, render: { fillStyle: color } });
+      ball.elementType = "bouncingBall";
+      ball.customOptions = { x, y, radius, restitution, friction, color };
+      World.add(world, ball);
+    }
+    function addPendulum(){
+      const pivotX = parseFloat(document.getElementById("pendulumPivotX").value);
+      const pivotY = parseFloat(document.getElementById("pendulumPivotY").value);
+      const bobRadius = parseFloat(document.getElementById("pendulumBobRadius").value);
+      const pendulumLength = parseFloat(document.getElementById("pendulumLength").value);
+      const stiffness = parseFloat(document.getElementById("pendulumStiffness").value);
+      const bobColor = document.getElementById("pendulumBobColor").value || "#ff0000";
+      const bob = Bodies.circle(pivotX, pivotY+pendulumLength, bobRadius, { restitution: 1, density: 0.005, render: { fillStyle: bobColor } });
+      bob.elementType = "pendulum";
+      bob.customOptions = { pivotX, pivotY, bobRadius, pendulumLength, stiffness, bobColor };
+      const pendulumConstraint = Constraint.create({
+        pointA: { x: pivotX, y: pivotY },
+        bodyB: bob,
+        length: pendulumLength,
+        stiffness: stiffness,
+        render: { strokeStyle: '#000', lineWidth: 2 }
+      });
+      World.add(world, [bob, pendulumConstraint]);
+    }
+    function addProjectile(){
+      const x = parseFloat(document.getElementById("projectileInitialX").value);
+      const y = parseFloat(document.getElementById("projectileInitialY").value);
+      const radius = parseFloat(document.getElementById("projectileRadius").value);
+      const velX = parseFloat(document.getElementById("projectileVelX").value);
+      const velY = parseFloat(document.getElementById("projectileVelY").value);
+      const color = document.getElementById("projectileColor").value || getRandomColor();
+      const proj = Bodies.circle(x, y, radius, { restitution: 0.8, frictionAir: 0.001, render: { fillStyle: color } });
+      proj.elementType = "projectile";
+      proj.customOptions = { x, y, radius, velX, velY, color };
+      Body.setVelocity(proj, { x: velX, y: velY });
+      World.add(world, proj);
+    }
+    function addInclinedPlane(){
+      // Do bodies: ek ramp (static) aur ek block.
+      const rampWidth = parseFloat(document.getElementById("rampWidth").value);
+      const rampHeight = parseFloat(document.getElementById("rampHeight").value);
+      const angleDeg = parseFloat(document.getElementById("rampAngle").value);
+      const angle = angleDeg * Math.PI/180;
+      const rampX = parseFloat(document.getElementById("rampX").value);
+      const rampY = parseFloat(document.getElementById("rampY").value);
+      const rampColor = document.getElementById("rampColor").value || "#8e44ad";
+      const ramp = Bodies.rectangle(rampX, rampY, rampWidth, rampHeight, {
+        isStatic: true,
+        angle: angle,
+        render: { fillStyle: rampColor }
+      });
+      ramp.elementType = "inclinedPlane_ramp";
+      ramp.customOptions = { rampWidth, rampHeight, angleDeg, rampX, rampY, rampColor };
+      const blockWidth = parseFloat(document.getElementById("blockWidth").value);
+      const blockHeight = parseFloat(document.getElementById("blockHeight").value);
+      const blockFriction = parseFloat(document.getElementById("blockFriction").value);
+      const blockColor = document.getElementById("blockColor").value || "#1abc9c";
+      const block = Bodies.rectangle(rampX - rampWidth/4, rampY - 50, blockWidth, blockHeight, {
+        friction: blockFriction,
+        render: { fillStyle: blockColor }
+      });
+      block.elementType = "inclinedPlane_block";
+      block.customOptions = { blockWidth, blockHeight, blockFriction, blockColor };
+      World.add(world, [ramp, block]);
+    }
+    function addSpringMass(){
+      const massRadius = parseFloat(document.getElementById("springMassRadius").value);
+      const massRestitution = parseFloat(document.getElementById("springMassRestitution").value);
+      const fixedPointX = parseFloat(document.getElementById("fixedPointX").value);
+      const fixedPointY = parseFloat(document.getElementById("fixedPointY").value);
+      const springLength = parseFloat(document.getElementById("springLength").value);
+      const springStiffness = parseFloat(document.getElementById("springStiffness").value);
+      const massColor = document.getElementById("springMassColor").value || getRandomColor();
+      const mass = Bodies.circle(fixedPointX, fixedPointY+springLength, massRadius, {
+        restitution: massRestitution,
+        density: 0.004,
+        render: { fillStyle: massColor }
+      });
+      mass.elementType = "springMass";
+      mass.customOptions = { massRadius, massRestitution, fixedPointX, fixedPointY, springLength, springStiffness, massColor };
+      mass.fixedPoint = { x: fixedPointX, y: fixedPointY };
+      const spring = Constraint.create({
+        pointA: { x: fixedPointX, y: fixedPointY },
+        bodyB: mass,
+        length: springLength,
+        stiffness: springStiffness,
+        damping: 0.05,
+        render: { strokeStyle: '#000', lineWidth: 2 }
+      });
+      World.add(world, [mass, spring]);
+    }
+    document.getElementById('addElement').addEventListener('click', function(){
+      const selected = document.getElementById('simulationSelect').value;
+      if(selected === 'bouncingBall') addBouncingBall();
+      else if(selected === 'pendulum') addPendulum();
+      else if(selected === 'projectile') addProjectile();
+      else if(selected === 'inclinedPlane') addInclinedPlane();
+      else if(selected === 'springMass') addSpringMass();
+    });
+    document.getElementById('reset').addEventListener('click', function(){
+      World.clear(world);
+      Engine.clear(engine);
+      // Re-create boundaries on reset
+      updateBoundaries();
+      mouse = Mouse.create(render.canvas);
+      mouseConstraint = MouseConstraint.create(engine, { mouse: mouse, constraint: { stiffness: 0.2, render: { visible: false } } });
+      World.add(world, mouseConstraint);
+      render.mouse = mouse;
+      hideEditPanel();
+      hideConnectionPanel();
+      hideConstraintEditPanel();
+    });
+    /* ---------- Edit Panel Functions (Double–Click to Open) ---------- */
+    function openEditPanel(body) {
+      selectedBody = body;
+      let html = `<h3>Edit Element</h3>
+                  <label for="editPosX">Position X:</label>
+                  <input type="number" id="editPosX" value="${body.position.x.toFixed(2)}">
+                  <label for="editPosY">Position Y:</label>
+                  <input type="number" id="editPosY" value="${body.position.y.toFixed(2)}">
+                  <label for="editAngle">Angle (radians):</label>
+                  <input type="number" id="editAngle" value="${body.angle.toFixed(2)}">
+                  <label for="editColor">Color:</label>
+                  <input type="color" id="editColor" value="${body.render.fillStyle || '#ffffff'}">`;
+      if(body.elementType === "bouncingBall"){
+         const opts = body.customOptions;
+         html += `<label for="editBallRadius">Radius:</label>
+                  <input type="number" id="editBallRadius" value="${opts.radius}">
+                  <label for="editBallRestitution">Restitution:</label>
+                  <input type="number" id="editBallRestitution" value="${opts.restitution}" step="0.1" min="0" max="1">
+                  <label for="editBallFriction">Friction:</label>
+                  <input type="number" id="editBallFriction" value="${opts.friction}" step="0.001" min="0" max="1">`;
+      } else if(body.elementType === "pendulum"){
+         const opts = body.customOptions;
+         html += `<label for="editPendulumPivotX">Pivot X:</label>
+                  <input type="number" id="editPendulumPivotX" value="${opts.pivotX}">
+                  <label for="editPendulumPivotY">Pivot Y:</label>
+                  <input type="number" id="editPendulumPivotY" value="${opts.pivotY}">
+                  <label for="editPendulumBobRadius">Bob Radius:</label>
+                  <input type="number" id="editPendulumBobRadius" value="${opts.bobRadius}">
+                  <label for="editPendulumLength">Length:</label>
+                  <input type="number" id="editPendulumLength" value="${opts.pendulumLength}">
+                  <label for="editPendulumStiffness">Stiffness:</label>
+                  <input type="number" id="editPendulumStiffness" value="${opts.stiffness}" step="0.1" min="0" max="1">
+                  <label for="editPendulumBobColor">Bob Color:</label>
+                  <input type="color" id="editPendulumBobColor" value="${opts.bobColor}">`;
+      } else if(body.elementType === "projectile"){
+         const opts = body.customOptions;
+         html += `<label for="editProjectileRadius">Radius:</label>
+                  <input type="number" id="editProjectileRadius" value="${opts.radius}">
+                  <label for="editProjectileVelX">Velocity X:</label>
+                  <input type="number" id="editProjectileVelX" value="${opts.velX}">
+                  <label for="editProjectileVelY">Velocity Y:</label>
+                  <input type="number" id="editProjectileVelY" value="${opts.velY}">`;
+      } else if(body.elementType === "inclinedPlane_ramp"){
+         const opts = body.customOptions;
+         html += `<label for="editRampWidth">Ramp Width:</label>
+                  <input type="number" id="editRampWidth" value="${opts.rampWidth}">
+                  <label for="editRampHeight">Ramp Height:</label>
+                  <input type="number" id="editRampHeight" value="${opts.rampHeight}">
+                  <label for="editRampAngle">Ramp Angle (°):</label>
+                  <input type="number" id="editRampAngle" value="${opts.angleDeg}">
+                  <label for="editRampX">Ramp X:</label>
+                  <input type="number" id="editRampX" value="${opts.rampX}">
+                  <label for="editRampY">Ramp Y:</label>
+                  <input type="number" id="editRampY" value="${opts.rampY}">
+                  <label for="editRampColor">Ramp Color:</label>
+                  <input type="color" id="editRampColor" value="${opts.rampColor}">`;
+      } else if(body.elementType === "inclinedPlane_block"){
+         const opts = body.customOptions;
+         html += `<label for="editBlockWidth">Block Width:</label>
+                  <input type="number" id="editBlockWidth" value="${opts.blockWidth}">
+                  <label for="editBlockHeight">Block Height:</label>
+                  <input type="number" id="editBlockHeight" value="${opts.blockHeight}">
+                  <label for="editBlockFriction">Block Friction:</label>
+                  <input type="number" id="editBlockFriction" value="${opts.blockFriction}" step="0.01" min="0" max="1">
+                  <label for="editBlockColor">Block Color:</label>
+                  <input type="color" id="editBlockColor" value="${opts.blockColor}">`;
+      } else if(body.elementType === "springMass"){
+         const opts = body.customOptions;
+         html += `<label for="editSpringMassRadius">Mass Radius:</label>
+                  <input type="number" id="editSpringMassRadius" value="${opts.massRadius}">
+                  <label for="editSpringMassRestitution">Restitution:</label>
+                  <input type="number" id="editSpringMassRestitution" value="${opts.massRestitution}" step="0.1" min="0" max="1">
+                  <label for="editFixedPointX">Fixed X:</label>
+                  <input type="number" id="editFixedPointX" value="${opts.fixedPointX}">
+                  <label for="editFixedPointY">Fixed Y:</label>
+                  <input type="number" id="editFixedPointY" value="${opts.fixedPointY}">
+                  <label for="editSpringLength">Spring Length:</label>
+                  <input type="number" id="editSpringLength" value="${opts.springLength}">
+                  <label for="editSpringStiffness">Spring Stiffness:</label>
+                  <input type="number" id="editSpringStiffness" value="${opts.springStiffness}" step="0.01" min="0" max="1">
+                  <label for="editSpringMassColor">Mass Color:</label>
+                  <input type="color" id="editSpringMassColor" value="${opts.massColor}">`;
+      }
+      html += `<div style="margin-top:10px;">
+                 <button id="updateElement">Update</button>
+                 <button id="deleteElement">Delete</button>
+               </div>`;
+      editPanel.innerHTML = html;
+      editPanel.style.display = "block";
+      document.getElementById("updateElement").addEventListener("click", updateElementFromEditPanel);
+      document.getElementById("deleteElement").addEventListener("click", function(){
+         World.remove(world, selectedBody);
+         hideEditPanel();
+      });
+    }
+    function hideEditPanel() {
+      editPanel.style.display = "none";
+      selectedBody = null;
+    }
+    function updateElementFromEditPanel(){
+      if(!selectedBody) return;
+      const newX = parseFloat(document.getElementById("editPosX").value);
+      const newY = parseFloat(document.getElementById("editPosY").value);
+      const newAngle = parseFloat(document.getElementById("editAngle").value);
+      const newColor = document.getElementById("editColor").value;
+      Body.setPosition(selectedBody, { x: newX, y: newY });
+      Body.setAngle(selectedBody, newAngle);
+      selectedBody.render.fillStyle = newColor;
+      if(selectedBody.elementType === "bouncingBall"){
+         const oldRadius = selectedBody.circleRadius;
+         const newRadius = parseFloat(document.getElementById("editBallRadius").value);
+         const newRestitution = parseFloat(document.getElementById("editBallRestitution").value);
+         const newFriction = parseFloat(document.getElementById("editBallFriction").value);
+         if(newRadius && oldRadius && newRadius !== oldRadius){
+            const scaleFactor = newRadius / oldRadius;
+            Body.scale(selectedBody, scaleFactor, scaleFactor);
+         }
+         selectedBody.restitution = newRestitution;
+         selectedBody.friction = newFriction;
+         selectedBody.customOptions = { x: newX, y: newY, radius: newRadius, restitution: newRestitution, friction: newFriction, color: newColor };
+      }
+      // (Update code for other types as needed...)
+      hideEditPanel();
+    }
+    // Open edit panel on double–click on an element
+    render.canvas.addEventListener("dblclick", function(event){
+      const rect = render.canvas.getBoundingClientRect();
+      const mousePos = { x: event.clientX - rect.left, y: event.clientY - rect.top };
+      const bodies = Matter.Composite.allBodies(world);
+      const clicked = Matter.Query.point(bodies, mousePos);
+      if(clicked.length > 0){
+         openEditPanel(clicked[0]);
+      } else {
+         hideEditPanel();
+      }
+    });
+    /* ---------- Constraint & Connection Panels (Same as previous example) ---------- */
+    document.getElementById('cancelConn').addEventListener('click', function(){
+      connectionPanel.style.display = "none";
+      attachMode = false;
+      attachFrom = null;
+    });
+    Events.on(mouseConstraint, 'mouseup', function(event){
+      const mousePos = event.mouse.position;
+      const bodies = Matter.Composite.allBodies(world);
+      const clickedBodies = Matter.Query.point(bodies, mousePos);
+      if(clickedBodies.length > 0){
+         const clickedBody = clickedBodies[0];
+         if(attachMode && attachFrom && clickedBody !== attachFrom){
+            const connType = document.getElementById('connType').value;
+            let sourceEndpoint = "mass";
+            if(attachFrom.elementType === "springMass"){
+               sourceEndpoint = document.getElementById('sourceEndpoint').value;
+            }
+            let targetEndpoint = "mass";
+            if(clickedBody.elementType === "springMass"){
+               targetEndpoint = prompt("Target springMass: 'fixed' ya '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;
+               pointA = attachFrom.fixedPoint;
+            }
+            let pointB = { x: 0, y: 0 }, bodyB = clickedBody;
+            if(clickedBody.elementType === "springMass" && targetEndpoint === "fixed"){
+               bodyB = null;
+               pointB = clickedBody.fixedPoint || { x: clickedBody.position.x, y: clickedBody.position.y };
+            }
+            let posA = bodyA ? attachFrom.position : pointA;
+            let posB = bodyB ? clickedBody.position : pointB;
+            let dx = posB.x - posA.x, dy = posB.y - posA.y;
+            let length = Math.sqrt(dx*dx+dy*dy);
+            let stiffness = (connType === "spring") ? 0.05 : 1;
+            const newConstraint = Constraint.create({
+              bodyA: bodyA,
+              pointA: pointA,
+              bodyB: bodyB,
+              pointB: pointB,
+              length: length,
+              stiffness: stiffness,
+              render: { strokeStyle: '#000', lineWidth: 2 }
+            });
+            World.add(world, newConstraint);
+            attachMode = false;
+            attachFrom = null;
+            connectionPanel.style.display = "none";
+            alert("Attachment created using " + connType + " connection.");
+         }
+      } else {
+         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 t = ((p.x-v.x)*(w.x-v.x) + (p.y-v.y)*(w.y-v.y)) / l2;
+      t = Math.max(0, Math.min(1, t));
+      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);
+    }
+    const constraintEditPanel = document.getElementById('constraintEditPanel');
+    function showConstraintEditPanel(cons){
+      selectedConstraint = cons;
+      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;
+      document.getElementById('consA_X').value = posA.x.toFixed(2);
+      document.getElementById('consA_Y').value = posA.y.toFixed(2);
+      document.getElementById('consB_X').value = posB.x.toFixed(2);
+      document.getElementById('consB_Y').value = posB.y.toFixed(2);
+      let connType = (cons.stiffness < 0.1) ? "spring" : "string";
+      document.getElementById('consType').value = connType;
+      constraintEditPanel.style.display = "block";
+    }
+    function hideConstraintEditPanel(){
+      constraintEditPanel.style.display = "none";
+      selectedConstraint = null;
+    }
+    document.getElementById('updateConstraint').addEventListener('click', function(){
+      if(selectedConstraint){
+        let aX = parseFloat(document.getElementById('consA_X').value);
+        let aY = parseFloat(document.getElementById('consA_Y').value);
+        let bX = parseFloat(document.getElementById('consB_X').value);
+        let bY = parseFloat(document.getElementById('consB_Y').value);
+        if(!selectedConstraint.bodyA) { selectedConstraint.pointA = { x: aX, y: aY }; }
+        if(!selectedConstraint.bodyB) { selectedConstraint.pointB = { x: bX, y: bY }; }
+        let connType = document.getElementById('consType').value;
+        selectedConstraint.stiffness = (connType === "spring") ? 0.05 : 1;
+        hideConstraintEditPanel();
+      }
+    });
+    document.getElementById('deleteConstraint').addEventListener('click', function(){
+      if(selectedConstraint){
+        World.remove(world, selectedConstraint);
+        hideConstraintEditPanel();
+      }
+    });
+    // Window resize event: update renderer and boundaries
+    window.addEventListener('resize', function(){
+      Render.lookAt(render, { min: { x: 0, y: 0 }, max: { x: window.innerWidth, y: window.innerHeight } });
+      updateBoundaries();
+    });
+  </script>
+</body>
 </html>