@hpcc-js/graph 3.6.5 → 3.7.0

package/src/html/annotation.ts

@@ -1,71 +1,71 @@
-import { svg } from "lit-html";
-import { Palette, Utility } from "@hpcc-js/common";
-import { extend } from "./component.ts";
-import { TextBox } from "./textBox.ts";
-
-export interface AnnotationProps {
-    text: string;
-    fontFamily?: string;
-    fontSize?: number;
-    fill?: string;
-    stroke?: string;
-}
-
-export const annotation = ({
-    text,
-    fontFamily = "FontAwesome",
-    fontSize = 8,
-    fill = "gray",
-    stroke = "darkgray"
-}: AnnotationProps) => {
-    const renderChar = fontFamily === "FontAwesome" ? Utility.faChar(text) : text;
-    const textBoxTpl = TextBox({
-        text: {
-            text: renderChar,
-            fill: Palette.textColor(fill),
-            fontFamily,
-            fontSize,
-            dominantBaseline: fontFamily === "FontAwesome" ? "ideographic" : undefined
-        },
-        padding: 3,
-        fill,
-        stroke,
-        cornerRadius: 0
-    });
-    return extend(svg`\
- <g data-click="annotation" data-click-data=${JSON.stringify({ text, fill, fontFamily, fontSize, stroke })}>
-    ${textBoxTpl}
-</g>`, textBoxTpl.extent.width, textBoxTpl.extent.height);
-};
-
-export interface AnnotationsProps {
-    annotations: AnnotationProps[];
-    padding?: number;
-}
-
-export const annotations = ({
-    annotations,
-    padding = 3,
-}: AnnotationsProps) => {
-    let xOffset = 0;
-    const items = annotations.map(annotationProp => {
-        const ann = annotation(annotationProp);
-        const itemSvg = extend(svg`\
-<g transform="translate(${xOffset + ann.extent.width / 2} 0)">
-    ${ann}
-</g>`, ann.extent.width, ann.extent.height);
-        xOffset += ann.extent.width + padding;
-        return itemSvg;
-    });
-    const { width, height } = items.reduce((acc, item) => {
-        return {
-            width: acc.width + item.extent.width,
-            height: Math.max(acc.height, item.extent.height)
-        };
-    }, { width: (items.length - 1) * padding, height: 0 });
-    return extend(svg`\
-<g transform="translate(${-width / 2} 0)">
-    ${items}
-</g>`, width, height);
-};
-
+import { svg } from "lit-html";
+import { Palette, Utility } from "@hpcc-js/common";
+import { extend } from "./component.ts";
+import { TextBox } from "./textBox.ts";
+
+export interface AnnotationProps {
+    text: string;
+    fontFamily?: string;
+    fontSize?: number;
+    fill?: string;
+    stroke?: string;
+}
+
+export const annotation = ({
+    text,
+    fontFamily = "FontAwesome",
+    fontSize = 8,
+    fill = "gray",
+    stroke = "darkgray"
+}: AnnotationProps) => {
+    const renderChar = fontFamily === "FontAwesome" ? Utility.faChar(text) : text;
+    const textBoxTpl = TextBox({
+        text: {
+            text: renderChar,
+            fill: Palette.textColor(fill),
+            fontFamily,
+            fontSize,
+            dominantBaseline: fontFamily === "FontAwesome" ? "ideographic" : undefined
+        },
+        padding: 3,
+        fill,
+        stroke,
+        cornerRadius: 0
+    });
+    return extend(svg`\
+ <g data-click="annotation" data-click-data=${JSON.stringify({ text, fill, fontFamily, fontSize, stroke })}>
+    ${textBoxTpl}
+</g>`, textBoxTpl.extent.width, textBoxTpl.extent.height);
+};
+
+export interface AnnotationsProps {
+    annotations: AnnotationProps[];
+    padding?: number;
+}
+
+export const annotations = ({
+    annotations,
+    padding = 3,
+}: AnnotationsProps) => {
+    let xOffset = 0;
+    const items = annotations.map(annotationProp => {
+        const ann = annotation(annotationProp);
+        const itemSvg = extend(svg`\
+<g transform="translate(${xOffset + ann.extent.width / 2} 0)">
+    ${ann}
+</g>`, ann.extent.width, ann.extent.height);
+        xOffset += ann.extent.width + padding;
+        return itemSvg;
+    });
+    const { width, height } = items.reduce((acc, item) => {
+        return {
+            width: acc.width + item.extent.width,
+            height: Math.max(acc.height, item.extent.height)
+        };
+    }, { width: (items.length - 1) * padding, height: 0 });
+    return extend(svg`\
+<g transform="translate(${-width / 2} 0)">
+    ${items}
+</g>`, width, height);
+};
+

