adding url sharing

Author: kennethkutyn

index.html

@@ -81,12 +81,22 @@
         </aside>
 
         <main class="canvas-container">
-            <button class="export-btn-floating" id="export-btn" aria-label="Export diagram" title="Export diagram">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                    <circle cx="12" cy="12" r="9"></circle>
-                    <path d="M8 12h8M12 16l4-4-4-4"></path>
-                </svg>
-            </button>
+            <div class="floating-actions">
+                <button class="export-btn-floating refresh-btn" id="refresh-btn" aria-label="Refresh diagram" title="Refresh diagram">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                        <path d="M23 4v6h-6"></path>
+                        <path d="M1 20v-6h6"></path>
+                        <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10"></path>
+                        <path d="M20.49 15a9 9 0 0 1-14.85 3.36L1 14"></path>
+                    </svg>
+                </button>
+                <button class="export-btn-floating" id="export-btn" aria-label="Export diagram" title="Export diagram">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                        <circle cx="12" cy="12" r="9"></circle>
+                        <path d="M8 12h8M12 16l4-4-4-4"></path>
+                    </svg>
+                </button>
+            </div>
             <div class="canvas">
                 <div class="layer layer-marketing" data-layer="marketing">
                     <div class="layer-label">Marketing Channels</div>

js/connections.js

@@ -21,6 +21,7 @@ import {
 } from './config.js';
 import { activeModel, customConnections, dismissedConnections } from './state.js';
 import { ensureLayerSlots } from './layout.js';
+import { persistDiagramState } from './persistence.js';
 
 const connectionLabels = new Map(); // connectionKey -> Set<SVGTextElement>
 
@@ -165,6 +166,7 @@ export function renderConnections() {
                 removeConnectionLabel(key);
             }
             path.remove();
+            void persistDiagramState();
         }, { once: true });
     });
 }

js/nodes.js

@@ -15,6 +15,8 @@ import {
     customEntries,
     dismissedConnections,
     getNextCustomEntryId,
+    resetCustomEntryCounter,
+    layerOrder,
     setActiveCategory,
     setActiveModel
 } from './state.js';
@@ -35,6 +37,11 @@ import {
     renderConnections
 } from './connections.js';
 import { trackAppLaunched, trackExportButtonClick, trackNodeAdded } from './analytics.js';
+import {
+    clearPersistedDiagramState,
+    loadDiagramState,
+    persistDiagramState
+} from './persistence.js';
 
 let pendingConnectionNode = null;
 let draggedNode = null;
@@ -61,6 +68,7 @@ export function initModelPicker() {
                 setActiveModel(modelId);
                 updateModelPickerState();
                 renderConnections();
+                void persistDiagramState();
             }
             applyModelAutoAdjustments(modelId);
         });
@@ -170,6 +178,13 @@ export function updateModelPickerState() {
     });
 }
 
+function updateCategoryTabState() {
+    const tabs = document.querySelectorAll('.category-tab');
+    tabs.forEach(tab => {
+        tab.classList.toggle('active', tab.dataset.category === activeCategory);
+    });
+}
+
 function createComponentListItem(item, category, isCustom) {
     const li = document.createElement('li');
     li.className = 'component-item';
@@ -223,6 +238,7 @@ export function addCustomEntry() {
     if (list) {
         list.scrollTop = list.scrollHeight;
     }
+    void persistDiagramState();
 }
 
 export function addItemToLayer(itemId, itemName, iconKey, category) {
@@ -254,6 +270,7 @@ export function addItemToLayer(itemId, itemName, iconKey, category) {
     updateSidebarItemState(itemId, category, true);
     renderConnections();
     trackNodeAdded(itemName);
+    void persistDiagramState();
 }
 
 export function ensureItemAdded(itemId) {
@@ -376,6 +393,7 @@ function toggleAmplitudeSdkBadge(node, badgeId) {
         amplitudeSdkSelectedBadges.add(badgeId);
     }
     syncAmplitudeSdkBadgeState(node);
+    void persistDiagramState();
 }
 
 function syncAmplitudeSdkBadgeState(node) {
@@ -404,6 +422,7 @@ function removeItemFromLayer(itemId, category, node) {
         removeRelatedCustomConnections(itemId);
         enforceNodeOrdering();
         renderConnections();
+        void persistDiagramState();
     });
 }
 
@@ -450,6 +469,7 @@ function addCustomConnection(sourceId, targetId) {
     customConnections.add(key);
     dismissedConnections.delete(key);
     renderConnections();
+    void persistDiagramState();
 }
 
 function removeRelatedCustomConnections(nodeId) {
@@ -591,6 +611,7 @@ function handleLayerDrop(e) {
     content.classList.remove('drag-over');
     enforceNodeOrdering();
     renderConnections();
+    void persistDiagramState();
     handleDragEnd();
 }
 
@@ -608,7 +629,7 @@ function loadHtml2Canvas() {
     });
 }
 
