feat: add book demos

src/data/book-demo-s0.json

@@ -0,0 +1,4 @@
+{
+  "name": "s0",
+  "matrix": [1.5, 0, 0, 0.5]
+}

src/data/book-demo-s1.json

@@ -0,0 +1,4 @@
+{
+  "name": "s1",
+  "matrix": [0, 0, 0, 0.5]
+}

src/data/book-demo-s2.json

@@ -0,0 +1,4 @@
+{
+  "name": "s2",
+  "matrix": [1.5, 0, 0, -0.5]
+}

src/data/book-demo-s3.json

@@ -0,0 +1,4 @@
+{
+  "name": "s3",
+  "matrix": [1, -0.3, -0.7, 0.6]
+}

src/data/book-demo-s4.json

@@ -0,0 +1,77 @@
+{
+  "name": "s4",
+  "matrix": [1, -0.3, -0.7, 0.6],
+  "grids": {
+    "x": 10,
+    "y": 10,
+    "attrs": {
+      "stroke-dasharray": "4 2",
+      "stroke": "#CCCCCC"
+    }
+  },
+  "lines": [
+    {
+      "id": "dotted-line-1",
+      "points": [[-0.8, 0], [-0.4, 0.6]],
+      "attrs": {
+        "stroke-dasharray": "6 2",
+        "stroke": "#000000",
+        "stroke-width": 2
+      }
+    },
+    {
+      "id": "dotted-line-2",
+      "points": [[-0.6, 0.3], [0.6, 0.3]],
+      "attrs": {
+        "stroke-dasharray": "6 2",
+        "stroke": "#000000",
+        "stroke-width": 2
+      }
+    },
+    {
+      "id": "dotted-line-3",
+      "points": [[-0.4, -0.6], [0.2, 0.3]],
+      "attrs": {
+        "stroke-dasharray": "6 2",
+        "stroke": "#000000",
+        "stroke-width": 2
+      }
+    },
+    {
+      "id": "dotted-line-4",
+      "points": [[0.6, 0.5], [0.7, 0.3]],
+      "attrs": {
+        "stroke-dasharray": "6 2",
+        "stroke": "#000000",
+        "stroke-width": 2
+      }
+    },
+    {
+      "id": "dotted-line-5",
+      "points": [[0.8, 0.5], [0.9, 0.3]],
+      "attrs": {
+        "stroke-dasharray": "6 2",
+        "stroke": "#000000",
+        "stroke-width": 2
+      }
+    },
+    {
+      "id": "arrow-line-1",
+      "points": [[0, 0], [0.3, 0.7]],
+      "attrs": {
+        "stroke": "#000000",
+        "stroke-width": 2,
+        "marker-end": "url(#arrow)"
+      }
+    },
+    {
+      "id": "arrow-line-2",
+      "points": [[0, 0], [0.5, -0.5]],
+      "attrs": {
+        "stroke": "#000000",
+        "stroke-width": 2,
+        "marker-end": "url(#arrow)"
+      }
+    }
+  ]
+}

src/data/book-demo-s5.json

@@ -0,0 +1,33 @@
+{
+  "name": "s5",
+  "matrix": [1, -0.3, -0.7, 0.6],
+  "initMatrix": [0.5, 0.3, -0.5, 0.7],
+  "grids": {
+    "x": 10,
+    "y": 10,
+    "attrs": {
+      "stroke-dasharray": "4 2",
+      "stroke": "#CCCCCC"
+    }
+  },
+  "lines": [
+    {
+      "id": "arrow-line-1",
+      "points": [[0, 0], [0, 1]],
+      "attrs": {
+        "stroke": "#000000",
+        "stroke-width": 2,
+        "marker-end": "url(#arrow)"
+      }
+    },
+    {
+      "id": "arrow-line-2",
+      "points": [[0, 0], [1, 0]],
+      "attrs": {
+        "stroke": "#000000",
+        "stroke-width": 2,
+        "marker-end": "url(#arrow)"
+      }
+    }
+  ]
+}

src/data/book-demo-s6.json

@@ -0,0 +1,4 @@
+{
+  "name": "s6",
+  "matrix": [0.8, -0.6, 0.4, -0.3]
+}

src/data/book-demo-s7.json