package/src/html/component.ts

@@ -1,18 +1,18 @@
-import type { HTMLTemplateResult, SVGTemplateResult } from "lit-html";
-import type { Pos, Segment, Extent } from "./intersection.ts";
-
-export type TemplateResult = HTMLTemplateResult | SVGTemplateResult;
-export type IntersectionFunc = (pos: Pos, line: Segment) => Pos | null;
-export type TemplateResultEx = TemplateResult & {
-    extent?: Extent;
-    intersection: IntersectionFunc;
-};
-export function extend(result: TemplateResult, width: number, height: number, intersection: IntersectionFunc = (pos: Pos, line: Segment) => null): TemplateResultEx {
-    return {
-        ...result,
-        extent: { width, height },
-        intersection
-    };
-}
-export type Component<T> = (props: T) => TemplateResult;
-
+import type { HTMLTemplateResult, SVGTemplateResult } from "lit-html";
+import type { Pos, Segment, Extent } from "./intersection.ts";
+
+export type TemplateResult = HTMLTemplateResult | SVGTemplateResult;
+export type IntersectionFunc = (pos: Pos, line: Segment) => Pos | null;
+export type TemplateResultEx = TemplateResult & {
+    extent?: Extent;
+    intersection: IntersectionFunc;
+};
+export function extend(result: TemplateResult, width: number, height: number, intersection: IntersectionFunc = (pos: Pos, line: Segment) => null): TemplateResultEx {
+    return {
+        ...result,
+        extent: { width, height },
+        intersection
+    };
+}
+export type Component<T> = (props: T) => TemplateResult;
+

package/src/html/edge.ts

@@ -1,15 +1,15 @@
-import { svg } from "lit-html";
-import type { SubgraphBaseProps, EdgeBaseProps, VertexBaseProps } from "../common/layouts/placeholders.ts";
-import { GraphHtmlT } from "./graphHtmlT.ts";
-
-export interface EdgeProps<V extends VertexBaseProps> extends EdgeBaseProps<V> {
-    graphInstance: GraphHtmlT<SubgraphBaseProps, V, EdgeProps<V>>;
-}
-
-export const edge = ({
-    graphInstance,
-    strokeWidth,
-    path
-}: EdgeProps<VertexBaseProps>) => {
-    return svg`<path d="${path}" marker-start="url(#${graphInstance.id()}_source${graphInstance.sourceMarker()})" marker-end="url(#${graphInstance.id()}_target${graphInstance.targetMarker()})" style="stroke-width:${strokeWidth}px"></path>`;
-};
+import { svg } from "lit-html";
+import type { SubgraphBaseProps, EdgeBaseProps, VertexBaseProps } from "../common/layouts/placeholders.ts";
+import { GraphHtmlT } from "./graphHtmlT.ts";
+
+export interface EdgeProps<V extends VertexBaseProps> extends EdgeBaseProps<V> {
+    graphInstance: GraphHtmlT<SubgraphBaseProps, V, EdgeProps<V>>;
+}
+
+export const edge = ({
+    graphInstance,
+    strokeWidth,
+    path
+}: EdgeProps<VertexBaseProps>) => {
+    return svg`<path d="${path}" marker-start="url(#${graphInstance.id()}_source${graphInstance.sourceMarker()})" marker-end="url(#${graphInstance.id()}_target${graphInstance.targetMarker()})" style="stroke-width:${strokeWidth}px"></path>`;
+};

