@kwiz/fluentui 1.0.73 → 1.0.75

package/src/controls/canvas/bezier.ts

@@ -1,110 +1,110 @@
-import { BasicPoint, Point } from './point';
-
-export class Bezier {
-    public static fromPoints(
-        points: Point[],
-        widths: { start: number; end: number; },
-    ): Bezier {
-        const c2 = this.calculateControlPoints(points[0], points[1], points[2]).c2;
-        const c3 = this.calculateControlPoints(points[1], points[2], points[3]).c1;
-
-        return new Bezier(points[1], c2, c3, points[2], widths.start, widths.end);
-    }
-
-    private static calculateControlPoints(
-        s1: BasicPoint,
-        s2: BasicPoint,
-        s3: BasicPoint,
-    ): {
-        c1: BasicPoint;
-        c2: BasicPoint;
-    } {
-        const dx1 = s1.x - s2.x;
-        const dy1 = s1.y - s2.y;
-        const dx2 = s2.x - s3.x;
-        const dy2 = s2.y - s3.y;
-
-        const m1 = { x: (s1.x + s2.x) / 2.0, y: (s1.y + s2.y) / 2.0 };
-        const m2 = { x: (s2.x + s3.x) / 2.0, y: (s2.y + s3.y) / 2.0 };
-
-        const l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
-        const l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
-
-        const dxm = m1.x - m2.x;
-        const dym = m1.y - m2.y;
-
-        const k = (l1 + l2) === 0 ? l2 : l2 / (l1 + l2);
-
-        const cm = { x: m2.x + dxm * k, y: m2.y + dym * k };
-
-        const tx = s2.x - cm.x;
-        const ty = s2.y - cm.y;
-
-        return {
-            c1: new Point(m1.x + tx, m1.y + ty),
-            c2: new Point(m2.x + tx, m2.y + ty),
-        };
-    }
-
-    public constructor(
-        public startPoint: Point,
-        public control2: BasicPoint,
-        public control1: BasicPoint,
-        public endPoint: Point,
-        public startWidth: number,
-        public endWidth: number,
-    ) { }
-
-    // Returns approximated length. Code taken from https://www.lemoda.net/maths/bezier-length/index.html.
-    public length(): number {
-        const steps = 10;
-        let length = 0;
-        let px;
-        let py;
-
-        for (let i = 0; i <= steps; i += 1) {
-            const t = i / steps;
-            const cx = this.point(
-                t,
-                this.startPoint.x,
-                this.control1.x,
-                this.control2.x,
-                this.endPoint.x,
-            );
-            const cy = this.point(
-                t,
-                this.startPoint.y,
-                this.control1.y,
-                this.control2.y,
-                this.endPoint.y,
-            );
-
-            if (i > 0) {
-                const xdiff = cx - (px as number);
-                const ydiff = cy - (py as number);
-
-                length += Math.sqrt(xdiff * xdiff + ydiff * ydiff);
-            }
-
-            px = cx;
-            py = cy;
-        }
-
-        return length;
-    }
-
-    // Calculate parametric value of x or y given t and the four point coordinates of a cubic bezier curve.
-    private point(
-        t: number,
-        start: number,
-        c1: number,
-        c2: number,
-        end: number,
-    ): number {
-        // prettier-ignore
-        return (start * (1.0 - t) * (1.0 - t) * (1.0 - t))
-            + (3.0 * c1 * (1.0 - t) * (1.0 - t) * t)
-            + (3.0 * c2 * (1.0 - t) * t * t)
-            + (end * t * t * t);
-    }
+import { BasicPoint, Point } from './point';
+
+export class Bezier {
+    public static fromPoints(
+        points: Point[],
+        widths: { start: number; end: number; },
+    ): Bezier {
+        const c2 = this.calculateControlPoints(points[0], points[1], points[2]).c2;
+        const c3 = this.calculateControlPoints(points[1], points[2], points[3]).c1;
+
+        return new Bezier(points[1], c2, c3, points[2], widths.start, widths.end);
+    }
+
+    private static calculateControlPoints(
+        s1: BasicPoint,
+        s2: BasicPoint,
+        s3: BasicPoint,
+    ): {
+        c1: BasicPoint;
+        c2: BasicPoint;
+    } {
+        const dx1 = s1.x - s2.x;
+        const dy1 = s1.y - s2.y;
+        const dx2 = s2.x - s3.x;
+        const dy2 = s2.y - s3.y;
+
+        const m1 = { x: (s1.x + s2.x) / 2.0, y: (s1.y + s2.y) / 2.0 };
+        const m2 = { x: (s2.x + s3.x) / 2.0, y: (s2.y + s3.y) / 2.0 };
+
+        const l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
+        const l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
+
+        const dxm = m1.x - m2.x;
+        const dym = m1.y - m2.y;
+
+        const k = (l1 + l2) === 0 ? l2 : l2 / (l1 + l2);
+
+        const cm = { x: m2.x + dxm * k, y: m2.y + dym * k };
+
+        const tx = s2.x - cm.x;
+        const ty = s2.y - cm.y;
+
+        return {
+            c1: new Point(m1.x + tx, m1.y + ty),
+            c2: new Point(m2.x + tx, m2.y + ty),
+        };
+    }
+
+    public constructor(
+        public startPoint: Point,
+        public control2: BasicPoint,
+        public control1: BasicPoint,
+        public endPoint: Point,
+        public startWidth: number,
+        public endWidth: number,
+    ) { }
+
+    // Returns approximated length. Code taken from https://www.lemoda.net/maths/bezier-length/index.html.
+    public length(): number {
+        const steps = 10;
+        let length = 0;
+        let px;
+        let py;
+
+        for (let i = 0; i <= steps; i += 1) {
+            const t = i / steps;
+            const cx = this.point(
+                t,
+                this.startPoint.x,
+                this.control1.x,
+                this.control2.x,
+                this.endPoint.x,
+            );
+            const cy = this.point(
+                t,
+                this.startPoint.y,
+                this.control1.y,
+                this.control2.y,
+                this.endPoint.y,
+            );
+
+            if (i > 0) {
+                const xdiff = cx - (px as number);
+                const ydiff = cy - (py as number);
+
+                length += Math.sqrt(xdiff * xdiff + ydiff * ydiff);
+            }
+
+            px = cx;
+            py = cy;
+        }
+
+        return length;
+    }
+
+    // Calculate parametric value of x or y given t and the four point coordinates of a cubic bezier curve.
+    private point(
+        t: number,
+        start: number,
+        c1: number,
+        c2: number,
+        end: number,
+    ): number {
+        // prettier-ignore
+        return (start * (1.0 - t) * (1.0 - t) * (1.0 - t))
+            + (3.0 * c1 * (1.0 - t) * (1.0 - t) * t)
+            + (3.0 * c2 * (1.0 - t) * t * t)
+            + (end * t * t * t);
+    }
 }

package/src/controls/canvas/point.ts

@@ -1,45 +1,45 @@
-// Interface for point data structure used e.g. in SignaturePad#fromData method
-export interface BasicPoint {
-    x: number;
-    y: number;
-    pressure: number;
-    time: number;
-}
-
-export class Point implements BasicPoint {
-    public x: number;
-    public y: number;
-    public pressure: number;
-    public time: number;
-
-    public constructor(x: number, y: number, pressure?: number, time?: number) {
-        if (isNaN(x) || isNaN(y)) {
-            throw new Error(`Point is invalid: (${x}, ${y})`);
-        }
-        this.x = +x;
-        this.y = +y;
-        this.pressure = pressure || 0;
-        this.time = time || Date.now();
-    }
-
-    public distanceTo(start: BasicPoint): number {
-        return Math.sqrt(
-            Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2),
-        );
-    }
-
-    public equals(other: BasicPoint): boolean {
-        return (
-            this.x === other.x &&
-            this.y === other.y &&
-            this.pressure === other.pressure &&
-            this.time === other.time
-        );
-    }
-
-    public velocityFrom(start: BasicPoint): number {
-        return this.time !== start.time
-            ? this.distanceTo(start) / (this.time - start.time)
-            : 0;
-    }
+// Interface for point data structure used e.g. in SignaturePad#fromData method
+export interface BasicPoint {
+    x: number;
+    y: number;
+    pressure: number;
+    time: number;
+}
+
+export class Point implements BasicPoint {
+    public x: number;
+    public y: number;
+    public pressure: number;
+    public time: number;
+
+    public constructor(x: number, y: number, pressure?: number, time?: number) {
+        if (isNaN(x) || isNaN(y)) {
+            throw new Error(`Point is invalid: (${x}, ${y})`);
+        }
+        this.x = +x;
+        this.y = +y;
+        this.pressure = pressure || 0;
+        this.time = time || Date.now();
+    }
+
+    public distanceTo(start: BasicPoint): number {
+        return Math.sqrt(
+            Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2),
+        );
+    }
+
+    public equals(other: BasicPoint): boolean {
+        return (
+            this.x === other.x &&
+            this.y === other.y &&
+            this.pressure === other.pressure &&
+            this.time === other.time
+        );
+    }
+
+    public velocityFrom(start: BasicPoint): number {
+        return this.time !== start.time
+            ? this.distanceTo(start) / (this.time - start.time)
+            : 0;
+    }
 }

