# packages/core/src/lib/geometry/path-geometry.ts This is the source snapshot used to build these API details. [View this revision on GitHub](https://github.com/benlesh/pibbl/blob/272a94aaf62e0bd6ad8726a4c607a76a9ec44ca1/packages/core/src/lib/geometry/path-geometry.ts#L143). [Back to reference](/reference/functions/path-geometry/)
1 import { arcPoint, arcSweep, TAU, type ArcSegment } from './path-arc.js';
2 /**
3  * A canonical, independently editable path segment.
4  *
5  * @see {@link PathGeometry}
6  */
7 export type PathSegment =
8   | {
9       /** Selects `"move"`, `"line"` for type. See {@link PathSegment}. */
10       type: 'move' | 'line';
11       /**
12        * Horizontal coordinate or displacement in the containing coordinate system. See
13        * {@link PathSegment}.
14        */
15       x: number;
16       /**
17        * Vertical coordinate or displacement in the containing coordinate system. See
18        * {@link PathSegment}.
19        */
20       y: number;
21     }
22   | {
23       /** The literal "quadratic" identifying this variant. See {@link PathSegment}. */
24       type: 'quadratic';
25       /** Horizontal coordinate of the quadratic control point. See {@link PathSegment}. */
26       cpx: number;
27       /** Vertical coordinate of the quadratic control point. See {@link PathSegment}. */
28       cpy: number;
29       /**
30        * Horizontal coordinate or displacement in the containing coordinate system. See
31        * {@link PathSegment}.
32        */
33       x: number;
34       /**
35        * Vertical coordinate or displacement in the containing coordinate system. See
36        * {@link PathSegment}.
37        */
38       y: number;
39     }
40   | {
41       /** The literal "cubic" identifying this variant. See {@link PathSegment}. */
42       type: 'cubic';
43       /** Horizontal coordinate of the first cubic control point. See {@link PathSegment}. */
44       cp1x: number;
45       /** Vertical coordinate of the first cubic control point. See {@link PathSegment}. */
46       cp1y: number;
47       /** Horizontal coordinate of the second cubic control point. See {@link PathSegment}. */
48       cp2x: number;
49       /** Vertical coordinate of the second cubic control point. See {@link PathSegment}. */
50       cp2y: number;
51       /**
52        * Horizontal coordinate or displacement in the containing coordinate system. See
53        * {@link PathSegment}.
54        */
55       x: number;
56       /**
57        * Vertical coordinate or displacement in the containing coordinate system. See
58        * {@link PathSegment}.
59        */
60       y: number;
61     }
62   | ArcSegment
63   | {
64       /** The literal "close" identifying this variant. See {@link PathSegment}. */
65       type: 'close';
66     };
67 
68 const names = ['move', 'line', 'quadratic', 'cubic', 'close', 'arc'] as const;
69 const widths = [2, 2, 4, 6, 0, 8] as const;
70 interface Storage {
71   types: Uint8Array;
72   data: Float64Array;
73   count: number;
74   length: number;
75   revision: number;
76   x: number; y: number; startX: number; startY: number;
77 }
78 const storage = new WeakMap<PathGeometry, Storage>();
79 
80 function state(path: PathGeometry): Storage {
81   const value = storage.get(path);
82   if (!value) throw new TypeError('Expected a PathGeometry.');
83   return value;
84 }
85 
86 /** @internal Borrowed buffers must never escape this synchronous traversal. */
87 export function visitPathGeometry(
88   path: PathGeometry,
89   visit: (type: number, data: Float64Array, offset: number) => void,
90 ): void {
91   const value = state(path);
92   let offset = 0;
93   for (let i = 0; i < value.count; i++) {
94     const type = value.types[i];
95     visit(type, value.data, offset);
96     offset += widths[type];
97   }
98 }
99 
100 function ensureRevision(value: Storage): void {
101   if (value.revision >= Number.MAX_SAFE_INTEGER) {
102     throw new RangeError('PathGeometry revision exhausted.');
103   }
104 }
105 
106 function reserve(value: Storage, count: number, length: number): void {
107   if (count > value.types.length) {
108     const next = new Uint8Array(Math.max(count, value.types.length * 2, 8));
109     next.set(value.types.subarray(0, value.count));
110     value.types = next;
111   }
112   if (length > value.data.length) {
113     const next = new Float64Array(Math.max(length, value.data.length * 2, 32));
114     next.set(value.data.subarray(0, value.length));
115     value.data = next;
116   }
117 }
118 
119 function append(value: Storage, type: number, data: readonly number[]): void {
120   reserve(value, value.count + 1, value.length + data.length);
121   value.types[value.count++] = type;
122   value.data.set(data, value.length);
123   value.length += data.length;
124   updatePoint(value, type, data, 0);
125 }
126 
127 function operands(segment: PathSegment): number[] {
128   switch (segment.type) {
129     case 'move': case 'line': return [segment.x, segment.y];
130     case 'quadratic': return [segment.cpx, segment.cpy, segment.x, segment.y];
131     case 'cubic': return [segment.cp1x, segment.cp1y, segment.cp2x, segment.cp2y, segment.x, segment.y];
132     case 'close': return [];
133     case 'arc': return [segment.cx, segment.cy, segment.ux, segment.uy, segment.vx, segment.vy, segment.startAngle, segment.sweep];
134     default: throw new TypeError('Unknown path segment type.');
135   }
136 }
137 
138 /**
139  * Mutable packed geometry. Mutations do not schedule Pibbl rendering.
140  *
141  * @see {@link PathSegment}
142  */
143 export class PathGeometry implements Iterable<PathSegment> {
144   /**
145    * Creates empty geometry or an independent copy of the supplied path. See {@link PathGeometry}.
146    * @param source - Optional geometry whose segments are copied; omission creates an empty path.
147    * See {@link PathGeometry} .
148    */
149   constructor(source?: PathGeometry) {
150     const original = source === undefined ? undefined : state(source);
151     storage.set(this, {
152       types: original ? original.types.slice(0, original.count) : new Uint8Array(0),
153       data: original ? original.data.slice(0, original.length) : new Float64Array(0),
154       count: original?.count ?? 0,
155       length: original?.length ?? 0,
156       revision: 0,
157       x: original?.x ?? 0, y: original?.y ?? 0,
158       startX: original?.startX ?? 0, startY: original?.startY ?? 0,
159     });
160   }
161 
162   /**
163    * Monotonic mutation revision; changing geometry does not itself request a Pibbl frame. See
164    * {@link PathGeometry}.
165    * @returns The mutation revision used to invalidate cached representations.
166    */
167   get revision(): number { return state(this).revision; }
168   /**
169    * Number of stored path segments, including move and close commands. See {@link PathGeometry}.
170    * @returns The number of stored path segments.
171    */
172   get segmentCount(): number { return state(this).count; }
173 
174   /**
175    * Returns an independent copy with its own mutation revision. See {@link PathGeometry}.
176    * @returns An independent copy of this path's segments. See {@link PathGeometry}.
177    */
178   clone(): PathGeometry { return new PathGeometry(this); }
179 
180   /** Removes all segments and resets the current point. See {@link PathGeometry}. */
181   clear(): void {
182     const value = state(this);
183     if (!value.count) return;
184     ensureRevision(value);
185     value.count = value.length = 0;
186     value.x = value.y = value.startX = value.startY = 0;
187     value.revision++;
188   }
189 
190   /**
191    * Begins a subpath at the supplied coordinates. See {@link PathGeometry}.
192    * @param x - Horizontal coordinate of the new subpath's starting point.
193    * @param y - Vertical coordinate of the new subpath's starting point.
194    */
195   moveTo(x: number, y: number): void { this.#build(0, [x, y]); }
196   /**
197    * Appends a straight segment to the supplied coordinates. See {@link PathGeometry}.
198    * @param x - Horizontal coordinate of the line endpoint.
199    * @param y - Vertical coordinate of the line endpoint.
200    */
201   lineTo(x: number, y: number): void { this.#build(1, [x, y]); }
202   /**
203    * Appends a quadratic curve using one control point and an endpoint. See {@link PathGeometry}.
204    * @param cpx - Horizontal coordinate of the quadratic control point.
205    * @param cpy - Vertical coordinate of the quadratic control point.
206    * @param x - Horizontal coordinate of the curve endpoint.
207    * @param y - Vertical coordinate of the curve endpoint.
208    */
209   quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void {
210     this.#build(2, [cpx, cpy, x, y]);
211   }
212   /**
213    * Appends a cubic curve using two control points and an endpoint. See {@link PathGeometry}.
214    * @param cp1x - Horizontal coordinate of the first control point.
215    * @param cp1y - Vertical coordinate of the first control point.
216    * @param cp2x - Horizontal coordinate of the second control point.
217    * @param cp2y - Vertical coordinate of the second control point.
218    * @param x - Horizontal coordinate of the curve endpoint.
219    * @param y - Vertical coordinate of the curve endpoint.
220    */
221   bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void {
222     this.#build(3, [cp1x, cp1y, cp2x, cp2y, x, y]);
223   }
224   /**
225    * Closes the current subpath; an already closed or empty path is unchanged. See
226    * {@link PathGeometry}.
227    */
228   closePath(): void {
229     const value = state(this);
230     if (!value.count || value.types[value.count - 1] === 4) return;
231     this.#build(4, []);
232   }
233 
234   /**
235    * Appends a circular arc using Canvas-compatible angles in radians. See {@link PathGeometry}.
236    * @param x - Horizontal coordinate of the circle center.
237    * @param y - Vertical coordinate of the circle center.
238    * @param radius - Circle radius in path units.
239    * @param startAngle - Starting angle in radians.
240    * @param endAngle - Ending angle in radians.
241    * @param counterclockwise - Whether the arc runs counterclockwise; defaults to false.
242    */
243   arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise = false): void {
244     this.ellipse(x, y, radius, radius, 0, startAngle, endAngle, counterclockwise);
245   }
246 
247   /**
248    * Appends an elliptical arc; rotation and arc angles are in radians. See {@link PathGeometry}.
249    * @param x - Horizontal coordinate of the ellipse center.
250    * @param y - Vertical coordinate of the ellipse center.
251    * @param radiusX - Horizontal radius in path units.
252    * @param radiusY - Vertical radius in path units.
253    * @param rotation - Ellipse rotation in radians.
254    * @param startAngle - Starting angle in radians.
255    * @param endAngle - Ending angle in radians.
256    * @param counterclockwise - Whether the arc runs counterclockwise; defaults to false.
257    */
258   ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise = false): void {
259     if (![x, y, radiusX, radiusY, rotation, startAngle, endAngle].every(Number.isFinite)) return;
260     if (radiusX < 0 || radiusY < 0) throw new DOMException('Arc radii must not be negative.', 'IndexSizeError');
261     const cos = Math.cos(rotation), sin = Math.sin(rotation);
262     const arc: ArcSegment = {
263       type: 'arc', cx: x, cy: y, ux: radiusX * cos, uy: radiusX * sin,
264       vx: -radiusY * sin, vy: radiusY * cos, startAngle: startAngle % TAU,
265       sweep: arcSweep(startAngle, endAngle, counterclockwise),
266     };
267     this.#appendArc(arc);
268   }
269 
270   #appendArc(arc: ArcSegment): void {
271     const [x, y] = arcPoint(arc, arc.startAngle);
272     const end = arcPoint(arc, arc.startAngle + arc.sweep);
273     if (![x, y, ...end].every(Number.isFinite)) throw new RangeError('Arc coordinates overflowed.');
274     const value = state(this);
275     ensureRevision(value);
276     if (!value.count) append(value, 0, [x, y]);
277     else if (value.x !== x || value.y !== y) append(value, 1, [x, y]);
278     append(value, 5, operands(arc));
279     value.revision++;
280   }
281 
282   /**
283    * Appends a circular arc tangent to two lines using Canvas-compatible geometry. See
284    * {@link PathGeometry}.
285    * @param x1 - Horizontal coordinate of the first tangent intersection.
286    * @param y1 - Vertical coordinate of the first tangent intersection.
287    * @param x2 - Horizontal coordinate of the second tangent endpoint.
288    * @param y2 - Vertical coordinate of the second tangent endpoint.
289    * @param radius - Arc radius in path units.
290    */
291   arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void {
292     if (![x1, y1, x2, y2, radius].every(Number.isFinite)) return;
293     if (radius < 0) throw new DOMException('Arc radius must not be negative.', 'IndexSizeError');
294     const value = state(this);
295     if (!value.count) { this.moveTo(x1, y1); return; }
296     const ax = value.x - x1, ay = value.y - y1, bx = x2 - x1, by = y2 - y1;
297     const al = Math.hypot(ax, ay), bl = Math.hypot(bx, by);
298     if (al === 0 || bl === 0 || radius === 0) { this.lineTo(x1, y1); return; }
299     const ux = ax / al, uy = ay / al, vx = bx / bl, vy = by / bl;
300     const cross = ux * vy - uy * vx;
301     if (cross === 0) { this.lineTo(x1, y1); return; }
302     const dot = Math.max(-1, Math.min(1, ux * vx + uy * vy));
303     const distance = radius * (1 + dot) / Math.abs(cross);
304     const startX = x1 + ux * distance, startY = y1 + uy * distance;
305     const sign = cross < 0 ? -1 : 1;
306     const cx = startX - uy * radius * sign, cy = startY + ux * radius * sign;
307     const endX = x1 + vx * distance, endY = y1 + vy * distance;
308     const start = Math.atan2(startY - cy, startX - cx);
309     const end = Math.atan2(endY - cy, endX - cx);
310     if (![cx, cy, endX, endY].every(Number.isFinite)) throw new RangeError('Arc coordinates overflowed.');
311     this.#appendArc({ type: 'arc', cx, cy, ux: radius, uy: 0, vx: 0, vy: radius,
312       startAngle: start, sweep: arcSweep(start, end, cross > 0) });
313   }
314 
315   /**
316    * Appends a closed rectangle subpath. See {@link PathGeometry}.
317    * @param x - Horizontal coordinate of the rectangle origin.
318    * @param y - Vertical coordinate of the rectangle origin.
319    * @param width - Signed horizontal extent in path units.
320    * @param height - Signed vertical extent in path units.
321    */
322   rect(x: number, y: number, width: number, height: number): void {
323     if (![x, y, width, height].every(Number.isFinite)) return;
324     if (![x + width, y + height].every(Number.isFinite)) throw new RangeError('Rectangle coordinates overflowed.');
325     const value = state(this);
326     ensureRevision(value);
327     append(value, 0, [x, y]);
328     append(value, 1, [x + width, y]);
329     append(value, 1, [x + width, y + height]);
330     append(value, 1, [x, y + height]);
331     append(value, 4, []);
332     append(value, 0, [x, y]);
333     value.revision++;
334   }
335 
336   /**
337    * Appends a closed rectangle with Canvas-compatible corner radii. See {@link PathGeometry}.
338    * @param x - Horizontal coordinate of the rectangle origin.
339    * @param y - Vertical coordinate of the rectangle origin.
340    * @param width - Signed horizontal extent in path units.
341    * @param height - Signed vertical extent in path units.
342    * @param radii - Circular or elliptical corner radii, using Canvas roundRect ordering; defaults
343    * to zero.
344    */
345   roundRect(x: number, y: number, width: number, height: number,
346     radii: number | DOMPointInit | (number | DOMPointInit)[] = 0): void {
347     if (![x, y, width, height].every(Number.isFinite)) return;
348     const list = Array.isArray(radii) ? radii : [radii];
349     if (!list.length || list.length > 4) throw new RangeError('Expected one to four corner radii.');
350     const values: [number, number][] = [];
351     for (const radius of list) {
352       const rx = typeof radius === 'number' ? radius : radius.x ?? 0;
353       const ry = typeof radius === 'number' ? radius : radius.y ?? 0;
354       if (![rx, ry].every(Number.isFinite)) return;
355       if (rx < 0 || ry < 0) throw new RangeError('Corner radii must not be negative.');
356       values.push([rx, ry]);
357     }
358     const corners = [values[0], values[1] ?? values[0], values[2] ?? values[0], values[3] ?? values[1] ?? values[0]];
359     const w = Math.abs(width), h = Math.abs(height);
360     const ratio = (length: number, sum: number) => sum === 0 ? 1 : length / sum;
361     const scale = Math.min(1, ratio(w, corners[0][0] + corners[1][0]), ratio(w, corners[2][0] + corners[3][0]),
362       ratio(h, corners[0][1] + corners[3][1]), ratio(h, corners[1][1] + corners[2][1]));
363     const [tl, tr, br, bl] = corners.map(([rx, ry]) => [rx * scale, ry * scale]);
364     const path = new PathGeometry();
365     path.moveTo(tl[0], 0);
366     path.lineTo(w - tr[0], 0);
367     path.ellipse(w - tr[0], tr[1], tr[0], tr[1], 0, -Math.PI / 2, 0);
368     path.lineTo(w, h - br[1]);
369     path.ellipse(w - br[0], h - br[1], br[0], br[1], 0, 0, Math.PI / 2);
370     path.lineTo(bl[0], h);
371     path.ellipse(bl[0], h - bl[1], bl[0], bl[1], 0, Math.PI / 2, Math.PI);
372     path.lineTo(0, tl[1]);
373     path.ellipse(tl[0], tl[1], tl[0], tl[1], 0, Math.PI, Math.PI * 1.5);
374     path.closePath();
375     // Chromium resumes at the normalized rectangle origin after negative dimensions.
376     path.moveTo(width < 0 ? w : 0, height < 0 ? h : 0);
377     path.transform({ a: width < 0 ? -1 : 1, d: height < 0 ? -1 : 1, e: x, f: y });
378     this.#copyPath(path);
379   }
380 
381   /**
382    * Appends a copy of another path, optionally transformed by a 2D matrix. See
383    * {@link PathGeometry}.
384    * @param other - Geometry whose segments are appended. See {@link PathGeometry}.
385    * @param matrix - Optional affine transform applied to the appended segments; defaults to
386    * identity.
387    */
388   addPath(other: PathGeometry, matrix: DOMMatrix2DInit = {}): void {
389     if (!state(other).count) return;
390     const normalized = DOMMatrix.fromMatrix(matrix);
391     if (!normalized.is2D) throw new TypeError('PathGeometry requires a 2D affine matrix.');
392     if (![normalized.a, normalized.b, normalized.c, normalized.d, normalized.e, normalized.f].every(Number.isFinite)) return;
393     const copy = other.clone();
394     copy.transform(normalized);
395     const value = state(copy);
396     append(value, 0, [value.x, value.y]);
397     this.#copyPath(copy);
398   }
399 
400   #copyPath(other: PathGeometry): void {
401     const source = state(other), value = state(this);
402     ensureRevision(value);
403     reserve(value, value.count + source.count, value.length + source.length);
404     value.types.set(source.types.subarray(0, source.count), value.count);
405     value.data.set(source.data.subarray(0, source.length), value.length);
406     value.count += source.count; value.length += source.length;
407     value.x = source.x; value.y = source.y;
408     value.startX = source.startX; value.startY = source.startY;
409     value.revision++;
410   }
411 
412   /**
413    * Replaces a segment range with validated independent segment values. See {@link PathGeometry}.
414    * @param start - Index at which to begin replacing segments.
415    * @param deleteCount - Number of segments to remove.
416    * @param segments - Replacement segments; defaults to no inserted segments. See
417    * {@link PathSegment} .
418    */
419   spliceSegments(start: number, deleteCount: number, segments: readonly PathSegment[] = []): void {
420     const value = state(this);
421     if (!Number.isInteger(start) || start < 0 || start > value.count ||
422       !Number.isInteger(deleteCount) || deleteCount < 0 || deleteCount > value.count - start) {
423       throw new RangeError('Invalid path splice range.');
424     }
425     const additions = segments.map(segment => ({ type: names.indexOf(segment.type), data: validatedOperands(segment) }));
426     const count = value.count - deleteCount + additions.length;
427     const firstType = start === 0 ? (additions[0]?.type ?? value.types[deleteCount]) : value.types[0];
428     if (count > 0 && firstType !== 0) throw new TypeError('A path must start with a move segment.');
429     if (!deleteCount && !additions.length) return;
430     ensureRevision(value);
431     let offset = 0, removed = 0;
432     for (let i = 0; i < start; i++) offset += widths[value.types[i]];
433     for (let i = start; i < start + deleteCount; i++) removed += widths[value.types[i]];
434     const added = additions.reduce((sum, segment) => sum + segment.data.length, 0);
435     const length = value.length - removed + added;
436     reserve(value, count, length);
437     value.types.copyWithin(start + additions.length, start + deleteCount, value.count);
438     value.data.copyWithin(offset + added, offset + removed, value.length);
439     for (let i = 0; i < additions.length; i++) {
440       value.types[start + i] = additions[i].type;
441       value.data.set(additions[i].data, offset);
442       offset += additions[i].data.length;
443     }
444     value.count = count; value.length = length;
445     rebuildPoint(value);
446     value.revision++;
447   }
448 
449   #build(type: number, data: number[]): void {
450     if (!data.every(Number.isFinite)) return;
451     const value = state(this);
452     ensureRevision(value);
453     if (!value.count && type !== 0) {
454       // Canvas starts a missing subpath at the first control point (or endpoint).
455       append(value, 0, data.slice(0, 2));
456       if (type === 1) {
457         value.revision++;
458         return;
459       }
460     }
461     append(value, type, data);
462     value.revision++;
463   }
464 
465   #offset(index: number): number {
466     const value = state(this);
467     if (!Number.isInteger(index) || index < 0 || index >= value.count) {
468       throw new RangeError('Path segment index is out of range.');
469     }
470     let offset = 0;
471     for (let i = 0; i < index; i++) offset += widths[value.types[i]];
472     return offset;
473   }
474 
475   /**
476    * Returns an independent segment value at the specified index. See {@link PathSegment}.
477    * @param index - Zero-based segment index.
478    * @returns The segment at the requested index. See {@link PathSegment}.
479    */
480   getSegment(index: number): PathSegment {
481     return readSegment(state(this), index, this.#offset(index));
482   }
483 
484   /**
485    * Replaces one stored segment with a validated independent value. See {@link PathGeometry}.
486    * @param index - Zero-based index of the segment to replace.
487    * @param segment - Replacement segment data. See {@link PathSegment}.
488    */
489   setSegment(index: number, segment: PathSegment): void {
490     const offset = this.#offset(index);
491     const type = names.indexOf(segment.type);
492     const data = validatedOperands(segment);
493     if (!data.every(Number.isFinite)) throw new RangeError('Path coordinates must be finite.');
494     if (index === 0 && type !== 0) throw new TypeError('A path must start with a move segment.');
495     const value = state(this);
496     ensureRevision(value);
497     const oldWidth = widths[value.types[index]];
498     const length = value.length + data.length - oldWidth;
499     reserve(value, value.count, length);
500     value.data.copyWithin(offset + data.length, offset + oldWidth, value.length);
501     value.data.set(data, offset);
502     value.types[index] = type;
503     value.length = length;
504     rebuildPoint(value);
505     value.revision++;
506   }
507 
508   /**
509    * Applies a finite 2D affine matrix. Old native conversions remain unchanged.
510    * @param matrix - Affine matrix applied to all segments in this path.
511    */
512   transform(matrix: DOMMatrix2DInit): void {
513     const input = matrix as DOMMatrixInit;
514     const normalized = DOMMatrix.fromMatrix(input);
515     if (!normalized.is2D) throw new TypeError('PathGeometry requires a 2D affine matrix.');
516     const { a, b, c, d, e, f } = normalized;
517     if (![a, b, c, d, e, f].every(Number.isFinite)) {
518       throw new RangeError('Path transform must be finite.');
519     }
520     const value = state(this);
521     if (!value.count) return;
522     ensureRevision(value);
523     // Two passes keep overflow errors atomic without allocating another buffer.
524     for (const write of [false, true]) {
525       visitPathGeometry(this, (type, data, offset) => {
526         const length = type === 5 ? 6 : widths[type];
527         for (let i = 0; i < length; i += 2) {
528           const x = data[offset + i], y = data[offset + i + 1];
529           const vector = type === 5 && i > 0;
530           const nextX = a * x + c * y + (vector ? 0 : e);
531           const nextY = b * x + d * y + (vector ? 0 : f);
532           if (!Number.isFinite(nextX) || !Number.isFinite(nextY)) {
533             throw new RangeError('Path transform coordinates overflowed.');
534           }
535           if (write) { data[offset + i] = nextX; data[offset + i + 1] = nextY; }
536         }
537       });
538     }
539     rebuildPoint(value);
540     value.revision++;
541   }
542 
543   /**
544    * Iterates over independent segment values in source order. See {@link PathSegment}.
545    * @returns An iterator over the path's segments in drawing order. See {@link PathSegment}.
546    */
547   *[Symbol.iterator](): IterableIterator<PathSegment> {
548     const value = state(this);
549     const revision = value.revision;
550     let offset = 0;
551     for (let index = 0; index < value.count; index++) {
552       if (value.revision !== revision) throw new Error('PathGeometry changed during iteration.');
553       const width = widths[value.types[index]];
554       yield readSegment(value, index, offset);
555       if (value.revision !== revision) throw new Error('PathGeometry changed during iteration.');
556       offset += width;
557     }
558   }
559 }
560 
561 function readSegment(value: Storage, index: number, offset: number): PathSegment {
562   const d = value.data;
563   switch (value.types[index]) {
564     case 0: return { type: 'move', x: d[offset], y: d[offset + 1] };
565     case 1: return { type: 'line', x: d[offset], y: d[offset + 1] };
566     case 2: return { type: 'quadratic', cpx: d[offset], cpy: d[offset + 1], x: d[offset + 2], y: d[offset + 3] };
567     case 3: return { type: 'cubic', cp1x: d[offset], cp1y: d[offset + 1], cp2x: d[offset + 2], cp2y: d[offset + 3], x: d[offset + 4], y: d[offset + 5] };
568     case 5: return { type: 'arc', cx: d[offset], cy: d[offset + 1], ux: d[offset + 2], uy: d[offset + 3], vx: d[offset + 4], vy: d[offset + 5], startAngle: d[offset + 6], sweep: d[offset + 7] };
569     default: return { type: 'close' };
570   }
571 }
572 
573 function validatedOperands(segment: PathSegment): number[] {
574   const data = operands(segment);
575   if (!data.every(Number.isFinite)) throw new RangeError('Path coordinates must be finite.');
576   if (segment.type === 'arc' && (Math.abs(segment.sweep) > TAU || Math.abs(segment.startAngle) > TAU)) {
577     throw new RangeError('Arc angles must be normalized to one revolution.');
578   }
579   return data;
580 }
581 
582 function updatePoint(value: Storage, type: number, data: ArrayLike<number>, offset: number): void {
583   if (type === 4) { value.x = value.startX; value.y = value.startY; return; }
584   if (type === 5) {
585     const angle = data[offset + 6] + data[offset + 7];
586     value.x = data[offset] + data[offset + 2] * Math.cos(angle) + data[offset + 4] * Math.sin(angle);
587     value.y = data[offset + 1] + data[offset + 3] * Math.cos(angle) + data[offset + 5] * Math.sin(angle);
588   } else {
589     value.x = data[offset + widths[type] - 2]; value.y = data[offset + widths[type] - 1];
590   }
591   if (type === 0) { value.startX = value.x; value.startY = value.y; }
592 }
593 function rebuildPoint(value: Storage): void {
594   value.x = value.y = value.startX = value.startY = 0;
595   let offset = 0;
596   for (let i = 0; i < value.count; i++) {
597     updatePoint(value, value.types[i], value.data, offset);
598     offset += widths[value.types[i]];
599   }
600 }
601
## Documentation version Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.