From f3dad2e41cf985d57e0c5dc4e7a8b7a6f317430e Mon Sep 17 00:00:00 2001
From: LiHS <lihsai0@gmail.com>
Date: Sun, 20 Jun 2021 00:20:39 +0800
Subject: [PATCH] feat: add book demos

---
 src/data/book-demo-s0.json |  4 ++
 src/data/book-demo-s1.json |  4 ++
 src/data/book-demo-s2.json |  4 ++
 src/data/book-demo-s3.json |  4 ++
 src/data/book-demo-s4.json | 77 ++++++++++++++++++++++++++++++++++++++
 src/data/book-demo-s5.json | 33 ++++++++++++++++
 src/data/book-demo-s6.json |  4 ++
 src/data/book-demo-s7.json | 77 ++++++++++++++++++++++++++++++++++++++
 src/data/book-demo-s8.json | 33 ++++++++++++++++
 src/data/book-demo-s9.json | 77 ++++++++++++++++++++++++++++++++++++++
 src/index.html             | 18 +++++++++
 src/index.js               | 64 +++++++++++++++++++++++++++++--
 src/style.css              |  8 ++++
 13 files changed, 404 insertions(+), 3 deletions(-)
 create mode 100644 src/data/book-demo-s0.json
 create mode 100644 src/data/book-demo-s1.json
 create mode 100644 src/data/book-demo-s2.json
 create mode 100644 src/data/book-demo-s3.json
 create mode 100644 src/data/book-demo-s4.json
 create mode 100644 src/data/book-demo-s5.json
 create mode 100644 src/data/book-demo-s6.json
 create mode 100644 src/data/book-demo-s7.json
 create mode 100644 src/data/book-demo-s8.json
 create mode 100644 src/data/book-demo-s9.json

diff --git a/src/data/book-demo-s0.json b/src/data/book-demo-s0.json
new file mode 100644
index 0000000..c23874d
--- /dev/null
+++ b/src/data/book-demo-s0.json
@@ -0,0 +1,4 @@
+{
+  "name": "s0",
+  "matrix": [1.5, 0, 0, 0.5]
+}
diff --git a/src/data/book-demo-s1.json b/src/data/book-demo-s1.json
new file mode 100644
index 0000000..beb82c9
--- /dev/null
+++ b/src/data/book-demo-s1.json
@@ -0,0 +1,4 @@
+{
+  "name": "s1",
+  "matrix": [0, 0, 0, 0.5]
+}
diff --git a/src/data/book-demo-s2.json b/src/data/book-demo-s2.json
new file mode 100644
index 0000000..22e6e44
--- /dev/null
+++ b/src/data/book-demo-s2.json
@@ -0,0 +1,4 @@
+{
+  "name": "s2",
+  "matrix": [1.5, 0, 0, -0.5]
+}
diff --git a/src/data/book-demo-s3.json b/src/data/book-demo-s3.json
new file mode 100644
index 0000000..08483ca
--- /dev/null
+++ b/src/data/book-demo-s3.json
@@ -0,0 +1,4 @@
+{
+  "name": "s3",
+  "matrix": [1, -0.3, -0.7, 0.6]
+}
diff --git a/src/data/book-demo-s4.json b/src/data/book-demo-s4.json
new file mode 100644
index 0000000..0212102
--- /dev/null
+++ b/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)"
+      }
+    }
+  ]
+}
diff --git a/src/data/book-demo-s5.json b/src/data/book-demo-s5.json
new file mode 100644
index 0000000..0409b47
--- /dev/null
+++ b/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)"
+      }
+    }
+  ]
+}
diff --git a/src/data/book-demo-s6.json b/src/data/book-demo-s6.json
new file mode 100644
index 0000000..711ddc7
--- /dev/null
+++ b/src/data/book-demo-s6.json
@@ -0,0 +1,4 @@
+{
+  "name": "s6",
+  "matrix": [0.8, -0.6, 0.4, -0.3]
+}
diff --git a/src/data/book-demo-s7.json b/src/data/book-demo-s7.json
new file mode 100644
index 0000000..c421c4b
--- /dev/null
+++ b/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)"
+      }
+    }
+  ]
+}
diff --git a/src/data/book-demo-s8.json b/src/data/book-demo-s8.json
new file mode 100644
index 0000000..ed039ba
--- /dev/null
+++ b/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)"
+      }
+    }
+  ]
+}
diff --git a/src/data/book-demo-s9.json b/src/data/book-demo-s9.json
new file mode 100644
index 0000000..90d66e5
--- /dev/null
+++ b/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)"
+      }
+    }
+  ]
+}
diff --git a/src/index.html b/src/index.html
index d77720a..76b0998 100644
--- a/src/index.html
+++ b/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>
diff --git a/src/index.js b/src/index.js
index af78f79..8eafc33 100644
--- a/src/index.js
+++ b/src/index.js
@@ -37,6 +37,33 @@ async function main() {
 
   this.linesContainer = svgGroupContainer.append('g')
     .classed('lines-container', true)
+
+  data.presetName = 'custom'
+  data.presetDemos = {
+    custom: coorJson
+  }
+  Promise.all([
+    import('./data/book-demo-s0.json'),
+    import('./data/book-demo-s1.json'),
+    import('./data/book-demo-s2.json'),
+    import('./data/book-demo-s3.json'),
+    import('./data/book-demo-s4.json'),
+    import('./data/book-demo-s5.json'),
+    import('./data/book-demo-s6.json'),
+    import('./data/book-demo-s7.json'),
+    import('./data/book-demo-s8.json'),
+    import('./data/book-demo-s9.json'),
+  ]).then(presets => {
+    presets.forEach(preset => {
+      data.presetDemos[preset.default.name] = {
+        ...coorJson,
+        ...preset.default,
+      }
+    })
+    d3.select('#presetSelect')
+      .classed('hidden', false)
+  })
+
   resetSvg()
 
   // 绘制坐标轴
@@ -172,18 +199,35 @@ function getMatrix() {
       values.push(d3.select(this).property('value'))
     })
   const [a, b, c, d] = values.map(v => parseFloat(v))
