svelte-flexiboards 0.4.0 → 0.4.1

package/dist/components/flexi-add.svelte

@@ -10,21 +10,9 @@
 	import RenderedFlexiWidget from './rendered-flexi-widget.svelte';
 	import { assistiveTextStyle, generateUniqueId } from '../system/shared/utils.svelte.js';
 
-	/** @deprecated FlexiAdd's children props are now redundant and will be removed in v0.4. */
-	type FlexiAddChildrenProps = {
-		/**
-		 * @deprecated This has been replaced with internal pointer management and is redundant. This event will be removed in v0.4.
-		 */
-		onpointerdown: (event: PointerEvent) => void;
-		/**
-		 * @deprecated This has been moved to the internal button so is now redundant. It will be removed in v0.4.
-		 */
-		style: string;
-	};
-
 	export type FlexiAddProps = FlexiCommonProps<FlexiAddController> & {
 		class?: FlexiAddClasses;
-		children?: Snippet<[{ adder: FlexiAddController; props: FlexiAddChildrenProps }]>;
+		children?: Snippet<[{ adder: FlexiAddController }]>;
 		addWidget: FlexiAddWidgetFn;
 	};
 </script>
@@ -75,7 +63,7 @@
 	<span style={assistiveTextStyle} id={assistiveTextId}>
 		Press Enter to drag a new widget into this board.
 	</span>
-	{@render children?.({ adder, props: { style: '', onpointerdown: dummyOnpointerdown } })}
+	{@render children?.({ adder })}
 </button>
 
 <div style="display: none;">

package/dist/components/flexi-add.svelte.d.ts

@@ -1,22 +1,10 @@
 import { type FlexiAddController, type FlexiAddClasses, type FlexiAddWidgetFn } from '../system/misc/adder.svelte.js';
 import { type Snippet } from 'svelte';
 import type { FlexiCommonProps } from '../system/types.js';
-/** @deprecated FlexiAdd's children props are now redundant and will be removed in v0.4. */
-type FlexiAddChildrenProps = {
-    /**
-     * @deprecated This has been replaced with internal pointer management and is redundant. This event will be removed in v0.4.
-     */
-    onpointerdown: (event: PointerEvent) => void;
-    /**
-     * @deprecated This has been moved to the internal button so is now redundant. It will be removed in v0.4.
-     */
-    style: string;
-};
 export type FlexiAddProps = FlexiCommonProps<FlexiAddController> & {
     class?: FlexiAddClasses;
     children?: Snippet<[{
         adder: FlexiAddController;
-        props: FlexiAddChildrenProps;
     }]>;
     addWidget: FlexiAddWidgetFn;
 };

package/dist/components/flexi-delete.svelte

@@ -8,18 +8,6 @@
 	} from '../system/misc/deleter.svelte.js';
 	import { assistiveTextStyle, generateUniqueId } from '../system/shared/utils.svelte.js';
 
