@hpcc-js/graph 3.6.5 → 3.7.0

package/src/html/imageChar.ts

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

@@ -1,8 +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";
+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/intersection.ts

@@ -1,110 +1,110 @@
-export interface Pos {
-    x: number;
-    y: number;
-}
-
-export interface Extent {
-    width: number;
-    height: number;
-}
-
-export interface Segment {
-    start: Pos;
-    end: Pos;
-}
-
-export interface Rectangle {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
-
-function segmentSegment(s1: Segment, s2: Segment): Pos | undefined {
-    const { x: x1, y: y1 } = s1.start;
-    const { x: x2, y: y2 } = s1.end;
-    const { x: x3, y: y3 } = s2.start;
-    const { x: x4, y: y4 } = s2.end;
-
-    const denom = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
-    if (denom === 0) {
-        // Parallel lines  ---
-        return undefined;
-    }
-
-    const t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / denom;
-    const u = -((x1 - x2) * (y1 - y3) - (y1 - y2) * (x1 - x3)) / denom;
-
-    if (t > 0 && t < 1 && u > 0 && u < 1) {
-        return {
-            x: x1 + t * (x2 - x1),
-            y: y1 + t * (y2 - y1)
-        };
-    }
-
-    return undefined;
-}
-
-function rectEdges(rect: Rectangle): Segment[] {
-    const r = {
-        topLeft: { x: rect.x - rect.width / 2, y: rect.y - rect.height / 2 },
-        topRight: { x: rect.x + rect.width / 2, y: rect.y - rect.height / 2 },
-        bottomRight: { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 },
-        bottomLeft: { x: rect.x - rect.width / 2, y: rect.y + rect.height / 2 }
-    };
-    return [
-        { start: r.bottomLeft, end: r.topLeft },
-        { start: r.topLeft, end: r.topRight },
-        { start: r.topRight, end: r.bottomRight },
-        { start: r.bottomRight, end: r.bottomLeft },
-    ];
-}
-
-export function rectangleSegment(rect: Rectangle, line: Segment): Pos | undefined {
-    for (const edge of rectEdges(rect)) {
-        const intersectionPoint = segmentSegment(edge, line);
-        if (intersectionPoint) {
-            return intersectionPoint;
-        }
-    }
-    return undefined;
-}
-
-function sortSegment(pos: Pos, line: Segment): Segment {
-    const distStart = Math.hypot(line.start.x - pos.x, line.start.y - pos.y);
-    const distEnd = Math.hypot(line.end.x - pos.x, line.end.y - pos.y);
-
-    if (distStart <= distEnd) {
-        return line;
-    } else {
-        return { start: line.end, end: line.start };
-    }
-}
-
-export function circleSegment(pos: Pos, r: number, line: Segment): Pos | undefined {
-    line = sortSegment(pos, line);
-    const { x: x1, y: y1 } = line.start;
-    const { x: x2, y: y2 } = line.end;
-
-    const dx = x2 - x1;
-    const dy = y2 - y1;
-
-    const a = dx * dx + dy * dy;
-    const b = 2 * (dx * (x1 - pos.x) + dy * (y1 - pos.y));
-    const c = (x1 - pos.x) * (x1 - pos.x) + (y1 - pos.y) * (y1 - pos.y) - r * r;
-
-    const discriminant = b * b - 4 * a * c;
-
-    if (discriminant < 0) {
-        return undefined;
-    }
-
-    const t1 = (-b + Math.sqrt(discriminant)) / (2 * a);
-
-    if (t1 >= 0 && t1 <= 1) {
-        return {
-            x: x1 + t1 * dx,
-            y: y1 + t1 * dy
-        };
-    }
-}
+export interface Pos {
+    x: number;
+    y: number;
+}
+
+export interface Extent {
+    width: number;
+    height: number;
+}
+
+export interface Segment {
+    start: Pos;
+    end: Pos;
+}
+
+export interface Rectangle {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+
+function segmentSegment(s1: Segment, s2: Segment): Pos | undefined {
+    const { x: x1, y: y1 } = s1.start;
+    const { x: x2, y: y2 } = s1.end;
+    const { x: x3, y: y3 } = s2.start;
+    const { x: x4, y: y4 } = s2.end;
+
+    const denom = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
+    if (denom === 0) {
+        // Parallel lines  ---
+        return undefined;
+    }
+
+    const t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / denom;
+    const u = -((x1 - x2) * (y1 - y3) - (y1 - y2) * (x1 - x3)) / denom;
+
+    if (t > 0 && t < 1 && u > 0 && u < 1) {
+        return {
+            x: x1 + t * (x2 - x1),
+            y: y1 + t * (y2 - y1)
+        };
+    }
+
+    return undefined;
+}
+
+function rectEdges(rect: Rectangle): Segment[] {
+    const r = {
+        topLeft: { x: rect.x - rect.width / 2, y: rect.y - rect.height / 2 },
+        topRight: { x: rect.x + rect.width / 2, y: rect.y - rect.height / 2 },
+        bottomRight: { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 },
+        bottomLeft: { x: rect.x - rect.width / 2, y: rect.y + rect.height / 2 }
+    };
+    return [
+        { start: r.bottomLeft, end: r.topLeft },
+        { start: r.topLeft, end: r.topRight },
+        { start: r.topRight, end: r.bottomRight },
+        { start: r.bottomRight, end: r.bottomLeft },
+    ];
+}
+
+export function rectangleSegment(rect: Rectangle, line: Segment): Pos | undefined {
+    for (const edge of rectEdges(rect)) {
+        const intersectionPoint = segmentSegment(edge, line);
+        if (intersectionPoint) {
+            return intersectionPoint;
+        }
+    }
+    return undefined;
+}
+
+function sortSegment(pos: Pos, line: Segment): Segment {
+    const distStart = Math.hypot(line.start.x - pos.x, line.start.y - pos.y);
+    const distEnd = Math.hypot(line.end.x - pos.x, line.end.y - pos.y);
+
+    if (distStart <= distEnd) {
+        return line;
+    } else {
+        return { start: line.end, end: line.start };
+    }
+}
+
+export function circleSegment(pos: Pos, r: number, line: Segment): Pos | undefined {
+    line = sortSegment(pos, line);
+    const { x: x1, y: y1 } = line.start;
+    const { x: x2, y: y2 } = line.end;
+
+    const dx = x2 - x1;
+    const dy = y2 - y1;
+
+    const a = dx * dx + dy * dy;
+    const b = 2 * (dx * (x1 - pos.x) + dy * (y1 - pos.y));
+    const c = (x1 - pos.x) * (x1 - pos.x) + (y1 - pos.y) * (y1 - pos.y) - r * r;
+
+    const discriminant = b * b - 4 * a * c;
+
+    if (discriminant < 0) {
+        return undefined;
+    }
+
+    const t1 = (-b + Math.sqrt(discriminant)) / (2 * a);
+
+    if (t1 >= 0 && t1 <= 1) {
+        return {
+            x: x1 + t1 * dx,
+            y: y1 + t1 * dy
+        };
+    }
+}

package/src/html/shape.ts

@@ -1,141 +1,141 @@
-import { svg } from "lit-html";
-import { extend } from "./component.ts";
-import { circleSegment, rectangleSegment } from "./intersection.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, (pos, line) => {
-        return circleSegment(pos, diameter / 2, line);
-    });
-};
-
-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, (pos, line) => {
-        return rectangleSegment({ x: pos.x, y: pos.y, width, height }, line);
-    });
-};
-
-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
-            });
-    }
-};
+import { svg } from "lit-html";
+import { extend } from "./component.ts";
+import { circleSegment, rectangleSegment } from "./intersection.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, (pos, line) => {
+        return circleSegment(pos, diameter / 2, line);
+    });
+};
+
+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, (pos, line) => {
+        return rectangleSegment({ x: pos.x, y: pos.y, width, height }, line);
+    });
+};
+
+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

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