pxt-core 7.5.8 → 7.5.11

package/react-common/components/controls/DraggableGraph.tsx

@@ -0,0 +1,242 @@
+import * as React from "react";
+import { ControlProps, screenToSVGCoord, clientCoord, classList } from "../util";
+
+export interface DraggableGraphProps extends ControlProps {
+    interpolation: pxt.assets.SoundInterpolation;
+    min: number;
+    max: number;
+    squiggly?: boolean;
+
+    aspectRatio: number; // width / height
+    onPointChange: (index: number, newValue: number) => void;
+
+    // Points are equally spaced y-values along the width of the graph
+    points: number[];
+    handleStartAnimationRef?: (startAnimation: (duration: number) => void) => void;
+}
+
+export const DraggableGraph = (props: DraggableGraphProps) => {
+    const {
+        interpolation,
+        min,
+        max,
+        points,
+        handleStartAnimationRef,
+        onPointChange,
+        id,
+        className,
+        ariaLabel,
+        ariaHidden,
+        ariaDescribedBy,
+        role,
+        aspectRatio,
+        squiggly
+    } = props;
+
+    const width = 1000;
+    const height = (1 / aspectRatio) * width;
+
+    const unit = width / 40;
+    const halfUnit = unit / 2;
+
+    const yOffset = unit;
+    const availableHeight = height - unit * 5 / 2;
+    const availableWidth = width - halfUnit * 3;
+
+    const xSlice = availableWidth / (points.length - 1);
+    const yScale = availableHeight / (max - min);
+
+    const [dragIndex, setDragIndex] = React.useState(-1);
+
+    const svgCoordToValue = (point: DOMPoint) =>
+        (1 - ((point.y - yOffset) / availableHeight)) * (max - min) + min;
+
+    let animationRef: number;
+
+    const throttledSetDragValue = (index: number, value: number) => {
+        if (animationRef) cancelAnimationFrame(animationRef);
+        animationRef = requestAnimationFrame(() => {
+            handlePointChange(index, value);
+        });
+    }
+
+    const handlePointChange = (index: number, newValue: number) => {
+        onPointChange(index, Math.max(Math.min(newValue, max), min));
+    }
+
+    const refs: SVGRectElement[] = [];
+
+    const getPointRefHandler = (index: number) =>
+        (ref: SVGRectElement) => {
+            if (!ref) return;
+
+            refs[index] = ref;
+        }
+
+    React.useEffect(() => {
+        refs.forEach((ref, index) => {
+            ref.onpointerdown = ev => {
+                if (dragIndex !== -1) return;
+                const coord = clientCoord(ev);
+                const svg = screenToSVGCoord(ref.ownerSVGElement, coord);
+                setDragIndex(index);
+                throttledSetDragValue(index, svgCoordToValue(svg));
+            };
+
+            ref.onpointermove = ev => {
+                if (dragIndex !== index) return;
+                const coord = clientCoord(ev);
+                const svg = screenToSVGCoord(ref.ownerSVGElement, coord);
+                throttledSetDragValue(index, svgCoordToValue(svg));
+            };
+
+            ref.onpointerleave = ev => {
+                if (dragIndex !== index) return;
+                setDragIndex(-1);
+                const coord = clientCoord(ev);
+                const svg = screenToSVGCoord(ref.ownerSVGElement, coord);
+                throttledSetDragValue(index, svgCoordToValue(svg));
+            };
+
+            ref.onpointerup = ev => {
+                if (dragIndex !== index) return;
+                setDragIndex(-1);
+                const coord = clientCoord(ev);
+                const svg = screenToSVGCoord(ref.ownerSVGElement, coord);
+                throttledSetDragValue(index, svgCoordToValue(svg));
+            };
+        });
+    }, [dragIndex, onPointChange])
+
+    const getValue = (index: number) => {
+        return points[index];
+    }
+
+    const handleRectAnimateRef = (ref: SVGAnimateElement) => {
+        if (ref && handleStartAnimationRef) {
+            handleStartAnimationRef((duration: number) => {
+                if (duration <= 0) duration = 1;
+                ref.setAttribute("dur", duration + "ms");
+                (ref as any).beginElement();
+            })
+        }
+    }
+
+    return <div
+        id={id}
+        className={classList("common-draggable-graph", className)}
+        aria-label={ariaLabel}
+        aria-hidden={ariaHidden}
+        aria-describedby={ariaDescribedBy}
+        role={role}>
+        <svg viewBox={`0 0 ${width} ${height}`} xmlns="http://www.w3.org/2000/svg">
+            {points.map((val, index) => {
+                const isNotLast = index < points.length - 1;
+                const x = Math.max(xSlice * index - halfUnit, unit);
+                const y = yOffset + Math.max(yScale * (max - getValue(index)) - halfUnit, halfUnit);
+
+                // The logarithmic interpolation is perpendicular to the x-axis at the beginning, so
+                // flip the label to the other side if it would overlap path
+                const shouldFlipLabel = isNotLast && interpolation === "logarithmic" && getValue(index + 1) > getValue(index);
+
+                return <g key={index}>
+                        <rect
+                            className="draggable-graph-point"
+                            x={x}
+                            y={y}
+                            width={unit}
+                            height={unit}
+                            />
+                        {isNotLast &&
+                            <path
+                                className="draggable-graph-path"
+                                stroke="black"
+                                fill="none"
+                                strokeWidth="2px"
+                                d={getInterpolationPath(
+                                    x + halfUnit,
+                                    y + halfUnit,
+                                    Math.max(xSlice * (index + 1), 0),
+                                    yOffset + Math.max(yScale * (max - getValue(index + 1)) - halfUnit, halfUnit) + halfUnit,
+                                    interpolation,
+                                    squiggly
+                                )}
+                            />
+                        }
+                        <text x={x + halfUnit} y={shouldFlipLabel ? y + unit * 2 : y - halfUnit} fontSize={unit} className="common-draggable-graph-text">
+                            {Math.round(getValue(index))}
+                        </text>
+                        <rect
+                            className="draggable-graph-surface"
+                            ref={getPointRefHandler(index)}
+                            x={x - xSlice / 6}
+                            y={0}
+                            width={xSlice / 3}
+                            height={height}
+                            fill="white"
+                            opacity={0}
+                            />
+                    </g>
+            })}
+            <rect x="-2" y="0" width="1" height="100%" fill="grey">
+                <animate ref={handleRectAnimateRef} attributeName="x" from="2%" to="98%" dur="1000ms" begin="indefinite" />
+            </rect>
+        </svg>
+    </div>
+}
+
+function getInterpolationPath(x0: number, y0: number, x1: number, y1: number, curve: pxt.assets.SoundInterpolation, squiggly: boolean) {
+    let pathFunction: (x: number) => number;
+
+    switch (curve) {
+        case "linear":
+            pathFunction = x => y0 + (x - x0) * (y1 - y0) / (x1 - x0);
+            break;
+        case "curve":
+            pathFunction = x => y0 + (y1 - y0) * Math.sin((x - x0) / (x1 - x0) * (Math.PI / 2));
+            break;
+        case "logarithmic":
+            pathFunction = x => y0 + Math.log10(1 + 9 * ((x - x0) / (x1 - x0))) * (y1 - y0)
+            break;
+    }
+
+    const slices = 20;
+    const slice = (x1 - x0) / slices;
+
+    const parts: string[] = [`M ${x0} ${y0}`];
+
+    let prevX = x0;
+    let prevY = y0;
+
+    let currX = x0;
+    let currY = y0;
+
+    const squiggleAmplitude = 40;
+
+    for (let i = 1; i < slices + 1; i++) {
+        currX = x0 + i * slice;
+        currY = pathFunction(currX);
+        if (!squiggly) {
+            parts.push(`L ${currX} ${currY}`);
+            continue;
+        }
+
+        const angle = Math.atan2(currY - prevY, currX - prevX);
+        const distance = Math.sqrt((currY - prevY) ** 2 + (currX - prevX) ** 2);
+
+        const cx1 = prevX + Math.cos(angle) * (distance / 4) + squiggleAmplitude * Math.cos(angle + Math.PI / 2);
+        const cy1 = prevY + Math.sin(angle) * (distance / 4) + squiggleAmplitude * Math.sin(angle + Math.PI / 2);
+
+        parts.push(`Q ${cx1} ${cy1} ${prevX + Math.cos(angle) * (distance / 2)} ${prevY + Math.sin(angle) * (distance / 2)}`)
+
+        const cx2 = prevX + Math.cos(angle) * (3 * distance / 4) - squiggleAmplitude * Math.cos(angle + Math.PI / 2);
+        const cy2 = prevY + Math.sin(angle) * (3 * distance / 4) - squiggleAmplitude * Math.sin(angle + Math.PI / 2);
+
+        parts.push(`Q ${cx2} ${cy2} ${currX} ${currY}`)
+
+        prevX = currX;
+        prevY = currY;
+    }
+
+    return parts.join(" ");
+}

