@vectoriox/iox-builder 1.6.13 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectoriox/iox-builder",
-  "version": "1.6.13",
+  "version": "1.7.0",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",
@@ -9,7 +9,9 @@
     "@vectoriox/iox-ui": ">=4.2.0",
     "interactjs": "^1.10.27",
     "primeng": ">=20.0.0",
-    "swiper": ">=12.0.0"
+    "swiper": ">=12.0.0",
+    "moveable": "^0.53.0",
+    "selecto": "^1.26.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/types/vectoriox-iox-builder.d.ts

@@ -740,6 +740,54 @@ declare class DragEngineService {
     static ɵprov: i0.ɵɵInjectableDeclaration<DragEngineService>;
 }
 
+/**
+ * MoveableCanvasService — Phase 1 of the Moveable + Selecto migration
+ * (see iox-ai-guidance/architecture/builder/moveable-migration.md).
+ *
+ * Drives DRAG for the SELECTED element via Moveable instead of interact.js, while REUSING the
+ * proven reorder machinery (`DragEngineService.handleDrop`). It is a pure INPUT device: during a
+ * drag it applies a TRANSIENT transform, and on drop it RESETS the transform to nothing and instead
+ * reorders the layout tree (constraint C1 — a persisted transform on an in-flow canvas element
+ * breaks Lenis scroll). Everything here runs ONLY when `moveableMode` is on; interact.js is
+ * untouched, so the flag-off path is byte-identical to today.
+ *
+ * Scale: Moveable reads `getBoundingClientRect()` (already post-scale) and works in viewport
+ * client coordinates, so drop hit-testing via `elementsFromPoint` / rects is scale-correct without
+ * extra math. The control box is rendered into the same overlay container the selection overlay uses.
+ */
+declare class MoveableCanvasService {
+    private dragEngine;
+    private moveable;
+    private container;
+    private scaleGetter;
+    private target;
+    private node;
+    private sourceId;
+    /** Called after a successful reorder so the host can emit LAYOUT_CHANGED / refresh selection. */
+    onReorder: (() => void) | null;
+    constructor(dragEngine: DragEngineService);
+    /** Wire the Moveable control box into `container`; `scaleGetter` returns the live canvas zoom. */
+    init(container: HTMLElement, scaleGetter: () => number): void;
+    /** Point Moveable at the selected element (skips inline-edit + preview-clone targets). */
+    select(element: HTMLElement | null, node: ComponentNode | null): void;
+    /** Recompute the control-box position (call on scroll/zoom/layout changes). */
+    refresh(): void;
+    destroy(): void;
+    private ensureMoveable;
+    private destroyMoveable;
+    private commitDrag;
+    /** Final pointer position from the Moveable end event (client/viewport px). */
+    private lastPointer;
+    /** Walk up from an element to the nearest registered dropzone id (el.id is stamped by DragEngine). */
+    private resolveDropzoneId;
+    /** Topmost registered dropzone under the pointer that is NOT inside the dragged element's subtree. */
+    private dropzoneUnderPoint;
+    /** Insertion index within a dropzone by comparing pointer Y to each child's vertical midpoint. */
+    private calcInsertIndex;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MoveableCanvasService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MoveableCanvasService>;
+}
+
 /**
  * Page-scoped registry that holds the current page's data sources.
  * Scoped to PageUiComponent.providers[] so every builder service
@@ -957,6 +1005,7 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     private symbolRegistry;
     private cdr;
     private appRef;
+    private moveableCanvas;
     layout: ComponentNode[];
     dataSources: IoxDataSource[];
     orgId: string;
@@ -968,6 +1017,10 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     globalElements: ComponentNode[];
     canUndo: boolean;
     canRedo: boolean;
+    /** Feature flag: drive drag/select/resize via Moveable + Selecto instead of interact.js.
+     *  Default OFF — the proven interact.js path is unchanged until cutover. See
+     *  iox-ai-guidance/architecture/builder/moveable-migration.md. */
+    moveableMode: boolean;
     save: EventEmitter<void>;
     undo: EventEmitter<void>;
     redo: EventEmitter<void>;
@@ -1049,7 +1102,7 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     get canvasMinHeight(): number;
     private sub?;
     private registrySub?;
-    constructor(registry: ComponentRegistryService, overlayService: OverlayService, panelEventService: PanelEventService, dragEngine: DragEngineService, dsRegistry: DataSourceRegistryService, viewportService: ViewportService, interactionEngine: InteractionEngineService, interactionPresetRegistry: InteractionPresetRegistryService, clipboard: BuilderClipboardService, symbolRegistry: SymbolRegistryService, cdr: ChangeDetectorRef, appRef: ApplicationRef);
+    constructor(registry: ComponentRegistryService, overlayService: OverlayService, panelEventService: PanelEventService, dragEngine: DragEngineService, dsRegistry: DataSourceRegistryService, viewportService: ViewportService, interactionEngine: InteractionEngineService, interactionPresetRegistry: InteractionPresetRegistryService, clipboard: BuilderClipboardService, symbolRegistry: SymbolRegistryService, cdr: ChangeDetectorRef, appRef: ApplicationRef, moveableCanvas: MoveableCanvasService);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
@@ -1111,7 +1164,7 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     private findSymbolAncestorOf;
     private handlePanelEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<BuilderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BuilderComponent, "app-builder", never, { "layout": { "alias": "layout"; "required": false; }; "dataSources": { "alias": "dataSources"; "required": false; }; "orgId": { "alias": "orgId"; "required": false; }; "routeParams": { "alias": "routeParams"; "required": false; }; "pageName": { "alias": "pageName"; "required": false; }; "isSaving": { "alias": "isSaving"; "required": false; }; "pageStatus": { "alias": "pageStatus"; "required": false; }; "pageSettings": { "alias": "pageSettings"; "required": false; }; "globalElements": { "alias": "globalElements"; "required": false; }; "canUndo": { "alias": "canUndo"; "required": false; }; "canRedo": { "alias": "canRedo"; "required": false; }; }, { "save": "save"; "undo": "undo"; "redo": "redo"; "back": "back"; "preview": "preview"; "publishToggle": "publishToggle"; "pageSettingsChange": "pageSettingsChange"; "applyAnimationToAll": "applyAnimationToAll"; "saveBlock": "saveBlock"; "globalElementsChange": "globalElementsChange"; }, never, ["[builderComponents]", "[builderTokens]", "[builderPanel]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BuilderComponent, "app-builder", never, { "layout": { "alias": "layout"; "required": false; }; "dataSources": { "alias": "dataSources"; "required": false; }; "orgId": { "alias": "orgId"; "required": false; }; "routeParams": { "alias": "routeParams"; "required": false; }; "pageName": { "alias": "pageName"; "required": false; }; "isSaving": { "alias": "isSaving"; "required": false; }; "pageStatus": { "alias": "pageStatus"; "required": false; }; "pageSettings": { "alias": "pageSettings"; "required": false; }; "globalElements": { "alias": "globalElements"; "required": false; }; "canUndo": { "alias": "canUndo"; "required": false; }; "canRedo": { "alias": "canRedo"; "required": false; }; "moveableMode": { "alias": "moveableMode"; "required": false; }; }, { "save": "save"; "undo": "undo"; "redo": "redo"; "back": "back"; "preview": "preview"; "publishToggle": "publishToggle"; "pageSettingsChange": "pageSettingsChange"; "applyAnimationToAll": "applyAnimationToAll"; "saveBlock": "saveBlock"; "globalElementsChange": "globalElementsChange"; }, never, ["[builderComponents]", "[builderTokens]", "[builderPanel]"], false, never>;
 }
 
 /**