@kwiz/fluentui 1.0.78 → 1.0.79

package/src/controls/ColorPickerDialog.tsx

@@ -1,84 +0,0 @@
-import { Field } from "@fluentui/react-components";
-import { ColorRegular } from "@fluentui/react-icons";
-import { isFunction, isNullOrEmptyString, isNumber } from "@kwiz/common";
-import * as React from "react";
-import ColorPicker, { Color } from 'react-pick-color';
-import { useEffectOnlyOnMount, useStateEX } from "../helpers";
-import { ButtonEX } from "./button";
-import { InputEx } from "./input";
-import { Prompter } from "./prompt";
-export interface iProps {
-    label?: string;
-    value: string;
-    onChange: (newValue: string) => void;
-    required?: boolean;
-    showValidationErrors?: boolean;
-    underlined?: boolean;
-    width?: number;
-    buttonOnly?: boolean;
-    placeholder?: string;
-    disabled?: boolean;
-
-    /** specify a specific mount node for this dialog */
-    mountNode?: HTMLElement | null | {
-        element?: HTMLElement | null;
-        className?: string;
-    }
-}
-
-export const ColorPickerEx: React.FunctionComponent<iProps> = (props) => {
-    const [isOpen, setIsOpen] = useStateEX<boolean>(false);
-    const [selectedColor, setSelectedColor] = useStateEX<string>(props.value);
-
-    const getColorCells = React.useCallback(() => {
-        let cells: Color[] = [
-            "white", "black"
-        ];
-        return cells;
-    }, useEffectOnlyOnMount);
-    return <>
-        {props.buttonOnly
-            ? <ButtonEX disabled={props.disabled}
-                title="Open color picker"
-                icon={<ColorRegular
-                    color={selectedColor} />
-                }
-                onClick={(e) => setIsOpen(true)} />
-            : <Field label={props.label}
-                required={props.required === true}
-                validationMessage={props.showValidationErrors && props.required === true && isNullOrEmptyString(selectedColor) ? "You can't leave this blank." : undefined}
-            >
-                <InputEx disabled={props.disabled}
-                    placeholder={props.placeholder || "Enter value here"}
-                    style={isNumber(props.width) ? { width: props.width } : undefined}
-                    value={selectedColor}
-                    onChange={(e, data) => {
-                        setSelectedColor(data.value);
-                        if (isFunction(props.onChange)) {
-                            props.onChange(data.value);
-                        }
-                    }}
-                    contentAfter={<ButtonEX disabled={props.disabled}
-                        title="Open color picker"
-                        icon={<ColorRegular
-                            color={selectedColor} />
-                        }
-                        onClick={(e) => setIsOpen(true)} />
-                    }
-                />
-            </Field>}
-        {isOpen && <Prompter maxWidth={332} mountNode={props.mountNode}
-            hideOk hideCancel onCancel={() => {
-                if (isFunction(props.onChange)) {
-                    props.onChange(selectedColor);
-                }
-                setIsOpen(false);
-            }} showCancelInTitle
-            title={props.label || "Choose a color"}
-        >
-            <ColorPicker color={selectedColor} onChange={color => setSelectedColor(color.hex)}
-                presets={getColorCells()}
-            />
-        </Prompter>}
-    </>;
-};

package/src/controls/accordion.tsx

