webgl2-sdf 0.0.1

package/src/svg/get-beziers-from-raw-paths.ts

@@ -0,0 +1,112 @@
+import { PathState  } from './path-state.js';
+import { z } from './path-segment/z.js';
+import { c } from './path-segment/c.js';
+import { s } from './path-segment/s.js';
+import { l } from './path-segment/l.js';
+import { h } from './path-segment/h.js';
+import { v } from './path-segment/v.js';
+import { q } from './path-segment/q.js';
+import { t } from './path-segment/t.js';
+
+
+const pathFs: { [index:string] : (s: PathState) => number[][] } = { 
+	c, // cubic bezier
+	h, // horizontal line
+	l, // line
+	q, // quadratic bezier
+	s, // cubic bezier (smooth)
+	t, // quadratic bezier (smooth)
+	v, // vertical line
+	z  // close path
+};
+		
+
+/**
+ * Returns order 1, 2 and 3 beziers from the given SVG DOM element. If a path
+ * data tag is not "C, Q or L, etc", i.e. if it is not an absolute bezier
+ * coordinate then it is converted into one.
+ * 
+ * @param paths An SVG element
+ */
+function getBeziersFromRawPaths(paths: { type: string, values: number[] }[]) {
+
+	if (paths.length === 0) {
+		return []; // A shape is not described   
+	}
+	
+	if (paths[0].type.toLowerCase() !== 'm') {
+		throw new Error(
+			'Invalid SVG - every new path must start with an M or m.'
+		); 
+	}
+
+	const s: PathState = { p: [0,0] };
+
+	const beziersArrays: number[][][][] = [];
+	let beziers: number[][][] = [];
+
+	let prevType: string | undefined = undefined;
+	for (let i=0; i<paths.length; i++) {
+		const pathSeg = paths[i];
+		
+		const type = pathSeg.type.toLowerCase();
+		s.vals = pathSeg.values;
+
+		// If pathSeg was lowercase, it is relative - make absolute
+		if (pathSeg.type === type) {
+			if (type === 'v') {
+				s.vals[0] += s.p[1];
+			} else if (type === 'a') {
+				s.vals[5] += s.p[0];
+				s.vals[6] += s.p[1];
+			} else {
+				for (let i=0; i<s.vals.length; i++) {
+					s.vals[i] += s.p[i%2];
+				}
+			}
+		}
+
+		if (type === 'm') {
+			if (beziers.length) {
+				// This is a subpath, close as if the previous command was a 
+				// Z or z.
+				if (prevType !== 'z') {
+					beziers.push(z(s));
+				}
+
+				// Start new path
+				beziersArrays.push(beziers);
+				beziers = [];
+			}
+
+			s.initialPoint = s.p = s.vals;
+			prevType = type;
+			continue;
+		}
+
+		const f = pathFs[type];
+		if (!f) { throw new Error('Invalid SVG - command not recognized.'); }
+
+		const ps = f(s);
+		s.p = ps[ps.length-1]; // Update current point
+		beziers.push(ps);
+
+		prevType = type;
+	}
+
+
+	if (beziers.length > 0) {
+		// This is a subpath, close as if the previous command was a Z or z.
+		if (prevType !== 'z') {
+			beziers.push(z(s));
+		}
+
+		// Start new path
+		beziersArrays.push(beziers);
+	}
+	
+	return beziersArrays;
+}
+
+
+export { getBeziersFromRawPaths }

package/src/svg/get-paths-from-str.ts

@@ -0,0 +1,19 @@
+import { getBeziersFromRawPaths } from './get-beziers-from-raw-paths.js';
+import { parsePathDataString } from './path-data-polyfill/parse-path-data-string.js';
+
+
+/**
+ * Returns an array of loops with each loop consisting of an array of beziers
+ * and each bezier in turn consisting of an array of control points from the
+ * given SVG path string. An array of loops are returned (as opposed to a single
+ * loop) since an SVG path may have sub-paths.
+ * @param str The SVG path string, e.g. 'M1 1 C 5 1 5 2 4 2 C 3 3 1 3 1 1 z'
+ */
+function getPathsFromStr(str: string): number[][][][] {
+    return getBeziersFromRawPaths(
+        parsePathDataString(str)
+    );
+}
+
+
+export { getPathsFromStr }

package/src/svg/path-data-polyfill/parse-number.ts

