svelte-flexiboards 0.3.2 → 0.4.1

package/dist/system/board/controller.svelte.js

@@ -1,8 +1,12 @@
 import { getFlexiEventBus } from '../shared/event-bus.js';
 import { AutoScrollService, getPointerService } from '../shared/utils.svelte.js';
 import { InternalFlexiTargetController } from '../target/controller.svelte.js';
+import { getInternalResponsiveFlexiboardCtx, hasInternalResponsiveFlexiboardCtx } from '../responsive/index.js';
 export class InternalFlexiBoardController {
     #currentWidgetAction = $state(null);
+    #activeInterpolations = $state(0);
+    #scrollbarCompensation = $state(0);
+    #hasScrollbarCompensation = false;
     #targets = new Map();
     hoveredTarget = null;
     #hoveredOverDeleter = $state(false);
@@ -11,24 +15,95 @@ export class InternalFlexiBoardController {
     #autoScrollService = new AutoScrollService(this.#ref);
     #rawProps = $state(undefined);
     config = $derived(this.#rawProps?.config);
+    registry = $derived(this.#rawProps?.config?.registry);
     #nextTargetIndex = 0;
-    #storedLoadLayout = null;
     #ready = false;
+    #storedLoadLayout;
     portal = null;
     #announcer = null;
     #eventBus;
     #unsubscribers = [];
+    #layoutChangeTimeout = null;
+    #layoutChangeDebounceMs = 150;
+    breakpoint;
+    /**
+     * Reference to the parent responsive controller, if this board is within a ResponsiveFlexiBoard.
+     */
+    #responsiveController = null;
     constructor(props) {
         // Track the props proxy so our config reactively updates.
         this.#rawProps = props;
         this.#eventBus = getFlexiEventBus();
-        this.#unsubscribers.push(this.#eventBus.subscribe('widget:grabbed', this.onWidgetGrabbed.bind(this)), this.#eventBus.subscribe('widget:resizing', this.onWidgetResizing.bind(this)), this.#eventBus.subscribe('widget:release', this.handleWidgetRelease.bind(this)), this.#eventBus.subscribe('widget:cancel', this.handleWidgetCancel.bind(this)), this.#eventBus.subscribe('target:pointerenter', this.onPointerEnterTarget.bind(this)), this.#eventBus.subscribe('target:pointerleave', this.onPointerLeaveTarget.bind(this)));
+        // Check if we're inside a responsive context
+        if (hasInternalResponsiveFlexiboardCtx()) {
+            this.#responsiveController = getInternalResponsiveFlexiboardCtx();
+            // Infer breakpoint from responsive controller's current state
+            this.breakpoint = this.#responsiveController.currentBreakpoint;
+        }
+        else {
+            // Not in responsive context - use config breakpoint if provided (with warning)
+            this.breakpoint = this.#rawProps?.config?.breakpoint;
+            if (this.breakpoint) {
+                console.warn('Breakpoint is set for a non-responsive board. Ignoring breakpoint.');
+            }
+        }
+        this.#unsubscribers.push(this.#eventBus.subscribe('widget:grabbed', this.onWidgetGrabbed.bind(this)), this.#eventBus.subscribe('widget:resizing', this.onWidgetResizing.bind(this)), this.#eventBus.subscribe('widget:release', this.handleWidgetRelease.bind(this)), this.#eventBus.subscribe('widget:cancel', this.handleWidgetCancel.bind(this)), this.#eventBus.subscribe('target:pointerenter', this.onPointerEnterTarget.bind(this)), this.#eventBus.subscribe('target:pointerleave', this.onPointerLeaveTarget.bind(this)), 
+        // Layout change events
+        this.#eventBus.subscribe('widget:dropped', this.#onLayoutChange.bind(this)), this.#eventBus.subscribe('widget:delete', this.#onLayoutChange.bind(this)), 
+        // Responsive layout import events
+        this.#eventBus.subscribe('responsive:layoutimport', this.#onResponsiveLayoutImport.bind(this)));
+    }
+    #onLayoutChange(event) {
+        // Not our event
+        if (event.board !== this) {
+            return;
+        }
+        // No point exporting if nobody is listening
+        if (!this.config?.onLayoutChange && !this.#responsiveController) {
+            return;
+        }
+        // Debounce the callback
+        if (this.#layoutChangeTimeout) {
+            clearTimeout(this.#layoutChangeTimeout);
+        }
+        this.#layoutChangeTimeout = setTimeout(() => {
+            this.#layoutChangeTimeout = null;
+            const layout = this.#exportLayoutInternal();
+            // Emit event for responsive controller (and any other listeners)
+            this.#eventBus.dispatch('board:layoutchange', {
+                board: this,
+                layout,
+                breakpoint: this.breakpoint
+            });
+            // Also call local callback if provided
+            this.config?.onLayoutChange?.(layout);
+        }, this.#layoutChangeDebounceMs);
+    }
+    #onResponsiveLayoutImport(event) {
+        // Not our responsive controller
+        if (event.responsiveController !== this.#responsiveController) {
+            return;
+        }
+        // Get the layout for our breakpoint and import it
+        if (this.breakpoint) {
+            const layout = this.#responsiveController?.getLayoutForBreakpoint(this.breakpoint);
+            if (layout) {
+                this.#importLayoutInternal(layout);
+            }
+        }
     }
     style = $derived.by(() => {
+        const needsOverflowLock = this.#activeInterpolations > 0 || this.#currentWidgetAction;
+        const scrollbarPadding = this.#scrollbarCompensation > 0
+            ? ` padding-right: ${this.#scrollbarCompensation}px;`
+            : '';
+        const overflow = needsOverflowLock
+            ? ` overflow: hidden;${scrollbarPadding}`
+            : '';
         if (!this.#currentWidgetAction) {
-            return 'position: relative;';
+            return `position: relative;${overflow}`;
         }
-        return `position: relative; ${this.#getStyleForCurrentWidgetAction()}`;
+        return `position: relative;${overflow} ${this.#getStyleForCurrentWidgetAction()}`;
     });
     #getStyleForCurrentWidgetAction() {
         if (!this.#currentWidgetAction) {
@@ -41,6 +116,35 @@ export class InternalFlexiBoardController {
                 return `cursor: nwse-resize;`;
         }
     }
