svelte-flexiboards 0.1.1 → 0.2.0

package/dist/components/flexi-add.svelte

@@ -12,6 +12,7 @@
 
 	type FlexiAddChildrenProps = {
 		onpointerdown: (event: PointerEvent) => void;
+		style: string;
 	};
 
 	export type FlexiAddProps = FlexiCommonProps<FlexiAddController> & {
@@ -27,9 +28,14 @@
 	controller = adder;
 </script>
 
-{@render children?.({ adder, props: { onpointerdown } })}
+{@render children?.({ adder, props: {
+	onpointerdown,
+	style: 'touch-action: none;'
+} })}
 
-<!-- Mimics the behaviour of a FlexiTarget, as we need to render the widget so that we can "drag it in" from -->
-{#if adder.newWidget}
-	<RenderedFlexiWidget widget={adder.newWidget} />
-{/if}
+<div style="display: none;">
+	<!-- Mimics the behaviour of a FlexiTarget, as we need to render the widget so that we can "drag it in" from -->
+	{#if adder.newWidget}
+		<RenderedFlexiWidget widget={adder.newWidget} />
+	{/if}	
+</div>

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

@@ -3,6 +3,7 @@ import type { Snippet } from 'svelte';
 import type { FlexiCommonProps } from '../system/types.js';
 type FlexiAddChildrenProps = {
     onpointerdown: (event: PointerEvent) => void;
+    style: string;
 };
 export type FlexiAddProps = FlexiCommonProps<FlexiAddController> & {
     children?: Snippet<[{

package/dist/components/flexi-board.svelte

@@ -16,6 +16,8 @@
 </script>
 
 <script lang="ts">
+	import FlexiPortal from './flexi-portal.svelte';
+
 	let { controller: board = $bindable(), onfirstcreate, ...props }: FlexiBoardProps = $props();
 
 	board = flexiboard(props);
@@ -28,3 +30,6 @@
 
 <!-- Component that tells the board it can start importing stuff, if needed. -->
 <FlexiLayoutLoader />
+
+<!-- Component that uses a shared portal for rendering grabbed widgets over the pointer. -->
+<FlexiPortal />

package/dist/components/flexi-grab.svelte

@@ -15,6 +15,6 @@
 	const { widget, onpointerdown } = flexigrab();
 </script>
 
-<button class={className} {onpointerdown}>
+<button style={"user-select: none; cursor: grab; touch-action: none;"} class={className} {onpointerdown}>
 	{@render children?.({ widget })}
 </button>

package/dist/components/flexi-grid.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { flexigrid } from '../system/grid.svelte';
+	import { flexigrid } from '../system/grid/index.js';
 	import type { Snippet } from 'svelte';
 
 	export type FlexiGridProps = {

package/dist/components/flexi-portal.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { flexiportal, destroyFlexiportal } from '../system/portal.js';
+
+	// Simply just wait until we're mounted to the DOM before initialising the portal.
+	$effect(() => {
+		flexiportal();
+
+		// Garbage collect on destroy
+		return () => {
+			destroyFlexiportal();
+		};
+	});
+</script>

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

@@ -0,0 +1,3 @@
+declare const FlexiPortal: import("svelte").Component<Record<string, never>, {}, "">;
+type FlexiPortal = ReturnType<typeof FlexiPortal>;
+export default FlexiPortal;

package/dist/components/flexi-resize.svelte

@@ -15,6 +15,6 @@
 	const { widget, onpointerdown } = flexiresize();
 </script>
 
-<button class={className} {onpointerdown}>
+<button style={"user-select: none; cursor: nwse-resize; touch-action: none;"} class={className} {onpointerdown}>
 	{@render children?.({ widget })}
 </button>

package/dist/components/flexi-target.svelte

@@ -72,22 +72,20 @@
 	onfirstcreate?.(target);
 </script>
 
-<div>
-	<div class={containerClass} {onpointerenter} {onpointerleave} role="grid" tabindex={0}>
-		{@render header?.({ target })}
+<div class={containerClass} {onpointerenter} {onpointerleave} role="grid" tabindex={0}>
+	{@render header?.({ target })}
 
-		<!-- Allow user to specify components directly via a registration component. Once that's done, mount them to the actual target list dynamically -->
-		<FlexiGrid class={className}>
-			{#if !target.prepared && children}
-				{@render children()}
-			{:else if target.prepared}
-				{#each target.widgets as widget (widget)}
-					<RenderedFlexiWidget {widget} />
-				{/each}
-			{/if}
-		</FlexiGrid>
-		{@render footer?.({ target })}
-	</div>
+	<!-- Allow user to specify components directly via a registration component. Once that's done, mount them to the actual target list dynamically -->
+	<FlexiGrid class={className}>
+		{#if !target.prepared && children}
+			{@render children()}
+		{:else if target.prepared}
+			{#each target.widgets as widget (widget)}
+				<RenderedFlexiWidget {widget} />
+			{/each}
+		{/if}
+	</FlexiGrid>
+	{@render footer?.({ target })}
 </div>
 
 <FlexiTargetLoader />

package/dist/components/rendered-flexi-widget.svelte

@@ -1,5 +1,6 @@
 <script module lang="ts">
 	import { renderedflexiwidget, type FlexiWidgetController } from '../system/widget.svelte.js';
+	import WidgetTransitionPlaceholder from './widget-transition-placeholder.svelte';
 
 	export type RenderedFlexiWidgetProps = {
 		widget: FlexiWidgetController;
@@ -35,6 +36,7 @@
 	{#if widget.snippet}
 		{@render widget.snippet({
 			widget,
+			// NEXT: Remove these in v0.3
 			component: widget.component,
 			componentProps: widget.componentProps
 		})}
@@ -42,3 +44,8 @@
 		<widget.component {...widget.componentProps ?? {}} />
 	{/if}
 </div>
+
+<!-- When it exists, this temporarily occupies the widget's destination space, allowing the widget to be absolutely positioned to interpolate to its final destination. -->
+{#if widget.shouldDrawPlaceholder}
+	<WidgetTransitionPlaceholder />
+{/if}

package/dist/components/widget-transition-placeholder.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { getFlexiwidgetInterpolatorCtx } from '../system/widget.svelte.js';
+	import { onMount } from 'svelte';
+
+	const interpolator = getFlexiwidgetInterpolatorCtx();
+
+	let ref: HTMLElement;
+
+	onMount(() => interpolator.onPlaceholderMount(ref));
+</script>
+
+<div style={interpolator.placeholderStyle} bind:this={ref}></div>

package/dist/components/widget-transition-placeholder.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const WidgetTransitionPlaceholder: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type WidgetTransitionPlaceholder = InstanceType<typeof WidgetTransitionPlaceholder>;
+export default WidgetTransitionPlaceholder;

package/dist/index.d.ts

@@ -1,16 +1,17 @@
-import FlexiBoard, { type FlexiBoardProps } from "./components/flexi-board.svelte";
-import FlexiTarget, { type FlexiTargetProps } from "./components/flexi-target.svelte";
-import FlexiWidget, { type FlexiWidgetProps } from "./components/flexi-widget.svelte";
-import FlexiGrab from "./components/flexi-grab.svelte";
-import FlexiResize from "./components/flexi-resize.svelte";
-import FlexiAdd from "./components/flexi-add.svelte";
-import FlexiDelete from "./components/flexi-delete.svelte";
-import type { FlexiBoardConfiguration } from "./system/provider.svelte.js";
-import type { FlexiTargetConfiguration } from "./system/target.svelte.js";
-import type { FlexiWidgetChildrenSnippet, FlexiWidgetChildrenSnippetParameters, FlexiWidgetConfiguration } from "./system/widget.svelte.js";
-import type { FlexiBoardController } from "./system/provider.svelte.js";
-import type { FlexiTargetController } from "./system/target.svelte.js";
-import type { FlexiWidgetController } from "./system/widget.svelte.js";
-import type { AdderWidgetConfiguration, FlexiAddController, FlexiAddWidgetFn } from "./system/manage.svelte.js";
-export * from "./system/types.js";
-export { FlexiBoard, type FlexiBoardConfiguration, type FlexiBoardProps, FlexiTarget, type FlexiTargetConfiguration, type FlexiTargetProps, FlexiWidget, type FlexiWidgetConfiguration, type FlexiWidgetProps, FlexiGrab, FlexiResize, FlexiAdd, FlexiDelete, type FlexiAddWidgetFn, type AdderWidgetConfiguration, type FlexiWidgetController, type FlexiBoardController, type FlexiTargetController, type FlexiAddController, type FlexiWidgetChildrenSnippet, type FlexiWidgetChildrenSnippetParameters };
+import FlexiBoard, { type FlexiBoardProps } from './components/flexi-board.svelte';
+import FlexiTarget, { type FlexiTargetProps } from './components/flexi-target.svelte';
+import FlexiWidget, { type FlexiWidgetProps } from './components/flexi-widget.svelte';
+import FlexiGrab from './components/flexi-grab.svelte';
+import FlexiResize from './components/flexi-resize.svelte';
+import FlexiAdd from './components/flexi-add.svelte';
+import FlexiDelete from './components/flexi-delete.svelte';
+import type { FlexiBoardConfiguration } from './system/provider.svelte.js';
+import type { FlexiTargetConfiguration } from './system/target.svelte.js';
+import { type FlexiWidgetChildrenSnippet, type FlexiWidgetChildrenSnippetParameters, type FlexiWidgetConfiguration, type FlexiWidgetTriggerConfiguration, getFlexiwidgetCtx } from './system/widget.svelte.js';
+import type { FlexiBoardController } from './system/provider.svelte.js';
+import type { FlexiTargetController } from './system/target.svelte.js';
+import type { FlexiWidgetController } from './system/widget.svelte.js';
+import type { AdderWidgetConfiguration, FlexiAddController, FlexiAddWidgetFn } from './system/manage.svelte.js';
+import { immediateTriggerConfig, longPressTriggerConfig, type PointerTriggerCondition } from './system/utils.svelte.js';
+export * from './system/types.js';
+export { FlexiBoard, type FlexiBoardConfiguration, type FlexiBoardProps, FlexiTarget, type FlexiTargetConfiguration, type FlexiTargetProps, FlexiWidget, type FlexiWidgetConfiguration, type FlexiWidgetProps, FlexiGrab, FlexiResize, FlexiAdd, FlexiDelete, type FlexiAddWidgetFn, type AdderWidgetConfiguration, type FlexiWidgetController, type FlexiBoardController, type FlexiTargetController, type FlexiAddController, type FlexiWidgetChildrenSnippet, type FlexiWidgetChildrenSnippetParameters, type PointerTriggerCondition, type FlexiWidgetTriggerConfiguration, immediateTriggerConfig, longPressTriggerConfig, getFlexiwidgetCtx };

package/dist/index.js

@@ -1,10 +1,12 @@
 // Reexport your entry components here
-import FlexiBoard, {} from "./components/flexi-board.svelte";
-import FlexiTarget, {} from "./components/flexi-target.svelte";
-import FlexiWidget, {} from "./components/flexi-widget.svelte";
-import FlexiGrab from "./components/flexi-grab.svelte";
-import FlexiResize from "./components/flexi-resize.svelte";
-import FlexiAdd from "./components/flexi-add.svelte";
-import FlexiDelete from "./components/flexi-delete.svelte";
-export * from "./system/types.js";
-export { FlexiBoard, FlexiTarget, FlexiWidget, FlexiGrab, FlexiResize, FlexiAdd, FlexiDelete };
+import FlexiBoard, {} from './components/flexi-board.svelte';
+import FlexiTarget, {} from './components/flexi-target.svelte';
+import FlexiWidget, {} from './components/flexi-widget.svelte';
+import FlexiGrab from './components/flexi-grab.svelte';
+import FlexiResize from './components/flexi-resize.svelte';
+import FlexiAdd from './components/flexi-add.svelte';
+import FlexiDelete from './components/flexi-delete.svelte';
+import { getFlexiwidgetCtx } from './system/widget.svelte.js';
+import { immediateTriggerConfig, longPressTriggerConfig } from './system/utils.svelte.js';
+export * from './system/types.js';
+export { FlexiBoard, FlexiTarget, FlexiWidget, FlexiGrab, FlexiResize, FlexiAdd, FlexiDelete, immediateTriggerConfig, longPressTriggerConfig, getFlexiwidgetCtx };

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

@@ -0,0 +1,49 @@
+import type { InternalFlexiTargetController, FlexiTargetConfiguration } from "../target.svelte.js";
+import { GridDimensionTracker } from "../utils.svelte.js";
+import type { FlexiWidgetController } from "../widget.svelte.js";
+export type MoveOperation = {
+    widget: FlexiWidgetController;
+    newX: number;
+    newY: number;
+    oldX: number;
+    oldY: number;
+};
+export type WidgetSnapshot = {
+    widget: FlexiWidgetController;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export declare abstract class FlexiGrid {
+    #private;
+    abstract tryPlaceWidget(widget: FlexiWidgetController, cellX?: number, cellY?: number, width?: number, height?: number): boolean;
+    abstract removeWidget(widget: FlexiWidgetController): boolean;
+    abstract takeSnapshot(): unknown;
+    abstract restoreFromSnapshot(snapshot: unknown): void;
+    abstract mapRawCellToFinalCell(x: number, y: number): [number, number];
+    _target: InternalFlexiTargetController;
+    _targetConfig: FlexiTargetConfiguration;
+    mouseCellPosition: {
+        x: number;
+        y: number;
+    };
+    _dimensionTracker: GridDimensionTracker;
+    constructor(target: InternalFlexiTargetController, targetConfig: FlexiTargetConfiguration);
+    style: string;
+    watchGridElementDimensions(): void;
+    /**
+     * Clears the grid layout.
+     */
+    abstract clear(): void;
+    onpointermove(event: PointerEvent): void;
+    forceUpdatePointerPosition(clientX: number, clientY: number): void;
+    abstract get rows(): number;
+    abstract get columns(): number;
+    get ref(): HTMLElement | null;
+    set ref(ref: HTMLElement | null);
+}
+export declare function flexigrid(): {
+    grid: FlexiGrid;
+};
+export declare function getFlexigridCtx(): FlexiGrid | undefined;

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

@@ -0,0 +1,92 @@
+import { setContext } from "svelte";
+import { getContext } from "svelte";
+import { getInternalFlexitargetCtx } from "../target.svelte.js";
+import { GridDimensionTracker } from "../utils.svelte.js";
+export class FlexiGrid {
+    _target;
+    _targetConfig;
+    mouseCellPosition = $state({
+        x: 0,
+        y: 0
+    });
+    #ref = $state({ ref: null });
+    _dimensionTracker;
+    constructor(target, targetConfig) {
+        this._target = target;
+        this._targetConfig = targetConfig;
+        this._dimensionTracker = new GridDimensionTracker(this, targetConfig);
+        this.onpointermove = this.onpointermove.bind(this);
+        $effect(() => {
+            window.addEventListener('pointermove', this.onpointermove);
+            return () => {
+                window.removeEventListener('pointermove', this.onpointermove);
+            };
+        });
+    }
+    style = $derived.by(() => {
+        return `display: grid; grid-template-columns: ${this.#getSizing(this.columns, this._targetConfig.columnSizing)}; grid-template-rows: ${this.#getSizing(this.rows, this._targetConfig.rowSizing)};`;
+    });
+    #getSizing(axisCount, sizing) {
+        if (typeof sizing === "string") {
+            return `repeat(${axisCount}, ${sizing})`;
+        }
+        return sizing({ target: this._target, grid: this });
+    }
+    #updatePointerPosition(clientX, clientY) {
+        if (!this.ref) {
+            return;
+        }
+        const rawCell = this._dimensionTracker.getCellFromPointerPosition(clientX, clientY);
+        let cell = rawCell;
+        if (rawCell) {
+            const [x, y] = this.mapRawCellToFinalCell(rawCell.column, rawCell.row);
+            cell = {
+                row: y,
+                column: x
+            };
+        }
+        this.mouseCellPosition.x = cell?.column ?? 0;
+        this.mouseCellPosition.y = cell?.row ?? 0;
+        this._target.onmousegridcellmove({
+            cellX: this.mouseCellPosition.x,
+            cellY: this.mouseCellPosition.y
+        });
+    }
+    watchGridElementDimensions() {
+        if (!this.ref) {
+            return;
+        }
+        this._dimensionTracker.watchGrid();
+    }
+    onpointermove(event) {
+        this.#updatePointerPosition(event.clientX, event.clientY);
+    }
+    forceUpdatePointerPosition(clientX, clientY) {
+        this.#updatePointerPosition(clientX, clientY);
+    }
+    get ref() {
+        return this.#ref.ref;
+    }
+    set ref(ref) {
+        this.#ref.ref = ref;
+    }
+}
+const contextKey = Symbol('flexigrid');
+export function flexigrid() {
+    const target = getInternalFlexitargetCtx();
+    if (!target) {
+        throw new Error("A FlexiGrid was instantiated outside of a FlexiTarget context. Ensure that flexigrid() is called within a FlexiTarget component.");
+    }
+    const grid = target.createGrid();
+    setContext(contextKey, grid);
+    // Tell the grid's dimension tracker to watch the grid element.
+    $effect(() => {
+        grid.watchGridElementDimensions();
+    });
+    return {
+        grid
+    };
+}
+export function getFlexigridCtx() {
+    return getContext(contextKey);
+}

package/dist/system/grid/flow-grid.svelte.d.ts

@@ -0,0 +1,49 @@
+/**
+ * The layout configuration for a flow layout based grid.
+ */
+export type FlowTargetLayout = {
+    type: 'flow';
+    /**
+     * Specifies how widgets should be added when no coordinates are specified.
+     *
+     * - "append" will add a widget after the last widget in the grid.
+     * - "prepend" will add a widget before the first widget in the grid.
+     */
+    placementStrategy: 'append' | 'prepend';
+    /**
+     * When set to true, the grid will ignore coordinates provided when adding widgets and instead
+     * default to the placement strategy's behaviour.
+     */
+    disallowInsert?: boolean;
+    /**
+     * The axis that widgets are placed along.
+     *
+     * - When set to "row", widgets are added along the columns of a row before wrapping to the next row.
+     * - When set to "column", widgets are added along the rows of a column before wrapping to the next column.
+     */
+    flowAxis: 'row' | 'column';
+    /**
+     * Whether the grid should be blocked from automatically expanding when all cell space is used.
+     *
+     * - When unset and the flow axis is set to "row", the grid will create new rows when the last row is full.
+     * - When unset and the flow axis is set to "column", the grid will create new columns when the last column is full.
+     * - When set to true, the grid will be at capacity when all cells are used.
+     * @deprecated Use maxFlowAxis == rows or columns to control expandability.
+     */
+    disallowExpansion?: boolean;
+    /**
+     * The maximum number of rows or columns that can be used depending on what the flow axis is set to.
+     *
+     * - When flowAxis is set to "row", the grid will not allow more rows than this value.
+     * - When flowAxis is set to "column", the grid will not allow more columns than this value.
+     */
+    maxFlowAxis?: number;
+    /**
+     * The number of rows that the grid should have.
+     */
+    rows?: number;
+    /**
+     * The number of columns that the grid should have.
+     */
+    columns?: number;
+};