@kwiz/fluentui 1.0.39 → 1.0.41

package/dist/controls/ColorPickerDialog.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export interface iProps {
+    label?: string;
+    value: string;
+    onChange: (newValue: string) => void;
+    required?: boolean;
+    showValidationErrors?: boolean;
+    underlined?: boolean;
+    width?: number;
+    buttonOnly?: boolean;
+    placeholder?: string;
+}
+export declare const ColorPickerEx: React.FunctionComponent<iProps>;

package/dist/controls/ColorPickerDialog.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 from 'react-pick-color';
+import { useEffectOnlyOnMount, useStateEX } from "../helpers/hooks";
+import { ButtonEX } from "./button";
+import { InputEx } from "./input";
+import { Prompter } from "./prompt";
+export const ColorPickerEx = (props) => {
+    const [isOpen, setIsOpen] = useStateEX(false);
+    const [selectedColor, setSelectedColor] = useStateEX(props.value);
+    const getColorCells = React.useCallback(() => {
+        let cells = [
+            "white", "black"
+        ];
+        return cells;
+    }, useEffectOnlyOnMount);
+    return _jsxs(_Fragment, { children: [props.buttonOnly
+                ? _jsx(ButtonEX, { title: "Open color picker", icon: _jsx(ColorRegular, { color: selectedColor }), onClick: () => setIsOpen(true) })
+                : _jsx(Field, { label: props.label, required: props.required === true, validationMessage: props.showValidationErrors && props.required === true && isNullOrEmptyString(selectedColor) ? "You can't leave this blank." : undefined, children: _jsx(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: _jsx(ButtonEX, { title: "Open color picker", icon: _jsx(ColorRegular, { color: selectedColor }), onClick: () => setIsOpen(true) }) }) }), isOpen && _jsx(Prompter, { maxWidth: 332, hideOk: true, hideCancel: true, onCancel: () => {
+                    if (isFunction(props.onChange)) {
+                        props.onChange(selectedColor);
+                    }
+                    setIsOpen(false);
+                }, showCancelInTitle: true, title: props.label || "Choose a color", children: _jsx(ColorPicker, { color: selectedColor, onChange: color => setSelectedColor(color.hex), presets: getColorCells() }) })] });
+};
+//# sourceMappingURL=ColorPickerDialog.js.map

package/dist/controls/ColorPickerDialog.js.map

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

package/dist/controls/canvas/CustomEventTargetBase.d.ts

@@ -0,0 +1,7 @@
+export declare class CustomEventTargetBase implements EventTarget {
+    private _et;
+    constructor();
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions): void;
+    dispatchEvent(event: Event): boolean;
+    removeEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: boolean | EventListenerOptions): void;
+}

package/dist/controls/canvas/CustomEventTargetBase.js

@@ -0,0 +1,22 @@
+export class CustomEventTargetBase {
+    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;
+        }
+    }
+    addEventListener(type, listener, options) {
+        this._et.addEventListener(type, listener, options);
+    }
+    dispatchEvent(event) {
+        return this._et.dispatchEvent(event);
+    }
+    removeEventListener(type, callback, options) {
+        this._et.removeEventListener(type, callback, options);
+    }
+}
+//# sourceMappingURL=CustomEventTargetBase.js.map

package/dist/controls/canvas/CustomEventTargetBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomEventTargetBase.js","sourceRoot":"","sources":["../../../src/controls/canvas/CustomEventTargetBase.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,qBAAqB;IAG9B;QACI,IAAI,CAAC;YACD,IAAI,CAAC,GAAG,GAAG,IAAI,WAAW,EAAE,CAAC;QACjC,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACb,6DAA6D;YAC7D,mEAAmE;YACnE,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC;QACxB,CAAC;IACL,CAAC;IAEM,gBAAgB,CACnB,IAAY,EACZ,QAAmD,EACnD,OAA2C;QAE3C,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;IACvD,CAAC;IAEM,aAAa,CAAC,KAAY;QAC7B,OAAO,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC;IAEM,mBAAmB,CACtB,IAAY,EACZ,QAAmD,EACnD,OAAwC;QAExC,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;IAC1D,CAAC;CACJ"}

package/dist/controls/canvas/DrawPad.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+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 declare const DrawPad: React.FunctionComponent<iProps>;
+export {};

package/dist/controls/canvas/DrawPad.js

