New version of Blockly

frontend/stepper/js/BlocklyEditor.tsx

@@ -11,6 +11,7 @@ import {bufferResetToDefaultSourceCode} from '../../buffers/buffer_actions';
 import {ComputedSourceHighlight, SourceHighlightBlock} from '../index';
 import {callPlatformLog} from '../../submission/submission_actions';
 import {selectGroupByCategory} from './index';
+import * as Blockly from 'blockly/core';
 
 export interface BlocklyEditorProps {
     name?: string,
@@ -58,15 +59,16 @@ export const BlocklyEditor = (props: BlocklyEditorProps) => {
         }
 
         log.getLogger('editor').debug('imported content', context.blocklyHelper.programs[0].blockly);
-        context.blocklyHelper.reloading = true;
+        // context.blocklyHelper.reloading = true;
 
         // Check that all blocks exist and program is valid. Otherwise, reload default answer and cancel
         try {
             previousValue.current = context.blocklyHelper.programs[0].blockly;
             context.blocklyHelper.loadPrograms();
             context.blocklyHelper.programs[0].blocklyJS = context.blocklyHelper.getCode("javascript");
             if (0 === context.blocklyHelper.programs[0].blocklyJS.trim().length) {
-                throw new Error("The reloaded answer is empty");
+                // TODO Blockly: re-enable this warning
+                // throw new Error("The reloaded answer is empty");
             }
         } catch (e) {
             console.error(e);
@@ -144,14 +146,13 @@ export const BlocklyEditor = (props: BlocklyEditorProps) => {
 
     const onBlocklyEvent = (event) => {
         log.getLogger('editor').debug('blockly event', event);
-        const eventType = event ? event.constructor : null;
-
-        let isBlockEvent = event ? (
-            eventType === window.Blockly.Events.Create ||
-            eventType === window.Blockly.Events.Delete ||
-            eventType === window.Blockly.Events.Move ||
-            eventType === window.Blockly.Events.Change) : true;
 
+        let isBlockEvent = [
+            Blockly.Events.BLOCK_DRAG,
+            Blockly.Events.BLOCK_MOVE,
+            Blockly.Events.BLOCK_CREATE,
+            Blockly.Events.BLOCK_CHANGE,
+        ].includes(event.type);
         if ('selected' === event.element) {
             if (event.newValue !== selectedBlockId.current) {
                 log.getLogger('editor').debug('is selected');
@@ -163,7 +164,7 @@ export const BlocklyEditor = (props: BlocklyEditorProps) => {
 
         if (isBlockEvent) {
             const blocklyHelper = context.blocklyHelper;
-            log.getLogger('editor').debug('on editor change');
+            log.getLogger('editor').debug('on editor change', loaded.current, blocklyHelper.reloading, blocklyHelper.languages);
             if (blocklyHelper.languages && blocklyHelper.languages.length && loaded.current && !blocklyHelper.reloading) {
                 blocklyHelper.savePrograms();
                 const answer = {...blocklyHelper.programs[0]};
@@ -173,8 +174,8 @@ export const BlocklyEditor = (props: BlocklyEditorProps) => {
                     log.getLogger('editor').debug('new value', answer);
                     props.onEditPlain(document);
 
-                    if (eventType !== window.Blockly.Events.Create && (eventType === window.Blockly.Events.Change || event.oldCoordinate)) {
-                        const details = `block_update;${eventType.prototype.type};${documentToString(document)}`;
+                    if (event.type !== Blockly.Events.BLOCK_CREATE && (event.type === Blockly.Events.BLOCK_CHANGE || event.oldCoordinate)) {
+                        const details = `block_update;${event.type.prototype.type};${documentToString(document)}`;
                         dispatch(callPlatformLog(['activity', details]));
                     }
 
@@ -312,6 +313,10 @@ export const BlocklyEditor = (props: BlocklyEditorProps) => {
             return;
         }
 
+        // TODO Blockly: Change Blockly selected block
+
+        return;
+
         window.Blockly.selected = null;
 
         clearHighlights('blocklySelected');

frontend/stepper/js/blockly.scss

@@ -11,6 +11,10 @@
     height: 100%;
 }
 
+.blocklyToolbox {
+  z-index: 15;
+}
+
 .blocklyDropDownDiv {
     position: fixed;
     left: 0;