@hpcc-js/graph 3.6.5 → 3.7.0

package/src/html/textBox.ts

@@ -1,45 +1,45 @@
-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,
-        rectTpl.intersection
-    );
-};
-
+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,
+        rectTpl.intersection
+    );
+};
+

package/src/html/vertex.ts

@@ -1,67 +1,67 @@
-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> = ({
-    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, (pos, line) => {
-        return iconTpl.intersection({ x: pos.x, y: yIconOffset + pos.y }, line) ??
-            textBoxTpl.intersection({ x: pos.x, y: pos.y }, line);
-    });
-};
+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> = ({
+    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, (pos, line) => {
+        return iconTpl.intersection({ x: pos.x, y: yIconOffset + pos.y }, line) ??
+            textBoxTpl.intersection({ x: pos.x, y: pos.y }, line);
+    });
+};

package/src/index.ts

@@ -1,10 +1,10 @@
-export * from "./__package__.ts";
-export * from "./AdjacencyGraph.ts";
-export * from "./Edge.ts";
-export * from "./Graph.ts";
-export * from "./Sankey.ts";
-export * from "./Subgraph.ts";
-export * from "./Vertex.ts";
-export * from "./common/index.ts";
-export * from "./html/index.ts";
-export * from "./react/index.ts";
+export * from "./__package__.ts";
+export * from "./AdjacencyGraph.ts";
+export * from "./Edge.ts";
+export * from "./Graph.ts";
+export * from "./Sankey.ts";
+export * from "./Subgraph.ts";
+export * from "./Vertex.ts";
+export * from "./common/index.ts";
+export * from "./html/index.ts";
+export * from "./react/index.ts";