├── .gitignore
├── .nojekyll
├── README.md
├── coord.js
├── index.html
├── index.js
├── library.js
├── outline.js
├── package.json
├── point-curve-shape.js
├── point.js
├── svg-parser.js
└── test.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/.nojekyll:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pomax/js-svg-path/6536b71983d3c565c9a62a4fcc7a9551c48a829c/.nojekyll


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # js-svg-path
  2 | 
  3 | A parser that turns SVG path strings into a JS object you can mess with. Basically if you want to mess around with `svg` paths, and you want the convenience of "points" rather than "a string" where it comes to the `d` attribute, this library's got you covered.
  4 | 
  5 | ## Installation
  6 | 
  7 | `npm install js-svg-path`, with optional `--save` or `--save-dev` if you need it saved in your package.json file.
  8 | 
  9 | ## Using this thing
 10 | 
 11 | Use in Node.js as:
 12 | 
 13 | ```
 14 | var library = require('js-svg-path');
 15 | ```
 16 | 
 17 | Or use in the browser as:
 18 | ```
 19 | <!-- this gives you window.PathConverter to work with after loading: -->
 20 | <script src="js-svg-path/library.js"></script>
 21 | ```
 22 | 
 23 | Easy-peasy.
 24 | 
 25 | ## The API(s)
 26 | 
 27 | There are three objects, and one utility function, exposed in this API.
 28 | 
 29 | ### library.parse(SVGPathString)
 30 | 
 31 | You'll want this 99.99% of the time. This function ingests an SVG path string, and returns an `Outline` object for you to do with as you please.
 32 | 
 33 | ### library.Outline
 34 | 
 35 | The `Outline` object represents a full SVG path outline (which may consist of nested subpats). It is constructed as `new library.Outline()` and has the following API:
 36 | 
 37 | - `getShapes()` - Gets all shapes defined in the path that the outline was built on.
 38 | - `getShape(idx)` - This gets a specific subpath in an outline. For obvious reasons, `idx` starts at 0.
 39 | - `toSVG()` - Serialize this outline to an SVG path. This will yield a path with *absolute* coordinates, but is for all intents and purposes idempotent: pushing in a path should yield an identically rendered path through `.toSVG()`
 40 | 
 41 | and the following API that most of the time you shouldn't care about but sometimes you will:
 42 | 
 43 | - `startGroup()` - on an empty outline, this essentially "starts recording an outline".
 44 | -	`startShape()` - this marks the start of a new (sub)path in the outline.
 45 | - `addPoint(x,y)` - this adds a vertex to the outline, at absolute coordinate (x/y).
 46 | - `setLeftControl(x,y)` - this modifies the current point such that it has a left-side control point.
 47 | - `setRightControl(x,y)` - this modifies the current point such that it has a right-side control point.
 48 | - `closeShape()` - this signals that we are done chronicalling the current (sub)path.
 49 | -	`closeGroup()` - this signals that we are done recording this outline entirely.
 50 | 
 51 | ### library.PointCurveShape
 52 | 
 53 | This is an internal structure, but why not expose it to you? Each (sub)path in an outline is a PointCurveShape that is constructed with `new library.PointCurveShap()` and has the following API:
 54 | 
 55 | - `current()` - get the current point. This is relevant while an outline is being built.
 56 | - `addPoint(x,y)` - add a vertex to this shape.
 57 | - `setLeft(x,y)` - set the left control point for this vertex to (x/y).
 58 | - `setRight(x,y)` - set the right control point for this vertex to (x/y).
 59 | - `toSVG()` - serializes this "shape" (i.e. path) to SVG form.
 60 | 
 61 | ### library.SVGParser
 62 | 
 63 | This is the main factory object and has very little in the way of its own API:
 64 | 
 65 | - `new library.SVGParser(outline)` - the SVGParser constructor takes an `Outline` object as constructor argument, which will be used to record parsing results.
 66 | - `getReceiver()` - returns the outline recorder passed into the constructor.
 67 | - `parse(path, [xoffset, yoffset])` - parses an SVG path, with an optional (xoffset/yoffset) offset to translate the entire path uniformly.
 68 | 
 69 | ## An example:
 70 | 
 71 | Let's ingest an SVG's path, and then generate the SVG code that shows you where all the vectices and control points are:
 72 | 
 73 | ```js
 74 | const path1 = find("svg path")[0];
 75 | const path2 = find("svg path")[1];
 76 | const d = path1.get("d");
 77 | 
 78 | var outline = new Receiver();
 79 | const parser = new SVGParser(outline);
 80 | parser.parse(d);
 81 | 
 82 | const vertices = [`<path d="${d}"/>`];
 83 | outline.getShapes().forEach(shape => {
 84 |   shape.points.forEach(p => {
 85 |     let m = p.main, l = p.left, r = p.right;
 86 |     if (l) {
 87 |       vertices.push(`<path d="M${l.x} ${l.y} L${m.x} ${m.y}" stroke="red"/>`)
 88 |       vertices.push(`<circle cx="${l.x}" cy="${l.y}" r="1" fill="red" stroke="none"/>`)
 89 |     }
 90 |     if (r) {
 91 |       vertices.push(`<path d="M${r.x} ${r.y} L${m.x} ${m.y}" stroke="green"/>`)
 92 |       vertices.push(`<circle cx="${r.x}" cy="${r.y}" r="1" fill="green" stroke="none"/>`)
 93 |     }
 94 |     vertices.push(`<circle cx="${m.x}" cy="${m.y}" r="1" fill="blue" stroke="none"/>`)
 95 |   });
 96 | });
 97 | 
 98 | const svg2 = find("svg g")[1];
 99 | svg2.innerHTML = vertices.join('\n');
100 | ```
101 | 
102 | ## Live demo?
103 | 
104 | Yeah alright: https://pomax.github.io/js-svg-path, and obviously to see *why* it works, view-source that.
105 | 


