@vectoriox/iox-builder 1.4.31 → 1.4.33

package/fesm2022/vectoriox-iox-builder.mjs

@@ -314,6 +314,8 @@ class DragEngineService {
         this.ids$ = new BehaviorSubject([]);
         this.isDragging$ = new BehaviorSubject(false);
         this.deepTarget$ = new BehaviorSubject(null);
+        /** Emits the dropped/inserted ComponentNode after every successful drop. */
+        this.dropComplete$ = new Subject();
         // ── Active drag state ─────────────────────────────────────
         this._isDragging = false;
         this._payload = null;
@@ -355,6 +357,7 @@ class DragEngineService {
             if (config) {
                 children.splice(insertIndex, 0, config);
                 cdr.detectChanges();
+                this.dropComplete$.next(config);
             }
             afterDrop?.();
             return;
@@ -369,15 +372,19 @@ class DragEngineService {
                     this.getCdr(payload.sourceId)?.detectChanges();
                 }
                 children.splice(insertIndex, 0, item);
+                cdr.detectChanges();
+                this.dropComplete$.next(item);
             }
             else {
                 // Source not in the drop-zone registry → came from an external panel
                 // (e.g. the built-in blocks panel stores one pre-built node object and
                 // reuses it across drags). Deep-clone with fresh IDs so each drop
                 // produces a fully independent node, preventing shared CSS rules.
-                children.splice(insertIndex, 0, deepCloneNode(item));
+                const cloned = deepCloneNode(item);
+                children.splice(insertIndex, 0, cloned);
+                cdr.detectChanges();
+                this.dropComplete$.next(cloned);
             }
-            cdr.detectChanges();
             afterDrop?.();
             return;
         }
@@ -387,6 +394,7 @@ class DragEngineService {
             children.splice(currentIdx, 1);
             children.splice(adjustedIdx, 0, item);
             cdr.detectChanges();
+            this.dropComplete$.next(item);
         }
         afterDrop?.();
     }
