Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 노드 생성 버튼 구현 #4

Merged
merged 2 commits into from
Aug 15, 2024
Merged

feat: 노드 생성 버튼 구현 #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0802f92
feat: 노드 생성 버튼 구현
Coalery Aug 13, 2024
7fc2703
fix: 불필요한 export 및 async 제거
Coalery Aug 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 53 additions & 0 deletions static/canvas.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
29 changes: 25 additions & 4 deletions static/canvas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
/// <reference path="../types/diagram.d.ts" />
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

맨 위에 있어야 reference가 의도대로 동작하여 옮겼습니다.


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";

/// <reference path="../types/diagram.d.ts" />
mermaid.initialize({ startOnLoad: false });

/** @type {WorkflowGraph} */
const diagram = data;
Expand All @@ -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) => {
Expand All @@ -25,10 +27,29 @@ function draw() {
`;
});

const mermaidElement = document.getElementById("diagram-canvas");
mermaidElement.removeAttribute("data-processed");
Comment on lines +30 to +31
Copy link
Collaborator Author

@Coalery Coalery Aug 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

최초 호출되는 mermaid.run()에 의해 'data-processed' attribute가 mermaid element에 생성이 되어, 이후 mermaid.run()을 재호출해도 렌더링되지 않는 문제가 있습니다. 관련 코드

이를 해결하기 위해 'data-processed' attribute를 제거합니다.

ref:


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();
};
21 changes: 0 additions & 21 deletions static/style.css
View file
Open in desktop
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

canvas용 별도 css 파일로 분리합니다. (canvas.css)

Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
21 changes: 21 additions & 0 deletions static/util.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
}
16 changes: 7 additions & 9 deletions templates/canvas.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,22 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/static/style.css" />
<link rel="stylesheet" href="/static/canvas.css" />
<title>miniEDA</title>
<script>
// Variable from FastAPI, Ignore the error occurred below line.
const data = {{ diagram | tojson }};
</script>
<script type="module" src="/static/canvas.js"></script>
<script type="module" src="/static/canvas.js">
import { draw } from "/static/canvas.js";
</script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="controller-panel">
<h2>Menu</h2>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
<header class="controller-panel-header">
<button id="create-node">+</button>
</header>
</div>
<div class="canvas-container">
<div id="diagram-canvas" class="mermaid"></div>
Expand Down