From 0802f92c54f6d3b5cc7895a3408b87496cab3eff Mon Sep 17 00:00:00 2001 From: Coalery Date: Wed, 14 Aug 2024 01:31:24 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EB=85=B8=EB=93=9C=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20=EB=B2=84=ED=8A=BC=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/canvas.css | 53 +++++++++++++++++++++++++++++++++++++++++++ static/canvas.js | 32 ++++++++++++++++++++++---- static/style.css | 21 ----------------- static/util.js | 21 +++++++++++++++++ templates/canvas.html | 16 ++++++------- 5 files changed, 108 insertions(+), 35 deletions(-) create mode 100644 static/canvas.css create mode 100644 static/util.js 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..83d106b 100644 --- a/static/canvas.js +++ b/static/canvas.js @@ -1,12 +1,14 @@ +/// + 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; -function draw() { +async function draw() { const diagramCanvas = document.getElementById("diagram-canvas"); if (!diagramCanvas) { throw new Error("Diagram canvas not found"); @@ -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,30 @@ 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(); }; +window.draw = draw; 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 - +
-

Menu

- +
+ +
From 7fc270368d1e55527c242a5091fd9202c165857e Mon Sep 17 00:00:00 2001 From: Coalery Date: Wed, 14 Aug 2024 01:37:24 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C?= =?UTF-8?q?=20export=20=EB=B0=8F=20async=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/canvas.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/static/canvas.js b/static/canvas.js index 83d106b..6d5fab4 100644 --- a/static/canvas.js +++ b/static/canvas.js @@ -8,7 +8,7 @@ mermaid.initialize({ startOnLoad: false }); /** @type {WorkflowGraph} */ const diagram = data; -async function draw() { +function draw() { const diagramCanvas = document.getElementById("diagram-canvas"); if (!diagramCanvas) { throw new Error("Diagram canvas not found"); @@ -53,4 +53,3 @@ window.onload = () => { draw(); initListeners(); }; -window.draw = draw;