wip

package.json

@@ -33,26 +33,26 @@
   "homepage": "https://awatif.co",
   "devDependencies": {
     "@storybook/html-vite": "^7.1.1",
-    "@tweakpane/core": "^1.1.9",
+    "@tweakpane/core": "^2.0.1",
     "@types/jest": "^29.5.3",
     "@types/three": "^0.154.0",
     "autoprefixer": "^10.4.14",
     "chromatic": "^6.20.0",
     "daisyui": "^3.5.0",
+    "jest": "^29.6.2",
     "postcss": "^8.4.27",
     "storybook": "^7.1.1",
     "tailwindcss": "^3.3.3",
+    "ts-jest": "^29.1.1",
     "vite": "^4.4.7",
-    "vite-plugin-solid": "^2.7.0",
-    "jest": "^29.6.2",
-    "ts-jest": "^29.1.1"
+    "vite-plugin-solid": "^2.7.0"
   },
   "dependencies": {
     "@supabase/supabase-js": "^2.31.0",
     "mathjs": "^11.9.1",
     "monaco-editor": "^0.40.0",
     "solid-js": "^1.7.8",
     "three": "^0.155.0",
-    "tweakpane": "^3.1.10"
+    "tweakpane": "^4.0.1"
   }
 }

src/App/App.tsx

@@ -392,7 +392,9 @@ export const analysisResults = analyzing(nodes, elements, assignments);`;
 
       <Parameters
         parameters={parameters()}
-        onChange={(e) => solveModel({ key: e.presetKey || "", value: e.value })}
+        onChange={(e) =>
+          solveModel({ key: (e.target as any).tag, value: e.value })
+        }
       />
     </Layouter>
   );

src/Parameters/Parameters.stories-dev.tsx → src/Parameters/Parameters.stories.tsx

@@ -21,9 +21,6 @@ export default {
           step: 5,
           label: "another height",
         },
-        toggle: {
-          value: true,
-        },
       }}
     />
   ),

src/Parameters/Parameters.tsx

@@ -2,20 +2,20 @@ import { createEffect } from "solid-js";
 import { Pane, TpChangeEvent } from "tweakpane";
 
 type Parameter = {
-  value: unknown;
+  value: number;
   min?: number;
   max?: number;
   step?: number;
   label?: string;
 };
 export type ParametersType = Record<string, Parameter>;
 
-export type SettingsProps = {
+export type ParametersProps = {
   parameters: ParametersType;
-  onChange?: (ev: TpChangeEvent<unknown>) => void;
+  onChange?: (e: TpChangeEvent<unknown>) => void;
 };
 
-export function Parameters(props: SettingsProps) {
+export function Parameters(props: ParametersProps) {
   let pane = new Pane({ title: "Parameters" });
   let inputs: any[] = [];
 
@@ -27,19 +27,19 @@ export function Parameters(props: SettingsProps) {
     Object.keys(props.parameters).forEach((key) => {
       const parameter = props.parameters[key];
       inputs.push(
-        pane.addInput(parameter, "value", {
+        pane.addBinding(parameter, "value", {
           min: parameter.min,
           max: parameter.max,
           step: parameter.step,
           label: parameter.label || key,
-          presetKey: key,
+          tag: key,
         })
       );
     });
   });
 
-  pane.on("change", (ev) => {
-    if (props.onChange) props.onChange(ev);
+  pane.on("change", (e) => {
+    if (props.onChange) props.onChange(e);
   });
 
   return <div class="absolute bottom-0 right-5 w-[19rem]">{pane.element}</div>;

src/Settings/Settings.tsx

@@ -24,30 +24,30 @@ export type SettingsProps = {
 export function Settings(props: SettingsProps) {
   let pane = new Pane({ title: "Settings", expanded: false });
 
-  pane.addInput(props.settings, "gridSize", { label: "grid size", min: 1 });
-  pane.addInput(props.settings, "displayScale", {
+  pane.addBinding(props.settings, "gridSize", { label: "grid size", min: 1 });
+  pane.addBinding(props.settings, "displayScale", {
     label: "display scale",
     min: -10,
     max: 10,
     step: 1,
   });
-  pane.addInput(props.settings, "nodes");
-  pane.addInput(props.settings, "elements");
-  pane.addInput(props.settings, "nodesIndices", { label: "nodes indices" });
-  pane.addInput(props.settings, "elementsIndices", {
+  pane.addBinding(props.settings, "nodes");
+  pane.addBinding(props.settings, "elements");
+  pane.addBinding(props.settings, "nodesIndices", { label: "nodes indices" });
+  pane.addBinding(props.settings, "elementsIndices", {
     label: "elements indices",
   });
-  pane.addInput(props.settings, "supports");
-  pane.addInput(props.settings, "loads");
-  pane.addInput(props.settings, "deformedShape", { label: "deformed shape" });
-  pane.addInput(props.settings, "elementResults", {
+  pane.addBinding(props.settings, "supports");
+  pane.addBinding(props.settings, "loads");
+  pane.addBinding(props.settings, "deformedShape", { label: "deformed shape" });
+  pane.addBinding(props.settings, "elementResults", {
     options: {
       none: "none",
       normal: "normal",
     },
     label: "element results",
   });
-  pane.addInput(props.settings, "nodeResults", {
+  pane.addBinding(props.settings, "nodeResults", {
     options: {
       none: "none",
       deformation: "deformation",
@@ -56,8 +56,8 @@ export function Settings(props: SettingsProps) {
     label: "node results",
   });
 
-  pane.on("change", (ev) => {
-    if (props.onChange) props.onChange(ev);
+  pane.on("change", (e) => {
+    if (props.onChange) props.onChange(e);
   });
 
   createEffect(() => {