Mosaic extends KompElement

Mosiac is a managed CSS-Grid container that sizes to a grid (columnCount × rowHeight). Each child cell declares its own grid-area. When resizable or reorderable is on, drag interactions update the affected cell's grid-area in place and run a "bump down" pass: any cell that would overlap the moved/resized cell is shifted down by enough rows to clear, cascading as needed.

Example

new Mosaic({
    columnCount: 12,
    rowHeight: 100,
    resizable: true,
    reorderable: true,
    content: items.map((item, i) => createElement('div', {
        style: { gridArea: `${i + 1} / 1 / span 1 / span 4` },
        content: item.label
    }))
})

Constructor

new Mosaic(options)
options : Object optional
columnCount : number optional

Number of grid columns.

rowHeight : number optional

Row height in pixels. Defaults to offsetWidth / columnCount (square cells), tracked via ResizeObserver.

resizable : boolean optional

Render per-cell drag handles for live resizing.

reorderable : boolean optional

Drag a cell to reposition it on the grid; cells in the way bump down.

handleSelector : string optional

When set, only pointerdown on a matching descendant of a cell starts a reorder. Has no effect when reorderable is false.

content : string | HTMLElement | Array | Object optional

Initial children. Each must declare its own grid-area.

Instance Properties

P   cells

Direct children that aren't internal handle or drag-clone elements.

Static Properties

P   assignableAttributes: Object

Attributes settable via constructor options. Each key is the attribute name and the value is a schema object describing how to handle it.

Example

static assignableAttributes = {
    anchor: { type: 'HTMLElement', default: null, null: true },
    placement: { type: 'string', default: 'bottom', null: false },
    enabled: { type: 'boolean', default: true, null: false },
    data: { type: 'array', default: [], null: false }
}

Properties

type : string | Array.<string>

expected type(s): 'string', 'number', 'boolean', 'object', 'array', 'function', or a class/element name like 'HTMLElement'

default : *

default value when none is provided

null : boolean

whether null is an acceptable value

load : function optional

optional transform applied when reading the attribute value

P   assignableMethods: Array

Methods overridable via constructor options

P   bindMethods: Array

Methods to auto-bind to this

P   events: Array

Event names that can be bound via onEventName constructor options

P   style: string

CSS injected once per component via adoptedStyleSheets

P   styleLayer: string | false

CSS @layer name used to wrap the component's styles when injected via adoptedStyleSheets. Set to a falsy value to disable layering.

P   watch: Array

Attributes to observe for changes. Triggers changed(attribute, was, now) and [attribute]Changed(was, now) callbacks.

Instance Methods

F   _edgeNeighbors()

Cells abutting cell along edge whose perpendicular extent fits inside the cell's. A split-resize moves these in lockstep with the dragged edge — wider neighbors fall through to the collision cascade so they're bumped instead of clamping the drag to zero.

F   _emitGridAreaChanges()

Compare current cell grid-areas against startGridAreas and dispatch a bubbling gridAreaChanged event on every cell whose grid-area differs. event.detail = { gridArea, previousGridArea }. Called once at the end of a resize or reorder — never on intermediate paints — so listeners can react without per-frame overhead.

F   _getGridArea()

Read a cell's grid placement as a {rowStart, colStart, rowEnd, colEnd} object (grid line numbers).

F   _resolveCollisions()

Apply newGridArea to movedCell inside gridAreas and bump any cells it collides with downward by enough rows to clear. Bumps cascade: a bumped cell that now overlaps another also pushes it down. Columns are preserved — only row lines move.

F   addEventListenerFor(element, eventType, args)

Listen for events on another element, automatically cleaned up when this component disconnects

Parameters

element : HTMLElement

element to listen on

eventType : string

event type

args : *

additional arguments passed to addEventListener

F   changed(attribute, was, now)

Called every time an observed attribute changes. Attribute must be listed in static watch.

Parameters

attribute : string

the attribute that changed

was : *

previous value

now : *

new value

F   connected()

Called when element is connected to the DOM

F   disconnected()

Called when element is disconnected from the DOM

F   initialize()

Called once per instantiation, but only after element is connected to the DOM

F   remove(callback) → KompElement

Remove element. Fires remove, calls optional callback, removes from DOM, then fires removed.

Parameters

callback : function optional

async callback called between remove and removed

Returns

F   trigger(eventName, args)

Trigger an event on this element

Parameters

eventName : string

event name to trigger

args : *

additional arguments

Events

E   connect

Fired before the element is connected to the DOM (cancellable)

E   connected

Fired after the element is connected to the DOM and initialized

E   disconnect

Fired before the element is disconnected from the DOM (cancellable)

E   disconnected

Fired after the element is disconnected from the DOM

E   remove

Fired before the element is removed (cancellable)

E   removed

Fired after the element is removed

E   reorder

Fired after a reorder. event.detail is { cell, gridArea }.

E   resize

Fired after a resize. event.detail is { cell, axis, edge, gridArea }.