Teacher Tool: Block Picker

gulpfile.js

@@ -777,6 +777,7 @@ exports.tt = teacherTool;
 exports.icons = buildSVGIcons;
 exports.testhelpers = testhelpers;
 exports.testpxteditor = testpxteditor;
+exports.reactCommon = reactCommon;
 exports.cli = gulp.series(
     gulp.parallel(pxtlib, pxtweb),
     gulp.parallel(pxtcompiler, pxtsim, backendutils),

localtypings/pxteditor.d.ts

@@ -54,6 +54,8 @@ declare namespace pxt.editor {
         | "redo"
         | "renderblocks"
         | "renderpython"
+        | "renderxml"
+        | "renderbyblockid"
         | "setscale"
         | "startactivity"
         | "saveproject"
@@ -64,6 +66,7 @@ declare namespace pxt.editor {
         | "requestprojectcloudstatus"
         | "convertcloudprojectstolocal"
         | "setlanguagerestriction"
+        | "gettoolboxcategories"
 
         | "toggletrace" // EditorMessageToggleTraceRequest
         | "togglehighcontrast"
@@ -294,6 +297,21 @@ declare namespace pxt.editor {
         layout?: BlockLayout;
     }
 
+    export interface EditorMessageRenderXmlRequest extends EditorMessageRequest {
+        action: "renderxml";
+        // xml to render
+        xml: string;
+        snippetMode?: boolean;
+        layout?: BlockLayout;
+    }
+
+    export interface EditorMessageRenderByBlockIdRequest extends EditorMessageRequest {
+        action: "renderbyblockid";
+        blockId: string;
+        snippetMode?: boolean;
+        layout?: BlockLayout;
+    }
+
     export interface EditorMessageRunEvalRequest extends EditorMessageRequest {
         action: "runeval";
         validatorPlan: pxt.blocks.ValidatorPlan;
@@ -305,6 +323,16 @@ declare namespace pxt.editor {
         xml: Promise<any>;
     }
 
+    export interface EditorMessageRenderXmlResponse {
+        svg: SVGSVGElement;
+        resultXml: Promise<any>;
+    }
+
+    export interface EditorMessageRenderByBlockIdResponse {
+        svg: SVGSVGElement;
+        resultXml: Promise<any>;
+    }
+
     export interface EditorMessageRenderPythonRequest extends EditorMessageRequest {
         action: "renderpython";
         // typescript code to render
@@ -398,6 +426,15 @@ declare namespace pxt.editor {
         restriction: pxt.editor.LanguageRestriction;
     }
 
+    export interface EditorMessageGetToolboxCategoriesRequest extends EditorMessageRequest {
+        action: "gettoolboxcategories";
+        advanced?: boolean;
+    }
+
+    export interface EditorMessageGetToolboxCategoriesResponse {
+        categories: pxt.editor.ToolboxCategoryDefinition[];
+    }
+
     export interface DataStreams<T> {
         console?: T;
         messages?: T;
@@ -927,10 +964,13 @@ declare namespace pxt.editor {
         blocksScreenshotAsync(pixelDensity?: number, encodeBlocks?: boolean): Promise<string>;
         renderBlocksAsync(req: pxt.editor.EditorMessageRenderBlocksRequest): Promise<pxt.editor.EditorMessageRenderBlocksResponse>;
         renderPythonAsync(req: pxt.editor.EditorMessageRenderPythonRequest): Promise<pxt.editor.EditorMessageRenderPythonResponse>;
+        renderXml(req: pxt.editor.EditorMessageRenderXmlRequest): pxt.editor.EditorMessageRenderXmlResponse;
+        renderByBlockIdAsync(req: pxt.editor.EditorMessageRenderByBlockIdRequest): Promise<pxt.editor.EditorMessageRenderByBlockIdResponse>;
 
         // FIXME (riknoll) need to figure out how to type this better
         // getBlocks(): Blockly.Block[];
         getBlocks(): any[];
+        getToolboxCategories(advanced?: boolean): pxt.editor.EditorMessageGetToolboxCategoriesResponse;
 
         toggleHighContrast(): void;
         setHighContrast(on: boolean): void;
@@ -1218,4 +1258,4 @@ declare namespace pxt.workspace {
 
         fireEvent?: (ev: pxt.editor.EditorEvent) => void;
     }
-}
+}

pxteditor/editorcontroller.ts

@@ -154,6 +154,26 @@ export function bindEditorMessages(getEditorAsync: () => Promise<IProjectView>)
                                         })
                                     });
                             }
