elk-svg - npm Package Compare versions

Comparing version 2.5.0 to 2.6.0

dist/elk-svg.d.ts

@@ -7,4 +7,3 @@ import type { ElkSvg } from "./types";
  * @returns {@link ElkSvg} instance.
- * @category Basic Usage
  */
 export declare function initElkSvg(options: ElkSvgOptions): ElkSvg;

dist/elk-svg.js

@@ -9,3 +9,2 @@ import { defaultLogger } from "./logger";
  * @returns {@link ElkSvg} instance.
- * @category Basic Usage
  */
@@ -39,7 +38,2 @@ export function initElkSvg(options) {
     }
-    /**
-     *
-     * @param id the id of elk element.
-     * @returns rendered DOM element or null.
-     */
     ref(id) {
@@ -46,0 +40,0 @@ return this.renderer.ref(id);

dist/index.d.ts

 /**
- * # Documentation work in progress.
- *
- * ## Getting started
- *
- * ```
- * npm install elk-svg
- * ```
- *
- * ```
- * import { initElkSvg } from "elk-svg";
- *
- * const container = document.querySelector("svg")
- * const elkSvg = initElkSvg({ container });
- * ```
- *
- * Initialize {@link ElkSvg} instance by calling {@link initElkSvg} function with {@link ElkSvgOptions}.
- * The only required property is `container`.
- *
- * @packageDocumentation
+ * @module References
  */
 export * from "./elk-svg";
 export * from "./types";

dist/index.js

 /**
- * # Documentation work in progress.
- *
- * ## Getting started
- *
- * ```
- * npm install elk-svg
- * ```
- *
- * ```
- * import { initElkSvg } from "elk-svg";
- *
- * const container = document.querySelector("svg")
- * const elkSvg = initElkSvg({ container });
- * ```
- *
- * Initialize {@link ElkSvg} instance by calling {@link initElkSvg} function with {@link ElkSvgOptions}.
- * The only required property is `container`.
- *
- * @packageDocumentation
+ * @module References
  */
@@ -22,0 +4,0 @@ export * from "./elk-svg";

dist/preprocess/flatter.js

@@ -33,3 +33,3 @@ export class Flatter {
             parentId,
-            _shapePath: null,
+            classes: node.svg?.classes ?? [],
         };
@@ -54,4 +54,3 @@ this.all.push(flatNode);
             parentId,
-            x: 0,
-            y: 0,
+            classes: edge.svg?.classes ?? [],
         };
@@ -73,2 +72,3 @@ this.all.push(flatEdge);
             parentId,
+            classes: port.svg?.classes ?? [],
         };
@@ -91,2 +91,3 @@ this.ports.push(flatPort);
             height: label.height,
+            classes: label.svg?.classes ?? [],
         };
@@ -93,0 +94,0 @@ this.labels.push(flatLabel);

dist/preprocess/middlewares/absolute-position.js

@@ -7,4 +7,26 @@ export class AbsolutePosition {
         }