package/src/html/graphHtml.ts

@@ -1,11 +1,11 @@
-import { GraphHtmlT, SubgraphBaseProps, EdgeBaseProps } from "./graphHtmlT.ts";
-import { vertex, VertexProps } from "./vertex.ts";
-import { edge, EdgeProps } from "./edge.ts";
-
-export class GraphHtml extends GraphHtmlT<SubgraphBaseProps, VertexProps, EdgeProps<VertexProps>> {
-    constructor() {
-        super(undefined, vertex, edge);
-    }
-
-}
-GraphHtml.prototype._class += " graph_GraphHtml";
+import { GraphHtmlT, SubgraphBaseProps, EdgeBaseProps } from "./graphHtmlT.ts";
+import { vertex, VertexProps } from "./vertex.ts";
+import { edge, EdgeProps } from "./edge.ts";
+
+export class GraphHtml extends GraphHtmlT<SubgraphBaseProps, VertexProps, EdgeProps<VertexProps>> {
+    constructor() {
+        super(undefined, vertex, edge);
+    }
+
+}
+GraphHtml.prototype._class += " graph_GraphHtml";

package/src/html/graphHtmlT.ts

@@ -1,117 +1,117 @@
-import { html, svg, render } from "lit-html";
-import type { BaseProps, EdgeBaseProps, SubgraphBaseProps, VertexBaseProps } from "../common/graphT.ts";
-import { GraphT, RendererT } from "../common/graphT.ts";
-import type { Component } from "./component.ts";
-import { TextBox } from "./textBox.ts";
-import { icon } from "./icon.ts";
-
-export { html, svg, EdgeBaseProps, SubgraphBaseProps, VertexBaseProps };
-
-export function adapter<T extends BaseProps>(component: Component<T>): RendererT<T> {
-    return (props: T, element: SVGGElement) => {
-        const componentTpl = component(props);
-        render(componentTpl, element as any);
-        return componentTpl;
-    };
-}
-
-const defaultSubgraphRenderer = ({
-    text = "",
-}: SubgraphBaseProps) => {
-    return svg`<text font-family="monospace" font-size="10px" text-anchor="middle" dominant-baseline="middle" fill="black">${text}</text>`;
-};
-
-const defaultVertexRenderer = ({
-    text
-}: VertexBaseProps) => {
-
-    return svg`\
-    ${icon({ imageChar: "" })}
-    ${TextBox({ text: { text } })}
-`;
-};
-
-const defaultEdgeRenderer = ({
-    strokeWidth,
-    path
-}: EdgeBaseProps<VertexBaseProps>) => {
-    return svg`<path d="${path}" style="stroke-width:${strokeWidth}px"></path>`;
-};
-
-export class GraphHtmlT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E extends EdgeBaseProps<V>> extends GraphT<SG, V, E> {
-
-    constructor(subgraphRenderer: Component<SG> = defaultSubgraphRenderer, vertexRenderer: Component<V> = defaultVertexRenderer, edgeRenderer: Component<E> = defaultEdgeRenderer) {
-        super(adapter(subgraphRenderer), adapter<V>(vertexRenderer), adapter(edgeRenderer));
-    }
-
-    enterMarkers(clearFirst: boolean = false) {
-        if (clearFirst) {
-            this._svgDefs.select("#" + this._id + "_sourceDot").remove();
-            this._svgDefs.select("#" + this._id + "_targetDot").remove();
-            this._svgDefs.select("#" + this._id + "_targetArrow").remove();
-        }
-        this._svgDefs.append("marker")
-            .attr("class", "marker")
-            .attr("id", this._id + "_sourceDot")
-            .attr("refX", 1)
-            .attr("refY", 3)
-            .attr("markerWidth", 6)
-            .attr("markerHeight", 6)
-            .attr("markerUnits", "strokeWidth")
-            .attr("orient", "auto")
-            .append("circle")
-            .attr("cx", 3)
-            .attr("cy", 3)
-            .attr("r", 1.5)
-            .attr("fill", "context-stroke")
-            .attr("stroke", "context-stroke")
-            ;
-        this._svgDefs.append("marker")
-            .attr("class", "marker")
-            .attr("id", this._id + "_targetDot")
-            .attr("refX", 5)
-            .attr("refY", 3)
-            .attr("markerWidth", 6)
-            .attr("markerHeight", 6)
-            .attr("markerUnits", "strokeWidth")
-            .attr("orient", "auto")
-            .append("circle")
-            .attr("cx", 3)
-            .attr("cy", 3)
-            .attr("r", 1.5)
-            .attr("fill", "context-stroke")
-            .attr("stroke", "context-stroke")
-            ;
-        this._svgDefs.append("marker")
-            .attr("class", "marker")
-            .attr("id", this._id + "_targetArrow")
-            .attr("viewBox", "0 0 10 10")
-            .attr("refX", 10)
-            .attr("refY", 5)
-            .attr("markerWidth", 5)
-            .attr("markerHeight", 5)
-            .attr("markerUnits", "strokeWidth")
-            .attr("orient", "auto")
-            .append("polyline")
-            .attr("points", "0,0 10,5 0,10 0,5")
-            .attr("fill", "context-stroke")
-            .attr("stroke", "context-stroke")
-            ;
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        this.enterMarkers();
-    }
-}
-GraphHtmlT.prototype._class += " graph_GraphHtmlT";
-
-export interface GraphHtmlT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E extends EdgeBaseProps<V>> extends GraphT<SG, V, E> {
-    sourceMarker(): "Dot" | "None";
-    sourceMarker(_: "Dot" | "None"): this;
-    targetMarker(): "Arrow" | "Dot" | "None";
-    targetMarker(_: "Arrow" | "Dot" | "None"): this;
-}
-
-GraphHtmlT.prototype.publish("sourceMarker", "Dot", "set", "Target Marker", ["Dot", "None"]);
-GraphHtmlT.prototype.publish("targetMarker", "Arrow", "set", "Target Marker", ["Arrow", "Dot", "None"]);
+import { html, svg, render } from "lit-html";
+import type { BaseProps, EdgeBaseProps, SubgraphBaseProps, VertexBaseProps } from "../common/graphT.ts";
+import { GraphT, RendererT } from "../common/graphT.ts";
+import type { Component } from "./component.ts";
+import { TextBox } from "./textBox.ts";
+import { icon } from "./icon.ts";
+
+export { html, svg, EdgeBaseProps, SubgraphBaseProps, VertexBaseProps };
+
+export function adapter<T extends BaseProps>(component: Component<T>): RendererT<T> {
+    return (props: T, element: SVGGElement) => {
+        const componentTpl = component(props);
+        render(componentTpl, element as any);
+        return componentTpl;
+    };
+}
+
+const defaultSubgraphRenderer = ({
+    text = "",
+}: SubgraphBaseProps) => {
+    return svg`<text font-family="monospace" font-size="10px" text-anchor="middle" dominant-baseline="middle" fill="black">${text}</text>`;
+};
+
+const defaultVertexRenderer = ({
+    text
+}: VertexBaseProps) => {
+
+    return svg`\
+    ${icon({ imageChar: "" })}
+    ${TextBox({ text: { text } })}
+`;
+};
+
+const defaultEdgeRenderer = ({
+    strokeWidth,
+    path
+}: EdgeBaseProps<VertexBaseProps>) => {
+    return svg`<path d="${path}" style="stroke-width:${strokeWidth}px"></path>`;
+};
+
+export class GraphHtmlT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E extends EdgeBaseProps<V>> extends GraphT<SG, V, E> {
+
+    constructor(subgraphRenderer: Component<SG> = defaultSubgraphRenderer, vertexRenderer: Component<V> = defaultVertexRenderer, edgeRenderer: Component<E> = defaultEdgeRenderer) {
+        super(adapter(subgraphRenderer), adapter<V>(vertexRenderer), adapter(edgeRenderer));
+    }
+
+    enterMarkers(clearFirst: boolean = false) {
+        if (clearFirst) {
+            this._svgDefs.select("#" + this._id + "_sourceDot").remove();
+            this._svgDefs.select("#" + this._id + "_targetDot").remove();
+            this._svgDefs.select("#" + this._id + "_targetArrow").remove();
+        }
+        this._svgDefs.append("marker")
+            .attr("class", "marker")
+            .attr("id", this._id + "_sourceDot")
+            .attr("refX", 1)
+            .attr("refY", 3)
+            .attr("markerWidth", 6)
+            .attr("markerHeight", 6)
+            .attr("markerUnits", "strokeWidth")
+            .attr("orient", "auto")
+            .append("circle")
+            .attr("cx", 3)
+            .attr("cy", 3)
+            .attr("r", 1.5)
+            .attr("fill", "context-stroke")
+            .attr("stroke", "context-stroke")
+            ;
+        this._svgDefs.append("marker")
+            .attr("class", "marker")
+            .attr("id", this._id + "_targetDot")
+            .attr("refX", 5)
+            .attr("refY", 3)
+            .attr("markerWidth", 6)
+            .attr("markerHeight", 6)
+            .attr("markerUnits", "strokeWidth")
+            .attr("orient", "auto")
+            .append("circle")
+            .attr("cx", 3)
+            .attr("cy", 3)
+            .attr("r", 1.5)
+            .attr("fill", "context-stroke")
+            .attr("stroke", "context-stroke")
+            ;
+        this._svgDefs.append("marker")
+            .attr("class", "marker")
+            .attr("id", this._id + "_targetArrow")
+            .attr("viewBox", "0 0 10 10")
+            .attr("refX", 10)
+            .attr("refY", 5)
+            .attr("markerWidth", 5)
+            .attr("markerHeight", 5)
+            .attr("markerUnits", "strokeWidth")
+            .attr("orient", "auto")
+            .append("polyline")
+            .attr("points", "0,0 10,5 0,10 0,5")
+            .attr("fill", "context-stroke")
+            .attr("stroke", "context-stroke")
+            ;
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        this.enterMarkers();
+    }
+}
+GraphHtmlT.prototype._class += " graph_GraphHtmlT";
+
+export interface GraphHtmlT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E extends EdgeBaseProps<V>> extends GraphT<SG, V, E> {
+    sourceMarker(): "Dot" | "None";
+    sourceMarker(_: "Dot" | "None"): this;
+    targetMarker(): "Arrow" | "Dot" | "None";
+    targetMarker(_: "Arrow" | "Dot" | "None"): this;
+}
+
+GraphHtmlT.prototype.publish("sourceMarker", "Dot", "set", "Target Marker", ["Dot", "None"]);
+GraphHtmlT.prototype.publish("targetMarker", "Arrow", "set", "Target Marker", ["Arrow", "Dot", "None"]);