@@ -0,0 +1,77 @@
+{
+  "name": "s7",
+  "matrix": [0.8, -0.6, 0.4, -0.3],
+  "grids": {
+    "x": 10,
+    "y": 10,
+    "attrs": {
+      "stroke-dasharray": "4 2",
+      "stroke": "#CCCCCC"
+    }
+  },
+  "lines": [
+    {
+      "id": "dotted-line-1",
+      "points": [[-0.8, 0], [-0.4, 0.6]],
+      "attrs": {
+        "stroke-dasharray": "6 2",
+        "stroke": "#000000",
+        "stroke-width": 2
+      }
+    },
+    {
+      "id": "dotted-line-2",
+      "points": [[-0.6, 0.3], [0.6, 0.3]],
+      "attrs": {
+        "stroke-dasharray": "6 2",
+        "stroke": "#000000",
+        "stroke-width": 2
+      }
+    },
+    {
+      "id": "dotted-line-3",
+      "points": [[-0.4, -0.6], [0.2, 0.3]],
+      "attrs": {
+        "stroke-dasharray": "6 2",
+        "stroke": "#000000",
+        "stroke-width": 2
+      }
+    },
+    {
+      "id": "dotted-line-4",
+      "points": [[0.6, 0.5], [0.7, 0.3]],
+      "attrs": {
+        "stroke-dasharray": "6 2",
+        "stroke": "#000000",
+        "stroke-width": 2
+      }
+    },
+    {
+      "id": "dotted-line-5",
+      "points": [[0.8, 0.5], [0.9, 0.3]],
+      "attrs": {
+        "stroke-dasharray": "6 2",
+        "stroke": "#000000",
+        "stroke-width": 2
+      }
+    },
+    {
+      "id": "arrow-line-1",
+      "points": [[0, 0], [0.6, 0.8]],
+      "attrs": {
+        "stroke": "#000000",
+        "stroke-width": 2,
+        "marker-end": "url(#arrow)"
+      }
+    },
+    {
+      "id": "arrow-line-2",
+      "points": [[0, 0], [0.8, 0.4]],
+      "attrs": {
+        "stroke": "#000000",
+        "stroke-width": 2,
+        "marker-end": "url(#arrow)"
+      }
+    }
+  ]
+}

src/data/book-demo-s8.json

@@ -0,0 +1,33 @@
+{
+  "name": "s8",
+  "matrix": [0.8, -0.6, 0.4, -0.3],
+  "initMatrix": [0.6, 0.8, 0.8, 0.4],
+  "grids": {
+    "x": 10,
+    "y": 10,
+    "attrs": {
+      "stroke-dasharray": "4 2",
+      "stroke": "#CCCCCC"
+    }
+  },
+  "lines": [
+    {
+      "id": "arrow-line-1",
+      "points": [[0, 0], [0, 1]],
+      "attrs": {
+        "stroke": "#000000",
+        "stroke-width": 2,
+        "marker-end": "url(#arrow)"
+      }
+    },
+    {
+      "id": "arrow-line-2",
+      "points": [[0, 0], [1, 0]],
+      "attrs": {
+        "stroke": "#000000",
+        "stroke-width": 2,
+        "marker-end": "url(#arrow)"
+      }
+    }
+  ]
+}

src/data/book-demo-s9.json

@@ -0,0 +1,77 @@
+{
+  "name": "s9",
+  "matrix": [-0.3, 1, 0.6, -0.7],
+  "grids": {
+    "x": 10,
+    "y": 10,
+    "attrs": {
+      "stroke-dasharray": "4 2",
+      "stroke": "#CCCCCC"
+    }
+  },
+  "lines": [
+    {
+      "id": "dotted-line-1",
+      "points": [[-0.8, 0], [-0.4, 0.6]],
+      "attrs": {
+        "stroke-dasharray": "6 2",
+        "stroke": "#000000",
+        "stroke-width": 2
+      }
+    },
+    {
+      "id": "dotted-line-2",
+      "points": [[-0.6, 0.3], [0.6, 0.3]],
+      "attrs": {
+        "stroke-dasharray": "6 2",
+        "stroke": "#000000",
+        "stroke-width": 2
+      }
+    },
+    {
+      "id": "dotted-line-3",
+      "points": [[-0.4, -0.6], [0.2, 0.3]],
+      "attrs": {
+        "stroke-dasharray": "6 2",
+        "stroke": "#000000",
+        "stroke-width": 2
+      }
+    },
+    {
+      "id": "dotted-line-4",
+      "points": [[0.6, 0.5], [0.7, 0.3]],
+      "attrs": {
+        "stroke-dasharray": "6 2",
+        "stroke": "#000000",
+        "stroke-width": 2
+      }
+    },
+    {
+      "id": "dotted-line-5",
+      "points": [[0.8, 0.5], [0.9, 0.3]],
+      "attrs": {
+        "stroke-dasharray": "6 2",
+        "stroke": "#000000",
+        "stroke-width": 2
+      }
+    },
+    {
+      "id": "arrow-line-1",
+      "points": [[0, 0], [0, 1]],
+      "attrs": {
+        "stroke": "#000000",
+        "stroke-width": 2,
+        "marker-end": "url(#arrow)"
+      }
+    },
+    {
+      "id": "arrow-line-2",
+      "points": [[0, 0], [1, 0]],
+      "attrs": {
+        "stroke": "#000000",
+        "stroke-width": 2,
+        "marker-end": "url(#arrow)"
+      }
+    }
+  ]
+}

src/index.html

@@ -22,6 +22,24 @@
         <div class="square-bracket">]</div>
       </form>
       <form class="controllers">
+        <label>
+          Preset:
+          <select name="preset" id="presetSelect" class="hidden" onchange="handleChangePreset(event)">
+            <option value="custom" selected>Custom</option>
+            <option value="s0">s0</option>
+            <option value="s1">s1</option>
+            <option value="s2">s2</option>
+            <option value="s3">s3</option>
+            <option value="s4">s4</option>
+            <option value="s5">s5</option>
+            <option value="s6">s6</option>
+            <option value="s7">s7</option>
+            <option value="s8">s8</option>
+            <option value="s9">s9</option>
+          </select>
+          <span>loading</span>
+        </label>
+        <div></div>
         <input name="autoPlay" id="autoPlayInput" type="checkbox" onchange="toggleAutoPlay(event)">
         <label for="autoPlayInput">auto play</label>
         <div></div>