add jsxgraph element

Author: mikebarkmin

.changeset/chilly-rules-unite.md

@@ -0,0 +1,7 @@
+---
+"@hyperbook/markdown": minor
+"hyperbook": minor
+"hyperbook-studio": minor
+---
+
+Add jsxgraph element

packages/markdown/assets/directive-jsxgraph/client.js

@@ -0,0 +1,7 @@
+.directive-jsxgraph {
+    background: white;
+    margin-bottom: 16px;
+    border-radius: 8px;
+    justify-content: center;
+    margin: 12px auto;
+}

packages/markdown/assets/directive-jsxgraph/style.css

@@ -5,18 +5,198 @@ permaid: webide
 
 ## H5P
 
-:::geogebra{showAlgebra}
+:::jsxgraph{height="500" width="600" boundingbox="[-10,10,14,-10]" axis=false grid=false}
 
-a = Point({1, 2})
+```js
+var a = board.create("slider", [
+  [1, 8],
+  [5, 8],
+  [0, 1, 4],
+]);
+var b = board.create("slider", [
+  [1, 9],
+  [5, 9],
+  [0, 0.25, 4],
+]);
+var c = board.create(
+  "curve",
+  [
+    function (phi) {
+      return a.Value() + b.Value() * phi;
+    },
+    [0, 0],
+    0,
+    8 * Math.PI,
+  ],
+  { curveType: "polar", strokewidth: 4 }
+);
+```
 
 :::
 
-Das ist ein Test
+:::jsxgraph{}
+
+```js
+var p1 = board.create("point", [0, 0], { name: "X", size: 4 });
+var p2 = board.create("point", [2, -1], { name: "B", size: 4 });
+var p3 = board.create("point", [-2, -3], { name: "C", size: 4 });
+var p4 = board.create("point", [-1, -1], { name: "D", size: 4 });
+var p5 = board.create("point", [3, 1], { name: "E", size: 4 });
+
+var poly = board.create("polygon", ["X", "B", "C", "D", "E"], {
+  borders: { strokeColor: "black" },
+});
+```
+
+:::
+
+:::jsxgraph{boundingbox="[-1.5,28.5,28.5,-1.5]"}
+
+```js
+// Define sliders to dynamically change parameters of the equations and create text elements to describe them
+s = board.create(
+  "slider",
+  [
+    [20.0, 26.0],
+    [25.0, 26.0],
+    [0.0, 0.3, 1.0],
+  ],
+  { name: "ε1", strokeColor: "black", fillColor: "black" }
+);
+st = board.create("text", [20, 25, "Birth rate predators"], { fixed: true });
+u = board.create(
+  "slider",
+  [
+    [20.0, 24.0],
+    [25.0, 24.0],
+    [0.0, 0.7, 1.0],
+  ],
+  { name: "ε2", strokeColor: "black", fillColor: "black" }
+);
+ut = board.create("text", [20, 23, "Death rate predators"], { fixed: true });
+
+o = board.create(
+  "slider",
+  [
+    [10.0, 26.0],
+    [15.0, 26.0],
+    [0.0, 0.1, 1.0],
+  ],
+  { name: "γ1", strokeColor: "black", fillColor: "black" }
+);
+ot = board.create("text", [10, 25, "Death rate preys/per predator"], {
+  fixed: true,
+});
+p = board.create(
+  "slider",
+  [
+    [10.0, 24.0],
+    [15.0, 24.0],
+    [0.0, 0.3, 1.0],
+  ],
+  { name: "γ2", strokeColor: "black", fillColor: "black" }
+);
+pt = board.create("text", [10, 23, "Reproduction rate pred./per prey"], {
+  fixed: true,
+});
+
+// Dynamic initial value as gliders on the y-axis
+startpred = board.create("glider", [0, 10, board.defaultAxes.y], {
+  name: "Preys",
+  strokeColor: "red",
+  fillColor: "red",
+});
+startprey = board.create("glider", [0, 5, board.defaultAxes.y], {
+  name: "Predators",
+  strokeColor: "blue",
+  fillColor: "blue",
+});
+
+// Variables for the JXG.Curves
+var g3 = null;
+var g4 = null;
+
+// Initialise ODE and solve it with JXG.Math.Numerics.rungeKutta()
+function ode() {
+  // evaluation interval
+  var I = [0, 25];
+  // Number of steps. 1000 should be enough
+  var N = 1000;
+
+  // Right hand side of the ODE dx/dt = f(t, x)
+  var f = function (t, x) {
+    var bpred = s.Value(); //0.3;
+    var bprey = u.Value(); //0.7;
+    var dpred = o.Value(); //0.1;
+    var dprey = p.Value(); //0.3;
+
+    var y = [];
+    y[0] = x[0] * (bpred - dpred * x[1]);
+    y[1] = -x[1] * (bprey - dprey * x[0]);
+
+    return y;
+  };
+
+  // Initial value
+  var x0 = [startpred.Y(), startprey.Y()];
+
+  // Solve ode
+  var data = JXG.Math.Numerics.rungeKutta("euler", x0, I, N, f);
+
+  // to plot the data against time we need the times where the equations were solved
+  var t = [];
+  var q = I[0];
+  var h = (I[1] - I[0]) / N;
+  for (var i = 0; i < data.length; i++) {
+    data[i].push(q);
+    q += h;
+  }
+
+  return data;
+}
+
+// get data points
+var data = ode();
+
+// copy data to arrays so we can plot it using JXG.Curve
+var t = [];
+var dataprey = [];
+var datapred = [];
+for (var i = 0; i < data.length; i++) {
+  t[i] = data[i][2];
+  datapred[i] = data[i][0];
+  dataprey[i] = data[i][1];
+}
+
+// Plot Predator
+g3 = board.create("curve", [t, datapred], {
+  strokeColor: "red",
+  strokeWidth: "2px",
+});
+g3.updateDataArray = function () {
+  var data = ode();
+  this.dataX = [];
+  this.dataY = [];
+  for (var i = 0; i < data.length; i++) {
+    this.dataX[i] = t[i];
+    this.dataY[i] = data[i][0];
+  }
+};
+
+// Plot Prey
+g4 = board.create("curve", [t, dataprey], {
+  strokeColor: "blue",
+  strokeWidth: "2px",
+});
+g4.updateDataArray = function () {
+  var data = ode();
+  this.dataX = [];
+  this.dataY = [];
+  for (var i = 0; i < data.length; i++) {
+    this.dataX[i] = t[i];
+    this.dataY[i] = data[i][1];
+  }
+};
+```
 