package/src/controls/card-list.tsx

@@ -1,32 +1,32 @@
-import { makeStyles } from '@fluentui/react-components';
-import React from 'react';
-import { CardEX, iCardProps } from './card';
-import { Centered } from './centered';
-import { Horizontal } from './horizontal';
-
-const useStyles = makeStyles({
-    emptyList: {
-        position: "absolute", top: 0, bottom: 0, left: 0, right: 0,
-        display: "flex",
-        zIndex: -1
-    }
-});
-interface iProps {
-    cards: iCardProps[];
-    /** centered back-fill control */
-    backfill?: JSX.Element;
-}
-export const CardList: React.FunctionComponent<React.PropsWithChildren<iProps>> = (props) => {
-    const classes = useStyles();
-    return (
-        <Horizontal main wrap>
-            {props.backfill && <div className={classes.emptyList}>
-                <Centered>
-                    {props.backfill}
-                </Centered>
-            </div>}
-
-            {props.cards.map((card, idx) => <CardEX key={`i${idx}`} {...card} />)}
-        </Horizontal>
-    );
+import { makeStyles } from '@fluentui/react-components';
+import React from 'react';
+import { CardEX, iCardProps } from './card';
+import { Centered } from './centered';
+import { Horizontal } from './horizontal';
+
+const useStyles = makeStyles({
+    emptyList: {
+        position: "absolute", top: 0, bottom: 0, left: 0, right: 0,
+        display: "flex",
+        zIndex: -1
+    }
+});
+interface iProps {
+    cards: iCardProps[];
+    /** centered back-fill control */
+    backfill?: JSX.Element;
+}
+export const CardList: React.FunctionComponent<React.PropsWithChildren<iProps>> = (props) => {
+    const classes = useStyles();
+    return (
+        <Horizontal main wrap>
+            {props.backfill && <div className={classes.emptyList}>
+                <Centered>
+                    {props.backfill}
+                </Centered>
+            </div>}
+
+            {props.cards.map((card, idx) => <CardEX key={`i${idx}`} {...card} />)}
+        </Horizontal>
+    );
 }

package/src/controls/card.tsx

@@ -1,78 +1,78 @@
-import { Card, CardFooter, cardFooterClassNames, CardHeader, CardPreview, Label, makeStyles, tokens } from '@fluentui/react-components';
-import { FluentIcon, MoreVerticalRegular } from '@fluentui/react-icons';
-import { isNotEmptyArray, isNotEmptyString, isNullOrEmptyArray, isNullOrUndefined } from '@kwiz/common';
-import React from 'react';
-import { iMenuItemEX, MenuEx } from './menu';
-
-const useStyles = makeStyles({
-    card: {
-        height: '225px',
-        width: '190px',
-        [`& .${cardFooterClassNames.root}>button`]: {
-            display: "none"
-        },
-        "&:hover": {
-            backgroundColor: tokens.colorNeutralBackground1Hover,
-            [`& .${cardFooterClassNames.root}>button`]: {
-                display: "block"
-            }
-        }
-    },
-    previewContent: {
-        textAlign: "center",
-        backgroundColor: tokens.colorBrandBackground,
-        color: tokens.colorBrandBackground2
-    },
-    previewContentNoDescription: {
-        textAlign: "center",
-        color: tokens.colorBrandBackground,
-        paddingTop: '20%'
-    },
-    cardIcon: {
-        height: '120px',
-        width: '100px'
-
-    },
-    cardLabels: {
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        maxWidth: '166px'
-    },
-})
-
-export interface iCardProps {
-    title: string;
-    description?: string;
-    icon: FluentIcon;
-    menuItems?: iMenuItemEX[];
-    footer?: JSX.Element;
-    onClick: React.MouseEventHandler<HTMLDivElement>;
-}
-export const CardEX: React.FunctionComponent<React.PropsWithChildren<iCardProps>> = (props) => {
-    const classes = useStyles();
-    const hasDescription = isNotEmptyString(props.description);
-    const hasActions = isNotEmptyArray(props.menuItems) || !isNullOrUndefined(props.footer);
-    return (
-        <Card className={classes.card} onClick={props.onClick}>
-            <CardPreview>
-                <div className={hasDescription ? classes.previewContent : classes.previewContentNoDescription}>
-                    <props.icon className={classes.cardIcon} />
-                    {!hasDescription && <>
-                        <br />
-                        <Label>{props.title}</Label>
-                    </>}
-                </div>
-            </CardPreview>
-            {hasDescription && <CardHeader
-                header={<Label className={classes.cardLabels}>{props.title}</Label>}
-                description={<Label className={classes.cardLabels} size='small'>{props.description}</Label>}
-            />}
-            {hasActions && <CardFooter action={isNullOrEmptyArray(props.menuItems)
-                ? undefined
-                : <MenuEx trigger={{ title: 'more', icon: <MoreVerticalRegular /> }}
-                    items={props.menuItems} />}>
-                {props.footer}
-            </CardFooter>}
-        </Card>);
+import { Card, CardFooter, cardFooterClassNames, CardHeader, CardPreview, Label, makeStyles, tokens } from '@fluentui/react-components';
+import { FluentIcon, MoreVerticalRegular } from '@fluentui/react-icons';
+import { isNotEmptyArray, isNotEmptyString, isNullOrEmptyArray, isNullOrUndefined } from '@kwiz/common';
+import React from 'react';
+import { iMenuItemEX, MenuEx } from './menu';
+
+const useStyles = makeStyles({
+    card: {
+        height: '225px',
+        width: '190px',
+        [`& .${cardFooterClassNames.root}>button`]: {
+            display: "none"
+        },
+        "&:hover": {
+            backgroundColor: tokens.colorNeutralBackground1Hover,
+            [`& .${cardFooterClassNames.root}>button`]: {
+                display: "block"
+            }
+        }
+    },
+    previewContent: {
+        textAlign: "center",
+        backgroundColor: tokens.colorBrandBackground,
+        color: tokens.colorBrandBackground2
+    },
+    previewContentNoDescription: {
+        textAlign: "center",
+        color: tokens.colorBrandBackground,
+        paddingTop: '20%'
+    },
+    cardIcon: {
+        height: '120px',
+        width: '100px'
+
+    },
+    cardLabels: {
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        maxWidth: '166px'
+    },
+})
+
+export interface iCardProps {
+    title: string;
+    description?: string;
+    icon: FluentIcon;
+    menuItems?: iMenuItemEX[];
+    footer?: JSX.Element;
+    onClick: React.MouseEventHandler<HTMLDivElement>;
+}
+export const CardEX: React.FunctionComponent<React.PropsWithChildren<iCardProps>> = (props) => {
+    const classes = useStyles();
+    const hasDescription = isNotEmptyString(props.description);
+    const hasActions = isNotEmptyArray(props.menuItems) || !isNullOrUndefined(props.footer);
+    return (
+        <Card className={classes.card} onClick={props.onClick}>
+            <CardPreview>
+                <div className={hasDescription ? classes.previewContent : classes.previewContentNoDescription}>
+                    <props.icon className={classes.cardIcon} />
+                    {!hasDescription && <>
+                        <br />
+                        <Label>{props.title}</Label>
+                    </>}
+                </div>
+            </CardPreview>
+            {hasDescription && <CardHeader
+                header={<Label className={classes.cardLabels}>{props.title}</Label>}
+                description={<Label className={classes.cardLabels} size='small'>{props.description}</Label>}
+            />}
+            {hasActions && <CardFooter action={isNullOrEmptyArray(props.menuItems)
+                ? undefined
+                : <MenuEx trigger={{ title: 'more', icon: <MoreVerticalRegular /> }}
+                    items={props.menuItems} />}>
+                {props.footer}
+            </CardFooter>}
+        </Card>);
 }

package/src/controls/centered.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
-import { Horizontal } from './horizontal';
-import { Vertical } from './vertical';
-
-interface IProps {
-}
-export const Centered: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    return (
-        <Vertical main vCentered>
-            <Horizontal hCentered>
-                {props.children}
-            </Horizontal>
-        </Vertical>
-    );
+import React from 'react';
+import { Horizontal } from './horizontal';
+import { Vertical } from './vertical';
+
+interface IProps {
+}
+export const Centered: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
+    return (
+        <Vertical main vCentered>
+            <Horizontal hCentered>
+                {props.children}
+            </Horizontal>
+        </Vertical>
+    );
 }