@thi.ng/hiccup-svg - npm Package Compare versions

Comparing version 1.0.14 to 2.0.0-alpha

api.d.ts

@@ -1,4 +0,13 @@
-export interface PathSegment extends Array<any> {
-    [0]: string;
-    [1]?: ArrayLike<number>[];
-}
+export declare type Vec2Like = ArrayLike<number>;
+export declare type PathSegmentMove = ["M" | "m", Vec2Like];
+export declare type PathSegmentLine = ["L" | "l", Vec2Like];
+export declare type PathSegmentHLine = ["H" | "h", number];
+export declare type PathSegmentVLine = ["V" | "v", number];
+export declare type PathSegmentCubic = ["C" | "c", Vec2Like, Vec2Like, Vec2Like];
+export declare type PathSegmentQuadratic = ["Q" | "q", Vec2Like, Vec2Like];
+export declare type PathSegmentCubicChain = ["S" | "s", Vec2Like, Vec2Like];
+export declare type PathSegmentQuadraticChain = ["T" | "t", Vec2Like];
+export declare type PathSegmentArc = ["A" | "a", number, number, boolean, boolean, Vec2Like];
+export declare type PathSegmentClose = ["Z" | "z"];
+export declare type PathSegment = PathSegmentMove | PathSegmentLine | PathSegmentHLine | PathSegmentVLine | PathSegmentCubic | PathSegmentQuadratic | PathSegmentCubicChain | PathSegmentQuadraticChain | PathSegmentArc | PathSegmentClose;
+export declare type GradientStop = [string | number, string];

circle.d.ts

@@ -1,1 +0,1 @@
-export declare const circle: (p: ArrayLike<number>, r?: number, attr?: any) => any[];
+export declare const circle: (p: ArrayLike<number>, r: number, attribs?: any) => any[];

circle.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const format_1 = require("./format");
-exports.circle = (p, r = 1, attr) => [
-    "circle",
-    Object.assign({
-        cx: format_1.ff(p[0]),
-        cy: format_1.ff(p[1]),
-        r: format_1.ff(r),
-    }, attr)
-];
+exports.circle = (p, r, attribs) => ["circle", Object.assign({ cx: format_1.ff(p[0]), cy: format_1.ff(p[1]), r: format_1.ff(r) }, attribs)];

defs.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defs = (...defs) => ["defs", ...defs];
+exports.defs = (...defs) => ["defs", {}, ...defs];

format.d.ts

@@ -1,5 +0,4 @@
-declare const setPrecision: (n: number) => number;
-declare const ff: (x: number) => string;
-declare const point: (p: ArrayLike<number>) => string;
-declare const points: (pts: ArrayLike<number>[], sep?: string) => string;
-export { ff, point, points, setPrecision, };
+export declare const setPrecision: (n: number) => number;
+export declare const ff: (x: number) => string;
+export declare const fpoint: (p: ArrayLike<number>) => string;
+export declare const fpoints: (pts: ArrayLike<number>[], sep?: string) => string;

format.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 let PRECISION = 2;
-const setPrecision = (n) => (PRECISION = n);
-exports.setPrecision = setPrecision;
-const ff = (x) => x.toFixed(PRECISION);
-exports.ff = ff;
-const point = (p) => ff(p[0]) + "," + ff(p[1]);
-exports.point = point;
-const points = (pts, sep = " ") => pts ? pts.map(point).join(sep) : "";
-exports.points = points;
+exports.setPrecision = (n) => (PRECISION = n);
+exports.ff = (x) => x.toFixed(PRECISION);
+exports.fpoint = (p) => exports.ff(p[0]) + "," + exports.ff(p[1]);
+exports.fpoints = (pts, sep = " ") => pts ? pts.map(exports.fpoint).join(sep) : "";

gradients.d.ts

@@ -1,2 +0,2 @@
-export declare const linearGradient: (id: string, x1: any, y1: any, x2: any, y2: any, stops: [any, string][]) => any[];
-export declare const radialGradient: (id: string, cx: any, cy: any, r: any, stops: [any, string][]) => any[];
+export declare const linearGradient: (id: string, from: ArrayLike<number>, to: ArrayLike<number>, stops: [string | number, string][], attribs?: any) => any[];
+export declare const radialGradient: (id: string, from: ArrayLike<number>, to: ArrayLike<number>, fr: number, r: number, stops: [string | number, string][], attribs?: any) => any[];