@@ -1,62 +0,0 @@
-import { makeStyles } from "@fluentui/react-components";
-import { ChevronRightRegular } from "@fluentui/react-icons";
-import * as React from 'react';
-import { KnownClassNames } from "../styles/styles";
-import { ButtonEX } from "./button";
-import { DividerEX } from "./divider";
-import { Horizontal } from "./horizontal";
-import { Vertical } from "./vertical";
-
-const useStyles = makeStyles({
-    opened: {
-        transform: "rotate(90deg)",
-        transition: "transform 200ms ease-out"
-    },
-    header: {
-        paddingLeft: 0
-    },
-    root: {
-        maxHeight: "100%"
-    },
-    rootFill: {
-        minHeight: "100%"
-    },
-    body: {
-        overflow: "auto",
-    }
-});
-
-interface iProps {
-    /** optional: send the key for the group you want to open by default */
-    opened?: string;
-    fillHeight?: boolean;
-    groups: {
-        key: string;
-        title: string;
-        icon?: JSX.Element;
-        content: JSX.Element;
-    }[];
-}
-export const AccordionEX: React.FunctionComponent<iProps> = (props) => {
-    const classes = useStyles();
-    const [opened, setOpened] = React.useState(props.opened || props.groups[0].key);
-    return (<Vertical main css={[classes.root, props.fillHeight && classes.rootFill, KnownClassNames.accordion]}>
-        {props.groups.map(group => <React.Fragment key={group.key}>
-            <ButtonEX className={`${classes.header} ${KnownClassNames.accordionHeader} ${opened === group.key ? ` ${KnownClassNames.isOpen}` : ''}`}
-                icon={<ChevronRightRegular className={opened === group.key ? classes.opened : ''} />}
-                title={group.title} showTitleWithIcon dontCenterText
-                onClick={() => setOpened(group.key)}
-            />
-            <DividerEX />
-            {group.key === opened && <>
-                <Horizontal main css={[classes.body, KnownClassNames.accordionBodyWrapper]}>
-                    <Vertical main css={[KnownClassNames.accordionBody]}>
-                        {group.content}
-                    </Vertical>
-                </Horizontal>
-                <DividerEX />
-            </>}
-        </React.Fragment>)}
-    </Vertical>
-    );
-}

package/src/controls/button.tsx

