30:T23c9,parsePosition = (string, w0, h0) => { // See https://developer.mozilla.org/en-US/docs/Web/CSS/position_value // Formal syntax // [ // [ left | center | right ] || [ top | center | bottom ] // | // [ left | center | right | | ] // [ top | center | bottom | | ]? // | // [ [ left | right ] [ | ] ] && // [ [ top | bottom ] [ | ] ] // ] // Default values const x0 = w0 / 2; const y0 = h0 / 2; const isString = s => typeof s === 'string' || s instanceof String; const X = (inputX, inputErrors = []) => { const x = inputX.x === undefined ? inputX : inputX.x; const errors = []; if (isString(inputErrors) && inputErrors.trim() !== '') { errors.push(inputErrors); } else if (Array.isArray(inputErrors)) { inputErrors.forEach(e => errors.push(e)); } if (inputX.errors !== undefined && Array.isArray(inputX.errors)) { inputX.errors.forEach(e => errors.push(e)); } const r = { x }; if (errors.length > 0) r.errors = errors; return r; }; const XSum = (inputX1, inputX2) => { const x1 = inputX1.x === undefined ? inputX1 : inputX1.x; const x2 = inputX2.x === undefined ? inputX2 : inputX2.x; const errors = []; if (inputX1.errors !== undefined && Array.isArray(inputX1.errors)) { inputX1.errors.forEach(e => errors.push(e)); } if (inputX2.errors !== undefined && Array.isArray(inputX2.errors)) { inputX2.errors.forEach(e => errors.push(e)); } const r = { x: x1 + x2 }; if (errors.length > 0) r.errors = errors; return r; }; const Y = (inputY, inputErrors = []) => { const y = inputY.y === undefined ? inputY : inputY.y; const errors = []; if (isString(inputErrors) && inputErrors.trim() !== '') { errors.push(inputErrors); } else if (Array.isArray(inputErrors)) { inputErrors.forEach(e => errors.push(e)); } if (inputY.errors !== undefined && Array.isArray(inputY.errors)) { inputY.errors.forEach(e => errors.push(e)); } const r = { y }; if (errors.length > 0) r.errors = errors; return r; }; const YSum = (inputY1, inputY2) => { const y1 = inputY1.y === undefined ? inputY1 : inputY1.y; const y2 = inputY2.y === undefined ? inputY2 : inputY2.y; const errors = []; if (inputY1.errors !== undefined && Array.isArray(inputY1.errors)) { inputY1.errors.forEach(e => errors.push(e)); } if (inputY2.errors !== undefined && Array.isArray(inputY2.errors)) { inputY2.errors.forEach(e => errors.push(e)); } const r = { y: y1 + y2 }; if (errors.length > 0) r.errors = errors; return r; }; const XY = (inputX, inputY, inputErrors = []) => { const x = inputX.x === undefined ? inputX : inputX.x; const y = inputY.y === undefined ? inputY : inputY.y; const errors = []; if (isString(inputErrors) && inputErrors.trim() !== '') { errors.push(inputErrors); } else if (Array.isArray(inputErrors)) { inputErrors.forEach(e => errors.push(e)); } if (inputX.errors !== undefined && Array.isArray(inputX.errors)) { inputX.errors.forEach(e => errors.push(e)); } if (inputY.errors !== undefined && Array.isArray(inputY.errors)) { inputY.errors.forEach(e => errors.push(e)); } const r = { x, y }; if (errors.length > 0) r.errors = errors; return r; }; const defaultValue = error => { return XY(x0, y0, error ? error : ''); }; const xKeywords = ['left', 'center', 'right']; const isXKeyword = s => xKeywords.includes(s); const parseXKeyword = s => { // [ left | center | right ] if (s === 'left') return X(0); if (s === 'center') return X(x0); if (s === 'right') return X(w0); return X( x0, `Could not parse "${s}" as an horizontal keyword. Defaults to center.` ); }; const yKeywords = ['top', 'center', 'bottom']; const isYKeyword = s => yKeywords.includes(s); const parseYKeyword = s => { // [ top | center | bottom ] if (s === 'top') return Y(0); if (s === 'center') return Y(y0); if (s === 'bottom') return Y(h0); return Y( y0, `Could not parse "${s}" as a vertical keyword. Defaults to center.` ); }; const isPct = s => s[s.length - 1] === '%'; const parseXPct = s => { const v = +s.slice(0, length - 1); if (isNaN(v)) return X( x0, `X position element: "${s}" is a percentage, but cannot be parsed. Defaults to center.` ); return X((w0 * v) / 100); }; const parseYPct = s => { const v = +s.slice(0, length - 1); if (isNaN(v)) return Y( y0, `Y position element: "${s}" is a percentage, but cannot be parsed. Defaults to center.` ); return Y((h0 * v) / 100); }; const isPx = s => s.slice(-2) === 'px'; const parseXPx = s => { const v = +s.slice(0, length - 2); if (isNaN(v)) return X( x0, `X position element: "${s}" is a length in px, but cannot be parsed. Defaults to center.` ); return X(v); }; const parseYPx = s => { const v = +s.slice(0, length - 2); if (isNaN(v)) return Y( y0, `Y position element: "${s}" is a length in px, but cannot be parsed. Defaults to center.` ); return Y(v); }; const parseXValue = s => { // [ left | center | right | | ] if (isXKeyword(s)) return parseXKeyword(s); if (isPx(s)) return parseXPx(s); if (isPct(s)) return parseXPct(s); // other units (em, vh, pt...) are not supported here return X( x0, `Could not parse "${s}" as a X value (keyword, length or percentage). Note that 'px' is the only supported unit for lengths. Defaults to center.` ); }; const parseYValue = s => { // [ top | center | bottom | | ] if (isYKeyword(s)) return parseYKeyword(s); if (isPx(s)) return parseYPx(s); if (isPct(s)) return parseYPct(s); // other units (em, vh, pt...) are not supported here return Y( y0, `Could not parse "${s}" as a Y value (keyword, length or percentage). Note that 'px' is the only supported unit for lengths. Defaults to center.` ); }; const parseXOffset = s => { // [ | ] if (isPx(s)) return parseXPx(s); if (isPct(s)) return parseXPct(s); // other units (em, vh, pt...) are not supported here // Note that the default value here is 0, not x0, since it's an offset return X( 0, `Could not parse "${s}" as a X offset (length or percentage). Note that 'px' is the only supported unit for lengths. Defaults to 0.` ); }; const parseYOffset = s => { // [ | ] if (isPx(s)) return parseYPx(s); if (isPct(s)) return parseYPct(s); // other units (em, vh, pt...) are not supported here // Note that the default value here is 0, not y0, since it's an offset return Y( 0, `Could not parse "${s}" as a Y offset (length or percentage). Note that 'px' is the only supported unit for lengths. Defaults to 0.` ); }; const parseXKeywordAndOffset = (k, o) => { // [ [ left | right ] [ | ] ] const xOrigin = parseXKeyword(k); const xOffset = parseXOffset(o); return XSum(xOrigin, xOffset); }; const parseYKeywordAndOffset = (k, o) => { // [ [ top | bottom ] [ | ] ] const yOrigin = parseYKeyword(k); const yOffset = parseYOffset(o); return YSum(yOrigin, yOffset); }; const values = string.trim().split(' '); if (![1, 2, 4].includes(values.length)) { return defaultValue( `Position string must contain 1, 2, or 4 space-separated values. Got ${ values.length } values: "${values.join(', ')}". Defaults to "center center".}` ); } // 1-value syntax if (values.length === 1) { const v = values[0]; // keyword: Either the horizontal or vertical position; the other axis defaults to center // [ left | center | right ] || [ top | center | bottom ] if (isXKeyword(v)) { return XY(parseXKeyword(v), y0); } if (isYKeyword(v)) { return XY(x0, parseYKeyword(v)); } // value: The position on the x-axis; the y-axis defaults to 50% // [ left | center | right | | ] return XY(parseXValue(v), y0); } // 2-value syntax // [ left | center | right | | ] // [ top | center | bottom | | ]? if (values.length === 2) { const x = parseXValue(values[0]); const y = parseYValue(values[1]); return XY(x, y); } // 4-value syntax // [ [ left | right ] [ | ] ] && // [ [ top | bottom ] [ | ] ] if (values.length === 4) { const x = parseXKeywordAndOffset(values[0], values[1]); const y = parseYKeywordAndOffset(values[2], values[3]); return XY(x, y); } return defaultValue( `Couldn't parse the position string: "${string}". Defaults to "center center".` ); }31:[{"id":"3dc6c8c68065f516e44c454f51a8e97b148346cf3e84e2328fd9e07ffcf2dc521df45efb5c56fe4883c2bce3ab6a7251a3f1ae1065099f385656ff3f1269d818","href":"https://static.observableusercontent.com/files/3dc6c8c68065f516e44c454f51a8e97b148346cf3e84e2328fd9e07ffcf2dc521df45efb5c56fe4883c2bce3ab6a7251a3f1ae1065099f385656ff3f1269d818","name":"position_type.png","type":"image/png","lastModified":1586243106354.143,"size":65550}] 2e:{"title":"CSS position parser","cells":[{"id":0,"value":"md`# CSS position parser\n\n> The \\`\\` (or \\`\\`) CSS data type denotes a two-dimensional coordinate used to set a location relative to an element box.\n\nhttps://developer.mozilla.org/en-US/docs/Web/CSS/position_value\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"viewof w = number({\n description: \"Reference width\",\n min: 1,\n max: width,\n step: 1,\n value: width / 2\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"viewof h = number({\n description: \"Reference height\",\n min: 1,\n max: width,\n step: 1,\n value: width / 3\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"viewof position = text({\n placeholder: \"left 50%\",\n description: \"Position contains 1 to 4 values\",\n value: hash || 'center 10%'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"parsePosition(position, w, h)","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"showString(position)","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"md`### Valid positions\n\n${valid\n .map(e => `${e}`)\n .join('
')}\n\n### Invalid positions\n\n${invalid\n .map(e => `${e}`)\n .join('
')}\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"md`---\n\n## Credits\n\nNotebook by Sylvain Lesage for the [LIRIS M2i project](https://projet.liris.cnrs.fr/mi2/).\n\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"md`### TODO\n\n- Putting the vertical position first is not supported, but seems to work in CSS\n- The errors are not managed correctly: in bottom 6px right -6px, \"bottom\" and \"right\" are replaced by \"center\" because the horizontal value should come first (see above), but the offset (6px and -6px) are applied.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"valid = [\n 'center',\n 'left',\n 'center top',\n 'right 8.5%',\n 'right -6px bottom 6px',\n '10% 20%',\n '8% 14px',\n \"left 100px top 75px \"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"invalid = ['bottom 6px right -6px', '10 20', \"top 75px left 100px\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"generateUrl = s => {\n const currentURL = new URL(document.baseURI);\n currentURL.hash = encodeURIComponent(s);\n return currentURL.toString();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"parseUrl = () => {\n return decodeURIComponent(window.location.hash.slice(1));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"mutable hash = parseUrl()","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"(window.onhashchange = () => (mutable hash = parseUrl()))","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"showString = string => {\n const margin = 30;\n const { x, y, errors } = parsePosition(string, w, h);\n const svg = d3.select(DOM.svg(w + 2 * margin, h + 2 * margin));\n addBackground(svg, margin);\n addPoint(svg, margin, x, y);\n\n return html`\n

Position: ${string}

\n${svg.node()}\nx = ${x}
\ny = ${y}
\n${\n  Array.isArray(errors) ? errors.map(e => `${e}`) : ''\n}\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"addBackground = (svg, margin) => {\n  const line = (g, x1, y1, x2, y2) =>\n    g\n      .append('line')\n      .attr('x1', x1)\n      .attr('y1', y1)\n      .attr('x2', x2)\n      .attr('y2', y2)\n      .attr('stroke', 'black')\n      .attr('stroke-dasharray', '1')\n      .attr('stroke-width', 0.2);\n\n  const background = svg.append('g');\n  const w = svg.attr('width');\n  const h = svg.attr('height');\n  const bbox = {\n    x1: margin,\n    y1: margin,\n    x2: w - margin,\n    y2: h - margin,\n    width: w - 2 * margin,\n    height: h - 2 * margin\n  };\n\n  background\n    .append('rect')\n    .attr('x', bbox.x1)\n    .attr('y', bbox.y1)\n    .attr('width', bbox.width)\n    .attr('height', bbox.height)\n    .attr('fill', '#cce7f4');\n  line(background, 0, margin, w, margin);\n  line(background, 0, h - margin, w, h - margin);\n  line(background, margin, 0, margin, h);\n  line(background, w - margin, 0, w - margin, h);\n  line(background, w / 2, 0, w / 2, h);\n  line(background, 0, h / 2, w, h / 2);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"addPoint = (svg, margin, x, y) => {\n  svg\n    .append('circle')\n    .attr('cx', x + margin)\n    .attr('cy', y + margin)\n    .attr('r', 5)\n    .attr('fill', 'black');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"import { number, text } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}