--------------------------------------------------------------------------------
/coord.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Trivial coordinate class
 3 |  */
 4 | class Coord {
 5 | 	constructor(x,y) {
 6 | 		if (isNaN(x) || isNaN(y)) {
 7 | 			throw new Error(`NaN encountered: ${x}/${y}`);
 8 | 		}
 9 | 		this.x=x;
10 | 		this.y=y;
11 | 	}
12 | }
13 | 
14 | export default Coord;
15 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |   <title>Let's mess up the letter "m"</title>
 7 |   <link rel="stylesheet" href="style.css">
 8 |   <script src="https://pomax.github.io/pocketknife/pocketknife.js"></script>
 9 |   <script src="library.js"></script>
10 | </head>
11 | <body>
12 |   <svg width="300" height="300" viewBox="0,0,300,300">
13 |   	<g transform="translate(10,10) scale(3,3)">
14 | 	    <path d="M 68.8 49 V 21.9 c 0 -8.3 -2.8 -11.5 -8.2 -11.5 c -6.6 0 -9.3 4.7 -9.3 11.4 v 16.8 h 6.4 V 49 H 37.6 V 21.9 c 0 -8.3 -2.8 -11.5 -8.2 -11.5 c -6.6 0 -9.3 4.7 -9.3 11.4 v 16.8 h 9.2 V 49 H 0 V 38.7 h 6.4 V 11.4 H 0.1 V 1 h 20 v 7.2 C 23 3.1 28 0 34.7 0 C 41.6 0 48 3.3 50.4 10.3 C 53 3.9 58.5 0 66 0 c 8.6 0 16.5 5.2 16.5 16.6 v 22 h 6.4 V 49 H 68.8 Z"/>
15 | 	</g>
16 |   </svg>
17 | 
18 |   <svg width="300" height="300" viewBox="0,0,300,300">
19 |   	<g transform="translate(10,10) scale(3,3)">
20 | 	    <path d="" />
21 |    	</g>
22 |   </svg>
23 | 
24 |   <svg width="300" height="300" viewBox="0,0,300,300">
25 |     <g transform="translate(10,10) scale(3,3)">
26 |       <path d="" />
27 |     </g>
28 |   </svg>
29 |   <script>
30 |     const path1 = find("svg path")[0];
31 |     const path2 = find("svg path")[1];
32 |     const path3 = find("svg path")[1];
33 | 
34 |     const d = path1.get("d");
35 | 
36 |     var outline = new PathConverter.Outline();
37 |     const parser = new PathConverter.SVGParser(outline);
38 |     parser.parse(d);
39 | 
40 |     function jitter() {
41 |       return 0.2 * (Math.random() - 0.5);
42 |     }
43 | 
44 |     // let's fuck things up!
45 |     function next() {
46 |       outline.getShapes().forEach(shape => {
47 |         shape.points.forEach(p => {
48 |           [p.main, p.left, p.right].forEach(pt => {
49 |             if (!pt) return;
50 |             pt.x += jitter();
51 |             pt.y += jitter();
52 |           })
53 |         });
54 |       });
55 |       path3.set("d", outline.toSVG());
56 |       requestAnimationFrame(next);
57 |     }
58 | 
59 |     requestAnimationFrame(next);
60 | 
61 |     const vertices = [`<path d="${d}"/>`];
62 |     outline.getShapes().forEach(shape => {
63 |     	shape.points.forEach(p => {
64 |     		let m = p.main;
65 |     		if (p.left) {
66 |     			let l = p.left;
67 |     			vertices.push(`<path d="M${l.x} ${l.y} L${m.x} ${m.y}" stroke="red"/>`)
68 | 	    		vertices.push(`<circle cx="${l.x}" cy="${l.y}" r="1" fill="red" stroke="none"/>`)
69 |     		}
70 |     		if (p.right) {
71 |     			let r = p.right;
72 |     			vertices.push(`<path d="M${r.x} ${r.y} L${m.x} ${m.y}" stroke="green"/>`)
73 | 	    		vertices.push(`<circle cx="${r.x}" cy="${r.y}" r="1" fill="green" stroke="none"/>`)
74 |     		}
75 |     		vertices.push(`<circle cx="${m.x}" cy="${m.y}" r="1" fill="blue" stroke="none"/>`)
76 |     	});
77 |     });
78 | 
79 |     const svg3 = find("svg g")[2];
80 |     svg3.innerHTML = vertices.join('\n');
81 |   </script>
82 | </body>
83 | </html>
84 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | import PointCurveShape from "./point-curve-shape.js";
 2 | import Outline from "./outline.js";
 3 | import SVGParser from "./svg-parser.js";
 4 | 
 5 | const API = { SVGParser, Outline, PointCurveShape, parse: function(pathString) {
 6 |   	const outline = new API.Outline();
 7 |     const parser = new API.SVGParser(outline);
 8 |     parser.parse(pathString);
 9 |     return outline;
10 | }};
11 | 
12 | export default API;
13 | 


