diff --git a/explorer.js b/explorer.js
index 80860d01..b761cd62 100644
--- a/explorer.js
+++ b/explorer.js
@@ -1,12 +1,13 @@
-var VERSION = '2.0';
-var getCharDataUrl = (char) => `https://cdn.jsdelivr.net/npm/hanzi-writer-data@${VERSION}/${char}.json`;
+var VERSION = "2.0";
+var getCharDataUrl = char =>
+ `https://cdn.jsdelivr.net/npm/hanzi-writer-data@${VERSION}/${char}.json`;
function loadData(char, onLoad, onError) {
var xhr = new XMLHttpRequest();
if (xhr.overrideMimeType) {
- xhr.overrideMimeType('application/json');
+ xhr.overrideMimeType("application/json");
}
- xhr.open('GET', getCharDataUrl(char), true);
+ xhr.open("GET", getCharDataUrl(char), true);
xhr.onreadystatechange = () => {
if (xhr.readyState !== 4) return;
if (xhr.status === 200) {
@@ -16,67 +17,93 @@ function loadData(char, onLoad, onError) {
}
};
xhr.send(null);
-};
+}
function attr(elm, name, value) {
elm.setAttributeNS(null, name, value);
}
function createElm(elmType) {
- return document.createElementNS('http://www.w3.org/2000/svg', elmType);
+ return document.createElementNS("http://www.w3.org/2000/svg", elmType);
+}
+
+function getPathString(points) {
+ const start = points[0];
+ const remainingPoints = points.slice(1);
+ let pathString = `M ${start[0]} ${start[1]}`;
+ remainingPoints.forEach(point => {
+ pathString += ` L ${point[0]} ${point[1]}`;
+ });
+ return pathString;
}
function renderCharacter(charData) {
- var target = document.querySelector('#target');
- document.body.classList.toggle('has-radical-data', !!charData.radStrokes);
- target.innerHTML = '';
- var svg = createElm('svg');
- attr(svg, 'width', '100%');
- attr(svg, 'height', '100%');
+ var target = document.querySelector("#target");
+ document.body.classList.toggle("has-radical-data", !!charData.radStrokes);
+ target.innerHTML = "";
+ var svg = createElm("svg");
+ attr(svg, "width", "100%");
+ attr(svg, "height", "100%");
target.appendChild(svg);
- var group = createElm('g');
- attr(group, 'transform', 'translate(0, 263.671875) scale(0.29296875, -0.29296875)');
+ var group = createElm("g");
+ attr(
+ group,
+ "transform",
+ "translate(0, 263.671875) scale(0.29296875, -0.29296875)"
+ );
svg.appendChild(group);
charData.strokes.forEach((stroke, i) => {
var isRadical = (charData.radStrokes || []).indexOf(i) > -1;
- var path = createElm('path');
- attr(path, 'd', stroke);
- path.classList.toggle('radical-stroke', isRadical);
+ var path = createElm("path");
+ attr(path, "d", stroke);
+ path.classList.toggle("radical-stroke", isRadical);
+ group.appendChild(path);
+ });
+ charData.medians.forEach(median => {
+ var path = createElm("path");
+ attr(path, "d", getPathString(median));
+ path.classList.add("median-stroke");
group.appendChild(path);
});
}
function updateClasses() {
- var target = document.querySelector('#target');
- var transparent = document.querySelector('#transparent').checked;
- var radical = document.querySelector('#radical').checked;
- target.classList.toggle('transparent-strokes', transparent);
- target.classList.toggle('color-radical', radical);
+ var target = document.querySelector("#target");
+ var transparent = document.querySelector("#transparent").checked;
+ var radical = document.querySelector("#radical").checked;
+ var medians = document.querySelector("#medians").checked;
+ target.classList.toggle("transparent-strokes", transparent);
+ target.classList.toggle("color-radical", radical);
+ target.classList.toggle("show-medians", medians);
}
-document.querySelectorAll('input[type=checkbox]').forEach(function(node) {
- node.addEventListener('change', updateClasses);
+document.querySelectorAll("input[type=checkbox]").forEach(function(node) {
+ node.addEventListener("change", updateClasses);
});
function renderLoadPath(char) {
- var cdnTarget = document.querySelector('#cdn-path');
- var url = getCharDataUrl(char)
+ var cdnTarget = document.querySelector("#cdn-path");
+ var url = getCharDataUrl(char);
cdnTarget.innerHTML = `${url}`;
- var npmTarget = document.querySelector('#npm-path');
+ var npmTarget = document.querySelector("#npm-path");
npmTarget.innerHTML = `var charData = require('hanzi-writer-data/${char}.json');`;
}
function loadAndRender() {
- var char = document.querySelector('#char-input').value;
- loadData(char, function(charData) {
- renderCharacter(charData);
- renderLoadPath(char);
- window.location.hash = char.codePointAt(0);
- }, function(err) {
- console.error(err);
- alert(`Unable to load data for ${char}`);
- });
+ var char = document.querySelector("#char-input").value;
+ loadData(
+ char,
+ function(charData) {
+ renderCharacter(charData);
+ renderLoadPath(char);
+ window.location.hash = char.codePointAt(0);
+ },
+ function(err) {
+ console.error(err);
+ alert(`Unable to load data for ${char}`);
+ }
+ );
}
function setCharFromHash(defaultChar) {
@@ -88,16 +115,15 @@ function setCharFromHash(defaultChar) {
}
}
if (hashChar) {
- document.querySelector('#char-input').value = hashChar;
+ document.querySelector("#char-input").value = hashChar;
}
}
-setCharFromHash('我');
-window.addEventListener('hashchange', function() {
+setCharFromHash("我");
+window.addEventListener("hashchange", function() {
setCharFromHash(null);
loadAndRender();
});
-document.querySelector('#update-char').addEventListener('click', loadAndRender);
+document.querySelector("#update-char").addEventListener("click", loadAndRender);
updateClasses();
loadAndRender();
-
diff --git a/index.html b/index.html
index 9d4f7b0d..1374534c 100644
--- a/index.html
+++ b/index.html
@@ -1,46 +1,82 @@
-
-
- Hanzi Writer Data Explorer
-
-
-
-
Hanzi Writer Data Explorer
+
+
+ Hanzi Writer Data Explorer
+
+
+
+
Hanzi Writer Data Explorer
-
- Explore the Chinese character SVG data used by Hanzi Writer. These stroke paths come from the Make me a Hanzi project.
-
+
+ Explore the Chinese character SVG data used by
+ Hanzi Writer. These
+ stroke paths come from the
+ Make me a Hanzi
+ project.
+
-
-
-
-
+
+
+
+
-
+
+
+
+
+
+
-
-
-
-
-
+
Load this data via CDN
+
+
Or via NPM
+
-
Load this data via CDN
-
-
Or via NPM
-
+
+ The Character data Hanzi Writer uses is from the
+ Make Me A Hanzi
+ project, which extracted the data from fonts by
+ Arphic Technology, a Taiwanese font
+ forge that released their work under a permissive license in 1999. You can
+ redistribute and/or modify this data (in the
+ hanzi-writer-data
+ github repository) under the terms of the
+ Arphic Public License
+ as published by Arphic Technology Co., Ltd. A copy of this license can
+ also be found in
+ ARPHICPL.TXT
+ of the hanzi-writer-data repo.
+
-
- The Character data Hanzi Writer uses is from the Make Me A Hanzi project, which extracted the data from fonts by Arphic Technology, a Taiwanese font forge that released their work under a permissive license in 1999. You can redistribute and/or modify this data (in the hanzi-writer-data github repository) under the terms of the Arphic Public License as published by Arphic Technology Co., Ltd. A copy of this license can also be found in ARPHICPL.TXT of the hanzi-writer-data repo.
-