-  return [a, b, c, d, 0, 0]
+  return [a, b, c, d]
 }
 
 function resetSvg() {
-  data.bgLines = getGridLines(data.coordinateJson.grids.x, data.coordinateJson.grids.y, data.viewBox)
+  const preset = data.presetDemos[data.presetName]
+  const initMatrix = preset.initMatrix
+
+  data.bgLines = getGridLines(preset.grids.x, preset.grids.y, data.viewBox)
+  if (initMatrix) {
+    data.bgLines = data.bgLines.map(line => ({
+      ...line,
+      startPoint: line.startPoint.matrix(...initMatrix),
+      endPoint: line.endPoint.matrix(...initMatrix),
+    }))
+  }
   renderLines(
     data.bgLinesContainer,
     'grid-lines',
     data.bgLines,
     data.coordinateJson.grids.attrs,
   )
-  data.lines = getLines(data.coordinateJson.lines, data.viewBox)
+  data.lines = getLines(preset.lines, data.viewBox)
+  if (initMatrix) {
+    data.lines = data.lines.map(line => ({
+      ...line,
+      startPoint: line.startPoint.matrix(...initMatrix),
+      endPoint: line.endPoint.matrix(...initMatrix),
+    }))
+  }
   renderLines(
     data.linesContainer,
     'lines',
@@ -243,6 +287,20 @@ function toggleAutoPlay() {
 }
 window.toggleAutoPlay = toggleAutoPlay
 
+function handleChangePreset() {
+  data.presetName = d3.select('#presetSelect').property('value')
+  const preset = data.presetDemos[data.presetName]
+
+  d3.selectAll('.matrix-input .el input')
+    // TODO: no array function
+    .each(function(d, i) {
+      d3.select(this).property('value', preset.matrix[i])
+    })
+
+  resetSvg()
+}
+window.handleChangePreset = handleChangePreset
+
 window.onload = function() {
   main.call(data)
 }
diff --git a/src/style.css b/src/style.css
index 76cf952..41c1bdd 100644
--- a/src/style.css
+++ b/src/style.css
@@ -6,6 +6,10 @@ svg * {
   box-sizing: content-box !important;
 }
 
+.hidden {
+  display: none;
+}
+
 .container {
   display: flex;
   align-items : center;
@@ -67,6 +71,10 @@ svg * {
   margin: 20px 20px;
 }
 
+#presetSelect:not(.hidden) ~ span {
+  display: none;
+}
+
 .btn {
   /* reset */
   background: none;