@hpcc-js/graph 3.2.1 → 3.3.1

package/src/html/component.ts

@@ -0,0 +1,14 @@
+import type { HTMLTemplateResult, SVGTemplateResult } from "lit-html";
+
+export type TemplateResult = HTMLTemplateResult | SVGTemplateResult;
+export type TemplateResultEx = TemplateResult & {
+    extent?: { width: number, height: number };
+};
+export function extend(result: TemplateResult, width: number, height: number): TemplateResultEx {
+    return {
+        ...result,
+        extent: { width, height }
+    };
+}
+export type Component<T> = (props: T) => TemplateResult;
+

package/src/html/graphHtml.ts

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

package/src/html/graphHtmlT.ts

@@ -0,0 +1,49 @@
+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,
+    markerStart,
+    markerEnd,
+}: EdgeBaseProps<VertexBaseProps>) => {
+    return svg`<path d="${path}" marker-start="${markerStart}" marker-end="${markerEnd}" 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));
+    }
+}
+GraphHtmlT.prototype._class += " graph_GraphHtmlT";

package/src/html/icon.ts

@@ -0,0 +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);
+};
+

package/src/html/image.ts

@@ -0,0 +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);
+};

package/src/html/imageChar.ts

@@ -0,0 +1,18 @@
+import { Utility } from "@hpcc-js/common";
+import { TextLine, TextProps } from "./text.ts";
+
+export const ImageChar = ({
+    text = "",
+    fill,
+    fontFamily = "FontAwesome",
+    fontSize = 12
+}: TextProps) => {
+    const renderChar = fontFamily === "FontAwesome" ? Utility.faChar(text) : text;
+    return TextLine({
+        text: renderChar,
+        fill,
+        fontFamily,
+        fontSize,
+        dominantBaseline: fontFamily === "FontAwesome" ? "ideographic" : undefined
+    });
+};

package/src/html/index.ts

@@ -0,0 +1,8 @@
+export * from "./annotation.ts";
+export * from "./graphHtml.ts";
+export * from "./icon.ts";
+export * from "./image.ts";
+export * from "./imageChar.ts";
+export * from "./shape.ts";
+export * from "./text.ts";
+export * from "./vertex.ts";

package/src/html/shape.ts

@@ -0,0 +1,136 @@
+import { svg } from "lit-html";
+import { extend } from "./component.ts";
+
+export const DEFAULT_SHAPE_SIZE = 32;
+
+interface BaseProps {
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
+}
+
+export interface CircleProps extends BaseProps {
+    diameter?: number;
+}
+export const circle = ({
+    diameter = DEFAULT_SHAPE_SIZE,
+    fill = "whiteSmoke",
+    stroke = fill,
+    strokeWidth = 1,
+    shapeRendering = "auto"
+}: CircleProps) => {
+    return extend(svg`\
+<circle
+    r=${diameter / 2}
+    fill=${fill}
+    stroke=${stroke}
+    stroke-width=${strokeWidth}
+    shape-rendering=${shapeRendering}
+/>`, diameter, diameter);
+};
+
+export interface RectangleProps extends BaseProps {
+    width: number;
+    height: number;
+    cornerRadius?: number;
+}
+
+export const rectangle = ({
+    width = DEFAULT_SHAPE_SIZE,
+    height = DEFAULT_SHAPE_SIZE,
+    cornerRadius = 4,
+    fill = "whiteSmoke",
+    stroke = fill,
+    strokeWidth = 1,
+    shapeRendering = "crispEdges"
+}: RectangleProps) => {
+    return extend(svg`\
+<rect
+    x=${-width / 2}
+    y=${-height / 2}
+    rx=${cornerRadius}
+    ry=${cornerRadius}
+    width=${width}
+    height=${height}
+    fill=${fill}
+    stroke=${stroke}
+    stroke-width=${strokeWidth}
+    shape-rendering=${shapeRendering}
+/>`, width, height);
+};
+
+export interface SquareProps extends BaseProps {
+    width?: number;
+    cornerRadius?: number;
+}
+
+export const square = ({
+    width = DEFAULT_SHAPE_SIZE,
+    cornerRadius,
+    fill,
+    stroke,
+    strokeWidth,
+    shapeRendering
+}: SquareProps) => {
+    return rectangle({
+        width,
+        height: width,
+        cornerRadius,
+        fill,
+        stroke,
+        strokeWidth,
+        shapeRendering
+    });
+};
+
+export interface ShapeProps extends BaseProps {
+    shape?: "circle" | "square" | "rectangle";
+    diameter?: number;
+    width?: number;
+    height?: number;
+    cornerRadius?: number;
+}
+
+export const shape = ({
+    shape = "circle",
+    diameter,
+    width,
+    height,
+    fill,
+    stroke,
+    strokeWidth = 1,
+    shapeRendering = "auto",
+    cornerRadius
+}: ShapeProps) => {
+    switch (shape) {
+        case "square":
+            return square({
+                width: width ?? height ?? diameter ?? DEFAULT_SHAPE_SIZE,
+                fill,
+                stroke,
+                strokeWidth,
+                shapeRendering,
+                cornerRadius
+            });
+        case "rectangle":
+            return rectangle({
+                width: width ?? height ?? diameter ?? DEFAULT_SHAPE_SIZE,
+                height: height ?? width ?? diameter ?? DEFAULT_SHAPE_SIZE,
+                fill,
+                stroke,
+                strokeWidth,
+                shapeRendering,
+                cornerRadius
+            });
+        case "circle":
+        default:
+            return circle({
+                diameter: diameter ?? width ?? height ?? DEFAULT_SHAPE_SIZE,
+                fill,
+                stroke,
+                strokeWidth,
+                shapeRendering
+            });
+    }
+};

package/src/html/text.ts

@@ -0,0 +1,59 @@
+import { svg } from "lit-html";
+import { Utility } from "@hpcc-js/common";
+import { extend } from "./component.ts";
+
+export interface TextProps {
+    text: string;
+    anchor?: "left" | "middle" | "end";
+    fill?: string;
+    fontFamily?: string;
+    fontSize?: number;
+    dominantBaseline?: string;
+}
+
+export const TextLine = ({
+    text,
+    anchor = "middle",
+    fill = "black",
+    fontFamily = "Verdana",
+    fontSize = 12,
+    dominantBaseline = "middle",
+}: TextProps) => {
+    const { width, height } = Utility.textSize(text, fontFamily, fontSize);
+    return extend(svg`\
+<text y=${height / 2} font-family=${fontFamily} font-size=${`${fontSize}px`} text-anchor=${anchor} fill=${fill} dominant-baseline=${dominantBaseline}>
+    ${text}
+</text>`, width, height);
+};
+
+export const Text = ({
+    text,
+    anchor = "middle",
+    fill = "black",
+    fontFamily = "Verdana",
+    fontSize = 12,
+}: TextProps) => {
+    const parts = text.split("\n").map(line => TextLine({ text: line, anchor, fill, fontFamily, fontSize }));
+    const { width, height } = parts.reduce((acc, part) => {
+        return {
+            width: Math.max(acc.width, part.extent.width),
+            height: acc.height + part.extent.height
+        };
+    }, { width: 0, height: 0 });
+
+    let xOffset = 0;
+    if (anchor === "left") {
+        xOffset = -width / 2;
+    } else if (anchor === "end") {
+        xOffset = width / 2;
+    }
+    const lineHeight = height / parts.length;
+    const TextLines = parts.map((p, i) => {
+        return svg`\
+<g key=${`key-${i}`} transform="translate(${xOffset} ${-height / 2 + i * lineHeight})">
+    ${p}
+</g>`;
+    });
+
+    return extend(svg`${TextLines}`, width, height);
+};

package/src/html/textBox.ts

@@ -0,0 +1,41 @@
+import { svg } from "lit-html";
+import { extend } from "./component.ts";
+import { rectangle } from "./shape.ts";
+import { Text, TextProps } from "./text.ts";
+
+export interface TextBoxProps {
+    text: TextProps;
+
+    padding?: number;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    cornerRadius?: number;
+    yOffset?: number;
+}
+
+export const TextBox = ({
+    text,
+
+    padding = 4,
+    fill = "whitesmoke",
+    stroke = "lightgray",
+    strokeWidth = 1,
+    cornerRadius,
+}: TextBoxProps) => {
+    const textTpl = Text(text);
+    const { width, height } = textTpl.extent;
+    const rectTpl = rectangle({
+        width: width + padding * 2,
+        height: height + padding * 2,
+        fill,
+        stroke,
+        strokeWidth,
+        cornerRadius
+    });
+
+    return extend(svg`\
+${rectTpl}
+${textTpl}`, rectTpl.extent.width, rectTpl.extent.height);
+};
+

package/src/html/vertex.ts

@@ -0,0 +1,65 @@
+import { svg } from "lit-html";
+import type { VertexBaseProps } from "../common/layouts/placeholders.ts";
+import { icon as litIcon, IconProps } from "./icon.ts";
+import { TextBox, TextBoxProps } from "./textBox.ts";
+import { annotations, AnnotationProps } from "./annotation.ts";
+import { Component, extend } from "./component.ts";
+
+export interface VertexProps extends VertexBaseProps {
+    icon?: IconProps;
+    iconOffset?: number;
+    iconAnnotations?: AnnotationProps[];
+    iconAnnotationsOffset?: number;
+    textBox?: TextBoxProps;
+    textBoxAnnotationsE?: AnnotationProps[];
+    textBoxAnnotationsSE?: AnnotationProps[];
+    textBoxAnnotationsS?: AnnotationProps[];
+    textBoxAnnotationsOffset?: number
+}
+
+export const vertex: Component<VertexProps> = ({
+    id,
+    text,
+    textBox,
+    textBoxAnnotationsE = [],
+    textBoxAnnotationsSE = [],
+    textBoxAnnotationsS = [],
+    textBoxAnnotationsOffset = 4,
+    icon = {},
+    iconOffset = 6,
+    iconAnnotations = [],
+    iconAnnotationsOffset = 0,
+}: VertexProps) => {
+    const iconTpl = litIcon(icon);
+    const iconAnnotationsTpl = annotations({
+        annotations: iconAnnotations
+    });
+    const textBoxTpl = TextBox({ text: { text: text, ...textBox?.text } });
+    const textBoxAnnotationsETpl = annotations({ annotations: textBoxAnnotationsE });
+    const textBoxAnnotationsSETpl = annotations({ annotations: textBoxAnnotationsSE });
+    const textBoxAnnotationsSTpl = annotations({ annotations: textBoxAnnotationsS });
+
+    const yIconOffset = -iconOffset - (textBoxTpl.extent.height + iconTpl.extent.height) / 2;
+
+    const radius = iconAnnotationsOffset + iconTpl.extent.width / 2;
+    const xIconAnnotationOffset = radius * Math.cos(45 * (Math.PI / 180));
+    const yIconAnnotationOffset = radius * Math.sin(45 * (Math.PI / 180));
+    return extend(svg`\
+${textBoxTpl}
+<g transform="translate(${textBoxTpl.extent.width / 2 + textBoxAnnotationsOffset + textBoxAnnotationsETpl.extent.width / 2})">
+    ${textBoxAnnotationsETpl}
+</g>
+<g transform="translate(${textBoxTpl.extent.width / 2 + textBoxAnnotationsOffset + textBoxAnnotationsETpl.extent.width / 2} ${textBoxTpl.extent.height / 2 + textBoxAnnotationsOffset + textBoxAnnotationsSETpl.extent.height / 2})">
+    ${textBoxAnnotationsSETpl}
+</g>
+<g transform="translate(0 ${textBoxTpl.extent.height / 2 + textBoxAnnotationsOffset + textBoxAnnotationsSTpl.extent.height / 2})">
+    ${textBoxAnnotationsSTpl}
+</g>
+<g data-click="icon" data-click-data=${JSON.stringify(icon)} transform="translate(0 ${yIconOffset})">
+    ${iconTpl}
+</g>
+<g transform="translate(${iconAnnotationsTpl.extent.width / 2 + xIconAnnotationOffset} ${yIconOffset - yIconAnnotationOffset})">
+    ${iconAnnotationsTpl}
+</g>
+`, textBoxTpl.extent.width, textBoxTpl.extent.height);
+};

package/src/index.ts

@@ -5,4 +5,6 @@ export * from "./Graph.ts";
 export * from "./Sankey.ts";
 export * from "./Subgraph.ts";
 export * from "./Vertex.ts";
-export * from "./graph2/index.ts";
+export * from "./common/index.ts";
+export * from "./html/index.ts";
+export * from "./react/index.ts";

package/src/{graph2 → react}/dataGraph.ts

@@ -1,8 +1,8 @@
 import { PropertyExt, Widget } from "@hpcc-js/common";
 import { Vertex3, CentroidVertex3, Vertex3Props, EdgeProps, SubgraphProps } from "@hpcc-js/react";
 import { compare2 } from "@hpcc-js/util";
-import { Graph2 } from "./graph.ts";
-import { HierarchyBase } from "./layouts/placeholders.ts";
+import { GraphReact } from "./graphReact.ts";
+import { HierarchyBase } from "../common/layouts/placeholders.ts";
 
 //  Backward compatibility layer  ---
 export type IVertex3 = Vertex3Props;
@@ -20,7 +20,7 @@ export class AnnotationColumn extends PropertyExt {
     owner(_: DataGraph): this;
     owner(_?: DataGraph): DataGraph | this {
         if (!arguments.length) return this._owner;
-        this._owner = _;
+        this._owner = _!;
         return this;
     }
 
@@ -40,7 +40,7 @@ export interface AnnotationColumn {
 AnnotationColumn.prototype.publish("columnID", "", "set", "Annotation column (boolean)", function (this: AnnotationColumn) { return this._owner.vertexColumns(); });
 AnnotationColumn.prototype.publish("annotationID", "", "string", "Annotation ID");
 
-export class DataGraph extends Graph2 {
+export class DataGraph extends GraphReact {
 
     constructor() {
         super();
@@ -311,13 +311,13 @@ export interface DataGraph {
     hierarchyChildIDColumn(_: string): this;
 }
 
-DataGraph.prototype.publish("subgraphColumns", [], "any", "Subgraph Columns", null, { internal: true });
-DataGraph.prototype.publish("subgraphs", [], "any", "Subgraphs", null, { internal: true });
+DataGraph.prototype.publish("subgraphColumns", [], "any", "Subgraph Columns", undefined, { internal: true });
+DataGraph.prototype.publish("subgraphs", [], "any", "Subgraphs", undefined, { internal: true });
 DataGraph.prototype.publish("subgraphIDColumn", "", "string", "Subgraph ID column");
 DataGraph.prototype.publish("subgraphLabelColumn", "", "string", "Subgraph Label column");
 
-DataGraph.prototype.publish("vertexColumns", [], "any", "Vertex Columns", null, { internal: true });
-DataGraph.prototype.publish("vertices", [], "any", "Vertices (Nodes)", null, { internal: true });
+DataGraph.prototype.publish("vertexColumns", [], "any", "Vertex Columns", undefined, { internal: true });
+DataGraph.prototype.publish("vertices", [], "any", "Vertices (Nodes)", undefined, { internal: true });
 DataGraph.prototype.publish("vertexCategoryColumn", "", "set", "Vertex Category ID column", function (this: DataGraph) { return this.vertexColumns(); }, { optional: true });
 DataGraph.prototype.publish("vertexIDColumn", "", "set", "Vertex ID column", function (this: DataGraph) { return this.vertexColumns(); }, { optional: true });
 DataGraph.prototype.publish("vertexLabelColumn", "", "set", "Vertex label column", function (this: DataGraph) { return this.vertexColumns(); }, { optional: true });
@@ -327,11 +327,11 @@ DataGraph.prototype.publish("vertexImageUrlColumn", "", "set", "Vertex image url
 DataGraph.prototype.publish("vertexFAChar", "?", "string", "Vertex default FAChar");
 DataGraph.prototype.publish("vertexFACharColumn", "", "set", "Vertex FAChar column", function (this: DataGraph) { return this.vertexColumns(); }, { optional: true });
 DataGraph.prototype.publish("vertexTooltipColumn", "", "set", "Vertex tooltip column", function (this: DataGraph) { return this.vertexColumns(); }, { optional: true });
-DataGraph.prototype.publish("vertexAnnotationColumns", [], "propertyArray", "Annotations", null, { autoExpand: AnnotationColumn });
+DataGraph.prototype.publish("vertexAnnotationColumns", [], "propertyArray", "Annotations", undefined, { autoExpand: AnnotationColumn });
 DataGraph.prototype.publish("vertexExpansionFACharColumn", "", "set", "Vertex expansion FAChar column", function (this: DataGraph) { return this.vertexColumns(); }, { optional: true });
 
-DataGraph.prototype.publish("edgeColumns", [], "any", "Edge columns", null, { internal: true });
-DataGraph.prototype.publish("edges", [], "any", "Edges (Edges)", null, { internal: true });
+DataGraph.prototype.publish("edgeColumns", [], "any", "Edge columns", undefined, { internal: true });
+DataGraph.prototype.publish("edges", [], "any", "Edges (Edges)", undefined, { internal: true });
 DataGraph.prototype.publish("edgeIDColumn", "", "set", "Edge ID column", function (this: DataGraph) { return this.edgeColumns(); }, { optional: true });
 DataGraph.prototype.publish("edgeLabelColumn", "", "set", "Edge label column", function (this: DataGraph) { return this.edgeColumns(); }, { optional: true });
 DataGraph.prototype.publish("edgeSourceColumn", "", "set", "Edge source ID column", function (this: DataGraph) { return this.edgeColumns(); }, { optional: true });