@vectoriox/iox-builder 1.7.1 → 1.7.3

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1889,6 +1889,10 @@ class MoveableCanvasService {
         this.sourceId = this.resolveDropzoneId(element);
         this.ensureMoveable();
         this.moveable.target = element;
+        // Drag is initiated by grabbing the ELEMENT itself (like interact.js) — not a Moveable
+        // overlay area — so a plain click still passes through to selection/child-selection and only
+        // a movement past the threshold starts a drag. Keeps Moveable visually silent (no hit-area box).
+        this.moveable.dragTarget = element;
         this.moveable.updateRect();
     }
     /** Recompute the control-box position (call on scroll/zoom/layout changes). */
@@ -2854,6 +2858,8 @@ let dropListCounter = 0;
  */
 const DIRECTIVE_HOST_TYPES = new Set([
     'Image', 'Icon', 'Divider', 'Spacer', 'Button', 'Link', 'Heading', 'Text', 'ButtonBlock',
+    // Phase 2 (9c): layout components converted to directive-hosts (host IS the real tag).
+    'Section',
 ]);
 /**
  * RenderDirective — applied to <ng-container> to dynamically instantiate a
@@ -4893,42 +4899,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 args: ['globalOverlay']
             }] } });
 
-class IoxDropzoneDirective {
-    constructor(el, dragEngine, cdr) {
-        this.el = el;
-        this.dragEngine = dragEngine;
-        this.cdr = cdr;
-        this.ioxDropzoneId = '';
-        this.ioxDropzoneData = [];
-        this.ioxDrop = new EventEmitter();
-    }
-    ngOnInit() {
-        this.dragEngine.registerDropzone(this.ioxDropzoneId, this.el.nativeElement, this.ioxDropzoneData, this.cdr, (evt) => this.ioxDrop.emit(evt), this.ioxDropzonePostDrop);
-    }
-    ngOnDestroy() {
-        this.dragEngine.unregisterDropzone(this.ioxDropzoneId, this.el.nativeElement);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxDropzoneDirective, deps: [{ token: i0.ElementRef }, { token: DragEngineService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: IoxDropzoneDirective, isStandalone: false, selector: "[ioxDropzone]", inputs: { ioxDropzoneId: "ioxDropzoneId", ioxDropzoneData: "ioxDropzoneData", ioxDropzonePostDrop: "ioxDropzonePostDrop" }, outputs: { ioxDrop: "ioxDrop" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxDropzoneDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ioxDropzone]',
-                    standalone: false,
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { ioxDropzoneId: [{
-                type: Input
-            }], ioxDropzoneData: [{
-                type: Input
-            }], ioxDropzonePostDrop: [{
-                type: Input
-            }], ioxDrop: [{
-                type: Output
-            }] } });
-
+/**
+ * Directive-host Section (Phase 2 of the Moveable migration = task 9c). The `<section>` IS the host
+ * (no `<app-section>` wrapper, no separate `.section-root`) — matching the SSR engine's
+ * `section[iox-section]`. The dropzone is registered on the host element itself (was the ioxDropzone
+ * directive on `.section-root`); the `.section-child` draggable wrappers are UNCHANGED, so interact.js
+ * (flag-off) keeps working exactly as before. See moveable-migration.md.
+ */
 class SectionComponent {
-    constructor(dragEngine, cdr) {
+    constructor(elRef, dragEngine, cdr) {
+        this.elRef = elRef;
         this.dragEngine = dragEngine;
         this.cdr = cdr;
         this.children = [];
@@ -4939,7 +4919,13 @@ class SectionComponent {
         this.childMouseEnter = new EventEmitter();
         this.childMouseLeave = new EventEmitter();
     }
-    ngOnInit() { }
+    ngOnInit() {
+        // Register the HOST as the dropzone (was the ioxDropzone directive on `.section-root`).
+        this.dragEngine.registerDropzone(this.dropListId, this.elRef.nativeElement, this.children, this.cdr, (evt) => this.onDrop(evt));
+    }
+    ngOnDestroy() {
+        this.dragEngine.unregisterDropzone(this.dropListId, this.elRef.nativeElement);
+    }
     get listOrientation() {
         const d = this.style?.['display'];
         if (d === 'flex' || d === 'inline-flex') {
@@ -4949,69 +4935,54 @@ class SectionComponent {
         }
         return 'vertical';
     }
-    ngOnDestroy() { }
     onDrop(event) {
         this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SectionComponent, deps: [{ token: DragEngineService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: SectionComponent, isStandalone: false, selector: "app-section", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
-        <section class="section-root"
-             [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']"
-             ioxDropzone
-             [ioxDropzoneId]="dropListId"
-             [ioxDropzoneData]="children"
-             (ioxDrop)="onDrop($event)">
-
-            <div *ngIf="!children.length" class="section-placeholder">
-                <i class="ph-thin ph-rows"></i>
-                <span>Drop components here</span>
-            </div>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SectionComponent, deps: [{ token: i0.ElementRef }, { token: DragEngineService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: SectionComponent, isStandalone: false, selector: "section[iox-section]", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, host: { properties: { "class": "'section-root iox-node-' + nodeId + (listOrientation === 'horizontal' ? ' is-horizontal' : '')" } }, ngImport: i0, template: `
+        <div *ngIf="!children.length" class="section-placeholder">
+            <i class="ph-thin ph-rows"></i>
+            <span>Drop components here</span>
+        </div>
 
-            <div *ngFor="let child of children"
-                 [ngClass]="['section-child', 'iox-outer-' + (child.styleId ?? child.id)]"
-                 ioxDraggable
-                 [ioxDragData]="child"
-                 [ioxDragSourceId]="dropListId">
-                <ng-container
-                    [ioxRender]="child"
-                    (onClick)="childClick.emit($event)"
-                    (onMouseEnter)="childMouseEnter.emit($event)"
-                    (onMouseLeave)="childMouseLeave.emit()">
-                </ng-container>
-            </div>
-        </section>
-    `, 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"] }] }); }
+        <div *ngFor="let child of children"
+             [ngClass]="['section-child', 'iox-outer-' + (child.styleId ?? child.id)]"
+             ioxDraggable
+             [ioxDragData]="child"
+             [ioxDragSourceId]="dropListId">
+            <ng-container
+                [ioxRender]="child"
+                (onClick)="childClick.emit($event)"
+                (onMouseEnter)="childMouseEnter.emit($event)"
+                (onMouseLeave)="childMouseLeave.emit()">
+            </ng-container>
+        </div>
+    `, isInline: true, styles: [":host{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}:host(:hover) .section-placeholder,:host(.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-section', template: `
-        <section class="section-root"
-             [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']"
-             ioxDropzone
-             [ioxDropzoneId]="dropListId"
-             [ioxDropzoneData]="children"
-             (ioxDrop)="onDrop($event)">
-
-            <div *ngIf="!children.length" class="section-placeholder">
-                <i class="ph-thin ph-rows"></i>
-                <span>Drop components here</span>
-            </div>
+            args: [{ selector: 'section[iox-section]', template: `
+        <div *ngIf="!children.length" class="section-placeholder">
+            <i class="ph-thin ph-rows"></i>
+            <span>Drop components here</span>
+        </div>
 
-            <div *ngFor="let child of children"
-                 [ngClass]="['section-child', 'iox-outer-' + (child.styleId ?? child.id)]"
-                 ioxDraggable
-                 [ioxDragData]="child"
-                 [ioxDragSourceId]="dropListId">
-                <ng-container
-                    [ioxRender]="child"
-                    (onClick)="childClick.emit($event)"
-                    (onMouseEnter)="childMouseEnter.emit($event)"
-                    (onMouseLeave)="childMouseLeave.emit()">
-                </ng-container>
-            </div>
-        </section>
-    `, 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: [{
+        <div *ngFor="let child of children"
+             [ngClass]="['section-child', 'iox-outer-' + (child.styleId ?? child.id)]"
+             ioxDraggable
+             [ioxDragData]="child"
+             [ioxDragSourceId]="dropListId">
+            <ng-container
+                [ioxRender]="child"
+                (onClick)="childClick.emit($event)"
+                (onMouseEnter)="childMouseEnter.emit($event)"
+                (onMouseLeave)="childMouseLeave.emit()">
+            </ng-container>
+        </div>
+    `, host: {
+                        '[class]': "'section-root iox-node-' + nodeId + (listOrientation === 'horizontal' ? ' is-horizontal' : '')",
+                    }, standalone: false, styles: [":host{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}:host(:hover) .section-placeholder,:host(.iox-drag-over) .section-placeholder{opacity:1}.section-placeholder i{font-size:22px}.section-child{min-width:0}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
                 type: Input
             }], style: [{
                 type: Input
@@ -5027,6 +4998,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 type: Output
             }] } });
 
+class IoxDropzoneDirective {
+    constructor(el, dragEngine, cdr) {
+        this.el = el;
+        this.dragEngine = dragEngine;
+        this.cdr = cdr;
+        this.ioxDropzoneId = '';
+        this.ioxDropzoneData = [];
+        this.ioxDrop = new EventEmitter();
+    }
+    ngOnInit() {
+        this.dragEngine.registerDropzone(this.ioxDropzoneId, this.el.nativeElement, this.ioxDropzoneData, this.cdr, (evt) => this.ioxDrop.emit(evt), this.ioxDropzonePostDrop);
+    }
+    ngOnDestroy() {
+        this.dragEngine.unregisterDropzone(this.ioxDropzoneId, this.el.nativeElement);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxDropzoneDirective, deps: [{ token: i0.ElementRef }, { token: DragEngineService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: IoxDropzoneDirective, isStandalone: false, selector: "[ioxDropzone]", inputs: { ioxDropzoneId: "ioxDropzoneId", ioxDropzoneData: "ioxDropzoneData", ioxDropzonePostDrop: "ioxDropzonePostDrop" }, outputs: { ioxDrop: "ioxDrop" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxDropzoneDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ioxDropzone]',
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { ioxDropzoneId: [{
+                type: Input
+            }], ioxDropzoneData: [{
+                type: Input
+            }], ioxDropzonePostDrop: [{
+                type: Input
+            }], ioxDrop: [{
+                type: Output
+            }] } });
+
 class BuilderContainerComponent {
     constructor(dragEngine, cdr) {
         this.dragEngine = dragEngine;