<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Solitude</title>
</head>
<body>
<div class="app-body">
<div class="left-pane">
<ul>
<li><a href="#mainView">グラフ閲覧</a></li>
<li><a href="#editMenu">メニュー表示</a></li>
<li><a href="#editView">テーブル編集</a></li>
<li><a href="#srcView">DOTソースコード</a></li>
</ul>
</div>
<div class="right-pane">
<div id="mainView" class="viewer expanded">
<p>グラフ画像部分</p>
<p>
<svg xmlns="http://www.w3.org/2000/svg" id="ref-map"></svg>
</p>
</div>
<dvv id="menuView">
<p>メニュー</p>
<a id="savelink" style="display:none" download>ダウンロード</a>
<p style="display:none">
<input id="openReal" type="file" accept=".csv,.txt" />
</p>
<ul id="editMenu">
<li><button id="save">画像保存</button><a href="#" id="saveSvgLink">右クリックから保存</a></li>
<li><button id="generate">画像生成</button></li>
<li><button id="loadCsv">CSVからロード</button></li>
<li><button id="open">CSVを開く</button></li>
<li><button id="export">CSV保存</button><a href="#" id="saveCsvLink">右クリックから保存</a></li>
</ul>
</dvv>
<div class="top-bar">
<p>ヘッダー部分</p>
</div>
<div id="editView" class="editor expanded">
<p><span></span>編集部分</span></p>
<div class="ref-card">
<ul>
<li><span>id:</span><input id="root-id" type="text" value="root" readonly /></li>
<li><span>parent:</span><input id="root-parent" type="text" value="" readonly /></li>
<li><span>type:</span><input type="text" value="folder" /></li>
<li><span>label:</span><input type="text" value="root" /></li>
<li><span>url:</span><input type="text" value="" /></li>
</ul>
<p>
<ul class="card-menu">
<li><button class="card-append">追加</button></li>
</ul>
</p>
</div>
<div class="ref-card">
<ul class="card-values">
<li><span>id:</span><input type="text" value="child" /></li>
<li><span>parent:</span><input type="text" value="root" /></li>
<li><span>type:</span><input type="text" value="leaf" /></li>
<li><span>label:</span><input type="text" value="子供" /></li>
<li><span>url:</span><input type="text" value="https://www.example.com/" /></li>
</ul>
<p>
<ul class="card-menu">
<li><button class="card-append">追加</button></li>
<li><button class="card-delete">削除</button></li>
</ul>
</p>
</div>
</div>
<div class="bottom-bar">
</div>
<div id="srcView" class="src-viewer">
<p>DOTソースコード部分</p>
<textarea id="dot-src-viewer"></textarea>
</div>
<div id="csvView" class="src-viewer">
<p>CSV部分</p>
<textarea id="csv-src-viewer">id,parent,type,label,url
root,,folder,root,http://www.example.com
default,root,folder,その他,
Graphviz,default,leaf,Graphviz,http://www.graphviz.org
</textarea>
</div>
</div>
<div id="invisibleArea">
<template id="tmpl-ref-card">
<div class="ref-card">
<ul class="card-values">
<li><span>id:</span><input type="text" value="" /></li>
<li><span>parent:</span><input type="text" value="root" /></li>
<li><span>type:</span><input type="text" value="folder" /></li>
<li><span>label:</span><input type="text" value="" /></li>
<li><span>url:</span><input type="text" value="" /></li>
</ul>
<p>
<ul class="card-menu">
<li><button class="card-append">追加</button></li>
<li><button class="card-delete">削除</button></li>
</ul>
</p>
</div>
</template>
</div>
</div>
<script>
window.addEventListener('load', boot());
function boot() {
/*
document.querySelector("div.top-bar,div.bottom-bar").addEventListener("click", toggle);
function toggle(event) {
const editor = document.querySelector("div.editor");
if (document.querySelectorAll("div.editor.expanded").length > 0) {
editor.classList.remove("expanded");
editor.classList.add("shrinked");
} else if (document.querySelectorAll("div.editor.shrinked").length > 0) {
editor.classList.remove("shrinked");
editor.classList.add("expanded");
}
}
*/
}
</script>
<script src="main.js" type="module"></script>
</body>
</html>
sylow_castle