rendx-svg 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-present wei.liang (https://github.com/weiliang0121)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/main.cjs

@@ -0,0 +1,166 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+
+// src/main.ts
+var main_exports = {};
+__export(main_exports, {
+  SvgRenderer: () => SvgRenderer
+});
+module.exports = __toCommonJS(main_exports);
+
+// src/renderer.ts
+var import_rendx_dom = require("rendx-dom");
+var import_rendx_gradient = require("rendx-gradient");
+var import_rendx_core = require("rendx-core");
+var DEFAULT_SIZE = { width: 300, height: 150 };
+var _size, _element, _group, _g, _defs, _stack, _attributes, _SvgRenderer_instances, initG_fn, transform_fn, addEl_fn;
+var SvgRenderer = class {
+  constructor(size = DEFAULT_SIZE) {
+    __privateAdd(this, _SvgRenderer_instances);
+    __privateAdd(this, _size);
+    __privateAdd(this, _element);
+    __privateAdd(this, _group);
+    __privateAdd(this, _g);
+    __privateAdd(this, _defs);
+    __privateAdd(this, _stack, []);
+    __privateAdd(this, _attributes, {});
+    __privateSet(this, _size, size);
+    __privateSet(this, _element, (0, import_rendx_dom.createSvgEl)("svg"));
+    __privateSet(this, _defs, (0, import_rendx_dom.getSvgElByTag)(__privateGet(this, _element), "defs"));
+    __privateSet(this, _group, (0, import_rendx_dom.getSvgElByTag)(__privateGet(this, _element), "g"));
+    __privateSet(this, _g, (0, import_rendx_dom.createSvgEl)("g"));
+    (0, import_rendx_dom.setSVGAttrs)(__privateGet(this, _element), __privateGet(this, _size));
+    (0, import_rendx_dom.setStyles)(__privateGet(this, _element), { width: `${__privateGet(this, _size).width}px`, height: `${__privateGet(this, _size).height}px`, userSelect: "none" });
+    (0, import_rendx_dom.setStyles)(__privateGet(this, _group), { pointerEvents: "none" });
+    __privateMethod(this, _SvgRenderer_instances, initG_fn).call(this);
+  }
+  get el() {
+    return __privateGet(this, _element);
+  }
+  getSize() {
+    return __privateGet(this, _size);
+  }
+  resize(size) {
+    __privateSet(this, _size, size);
+    (0, import_rendx_dom.setSVGAttrs)(__privateGet(this, _element), __privateGet(this, _size));
+    (0, import_rendx_dom.setStyles)(__privateGet(this, _element), { width: `${__privateGet(this, _size).width}px`, height: `${__privateGet(this, _size).height}px` });
+  }
+  dispose() {
+    this.el.remove();
+  }
+  clear() {
+    __privateGet(this, _group).innerHTML = "";
+    __privateGet(this, _defs).innerHTML = "";
+    __privateSet(this, _g, (0, import_rendx_dom.createSvgEl)("g"));
+    __privateSet(this, _stack, []);
+    __privateMethod(this, _SvgRenderer_instances, initG_fn).call(this);
+  }
+  save(createChild) {
+    const last = __privateGet(this, _stack)[__privateGet(this, _stack).length - 1];
+    const g = (0, import_rendx_dom.createSvgEl)("g");
+    if (createChild) last.appendChild(g);
+    else last.parentNode?.appendChild(g);
+    __privateSet(this, _g, g);
+    __privateGet(this, _stack).push(g);
+  }
+  restore() {
+    if (__privateGet(this, _stack).length > 1) __privateGet(this, _stack).pop();
+    __privateSet(this, _g, __privateGet(this, _stack)[__privateGet(this, _stack).length - 1]);
+  }
+  translate(tx, ty) {
+    __privateMethod(this, _SvgRenderer_instances, transform_fn).call(this, `translate(${tx} ${ty})`);
+  }
+  rotate(radian) {
+    __privateMethod(this, _SvgRenderer_instances, transform_fn).call(this, `rotate(${radian * import_rendx_core.r2d})`);
+  }
+  scale(sx, sy) {
+    __privateMethod(this, _SvgRenderer_instances, transform_fn).call(this, `scale(${sx} ${sy})`);
+  }
+  setTransform(a, b, c, d, e, f) {
+    __privateGet(this, _g).setAttribute("transform", `matrix(${a} ${b} ${c} ${d} ${e} ${f})`);
+  }
+  setAttributes(attrs) {
+    __privateSet(this, _attributes, attrs);
+  }
+  rect(x, y, width, height) {
+    __privateGet(this, _g).appendChild(__privateMethod(this, _SvgRenderer_instances, addEl_fn).call(this, "rect", { x, y, width, height }));
+  }
+  line(x1, y1, x2, y2) {
+    __privateGet(this, _g).appendChild(__privateMethod(this, _SvgRenderer_instances, addEl_fn).call(this, "line", { x1, y1, x2, y2 }));
+  }
+  circle(x, y, radius) {
+    __privateGet(this, _g).appendChild(__privateMethod(this, _SvgRenderer_instances, addEl_fn).call(this, "circle", { cx: x, cy: y, r: radius }));
+  }
+  text(text, x, y) {
+    const textElement = __privateMethod(this, _SvgRenderer_instances, addEl_fn).call(this, "text", { x, y });
+    textElement.textContent = text;
+    __privateGet(this, _g).appendChild(textElement);
+  }
+  path(path) {
+    __privateGet(this, _g).appendChild(__privateMethod(this, _SvgRenderer_instances, addEl_fn).call(this, "path", { d: path }));
+  }
+  image(source, x, y, width, height) {
+    const href = typeof source === "string" ? source : source.src ?? "";
+    const el = __privateMethod(this, _SvgRenderer_instances, addEl_fn).call(this, "image", { href, x, y, width, height });
+    el.setAttribute("preserveAspectRatio", "none");
+    __privateGet(this, _g).appendChild(el);
+  }
+  clipPath(clipPath) {
+    const el = (0, import_rendx_dom.createSvgEl)("clipPath");
+    el.setAttribute("id", clipPath.id);
+    const pathEl = (0, import_rendx_dom.createSvgEl)("path");
+    pathEl.setAttribute("d", clipPath.path);
+    el.appendChild(pathEl);
+    __privateGet(this, _defs).appendChild(el);
+  }
+  gradient(options) {
+    const gradient = (0, import_rendx_gradient.createSVGGradient)(options);
+    if (gradient) __privateGet(this, _defs).appendChild(gradient);
+  }
+};
+_size = new WeakMap();
+_element = new WeakMap();
+_group = new WeakMap();
+_g = new WeakMap();
+_defs = new WeakMap();
+_stack = new WeakMap();
+_attributes = new WeakMap();
+_SvgRenderer_instances = new WeakSet();
+initG_fn = function() {
+  __privateGet(this, _group).appendChild(__privateGet(this, _g));
+  __privateGet(this, _stack).push(__privateGet(this, _g));
+};
+transform_fn = function(transform) {
+  __privateGet(this, _g).setAttribute("transform", `${__privateGet(this, _g).getAttribute("transform") || ""} ${transform}`);
+};
+addEl_fn = function(tag, attributes) {
+  return (0, import_rendx_dom.setSVGAttrs)((0, import_rendx_dom.createSvgEl)(tag), { ...__privateGet(this, _attributes), ...attributes });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SvgRenderer
+});

