@kwiz/fluentui 1.0.40 → 1.0.41

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.40",
+    "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>;
+}