@@ -0,0 +1,138 @@
+import { Source } from './source.js';
+
+
+/**
+ * @hidden
+ * Parse a number from an SVG path. This very closely follows genericParseNumber(...) from
+ * Source/core/svg/SVGParserUtilities.cpp.
+ * Spec: http://www.w3.org/TR/SVG11/single-page.html#paths-PathDataBNF
+ * @param source 
+ */
+function parseNumber(source: Source): number {
+    let exponent   = 0;
+    let integer    = 0;
+    let frac       = 1;
+    let decimal    = 0;
+    let sign       = 1;
+    let expsign    = 1;
+    const startIndex = source._currentIndex;
+
+    source._skipOptionalSpaces();
+
+    // Read the sign.
+    if (source._currentIndex < source._endIndex && source._string[source._currentIndex] === "+") {
+        source._currentIndex += 1;
+    } else if (source._currentIndex < source._endIndex && source._string[source._currentIndex] === "-") {
+        source._currentIndex += 1;
+        sign = -1;
+    }
+
+    if (
+        source._currentIndex === source._endIndex ||
+        (
+            (source._string[source._currentIndex] < "0" || source._string[source._currentIndex] > "9") &&
+            source._string[source._currentIndex] !== "."
+        )
+    ) {
+        throw new Error('The first character of a number must be one of [0-9+-.].');
+    }
+
+    // Read the integer part, build right-to-left.
+    const startIntPartIndex = source._currentIndex;
+
+    while (
+        source._currentIndex < source._endIndex &&
+        source._string[source._currentIndex] >= "0" &&
+        source._string[source._currentIndex] <= "9"
+    ) {
+        source._currentIndex += 1; // Advance to first non-digit.
+    }
+
+    if (source._currentIndex !== startIntPartIndex) {
+        let scanIntPartIndex = source._currentIndex - 1;
+        let multiplier = 1;
+
+        while (scanIntPartIndex >= startIntPartIndex) {
+            integer += multiplier * (Number(source._string[scanIntPartIndex]) - 0);
+            scanIntPartIndex -= 1;
+            multiplier *= 10;
+        }
+    }
+
+    // Read the decimals.
+    if (source._currentIndex < source._endIndex && source._string[source._currentIndex] === ".") {
+        source._currentIndex += 1;
+
+        if (
+            source._currentIndex >= source._endIndex ||
+            source._string[source._currentIndex] < "0" ||
+            source._string[source._currentIndex] > "9"
+        ) {
+            throw new Error('There must be a least one digit following the .')
+        }
+
+        while (
+            source._currentIndex < source._endIndex &&
+            source._string[source._currentIndex] >= "0" &&
+            source._string[source._currentIndex] <= "9"
+        ) {
+            frac *= 10;
+            decimal += (Number(source._string.charAt(source._currentIndex))) / frac;
+            source._currentIndex += 1;
+        }
+    }
+
+    // Read the exponent part.
+    if (
+        source._currentIndex !== startIndex &&
+        source._currentIndex + 1 < source._endIndex &&
+        (source._string[source._currentIndex] === "e" || source._string[source._currentIndex] === "E") &&
+        (source._string[source._currentIndex + 1] !== "x" && source._string[source._currentIndex + 1] !== "m")
+    ) {
+        source._currentIndex += 1;
+
+        // Read the sign of the exponent.
+        if (source._string[source._currentIndex] === "+") {
+            source._currentIndex += 1;
+        } else if (source._string[source._currentIndex] === "-") {
+            source._currentIndex += 1;
+            expsign = -1;
+        }
+
+        if (
+            source._currentIndex >= source._endIndex ||
+            source._string[source._currentIndex] < "0" ||
+            source._string[source._currentIndex] > "9"
+        ) {
+            throw new Error('There must be an exponent.')
+        }
+
+        while (
+            source._currentIndex < source._endIndex &&
+            source._string[source._currentIndex] >= "0" &&
+            source._string[source._currentIndex] <= "9"
+        ) {
+            exponent *= 10;
+            exponent += (Number(source._string[source._currentIndex]));
+            source._currentIndex += 1;
+        }
+    }
+
+    let number = integer + decimal;
+    number *= sign;
+
+    if (exponent) {
+        number *= Math.pow(10, expsign * exponent);
+    }
+
+    if (startIndex === source._currentIndex) {
+        throw new Error('Internal error: startIndex === source._currentIndex');
+    }
+
+    source._skipOptionalSpacesOrDelimiter();
+
+    return number;
+}
+
+
+export { parseNumber }