@@ -1,181 +0,0 @@
-import { Button, ButtonProps, CompoundButton, compoundButtonClassNames, CompoundButtonProps, makeStyles, mergeClasses, tokens, Tooltip } from '@fluentui/react-components';
-import { capitalizeFirstLetter, isFunction, isNullOrEmptyString, isNullOrUndefined, isString, PushNoDuplicate } from '@kwiz/common';
-import React from 'react';
-import { useKWIZFluentContext } from '../helpers/context-internal';
-import { commonSizes, KnownClassNames } from '../styles/styles';
-
-interface IProps {
-    title: string;//required
-    showTitleWithIcon?: boolean;
-    dontStretch?: boolean;
-    hideOnPrint?: boolean;
-    dontCenterText?: boolean;
-    hoverIcon?: JSX.Element;
-    hoverTitle?: string;
-    onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => void | undefined;//type the onClick arg
-}
-interface IPropsCompound extends IProps {
-    width?: string | number;
-}
-
-export type ButtonEXProps = IProps & Omit<ButtonProps, "onClick" | "title">;
-export type CompoundButtonEXProps = IPropsCompound & Omit<CompoundButtonProps, "onClick" | "title">;;
-
-const useStyles = makeStyles({
-    buttonNoCenter: {
-        justifyContent: 'flex-start',
-        '& *': {
-            /* a button with no center that has content of a vertical, or multiple labels */
-            alignItems: 'flex-start'
-        }
-    },
-    danger: {
-        backgroundColor: tokens.colorStatusDangerBackground1,
-        color: tokens.colorStatusWarningForeground2,
-
-        [`& .${compoundButtonClassNames.secondaryContent}`]: {
-            color: tokens.colorStatusWarningForeground1
-        }
-    },
-    success: {
-        color: tokens.colorStatusSuccessForeground1,
-
-        [`& .${compoundButtonClassNames.secondaryContent}`]: {
-            color: tokens.colorStatusSuccessForeground1,
-        }
-    },
-    primarySubtle: {
-        color: tokens.colorBrandForeground1,
-
-        [`& .${compoundButtonClassNames.secondaryContent}`]: {
-            color: tokens.colorBrandForeground1,
-        }
-    },
-    dangerSubtle: {
-        color: tokens.colorStatusWarningForeground2,
-
-        [`& .${compoundButtonClassNames.secondaryContent}`]: {
-            color: tokens.colorStatusWarningForeground1
-        }
-    }
-})
-
-
-export const ButtonEX = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
-    const ctx = useKWIZFluentContext();
-    const [hover, setHover] = React.useState(false);
-    const trackHover = !isNullOrEmptyString(props.hoverTitle) || !isNullOrUndefined(props.hoverIcon);
-
-    const title = hover && !isNullOrEmptyString(props.hoverTitle) ? props.hoverTitle
-        : props.title || props['aria-label'];
-    const icon = hover && !isNullOrUndefined(props.hoverIcon) ? props.hoverIcon : props.icon;
-    let hasIcon = !isNullOrUndefined(icon);
-    let hasText = props.children || !hasIcon || (hasIcon && props.showTitleWithIcon === true);
-
-    const cssNames = useStyles();
-    let css: string[] = [];
-
-    if (props.hideOnPrint) PushNoDuplicate(css, KnownClassNames.printHide);
-    if (props.dontCenterText) PushNoDuplicate(css, cssNames.buttonNoCenter);
-
-    let btn = <Button ref={ref} appearance='subtle' {...props as any as ButtonProps} className={mergeClasses(...css, props.className)}
-        aria-label={title} title={undefined} icon={icon}
-        onMouseEnter={trackHover ? (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-            setHover(true);
-            if (isFunction(props.onMouseEnter))
-                props.onMouseEnter(e as any);
-        } : props.onMouseEnter as any}
-        onMouseLeave={trackHover ? (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-            setHover(false);
-            if (isFunction(props.onMouseLeave))
-                props.onMouseLeave(e as any);
-        } : props.onMouseLeave as any}
-    >{props.children ||
-        //no icon? will show the title by default
-        (hasText && capitalizeFirstLetter(title))}</Button>;
-    if (!hasText || props.children)//icon only or when content is different than props.title
-        btn = <Tooltip showDelay={1000} relationship='label' withArrow appearance='inverted' content={title}
-            mountNode={ctx.mountNode}
-        >
-            {btn}
-        </Tooltip>;
-
-    return (
-        props.dontStretch ? <div>{btn}</div> : btn
-
-    );
-});
-export const ButtonEXSecondary = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
-    const ctx = useKWIZFluentContext();
-    return (
-        <ButtonEX ref={ref} appearance='secondary' shape={ctx.buttonShape} {...props}></ButtonEX>
-    );
-});
-/** to be used in MessageBarActions for prominent actions. Otherwise use ButtonEX or ButtonEXDangerSubtle */
-export const ButtonEXMessageBarAction = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
-    const ctx = useKWIZFluentContext();
-    return (
-        <ButtonEX ref={ref} appearance='secondary' hideOnPrint {...props}></ButtonEX>
-    );
-});
-export const ButtonEXPrimary = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
-    return (
-        <ButtonEXSecondary ref={ref} appearance='primary' {...props}>{props.children}</ButtonEXSecondary>
-    );
-});
-export const ButtonEXDanger = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
-    const cssNames = useStyles();
-    return (
-        <ButtonEXSecondary ref={ref} className={props.disabled ? undefined : cssNames.danger} {...props}>{props.children}</ButtonEXSecondary>
-    );
-});
-export const ButtonEXSuccess = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
-    const cssNames = useStyles();
-    return (
-        <ButtonEX ref={ref} className={cssNames.success} {...props}>{props.children}</ButtonEX>
-    );
-});
-export const ButtonEXPrimarySubtle = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
-    const cssNames = useStyles();
-    return (
-        <ButtonEX ref={ref} className={props.disabled ? undefined : cssNames.primarySubtle} {...props}>{props.children}</ButtonEX>
-    );
-});
-export const ButtonEXDangerSubtle = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
-    const cssNames = useStyles();
-    return (
-        <ButtonEX ref={ref} className={props.disabled ? undefined : cssNames.dangerSubtle} {...props}>{props.children}</ButtonEX>
-    );
-});
-
-export const CompoundButtonEX = React.forwardRef<HTMLButtonElement, (CompoundButtonEXProps)>((props, ref) => {
-    const ctx = useKWIZFluentContext();
-    let title = props.title || props['aria-label'];
-    let tooltip = isString(props.secondaryContent) ? props.secondaryContent : title;
-    let max = typeof (props.width) === "undefined" ? commonSizes.widthMedium : props.width;
-    return (
-        <Tooltip showDelay={1000} relationship='label' withArrow appearance='inverted' content={tooltip}
-            mountNode={ctx.mountNode}
-        >
-            <CompoundButton ref={ref} appearance='subtle' style={{ justifyContent: "flex-start", maxWidth: max }} {...props as any as CompoundButtonProps} aria-label={tooltip} title={undefined}>
-                {props.children || capitalizeFirstLetter(title)}</CompoundButton>
-        </Tooltip>
-    );
-});
-export const CompoundButtonEXSecondary = React.forwardRef<HTMLButtonElement, (CompoundButtonEXProps)>((props, ref) => {
-    const ctx = useKWIZFluentContext();
-    return (
-        <CompoundButtonEX ref={ref} appearance='secondary' shape={ctx.buttonShape} {...props}></CompoundButtonEX>
-    );
-});
-export const CompoundButtonEXPrimary = React.forwardRef<HTMLButtonElement, (CompoundButtonEXProps)>((props, ref) => {
-    return (
-        <CompoundButtonEXSecondary ref={ref} appearance='primary' {...props}>{props.children}</CompoundButtonEXSecondary>
-    );
-});
-export const CompoundButtonEXDanger = React.forwardRef<HTMLButtonElement, (CompoundButtonEXProps)>((props, ref) => {
-    const cssNames = useStyles();
-    return (
-        <CompoundButtonEXSecondary ref={ref} className={cssNames.danger} {...props}>{props.children}</CompoundButtonEXSecondary>
-    );
-});

