@hpcc-js/react 2.55.2 → 2.55.3

package/src/text.tsx

@@ -1,238 +1,238 @@
-import { Utility } from "@hpcc-js/common";
-import * as React from "@hpcc-js/preact-shim";
-import { Icon } from "./icon";
-import { Rectangle } from "./shape";
-
-interface TextLine {
-    text: string;
-    height?: number;
-    anchor?: string;
-    baseline?: string;
-    fontFamily?: string;
-    fill?: string;
-}
-
-export const TextLine: React.FunctionComponent<TextLine> = ({
-    text,
-    height = 12,
-    anchor = "middle",
-    baseline = "middle",
-    fontFamily = "Verdana",
-    fill = "black"
-}) => {
-    return <text
-        font-family={fontFamily}
-        font-size={`${height}px`}
-        text-anchor={anchor}
-        dominant-baseline={baseline}
-        fill={fill}
-    >{text}</text>;
-};
-
-interface Text {
-    text: string;
-    height?: number;
-    fontFamily?: string;
-    fill?: string;
-    onSizeUpdate?: (size: { width: number, height: number }) => void;
-}
-
-export const Text: React.FunctionComponent<Text> = ({
-    text,
-    height = 12,
-    fontFamily = "Verdana",
-    fill = "black",
-    onSizeUpdate
-}) => {
-    const [totalWidth, setTotalWidthUpdate] = React.useState(0);
-    const [totalHeight, setTotalHeightUpdate] = React.useState(0);
-
-    React.useEffect(() => {
-        onSizeUpdate && onSizeUpdate({ width: totalWidth, height: totalHeight });
-    }, [totalWidth, totalHeight, onSizeUpdate]);
-
-    const parts = React.useMemo(() => {
-        return text.split("\n");
-    }, [text]);
-
-    const ts = React.useMemo(() => {
-        return Utility.textSize(parts, fontFamily, height);
-    }, [fontFamily, height, parts]);
-
-    setTotalWidthUpdate(ts.width);
-    setTotalHeightUpdate(parts.length * (height + 2) - 2);
-
-    const yOffset = -(totalHeight / 2) + (height / 2);
-    const TextLines = React.useMemo(() => {
-        return parts.map((p, i) => {
-            return <g key={i} transform={`translate(0 ${yOffset + i * (height + 2)})`}>
-                <TextLine
-                    text={p}
-                    height={height}
-                    fontFamily={fontFamily}
-                    fill={fill}
-                />
-            </g>;
-        });
-    }, [fill, fontFamily, height, parts, yOffset]);
-
-    return <>{TextLines}</>;
-};
-
-export interface TextBox {
-    text: string;
-    height?: number;
-    fontFamily?: string;
-    padding?: number;
-    fill?: string;
-    stroke?: string;
-    textFill?: string;
-    strokeWidth?: number;
-    cornerRadius?: number;
-    textOffsetY?: number;
-    onSizeUpdate?: (size: { width: number, height: number }) => void;
-}
-
-export const TextBox: React.FunctionComponent<TextBox> = ({
-    text,
-    height = 12,
-    fontFamily = "Verdana",
-    padding = 4,
-    fill = "whitesmoke",
-    stroke = "lightgray",
-    textFill = "black",
-    strokeWidth = 1,
-    cornerRadius = 0,
-    onSizeUpdate
-}) => {
-    const [textWidth, setTextWidthUpdate] = React.useState(0);
-    const [textHeight, setTextHeightUpdate] = React.useState(0);
-
-    React.useEffect(() => {
-        onSizeUpdate && onSizeUpdate({ width: textWidth, height: textHeight });
-    }, [textWidth, textHeight, onSizeUpdate]);
-
-    const onTextSizeUpdate = React.useCallback(size => {
-        setTextWidthUpdate(size.width);
-        setTextHeightUpdate(size.height);
-    }, []);
-
-    const w = textWidth + padding * 2 + strokeWidth;
-    const h = textHeight + padding * 2 + strokeWidth;
-    const textOffsetY = Math.floor(height / 10);
-
-    return <>
-        <Rectangle
-            width={w}
-            height={h}
-            fill={fill}
-            stroke={stroke}
-            strokeWidth={strokeWidth}
-            cornerRadius={cornerRadius}
-        />
-        <g transform={`translate(0 ${textOffsetY})`}>
-            <Text
-                text={text}
-                fontFamily={fontFamily}
-                height={height}
-                fill={textFill}
-                onSizeUpdate={onTextSizeUpdate}
-            />
-        </g>
-    </>;
-};
-
-export interface LabelledRect extends TextBox {
-    width?: number;
-    fontSize?: number;
-}
-
-export interface IconLabelledRect extends LabelledRect {
-    icon: string;
-    iconFontFamily: string;
-    iconFontSize: number;
-}
-
-export const LabelledRect: React.FunctionComponent<LabelledRect> = ({
-    text,
-    height = 12,
-    width = 12,
-    fontFamily = "Verdana",
-    fontSize = 10,
-    padding = 3,
-    fill = "whitesmoke",
-    stroke = "lightgray",
-    textFill = "black",
-    strokeWidth = 1,
-    cornerRadius = 0,
-    onSizeUpdate = (size: { width: number, height: number }) => { }
-}) => {
-    return <>
-        <Rectangle
-            width={width}
-            height={height}
-            fill={fill}
-            stroke={stroke}
-            strokeWidth={strokeWidth}
-            cornerRadius={cornerRadius}
-        />
-        <g transform={`translate(${-(width / 2) + padding} ${-(height / 2) + padding})`}>
-            <TextLine
-                text={text}
-                fontFamily={fontFamily}
-                height={fontSize}
-                fill={textFill}
-                anchor="start"
-                baseline="hanging"
-            />
-        </g>
-    </>;
-};
-
-export const IconLabelledRect: React.FunctionComponent<IconLabelledRect> = ({
-    icon,
-    iconFontFamily,
-    text,
-    height = 12,
-    width = 12,
-    fontFamily = "Verdana",
-    fontSize = 10,
-    padding = 3,
-    fill = "whitesmoke",
-    stroke = "lightgray",
-    textFill = "black",
-    strokeWidth = 1,
-    cornerRadius = 0,
-    onSizeUpdate = (size: { width: number, height: number }) => { }
-}) => {
-    return <>
-        <Rectangle
-            width={width}
-            height={height}
-            fill={fill}
-            stroke={stroke}
-            strokeWidth={strokeWidth}
-            cornerRadius={cornerRadius}
-        />
-        <g transform={`translate(${-(width / 2) + padding} ${-(height / 2) + padding})`}>
-            <Icon
-                shape="square"
-                imageFontFamily={iconFontFamily}
-                imageChar={icon}
-                height={height}
-                fill={fill}
-                imageCharFill={textFill}
-            />
-        </g>
-        <g transform={`translate(${-(width / 2) + (padding * 2) + height} ${-(height / 2) + padding})`}>
-            <TextLine
-                text={text}
-                fontFamily={fontFamily}
-                height={fontSize}
-                fill={textFill}
-                anchor="start"
-                baseline="hanging"
-            />
-        </g>
-    </>;
-};
+import { Utility } from "@hpcc-js/common";
+import * as React from "@hpcc-js/preact-shim";
+import { Icon } from "./icon";
+import { Rectangle } from "./shape";
+
+interface TextLine {
+    text: string;
+    height?: number;
+    anchor?: string;
+    baseline?: string;
+    fontFamily?: string;
+    fill?: string;
+}
+
+export const TextLine: React.FunctionComponent<TextLine> = ({
+    text,
+    height = 12,
+    anchor = "middle",
+    baseline = "middle",
+    fontFamily = "Verdana",
+    fill = "black"
+}) => {
+    return <text
+        font-family={fontFamily}
+        font-size={`${height}px`}
+        text-anchor={anchor}
+        dominant-baseline={baseline}
+        fill={fill}
+    >{text}</text>;
+};
+
+interface Text {
+    text: string;
+    height?: number;
+    fontFamily?: string;
+    fill?: string;
+    onSizeUpdate?: (size: { width: number, height: number }) => void;
+}
+
+export const Text: React.FunctionComponent<Text> = ({
+    text,
+    height = 12,
+    fontFamily = "Verdana",
+    fill = "black",
+    onSizeUpdate
+}) => {
+    const [totalWidth, setTotalWidthUpdate] = React.useState(0);
+    const [totalHeight, setTotalHeightUpdate] = React.useState(0);
+
+    React.useEffect(() => {
+        onSizeUpdate && onSizeUpdate({ width: totalWidth, height: totalHeight });
+    }, [totalWidth, totalHeight, onSizeUpdate]);
+
+    const parts = React.useMemo(() => {
+        return text.split("\n");
+    }, [text]);
+
+    const ts = React.useMemo(() => {
+        return Utility.textSize(parts, fontFamily, height);
+    }, [fontFamily, height, parts]);
+
+    setTotalWidthUpdate(ts.width);
+    setTotalHeightUpdate(parts.length * (height + 2) - 2);
+
+    const yOffset = -(totalHeight / 2) + (height / 2);
+    const TextLines = React.useMemo(() => {
+        return parts.map((p, i) => {
+            return <g key={i} transform={`translate(0 ${yOffset + i * (height + 2)})`}>
+                <TextLine
+                    text={p}
+                    height={height}
+                    fontFamily={fontFamily}
+                    fill={fill}
+                />
+            </g>;
+        });
+    }, [fill, fontFamily, height, parts, yOffset]);
+
+    return <>{TextLines}</>;
+};
+
+export interface TextBox {
+    text: string;
+    height?: number;
+    fontFamily?: string;
+    padding?: number;
+    fill?: string;
+    stroke?: string;
+    textFill?: string;
+    strokeWidth?: number;
+    cornerRadius?: number;
+    textOffsetY?: number;
+    onSizeUpdate?: (size: { width: number, height: number }) => void;
+}
+
+export const TextBox: React.FunctionComponent<TextBox> = ({
+    text,
+    height = 12,
+    fontFamily = "Verdana",
+    padding = 4,
+    fill = "whitesmoke",
+    stroke = "lightgray",
+    textFill = "black",
+    strokeWidth = 1,
+    cornerRadius = 0,
+    onSizeUpdate
+}) => {
+    const [textWidth, setTextWidthUpdate] = React.useState(0);
+    const [textHeight, setTextHeightUpdate] = React.useState(0);
+
+    React.useEffect(() => {
+        onSizeUpdate && onSizeUpdate({ width: textWidth, height: textHeight });
+    }, [textWidth, textHeight, onSizeUpdate]);
+
+    const onTextSizeUpdate = React.useCallback(size => {
+        setTextWidthUpdate(size.width);
+        setTextHeightUpdate(size.height);
+    }, []);
+
+    const w = textWidth + padding * 2 + strokeWidth;
+    const h = textHeight + padding * 2 + strokeWidth;
+    const textOffsetY = Math.floor(height / 10);
+
+    return <>
+        <Rectangle
+            width={w}
+            height={h}
+            fill={fill}
+            stroke={stroke}
+            strokeWidth={strokeWidth}
+            cornerRadius={cornerRadius}
+        />
+        <g transform={`translate(0 ${textOffsetY})`}>
+            <Text
+                text={text}
+                fontFamily={fontFamily}
+                height={height}
+                fill={textFill}
+                onSizeUpdate={onTextSizeUpdate}
+            />
+        </g>
+    </>;
+};
+
+export interface LabelledRect extends TextBox {
+    width?: number;
+    fontSize?: number;
+}
+
+export interface IconLabelledRect extends LabelledRect {
+    icon: string;
+    iconFontFamily: string;
+    iconFontSize: number;
+}
+
+export const LabelledRect: React.FunctionComponent<LabelledRect> = ({
+    text,
+    height = 12,
+    width = 12,
+    fontFamily = "Verdana",
+    fontSize = 10,
+    padding = 3,
+    fill = "whitesmoke",
+    stroke = "lightgray",
+    textFill = "black",
+    strokeWidth = 1,
+    cornerRadius = 0,
+    onSizeUpdate = (size: { width: number, height: number }) => { }
+}) => {
+    return <>
+        <Rectangle
+            width={width}
+            height={height}
+            fill={fill}
+            stroke={stroke}
+            strokeWidth={strokeWidth}
+            cornerRadius={cornerRadius}
+        />
+        <g transform={`translate(${-(width / 2) + padding} ${-(height / 2) + padding})`}>
+            <TextLine
+                text={text}
+                fontFamily={fontFamily}
+                height={fontSize}
+                fill={textFill}
+                anchor="start"
+                baseline="hanging"
+            />
+        </g>
+    </>;
+};
+
+export const IconLabelledRect: React.FunctionComponent<IconLabelledRect> = ({
+    icon,
+    iconFontFamily,
+    text,
+    height = 12,
+    width = 12,
+    fontFamily = "Verdana",
+    fontSize = 10,
+    padding = 3,
+    fill = "whitesmoke",
+    stroke = "lightgray",
+    textFill = "black",
+    strokeWidth = 1,
+    cornerRadius = 0,
+    onSizeUpdate = (size: { width: number, height: number }) => { }
+}) => {
+    return <>
+        <Rectangle
+            width={width}
+            height={height}
+            fill={fill}
+            stroke={stroke}
+            strokeWidth={strokeWidth}
+            cornerRadius={cornerRadius}
+        />
+        <g transform={`translate(${-(width / 2) + padding} ${-(height / 2) + padding})`}>
+            <Icon
+                shape="square"
+                imageFontFamily={iconFontFamily}
+                imageChar={icon}
+                height={height}
+                fill={fill}
+                imageCharFill={textFill}
+            />
+        </g>
+        <g transform={`translate(${-(width / 2) + (padding * 2) + height} ${-(height / 2) + padding})`}>
+            <TextLine
+                text={text}
+                fontFamily={fontFamily}
+                height={fontSize}
+                fill={textFill}
+                anchor="start"
+                baseline="hanging"
+            />
+        </g>
+    </>;
+};