package/src/svg/path-data-polyfill/parse-path-data-string.ts

@@ -0,0 +1,26 @@
+import { Source } from './source.js';
+
+
+/**
+ * @hidden
+ * @param string 
+ */
+function parsePathDataString(string: string) {
+    if (!string.length) { return []; }
+
+    const source = new Source(string);
+    const pathData = [];
+
+    if (!source.initialCommandIsMoveTo()) { 
+        throw new Error('Path must start with m or M'); 
+    }
+
+    while (source.hasMoreData()) {
+        pathData.push(source.parseSegment());
+    }
+
+    return pathData;
+}
+
+
+export { parsePathDataString }

package/src/svg/path-data-polyfill/source.ts

@@ -0,0 +1,176 @@
+import { parseNumber } from './parse-number.js';
+
+
+/** @hidden */
+const COMMAND_MAP: { [index:string]: string } = {
+    Z:"Z", M:"M", L:"L", C:"C", Q:"Q", A:"A", H:"H", V:"V", S:"S", T:"T",
+    z:"Z", m:"m", l:"l", c:"c", q:"q", a:"a", h:"h", v:"v", s:"s", t:"t"
+};
+
+
+/** @hidden */
+class Source {
+    _string: string;
+    _currentIndex: number;
+    _endIndex: number;
+    _prevCommand: string | undefined;
+
+
+    constructor(string: string) {
+        this._string = string;
+        this._currentIndex = 0;
+        this._endIndex = this._string.length;
+        this._prevCommand = undefined;
+        this._skipOptionalSpaces();
+    }
+
+    
+    parseSegment(): { type: string, values: number[] } {
+        const char = this._string[this._currentIndex];
+        let command = COMMAND_MAP[char];
+
+        if (command === undefined) {
+            if (this._prevCommand === undefined) {
+                throw new Error('Implicit command not allowed for first commands.')
+            }
+
+            // Check for remaining coordinates in the current command.
+            if ((char === "+" || char === "-" || char === "." || (char >= "0" && char <= "9")) && 
+                this._prevCommand !== "Z") {
+
+                if (this._prevCommand === "M") {
+                    command = "L";
+                } else if (this._prevCommand === "m") {
+                    command = "l";
+                } else {
+                    command = this._prevCommand;
+                }
+            } else {
+                throw new Error('Remaining coordinates not found for implicit command');
+            }
+        } else {
+            this._currentIndex += 1;
+        }
+
+        this._prevCommand = command;
+
+        let values: number[] | undefined = undefined;
+        const cmd = command.toUpperCase();
+
+        if (cmd === "H" || cmd === "V") {
+            values = [parseNumber(this)];
+        } else if (cmd === "M" || cmd === "L" || cmd === "T") {
+            values = [parseNumber(this), parseNumber(this)];
+        } else if (cmd === "S" || cmd === "Q") {
+            values = [parseNumber(this), parseNumber(this), parseNumber(this), parseNumber(this)];
+        } else if (cmd === "C") {
+            values = [
+                parseNumber(this),
+                parseNumber(this),
+                parseNumber(this),
+                parseNumber(this),
+                parseNumber(this),
+                parseNumber(this)
+            ];
+        } else if (cmd === "A") {
+            values = [
+                parseNumber(this),
+                parseNumber(this),
+                parseNumber(this),
+                this._parseArcFlag(),
+                this._parseArcFlag(),
+                parseNumber(this),
+                parseNumber(this)
+            ];
+        } else if (cmd === "Z") {
+            this._skipOptionalSpaces();
+            values = [];
+        }
+
+        if (values === undefined) {
+            throw new Error('Unknown command')
+        } else {
+            return { type: command, values };
+        }          
+    }
+
+
+    hasMoreData(): boolean {
+        return this._currentIndex < this._endIndex;
+    }
+
+
+    initialCommandIsMoveTo(): boolean {
+        // If the path is empty it is still valid, so return true.
+        if (!this.hasMoreData()) {
+            return true;
+        }
+
+        const command = COMMAND_MAP[this._string[this._currentIndex]];
+
+        return command === "M" || command === "m";
+    }
+
+
+    _isCurrentSpace(): boolean {
+        const char = this._string[this._currentIndex];
+        return char <= " " && (char === " " || char === "\n" || char === "\t" || char === "\r" || char === "\f");
+    }
+
+
+    _skipOptionalSpaces(): boolean {
+        while (this._currentIndex < this._endIndex && this._isCurrentSpace()) {
+            this._currentIndex += 1;
+        }
+
+        return this._currentIndex < this._endIndex;
+    }
+
+
+    _skipOptionalSpacesOrDelimiter(): boolean {
+        if (
+            this._currentIndex < this._endIndex &&
+            !this._isCurrentSpace() &&
+            this._string[this._currentIndex] !== ","
+        ) {
+            return false;
+        }
+
+        if (this._skipOptionalSpaces()) {
+            if (this._currentIndex < this._endIndex && this._string[this._currentIndex] === ",") {
+                this._currentIndex += 1;
+                this._skipOptionalSpaces();
+            }
+        }
+
+        return this._currentIndex < this._endIndex;
+    }
+
+
+    _parseArcFlag(): number {
+        if (this._currentIndex >= this._endIndex) {
+            throw new Error('Unable to parse arc flag');
+        }
+
+        let flag: number | undefined = undefined;
+        const flagChar = this._string[this._currentIndex];
+
+        this._currentIndex += 1;
+
+        if (flagChar === "0") {
+            flag = 0;
+        } else if (flagChar === "1") {
+            flag = 1;
+        } else {
+            throw new Error('Unable to parse arc flag - arc flag must be 0 or 1');
+        }
+
+        this._skipOptionalSpacesOrDelimiter();
+
+        return flag;
+    }
+}
+
+
+export { Source }
+ 