--------------------------------------------------------------------------------
/library.js:
--------------------------------------------------------------------------------
  1 | (function (global, factory) {
  2 | 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  3 | 	typeof define === 'function' && define.amd ? define(factory) :
  4 | 	(global.PathConverter = factory());
  5 | }(this, (function () { 'use strict';
  6 | 
  7 | /**
  8 |  * Trivial coordinate class
  9 |  */
 10 | class Coord {
 11 | 	constructor(x,y) {
 12 | 		if (isNaN(x) || isNaN(y)) {
 13 | 			throw new Error(`NaN encountered: ${x}/${y}`);
 14 | 		}
 15 | 		this.x=x;
 16 | 		this.y=y;
 17 | 	}
 18 | }
 19 | 
 20 | /**
 21 |  * Simple point curve Point class
 22 |  *   - plain points only have "main" set
 23 |  *   - bezier points have "left" and "right" set as control points
 24 |  * A bezier curve from p1 to p2 will consist of {p1, p1.right, p2.left, p2}
 25 |  */
 26 | class Point {
 27 | 	constructor(x, y) { this.main = new Coord(x,y); this.left = null; this.right = null; this.isplain = true; }
 28 | 	setLeft(x, y) { this.isplain=false; this.left = new Coord(x,y); }
 29 | 	setRight(x, y) { this.isplain=false; this.right = new Coord(x,y); }
 30 | 	isPlain() { return this.isplain; }
 31 | 	getPoint() { return this.main; }
 32 | 	getLeft() { return this.isplain ? this.main : this.left==null? this.main : this.left; }
 33 | 	getRight() { return this.isplain ? this.main : this.right==null? this.main : this.right; }
 34 | }
 35 | 
 36 | /**
 37 |  * A shape defined in terms of curve points
 38 |  */
 39 | class PointCurveShape {
 40 | 	constructor() { this.points = []; }
 41 | 	current() { return this.points.slice(-1)[0]; }
 42 | 	addPoint(x, y) { this.points.push(new Point(x,y)); }
 43 | 	setLeft(x, y) { this.current().setLeft(x,y); }
 44 | 	setRight(x, y) { this.current().setRight(x,y); }
 45 | 
 46 | 	/**
 47 | 	 * Convert the point curve to an SVG path string
 48 | 	 * (bidirectional conversion? You better believe it).
 49 | 	 * This code is very similar to the draw method,
 50 | 	 * since it effectively does the same thing.
 51 | 	 */
 52 | 	toSVG() {
 53 | 		// first vertex
 54 | 		let points = this.points;
 55 | 		let first = points[0].getPoint();
 56 | 		let x = first.x;
 57 | 		let y = first.y;
 58 | 		let svg = "M" + x + (y<0? y : " " + y);
 59 | 		// rest of the shape
 60 | 		for(let p=1; p<points.length; p++) {
 61 | 			// since we have to work with point pairs, get "prev" and "current"
 62 | 			let prev = points[p-1];
 63 | 			let curr = points[p];
 64 | 			// if both are plain, LineTo. Otherwise, Cubic bezier.
 65 | 			if(curr.isPlain() && prev.isPlain()) {
 66 | 				let lx = curr.getPoint().x; let ly = curr.getPoint().y;
 67 | 				svg += "L" + lx + (ly<0? ly : " " + ly); }
 68 | 			else {
 69 | 				let cx1 = prev.getRight().x; let cy1 = prev.getRight().y;
 70 | 				let cx2 = curr.getLeft().x;  let cy2 = curr.getLeft().y;
 71 | 				let x2 = curr.getPoint().x;  let y2 = curr.getPoint().y;
 72 | 				svg += "C" + cx1 + (cy1<0? cy1 : " " + cy1) +
 73 | 						(cx2<0? cx2 : " " + cx2) + (cy2<0? cy2 : " " + cy2) +
 74 | 						(x2<0? x2 : " " + x2) + (y2<0? y2 : " " + y2); }}
 75 | 		return svg + "Z"; }
 76 | }
 77 | 
 78 | const MINX = 0;
 79 | const MINY = 1;
 80 | const MAXX = 2;
 81 | const MAXY = 3;
 82 | 
 83 | class Outline {
 84 | 	constructor() {
 85 | 		this.curveshapes = [];
 86 | 		this.current = new PointCurveShape();
 87 | 		this.bounds = false;
 88 | 	}
 89 | 
 90 | 	getShapes() { return this.curveshapes; }
 91 | 
 92 | 	getShape(index) { return this.curveshapes[index]; }
 93 | 
 94 | 	/**
 95 | 	 * Convert the point curve to an SVG path string (bidirectional conversion?
 96 | 	 * You better believe it).
 97 | 	 */
 98 | 	toSVG() {
 99 | 		let svg = "";
100 | 		this.curveshapes.forEach(s => svg += s.toSVG());
101 | 		return svg;
102 | 	}
103 | 
104 | 	// start a shape group
105 | 	startGroup() { this.curveshapes = []; }
106 | 
107 | 	// start a new shape in the group
108 | 	startShape(){ this.current = new PointCurveShape(); }
109 | 
110 | 	// add an on-screen point
111 | 	addPoint(x, y){
112 | 		this.current.addPoint(x,y);
113 | 		var bounds = this.bounds;
114 | 		if (!bounds) { bounds = this.bounds = [x,y,x,y]; }
115 | 		if (x<bounds[MINX]) { bounds[MINX] = x; }
116 | 		if (x>bounds[MAXX]) { bounds[MAXX] = x; }
117 | 		if (y<bounds[MINY]) { bounds[MINY] = y; }
118 | 		if (y>bounds[MAXY]) { bounds[MAXY] = y; }}
119 | 
120 | 	// set the x/y coordinates for the left/right control points
121 | 	setLeftControl(x, y){
122 | 		this.current.setLeft(x,y); }
123 | 
124 | 	setRightControl(x, y){
125 | 		this.current.setRight(x,y); }
126 | 
127 | 	// close the current shape
128 | 	closeShape() {
129 | 		this.curveshapes.push(this.current);
130 | 		this.current=null; }
131 | 
132 | 	// close the group of shapes.
133 | 	closeGroup(){
134 | 		this.curveshapes.push(this.current);
135 | 		this.current=null; }
136 | }
137 | 
138 | class SVGParser {
139 | 	constructor(receiver) {
140 | 		this.receiver = receiver;
141 | 	}
142 | 
143 | 	getReceiver() { return receiver; }
144 | 
145 | 	parse(path, xoffset, yoffset) {
146 | 		xoffset = xoffset || 0;
147 | 		yoffset = yoffset || 0;
148 | 
149 | 		// normalize the path
150 | 		path = path.replace(/\s*([mlvhqczMLVHQCZ])\s*/g,"\n$1 ")
151 | 				.replace(/,/g," ")
152 | 				.replace(/-/g," -")
153 | 				.replace(/ +/g," ");
154 | 
155 | 		// step one: split the path in individual pathing instructions
156 | 		var strings = path.split("\n");
157 | 		let x = xoffset;
158 | 		let y = yoffset;
159 | 
160 | 		// step two: process each instruction
161 | 		let receiver = this.receiver;
162 | 		receiver.startGroup();
163 | 		for(let s=1; s<strings.length; s++)
164 | 		{
165 | 			let instruction = strings[s].trim();
166 | 			let op = instruction.substring(0,1);
167 | 			let terms = (instruction.length>1 ? instruction.substring(2).trim().split(" ") : []);
168 | 
169 | 			// move instruction
170 | 			if(op === "m" || op === "M") {
171 | 				if(op === "m") { x += parseFloat(terms[0]); y += parseFloat(terms[1]); }
172 | 				else if(op === "M") { x = parseFloat(terms[0]) + xoffset; y = parseFloat(terms[1]) + yoffset; }
173 | 				// add a point only if the next operation is not another move operation, or a close operation
174 | 				if(s<strings.length-1) {
175 | 					let nextstring = strings[s+1].trim();
176 | 					let nextop = nextstring.substring(0,1);
177 | 					if (!(nextop === "m" || nextop === "M" || nextop === "z" || nextop === "Z")) {
178 | 						if(s>1) { receiver.closeShape(); }
179 | 						receiver.startShape();
180 | 						receiver.addPoint(x, y); }}}
181 | 
182 | 			// line instructions
183 | 			else if(op === "l" || op === "L") {
184 | 				// this operation take a series of [x2 y2] coordinates
185 | 				for(let t=0; t<terms.length; t+=2) {
186 | 					if(op === "l") { x += parseFloat(terms[t+0]); y += parseFloat(terms[t+1]); }
187 | 					else if(op === "L" ){ x = parseFloat(terms[t+0]) + xoffset; y = parseFloat(terms[t+1]) + yoffset; }
188 | 					receiver.addPoint(x, y); }}
189 | 
190 | 			// vertical line shorthand
191 | 			else if(op === "v" || op === "V") {
192 | 				terms.forEach( y2 => {
193 | 					if(op === "v") { y += parseFloat(y2); }
194 | 					else if(op === "V" ){ y = parseFloat(y2) + yoffset; }
195 | 					receiver.addPoint(x, y);
196 | 				});}
197 | 
198 | 
199 | 			// horizontal line shorthand
200 | 			else if(op === "h" || op === "H") {
201 | 				terms.forEach( x2 => {
202 | 					if(op === "h") { x += parseFloat(x2); }
203 | 					else if(op === "H" ){ x = parseFloat(x2) + yoffset; }
204 | 					receiver.addPoint(x, y);
205 | 				});}
206 | 
207 | 
208 | 			// quadratic curve instruction
209 | 			else if(op === "q" || op === "Q") {
210 | 				// this operation takes a series of [cx cy x2 y2] coordinates
211 | 				for(let q = 0; q<terms.length; q+=4) {
212 | 					let cx=0; let cy=0;
213 | 					if(op === "q") { cx = x + parseFloat(terms[q]); cy = y + parseFloat(terms[q+1]); }
214 | 					else if(op === "Q") { cx = parseFloat(terms[q]) + xoffset; cy = parseFloat(terms[q+1]) + yoffset; }
215 | 
216 | 					// processing has no quadratic curves, so we have to derive the cubic control points
217 | 					let cx1 = (x + cx + cx)/3;
218 | 					let cy1 = (y + cy + cy)/3;
219 | 
220 | 					// make start point bezier if it differs from the control point
221 | 					if(x !=cx1 || y !=cy1) {
222 | 						receiver.setRightControl(cx1, cy1);
223 | 					}
224 | 
225 | 					// NOTE: the relative quadratic instruction does not count control points as "real"
226 | 					// points, so the curve's on-curve coordinate is relative to the last on-curve one.
227 | 					if(op === "q") { x += parseFloat(terms[q+2]); y += parseFloat(terms[q+3]); }
228 | 					else if(op === "Q") { x = parseFloat(terms[q+2]) + xoffset; y = parseFloat(terms[q+3]) + yoffset; }
229 | 
230 | 					// derive cubic control point 2
231 | 					let cx2 = (x + cx + cx)/3;
232 | 					let cy2 = (y + cy + cy)/3;
233 | 
234 | 					receiver.addPoint(x, y);
235 | 					if(x!=cx2 || y !=cy2) { receiver.setLeftControl(cx2, cy2); }}}
236 | 
237 | 			// cubic curve instruction
238 | 			else if(op === "c" || op === "C") {
239 | 				// this operation takes a series of [cx1 cy1 cx2 cy2 x2 y2] coordinates
240 | 				for(let c = 0; c<terms.length; c+=6) {
241 | 
242 | 					// get first control point
243 | 					let cx1=0; let cy1=0;
244 | 					if(op === "c") { cx1 = x + parseFloat(terms[c]); cy1 = y + parseFloat(terms[c+1]); }
245 | 					else if(op === "C") { cx1 = parseFloat(terms[c]) + xoffset; cy1 = parseFloat(terms[c+1]) + yoffset; }
246 | 
247 | 					// make start point bezier if it differs from the control point
248 | 					if(x!=cx1 || y !=cy1) {
249 | 						receiver.setRightControl(cx1, cy1);
250 | 					}
251 | 
252 | 					// get second control point. NOTE: this is not relative to the first control point, but
253 | 					// relative to the on-curve start coordinate
254 | 					let cx2=0; let cy2=0;
255 | 					if(op === "c") { cx2 = x + parseFloat(terms[c+2]); cy2 = y + parseFloat(terms[c+3]); }
256 | 					else if(op === "C") { cx2 = parseFloat(terms[c+2]) + xoffset; cy2 = parseFloat(terms[c+3]) + yoffset; }
257 | 
258 | 					// NOTE: the relative cubic instruction does not count control points as "real"
259 | 					// points, so the curve's on-curve coordinate is relative to the last on-curve one.
260 | 					if(op === "c") { x += parseFloat(terms[c+4]); y += parseFloat(terms[c+5]); }
261 | 					else if(op === "C") { x = parseFloat(terms[c+4]) + xoffset; y = parseFloat(terms[c+5]) + yoffset; }
262 | 
263 | 					// add end point, make bezier if the on-curve and control point differ
264 | 					receiver.addPoint(x, y);
265 | 					if(x!=cx2 || y !=cy2) { receiver.setLeftControl(cx2,cy2); }}}
266 | 
267 | 			// close shape instruction
268 | 			else if(op === "z" || op === "Z") { receiver.closeGroup(); }
269 | 		}
270 | 	}
271 | }
272 | 
273 | const API = { SVGParser, Outline, PointCurveShape, parse: function(pathString) {
274 |   	const outline = new API.Outline();
275 |     const parser = new API.SVGParser(outline);
276 |     parser.parse(pathString);
277 |     return outline;
278 | }};
279 | 
280 | return API;
281 | 
282 | })));
283 | 