+                            case "renderxml": {
+                                const rendermsg = data as pxt.editor.EditorMessageRenderXmlRequest;
+                                return Promise.resolve()
+                                    .then(() => {
+                                        const r = projectView.renderXml(rendermsg);
+                                        return r.resultXml.then((svg: any) => {
+                                            resp = svg.xml;
+                                        })
+                                    });
+                            }
+                            case "renderbyblockid": {
+                                const rendermsg = data as pxt.editor.EditorMessageRenderByBlockIdRequest;
+                                return Promise.resolve()
+                                    .then(() => projectView.renderByBlockIdAsync(rendermsg))
+                                    .then(r => {
+                                        return r.resultXml.then((svg: any) => {
+                                            resp = svg.xml;
+                                        })
+                                    });
+                            }
                             case "runeval": {
                                 const evalmsg = data as pxt.editor.EditorMessageRunEvalRequest;
                                 const plan = evalmsg.validatorPlan;
@@ -166,6 +186,13 @@ export function bindEditorMessages(getEditorAsync: () => Promise<IProjectView>)
                                         resp = { result: results };
                                     });
                             }
+                            case "gettoolboxcategories": {
+                                const msg = data as pxt.editor.EditorMessageGetToolboxCategoriesRequest;
+                                return Promise.resolve()
+                                    .then(() => {
+                                        resp = projectView.getToolboxCategories(msg.advanced);
+                                    });
+                            }
                             case "renderpython": {
                                 const rendermsg = data as pxt.editor.EditorMessageRenderPythonRequest;
                                 return Promise.resolve()
@@ -346,4 +373,4 @@ export function postHostMessageAsync(msg: pxt.editor.EditorMessageRequest): Prom
         if (!msg.response)
             resolve(undefined)
     })
-}
+}

pxtlib/util.ts

@@ -1426,6 +1426,14 @@ namespace ts.pxtc.Util {
         return (n || "").split(/(?=[A-Z])/g).join(" ").toLowerCase();
     }
 
+    export function camelCaseToLowercaseWithSpaces(n: string) {
+        return n.replace(/([A-Z])/gm, ' $1').toLocaleLowerCase().trim();
+    }
+
+    export function snakeCaseToLowercaseWithSpaces(n: string) {
+        return n.replace(/_/g, ' ').toLocaleLowerCase().trim();
+    }
+
     export function range(len: number) {
         let r: number[] = []
         for (let i = 0; i < len; ++i) r.push(i)

pxtservices/iframeDriver.ts

@@ -352,6 +352,42 @@ export class IframeDriver {
         return (resp.resp as pxt.editor.EditorMessageRenderPythonResponse).python;
     }
 
+    async renderXml(xml: string) {
+        const resp = await this.sendRequest(
+            {
+                type: "pxteditor",
+                action: "renderxml",
+                xml
+            } as pxt.editor.EditorMessageRenderXmlRequest
+        ) as pxt.editor.EditorMessageResponse;
+
+        return resp.resp;
+    }
+
+    async renderByBlockId(blockId: string) {
+        const resp = await this.sendRequest(
+            {
+                type: "pxteditor",
+                action: "renderbyblockid",
+                blockId: blockId
+            } as pxt.editor.EditorMessageRenderByBlockIdRequest
+        ) as pxt.editor.EditorMessageResponse;
+
+        return resp.resp;
+    }
+
+    async getToolboxCategories(advanced?: boolean): Promise<pxt.editor.ToolboxCategoryDefinition[]> {
+        const resp = await this.sendRequest(
+            {
+                type: "pxteditor",
+                action: "gettoolboxcategories",
+                advanced
+            } as pxt.editor.EditorMessageGetToolboxCategoriesRequest
+        ) as pxt.editor.EditorMessageResponse;
+
+        return (resp.resp as pxt.editor.EditorMessageGetToolboxCategoriesResponse).categories;
+    }
+
     async runValidatorPlan(validatorPlan: pxt.blocks.ValidatorPlan, planLib: pxt.blocks.ValidatorPlan[]) {
         const resp = await this.sendRequest(
             {
@@ -550,4 +586,4 @@ export class IframeDriver {
             }
         }
     }
-}
+}

