diff --git a/src/js/src/bookmark/app.html b/src/js/src/bookmark/app.html
index 0058229..e088d36 100644
--- a/src/js/src/bookmark/app.html
+++ b/src/js/src/bookmark/app.html
@@ -31,10 +31,14 @@
diff --git a/src/js/src/bookmark/main.js b/src/js/src/bookmark/main.js
index 51a54c7..011e091 100644
--- a/src/js/src/bookmark/main.js
+++ b/src/js/src/bookmark/main.js
@@ -1,14 +1,17 @@
import { Graphviz } from "https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/index.js";
let counter = 0;
-
-// Graphviz ---
+const lf = "\n";
(async function() {
- const mime ="image/svg+xml";
- document.querySelector("#dot-src-viewer").value = card2dot();
- const dataUri = text2DataUriScheme(await dot2svg(document.querySelector("#dot-src-viewer").value),mime);
- document.querySelector("#ref-map").setAttribute("data", dataUri);
+ const mime ="image/svg+xml;charset=UTF-8";
+ try {
+ document.querySelector("#dot-src-viewer").value = card2dot();
+ const dataUri = text2DataUriScheme(await dot2svg(document.querySelector("#dot-src-viewer").value),mime);
+ document.querySelector("#ref-map").setAttribute("data", dataUri);
+ } catch(err) {
+ console.log(err);
+ }
})();
window.addEventListener("load", (event) => {
@@ -17,6 +20,7 @@
menu.addEventListener("click", handle.generate)
menu.addEventListener("click", handle.loadCSV);
+ menu.addEventListener("click", handle.open)
menu.addEventListener("click", handle.save)
menu.addEventListener("click", handle.export)
@@ -24,10 +28,32 @@
editor.addEventListener("click", handle.appendCard)
editor.addEventListener("click", handle.deleteCard)
+ const fileChooser = document.querySelector("#openReal");
+ fileChooser.addEventListener('change',handleOpenReal);
+
+ function handleOpenReal(event) {
+ const files = fileChooser.files;
+ if(files.length == 0) {
+ return;
+ }
+
+ const reader = new FileReader();
+ const content = reader.readAsText(files[0]);
+
+ reader.addEventListener("load", () => {
+ document.querySelector("#csv-src-viewer").value = reader.result;
+ })
+ }
+
function handlers() {
+ const nameOf = {
+ csv: "favorite.csv",
+ svg: "result.svg"
+ }
this.appendCard = handleAppendCardButton;
this.deleteCard = handleDeleteCardButton
this.export = handleExportButton
+ this.open = handleOpenButton
this.generate = handleGenerateButton
this.loadCSV = handleLoadCsvButton;
this.save = handleSaveButton
@@ -40,9 +66,23 @@
document.querySelector("#dot-src-viewer").value = card2dot();
dot2svg(document.querySelector("#dot-src-viewer").value)
- .then(xml => document.querySelector("#ref-map").setAttribute("data", text2DataUriScheme(xml,"image/svg+xml")));
+ .then(xml => {
+ const canvas = document.querySelector("#ref-map");
+ const data = text2DataUriScheme(xml,"image/svg+xml");
+ canvas.setAttribute("data", data);
+ }).catch(err => {
+ console.log(err)
+ });
}
+ function handleOpenButton(event) {
+ if (event.target.id != "open") {
+ return;
+ }
+
+ document.querySelector("#openReal").click();
+ }
+
function handleLoadCsvButton(event) {
if (event.target.id != "loadCsv") {
return;
@@ -63,15 +103,19 @@
return;
}
- const data = await dot2svg(card2dot());
- download(data, "image/svg+xml", "result.svg");
+ try {
+ const data = await dot2svg(card2dot());
+ download(data, "image/svg+xml;charset=UTF-8", nameOf.svg);
+ } catch(err) {
+ console.log(err);
+ }
}
function handleExportButton(event) {
if (event.target.id != "export") {
return;
}
- download(card2csv(), "text/csv", "favorite.csv",);
+ download(card2csv(), "text/csv;charset=UTF-8", nameOf.csv,);
}
function handleAppendCardButton(event) {
@@ -116,7 +160,7 @@
const addedCard = bigbrother.nextElementSibling;
- writeNodeValues(addedCard, node)
+ new nodeValues().write(addedCard, node)
}
function deleteCard(card) {
@@ -125,8 +169,9 @@
function csv2card(csv) {
//改行をLFだけにしたい
+
const text = csv.replaceAll("\r", "");
- const textRows = text.split("\n")
+ const textRows = text.split(lf)
const rows = [];
//当該要素はrootの一つしか残っていない想定
let bigBrother = document.querySelector("div.ref-card") ;
@@ -153,39 +198,51 @@
let cards = document.querySelectorAll("div.ref-card");
bigBrother = cards[cards.length - 1]
}
-
}
-function card2dot() {
- const nodes = [];
- const edges = [];
-
- function digraph(nodes, edges) {
+function card2csv() {
+ const cards = document.querySelectorAll("div.ref-card");
+ const header = ["id", "parent", "type", "label", "url"].join(",");
+ const csvText = [header]
+
+ for (const card of cards) {
+ const refNode = new nodeValues().read(card);
+ csvText.push([
+ refNode.id,
+ refNode.parent,
+ refNode.type,
+ refNode.label,
+ refNode.url,
+ ].join(","));
+ }
+
+ return csvText.join(lf)
+}
+
+function card2dot() {
+ function digraph(nodeList, edgeList) {
const dot = `digraph G {
graph [overlap="true", bgcolor="#ffffdd", mindist="0.01"];
node [fontname="BIZUDP Gothic" target="_blank", shape="tab", style="filled", color="#cc6666", fontcolor="#333333", fillcolor="#ffcc90"];
edge [fontname="meiryo", color="#cc6666"];
+ //nodeList
+ ${nodeList}
- ${nodes}
-
- ${edges}
+ //edgeList
+ ${edgeList}
}
`;
return dot;
}
- const nodeList = [];
- const edgeList = [];
-
- const cards = document.querySelectorAll("div.ref-card");
-
const id = 0, parent=1, type=2, label=3, url=4;
- for(const card of cards) {
- const refNode = readNodeValues(card);
- nodeList.push(refNode);
- }
- for (const refNode of nodeList) {
+
+ const [nodeList, edgeList] = [[], []];
+ const cards = document.querySelectorAll("div.ref-card");
+ for (const card of cards) {
+ const refNode = new nodeValues().read(card);
+
const id = refNode.id,
parent = refNode.parent,
type = refNode.type,
@@ -215,16 +272,20 @@
}
const nodeStmt = `${id} [${labelStmt}${hrefStmt}${shapeStmt}];`;
- nodes.push(nodeStmt);
+ nodeList.push(nodeStmt);
if(id == "root") {
continue;
+ } else {
+ const edgeStmt = `${parent} -> ${id};`;
+ edgeList.push(edgeStmt);
}
-
- const edgeStmt = `${parent} -> ${id};`;
- edges.push(edgeStmt);
}
- return digraph(nodes.join("\n "),edges.join("\n "));
+
+ //改行してインデント
+ const indent = " ";
+ const delim = lf + indent
+ return digraph(nodeList.join(delim), edgeList.join(delim));
}
async function dot2svg(dot = "") {
@@ -234,76 +295,63 @@
return svg;
}
-function card2csv() {
- const cards = document.querySelectorAll("div.ref-card");
- const header = ["id","parent","type","label","url"].join(",");
- const csvText = [header]
- for(const card of cards) {
- const refNode = readNodeValues(card);
- csvText.push([
- refNode.id,
- refNode.parent,
- refNode.type,
- refNode.label,
- refNode.url,
- ].join(","));
+function nodeValues() {
+ this.read = readNodeValues;
+ this.write = writeNodeValues;
+ return this;
+
+ /**
+ * ノードを表すカードからノードの情報を取り出す。
+ * カード内のinputについて知っている
+ * @param {*} card
+ * @returns
+ */
+ function readNodeValues(card) {
+ const values = card.querySelectorAll("input");
+ const refNode = {};
+ refNode.id = values[0].value;
+ refNode.parent = values[1].value;
+ refNode.tytpe = values[2].value;
+ refNode.label = values[3].value;
+ refNode.url = values[4].value;
+
+ return refNode;
}
- return csvText.join("\n")
+ /**
+ * ノードを表すカードに書き込む
+ * カード内のinputについて知っている
+ */
+ function writeNodeValues(card, values) {
+ const inputs = card.querySelectorAll("input");
+ const { id, parent, type, label, url } = values;
+
+ if (id && id.length > 0) {
+ inputs[0].value = id
+ }
+
+ if (parent && parent.length > 0) {
+ inputs[1].value = parent
+ }
+
+ if (type && type.length > 0) {
+ inputs[2].value = type
+ }
+
+ if (label && label.length > 0) {
+ inputs[3].value = label
+ }
+
+ if (url && url.length > 0) {
+ inputs[4].value = url
+ }
+
+ }
}
-
-/**
- * ノードを表すカードからノードの情報を取り出す。
- * カード内のinputについて知っている
- * @param {*} card
- * @returns
- */
-function readNodeValues(card) {
- const values = card.querySelectorAll("input");
- const refNode = {};
- refNode.id = values[0].value;
- refNode.parent = values[1].value;
- refNode.tytpe = values[2].value;
- refNode.label = values[3].value;
- refNode.url = values[4].value;
-
- return refNode;
-}
-
-/**
- * ノードを表すカードに書き込む
- * カード内のinputについて知っている
- */
-function writeNodeValues(card, values) {
- const inputs = card.querySelectorAll("input");
- const {id, parent, type, label, url} = values;
-
- if (id && id.length > 0) {
- inputs[0].value = id
- }
-
- if (parent && parent.length > 0) {
- inputs[1].value = parent
- }
-
- if (type && type.length > 0) {
- inputs[2].value = type
- }
-
- if (label && label.length > 0) {
- inputs[3].value = label
- }
-
- if (url && url.length > 0) {
- inputs[4].value = url
- }
-
-}
-
function text2DataUriScheme(text, mimeType) {
- const encoded = window.btoa(unescape(encodeURIComponent(text)))
- const dataUri = `data:${mimeType};charset=UTF-8;base64,${encoded}`
+ const binary = window.btoa(unescape(encodeURIComponent(text)))
+ const dataUri = `data:${mimeType};base64,${binary}`
return dataUri;
}