wema/index.html at main · kan/wema · GitHub

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>wema — dev</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { height: 100%; font-family: sans-serif; }
    body { display: flex; flex-direction: column; }

    .toolbar {
      display: flex;
      gap: 8px;
      padding: 8px 12px;
      background: #f5f5f5;
      border-bottom: 1px solid #ddd;
      align-items: center;
      flex-shrink: 0;
    }
    .toolbar button {
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      background: white;
      cursor: pointer;
      font-size: 13px;
    }
    .toolbar button:hover { background: #eee; }
    .toolbar button:disabled { opacity: 0.4; cursor: default; }
    .toolbar button:disabled:hover { background: white; }
    .toolbar button.locked { background: #ffcdd2; border-color: #e57373; }

    #board-container {
      flex: 1;
      background:
        linear-gradient(90deg, #f0f0f0 1px, transparent 1px),
        linear-gradient(#f0f0f0 1px, transparent 1px);
      background-size: 20px 20px;
    }
  </style>
</head>
<body>
  <div class="toolbar">
    <button id="btn-add">+ Add Note</button>
    <button id="btn-delete" disabled>Delete</button>
    <button id="btn-lock">Lock</button>
    <button id="btn-export">Export JSON</button>
    <button id="btn-import">Import JSON</button>
    <span id="status" style="margin-left: auto; color: #888; font-size: 12px;"></span>
  </div>
  <div id="board-container"></div>

  <input type="file" id="file-input" accept=".json" style="display:none">

  <script type="module">
    import { WemaBoard } from './src/index.ts';

    const container = document.getElementById('board-container');
    const board = new WemaBoard({ container });

    // Expose for console debugging
    window.__board = board;

    const status = document.getElementById('status');
    board.on('change', () => {
      const edges = board.getEdges().length;
      status.textContent = `Notes: ${board.getNotes().length}` + (edges > 0 ? `  Edges: ${edges}` : '');
    });

    // Delete button — works for both notes and edges
    const btnDelete = document.getElementById('btn-delete');
    function updateDeleteBtn() {
      btnDelete.disabled = board.getSelection().length === 0 && !board.getSelectedEdge();
    }
    board.on('note:select', updateDeleteBtn);
    board.on('change', updateDeleteBtn);
    container.addEventListener('click', () => setTimeout(updateDeleteBtn, 0));
    btnDelete.addEventListener('click', () => {
      const selectedEdge = board.getSelectedEdge();
      if (selectedEdge) { board.deleteEdge(selectedEdge); return; }
      board.getSelection().forEach((id) => board.deleteNote(id));
    });

    // Lock button
    const btnLock = document.getElementById('btn-lock');
    const btnAdd = document.getElementById('btn-add');
    function updateLockState() {
      const locked = board.isReadOnly();
      btnLock.textContent = locked ? 'Unlock' : 'Lock';
      if (locked) {
        btnLock.classList.add('locked');
      } else {
        btnLock.classList.remove('locked');
      }
      btnAdd.disabled = locked;
      if (locked) btnDelete.disabled = true;
      status.textContent = (status.textContent || '').replace(/ *\[LOCKED\]/, '') + (locked ? ' [LOCKED]' : '');
    }
    btnLock.addEventListener('click', () => {
      board.setReadOnly(!board.isReadOnly());
      updateLockState();
    });
    document.addEventListener('keydown', (e) => {
      if ((e.ctrlKey || e.metaKey) && e.key === 'l') {
        e.preventDefault();
        board.setReadOnly(!board.isReadOnly());
        updateLockState();
      }
    });

    // Add note button
    btnAdd.addEventListener('click', () => {
      const notes = board.getNotes();
      const offset = notes.length * 20;
      board.addNote({ x: 120 + offset, y: 80 + offset });
    });

    // Export
    document.getElementById('btn-export').addEventListener('click', () => {
      const data = board.exportData();
      const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'wema-board.json';
      a.click();
      URL.revokeObjectURL(url);
    });

    // Import
    const fileInput = document.getElementById('file-input');
    document.getElementById('btn-import').addEventListener('click', () => {
      fileInput.click();
    });
    fileInput.addEventListener('change', async () => {
      const file = fileInput.files[0];
      if (!file) return;
      const text = await file.text();
      const data = JSON.parse(text);
      board.importData(data);
      fileInput.value = '';
    });
  </script>
</body>
</html>