vb6parse 1.0.1

/**
 * VB6Parse Playground - Tree Visualization Module
 * 
 * Handles D3.js tree visualization rendering and interactions.
 * Creates an interactive visual representation of the CST.
 * 
 * TODO: Implement D3 tree layout and rendering
 * TODO: Add zoom and pan functionality
 * TODO: Implement node click interactions
 * TODO: Add layout toggle (horizontal/vertical)
 */

let svg = null;
let g = null;
let tree = null;
let root = null;
let currentLayout = 'vertical'; // 'vertical' or 'horizontal'
let zoom = null;

// Tree configuration
const config = {
    nodeRadius: 6,
    verticalSpacing: 60,
    horizontalSpacing: 120,
    transitionDuration: 750,
    maxLabelLength: 20
};

/**
 * Initialize the tree visualization
 * @param {string} containerId - Container element ID
 */
export function initTreeViz(containerId) {
    const container = document.getElementById(containerId);
    if (!container) {
        console.error(`Container ${containerId} not found`);
        return;
    }

    // Clear container
    container.innerHTML = '';

    // Create SVG
    const width = container.clientWidth;
    const height = container.clientHeight;

    svg = d3.select(container)
        .append('svg')
        .attr('id', 'tree-viz-svg')
        .attr('width', width)
        .attr('height', height);

    // Create zoom behavior
    zoom = d3.zoom()
        .scaleExtent([0.1, 3])
        .on('zoom', (event) => {
            g.attr('transform', event.transform);
        });

    svg.call(zoom);

    // Create main group for tree
    g = svg.append('g')
        .attr('class', 'tree-group')
        .attr('transform', `translate(${width / 2}, 50)`);

    console.log('✅ Tree visualization initialized');
}

/**
 * Render CST as a tree visualization
 * @param {CstNode} cst - Root CST node
 * 
 * TODO: Implement actual D3 tree rendering
 * This is a skeleton that needs D3.js implementation
 */
export function renderTree(cst) {
    if (!svg || !g) {
        console.error('Tree visualization not initialized');
        return;
    }

    console.log('🔧 TODO: Render D3 tree from CST:', cst);

    // TODO: Convert CST to D3 hierarchy
    // const hierarchy = d3.hierarchy(convertCstToD3Format(cst));
    
    // TODO: Create tree layout
    // const treeLayout = createTreeLayout();
    // treeLayout(hierarchy);
    
    // TODO: Render nodes and links
    // renderNodes(hierarchy.descendants());
    // renderLinks(hierarchy.links());

    // Placeholder visualization
    renderPlaceholder();
}

/**
 * Convert CST node to D3 hierarchy format
 * @param {CstNode} node - CST node
 * @returns {object} D3 hierarchy data
 * 
 * TODO: Implement full conversion
 */
function convertCstToD3Format(node) {
    return {
        name: node.type,
        value: node.value,
        range: node.range,
        children: node.children ? node.children.map(convertCstToD3Format) : undefined
    };
}

/**
 * Create tree layout based on current orientation
 * @returns {d3.tree} D3 tree layout
 * 
 * TODO: Implement layout configuration
 */
function createTreeLayout() {
    const container = document.getElementById('tree-viz-container');
    const width = container.clientWidth;
    const height = container.clientHeight;

    if (currentLayout === 'vertical') {
        return d3.tree()
            .size([width - 100, height - 100])
            .separation((a, b) => a.parent === b.parent ? 1 : 2);
    } else {
        return d3.tree()
            .size([height - 100, width - 100])
            .separation((a, b) => a.parent === b.parent ? 1 : 2);
    }
}

/**
 * Render tree nodes
 * @param {Array} nodes - D3 hierarchy nodes
 * 
 * TODO: Implement node rendering with D3
 */
function renderNodes(nodes) {
    // TODO: Implement D3 node rendering
    // - Bind data
    // - Create node groups
    // - Add circles
    // - Add text labels
    // - Add click handlers
    // - Add hover effects
}

/**
 * Render tree links (edges)
 * @param {Array} links - D3 hierarchy links
 * 
 * TODO: Implement link rendering with D3
 */
function renderLinks(links) {
    // TODO: Implement D3 link rendering
    // - Bind data
    // - Create paths
    // - Use curved or straight lines
    // - Add animations
}

/**
 * Render placeholder when no tree data
 */
function renderPlaceholder() {
    g.selectAll('*').remove();
    
    g.append('text')
        .attr('text-anchor', 'middle')
        .attr('fill', 'var(--placeholder-color)')
        .attr('font-size', '18px')
        .attr('y', 100)
        .text('🌳 Tree visualization coming soon!');
    
    g.append('text')
        .attr('text-anchor', 'middle')
        .attr('fill', 'var(--placeholder-color)')
        .attr('font-size', '14px')
        .attr('y', 130)
        .text('This will show an interactive D3.js tree of the parsed code');
}

/**
 * Toggle tree layout between vertical and horizontal
 */
export function toggleLayout() {
    currentLayout = currentLayout === 'vertical' ? 'horizontal' : 'vertical';
    
    // Update UI icon
    const icon = document.getElementById('layout-icon');
    if (icon) {
        icon.textContent = currentLayout === 'vertical' ? '↔️' : '↕️';
    }

    // Re-render tree with new layout
    if (root) {
        renderTree(root);
    }

    console.log(`🔄 Switched to ${currentLayout} layout`);
}

/**
 * Fit tree to screen
 */
