Implement settings dialog for examples (#2)

DrA1ex · Sep 30, 2023 · 6528a77 · 6528a77
1 parent 418c5bb
commit 6528a77
Show file tree

Hide file tree

Showing 14 changed files with 96 additions and 45 deletions.
diff --git a/examples/common/settings/default.js b/examples/common/settings/default.js
@@ -13,7 +13,7 @@ export class DefaultBootstrapSettings extends AppSettingsBase {
 
 export class CommonSettings extends SettingsBase {
     static Properties = {
-        gravity: Property.float("resistance", 100)
+        gravity: Property.float("gravity", 100)
             .setName("Gravity")
             .setConstraints(-10000, 10000),
         resistance: Property.float("resistance", 1)

diff --git a/examples/falling/index.html b/examples/falling/index.html
@@ -3,11 +3,16 @@
 <head>
     <meta charset="UTF-8">
     <title>physics.js: Falling Demo</title>
+    <link href="../common/styles/common.css" rel="stylesheet">
+    <link href="../common/styles/themes/white.css" rel="stylesheet">
     <link href="./style.css" rel="stylesheet">
 </head>
 <body>
 <canvas id="canvas"></canvas>
 <div class="hint fading-out">Click to spawn <br/> Click body to accelerate</div>
+
+<button id="settings-button" class="settings-button icon-btn"><div>⋮</div></button>
+<div id="settings" class="settings-dialog"><div id="settings-content"></div></div>
 </body>
 <script type="module" src="index.js"></script>
 </html>
diff --git a/examples/falling/index.js b/examples/falling/index.js
@@ -9,6 +9,8 @@ import {Vector2} from "../../lib/utils/vector.js";
 import {Bootstrap} from "../common/bootstrap.js";
 import * as Params from "../common/params.js";
 import * as Utils from "../common/utils.js";
+import {CommonBootstrapSettings} from "../common/settings/default.js";
+import {SettingsController} from "../common/ui/controllers/settings.js";
 
 function _createBody(position, size) {
     let body;
@@ -22,12 +24,13 @@ function _createBody(position, size) {
             break;
     }
 
-    return body.setFriction(options.friction).setRestitution(options.restitution);
+    return body.setFriction(Settings.common.friction)
+        .setRestitution(Settings.common.restitution);
 }
 
 function _accelerateBody(body) {
     const angle = Math.random() * Math.PI * 2;
-    const force = Math.random() * options.gravity * 10 * body.mass;
+    const force = Math.random() * Settings.common.gravity * 10 * body.mass;
 
     body.applyImpulse(new Vector2(Math.cos(angle), Math.sin(angle)).scale(force), body.position);
 }
@@ -68,20 +71,23 @@ function _createBodiesByPattern(initBodies) {
         }
 
         BootstrapInstance.addRigidBody(body
-            .setFriction(options.friction)
-            .setRestitution(options.restitution));
+            .setFriction(Settings.common.friction)
+            .setRestitution(Settings.common.restitution));
 
         last = body;
     }
 }
 
 
-const options = Params.parse()
+const Settings = CommonBootstrapSettings.fromQueryParams();
+const settingsCtrl = SettingsController.defaultCtrl(Settings);
+
 const canvas = document.getElementById("canvas")
-const BootstrapInstance = new Bootstrap(new CanvasRenderer(canvas, options), options);
+const BootstrapInstance = new Bootstrap(new CanvasRenderer(canvas, Settings.renderer), Settings);
+settingsCtrl.subscribe(this, SettingsController.RECONFIGURE_EVENT, SettingsController.defaultReconfigure(BootstrapInstance));
 
-BootstrapInstance.addForce(new GravityForce(options.gravity));
-BootstrapInstance.addForce(new ResistanceForce(options.resistance));
+BootstrapInstance.addForce(new GravityForce(Settings.common.gravity));
+BootstrapInstance.addForce(new ResistanceForce(Settings.common.resistance));
 
 const bottom = BootstrapInstance.canvasHeight - 120 - 1;
 

diff --git a/examples/friction/index.html b/examples/friction/index.html
@@ -3,10 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <title>physics.js: Friction Demo</title>
+    <link href="../common/styles/common.css" rel="stylesheet">
+    <link href="../common/styles/themes/white.css" rel="stylesheet">
     <link href="./style.css" rel="stylesheet">
 </head>
 <body>
 <canvas id="canvas"></canvas>
+<button id="settings-button" class="settings-button icon-btn"><div>⋮</div></button>
+<div id="settings" class="settings-dialog"><div id="settings-content"></div></div>
 </body>
 <script type="module" src="index.js"></script>
 </html>
diff --git a/examples/friction/index.js b/examples/friction/index.js
@@ -6,11 +6,14 @@ import {GravityForce} from "../../lib/physics/force.js";
 import {CanvasRenderer} from "../../lib/render/renderer/canvas/renderer.js";
 import {Vector2} from "../../lib/utils/vector.js";
 import {Bootstrap} from "../common/bootstrap.js";
-import * as Params from "../common/params.js";
 import * as Utils from "../common/utils.js";
+import {SettingsController} from "../common/ui/controllers/settings.js";
+import {CommonBootstrapSettings} from "../common/settings/default.js";
 
-const options = Params.parse({friction: 0.8, restitution: 0.3});
-const BootstrapInstance = new Bootstrap(new CanvasRenderer(document.getElementById("canvas"), options), options);
+const Settings = CommonBootstrapSettings.fromQueryParams({friction: 0.8, restitution: 0.3});
+const settingsCtrl = SettingsController.defaultCtrl(Settings);
+const BootstrapInstance = new Bootstrap(new CanvasRenderer(document.getElementById("canvas"), Settings.renderer), Settings);
+settingsCtrl.subscribe(this, SettingsController.RECONFIGURE_EVENT, SettingsController.defaultReconfigure(BootstrapInstance));
 
 const size = 100;
 const speed = Math.PI * 8;
@@ -22,7 +25,7 @@ const WorldRect = new BoundaryBox(1, canvasWidth, 1, bottom);
 BootstrapInstance.addConstraint(new InsetConstraint(WorldRect, 0.3));
 BootstrapInstance.addRect(WorldRect)
 
-BootstrapInstance.addForce(new GravityForce(options.gravity));
+BootstrapInstance.addForce(new GravityForce(Settings.common.gravity));
 
 BootstrapInstance.addRigidBody(new CircleBody(size / 2 + 1, bottom - size - 1, size / 2, 3).setAngularVelocity(speed));
 
@@ -51,8 +54,8 @@ for (let i = 0; i < boxCount; i++) {
 }
 
 for (const body of BootstrapInstance.rigidBodies) {
-    body.setFriction(options.friction);
-    body.setRestitution(options.restitution);
+    body.setFriction(Settings.common.friction);
+    body.setRestitution(Settings.common.restitution);
 }
 
 

diff --git a/examples/momentum_conservation/index.html b/examples/momentum_conservation/index.html
@@ -3,10 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <title>physics.js: Collision 2 Demo</title>
+    <link href="../common/styles/common.css" rel="stylesheet">
+    <link href="../common/styles/themes/white.css" rel="stylesheet">
     <link href="./style.css" rel="stylesheet">
 </head>
 <body>
 <canvas id="canvas"></canvas>
+<button id="settings-button" class="settings-button icon-btn"><div>⋮</div></button>
+<div id="settings" class="settings-dialog"><div id="settings-content"></div></div>
 </body>
 <script type="module" src="index.js"></script>
 </html>
diff --git a/examples/momentum_conservation/index.js b/examples/momentum_conservation/index.js
@@ -1,14 +1,17 @@
 import {CanvasRenderer} from "../../lib/render/renderer/canvas/renderer.js";
 import {Bootstrap} from "../common/bootstrap.js";
-import * as Params from "../common/params.js";
 import {Vector2} from "../../lib/utils/vector.js";
 import {InsetConstraint} from "../../lib/physics/constraint.js";
 import {BoundaryBox} from "../../lib/physics/common/boundary.js";
 import {RectBody} from "../../lib/physics/body/rect.js";
 import {CircleBody} from "../../lib/physics/body/circle.js";
+import {CommonBootstrapSettings} from "../common/settings/default.js";
+import {SettingsController} from "../common/ui/controllers/settings.js";
 
-const options = Params.parse({friction: 0, restitution: 1, bias: 0, steps: 1, beta: 1})
-const BootstrapInstance = new Bootstrap(new CanvasRenderer(document.getElementById("canvas"), options), options);
+const Settings = CommonBootstrapSettings.fromQueryParams({friction: 0, restitution: 1, bias: 0, steps: 1, beta: 1});
+const settingsCtrl = SettingsController.defaultCtrl(Settings);
+const BootstrapInstance = new Bootstrap(new CanvasRenderer(document.getElementById("canvas"), Settings.renderer), Settings);
+settingsCtrl.subscribe(this, SettingsController.RECONFIGURE_EVENT, SettingsController.defaultReconfigure(BootstrapInstance));
 
 BootstrapInstance.addConstraint(
     new InsetConstraint(new BoundaryBox(0, BootstrapInstance.canvasWidth, 0, BootstrapInstance.canvasHeight), 1)
@@ -30,8 +33,8 @@ BootstrapInstance.addRigidBody(new RectBody(center.x + blockSide / 2 - blockWidt
 BootstrapInstance.addRigidBody(new RectBody(center.x, center.y + blockSide / 2 + blockWidth / 2, blockSide, blockWidth).setActive(false));
 
 for (const body of BootstrapInstance.rigidBodies) {
-    body.setFriction(options.friction);
-    body.setRestitution(options.restitution);
+    body.setFriction(Settings.common.friction);
+    body.setRestitution(Settings.common.restitution);
 }
 
 BootstrapInstance.enableHotKeys();

diff --git a/examples/ramp/index.html b/examples/ramp/index.html
@@ -3,10 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <title>physics.js: Ramp Demo</title>
+    <link href="../common/styles/common.css" rel="stylesheet">
+    <link href="../common/styles/themes/white.css" rel="stylesheet">
     <link href="./style.css" rel="stylesheet">
 </head>
 <body>
 <canvas id="canvas"></canvas>
+<button id="settings-button" class="settings-button icon-btn"><div>⋮</div></button>
+<div id="settings" class="settings-dialog"><div id="settings-content"></div></div>
 </body>
 <script type="module" src="index.js"></script>
 </html>
diff --git a/examples/ramp/index.js b/examples/ramp/index.js
@@ -8,8 +8,9 @@ import {GravityForce} from "../../lib/physics/force.js";
 import {CanvasRenderer} from "../../lib/render/renderer/canvas/renderer.js";
 import {Vector2} from "../../lib/utils/vector.js";
 import {Bootstrap} from "../common/bootstrap.js";
-import * as Params from "../common/params.js";
 import * as Utils from "../common/utils.js";
+import {CommonBootstrapSettings, CommonSettings} from "../common/settings/default.js";
+import {SettingsController} from "../common/ui/controllers/settings.js";
 
 function cycloid(t, r) {
     return new Vector2(r * (t - Math.sin(t)), r * (1 - Math.cos(t)));
@@ -36,8 +37,11 @@ class NonInteractionCollider extends Collider {
     }
 }
 
-const options = Params.parse({friction: 0.5, restitution: 0.2});
-const BootstrapInstance = new Bootstrap(new CanvasRenderer(document.getElementById("canvas"), options), options);
+delete CommonSettings.Properties.resistance;
+const Settings = CommonBootstrapSettings.fromQueryParams({friction: 0.5, restitution: 0.2});
+const settingsCtrl = SettingsController.defaultCtrl(Settings);
+const BootstrapInstance = new Bootstrap(new CanvasRenderer(document.getElementById("canvas"), Settings.renderer), Settings);
+settingsCtrl.subscribe(this, SettingsController.RECONFIGURE_EVENT, SettingsController.defaultReconfigure(BootstrapInstance));
 
 const {canvasWidth, canvasHeight} = BootstrapInstance;
 const bottom = canvasHeight - 120;
@@ -51,7 +55,7 @@ const WorldRect = new BoundaryBox(1, canvasWidth, 1, bottom)
 BootstrapInstance.addConstraint(new InsetConstraint(WorldRect, 0, 1));
 BootstrapInstance.addRect(WorldRect)
 
-BootstrapInstance.addForce(new GravityForce(options.gravity));
+BootstrapInstance.addForce(new GravityForce(Settings.common.gravity));
 
 const cycloidPoints = [];
 const step = Math.PI / rampSegments;
@@ -102,8 +106,8 @@ for (const ball of balls) {
 }
 
 for (const body of BootstrapInstance.rigidBodies) {
-    body.setFriction(options.friction);
-    body.setRestitution(options.restitution);
+    body.setFriction(Settings.common.friction);
+    body.setRestitution(Settings.common.restitution);
 }
 
 BootstrapInstance.enableHotKeys();

diff --git a/examples/sprite/index.html b/examples/sprite/index.html
@@ -3,10 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <title>physics.js: Sprite Demo</title>
+    <link href="../common/styles/common.css" rel="stylesheet">
+    <link href="../common/styles/themes/white.css" rel="stylesheet">
     <link href="./style.css" rel="stylesheet">
 </head>
 <body>
 <canvas id="canvas"></canvas>
+<button id="settings-button" class="settings-button icon-btn"><div>⋮</div></button>
+<div id="settings" class="settings-dialog"><div id="settings-content"></div></div>
 </body>
 <script type="module" src="index.js"></script>
 </html>
diff --git a/examples/sprite/index.js b/examples/sprite/index.js
@@ -6,10 +6,17 @@ import {SpriteObject} from "../../lib/render/renderer/webgl/objects/sprite.js";
 import {WebglRenderer} from "../../lib/render/renderer/webgl/renderer.js";
 import {Vector2} from "../../lib/utils/vector.js";
 import {Bootstrap} from "../common/bootstrap.js";
-import * as Params from "../common/params.js";
+import {CommonBootstrapSettings, CommonSettings} from "../common/settings/default.js";
+import {SettingsController} from "../common/ui/controllers/settings.js";
 
-const options = Params.parse({restitution: 1, bias: 0})
-const BootstrapInstance = new Bootstrap(new WebglRenderer(document.getElementById("canvas"), options), options);
+delete CommonSettings.Properties.gravity;
+delete CommonSettings.Properties.resistance;
+delete CommonSettings.Properties.friction;
+
+const Settings = CommonBootstrapSettings.fromQueryParams({restitution: 1, bias: 0});
+const settingsCtrl = SettingsController.defaultCtrl(Settings);
+const BootstrapInstance = new Bootstrap(new WebglRenderer(document.getElementById("canvas"), Settings.renderer), Settings);
+settingsCtrl.subscribe(this, SettingsController.RECONFIGURE_EVENT, SettingsController.defaultReconfigure(BootstrapInstance));
 
 const WorldBox = new BoundaryBox(0, BootstrapInstance.renderer.canvasWidth, 0, BootstrapInstance.renderer.canvasHeight);
 BootstrapInstance.addConstraint(new InsetConstraint(WorldBox, 0, 1));
@@ -40,7 +47,7 @@ for (let i = 0; i < count; i++) {
 
     const body = new CircleBody(WorldBox.width * Math.random(), WorldBox.height * Math.random(), size)
         .setVelocity(Vector2.fromAngle(Math.PI * 2 * Math.random()).scale(speed))
-        .setRestitution(options.restitution)
+        .setRestitution(Settings.common.restitution)
         .setMass(size);
 
     const renderObj = new SpriteObject(body);

diff --git a/examples/tower/index.html b/examples/tower/index.html
@@ -3,11 +3,15 @@
 <head>
     <meta charset="UTF-8">
     <title>Physics: Tower Demo</title>
+    <link href="../common/styles/common.css" rel="stylesheet">
+    <link href="../common/styles/themes/white.css" rel="stylesheet">
     <link href="./style.css" rel="stylesheet">
 </head>
 <body>
 <canvas id="canvas"></canvas>
 <div class="hint fading-out">Click to strike / pull to set speed</div>
+<button id="settings-button" class="settings-button icon-btn"><div>⋮</div></button>
+<div id="settings" class="settings-dialog"><div id="settings-content"></div></div>
 </body>
 <script type="module" src="index.js"></script>
 </html>
diff --git a/examples/tower/index.js b/examples/tower/index.js
@@ -5,12 +5,15 @@ import {InsetConstraint} from "../../lib/physics/constraint.js";
 import {GravityForce, ResistanceForce} from "../../lib/physics/force.js";
 import {CanvasRenderer} from "../../lib/render/renderer/canvas/renderer.js";
 import {Bootstrap} from "../common/bootstrap.js";
-import * as Params from "../common/params.js";
 import * as Utils from "../common/utils.js";
+import {CommonBootstrapSettings} from "../common/settings/default.js";
+import {SettingsController} from "../common/ui/controllers/settings.js";
 
-
-const options = Params.parse({beta: 0.8, bias: 0.2});
-const BootstrapInstance = new Bootstrap(new CanvasRenderer(document.getElementById("canvas"), options), options);
+const Settings = CommonBootstrapSettings.fromQueryParams({beta: 0.8, bias: 0.2});
+const settingsCtrl = SettingsController.defaultCtrl(Settings);
+const canvas = document.getElementById("canvas");
+const BootstrapInstance = new Bootstrap(new CanvasRenderer(canvas, Settings.renderer), Settings);
+settingsCtrl.subscribe(this, SettingsController.RECONFIGURE_EVENT, SettingsController.defaultReconfigure(BootstrapInstance));
 
 const minBallSize = 10;
 const maxBallSize = 30;
@@ -25,8 +28,8 @@ const towerHeight = widthDecrease > 0 ? towerWidth / widthDecrease : towerWidth;
 const bottomOffset = 60;
 const bottom = BootstrapInstance.canvasHeight - bottomOffset - 1;
 
-BootstrapInstance.addForce(new GravityForce(options.gravity));
-BootstrapInstance.addForce(new ResistanceForce(options.resistance));
+BootstrapInstance.addForce(new GravityForce(Settings.common.gravity));
+BootstrapInstance.addForce(new ResistanceForce(Settings.common.resistance));
 
 const WorldRect = new BoundaryBox(1, BootstrapInstance.canvasWidth - 1, 1, BootstrapInstance.canvasHeight - 1);
 BootstrapInstance.addConstraint(new InsetConstraint(WorldRect, 0.3));
@@ -52,14 +55,14 @@ for (let i = 0; i < towerHeight; i++) {
 }
 
 for (const body of BootstrapInstance.rigidBodies) {
-    body.setFriction(options.friction);
-    body.setRestitution(options.restitution);
+    body.setFriction(Settings.common.friction);
+    body.setRestitution(Settings.common.restitution);
 }
 
 let startPoint = null;
 let vectorId = null;
 let creatingBody = null;
-document.onmousedown = document.ontouchstart = (e) => {
+canvas.onmousedown = canvas.ontouchstart = (e) => {
     e.preventDefault();
     startPoint = Utils.getMousePos(e)
 
@@ -82,9 +85,9 @@ function _constraintVectorLength(vector, maxLength) {
     return direction.scale(Math.min(length, maxLength));
 }
 
-const maxSpeed = options.gravity * 20;
+const maxSpeed = Settings.common.gravity * 20;
 const maxDisplaySpeed = 50;
-document.onmousemove = document.ontouchmove = (e) => {
+canvas.onmousemove = canvas.ontouchmove = (e) => {
     if (!startPoint) {
         return;
     }
@@ -96,7 +99,7 @@ document.onmousemove = document.ontouchmove = (e) => {
     vectorId = BootstrapInstance.addVector(startPoint, _constraintVectorLength(startPoint.delta(pos), maxDisplaySpeed), "red");
 }
 
-document.onmouseup = document.ontouchend = (e) => {
+canvas.onmouseup = canvas.ontouchend = (e) => {
     if (!startPoint) {
         return;
     }

diff --git a/examples/z-index/index.js b/examples/z-index/index.js
@@ -3,13 +3,13 @@ import {VectorAnimation} from "../../lib/render/animation/vector.js";
 import {WebglRenderer} from "../../lib/render/renderer/webgl/renderer.js";
 import {Vector2} from "../../lib/utils/vector.js";
 import {Bootstrap} from "../common/bootstrap.js";
-import * as Params from "../common/params.js";
 import * as CommonUtils from "../common/utils.js";
 import * as Geometry from "./geometry.js";
+import {CommonBootstrapSettings} from "../common/settings/default.js";
 
 
-const options = Params.parse();
-const BootstrapInstance = new Bootstrap(new WebglRenderer(document.getElementById("canvas"), options), options);
+const Settings = CommonBootstrapSettings.fromQueryParams({restitution: 1, bias: 0.1});
+const BootstrapInstance = new Bootstrap(new WebglRenderer(document.getElementById("canvas"), Settings.renderer), Settings);
 const center = new Vector2(BootstrapInstance.renderer.canvasWidth, BootstrapInstance.renderer.canvasHeight).scale(0.5);
 
 Geometry.createFromConfig(BootstrapInstance, Geometry.config, center);