-	/** @deprecated FlexiDelete's children props are now redundant and will be removed in v0.4. */
-	type FlexiDeleteChildrenProps = {
-		/**
-		 * @deprecated This has been replaced with internal pointer management and is redundant. These events will be removed in v0.4.
-		 */
-		onpointerenter: (event: PointerEvent) => void;
-		/**
-		 * @deprecated This has been replaced with internal pointer management and is redundant. These events will be removed in v0.4.
-		 */
-		onpointerleave: (event: PointerEvent) => void;
-	};
-
 	export type FlexiDeleteProps = FlexiCommonProps<FlexiDeleteController> & {
 		class?: FlexiDeleteClasses;
 		children?: Snippet<[{ deleter: FlexiDeleteController }]>;

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

@@ -58,6 +58,10 @@ export class InternalFlexiBoardController {
         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);

package/dist/system/shared/utils.svelte.d.ts

@@ -60,6 +60,8 @@ export declare class GridDimensionTracker {
     refreshScrollListeners(): void;
     getCellFromPointerPosition(clientX: number, clientY: number): CellPosition | null;
 }
+export declare function contentSize(axisCoordinates: number[], gap: number): number;
+export declare function findCell(pointerLocation: number, start: number, size: number, gap: number, axisCoordinates: number[]): number;
 export declare function generateUniqueId(prefix?: string): string;
 export declare const assistiveTextStyle = "\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tpadding: 0;\n\tmargin: -1px;\n\toverflow: hidden;\n\tclip: rect(0, 0, 0, 0);\n\twhite-space: nowrap;\n\tborder-width: 0;\n";
 export declare function getElementMidpoint(element: HTMLElement): {

package/dist/system/shared/utils.svelte.js

@@ -48,7 +48,11 @@ export class PointerService {
     isPointerInside(element) {
         const rect = element.getBoundingClientRect();
         const { x, y } = this.#position;
-        return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+        // Use scrollWidth/scrollHeight to account for content that overflows the element
+        // (e.g. grid columns that extend beyond a scrollable parent with overflow: hidden).
+        const width = Math.max(rect.width, element.scrollWidth);
+        const height = Math.max(rect.height, element.scrollHeight);
+        return x >= rect.left && x <= rect.left + width && y >= rect.top && y <= rect.top + height;
     }
     get keyboardControlsActive() {
         return this.#keyboardController.active;
@@ -557,9 +561,9 @@ export class GridDimensionTracker {
             const style = window.getComputedStyle(parent);
             const overflowY = style.getPropertyValue('overflow-y');
             const overflowX = style.getPropertyValue('overflow-x');
-            const isScrollable = ((overflowY === 'auto' || overflowY === 'scroll') &&
+            const isScrollable = ((overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'hidden') &&
                 parent.scrollHeight > parent.clientHeight) ||
-                ((overflowX === 'auto' || overflowX === 'scroll') &&
+                ((overflowX === 'auto' || overflowX === 'scroll' || overflowX === 'hidden') &&
                     parent.scrollWidth > parent.clientWidth);
             if (isScrollable) {
                 ancestors.push(parent);
@@ -574,32 +578,45 @@ export class GridDimensionTracker {
         }
         this.#pointerPosition.x = clientX;
         this.#pointerPosition.y = clientY;
-        let xCell = this.#findCell(clientX, this.#dimensions.left, this.#dimensions.width, this.#dimensions.columnGap, this.#dimensions.columns);
-        let yCell = this.#findCell(clientY, this.#dimensions.top, this.#dimensions.height, this.#dimensions.rowGap, this.#dimensions.rows);
+        // DEBUG: trace scroll offset issue
+        const gridRef = this.#grid.ref;
+        const freshRect = gridRef.getBoundingClientRect();
+        // Walk up to find the scrollable parent (board element)
+        let scrollParent = gridRef.parentElement;
+        while (scrollParent && scrollParent.scrollLeft === 0 && scrollParent !== document.documentElement) {
+            scrollParent = scrollParent.parentElement;
+        }
+        let xCell = findCell(clientX, this.#dimensions.left, contentSize(this.#dimensions.columns, this.#dimensions.columnGap), this.#dimensions.columnGap, this.#dimensions.columns);
+        let yCell = findCell(clientY, this.#dimensions.top, contentSize(this.#dimensions.rows, this.#dimensions.rowGap), this.#dimensions.rowGap, this.#dimensions.rows);
         return {
             row: yCell,
             column: xCell
         };
     }
-    #findCell(pointerLocation, start, size, gap, axisCoordinates) {
-        // If outside the axis, then return the ends.
-        if (pointerLocation < start) {
-            return 0;
-        }
-        if (pointerLocation >= start + size) {
-            return axisCoordinates.length;
-        }
-        let subtotal = start - gap / 2;
-        for (let i = 0; i < axisCoordinates.length; i++) {
-            const base = subtotal;
-            subtotal += axisCoordinates[i] + gap;
-            const proportionAlong = (pointerLocation - base) / (subtotal - base);
-            if (pointerLocation < subtotal) {
-                return i + proportionAlong;
-            }
-        }
+}
+export function contentSize(axisCoordinates, gap) {
+    const totalCells = axisCoordinates.reduce((sum, size) => sum + size, 0);
+    const totalGaps = Math.max(0, axisCoordinates.length - 1) * gap;
+    return totalCells + totalGaps;
+}
+export function findCell(pointerLocation, start, size, gap, axisCoordinates) {
+    // If outside the axis, then return the ends.
+    if (pointerLocation < start) {
+        return 0;
+    }
+    if (pointerLocation >= start + size) {
         return axisCoordinates.length;
     }
+    let subtotal = start - gap / 2;
+    for (let i = 0; i < axisCoordinates.length; i++) {
+        const base = subtotal;
+        subtotal += axisCoordinates[i] + gap;
+        const proportionAlong = (pointerLocation - base) / (subtotal - base);
+        if (pointerLocation < subtotal) {
+            return i + proportionAlong;
+        }
+    }
+    return axisCoordinates.length;
 }
 let uniqueIdIndex = 0;
 export function generateUniqueId(prefix = 'flexi-') {

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

@@ -223,28 +223,31 @@ export class InternalFlexiTargetController {
      * @returns The layout of widgets.
      */
     exportLayout() {
-        const result = [];
-        // Likely much more information than needed, but we've got it.
-        for (const widget of this.internalWidgets) {
-            if (!widget.type) {
-                console.warn('exportLayout(): widget has no type, it will be skipped.');
-                continue;
-            }
-            const entry = {
-                type: widget.type,
-                width: widget.width,
-                height: widget.height,
-                x: widget.x,
-                y: widget.y,
-                metadata: widget.metadata
-            };
-            // Only include id if user provided one
-            if (widget.userProvidedId) {
-                entry.id = widget.userProvidedId;
+        // Prevent reactive subscriptions onto exportLayout directly - they should use onLayoutChange.
+        return untrack(() => {
+            const result = [];
+            // Likely much more information than needed, but we've got it.
+            for (const widget of this.internalWidgets) {
+                if (!widget.type) {
+                    console.warn('exportLayout(): widget has no type, it will be skipped.');
+                    continue;
+                }
+                const entry = {
+                    type: widget.type,
+                    width: widget.width,
+                    height: widget.height,
+                    x: widget.x,
+                    y: widget.y,
+                    metadata: widget.metadata
+                };
+                // Only include id if user provided one
+                if (widget.userProvidedId) {
+                    entry.id = widget.userProvidedId;
+                }
+                result.push(entry);
             }
-            result.push(entry);
-        }
-        return result;
+            return result;
+        });
     }
     #createShadow(of, action) {
         const shadow = new InternalFlexiWidgetController({

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "svelte-flexiboards",
 	"licence": "MIT",
-	"version": "0.4.0",
+	"version": "0.4.1",
 	"description": "The headless drag-and-drop toolkit for Svelte.",
 	"scripts": {
 		"dev": "pnpm watch",