--------------------------------------------------------------------------------
/outline.js:
--------------------------------------------------------------------------------
 1 | const MINX = 0;
 2 | const MINY = 1;
 3 | const MAXX = 2;
 4 | const MAXY = 3;
 5 | 
 6 | import PointCurveShape from "./point-curve-shape.js";
 7 | 
 8 | class Outline {
 9 | 	constructor() {
10 | 		this.curveshapes = [];
11 | 		this.current = new PointCurveShape();
12 | 		this.bounds = false;
13 | 	}
14 | 
15 | 	getShapes() { return this.curveshapes; }
16 | 
17 | 	getShape(index) { return this.curveshapes[index]; }
18 | 
19 | 	/**
20 | 	 * Convert the point curve to an SVG path string (bidirectional conversion?
21 | 	 * You better believe it).
22 | 	 */
23 | 	toSVG() {
24 | 		let svg = "";
25 | 		this.curveshapes.forEach(s => svg += s.toSVG());
26 | 		return svg;
27 | 	}
28 | 
29 | 	// start a shape group
30 | 	startGroup() { this.curveshapes = []; }
31 | 
32 | 	// start a new shape in the group
33 | 	startShape(){ this.current = new PointCurveShape(); }
34 | 
35 | 	// add an on-screen point
36 | 	addPoint(x, y){
37 | 		this.current.addPoint(x,y);
38 | 		var bounds = this.bounds;
39 | 		if (!bounds) { bounds = this.bounds = [x,y,x,y]; }
40 | 		if (x<bounds[MINX]) { bounds[MINX] = x; }
41 | 		if (x>bounds[MAXX]) { bounds[MAXX] = x; }
42 | 		if (y<bounds[MINY]) { bounds[MINY] = y; }
43 | 		if (y>bounds[MAXY]) { bounds[MAXY] = y; }}
44 | 
45 | 	// set the x/y coordinates for the left/right control points
46 | 	setLeftControl(x, y){
47 | 		this.current.setLeft(x,y); }
48 | 
49 | 	setRightControl(x, y){
50 | 		this.current.setRight(x,y); }
51 | 
52 | 	// close the current shape
53 | 	closeShape() {
54 | 		this.curveshapes.push(this.current);
55 | 		this.current=null; }
56 | 
57 | 	// close the group of shapes.
58 | 	closeGroup(){
59 | 		this.curveshapes.push(this.current);
60 | 		this.current=null; }
61 | }
62 | 
63 | export default Outline;
64 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "js-svg-path",
 3 |   "version": "1.1.0",
 4 |   "description": "",
 5 |   "main": "library.js",
 6 |   "scripts": {
 7 |     "test": "npm run build && node test",
 8 |     "build": "rollup index.js --format umd --name PathConverter > library.js"
 9 |   },