react-common/components/controls/LazyImage.tsx

@@ -5,6 +5,7 @@ export interface LazyImageProps extends ControlProps {
     src: string;
     alt: string;
     title?: string;
+    loadingElement?: JSX.Element;
 }
 
 let observer: IntersectionObserver;
@@ -20,6 +21,7 @@ export const LazyImage = (props: LazyImageProps) => {
         ariaLabel,
         ariaHidden,
         ariaDescribedBy,
+        loadingElement,
     } = props;
 
     initObserver();
@@ -34,9 +36,8 @@ export const LazyImage = (props: LazyImageProps) => {
         observer.observe(ref);
     }
 
-
-
     return <div className="common-lazy-image-wrapper">
+        <div className="loading-element">{loadingElement ? loadingElement : <div className="common-spinner" />}</div>
         <img
             id={id}
             ref={handleImageRef}
@@ -49,7 +50,6 @@ export const LazyImage = (props: LazyImageProps) => {
             aria-hidden={ariaHidden}
             aria-describedby={ariaDescribedBy}
         />
-        <div className="common-spinner" />
         <i className="fas fa-image" aria-hidden={true} />
     </div>
 }
@@ -85,4 +85,4 @@ function initObserver() {
         })
     }
     observer = new IntersectionObserver(onIntersection, config);
-}
+}

react-common/styles/controls/LazyImage.less

@@ -4,10 +4,12 @@
     align-items: center;
 
     .common-spinner {
-        position: absolute;
         width: 60px;
         height: 60px;
+    }
 
+    .loading-element {
+        position: absolute;
         opacity: 1;
         transition: opacity 0.3s ease;
     }
@@ -28,7 +30,7 @@
 }
 
 .common-lazy-image-wrapper.loaded {
-    .common-spinner {
+    .loading-element {
         opacity: 0;
     }
 
@@ -42,7 +44,7 @@
 }
 
 .common-lazy-image-wrapper.error {
-    .common-spinner {
+    .loading-element {
         opacity: 0;
     }
 
@@ -53,4 +55,4 @@
     img {
         opacity: 0;
     }
-}
+}

teachertool/src/App.tsx

@@ -15,6 +15,7 @@ import { loadValidatorPlansAsync } from "./transforms/loadValidatorPlansAsync";
 import { tryLoadLastActiveRubricAsync } from "./transforms/tryLoadLastActiveRubricAsync";
 import { ImportRubricModal } from "./components/ImportRubricModal";
 import { ConfirmationModal } from "./components/ConfirmationModal";
+import { BlockPickerModal } from "./components/BlockPickerModal";
 
 export const App = () => {
     const { state, dispatch } = useContext(AppStateContext);
@@ -59,6 +60,7 @@ export const App = () => {
             <CatalogModal />
             <ImportRubricModal />
             <ConfirmationModal />
+            <BlockPickerModal />
             <Toasts />
         </>
     );

teachertool/src/components/AddCriteriaButton.tsx

@@ -5,6 +5,7 @@ import { AppStateContext } from "../state/appStateContext";
 import { useContext, useMemo } from "react";
 import { classList } from "react-common/components/util";
 import { Strings } from "../constants";
+import { CatalogDisplayOptions } from "../types/modalOptions";
 
 interface IProps {}
 
@@ -19,7 +20,7 @@ export const AddCriteriaButton: React.FC<IProps> = ({}) => {
         <Button
             className={classList("inline", "outline-button")}
             label={Strings.AddCriteria}
-            onClick={() => showModal("catalog-display")}
+            onClick={() => showModal({ modal: "catalog-display" } as CatalogDisplayOptions)}
             title={Strings.AddCriteria}
             leftIcon="fas fa-plus-circle"
             disabled={!hasAvailableCriteria}