+        for (const edge of f.edges) {
+            const ee = edge;
+            for (const section of edge.sections) {
+                section.startPoint.x += ee.x;
+                section.startPoint.y += ee.y;
+                section.endPoint.x += ee.x;
+                section.endPoint.y += ee.y;
+                section.bendPoints?.forEach((b) => {
+                    b.x += ee.x;
+                    b.y += ee.y;
+                });
+            }
+            // now this edge shouldn't have a position.
+            delete ee.x;
+            delete ee.y;
+        }
     }
     recursive(e, ref) {
+        const ee = e;
+        if (ee.x === undefined) {
+            // this is edge, which has no position, but temporary set for calculate absolute position
+            ee.x = 0;
+            ee.y = 0;
+        }
         if (this.marking.has(e.id)) {
@@ -22,4 +44,4 @@ return;
         this.recursive(parent.r, ref);
-        e.x += parent.r.x;
-        e.y += parent.r.y;
+        ee.x += parent.r.x;
+        ee.y += parent.r.y;
         this.marking.add(e.id);
@@ -26,0 +48,0 @@ }

dist/preprocess/preprocessor.d.ts

@@ -1,2 +0,2 @@
-import type { FlatElements } from "../flat-types";
+import type { RenderElements } from "../render-types";
 import type { DefaultRenderingOptions, Shape, StrictNode } from "../types";
@@ -6,4 +6,5 @@ export declare class Preprocessor {
     private readonly shapes;
+    private readonly pw;
     constructor(dro: DefaultRenderingOptions, shapes: Record<string, Shape>);
-    start(node: StrictNode): FlatElements;
+    start(node: StrictNode): RenderElements;
 }

dist/preprocess/preprocessor.js

 import { Flatter } from "./flatter";
 import { AbsolutePosition } from "./middlewares/absolute-position";
-import { ShapePath } from "./middlewares/shape-path";
+import { GenPath } from "./middlewares/gen-path";
+import { SticNode } from "./middlewares/stick-node";
+import { PathWriterImpl } from "./path-writer";
 export class Preprocessor {
     dro;
     shapes;
+    pw = new PathWriterImpl();
     constructor(dro, shapes) {
@@ -12,4 +15,8 @@ this.dro = dro;
     start(node) {
-        const middlewares = [new AbsolutePosition(), new ShapePath(this.shapes)];
         const flatResult = new Flatter(this.dro).flat(node);
+        const middlewares = [
+            new AbsolutePosition(),
+            new SticNode(this.shapes, this.pw),
+            new GenPath(this.shapes, this.pw),
+        ];
         middlewares.forEach((m) => {
@@ -16,0 +23,0 @@ m.run(flatResult);

dist/preprocess/types.d.ts

@@ -1,6 +0,16 @@
-import { FlatNode } from "../flat-types";
-import { FlatElement } from "../flat-types";
-import { FlatPort } from "../flat-types";
-import { FlatLabel } from "../flat-types";
-import { FlatEdge } from "../flat-types";
+import { RenderEdge, RenderLabel, RenderNode, RenderPort } from "../render-types";
+import type { EdgeRenderingOptions, LabelRenderingOptions, NodeRenderingOptions, PortRenderingOptions } from "../types";
+export type FlatNode = RenderNode & {
+    svg: NodeRenderingOptions;
+};
+export type FlatPort = RenderPort & {
+    svg: PortRenderingOptions;
+};
+export type FlatEdge = RenderEdge & {
+    svg: EdgeRenderingOptions;
+};
+export type FlatLabel = RenderLabel & {
+    svg: LabelRenderingOptions;
+};
+export type FlatElement = FlatNode | FlatPort | FlatEdge | FlatLabel;
 export type FlatElementRef = {
@@ -19,5 +29,2 @@ type: "node";
 };
-export interface Middleware {
-    run: (f: FlatResult) => void;
-}
 export type FlatResult = {
@@ -31,1 +38,4 @@ nodes: FlatNode[];
 };
+export interface Middleware {
+    run: (f: FlatResult) => void;
+}

dist/render/renderer.d.ts

 import type { Classnamer } from "../classnames";
-import type { FlatElements } from "../flat-types";
+import type { RenderElements } from "../render-types";
 import type { Logger, Shape } from "../types";
@@ -11,3 +11,3 @@ export declare class Renderer {
     constructor(o: RendererOptions);
-    render(flatElements: FlatElements): void;
+    render(renderElements: RenderElements): void;
     ref(id: string): Element | null;
@@ -14,0 +14,0 @@ private renderElement;

dist/render/renderer.js

@@ -18,3 +18,3 @@ import { deepEqual, svg, transform } from "../utils";
     componentKeys = new Map();
-    domRef = new DomRef("flat");
+    domRef = new DomRef("domRef");
     constructor(o) {
@@ -32,8 +32,8 @@ this.o = o;
     }
-    render(flatElements) {
+    render(renderElements) {
         const deletedIds = this.domRef.ids();
-        flatElements.nodes.forEach(this.renderElement.bind(this, "node", deletedIds));
-        flatElements.ports.forEach(this.renderElement.bind(this, "port", deletedIds));
-        flatElements.edges.forEach(this.renderElement.bind(this, "edge", deletedIds));
-        flatElements.labels.forEach(this.renderElement.bind(this, "label", deletedIds));
+        renderElements.nodes.forEach(this.renderElement.bind(this, "node", deletedIds));
+        renderElements.ports.forEach(this.renderElement.bind(this, "port", deletedIds));
+        renderElements.edges.forEach(this.renderElement.bind(this, "edge", deletedIds));
+        renderElements.labels.forEach(this.renderElement.bind(this, "label", deletedIds));
         deletedIds.forEach((id) => {
@@ -67,8 +67,10 @@ this.domRef.delete(id);
     domStateless(type, element, domElement) {
-        const classes = element.svg.classes ?? [];
-        domElement.setAttribute("class", [this.o.classnamer(type), ...classes].join(" "));
+        domElement.setAttribute("class", [this.o.classnamer(type), ...element.classes].join(" "));
         if (this.o.idAttribute) {
             domElement.setAttribute(this.o.idAttribute, element.id);
         }
-        transform(domElement, { translate: element });
+        const e = element;
+        if (e.x || e.y) {
+            transform(domElement, { translate: e });
+        }
     }
@@ -75,0 +77,0 @@ keyChanged(component, ctx) {

dist/render/types.d.ts

 import type { Classnamer } from "../classnames";
-import type { FlatElementType, FlatElementTypeMap } from "../flat-types";
+import type { RenderElementType, RenderElementTypeMap } from "../render-types";
 import type { Logger, Shape } from "../types";
-export type Component<T extends FlatElementType> = {
+export type Component<T extends RenderElementType> = {
     key(ctx: RenderingContext<T>): any[];
     render(ctx: RenderingContext<T>): SVGElement;
 };
-export type RenderingContext<T extends FlatElementType> = {
+export type RenderingContext<T extends RenderElementType> = {
     logger: Logger;
-    element: FlatElementTypeMap[T];
+    element: RenderElementTypeMap[T];
     classnamer: Classnamer;
     shapes: Record<string, Shape>;
 };

dist/shapes.js

@@ -1,13 +0,34 @@
-const rectangle = ({ width: w, height: h }) => ({
-    path: [["M", 0, 0], ["L", w, 0], ["L", w, h], ["L", 0, h], ["z"]],
-});
-const ellipse = ({ width: w, height: h }) => ({
-    path: [["M", w / 2, h / 2], ["a", w / 2, h / 2, 0, 1, 0, 1, 0], ["z"]],
-});
-const diamond = ({ width: w, height: h }) => ({
-    path: [["M", 0, h / 2], ["L", w / 2, 0], ["L", w, h / 2], ["L", w / 2, h], ["z"]],
-});
-const arrowNormal = ({ width: w, height: h }) => ({
-    path: [["M", 0, h], ["L", w, h], ["L", w / 2, 0], ["z"]],
-});
+const rectangle = {
+    path: ({ w, h }, p) => p
+        .____________________________________________________________________________()
+        .M(0, 0)
+        .L(w, 0)
+        .L(w, h)
+        .L(0, h)
+        .z(),
+};
+const ellipse = {
+    path: ({ w, h }, p) => p
+        .____________________________________________________________________________()
+        .M(w / 2, 0)
+        .a(w / 2, h / 2, 0, 1, 0, 1, 0)
+        .z(),
+};
+const diamond = {
+    path: ({ w, h }, p) => p
+        .____________________________________________________________________________()
+        .M(0, h / 2)
+        .L(w / 2, 0)
+        .L(w, h / 2)
+        .L(w / 2, h)
+        .z(),
+};
+const arrowNormal = {
+    path: ({ w, h }, p) => p
+        .____________________________________________________________________________()
+        .M(0, h)
+        .L(w, h)
+        .L(w / 2, 0)
+        .z(),
+};
 export const defaultShapes = {
@@ -14,0 +35,0 @@ rectangle,

dist/types.d.ts

@@ -1,4 +0,1 @@
-/**
- * @category Basic Usage
- */
 export type ElkSvg = {
@@ -8,5 +5,2 @@ render(node: InputNode): void;
 };
-/**
- * @category Basic Usage
- */
 export type ElkSvgOptions = {
@@ -44,17 +38,8 @@ /**
 };
-/**
- * @category Basic Usage
- */
 export type RenderingOptions = {
     classes?: string[];
 };
-/**
- * @category Basic Usage
- */
 export type NodeRenderingOptions = RenderingOptions & {
     shape?: string | null;
 };
-/**
- * @category Basic Usage
- */
 export type EdgeRenderingOptions = RenderingOptions & {
@@ -67,15 +52,6 @@ arrow?: {
 };
-/**
- * @category Basic Usage
- */
 export type PortRenderingOptions = RenderingOptions & {
     shape?: string | null;
 };
-/**
- * @category Basic Usage
- */
 export type LabelRenderingOptions = RenderingOptions;
-/**
- * @category Basic Usage
- */
 export type DefaultRenderingOptions = {
@@ -127,10 +103,7 @@ node?: Partial<NodeRenderingOptions>;
     bendPoints?: Point[];
-    incomingShape?: string;
-    outgoingShape?: string;
+    incomingShape: string;
+    outgoingShape: string;
     incomingSections?: string[];
     outgoingSections?: string[];
 };
-/**
- * @category Basic Usage
- */
 export type InputElement = {
@@ -141,5 +114,2 @@ id?: string;
 };
-/**
- * @category Basic Usage
- */
 export type InputLabel = InputShape & {
@@ -149,5 +119,2 @@ text?: string;
 };
-/**
- * @category Basic Usage
- */
 export type InputShape = InputElement & {
@@ -159,5 +126,2 @@ x?: number;
 };
-/**
- * @category Basic Usage
- */
 export type InputNode = InputShape & {
@@ -170,5 +134,2 @@ id: string;
 };
-/**
- * @category Basic Usage
- */
 export type InputPort = InputShape & {
@@ -178,5 +139,2 @@ id: string;
 };
-/**
- * @category Basic Usage
- */
 export type InputEdge = InputElement & {
@@ -191,5 +149,2 @@ id: string;
 };
-/**
- * @category Basic Usage
- */
 export type InputSection = InputElement & {
@@ -205,9 +160,30 @@ id: string;
 };
-export type Shape = (input: ShapeInput) => ShapeOutput;
-export type ShapeInput = {
-    width: number;
-    height: number;
+export type Shape = {
+    path: (size: {
+        w: number;
+        h: number;
+    }, p: PathWriter) => PathWriter;
 };
-export type ShapeOutput = {
-    path: [string, ...number[]][] | string;
+export type PathWriter = {
+    ____________________________________________________________________________(): PathWriter;
+    M(x: number, y: number): PathWriter;
+    m(dx: number, dy: number): PathWriter;
+    L(x: number, y: number): PathWriter;
+    l(dx: number, dy: number): PathWriter;
+    H(x: number): PathWriter;
+    h(dx: number): PathWriter;
+    V(y: number): PathWriter;
+    v(dy: number): PathWriter;
+    C(x1: number, y1: number, x2: number, y2: number, x: number, y: number): PathWriter;
+    c(dx1: number, dy1: number, dx2: number, dy2: number, dx: number, dy: number): PathWriter;
+    S(x2: number, y2: number, x: number, y: number): PathWriter;
+    s(dx2: number, dy2: number, dx: number, dy: number): PathWriter;
+    Q(x1: number, y1: number, x: number, y: number): PathWriter;
+    q(dx1: number, dy1: number, dx: number, dy: number): PathWriter;
+    T(x: number, y: number): PathWriter;
+    t(dx: number, dy: number): PathWriter;
+    A(rx: number, ry: number, angle: number, largeArcFlag: 0 | 1, sweepFlag: 0 | 1, x: number, y: number): PathWriter;
+    a(rx: number, ry: number, angle: number, largeArcFlag: 0 | 1, sweepFlag: 0 | 1, dx: number, dy: number): PathWriter;
+    Z(): PathWriter;
+    z(): PathWriter;
 };
@@ -214,0 +190,0 @@ export type Point = {

dist/utils.d.ts

@@ -1,2 +0,2 @@
-import type { Point, ShapeOutput } from "./types";
+import type { Point } from "./types";
 export declare function ntos(v: number | undefined | null | false, suffix?: string): string;
@@ -21,3 +21,2 @@ export declare function svg<K extends keyof SVGElementTagNameMap>(name: K): SVGElementTagNameMap[K];
 export declare function trw(t: any, message: string, record?: any, cause?: any): never;
-export declare function formatPath({ path }: ShapeOutput): string;
 export declare function rtod(r: number): number;
@@ -24,0 +23,0 @@ export declare function distance(p: Point, dis: number, rad: number): {

dist/utils.js

@@ -54,18 +54,2 @@ export function ntos(v, suffix = "") {
 }
-export function formatPath({ path }) {
-    if (typeof path === "string") {
-        return path;
-    }
-    let result = "";
-    for (const line of path) {
-        result += " " + line[0] + " ";
-        for (let i = 1; i < line.length; i += 1) {
-            if (i !== 1) {
-                result += ",";
-            }
-            result += line[i];
-        }
-    }
-    return result.substring(1);
-}
 export function rtod(r) {
@@ -72,0 +56,0 @@ return r * (180 / Math.PI);

package.json

@@ -33,3 +33,3 @@ {
   },
-  "version": "2.5.0"
+  "version": "2.6.0"
 }

readme.md

 [<img src="https://img.shields.io/npm/v/elk-svg">](https://www.npmjs.com/package/elk-svg)
 
-# [elk-svg](https://github.com/wirekang/elk-svg)
+# elk-svg
 
@@ -8,2 +8,3 @@ * SVG renderer for [ELK json format](https://eclipse.dev/elk/documentation/tooldevelopers/graphdatastructure/jsonformat.html).
 
-## [Documentation](https://wirekang.github.io/elk-svg)
+## [Getting Started](https://wirekang.github.io/elk-svg/modules/Getting_Started.html)
+## [References](https://wirekang.github.io/elk-svg/modules/References.html)

typedoc.json

@@ -5,3 +5,3 @@ {
   "themeColor": "#cb9820",
-  "entryPoints": ["./src/index.ts"],
+  "entryPoints": ["./src/index.ts", "./src/docs/**.ts"],
   "visibilityFilters": {},
@@ -11,3 +11,4 @@ "sort": ["source-order", "kind", "instance-first", "alphabetical"],
   "excludeProtected": true,
-  "titleLink": "https://github.com/wirekang/elk-svg",
+  "titleLink": "",
+  "navigationLinks": { "GitHub": "https://github.com/wirekang/elk-svg" },
   "navigation": {
@@ -14,0 +15,0 @@ "includeCategories": true

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

80299

increased by28.62%

Number of package files

85

increased by16.44%

Lines of code

1407

increased by20.15%

Number of lines in readme file

10

increased by11.11%

No dependency changes