-:::geogebra{perspective="G" height=400 width=700 coordsystem="-10,10,-2,8"}
- 
-a = Slider[-5,5]
-SetCoords(a, 450, 370)
-f_a(x) = x^2 * a + a * x
- 
 :::

packages/markdown/dev.md

@@ -86,6 +86,7 @@
     "dexie": "^4.0.11",
     "dexie-export-import": "^4.1.4",
     "h5p-standalone": "^3.8.0",
+    "jsxgraph": "^1.11.1",
     "live-server": "^1.2.2",
     "lunr": "^2.3.9",
     "lunr-languages": "^1.14.0",

packages/markdown/package.json

@@ -170,6 +170,19 @@ async function postbuild() {
       src: path.join("./node_modules", "h5p-standalone", "dist"),
       dst: path.join("./dist", "assets", "directive-h5p"),
     },
+    {
+      src: path.join("./node_modules", "jsxgraph", "distrib", "jsxgraph.css"),
+      dst: path.join("./dist", "assets", "directive-jsxgraph", "jsxgraph.css"),
+    },
+    {
+      src: path.join(
+        "./node_modules",
+        "jsxgraph",
+        "distrib",
+        "jsxgraphcore.js",
+      ),
+      dst: path.join("./dist", "assets", "directive-jsxgraph", "jsxgraphcore.js"),
+    },
   ];
 
   for (let asset of assets) {

packages/markdown/postbuild.mjs

@@ -54,6 +54,7 @@ import remarkDirectivePyide from "./remarkDirectivePyide";
 import { i18n } from "./i18n";
 import remarkDirectiveWebide from "./remarkDirectiveWebide";
 import remarkDirectiveH5P from "./remarkDirectiveH5P";
+import remarkDirectiveJSXGraph from "./remarkDirectiveJSXGraph";
 
 export const remark = (ctx: HyperbookContext) => {
   i18n.init(ctx.config.language || "en");
@@ -93,6 +94,7 @@ export const remark = (ctx: HyperbookContext) => {
     remarkDirectiveGeogebra(ctx),
     remarkDirectiveWebide(ctx),
     remarkDirectiveH5P(ctx),
+    remarkDirectiveJSXGraph(ctx),
     remarkCode(ctx),
     remarkMath,
     /* needs to be last directive */

packages/markdown/src/process.ts

@@ -0,0 +1,84 @@
+// Register directive nodes in mdast:
+/// <reference types="mdast-util-directive" />
+//
+import { HyperbookContext } from "@hyperbook/types";
+import { Root } from "mdast";
+import { visit } from "unist-util-visit";
+import { VFile } from "vfile";
+import { isDirective, registerDirective, requestJS } from "./remarkHelper";
+import { toText } from "./mdastUtilToText";
+import hash from "./objectHash";
+
+export default (ctx: HyperbookContext) => () => {
+  const name = "jsxgraph";
+  return (tree: Root, file: VFile) => {
+    visit(tree, function (node) {
+      if (isDirective(node)) {
+        if (node.name !== name) return;
+
+        const data = node.data || (node.data = {});
+        const {
+          id = hash(node),
+          height = 600,
+          width = 800,
+          boundingbox = [-5, 5, 5, -5],
+          keepaspetcratio = false,
+          showNavigation = false,
+          zoom = true,
+          pan = true,
+          keyboard = true,
+          axis = true,
+          grid = true,
+        } = node.attributes || {};
+
+        registerDirective(
+          file,
+          name,
+          ["client.js"],
+          ["jsxgraph.css", "style.css"]
+        );
+
+        requestJS(file, ["directive-jsxgraph", "jsxgraphcore.js"]);
+
+        data.hName = "div";
+
+        data.hProperties = {
+          class: "directive-jsxgraph",
+          style: `max-height: ${height}px; max-width: ${width}px; aspect-ratio: ${width}/${height};`,
+          id: `jsxgraph-${id}`,
+        };
+
+        const value = toText(node);
+        data.hChildren = [
+          {
+            type: "element",
+            tagName: "script",
+            properties: {},
+            children: [
+              {
+                type: "raw",
+                value: `
+                {
+                const board = JXG.JSXGraph.initBoard('jsxgraph-${id}', {
+                  boundingbox: ${typeof boundingbox !== "string" ? JSON.stringify(boundingbox) : boundingbox},
+                  keepaspectcratio: ${keepaspetcratio},
+                  axis: ${axis},
+                  showCopyright: false,
+                  showNavigation: ${showNavigation},
+                  zoom: ${zoom},
+                  pan: ${pan},
+                  keyboard: ${keyboard},
+                  grid: ${grid},
+                });
+
+                ${value}
+              }
+                `,
+              },
+            ],
+          },
+        ];
+      }
+    });
+  };
+};