79 lines
1.6 KiB
TypeScript
79 lines
1.6 KiB
TypeScript
|
import { Point } from './point'
|
||
|
|
import { Attributes } from './attributes'
|
||
|
|
|
||
|
|
|
||
|
|
export class Path {
|
||
|
|
constructor() {
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
|
||
|
|
ops: {
|
||
|
|
type: "move" | "line" | "curve" | "close";
|
||
|
|
to?: Point;
|
||
|
|
cp1?: Point;
|
||
|
|
cp2?: Point;
|
||
|
|
}[] = [];
|
||
|
|
attributes: Attributes = new Attributes();
|
||
|
|
|
||
|
|
/** Adds a move operation to Point to */
|
||
|
|
move(to: Point): Path {
|
||
|
|
this.ops.push({type: "move", to});
|
||
|
|
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Adds a line operation to Point to */
|
||
|
|
line(to: Point): Path {
|
||
|
|
this.ops.push({type: "line", to});
|
||
|
|
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Adds a line operation to Point to */
|
||
|
|
curve(cp1: Point, cp2: Point, to: Point): Path {
|
||
|
|
this.ops.push({type: "curve", cp1, cp2, to});
|
||
|
|
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Adds a close operation */
|
||
|
|
close(): Path {
|
||
|
|
this.ops.push({type: "close"});
|
||
|
|
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Returns SVG pathstring for this path */
|
||
|
|
asPathstring() {
|
||
|
|
let d = '';
|
||
|
|
for(let op of this.ops) {
|
||
|
|
switch (op.type) {
|
||
|
|
case 'move':
|
||
|
|
d += `M ${op.to!.x},${op.to!.y}`;
|
||
|
|
break;
|
||
|
|
case 'line':
|
||
|
|
d += ` L ${op.to!.x},${op.to!.y}`;
|
||
|
|
break;
|
||
|
|
case 'curve':
|
||
|
|
d += ` C ${op.cp1!.x},${op.cp1!.y} ${op.cp2!.x},${op.cp2!.y} ${op.to!.x},${op.to!.y}`;
|
||
|
|
break;
|
||
|
|
case 'close':
|
||
|
|
d += ' z';
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
throw `${op.type} is not a valid path command`;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return d;
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Returns SVG code for this path */
|
||
|
|
render(): string {
|
||
|
|
this.attributes.add('d', this.asPathstring());
|
||
|
|
return `<path ${this.render()} />`;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|