@hpcc-js/react 3.4.15 → 3.4.16

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/react",
-    "version": "3.4.15",
+    "version": "3.4.16",
     "description": "hpcc-js - Viz React",
     "type": "module",
     "main": "./dist/index.umd.cjs",
@@ -37,7 +37,7 @@
         "update-major": "npx --yes npm-check-updates -u"
     },
     "dependencies": {
-        "@hpcc-js/common": "^3.7.5"
+        "@hpcc-js/common": "^3.7.6"
     },
     "devDependencies": {
         "@hpcc-js/esbuild-plugins": "^1.8.7",
@@ -55,5 +55,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "f8bdd58fc6914054a2313a87bbe1257dc9720545"
+    "gitHead": "6f134126379fe058a052986758b792d7b4ddb84b"
 }

package/src/ImageChar.tsx

@@ -1,42 +1,42 @@
-import * as PReact from "./preact-shim.ts";
-import { Utility } from "@hpcc-js/common";
-
-export interface ImageCharProps {
-    x?: number;
-    y?: number;
-    height?: number;
-    fill?: string;
-    stroke?: string;
-    fontFamily?: string;
-    char?: string;
-    yOffset?: number;
-    fontWeight?: number;
-}
-
-export const ImageChar: PReact.FunctionComponent<ImageCharProps> = ({
-    x,
-    y = 0,
-    height = 12,
-    fill,
-    stroke,
-    fontFamily = "FontAwesome",
-    char = "",
-    fontWeight
-}) => {
-
-    const renderChar = PReact.useMemo(() => {
-        return fontFamily === "FontAwesome" ? Utility.faChar(char) : char;
-    }, [char, fontFamily]);
-
-    return <text
-        x={x}
-        y={y}
-        fill={fill}
-        stroke={stroke}
-        fontFamily={fontFamily}
-        fontSize={`${height}px`}
-        fontWeight={fontWeight}
-        dominantBaseline="middle"
-        style={{ textAnchor: "middle", alignmentBaseline: "middle" }}
-    >{renderChar}</text>;
-};
+import * as PReact from "./preact-shim.ts";
+import { Utility } from "@hpcc-js/common";
+
+export interface ImageCharProps {
+    x?: number;
+    y?: number;
+    height?: number;
+    fill?: string;
+    stroke?: string;
+    fontFamily?: string;
+    char?: string;
+    yOffset?: number;
+    fontWeight?: number;
+}
+
+export const ImageChar: PReact.FunctionComponent<ImageCharProps> = ({
+    x,
+    y = 0,
+    height = 12,
+    fill,
+    stroke,
+    fontFamily = "FontAwesome",
+    char = "",
+    fontWeight
+}) => {
+
+    const renderChar = PReact.useMemo(() => {
+        return fontFamily === "FontAwesome" ? Utility.faChar(char) : char;
+    }, [char, fontFamily]);
+
+    return <text
+        x={x}
+        y={y}
+        fill={fill}
+        stroke={stroke}
+        fontFamily={fontFamily}
+        fontSize={`${height}px`}
+        fontWeight={fontWeight}
+        dominantBaseline="middle"
+        style={{ textAnchor: "middle", alignmentBaseline: "middle" }}
+    >{renderChar}</text>;
+};

package/src/__package__.ts

@@ -1,3 +1,3 @@
-export const PKG_NAME = "__PACKAGE_NAME__";
-export const PKG_VERSION = "__PACKAGE_VERSION__";
-export const BUILD_VERSION = "__BUILD_VERSION__";
+export const PKG_NAME = "__PACKAGE_NAME__";
+export const PKG_VERSION = "__PACKAGE_VERSION__";
+export const BUILD_VERSION = "__BUILD_VERSION__";

package/src/edge.tsx