package/react-common/components/controls/Dropdown.tsx

@@ -0,0 +1,121 @@
+import * as React from "react";
+import { classList, ControlProps } from "../util";
+import { Button, ButtonViewProps } from "./Button";
+import { FocusList } from "./FocusList";
+
+export interface DropdownItem extends ButtonViewProps {
+    id: string;
+    role?: "option" | undefined;
+}
+
+export interface DropdownProps extends ControlProps {
+    id: string;
+    selectedId: string;
+    items: DropdownItem[];
+    onItemSelected: (id: string) => void;
+    tabIndex?: number;
+}
+
+export const Dropdown = (props: DropdownProps) => {
+    const {
+        id,
+        className,
+        ariaHidden,
+        ariaLabel,
+        role,
+        items,
+        tabIndex,
+        selectedId,
+        onItemSelected
+    } = props;
+
+    const [ expanded, setExpanded ] = React.useState(false);
+
+    let container: HTMLDivElement;
+
+    const handleContainerRef = (ref: HTMLDivElement) => {
+        if (!ref) return;
+        container = ref;
+    }
+
+    const onMenuButtonClick = () => {
+        setExpanded(!expanded);
+    }
+
+    const onBlur = (e: React.FocusEvent) => {
+        if (!container) return;
+        if (expanded && !container.contains(e.relatedTarget as HTMLElement)) setExpanded(false);
+    }
+
+    const classes = classList("common-dropdown", className);
+
+    const selected = items.find(item => item.id === selectedId) || items[0];
+    const onItemFocused = (element: HTMLElement) => {
+        if (element.id && items.some(item => item.id === element.id)) onItemSelected(element.id);
+    }
+
+    const onKeyDown = (e: React.KeyboardEvent) => {
+        const selectedIndex = items.indexOf(selected)
+
+        if (e.key === "ArrowDown") {
+            if (selectedIndex < items.length - 1) {
+                onItemSelected(items[selectedIndex + 1].id);
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        }
+        else if (e.key === "ArrowUp") {
+            if (selectedIndex > 0) {
+                onItemSelected(items[selectedIndex - 1].id);
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        }
+        else if (e.key === "Enter") {
+            setExpanded(true);
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }
+
+    return <div className={classes} ref={handleContainerRef} onBlur={onBlur}>
+        <Button
+            {...selected}
+            id={id}
+            tabIndex={tabIndex}
+            rightIcon={expanded ? "fas fa-chevron-up" : "fas fa-chevron-down"}
+            role={role}
+            className={classList("common-dropdown-button", expanded && "expanded", selected.className)}
+            onClick={onMenuButtonClick}
+            onKeydown={onKeyDown}
+            ariaHasPopup="listbox"
+            ariaExpanded={expanded}
+            ariaLabel={ariaLabel}
+            ariaHidden={ariaHidden}
+            />
+        {expanded &&
+            <FocusList role="listbox"
+                className="common-menu-dropdown-pane common-dropdown-shadow"
+                childTabStopId={selectedId}
+                aria-labelledby={id}
+                useUpAndDownArrowKeys={true}
+                onItemReceivedFocus={onItemFocused}>
+                    <ul role="presentation">
+                        { items.map(item =>
+                            <li key={item.id} role="presentation">
+                                <Button
+                                    {...item}
+                                    className={classList("common-dropdown-item", item.className)}
+                                    onClick={() => {
+                                        setExpanded(false);
+                                        onItemSelected(item.id);
+                                    }}
+                                    ariaSelected={item.id === selectedId}
+                                    role="option"/>
+                            </li>
+                        )}
+                    </ul>
+            </FocusList>
+        }
+    </div>
+}

package/react-common/components/controls/FocusList.tsx

@@ -4,6 +4,8 @@ import { ContainerProps } from "../util";
 export interface FocusListProps extends ContainerProps {
     role: string;
     childTabStopId?: string;
+    useUpAndDownArrowKeys?: boolean;
+    onItemReceivedFocus?: (item: HTMLElement) => void;
 }
 
 /**
@@ -23,6 +25,8 @@ export const FocusList = (props: FocusListProps) => {
         ariaLabel,
         childTabStopId,
         children,
+        onItemReceivedFocus,
+        useUpAndDownArrowKeys
     } = props;
 
     let focusableElements: HTMLElement[];
@@ -59,6 +63,11 @@ export const FocusList = (props: FocusListProps) => {
         const target = document.activeElement as HTMLElement;
         const index = focusableElements.indexOf(target);
 
+        const focus = (element: HTMLElement) => {
+            element.focus();
+            if (onItemReceivedFocus) onItemReceivedFocus(element);
+        }
+
         if (index === -1 && target !== focusList) return;
 
         if (e.key === "Enter" || e.key === " ") {
@@ -73,33 +82,33 @@ export const FocusList = (props: FocusListProps) => {
                 target.dispatchEvent(new Event("click"));
             }
         }
-        else if (e.key === "ArrowRight") {
+        else if (e.key === (useUpAndDownArrowKeys ? "ArrowDown" : "ArrowRight")) {
             if (index === focusableElements.length - 1 || target === focusList) {
-                focusableElements[0].focus();
+                focus(focusableElements[0]);
             }
             else {
-                focusableElements[index + 1].focus();
+                focus(focusableElements[index + 1]);
             }
             e.preventDefault();
             e.stopPropagation();
         }
-        else if (e.key === "ArrowLeft") {
+        else if (e.key === (useUpAndDownArrowKeys ? "ArrowUp" : "ArrowLeft")) {
             if (index === 0 || target === focusList) {
-                focusableElements[focusableElements.length - 1].focus();
+                focus(focusableElements[focusableElements.length - 1]);
             }
             else {
-                focusableElements[Math.max(index - 1, 0)].focus();
+                focus(focusableElements[Math.max(index - 1, 0)]);
             }
             e.preventDefault();
             e.stopPropagation();
         }
         else if (e.key === "Home") {
-            focusableElements[0].focus();
+            focus(focusableElements[0]);
             e.preventDefault();
             e.stopPropagation();
         }
         else if (e.key === "End") {
-            focusableElements[focusableElements.length - 1].focus();
+            focus(focusableElements[focusableElements.length - 1]);
             e.preventDefault();
             e.stopPropagation();
         }

package/react-common/components/controls/Input.tsx

@@ -19,6 +19,7 @@ export interface InputProps extends ControlProps {
     onChange?: (newValue: string) => void;
     onEnterKey?: (value: string) => void;
     onIconClick?: (value: string) => void;
+    onBlur?: (value: string) => void;
 }
 
 export const Input = (props: InputProps) => {
@@ -41,10 +42,11 @@ export const Input = (props: InputProps) => {
         selectOnClick,
         onChange,
         onEnterKey,
-        onIconClick
+        onIconClick,
+        onBlur
     } = props;
 
-    const [value, setValue] = React.useState(initialValue || "");
+    const [value, setValue] = React.useState(undefined);
 
     const clickHandler = (evt: React.MouseEvent<any>) => {
         if (selectOnClick) {
@@ -76,6 +78,13 @@ export const Input = (props: InputProps) => {
         if (onIconClick) onIconClick(value);
     }
 
+    const blurHandler = () => {
+        if (onBlur) {
+            onBlur(value);
+        }
+        setValue(undefined);
+    }
+
     return (
         <div className={classList("common-input-wrapper", disabled && "disabled", className)}>
             {label && <label className="common-input-label" htmlFor={id}>
@@ -92,11 +101,12 @@ export const Input = (props: InputProps) => {
                     aria-hidden={ariaHidden}
                     type={type || "text"}
                     placeholder={placeholder}
-                    value={value || ''}
+                    value={value || initialValue || ""}
                     readOnly={!!readOnly}
                     onClick={clickHandler}
                     onChange={changeHandler}
                     onKeyDown={enterKeyHandler}
+                    onBlur={blurHandler}
                     autoComplete={autoComplete ? "" : "off"}
                     autoCorrect={autoComplete ? "" : "off"}
                     autoCapitalize={autoComplete ? "" : "off"}

package/react-common/components/controls/RadioButtonGroup.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { classList, ControlProps } from "../util";
+import { FocusList } from "./FocusList";
+
+export interface RadioButtonGroupProps extends ControlProps {
+    id: string;
+    choices: RadioGroupChoice[];
+    selectedId: string;
+    onChoiceSelected: (id: string) => void;
+}
+
+export interface RadioGroupChoice {
+    title: string;
+    id: string;
+    className?: string;
+    icon?: string;
+    label?: string | JSX.Element;
+}
+
+export const RadioButtonGroup = (props: RadioButtonGroupProps) => {
+    const {
+        id,
+        className,
+        ariaHidden,
+        ariaLabel,
+        role,
+        choices,
+        selectedId,
+        onChoiceSelected
+    } = props;
+
+    const onChoiceClick = (id: string) => {
+        onChoiceSelected(id);
+    }
+
+    return (
+        <FocusList id={id}
+            className={classList("common-radio-group", className)}
+            ariaHidden={ariaHidden}
+            ariaLabel={ariaLabel}
+            role={role || "radiogroup"}
+            childTabStopId={selectedId}>
+            {choices.map(choice =>
+                <div key={choice.id}
+                    className={classList("common-radio-choice", choice.className, selectedId === choice.id && "selected" )}
+                    onClick={() => onChoiceClick(choice.id)}>
+                    <input
+                        type="radio"
+                        id={choice.id}
+                        value={choice.id}
+                        name={id + "-input"}
+                        checked={selectedId === choice.id}
+                        tabIndex={0}
+                        aria-label={choice.label ? undefined : choice.title}
+                        aria-labelledby={choice.label ? choice.id + "-label" : undefined} />
+                    {choice.label &&
+                        <span id={choice.id + "-label"}>
+                            {choice.label}
+                        </span>
+                    }
+                    {choice.icon && <i className={choice.icon} aria-hidden={true}/>}
+                </div>
+            )}
+        </FocusList>
+    )
+}

package/react-common/components/util.tsx

@@ -68,4 +68,27 @@ export enum CheckboxStatus {
     Selected,
     Unselected,
     Waiting
+}
+
+export interface ClientCoordinates {
+    clientX: number;
+    clientY: number;
+}
+
+export function clientCoord(ev: PointerEvent | MouseEvent | TouchEvent): ClientCoordinates {
+    if ((ev as TouchEvent).touches) {
+        const te = ev as TouchEvent;
+        if (te.touches.length) {
+            return te.touches[0];
+        }
+        return te.changedTouches[0];
+    }
+    return (ev as PointerEvent | MouseEvent);
+}
+
+export function screenToSVGCoord(ref: SVGSVGElement, coord: ClientCoordinates) {
+    const screenCoord = ref.createSVGPoint();
+    screenCoord.x = coord.clientX;
+    screenCoord.y = coord.clientY;
+    return screenCoord.matrixTransform(ref.getScreenCTM().inverse());
 }

package/react-common/styles/controls/Button.less

@@ -192,6 +192,27 @@
     color: @buttonMenuTextColorInverted;
 }
 
+/****************************************************
+ *                   Link Buttons                   *
+ ****************************************************/
+
+.common-button.link-button {
+    background: none;
+    border: none;
+    padding: 0;
+    color: @buttonLinkColor;
+}
+
+.common-button.link-button:hover {
+    text-decoration: underline;
+}
+
+.common-button.link-button:focus::after {
+    outline: none;
+    border: none;
+    text-decoration: underline;
+}
+
 /****************************************************
  *                 High Contrast                    *
  ****************************************************/

package/react-common/styles/controls/DraggableGraph.less

@@ -0,0 +1,13 @@
+.common-draggable-graph-text {
+    user-select: none;
+    color: @commonTextColor;
+    text-anchor: middle;
+}
+
+.draggable-graph-point {
+    fill: @draggableGraphPointColor;
+}
+
+.draggable-graph-path {
+    stroke: @draggableGraphPointColor;
+}

package/react-common/styles/controls/Dropdown.less

@@ -0,0 +1,68 @@
+.common-dropdown {
+    position: relative;
+    width: fit-content;
+}
+
+.common-dropdown > .common-button {
+    display: block;
+    box-sizing: border-box;
+
+    color: @inputTextColor;
+    background-color: @inputBackgroundColor;
+    border: 1px solid @inputBorderColor;
+
+    min-width: 10rem;
+    border-radius: 2px;
+    padding: 0px 28px 0px 8px;
+    margin: 0px;
+    height: 32px;
+    line-height: 30px;
+    position: relative;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    text-align: left;
+
+    & > .common-button-flex > i.right {
+        position: absolute;
+        right: 0
+    }
+
+    &:focus::after {
+        outline: none;
+    }
+
+    &:focus {
+        border: 1px solid @inputBorderColorFocus;
+    }
+}
+
+.common-dropdown .common-button > .common-button-flex > i:first-child {
+    margin-right: 0.5rem;
+}
+
+.common-dropdown > .common-menu-dropdown-pane {
+    width: unset;
+    right: unset;
+    min-width: 100%;
+    left: 0;
+    z-index: 1;
+
+    li .common-button {
+        text-align: left;
+        width: 100%;
+        padding-left: 0.5rem;
+    }
+}
+
+.common-dropdown-shadow {
+    box-shadow: 0 3.2px 7.2px 0 rgb(0 0 0 ~"/ 13%"), 0 0.6px 1.8px 0 rgb(0 0 0 ~"/ 11%");
+}
+
+.common-dropdown.icon-preview > .common-button {
+    min-width: unset;
+
+    .common-button-label {
+        display: none;
+    }
+}