@kwiz/fluentui 1.0.40 → 1.0.42

package/src/controls/canvas/bezier.ts

@@ -0,0 +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);
+    }
+}

package/src/controls/canvas/point.ts

@@ -0,0 +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;
+    }
+}

package/src/controls/file-upload.tsx

@@ -107,6 +107,7 @@ export const FileUpload = React.forwardRef<HTMLButtonElement, (iProps)>((props,
             }
         }
     });
+    dropContext.dragDropContext
 
     return <>
         {isNullOrEmptyString(props.secondaryContent)

package/src/helpers/drag-drop/drag-drop-context.tsx

@@ -57,7 +57,6 @@ export function useDragDropContextProvider(): iDragDropContext {
         dragItem, setDragItem
     };
 
-
     return ctx;
 }
 
@@ -66,7 +65,7 @@ interface iProps {
 export const DragDropContextProvider: React.FunctionComponent<React.PropsWithChildren<iProps>> = (props) => {
     const provider = useDragDropContextProvider();
     return <DragDropContext.Provider value={provider}>
-        <DndProvider backend={HTML5Backend}>
+        <DndProvider backend={HTML5Backend} context={window}>
             {props.children}
         </DndProvider>
     </DragDropContext.Provider>;

package/src/helpers/hooks.tsx

@@ -146,6 +146,37 @@ export function useWindowSize() {
     }, useEffectOnlyOnMount);
     return windowSize;
 }
+export function useElementSize(elm: HTMLElement) {
+    // Initialize state with undefined width/height so server and client renders match
+    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+    const [elmSize, setELmSize] = useState<{
+        width: number,
+        height: number
+    }>({
+        width: undefined,
+        height: undefined
+    });
+    useEffect(() => {
+        if (elm) {
+            // Handler to call on elm resize
+            function handleResize() {
+                // Set elm width/height to state
+                setELmSize({
+                    width: (elm instanceof Window) ? elm.innerWidth : elm.clientWidth,
+                    height: (elm instanceof Window) ? elm.innerHeight : elm.clientHeight,
+                });
+            }
+            // Add event listener
+            const observer = new ResizeObserver(handleResize);
+            observer.observe(elm);
+            // Call handler right away so state gets updated with initial elm size
+            handleResize();
+            // Remove event listener on cleanup
+            return () => observer.disconnect();
+        }
+    }, [elm]);
+    return elmSize;
+}
 export function useIsInPrint() {
     // Initialize state with false
     const [printMode, setPrintMode] = useState<boolean>(false);

package/src/index.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';