Initial commit: drawNET Alpha v1.0 - Professional Topology Designer with Full i18n and Performance Optimizations

2026-04-25 03:58:37 +09:00 · 2026-03-22 22:37:24 +09:00
commit 5cea93e317
192 changed files with 14449 additions and 0 deletions
@@ -0,0 +1,79 @@
+/**
+ * settings/ui.js - Professional Settings Panel UI (Modular)
+ */
+import { getSettings } from './store.js';
+import { renderGeneral, bindGeneralEvents } from './tabs/general.js';
+import { renderWorkspace, bindWorkspaceEvents } from './tabs/workspace.js';
+import { renderEngine, bindEngineEvents } from './tabs/engine.js';
+import { renderLicense } from './tabs/license.js';
+import { renderAbout } from './tabs/about.js';
+
+let activeTab = 'general';
+
+export function initSettings() {
+    const settingsBtn = document.getElementById('settings-btn');
+    const closeBtn = document.getElementById('close-settings-btn');
+    const panel = document.getElementById('settings-panel');
+    const tabs = document.querySelectorAll('.settings-tab');
+
+    if (settingsBtn && panel) {
+        settingsBtn.addEventListener('click', () => {
+            panel.classList.toggle('active');
+            if (panel.classList.contains('active')) renderTabContent(activeTab);
+        });
+    }
+
+    if (closeBtn && panel) {
+        closeBtn.addEventListener('click', () => panel.classList.remove('active'));
+    }
+
+    tabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+            tabs.forEach(t => t.classList.remove('active'));
+            tab.classList.add('active');
+            activeTab = tab.getAttribute('data-tab');
+            renderTabContent(activeTab);
+        });
+    });
+
+    document.addEventListener('mousedown', (e) => {
+        if (panel?.classList.contains('active')) {
+            if (!panel.contains(e.target) && !settingsBtn.contains(e.target)) {
+                panel.classList.remove('active');
+            }
+        }
+    });
+}
+
+function renderTabContent(tabName) {
+    const body = document.getElementById('settings-body');
+    if (!body) return;
+
+    const settings = getSettings();
+    body.innerHTML = '';
+    const section = document.createElement('div');
+    section.className = 'settings-section';
+
+    switch (tabName) {
+        case 'general':
+            renderGeneral(section);
+            bindGeneralEvents(section);
+            break;
+        case 'workspace':
+            renderWorkspace(section, settings);
+            bindWorkspaceEvents(section);
+            break;
+        case 'engine':
+            renderEngine(section);
+            bindEngineEvents(section);
+            break;
+        case 'about':
+            renderAbout(section);
+            break;
+        case 'license':
+            renderLicense(section);
+            break;
+    }
+
+    body.appendChild(section);
+}