export function fitToScreen() {
    if (!svg || !g) return;

    // TODO: Calculate bounding box and zoom to fit
    const bounds = g.node().getBBox();
    const parent = svg.node().parentElement;
    const fullWidth = parent.clientWidth;
    const fullHeight = parent.clientHeight;
    const width = bounds.width;
    const height = bounds.height;
    const midX = bounds.x + width / 2;
    const midY = bounds.y + height / 2;

    if (width === 0 || height === 0) return;

    // Calculate scale to fit
    const scale = 0.9 / Math.max(width / fullWidth, height / fullHeight);
    const translate = [
        fullWidth / 2 - scale * midX,
        fullHeight / 2 - scale * midY
    ];

    // Apply transform with animation
    svg.transition()
        .duration(750)
        .call(zoom.transform, d3.zoomIdentity
            .translate(translate[0], translate[1])
            .scale(scale));

    console.log('📐 Fitted tree to screen');
}

/**
 * Reset zoom to default
 */
export function resetZoom() {
    if (!svg || !zoom) return;

    const container = document.getElementById('tree-viz-container');
    const width = container.clientWidth;
    const height = container.clientHeight;

    svg.transition()
        .duration(750)
        .call(zoom.transform, d3.zoomIdentity
            .translate(width / 2, 50)
            .scale(1));

    console.log('🔄 Reset zoom');
}

/**
 * Handle node click
 * @param {object} nodeData - D3 node data
 * 
 * TODO: Implement node selection and details display
 */
function handleNodeClick(nodeData) {
    console.log('Node clicked:', nodeData);
    
    // TODO: Show node details in sidebar
    // TODO: Highlight corresponding code in editor
    // TODO: Highlight node visually
}

/**
 * Show node details in sidebar
 * @param {object} nodeData - D3 node data
 * 
 * TODO: Implement details panel
 */
function showNodeDetails(nodeData) {
    const detailsPanel = document.getElementById('tree-node-details');
    const detailsContent = document.getElementById('node-details-content');
    
    if (!detailsPanel || !detailsContent) return;

    detailsContent.innerHTML = `
        <p><strong>Type:</strong> ${nodeData.name}</p>
        ${nodeData.value ? `<p><strong>Value:</strong> ${nodeData.value}</p>` : ''}
        ${nodeData.range ? `<p><strong>Range:</strong> [${nodeData.range[0]}..${nodeData.range[1]}]</p>` : ''}
        <p><strong>Depth:</strong> ${nodeData.depth}</p>
        <p><strong>Children:</strong> ${nodeData.children ? nodeData.children.length : 0}</p>
    `;

    detailsPanel.classList.remove('hidden');
}

/**
 * Clear tree visualization
 */
export function clearTree() {
    if (!g) return;
    
    g.selectAll('*').remove();
    root = null;
    
    renderPlaceholder();
}

/**
 * Get tree statistics
 * @param {CstNode} cst - Root CST node
 * @returns {object} Tree statistics
 */
export function getTreeStats(cst) {
    let nodeCount = 0;
    let maxDepth = 0;

    function traverse(node, depth) {
        nodeCount++;
        maxDepth = Math.max(maxDepth, depth);

        if (node.children) {
            node.children.forEach(child => traverse(child, depth + 1));
        }
    }

    traverse(cst, 0);

    return {
        nodeCount,
        maxDepth
    };
}

/**
 * Export tree as SVG
 * TODO: Implement SVG export
 */
export function exportAsSvg() {
    console.log('🔧 TODO: Export tree as SVG');
    // Get SVG element and serialize
    // Offer download to user
}

/**
 * Export tree as PNG
 * TODO: Implement PNG export using html2canvas or similar
 */
export function exportAsPng() {
    console.log('🔧 TODO: Export tree as PNG');
    // Convert SVG to PNG
    // Offer download to user
}

/**
 * TODO: D3.js Implementation Checklist
 * 
 * 1. Tree Layout:
 *    - Implement d3.hierarchy() conversion
 *    - Configure d3.tree() layout
 *    - Handle vertical and horizontal layouts
 *    - Optimize for large trees (>500 nodes)
 * 
 * 2. Nodes:
 *    - Draw circles with appropriate colors
 *    - Add text labels (truncated if needed)
 *    - Implement hover effects
 *    - Add click handlers
 *    - Show collapse/expand indicators
 * 
 * 3. Links:
 *    - Use curved paths (d3.linkVertical/linkHorizontal)
 *    - Add hover effects
 *    - Color code by node type
 * 
 * 4. Interactions:
 *    - Zoom and pan
 *    - Node selection
 *    - Collapse/expand nodes
 *    - Tooltip on hover
 *    - Highlight path from root to node
 * 
 * 5. Performance:
 *    - Virtualization for large trees
 *    - Lazy loading of subtrees
 *    - Disable animations for >500 nodes
 *    - Use canvas for >1000 nodes
 * 
 * 6. Styling:
 *    - Node colors by type (statement, expression, literal, keyword)
 *    - Highlight selected nodes
 *    - Theme support (light/dark)
 *    - Responsive sizing
 * 
 * 7. Export:
 *    - SVG download
 *    - PNG download
 *    - JSON export of tree data
 */

export default {
    initTreeViz,
    renderTree,
    toggleLayout,
    fitToScreen,
    resetZoom,
    clearTree,
    getTreeStats,
    exportAsSvg,
    exportAsPng
};