-export function initializeApp() {
+export async function initializeApp() {
     if (document?.documentElement) {
         document.documentElement.style.setProperty('--slot-columns', String(SLOT_COLUMNS));
     }
@@ -618,7 +639,129 @@ export function initializeApp() {
     initModelPicker();
     initLayerDragTargets();
     initExportButton();
+    initRefreshButton();
+    const restored = await restoreDiagramStateFromStorage();
+    if (!restored) {
+        updateCategoryTabState();
+        renderComponentList(activeCategory);
+        renderConnections();
+    }
+    window.addEventListener('resize', () => renderConnections());
+}
+
+async function restoreDiagramStateFromStorage() {
+    const stored = await loadDiagramState();
+    if (!stored) return false;
+    try {
+        Object.values(addedItems).forEach(set => set.clear());
+        Object.keys(layerOrder).forEach(category => {
+            layerOrder[category] = [];
+        });
+        Object.keys(customEntries).forEach(category => {
+            customEntries[category] = [];
+        });
+        customConnections.clear();
+        dismissedConnections.clear();
+        amplitudeSdkSelectedBadges.clear();
+        clearCustomItemIndex();
+
+        if (Array.isArray(stored.amplitudeSdkSelectedBadges)) {
+            stored.amplitudeSdkSelectedBadges.forEach(id => amplitudeSdkSelectedBadges.add(id));
+        }
+
+        let maxCustomId = 0;
+        if (stored.customEntries) {
+            Object.entries(stored.customEntries).forEach(([category, entries]) => {
+                if (!customEntries[category]) {
+                    customEntries[category] = [];
+                }
+                entries.forEach(entry => {
+                    customEntries[category].push({ ...entry });
+                    itemCategoryIndex[entry.id] = category;
+                    const match = /custom-[a-z-]+-(\d+)/.exec(entry.id);
+                    if (match) {
+                        const parsed = Number(match[1]);
+                        if (Number.isFinite(parsed)) {
+                            maxCustomId = Math.max(maxCustomId, parsed);
+                        }
+                    }
+                });
+            });
+        }
+        resetCustomEntryCounter(maxCustomId);
+
+        if (stored.layerOrder) {
+            Object.entries(stored.layerOrder).forEach(([category, slots]) => {
+                layerOrder[category] = Array.isArray(slots) ? [...slots] : [];
+            });
+        }
+
+        if (stored.activeModel) {
+            setActiveModel(stored.activeModel);
+        }
+        if (stored.activeCategory) {
+            setActiveCategory(stored.activeCategory);
+        }
+
+        Object.keys(addedItems).forEach(category => {
+            const slots = layerOrder[category] || [];
+            slots.forEach(id => {
+                if (id) ensureItemAdded(id);
+            });
+            const extraIds = new Set(stored.addedItems?.[category] || []);
+            slots.forEach(id => extraIds.delete(id));
+            extraIds.forEach(id => ensureItemAdded(id));
+        });
+
+        (stored.customConnections || []).forEach(key => customConnections.add(key));
+        (stored.dismissedConnections || []).forEach(key => dismissedConnections.add(key));
+
+        updateCategoryTabState();
+        updateModelPickerState();
+        renderComponentList(activeCategory);
+        renderConnections();
+        return true;
+    } catch (error) {
+        console.error('Failed to restore diagram state', error);
+        return false;
+    }
+}
+
+function initRefreshButton() {
+    const refreshBtn = document.getElementById('refresh-btn');
+    if (!refreshBtn) return;
+    refreshBtn.addEventListener('click', () => {
+        clearDiagram();
+    });
+}
+
+function clearCustomItemIndex() {
+    Object.keys(itemCategoryIndex).forEach(id => {
+        if (id.startsWith('custom-')) {
+            delete itemCategoryIndex[id];
+        }
+    });
+}
+
+function clearDiagram() {
+    document.querySelectorAll('.diagram-node').forEach(node => node.remove());
+    Object.keys(addedItems).forEach(category => addedItems[category].clear());
+    Object.keys(layerOrder).forEach(category => {
+        layerOrder[category] = [];
+    });
+    customConnections.clear();
+    dismissedConnections.clear();
+    amplitudeSdkSelectedBadges.clear();
+    Object.keys(customEntries).forEach(category => {
+        customEntries[category] = [];
+    });
+    resetCustomEntryCounter(0);
+    clearCustomItemIndex();
+    setActiveModel(null);
+    setActiveCategory('marketing');
+    updateCategoryTabState();
+    updateModelPickerState();
     renderComponentList(activeCategory);
     renderConnections();
-    window.addEventListener('resize', () => renderConnections());
+    clearPersistedDiagramState();
 }