aifastdb-devplan 1.6.1 → 1.6.3

package/dist/visualize/graph-canvas/renderer.js

@@ -122,8 +122,11 @@ RenderPipeline.prototype._fullRender = function(ctx) {
     }
   }
 
-  // ── 6. Draw edges (only between visible nodes) ──
-  this._drawEdges(ctx, lodLevel);
+  // ── 6. Draw edges (skip during zoom/drag for performance — T11.8) ──
+  var skipEdges = engine._isZooming || (engine._interaction && engine._interaction._isDraggingCanvas);
+  if (!skipEdges) {
+    this._drawEdges(ctx, lodLevel);
+  }
 
   // ── 7. Draw nodes ──
   this._drawNodes(ctx, lodLevel);
@@ -314,21 +317,40 @@ RenderPipeline.prototype._drawEdges = function(ctx, lodLevel) {
 
     ctx.beginPath();
 
+    // Compute control point for quadratic Bezier curve (LOD >= 1)
+    var cpX = null, cpY = null;
     if (lodLevel === 0) {
       // LOD 0: straight lines only (maximum performance)
       ctx.moveTo(fromNode.x, fromNode.y);
       ctx.lineTo(toNode.x, toNode.y);
     } else {
-      // LOD 1-2: slight curve for visual separation of parallel edges
-      ctx.moveTo(fromNode.x, fromNode.y);
-      ctx.lineTo(toNode.x, toNode.y);
+      // LOD 1-2: smooth quadratic Bezier curve (T11.4)
+      var edgeDx = toNode.x - fromNode.x;
+      var edgeDy = toNode.y - fromNode.y;
+      var edgeLen = Math.sqrt(edgeDx * edgeDx + edgeDy * edgeDy);
+      if (edgeLen < 1) {
+        ctx.moveTo(fromNode.x, fromNode.y);
+        ctx.lineTo(toNode.x, toNode.y);
+      } else {
+        // Compute control point: perpendicular offset from midpoint
+        var roundness = style.roundness || 0.15;
+        var midX = (fromNode.x + toNode.x) / 2;
+        var midY = (fromNode.y + toNode.y) / 2;
+        var perpX = -edgeDy / edgeLen;
+        var perpY = edgeDx / edgeLen;
+        var offset = roundness * edgeLen * 0.15;
+        cpX = midX + perpX * offset;
+        cpY = midY + perpY * offset;
+        ctx.moveTo(fromNode.x, fromNode.y);
+        ctx.quadraticCurveTo(cpX, cpY, toNode.x, toNode.y);
+      }
     }
 
     ctx.stroke();
 
     // ── Arrow head (LOD >= 1) ──
     if (lodLevel >= 1 && style.arrows) {
-      this._drawArrowHead(ctx, fromNode, toNode, style);
+      this._drawArrowHead(ctx, fromNode, toNode, style, cpX, cpY);
     }
   }
 
@@ -336,20 +358,40 @@ RenderPipeline.prototype._drawEdges = function(ctx, lodLevel) {
   ctx.setLineDash([]);
 };
 
