svelte-flexiboards 0.1.0

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

@@ -0,0 +1,146 @@
+import type { FlexiWidgetController } from "./widget.svelte.js";
+import type { InternalFlexiTargetController, FlexiTargetConfiguration } from "./target.svelte.js";
+import { GridDimensionTracker } from "./utils.svelte.js";
+type FlexiGridLayout = (FlexiWidgetController | null)[][];
+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.
+     */
+    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;
+};
+export type FreeFormTargetLayout = {
+    type: "free";
+    expandColumns?: boolean;
+    expandRows?: boolean;
+    minRows?: number;
+    minColumns?: number;
+};
+export type MoveOperation = {
+    widget: FlexiWidgetController;
+    newX: number;
+    newY: number;
+    oldX: number;
+    oldY: number;
+};
+type FreeFormGridSnapshot = {
+    layout: FlexiGridLayout;
+    bitmaps: number[];
+    rows: number;
+    columns: number;
+    widgets: WidgetSnapshot[];
+};
+type FlowGridSnapshot = {
+    widgets: WidgetSnapshot[];
+    rows: number;
+    columns: number;
+};
+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;
+    abstract get rows(): number;
+    abstract get columns(): number;
+    get ref(): HTMLElement | null;
+    set ref(ref: HTMLElement | null);
+}
+/**
+ * Free-form Flexigrid Layout
+ *
+ * A grid layout where widgets are explicitly placed in particular cells, and the grid allows for gaps between widgets.
+ * A free grid can grow and shrink if required when enabled.
+ */
+export declare class FreeFormFlexiGrid extends FlexiGrid {
+    #private;
+    constructor(target: InternalFlexiTargetController, targetConfig: FlexiTargetConfiguration);
+    tryPlaceWidget(widget: FlexiWidgetController, cellX?: number, cellY?: number, width?: number, height?: number): boolean;
+    removeWidget(widget: FlexiWidgetController): boolean;
+    takeSnapshot(): FreeFormGridSnapshot;
+    clear(): void;
+    restoreFromSnapshot(snapshot: FreeFormGridSnapshot): void;
+    mapRawCellToFinalCell(x: number, y: number): [number, number];
+    get layout(): FlexiGridLayout;
+    get bitmaps(): number[];
+    get rows(): number;
+    set rows(value: number);
+    get columns(): number;
+}
+/**
+ * Flow-based FlexiGrid Layout
+ *
+ * A grid layout where widgets are placed using a flow strategy. The flow axis determines which axis the widgets are placed along,
+ * and the cross axis can be configured to expand when the flow axis is full.
+ */
+export declare class FlowFlexiGrid extends FlexiGrid {
+    #private;
+    constructor(target: InternalFlexiTargetController, targetConfig: FlexiTargetConfiguration);
+    tryPlaceWidget(widget: FlexiWidgetController, cellX?: number, cellY?: number, width?: number, height?: number): boolean;
+    removeWidget(widget: FlexiWidgetController): boolean;
+    clear(): void;
+    takeSnapshot(): FlowGridSnapshot;
+    restoreFromSnapshot(snapshot: FlowGridSnapshot): void;
+    mapRawCellToFinalCell(x: number, y: number): [number, number];
+    get rows(): number;
+    get columns(): number;
+    get widgets(): FlexiWidgetController[];
+}
+export declare function flexigrid(): {
+    grid: FlexiGrid;
+};
+export declare function getFlexigridCtx(): FlexiGrid | undefined;
+export {};