@kwiz/fluentui 1.0.39 → 1.0.41

package/dist/controls/file-upload.d.ts

@@ -1,5 +1,9 @@
 import { ButtonProps } from "@fluentui/react-components";
 import * as React from "react";
+type base64Result = {
+    base64: string;
+    filename: string;
+};
 interface iProps {
     showTitleWithIcon?: boolean;
     title?: string;
@@ -8,11 +12,12 @@ interface iProps {
     limitFileTypes?: string[];
     allowMultiple?: boolean;
     icon?: JSX.Element;
-    onChange?: (newFile: File | FileList) => void;
-    /** only works for single file, reads it as base64 */
-    asBase64?: (base64: string) => void;
+    onChange?: (newFile: File | File[], errors: string[]) => void;
+    asBase64?: (files: base64Result[], errors: string[]) => void;
     buttonProps?: ButtonProps;
     disabled?: boolean;
+    /** limit file size in MB, for the asBase64 */
+    fileSizeLimit?: number;
 }
 export declare const FileUpload: React.ForwardRefExoticComponent<iProps & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/controls/file-upload.js

@@ -1,41 +1,123 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { isFunction, isNotEmptyArray, isNullOrEmptyString } from '@kwiz/common';
+import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
+import { ArrowUploadRegular } from "@fluentui/react-icons";
+import { isFunction, isNotEmptyArray, isNotEmptyString, isNullOrEmptyString, lastOrNull } from '@kwiz/common';
 import * as React from "react";
+import { useDragDropContext } from "../helpers/drag-drop/drag-drop-context";
+import { useEffectOnlyOnMount } from "../helpers/hooks";
 import { ButtonEX, CompoundButtonEXSecondary } from "./button";
+const useStyles = makeStyles({
+    addRowIsOver: Object.assign({}, shorthands.borderColor(tokens.colorBrandBackground))
+});
 export const FileUpload = React.forwardRef((props, ref) => {
+    const classes = useStyles();
     const hiddenFileInput = React.useRef(null);
     const isMulti = props.allowMultiple === true;
+    const icon = props.icon || _jsx(ArrowUploadRegular, {});
+    const title = isNotEmptyString(props.title) ? props.title : `Drop or select ${isMulti ? 'files' : 'file'}`;
+    const onGotFiles = React.useCallback((rawFiles) => __awaiter(void 0, void 0, void 0, function* () {
+        let errors = [];
+        let acceptedFiles = [];
+        if (rawFiles && rawFiles.length > 0) {
+            //filter by types and size
+            for (let i = 0; i < (isMulti ? rawFiles.length : 1); i++) {
+                const currentFile = rawFiles[i];
+                let hadError = false;
+                if (props.fileSizeLimit > 0) {
+                    const megabytes = currentFile.size / (1024 * 1024);
+                    if (megabytes > props.fileSizeLimit) {
+                        errors.push(`File ${currentFile.name} is over the size limit`);
+                        hadError = true;
+                    }
+                }
+                if (!hadError) {
+                    if (isNotEmptyArray(props.limitFileTypes)) {
+                        let fileType = lastOrNull(currentFile.name.split('.')).toLowerCase();
+                        if (props.limitFileTypes.indexOf(fileType) < 0) {
+                            errors.push(`File ${currentFile.name} is not allowed`);
+                            hadError = true;
+                        }
+                    }
+                }
+                if (!hadError)
+                    acceptedFiles.push(currentFile);
+            }
+        }
+        if (isMulti) {
+            if (isFunction(props.onChange)) {
+                props.onChange(acceptedFiles, errors);
+            }
+        }
+        else {
+            const fileUploaded = acceptedFiles[0];
+            if (isFunction(props.onChange)) {
+                props.onChange(fileUploaded, errors);
+            }
+        }
+        if (isFunction(props.asBase64)) {
+            const filesAs64 = [];
+            for (let i = 0; i < (isMulti ? acceptedFiles.length : 1); i++) {
+                const currentFile = acceptedFiles[i];
+                let hadError = false;
+                if (props.fileSizeLimit > 0) {
+                    const megabytes = currentFile.size / (1024 * 1024);
+                    if (megabytes > props.fileSizeLimit) {
+                        errors.push(`File ${currentFile.name} is over the size limit`);
+                        hadError = true;
+                    }
+                }
+                if (!hadError) {
+                    let as64 = yield getFileAsBase64(acceptedFiles[i]);
+                    if (as64)
+                        filesAs64.push(as64);
+                    else
+                        errors.push(`Could not read file ${acceptedFiles[i].name}`);
+                }
+            }
+            props.asBase64(filesAs64, errors);
+        }
+    }), useEffectOnlyOnMount);
+    const dropContext = useDragDropContext({
+        dropInfo: {
+            acceptTypes: ["__NATIVE_FILE__"],
+            onItemDrop: item => {
+                onGotFiles(item.files);
+            }
+        }
+    });
     return _jsxs(_Fragment, { children: [isNullOrEmptyString(props.secondaryContent)
-                ? _jsx(ButtonEX, Object.assign({ ref: ref }, (props.buttonProps || {}), { icon: props.icon, showTitleWithIcon: props.showTitleWithIcon, onClick: () => {
+                ? _jsx(ButtonEX, Object.assign({ ref: ref || dropContext.dragDropRef }, (props.buttonProps || {}), { icon: icon, showTitleWithIcon: props.showTitleWithIcon, onClick: () => {
                         hiddenFileInput.current.value = "";
                         hiddenFileInput.current.click();
-                    }, title: props.title, disabled: props.disabled }))
-                : _jsx(CompoundButtonEXSecondary, Object.assign({ ref: ref }, (props.buttonProps || {}), { icon: props.icon, secondaryContent: props.secondaryContent, onClick: () => {
+                    }, title: title, disabled: props.disabled, className: dropContext.drop.isOver && classes.addRowIsOver }))
+                : _jsx(CompoundButtonEXSecondary, Object.assign({ ref: ref || dropContext.dragDropRef }, (props.buttonProps || {}), { icon: icon, secondaryContent: props.secondaryContent, onClick: () => {
                         hiddenFileInput.current.value = "";
                         hiddenFileInput.current.click();
-                    }, title: props.title, disabled: props.disabled })), _jsx("input", { type: "file", ref: hiddenFileInput, style: { display: "none" }, multiple: isMulti, accept: isNotEmptyArray(props.limitFileTypes) ? props.limitFileTypes.map(ft => `.${ft}`).join() : undefined, onChange: (e) => {
-                    if (e.target.files && e.target.files.length > 0) {
-                        if (isMulti) {
-                            if (isFunction(props.onChange)) {
-                                props.onChange(e.target.files);
-                            }
-                        }
-                        else {
-                            const fileUploaded = e.target.files && e.target.files[0];
-                            if (isFunction(props.onChange)) {
-                                props.onChange(fileUploaded);
-                            }
-                            if (isFunction(props.asBase64) && fileUploaded) {
-                                const reader = new FileReader();
-                                reader.onloadend = () => {
-                                    console.log(reader.result);
-                                    if (!isNullOrEmptyString(reader.result))
-                                        props.asBase64(reader.result);
-                                };
-                                reader.readAsDataURL(fileUploaded);
-                            }
-                        }
-                    }
-                } })] });
+                    }, title: title, disabled: props.disabled, className: dropContext.drop.isOver && classes.addRowIsOver })), _jsx("input", { type: "file", ref: hiddenFileInput, style: { display: "none" }, multiple: isMulti, accept: isNotEmptyArray(props.limitFileTypes) ? props.limitFileTypes.map(ft => `.${ft}`).join() : undefined, onChange: (e) => __awaiter(void 0, void 0, void 0, function* () { return onGotFiles(e.target.files); }) })] });
 });
