Merge af0de29846 into 11e7081662

2020-10-16 09:38:17 +02:00 · 2020-10-16 09:38:17 +02:00 · 75980f94d7
parent 11e7081662 af0de29846
commit 75980f94d7
5 changed files with 174 additions and 2 deletions
--- a/README.ko.md
+++ b/README.ko.md
@ -1045,7 +1045,7 @@ socialOptions: # override params.toml file socialOptions

 ## External Library

-현재 지원하는 외부 라이브러리는 Katex, MathJax, Mermaid, Flowchart.js, chart.js, viz-graph, wavedrom, js-sequence-diagram 입니다. front-matter에 값을 넣어주시면 해당 라이브러리가 로드됩니다.
+현재 지원하는 외부 라이브러리는 Katex, MathJax, Mermaid, Flowchart.js, chart.js, viz-graph, wavedrom, js-sequence-diagram, jsxgraph 입니다. front-matter에 값을 넣어주시면 해당 라이브러리가 로드됩니다.

 ```bash
 ---
@ -1062,6 +1062,7 @@ libraries:
 - mermaid
 - viz
 - wavedrom
+- jsxgraph
 ---

 ```
--- a/README.md
+++ b/README.md
@ -1070,7 +1070,7 @@ If you want to support mobile favicon, use [favicon-generator](https://www.favic

 ## External Library

-If you want use external libraries, this theme currently supporting Katex, MathJax, Mermaid, Flowchart.js, chart.js, viz-graph, wavedrom, js-sequence-diagram. Just add some variable to a front-matter.
+If you want use external libraries, this theme currently supporting Katex, MathJax, Mermaid, Flowchart.js, chart.js, viz-graph, wavedrom, js-sequence-diagram, jsxgraph. Just add some variable to a front-matter.

 ```bash
 ---
@ -1087,6 +1087,7 @@ libraries:
 - mermaid
 - viz
 - wavedrom
+- jsxgraph
 ---

 ```
--- a/data/lib.toml
+++ b/data/lib.toml
@ -62,6 +62,9 @@
  sri = "sha256-dsvC/UolMujQ/UQ7lVeJ7Q/FV3BSzWO0rc8iz1rqHQo="
  url = "https://cdn.jsdelivr.net/npm/typewriter-effect@2.13.1/dist/core.js"

+[js.jsxgraph]
+  sri = "sha256-vSFHJZi3+DbmVrl8xDFCHPI3jy9n7sbvlISCPqpVFrQ="
+  url = "https://cdn.jsdelivr.net/npm/jsxgraph@1.1.0/distrib/jsxgraphcore.js"



@ -74,6 +77,9 @@
  sri = "sha256-On01v36B8LRDuL2tqhqs7Gb3Cm/NIpsLFy4OarOodUA="
  url = "https://cdn.jsdelivr.net/npm/@rokt33r/js-sequence-diagrams@2.0.6-2/dist/sequence-diagram-min.css"

+[css.jsxgraph]
+  sri = "sha256-TiPwINPr/OB7izwBT0o+kJo/HchaLj6ln7fZpOzgXQU="
+  url = "https://cdn.jsdelivr.net/npm/jsxgraph@1.1.0/distrib/jsxgraph.css"



--- a/exampleSite/content/en/posts/test-jsxgraph.md
+++ b/exampleSite/content/en/posts/test-jsxgraph.md
@ -0,0 +1,126 @@
+---
+title: "jsxgraph support"
+date: 2020-08-03T14:00:00+08:00
+description: "Dynamic Mathematics with JavaScript"
+draft: false
+enableToc: false
+enableTocContent: false
+tags:
+- 
+series:
+-
+categories:
+- diagram
+libraries:
+- jsxgraph
+image: images/feature1/graph.png
+---
+Use `Shift` and `Mouse Left` to drag, `Shift` and `Mouse Scroll` to zoom.
+
+### Example 1
+```jessiecode
+point(5, 5) <<id:'pt', name: 'point'>>;
+grid();
+axis([0,0],[0,1]);
+axis([0,0],[1,0]);
+
+a = slider([1, 3], [6, 3], [0, 5, 10]) <<name: 'arg'>>;
+f = function (x) {return 7*exp(-V(a)*x^2)*cos(6*PI*x);};
+g = functiongraph(f);
+
+$board.setView([-10, 10, 10, -10]);
+```
+
+### Example 2
+Point A will stay inside the circle.
+
+```jessiecode
+// code adapted from https://github.com/jsxgraph/JessieCode/blob/master/examples/gaetano_g.html
+O=point(0,0)<<name:'0',fixed:true>>;
+U=point(1,0)<<name:'1',fixed:true>>;
+I=point(0,1)<<name:'i',fixed:true>>;
+x=line(O,U)<<withLabel:true,name:'x',lastArrow:true>>;
+y=line(O,I)<<withLabel:true,name:'y',lastArrow:true>>;
+r = 3;
+c=circle(O,r);
+p=point(1,1)<<color:'lime'>>;
+g=<<x:1,y:1>>;
+p.on('drag',function(){
+	if(p.X()^2+p.Y()^2>r*r) {
+		p.moveTo([g.x,g.y]);
+	};
+	g.x=p.X();
+	g.y=p.Y();
+});
+```
+
+### Example3
+This graph shows the properties of triangle. Drag the edges of triangle to observe changes.
+
+```jessiecode:400x400
+// code adapted from https://github.com/jsxgraph/JessieCode/blob/master/examples/euler.html
+cerise = <<
+    strokeColor: '#901B77',
+    fillColor: '#CA147A',
+    visible: true,
+    withLabel: true
+>>;
+grass = <<
+    strokeColor: '#009256',
+    fillColor: '#65B72E',
+    visible: true,
+    withLabel: true
+>>;
+perp = <<
+    strokeColor: 'black',
+    dash: 1,
+    strokeWidth: 1,
+    point: cerise
+>>;
+median = <<
+    strokeWidth: 1,
+    strokeColor: '#333333',
+    dash:2
+>>;
+
+// The triangle
+A = point(1, 0) cerise;
+B = point(-1, 0) cerise;
+C = point(0.2, 1.5) cerise;
+
+pol = polygon(A, B, C) << fillColor: '#FFFF00', borders: << strokeWidth: 2, strokeColor: '#009256' >> >>;
+
+// The perpendiculars
+H_c = perpendicularsegment(pol.borders[0], C) perp;
+H_a = perpendicularsegment(pol.borders[1], A) perp;
+H_b = perpendicularsegment(pol.borders[2], B) perp;
+
+// intersection
+H = intersection(H_c, H_b, 0) grass;
+
+// Midpoints
+mAB = midpoint(A, B) cerise;
+mBC = midpoint(B, C) cerise;
+mCA = midpoint(C, A) cerise;
+
+ma = segment(mBC, A) median;
+mb = segment(mCA, B) median;
+mc = segment(mAB, C) median;
+S = intersection(ma, mc, 0) grass;
+
+grass.name = 'U';
+c = circumcircle(A, B, C) << strokeColor: '#000000', dash: 3, strokeWidth: 1, center: grass >>;
+
+euler = line(H, S) << strokeWidth: 2, strokeColor:'#901B77' >>;
+
+$board.setView([-1.5, 2, 1.5, -1]);
+```
+
+### Note
+You can specify height and weight in the language specifier. e.g.
+````markdown
+```jessiecode:400x300
+// codes...
+```
+````
+will change the graph size to width 400px and height 300px.
--- a/layouts/partials/script/single-script.html
+++ b/layouts/partials/script/single-script.html
@ -71,6 +71,11 @@
  <script defer src="{{ $js.viz_render.url }}" integrity="{{ $js.viz_render.sri }}" crossorigin="anonymous"></script>
 {{ end }}

+{{ if in .Params.Libraries "jsxgraph" }}
+  <script defer src="{{ $js.jsxgraph.url }}" integrity="{{ $js.jsxgraph.sri }}" crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="{{ $css.jsxgraph.url }}" integrity="{{ $css.jsxgraph.sri }}" crossorigin="anonymous" />
+{{ end }}
+
 <script>
  'use strict';

@ -611,5 +616,38 @@
    }
    // =================================================================
    
+    {{ if in .Params.Libraries "jsxgraph" }} {
+      var chartPrefix = "language-jessiecode";
+      var index = 0;
+
+      Array.prototype.forEach.call(document.querySelectorAll("[class^=" + chartPrefix + "]"), function (x) {
+        x.style.display = 'none'
+        x.parentNode.style.backgroundColor = "transparent"
+        var node0 = document.createElement('div');
+        node0.id = 'jsxgraph' + index;
+        node0.style.margin = 'auto';
+        node0.classList += 'jxgbox';
+        
+        x.parentNode.insertBefore(node0, x);
+
+        var board = JXG.JSXGraph.initBoard(node0.id, {showCopyright: false, zoom: true, pan: true});
+        board.jc = new JXG.JessieCode();
+        board.jc.use(board);
+        board.jc.parse(x.innerText);
+        
+        board.resizeContainer(300,300);
+        var size = x.getAttribute('data-lang').split('x');
+        if (size && size.length == 2) {
+          var w = parseInt(size[0], 10);
+          var h = parseInt(size[1], 10);
+          if (!(isNaN(w) || isNaN(h))) {
+            board.resizeContainer(w, h);
+          }
+        }
+
+        index += 1;        
+      });
+    }
+    {{ end }}
  }
 </script>