package/src/controls/canvas/CustomEventTargetBase.ts

@@ -1,33 +0,0 @@
-export class CustomEventTargetBase implements EventTarget {    
-    private _et: EventTarget;    
-
-    public constructor() {
-        try {
-            this._et = new EventTarget();
-        } catch (error) {
-            // Using document as EventTarget to support iOS 13 and older.
-            // Because EventTarget constructor just exists at iOS 14 and later.
-            this._et = document;
-        }
-    }
-
-    public addEventListener(
-        type: string,
-        listener: EventListenerOrEventListenerObject | null,
-        options?: boolean | AddEventListenerOptions,
-    ): void {
-        this._et.addEventListener(type, listener, options);
-    }
-
-    public dispatchEvent(event: Event): boolean {
-        return this._et.dispatchEvent(event);
-    }
-
-    public removeEventListener(
-        type: string,
-        callback: EventListenerOrEventListenerObject | null,
-        options?: boolean | EventListenerOptions,
-    ): void {
-        this._et.removeEventListener(type, callback, options);
-    }
-}

package/src/controls/canvas/DrawPad.tsx

@@ -1,297 +0,0 @@
-import { Field, tokens } from "@fluentui/react-components";
-import { ArrowMaximizeRegular, ArrowMinimizeRegular, ArrowUploadRegular, CalligraphyPenRegular, DismissRegular } from "@fluentui/react-icons";
-import { debounce, getCSSVariableValue, ImageFileTypes, isElement, isNotEmptyString, isNullOrEmptyArray, isNullOrEmptyString, isNullOrUndefined } from "@kwiz/common";
-import * as React from "react";
-import { useAlerts, useElementSize, useStateEX } from "../../helpers";
-import { ButtonEX } from "../button";
-import { ColorPickerEx } from "../ColorPickerDialog";
-import { FileUpload } from "../file-upload";
-import { Horizontal } from "../horizontal";
-import { InputEx } from "../input";
-import { Vertical } from "../vertical";
-import DrawPadManager from "./DrawPadManager";
-
-interface iProps {
-    BackgroundColor?: string;
-    BorderColor?: string;
-    LineColor?: string;
-    minWidth?: number;
-    minHeight?: number;
-    /** url or  base64 image data:image/png;base64,.... */
-    Value?: string;
-    /** when user hits clear, it will reset to this value
-     * url or base64 image data:image/png;base64,....
-     */
-    DefaultBackdrop?: string;
-    OnChange?: (newValue: string) => void;
-    ReadOnly?: boolean;
-    HideUpload?: boolean;
-    HideClear?: boolean;
-    //HideUndo?: boolean;
-    HideColorPicker?: boolean;
-    disabled?: boolean;
-    /** true - will prompt user for his name, string will just sign as that string */
-    allowSigning?: boolean | string;
-    allowFullscreen?: boolean;
-}
-var _userName: string = null;
-export const DrawPadUserName = {
-    get: () => { return _userName },
-    set: (userName: string) => { _userName = userName }
-};
-
-const fontName = "Dancing Script";
-let fontLoading: Promise<boolean> = null;
-let fontReady = false;
-export const DrawPad: React.FunctionComponent<iProps> = (props) => {
-    const [LineColor, setLineColor] = useStateEX<string>(props.LineColor || tokens.colorBrandForeground1);
-    const [manager, setmanager] = useStateEX<DrawPadManager>(null);
-    const [canUndo, setcanUndo] = useStateEX<boolean>(false, { skipUpdateIfSame: true });
-    const [signed, setSigned] = useStateEX<boolean>(false);
-    const [fullscreen, setFullscreen] = useStateEX<boolean>(false);
-    const onChangeRef = React.useRef(props.OnChange);
-    const alerts = useAlerts();
-    const canvasArea: React.RefObject<HTMLCanvasElement> = React.useRef();
-    const canvasContainerDiv = React.useRef<HTMLDivElement>();
-
-    //keep onChange up to date
-    React.useEffect(() => {
-        onChangeRef.current = props.OnChange;
-    }, [props.OnChange]);
-    //if user name provided - keep it
-    React.useEffect(() => {
-        if (isNotEmptyString(props.allowSigning)) {
-            DrawPadUserName.set(props.allowSigning);
-        }
-    }, [props.allowSigning]);
-
-    //load font for sign as text, if needed
-    React.useEffect(() => {
-        if (props.allowSigning && !fontLoading) {
-            let DancingScriptFont = new FontFace(
-                fontName,
-                "url(https://fonts.gstatic.com/s/dancingscript/v25/If2RXTr6YS-zF4S-kcSWSVi_szLgiuE.woff2) format('woff2')",
-                {
-                    style: "normal",
-                    weight: "400 700",
-                    display: "swap",
-                    unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
-                }
-            );
-
-            fontLoading = DancingScriptFont.load().then(async loadedFont => {
-                document.fonts.add(loadedFont);
-                await document.fonts.ready;
-                fontReady = true;
-                return true;
-            });
-        }
-    }, [props.allowSigning]);
-
-    //setup manager
-    React.useEffect(() => {
-        if (!props.ReadOnly && canvasArea.current && !canvasArea.current["canvas_initialized"]) {
-            canvasArea.current["canvas_initialized"] = true;//for some reason this still fires twice on the same div
-            //this gets called after each render...
-            let manager = new DrawPadManager(canvasArea.current);
-            setmanager(manager);
-            manager.addEventListener("endStroke", () => {
-                //because this is used in an addEventListener - need to have a ref to get the most up to date onChange
-                if (onChangeRef.current) {
-                    let canvasValue = manager.toPng();
-                    setcanUndo(true);
-                    onChangeRef.current(canvasValue);
-                }
-            });
-        }
-    }, [canvasArea]);
-    //update line color selection
-    React.useEffect(() => {
-        if (manager) {
-            manager.penColor.value = getCSSVariableValue(LineColor, canvasArea.current);
-        }
-    }, [manager, LineColor]);
-
-    //Set props value to canvas on initial load or when owner element changes the prop
-    React.useEffect(() => {
-        if (manager) {
-            let canvasValue = manager.toPng();
-            let neededValue = isNotEmptyString(props.Value)
-                ? props.Value
-                : isNotEmptyString(props.DefaultBackdrop)
-                    ? props.DefaultBackdrop
-                    : "";
-            if (canvasValue !== neededValue ||
-                (
-                    isNullOrEmptyString(canvasValue) &&
-                    isNullOrEmptyString(neededValue)
-                )
-            ) {
-                UpdateCanvas(neededValue);//if called repeatedly or too fast - may not load correctly
-            }
-        }
-    });//cant use those - canvas loses value on drag so must run this every time: [props.Value, props.DefaultBackdrop, manager]);
-
-    //set value to canvas
-    const UpdateCanvas = React.useCallback(debounce((valueToSet: string) => {
-        if (valueToSet === "") manager.clear();
-        else manager.fromDataURL(valueToSet);
-    }, 200, this), [manager]);
-
-    //enable/disable canvas manager
-    React.useEffect(() => {
-        if (manager) {
-            if (props.disabled) manager.off();//stop accepting strokes, but still allow to set a default value
-            else manager.on();
-        }
-    }, [manager, props.disabled]);
-
-    const sign = React.useCallback((name: string) => {
-        let canvas = canvasArea.current;
-        if (!isElement(canvas)) {
-            return;
-        }
-        setSigned(true);
-
-        let height = canvas.clientHeight;
-        let width = canvas.clientWidth;
-
-        let ctx = canvas.getContext("2d");
-        ctx.fillStyle = getCSSVariableValue(LineColor, canvasArea.current);
-
-        let fontSize = 0.6 * height;
-        ctx.font = `${fontSize}px ${fontName}`;
-        let textMeasurement = ctx.measureText(name);
-        let textWidth = textMeasurement.width;
-        let maxWidth = 0.9 * width;
-
-        while (textWidth > maxWidth && fontSize > 1) {
-            fontSize = fontSize - 1;
-            ctx.font = `${fontSize}px ${fontName}`;
-            textMeasurement = ctx.measureText(name);
-            textWidth = textMeasurement.width;
-        }
-
-        let x = (width - textWidth) / 2;
-        let y = 0.6 * height; //baseline not starting point
-        ctx.fillText(name, x, y, width);
-        let url = canvas.toDataURL("image/png");
-        onChangeRef.current?.(url);
-    }, [canvasArea, LineColor]);
-
-    const onSignAs = React.useCallback(async () => {
-        if (isNullOrUndefined(DrawPadUserName.get())) {
-            //prompt user to type his name - then continue
-            alerts.promptEX({
-                //mountNode: canvasContainerDiv.current, this lets other content on the form cover the dialog
-                title: "Sign as name",
-                children: <Field label="Signing as" hint="Please type in your name" required>
-                    <InputEx onChange={(e, data) => DrawPadUserName.set(data.value)} />
-                </Field>,
-                onCancel: () => {
-                    DrawPadUserName.set(null);//get rid of anything they typed while dialog was open
-                },
-                onOK: () => {
-                    if (!isNullOrEmptyString(DrawPadUserName.get()))//need to test current since this won't be updated when state changes
-                    {
-                        sign(DrawPadUserName.get());
-                    }
-                },
-            });
-        }
-        else sign(DrawPadUserName.get());
-    }, [canvasArea, LineColor]);
-
-    const HideButtons = props.HideClear && props.HideColorPicker && props.HideUpload;
-
-    const sizer = useElementSize(canvasContainerDiv.current);
-    const [size, setSize] = useStateEX<{ width?: number; height?: number }>({});
-    //handle canvas resizing
-    React.useEffect(() => {
-        if (canvasContainerDiv.current) {
-            setSize({
-                width: canvasContainerDiv.current.clientWidth,
-                height: canvasContainerDiv.current.clientHeight,
-            });
-            if (manager) manager.resizeCanvas();
-        }
-    }, [canvasContainerDiv, sizer, manager]);
-
-    return <Horizontal nogap fullscreen={fullscreen}>
-        {alerts.alertPrompt}
-        <div ref={canvasContainerDiv}
-            style={{
-                flexGrow: 1,
-                position: "relative",
-                minWidth: props.minWidth,
-                minHeight: props.minHeight,
-                backgroundColor: props.BackgroundColor,
-                border: `1px solid ${props.BorderColor || tokens.colorNeutralStroke1}`
-            }}>
-            {props.ReadOnly
-                ? <img src={isNotEmptyString(props.Value) ? props.Value : props.DefaultBackdrop} style={{ position: "absolute", left: 0, top: 0, width: size.width, height: size.height }} />
-                :
-                <div style={{ position: "absolute", left: 0, top: 0, width: size.width, height: size.height }}>
-                    <canvas
-                        ref={canvasArea}
-                        style={{
-                            touchAction: "none",
-                            userSelect: "none",
-                            position: "absolute",
-                            left: 0,
-                            top: 0,
-                            width: size.width,
-                            height: size.height,
-                            border: tokens.colorBrandStroke1
-                        }} />
-                    {!signed
-                        && !isNullOrEmptyString(props.allowSigning)
-                        && !isNullOrEmptyArray(fontReady)
-                        && <ButtonEX
-                            style={{
-                                position: "absolute",
-                                bottom: 0,
-                                border: 0,
-                                margin: 0,
-                                right: 0,
-                                height: 16
-                            }}
-                            disabled={props.disabled}
-                            icon={<CalligraphyPenRegular />}
-                            title={`Sign as ${props.allowSigning === true ? "..." : props.allowSigning}`}
-                            onClick={() => {
-                                onSignAs();
-                            }}
-                        />}
-                </div>
-            }
-        </div>
-        {!props.ReadOnly && !HideButtons && <Vertical nogap>
-            {props.HideColorPicker || <ColorPickerEx //mountNode={canvasContainerDiv.current} this lets other content on the form cover the dialog
-                disabled={props.disabled} buttonOnly value={props.LineColor} onChange={newColor => {
-                    setLineColor(newColor);
-                }} />}
-            {/* todo: undo isn't working properly
-            {props.HideUndo || <ButtonEX disabled={!canUndo} title="Undo" icon={<ArrowUndoRegular />} onClick={() => {
-                manager.undoLast();
-                setcanUndo(manager.canUndo());
-            }} />} */}
-            {props.HideClear || <ButtonEX disabled={props.disabled || isNullOrEmptyString(props.Value)} title="Clear" icon={<DismissRegular />} onClick={() => {
-                //can call clear on the canvas, or can call the onchange which will cause a re-draw
-                setSigned(false);
-                onChangeRef.current?.("");
-            }} />}
-            {props.HideUpload || <FileUpload disabled={props.disabled} title="Load background image" icon={<ArrowUploadRegular />} limitFileTypes={ImageFileTypes} asBase64={base64 => {
-                if (onChangeRef.current)
-                    onChangeRef.current?.(base64[0].base64);//this will trigger a change and state update
-                else
-                    manager?.fromDataURL(base64[0].base64);//this will just set the image to the canvas but won't trigger a change event for the caller
-            }} />}
-            {props.allowFullscreen && <ButtonEX title="Full screen" disabled={props.disabled} icon={fullscreen ? <ArrowMinimizeRegular /> : <ArrowMaximizeRegular />} onClick={async () => {
-                //can call clear on the canvas, or can call the onchange which will cause a re-draw
-                await setFullscreen(!fullscreen);
-                if (manager) manager.resizeCanvas();
-            }} />}
-        </Vertical>}
-    </Horizontal>;
-}