@hpcc-js/graph 3.2.0 → 3.3.0

package/src/{graph2/graph.ts → react/graphReact.ts}

@@ -1,6 +1,7 @@
-import { React, Subgraph, SubgraphProps, Vertex, VertexProps, Edge, EdgeProps } from "@hpcc-js/react";
+import { IconEx, Icons, render } from "@hpcc-js/react";
+import { React, Subgraph, SubgraphProps, Vertex, VertexProps, Edge, EdgeProps } from "@hpcc-js/react";
 import { GraphReactT } from "./graphReactT.ts";
-import { GraphDataProps, HierarchyBase } from "./graphT.ts";
+import { GraphDataProps, HierarchyBase } from "../common/graphT.ts";
 
 //  Backward compatibility layer  ---
 export type ISubgraph = SubgraphProps;
@@ -9,7 +10,7 @@ export type IEdge = EdgeProps;
 export type IHierarchy = HierarchyBase<ISubgraph, IVertex>;
 export type IGraphData2 = GraphDataProps<ISubgraph, IVertex, IEdge>;
 
-export class Graph2 extends GraphReactT<ISubgraph, IVertex, IEdge> {
+export class GraphReact extends GraphReactT<ISubgraph, IVertex, IEdge> {
 
     constructor() {
         super(Subgraph, Vertex, Edge);
@@ -20,6 +21,24 @@ export class Graph2 extends GraphReactT<ISubgraph, IVertex, IEdge> {
         });
     }
 
+    protected _categories: IconEx[] = [];
+    categories(): IconEx[];
+    categories(_: IconEx[]): this;
+    categories(_?: IconEx[]): IconEx[] | this {
+        if (_ === void 0) return this._categories;
+        this._categories = _;
+        return this;
+    }
+
+    protected _annotations: IconEx[] = [];
+    annotations(): IconEx[];
+    annotations(_: IconEx[]): this;
+    annotations(_?: IconEx[]): IconEx[] | this {
+        if (_ === void 0) return this._annotations;
+        this._annotations = _;
+        return this;
+    }
+
     calcProps(_props: VertexProps): VertexProps {
         const props = super.calcProps(_props);
         if (!props.icon) props.icon = {};
@@ -71,14 +90,37 @@ export class Graph2 extends GraphReactT<ISubgraph, IVertex, IEdge> {
         super.enter(domNode, element);
     }
 
+    updateCategories() {
+        render(Icons, {
+            icons: this._categories.map((c): IconEx => ({
+                ...c,
+                id: this.categoryID(c.id),
+                fill: c.fill || "transparent",
+                imageCharFill: c.imageCharFill || this._catPalette(c.id)
+            }))
+        }, this._svgDefsCat.node());
+    }
+
+    updateAnnotations() {
+        render(Icons, {
+            icons: this._annotations.map((c): IconEx => ({
+                ...c,
+                id: this.categoryID(c.id, "ann"),
+                shape: c.shape || "square",
+                height: c.height || 12,
+                fill: c.fill || this._catPalette(c.id)
+            }))
+        }, this._svgDefsAnn.node());
+    }
+
     update(domNode, element) {
         super.update(domNode, element);
         this._centroidFilter.update(this.centroidColor());
     }
 }
-Graph2.prototype._class += " graph_Graph2";
+GraphReact.prototype._class += " graph_GraphReact";
 
-export interface Graph2 {
+export interface GraphReact {
     vertexTextHeight(): number;
     vertexTextHeight(_: number): this;
     vertexTextPadding(): number;
@@ -114,21 +156,22 @@ export interface Graph2 {
     centroidLabelFontFamily(_: string): this;
 }
 
-Graph2.prototype.publish("vertexTextHeight", 10, "number", "Vertex Text Height");
-Graph2.prototype.publish("vertexTextPadding", 4, "number", "Vertex Text Padding");
-Graph2.prototype.publish("vertexIconHeight", 50, "number", "Vertex Icon Height");
-Graph2.prototype.publish("vertexIconPadding", 10, "number", "Vertex Icon Padding");
-Graph2.prototype.publish("vertexIconStrokeWidth", 0, "number", "Vertex Icon Stroke Width");
-Graph2.prototype.publish("vertexIconFontFamily", "FontAwesome", "string", "Vertex Icon Font Family");
-Graph2.prototype.publish("vertexLabelFontFamily", "Verdana", "string", "Vertex Label Font Family");
-
-Graph2.prototype.publish("centroidColor", "#00A000", "html-color", "Centroid Glow Color");
-Graph2.prototype.publish("centroidScale", 1, "number", "Centroid Scale");
-Graph2.prototype.publish("centroidTextHeight", 12, "number", "Centroid Text Height");
-Graph2.prototype.publish("centroidTextPadding", 4, "number", "Centroid Text Padding");
-Graph2.prototype.publish("centroidIconHeight", 50, "number", "Centroid Icon Height");
-Graph2.prototype.publish("centroidIconPadding", 10, "number", "Centroid Icon Padding");
-Graph2.prototype.publish("centroidIconStrokeWidth", 4, "number", "Centroid Icon Stroke Width");
-Graph2.prototype.publish("centroidIconFontFamily", "FontAwesome", "string", "Centroid Icon Font Family");
-Graph2.prototype.publish("centroidLabelFontFamily", "Verdana", "string", "Centroid Label Font Family");
+GraphReact.prototype.publish("vertexTextHeight", 10, "number", "Vertex Text Height");
+GraphReact.prototype.publish("vertexTextPadding", 4, "number", "Vertex Text Padding");
+GraphReact.prototype.publish("vertexIconHeight", 50, "number", "Vertex Icon Height");
+GraphReact.prototype.publish("vertexIconPadding", 10, "number", "Vertex Icon Padding");
+GraphReact.prototype.publish("vertexIconStrokeWidth", 0, "number", "Vertex Icon Stroke Width");
+GraphReact.prototype.publish("vertexIconFontFamily", "FontAwesome", "string", "Vertex Icon Font Family");
+GraphReact.prototype.publish("vertexLabelFontFamily", "Verdana", "string", "Vertex Label Font Family");
+
+GraphReact.prototype.publish("centroidColor", "#00A000", "html-color", "Centroid Glow Color");
+GraphReact.prototype.publish("centroidScale", 1, "number", "Centroid Scale");
+GraphReact.prototype.publish("centroidTextHeight", 12, "number", "Centroid Text Height");
+GraphReact.prototype.publish("centroidTextPadding", 4, "number", "Centroid Text Padding");
+GraphReact.prototype.publish("centroidIconHeight", 50, "number", "Centroid Icon Height");
+GraphReact.prototype.publish("centroidIconPadding", 10, "number", "Centroid Icon Padding");
+GraphReact.prototype.publish("centroidIconStrokeWidth", 4, "number", "Centroid Icon Stroke Width");
+GraphReact.prototype.publish("centroidIconFontFamily", "FontAwesome", "string", "Centroid Icon Font Family");
+GraphReact.prototype.publish("centroidLabelFontFamily", "Verdana", "string", "Centroid Label Font Family");
 
+export const Graph2 = GraphReact;

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

@@ -1,5 +1,5 @@
 import { render, React, SubgraphProps, VertexProps, EdgeProps } from "@hpcc-js/react";
-import { GraphT, RendererT } from "./graphT.ts";
+import { GraphT, RendererT } from "../common/graphT.ts";
 
 function adapter<T>(reactRenderer: React.FunctionComponent<T>): RendererT<T> {
     return (props: T, element: SVGGElement) => render(reactRenderer, props, element);

package/src/react/index.ts

@@ -0,0 +1,4 @@
+export * from "./graphReactT.ts";
+export * from "./graphReact.ts";
+export * from "./subgraph.tsx";
+export * from "./vertex.tsx";

package/src/{graph2 → react}/subgraph.tsx

@@ -1,5 +1,5 @@
 import { React, Text } from "@hpcc-js/react";
-import { SubgraphBaseProps } from "./layouts/placeholders.ts";
+import { SubgraphBaseProps } from "../common/layouts/placeholders.ts";
 
 export interface BasicSubgraphProps extends SubgraphBaseProps {
     label?: string;
@@ -23,6 +23,7 @@ export const BasicSubgraph: React.FunctionComponent<BasicSubgraphProps> = ({
     return <g transform={`translate(${-width / 2} ${-height / 2})`}>
         <rect width={width} height={height} fill={fill} stroke={stroke} style={{ strokeWidth }} />
         <g transform={`translate(8 ${8 + labelHeight})`}>
+            {/* @ts-ignore */}
             <Text text={label} fill={labelFill} height={labelHeight} />
         </g>
     </g>;

package/src/{graph2 → react}/vertex.tsx

@@ -1,5 +1,5 @@
 import { React, Text } from "@hpcc-js/react";
-import { VertexBaseProps } from "./layouts/placeholders.ts";
+import { VertexBaseProps } from "../common/layouts/placeholders.ts";
 
 export interface BasicVertexProps extends VertexBaseProps {
     textFill?: string;
@@ -24,6 +24,7 @@ export const BasicVertex: React.FunctionComponent<BasicVertexProps> = ({
     return <g transform={`scale(${scale})`}>
         <circle cx="0" cy="0" r={circleRadius} fill={circleFill} stroke={circleStroke} style={{ strokeWidth: circleStrokeWidth }} />
         <g transform={`translate(0 ${circleRadius + textHeight})`}>
+            {/* @ts-ignore */}
             <Text text={text} fill={textFill} height={textHeight} />
         </g>
     </g>;

package/types/{graph2 → common}/graphT.d.ts

@@ -1,17 +1,16 @@
 import { Palette, Selection, SVGGlowFilter, SVGZoomWidget, ToggleButton, Utility, Widget } from "@hpcc-js/common";
-import { IconEx } from "@hpcc-js/react";
 import { Graph2 as GraphCollection } from "@hpcc-js/util";
 import { HTMLTooltip } from "@hpcc-js/html";
 import "d3-transition";
 import { ILayout } from "./layouts/index.ts";
 import { Options as FDOptions } from "./layouts/forceDirectedWorker.ts";
-import type { VertexBaseProps, EdgeBaseProps, GraphDataProps, HierarchyBase, SubgraphBaseProps } from "./layouts/placeholders.ts";
+import type { BaseProps, VertexBaseProps, EdgeBaseProps, GraphDataProps, HierarchyBase, SubgraphBaseProps } from "./layouts/placeholders.ts";
 import { EdgePlaceholder, SubgraphPlaceholder, VertexPlaceholder } from "./layouts/placeholders.ts";
 import { Engine } from "./layouts/graphvizWorker.ts";
-import "../../src/graph2/graph.css";
-export { GraphDataProps, SubgraphBaseProps, VertexBaseProps, EdgeBaseProps, HierarchyBase };
+import "./graphT.css";
+export { BaseProps, GraphDataProps, SubgraphBaseProps, VertexBaseProps, EdgeBaseProps, HierarchyBase };
 type GraphLayoutType = "Hierarchy" | "DOT" | "Tree" | "Dendrogram" | "RadialTree" | "RadialDendrogram" | "ForceDirected" | "ForceDirected2" | "ForceDirectedHybrid" | "Neato" | "FDP" | "Circle" | "TwoPI" | "Circo" | "None";
-export type RendererT<T> = (props: T, element: SVGGElement) => void;
+export type RendererT<T> = (props: T, element: SVGGElement) => unknown;
 export declare class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E extends EdgeBaseProps<V>> extends SVGZoomWidget {
     protected _centroidFilter: SVGGlowFilter;
     private _toggleHierarchy;
@@ -45,12 +44,6 @@ export declare class GraphT<SG extends SubgraphBaseProps, V extends VertexBasePr
         data?: SG | V | E;
     };
     iconBarButtons(): Widget[];
-    protected _categories: IconEx[];
-    categories(): IconEx[];
-    categories(_: IconEx[]): this;
-    protected _annotations: IconEx[];
-    annotations(): IconEx[];
-    annotations(_: IconEx[]): this;
     private _origData;
     data(): GraphDataProps<SG, V, E>;
     data(_: GraphDataProps<SG, V, E>, merge?: boolean): this;
@@ -97,6 +90,10 @@ export declare class GraphT<SG extends SubgraphBaseProps, V extends VertexBasePr
         x: number;
         y: number;
     };
+    rprojectPlacholder(vp: VertexPlaceholder<V>): {
+        x: number;
+        y: number;
+    };
     categoryID(id: string | number, prefix?: "cat" | "ann"): string;
     updateCategories(): void;
     updateAnnotations(): void;
@@ -115,6 +112,7 @@ export declare class GraphT<SG extends SubgraphBaseProps, V extends VertexBasePr
     subgraphRenderer(): RendererT<SG>;
     subgraphRenderer(_: RendererT<SG>): this;
     updateSubgraphs(): this;
+    addMarkers(clearFirst?: boolean): void;
     enter(domNode: any, element: any): void;
     protected forceDirectedOptions(): FDOptions;
     private layoutOptions;

package/types/common/index.d.ts

@@ -0,0 +1,3 @@
+export * from "../react/dataGraph.ts";
+export * from "./graphT.ts";
+export * from "./sankeyGraph.ts";

package/types/{graph2 → common}/layouts/layout.d.ts

@@ -2,6 +2,14 @@ import { Graph2 as GraphCollection } from "@hpcc-js/util";
 import { EdgePlaceholder, SubgraphPlaceholder, VertexPlaceholder } from "./placeholders.ts";
 import { EdgeLayout } from "./tree.ts";
 export type Point = [number, number];
+interface Position {
+    x: number;
+    y: number;
+}
+interface Line {
+    source: Position;
+    target: Position;
+}
 export interface ILayout {
     start(): Promise<this>;
     stop(): this;
@@ -13,10 +21,13 @@ export type Size = {
     height: number;
 };
 export interface IGraph {
+    id(): string;
     size(): Size;
     graphData(): GraphCollection<VertexPlaceholder, EdgePlaceholder, SubgraphPlaceholder>;
-    project(pos: number, clip: boolean): any;
+    project(pos: number, clip?: boolean): any;
+    rproject(pos: number): any;
     projectPlacholder(vp: VertexPlaceholder): any;
+    rprojectPlacholder(vp: VertexPlaceholder): any;
     moveSubgraphs(transition: boolean): this;
     moveVertexPlaceholder(vp: VertexPlaceholder, transition: boolean, moveEdges: boolean): this;
     moveVertices(transition: boolean): this;
@@ -32,8 +43,14 @@ export declare class Layout implements ILayout {
     stop(): this;
     running(): boolean;
     protected center(points: Point[]): Point;
+    vertexSize(vp: VertexPlaceholder): {
+        width: number;
+        height: number;
+    };
+    edgeLine(ep: EdgePlaceholder): Line;
     edgePath(ep: EdgePlaceholder, curveDepth: number): {
         path: string;
         labelPos: Point;
     };
 }
+export {};

package/types/common/layouts/pathIntersection.d.ts

@@ -0,0 +1,24 @@
+export interface Pos {
+    x: number;
+    y: number;
+}
+export interface Segment {
+    start: Pos;
+    end: Pos;
+}
+export interface Rectangle {
+    topLeft: Pos;
+    topRight: Pos;
+    bottomLeft: Pos;
+    bottomRight: Pos;
+}
+export interface Rectangle2 {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export declare function intersection(rect: Rectangle2, line: Segment): {
+    x: number;
+    y: number;
+};

package/types/{graph2 → common}/layouts/placeholders.d.ts

@@ -26,7 +26,10 @@ export interface EdgeBaseProps<V extends VertexBaseProps = VertexBaseProps> exte
     strokeDasharray?: string;
     strokeWidth?: number;
     stroke?: string;
+    path?: string;
     fontFamily?: string;
+    markerStart?: string;
+    markerEnd?: string;
 }
 export interface HierarchyBase<SG extends SubgraphBaseProps, V extends VertexBaseProps> {
     id: string | number;
@@ -43,6 +46,7 @@ export interface SubgraphPlaceholder<SG extends SubgraphBaseProps = SubgraphBase
     id: string | number;
     element?: Selection<SVGGElement, SubgraphPlaceholder<SG>, SVGGElement, any>;
     props: SG;
+    renderResult?: unknown;
     x?: number;
     y?: number;
 }
@@ -50,6 +54,7 @@ export interface VertexPlaceholder<V extends VertexBaseProps = VertexBaseProps>
     id: string | number;
     element?: Selection<SVGGElement, VertexPlaceholder<V>, SVGGElement, any>;
     props: V;
+    renderResult?: any;
     index?: number;
     x?: number;
     y?: number;
@@ -70,6 +75,7 @@ export interface EdgePlaceholder<V extends VertexBaseProps = VertexBaseProps, E
     props: E;
     source: VertexPlaceholder<V>;
     target: VertexPlaceholder<V>;
+    renderResult?: any;
     index?: number;
     points?: Array<[number, number]>;
 }

package/types/{graph2 → common}/sankeyGraph.d.ts

@@ -1,6 +1,6 @@
 import { SVGWidget } from "@hpcc-js/common";
-import { AnnotationColumn } from "./dataGraph.ts";
-import "../../src/graph2/sankeyGraph.css";
+import { AnnotationColumn } from "../react/dataGraph.ts";
+import "./sankeyGraph.css";
 import { EdgeBaseProps, VertexBaseProps } from "./graphT.ts";
 export declare class SankeyGraph extends SVGWidget {
     protected _d3Sankey: any;

package/types/html/annotation.d.ts

@@ -0,0 +1,13 @@
+export interface AnnotationProps {
+    text: string;
+    fontFamily?: string;
+    fontSize?: number;
+    fill?: string;
+    stroke?: string;
+}
+export declare const annotation: ({ text, fontFamily, fontSize, fill, stroke }: AnnotationProps) => import("./component.ts").TemplateResultEx;
+export interface AnnotationsProps {
+    annotations: AnnotationProps[];
+    padding?: number;
+}
+export declare const annotations: ({ annotations, padding, }: AnnotationsProps) => import("./component.ts").TemplateResultEx;

package/types/html/component.d.ts

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

package/types/html/graphHtml.d.ts

@@ -0,0 +1,5 @@
+import { GraphHtmlT, SubgraphBaseProps, EdgeBaseProps } from "./graphHtmlT.ts";
+import { VertexProps } from "./vertex.ts";
+export declare class GraphHtml extends GraphHtmlT<SubgraphBaseProps, VertexProps, EdgeBaseProps> {
+    constructor();
+}

package/types/html/graphHtmlT.d.ts

@@ -0,0 +1,9 @@
+import { html, svg } 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";
+export { html, svg, EdgeBaseProps, SubgraphBaseProps, VertexBaseProps };
+export declare function adapter<T extends BaseProps>(component: Component<T>): RendererT<T>;
+export declare class GraphHtmlT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E extends EdgeBaseProps<V>> extends GraphT<SG, V, E> {
+    constructor(subgraphRenderer?: Component<SG>, vertexRenderer?: Component<V>, edgeRenderer?: Component<E>);
+}

package/types/html/icon.d.ts

@@ -0,0 +1,15 @@
+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 declare function icon({ shape, width, height, fill, stroke, strokeWidth, imageUrl, imageFontFamily, imageChar, imageCharFill, padding, cornerRadius, }: IconProps): import("./component.ts").TemplateResultEx;

package/types/html/image.d.ts

@@ -0,0 +1,8 @@
+export interface ImageProps {
+    href: string;
+    x?: number;
+    y?: number;
+    height?: number;
+    yOffset?: number;
+}
+export declare const Image: ({ href, x, y, height }: ImageProps) => import("./component.ts").TemplateResultEx;

package/types/html/imageChar.d.ts

@@ -0,0 +1,2 @@
+import { TextProps } from "./text.ts";
+export declare const ImageChar: ({ text, fill, fontFamily, fontSize }: TextProps) => import("./component.ts").TemplateResultEx;

package/types/html/index.d.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/types/html/shape.d.ts

@@ -0,0 +1,31 @@
+export declare 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 declare const circle: ({ diameter, fill, stroke, strokeWidth, shapeRendering }: CircleProps) => import("./component.ts").TemplateResultEx;
+export interface RectangleProps extends BaseProps {
+    width: number;
+    height: number;
+    cornerRadius?: number;
+}
+export declare const rectangle: ({ width, height, cornerRadius, fill, stroke, strokeWidth, shapeRendering }: RectangleProps) => import("./component.ts").TemplateResultEx;
+export interface SquareProps extends BaseProps {
+    width?: number;
+    cornerRadius?: number;
+}
+export declare const square: ({ width, cornerRadius, fill, stroke, strokeWidth, shapeRendering }: SquareProps) => import("./component.ts").TemplateResultEx;
+export interface ShapeProps extends BaseProps {
+    shape?: "circle" | "square" | "rectangle";
+    diameter?: number;
+    width?: number;
+    height?: number;
+    cornerRadius?: number;
+}
+export declare const shape: ({ shape, diameter, width, height, fill, stroke, strokeWidth, shapeRendering, cornerRadius }: ShapeProps) => import("./component.ts").TemplateResultEx;
+export {};

package/types/html/text.d.ts

@@ -0,0 +1,10 @@
+export interface TextProps {
+    text: string;
+    anchor?: "left" | "middle" | "end";
+    fill?: string;
+    fontFamily?: string;
+    fontSize?: number;
+    dominantBaseline?: string;
+}
+export declare const TextLine: ({ text, anchor, fill, fontFamily, fontSize, dominantBaseline, }: TextProps) => import("./component.ts").TemplateResultEx;
+export declare const Text: ({ text, anchor, fill, fontFamily, fontSize, }: TextProps) => import("./component.ts").TemplateResultEx;

package/types/html/textBox.d.ts

@@ -0,0 +1,11 @@
+import { TextProps } from "./text.ts";
+export interface TextBoxProps {
+    text: TextProps;
+    padding?: number;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    cornerRadius?: number;
+    yOffset?: number;
+}
+export declare const TextBox: ({ text, padding, fill, stroke, strokeWidth, cornerRadius, }: TextBoxProps) => import("./component.ts").TemplateResultEx;

package/types/html/vertex.d.ts

@@ -0,0 +1,17 @@
+import type { VertexBaseProps } from "../common/layouts/placeholders.ts";
+import { IconProps } from "./icon.ts";
+import { TextBoxProps } from "./textBox.ts";
+import { AnnotationProps } from "./annotation.ts";
+import { Component } 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 declare const vertex: Component<VertexProps>;

package/types/index.d.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/types/{graph2 → react}/dataGraph.d.ts

@@ -1,6 +1,6 @@
 import { PropertyExt, Widget } from "@hpcc-js/common";
 import { Vertex3Props, EdgeProps } from "@hpcc-js/react";
-import { Graph2 } from "./graph.ts";
+import { GraphReact } from "./graphReact.ts";
 export type IVertex3 = Vertex3Props;
 export declare function toJsonObj<T>(row: any, columns: any): T;
 export declare class AnnotationColumn extends PropertyExt {
@@ -15,7 +15,7 @@ export interface AnnotationColumn {
     annotationID(): string;
     annotationID(_: string): this;
 }
-export declare class DataGraph extends Graph2 {
+export declare class DataGraph extends GraphReact {
     constructor();
     clear(): void;
     indexOf(columns: readonly string[], column: string, defColumn?: string): number;

package/types/{graph2/graph.d.ts → react/graphReact.d.ts}

@@ -1,13 +1,20 @@
+import { IconEx } from "@hpcc-js/react";
 import { React, SubgraphProps, VertexProps, EdgeProps } from "@hpcc-js/react";
 import { GraphReactT } from "./graphReactT.ts";
-import { GraphDataProps, HierarchyBase } from "./graphT.ts";
+import { GraphDataProps, HierarchyBase } from "../common/graphT.ts";
 export type ISubgraph = SubgraphProps;
 export type IVertex = VertexProps;
 export type IEdge = EdgeProps;
 export type IHierarchy = HierarchyBase<ISubgraph, IVertex>;
 export type IGraphData2 = GraphDataProps<ISubgraph, IVertex, IEdge>;
-export declare class Graph2 extends GraphReactT<ISubgraph, IVertex, IEdge> {
+export declare class GraphReact extends GraphReactT<ISubgraph, IVertex, IEdge> {
     constructor();
+    protected _categories: IconEx[];
+    categories(): IconEx[];
+    categories(_: IconEx[]): this;
+    protected _annotations: IconEx[];
+    annotations(): IconEx[];
+    annotations(_: IconEx[]): this;
     calcProps(_props: VertexProps): VertexProps;
     protected _reactVertexRenderer2: React.FunctionComponent<any>;
     vertexRenderer<T extends VertexProps>(): React.FunctionComponent<T>;
@@ -16,9 +23,11 @@ export declare class Graph2 extends GraphReactT<ISubgraph, IVertex, IEdge> {
     centroidRenderer<T extends VertexProps>(): React.FunctionComponent<T>;
     centroidRenderer<T extends VertexProps>(_: React.FunctionComponent<T>): this;
     enter(domNode: any, element: any): void;
+    updateCategories(): void;
+    updateAnnotations(): void;
     update(domNode: any, element: any): void;
 }
-export interface Graph2 {
+export interface GraphReact {
     vertexTextHeight(): number;
     vertexTextHeight(_: number): this;
     vertexTextPadding(): number;
@@ -52,3 +61,4 @@ export interface Graph2 {
     centroidLabelFontFamily(): string;
     centroidLabelFontFamily(_: string): this;
 }
+export declare const Graph2: typeof GraphReact;

package/types/{graph2 → react}/graphReactT.d.ts

@@ -1,5 +1,5 @@
 import { React, SubgraphProps, VertexProps, EdgeProps } from "@hpcc-js/react";
-import { GraphT } from "./graphT.ts";
+import { GraphT } from "../common/graphT.ts";
 export declare class GraphReactT<SG extends SubgraphProps, V extends VertexProps, E extends EdgeProps<V>> extends GraphT<SG, V, E> {
     constructor(subgraphRenderer: React.FunctionComponent<SG>, vertexRenderer: React.FunctionComponent<V>, edgeRenderer: React.FunctionComponent<E>);
     private _reactSubgraphRenderer;

package/types/react/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./graphReactT.ts";
+export * from "./graphReact.ts";
+export * from "./subgraph.tsx";
+export * from "./vertex.tsx";

package/types/{graph2 → react}/subgraph.d.ts

@@ -1,5 +1,5 @@
 import { React } from "@hpcc-js/react";
-import { SubgraphBaseProps } from "./layouts/placeholders.ts";
+import { SubgraphBaseProps } from "../common/layouts/placeholders.ts";
 export interface BasicSubgraphProps extends SubgraphBaseProps {
     label?: string;
     labelFill?: string;

package/types/{graph2 → react}/vertex.d.ts

@@ -1,5 +1,5 @@
 import { React } from "@hpcc-js/react";
-import { VertexBaseProps } from "./layouts/placeholders.ts";
+import { VertexBaseProps } from "../common/layouts/placeholders.ts";
 export interface BasicVertexProps extends VertexBaseProps {
     textFill?: string;
     textHeight?: number;

package/src/graph2/graph.css

@@ -1,34 +0,0 @@
-.graph_Graph2 .graphVertex {
-    cursor: pointer;
-}
-
-
-.graph_Graph2 .allowDragging .graphVertex {
-    cursor: pointer;
-}
-
-.graph_Graph2 .allowDragging .graphVertex.grabbed {
-    cursor: grabbing;
-}
-
-.graph_Graph2 .graphEdge {
-    stroke: darkgray;
-    fill: none;
-}
-
-.graph_Graph2 .graphEdge > text {
-    stroke: none;
-    fill: black;
-}
-
-.graph_Graph2 .graphEdge.hide-text > text {
-    display: none;
-}
-
-.graph_Graph2 g.selected rect {
-    stroke:red !important;
-}
-
-.graph_Graph2 g.selected circle {
-    stroke:red !important;
-}

package/src/graph2/index.ts

@@ -1,7 +0,0 @@
-export * from "./graphT.ts";
-export * from "./graphReactT.ts";
-export * from "./graph.ts";
-export * from "./dataGraph.ts";
-export * from "./sankeyGraph.ts";
-export * from "./subgraph.tsx";
-export * from "./vertex.tsx";