grid = ({ config = { // panels, // Number of panels (will calculate from elements) // rows // size of individual panel (will calculate from elements) // columns = 12, // size of individual panel // gridSize = undefined, // Near 32px and stored in CSS var(--gridSize) }, elements = { // : { // p: // x: , // y: , // z: , // w: , // h: // view: // } }, width = notebookWidth } = {}) => { const viewLit = view; if (!config.gridSize) { config.gridSize = width < 32 * 12 ? width / 12 : 32; } if (!config.panels) { config.panels = d3.max( Object.entries(elements).map(([name, value]) => value.p || 0) || 0 ) + 1; } if (!config.rows) { config.rows = d3.max( Object.entries(elements).map( ([name, value]) => (value.y || 0) + (value.h || 1) ) ) || 0; config.rows = Math.max(1, config.rows); } const gridSizeVar = variable(config.gridSize, { name: "gridSize" }); const columnsVar = variable(config.columns || 12, { name: "columns" }); const rowsVar = variable(config.rows, { name: "rows" }); const panelsVar = variable(config.panels, { name: "panels" }); let panelsPerRow = Math.floor(width / gridSizeVar.value / columnsVar.value); let totalHeight = Math.ceil(panelsVar.value / panelsPerRow); const updateGeometry = () => { if (!config.panels) panelsPerRow = Math.floor(width / gridSizeVar.value / columnsVar.value); totalHeight = Math.ceil(panelsVar.value / panelsPerRow); panel.style.width = `calc(var(--gridSize) * ${ panelsPerRow * columnsVar.value })`; panel.style.height = `calc(var(--gridSize) * ${ totalHeight * rowsVar.value })`; Object.keys(panel.elements.value).forEach((childKey) => panel.elements[childKey].updateXY() ); }; // This is an grid element builder, it wraps a view and places it in the grid, whilst exposting all its controls as dynamic variables const childView = ({ p = 0, x = 0, y = 0, z = 0, w = 1, h = 1, view } = {}) => { const panelVar = variable(p, { name: "p" }); const xVar = variable(x, { name: "x" }); const yVar = variable(y, { name: "y" }); const zVar = variable(z, { name: "z" }); const widthVar = variable(w, { name: "width" }); const heightVar = variable(h, { name: "height" }); const updateXY = () => { ev.style.left = `calc(var(--gridSize) * ${xVar.value} + ${ (panelVar.value % panelsPerRow) * columnsVar.value * gridSizeVar.value }px)`; ev.style.top = `calc(var(--gridSize) * ${yVar.value} + ${ Math.floor(panelVar.value / panelsPerRow) * rowsVar.value * gridSizeVar.value }px)`; }; panelVar.addEventListener("assign", updateXY); xVar.addEventListener("assign", updateXY); yVar.addEventListener("assign", updateXY); zVar.addEventListener("assign", (evt) => (ev.style.zIndex = zVar.value)); widthVar.addEventListener( "assign", (evt) => (ev.style.width = `calc(var(--gridSize) * ${widthVar.value})`) ); heightVar.addEventListener( "assign", (evt) => (ev.style.height = `calc(var(--gridSize) * ${heightVar.value})`) ); const ev = viewLit` ${["p", panelVar]} ${["x", xVar]} ${["y", yVar]} ${["z", zVar]} ${["w", widthVar]} ${["h", heightVar]} ${["view", view]}`; ev.updateXY = updateXY; updateXY(); return ev; }; const gridVar = view`${[ "...", { columns: columnsVar, rows: rowsVar, gridSize: gridSizeVar, panels: panelsVar } ]}`; gridSizeVar.addEventListener("assign", (evt) => { const root = document.documentElement; root.style.setProperty("--gridSize", `${gridSizeVar.value}px`); updateGeometry(); }); columnsVar.addEventListener("assign", updateGeometry); rowsVar.addEventListener("assign", updateGeometry); panelsVar.addEventListener("assign", updateGeometry); const panelNS = `panel-${DOM.uid().id}`; const panel = viewLit`

${["config", gridVar]} ${[ "elements", view`${[ "...", Object.fromEntries( Object.entries(elements).map(([name, d]) => [name, childView(d)]) ), childView ]}` ]} `; updateGeometry(); return panel; }