-RenderPipeline.prototype._drawArrowHead = function(ctx, fromNode, toNode, style) {
+RenderPipeline.prototype._drawArrowHead = function(ctx, fromNode, toNode, style, cpX, cpY) {
   var scale = this._engine._viewport.getScale();
   var arrowSize = Math.max(4, 8 / scale);
-  var dx = toNode.x - fromNode.x;
-  var dy = toNode.y - fromNode.y;
-  var len = Math.sqrt(dx * dx + dy * dy);
-  if (len < 1) return;
-
-  // Arrow at edge of target node
   var toR = toNode._radius || 10;
-  var ratio = (len - toR) / len;
-  var ax = fromNode.x + dx * ratio;
-  var ay = fromNode.y + dy * ratio;
-  var angle = Math.atan2(dy, dx);
+  var angle;
+
+  if (cpX != null && cpY != null) {
+    // T11.4: Arrow direction along Bezier curve tangent at endpoint
+    // For quadratic Bezier B(t) = (1-t)^2*P0 + 2(1-t)t*CP + t^2*P1
+    // Tangent at t=1: B'(1) = 2*(P1 - CP)
+    var tdx = toNode.x - cpX;
+    var tdy = toNode.y - cpY;
+    var tlen = Math.sqrt(tdx * tdx + tdy * tdy);
+    if (tlen < 0.1) {
+      tdx = toNode.x - fromNode.x;
+      tdy = toNode.y - fromNode.y;
+      tlen = Math.sqrt(tdx * tdx + tdy * tdy);
+    }
+    if (tlen < 0.1) return;
+    angle = Math.atan2(tdy, tdx);
+    // Arrow position: step back from toNode by toR along tangent direction
+    var ax = toNode.x - (tdx / tlen) * toR;
+    var ay = toNode.y - (tdy / tlen) * toR;
+  } else {
+    // Straight line: use direct vector
+    var dx = toNode.x - fromNode.x;
+    var dy = toNode.y - fromNode.y;
+    var len = Math.sqrt(dx * dx + dy * dy);
+    if (len < 1) return;
+    angle = Math.atan2(dy, dx);
+    var ratio = (len - toR) / len;
+    var ax = fromNode.x + dx * ratio;
+    var ay = fromNode.y + dy * ratio;
+  }
 
   ctx.fillStyle = ctx.strokeStyle;
   ctx.beginPath();
@@ -371,6 +413,7 @@ RenderPipeline.prototype._drawArrowHead = function(ctx, fromNode, toNode, style)
 RenderPipeline.prototype._drawNodes = function(ctx, lodLevel) {
   var nodes = this._visibleNodes;
   var styles = this._engine._styles;
+  var enableShadow = (lodLevel >= 2);
 
   for (var i = 0; i < nodes.length; i++) {
     var n = nodes[i];
@@ -378,14 +421,50 @@ RenderPipeline.prototype._drawNodes = function(ctx, lodLevel) {
     var r = n._radius || style.radius || 10;
     n._radius = r; // cache for hit-test
 
-    // ── Selection / hover glow ──
+    // ── Selection / hover glow (T11.3 enhanced) ──
     if (n._selected || n._hovered) {
-      ctx.globalAlpha = 0.3;
+      var glowR = r * (n._selected ? 1.15 : 1.08);
+      var glowPad = (n._selected ? 8 : 5) / this._engine._viewport.getScale();
+      // Outer glow
+      ctx.globalAlpha = n._selected ? 0.35 : 0.2;
       ctx.fillStyle = n._selected ? '#6366f1' : '#818cf8';
       ctx.beginPath();
-      ctx.arc(n.x, n.y, r + 6 / this._engine._viewport.getScale(), 0, Math.PI * 2);
+      ctx.arc(n.x, n.y, glowR + glowPad, 0, Math.PI * 2);
       ctx.fill();
+      // White border ring
+      ctx.globalAlpha = n._selected ? 0.9 : 0.6;
+      ctx.strokeStyle = '#ffffff';
+      ctx.lineWidth = (n._selected ? 2.5 : 1.5) / this._engine._viewport.getScale();
+      ctx.beginPath();
+      ctx.arc(n.x, n.y, glowR + 1 / this._engine._viewport.getScale(), 0, Math.PI * 2);
+      ctx.stroke();
       ctx.globalAlpha = 1;
+      // Apply slight scale to the rendered radius for selected nodes
+      if (n._selected) r = glowR;
+    }
+
+    // ── Shadow (LOD >= 2 only) ──
+    if (enableShadow) {
+      ctx.shadowColor = 'rgba(0,0,0,0.3)';
+      ctx.shadowBlur = 5;
+      ctx.shadowOffsetX = 0;
+      ctx.shadowOffsetY = 2;
+    }
+
+    // ── Compute box dimensions for 'box' shape (text-adaptive) ──
+    var shape = style.shape || 'circle';
+    if ((shape === 'box' || shape === 'square') && n.label && lodLevel >= 1) {
+      var boxFontSize = (style.fontSize || 12) / this._engine._viewport.getScale();
+      ctx.font = Math.max(boxFontSize, 2) + 'px -apple-system, sans-serif';
+      if (!n._textWidth || n._textWidthScale !== this._engine._viewport.getScale()) {
+        var maxChars = lodLevel >= 2 ? 30 : 15;
+        var displayLabel = n.label.length > maxChars ? n.label.substring(0, maxChars) + '\u2026' : n.label;
+        n._textWidth = ctx.measureText(displayLabel).width;
+        n._textWidthScale = this._engine._viewport.getScale();
+      }
+      var pad = 8 / this._engine._viewport.getScale();
+      n._boxW = Math.max(n._textWidth + pad * 2, r * 2);
+      n._boxH = boxFontSize + pad * 2;
     }
 
     // ── Node shape ──
@@ -393,14 +472,22 @@ RenderPipeline.prototype._drawNodes = function(ctx, lodLevel) {
     ctx.strokeStyle = style.borderColor || '#4b5563';
     ctx.lineWidth = (style.borderWidth || 1) / this._engine._viewport.getScale();
 
-    this._drawShape(ctx, n.x, n.y, r, style.shape || 'circle');
+    this._drawShape(ctx, n.x, n.y, r, shape, n);
 
     ctx.fill();
     if (lodLevel >= 1) ctx.stroke();
+
+    // ── Reset shadow ──
+    if (enableShadow) {
+      ctx.shadowColor = 'transparent';
+      ctx.shadowBlur = 0;
+      ctx.shadowOffsetX = 0;
+      ctx.shadowOffsetY = 0;
+    }
   }
 };
 
-RenderPipeline.prototype._drawShape = function(ctx, x, y, r, shape) {
+RenderPipeline.prototype._drawShape = function(ctx, x, y, r, shape, node) {
   ctx.beginPath();
 
   switch (shape) {
@@ -416,7 +503,33 @@ RenderPipeline.prototype._drawShape = function(ctx, x, y, r, shape) {
       break;
     case 'box':
     case 'square':
-      ctx.rect(x - r, y - r * 0.7, r * 2, r * 1.4);
+      // Text-adaptive rounded rectangle (T11.2)
+      if (node && node._boxW && node._boxH) {
+        var bw = node._boxW;
+        var bh = node._boxH;
+        var br = 4 / this._engine._viewport.getScale(); // border radius
+        if (ctx.roundRect) {
+          ctx.roundRect(x - bw / 2, y - bh / 2, bw, bh, br);
+        } else {
+          // Fallback for browsers without roundRect
+          var rx = x - bw / 2, ry = y - bh / 2;
+          ctx.moveTo(rx + br, ry);
+          ctx.lineTo(rx + bw - br, ry);
+          ctx.quadraticCurveTo(rx + bw, ry, rx + bw, ry + br);
+          ctx.lineTo(rx + bw, ry + bh - br);
+          ctx.quadraticCurveTo(rx + bw, ry + bh, rx + bw - br, ry + bh);
+          ctx.lineTo(rx + br, ry + bh);
+          ctx.quadraticCurveTo(rx, ry + bh, rx, ry + bh - br);
+          ctx.lineTo(rx, ry + br);
+          ctx.quadraticCurveTo(rx, ry, rx + br, ry);
+          ctx.closePath();
+        }
+        // Update node radius for hit-test (use half of the larger dimension)
+        node._radius = Math.max(bw, bh) / 2;
+      } else {
+        // Fallback: fixed-size box (LOD 0 or no label)
+        ctx.rect(x - r, y - r * 0.7, r * 2, r * 1.4);
+      }
       break;
     case 'triangle':
       ctx.moveTo(x, y - r);
@@ -471,30 +584,46 @@ RenderPipeline.prototype._drawLabels = function(ctx, lodLevel) {
     var style = n._style || styles.getNodeStyle(n);
     var fontSize = (style.fontSize || 12) / scale;
 
-    // LOD 1: only show labels for larger nodes
+    // LOD 1: only show labels for larger nodes + skip sub-task/document (T11.10)
     if (lodLevel === 1) {
       var screenSize = (n._radius || 10) * scale;
       if (screenSize < 6) continue; // too small on screen
+      var nodeType = n.type || '';
+      if (nodeType === 'sub-task' || nodeType === 'document') continue;
     }
 
     // Truncate long labels
     var label = n.label;
     var maxChars = lodLevel >= 2 ? 30 : 15;
-    if (label.length > maxChars) label = label.substring(0, maxChars) + '…';
+    if (label.length > maxChars) label = label.substring(0, maxChars) + '\u2026';
 
     ctx.font = Math.max(fontSize, 2) + 'px -apple-system, sans-serif';
-    ctx.fillStyle = style.fontColor || '#e5e7eb';
     ctx.textAlign = 'center';
     ctx.textBaseline = 'middle';
 
     var shape = style.shape || 'circle';
     if (shape === 'box' || shape === 'square') {
-      // Label inside box
+      // Label inside box (text-adaptive box already drawn in _drawNodes)
+      ctx.fillStyle = style.fontColor || '#e5e7eb';
       ctx.fillText(label, n.x, n.y);
     } else {
-      // Label below node
+      // Label below node with semi-transparent background (T11.5)
       var r = n._radius || 10;
-      ctx.fillText(label, n.x, n.y + r + fontSize * 0.8);
+      var labelY = n.y + r + fontSize * 0.8;
+      var tw = ctx.measureText(label).width;
+      var bgPadH = 3 / scale;
+      var bgPadV = 2 / scale;
+      // Draw background rectangle
+      ctx.fillStyle = 'rgba(17, 24, 39, 0.75)';
+      ctx.fillRect(
+        n.x - tw / 2 - bgPadH,
+        labelY - fontSize / 2 - bgPadV,
+        tw + bgPadH * 2,
+        fontSize + bgPadV * 2
+      );
+      // Draw label text
+      ctx.fillStyle = style.fontColor || '#e5e7eb';
+      ctx.fillText(label, n.x, labelY);
     }
   }
 };
@@ -567,11 +696,13 @@ RenderPipeline.prototype._drawStatusPie = function(ctx, cluster) {
   var breakdown = cluster.statusBreakdown;
   if (!breakdown) return;
 
+  // 从统一配置读取状态颜色
+  var _uniSC = (typeof getUnifiedNodeStyle === 'function') ? getUnifiedNodeStyle().statusGeneric : null;
   var STATUS_COLORS = {
-    completed: '#059669',
-    in_progress: '#7c3aed',
-    pending: '#4b5563',
-    cancelled: '#92400e',
+    completed: _uniSC ? _uniSC.completed.bg : '#059669',
+    in_progress: _uniSC ? _uniSC.in_progress.bg : '#7c3aed',
+    pending: _uniSC ? _uniSC.pending.bg : '#4b5563',
+    cancelled: _uniSC ? _uniSC.cancelled.bg : '#92400e',
   };
 
   var total = cluster.count;

package/dist/visualize/graph-canvas/renderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderer.js","sourceRoot":"","sources":["../../../src/visualize/graph-canvas/renderer.ts"],"names":[],"mappings":";AAAA;;;;;;;;;GASG;;AAEH,8CA2pBC;AA3pBD,SAAgB,iBAAiB;IAC/B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAypBR,CAAC;AACF,CAAC"}
+{"version":3,"file":"renderer.js","sourceRoot":"","sources":["../../../src/visualize/graph-canvas/renderer.ts"],"names":[],"mappings":";AAAA;;;;;;;;;GASG;;AAEH,8CA8xBC;AA9xBD,SAAgB,iBAAiB;IAC/B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4xBR,CAAC;AACF,CAAC"}

package/dist/visualize/graph-canvas/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/visualize/graph-canvas/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,wBAAgB,eAAe,IAAI,MAAM,CA2HxC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/visualize/graph-canvas/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,wBAAgB,eAAe,IAAI,MAAM,CAoJxC"}

package/dist/visualize/graph-canvas/styles.js

@@ -11,127 +11,152 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStylesScript = getStylesScript;
 function getStylesScript() {
-    return `
-// ============================================================================
-// StyleManager — Node & Edge Styles
-// ============================================================================
-
-function StyleManager() {
-  // Status colors (same as original vis-network styles)
-  this.STATUS_COLORS = {
-    completed:   { bg: '#059669', border: '#047857', font: '#d1fae5' },
-    in_progress: { bg: '#7c3aed', border: '#6d28d9', font: '#ddd6fe' },
-    pending:     { bg: '#4b5563', border: '#374151', font: '#d1d5db' },
-    cancelled:   { bg: '#92400e', border: '#78350f', font: '#fde68a' },
-  };
-
-  // Node sizing rules by type
-  this.NODE_SIZE_RULES = {
-    'project':   { min: 35, max: 65, baseFont: 16, maxFont: 22, scale: 3.5 },
-    'module':    { min: 20, max: 45, baseFont: 12, maxFont: 16, scale: 2.8 },
-    'main-task': { min: 14, max: 38, baseFont: 11, maxFont: 15, scale: 2.2 },
-    'sub-task':  { min: 7,  max: 18, baseFont: 8,  maxFont: 11, scale: 1.5 },
-    'document':  { min: 12, max: 30, baseFont: 9,  maxFont: 13, scale: 1.8 },
-  };
-
-  // Node type shapes
-  this.NODE_SHAPES = {
-    'project': 'star',
-    'module': 'diamond',
-    'main-task': 'circle',
-    'sub-task': 'circle',
-    'document': 'box',
-  };
-
-  // Node type colors (for non-status-based types)
-  this.NODE_COLORS = {
-    'project': { bg: '#f59e0b', border: '#d97706', font: '#fff' },
-    'module':  { bg: '#059669', border: '#047857', font: '#d1fae5' },
-    'document': { bg: '#2563eb', border: '#1d4ed8', font: '#dbeafe' },
-  };
-
-  // Edge styles by label
-  this.EDGE_STYLES = {
-    'has_main_task':  { width: 2, color: '#4b5563', highlightColor: '#93c5fd', dashes: null, arrows: true },
-    'has_sub_task':   { width: 1, color: '#4b5563', highlightColor: '#818cf8', dashes: null, arrows: true },
-    'has_document':   { width: 1, color: '#4b5563', highlightColor: '#60a5fa', dashes: [5, 5], arrows: true },
-    'module_has_task':{ width: 1.5, color: '#4b5563', highlightColor: '#34d399', dashes: [2, 4], arrows: true },
-    'task_has_doc':   { width: 1.5, color: '#4b5563', highlightColor: '#f59e0b', dashes: [4, 3], arrows: true },
-    'doc_has_child':  { width: 1.5, color: '#4b5563', highlightColor: '#c084fc', dashes: [6, 3], arrows: true },
-  };
-
-  this.EDGE_DEFAULT = { width: 1, color: '#4b5563', highlightColor: '#9ca3af', dashes: null, arrows: false };
-}
-
-/**
- * Compute node size and font size based on type and degree.
- */
-StyleManager.prototype._calcNodeSize = function(type, degree) {
-  var rule = this.NODE_SIZE_RULES[type] || { min: 10, max: 22, baseFont: 10, maxFont: 13, scale: 1.0 };
-  var size = rule.min + rule.scale * Math.sqrt(degree || 0);
-  size = Math.max(rule.min, Math.min(size, rule.max));
-  var sizeRatio = (size - rule.min) / (rule.max - rule.min || 1);
-  var fontSize = Math.round(rule.baseFont + sizeRatio * (rule.maxFont - rule.baseFont));
-  return { size: Math.round(size), fontSize: fontSize };
-};
-
-/**
- * Get style for a node.
- * @param {Object} node
- * @returns {Object} { shape, radius, bgColor, borderColor, borderWidth, fontColor, fontSize }
- */
-StyleManager.prototype.getNodeStyle = function(node) {
-  var type = node.type || 'default';
-  var props = node.properties || {};
-  var status = props.status || 'pending';
-  var degree = node.degree || 0;
-
-  var ns = this._calcNodeSize(type, degree);
-  var shape = this.NODE_SHAPES[type] || 'circle';
-
-  // Determine colors
-  var colors;
-  if (type === 'project' || type === 'module' || type === 'document') {
-    colors = this.NODE_COLORS[type] || this.STATUS_COLORS.pending;
-  } else {
-    // main-task and sub-task use status colors
-    colors = this.STATUS_COLORS[status] || this.STATUS_COLORS.pending;
-  }
-
-  return {
-    shape: shape,
-    radius: ns.size,
-    bgColor: colors.bg,
-    borderColor: colors.border,
-    borderWidth: type === 'project' ? 3 : (type === 'sub-task' ? 1 : 2),
-    fontColor: colors.font,
-    fontSize: ns.fontSize,
-  };
-};
-
-/**
- * Get style for an edge.
- * @param {Object} edge
- * @returns {Object} { width, color, highlightColor, dashes, arrows }
- */
-StyleManager.prototype.getEdgeStyle = function(edge) {
-  var label = edge.label || edge._label || '';
-  return this.EDGE_STYLES[label] || this.EDGE_DEFAULT;
-};
-
-/**
- * Apply styles to all nodes and edges (batch).
- */
-StyleManager.prototype.applyAllStyles = function(nodes, edges) {
-  for (var i = 0; i < nodes.length; i++) {
-    var style = this.getNodeStyle(nodes[i]);
-    nodes[i]._style = style;
-    nodes[i]._radius = style.radius;
-  }
-  for (var i = 0; i < edges.length; i++) {
-    edges[i]._style = this.getEdgeStyle(edges[i]);
-  }
-};
+    return `
+// ============================================================================
+// StyleManager — Node & Edge Styles
+// ============================================================================
+
+function StyleManager() {
+  // 从统一配置加载颜色 (如果 getUnifiedNodeStyle 可用)
+  var _uni = (typeof getUnifiedNodeStyle === 'function') ? getUnifiedNodeStyle() : null;
+
+  // Status colors
+  this.STATUS_COLORS = _uni ? _uni.statusGeneric : {
+    completed:   { bg: '#059669', border: '#047857', font: '#d1fae5' },
+    in_progress: { bg: '#7c3aed', border: '#6d28d9', font: '#ddd6fe' },
+    pending:     { bg: '#4b5563', border: '#374151', font: '#d1d5db' },
+    cancelled:   { bg: '#92400e', border: '#78350f', font: '#fde68a' },
+  };
+
+  // 统一样式缓存 (供 getNodeStyle 使用)
+  this._uniStyle = _uni;
+
+  // Node sizing rules by type
+  this.NODE_SIZE_RULES = {
+    'project':   { min: 35, max: 65, baseFont: 16, maxFont: 22, scale: 3.5 },
+    'module':    { min: 20, max: 45, baseFont: 12, maxFont: 16, scale: 2.8 },
+    'main-task': { min: 14, max: 38, baseFont: 11, maxFont: 15, scale: 2.2 },
+    'sub-task':  { min: 7,  max: 18, baseFont: 8,  maxFont: 11, scale: 1.5 },
+    'document':  { min: 12, max: 30, baseFont: 9,  maxFont: 13, scale: 1.8 },
+    'memory':    { min: 6,  max: 20, baseFont: 7,  maxFont: 11, scale: 1.2 },
+  };
+
+  // Node type shapes
+  this.NODE_SHAPES = {
+    'project': 'star',
+    'module': 'diamond',
+    'main-task': 'circle',
+    'sub-task': 'circle',
+    'document': 'box',
+    'memory': 'hexagon',
+  };
+
+  // Node type colors (for non-status-based types) — 从统一配置读取
+  this.NODE_COLORS = _uni ? {
+    'project': _uni.project,
+    'module':  _uni.module,
+    'document': _uni.document,
+    'memory':  _uni.memory,
+  } : {
+    'project': { bg: '#f59e0b', border: '#d97706', font: '#fff' },
+    'module':  { bg: '#ff6600', border: '#cc5200', font: '#fff3e0' },
+    'document': { bg: '#2563eb', border: '#1d4ed8', font: '#dbeafe' },
+    'memory':  { bg: '#e879f9', border: '#a21caf', font: '#fdf4ff' },
+  };
+
+  // Edge styles by label
+  this.EDGE_STYLES = {
+    'has_main_task':  { width: 2, color: '#4b5563', highlightColor: '#93c5fd', dashes: null, arrows: true },
+    'has_sub_task':   { width: 1, color: '#4b5563', highlightColor: '#818cf8', dashes: null, arrows: true },
+    'has_document':   { width: 1, color: '#4b5563', highlightColor: '#60a5fa', dashes: [5, 5], arrows: true },
+    'module_has_task':{ width: 1.5, color: '#4b5563', highlightColor: '#ff8533', dashes: [2, 4], arrows: true },
+    'task_has_doc':   { width: 1.5, color: '#4b5563', highlightColor: '#f59e0b', dashes: [4, 3], arrows: true },
+    'doc_has_child':  { width: 1.5, color: '#4b5563', highlightColor: '#c084fc', dashes: [6, 3], arrows: true },
+    'has_memory':     { width: 1, color: '#581c87', highlightColor: '#e879f9', dashes: [3, 3], arrows: true },
+    'memory_relates': { width: 1.5, color: '#86198f', highlightColor: '#f0abfc', dashes: null, arrows: false },
+    'memory_from_task':{ width: 1, color: '#581c87', highlightColor: '#c084fc', dashes: [4, 2], arrows: true },
+    'memory_from_doc':{ width: 1, color: '#581c87', highlightColor: '#a78bfa', dashes: [2, 3], arrows: true },
+    'module_memory':  { width: 1, color: '#581c87', highlightColor: '#d946ef', dashes: [3, 2], arrows: true },
+    'memory_supersedes':{ width: 1, color: '#701a75', highlightColor: '#f472b6', dashes: [6, 2], arrows: true },
+  };
+
+  this.EDGE_DEFAULT = { width: 1, color: '#4b5563', highlightColor: '#9ca3af', dashes: null, arrows: false };
+}
+
+/**
+ * Compute node size and font size based on type and degree.
+ */
+StyleManager.prototype._calcNodeSize = function(type, degree) {
+  var rule = this.NODE_SIZE_RULES[type] || { min: 10, max: 22, baseFont: 10, maxFont: 13, scale: 1.0 };
+  var size = rule.min + rule.scale * Math.sqrt(degree || 0);
+  size = Math.max(rule.min, Math.min(size, rule.max));
+  var sizeRatio = (size - rule.min) / (rule.max - rule.min || 1);
+  var fontSize = Math.round(rule.baseFont + sizeRatio * (rule.maxFont - rule.baseFont));
+  return { size: Math.round(size), fontSize: fontSize };
+};
+
+/**
+ * Get style for a node.
+ * @param {Object} node
+ * @returns {Object} { shape, radius, bgColor, borderColor, borderWidth, fontColor, fontSize }
+ */
+StyleManager.prototype.getNodeStyle = function(node) {
+  var type = node.type || 'default';
+  var props = node.properties || {};
+  var status = props.status || 'pending';
+  var degree = node.degree || 0;
+
+  var ns = this._calcNodeSize(type, degree);
+  var shape = this.NODE_SHAPES[type] || 'circle';
+
+  // Determine colors — 从统一配置读取
+  var colors;
+  if (type === 'project' || type === 'module' || type === 'document') {
+    colors = this.NODE_COLORS[type] || this.STATUS_COLORS.pending;
+  } else if (type === 'main-task') {
+    // 主任务: 从统一配置读取状态颜色
+    var _mt = this._uniStyle ? this._uniStyle.mainTask : null;
+    colors = (_mt && _mt[status]) || (_mt && _mt.pending) || this.STATUS_COLORS[status] || this.STATUS_COLORS.pending;
+  } else {
+    // 子任务: 从统一配置读取状态颜色 (completed=亮绿色)
+    var _st = this._uniStyle ? this._uniStyle.subTask : null;
+    colors = (_st && _st[status]) || (_st && _st.pending) || this.STATUS_COLORS[status] || this.STATUS_COLORS.pending;
+  }
+
+  return {
+    shape: shape,
+    radius: ns.size,
+    bgColor: colors.bg,
+    borderColor: colors.border,
+    borderWidth: type === 'project' ? 3 : (type === 'sub-task' ? 1 : 2),
+    fontColor: colors.font,
+    fontSize: ns.fontSize,
+  };
+};
+
+/**
+ * Get style for an edge.
+ * @param {Object} edge
+ * @returns {Object} { width, color, highlightColor, dashes, arrows }
+ */
+StyleManager.prototype.getEdgeStyle = function(edge) {
+  var label = edge.label || edge._label || '';
+  return this.EDGE_STYLES[label] || this.EDGE_DEFAULT;
+};
+
+/**
+ * Apply styles to all nodes and edges (batch).
+ */
+StyleManager.prototype.applyAllStyles = function(nodes, edges) {
+  for (var i = 0; i < nodes.length; i++) {
+    var style = this.getNodeStyle(nodes[i]);
+    nodes[i]._style = style;
+    nodes[i]._radius = style.radius;
+  }
+  for (var i = 0; i < edges.length; i++) {
+    edges[i]._style = this.getEdgeStyle(edges[i]);
+  }
+};
 `;
 }
 //# sourceMappingURL=styles.js.map

package/dist/visualize/graph-canvas/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/visualize/graph-canvas/styles.ts"],"names":[],"mappings":";AAAA;;;;;;;;GAQG;;AAEH,0CA2HC;AA3HD,SAAgB,eAAe;IAC7B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHR,CAAC;AACF,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/visualize/graph-canvas/styles.ts"],"names":[],"mappings":";AAAA;;;;;;;;GAQG;;AAEH,0CAoJC;AApJD,SAAgB,eAAe;IAC7B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkJR,CAAC;AACF,CAAC"}

package/dist/visualize/graph-canvas/viewport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"viewport.d.ts","sourceRoot":"","sources":["../../../src/visualize/graph-canvas/viewport.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,wBAAgB,iBAAiB,IAAI,MAAM,CAmW1C"}
+{"version":3,"file":"viewport.d.ts","sourceRoot":"","sources":["../../../src/visualize/graph-canvas/viewport.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,wBAAgB,iBAAiB,IAAI,MAAM,CA6W1C"}

package/dist/visualize/graph-canvas/viewport.js

@@ -316,6 +316,16 @@ ViewportManager.prototype._bindEvents = function() {
     var delta = -e.deltaY;
     var factor = 1 + delta * self._zoomSpeed;
     factor = Math.max(0.5, Math.min(factor, 2)); // clamp per-event
+
+    // T11.8: Flag zooming state to skip edge rendering during rapid zoom
+    var engine = self._engine;
+    engine._isZooming = true;
+    if (engine._zoomTimer) clearTimeout(engine._zoomTimer);
+    engine._zoomTimer = setTimeout(function() {
+      engine._isZooming = false;
+      engine.markDirty(); // Redraw with edges after zoom stops
+    }, 150);
+
     self.zoom(factor, x, y);
   }, { passive: false });
 

package/dist/visualize/graph-canvas/viewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"viewport.js","sourceRoot":"","sources":["../../../src/visualize/graph-canvas/viewport.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;;AAEH,8CAmWC;AAnWD,SAAgB,iBAAiB;IAC/B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiWR,CAAC;AACF,CAAC"}
+{"version":3,"file":"viewport.js","sourceRoot":"","sources":["../../../src/visualize/graph-canvas/viewport.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;;AAEH,8CA6WC;AA7WD,SAAgB,iBAAiB;IAC/B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2WR,CAAC;AACF,CAAC"}