New hierarchical component, used for InstancesDebugger.py
This commit is contained in:
99
src/myfasthtml/assets/core/hierarchical_canvas_graph.css
Normal file
99
src/myfasthtml/assets/core/hierarchical_canvas_graph.css
Normal file
@@ -0,0 +1,99 @@
|
||||
/**
|
||||
* Hierarchical Canvas Graph Styles
|
||||
*
|
||||
* Styles for the canvas-based hierarchical graph visualization control.
|
||||
*/
|
||||
|
||||
/* Main control wrapper */
|
||||
.mf-hierarchical-canvas-graph {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Container that holds the canvas */
|
||||
.mf-hcg-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #0d1117;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Toggle button positioned absolutely within container */
|
||||
.mf-hcg-container button {
|
||||
font-family: inherit;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Canvas element (sized by JavaScript) */
|
||||
.mf-hcg-container canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.mf-hcg-container canvas:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* Optional: toolbar/controls overlay (if needed in future) */
|
||||
.mf-hcg-toolbar {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
background: rgba(22, 27, 34, 0.92);
|
||||
border: 1px solid #30363d;
|
||||
border-radius: 8px;
|
||||
padding: 6px;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Layout toggle button */
|
||||
.mf-hcg-toggle-btn {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: rgba(22, 27, 34, 0.92);
|
||||
border: 1px solid #30363d;
|
||||
border-radius: 6px;
|
||||
color: #7d8590;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
backdrop-filter: blur(4px);
|
||||
transition: color 0.15s, background 0.15s;
|
||||
z-index: 10;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.mf-hcg-toggle-btn:hover {
|
||||
color: #e6edf3;
|
||||
background: #1c2128;
|
||||
}
|
||||
|
||||
/* Optional: loading state */
|
||||
.mf-hcg-container.loading::after {
|
||||
content: 'Loading...';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #7d8590;
|
||||
font-size: 14px;
|
||||
font-family: system-ui, sans-serif;
|
||||
}
|
||||
617
src/myfasthtml/assets/core/hierarchical_canvas_graph.js
Normal file
617
src/myfasthtml/assets/core/hierarchical_canvas_graph.js
Normal file
@@ -0,0 +1,617 @@
|
||||
/**
|
||||
* Hierarchical Canvas Graph
|
||||
*
|
||||
* Canvas-based visualization for hierarchical graph data with expand/collapse.
|
||||
* Features: Reingold-Tilford layout, zoom/pan, search filter, dot grid background.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Initialize hierarchical canvas graph visualization.
|
||||
*
|
||||
* Creates an interactive canvas-based hierarchical graph with the following features:
|
||||
* - Reingold-Tilford tree layout algorithm
|
||||
* - Expand/collapse nodes with children
|
||||
* - Zoom (mouse wheel) and pan (drag) controls
|
||||
* - Layout mode toggle (horizontal/vertical)
|
||||
* - Search/filter nodes by label or kind
|
||||
* - Click events for node selection and toggle
|
||||
* - Stable zoom on container resize
|
||||
* - Dot grid background (Figma-style)
|
||||
*
|
||||
* @param {string} containerId - The ID of the container div element
|
||||
* @param {Object} options - Configuration options
|
||||
* @param {Array<Object>} options.nodes - Array of node objects with properties:
|
||||
* @param {string} options.nodes[].id - Unique node identifier
|
||||
* @param {string} options.nodes[].label - Display label
|
||||
* @param {string} options.nodes[].type - Node type (root|single|unique|multiple)
|
||||
* @param {string} options.nodes[].kind - Node kind/class name
|
||||
* @param {Array<Object>} options.edges - Array of edge objects with properties:
|
||||
* @param {string} options.edges[].from - Source node ID
|
||||
* @param {string} options.edges[].to - Target node ID
|
||||
* @param {Array<string>} [options.collapsed=[]] - Array of initially collapsed node IDs
|
||||
* @param {Object} [options.events={}] - Event handlers mapping event names to HTMX options:
|
||||
* @param {Object} [options.events.select_node] - Handler for node selection (click on node)
|
||||
* @param {Object} [options.events.toggle_node] - Handler for expand/collapse toggle
|
||||
*
|
||||
* @returns {void}
|
||||
*
|
||||
* @example
|
||||
* initHierarchicalCanvasGraph('graph-container', {
|
||||
* nodes: [
|
||||
* { id: 'root', label: 'Root', type: 'root', kind: 'RootInstance' },
|
||||
* { id: 'child', label: 'Child', type: 'single', kind: 'MyComponent' }
|
||||
* ],
|
||||
* edges: [{ from: 'root', to: 'child' }],
|
||||
* collapsed: [],
|
||||
* events: {
|
||||
* select_node: { url: '/api/select', target: '#panel', swap: 'innerHTML' }
|
||||
* }
|
||||
* });
|
||||
*/
|
||||
function initHierarchicalCanvasGraph(containerId, options = {}) {
|
||||
const container = document.getElementById(containerId);
|
||||
if (!container) {
|
||||
console.error(`HierarchicalCanvasGraph: Container "${containerId}" not found`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Prevent double initialization
|
||||
if (container._hcgInitialized) {
|
||||
console.warn(`HierarchicalCanvasGraph: Container "${containerId}" already initialized`);
|
||||
return;
|
||||
}
|
||||
container._hcgInitialized = true;
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// Configuration & Constants
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
const NODES = options.nodes || [];
|
||||
const EDGES = options.edges || [];
|
||||
const EVENTS = options.events || {};
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// Visual Constants
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
const NODE_W = 178; // Node width in pixels
|
||||
const NODE_H = 36; // Node height in pixels
|
||||
const CHEV_ZONE = 26; // Toggle button hit area width (rightmost px of node)
|
||||
|
||||
const TOGGLE_BTN_SIZE = 32; // Toggle button dimensions
|
||||
const TOGGLE_BTN_POS = 12; // Toggle button offset from corner
|
||||
|
||||
const FIT_PADDING = 48; // Padding around graph when fitting
|
||||
const FIT_MAX_SCALE = 1.5; // Maximum zoom level when fitting
|
||||
|
||||
const DOT_GRID_SPACING = 24; // Dot grid spacing in pixels
|
||||
const DOT_GRID_RADIUS = 0.9; // Dot radius in pixels
|
||||
|
||||
const ZOOM_FACTOR = 1.12; // Zoom multiplier per wheel tick
|
||||
const ZOOM_MIN = 0.12; // Minimum zoom level
|
||||
const ZOOM_MAX = 3.5; // Maximum zoom level
|
||||
|
||||
// Spacing constants (adjusted per mode)
|
||||
const HORIZONTAL_MODE_SPACING = {
|
||||
levelGap: 84, // vertical distance between parent-child levels
|
||||
siblingGap: 22 // gap between siblings (in addition to NODE_W)
|
||||
};
|
||||
|
||||
const VERTICAL_MODE_SPACING = {
|
||||
levelGap: 220, // horizontal distance between parent-child (after swap)
|
||||
siblingGap: 14 // gap between siblings (in addition to NODE_H)
|
||||
};
|
||||
|
||||
function getSpacing() {
|
||||
return layoutMode === 'vertical' ? VERTICAL_MODE_SPACING : HORIZONTAL_MODE_SPACING;
|
||||
}
|
||||
|
||||
const TYPE_COLOR = {
|
||||
root: '#2563eb',
|
||||
single: '#7c3aed',
|
||||
multiple: '#047857',
|
||||
unique: '#b45309',
|
||||
};
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// Graph structure
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
const childMap = {};
|
||||
const hasParentSet = new Set();
|
||||
|
||||
for (const n of NODES) childMap[n.id] = [];
|
||||
for (const e of EDGES) {
|
||||
(childMap[e.from] = childMap[e.from] || []).push(e.to);
|
||||
hasParentSet.add(e.to);
|
||||
}
|
||||
|
||||
function hasChildren(id) {
|
||||
return (childMap[id] || []).length > 0;
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// State
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
const collapsed = new Set(options.collapsed || []);
|
||||
let selectedId = null;
|
||||
let filterQuery = '';
|
||||
let transform = { x: 0, y: 0, scale: 1 };
|
||||
let pos = {};
|
||||
let layoutMode = 'horizontal'; // 'horizontal' | 'vertical'
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// Visibility & Layout
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
function getHiddenSet() {
|
||||
const hidden = new Set();
|
||||
function addDesc(id) {
|
||||
for (const c of childMap[id] || []) {
|
||||
if (!hidden.has(c)) { hidden.add(c); addDesc(c); }
|
||||
}
|
||||
}
|
||||
for (const id of collapsed) addDesc(id);
|
||||
return hidden;
|
||||
}
|
||||
|
||||
function visNodes() {
|
||||
const h = getHiddenSet();
|
||||
return NODES.filter(n => !h.has(n.id));
|
||||
}
|
||||
|
||||
function visEdges(vn) {
|
||||
const vi = new Set(vn.map(n => n.id));
|
||||
return EDGES.filter(e => vi.has(e.from) && vi.has(e.to));
|
||||
}
|
||||
|
||||
/**
|
||||
* Compute hierarchical layout using Reingold-Tilford algorithm (simplified)
|
||||
*/
|
||||
function computeLayout(nodes, edges) {
|
||||
const spacing = getSpacing();
|
||||
const cm = {};
|
||||
const hp = new Set();
|
||||
for (const n of nodes) cm[n.id] = [];
|
||||
for (const e of edges) { (cm[e.from] = cm[e.from] || []).push(e.to); hp.add(e.to); }
|
||||
|
||||
const roots = nodes.filter(n => !hp.has(n.id)).map(n => n.id);
|
||||
|
||||
// Assign depth via BFS
|
||||
const depth = {};
|
||||
const q = roots.map(r => [r, 0]);
|
||||
while (q.length) {
|
||||
const [id, d] = q.shift();
|
||||
if (depth[id] !== undefined) continue;
|
||||
depth[id] = d;
|
||||
for (const c of cm[id] || []) q.push([c, d + 1]);
|
||||
}
|
||||
|
||||
// Assign positions
|
||||
const positions = {};
|
||||
for (const n of nodes) positions[n.id] = { x: 0, y: (depth[n.id] || 0) * spacing.levelGap };
|
||||
|
||||
// Sibling stride: in vertical mode, use NODE_H (height); in horizontal mode, use NODE_W (width)
|
||||
const siblingStride = layoutMode === 'vertical'
|
||||
? NODE_H + spacing.siblingGap // Vertical: nodes stack by height
|
||||
: NODE_W + spacing.siblingGap; // Horizontal: nodes spread by width
|
||||
|
||||
// DFS to assign x (sibling spacing)
|
||||
let slot = 0;
|
||||
function dfs(id) {
|
||||
const children = cm[id] || [];
|
||||
if (children.length === 0) { positions[id].x = slot++ * siblingStride; return; }
|
||||
for (const c of children) dfs(c);
|
||||
const xs = children.map(c => positions[c].x);
|
||||
positions[id].x = (Math.min(...xs) + Math.max(...xs)) / 2;
|
||||
}
|
||||
for (const r of roots) dfs(r);
|
||||
|
||||
return positions;
|
||||
}
|
||||
|
||||
function recomputeLayout() {
|
||||
const vn = visNodes();
|
||||
pos = computeLayout(vn, visEdges(vn));
|
||||
}
|
||||
|
||||
/**
|
||||
* Transform position based on current layout mode
|
||||
* In vertical mode: swap x and y so tree grows left-to-right instead of top-to-bottom
|
||||
* @param {Object} p - Position {x, y}
|
||||
* @returns {Object} - Transformed position
|
||||
*/
|
||||
function transformPos(p) {
|
||||
if (layoutMode === 'vertical') {
|
||||
// Swap x and y: horizontal spread becomes vertical, depth becomes horizontal
|
||||
return { x: p.y, y: p.x };
|
||||
}
|
||||
return p;
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// Canvas Setup
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.id = `${containerId}_canvas`;
|
||||
canvas.style.cssText = 'display:block; width:100%; height:100%; cursor:grab;';
|
||||
container.appendChild(canvas);
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// Layout toggle button overlay
|
||||
const toggleBtn = document.createElement('button');
|
||||
toggleBtn.className = 'mf-hcg-toggle-btn';
|
||||
toggleBtn.innerHTML = '⇄';
|
||||
toggleBtn.title = 'Toggle layout orientation';
|
||||
toggleBtn.setAttribute('aria-label', 'Toggle between horizontal and vertical layout');
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
layoutMode = layoutMode === 'horizontal' ? 'vertical' : 'horizontal';
|
||||
toggleBtn.innerHTML = layoutMode === 'horizontal' ? '⇄' : '⇅';
|
||||
toggleBtn.title = `Switch to ${layoutMode === 'horizontal' ? 'vertical' : 'horizontal'} layout`;
|
||||
toggleBtn.setAttribute('aria-label', `Switch to ${layoutMode === 'horizontal' ? 'vertical' : 'horizontal'} layout`);
|
||||
// Recompute layout with new spacing
|
||||
recomputeLayout();
|
||||
fitAll();
|
||||
});
|
||||
container.appendChild(toggleBtn);
|
||||
|
||||
function resize() {
|
||||
canvas.width = container.clientWidth;
|
||||
canvas.height = container.clientHeight;
|
||||
draw();
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// Drawing
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
function drawDotGrid() {
|
||||
const ox = ((transform.x % DOT_GRID_SPACING) + DOT_GRID_SPACING) % DOT_GRID_SPACING;
|
||||
const oy = ((transform.y % DOT_GRID_SPACING) + DOT_GRID_SPACING) % DOT_GRID_SPACING;
|
||||
ctx.fillStyle = 'rgba(125,133,144,0.12)';
|
||||
for (let x = ox - DOT_GRID_SPACING; x < canvas.width + DOT_GRID_SPACING; x += DOT_GRID_SPACING) {
|
||||
for (let y = oy - DOT_GRID_SPACING; y < canvas.height + DOT_GRID_SPACING; y += DOT_GRID_SPACING) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, DOT_GRID_RADIUS, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
drawDotGrid();
|
||||
|
||||
const q = filterQuery.trim().toLowerCase();
|
||||
const matchIds = q
|
||||
? new Set(NODES.filter(n =>
|
||||
n.label.toLowerCase().includes(q) || n.kind.toLowerCase().includes(q)
|
||||
).map(n => n.id))
|
||||
: null;
|
||||
|
||||
const vn = visNodes();
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(transform.x, transform.y);
|
||||
ctx.scale(transform.scale, transform.scale);
|
||||
|
||||
// Edges
|
||||
for (const edge of EDGES) {
|
||||
const p1 = pos[edge.from], p2 = pos[edge.to];
|
||||
if (!p1 || !p2) continue;
|
||||
const dimmed = matchIds && !matchIds.has(edge.from) && !matchIds.has(edge.to);
|
||||
|
||||
const tp1 = transformPos(p1);
|
||||
const tp2 = transformPos(p2);
|
||||
|
||||
let x1, y1, x2, y2, cx, cy;
|
||||
if (layoutMode === 'horizontal') {
|
||||
// Horizontal: edges go from bottom of parent to top of child
|
||||
x1 = tp1.x; y1 = tp1.y + NODE_H / 2;
|
||||
x2 = tp2.x; y2 = tp2.y - NODE_H / 2;
|
||||
cy = (y1 + y2) / 2;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x1, y1);
|
||||
ctx.bezierCurveTo(x1, cy, x2, cy, x2, y2);
|
||||
} else {
|
||||
// Vertical: edges go from right of parent to left of child
|
||||
x1 = tp1.x + NODE_W / 2; y1 = tp1.y;
|
||||
x2 = tp2.x - NODE_W / 2; y2 = tp2.y;
|
||||
cx = (x1 + x2) / 2;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x1, y1);
|
||||
ctx.bezierCurveTo(cx, y1, cx, y2, x2, y2);
|
||||
}
|
||||
|
||||
ctx.strokeStyle = dimmed ? 'rgba(48,54,61,0.25)' : 'rgba(48,54,61,0.9)';
|
||||
ctx.lineWidth = 1.5;
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Nodes
|
||||
for (const node of vn) {
|
||||
const p = pos[node.id];
|
||||
if (!p) continue;
|
||||
const tp = transformPos(p);
|
||||
const isSel = node.id === selectedId;
|
||||
const isMatch = matchIds !== null && matchIds.has(node.id);
|
||||
const isDim = matchIds !== null && !matchIds.has(node.id);
|
||||
drawNode(node, tp.x, tp.y, isSel, isMatch, isDim);
|
||||
}
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function drawNode(node, cx, cy, isSel, isMatch, isDim) {
|
||||
// Nodes always keep same dimensions and horizontal text
|
||||
const hw = NODE_W / 2, hh = NODE_H / 2, r = 6;
|
||||
const x = cx - hw, y = cy - hh;
|
||||
const color = TYPE_COLOR[node.type] || '#334155';
|
||||
|
||||
ctx.globalAlpha = isDim ? 0.15 : 1;
|
||||
|
||||
// Glow for selected
|
||||
if (isSel) { ctx.shadowColor = '#f0883e'; ctx.shadowBlur = 16; }
|
||||
|
||||
// Background
|
||||
ctx.beginPath();
|
||||
ctx.roundRect(x, y, NODE_W, NODE_H, r);
|
||||
ctx.fillStyle = isSel ? '#2a1f0f' : '#1c2128';
|
||||
ctx.fill();
|
||||
ctx.shadowBlur = 0;
|
||||
|
||||
// Left color strip (always on left, regardless of mode)
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.roundRect(x, y, NODE_W, NODE_H, r);
|
||||
ctx.clip();
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillRect(x, y, 4, NODE_H);
|
||||
ctx.restore();
|
||||
|
||||
// Border
|
||||
ctx.beginPath();
|
||||
ctx.roundRect(x, y, NODE_W, NODE_H, r);
|
||||
if (isSel) {
|
||||
ctx.strokeStyle = '#f0883e';
|
||||
ctx.lineWidth = 1.5;
|
||||
} else if (isMatch) {
|
||||
ctx.strokeStyle = '#e3b341';
|
||||
ctx.lineWidth = 1.5;
|
||||
} else {
|
||||
ctx.strokeStyle = `${color}44`;
|
||||
ctx.lineWidth = 1;
|
||||
}
|
||||
ctx.stroke();
|
||||
|
||||
// Kind badge
|
||||
const kindText = node.kind;
|
||||
ctx.font = '9px system-ui';
|
||||
const rawW = ctx.measureText(kindText).width;
|
||||
const badgeW = Math.min(rawW + 8, 66);
|
||||
const chevSpace = hasChildren(node.id) ? CHEV_ZONE : 8;
|
||||
const badgeX = x + NODE_W - chevSpace - badgeW - 2;
|
||||
const badgeY = y + (NODE_H - 14) / 2;
|
||||
ctx.beginPath();
|
||||
ctx.roundRect(badgeX, badgeY, badgeW, 14, 3);
|
||||
ctx.fillStyle = `${color}22`;
|
||||
ctx.fill();
|
||||
ctx.fillStyle = color;
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
let kLabel = kindText;
|
||||
while (kLabel.length > 3 && ctx.measureText(kLabel).width > badgeW - 6) kLabel = kLabel.slice(0, -1);
|
||||
if (kLabel !== kindText) kLabel += '…';
|
||||
ctx.fillText(kLabel, badgeX + badgeW / 2, badgeY + 7);
|
||||
|
||||
// Label (always horizontal)
|
||||
ctx.font = `${isSel ? 500 : 400} 12px monospace`;
|
||||
ctx.fillStyle = isDim ? 'rgba(125,133,144,0.5)' : '#e6edf3';
|
||||
ctx.textAlign = 'left';
|
||||
ctx.textBaseline = 'middle';
|
||||
const labelX = x + 12;
|
||||
const labelMaxW = badgeX - labelX - 6;
|
||||
let label = node.label;
|
||||
while (label.length > 3 && ctx.measureText(label).width > labelMaxW) label = label.slice(0, -1);
|
||||
if (label !== node.label) label += '…';
|
||||
ctx.fillText(label, labelX, cy);
|
||||
|
||||
// Chevron toggle (same position in both modes)
|
||||
if (hasChildren(node.id)) {
|
||||
const chevX = x + NODE_W - CHEV_ZONE / 2 - 1;
|
||||
const isCollapsed = collapsed.has(node.id);
|
||||
drawChevron(ctx, chevX, cy, !isCollapsed, color);
|
||||
}
|
||||
|
||||
ctx.globalAlpha = 1;
|
||||
}
|
||||
|
||||
function drawChevron(ctx, cx, cy, pointDown, color) {
|
||||
const s = 4;
|
||||
ctx.strokeStyle = color;
|
||||
ctx.lineWidth = 1.5;
|
||||
ctx.lineCap = 'round';
|
||||
ctx.lineJoin = 'round';
|
||||
ctx.beginPath();
|
||||
// Chevron always drawn the same way (down or right)
|
||||
if (pointDown) {
|
||||
ctx.moveTo(cx - s, cy - s * 0.5);
|
||||
ctx.lineTo(cx, cy + s * 0.5);
|
||||
ctx.lineTo(cx + s, cy - s * 0.5);
|
||||
} else {
|
||||
ctx.moveTo(cx - s * 0.5, cy - s);
|
||||
ctx.lineTo(cx + s * 0.5, cy);
|
||||
ctx.lineTo(cx - s * 0.5, cy + s);
|
||||
}
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// Fit all
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
function fitAll() {
|
||||
const vn = visNodes();
|
||||
if (vn.length === 0) return;
|
||||
|
||||
// Get transformed positions
|
||||
const tps = vn.map(n => pos[n.id] ? transformPos(pos[n.id]) : null).filter(p => p !== null);
|
||||
if (tps.length === 0) return;
|
||||
|
||||
const xs = tps.map(p => p.x);
|
||||
const ys = tps.map(p => p.y);
|
||||
const minX = Math.min(...xs) - NODE_W / 2 - FIT_PADDING;
|
||||
const maxX = Math.max(...xs) + NODE_W / 2 + FIT_PADDING;
|
||||
const minY = Math.min(...ys) - NODE_H / 2 - FIT_PADDING;
|
||||
const maxY = Math.max(...ys) + NODE_H / 2 + FIT_PADDING;
|
||||
const scale = Math.min(canvas.width / (maxX - minX), canvas.height / (maxY - minY), FIT_MAX_SCALE);
|
||||
transform.scale = scale;
|
||||
transform.x = (canvas.width - (minX + maxX) * scale) / 2;
|
||||
transform.y = (canvas.height - (minY + maxY) * scale) / 2;
|
||||
draw();
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// Hit testing
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
function hitTest(sx, sy) {
|
||||
const wx = (sx - transform.x) / transform.scale;
|
||||
const wy = (sy - transform.y) / transform.scale;
|
||||
const vn = visNodes();
|
||||
|
||||
for (let i = vn.length - 1; i >= 0; i--) {
|
||||
const n = vn[i];
|
||||
const p = pos[n.id];
|
||||
if (!p) continue;
|
||||
const tp = transformPos(p);
|
||||
|
||||
// Nodes keep same dimensions in both modes
|
||||
if (Math.abs(wx - tp.x) <= NODE_W / 2 && Math.abs(wy - tp.y) <= NODE_H / 2) {
|
||||
// Toggle zone always on the right side of node
|
||||
const isToggle = hasChildren(n.id) && wx >= tp.x + NODE_W / 2 - CHEV_ZONE;
|
||||
return { node: n, isToggle };
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// Event posting to server
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
function postEvent(eventName, eventData) {
|
||||
const handler = EVENTS[eventName];
|
||||
if (!handler || !handler.url) {
|
||||
console.warn(`HierarchicalCanvasGraph: No handler for event "${eventName}"`);
|
||||
return;
|
||||
}
|
||||
|
||||
htmx.ajax('POST', handler.url, {
|
||||
values: { event_data: JSON.stringify(eventData) },
|
||||
target: handler.target || 'body',
|
||||
swap: handler.swap || 'none'
|
||||
});
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// Interaction
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
let isPanning = false;
|
||||
let panOrigin = { x: 0, y: 0 };
|
||||
let tfAtStart = null;
|
||||
let didMove = false;
|
||||
|
||||
canvas.addEventListener('mousedown', e => {
|
||||
isPanning = true; didMove = false;
|
||||
panOrigin = { x: e.clientX, y: e.clientY };
|
||||
tfAtStart = { ...transform };
|
||||
canvas.style.cursor = 'grabbing';
|
||||
});
|
||||
|
||||
window.addEventListener('mousemove', e => {
|
||||
if (!isPanning) return;
|
||||
const dx = e.clientX - panOrigin.x;
|
||||
const dy = e.clientY - panOrigin.y;
|
||||
if (Math.abs(dx) > 3 || Math.abs(dy) > 3) didMove = true;
|
||||
transform.x = tfAtStart.x + dx;
|
||||
transform.y = tfAtStart.y + dy;
|
||||
draw();
|
||||
});
|
||||
|
||||
window.addEventListener('mouseup', e => {
|
||||
if (!isPanning) return;
|
||||
isPanning = false;
|
||||
canvas.style.cursor = 'grab';
|
||||
|
||||
if (!didMove) {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const hit = hitTest(e.clientX - rect.left, e.clientY - rect.top);
|
||||
if (hit) {
|
||||
if (hit.isToggle) {
|
||||
// Toggle collapse
|
||||
if (collapsed.has(hit.node.id)) collapsed.delete(hit.node.id);
|
||||
else collapsed.add(hit.node.id);
|
||||
recomputeLayout();
|
||||
|
||||
// Post toggle_node event
|
||||
postEvent('toggle_node', {
|
||||
node_id: hit.node.id,
|
||||
collapsed: collapsed.has(hit.node.id)
|
||||
});
|
||||
|
||||
// Clear selection if node is now hidden
|
||||
if (selectedId && !visNodes().find(n => n.id === selectedId)) {
|
||||
selectedId = null;
|
||||
}
|
||||
} else {
|
||||
selectedId = hit.node.id;
|
||||
|
||||
// Post select_node event
|
||||
postEvent('select_node', {
|
||||
node_id: hit.node.id,
|
||||
label: hit.node.label,
|
||||
type: hit.node.type,
|
||||
kind: hit.node.kind
|
||||
});
|
||||
}
|
||||
} else {
|
||||
selectedId = null;
|
||||
}
|
||||
draw();
|
||||
}
|
||||
});
|
||||
|
||||
canvas.addEventListener('wheel', e => {
|
||||
e.preventDefault();
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const mx = e.clientX - rect.left;
|
||||
const my = e.clientY - rect.top;
|
||||
const f = e.deltaY < 0 ? ZOOM_FACTOR : 1 / ZOOM_FACTOR;
|
||||
const ns = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, transform.scale * f));
|
||||
transform.x = mx - (mx - transform.x) * (ns / transform.scale);
|
||||
transform.y = my - (my - transform.y) * (ns / transform.scale);
|
||||
transform.scale = ns;
|
||||
draw();
|
||||
}, { passive: false });
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// Resize observer (stable zoom on resize)
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
new ResizeObserver(resize).observe(container);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// Public API (attached to container for potential external access)
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
container._hcgAPI = {
|
||||
fitAll,
|
||||
setFilter: (query) => { filterQuery = query; draw(); },
|
||||
expandAll: () => { collapsed.clear(); recomputeLayout(); draw(); },
|
||||
collapseAll: () => {
|
||||
for (const n of NODES) if (hasChildren(n.id)) collapsed.add(n.id);
|
||||
if (selectedId && !visNodes().find(n => n.id === selectedId)) selectedId = null;
|
||||
recomputeLayout(); draw();
|
||||
},
|
||||
redraw: draw
|
||||
};
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// Init
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
recomputeLayout();
|
||||
resize();
|
||||
setTimeout(fitAll, 30);
|
||||
}
|
||||
Reference in New Issue
Block a user