@aicupa/plugin-todo-dependency 1.0.3 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aicupa/plugin-todo-dependency",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Set and visualize dependencies between todo items",
   "description_zh": "设置并可视化待办事项之间的依赖关系",
   "main": "./service",

package/service.js

@@ -54,11 +54,16 @@ module.exports = (api) => {
         const data = JSON.parse(content)
         const todotree = data.todotree
 
+        const allTodos = []
+        flattenTodos(todotree.tree, allTodos)
+        const existingIds = new Set(allTodos.map(t => t.id))
+        const validDepIds = depIds.filter(id => existingIds.has(id))
+
         function findAndUpdate(nodes) {
           for (const node of nodes) {
             if (node.todo && node.todo.id === todoId) {
-              if (depIds.length > 0) {
-                node.todo.depIds = depIds
+              if (validDepIds.length > 0) {
+                node.todo.depIds = validDepIds
               } else {
                 delete node.todo.depIds
               }

package/view/index.html

@@ -43,7 +43,8 @@
 
     #graphArea { flex: 1; overflow: auto; position: relative; background: #f7f8fa; }
     .dark #graphArea { background: #1e1e1e; }
-    #graphContainer { position: relative; min-width: 100%; min-height: 100%; }
+    #graphContainer { min-width: 100%; min-height: 100%; display: flex; align-items: center; justify-content: center; }
+    #graphInner { position: relative; flex-shrink: 0; }
 
     .node {
       position: absolute; width: 200px; background: #fff;
@@ -108,10 +109,16 @@
 
     #edgeSvg { position: absolute; top: 0; left: 0; pointer-events: none; }
 
+    #graphInner { transition: opacity 0.35s ease; }
+    #graphInner.fade-out { opacity: 0; }
+
     .empty-state {
       display: flex; flex-direction: column; align-items: center; justify-content: center;
-      height: 100%; color: #aaa; padding: 40px 24px; text-align: center; user-select: none;
+      position: absolute; inset: 0;
+      color: #aaa; padding: 40px 24px; text-align: center; user-select: none;
+      opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
     }
+    .empty-state.visible { opacity: 1; pointer-events: auto; }
     .empty-icon { width: 64px; height: 64px; margin-bottom: 16px; opacity: 0.35; }
     .empty-title { font-size: 15px; font-weight: 500; margin-bottom: 10px; color: #888; }
     .dark .empty-title { color: #777; }
@@ -127,20 +134,19 @@
     </div>
     <div id="warnings"></div>
     <div id="graphArea">
-      <div id="graphContainer">
-        <div class="empty-state" id="emptyState">
-          <svg class="empty-icon" viewBox="0 0 80 80" fill="none" stroke="currentColor" stroke-width="2">
-            <rect x="8" y="10" width="24" height="16" rx="4"/>
-            <rect x="48" y="10" width="24" height="16" rx="4"/>
-            <rect x="28" y="50" width="24" height="16" rx="4"/>
-            <line x1="26" y1="26" x2="36" y2="50" stroke-dasharray="3,2"/>
-            <line x1="54" y1="26" x2="44" y2="50" stroke-dasharray="3,2"/>
-            <polygon points="36,50 33,45 39,45" fill="currentColor" stroke="none"/>
-            <polygon points="44,50 41,45 47,45" fill="currentColor" stroke="none"/>
-          </svg>
-          <div class="empty-title" data-i18n="emptyTitle"></div>
-          <div class="empty-hint" data-i18n="emptyHint"></div>
-        </div>
+      <div id="graphContainer"></div>
+      <div class="empty-state visible" id="emptyState">
+        <svg class="empty-icon" viewBox="0 0 80 80" fill="none" stroke="currentColor" stroke-width="2">
+          <rect x="8" y="10" width="24" height="16" rx="4"/>
+          <rect x="48" y="10" width="24" height="16" rx="4"/>
+          <rect x="28" y="50" width="24" height="16" rx="4"/>
+          <line x1="26" y1="26" x2="36" y2="50" stroke-dasharray="3,2"/>
+          <line x1="54" y1="26" x2="44" y2="50" stroke-dasharray="3,2"/>
+          <polygon points="36,50 33,45 39,45" fill="currentColor" stroke="none"/>
+          <polygon points="44,50 41,45 47,45" fill="currentColor" stroke="none"/>
+        </svg>
+        <div class="empty-title" data-i18n="emptyTitle"></div>
+        <div class="empty-hint" data-i18n="emptyHint"></div>
       </div>
     </div>
   </div>
@@ -152,6 +158,8 @@
         title: '依赖图谱', refresh: '刷新',
         emptyTitle: '暂无依赖关系',
         emptyHint: '右键 Todo 节点，选择「设置依赖」<br>即可建立待办之间的依赖关系',
+        allDoneTitle: '所有依赖任务已完成 🎉',
+        allDoneHint: '当前依赖链路中的任务均已完成<br>如有新的依赖关系，请重新创建',
         done: '已完成', pending: '待完成', blocked: '阻塞中', notFound: '未找到该 Todo',
         cycleWarning: '检测到循环依赖，部分节点的层级可能不准确',
       },
@@ -159,6 +167,8 @@
         title: 'Dependency Graph', refresh: 'Refresh',
         emptyTitle: 'No dependencies yet',
         emptyHint: 'Right-click a Todo and select "Set Dependencies"<br>to create dependency relationships',
+        allDoneTitle: 'All dependency tasks completed 🎉',
+        allDoneHint: 'All tasks in dependency chains are done<br>Create new dependencies if needed',
         done: 'Done', pending: 'Pending', blocked: 'Blocked', notFound: 'Todo not found',
         cycleWarning: 'Cycle detected — some nodes may be positioned incorrectly',
       },
@@ -241,9 +251,41 @@
       } catch { return }
       if (!data) return
 
-      const { todos, edges } = data
-      const nodeIds = Object.keys(todos).map(Number)
-      if (!nodeIds.length) { showEmpty(); return }
+      const { todos, edges: allEdges } = data
+      hideEmpty()
+
+      // Build adjacency (both directions) to find connected components
+      const allIds = new Set()
+      const neighbors = {}
+      for (const [from, to] of allEdges) {
+        allIds.add(from); allIds.add(to)
+        if (!neighbors[from]) neighbors[from] = []
+        if (!neighbors[to]) neighbors[to] = []
+        neighbors[from].push(to)
+        neighbors[to].push(from)
+      }
+      // BFS to find connected components, keep components that have any undone node
+      const visited = new Set()
+      const visibleIds = new Set()
+      for (const start of allIds) {
+        if (visited.has(start)) continue
+        const comp = []
+        const queue = [start]
+        visited.add(start)
+        while (queue.length) {
+          const cur = queue.shift()
+          comp.push(cur)
+          for (const nb of (neighbors[cur] || [])) {
+            if (!visited.has(nb)) { visited.add(nb); queue.push(nb) }
+          }
+        }
+        if (comp.some(id => !todos[id]?.done)) {
+          for (const id of comp) visibleIds.add(id)
+        }
+      }
+      const edges = allEdges.filter(([from, to]) => visibleIds.has(from) && visibleIds.has(to))
+      const nodeIds = [...visibleIds]
+      if (!nodeIds.length) { fadeToEmpty(allEdges.length > 0); return }
 
       const { layers, hasCycle } = assignLayers(nodeIds, edges)
       if (hasCycle) {
@@ -253,11 +295,23 @@
       renderGraph(nodeIds, edges, layout.positions, todos, layout)
     }
 
-    function showEmpty() {
-      const c = document.getElementById('graphContainer')
+    function showEmpty(allDone) {
+      document.getElementById('graphContainer').innerHTML = ''
       const e = document.getElementById('emptyState')
-      c.innerHTML = ''; c.style.width = ''; c.style.height = ''
-      c.appendChild(e); e.style.display = 'flex'
+      e.querySelector('.empty-title').innerHTML = allDone ? t.allDoneTitle : t.emptyTitle
+      e.querySelector('.empty-hint').innerHTML = allDone ? t.allDoneHint : t.emptyHint
+      e.classList.add('visible')
+    }
+
+    function hideEmpty() {
+      document.getElementById('emptyState').classList.remove('visible')
+    }
+
+    function fadeToEmpty(allDone) {
+      const inner = document.getElementById('graphInner')
+      if (!inner) { showEmpty(allDone); return }
+      inner.classList.add('fade-out')
+      inner.addEventListener('transitionend', () => showEmpty(allDone), { once: true })
     }
 
     // ── Layout algorithm ──
@@ -323,8 +377,11 @@
     function renderGraph(nodeIds, edges, positions, todoData, layout) {
       const container = document.getElementById('graphContainer')
       container.innerHTML = ''
-      container.style.width  = layout.width + 'px'
-      container.style.height = layout.height + 'px'
+      const inner = document.createElement('div')
+      inner.id = 'graphInner'
+      inner.style.width  = layout.width + 'px'
+      inner.style.height = layout.height + 'px'
+      container.appendChild(inner)
 
       // Build dependency map: nodeId -> [depIds]
       const depsOf = {}
@@ -382,7 +439,7 @@
           'marker-end': isBlockingEdge ? 'url(#arrow-blocked)' : 'url(#arrow)',
         }))
       }
-      container.appendChild(svg)
+      inner.appendChild(svg)
 
       for (const id of nodeIds) {
         const pos = positions[id]; if (!pos) continue
@@ -431,7 +488,7 @@
           body.appendChild(sb)
         }
 
-        el.appendChild(body); container.appendChild(el)
+        el.appendChild(body); inner.appendChild(el)
       }
     }