@@ -0,0 +1,151 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+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";
+export const DrawPad = (props) => {
+    const [LineColor, setLineColor] = useStateEX(props.LineColor || tokens.colorBrandForeground1);
+    const [manager, setmanager] = useStateEX(null);
+    const [canUndo, setcanUndo] = useStateEX(false);
+    const [loadedFontNames, setloadedFontNames] = useStateEX([]);
+    const canvasArea = React.useRef();
+    const containerEle = React.useRef();
+    //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((loadedFont) => __awaiter(void 0, void 0, void 0, function* () {
+                document.fonts.add(loadedFont);
+                yield 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 _jsx("div", { ref: containerEle, children: _jsxs(Horizontal, { children: [_jsx("div", { style: {
+                        position: "relative",
+                        width: width,
+                        height: height,
+                        backgroundColor: props.BackgroundColor,
+                        border: `1px solid ${props.BorderColor || tokens.colorNeutralStroke1}`
+                    }, children: props.ReadOnly
+                        ? _jsx("img", { src: props.Value, style: { position: "absolute", left: 0, top: 0, width: width, height: height } })
+                        :
+                            _jsxs("div", { style: { position: "absolute", left: 0, top: 0, width: width, height: height }, children: [_jsx("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)
+                                        && _jsx(ButtonEX, { style: {
+                                                position: "absolute",
+                                                bottom: 0,
+                                                border: 0,
+                                                margin: 0,
+                                                right: 0,
+                                                height: 16
+                                            }, icon: _jsx(CalligraphyPenRegular, {}), title: `Sign as ${props.SignAsText}`, onClick: () => {
+                                                onSignAs();
+                                            } })] }) }), !props.ReadOnly && !props.HideButtons && _jsxs(Vertical, { nogap: true, children: [_jsx(ColorPickerEx, { buttonOnly: true, value: props.LineColor, onChange: newColor => {
+                                setLineColor(newColor);
+                            } }), _jsx(ButtonEX, { disabled: isNullOrEmptyString(props.Value), title: "Clear", icon: _jsx(DismissRegular, {}), onClick: () => {
+                                //can call clear on the canvas, or can call the onchange which will cause a re-draw
+                                props.OnChange("");
+                            } }), _jsx(FileUpload, { title: "Load background image", icon: _jsx(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
+                            } })] })] }) });
+};
+//# sourceMappingURL=DrawPad.js.map

package/dist/controls/canvas/DrawPad.js.map

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

package/dist/controls/canvas/DrawPadManager.d.ts

@@ -0,0 +1,84 @@
+import { CustomEventTargetBase } from './CustomEventTargetBase';
+import { BasicPoint } from './point';
+declare global {
+    interface CSSStyleDeclaration {
+        msTouchAction: string | null;
+    }
+}
+export type DrawPadEvent = MouseEvent | Touch | PointerEvent;
+export interface FromDataOptions {
+    clear?: boolean;
+}
+export interface PointGroupOptions {
+    dotSize: number;
+    minWidth: number;
+    maxWidth: number;
+    penColor: string;
+}
+export interface Options extends Partial<PointGroupOptions> {
+    minDistance?: number;
+    velocityFilterWeight?: number;
+    backgroundColor?: string;
+    throttle?: number;
+}
+export interface PointGroup extends PointGroupOptions {
+    points: BasicPoint[];
+}
+export default class DrawPadManager extends CustomEventTargetBase {
+    private canvas;
+    dotSize: import("@kwiz/common").DefaultProp<number>;
+    minWidth: import("@kwiz/common").DefaultProp<number>;
+    maxWidth: import("@kwiz/common").DefaultProp<number>;
+    penColor: import("@kwiz/common").DefaultProp<string>;
+    minDistance: import("@kwiz/common").DefaultProp<number>;
+    velocityFilterWeight: import("@kwiz/common").DefaultProp<number>;
+    backgroundColor: import("@kwiz/common").DefaultProp<string>;
+    throttle: import("@kwiz/common").DefaultProp<number>;
+    private _ctx;
+    private _drawningStroke;
+    private _isEmpty;
+    private _lastPoints;
+    private _data;
+    private _lastVelocity;
+    private _lastWidth;
+    private _strokeMoveUpdate;
+    constructor(canvas: HTMLCanvasElement, options?: Options);
+    clear(): void;
+    fromDataURL(dataUrl: string, options?: {
+        clear?: boolean;
+    }): Promise<void>;
+    toDataURL(type?: 'image/png' | 'image/jpeg' | 'image/svg+xml', encoderOptions?: number): string;
+    on(): void;
+    off(): void;
+    isEmpty(): boolean;
+    canUndo(): boolean;
+    undoLast(): void;
+    resizeCanvas(): void;
+    fromData(pointGroups: PointGroup[], { clear }?: FromDataOptions): void;
+    toData(): PointGroup[];
+    private _handleMouseDown;
+    private _handleMouseMove;
+    private _handleMouseUp;
+    private _handleTouchStart;
+    private _handleTouchMove;
+    private _handleTouchEnd;
+    private _handlePointerStart;
+    private _handlePointerMove;
+    private _handlePointerEnd;
+    private _strokeBegin;
+    private _strokeUpdate;
+    private _strokeEnd;
+    private _handlePointerEvents;
+    private _handleMouseEvents;
+    private _handleTouchEvents;
+    private _reset;
+    private _createPoint;
+    private _addPoint;
+    private _calculateCurveWidths;
+    private _strokeWidth;
+    private _drawCurveSegment;
+    private _drawCurve;
+    private _drawDot;
+    private _fromData;
+    private _toSVG;
+}