-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.js
68 lines (59 loc) · 1.93 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import applyRules from './lib/applyRules'
import createSVG from "./lib/createSVG"
import rulesBasic from './packages/rdf2dot/rules/basic.n3?raw'
import rulesDefault from './packages/rdf2dot/rules/default.n3?raw'
import { saveAs } from 'file-saver'
import '@rdfjs-elements/rdf-editor'
const fileInput = document.getElementById("file")
const rulesInput = document.getElementById("rules")
const selectRules = document.getElementById("selectRules")
const showButton = document.getElementById("show")
const saveButton = document.getElementById("save")
const graph = document.getElementById("graph")
const data = document.getElementById("data")
selectRules.add(new Option('default', rulesDefault))
selectRules.add(new Option('basic', rulesBasic))
let svg
const showGraph = async (data, rules) => {
graph.innerHTML = 'creating diagram...'
try {
const diagramText = await applyRules(data, rules)
svg = await createSVG(diagramText)
graph.innerHTML = ''
graph.appendChild(svg)
}
catch (e) {
graph.innerHTML = e
}
}
let customRules
rulesInput.addEventListener("change", () => {
const [file] = rulesInput.files;
if (file) {
const reader = new FileReader();
reader.addEventListener("load", () => {
customRules = reader.result
})
reader.readAsText(file)
}
else {
customRules = undefined
}
})
fileInput.addEventListener("change", () => {
const [file] = fileInput.files;
if (file) {
const reader = new FileReader();
reader.addEventListener("load", () => {
data.value = reader.result
})
reader.readAsText(file);
}
})
showButton.addEventListener("click", async () => {
await showGraph(data.value, customRules ?? selectRules.value)
saveButton.removeAttribute("disabled")
})
saveButton.addEventListener("click", () => {
saveAs(new File([svg.outerHTML], "rdf.svg", {type: "image/svg+xml"}))
})