10 |   "engine": {
11 |     "node": "^4.x.x"
12 |   },
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "git+https://github.com/Pomax/js-svg-path.git"
16 |   },
17 |   "keywords": [
18 |     "svg",
19 |     "path",
20 |     "javascript"
21 |   ],
22 |   "author": "Pomax",
23 |   "license": "Public Domain",
24 |   "bugs": {
25 |     "url": "https://github.com/Pomax/js-svg-path/issues"
26 |   },
27 |   "homepage": "https://github.com/Pomax/js-svg-path#readme",
28 |   "dependencies": {},
29 |   "devDependencies": {
30 |     "rollup": "^0.41.6"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/point-curve-shape.js:
--------------------------------------------------------------------------------
 1 | import Point from "./point.js";
 2 | 
 3 | /**
 4 |  * A shape defined in terms of curve points
 5 |  */
 6 | class PointCurveShape {
 7 | 	constructor() { this.points = []; }
 8 | 	current() { return this.points.slice(-1)[0]; }
 9 | 	addPoint(x, y) { this.points.push(new Point(x,y)); }
10 | 	setLeft(x, y) { this.current().setLeft(x,y); }
11 | 	setRight(x, y) { this.current().setRight(x,y); }
12 | 
13 | 	/**
14 | 	 * Convert the point curve to an SVG path string
15 | 	 * (bidirectional conversion? You better believe it).
16 | 	 * This code is very similar to the draw method,
17 | 	 * since it effectively does the same thing.
18 | 	 */
19 | 	toSVG() {
20 | 		// first vertex
21 | 		let points = this.points;
22 | 		let first = points[0].getPoint();
23 | 		let x = first.x;
24 | 		let y = first.y;
25 | 		let svg = "M" + x + (y<0? y : " " + y);
26 | 		// rest of the shape
27 | 		for(let p=1; p<points.length; p++) {
28 | 			// since we have to work with point pairs, get "prev" and "current"
29 | 			let prev = points[p-1];
30 | 			let curr = points[p];
31 | 			// if both are plain, LineTo. Otherwise, Cubic bezier.
32 | 			if(curr.isPlain() && prev.isPlain()) {
33 | 				let lx = curr.getPoint().x; let ly = curr.getPoint().y;
34 | 				svg += "L" + lx + (ly<0? ly : " " + ly); }
35 | 			else {
36 | 				let cx1 = prev.getRight().x; let cy1 = prev.getRight().y;
37 | 				let cx2 = curr.getLeft().x;  let cy2 = curr.getLeft().y;
38 | 				let x2 = curr.getPoint().x;  let y2 = curr.getPoint().y;
39 | 				svg += "C" + cx1 + (cy1<0? cy1 : " " + cy1) +
40 | 						(cx2<0? cx2 : " " + cx2) + (cy2<0? cy2 : " " + cy2) +
41 | 						(x2<0? x2 : " " + x2) + (y2<0? y2 : " " + y2); }}
42 | 		return svg + "Z"; }
43 | }
44 | 
45 | export default PointCurveShape;
46 | 


--------------------------------------------------------------------------------
/point.js:
--------------------------------------------------------------------------------
 1 | import Coord from "./coord.js";
 2 | 
 3 | /**
 4 |  * Simple point curve Point class
 5 |  *   - plain points only have "main" set
 6 |  *   - bezier points have "left" and "right" set as control points
 7 |  * A bezier curve from p1 to p2 will consist of {p1, p1.right, p2.left, p2}
 8 |  */
 9 | class Point {
10 | 	constructor(x, y) { this.main = new Coord(x,y); this.left = null; this.right = null; this.isplain = true; }
11 | 	setLeft(x, y) { this.isplain=false; this.left = new Coord(x,y); }
12 | 	setRight(x, y) { this.isplain=false; this.right = new Coord(x,y); }
13 | 	isPlain() { return this.isplain; }
14 | 	getPoint() { return this.main; }
15 | 	getLeft() { return this.isplain ? this.main : this.left==null? this.main : this.left; }
16 | 	getRight() { return this.isplain ? this.main : this.right==null? this.main : this.right; }
17 | }
18 | 
19 | export default Point;
20 | 


--------------------------------------------------------------------------------
/svg-parser.js:
--------------------------------------------------------------------------------
  1 | class SVGParser {
  2 | 	constructor(receiver) {
  3 | 		this.receiver = receiver;
  4 | 	}
  5 | 
  6 | 	getReceiver() { return receiver; }
  7 | 
  8 | 	parse(path, xoffset, yoffset) {
  9 | 		xoffset = xoffset || 0;
 10 | 		yoffset = yoffset || 0;
 11 | 
 12 | 		// normalize the path
 13 | 		path = path.replace(/\s*([mlvhqczMLVHQCZ])\s*/g,"\n$1 ")
 14 | 				.replace(/,/g," ")
 15 | 				.replace(/-/g," -")
 16 | 				.replace(/ +/g," ");
 17 | 
 18 | 		// step one: split the path in individual pathing instructions
 19 | 		var strings = path.split("\n");
 20 | 		let x = xoffset;
 21 | 		let y = yoffset;
 22 | 
 23 | 		// step two: process each instruction
 24 | 		let receiver = this.receiver;
 25 | 		receiver.startGroup();
 26 | 		for(let s=1; s<strings.length; s++)
 27 | 		{
 28 | 			let instruction = strings[s].trim();
 29 | 			let op = instruction.substring(0,1);
 30 | 			let terms = (instruction.length>1 ? instruction.substring(2).trim().split(" ") : []);
 31 | 
 32 | 			// move instruction
 33 | 			if(op === "m" || op === "M") {
 34 | 				if(op === "m") { x += parseFloat(terms[0]); y += parseFloat(terms[1]); }
 35 | 				else if(op === "M") { x = parseFloat(terms[0]) + xoffset; y = parseFloat(terms[1]) + yoffset; }
 36 | 				// add a point only if the next operation is not another move operation, or a close operation
 37 | 				if(s<strings.length-1) {
 38 | 					let nextstring = strings[s+1].trim();
 39 | 					let nextop = nextstring.substring(0,1);
 40 | 					if (!(nextop === "m" || nextop === "M" || nextop === "z" || nextop === "Z")) {
 41 | 						if(s>1) { receiver.closeShape(); }
 42 | 						receiver.startShape();
 43 | 						receiver.addPoint(x, y); }}}
 44 | 
 45 | 			// line instructions
 46 | 			else if(op === "l" || op === "L") {
 47 | 				// this operation take a series of [x2 y2] coordinates
 48 | 				for(let t=0; t<terms.length; t+=2) {
 49 | 					if(op === "l") { x += parseFloat(terms[t+0]); y += parseFloat(terms[t+1]); }
 50 | 					else if(op === "L" ){ x = parseFloat(terms[t+0]) + xoffset; y = parseFloat(terms[t+1]) + yoffset; }
 51 | 					receiver.addPoint(x, y); }}
 52 | 
 53 | 			// vertical line shorthand
 54 | 			else if(op === "v" || op === "V") {
 55 | 				terms.forEach( y2 => {
 56 | 					if(op === "v") { y += parseFloat(y2); }
 57 | 					else if(op === "V" ){ y = parseFloat(y2) + yoffset; }
 58 | 					receiver.addPoint(x, y);
 59 | 				})}
 60 | 
 61 | 
 62 | 			// horizontal line shorthand
 63 | 			else if(op === "h" || op === "H") {
 64 | 				terms.forEach( x2 => {
 65 | 					if(op === "h") { x += parseFloat(x2); }
 66 | 					else if(op === "H" ){ x = parseFloat(x2) + yoffset; }
 67 | 					receiver.addPoint(x, y);
 68 | 				})}
 69 | 
 70 | 
 71 | 			// quadratic curve instruction
 72 | 			else if(op === "q" || op === "Q") {
 73 | 				// this operation takes a series of [cx cy x2 y2] coordinates
 74 | 				for(let q = 0; q<terms.length; q+=4) {
 75 | 					let cx=0; let cy=0;
 76 | 					if(op === "q") { cx = x + parseFloat(terms[q]); cy = y + parseFloat(terms[q+1]); }
 77 | 					else if(op === "Q") { cx = parseFloat(terms[q]) + xoffset; cy = parseFloat(terms[q+1]) + yoffset; }
 78 | 
 79 | 					// processing has no quadratic curves, so we have to derive the cubic control points
 80 | 					let cx1 = (x + cx + cx)/3;
 81 | 					let cy1 = (y + cy + cy)/3;
 82 | 
 83 | 					// make start point bezier if it differs from the control point
 84 | 					if(x !=cx1 || y !=cy1) {
 85 | 						receiver.setRightControl(cx1, cy1);
 86 | 					}
 87 | 
 88 | 					// NOTE: the relative quadratic instruction does not count control points as "real"
 89 | 					// points, so the curve's on-curve coordinate is relative to the last on-curve one.
 90 | 					if(op === "q") { x += parseFloat(terms[q+2]); y += parseFloat(terms[q+3]); }
 91 | 					else if(op === "Q") { x = parseFloat(terms[q+2]) + xoffset; y = parseFloat(terms[q+3]) + yoffset; }
 92 | 
 93 | 					// derive cubic control point 2
 94 | 					let cx2 = (x + cx + cx)/3;
 95 | 					let cy2 = (y + cy + cy)/3;
 96 | 
 97 | 					receiver.addPoint(x, y);
 98 | 					if(x!=cx2 || y !=cy2) { receiver.setLeftControl(cx2, cy2); }}}
 99 | 
100 | 			// cubic curve instruction
101 | 			else if(op === "c" || op === "C") {
102 | 				// this operation takes a series of [cx1 cy1 cx2 cy2 x2 y2] coordinates
103 | 				for(let c = 0; c<terms.length; c+=6) {
104 | 
105 | 					// get first control point
106 | 					let cx1=0; let cy1=0;
107 | 					if(op === "c") { cx1 = x + parseFloat(terms[c]); cy1 = y + parseFloat(terms[c+1]); }
108 | 					else if(op === "C") { cx1 = parseFloat(terms[c]) + xoffset; cy1 = parseFloat(terms[c+1]) + yoffset; }
109 | 
110 | 					// make start point bezier if it differs from the control point
111 | 					if(x!=cx1 || y !=cy1) {
112 | 						receiver.setRightControl(cx1, cy1);
113 | 					}
114 | 
115 | 					// get second control point. NOTE: this is not relative to the first control point, but
116 | 					// relative to the on-curve start coordinate
117 | 					let cx2=0; let cy2=0;
118 | 					if(op === "c") { cx2 = x + parseFloat(terms[c+2]); cy2 = y + parseFloat(terms[c+3]); }
119 | 					else if(op === "C") { cx2 = parseFloat(terms[c+2]) + xoffset; cy2 = parseFloat(terms[c+3]) + yoffset; }
120 | 
121 | 					// NOTE: the relative cubic instruction does not count control points as "real"
122 | 					// points, so the curve's on-curve coordinate is relative to the last on-curve one.
123 | 					if(op === "c") { x += parseFloat(terms[c+4]); y += parseFloat(terms[c+5]); }
124 | 					else if(op === "C") { x = parseFloat(terms[c+4]) + xoffset; y = parseFloat(terms[c+5]) + yoffset; }
125 | 
126 | 					// add end point, make bezier if the on-curve and control point differ
127 | 					receiver.addPoint(x, y);
128 | 					if(x!=cx2 || y !=cy2) { receiver.setLeftControl(cx2,cy2); }}}
129 | 
130 | 			// close shape instruction
131 | 			else if(op === "z" || op === "Z") { receiver.closeGroup(); }
132 | 		}
133 | 	}
134 | }
135 | 
136 | export default SVGParser;
137 | 


--------------------------------------------------------------------------------
/test.js:
--------------------------------------------------------------------------------
1 | var API = require("./library.js");
2 | const outline = API.parse("M 68.8 49 V 21.9 c 0 -8.3 -2.8 -11.5 -8.2 -11.5 c -6.6 0 -9.3 4.7 -9.3 11.4 v 16.8 h 6.4 V 49 H 37.6 V 21.9 c 0 -8.3 -2.8 -11.5 -8.2 -11.5 c -6.6 0 -9.3 4.7 -9.3 11.4 v 16.8 h 9.2 V 49 H 0 V 38.7 h 6.4 V 11.4 H 0.1 V 1 h 20 v 7.2 C 23 3.1 28 0 34.7 0 C 41.6 0 48 3.3 50.4 10.3 C 53 3.9 58.5 0 66 0 c 8.6 0 16.5 5.2 16.5 16.6 v 22 h 6.4 V 49 H 68.8 Z");
3 | const bbox = [ 0, 0, 88.9, 49 ];
4 | outline.bounds.forEach( (v,idx) => { if (bbox[idx]!==v) process.exit(1); });
5 | 


--------------------------------------------------------------------------------