@trysound/gridstack

gridstack

Packable layout library

API

type Node = {
    id: number | string,
    // cells
    x: number,
    y: number,
    width: number,
    height: number,
    static: boolean
}

packNodes

packNodes({
    hoist: false,
    containerWidth: Infinity, // cells
    updatingId: null,
    nodes: Nodes[]
}): Nodes[]

trackDrag

trackDrag({
    container: HTMLElement,
    mouseMoveOffset = 2, // pixels
    isDraggable: Element => boolean
    dispatch: (action, startTarget: HTMLElement) => void
})

dragNode

type Params = {
    cellWidth: Number, // pixels
    cellHeight: Number, // pixels
    minWidth?: 1, // cell
    maxWidth?: Infinity, // cell
    minHeight?: 1, // cell
    maxHeight?: Infinity, // cell
    padding?: 0, // pixels
    resize?: {
        width: 6, // pixels
        top: false,
        right: false,
        bottom: false,
        left: false
    }
}

type DragResult = null | {
    type: 'resize' | 'move',
    // pixels
    element: { x: number, y: number, width: number, height: number },
    node: Node
}

dragNode({
    params: Params,
    node: Node,
    // pixels
    action: { startX: number, startY: number, endX: number, endY: number }
}): DragResult

utils

getRight(nodes: Node[]): number // cells

getBottom(nodes: Node[]): number // cells

// takes cells
findNode(nodes: Node[], x: number, y: number): Node

License

MIT © Bogdan Chadkin