+    notifyInterpolationStarted() {
+        this.#captureScrollbarWidthIfNeeded();
+        this.#activeInterpolations++;
+    }
+    notifyInterpolationEnded() {
+        this.#activeInterpolations = Math.max(0, this.#activeInterpolations - 1);
+        this.#scheduleScrollbarCompensationRelease();
+    }
+    #captureScrollbarWidthIfNeeded() {
+        if (this.#hasScrollbarCompensation) {
+            return;
+        }
+        if (this.ref) {
+            const scrollbarWidth = this.ref.offsetWidth - this.ref.clientWidth;
+            if (scrollbarWidth > 0) {
+                const existingPadding = parseFloat(getComputedStyle(this.ref).paddingRight) || 0;
+                this.#scrollbarCompensation = existingPadding + scrollbarWidth;
+            }
+            this.#hasScrollbarCompensation = true;
+        }
+    }
+    #scheduleScrollbarCompensationRelease() {
+        queueMicrotask(() => {
+            if (this.#activeInterpolations === 0 && !this.#currentWidgetAction) {
+                this.#scrollbarCompensation = 0;
+                this.#hasScrollbarCompensation = false;
+            }
+        });
+    }
     get ref() {
         return this.#ref.value;
     }
@@ -102,6 +206,7 @@ export class InternalFlexiBoardController {
         if (this.#currentWidgetAction || event.board !== this) {
             return;
         }
+        this.#captureScrollbarWidthIfNeeded();
         if (event.clientX !== undefined && event.clientY !== undefined) {
             this.#pointerService.updatePosition(event.clientX, event.clientY);
         }
@@ -121,6 +226,7 @@ export class InternalFlexiBoardController {
         if (this.#currentWidgetAction || event.board !== this) {
             return;
         }
+        this.#captureScrollbarWidthIfNeeded();
         this.#currentWidgetAction = {
             action: 'resize',
             widget: event.widget,
@@ -160,6 +266,8 @@ export class InternalFlexiBoardController {
         }
         this.#unlockViewport();
         const currentAction = this.#currentWidgetAction;
+        // Capture source target before any handlers might change widget.internalTarget
+        const sourceTarget = currentAction.widget.internalTarget;
         switch (currentAction.action) {
             case 'grab':
                 this.#handleGrabbedWidgetRelease(currentAction);
@@ -168,10 +276,34 @@ export class InternalFlexiBoardController {
                 this.#handleResizingWidgetRelease(currentAction);
                 break;
         }
+        // Safety net: After all synchronous handlers complete, check if the source target
+        // still has a pre-grab snapshot (meaning the drop didn't happen). If so, restore it.
+        // This handles the case where the widget was released outside of all targets.
+        queueMicrotask(() => {
+            if (sourceTarget?.hasPreGrabSnapshot()) {
+                sourceTarget.restorePreGrabSnapshot();
+                sourceTarget.applyGridPostCompletionOperations();
+            }
+        });
     }
     handleWidgetCancel(event) {
+        // Not our event.
+        if (event.board !== this) {
+            return;
+        }
         this.#unlockViewport();
+        // Capture source target before releasing the action
+        const sourceTarget = this.#currentWidgetAction?.widget.internalTarget;
         this.#releaseCurrentWidgetAction();
+        // Safety net: After all synchronous handlers complete, check if the source target
+        // still has a pre-grab snapshot. If so, restore it.
+        // This handles the case where the widget was cancelled while outside of all targets.
+        queueMicrotask(() => {
+            if (sourceTarget?.hasPreGrabSnapshot()) {
+                sourceTarget.restorePreGrabSnapshot();
+                sourceTarget.applyGridPostCompletionOperations();
+            }
+        });
     }
     attachAnnouncer(announcer) {
         this.#announcer = announcer;
@@ -183,30 +315,95 @@ export class InternalFlexiBoardController {
     }
     oninitialloadcomplete() {
         this.#ready = true;
-        // if(this.#storedLoadLayout) {
-        // 	this.importLayout(this.#storedLoadLayout);
-        // }
-    }
-    // NEXT: Add import/export layout.
-    // importLayout(layout: FlexiSavedLayout) {
-    // 	// The board isn't ready to import widgets yet, so we'll store the layout and import it later.
-    // 	if(!this.#ready) {
-    // 		this.#storedLoadLayout = layout;
-    // 		return;
-    // 	}
-    // 	// Good to go - import the widgets into their respective targets.
-    // 	this.#targets.forEach(target => {
-    // 		target.importLayout(layout[target.key]);
-    // 	});
-    // }
-    // exportLayout(): FlexiSavedLayout {
-    // 	const result: FlexiSavedLayout = {};
-    // 	// Grab the current layout of each target.
-    // 	this.#targets.forEach(target => {
-    // 		result[target.key] = target.exportLayout();
-    // 	});
-    // 	return result;
-    // }
+        // Check for stored layout from early import attempt
+        if (this.#storedLoadLayout) {
+            this.#importLayoutInternal(this.#storedLoadLayout);
+            this.#storedLoadLayout = undefined;
+            return;
+        }
+        // If in responsive context, load from responsive controller
+        if (this.#responsiveController && this.breakpoint) {
+            const layout = this.#responsiveController.getLayoutForBreakpoint(this.breakpoint);
+            if (layout) {
+                this.#importLayoutInternal(layout);
+                return;
+            }
+            // Fall through to loadLayout callback if no stored layout for this breakpoint
+        }
+        // Check for loadLayout in config (for non-responsive boards OR first-time breakpoint)
+        const loadLayoutFn = this.config?.loadLayout;
+        if (loadLayoutFn) {
+            const layout = loadLayoutFn();
+            if (layout) {
+                this.#importLayoutInternal(this.#normalizeLayout(layout));
+            }
+        }
+    }
+    /**
+     * Imports a layout into this board.
+     *
+     * **Note**: If this board is under a ResponsiveFlexiBoard, prefer using
+     * `responsiveBoard.importLayout()` to import layouts for all breakpoints.
+     */
+    importLayout(layout) {
+        if (this.#responsiveController) {
+            console.warn('importLayout() called directly on a FlexiBoard under ResponsiveFlexiBoard. ' +
+                'Use responsiveBoard.importLayout() instead to import layouts for all breakpoints.');
+        }
+        this.#importLayoutInternal(layout);
+    }
+    /**
+     * Internal implementation of importLayout - no warning, used by responsive controller.
+     */
+    #importLayoutInternal(layout) {
+        // The board isn't ready to import widgets yet, so we'll store the layout and import it later.
+        if (!this.#ready) {
+            this.#storedLoadLayout = layout;
+            return;
+        }
+        // Good to go - import the widgets into their respective targets.
+        this.#targets.forEach(target => {
+            const targetLayout = layout[target.key];
+            if (targetLayout) {
+                target.importLayout(targetLayout);
+            }
+        });
+    }
+    #normalizeLayout(layout) {
+        // If it's an array, assume single target (first one)
+        if (Array.isArray(layout)) {
+            const firstTargetKey = this.#targets.keys().next().value;
+            if (firstTargetKey) {
+                return { [firstTargetKey]: layout };
+            }
+            return {};
+        }
+        return layout;
+    }
+    /**
+     * Exports the current layout from this board.
+     *
+     * **Note**: If this board is under a ResponsiveFlexiBoard, prefer using
+     * `responsiveBoard.exportLayout()` to export layouts for all breakpoints.
+     */
+    exportLayout() {
+        if (this.#responsiveController) {
+            console.warn('exportLayout() called directly on a FlexiBoard under ResponsiveFlexiBoard. ' +
+                'Use responsiveBoard.exportLayout() instead to export layouts for all breakpoints.');
+        }
+        return this.#exportLayoutInternal();
+    }
+    /**
+     * Internal implementation of exportLayout - no warning, used internally.
+     */
+    #exportLayoutInternal() {
+        const result = {};
+        // Grab the current layout of each target.
+        this.#targets.forEach(target => {
+            result[target.key] = target.exportLayout();
+        });
+        return result;
+    }
     #handleGrabbedWidgetRelease(action) {
         // If a deleter is hovered, then we'll delete the widget.
         if (this.#hoveredOverDeleter) {
@@ -230,6 +427,7 @@ export class InternalFlexiBoardController {
         }
         this.announce(`You have released the widget.`);
         this.#currentWidgetAction = null;
+        this.#scheduleScrollbarCompensationRelease();
     }
     /**
      * Moves a widget from one target to another.
@@ -258,6 +456,12 @@ export class InternalFlexiBoardController {
     get currentWidgetAction() {
         return this.#currentWidgetAction;
     }
+    /**
+     * Returns the parent responsive controller if this board is within a ResponsiveFlexiBoard.
+     */
+    get responsiveController() {
+        return this.#responsiveController;
+    }
     /**
      * Cleanup method to be called when the board is destroyed
      */