package/dist/main.d.cts

@@ -0,0 +1,28 @@
+import { IGraphicsRenderer, Size, AO, ClipPath, GradientOptions } from 'rendx-core';
+
+declare class SvgRenderer implements IGraphicsRenderer {
+    #private;
+    constructor(size?: Size);
+    get el(): SVGSVGElement;
+    getSize(): Size;
+    resize(size: Size): void;
+    dispose(): void;
+    clear(): void;
+    save(createChild?: boolean): void;
+    restore(): void;
+    translate(tx: number, ty: number): void;
+    rotate(radian: number): void;
+    scale(sx: number, sy: number): void;
+    setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void;
+    setAttributes(attrs: AO): void;
+    rect(x: number, y: number, width: number, height: number): void;
+    line(x1: number, y1: number, x2: number, y2: number): void;
+    circle(x: number, y: number, radius: number): void;
+    text(text: string, x: number, y: number): void;
+    path(path: string): void;
+    image(source: CanvasImageSource | string, x: number, y: number, width: number, height: number): void;
+    clipPath(clipPath: ClipPath): void;
+    gradient(options: GradientOptions): void;
+}
+
+export { SvgRenderer };

package/dist/main.d.ts

@@ -0,0 +1,28 @@
+import { IGraphicsRenderer, Size, AO, ClipPath, GradientOptions } from 'rendx-core';
+
+declare class SvgRenderer implements IGraphicsRenderer {
+    #private;
+    constructor(size?: Size);
+    get el(): SVGSVGElement;
+    getSize(): Size;
+    resize(size: Size): void;
+    dispose(): void;
+    clear(): void;
+    save(createChild?: boolean): void;
+    restore(): void;
+    translate(tx: number, ty: number): void;
+    rotate(radian: number): void;
+    scale(sx: number, sy: number): void;
+    setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void;
+    setAttributes(attrs: AO): void;
+    rect(x: number, y: number, width: number, height: number): void;
+    line(x1: number, y1: number, x2: number, y2: number): void;
+    circle(x: number, y: number, radius: number): void;
+    text(text: string, x: number, y: number): void;
+    path(path: string): void;
+    image(source: CanvasImageSource | string, x: number, y: number, width: number, height: number): void;
+    clipPath(clipPath: ClipPath): void;
+    gradient(options: GradientOptions): void;
+}
+
+export { SvgRenderer };