+function getFileAsBase64(file) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return new Promise(resolve => {
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                if (!isNullOrEmptyString(reader.result))
+                    resolve({ filename: file.name, base64: reader.result });
+                else {
+                    console.warn("Empty file selected");
+                    resolve(null);
+                }
+            };
+            reader.readAsDataURL(file);
+        });
+    });
+}
 //# sourceMappingURL=file-upload.js.map

package/dist/controls/file-upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.js","sourceRoot":"","sources":["../../src/controls/file-upload.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"file-upload.js","sourceRoot":"","sources":["../../src/controls/file-upload.tsx"],"names":[],"mappings":"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"}

package/dist/controls/kwizoverflow.js

@@ -2,12 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Menu, MenuButton, MenuItem, MenuList, MenuPopover, MenuTrigger, Overflow, OverflowItem, useIsOverflowItemVisible, useOverflowMenu } from "@fluentui/react-components";
 import { MoreHorizontalFilled } from "@fluentui/react-icons";
 import { isNumber } from '@kwiz/common';
+import { useKWIZFluentContext } from "../helpers/context";
 const OverflowMenu = (props) => {
+    const ctx = useKWIZFluentContext();
     const { ref, isOverflowing, overflowCount } = useOverflowMenu();
     if (!isOverflowing) {
         return null;
     }
-    let menu = _jsxs(Menu, { children: [_jsx(MenuTrigger, { disableButtonEnhancement: true, children: props.menuTrigger
+    let menu = _jsxs(Menu, { mountNode: ctx.mountNode, children: [_jsx(MenuTrigger, { disableButtonEnhancement: true, children: props.menuTrigger
                     ? props.menuTrigger(props.menuRef || ref, overflowCount)
                     : _jsx(MenuButton, { icon: _jsx(MoreHorizontalFilled, {}), ref: props.menuRef || ref, "aria-label": "More items", appearance: "subtle" }) }), _jsx(MenuPopover, { children: _jsx(MenuList, { children: props.items.map((item, index) => (_jsx(OverflowMenuItem, Object.assign({}, props, { item: item, index: index }), props.getKey(item, index)))) }) })] });
     return (props.menuWrapper

package/dist/controls/kwizoverflow.js.map

@@ -1 +1 @@
-{"version":3,"file":"kwizoverflow.js","sourceRoot":"","sources":["../../src/controls/kwizoverflow.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"kwizoverflow.js","sourceRoot":"","sources":["../../src/controls/kwizoverflow.tsx"],"names":[],"mappings":"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"}

package/dist/helpers/drag-drop/exports.d.ts

@@ -1,4 +1,12 @@
+import { NativeTypes } from 'react-dnd-html5-backend';
+import { iDraggedItemType } from './use-draggable';
+import { iDroppableProps } from './use-droppable';
 export { DragDropContainer } from './drag-drop-container';
 export { DragDropContextProvider, useDragDropContext } from "./drag-drop-context";
 export type { iDraggedItemType } from "./use-draggable";
 export type { iDroppableProps } from "./use-droppable";
+type fileNativeType = typeof NativeTypes.FILE;
+interface dragFiles extends iDraggedItemType<fileNativeType> {
+    files: FileList;
+}
+export type dropFiles = iDroppableProps<fileNativeType, dragFiles>;

package/dist/helpers/drag-drop/exports.js.map

@@ -1 +1 @@
-{"version":3,"file":"exports.js","sourceRoot":"","sources":["../../../src/helpers/drag-drop/exports.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"exports.js","sourceRoot":"","sources":["../../../src/helpers/drag-drop/exports.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export * from './controls/accordion';
 export * from './controls/button';
+export * from './controls/canvas/DrawPad';
 export * from './controls/centered';
+export * from './controls/ColorPickerDialog';
 export * from './controls/date';
 export * from './controls/divider';
 export * from './controls/dropdown';

package/dist/index.js

@@ -1,6 +1,8 @@
 export * from './controls/accordion';
 export * from './controls/button';
+export * from './controls/canvas/DrawPad';
 export * from './controls/centered';
+export * from './controls/ColorPickerDialog';
 export * from './controls/date';
 export * from './controls/divider';
 export * from './controls/dropdown';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE5E,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE5E,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kwiz/fluentui",
-    "version": "1.0.39",
+    "version": "1.0.41",
     "description": "KWIZ common controls for FluentUI",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",
@@ -56,12 +56,13 @@
         "typescript": "^5.3.3"
     },
     "dependencies": {
-        "@kwiz/common": "^1.0.83",
+        "@kwiz/common": "^1.0.84",
         "esbuild": "^0.19.12",
         "get-tsconfig": "^4.7.2",
         "jodit-react": "^4.1.2",
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
+        "react-pick-color": "^2.0.0",
         "resolve-pkg-maps": "^1.0.0"
     },
     "peerDependencies": {

package/src/controls/ColorPickerDialog.tsx

@@ -0,0 +1,76 @@
+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/hooks";
+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;
+}
+
+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
+                title="Open color picker"
+                icon={<ColorRegular
+                    color={selectedColor} />
+                }
+                onClick={() => 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
+                    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
+                        title="Open color picker"
+                        icon={<ColorRegular
+                            color={selectedColor} />
+                        }
+                        onClick={() => setIsOpen(true)} />}
+                />
+            </Field>}
+        {isOpen && <Prompter maxWidth={332}
+            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/canvas/CustomEventTargetBase.ts

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,195 @@
+import { tokens } from "@fluentui/react-components";
+import { ArrowUploadRegular, CalligraphyPenRegular, DismissRegular } from "@fluentui/react-icons";
+import { ImageFileTypes, debounce, isElement, isFunction, isNullOrEmptyArray, isNullOrEmptyString } from "@kwiz/common";
+import * as React from "react";
+import { useStateEX } from "../../helpers/hooks";
+import { ButtonEX } from "../button";
+import { ColorPickerEx } from "../ColorPickerDialog";
+import { FileUpload } from "../file-upload";
+import { Horizontal } from "../horizontal";
+import { Vertical } from "../vertical";
+import DrawPadManager from "./DrawPadManager";
+
+interface iProps {
+    BackgroundColor?: string;
+    BorderColor?: string;
+    LineColor?: string;
+    Width?: number;
+    Height?: number;
+    Value?: string;
+    OnChange?: (newValue: string) => void;
+    ReadOnly?: boolean;
+    HideButtons?: boolean;
+    SignAsText?: string;
+}
+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);
+    const [loadedFontNames, setloadedFontNames] = useStateEX<string[]>([]);
+
+    const canvasArea: React.RefObject<HTMLCanvasElement> = React.useRef();
+    const containerEle = React.useRef<HTMLDivElement>();
+
+    //load font for sign as text
+    React.useEffect(() => {
+        if (props.SignAsText && isNullOrEmptyArray(loadedFontNames)) {
+            let DancingScriptFont = new FontFace(
+                "Dancing Script",
+                "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"
+                }
+            );
+
+            DancingScriptFont.load().then(async loadedFont => {
+                document.fonts.add(loadedFont);
+                await document.fonts.ready;
+                setloadedFontNames(["Dancing Script"]);
+            });
+        }
+    }, [props.SignAsText, loadedFontNames]);
+
+    //setup manager
+    React.useEffect(() => {
+        if (!props.ReadOnly) {
+            //this gets called after each render...
+            if (!manager) {
+                if (canvasArea.current) {
+                    let manager = new DrawPadManager(canvasArea.current);
+                    setmanager(manager).then(() => UpdateCanvas());
+                    if (isFunction(props.OnChange)) {
+                        manager.addEventListener("endStroke", () => {
+                            let value = "";
+                            if (!manager.isEmpty()) {
+                                value = manager.toDataURL("image/png");
+                            }
+                            if (!canUndo)
+                                setcanUndo(true);
+
+                            props.OnChange(value);
+                        });
+                    }
+                }
+            }
+            else {
+                UpdateCanvas();
+            }
+        }
+    });//run every time after render
+
+    //set value to canvas
+    const UpdateCanvas = React.useCallback(debounce(() => {
+        if (manager) {
+            manager.penColor.value = LineColor;
+
+            if (!isNullOrEmptyString(props.Value))
+                manager.fromDataURL(props.Value, { clear: true });
+            else
+                manager.clear();
+        }
+    }, 200, this), [manager, props.Value, LineColor]);
+
+    const onSignAs = React.useCallback(() => {
+        let canvas = canvasArea.current;
+        if (!isElement(canvas)) {
+            return;
+        }
+
+        let height = canvas.clientHeight;
+        let width = canvas.clientWidth;
+        let fontName = loadedFontNames[0];
+        let signAs = props.SignAsText;
+
+        let ctx = canvas.getContext("2d");
+        ctx.fillStyle = LineColor || LineColor || tokens.colorBrandForeground1;
+
+        let fontSize = 0.6 * height;
+        ctx.font = `${fontSize}px ${fontName}`;
+        let textMeasurement = ctx.measureText(signAs);
+        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(signAs);
+            textWidth = textMeasurement.width;
+        }
+
+        let x = (width - textWidth) / 2;
+        let y = 0.6 * height; //baseline not starting point
+        ctx.fillText(signAs, x, y, width);
+        let url = canvas.toDataURL("image/png");
+        props.OnChange(url);
+    }, [canvasArea, props.OnChange]);
+
+
+
+    let width = props.Width > 0 ? props.Width : 400;
+    let height = props.Height > 0 ? props.Height : 200;
+
+    return <div ref={containerEle}><Horizontal>
+        <div style={{
+            position: "relative",
+            width: width,
+            height: height,
+            backgroundColor: props.BackgroundColor,
+            border: `1px solid ${props.BorderColor || tokens.colorNeutralStroke1}`
+        }}>
+            {props.ReadOnly
+                ? <img src={props.Value} style={{ position: "absolute", left: 0, top: 0, width: width, height: height }} />
+                :
+                <div style={{ position: "absolute", left: 0, top: 0, width: width, height: height }}>
+                    <canvas
+                        ref={canvasArea}
+                        style={{
+                            touchAction: "none",
+                            userSelect: "none",
+                            position: "absolute",
+                            left: 0,
+                            top: 0,
+                            width: width,
+                            height: height,
+                            border: tokens.colorBrandStroke1
+                        }} />
+                    {isNullOrEmptyString(props.Value)
+                        && !isNullOrEmptyString(props.SignAsText)
+                        && !isNullOrEmptyArray(loadedFontNames)
+                        && <ButtonEX
+                            style={{
+                                position: "absolute",
+                                bottom: 0,
+                                border: 0,
+                                margin: 0,
+                                right: 0,
+                                height: 16
+                            }}
+                            icon={<CalligraphyPenRegular />}
+                            title={`Sign as ${props.SignAsText}`}
+                            onClick={() => {
+                                onSignAs();
+                            }}
+                        />}
+                </div>
+            }
+        </div>
+        {!props.ReadOnly && !props.HideButtons && <Vertical nogap>
+            <ColorPickerEx buttonOnly value={props.LineColor} onChange={newColor => {
+                setLineColor(newColor);
+            }} />
+            <ButtonEX 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
+                props.OnChange("");
+            }} />
+            <FileUpload title="Load background image" icon={<ArrowUploadRegular />} limitFileTypes={ImageFileTypes} asBase64={base64 => {
+                props.OnChange(base64[0].base64);//this will trigger a change and state update
+                //self.state.manager.fromDataURL(base64);//this will just set the image to the canvas but won't trigger a change
+            }} />
+        </Vertical>}
+    </Horizontal>
+    </div>;
+}