31:T6c2,canvas = { const w = boxWidth + boxMargin.left + boxMargin.right; const h = boxHeight + boxMargin.top + boxMargin.bottom; // const context = DOM.context2d(width, width / 1.6); const context = DOM.context2d(width, h); context.fillStyle = "navy"; context.fillRect(0, 0, w, h); context.globalAlpha = 1; const textSize = 15; const textColor = "#eee"; context.font = `${textSize}px Arial`; const applyLayout = buildLayout(config, { rem: 16 }); const layout = applyLayout(boxWidth, boxHeight); visit(context.canvas, layout); return context.canvas; // return layout; function visit(canvas, layout) { for (const [key, info] of Object.entries(layout.areas)) { context.strokeStyle = "#eee"; context.lineWidth = 1; context.globalAlpha = 1; context.strokeRect( boxMargin.left + info.left + 0.5, boxMargin.left + info.top + 0.5, info.width, info.height ); const childLayout = (layout.children || {})[key]; if (childLayout) { visit(canvas, childLayout); } else { const textOffset = [10, textSize * 1.2]; const text = adjustText( key, info.width, (text) => textOffset[0] + context.measureText(text).width ); context.fillStyle = textColor; context.fillText( text, boxMargin.left + info.left + textOffset[0], boxMargin.top + info.top + textOffset[1] ); } } } function adjustText(text, maxWidth, getWidth) { for (let i = text.length; i > 0; i--) { const w = getWidth(text); if (w < maxWidth) break; text = text.substring(0, text.length - 1); } return text; } }32:T5c0,{ const w = boxWidth + boxMargin.left + boxMargin.right; const h = boxHeight + boxMargin.top + boxMargin.bottom; const div = html`

`; Object.assign(div.style, { padding: "0.5em 0" }); const { root, areas, containers } = buildHtmlLayout({ config, newArea(key, style) { const div = document.createElement("div"); Object.assign(div.style, style, { border: "0.5px solid white", padding: "0.1em 0.25em" }); div.innerText = key; return div; }, newContainer(key, style, children = []) { const div = document.createElement("div"); Object.assign(div.style, style, {}); for (const child of children) { div.appendChild(child); } return div; }, newPlaceholder(key) { const div = document.createElement("div"); return div; } }); // return { container, areas }; Object.assign(root.style, { // gridGap: "4px", width: `${w}px`, height: `${h}px`, overflow: "hidden" }); div.appendChild(root); for (const [key, div] of Object.entries(areas)) { // div.appendChild(document.createTextNode(key)); // innerText = key; Object.assign(div.style, { backgroundColor: "#eee" }); } for (const [key, div] of Object.entries(containers)) { // div.appendChild(document.createTextNode(key)); // innerText = key; Object.assign(div.style, { backgroundColor: "#eee" }); } return div; }33:T536,# Configuration Each layout configuration defines the following three parameters: * widths of columns * heights of rows * labeled areas Rows and columns are defined as strings with sizes of each row or column. Possible units are: "px" or "fr" (fractions). Row or column configurations can be defined as arrays of strings or as a single string with values separated by spaces: ```javascript rows: ["50px", "1fr", "30px"] rows: "50px 1fr 30px" columns : ["150px", "1fr"] columns : "150px 1fr" ``` Areas part of the configuration defines grid cells occupied by individual areas. Number of rows and columns have to be the same as defined in the columns/rows configuration section. Areas can be: * an array of row arrays containing cells * array of strings where each string defines a row * a single string where rows are separated by commas and columns are separated by spaces The following three definitions are equivalent: ```javascript areas : [ ["head", "head"], ["nav", "main"], ["nav", "foot"] ] areas : [ "head head", "nav main", "nav foot" ] areas : ` head head, nav main, nav foot ` ``` An example of a full configuration: ```javascript { rows : ["50px", "1fr", "30px"], columns : ["150px", "1fr"], areas : [ ["head", "head"], ["nav", "main"], ["nav", "foot"] ] } ```34:T461,# Methods Descriptions Methods implemented in this notebook: * `buildLayout(options)` - a high-level method transforming the `columns`, `rows` and `areas` parameters to a function re-calculating area sizes for the specified width and height; * `buildHtmlLayout(options)` - a high-level method transforming the `columns`, `rows` and `areas` parameters to an HTML grid; it returns an object containing the HTML `container` and `areas` index with area keys and the corresponding HTML blocks * `getLayoutConfig(options)` - validates and build a configuration object with `columns`, `rows` and `areas` fields defining layouts * `newLayout(index, width, height)` - the main method calculating exact area positions and sizes for the specified width and height parameters * `buildAreasIndex(config)` - an internal method pre-compiling positions and dimensions for each layout area; it is used by the `newLayout` method Example of usage: ```javascript import { buildLayout } from "..." const applyLayout = buildLayout(config); const width = 1024; const height = 768; const areas = applyLayout(width, height); ```35:T6e6,function buildHtmlLayout({ config, newArea, newPlaceholder, newContainer } = {}) { let counter = 0; config = getLayoutConfig(config); return buildContainer(null, config); function buildContainer(containerKey, config) { const children = []; const areaIndex = {}; const containerIndex = {}; for (const row of config.areas) { for (const areaKey of row) { if (areaKey in areaIndex || areaKey in containerIndex) continue; let elm; if (areaKey === ".") { elm = newPlaceholder(`area-${counter++}`); } else { if (config.children && config.children[areaKey]) { const { root, areas, containers } = buildContainer( areaKey, config.children[areaKey] ); elm = containerIndex[areaKey] = root; Object.assign(areaIndex, areas); Object.assign(containerIndex, containers); } else { elm = areaIndex[areaKey] = newArea(areaKey, { gridArea: areaKey }); } } children.push(elm); } } const formatSizes = (list) => list.map(({ unit, value }) => `${value}${unit}`).join(" "); const formatAreas = (list) => list.map((areas) => `"${areas.join(" ")}"`).join("\n"); const containerStyle = containerKey ? { gridArea: containerKey } : {}; Object.assign(containerStyle, { display: "grid", gridTemplateAreas: formatAreas(config.areas), gridTemplateRows: formatSizes(config.rows), gridTemplateColumns: formatSizes(config.columns) }); return { root: newContainer(containerKey, containerStyle, children), areas: areaIndex, containers: containerIndex }; } }36:T63b,function newLayout({ index, top = 0, left = 0, width, height, sizes = {} }) { sizes = Object.assign( { px: 1, rem: 16, em: 16 }, sizes ); const horizontal = getUnitsSizes(index.width, width, sizes); const vertical = getUnitsSizes(index.height, height, sizes); const result = { areas: {} }; for (let [areaKey, area] of Object.entries(index.areas)) { const absAreaInfo = { top: top + calculateSize(vertical, area.top), left: left + calculateSize(horizontal, area.left), height: calculateSize(vertical, area.height), width: calculateSize(horizontal, area.width) }; result.areas[areaKey] = absAreaInfo; } let children; if (index.children) { children = {}; for (let [areaKey, areaConfig] of Object.entries(index.children)) { const area = result.areas[areaKey]; if (!area) continue; // TODO: add a warning or something like that? children[areaKey] = newLayout({ index: areaConfig, ...area, sizes }); } } if (children) result.children = children; return result; function getUnitsSizes(units, fullSize, unitSizes) { const fixed = (units.px || 0) * unitSizes.px + (units.rem || 0) * unitSizes.rem + (units.em || 0) * unitSizes.em; return { ...unitSizes, fr: units.fr > 0 ? Math.max(0, fullSize - fixed) / units.fr : 0 }; } function calculateSize(units, value) { return ( units.px * (value.px || 0) + units.rem * (value.rem || 0) + units.em * (value.em || 0) + units.fr * (value.fr || 0) ); } }37:Ta45,/** * Returns a normalized layout configuration where rows, columns and areas are represented as a Javascript arrays. */ function getLayoutConfig(config) { const result = {}; if (!config.rows) throw new Error("Rows are not defined"); result.rows = splitSizes(config, "rows"); if (!config.columns) throw new Error("Columns are not defined"); result.columns = splitSizes(config, "columns"); if (!config.areas) throw new Error("Areas are not defined"); result.areas = splitLines(config.areas); if (result.areas.length !== result.rows.length) { throw new Error( `Area definition has a wrong number of rows. \nExpected ${ result.rows.length } rows but found ${result.areas.length}:\n- ${result.areas .map((row) => JSON.stringify(row)) .join("\n- ")}.` ); } for (let i = 0; i < result.rows.length; i++) { const row = result.areas[i]; if (row.length !== result.columns.length) throw new Error( `Area definition in the row ${i} has a wrong number of columns: \nExpected ${ result.columns.length } columns but found ${row.length}.\nRow: ${JSON.stringify(row)}.` ); } if (config.children) { let children; for (const [key, child] of Object.entries(config.children)) { children = children || {}; children[key] = getLayoutConfig(child); } if (children) result.children = children; } return result; function splitSizes(config, name) { const array = splitCells(config[name]); const sizes = new Array(array.length); for (let i = 0; i < array.length; i++) { let size = (sizes[i] = {}); const val = array[i]; if (typeof val === "object") { size.value = val.value; size.unit = val.unit; } else { val.replace(/^(\d+(\.\d+)?)(\w+)$/g, (match, v, dec, unit) => { v = +v; size.unit = unit; size.value = v; }); } if (isNaN(size.value)) { throw new Error( `"${name}": value should be a number. Position ${i}. Value: "${size.value}".` ); } if (typeof size.unit !== "string") { throw new Error( `"${name}": unit should be defined as a string (ex: "px", "fr"). Position ${i}. Unit: "${size.unit}".` ); } } return sizes; } function splitLines(value) { value = Array.isArray(value) ? value : value.split(",").map((_) => _.trim()); return value.map(splitCells); } function splitCells(value) { return Array.isArray(value) ? value : value.split(/\s+/).map((_) => _.trim()); } }38:T9fd,/** * This method transforms a valid are configuration to an index of non-intersecting areas */ function getAreasIndex(config) { const index = {}; config.areas.forEach((row, rowId) => { row.forEach((key, colId) => { if (key === ".") return; let area; if ((area = index[key])) { area.rows = [ Math.min(rowId, area.rows[0]), Math.max(rowId, area.rows[1]) ]; area.columns = [ Math.min(colId, area.columns[0]), Math.max(colId, area.columns[1]) ]; } else { index[key] = { rows: [rowId, rowId], columns: [colId, colId] }; } }); }); // Postprocessing areas: // - validate that there is no intersections // - update positions and dimentions of each area // - calculate child layouts let children; for (let [key, area] of Object.entries(index)) { // Check that there is no intersections between areas defninitions for (let rowId = area.rows[0]; rowId <= area.rows[1]; rowId++) { for (let colId = area.columns[0]; colId <= area.columns[1]; colId++) { const areaKey = config.areas[rowId][colId]; if (areaKey !== key) { const errorMsg = `Areas "${areaKey}" and "${key}" ` + `intersect at [${rowId}, ${colId}].`; throw new Error(errorMsg); } } } // Calculate position and dimentions of this area updatePositionAndDimentions(config, area); // Calculate child layouts if (config.children && config.children[key]) { children = children || {}; children[key] = getAreasIndex(config.children[key]); } } const result = updatePositionAndDimentions(config, { areas: index, rows: [0, config.rows.length - 1], columns: [0, config.columns.length - 1] }); if (children) result.children = children; return result; function updatePositionAndDimentions(config, area) { area.top = {}; area.left = {}; area.width = {}; area.height = {}; for (let y = 0; y < area.rows[0]; y++) update(area.top, config.rows[y]); for (let y = area.rows[0]; y <= area.rows[1]; y++) update(area.height, config.rows[y]); for (let x = 0; x < area.columns[0]; x++) update(area.left, config.columns[x]); for (let x = area.columns[0]; x <= area.columns[1]; x++) update(area.width, config.columns[x]); return area; function update(dim, { unit, value } = {}) { if (!unit) return; dim[unit] = (dim[unit] || 0) + value; } } }39:[] 2f:{"title":"Layout Builder","cells":[{"id":297,"value":"# Layout Builder\n\nThis notebook contains an implementation of a layout calculator transforming labeled grid areas to the corresponding absolute bounding boxes. This library is inspired by [CSS Grid Templates](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas) and can be applied to generate layouts for CSS, canvas, for PDF documents generation or for presentations (PowerPoint, Keynotes, Google Presentations etc...)","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"viewof boxWidth = Inputs.range([minBoxSizes.width, maxBoxSizes.width], {\n label: \"Box width (in px)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"viewof boxHeight = Inputs.range([minBoxSizes.height, maxBoxSizes.height], {\n label: \"Box height (in px)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"Applying the layout to canvas:","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"The same layout visualization using the CSS \"grid-template-areas\" configurations (Here we use the `getLayoutConfig` method to validate layout parameters before applying them to the CSS grid):","pinned":false,"hidden":false,"mode":"md"},{"id":424,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"Layout configuration object contains ${config.columns.length} columns and ${config.rows.length} rows:","pinned":false,"hidden":false,"mode":"md"},{"id":210,"value":"config = ({\n rows: [\"2.5rem\", \"2rem\", \"1fr\", \"30px\"],\n columns: [\"150px\", \"1fr\", \"5rem\"],\n areas: [\n [\"head\", \"head\", \"head\"],\n [\"topMenu\", \"topMenu\", \"topMenu\"],\n [\"leftPanel\", \"body\", \"rightPanel\"],\n [\"leftPanel\", \"footer\", \"footer\"]\n ],\n children: {\n head: {\n rows: [\"1fr\"],\n columns: [\"150px\", \"1fr\", \"8rem\"],\n areas: [[\"logo\", \".\", \"searchBar\"]] \n },\n body: {\n rows: [\"2em\", \"1fr\"],\n columns: [\"1fr\", \"1.5fr\"],\n areas: [\n [\"title\", \"title\"],\n [\"leftColumn\", \"rightColumn\"]\n ]\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":384,"value":"boxLayout(boxWidth, boxHeight)","pinned":true,"hidden":false,"mode":"ojs"},{"id":385,"value":"boxLayout = buildLayout(config)","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"boxMargin = ({ left: 10, right: 10, top: 10, bottom: 10 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"maxBoxSizes = {\n const w = width * 0.9;\n const h = w / 1.6;\n return {\n width: w - boxMargin.left - boxMargin.right,\n height: h - boxMargin.top - boxMargin.right\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"minBoxSizes = {\n return {\n width: maxBoxSizes.width * 0.5,\n height: maxBoxSizes.height * 0.25\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":305,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":382,"value":"{\n const applyLayout = buildLayout(config);\n return applyLayout(1024, 768);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"# Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":615,"value":"## `buildHtmlLayout` method\n\nThis method generates an HTML grid corresponding to the specified configuration. It returns results as an object with the container elements and an index of area elements.\n","pinned":false,"hidden":false,"mode":"md"},{"id":619,"value":"buildHtmlLayout({\n config,\n newArea(key, style) {\n const div = document.createElement(\"div\");\n Object.assign(div.style, style);\n return div;\n },\n newContainer(key, style, children = []) {\n const div = document.createElement(\"div\");\n Object.assign(div.style, style);\n for (const child of children) {\n div.appendChild(child);\n }\n return div;\n },\n newPlaceholder(key) {\n const div = document.createElement(\"div\");\n return div;\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":585,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":277,"value":"## `buildLayout` method\n\nThis is the main method of this module. It takes a configuration and returns a function transforming width and height of the container to an index of area keys with their positions and dimensions.","pinned":false,"hidden":false,"mode":"md"},{"id":345,"value":"{\n const applyLayout = buildLayout(config);\n return applyLayout(1024, 768);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":288,"value":"function buildLayout(config, sizes) {\n config = getLayoutConfig(config);\n const index = getAreasIndex(config);\n return (width, height) => {\n let config = { index, sizes };\n if (typeof width === \"object\") {\n Object.assign(config, width);\n } else {\n Object.assign(config, { width, height });\n }\n return newLayout(config);\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"## `newLayout` method\n\nThis utility method takes a layout index with pre-calculated areas positions and dimensions and applies these proportions to the specified container width and height.","pinned":false,"hidden":false,"mode":"md"},{"id":267,"value":"{\n const containerWidth = 1024;\n const containerHeight = 768;\n return newLayout({\n index: getAreasIndex(getLayoutConfig(config)),\n width: containerWidth,\n height: containerHeight\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"## `getLayoutConfig` method\n\nThis method is used to normalize the specified configuration and transform column and rows units to a standard form. Each column and row are defined as an object with the unit (ex: \"px\", \"fr\") and the corresponding positive numeric value (ex: 100, 3, 0.8). The resulting object allows to calculate rectangles occupied by individual areas.","pinned":false,"hidden":false,"mode":"md"},{"id":93,"value":"getLayoutConfig(config)","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"## `getAreasIndex` method\n\nThis utility method takes a compiled layout configuration (see the #getLayoutConfig method) and pre-calculate sizes of each area in mixed units (px and fr). Sizes of an area can be defined as a logical sum of absolute units (pixels) and fraction units. \nExample of area sizes","pinned":false,"hidden":false,"mode":"md"},{"id":238,"value":"getAreasIndex(getLayoutConfig(config))","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}