@@ -268,5 +472,10 @@ export class InternalFlexiBoardController {
         // Clean up event subscriptions
         this.#unsubscribers.forEach((unsubscribe) => unsubscribe());
         this.#unsubscribers = [];
+        // Clean up any pending layout change timeout
+        if (this.#layoutChangeTimeout) {
+            clearTimeout(this.#layoutChangeTimeout);
+            this.#layoutChangeTimeout = null;
+        }
     }
 }

package/dist/system/board/types.d.ts

@@ -1,6 +1,32 @@
 import type { FlexiTargetDefaults } from '../target/types.js';
 import type { FlexiWidgetDefaults } from '../widget/types.js';
+export type FlexiLayoutChangeFn = (layout: FlexiLayout) => void;
 export type FlexiBoardConfiguration = {
     widgetDefaults?: FlexiWidgetDefaults;
     targetDefaults?: FlexiTargetDefaults;
+    /**
+     * Optional breakpoint override.
+     *
+     * When this board is inside a ResponsiveFlexiBoard, the breakpoint is automatically
+     * inferred from the responsive controller's `currentBreakpoint`. You typically don't
+     * need to set this manually.
+     *
+     * If set outside of a ResponsiveFlexiBoard context, a warning will be logged.
+     */
+    breakpoint?: string;
+    registry?: Record<string, FlexiRegistryEntry>;
+    loadLayout?: FlexiLoadLayoutFn;
+    onLayoutChange?: FlexiLayoutChangeFn;
 };
