svelte-flexiboards 0.4.0 → 0.4.2

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

@@ -1,4 +1,4 @@
-import { tick, untrack } from 'svelte';
+import { untrack } from 'svelte';
 import { FlexiGrid, FlowFlexiGrid } from '../grid/index.js';
 import { FlexiWidgetController } from '../widget/base.svelte.js';
 import { InternalFlexiWidgetController } from '../widget/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/dist/system/target/types.d.ts

@@ -1,11 +1,11 @@
 import type { FreeFormTargetLayout } from '../grid/free-grid.svelte.js';
 import type { FlexiGrid, FlowTargetLayout } from '../grid/index.js';
-import type { WidgetAction } from '../types.js';
+import type { InternalWidgetAction } from '../internal-types.js';
 import type { InternalFlexiWidgetController } from '../widget/controller.svelte.js';
 import type { FlexiWidgetDefaults } from '../widget/types.js';
 import type { FlexiTargetController } from './base.svelte.js';
 export type FlexiTargetActionWidget = {
-    action: WidgetAction['action'];
+    action: InternalWidgetAction['action'];
     widget: InternalFlexiWidgetController;
 };
 export type FlexiTargetState = {

package/dist/system/types.d.ts

@@ -1,10 +1,9 @@
-import type { InternalFlexiTargetController } from './target/controller.svelte.js';
-import type { FlexiAddController, InternalFlexiAddController } from './misc/adder.svelte.js';
+import type { FlexiTargetController } from './target/index.js';
+import type { FlexiAddController } from './misc/adder.svelte.js';
 import type { FlexiWidgetController } from './widget/base.svelte.js';
-import type { InternalFlexiBoardController } from './board/controller.svelte.js';
-import type { InternalFlexiWidgetController } from './widget/controller.svelte.js';
+import type { FlexiBoardController } from './board/base.svelte.js';
 import type { FlexiLayout } from './board/types.js';
-import type { InternalResponsiveFlexiBoardController } from './responsive/controller.svelte.js';
+import type { ResponsiveFlexiBoardController } from './responsive/base.svelte.js';
 export type ProxiedValue<T> = {
     value: T;
 };
@@ -20,7 +19,7 @@ export type WidgetResizability = 'none' | 'horizontal' | 'vertical' | 'both';
 export type WidgetDraggability = 'none' | 'movable' | 'full';
 export type WidgetGrabAction = {
     action: 'grab';
-    widget: InternalFlexiWidgetController;
+    widget: FlexiWidgetController;
     offsetX: number;
     offsetY: number;
     capturedHeightPx: number;
@@ -28,7 +27,7 @@ export type WidgetGrabAction = {
 };
 export type WidgetResizeAction = {
     action: 'resize';
-    widget: InternalFlexiWidgetController;
+    widget: FlexiWidgetController;
     offsetX: number;
     offsetY: number;
     left: number;
@@ -40,7 +39,7 @@ export type WidgetResizeAction = {
 };
 export type WidgetAction = WidgetGrabAction | WidgetResizeAction;
 export type WidgetGrabbedParams = {
-    widget: InternalFlexiWidgetController;
+    widget: FlexiWidgetController;
     ref: HTMLElement;
     xOffset: number;
     yOffset: number;
@@ -50,7 +49,7 @@ export type WidgetGrabbedParams = {
     capturedWidth: number;
 };
 export type WidgetStartResizeParams = {
-    widget: InternalFlexiWidgetController;
+    widget: FlexiWidgetController;
     xOffset: number;
     yOffset: number;
     left: number;
@@ -63,13 +62,13 @@ export type PointerMovedEvent = {
     y: number;
 };
 export type AdderWidgetReadyEvent = {
-    adder: InternalFlexiAddController;
-    widget: InternalFlexiWidgetController;
+    adder: FlexiAddController;
+    widget: FlexiWidgetController;
 };
 export type WidgetEvent = {
-    target?: InternalFlexiTargetController;
-    board: InternalFlexiBoardController;
-    widget: InternalFlexiWidgetController;
+    target?: FlexiTargetController;
+    board: FlexiBoardController;
+    widget: FlexiWidgetController;
 };
 export type WidgetGrabbedEvent = WidgetEvent & {
     adder?: FlexiAddController;
@@ -81,7 +80,7 @@ export type WidgetGrabbedEvent = WidgetEvent & {
     capturedWidthPx: number;
 };
 export type WidgetResizingEvent = WidgetEvent & {
-    target: InternalFlexiTargetController;
+    target: FlexiTargetController;
     offsetX: number;
     offsetY: number;
     clientX: number;
@@ -92,24 +91,24 @@ export type WidgetResizingEvent = WidgetEvent & {
     capturedWidthPx: number;
 };
 export type WidgetDroppedEvent = {
-    widget: InternalFlexiWidgetController;
-    board: InternalFlexiBoardController;
-    oldTarget?: InternalFlexiTargetController;
-    newTarget?: InternalFlexiTargetController;
+    widget: FlexiWidgetController;
+    board: FlexiBoardController;
+    oldTarget?: FlexiTargetController;
+    newTarget?: FlexiTargetController;
 };
 export type WidgetStartResizeEvent = WidgetStartResizeParams & {
-    target: InternalFlexiTargetController;
+    target: FlexiTargetController;
 };
 export type WidgetOverEvent = {
-    widget: InternalFlexiWidgetController;
+    widget: FlexiWidgetController;
     mousePosition: Position;
 };
 export type WidgetOutEvent = {
-    widget: InternalFlexiWidgetController;
+    widget: FlexiWidgetController;
 };
 export type TargetEvent = {
-    board: InternalFlexiBoardController;
-    target: InternalFlexiTargetController;
+    board: FlexiBoardController;
+    target: FlexiTargetController;
 };
 export type MouseGridCellMoveEvent = {
     cellX: number;
@@ -121,7 +120,7 @@ export type GrabbedWidgetMouseEvent = {
     widget: FlexiWidgetController;
 };
 export type HoveredTargetEvent = {
-    target: InternalFlexiTargetController;
+    target: FlexiTargetController;
 };
 export type WidgetActionEvent = (PointerEvent & {
     isKeyboard?: undefined;
@@ -131,10 +130,10 @@ export type WidgetActionEvent = (PointerEvent & {
     clientY: number;
 });
 export type BoardLayoutChangeEvent = {
-    board: InternalFlexiBoardController;
+    board: FlexiBoardController;
     layout: FlexiLayout;
     breakpoint?: string;
 };
 export type ResponsiveLayoutImportEvent = {
-    responsiveController: InternalResponsiveFlexiBoardController;
+    responsiveController: ResponsiveFlexiBoardController;
 };

package/dist/system/widget/controller.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { WidgetDroppedEvent, WidgetEvent, WidgetGrabbedEvent, WidgetResizingEvent } from '../types.js';
+import type { InternalWidgetDroppedEvent, InternalWidgetEvent, InternalWidgetGrabbedEvent, InternalWidgetResizingEvent } from '../internal-types.js';
 import { FlexiWidgetController } from './base.svelte.js';
 import type { InternalFlexiTargetController } from '../target/controller.svelte.js';
 import { WidgetMoveInterpolator, type WidgetMovementAnimation } from './interpolator.svelte.js';
@@ -18,10 +18,10 @@ export declare class InternalFlexiWidgetController extends FlexiWidgetController
     style: string;
     readonly id: string;
     constructor(params: FlexiWidgetConstructorParams);
-    onDropped(event: WidgetDroppedEvent): void;
-    onGrabbed(event: WidgetGrabbedEvent): void;
-    onResizing(event: WidgetResizingEvent): void;
-    onReleased(event: WidgetEvent): void;
+    onDropped(event: InternalWidgetDroppedEvent): void;
+    onGrabbed(event: InternalWidgetGrabbedEvent): void;
+    onResizing(event: InternalWidgetResizingEvent): void;
+    onReleased(event: InternalWidgetEvent): void;
     /**
      * Registers a grabber to the widget.
      */
@@ -50,7 +50,7 @@ export declare class InternalFlexiWidgetController extends FlexiWidgetController
      * Deletes this widget from its target and board.
      */
     delete(): void;
-    onDelete(event: WidgetEvent): void;
+    onDelete(event: InternalWidgetEvent): void;
     /**
      * Cleanup method to be called when the widget is destroyed
      */

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

@@ -1,8 +1,7 @@
 import { getFlexiEventBus } from '../shared/event-bus.js';
-import { generateUniqueId, getElementMidpoint, getPointerService } from '../shared/utils.svelte.js';
+import { generateUniqueId, getPointerService } from '../shared/utils.svelte.js';
 import { FlexiWidgetController } from './base.svelte.js';
 import { WidgetMoveInterpolator } from './interpolator.svelte.js';
-import { WidgetPointerEventWatcher } from './triggers.svelte.js';
 export class InternalFlexiWidgetController extends FlexiWidgetController {
     #pointerService = getPointerService();
     // Grabber and resizer tracking

package/dist/system/widget/triggers.svelte.js

@@ -25,6 +25,9 @@ export class WidgetPointerEventWatcher {
         if (!isGrabPointerEvent(event)) {
             return;
         }
+        if (!this.#canStartWidgetEvent()) {
+            return;
+        }
         const pointerType = event.pointerType;
         const triggerForType = this.#triggerConfig[pointerType] ?? this.#triggerConfig.default;
         event.preventDefault();
@@ -34,6 +37,12 @@ export class WidgetPointerEventWatcher {
         return this.#triggerWidgetEvent(event);
     }
     #eventTimeout = null;
+    #canStartWidgetEvent() {
+        if (this.#type == 'resize') {
+            return this.#widget.resizable;
+        }
+        return this.#widget.isGrabbable;
+    }
     #handleLongPress(event, trigger) {
         if (this.#eventTimeout) {
             clearTimeout(this.#eventTimeout);

package/package.json

@@ -1,62 +1,61 @@
 {
-	"name": "svelte-flexiboards",
-	"licence": "MIT",
-	"version": "0.4.0",
-	"description": "The headless drag-and-drop toolkit for Svelte.",
-	"scripts": {
-		"dev": "pnpm watch",
-		"dev:host": "pnpm dev",
-		"build": "pnpm package",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "pnpm run package",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"format": "prettier --write .",
-		"lint": "prettier --check . && eslint .",
-		"watch": "svelte-kit sync && svelte-package --watch",
-		"test": "vitest run"
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"main": "./dist/index.js",
-	"module": "./dist/index.js",
-	"type": "module",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js",
-			"import": "./dist/index.js",
-			"require": "./dist/index.js"
-		}
-	},
-	"peerDependencies": {
-		"svelte": "^5.0.0"
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^4.0.0",
-		"@types/node": "^22.13.5",
-		"@vitest/coverage-v8": "^3.0.7",
-		"typescript": "^5.0.0",
-		"typescript-eslint": "^8.0.0",
-		"vite": "^5.0.11",
-		"vitest": "^3.0.7"
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/Blakintosh/svelte-flexiboards.git"
-	},
-	"author": "Blakintosh",
-	"license": "MIT",
-	"bugs": {
-		"url": "https://github.com/Blakintosh/svelte-flexiboards/issues"
-	},
-	"homepage": "https://github.com/Blakintosh/svelte-flexiboards#readme"
-}
+  "name": "svelte-flexiboards",
+  "licence": "MIT",
+  "version": "0.4.2",
+  "description": "The headless drag-and-drop toolkit for Svelte.",
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@types/node": "^22.13.5",
+    "@vitest/coverage-v8": "^3.0.7",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.0.0",
+    "vite": "^5.0.11",
+    "vitest": "^3.0.7"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Blakintosh/svelte-flexiboards.git"
+  },
+  "author": "Blakintosh",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Blakintosh/svelte-flexiboards/issues"
+  },
+  "homepage": "https://github.com/Blakintosh/svelte-flexiboards#readme",
+  "scripts": {
+    "dev": "pnpm watch",
+    "dev:host": "pnpm dev",
+    "build": "pnpm package",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "watch": "svelte-kit sync && svelte-package --watch",
+    "test": "vitest run"
+  }
+}