package/dist/main.js

@@ -0,0 +1,140 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+
+// src/renderer.ts
+import { createSvgEl, getSvgElByTag, setSVGAttrs, setStyles } from "rendx-dom";
+import { createSVGGradient } from "rendx-gradient";
+import { r2d } from "rendx-core";
+var DEFAULT_SIZE = { width: 300, height: 150 };
+var _size, _element, _group, _g, _defs, _stack, _attributes, _SvgRenderer_instances, initG_fn, transform_fn, addEl_fn;
+var SvgRenderer = class {
+  constructor(size = DEFAULT_SIZE) {
+    __privateAdd(this, _SvgRenderer_instances);
+    __privateAdd(this, _size);
+    __privateAdd(this, _element);
+    __privateAdd(this, _group);
+    __privateAdd(this, _g);
+    __privateAdd(this, _defs);
+    __privateAdd(this, _stack, []);
+    __privateAdd(this, _attributes, {});
+    __privateSet(this, _size, size);
+    __privateSet(this, _element, createSvgEl("svg"));
+    __privateSet(this, _defs, getSvgElByTag(__privateGet(this, _element), "defs"));
+    __privateSet(this, _group, getSvgElByTag(__privateGet(this, _element), "g"));
+    __privateSet(this, _g, createSvgEl("g"));
+    setSVGAttrs(__privateGet(this, _element), __privateGet(this, _size));
+    setStyles(__privateGet(this, _element), { width: `${__privateGet(this, _size).width}px`, height: `${__privateGet(this, _size).height}px`, userSelect: "none" });
+    setStyles(__privateGet(this, _group), { pointerEvents: "none" });
+    __privateMethod(this, _SvgRenderer_instances, initG_fn).call(this);
+  }
+  get el() {
+    return __privateGet(this, _element);
+  }
+  getSize() {
+    return __privateGet(this, _size);
+  }
+  resize(size) {
+    __privateSet(this, _size, size);
+    setSVGAttrs(__privateGet(this, _element), __privateGet(this, _size));
+    setStyles(__privateGet(this, _element), { width: `${__privateGet(this, _size).width}px`, height: `${__privateGet(this, _size).height}px` });
+  }
+  dispose() {
+    this.el.remove();
+  }
+  clear() {
+    __privateGet(this, _group).innerHTML = "";
+    __privateGet(this, _defs).innerHTML = "";
+    __privateSet(this, _g, createSvgEl("g"));
+    __privateSet(this, _stack, []);
+    __privateMethod(this, _SvgRenderer_instances, initG_fn).call(this);
+  }
+  save(createChild) {
+    const last = __privateGet(this, _stack)[__privateGet(this, _stack).length - 1];
+    const g = createSvgEl("g");
+    if (createChild) last.appendChild(g);
+    else last.parentNode?.appendChild(g);
+    __privateSet(this, _g, g);
+    __privateGet(this, _stack).push(g);
+  }
+  restore() {
+    if (__privateGet(this, _stack).length > 1) __privateGet(this, _stack).pop();
+    __privateSet(this, _g, __privateGet(this, _stack)[__privateGet(this, _stack).length - 1]);
+  }
+  translate(tx, ty) {
+    __privateMethod(this, _SvgRenderer_instances, transform_fn).call(this, `translate(${tx} ${ty})`);
+  }
+  rotate(radian) {
+    __privateMethod(this, _SvgRenderer_instances, transform_fn).call(this, `rotate(${radian * r2d})`);
+  }
+  scale(sx, sy) {
+    __privateMethod(this, _SvgRenderer_instances, transform_fn).call(this, `scale(${sx} ${sy})`);
+  }
+  setTransform(a, b, c, d, e, f) {
+    __privateGet(this, _g).setAttribute("transform", `matrix(${a} ${b} ${c} ${d} ${e} ${f})`);
+  }
+  setAttributes(attrs) {
+    __privateSet(this, _attributes, attrs);
+  }
+  rect(x, y, width, height) {
+    __privateGet(this, _g).appendChild(__privateMethod(this, _SvgRenderer_instances, addEl_fn).call(this, "rect", { x, y, width, height }));
+  }
+  line(x1, y1, x2, y2) {
+    __privateGet(this, _g).appendChild(__privateMethod(this, _SvgRenderer_instances, addEl_fn).call(this, "line", { x1, y1, x2, y2 }));
+  }
+  circle(x, y, radius) {
+    __privateGet(this, _g).appendChild(__privateMethod(this, _SvgRenderer_instances, addEl_fn).call(this, "circle", { cx: x, cy: y, r: radius }));
+  }
+  text(text, x, y) {
+    const textElement = __privateMethod(this, _SvgRenderer_instances, addEl_fn).call(this, "text", { x, y });
+    textElement.textContent = text;
+    __privateGet(this, _g).appendChild(textElement);
+  }
+  path(path) {
+    __privateGet(this, _g).appendChild(__privateMethod(this, _SvgRenderer_instances, addEl_fn).call(this, "path", { d: path }));
+  }
+  image(source, x, y, width, height) {
+    const href = typeof source === "string" ? source : source.src ?? "";
+    const el = __privateMethod(this, _SvgRenderer_instances, addEl_fn).call(this, "image", { href, x, y, width, height });
+    el.setAttribute("preserveAspectRatio", "none");
+    __privateGet(this, _g).appendChild(el);
+  }
+  clipPath(clipPath) {
+    const el = createSvgEl("clipPath");
+    el.setAttribute("id", clipPath.id);
+    const pathEl = createSvgEl("path");
+    pathEl.setAttribute("d", clipPath.path);
+    el.appendChild(pathEl);
+    __privateGet(this, _defs).appendChild(el);
+  }
+  gradient(options) {
+    const gradient = createSVGGradient(options);
+    if (gradient) __privateGet(this, _defs).appendChild(gradient);
+  }
+};
+_size = new WeakMap();
+_element = new WeakMap();
+_group = new WeakMap();
+_g = new WeakMap();
+_defs = new WeakMap();
+_stack = new WeakMap();
+_attributes = new WeakMap();
+_SvgRenderer_instances = new WeakSet();
+initG_fn = function() {
+  __privateGet(this, _group).appendChild(__privateGet(this, _g));
+  __privateGet(this, _stack).push(__privateGet(this, _g));
+};
+transform_fn = function(transform) {
+  __privateGet(this, _g).setAttribute("transform", `${__privateGet(this, _g).getAttribute("transform") || ""} ${transform}`);
+};
+addEl_fn = function(tag, attributes) {
+  return setSVGAttrs(createSvgEl(tag), { ...__privateGet(this, _attributes), ...attributes });
+};
+export {
+  SvgRenderer
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "rendx-svg",
+  "version": "0.1.0",
+  "description": "SVG renderer implementation for Rendx",
+  "license": "MIT",
+  "author": "wei.liang (https://github.com/weiliang0121)",
+  "type": "module",
+  "keywords": [
+    "rendx",
+    "2d",
+    "canvas",
+    "rendering",
+    "visualization",
+    "scene-graph"
+  ],
+  "homepage": "https://weiliang0121.github.io/rendx/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/weiliang0121/rendx.git",
+    "directory": "packages/svg"
+  },
+  "main": "dist/main.cjs",
+  "module": "dist/main.js",
+  "types": "dist/main.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/main.d.ts",
+      "import": "./dist/main.js",
+      "require": "./dist/main.cjs"
+    }
+  },
+  "dependencies": {
+    "rendx-gradient": "^0.1.0",
+    "rendx-dom": "^0.1.0",
+    "rendx-core": "^0.1.0"
+  },
+  "devDependencies": {
+    "rendx-shape": "^0.1.0",
+    "rendx-path": "^0.1.0"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  }
+}