|
2 | 2 | // SPDX-License-Identifier: MIT |
3 | 3 | // Copyright (c) vis.gl contributors |
4 | 4 |
|
5 | | -const PERCENT_OR_PIXELS_REGEX = /([0-9]+\.?[0-9]*)(%|px)/; |
| 5 | +export type LayoutExpression = |
| 6 | + | {type: 'literal'; value: number} |
| 7 | + | {type: 'percentage'; value: number} |
| 8 | + | {type: 'binary'; operator: '+' | '-'; left: LayoutExpression; right: LayoutExpression}; |
6 | 9 |
|
7 | | -export type Position = { |
8 | | - position: number; |
9 | | - relative: boolean; |
10 | | -}; |
| 10 | +type Token = |
| 11 | + | {type: 'number'; value: number} |
| 12 | + | {type: 'word'; value: string} |
| 13 | + | {type: 'symbol'; value: string}; |
11 | 14 |
|
12 | | -// Takes a number or a string of formats `50%`, `33.3%` or `200px` |
13 | | -export function parsePosition(value: number | string): Position { |
| 15 | +const NUMBER_REGEX = /^(?:\d+\.?\d*|\.\d+)$/; |
| 16 | + |
| 17 | +// Takes a number or a string expression that may include numbers, percentages, `px` units or |
| 18 | +// CSS-style `calc()` expressions containing `+`/`-` operations and parentheses. |
| 19 | +export function parsePosition(value: number | string): LayoutExpression { |
14 | 20 | switch (typeof value) { |
15 | 21 | case 'number': |
16 | | - return { |
17 | | - position: value, |
18 | | - relative: false |
19 | | - }; |
| 22 | + if (!Number.isFinite(value)) { |
| 23 | + throw new Error(`Could not parse position string ${value}`); |
| 24 | + } |
| 25 | + return {type: 'literal', value}; |
20 | 26 |
|
21 | 27 | case 'string': |
22 | | - const match = PERCENT_OR_PIXELS_REGEX.exec(value); |
23 | | - if (match && match.length >= 3) { |
24 | | - const relative = match[2] === '%'; |
25 | | - const position = parseFloat(match[1]); |
26 | | - return { |
27 | | - position: relative ? position / 100 : position, |
28 | | - relative |
29 | | - }; |
| 28 | + try { |
| 29 | + const tokens = tokenize(value); |
| 30 | + const parser = new LayoutExpressionParser(tokens); |
| 31 | + return parser.parseExpression(); |
| 32 | + } catch (error) { |
| 33 | + const reason = error instanceof Error ? error.message : String(error); |
| 34 | + throw new Error(`Could not parse position string ${value}: ${reason}`); |
30 | 35 | } |
31 | | - // fallthrough |
32 | 36 |
|
33 | 37 | default: |
34 | | - // eslint-disable-line |
35 | 38 | throw new Error(`Could not parse position string ${value}`); |
36 | 39 | } |
37 | 40 | } |
38 | 41 |
|
39 | | -export function getPosition(position: Position, extent: number): number { |
40 | | - return position.relative ? Math.round(position.position * extent) : position.position; |
| 42 | +export function evaluateLayoutExpression(expression: LayoutExpression, extent: number): number { |
| 43 | + switch (expression.type) { |
| 44 | + case 'literal': |
| 45 | + return expression.value; |
| 46 | + case 'percentage': |
| 47 | + return Math.round(expression.value * extent); |
| 48 | + case 'binary': |
| 49 | + const left = evaluateLayoutExpression(expression.left, extent); |
| 50 | + const right = evaluateLayoutExpression(expression.right, extent); |
| 51 | + return expression.operator === '+' ? left + right : left - right; |
| 52 | + default: |
| 53 | + throw new Error('Unknown layout expression type'); |
| 54 | + } |
| 55 | +} |
| 56 | + |
| 57 | +export function getPosition(expression: LayoutExpression, extent: number): number { |
| 58 | + return evaluateLayoutExpression(expression, extent); |
| 59 | +} |
| 60 | + |
| 61 | +function tokenize(input: string): Token[] { |
| 62 | + const tokens: Token[] = []; |
| 63 | + let index = 0; |
| 64 | + while (index < input.length) { |
| 65 | + const char = input[index]; |
| 66 | + if (/\s/.test(char)) { |
| 67 | + index++; |
| 68 | + continue; |
| 69 | + } |
| 70 | + if (char === '+' || char === '-' || char === '(' || char === ')' || char === '%') { |
| 71 | + tokens.push({type: 'symbol', value: char}); |
| 72 | + index++; |
| 73 | + continue; |
| 74 | + } |
| 75 | + if (isDigit(char) || char === '.') { |
| 76 | + const start = index; |
| 77 | + let hasDecimal = char === '.'; |
| 78 | + index++; |
| 79 | + while (index < input.length) { |
| 80 | + const next = input[index]; |
| 81 | + if (isDigit(next)) { |
| 82 | + index++; |
| 83 | + continue; |
| 84 | + } |
| 85 | + if (next === '.' && !hasDecimal) { |
| 86 | + hasDecimal = true; |
| 87 | + index++; |
| 88 | + continue; |
| 89 | + } |
| 90 | + break; |
| 91 | + } |
| 92 | + const numberString = input.slice(start, index); |
| 93 | + if (!NUMBER_REGEX.test(numberString)) { |
| 94 | + throw new Error('Invalid number token'); |
| 95 | + } |
| 96 | + tokens.push({type: 'number', value: parseFloat(numberString)}); |
| 97 | + continue; |
| 98 | + } |
| 99 | + if (isAlpha(char)) { |
| 100 | + const start = index; |
| 101 | + while (index < input.length && isAlpha(input[index])) { |
| 102 | + index++; |
| 103 | + } |
| 104 | + const word = input.slice(start, index).toLowerCase(); |
| 105 | + tokens.push({type: 'word', value: word}); |
| 106 | + continue; |
| 107 | + } |
| 108 | + throw new Error('Invalid token in position string'); |
| 109 | + } |
| 110 | + return tokens; |
| 111 | +} |
| 112 | + |
| 113 | +class LayoutExpressionParser { |
| 114 | + private tokens: Token[]; |
| 115 | + private index = 0; |
| 116 | + |
| 117 | + constructor(tokens: Token[]) { |
| 118 | + this.tokens = tokens; |
| 119 | + } |
| 120 | + |
| 121 | + parseExpression(): LayoutExpression { |
| 122 | + const expression = this.parseBinaryExpression(); |
| 123 | + if (this.index < this.tokens.length) { |
| 124 | + throw new Error('Unexpected token at end of expression'); |
| 125 | + } |
| 126 | + return expression; |
| 127 | + } |
| 128 | + |
| 129 | + private parseBinaryExpression(): LayoutExpression { |
| 130 | + let expression = this.parseFactor(); |
| 131 | + let token = this.peek(); |
| 132 | + while (isAddSubSymbol(token)) { |
| 133 | + this.index++; |
| 134 | + const right = this.parseFactor(); |
| 135 | + expression = {type: 'binary', operator: token.value, left: expression, right}; |
| 136 | + token = this.peek(); |
| 137 | + } |
| 138 | + return expression; |
| 139 | + } |
| 140 | + |
| 141 | + private parseFactor(): LayoutExpression { |
| 142 | + const token = this.peek(); |
| 143 | + if (!token) { |
| 144 | + throw new Error('Unexpected end of expression'); |
| 145 | + } |
| 146 | + |
| 147 | + if (token.type === 'symbol' && token.value === '+') { |
| 148 | + this.index++; |
| 149 | + return this.parseFactor(); |
| 150 | + } |
| 151 | + if (token.type === 'symbol' && token.value === '-') { |
| 152 | + this.index++; |
| 153 | + const factor = this.parseFactor(); |
| 154 | + return {type: 'binary', operator: '-', left: {type: 'literal', value: 0}, right: factor}; |
| 155 | + } |
| 156 | + if (token.type === 'symbol' && token.value === '(') { |
| 157 | + this.index++; |
| 158 | + const expression = this.parseBinaryExpression(); |
| 159 | + if (!this.consumeSymbol(')')) { |
| 160 | + throw new Error('Missing closing parenthesis'); |
| 161 | + } |
| 162 | + return expression; |
| 163 | + } |
| 164 | + if (token.type === 'word' && token.value === 'calc') { |
| 165 | + this.index++; |
| 166 | + if (!this.consumeSymbol('(')) { |
| 167 | + throw new Error('Missing opening parenthesis after calc'); |
| 168 | + } |
| 169 | + const expression = this.parseBinaryExpression(); |
| 170 | + if (!this.consumeSymbol(')')) { |
| 171 | + throw new Error('Missing closing parenthesis'); |
| 172 | + } |
| 173 | + return expression; |
| 174 | + } |
| 175 | + if (token.type === 'number') { |
| 176 | + this.index++; |
| 177 | + const numberValue = token.value; |
| 178 | + const nextToken = this.peek(); |
| 179 | + if (nextToken && nextToken.type === 'symbol' && nextToken.value === '%') { |
| 180 | + this.index++; |
| 181 | + return {type: 'percentage', value: numberValue / 100}; |
| 182 | + } |
| 183 | + if (nextToken && nextToken.type === 'word' && nextToken.value === 'px') { |
| 184 | + this.index++; |
| 185 | + return {type: 'literal', value: numberValue}; |
| 186 | + } |
| 187 | + return {type: 'literal', value: numberValue}; |
| 188 | + } |
| 189 | + |
| 190 | + throw new Error('Unexpected token in expression'); |
| 191 | + } |
| 192 | + |
| 193 | + private consumeSymbol(value: string): boolean { |
| 194 | + const token = this.peek(); |
| 195 | + if (token && token.type === 'symbol' && token.value === value) { |
| 196 | + this.index++; |
| 197 | + return true; |
| 198 | + } |
| 199 | + return false; |
| 200 | + } |
| 201 | + |
| 202 | + private peek(): Token | null { |
| 203 | + return this.tokens[this.index] || null; |
| 204 | + } |
| 205 | +} |
| 206 | + |
| 207 | +function isDigit(char: string): boolean { |
| 208 | + return char >= '0' && char <= '9'; |
| 209 | +} |
| 210 | + |
| 211 | +function isAlpha(char: string): boolean { |
| 212 | + return (char >= 'a' && char <= 'z') || (char >= 'A' && char <= 'Z'); |
| 213 | +} |
| 214 | + |
| 215 | +function isAddSubSymbol(token: Token | null): token is Token & {type: 'symbol'; value: '+' | '-'} { |
| 216 | + return Boolean(token && token.type === 'symbol' && (token.value === '+' || token.value === '-')); |
41 | 217 | } |
0 commit comments