@chocbite/ts-lib-svg 1.0.1

package/dist/index.d.ts

@@ -0,0 +1,157 @@
+declare class SVGAttributes<T extends SVGElement> {
+    readonly elem: T;
+    constructor(elem: T);
+    /** Sets the stroke color of the SVG element */
+    stroke(stroke: string): this;
+    /** Sets the stroke color of the SVG element */
+    s(stroke: string): this;
+    /** Sets the fill color of the SVG element */
+    fill(fill: string): this;
+    /** Sets the fill color of the SVG element */
+    f(fill: string): this;
+    /** Sets the stroke width of the SVG element */
+    stroke_width(width: number): this;
+    /** Sets the stroke width of the SVG element */
+    sw(width: number): this;
+    /** Adds one or more class names to the SVG element */
+    class_list(...class_name: string[]): this;
+    /** Adds one or more class names to the SVG element */
+    cl(...class_name: string[]): this;
+    /** Sets an arbitrary attribute on the SVG element */
+    attribute(name: string, value: string): this;
+    /** Sets an arbitrary attribute on the SVG element */
+    a(name: string, value: string): this;
+}
+
+/**This creates a svg circle
+ * @param center_x x coordinate of center
+ * @param center_y y coordinate of center
+ * @param radius radius of circle*/
+declare function circle(center_x: number, center_y: number, radius: number): SVGAttributes<SVGCircleElement>;
+/**This draws parts of a circle/ellipse, the circle direction is reversed
+ * @param center_x the center point on the x axis
+ * @param center_y the center point on the y axis
+ * @param radius radius in x axis
+ * @param start_angle start angle in radians
+ * @param end_angle end anglein  radians*/
+declare function circle_arc(center_x: number, center_y: number, radius: number, start_angle: number, end_angle: number): SVGAttributes<SVGPathElement>;
+
+/**This creates a svg ellipse
+ * @param center_x x coordinate of center
+ * @param center_y y coordinate of center
+ * @param radius_x x radius of circle
+ * @param radius_y y radius of circle*/
+declare function ellipse(center_x: number, center_y: number, radius_x: number, radius_y: number): SVGAttributes<SVGEllipseElement>;
+/**This draws parts of a circle/ellipse, the circle direction is reversed
+ * @param center_x the center point on the x axis
+ * @param center_y the center point on the y axis
+ * @param radius_x radius in x axis
+ * @param radius_y radius in y axis
+ * @param start_angle start angle in radians
+ * @param end_angle end anglein  radians*/
+declare function ellipse_arc(center_x: number, center_y: number, radius_x: number, radius_y: number, start_angle: number, end_angle: number): SVGAttributes<SVGPathElement>;
+
+/**This draws a triangle*/
+declare function group(): SVGAttributes<SVGGElement>;
+
+/**This creates a line element
+ * @param start_x start point on x axis
+ * @param start_y start point on y axis
+ * @param end_x end point on x axis
+ * @param end_y end point on y axis*/
+declare function line(start_x: number, start_y: number, end_x: number, end_y: number): SVGAttributes<SVGLineElement>;
+
+/**This creates a path element*/
+declare function path(path: string): SVGAttributes<SVGPathElement>;
+
+/**This creates a rectangle with teh center as origin
+ * @param center_x x coordinate of center
+ * @param center_y y coordinate of center
+ * @param width width
+ * @param height height
+ * @param corner_radius radius of corner*/
+declare function rectangle_from_center(center_x: number, center_y: number, width: number, height: number, corner_radius: number): SVGAttributes<SVGRectElement>;
+/**This creates a rectangle with teh center as origin
+ * @param start_x x coordinate of center
+ * @param start_y y coordinate of center
+ * @param width width
+ * @param height height
+ * @param corner_radius radius of corner*/
+declare function rectangle_from_corner(start_x: number, start_y: number, width: number, height: number, corner_radius: number): SVGAttributes<SVGRectElement>;
+
+type SVGElements = {
+    ellipse: SVGEllipseElement;
+    circle: SVGCircleElement;
+    path: SVGPathElement;
+    line: SVGLineElement;
+    rect: SVGRectElement;
+    text: SVGTextElement;
+    g: SVGGElement;
+    svg: SVGSVGElement;
+    foreignObject: SVGForeignObjectElement;
+};
+declare function create_svg_element<K extends keyof SVGElements>(name: K): SVGAttributes<SVGElements[K]>;
+
+/** This returns an empty svg element
+ * @param  width width of svg
+ * @param  height height of svg
+ * @param  viewbox viewbox of svg*/
+declare function svg$1(width: number, height: number, viewbox?: string): SVGAttributes<SVGSVGElement>;
+
+declare const SVGAnchorPoint: {
+    readonly bottomLeft: 0;
+    readonly middleLeft: 1;
+    readonly topLeft: 2;
+    readonly topCenter: 3;
+    readonly topRight: 4;
+    readonly middleRight: 5;
+    readonly bottomRight: 6;
+    readonly bottomCenter: 7;
+    readonly middleCenter: 8;
+};
+type SVGAnchorPoint = (typeof SVGAnchorPoint)[keyof typeof SVGAnchorPoint];
+
+/**Creates a text nodes for an svg
+ * @param x x coordinate of text
+ * @param y y coordinate of text
+ * @param text text
+ * @param size size of text in px
+ * @param anchor anchor point of text*/
+declare function text(x: number, y: number, text: string, size: number, anchor: SVGAnchorPoint): SVGAttributes<SVGTextElement>;
+/**Creates a text nodes for an svg
+ * @param x x coordinate of text
+ * @param y y coordinate of text
+ * @param width width of text
+ * @param height height of text
+ * @param text text
+ * @param size size of text in px
+ * @param anchor anchor point of */
+declare function multi_line_text(x: number, y: number, width: number, height: number, text: string, size: number, anchor: SVGAnchorPoint): SVGAttributes<SVGForeignObjectElement>;
+
+/**This draws a triangle
+ * @param center_x x coordinate of center
+ * @param center_y y coordinate of center
+ * @param width width
+ * @param height height*/
+declare function isosceles_triangle(center_x: number, center_y: number, width: number, height: number): SVGAttributes<SVGPathElement>;
+
+declare const svg: {
+    create: typeof create_svg_element;
+    circle: typeof circle;
+    circle_arc: typeof circle_arc;
+    ellipse: typeof ellipse;
+    ellipse_arc: typeof ellipse_arc;
+    group: typeof group;
+    line: typeof line;
+    path: typeof path;
+    rectangle_from_center: typeof rectangle_from_center;
+    rectangle_from_corner: typeof rectangle_from_corner;
+    svg: typeof svg$1;
+    text: typeof text;
+    multi_line_text: typeof multi_line_text;
+    isosceles_triangle: typeof isosceles_triangle;
+    angle_to_anchor_point: (angle: number) => 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
+};
+type SVGFunc = () => SVGSVGElement;
+
+export { SVGAnchorPoint, type SVGFunc, svg };

