@khanacademy/perseus-editor 0.0.1 → 0.1.2

package/src/widgets/label-image/question-markers.jsx

@@ -0,0 +1,181 @@
+// @flow
+/**
+ * Controlled component to display question image and create markers to
+ * label image with answers from list of choices.
+ */
+
+import {Util, Dependencies, globalStyles} from "@khanacademy/perseus";
+import {StyleSheet, css} from "aphrodite";
+import * as React from "react";
+
+import Marker from "./marker.jsx";
+
+import type {MarkerType} from "@khanacademy/perseus";
+
+const {colors, typography} = globalStyles;
+
+type QuestionMarkersProps = {|
+    // The list of possible answers in a specific order.
+    choices: $ReadOnlyArray<string>,
+
+    // The question image properties.
+    imageUrl: string,
+    imageWidth: number,
+    imageHeight: number,
+
+    // The list of markers placed on the question image.
+    markers: $ReadOnlyArray<MarkerType>,
+
+    // Callback for when any of markers change.
+    onChange: (markers: $ReadOnlyArray<MarkerType>) => void,
+|};
+
+export default class QuestionMarkers extends React.Component<QuestionMarkersProps> {
+    // eslint-disable-next-line flowtype/no-mutable-array
+    _markers: Array<?Marker> = [];
+
+    openDropdownForMarkerIndices(indices: $ReadOnlyArray<number>) {
+        // Open answer selection dropdown for each of the specified markers.
+        indices.forEach((index) => {
+            if (this._markers[index]) {
+                this._markers[index].openDropdown();
+            }
+        });
+    }
+
+    handleImageDoubleClick: (e: SyntheticMouseEvent<>) => void = (
+        e: SyntheticMouseEvent<>,
+    ) => {
+        e.preventDefault();
+
+        const rect =
+            ((e.currentTarget: any): HTMLElement).getBoundingClientRect();
+
+        // Calculate marker position on the question image as percentage offset
+        // rounded to one decimal place.
+        const x =
+            Math.round(((e.clientX - rect.left) / rect.width) * 1000) / 10;
+        const y =
+            Math.round(((e.clientY - rect.top) / rect.height) * 1000) / 10;
+
+        const {markers, onChange} = this.props;
+
+        // Add the new marker to the end of the list.
+        onChange([
+            ...markers,
+            {
+                answers: [],
+                label: "",
+                x,
+                y,
+            },
+        ]);
+    };
+
+    render(): React.Element<"div"> {
+        const {choices, imageUrl, imageWidth, imageHeight, markers, onChange} =
+            this.props;
+
+        const staticUrl = Dependencies.getDependencies().staticUrl;
+
+        // TODO(michaelpolyak): If a Graphie image is specified, only its SVG
+        // layer will be rendered, as when rendering the full Graphie its
+        // dynamic content may overflow the widget editor, CP-253
+        return (
+            <div>
+                <div className={css(styles.title)}>Markers</div>
+
+                <div className={css(styles.subtitle)}>
+                    {imageUrl ? (
+                        <span>
+                            Double-click on the image to add a marker.
+                            <br />
+                            <br />
+                            Markers are read by screen readers in the order that
+                            you add them here, so add in a logical order for the
+                            learner (e.g. sequentially, clockwise). You can test
+                            order by using keyboard tabbing.
+                        </span>
+                    ) : (
+                        "Upload an image to place markers."
+                    )}
+                </div>
+
+                {imageUrl && (
+                    <div
+                        className={css(styles.markersCanvas)}
+                        style={{
+                            maxWidth: imageWidth,
+                            maxHeight: imageHeight,
+                        }}
+                    >
+                        <img
+                            alt=""
+                            className={css(styles.image)}
+                            src={staticUrl(Util.getRealImageUrl(imageUrl))}
+                            onDoubleClick={this.handleImageDoubleClick}
+                        />
+
+                        {markers.map((marker, index) => (
+                            <Marker
+                                {...marker}
+                                choices={choices}
+                                key={`${marker.x}.${marker.y}`}
+                                // Update marker in the list.
+                                onChange={(marker) =>
+                                    onChange([
+                                        ...markers.slice(0, index),
+                                        marker,
+                                        ...markers.slice(index + 1),
+                                    ])
+                                }
+                                // Remove marker from the list.
+                                onRemove={() =>
+                                    onChange([
+                                        ...markers.slice(0, index),
+                                        ...markers.slice(index + 1),
+                                    ])
+                                }
+                                ref={(node) => (this._markers[index] = node)}
+                            />
+                        ))}
+                    </div>
+                )}
+            </div>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    title: {
+        ...typography.bodyXsmallBold,
+
+        marginBottom: 6,
+
+        color: colors.gray17,
+    },
+
+    subtitle: {
+        ...typography.labelSmall,
+
+        marginBottom: 12,
+
+        color: colors.gray68,
+    },
+
+    markersCanvas: {
+        position: "relative",
+
+        border: "solid 1px rgba(33, 36, 44, 0.16)",
+    },
+
+    image: {
+        // This makes `markersCanvas` have the same height as the image,
+        // enabling to place markers precisely as they're positioned using
+        // percentage offsets.
+        display: "block",
+
+        // Contain question image to the widget editor.
+        maxWidth: "100%",
+    },
+});

package/src/widgets/label-image/select-image.jsx

@@ -0,0 +1,86 @@
+// @flow
+/**
+ * Controlled component for selecting the question image, for answer labeling.
+ */
+
+import {globalStyles} from "@khanacademy/perseus";
+import Button from "@khanacademy/wonder-blocks-button";
+import {StyleSheet, css} from "aphrodite";
+import * as React from "react";
+
+import FormWrappedTextField from "../../components/form-wrapped-text-field.jsx";
+
+const {colors, typography} = globalStyles;
+
+type SelectImageProps = {
+    // Callback for when image URL is changed.
+    onChange: (url: string) => void,
+    // The selected image URL.
+    url: string,
+    ...
+};
+
+const SelectImage = ({
+    onChange,
+    url,
+}: SelectImageProps): React.Element<"div"> => (
+    <div>
+        <div className={css(styles.title)}>Image</div>
+
+        <div className={css(styles.components)}>
+            <FormWrappedTextField
+                placeholder="URL"
+                grow={1}
+                onChange={(e) => onChange(e.target.value)}
+                value={url}
+            />
+
+            <div className={css(styles.spacer)} />
+
+            <Button
+                // TODO(michaelpolyak): Design calls for uploading an image from
+                // the widget. This functionality already exists in
+                // `perseus-one-package/item-controls.jsx`, it's not obvious if
+                // it can be triggered from within the widget, or requires
+                // a similar implementation locally, in which case consider
+                // refactoring `perseus-admin-package/image-upload-dialog.jsx`
+                // as common utility, CP-118
+                disabled={!url}
+                aria-label={
+                    url
+                        ? ""
+                        : "Not implemented. Use the 'Add Image' button in " +
+                          "the editor to upload image, then copy the URL here."
+                }
+                onClick={() => onChange("")}
+                style={styles.btn}
+            >
+                {url ? "Remove" : "Upload"}
+            </Button>
+        </div>
+    </div>
+);
+
+const styles = StyleSheet.create({
+    title: {
+        ...typography.bodyXsmallBold,
+
+        marginBottom: 6,
+
+        color: colors.gray17,
+    },
+
+    components: {
+        display: "flex",
+    },
+
+    spacer: {
+        width: 16,
+    },
+
+    btn: {
+        minWidth: 90,
+    },
+});
+
+export default SelectImage;

package/src/widgets/label-image-editor.jsx

@@ -0,0 +1,257 @@
+// @flow
+/**
+ * Direct image labeling widget editor.
+ *
+ * Label on image widget enables creating more natural, conceptual questions
+ * that involve the use of images, and enable learners to demonstrate their
+ * knowledge by directly interacting with the image.
+ */
+
+import {EditorJsonify, Util} from "@khanacademy/perseus";
+import {StyleSheet, css} from "aphrodite";
+import * as React from "react";
+
+import FormWrappedTextField from "../components/form-wrapped-text-field.jsx";
+
+import AnswerChoices from "./label-image/answer-choices.jsx";
+import Behavior from "./label-image/behavior.jsx";
+import QuestionMarkers from "./label-image/question-markers.jsx";
+import SelectImage from "./label-image/select-image.jsx";
+
+import type {MarkerType} from "@khanacademy/perseus";
+
+type LabelImageEditorProps = {|
+    // List of answer choices to label question image with.
+    choices: $ReadOnlyArray<string>,
+
+    // The question image properties.
+    imageAlt: string,
+    imageUrl: string,
+    imageWidth: number,
+    imageHeight: number,
+
+    // The list of label markers on the question image.
+    markers: $ReadOnlyArray<MarkerType>,
+
+    // Whether multiple answer choices may be selected for markers.
+    multipleAnswers: boolean,
+
+    // Whether to hide answer choices from user instructions.
+    hideChoicesFromInstructions: boolean,
+
+    // Callback for when a widget prop is changed.
+    onChange: (options: Object) => void,
+|};
+
+class LabelImageEditor extends React.Component<LabelImageEditorProps> {
+    _questionMarkers: ?QuestionMarkers;
+
+    static defaultProps: {|
+        choices: $ReadOnlyArray<any>,
+        hideChoicesFromInstructions: boolean,
+        imageAlt: string,
+        imageHeight: number,
+        imageUrl: string,
+        imageWidth: number,
+        markers: $ReadOnlyArray<any>,
+        multipleAnswers: boolean,
+    |} = {
+        choices: [],
+        imageAlt: "",
+        imageUrl: "",
+        imageWidth: 0,
+        imageHeight: 0,
+        markers: [],
+        multipleAnswers: false,
+        hideChoicesFromInstructions: false,
+    };
+
+    static widgetName: string = "label-image";
+
+    componentDidUpdate(prevProps: LabelImageEditorProps) {
+        const coordsToMarkers = {};
+
+        prevProps.markers.forEach(
+            (marker) => (coordsToMarkers[`${marker.x}.${marker.y}`] = marker),
+        );
+
+        // Find the newly added marker indices.
+        const newIndices = this.props.markers
+            .map((marker, index) =>
+                // eslint-disable-next-line no-prototype-builtins
+                coordsToMarkers.hasOwnProperty(`${marker.x}.${marker.y}`)
+                    ? -1
+                    : index,
+            )
+            .filter((index) => index !== -1);
+
+        // Automatically reveal their dropdowns as a prompt to the content
+        // creator to select answers and set the ARIA label.
+        if (newIndices.length && this._questionMarkers) {
+            this._questionMarkers.openDropdownForMarkerIndices(newIndices);
+        }
+    }
+
+    getSaveWarnings: () => $ReadOnlyArray<any | string> = () => {
+        const {choices, imageAlt, imageUrl, markers} = this.props;
+
+        const warnings = [];
+
+        if (choices.length < 2) {
+            warnings.push("Question requires at least two answer choices");
+        }
+
+        if (!imageUrl) {
+            warnings.push("Image is not specified for question");
+        } else if (!imageAlt) {
+            warnings.push("Question image has no alt text");
+        }
+
+        if (!markers.length) {
+            warnings.push("Question has no markers, to label answers on image");
+        } else {
+            let numNoAnswers = 0;
+            let numNoLabels = 0;
+
+            for (const marker of markers) {
+                if (!marker.answers.length) {
+                    numNoAnswers++;
+                }
+
+                if (!marker.label) {
+                    numNoLabels++;
+                }
+            }
+
+            if (numNoAnswers) {
+                warnings.push(
+                    `Question has ${numNoAnswers} markers with no ` +
+                        "answers selected",
+                );
+            }
+
+            if (numNoLabels) {
+                warnings.push(
+                    `Question has ${numNoLabels} markers with no ` +
+                        "ARIA label",
+                );
+            }
+        }
+
+        return warnings;
+    };
+
+    serialize(): any {
+        return EditorJsonify.serialize.call(this);
+    }
+
+    handleImageChange: (url: string) => void = (url: string) => {
+        this.props.onChange({
+            imageUrl: url,
+            // Initially reset image size when URL is changed so it can be later
+            // measured.
+            imageWidth: 0,
+            imageHeight: 0,
+        });
+
+        if (url) {
+            Util.getImageSize(url, (width, height) => {
+                this.props.onChange({
+                    imageWidth: width,
+                    imageHeight: height,
+                });
+            });
+        }
+    };
+
+    handleAltChange: (alt: string) => void = (alt: string) => {
+        this.props.onChange({imageAlt: alt});
+    };
+
+    handleChoicesChange: (choices: $ReadOnlyArray<string>) => void = (
+        choices: $ReadOnlyArray<string>,
+    ) => {
+        this.props.onChange({choices});
+    };
+
+    handleMarkersChange: (markers: $ReadOnlyArray<MarkerType>) => void = (
+        markers: $ReadOnlyArray<MarkerType>,
+    ) => {
+        this.props.onChange({markers});
+    };
+
+    handleBehaviorChange: (options: any) => void = (options: Object) => {
+        this.props.onChange(options);
+    };
+
+    render(): React.Element<"div"> {
+        const {
+            choices,
+            imageAlt,
+            imageUrl,
+            imageWidth,
+            imageHeight,
+            markers,
+            multipleAnswers,
+            hideChoicesFromInstructions,
+        } = this.props;
+
+        const imageSelected = imageUrl && imageWidth > 0 && imageHeight > 0;
+
+        return (
+            <div>
+                <SelectImage onChange={this.handleImageChange} url={imageUrl} />
+
+                <div className={css(styles.smallSpacer)} />
+
+                {imageSelected && (
+                    <FormWrappedTextField
+                        placeholder="Alt text (for screen readers)"
+                        onChange={(e) => this.handleAltChange(e.target.value)}
+                        value={imageAlt}
+                        width="100%"
+                    />
+                )}
+
+                <div className={css(styles.largeSpacer)} />
+
+                <QuestionMarkers
+                    choices={choices}
+                    imageUrl={imageSelected ? imageUrl : ""}
+                    imageWidth={imageWidth}
+                    imageHeight={imageHeight}
+                    markers={markers}
+                    onChange={this.handleMarkersChange}
+                    ref={(node) => (this._questionMarkers = node)}
+                />
+
+                <div className={css(styles.largeSpacer)} />
+
+                <AnswerChoices
+                    choices={choices}
+                    onChange={this.handleChoicesChange}
+                />
+
+                <div className={css(styles.largeSpacer)} />
+
+                <Behavior
+                    multipleAnswers={multipleAnswers}
+                    hideChoicesFromInstructions={hideChoicesFromInstructions}
+                    onChange={this.handleBehaviorChange}
+                />
+            </div>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    largeSpacer: {
+        height: 32,
+    },
+
+    smallSpacer: {
+        height: 16,
+    },
+});
+
+export default LabelImageEditor;