@kwiz/fluentui 1.0.40 → 1.0.42

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: (e) => 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: (e) => 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,17 @@
+import * as React from "react";
+interface iProps {
+    BackgroundColor?: string;
+    BorderColor?: string;
+    LineColor?: string;
+    minWidth?: number;
+    minHeight?: number;
+    Value?: string;
+    OnChange?: (newValue: string) => void;
+    ReadOnly?: boolean;
+    SignAsText?: string;
+    HideUpload?: boolean;
+    HideClear?: boolean;
+    HideColorPicker?: boolean;
+}
+export declare const DrawPad: React.FunctionComponent<iProps>;
+export {};

package/dist/controls/canvas/DrawPad.js

@@ -0,0 +1,161 @@
+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 { useElementSize, 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 canvasContainerDiv = 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]);
+    const HideButtons = props.HideClear && props.HideColorPicker && props.HideUpload;
+    const sizer = useElementSize(canvasContainerDiv.current);
+    const [size, setSize] = useStateEX({});
+    React.useEffect(() => {
+        if (canvasContainerDiv.current) {
+            setSize({
+                width: canvasContainerDiv.current.clientWidth,
+                height: canvasContainerDiv.current.clientHeight,
+            });
+        }
+    }, [canvasContainerDiv, sizer]);
+    return _jsxs(Horizontal, { nogap: true, children: [_jsx("div", { ref: canvasContainerDiv, style: {
+                    flexGrow: 1,
+                    position: "relative",
+                    minWidth: props.minWidth,
+                    minHeight: props.minHeight,
+                    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: size.width, height: size.height } })
+                    :
+                        _jsxs("div", { style: { position: "absolute", left: 0, top: 0, width: size.width, height: size.height }, children: [_jsx("canvas", { ref: canvasArea, style: {
+                                        touchAction: "none",
+                                        userSelect: "none",
+                                        position: "absolute",
+                                        left: 0,
+                                        top: 0,
+                                        width: size.width,
+                                        height: size.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 && !HideButtons && _jsxs(Vertical, { nogap: true, children: [props.HideColorPicker || _jsx(ColorPickerEx, { buttonOnly: true, value: props.LineColor, onChange: newColor => {
+                            setLineColor(newColor);
+                        } }), props.HideClear || _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("");
+                        } }), props.HideUpload || _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;
+}