package/src/html/icon.ts

@@ -1,64 +1,64 @@
-import { svg } from "lit-html";
-import { Palette } from "@hpcc-js/common";
-import { Image } from "./image.ts";
-import { ImageChar } from "./imageChar.ts";
-import { shape as litShape } from "./shape.ts";
-import { extend } from "./component.ts";
-
-export interface IconProps {
-    shape?: "circle" | "square" | "rectangle";
-    width?: number;
-    height?: number;
-    padding?: number;
-    fill?: string;
-    stroke?: string;
-    strokeWidth?: number;
-    imageUrl?: string;
-    imageFontFamily?: string;
-    imageChar?: string;
-    imageCharFill?: string;
-    cornerRadius?: number;
-}
-
-export function icon({
-    shape = "circle",
-    width,
-    height = 32,
-    fill = "transparent",
-    stroke = fill !== "transparent" ? "black" : undefined,
-    strokeWidth = stroke === undefined ? 0 : 1,
-    imageUrl = "",
-    imageFontFamily = "FontAwesome",
-    imageChar = "",
-    imageCharFill = Palette.textColor(fill),
-    padding = height / 5,
-    cornerRadius,
-}: IconProps) {
-    const shapeTpl = litShape({
-        shape,
-        width,
-        height,
-        fill,
-        stroke,
-        strokeWidth,
-        cornerRadius
-    });
-    const imageTpl = imageUrl ?
-        Image({
-            href: imageUrl,
-            height: height - padding * 2
-        }) :
-        ImageChar({
-            text: imageChar,
-            fill: imageCharFill,
-            fontFamily: imageFontFamily,
-            fontSize: height - padding * 2,
-        });
-
-    return extend(svg`\
-<g>
-${shapeTpl}
-${imageTpl}
-</g>`, shapeTpl.extent.width, shapeTpl.extent.height, shapeTpl.intersection);
-};
-
+import { svg } from "lit-html";
+import { Palette } from "@hpcc-js/common";
+import { Image } from "./image.ts";
+import { ImageChar } from "./imageChar.ts";
+import { shape as litShape } from "./shape.ts";
+import { extend } from "./component.ts";
+
+export interface IconProps {
+    shape?: "circle" | "square" | "rectangle";
+    width?: number;
+    height?: number;
+    padding?: number;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    imageUrl?: string;
+    imageFontFamily?: string;
+    imageChar?: string;
+    imageCharFill?: string;
+    cornerRadius?: number;
+}
+
+export function icon({
+    shape = "circle",
+    width,
+    height = 32,
+    fill = "transparent",
+    stroke = fill !== "transparent" ? "black" : undefined,
+    strokeWidth = stroke === undefined ? 0 : 1,
+    imageUrl = "",
+    imageFontFamily = "FontAwesome",
+    imageChar = "",
+    imageCharFill = Palette.textColor(fill),
+    padding = height / 5,
+    cornerRadius,
+}: IconProps) {
+    const shapeTpl = litShape({
+        shape,
+        width,
+        height,
+        fill,
+        stroke,
+        strokeWidth,
+        cornerRadius
+    });
+    const imageTpl = imageUrl ?
+        Image({
+            href: imageUrl,
+            height: height - padding * 2
+        }) :
+        ImageChar({
+            text: imageChar,
+            fill: imageCharFill,
+            fontFamily: imageFontFamily,
+            fontSize: height - padding * 2,
+        });
+
+    return extend(svg`\
+<g>
+${shapeTpl}
+${imageTpl}
+</g>`, shapeTpl.extent.width, shapeTpl.extent.height, shapeTpl.intersection);
+};
+

package/src/html/image.ts

@@ -1,26 +1,26 @@
-import { svg } from "lit-html";
-import { extend } from "./component.ts";
-
-export interface ImageProps {
-    href: string;
-    x?: number;
-    y?: number;
-    height?: number;
-    yOffset?: number;
-}
-
-export const Image = ({
-    href,
-    x = 0,
-    y = 0,
-    height = 12
-}: ImageProps) => {
-    return extend(svg`\
-<image
-    xlink:href=${href}
-    x=${x - height / 2}
-    y=${y - height / 2}
-    width=${height}
-    height=${height}
-></image>`, height, height);
-};
+import { svg } from "lit-html";
+import { extend } from "./component.ts";
+
+export interface ImageProps {
+    href: string;
+    x?: number;
+    y?: number;
+    height?: number;
+    yOffset?: number;
+}
+
+export const Image = ({
+    href,
+    x = 0,
+    y = 0,
+    height = 12
+}: ImageProps) => {
+    return extend(svg`\
+<image
+    xlink:href=${href}
+    x=${x - height / 2}
+    y=${y - height / 2}
+    width=${height}
+    height=${height}
+></image>`, height, height);
+};