Is there any way to save state of wunderbaum? #104

gioisco · 2024-09-17T14:41:01Z

gioisco
Sep 17, 2024

What is the best way to cache the state of wunderbaum (nodes selected, lazy nodes already loaded) to allow it to survive a page refresh?

mar10 · 2024-09-17T19:14:45Z

mar10
Sep 17, 2024
Maintainer

For reference:
persistence is one of the few features that was not ported from Fancytree ext-persist (source)

1 reply

GordonJones Sep 11, 2025

Can I suggest that pouchdb (https://github.com/pouchdb) might be a good fit for wunderbaum persistence. This offline first, nosql json database uses local storage to keep data safe and up to date. Wunderbaum doesnt quite fit as it stands, but my intuition says it could offer real benefits.

gioisco · 2024-09-17T22:24:17Z

gioisco
Sep 17, 2024
Author

Oh no. Maybe I should use Fancytree for this feature :(

0 replies

jtraulle · 2025-08-03T16:43:40Z

jtraulle
Aug 3, 2025

Something that can be done now (don't know if that was already the case when OP opened that discussion) is using

e.tree.getState({"expandedKeys": true, "selectedKeys": true})

in the activate: and expand: event callback to retrieve the current state of the tree as soon as the state is altered and for example save the state as JSON in localstorage.

Then use init: event callback, check for existance of saved state in localstorage and restore it using

e.tree.setState(state);

Minimal working example :

data = [
    {
        title: "Node 1",
        expanded: true,
        children: [
            {
                title: "Node 1.1",
            },
            {
                title: "Node 1.2",
            },
        ],
    },
    {
        title: "Node 2",
    },
];

document.addEventListener("DOMContentLoaded", (event) => {
    const tree = new mar10.Wunderbaum({
        element: document.getElementById("demo-tree"),
        source: data,
        init: (e) => {
            e.tree.setFocus();
            if (localStorage.getItem("treeState") !== null) {
                const state = JSON.parse(localStorage.getItem("treeState"));
                e.tree.setState(state);
            }
        },
        activate: (e) => {
            localStorage.setItem(
                "treeState", 
                JSON.stringify(e.tree.getState({"expandedKeys": true, "selectedKeys": true}))
            );
        },
        expand: (e) => {
            localStorage.setItem(
                "treeState", 
                JSON.stringify(e.tree.getState({"expandedKeys": true, "selectedKeys": true}))
            );
        }
    });
});

0 replies

FreeNAYT · 2025-08-28T16:08:04Z

FreeNAYT
Aug 28, 2025

Hello,

I used AI on Martin's WunderBaum library for editable numeric columns
with a red/gray/green background for values <0/=0/>0.
At one point, it suggested implementing a mechanism for saving/importing/exporting data.
I'm sharing the file with you. It's large, but I think it's well documented.

Don't dwell on the editable numeric column, it doesn't work very well and that's not the subject of this discussion.
I'll start a new discussion to get your opinions on that topic.

I hope it helps you.

[Wunderbaum_dynamic_background_cell_SaveData.html](https://github.com/user-attachments/files/22029058/Wunderbaum_dynamic_background_cell_SaveData.html)

1 reply

FreeNAYT Aug 28, 2025

Not sure the HTML file will be available in my previous post? Here it is :


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wunderbaum Dynamic background cell_save data</title>
    
    <!-- 
        EXTERNAL DEPENDENCIES:
        - Bootstrap Icons: For UI icons in buttons
        - Wunderbaum: The main treegrid library we're using
    -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/wunderbaum@0/dist/wunderbaum.min.css">
    <script defer src="https://cdn.jsdelivr.net/npm/wunderbaum@0/dist/wunderbaum.umd.min.js"></script>
    
    <style>
        /* ==============================================
           GLOBAL STYLES AND LAYOUT
           ============================================== */
        
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f5f5f5; /* Light gray background for better contrast */
        }
        
        /* Main container that centers the application */
        .container {
            max-width: 900px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Subtle shadow for depth */
        }
        
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        
        /* ==============================================
           SAVE CONTROLS UI STYLING
           ============================================== */
        
        /* Container for all save-related buttons and status */
        .save-controls {
            display: flex;
            gap: 15px;                    /* Space between buttons */
            align-items: center;          /* Vertical alignment */
            margin-bottom: 20px;
            padding: 15px;
            background-color: #f8f9fa;    /* Light background to separate from content */
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }
        
        /* Base button styling - all buttons inherit this */
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s ease;    /* Smooth hover transitions */
            display: flex;
            align-items: center;
            gap: 5px;                     /* Space between icon and text */
        }
        
        /* Primary buttons (Save All) - blue theme */
        .btn-primary {
            background-color: #007bff;
            color: white;
        }
        .btn-primary:hover:not(:disabled) {
            background-color: #0056b3;    /* Darker blue on hover */
        }
        
        /* Secondary buttons (Reset) - gray theme */
        .btn-secondary {
            background-color: #6c757d;
            color: white;
        }
        .btn-secondary:hover:not(:disabled) {
            background-color: #545b62;    /* Darker gray on hover */
        }
        
        /* Success buttons (Export/Import) - green theme */
        .btn-success {
            background-color: #28a745;
            color: white;
        }
        .btn-success:hover:not(:disabled) {
            background-color: #1e7e34;    /* Darker green on hover */
        }
        
        /* Disabled state for all buttons */
        .btn:disabled {
            opacity: 0.6;                 /* Semi-transparent when disabled */
            cursor: not-allowed;          /* Show "not allowed" cursor */
        }
        
        /* Save status indicator styling */
        .save-status {
            font-size: 14px;
            font-weight: 500;
            margin-left: auto;            /* Push to the right side */
        }
        
        /* Different colors for different save states */
        .status-saved { color: #28a745; }      /* Green for saved */
        .status-unsaved { color: #dc3545; }    /* Red for unsaved changes */
        .status-auto-saved { color: #17a2b8; } /* Blue for auto-saved */
        
        /* Hidden file input (we use a styled button instead) */
        .file-input {
            display: none;
        }
        
        /* ==============================================
           NOTIFICATION SYSTEM STYLING
           ============================================== */
        
        /* Toast-style notifications that appear in top-right corner */
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 12px 20px;
            border-radius: 4px;
            color: white;
            font-weight: 500;
            z-index: 1000;               /* High z-index to appear above everything */
            transform: translateX(100%);  /* Start off-screen to the right */
            transition: transform 0.3s ease; /* Smooth slide-in animation */
        }
        
        /* When notification is shown, slide it into view */
        .notification.show {
            transform: translateX(0);
        }
        
        /* Different notification types with different colors */
        .notification-success { background-color: #28a745; }
        .notification-error { background-color: #dc3545; }
        .notification-warning { background-color: #ffc107; color: #212529; }
        .notification-info { background-color: #17a2b8; }
        
        /* ==============================================
           WUNDERBAUM TREEGRID STYLING
           ============================================== */
        
        #tree {
            height: 400px;              /* Fixed height for scrolling */
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        /* ==============================================
           PRODUCT NOTE CELL STYLING
           These styles are applied based on the value in each cell
           ============================================== */
        
        /* Positive values (> 0) - Green background */
        .product-note-positive {
            background-color: #d4edda;   /* Light green */
            color: #155724;              /* Dark green text */
            font-weight: bold;
            padding: 4px 8px;
            border-radius: 3px;
            text-align: center;
            width: 100%;
            height: 100%;
            display: block;
            cursor: pointer;             /* Indicates it's clickable */
            transition: all 0.2s ease;   /* Smooth hover effects */
        }
        
        /* Zero values (= 0) - Gray background */
        .product-note-zero {
            background-color: #f8f9fa;   /* Light gray */
            color: #6c757d;              /* Medium gray text */
            padding: 4px 8px;
            border-radius: 3px;
            text-align: center;
            width: 100%;
            height: 100%;
            display: block;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        /* Negative values (< 0) - Red background */
        .product-note-negative {
            background-color: #f8d7da;   /* Light red */
            color: #721c24;              /* Dark red text */
            font-weight: bold;
            padding: 4px 8px;
            border-radius: 3px;
            text-align: center;
            width: 100%;
            height: 100%;
            display: block;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        /* Folder cells - Not editable, different styling */
        .folder-note {
            background-color: #e9ecef;   /* Light gray for folders */
            color: #6c757d;
            padding: 4px 8px;
            border-radius: 3px;
            text-align: center;
            width: 100%;
            height: 100%;
            display: block;
            cursor: default;             /* Normal cursor (not clickable) */
        }
        
        /* Hover effects for editable cells */
        .product-note-positive:hover,
        .product-note-zero:hover,
        .product-note-negative:hover {
            outline: 2px solid #007bff;  /* Blue border on hover */
            transform: scale(1.05);      /* Slightly larger on hover */
        }
        
        /* Input field that appears when editing a cell */
        .edit-input {
            width: 100%;
            border: 2px solid #007bff;   /* Blue border to indicate editing mode */
            padding: 4px 8px;
            font-size: inherit;          /* Match the parent font size */
            text-align: center;
            background: white;
            border-radius: 3px;
            font-family: inherit;        /* Match the parent font family */
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Product Management Treegrid</h1>
        
        <!-- 
            SAVE CONTROLS SECTION:
            This section contains all the save-related functionality
            - Manual save button
            - Reset to last saved
            - Export to file
            - Import from file
            - Save status indicator
        -->
        <div class="save-controls">
            <button id="saveBtn" class="btn btn-primary">
                <i class="bi bi-floppy"></i> Save All
            </button>
            <button id="resetBtn" class="btn btn-secondary">
                <i class="bi bi-arrow-clockwise"></i> Reset
            </button>
            <button id="exportBtn" class="btn btn-success">
                <i class="bi bi-download"></i> Export
            </button>
            <button id="importBtn" class="btn btn-success">
                <i class="bi bi-upload"></i> Import
            </button>
            <!-- Hidden file input - we click this programmatically -->
            <input type="file" id="importFile" class="file-input" accept=".json">
            <!-- Status indicator shows current save state -->
            <span id="saveStatus" class="save-status status-saved">? All changes saved</span>
        </div>
        
        <!-- The main treegrid container - Wunderbaum will render here -->
        <div id="tree"></div>
    </div>

    <script>
        // ==============================================
        // MAIN APPLICATION INITIALIZATION
        // ==============================================
        
        // Wait for the DOM to be fully loaded before initializing
        document.addEventListener('DOMContentLoaded', function() {
            
            /* ==============================================
               SAVE SYSTEM CLASS
               This class manages all save-related functionality:
               1. Auto-save to localStorage
               2. Manual save/reset
               3. Export/Import to files
               ============================================== */
            
            class SaveSystem {
                constructor() {
                    // Instance variables to track save state
                    this.hasUnsavedChanges = false;    // Flag to track if there are unsaved changes
                    this.autoSaveInterval = null;      // Reference to auto-save timer
                    this.lastSavedData = null;         // Copy of last manually saved data
                    
                    // Initialize all save system components
                    this.initializeAutoSave();
                    this.setupEventListeners();
                }
                
                /* ==============================================
                   AUTO-SAVE SYSTEM (localStorage)
                   Automatically saves changes to browser's localStorage
                   ============================================== */
                
                initializeAutoSave() {
                    // Set up automatic saving every 30 seconds (30000 milliseconds)
                    this.autoSaveInterval = setInterval(() => {
                        // Only auto-save if there are actually unsaved changes
                        if (this.hasUnsavedChanges) {
                            this.autoSaveToLocalStorage();
                        }
                    }, 30000);
                    
                    // Try to load any previously saved data when the page loads
                    this.loadFromLocalStorage();
                }
                
                autoSaveToLocalStorage() {
                    try {
                        // Extract current tree data
                        const treeData = this.extractTreeData();
                        
                        // Create save data object with metadata
                        const saveData = {
                            timestamp: new Date().toISOString(),  // When this was saved
                            version: "1.0",                       // Version for future compatibility
                            data: treeData,                       // The actual tree data
                            autoSave: true                        // Flag to indicate this is an auto-save
                        };
                        
                        // Save to browser's localStorage (persists between sessions)
                        localStorage.setItem('wunderbaum_autosave', JSON.stringify(saveData));
                        
                        // Update UI to show auto-save status
                        this.updateStatus('status-auto-saved', 'Auto-saved');
                        console.log('? Auto-saved to localStorage');
                        
                        // After 3 seconds, revert status back to previous state
                        setTimeout(() => {
                            if (this.hasUnsavedChanges) {
                                this.updateStatus('status-unsaved', 'Unsaved changes');
                            } else {
                                this.updateStatus('status-saved', '? All changes saved');
                            }
                        }, 3000);
                        
                    } catch (error) {
                        // Handle any errors during auto-save
                        console.error('? Auto-save failed:', error);
                        this.showNotification('Auto-save failed', 'error');
                    }
                }
                
                loadFromLocalStorage() {
                    try {
                        // Try to retrieve previously auto-saved data
                        const saved = localStorage.getItem('wunderbaum_autosave');
                        if (saved) {
                            const saveData = JSON.parse(saved);
                            // Ask user if they want to restore the auto-saved data
                            if (confirm('Found auto-saved data. Do you want to restore it?')) {
                                this.showNotification('Auto-saved data restored', 'info');
                                return saveData.data;  // Return the data to be loaded into the tree
                            }
                        }
                    } catch (error) {
                        console.error('? Failed to load from localStorage:', error);
                    }
                    return null;  // No saved data found or user declined to restore
                }
                
                /* ==============================================
                   DATA EXTRACTION METHODS
                   These methods get the current tree data in different ways
                   ============================================== */
                
                extractTreeData() {
                    // Method 1: Try to get data directly from tree source
                    // This is the simplest method if the tree maintains its source
                    if (tree && tree.source) {
                        return tree.source;
                    }
                    
                    // Method 2: Walk through all nodes and extract data recursively
                    // This method rebuilds the data structure from the actual tree nodes
                    if (tree && tree.root) {
                        const extractNodeData = (node) => {
                            // Start with basic node properties
                            const nodeData = {
                                title: node.title,
                                key: node.key
                            };
                            
                            // Add any custom data attached to the node
                            if (node.data) {
                                Object.assign(nodeData, node.data);
                            }
                            
                            // Handle folder-specific properties
                            if (node.folder) {
                                nodeData.folder = true;
                                nodeData.expanded = node.expanded;  // Remember if folder is expanded
                            }
                            
                            // Recursively process children
                            if (node.children && node.children.length > 0) {
                                nodeData.children = node.children.map(child => extractNodeData(child));
                            }
                            
                            return nodeData;
                        };
                        
                        // Extract data from root children (skip the root node itself)
                        if (tree.root.children) {
                            return tree.root.children.map(child => extractNodeData(child));
                        }
                    }
                    
                    // Method 3: Fallback to manually tracked data
                    // This is our safety net if the above methods fail
                    if (window.currentTreeData) {
                        return window.currentTreeData;
                    }
                    
                    // If all methods fail, throw an error
                    throw new Error('Unable to extract tree data');
                }
                
                /* ==============================================
                   MANUAL SAVE SYSTEM
                   User-triggered saves that are more permanent
                   ============================================== */
                
                manualSave() {
                    try {
                        // Get current tree data
                        const treeData = this.extractTreeData();
                        
                        // Create save data with manual save flag
                        const saveData = {
                            timestamp: new Date().toISOString(),
                            version: "1.0",
                            data: treeData,
                            manualSave: true  // Flag to distinguish from auto-saves
                        };
                        
                        // Save to localStorage as backup
                        localStorage.setItem('wunderbaum_manual_save', JSON.stringify(saveData));
                        
                        // TODO: Here you could also send data to a server
                        // await this.saveToServer(saveData);
                        
                        // Keep a copy for reset functionality
                        this.lastSavedData = JSON.stringify(treeData);
                        
                        // Update UI state
                        this.markAsSaved();
                        this.showNotification('All changes saved successfully', 'success');
                        
                    } catch (error) {
                        console.error('? Manual save failed:', error);
                        this.showNotification(`Save failed: ${error.message}`, 'error');
                    }
                }
                
                resetToLastSaved() {
                    // Double-check with user since this will lose current changes
                    if (confirm('Are you sure you want to reset all changes to the last saved version?')) {
                        try {
                            // Retrieve the last manual save
                            const saved = localStorage.getItem('wunderbaum_manual_save');
                            if (saved) {
                                const saveData = JSON.parse(saved);
                                
                                // Reload the tree with saved data
                                tree.load(saveData.data);
                                
                                // Update our tracking data
                                window.currentTreeData = saveData.data;
                                
                                // Mark as saved since we just restored to a saved state
                                this.markAsSaved();
                                this.showNotification('Data reset to last saved version', 'info');
                            } else {
                                this.showNotification('No saved version found', 'warning');
                            }
                        } catch (error) {
                            console.error('? Reset failed:', error);
                            this.showNotification('Reset failed', 'error');
                        }
                    }
                }
                
                /* ==============================================
                   EXPORT/IMPORT SYSTEM
                   File-based data exchange
                   ============================================== */
                
                exportData() {
                    try {
                        // Get current tree data
                        const treeData = this.extractTreeData();
                        
                        // Create export data with additional metadata
                        const exportData = {
                            exportDate: new Date().toISOString(),
                            version: "1.0",
                            application: "Wunderbaum Product Notes",
                            data: treeData
                        };
                        
                        // Create a downloadable file
                        const blob = new Blob([JSON.stringify(exportData, null, 2)], {
                            type: 'application/json'
                        });
                        
                        // Create a temporary download link
                        const url = URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.href = url;
                        a.download = `product_notes_${new Date().toISOString().split('T')[0]}.json`;
                        
                        // Trigger the download
                        document.body.appendChild(a);
                        a.click();
                        document.body.removeChild(a);
                        
                        // Clean up the temporary URL
                        URL.revokeObjectURL(url);
                        
                        this.showNotification('Data exported successfully', 'success');
                        
                    } catch (error) {
                        console.error('? Export failed:', error);
                        this.showNotification(`Export failed: ${error.message}`, 'error');
                    }
                }
                
                importData(file) {
                    if (!file) return;  // No file selected
                    
                    // Use FileReader to read the selected file
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        try {
                            // Parse the JSON file
                            const importData = JSON.parse(e.target.result);
                            
                            // Validate the file structure
                            if (!importData.data || !Array.isArray(importData.data)) {
                                throw new Error('Invalid file format');
                            }
                            
                            // Confirm with user since this will replace all current data
                            if (confirm('This will replace all current data. Are you sure?')) {
                                // Load the imported data into the tree
                                tree.load(importData.data);
                                
                                // Update our tracking data
                                window.currentTreeData = importData.data;
                                
                                // Mark as modified since imported data hasn't been manually saved yet
                                this.markAsModified();
                                this.showNotification('Data imported successfully', 'success');
                            }
                            
                        } catch (error) {
                            console.error('? Import failed:', error);
                            this.showNotification('Import failed: Invalid file format', 'error');
                        }
                    };
                    
                    // Start reading the file as text
                    reader.readAsText(file);
                }
                
                /* ==============================================
                   UTILITY METHODS
                   Helper functions for UI state management
                   ============================================== */
                
                // Mark data as modified (unsaved changes)
                markAsModified() {
                    this.hasUnsavedChanges = true;
                    this.updateStatus('status-unsaved', 'Unsaved changes');
                    
                    // Enable save and reset buttons
                    document.getElementById('saveBtn').disabled = false;
                    document.getElementById('resetBtn').disabled = false;
                }
                
                // Mark data as saved (no unsaved changes)
                markAsSaved() {
                    this.hasUnsavedChanges = false;
                    this.updateStatus('status-saved', '? All changes saved');
                    
                    // Disable save and reset buttons since nothing to save/reset
                    document.getElementById('saveBtn').disabled = true;
                    document.getElementById('resetBtn').disabled = true;
                }
                
                // Update the save status indicator in the UI
                updateStatus(className, text) {
                    const statusElement = document.getElementById('saveStatus');
                    statusElement.className = `save-status ${className}`;
                    statusElement.textContent = text;
                }
                
                // Show a temporary notification to the user
                showNotification(message, type = 'info') {
                    // Create notification element
                    const notification = document.createElement('div');
                    notification.className = `notification notification-${type}`;
                    notification.textContent = message;
                    document.body.appendChild(notification);
                    
                    // Show notification with slide-in animation
                    setTimeout(() => notification.classList.add('show'), 100);
                    
                    // Hide notification after 3 seconds
                    setTimeout(() => {
                        notification.classList.remove('show');
                        // Remove from DOM after animation completes
                        setTimeout(() => document.body.removeChild(notification), 300);
                    }, 3000);
                }
                
                /* ==============================================
                   EVENT LISTENERS SETUP
                   Connect UI buttons to their respective functions
                   ============================================== */
                
                setupEventListeners() {
                    // Manual save button
                    document.getElementById('saveBtn').addEventListener('click', () => this.manualSave());
                    
                    // Reset button
                    document.getElementById('resetBtn').addEventListener('click', () => this.resetToLastSaved());
                    
                    // Export button
                    document.getElementById('exportBtn').addEventListener('click', () => this.exportData());
                    
                    // Import button (triggers hidden file input)
                    document.getElementById('importBtn').addEventListener('click', () => {
                        document.getElementById('importFile').click();
                    });
                    
                    // File input change handler
                    document.getElementById('importFile').addEventListener('change', (e) => {
                        this.importData(e.target.files[0]);
                        e.target.value = '';  // Reset file input for next use
                    });
                    
                    // Save before page unload if there are unsaved changes
                    window.addEventListener('beforeunload', (e) => {
                        if (this.hasUnsavedChanges) {
                            // Auto-save as backup
                            this.autoSaveToLocalStorage();
                            
                            // Show browser warning about unsaved changes
                            e.preventDefault();
                            e.returnValue = 'You have unsaved changes. Are you sure you want to leave?';
                        }
                    });
                }
                
                // Cleanup method (call when destroying the save system)
                destroy() {
                    if (this.autoSaveInterval) {
                        clearInterval(this.autoSaveInterval);
                    }
                }
            }
            
            /* ==============================================
               SAVE SYSTEM INITIALIZATION
               Create and configure the save system
               ============================================== */
            
            const saveSystem = new SaveSystem();
            
            /* ==============================================
               INITIAL DATA SETUP
               Load data from localStorage or use defaults
               ============================================== */
            
            // Try to load previously saved data, otherwise use default data
            const savedData = saveSystem.loadFromLocalStorage();
            const initialData = savedData || [
                {
                    title: "Category A",
                    key: "cat_a",
                    folder: true,
                    expanded: true,  // Start with folders expanded
                    children: [
                        { title: "Item A1", key: "item_a1", productNote: 5 },
                        { title: "Item A2", key: "item_a2", productNote: -2 },
                        { title: "Item A3", key: "item_a3", productNote: 0 },
                        { title: "Item A4", key: "item_a4", productNote: 8 }
                    ]
                },
                {
                    title: "Category B",
                    key: "cat_b", 
                    folder: true,
                    expanded: true,
                    children: [
                        { title: "Item B1", key: "item_b1", productNote: 3 },
                        { title: "Item B2", key: "item_b2", productNote: -1 },
                        { title: "Item B3", key: "item_b3", productNote: 0 },
                        { title: "Item B4", key: "item_b4", productNote: 7 }
                    ]
                },
                { title: "Item C", key: "item_c", productNote: 9 },
                { title: "Item D", key: "item_d", productNote: -3 }
            ];

            // Keep a global reference to current data for fallback extraction
            window.currentTreeData = initialData;

            /* ==============================================
               COLUMN CONFIGURATION
               Define the structure of our treegrid
               ============================================== */
            
            const columns = [
                {
                    title: "Product",        // Column header text
                    id: "*",                 // Special ID for the main tree column
                    width: "400px"           // Column width
                },
                {
                    title: "Product Note",   // Column header text
                    id: "productNote",       // ID must match the data property name
                    width: "200px"           // Column width
                }
            ];

            /* ==============================================
               UTILITY FUNCTIONS
               Helper functions for cell styling and data management
               ============================================== */
            
            // Determine CSS class based on product note value
            function getProductNoteClass(value) {
                if (value > 0) return 'product-note-positive';    // Green for positive
                if (value === 0) return 'product-note-zero';      // Gray for zero
                if (value < 0) return 'product-note-negative';    // Red for negative
                return 'folder-note';                             // Default for folders
            }

            // Global flag to prevent multiple simultaneous edits
            let isEditing = false;

            // Update our fallback data tracking when changes occur
            function updateTrackedData() {
                try {
                    window.currentTreeData = saveSystem.extractTreeData();
                } catch (error) {
                    console.warn('Could not update tracked data:', error);
                }
            }

            /* ==============================================
               CELL EDITING FUNCTIONALITY
               Handle in-place editing of Product Note cells
               ============================================== */
            
            function makeEditable(node, cellElement) {
                // Prevent editing if already editing or if it's a folder
                if (isEditing || node.folder) return;
                
                // Set editing flag to prevent multiple simultaneous edits
                isEditing = true;
                
                // Get current value, default to 0 if undefined
                const currentValue = node.data.productNote !== undefined ? node.data.productNote : 0;
                
                // Replace cell content with an input field
                cellElement.innerHTML = `<input type="number" class="edit-input" value="${currentValue}" />`;
                
                // Get reference to the input field and focus it
                const input = cellElement.querySelector('.edit-input');
                input.focus();
                input.select();  // Select all text for easy replacement
                
                // Function to save the edited value
                function saveValue() {
                    if (!isEditing) return;  // Guard against multiple calls
                    
                    // Get the new value from input (default to 0 if invalid)
                    const newValue = parseInt(input.value) || 0;
                    const oldValue = node.data.productNote;
                    
                    // Only update if value actually changed
                    if (newValue !== oldValue) {
                        node.data.productNote = newValue;
                        updateTrackedData();           // Update our data tracking
                        saveSystem.markAsModified();   // Mark as having unsaved changes
                    }
                    
                    // Restore the cell to display mode with new styling
                    const cssClass = getProductNoteClass(newValue);
                    cellElement.innerHTML = `<span class="${cssClass}" data-value="${newValue}">${newValue}</span>`;
                    
                    // Reattach click listener to the new span
                    const newSpan = cellElement.querySelector('span');
                    if (newSpan && !node.folder) {
                        newSpan.addEventListener('click', function(event) {
                            event.preventDefault();
                            event.stopPropagation();
                            makeEditable(node, cellElement);
                        });
                    }
                    
                    // Clear editing flag
                    isEditing = false;
                    console.log(`Product Note changed for ${node.title}: ${oldValue} ? ${newValue}`);
                }
                
                // Function to cancel editing and restore original value
                function cancelEdit() {
                    if (!isEditing) return;
                    
                    // Restore original display without saving changes
                    const cssClass = getProductNoteClass(currentValue);
                    cellElement.innerHTML = `<span class="${cssClass}" data-value="${currentValue}">${currentValue}</span>`;
                    
                    // Reattach click listener
                    const restoredSpan = cellElement.querySelector('span');
                    if (restoredSpan && !node.folder) {
                        restoredSpan.addEventListener('click', function(event) {
                            event.preventDefault();
                            event.stopPropagation();
                            makeEditable(node, cellElement);
                        });
                    }
                    
                    // Clear editing flag
                    isEditing = false;
                }
                
                // Set up event listeners for the input field
                input.addEventListener('blur', saveValue);  // Save when input loses focus
                input.addEventListener('keydown', function(e) {
                    if (e.key === 'Enter') {
                        // Save on Enter key
                        e.preventDefault();
                        e.stopPropagation();
                        saveValue();
                    } else if (e.key === 'Escape') {
                        // Cancel on Escape key
                        e.preventDefault();
                        e.stopPropagation();
                        cancelEdit();
                    }
                });
            }

            /* ==============================================
               WUNDERBAUM INITIALIZATION
               Create and configure the main treegrid
               ============================================== */
            
            const tree = new mar10.Wunderbaum({
                element: "#tree",                 // Container element
                source: initialData,              // Data to display
                columns: columns,                 // Column configuration
                grid: {
                    enabled: true                 // Enable grid mode (vs plain tree)
                },
                selectMode: "single",             // Allow selecting one row at a time
                checkbox: false,                  // Don't show checkboxes
                
                // RENDER CALLBACK - This is where we customize how cells are displayed
                render: function(e) {
                    const node = e.node;
                    
                    // Iterate through all columns that need to be rendered
                    for (const col of Object.values(e.renderColInfosById)) {
                        // Get the data value for this column
                        const val = node.data[col.id];
                        
                        // Handle different column types
                        switch (col.id) {
                            case "productNote":
                                // Special handling for Product Note column
                                if (node.folder) {
                                    // Folders show a dash and are not editable
                                    col.elem.innerHTML = `<span class="folder-note">-</span>`;
                                } else {
                                    // Regular items show the value with conditional styling
                                    const value = val !== undefined ? val : 0;
                                    const cssClass = getProductNoteClass(value);
                                    
                                    // Create styled span with click handler
                                    col.elem.innerHTML = `<span class="${cssClass}" data-value="${value}">${value}</span>`;
                                    
                                    // Add click handler to make cell editable
                                    const span = col.elem.querySelector('span');
                                    if (span) {
                                        span.addEventListener('click', function(event) {
                                            event.preventDefault();
                                            event.stopPropagation();
                                            makeEditable(node, col.elem);
                                        });
                                    }
                                }
                                break;
                                
                            default:
                                // For other columns (not the main tree column), show data as text
                                if (col.id !== "*") {
                                    col.elem.textContent = node.data[col.id] || "";
                                }
                                break;
                        }
                    }
                }
            });

            /* ==============================================
               FINAL INITIALIZATION
               Set initial save state and log success
               ============================================== */
            
            // Set initial save state based on whether we loaded saved data
            if (!savedData) {
                saveSystem.markAsSaved();      // New data starts as "saved"
            } else {
                saveSystem.markAsModified();   // Loaded data is considered "modified" until manually saved
            }

            console.log("Wunderbaum with complete save system initialized successfully!");
            console.log("Click on any Product Note cell to edit its value");
            console.log("Changes are auto-saved every 30 seconds to localStorage");
            console.log("Use the Export/Import buttons to save/load data files");
        });
    </script>
</body>
</html>

Navigation Menu

Uh oh!

Is there any way to save state of wunderbaum? #104

Uh oh!

{{title}}

Uh oh!

Replies: 4 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Is there any way to save state of wunderbaum? #104

Uh oh!

gioisco Sep 17, 2024

Replies: 4 comments · 2 replies

Uh oh!

mar10 Sep 17, 2024 Maintainer

Uh oh!

GordonJones Sep 11, 2025

Uh oh!

gioisco Sep 17, 2024 Author

Uh oh!

jtraulle Aug 3, 2025

Uh oh!

FreeNAYT Aug 28, 2025

Uh oh!

FreeNAYT Aug 28, 2025

gioisco
Sep 17, 2024

Replies: 4 comments 2 replies

mar10
Sep 17, 2024
Maintainer

gioisco
Sep 17, 2024
Author

jtraulle
Aug 3, 2025

FreeNAYT
Aug 28, 2025