@@ -3286,11 +3294,14 @@ class BuilderComponent {
         this.dsRegistry.setDataSources(this.dataSources);
         this.dragEngine.setScale(this.viewportService.getScale());
         this.sub = this.panelEventService.subscribe((panelEvent) => this.handlePanelEvents(panelEvent));
-        this.panelEventService.emit(PanelEventTypes.PANEL_OPEN, PanelTypes.STYLES);
-        this.dragEngine.isDragging$.subscribe((v) => {
+        this.sub.add(this.dragEngine.isDragging$.subscribe((v) => {
             this.isDragging = v;
             this.cdr.markForCheck();
-        });
+        }));
+        this.sub.add(this.dragEngine.dropComplete$.subscribe((node) => {
+            this._selectAfterDrop(node);
+        }));
+        this.panelEventService.emit(PanelEventTypes.PANEL_OPEN, PanelTypes.STYLES);
         this.viewportSub = this.viewportService.state$.subscribe(state => {
             this.activeDevice = state.device;
             this.activeZoom = Math.round(state.scale * 100);
@@ -3440,12 +3451,15 @@ class BuilderComponent {
                 if (!config)
                     return;
                 this.layout.splice(insertIndex, 0, config);
+                this.cdr.markForCheck();
+                this._selectAfterDrop(config);
             }
             else {
                 const clone = this.deepCloneWithNewIds(payload.data);
                 this.layout.splice(insertIndex, 0, clone);
+                this.cdr.markForCheck();
+                this._selectAfterDrop(clone);
             }
-            this.cdr.markForCheck();
             return;
         }
         const item = payload.data;
@@ -3454,6 +3468,7 @@ class BuilderComponent {
             const clone = this.deepCloneWithNewIds(item);
             this.layout.splice(insertIndex, 0, clone);
             this.cdr.markForCheck();
+            this._selectAfterDrop(clone);
             return;
         }
         if (payload.sourceId && payload.sourceId !== 'canvas-preview') {
@@ -3468,6 +3483,7 @@ class BuilderComponent {
             }
             this.layout.splice(insertIndex, 0, item);
             this.cdr.markForCheck();
+            this._selectAfterDrop(item);
             return;
         }
         // Same-container reorder (canvas root).
@@ -3477,6 +3493,7 @@ class BuilderComponent {
             this.layout.splice(currentIdx, 1);
             this.layout.splice(adjustedIdx, 0, item);
             this.cdr.markForCheck();
+            this._selectAfterDrop(item);
         }
     }
     onModeChange(mode) {
@@ -3549,6 +3566,19 @@ class BuilderComponent {
         this.selectPanel(PanelTypes.STYLES);
         this.panelEventService.emit(PanelEventTypes.ELEMENT_SELECT, { node: event.node, componentRef: event.componentRef });
     }
+    _selectAfterDrop(node) {
+        // Wait one tick for Angular to render the new component and register it
+        // in the overlay before attempting to select it.
+        setTimeout(() => {
+            const ref = this.overlayService.getNodeRef(node);
+            if (!ref)
+                return;
+            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 });
+        });
+    }
     handleMouseEnter(event) {
         if (this.isDragging || this.activeMode === BuilderMode.Pan)
             return;
@@ -3638,7 +3668,9 @@ class BuilderComponent {
                 break;
             }
             case ToolbarAction.SaveAsBlock: {
-                this.pendingBlockNode = node;
+                const blockClone = JSON.parse(JSON.stringify(node));
+                this._stripGlobalFlags(blockClone);
+                this.pendingBlockNode = blockClone;
                 this.saveBlockName = '';
                 this.showSaveBlockDialog = true;
                 break;
@@ -3716,6 +3748,11 @@ class BuilderComponent {
             node.styleId = Math.random().toString(36).slice(2, 10);
         node.children?.forEach(child => this.assignNewIds(child));
     }
+    _stripGlobalFlags(node) {
+        node.isGlobal = false;
+        node.globalPosition = undefined;
+        node.children?.forEach(c => this._stripGlobalFlags(c));
+    }
     onPageScroll(event) {
         const contentH = event.scrollHeight;
         const wrapperH = event.clientHeight;
@@ -3917,7 +3954,7 @@ class SectionComponent {
                 </ng-container>
             </div>
         </div>
-    `, isInline: true, styles: [".section-root{position:relative;box-sizing:border-box}.section-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0}.section-placeholder i{font-size:22px}.section-child{min-width:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
+    `, isInline: true, styles: [".section-root{position:relative;box-sizing:border-box}.section-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0;opacity:0;transition:opacity .15s}.section-root:hover .section-placeholder,.section-root.iox-drag-over .section-placeholder{opacity:1}.section-placeholder i{font-size:22px}.section-child{min-width:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SectionComponent, decorators: [{
             type: Component,
@@ -3947,7 +3984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 </ng-container>
             </div>
         </div>
-    `, standalone: false, styles: [".section-root{position:relative;box-sizing:border-box}.section-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0}.section-placeholder i{font-size:22px}.section-child{min-width:0}\n"] }]
+    `, standalone: false, styles: [".section-root{position:relative;box-sizing:border-box}.section-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0;opacity:0;transition:opacity .15s}.section-root:hover .section-placeholder,.section-root.iox-drag-over .section-placeholder{opacity:1}.section-placeholder i{font-size:22px}.section-child{min-width:0}\n"] }]
         }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
                 type: Input
             }], style: [{
@@ -4026,7 +4063,7 @@ class BuilderContainerComponent {
             @case ('li')      { <li      class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></li> }
             @default          { <div     class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></div> }
         }
-    `, isInline: true, styles: [".container-root{position:relative;box-sizing:border-box}.container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0}.container-placeholder i{font-size:18px}.container-child{min-width:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
+    `, isInline: true, styles: [".container-root{position:relative;box-sizing:border-box}.container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0;opacity:0;transition:opacity .15s}.container-root:hover .container-placeholder,.container-root.iox-drag-over .container-placeholder{opacity:1}.container-placeholder i{font-size:18px}.container-child{min-width:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderContainerComponent, decorators: [{
             type: Component,
@@ -4062,7 +4099,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             @case ('li')      { <li      class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></li> }
             @default          { <div     class="container-root" [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']" ioxDropzone [ioxDropzoneId]="dropListId" [ioxDropzoneData]="children" (ioxDrop)="onDrop($event)"><ng-container [ngTemplateOutlet]="dropContent"></ng-container></div> }
         }
-    `, standalone: false, styles: [".container-root{position:relative;box-sizing:border-box}.container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0}.container-placeholder i{font-size:18px}.container-child{min-width:0}\n"] }]
+    `, standalone: false, styles: [".container-root{position:relative;box-sizing:border-box}.container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0;opacity:0;transition:opacity .15s}.container-root:hover .container-placeholder,.container-root.iox-drag-over .container-placeholder{opacity:1}.container-placeholder i{font-size:18px}.container-child{min-width:0}\n"] }]
         }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
                 type: Input
             }], style: [{
@@ -4161,7 +4198,7 @@ class BuilderLinkedContainerComponent {
                 </ng-container>
             </div>
         </a>
-    `, isInline: true, styles: [".linked-container-root{display:block;position:relative;box-sizing:border-box;text-decoration:none;color:inherit;cursor:pointer}.linked-container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.linked-container-placeholder i{font-size:18px}.linked-container-child{min-width:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
+    `, isInline: true, styles: [".linked-container-root{display:block;position:relative;box-sizing:border-box;text-decoration:none;color:inherit;cursor:pointer}.linked-container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity .15s}.linked-container-root:hover .linked-container-placeholder,.linked-container-root.iox-drag-over .linked-container-placeholder{opacity:1}.linked-container-placeholder i{font-size:18px}.linked-container-child{min-width:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderLinkedContainerComponent, decorators: [{
             type: Component,
@@ -4194,7 +4231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 </ng-container>
             </div>
         </a>
-    `, standalone: false, styles: [".linked-container-root{display:block;position:relative;box-sizing:border-box;text-decoration:none;color:inherit;cursor:pointer}.linked-container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.linked-container-placeholder i{font-size:18px}.linked-container-child{min-width:0}\n"] }]
+    `, standalone: false, styles: [".linked-container-root{display:block;position:relative;box-sizing:border-box;text-decoration:none;color:inherit;cursor:pointer}.linked-container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity .15s}.linked-container-root:hover .linked-container-placeholder,.linked-container-root.iox-drag-over .linked-container-placeholder{opacity:1}.linked-container-placeholder i{font-size:18px}.linked-container-child{min-width:0}\n"] }]
         }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {