@dimension-mismatch/svgtools 0.0.1

package/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@dimension-mismatch/svgtools",
+  "version": "0.0.1",
+  "description": "Tools for working with SVG images, based on my htmltools framework",
+  "main": "svgtools.js",
+  "author": "dimension-mismatch",
+  "license": "ISC"
+}

package/svgtools.ts

@@ -0,0 +1,109 @@
+import { FElement } from "htmltools";
+import { Transform2d } from "./transformtools.js";
+
+const ns =  "http://www.w3.org/2000/svg";
+export class SVGFElement extends FElement{
+    constructor(type: string){
+        super(document.createElementNS(ns, type));
+    }
+    withTransform(tf: Transform2d){
+        this.withAttributes({transform: tf.toSvgString()});
+        return this;
+    }
+}
+export class FESVG extends FElement{
+    constructor(...children: SVGFElement[]){
+        super(document.createElementNS(ns, "svg"), ...children);
+    }
+}
+export const SVG = (...children: SVGFElement[]) => new FESVG(...children);
+
+export class FESVGGroup extends SVGFElement{
+    constructor(...children: SVGFElement[]){
+        super("g");
+        this.addChildren(...children);
+    }
+}
+export const GROUP = (...children: SVGFElement[]) => new FESVGGroup(...children);
+
+export class FESVGCircle extends SVGFElement{
+    constructor(x: number, y: number, radius: number){
+        super("circle");
+        this.withAttributes({cx: x, cy: y, r: radius})
+    }
+    setPosition(x: number,y: number){
+        this.withAttributes({cx: x, cy: y});
+    }
+}
+export const CIRCLE = (x: number, y: number, radius: number) => new FESVGCircle(x,y,radius);
+
+
+export class FESVGLine extends SVGFElement{
+    constructor(x1: number, y1: number, x2: number, y2: number){
+        super("line");
+        this.withAttributes({x1: x1,y1: y1,x2: x2,y2: y2});
+    }
+    setP1(x: number, y: number){
+        this.withAttributes({x1: x,y1: y});
+    }
+    setP2(x: number, y: number){
+        this.withAttributes({x2: x,y2: y});
+    }
+}
+export const LINE = (x1: number, y1: number, x2: number, y2: number) => new FESVGLine(x1,y1,x2,y2);
+
+export class FESVGPath extends SVGFElement{
+    constructor(data: string){
+        super("path");
+        this.withAttributes({d: data});
+    }
+    setData(data: string){
+        this.withAttributes({d: data});
+    }
+}
+export const PATH = (data: string) => new FESVGPath(data);
+
+export class FESVGRect extends SVGFElement{
+    constructor(x: number, y: number, width: number, height: number){
+        super("rect");
+        this.withAttributes({x: x,y: y,width: width,height: height});
+    }
+
+    setPosition(x: number, y: number){
+        this.withAttributes({x: x,y: y});
+    }
+    setSize(width: number, height: number){
+        this.withAttributes({width: width,height: height});
+    }
+    setBoundingBox(x1: number, y1: number, x2: number, y2: number){
+        this.withAttributes({x: x1, y: y1, width: x2- x1, height: y2 - y1});
+    }
+}
+export const RECT = (x: number, y: number, width: number, height: number) => new FESVGRect(x,y,width,height);
+
+
+export interface GradientStop{
+    color: string;
+    offset: string;
+}
+class FESVGradientStop extends SVGFElement{
+    constructor(stop: GradientStop){
+        super("stop");
+        this.withAttributes({style: `stop-color: ${stop.color};`, offset: stop.offset})
+    }
+}
+export class FESVGLinearGradient extends SVGFElement{
+    constructor(id: string, gradientTransform: Transform2d, ...stops: GradientStop[]){
+        super("linearGradient");
+        this.withAttributes({id: id, gradientTransform: gradientTransform.toSvgString()});
+        this.addChildren(...stops.map((s) => new FESVGradientStop(s)));
+    }
+}
+
+export class FESVGPattern extends SVGFElement{
+    constructor(id: string, transform: Transform2d, ...content: SVGFElement[]){
+        super("pattern");
+        this.withAttributes({id: id, transform: transform.toSvgString()});
+        this.addChildren(...content);
+    }
+}

package/transformtools.ts

@@ -0,0 +1,110 @@
+export class Transform2d{
+    //represents a combination of 2d translation, rotation, and scaling
+    /*
+        [ a c e ][ x ]   [ x' ]      x' = ax + cy + e
+        [ b d f ][ y ] = [ y' ]      y' = bx + dy + f
+        [ 0 0 1 ][ 1 ]   [ 1  ]
+    */
+    a: number;
+    b: number;
+    c: number;
+    d: number;
+    e: number;
+    f: number;
+    constructor(a: number, b: number, c: number, d: number, e: number, f: number){
+        this.a = a;
+        this.b = b;
+        this.c = c;
+        this.d = d;
+        this.e = e;
+        this.f = f;
+    }
+    applyTo(vec: {x: number, y: number}){
+        return {
+            x: this.a * vec.x + this.c * vec.y + this.e,
+            y: this.b * vec.x + this.d * vec.y + this.f,
+        }
+    }
+    then(other: Transform2d): Transform2d{
+        /*
+        [ a c e ][ a c e ]
+        [ b d f ][ b d f ]
+        [ 0 0 1 ][ 0 0 1 ]
+        */
+        return new Transform2d(
+            other.a * this.a + other.c * this.b,
+            other.b * this.a + other.d * this.b,
+            other.a * this.c + other.c * this.d, 
+            other.b * this.c + other.d * this.d,
+            other.a * this.e + other.c * this.f + other.e,
+            other.b * this.e + other.d * this.f + other.f)
+    }
+    composeWith(other: Transform2d){
+            this.a = other.a * this.a + other.c * this.b
+            this.b = other.b * this.a + other.d * this.b
+            this.c = other.a * this.c + other.c * this.d
+            this.d = other.b * this.c + other.d * this.d
+            this.e = other.a * this.e + other.c * this.f + other.e
+            this.f = other.b * this.e + other.d * this.f + other.f
+            return this;
+    }
+    inverse():Transform2d{
+       /*([ a c e ]
+          [ b d f ]
+          [ 0 0 1 ]*/
+        let det = this.a * this.d - this.b * this.c;
+        if(det == 0){
+            return this;
+        }
+        return new Transform2d(
+            this.d / det,
+            -this.b / det,
+            -this.c / det,
+            this.a / det,
+            (-this.d * this.e + this.c * this.f) / det,
+            (-this.a * this.f + this.b * this.e) / det
+        );
+    }
+    toSvgString(){
+        return `matrix(${this.a} ${this.b} ${this.c} ${this.d} ${this.e} ${this.f})`
+    }
+    copy(){
+        return new Transform2d(this.a, this.b, this.c, this.d, this.e, this.f);
+    }
+    static translation(x: number, y: number): Transform2d{
+        return new Transform2d(1,0,0,1,x,y);
+    }
+    
+    static rotation(angle: number){
+        let cos = Math.cos(angle);
+        let sin = Math.sin(angle);
+        return new Transform2d(cos, sin, -sin, cos, 0, 0);
+    }
+    static scale(scale: number){
+        return new Transform2d(scale, 0,0, scale, 0, 0);
+    }
+    static scaleXY(scaleX: number, scaleY: number){
+        return new Transform2d(scaleX, 0, 0, scaleY, 0, 0);
+    }
+    static nothing(){
+        return new Transform2d(1,0,0,1,0,0);
+    }
+}
+
+export function transformBounds(bounds: any, tf: Transform2d){
+    let p1 = tf.applyTo(bounds.min);
+    let p2 = tf.applyTo({x: bounds.min.x, y: bounds.max.y});
+    let p3 = tf.applyTo(bounds.max);
+    let p4 = tf.applyTo({x: bounds.max.x, y: bounds.min.y});
+
+    return {
+        min: {
+            x: Math.min(p1.x, p2.x, p3.x, p4.x),
+            y: Math.min(p1.y, p2.y, p3.y, p4.y),
+        },
+        max: {
+            x: Math.max(p1.x, p2.x, p3.x, p4.x),
+            y: Math.max(p1.y, p2.y, p3.y, p4.y),
+        }
+    }
+}