| 1 | // Parse SVG PathData
|
|---|
| 2 | // http://www.w3.org/TR/SVG/paths.html#PathDataBNF
|
|---|
| 3 | import { COMMAND_ARG_COUNTS, SVGPathData } from "./SVGPathData";
|
|---|
| 4 | import { TransformableSVG } from "./TransformableSVG";
|
|---|
| 5 | import { SVGCommand, TransformFunction } from "./types";
|
|---|
| 6 | // Private consts : Char groups
|
|---|
| 7 | const isWhiteSpace = (c: string) =>
|
|---|
| 8 | " " === c || "\t" === c || "\r" === c || "\n" === c;
|
|---|
| 9 | const isDigit = (c: string) =>
|
|---|
| 10 | "0".charCodeAt(0) <= c.charCodeAt(0) && c.charCodeAt(0) <= "9".charCodeAt(0);
|
|---|
| 11 | const COMMANDS = "mMzZlLhHvVcCsSqQtTaA";
|
|---|
| 12 |
|
|---|
| 13 | export class SVGPathDataParser extends TransformableSVG {
|
|---|
| 14 | private curNumber: string = "";
|
|---|
| 15 | private curCommandType: SVGCommand["type"] | -1 = -1;
|
|---|
| 16 | private curCommandRelative = false;
|
|---|
| 17 | private canParseCommandOrComma = true;
|
|---|
| 18 | private curNumberHasExp = false;
|
|---|
| 19 | private curNumberHasExpDigits = false;
|
|---|
| 20 | private curNumberHasDecimal = false;
|
|---|
| 21 | private curArgs: number[] = [];
|
|---|
| 22 |
|
|---|
| 23 | constructor() {
|
|---|
| 24 | super();
|
|---|
| 25 | }
|
|---|
| 26 |
|
|---|
| 27 | finish(commands: SVGCommand[] = []) {
|
|---|
| 28 | this.parse(" ", commands);
|
|---|
| 29 | // Adding residual command
|
|---|
| 30 | if (0 !== this.curArgs.length || !this.canParseCommandOrComma) {
|
|---|
| 31 | throw new SyntaxError("Unterminated command at the path end.");
|
|---|
| 32 | }
|
|---|
| 33 | return commands;
|
|---|
| 34 | }
|
|---|
| 35 |
|
|---|
| 36 | parse(str: string, commands: SVGCommand[] = []) {
|
|---|
| 37 | const finishCommand = (command: SVGCommand) => {
|
|---|
| 38 | commands.push(command);
|
|---|
| 39 | this.curArgs.length = 0;
|
|---|
| 40 | this.canParseCommandOrComma = true;
|
|---|
| 41 | };
|
|---|
| 42 |
|
|---|
| 43 | for (let i = 0; i < str.length; i++) {
|
|---|
| 44 | const c = str[i];
|
|---|
| 45 | // White spaces parsing
|
|---|
| 46 | const isAArcFlag = this.curCommandType === SVGPathData.ARC &&
|
|---|
| 47 | (this.curArgs.length === 3 || this.curArgs.length === 4) &&
|
|---|
| 48 | this.curNumber.length === 1 &&
|
|---|
| 49 | (this.curNumber === "0" || this.curNumber === "1");
|
|---|
| 50 | const isEndingDigit = isDigit(c) && (
|
|---|
| 51 | (this.curNumber === "0" && c === "0") ||
|
|---|
| 52 | isAArcFlag
|
|---|
| 53 | );
|
|---|
| 54 |
|
|---|
| 55 | if (
|
|---|
| 56 | isDigit(c) &&
|
|---|
| 57 | !isEndingDigit
|
|---|
| 58 | ) {
|
|---|
| 59 | this.curNumber += c;
|
|---|
| 60 | this.curNumberHasExpDigits = this.curNumberHasExp;
|
|---|
| 61 | continue;
|
|---|
| 62 | }
|
|---|
| 63 | if ("e" === c || "E" === c) {
|
|---|
| 64 | this.curNumber += c;
|
|---|
| 65 | this.curNumberHasExp = true;
|
|---|
| 66 | continue;
|
|---|
| 67 | }
|
|---|
| 68 | if (
|
|---|
| 69 | ("-" === c || "+" === c) &&
|
|---|
| 70 | this.curNumberHasExp &&
|
|---|
| 71 | !this.curNumberHasExpDigits
|
|---|
| 72 | ) {
|
|---|
| 73 | this.curNumber += c;
|
|---|
| 74 | continue;
|
|---|
| 75 | }
|
|---|
| 76 | // if we already have a ".", it means we are starting a new number
|
|---|
| 77 | if ("." === c && !this.curNumberHasExp && !this.curNumberHasDecimal && !isAArcFlag) {
|
|---|
| 78 | this.curNumber += c;
|
|---|
| 79 | this.curNumberHasDecimal = true;
|
|---|
| 80 | continue;
|
|---|
| 81 | }
|
|---|
| 82 |
|
|---|
| 83 | // New number
|
|---|
| 84 | if (this.curNumber && -1 !== this.curCommandType) {
|
|---|
| 85 | const val = Number(this.curNumber);
|
|---|
| 86 | if (isNaN(val)) {
|
|---|
| 87 | throw new SyntaxError(`Invalid number ending at ${i}`);
|
|---|
| 88 | }
|
|---|
| 89 | if (this.curCommandType === SVGPathData.ARC) {
|
|---|
| 90 | if (0 === this.curArgs.length || 1 === this.curArgs.length) {
|
|---|
| 91 | if (0 > val) {
|
|---|
| 92 | throw new SyntaxError(
|
|---|
| 93 | `Expected positive number, got "${val}" at index "${i}"`,
|
|---|
| 94 | );
|
|---|
| 95 | }
|
|---|
| 96 | } else if (3 === this.curArgs.length || 4 === this.curArgs.length) {
|
|---|
| 97 | if ("0" !== this.curNumber && "1" !== this.curNumber) {
|
|---|
| 98 | throw new SyntaxError(
|
|---|
| 99 | `Expected a flag, got "${this.curNumber}" at index "${i}"`,
|
|---|
| 100 | );
|
|---|
| 101 | }
|
|---|
| 102 | }
|
|---|
| 103 | }
|
|---|
| 104 | this.curArgs.push(val);
|
|---|
| 105 | if (this.curArgs.length === COMMAND_ARG_COUNTS[this.curCommandType]) {
|
|---|
| 106 | if (SVGPathData.HORIZ_LINE_TO === this.curCommandType) {
|
|---|
| 107 | finishCommand({
|
|---|
| 108 | type: SVGPathData.HORIZ_LINE_TO,
|
|---|
| 109 | relative: this.curCommandRelative,
|
|---|
| 110 | x: val,
|
|---|
| 111 | });
|
|---|
| 112 | } else if (SVGPathData.VERT_LINE_TO === this.curCommandType) {
|
|---|
| 113 | finishCommand({
|
|---|
| 114 | type: SVGPathData.VERT_LINE_TO,
|
|---|
| 115 | relative: this.curCommandRelative,
|
|---|
| 116 | y: val,
|
|---|
| 117 | });
|
|---|
| 118 | // Move to / line to / smooth quadratic curve to commands (x, y)
|
|---|
| 119 | } else if (
|
|---|
| 120 | this.curCommandType === SVGPathData.MOVE_TO ||
|
|---|
| 121 | this.curCommandType === SVGPathData.LINE_TO ||
|
|---|
| 122 | this.curCommandType === SVGPathData.SMOOTH_QUAD_TO
|
|---|
| 123 | ) {
|
|---|
| 124 | finishCommand({
|
|---|
| 125 | type: this.curCommandType,
|
|---|
| 126 | relative: this.curCommandRelative,
|
|---|
| 127 | x: this.curArgs[0],
|
|---|
| 128 | y: this.curArgs[1],
|
|---|
| 129 | } as SVGCommand);
|
|---|
| 130 | // Switch to line to state
|
|---|
| 131 | if (SVGPathData.MOVE_TO === this.curCommandType) {
|
|---|
| 132 | this.curCommandType = SVGPathData.LINE_TO;
|
|---|
| 133 | }
|
|---|
| 134 | } else if (this.curCommandType === SVGPathData.CURVE_TO) {
|
|---|
| 135 | finishCommand({
|
|---|
| 136 | type: SVGPathData.CURVE_TO,
|
|---|
| 137 | relative: this.curCommandRelative,
|
|---|
| 138 | x1: this.curArgs[0],
|
|---|
| 139 | y1: this.curArgs[1],
|
|---|
| 140 | x2: this.curArgs[2],
|
|---|
| 141 | y2: this.curArgs[3],
|
|---|
| 142 | x: this.curArgs[4],
|
|---|
| 143 | y: this.curArgs[5],
|
|---|
| 144 | });
|
|---|
| 145 | } else if (this.curCommandType === SVGPathData.SMOOTH_CURVE_TO) {
|
|---|
| 146 | finishCommand({
|
|---|
| 147 | type: SVGPathData.SMOOTH_CURVE_TO,
|
|---|
| 148 | relative: this.curCommandRelative,
|
|---|
| 149 | x2: this.curArgs[0],
|
|---|
| 150 | y2: this.curArgs[1],
|
|---|
| 151 | x: this.curArgs[2],
|
|---|
| 152 | y: this.curArgs[3],
|
|---|
| 153 | });
|
|---|
| 154 | } else if (this.curCommandType === SVGPathData.QUAD_TO) {
|
|---|
| 155 | finishCommand({
|
|---|
| 156 | type: SVGPathData.QUAD_TO,
|
|---|
| 157 | relative: this.curCommandRelative,
|
|---|
| 158 | x1: this.curArgs[0],
|
|---|
| 159 | y1: this.curArgs[1],
|
|---|
| 160 | x: this.curArgs[2],
|
|---|
| 161 | y: this.curArgs[3],
|
|---|
| 162 | });
|
|---|
| 163 | } else if (this.curCommandType === SVGPathData.ARC) {
|
|---|
| 164 | finishCommand({
|
|---|
| 165 | type: SVGPathData.ARC,
|
|---|
| 166 | relative: this.curCommandRelative,
|
|---|
| 167 | rX: this.curArgs[0],
|
|---|
| 168 | rY: this.curArgs[1],
|
|---|
| 169 | xRot: this.curArgs[2],
|
|---|
| 170 | lArcFlag: this.curArgs[3] as 0 | 1,
|
|---|
| 171 | sweepFlag: this.curArgs[4] as 0 | 1,
|
|---|
| 172 | x: this.curArgs[5],
|
|---|
| 173 | y: this.curArgs[6],
|
|---|
| 174 | });
|
|---|
| 175 | }
|
|---|
| 176 | }
|
|---|
| 177 | this.curNumber = "";
|
|---|
| 178 | this.curNumberHasExpDigits = false;
|
|---|
| 179 | this.curNumberHasExp = false;
|
|---|
| 180 | this.curNumberHasDecimal = false;
|
|---|
| 181 | this.canParseCommandOrComma = true;
|
|---|
| 182 | }
|
|---|
| 183 | // Continue if a white space or a comma was detected
|
|---|
| 184 | if (isWhiteSpace(c)) {
|
|---|
| 185 | continue;
|
|---|
| 186 | }
|
|---|
| 187 | if ("," === c && this.canParseCommandOrComma) {
|
|---|
| 188 | // L 0,0, H is not valid:
|
|---|
| 189 | this.canParseCommandOrComma = false;
|
|---|
| 190 | continue;
|
|---|
| 191 | }
|
|---|
| 192 | // if a sign is detected, then parse the new number
|
|---|
| 193 | if ("+" === c || "-" === c || "." === c) {
|
|---|
| 194 | this.curNumber = c;
|
|---|
| 195 | this.curNumberHasDecimal = "." === c;
|
|---|
| 196 | continue;
|
|---|
| 197 | }
|
|---|
| 198 | // if a 0 is detected, then parse the new number
|
|---|
| 199 | if (isEndingDigit) {
|
|---|
| 200 | this.curNumber = c;
|
|---|
| 201 | this.curNumberHasDecimal = false;
|
|---|
| 202 | continue;
|
|---|
| 203 | }
|
|---|
| 204 |
|
|---|
| 205 | // Adding residual command
|
|---|
| 206 | if (0 !== this.curArgs.length) {
|
|---|
| 207 | throw new SyntaxError(`Unterminated command at index ${i}.`);
|
|---|
| 208 | }
|
|---|
| 209 | if (!this.canParseCommandOrComma) {
|
|---|
| 210 | throw new SyntaxError(
|
|---|
| 211 | `Unexpected character "${c}" at index ${i}. Command cannot follow comma`,
|
|---|
| 212 | );
|
|---|
| 213 | }
|
|---|
| 214 | this.canParseCommandOrComma = false;
|
|---|
| 215 | // Detecting the next command
|
|---|
| 216 | if ("z" === c || "Z" === c) {
|
|---|
| 217 | commands.push({
|
|---|
| 218 | type: SVGPathData.CLOSE_PATH,
|
|---|
| 219 | });
|
|---|
| 220 | this.canParseCommandOrComma = true;
|
|---|
| 221 | this.curCommandType = -1;
|
|---|
| 222 | continue;
|
|---|
| 223 | // Horizontal move to command
|
|---|
| 224 | } else if ("h" === c || "H" === c) {
|
|---|
| 225 | this.curCommandType = SVGPathData.HORIZ_LINE_TO;
|
|---|
| 226 | this.curCommandRelative = "h" === c;
|
|---|
| 227 | // Vertical move to command
|
|---|
| 228 | } else if ("v" === c || "V" === c) {
|
|---|
| 229 | this.curCommandType = SVGPathData.VERT_LINE_TO;
|
|---|
| 230 | this.curCommandRelative = "v" === c;
|
|---|
| 231 | // Move to command
|
|---|
| 232 | } else if ("m" === c || "M" === c) {
|
|---|
| 233 | this.curCommandType = SVGPathData.MOVE_TO;
|
|---|
| 234 | this.curCommandRelative = "m" === c;
|
|---|
| 235 | // Line to command
|
|---|
| 236 | } else if ("l" === c || "L" === c) {
|
|---|
| 237 | this.curCommandType = SVGPathData.LINE_TO;
|
|---|
| 238 | this.curCommandRelative = "l" === c;
|
|---|
| 239 | // Curve to command
|
|---|
| 240 | } else if ("c" === c || "C" === c) {
|
|---|
| 241 | this.curCommandType = SVGPathData.CURVE_TO;
|
|---|
| 242 | this.curCommandRelative = "c" === c;
|
|---|
| 243 | // Smooth curve to command
|
|---|
| 244 | } else if ("s" === c || "S" === c) {
|
|---|
| 245 | this.curCommandType = SVGPathData.SMOOTH_CURVE_TO;
|
|---|
| 246 | this.curCommandRelative = "s" === c;
|
|---|
| 247 | // Quadratic bezier curve to command
|
|---|
| 248 | } else if ("q" === c || "Q" === c) {
|
|---|
| 249 | this.curCommandType = SVGPathData.QUAD_TO;
|
|---|
| 250 | this.curCommandRelative = "q" === c;
|
|---|
| 251 | // Smooth quadratic bezier curve to command
|
|---|
| 252 | } else if ("t" === c || "T" === c) {
|
|---|
| 253 | this.curCommandType = SVGPathData.SMOOTH_QUAD_TO;
|
|---|
| 254 | this.curCommandRelative = "t" === c;
|
|---|
| 255 | // Elliptic arc command
|
|---|
| 256 | } else if ("a" === c || "A" === c) {
|
|---|
| 257 | this.curCommandType = SVGPathData.ARC;
|
|---|
| 258 | this.curCommandRelative = "a" === c;
|
|---|
| 259 | } else {
|
|---|
| 260 | throw new SyntaxError(`Unexpected character "${c}" at index ${i}.`);
|
|---|
| 261 | }
|
|---|
| 262 | }
|
|---|
| 263 | return commands;
|
|---|
| 264 | }
|
|---|
| 265 | /**
|
|---|
| 266 | * Return a wrapper around this parser which applies the transformation on parsed commands.
|
|---|
| 267 | */
|
|---|
| 268 | transform(transform: TransformFunction) {
|
|---|
| 269 | const result = Object.create(this, {
|
|---|
| 270 | parse: {
|
|---|
| 271 | value(chunk: string, commands: SVGCommand[] = []) {
|
|---|
| 272 | const parsedCommands = Object.getPrototypeOf(this).parse.call(
|
|---|
| 273 | this,
|
|---|
| 274 | chunk,
|
|---|
| 275 | );
|
|---|
| 276 | for (const c of parsedCommands) {
|
|---|
| 277 | const cT = transform(c);
|
|---|
| 278 | if (Array.isArray(cT)) {
|
|---|
| 279 | commands.push(...cT);
|
|---|
| 280 | } else {
|
|---|
| 281 | commands.push(cT);
|
|---|
| 282 | }
|
|---|
| 283 | }
|
|---|
| 284 | return commands;
|
|---|
| 285 | },
|
|---|
| 286 | },
|
|---|
| 287 | });
|
|---|
| 288 | return result as this;
|
|---|
| 289 | }
|
|---|
| 290 | }
|
|---|