package/src/svg/path-segment/c.ts

@@ -0,0 +1,34 @@
+import { PathState } from "../path-state.js";
+
+
+/**
+ * @hidden
+ * C and c: (from www.w3.org) 
+ * 
+ * params: x1 y1 x2 y2 x y
+ * 
+ * Draws a cubic Bézier curve from the current point to (x,y) 
+ * using (x1,y1) as the control point at the beginning of the 
+ * curve and (x2,y2) as the control point at the end of the 
+ * curve. C (uppercase) indicates that absolute coordinates 
+ * will follow; c (lowercase) indicates that relative 
+ * coordinates will follow. Multiple sets of coordinates may 
+ * be specified to draw a polybézier. At the end of the 
+ * command, the new current point becomes the final (x,y) 
+ * coordinate pair used in the polybézier.
+ */
+function c(s: PathState): number[][] {
+    const ps = [
+        s.p,
+        [s.vals![0], s.vals![1]],
+        [s.vals![2], s.vals![3]],
+        [s.vals![4], s.vals![5]]
+    ];
+    s.prev2ndCubicControlPoint = ps[2];
+    s.prev2ndQuadraticControlPoint = undefined;
+    
+    return ps;
+}
+
+
+export { c }

package/src/svg/path-segment/h.ts

@@ -0,0 +1,28 @@
+import { PathState } from '../path-state.js';
+
+
+/** 
+ * @hidden
+ * H and h: (from www.w3.org) 
+ * 
+ * params: x
+ * 
+ * Draws a horizontal line from the current point (cpx, cpy) to (x, cpy). H 
+ * (uppercase) indicates that absolute coordinates will follow; h (lowercase) 
+ * indicates that relative coordinates will follow. Multiple x values can be 
+ * provided (although usually this doesn't make sense). At the end of the 
+ * command, the new current point becomes (x, cpy) for the final value of x.
+ */	
+function h(s: PathState): number[][] {
+    const ps = [
+        s.p, 
+        [s.vals![0], s.p[1]]
+    ];
+    s.prev2ndCubicControlPoint = undefined;
+    s.prev2ndQuadraticControlPoint = undefined;
+    
+    return ps;
+}
+
+
+export { h }

package/src/svg/path-segment/l.ts

@@ -0,0 +1,30 @@
+import { PathState } from '../path-state.js';
+
+
+/** 
+ * @hidden
+ * L and l: (from www.w3.org)
+ * 
+ * params: x y 
+ * 
+ * Draw a line from the current point to the given (x,y) coordinate which 
+ * becomes the new current point. L (uppercase) indicates that absolute 
+ * coordinates will follow; l (lowercase) indicates that relative coordinates 
+ * will follow. A number of coordinates pairs may be specified to draw a 
+ * polyline. At the end of the command, the new current point is set to the 
+ * final set of coordinates provided.
+ */	
+function l(s: PathState): number[][] {
+    const ps = [
+        s.p,
+        s.vals!
+    ];
+
+    s.prev2ndCubicControlPoint = undefined;
+    s.prev2ndQuadraticControlPoint = undefined;
+
+    return ps;
+}
+
+
+export { l }

