@vectoriox/iox-builder 1.4.56 → 1.4.58

package/fesm2022/vectoriox-iox-builder.mjs

@@ -309,6 +309,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             type: Injectable
         }] });
 
+/**
+ * SymbolRegistryService — in-memory store for org-level symbols.
+ *
+ * Loaded once per page by PageUiComponent alongside the page layout.
+ * Scoped to PageUiComponent.providers[] via IoxBuilderModule — one registry per builder instance.
+ */
+class SymbolRegistryService {
+    constructor() {
+        this.symbols = new Map();
+    }
+    setSymbols(symbols) {
+        this.symbols.clear();
+        for (const s of symbols) {
+            this.symbols.set(s.id, s);
+        }
+    }
+    getSymbol(id) {
+        return this.symbols.get(id);
+    }
+    getAll() {
+        return Array.from(this.symbols.values());
+    }
+    upsert(symbol) {
+        this.symbols.set(symbol.id, symbol);
+    }
+    remove(id) {
+        this.symbols.delete(id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SymbolRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SymbolRegistryService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SymbolRegistryService, decorators: [{
+            type: Injectable
+        }] });
+
 function deepCloneNode(node) {
     const clone = JSON.parse(JSON.stringify(node));
     regenerateIds(clone);
@@ -320,8 +355,9 @@ function regenerateIds(node) {
     (node.children || []).forEach(regenerateIds);
 }
 class DragEngineService {
-    constructor(registry) {
+    constructor(registry, symbolRegistry) {
         this.registry = registry;
+        this.symbolRegistry = symbolRegistry;
         // ── Drop-zone registry ────────────────────────────────────
         this.ids = [];
         this.elMap = new Map();
@@ -385,7 +421,9 @@ class DragEngineService {
             }
             else {
                 // Full block object { node, symbolId, syncInstances } or bare ComponentNode.
-                const nodeData = data.node ?? data;
+                // Prefer symbol.node (always up-to-date) over block.node (original snapshot).
+                const symbolNode = data.symbolId ? this.symbolRegistry.getSymbol(data.symbolId)?.node : null;
+                const nodeData = (symbolNode ?? data.node ?? data);
                 const cloned = deepCloneNode(nodeData);
                 if (data.syncInstances && data.symbolId) {
                     cloned.symbolId = data.symbolId;
@@ -417,10 +455,13 @@ class DragEngineService {
                 // produces a fully independent node, preventing shared CSS rules.
                 // The panel may supply a bare ComponentNode OR a block wrapper object
                 // { node, symbolId, syncInstances } — extract the node first.
-                const nodeData = item.node ?? item;
+                // Prefer symbol.node (always up-to-date) over block.node (original snapshot).
+                const blk = item;
+                const symbolNode2 = blk.symbolId ? this.symbolRegistry.getSymbol(blk.symbolId)?.node : null;
+                const nodeData = (symbolNode2 ?? blk.node ?? item);
                 const cloned = deepCloneNode(nodeData);
-                if (item.syncInstances && item.symbolId) {
-                    cloned.symbolId = item.symbolId;
+                if (blk.syncInstances && blk.symbolId) {
+                    cloned.symbolId = blk.symbolId;
                 }
                 children.splice(insertIndex, 0, cloned);
                 cdr.detectChanges();
@@ -992,12 +1033,12 @@ class DragEngineService {
         }
         return children.length;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DragEngineService, deps: [{ token: ComponentRegistryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DragEngineService, deps: [{ token: ComponentRegistryService }, { token: SymbolRegistryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DragEngineService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DragEngineService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: ComponentRegistryService }] });
+        }], ctorParameters: () => [{ type: ComponentRegistryService }, { type: SymbolRegistryService }] });
 
 /**
  * Page-scoped registry that holds the current page's data sources.
@@ -1640,41 +1681,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             type: Injectable
         }] });
 
-/**
- * SymbolRegistryService — in-memory store for org-level symbols.
- *
- * Loaded once per page by PageUiComponent alongside the page layout.
- * Scoped to PageUiComponent.providers[] via IoxBuilderModule — one registry per builder instance.
- */
-class SymbolRegistryService {
-    constructor() {
-        this.symbols = new Map();
-    }
-    setSymbols(symbols) {
-        this.symbols.clear();
-        for (const s of symbols) {
-            this.symbols.set(s.id, s);
-        }
-    }
-    getSymbol(id) {
-        return this.symbols.get(id);
-    }
-    getAll() {
-        return Array.from(this.symbols.values());
-    }
-    upsert(symbol) {
-        this.symbols.set(symbol.id, symbol);
-    }
-    remove(id) {
-        this.symbols.delete(id);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SymbolRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SymbolRegistryService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SymbolRegistryService, decorators: [{
-            type: Injectable
-        }] });
-
 // Virtual trait → composed CSS property helpers.
 //
 // Several style traits are "virtual" — they don't map 1:1 to a CSS property but
@@ -3878,8 +3884,10 @@ class BuilderComponent {
         if (payload.sourceId === 'blocks-panel') {
             // Reusable block from the palette — may be a bare ComponentNode or a
             // block wrapper { name, node, syncInstances, symbolId }. Extract the node.
+            // Prefer symbol.node (always up-to-date) over block.node (original snapshot).
             const data = item;
-            const nodeData = data.node ?? data;
+            const symbolNode = data.symbolId ? this.symbolRegistry.getSymbol(data.symbolId)?.node : null;
+            const nodeData = (symbolNode ?? data.node ?? data);
             const clone = this.deepCloneWithNewIds(nodeData);
             if (data.syncInstances && data.symbolId) {
                 clone.symbolId = data.symbolId;
@@ -3985,7 +3993,9 @@ class BuilderComponent {
         this.selectedItem = event.node;
         this.overlayService.setSelect(event.element, event.node.type, this.activeMode, event.node, event.componentRef);
         this.selectPanel(PanelTypes.STYLES);
-        this.panelEventService.emit(PanelEventTypes.ELEMENT_SELECT, { node: event.node, componentRef: event.componentRef });
+        const symbolAncestor = this.findSymbolAncestorOf(event.node, this.layout)
+            ?? this.findSymbolAncestorOf(event.node, this.globalElements);
+        this.panelEventService.emit(PanelEventTypes.ELEMENT_SELECT, { node: event.node, componentRef: event.componentRef, symbolAncestor });
     }
     _selectAfterDrop(node) {
         // Wait one tick for Angular to render the new component and register it
@@ -3997,7 +4007,9 @@ class BuilderComponent {
             this.selectedItem = node;
             this.overlayService.setSelect(ref.element, node.type, this.activeMode, node, ref.componentRef);
             this.selectPanel(PanelTypes.STYLES);
-            this.panelEventService.emit(PanelEventTypes.ELEMENT_SELECT, { node, componentRef: ref.componentRef });
+            const symbolAncestor = this.findSymbolAncestorOf(node, this.layout)
+                ?? this.findSymbolAncestorOf(node, this.globalElements);
+            this.panelEventService.emit(PanelEventTypes.ELEMENT_SELECT, { node, componentRef: ref.componentRef, symbolAncestor });
         });
     }
     handleMouseEnter(event) {
@@ -4021,7 +4033,9 @@ class BuilderComponent {
         this.selectedItem = node;
         const ref = this.overlayService.getNodeRef(node);
         if (ref) {
-            this.panelEventService.emit(PanelEventTypes.ELEMENT_SELECT, { node, componentRef: ref.componentRef });
+            const symbolAncestor = this.findSymbolAncestorOf(node, this.layout)
+                ?? this.findSymbolAncestorOf(node, this.globalElements);
+            this.panelEventService.emit(PanelEventTypes.ELEMENT_SELECT, { node, componentRef: ref.componentRef, symbolAncestor });
         }
         this.selectPanel(PanelTypes.STYLES);
     }
@@ -4300,6 +4314,19 @@ class BuilderComponent {
         }
         return null;
     }
+    /** Returns the closest ancestor (or self) of `target` that has a `symbolId`. */
+    findSymbolAncestorOf(target, nodes) {
+        for (const node of nodes) {
+            if (node === target)
+                return node.symbolId ? node : null;
+            if (node.children?.length && this.findNodeInTree(target, node.children)) {
+                if (node.symbolId)
+                    return node;
+                return this.findSymbolAncestorOf(target, node.children);
+            }
+        }
+        return null;
+    }
     handlePanelEvents(panelEvent) {
         if (panelEvent.type === PanelEventTypes.PANEL_CLOSE) {
             this.isPanelOpen = false;