UNPKG

@wordpress/block-editor

Version:
8 lines (7 loc) 9.45 kB
{ "version": 3, "sources": ["../../../src/components/grid/utils.js"], "sourcesContent": ["export function range( start, length ) {\n\treturn Array.from( { length }, ( _, i ) => start + i );\n}\n\nexport class GridRect {\n\tconstructor( {\n\t\tcolumnStart,\n\t\trowStart,\n\t\tcolumnEnd,\n\t\trowEnd,\n\t\tcolumnSpan,\n\t\trowSpan,\n\t} = {} ) {\n\t\tthis.columnStart = columnStart ?? 1;\n\t\tthis.rowStart = rowStart ?? 1;\n\t\tif ( columnSpan !== undefined ) {\n\t\t\tthis.columnEnd = this.columnStart + columnSpan - 1;\n\t\t} else {\n\t\t\tthis.columnEnd = columnEnd ?? this.columnStart;\n\t\t}\n\t\tif ( rowSpan !== undefined ) {\n\t\t\tthis.rowEnd = this.rowStart + rowSpan - 1;\n\t\t} else {\n\t\t\tthis.rowEnd = rowEnd ?? this.rowStart;\n\t\t}\n\t}\n\n\tget columnSpan() {\n\t\treturn this.columnEnd - this.columnStart + 1;\n\t}\n\n\tget rowSpan() {\n\t\treturn this.rowEnd - this.rowStart + 1;\n\t}\n\n\tcontains( column, row ) {\n\t\treturn (\n\t\t\tcolumn >= this.columnStart &&\n\t\t\tcolumn <= this.columnEnd &&\n\t\t\trow >= this.rowStart &&\n\t\t\trow <= this.rowEnd\n\t\t);\n\t}\n\n\tcontainsRect( rect ) {\n\t\treturn (\n\t\t\tthis.contains( rect.columnStart, rect.rowStart ) &&\n\t\t\tthis.contains( rect.columnEnd, rect.rowEnd )\n\t\t);\n\t}\n\n\tintersectsRect( rect ) {\n\t\treturn (\n\t\t\tthis.columnStart <= rect.columnEnd &&\n\t\t\tthis.columnEnd >= rect.columnStart &&\n\t\t\tthis.rowStart <= rect.rowEnd &&\n\t\t\tthis.rowEnd >= rect.rowStart\n\t\t);\n\t}\n}\n\nexport function getComputedCSS( element, property ) {\n\treturn element.ownerDocument.defaultView\n\t\t.getComputedStyle( element )\n\t\t.getPropertyValue( property );\n}\n\n/**\n * Given a grid-template-columns or grid-template-rows CSS property value, gets the start and end\n * position in pixels of each grid track.\n *\n * https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-track\n *\n * @param {string} template The grid-template-columns or grid-template-rows CSS property value.\n * Only supports fixed sizes in pixels.\n * @param {number} gap The gap between grid tracks in pixels.\n *\n * @return {Array<{start: number, end: number}>} An array of objects with the start and end\n * position in pixels of each grid track.\n */\nexport function getGridTracks( template, gap ) {\n\tconst tracks = [];\n\tfor ( const size of template.split( ' ' ) ) {\n\t\tconst previousTrack = tracks[ tracks.length - 1 ];\n\t\tconst start = previousTrack ? previousTrack.end + gap : 0;\n\t\tconst end = start + parseFloat( size );\n\t\ttracks.push( { start, end } );\n\t}\n\treturn tracks;\n}\n\n/**\n * Given an array of grid tracks and a position in pixels, gets the index of the closest track to\n * that position.\n *\n * https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-track\n *\n * @param {Array<{start: number, end: number}>} tracks An array of objects with the start and end\n * position in pixels of each grid track.\n * @param {number} position The position in pixels.\n * @param {string} edge The edge of the track to compare the\n * position to. Either 'start' or 'end'.\n *\n * @return {number} The index of the closest track to the position. 0-based, unlike CSS grid which\n * is 1-based.\n */\nexport function getClosestTrack( tracks, position, edge = 'start' ) {\n\treturn tracks.reduce(\n\t\t( closest, track, index ) =>\n\t\t\tMath.abs( track[ edge ] - position ) <\n\t\t\tMath.abs( tracks[ closest ][ edge ] - position )\n\t\t\t\t? index\n\t\t\t\t: closest,\n\t\t0\n\t);\n}\n\nexport function getGridRect( gridElement, rect ) {\n\tconst columnGap = parseFloat( getComputedCSS( gridElement, 'column-gap' ) );\n\tconst rowGap = parseFloat( getComputedCSS( gridElement, 'row-gap' ) );\n\tconst gridColumnTracks = getGridTracks(\n\t\tgetComputedCSS( gridElement, 'grid-template-columns' ),\n\t\tcolumnGap\n\t);\n\tconst gridRowTracks = getGridTracks(\n\t\tgetComputedCSS( gridElement, 'grid-template-rows' ),\n\t\trowGap\n\t);\n\tconst columnStart = getClosestTrack( gridColumnTracks, rect.left ) + 1;\n\tconst rowStart = getClosestTrack( gridRowTracks, rect.top ) + 1;\n\tconst columnEnd =\n\t\tgetClosestTrack( gridColumnTracks, rect.right, 'end' ) + 1;\n\tconst rowEnd = getClosestTrack( gridRowTracks, rect.bottom, 'end' ) + 1;\n\treturn new GridRect( {\n\t\tcolumnStart,\n\t\tcolumnEnd,\n\t\trowStart,\n\t\trowEnd,\n\t} );\n}\n\nexport function getGridItemRect( gridItemElement ) {\n\treturn getGridRect(\n\t\tgridItemElement.parentElement,\n\t\tnew window.DOMRect(\n\t\t\tgridItemElement.offsetLeft,\n\t\t\tgridItemElement.offsetTop,\n\t\t\tgridItemElement.offsetWidth,\n\t\t\tgridItemElement.offsetHeight\n\t\t)\n\t);\n}\n\nexport function getGridInfo( gridElement ) {\n\tconst gridTemplateColumns = getComputedCSS(\n\t\tgridElement,\n\t\t'grid-template-columns'\n\t);\n\tconst gridTemplateRows = getComputedCSS(\n\t\tgridElement,\n\t\t'grid-template-rows'\n\t);\n\tconst borderTopWidth = getComputedCSS( gridElement, 'border-top-width' );\n\tconst borderRightWidth = getComputedCSS(\n\t\tgridElement,\n\t\t'border-right-width'\n\t);\n\tconst borderBottomWidth = getComputedCSS(\n\t\tgridElement,\n\t\t'border-bottom-width'\n\t);\n\tconst borderLeftWidth = getComputedCSS( gridElement, 'border-left-width' );\n\tconst paddingTop = getComputedCSS( gridElement, 'padding-top' );\n\tconst paddingRight = getComputedCSS( gridElement, 'padding-right' );\n\tconst paddingBottom = getComputedCSS( gridElement, 'padding-bottom' );\n\tconst paddingLeft = getComputedCSS( gridElement, 'padding-left' );\n\n\tconst numColumns = gridTemplateColumns.split( ' ' ).length;\n\tconst numRows = gridTemplateRows.split( ' ' ).length;\n\tconst numItems = numColumns * numRows;\n\treturn {\n\t\tnumColumns,\n\t\tnumRows,\n\t\tnumItems,\n\t\tcurrentColor: getComputedCSS( gridElement, 'color' ),\n\t\tstyle: {\n\t\t\tgridTemplateColumns,\n\t\t\tgridTemplateRows,\n\t\t\tgap: getComputedCSS( gridElement, 'gap' ),\n\t\t\tinset: `\n\t\t\t\tcalc(${ paddingTop } + ${ borderTopWidth })\n\t\t\t\tcalc(${ paddingRight } + ${ borderRightWidth })\n\t\t\t\tcalc(${ paddingBottom } + ${ borderBottomWidth })\n\t\t\t\tcalc(${ paddingLeft } + ${ borderLeftWidth })\n\t\t\t`,\n\t\t},\n\t};\n}\n"], "mappings": "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", "names": [] }