noteconnection 1.1.2 → 1.3.0

package/dist/src/frontend/README.md

@@ -1,4 +1,4 @@
-# 2026-01-23 v1.1.2
+# 2026-01-24 v1.3.0
 
 # NoteConnection Knowledge Graph
 
@@ -45,7 +45,15 @@ Unlike traditional "network" views that show a messy web of links, NoteConnectio
 
 <img width="3723" height="1992" alt="image" src="https://github.com/user-attachments/assets/9e56e567-1742-48cf-b720-cf65a47fd317" />
 
-### 3. Performance & Control
+### 3. Path Mode: Structured Learning (v1.2.0)
+
+- **Curriculum Generation**: Instantly transforms your graph into linear learning paths.
+  - **Domain Learning**: Master an entire concept cluster (Topological Sort).
+  - **Diffusion Learning**: Find the most efficient path to a specific goal (Shortest Path + Prerequisites).
+- **Hybrid Architecture**: Connects to a high-fidelity **Godot 4.3 Desktop Renderer** via WebSocket (`ws://localhost:9876`) for AAA-quality visualization, while maintaining full web compatibility.
+- **Smart Strategies**: Choose "Foundational" (Base-first) or "Core" (Importance-first) sorting to suit your learning style.
+
+### 4. Performance & Control
 
 - **High-Capacity Parallel Processing**: Utilizes Node.js `worker_threads` (up to 12 cores) to distribute computationally intensive keyword matching.
 - **Simulation Controls (v0.9.0)**: Fine-tune the physics with a **Speed/Damping Slider** or use the **Freeze Layout** switch to stop the simulation for stable manual arrangement.
@@ -108,6 +116,10 @@ NoteConnection is built on a modular architecture designed for performance and e
 - **State Management**: `SettingsManager` persists user preferences (Physics, Visuals) to `localStorage`.
 - **Layout Logic**: Custom algorithms for Sugiyama-style layering and Force-directed physics.
 
+### Desktop Bridge (`src/core`)
+
+- **PathBridge**: standard WebSocket server (Port 9876) that exposes the internal graph state to external applications (e.g., Godot Engine), enabling hybrid web/native visualization pipelines.
+
 ---
 
 <a id="quick-start-en"></a>
@@ -266,6 +278,33 @@ For optimal performance with "GPU Optimised Rendering", especially on AMD RDNA c
 
 ## 📅 Changelog
 
+### v1.3.0 - Path Mode Polish & UI Refinements (2026-01-24)
+
+- **Reader Integration**:
+  - **Seamless Access**: Double-clicking the central node in "Orbital Layout" now instantly opens the `Reader`, displaying full node content.
+  - **Data Fetching**: Fixed a critical issue where the reader would open empty; now correctly retrieves full metadata from the global graph state.
+- **Visual Polish**:
+  - **Orbital Layout**: Significantly improved node dispersion (Radius 350-950px) to reduce label overlap.
+  - **Edge Clarity**: In Orbital mode, strictly hides edges not connected to the central node, reducing visual clutter by 90%.
+  - **Label Visibility**: Peripheral nodes now always display labels, sized proportionally to their distance (max 16px).
+  - **Depth of Field**: Adjusted opacity falloff to ensure distant nodes remain visible (min 0.4 opacity).
+- **UX Improvements**:
+  - **Target Selection**: Increased the "Target Node" search limit from 20 to 300, ensuring users can find any node in the graph.
+  - **Interactive Layers**: Fixed `z-index` layering issues where the Reader window was previously hidden behind the Path visualization.
+
+### v1.2.0 - Path Mode & Desktop Renderer (2026-01-23)
+
+- **Path Mode**: Introduced a major new feature set for converting graphs into linear learning paths.
+  - **Learning Modes**: 'Domain Learning' (Topological) and 'Diffusion Learning' (Goal-oriented).
+  - **Visualization**: New Radial and Tree layouts powered by D3/Canvas.
+  - **Strategies**: 'Foundational' and 'Core' sorting algorithms.
+- **Hybrid Architecture**:
+  - **Godot Bridge**: Implemented `PathBridge.ts` to sync graph state with external renderers via WebSocket (Port 9876).
+  - **Native Rendering**: Added support for Godot 4.3 to render the graph with high-fidelity Vulkan graphics (Source in `path_mode/`).
+- **DevOps**:
+  - **NPM Scripts**: Added `pathmode:dev` and `pathmode:test` workflows.
+  - **UI Stability**: Fixed critical bugs in Radial Layout visibility (`centerView`) and Exit Mode logic.
+
 ### v1.1.2 - Path Resolution & UI Stability (2026-01-23)
 
 - **Backend Protocol Fix**:
@@ -726,7 +765,15 @@ For optimal performance with "GPU Optimised Rendering", especially on AMD RDNA c
 
 <img width="3723" height="2007" alt="image" src="https://github.com/user-attachments/assets/10978984-3e2d-4ab6-8b44-342d4f3c3800" />
 
-### 3. 性能与控制
+### 3. Path Mode (路径模式): 结构化学习 (v1.2.0)
+
+- **课程生成**: 将复杂的网状图瞬间转化为线性的学习路径。
+  - **领域学习 (Domain Learning)**: 掌握整个概念集群（拓扑排序）。
+  - **扩散学习 (Diffusion Learning)**: 寻找通往特定目标的最优路径（最短路径 + 前置依赖）。
+- **混合架构**: 通过 WebSocket (`ws://localhost:9876`) 连接到高保真 **Godot 4.3 桌面渲染器**，实现 3A 级的可视化效果，同时保持完全的 Web 兼容性。
+- **智能策略**: 支持 "基础优先" (Foundational) 或 "核心优先" (Core) 排序，适应不同的学习风格。
+
+### 4. 性能与控制 (Performance & Control)
 
 - **高容量并行处理**: 利用 Node.js `worker_threads` (最多 12 核) 分发计算密集的关键词匹配任务。
 - **模拟控制 (v0.9.0)**: 通过 **速度/阻尼滑块** 微调物理效果，或使用 **冻结布局** 开关停止模拟以进行稳定的手动排列。
@@ -789,6 +836,10 @@ NoteConnection 基于模块化架构构建，旨在实现高性能和可扩展
 - **状态管理**: `SettingsManager` 将用户偏好（物理、视觉）持久化到 `localStorage`。
 - **布局逻辑**: 自定义的 Sugiyama 风格分层算法和力导向物理算法。
 
+### 桌面桥接 (Desktop Bridge) (`src/core`)
+
+- **PathBridge**: 标准 WebSocket 服务器 (端口 9876)，将内部图谱状态暴露给外部应用程序（例如 Godot 引擎），实现混合 Web/原生可视化管线。
+
 ---
 
 <a id="quick-start-zh"></a>
@@ -934,6 +985,33 @@ npm start -- --path "E:/Knowledge/ObsidianVault" --no-gpu
 
 ## 📅 更新日志 (Changelog)
 
+### v1.3.0 - 路径模式打磨与 UI 优化 (Path Mode Polish & UI Refinements) (2026-01-24)
+
+- **阅读器集成 (Reader Integration)**:
+  - **无缝访问**: 在“轨道布局”中双击中心节点现在会立即打开`阅读器`，显示完整的节点内容。
+  - **数据获取**: 修复了阅读器打开为空的关键问题；现在可以正确地从全局图状态检索完整的元数据。
+- **视觉打磨 (Visual Polish)**:
+  - **轨道布局**: 显著改进了节点分散度（半径 350-950px），减少了标签重叠。
+  - **边缘清晰度**: 在轨道模式下，严格隐藏未连接到中心节点的边，将视觉混乱减少了 90%。
+  - **标签可见性**: 周围节点现在总是显示标签，并根据距离按比例缩放（最大 16px）。
+  - **景深 (DoF)**: 调整了不透明度衰减，以确保远处的节点保持可见（最小 0.4 不透明度）。
+- **用户体验改进 (UX Improvements)**:
+  - **目标选择**: 将“目标节点”搜索限制从 20 增加到 300，确保用户可以找到图中的任何节点。
+  - **交互层级**: 修复了 `z-index` 层级问题，之前的阅读器窗口被隐藏在路径可视化后面。
+
+### v1.2.0 - 路径模式与桌面渲染器 (2026-01-23)
+
+- **路径模式 (Path Mode)**: 引入了一套主要的新功能，用于将图谱转化为线性的学习路径。
+  - **学习模式**: '领域学习' (拓扑排序) 和 '扩散学习' (目标导向)。
+  - **可视化**: 由 D3/Canvas 驱动的全新径向和树状布局。
+  - **策略**: '基础优先' 和 '核心优先' 排序算法。
+- **混合架构**:
+  - **Godot 桥接**: 实现了 `PathBridge.ts`，通过 WebSocket (端口 9876) 与外部渲染器同步图谱状态。
+  - **原生渲染**: 添加了对 Godot 4.3 的支持，以渲染高保真的 Vulkan 图形 (源码位于 `path_mode/`).
+- **运维 (DevOps)**:
+  - **NPM 脚本**: 添加了 `pathmode:dev` 和 `pathmode:test` 工作流。
+  - **UI 稳定性**: 修复了径向布局可见性 (`centerView`) 和退出模式逻辑中的关键 Bug。
+
 ### v1.1.2 - 路径解析与 UI 稳定性 (2026-01-23)
 
 - **后端协议修复**:

package/dist/src/frontend/app.js

@@ -2969,3 +2969,42 @@ if (controlsPanelToggleTarget) {
         }
     });
 }
+
+// Path Mode Integration (v1.1.0)
+const btnPathMode = document.getElementById('btn-path-mode');
+if (btnPathMode) {
+    btnPathMode.addEventListener('click', () => {
+        // Check for active selection for Diffusion Learning
+        const highlightState = window.highlightManager ? window.highlightManager.getState() : null;
+        const selectedNode = (highlightState && highlightState.currentNode) ? highlightState.currentNode : null;
+        
+        console.log('[Path Mode] Entering...', selectedNode ? `Target: ${selectedNode.id}` : 'Domain Mode');
+        
+        // UI Switch
+        document.getElementById('graph-wrapper').style.display = 'none';
+        document.getElementById('path-container').style.display = 'block';
+        
+        // Initialize Path App
+        if (window.pathApp) {
+            if (selectedNode) {
+                // Diffusion Learning
+                const modeSelect = document.getElementById('learning-mode');
+                if(modeSelect) modeSelect.value = 'diffusion';
+                
+                // Hide main graph controls panel potentially?
+                // For now, path-container consumes full screen and has its own toolbar.
+                
+                window.pathApp.init(selectedNode.id);
+            } else {
+                // Domain Learning
+                const modeSelect = document.getElementById('learning-mode');
+                if(modeSelect) modeSelect.value = 'domain';
+                
+                window.pathApp.init(null);
+            }
+        } else {
+            console.error('PathApp not loaded! Ensure libs/path_core.js and path_app.js are included.');
+        }
+    });
+}
+

package/dist/src/frontend/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' data: https://fonts.gstatic.com; img-src 'self' data: blob:; connect-src 'self'; worker-src 'self' blob:;"
+      content="default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' data: https://fonts.gstatic.com; img-src 'self' data: blob:; connect-src 'self' ws: localhost:9876; worker-src 'self' blob:;"
     />
     <title>NoteConnection Knowledge Graph</title>
     <link
@@ -13,6 +13,7 @@
       href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔗</text></svg>"
     />
     <link rel="stylesheet" href="styles.css" />
+    <link rel="stylesheet" href="path_styles.css" />
     <!-- Local Dependencies (Fully Offline) -->
     <script src="libs/d3.v7.min.js"></script>
 
@@ -69,7 +70,20 @@
             cursor: pointer;
           "
         >
-          Load
+        </button>
+        <button
+          id="btn-path-mode"
+          style="
+            background: #2c5282;
+            color: white;
+            border: 1px solid #555;
+            padding: 2px 8px;
+            cursor: pointer;
+            margin-left: 5px;
+          "
+          title="Path Learning Mode"
+        >
+          Path Mode
         </button>
       </div>
 
@@ -985,6 +999,26 @@
             </div>
           </div>
 
+          <div class="settings-group">
+            <h3 data-i18n="grp_path_mode">Path Mode</h3>
+            <div class="setting-item">
+              <label
+                style="display: flex; align-items: center; cursor: pointer"
+              >
+                <input type="checkbox" id="set-retain-history" checked />
+                <span style="margin-left: 10px" data-i18n="lbl_retain_history"
+                  >Retain Learning History</span
+                >
+              </label>
+              <div
+                style="font-size: 0.75rem; color: #888; margin-top: 2px"
+                data-i18n="desc_retain_history"
+              >
+                Keep learned nodes state across sessions.
+              </div>
+            </div>
+          </div>
+
           <div class="settings-group">
             <h3 data-i18n="grp_reading">Reading</h3>
             <div class="setting-item">