package/dist/index.js

@@ -0,0 +1,312 @@
+// src/primitives/ellipse.ts
+import { degrees_to_radians } from "@chocbite/ts-lib-math";
+
+// src/attributes.ts
+var SVGAttributes = class {
+  elem;
+  constructor(elem) {
+    this.elem = elem;
+  }
+  /** Sets the stroke color of the SVG element */
+  stroke(stroke) {
+    this.elem.setAttribute("stroke", stroke);
+    return this;
+  }
+  /** Sets the stroke color of the SVG element */
+  s(stroke) {
+    this.elem.setAttribute("stroke", stroke);
+    return this;
+  }
+  /** Sets the fill color of the SVG element */
+  fill(fill) {
+    this.elem.setAttribute("fill", fill);
+    return this;
+  }
+  /** Sets the fill color of the SVG element */
+  f(fill) {
+    this.elem.setAttribute("fill", fill);
+    return this;
+  }
+  /** Sets the stroke width of the SVG element */
+  stroke_width(width) {
+    this.elem.setAttribute("stroke-width", String(width));
+    return this;
+  }
+  /** Sets the stroke width of the SVG element */
+  sw(width) {
+    this.elem.setAttribute("stroke-width", String(width));
+    return this;
+  }
+  /** Adds one or more class names to the SVG element */
+  class_list(...class_name) {
+    this.elem.classList.add(...class_name);
+    return this;
+  }
+  /** Adds one or more class names to the SVG element */
+  cl(...class_name) {
+    this.elem.classList.add(...class_name);
+    return this;
+  }
+  /** Sets an arbitrary attribute on the SVG element */
+  attribute(name, value) {
+    this.elem.setAttribute(name, value);
+    return this;
+  }
+  /** Sets an arbitrary attribute on the SVG element */
+  a(name, value) {
+    this.elem.setAttribute(name, value);
+    return this;
+  }
+};
+
+// src/shared.ts
+var NAME_SPACE = "http://www.w3.org/2000/svg";
+
+// src/primitives/shared.ts
+function create_svg_element(name) {
+  return new SVGAttributes(
+    document.createElementNS(NAME_SPACE, name)
+  );
+}
+
+// src/primitives/ellipse.ts
+function ellipse(center_x, center_y, radius_x, radius_y) {
+  return create_svg_element("ellipse").a("cx", String(center_x)).a("cy", String(center_y)).a("rx", String(radius_x)).a("ry", String(radius_y));
+}
+function ellipse_arc(center_x, center_y, radius_x, radius_y, start_angle, end_angle) {
+  const start_radian = degrees_to_radians(start_angle);
+  end_angle = degrees_to_radians(end_angle - start_angle);
+  const s_x = radius_x * Math.cos(start_radian) + center_x;
+  const s_y = radius_y * Math.sin(start_radian) + center_y;
+  const e_x = radius_x * Math.cos(start_radian + end_angle) + center_x;
+  const e_y = radius_y * Math.sin(start_radian + end_angle) + center_y;
+  const f_a = end_angle > Math.PI ? 1 : 0;
+  const f_s = end_angle > 0 ? 1 : 0;
+  return create_svg_element("path").a(
+    "d",
+    `M ${s_x} ${s_y} A ${radius_x} ${radius_y} 0 ${f_a} ${f_s} ${e_x} ${e_y}`
+  );
+}
+
+// src/primitives/circle.ts
+function circle(center_x, center_y, radius) {
+  const circle2 = create_svg_element("circle");
+  circle2.a("cx", String(center_x));
+  circle2.a("cy", String(center_y));
+  circle2.a("r", String(radius));
+  return circle2;
+}
+function circle_arc(center_x, center_y, radius, start_angle, end_angle) {
+  return ellipse_arc(
+    center_x,
+    center_y,
+    radius,
+    radius,
+    start_angle,
+    end_angle
+  );
+}
+
+// src/primitives/group.ts
+function group() {
+  return create_svg_element("g");
+}
+
+// src/primitives/line.ts
+function line(start_x, start_y, end_x, end_y) {
+  return create_svg_element("line").a("x1", String(start_x)).a("y1", String(start_y)).a("x2", String(end_x)).a("y2", String(end_y));
+}
+
+// src/primitives/path.ts
+function path(path2) {
+  return create_svg_element("path").a("d", path2);
+}
+
+// src/primitives/rectangle.ts
+function rectangle_from_center(center_x, center_y, width, height, corner_radius) {
+  return create_svg_element("rect").a("x", String(center_x - width / 2)).a("y", String(center_y - height / 2)).a("width", String(width)).a("height", String(height)).a("rx", String(corner_radius));
+}
+function rectangle_from_corner(start_x, start_y, width, height, corner_radius) {
+  return create_svg_element("rect").a("x", String(start_x)).a("y", String(start_y)).a("width", String(width)).a("height", String(height)).a("rx", String(corner_radius));
+}
+
+// src/primitives/svg.ts
+function svg(width, height, viewbox = `0 0 ${width} ${height}`) {
+  return create_svg_element("svg").a("width", String(width)).a("height", String(height)).a("viewBox", String(viewbox));
+}
+
+// src/util/anchorPoint.ts
+var SVGAnchorPoint = {
+  bottomLeft: 0,
+  middleLeft: 1,
+  topLeft: 2,
+  topCenter: 3,
+  topRight: 4,
+  middleRight: 5,
+  bottomRight: 6,
+  bottomCenter: 7,
+  middleCenter: 8
+};
+
+// src/primitives/text.ts
+function text(x, y, text2, size, anchor) {
+  const text_elem = create_svg_element("text").a("x", String(x)).a("y", String(y)).a("font-size", String(size));
+  text_elem.elem.innerHTML = text2;
+  switch (anchor) {
+    case SVGAnchorPoint.bottomLeft:
+    case SVGAnchorPoint.middleLeft:
+    case SVGAnchorPoint.topLeft: {
+      text_elem.a("text-anchor", "start");
+      break;
+    }
+    case SVGAnchorPoint.topCenter:
+    case SVGAnchorPoint.bottomCenter:
+    case SVGAnchorPoint.middleCenter: {
+      text_elem.a("text-anchor", "middle");
+      break;
+    }
+    case SVGAnchorPoint.topRight:
+    case SVGAnchorPoint.middleRight:
+    case SVGAnchorPoint.bottomRight: {
+      text_elem.a("text-anchor", "end");
+      break;
+    }
+  }
+  switch (anchor) {
+    case SVGAnchorPoint.bottomLeft:
+    case SVGAnchorPoint.bottomRight:
+    case SVGAnchorPoint.bottomCenter: {
+      text_elem.a("dominant-baseline", "auto");
+      break;
+    }
+    case SVGAnchorPoint.middleLeft:
+    case SVGAnchorPoint.middleRight:
+    case SVGAnchorPoint.middleCenter: {
+      text_elem.a("dominant-baseline", "central");
+      break;
+    }
+    case SVGAnchorPoint.topLeft:
+    case SVGAnchorPoint.topCenter:
+    case SVGAnchorPoint.topRight: {
+      text_elem.a("dominant-baseline", "hanging");
+      break;
+    }
+  }
+  return text_elem;
+}
+function multi_line_text(x, y, width, height, text2, size, anchor) {
+  const text_element = create_svg_element("foreignObject");
+  const text_div = text_element.elem.appendChild(document.createElement("div"));
+  text_element.a("width", String(width));
+  text_element.a("height", String(height));
+  text_element.a("x", String(x));
+  text_element.a("y", String(y));
+  text_div.style.fontSize = size + "px";
+  text_div.style.width = "100%";
+  text_div.style.height = "100%";
+  text_div.style.display = "flex";
+  text_div.innerHTML = text2;
+  switch (anchor) {
+    case SVGAnchorPoint.bottomLeft:
+    case SVGAnchorPoint.middleLeft:
+    case SVGAnchorPoint.topLeft: {
+      text_div.style.textAlign = "start";
+      text_div.style.justifyContent = "flex-start";
+      break;
+    }
+    case SVGAnchorPoint.topCenter:
+    case SVGAnchorPoint.bottomCenter:
+    case SVGAnchorPoint.middleCenter: {
+      text_div.style.textAlign = "center";
+      text_div.style.justifyContent = "center";
+      break;
+    }
+    case SVGAnchorPoint.topRight:
+    case SVGAnchorPoint.middleRight:
+    case SVGAnchorPoint.bottomRight: {
+      text_div.style.textAlign = "end";
+      text_div.style.justifyContent = "flex-end";
+      break;
+    }
+  }
+  switch (anchor) {
+    case SVGAnchorPoint.bottomLeft:
+    case SVGAnchorPoint.bottomRight:
+    case SVGAnchorPoint.bottomCenter: {
+      text_div.style.alignItems = "flex-end";
+      break;
+    }
+    case SVGAnchorPoint.middleLeft:
+    case SVGAnchorPoint.middleRight:
+    case SVGAnchorPoint.middleCenter: {
+      text_div.style.alignItems = "center";
+      break;
+    }
+    case SVGAnchorPoint.topLeft:
+    case SVGAnchorPoint.topCenter:
+    case SVGAnchorPoint.topRight: {
+      text_div.style.alignItems = "flex-start";
+      break;
+    }
+  }
+  return text_element;
+}
+
+// src/primitives/triangle.ts
+function isosceles_triangle(center_x, center_y, width, height) {
+  const half_w = width / 2;
+  const half_h = height / 2;
+  return create_svg_element("path").a(
+    "d",
+    "M" + (center_x - half_w) + "," + (center_y + half_h) + " " + (center_x + half_w) + "," + (center_y + half_h) + " " + center_x + "," + (center_y - half_h) + "Z"
+  );
+}
+
+// src/util/angleToAnchorPoint.ts
+var angle_to_anchor_point = (angle) => {
+  const sec = angle >= 0 ? angle % 6.283185307179586 : -(angle % 6.283185307179586);
+  if (sec > 5.93411945678072) {
+    return SVGAnchorPoint.middleRight;
+  } else if (sec > 4.974188368183839) {
+    return SVGAnchorPoint.topRight;
+  } else if (sec > 4.45058959258554) {
+    return SVGAnchorPoint.topCenter;
+  } else if (sec > 3.490658503988659) {
+    return SVGAnchorPoint.topLeft;
+  } else if (sec > 2.792526803190927) {
+    return SVGAnchorPoint.middleLeft;
+  } else if (sec > 1.832595714594046) {
+    return SVGAnchorPoint.bottomLeft;
+  } else if (sec > 1.308996938995747) {
+    return SVGAnchorPoint.bottomCenter;
+  } else if (sec > 0.3490658503988659) {
+    return SVGAnchorPoint.bottomRight;
+  } else {
+    return SVGAnchorPoint.middleRight;
+  }
+};
+
+// src/index.ts
+var svg2 = {
+  create: create_svg_element,
+  //Primitives
+  circle,
+  circle_arc,
+  ellipse,
+  ellipse_arc,
+  group,
+  line,
+  path,
+  rectangle_from_center,
+  rectangle_from_corner,
+  svg,
+  text,
+  multi_line_text,
+  isosceles_triangle,
+  //Utilities
+  angle_to_anchor_point
+};
+export {
+  SVGAnchorPoint,
+  svg2 as svg
+};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@chocbite/ts-lib-svg",
+  "version": "1.0.1",
+  "description": "Library to help with svg generation in typescript",
+  "author": "chocolateandmilkwin",
+  "license": "MIT",
+  "type": "module",
+  "private": false,
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite --port 9952",
+    "build": "tsup src/index.ts --format esm --dts",
+    "lint": "eslint src/**/*.ts",
+    "test": "vitest run",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@chocbite/ts-lib-math": "1.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "tsup": "^8.0.0",
+    "vite": "^7.0.0",
+    "vitest": "^4.0.0",
+    "eslint": "^9.0.0",
+    "typescript-eslint": "^8.0.0",
+    "@vitest/browser-playwright": "^4.0.0"
+  }
+}