+export type FlexiRegistryEntry = Omit<FlexiWidgetDefaults, 'width' | 'height' | 'draggable'>;
+export type FlexiWidgetLayoutEntry = {
+    id?: string;
+    type: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    metadata?: Record<string, any>;
+};
+export type FlexiLayout = Record<string, FlexiWidgetLayoutEntry[]>;
+export type FlexiLoadLayoutFn = () => FlexiLayout | FlexiWidgetLayoutEntry[] | undefined;

package/dist/system/grid/base.svelte.d.ts

@@ -28,6 +28,15 @@ export declare abstract class FlexiGrid {
      * Apply any post-completion operations like row/column collapsing.
      */
     applyPostCompletionOperations(): void;
+    /**
+     * Stores a drag snapshot so that mapRawCellToFinalCell can map cursor positions
+     * through the snapshot's widget positions instead of the live (displaced) grid.
+     */
+    setDragSnapshot(snapshot: unknown): void;
+    /**
+     * Clears the stored drag snapshot.
+     */
+    clearDragSnapshot(): void;
     _target: InternalFlexiTargetController;
     _targetConfig: FlexiTargetConfiguration;
     mouseCellPosition: {

package/dist/system/grid/base.svelte.js

@@ -8,6 +8,15 @@ export class FlexiGrid {
      * Apply any post-completion operations like row/column collapsing.
      */
     applyPostCompletionOperations() { }
+    /**
+     * Stores a drag snapshot so that mapRawCellToFinalCell can map cursor positions
+     * through the snapshot's widget positions instead of the live (displaced) grid.
+     */
+    setDragSnapshot(snapshot) { }
+    /**
+     * Clears the stored drag snapshot.
+     */
+    clearDragSnapshot() { }
     _target;
     _targetConfig;
     mouseCellPosition = $state({
@@ -53,7 +62,9 @@ export class FlexiGrid {
         this.mouseCellPosition.y = cell?.row ?? 0;
         this._target.onmousegridcellmove({
             cellX: this.mouseCellPosition.x,
-            cellY: this.mouseCellPosition.y
+            cellY: this.mouseCellPosition.y,
+            rawCellX: rawCell?.column ?? 0,
+            rawCellY: rawCell?.row ?? 0
         });
     }
     watchGridElementDimensions() {