gradients.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const gradient = (type, attribs, stops) => [type,
+const format_1 = require("./format");
+const RE_ALPHA_COLOR = /(rgb|hsl)a\(([a-z0-9.-]+),([0-9.%]+),([0-9.%]+),([0-9.]+)\)/;
+const gradient = (type, attribs, stops) => [
+    type,
     attribs,
-    ...stops.map(([offset, col]) => ["stop", { offset, "stop-color": col }])
+    ...stops.map(gradientStop)
 ];
-exports.linearGradient = (id, x1, y1, x2, y2, stops) => gradient("linearGradient", { id, x1, y1, x2, y2 }, stops);
-exports.radialGradient = (id, cx, cy, r, stops) => gradient("radialGradient", { id, cx, cy, r }, stops);
+const gradientStop = ([offset, col]) => {
+    // use stop-opacity attrib for safari compatibility
+    // https://stackoverflow.com/a/26220870/294515
+    let opacity;
+    const parts = RE_ALPHA_COLOR.exec(col);
+    if (parts) {
+        col = `${parts[1]}(${parts[2]},${parts[3]},${parts[4]})`;
+        opacity = parts[5];
+    }
+    return ["stop", { offset, "stop-color": col, "stop-opacity": opacity }];
+};
+exports.linearGradient = (id, from, to, stops, attribs) => gradient("linearGradient", Object.assign({ id, x1: format_1.ff(from[0]), y1: format_1.ff(from[1]), x2: format_1.ff(to[0]), y2: format_1.ff(to[1]) }, attribs), stops);
+exports.radialGradient = (id, from, to, fr, r, stops, attribs) => gradient("radialGradient", Object.assign({ id, fx: format_1.ff(from[0]), fy: format_1.ff(from[1]), cx: format_1.ff(to[0]), cy: format_1.ff(to[1]), fr: format_1.ff(fr), r: format_1.ff(r) }, attribs), stops);

index.d.ts

@@ -8,2 +8,3 @@ export * from "./api";
 export * from "./path";
+export * from "./points";
 export * from "./polygon";
@@ -15,1 +16,2 @@ export * from "./polyline";
 export * from "./format";
+export * from "./convert";

index.js

@@ -12,2 +12,3 @@ "use strict";
 __export(require("./path"));
+__export(require("./points"));
 __export(require("./polygon"));
@@ -19,1 +20,2 @@ __export(require("./polyline"));
 __export(require("./format"));
+__export(require("./convert"));

line.d.ts

@@ -1,1 +0,3 @@
-export declare const line: (a: ArrayLike<number>, b: ArrayLike<number>, attr?: any) => any[];
+export declare const line: (a: ArrayLike<number>, b: ArrayLike<number>, attribs?: any) => any[];
+export declare const hline: (y: number, attribs?: any) => any[];
+export declare const vline: (x: number, attribs?: any) => any[];

line.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const format_1 = require("./format");
-exports.line = (a, b, attr) => [
-    "line",
-    Object.assign({
-        x1: format_1.ff(a[0]),
-        y1: format_1.ff(a[1]),
-        x2: format_1.ff(b[0]),
-        y2: format_1.ff(b[1]),
-    }, attr)
-];
+exports.line = (a, b, attribs) => ["line", Object.assign({ x1: format_1.ff(a[0]), y1: format_1.ff(a[1]), x2: format_1.ff(b[0]), y2: format_1.ff(b[1]) }, attribs)];
+exports.hline = (y, attribs) => exports.line([-1e6, y], [1e6, y], attribs);
+exports.vline = (x, attribs) => exports.line([x, -1e6], [x, 1e6], attribs);

package.json

 {
     "name": "@thi.ng/hiccup-svg",
-    "version": "1.0.14",
+    "version": "2.0.0-alpha",
     "description": "SVG element functions for @thi.ng/hiccup & @thi.ng/hdom",
@@ -31,3 +31,3 @@ "main": "./index.js",
     "dependencies": {
-        "@thi.ng/hiccup": "^2.1.2"
+        "@thi.ng/hiccup": "^2.2.0"
     },
@@ -34,0 +34,0 @@ "keywords": [

path.d.ts

 import { PathSegment } from "./api";
-export declare const path: (segments: PathSegment[], attr?: any) => any[];
+export declare const path: (segments: PathSegment[], attribs?: any) => any[];

path.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const format_1 = require("./format");
-exports.path = (segments, attr) => [
-    "path",
-    Object.assign({}, attr, { d: segments.map((seg) => seg[0] + format_1.points(seg[1], ",")).join("") })
-];
+exports.path = (segments, attribs) => {
+    let res = [];
+    for (let seg of segments) {
+        res.push(seg[0]);
+        switch (seg[0].toLowerCase()) {
+            case "a":
+                res.push(format_1.ff(seg[1]), format_1.ff(seg[2]));
+                res.push(seg[3] ? 1 : 0, seg[4] ? 1 : 0);
+                res.push(format_1.fpoint(seg[5]));
+                break;
+            case "h":
+            case "v":
+                res.push(format_1.ff(seg[1]));
+                break;
+            case "m":
+            case "l":
+                res.push(format_1.fpoint(seg[1]));
+                break;
+            case "z":
+                break;
+            default:
+                res.push(format_1.fpoints(seg.slice(1), ","));
+        }
+    }
+    return ["path", Object.assign({}, attribs, { d: res.join("") })];
+};

polygon.d.ts

@@ -1,1 +0,1 @@
-export declare const polygon: (pts: ArrayLike<number>[], attr?: any) => any[];
+export declare const polygon: (pts: ArrayLike<number>[], attribs?: any) => any[];

polygon.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const format_1 = require("./format");
-exports.polygon = (pts, attr) => [
-    "polygon",
-    Object.assign({ points: format_1.points(pts) }, attr)
-];
+exports.polygon = (pts, attribs) => ["polygon", Object.assign({ points: format_1.fpoints(pts) }, attribs)];

polyline.d.ts

@@ -1,1 +0,1 @@
-export declare const polyline: (pts: ArrayLike<number>[], attr?: any) => any[];
+export declare const polyline: (pts: ArrayLike<number>[], attribs?: any) => any[];

polyline.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const format_1 = require("./format");
-exports.polyline = (pts, attr) => [
-    "polyline",
-    Object.assign({ points: format_1.points(pts) }, attr)
-];
+exports.polyline = (pts, attribs) => ["polyline", Object.assign({ points: format_1.fpoints(pts) }, attribs)];

rect.d.ts

@@ -1,1 +0,2 @@
-export declare const rect: (p: ArrayLike<number>, width?: number, height?: number, attr?: any) => any[];
+export declare const rect: (p: ArrayLike<number>, width: number, height: number, attribs?: any) => any[];
+export declare const roundedRect: (p: ArrayLike<number>, width: number, height: number, rx: number, ry: number, attribs?: any) => any[];

rect.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const format_1 = require("./format");
-exports.rect = (p, width = 1, height = 1, attr) => [
-    "rect",
-    Object.assign({
-        x: format_1.ff(p[0]),
-        y: format_1.ff(p[1]),
-        width: format_1.ff(width),
-        height: format_1.ff(height),
-    }, attr)
-];
+exports.rect = (p, width, height, attribs) => exports.roundedRect(p, width, height, 0, 0, attribs);
+exports.roundedRect = (p, width, height, rx, ry, attribs) => {
+    attribs = Object.assign({ x: format_1.ff(p[0]), y: format_1.ff(p[1]), width: format_1.ff(width), height: format_1.ff(height) }, attribs);
+    if (rx > 0 || ry > 0) {
+        attribs.rx = format_1.ff(rx);
+        attribs.ry = format_1.ff(ry);
+    }
+    return ["rect", attribs];
+};

svg.d.ts

@@ -1,1 +0,9 @@
-export declare const svg: (attr: any, ...body: any[]) => any[];
+/**
+ * Defines an <svg> root element with default XML namespaces. By default
+ * currently still sets SVG version to 1.1 to support Safari and other
+ * legacy tooling.
+ *
+ * @param attribs
+ * @param body
+ */
+export declare const svg: (attribs: any, ...body: any[]) => any[];

svg.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const api_1 = require("@thi.ng/hiccup/api");
-exports.svg = (attr, ...body) => [
-    "svg",
-    Object.assign(attr, { xmlns: api_1.SVG_NS }),
-    ...body
-];
+/**
+ * Defines an <svg> root element with default XML namespaces. By default
+ * currently still sets SVG version to 1.1 to support Safari and other
+ * legacy tooling.
+ *
+ * @param attribs
+ * @param body
+ */
+exports.svg = (attribs, ...body) => ["svg", Object.assign({ version: "1.1", xmlns: api_1.SVG_NS, "xmlns:xlink": api_1.XLINK_NS }, attribs), ...body];

text.d.ts

@@ -1,1 +0,1 @@
-export declare const text: (body: string, p: ArrayLike<number>, attr?: any) => any[];
+export declare const text: (p: ArrayLike<number>, body: string, attribs?: any) => any[];

text.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const format_1 = require("./format");
-exports.text = (body, p, attr) => ["text", Object.assign({ x: format_1.ff(p[0]), y: format_1.ff(p[1]) }, attr), body
-];
+exports.text = (p, body, attribs) => ["text", Object.assign({ x: format_1.ff(p[0]), y: format_1.ff(p[1]) }, attribs), body];

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39487

increased by45.89%

Number of package files

38

increased by18.75%

Lines of code

424

increased by186.49%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• [e-mail]/hiccup@^2.2.0