diff --git a/static/canvas.css b/static/canvas.css
new file mode 100644
index 0000000..83cbc47
--- /dev/null
+++ b/static/canvas.css
@@ -0,0 +1,53 @@
+:root {
+ --text-color: #101010;
+}
+
+body,
+button {
+ color: var(--text-color);
+}
+
+button {
+ display: inline-block;
+ border: none;
+ background-color: transparent;
+ padding: 0.5rem 1rem;
+ border-radius: 8px;
+ cursor: pointer;
+ font-size: 1.2rem;
+}
+
+button:hover {
+ background-color: #f4f4f4;
+}
+
+button:active {
+ background-color: #e4e4e4;
+}
+
+.controller-panel {
+ position: fixed;
+ top: 1rem;
+ right: 1rem;
+ bottom: 1rem;
+ width: 300px;
+ background-color: #fdfdfd;
+ border: 1px solid #f4f4f4;
+ padding: 2rem;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
+ border-radius: 16px;
+}
+
+.controller-panel h3 {
+ margin-top: 0;
+}
+
+.canvas-container {
+ margin: 1rem;
+}
+
+.controller-panel-header {
+ display: flex;
+ justify-content: end;
+ align-items: center;
+}
diff --git a/static/canvas.js b/static/canvas.js
index a366729..6d5fab4 100644
--- a/static/canvas.js
+++ b/static/canvas.js
@@ -1,7 +1,9 @@
+///
+
import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
-mermaid.initialize({ startOnLoad: false });
+import { createId, createRandomString } from "./util.js";
-///
+mermaid.initialize({ startOnLoad: false });
/** @type {WorkflowGraph} */
const diagram = data;
@@ -14,9 +16,9 @@ function draw() {
let mermaidText = `flowchart LR`;
- diagram.vertices?.forEach((vertex) => {
+ diagram.nodes?.forEach((vertex) => {
mermaidText += `
- ${vertex.id}[${vertex.label}]
+ ${vertex.id}["${vertex.label}"]
`;
});
diagram.edges?.forEach((edge) => {
@@ -25,10 +27,29 @@ function draw() {
`;
});
+ const mermaidElement = document.getElementById("diagram-canvas");
+ mermaidElement.removeAttribute("data-processed");
+
diagramCanvas.textContent = mermaidText;
+
mermaid.run();
}
+function createNode() {
+ const id = createId();
+ const label = `새로운 노드(${createRandomString(3)})`;
+ diagram.nodes.push({ id, label });
+ draw();
+}
+
+function initListeners() {
+ const createNodeButton = document.getElementById("create-node");
+ if (createNodeButton) {
+ createNodeButton.onclick = createNode;
+ }
+}
+
window.onload = () => {
draw();
+ initListeners();
};
diff --git a/static/style.css b/static/style.css
index 9b58247..4856d9d 100644
--- a/static/style.css
+++ b/static/style.css
@@ -125,24 +125,3 @@ th {
.radio-container input[type="radio"] {
margin-right: 10px;
}
-
-.controller-panel {
- position: fixed;
- top: 1rem;
- right: 1rem;
- bottom: 1rem;
- width: 300px;
- background-color: #fdfdfd;
- border: 1px solid #f4f4f4;
- padding: 1rem;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
- border-radius: 16px;
-}
-
-.controller-panel h2 {
- margin-top: 0;
-}
-
-.canvas-container {
- margin: 1rem;
-}
diff --git a/static/util.js b/static/util.js
new file mode 100644
index 0000000..c1e1f4c
--- /dev/null
+++ b/static/util.js
@@ -0,0 +1,21 @@
+/**
+ * @param {number} length
+ * @returns {string}
+ */
+export function createRandomString(length) {
+ const characters = "abcdefghijklmnopqrstuvwxyz0123456789";
+ let result = "";
+ for (let i = 0; i < length; i++) {
+ result += characters.charAt(Math.floor(Math.random() * characters.length));
+ }
+ return result;
+}
+
+/**
+ * @returns {string}
+ */
+export function createId() {
+ const current = Date.now().toString(36);
+ const random = createRandomString(6);
+ return `${current}${random}`.toUpperCase();
+}
diff --git a/templates/canvas.html b/templates/canvas.html
index aea562f..9d037a7 100644
--- a/templates/canvas.html
+++ b/templates/canvas.html
@@ -3,24 +3,22 @@
-
+
miniEDA
-
+