@@ -1,45 +1,45 @@
-import * as PReact from "./preact-shim.ts";
-import { VertexProps } from "./vertex.tsx";
-import { Text } from "./text.tsx";
-
-type Point = [number, number];
-
-export interface EdgeProps<V extends VertexProps = VertexProps> {
-    id: string | number;
-    origData?: any;
-    source: V;
-    target: V;
-    label?: string;
-    labelPos?: Point;
-    weight?: number;
-    strokeDasharray?: string;
-    strokeWidth?: number;
-    stroke?: string;
-    fontFamily?: string;
-    labelFill?: string;
-    labelHeight?: number,
-    path?: string;
-    points?: Array<[number, number]>;
-    curveDepth?: number;
-}
-
-export const Edge: PReact.FunctionComponent<EdgeProps> = ({
-    label,
-    labelPos,
-    labelFill = "black",
-    labelHeight = 12,
-    path,
-    stroke,
-    strokeWidth,
-    strokeDasharray
-}) => {
-    return <>
-        <path d={path} stroke={stroke} style={{ strokeWidth, strokeDasharray }}></path>
-        {
-            label && labelPos && labelPos.length === 2 ?
-                <g transform={`translate(${labelPos[0]} ${labelPos[1]})`}>
-                    <Text text={label} fill={labelFill} height={labelHeight} />
-                </g> : undefined
-        }
-    </>;
-};
+import * as PReact from "./preact-shim.ts";
+import { VertexProps } from "./vertex.tsx";
+import { Text } from "./text.tsx";
+
+type Point = [number, number];
+
+export interface EdgeProps<V extends VertexProps = VertexProps> {
+    id: string | number;
+    origData?: any;
+    source: V;
+    target: V;
+    label?: string;
+    labelPos?: Point;
+    weight?: number;
+    strokeDasharray?: string;
+    strokeWidth?: number;
+    stroke?: string;
+    fontFamily?: string;
+    labelFill?: string;
+    labelHeight?: number,
+    path?: string;
+    points?: Array<[number, number]>;
+    curveDepth?: number;
+}
+
+export const Edge: PReact.FunctionComponent<EdgeProps> = ({
+    label,
+    labelPos,
+    labelFill = "black",
+    labelHeight = 12,
+    path,
+    stroke,
+    strokeWidth,
+    strokeDasharray
+}) => {
+    return <>
+        <path d={path} stroke={stroke} style={{ strokeWidth, strokeDasharray }}></path>
+        {
+            label && labelPos && labelPos.length === 2 ?
+                <g transform={`translate(${labelPos[0]} ${labelPos[1]})`}>
+                    <Text text={label} fill={labelFill} height={labelHeight} />
+                </g> : undefined
+        }
+    </>;
+};

package/src/icon.tsx

@@ -1,95 +1,95 @@
-import * as PReact from "./preact-shim.ts";
-import { Palette } from "@hpcc-js/common";
-import { Image } from "./image.tsx";
-import { ImageChar } from "./ImageChar.tsx";
-import { Shape } from "./shape.tsx";
-
-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;
-    xOffset?: number;
-    yOffset?: number;
-    cornerRadius?: number;
-    shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
-}
-
-export const Icon: PReact.FunctionComponent<IconProps> = ({
-    shape = "circle",
-    width,
-    height = 32,
-    fill,
-    stroke,
-    strokeWidth = 0,
-    imageUrl = "",
-    imageFontFamily = "FontAwesome",
-    imageChar = "",
-    imageCharFill = Palette.textColor(fill),
-    padding = height / 5,
-    xOffset = 0,
-    yOffset = 0,
-    cornerRadius,
-    shapeRendering
-}) => {
-    return <>
-        <Shape
-            shape={shape}
-            width={width}
-            height={height}
-            fill={fill}
-            stroke={stroke}
-            strokeWidth={strokeWidth}
-            shapeRendering={shapeRendering}
-            cornerRadius={cornerRadius}
-        />
-        {imageUrl ?
-            <Image
-                href={imageUrl}
-                x={xOffset}
-                y={yOffset}
-                height={height - padding}
-            ></Image> :
-            <ImageChar
-                x={xOffset}
-                y={yOffset}
-                height={height - padding}
-                fontFamily={imageFontFamily}
-                char={imageChar}
-                fill={imageCharFill}
-                fontWeight={400}
-            ></ImageChar>
-        }
-    </>;
-};
-
-export interface IconEx extends IconProps {
-    id: string;
-}
-
-export interface IconsProps {
-    icons: IconEx[];
-}
-
-export const Icons: PReact.FunctionComponent<IconsProps> = ({
-    icons = []
-}) => {
-    const IconComponents = icons.map(cat => {
-        return <g
-            key={cat.id}
-            id={cat.id}
-        >
-            <Icon
-                {...cat}
-            />
-        </g>;
-    });
-    return <>{IconComponents}</>;
-};
+import * as PReact from "./preact-shim.ts";
+import { Palette } from "@hpcc-js/common";
+import { Image } from "./image.tsx";
+import { ImageChar } from "./ImageChar.tsx";
+import { Shape } from "./shape.tsx";
+
+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;
+    xOffset?: number;
+    yOffset?: number;
+    cornerRadius?: number;
+    shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
+}
+
+export const Icon: PReact.FunctionComponent<IconProps> = ({
+    shape = "circle",
+    width,
+    height = 32,
+    fill,
+    stroke,
+    strokeWidth = 0,
+    imageUrl = "",
+    imageFontFamily = "FontAwesome",
+    imageChar = "",
+    imageCharFill = Palette.textColor(fill),
+    padding = height / 5,
+    xOffset = 0,
+    yOffset = 0,
+    cornerRadius,
+    shapeRendering
+}) => {
+    return <>
+        <Shape
+            shape={shape}
+            width={width}
+            height={height}
+            fill={fill}
+            stroke={stroke}
+            strokeWidth={strokeWidth}
+            shapeRendering={shapeRendering}
+            cornerRadius={cornerRadius}
+        />
+        {imageUrl ?
+            <Image
+                href={imageUrl}
+                x={xOffset}
+                y={yOffset}
+                height={height - padding}
+            ></Image> :
+            <ImageChar
+                x={xOffset}
+                y={yOffset}
+                height={height - padding}
+                fontFamily={imageFontFamily}
+                char={imageChar}
+                fill={imageCharFill}
+                fontWeight={400}
+            ></ImageChar>
+        }
+    </>;
+};
+
+export interface IconEx extends IconProps {
+    id: string;
+}
+
+export interface IconsProps {
+    icons: IconEx[];
+}
+
+export const Icons: PReact.FunctionComponent<IconsProps> = ({
+    icons = []
+}) => {
+    const IconComponents = icons.map(cat => {
+        return <g
+            key={cat.id}
+            id={cat.id}
+        >
+            <Icon
+                {...cat}
+            />
+        </g>;
+    });
+    return <>{IconComponents}</>;
+};