@@ -1159,5 +1193,97 @@
     <script src="loading.js"></script>
     <script src="source_manager.js"></script>
     <script src="welcome.js"></script>
+    <!-- Path Mode Container (Hidden by default) -->
+    <div id="path-container" class="path-container">
+        <!-- Toolbar -->
+        <div id="path-toolbar" class="path-toolbar">
+            <div class="toolbar-group">
+                <label for="learning-mode" data-i18n="lbl_mode">Mode:</label>
+                <select id="learning-mode">
+                    <option value="domain" data-i18n="opt_domain">Domain Learning</option>
+                    <option value="diffusion" data-i18n="opt_diffusion">Diffusion Learning</option>
+                </select>
+            </div>
+
+            <div class="toolbar-group">
+                <label for="strategy" data-i18n="lbl_strategy">Strategy:</label>
+                <select id="strategy">
+                    <option value="foundational" data-i18n="opt_strat_foundational" title="Start with fundamental concepts (Low In-Degree)">Foundational</option>
+                    <option value="core" data-i18n="opt_strat_core" title="Start with key concepts (High Centrality)">Core</option>
+                </select>
+            </div>
+
+            <div class="toolbar-group">
+                <label for="layout-style" data-i18n="lbl_layout">Layout:</label>
+                <select id="layout-style">
+                    <option value="vertical" data-i18n="opt_layout_vertical">Vertical Tree</option>
+                    <option value="horizontal" data-i18n="opt_layout_horizontal">Horizontal Tree</option>
+                    <option value="radial" data-i18n="opt_layout_radial">Radial</option>
+                    <option value="orbital" data-i18n="opt_layout_orbital">Orbital (Focus)</option>
+                </select>
+            </div>
+
+            <div class="toolbar-group">
+                <button id="btn-mark-complete" class="icon-btn action-btn" title="Mark Current Node Complete">
+                    <span class="icon">✨</span> <span data-i18n="btn_complete">Complete</span>
+                </button>
+            </div>
+
+            <div class="toolbar-group">
+                 <button id="btn-toggle-history" class="icon-btn" title="Toggle Learning History">
+                    📜 <span data-i18n="btn_history">History</span>
+                 </button>
+            </div>
+
+            <div class="toolbar-group right">
+                <button id="btn-exit-path" class="icon-btn" title="Exit Path Mode">
+                    <i class="fas fa-times"></i> <span data-i18n="btn_exit">Exit</span>
+                </button>
+            </div>
+        </div>
+
+        <!-- Canvas Layer -->
+        <canvas id="path-canvas"></canvas>
+
+        <!-- Overlay Layer for Interaction -->
+        <div id="path-overlay"></div>
+
+        <!-- Progress / Status -->
+        <div id="path-status">
+            Learning Path: <span id="path-count">0</span> nodes
+        </div>
+    </div>
+
+    <!-- Learning History Sidebar -->
+    <div id="learning-history-sidebar" class="path-sidebar" style="display: none;">
+        <div class="sidebar-header">
+            <h3>Learning History</h3>
+            <button id="btn-close-history" class="close-btn">&times;</button>
+        </div>
+        <div id="history-list" class="sidebar-content">
+            <!-- Items injected here -->
+        </div>
+    </div>
+
+    <!-- Node Selector Modal for Diffusion Mode -->
+    <div id="node-select-modal" class="modal-overlay" style="display: none;">
+        <div class="modal-content" style="max-width: 500px;">
+            <div class="modal-header">
+                <h3>Select Target Node</h3>
+                <button class="modal-close" id="btn-close-node-select">&times;</button>
+            </div>
+            <div class="modal-body">
+                <input type="text" id="node-select-input" placeholder="Search for a concept..." style="width: 100%; padding: 8px; box-sizing: border-box;">
+                <ul id="node-select-list" style="list-style: none; padding: 0; margin-top: 10px; max-height: 300px; overflow-y: auto; border: 1px solid #444;">
+                    <!-- Autocomplete items -->
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <!-- Path Mode Scripts -->
+    <script src="libs/path_core.js"></script>
+    <script src="path_app.js"></script>
+
   </body>
 </html>