package/src/svg/path-segment/q.ts

@@ -0,0 +1,30 @@
+import { PathState } from '../path-state.js';
+
+
+/**
+ * @hidden
+ * Q and q: (from www.w3.org) 
+ * 
+ * params: x1 y1 x y
+ * 
+ * Draws a quadratic Bézier curve from the current point to (x,y) using (x1,y1) 
+ * as the control point. Q (uppercase) indicates that absolute coordinates will 
+ * follow; q (lowercase) indicates that relative coordinates will follow. 
+ * Multiple sets of coordinates may be specified to draw a polybézier. At the 
+ * end of the command, the new current point becomes the final (x,y) coordinate 
+ * pair used in the polybézier.
+ */
+function q(s: PathState): number[][] {
+    const QP1 = [s.vals![0], s.vals![1]];
+    const QP2 = [s.vals![2], s.vals![3]];
+    
+    s.prev2ndCubicControlPoint = undefined;
+    s.prev2ndQuadraticControlPoint = QP1;
+
+    const ps = [s.p, QP1, QP2];
+    
+    return ps;
+}
+
+
+export { q }

package/src/svg/path-segment/s.ts

@@ -0,0 +1,40 @@
+import { PathState } from "../path-state.js";
+
+
+/**
+ * @hidden
+ * S and s: (from www.w3.org) 
+ * 
+ * params: x2 y2 x y
+ * 
+ * Draws a cubic Bézier curve from the current point to (x,y). The first control 
+ * point is assumed to be the reflection of the second control point on the 
+ * previous command relative to the current point. (If there is no previous 
+ * command or if the previous command was not an C, c, S or s, assume the first 
+ * control point is coincident with the current point.) (x2,y2) is the second 
+ * control point (i.e., the control point at the end of the curve). S 
+ * (uppercase) indicates that absolute coordinates will follow; s (lowercase) 
+ * indicates that relative coordinates will follow. Multiple sets of coordinates 
+ * may be specified to draw a polybézier. At the end of the command, the new 
+ * current point becomes the final (x,y) coordinate pair used in the polybézier.
+ */
+function s(s: PathState): number[][] {
+    const p = s.prev2ndCubicControlPoint
+        ? [(s.p[0] - s.prev2ndCubicControlPoint[0]) + s.p[0], 
+           (s.p[1] - s.prev2ndCubicControlPoint[1]) + s.p[1]]
+        : s.p;
+
+    const ps = [
+        s.p,
+        p,
+        [s.vals![0], s.vals![1]],
+        [s.vals![2], s.vals![3]]
+    ];
+    s.prev2ndCubicControlPoint = ps[2];
+    s.prev2ndQuadraticControlPoint = undefined;
+    
+    return ps;
+}
+
+
+export { s }

package/src/svg/path-segment/t.ts

@@ -0,0 +1,35 @@
+import { PathState } from '../path-state.js';
+
+
+/**
+ * @hidden
+ * T and t: (from www.w3.org) 
+ *
+ * params: x y
+ * 
+ * Draws a quadratic Bézier curve from the current point to (x,y). The control 
+ * point is assumed to be the reflection of the control point on the previous 
+ * command relative to the current point. (If there is no previous command or if 
+ * the previous command was not a Q, q, T or t, assume the control point is 
+ * coincident with the current point.) T (uppercase) indicates that absolute 
+ * coordinates will follow; t (lowercase) indicates that relative coordinates 
+ * will follow. At the end of the command, the new current point becomes the 
+ * final (x,y) coordinate pair used in the polybézier.
+ */
+function t(s: PathState): number[][] {
+    const p = s.prev2ndQuadraticControlPoint
+        ? [(s.p[0] - s.prev2ndQuadraticControlPoint[0]) + s.p[0], 
+           (s.p[1] - s.prev2ndQuadraticControlPoint[1]) + s.p[1]]
+        : s.p;
+
+    const QP1 = p;
+    const QP2 = [s.vals![0], s.vals![1]];
+    
+    s.prev2ndCubicControlPoint = undefined;
+    s.prev2ndQuadraticControlPoint = QP1;
+
+    return [s.p, QP1, QP2];
+}
+
+
+export { t }