package/src/image.tsx

@@ -1,25 +1,25 @@
-import * as PReact from "./preact-shim.ts";
-
-interface ImageProps {
-    href: string;
-    x?: number;
-    y?: number;
-    height?: number;
-    yOffset?: number;
-}
-
-export const Image: PReact.FunctionComponent<ImageProps> = ({
-    href,
-    x,
-    y = 0,
-    height = 12
-}) => {
-
-    return <image
-        xlinkHref={href}
-        x={x - height / 2}
-        y={y - height / 2}
-        width={height}
-        height={height}
-    ></image>;
-};
+import * as PReact from "./preact-shim.ts";
+
+interface ImageProps {
+    href: string;
+    x?: number;
+    y?: number;
+    height?: number;
+    yOffset?: number;
+}
+
+export const Image: PReact.FunctionComponent<ImageProps> = ({
+    href,
+    x,
+    y = 0,
+    height = 12
+}) => {
+
+    return <image
+        xlinkHref={href}
+        x={x - height / 2}
+        y={y - height / 2}
+        width={height}
+        height={height}
+    ></image>;
+};

package/src/index.ts

@@ -1,17 +1,17 @@
-export * from "./__package__.ts";
-
-export * from "./edge.tsx";
-export * from "./ImageChar.tsx";
-export * from "./icon.tsx";
-export * from "./image.tsx";
-export * from "./render.ts";
-export * from "./shape.tsx";
-export * from "./span.tsx";
-export * from "./text.tsx";
-export * from "./vertex.tsx";
-export * from "./vertex2.tsx";
-export * from "./vertex3.tsx";
-export * from "./vertex4.tsx";
-export * from "./subgraph.tsx";
-
-export * as React from "./preact-shim.ts";
+export * from "./__package__.ts";
+
+export * from "./edge.tsx";
+export * from "./ImageChar.tsx";
+export * from "./icon.tsx";
+export * from "./image.tsx";
+export * from "./render.ts";
+export * from "./shape.tsx";
+export * from "./span.tsx";
+export * from "./text.tsx";
+export * from "./vertex.tsx";
+export * from "./vertex2.tsx";
+export * from "./vertex3.tsx";
+export * from "./vertex4.tsx";
+export * from "./subgraph.tsx";
+
+export * as React from "./preact-shim.ts";

package/src/preact-shim.ts

@@ -1,4 +1,4 @@
-export { createElement, Component, Fragment, h, render } from "preact";
-export { unmountComponentAtNode } from "preact/compat";
-export type { FunctionComponent } from "preact";
-export { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useState } from "preact/hooks";
+export { createElement, Component, Fragment, h, render } from "preact";
+export { unmountComponentAtNode } from "preact/compat";
+export type { FunctionComponent } from "preact";
+export { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useState } from "preact/hooks";

package/src/render.ts

@@ -1,78 +1,78 @@
-import { h, FunctionComponent, render as preactRender } from "preact";
-import { HTMLWidget, SVGWidget } from "@hpcc-js/common";
-
-export function render<P>(C: FunctionComponent<P>, props: Readonly<P>, parent: Element | Document | ShadowRoot | DocumentFragment, replaceNode?: Element | Text) {
-    preactRender(h(C, props), parent, replaceNode);
-}
-
-export function svgRender<P>(C: FunctionComponent<P>, props: Readonly<P>, parent: Element | Document | ShadowRoot | DocumentFragment, replaceNode?: Element | Text) {
-    preactRender(h("svg", null, h(C, props)), parent, replaceNode);
-}
-
-export class HTMLAdapter<P> extends HTMLWidget {
-
-    props(): P;
-    props(_: Partial<P>): this;
-    props(_?: Partial<P>): P | this {
-        if (!arguments.length) return this._props;
-        this._props = { ...this._props, ..._ };
-        return this;
-    }
-
-    prop<K extends keyof P>(_: K): P[K];
-    prop<K extends keyof P>(_: K, value: P[K]): this;
-    prop<K extends keyof P>(_: K, value?: P[K]): this | P[K] {
-        if (arguments.length === 1) return this._props[_];
-        this._props[_] = value;
-        return this;
-    }
-
-    constructor(protected readonly _component: FunctionComponent<P>) {
-        super();
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-        render(this._component, this._props, domNode);
-    }
-}
-HTMLAdapter.prototype._class += " react_HTMLAdapter";
-
-export interface HTMLAdapter<P> {
-    _props: P;
-}
-HTMLAdapter.prototype.publish("props", {}, "object", "Properties");
-
-export class SVGAdapter<P> extends SVGWidget {
-
-    props(): P;
-    props(_: Partial<P>): this;
-    props(_?: Partial<P>): P | this {
-        if (!arguments.length) return this._props;
-        this._props = { ...this._props, ..._ };
-        return this;
-    }
-
-    prop<K extends keyof P>(_: K): P[K];
-    prop<K extends keyof P>(_: K, value: P[K]): this;
-    prop<K extends keyof P>(_: K, value?: P[K]): this | P[K] {
-        if (arguments.length === 1) return this._props[_];
-        this._props[_] = value;
-        return this;
-    }
-
-    constructor(protected readonly _component: FunctionComponent<P>) {
-        super();
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-        render(this._component, this._props, domNode);
-    }
-}
-SVGAdapter.prototype._class += " react_SVGAdapter";
-
-export interface SVGAdapter<P> {
-    _props: P;
-}
-SVGAdapter.prototype.publish("props", {}, "object", "Properties");
+import { h, FunctionComponent, render as preactRender } from "preact";
+import { HTMLWidget, SVGWidget } from "@hpcc-js/common";
+
+export function render<P>(C: FunctionComponent<P>, props: Readonly<P>, parent: Element | Document | ShadowRoot | DocumentFragment, replaceNode?: Element | Text) {
+    preactRender(h(C, props), parent, replaceNode);
+}
+
+export function svgRender<P>(C: FunctionComponent<P>, props: Readonly<P>, parent: Element | Document | ShadowRoot | DocumentFragment, replaceNode?: Element | Text) {
+    preactRender(h("svg", null, h(C, props)), parent, replaceNode);
+}
+
+export class HTMLAdapter<P> extends HTMLWidget {
+
+    props(): P;
+    props(_: Partial<P>): this;
+    props(_?: Partial<P>): P | this {
+        if (!arguments.length) return this._props;
+        this._props = { ...this._props, ..._ };
+        return this;
+    }
+
+    prop<K extends keyof P>(_: K): P[K];
+    prop<K extends keyof P>(_: K, value: P[K]): this;
+    prop<K extends keyof P>(_: K, value?: P[K]): this | P[K] {
+        if (arguments.length === 1) return this._props[_];
+        this._props[_] = value;
+        return this;
+    }
+
+    constructor(protected readonly _component: FunctionComponent<P>) {
+        super();
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+        render(this._component, this._props, domNode);
+    }
+}
+HTMLAdapter.prototype._class += " react_HTMLAdapter";
+
+export interface HTMLAdapter<P> {
+    _props: P;
+}
+HTMLAdapter.prototype.publish("props", {}, "object", "Properties");
+
+export class SVGAdapter<P> extends SVGWidget {
+
+    props(): P;
+    props(_: Partial<P>): this;
+    props(_?: Partial<P>): P | this {
+        if (!arguments.length) return this._props;
+        this._props = { ...this._props, ..._ };
+        return this;
+    }
+
+    prop<K extends keyof P>(_: K): P[K];
+    prop<K extends keyof P>(_: K, value: P[K]): this;
+    prop<K extends keyof P>(_: K, value?: P[K]): this | P[K] {
+        if (arguments.length === 1) return this._props[_];
+        this._props[_] = value;
+        return this;
+    }
+
+    constructor(protected readonly _component: FunctionComponent<P>) {
+        super();
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+        render(this._component, this._props, domNode);
+    }
+}
+SVGAdapter.prototype._class += " react_SVGAdapter";
+
+export interface SVGAdapter<P> {
+    _props: P;
+}
+SVGAdapter.prototype.publish("props", {}, "object", "Properties");