chore: Update turtle demo for v12 (#2634)

Author: rpbourret

examples/turtle-field-demo/field_turtle.js

@@ -15,12 +15,6 @@ class FieldTurtle extends Blockly.Field {
   // (for backwards compatibility reasons serializable is false by default).
   SERIALIZABLE = true;
 
-  // The cursor property defines what the mouse will look like when the user
-  // hovers over the field. By default the cursor will be whatever
-  // .blocklyDraggable's cursor is defined as (vis. grab). Most fields define
-  // this property as 'default'.
-  CURSOR = 'pointer';
-
   // How far to move the text to keep it to the right of the turtle.
   // May change if the turtle gets fancy enough.
   TEXT_OFFSET_X = 80;
@@ -90,33 +84,16 @@ class FieldTurtle extends Blockly.Field {
     // textElement_ (text) we can call the super-function. If we only wanted
     // one or the other, we could call their individual createX functions.
     super.initView();
+    if (this.fieldGroup_) {
+      Blockly.utils.dom.addClass(this.fieldGroup_, 'turtleField');
+    }
 
     // Note that the field group is created by the abstract field's init_
     // function. This means that *all elements* should be children of the
     // fieldGroup_.
     this.createView_();
   }
 
-  // Updates how the field looks depending on if it is editable or not.
-  updateEditable() {
-    if (!this.fieldGroup_) {
-      // Not initialized yet.
-      return;
-    }
-    // The default functionality just makes it so the borderRect_ does not
-    // highlight when hovered.
-    super.updateEditable();
-    // Things like this are best applied to the clickTarget_. By default the
-    // click target is the same as getSvgRoot, which by default is the
-    // fieldGroup_.
-    const group = this.getClickTarget_();
-    if (!this.isCurrentlyEditable()) {
-      group.style.cursor = 'not-allowed';
-    } else {
-      group.style.cursor = this.CURSOR;
-    }
-  }
-
   // Gets the text to display when the block is collapsed
   getText() {
     let text = this.value_.turtleName + ' wearing a ' + this.value_.hat;
@@ -403,7 +380,7 @@ class FieldTurtle extends Blockly.Field {
     };
 
     const widget = document.createElement('div');
-    widget.className = 'customFieldsTurtleWidget blocklyNonSelectable';
+    widget.className = 'customFieldsTurtleWidget';
 
     const table = document.createElement('div');
     table.className = 'table';

examples/turtle-field-demo/index.html

@@ -116,7 +116,7 @@
       function toggleEnabled() {
         var blocks = workspace.getAllBlocks(false);
         for (var i = 0, block; (block = blocks[i]); i++) {
-          block.setEnabled(!block.isEnabled());
+          block.setDisabledReason(block.isEnabled(), 'Toggle block enabled');
         }
       }
 

examples/turtle-field-demo/turtle.css

@@ -6,6 +6,9 @@
 
 .customFieldsTurtleWidget {
   width: 150px;
+  user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
 }
 
 .customFieldsTurtleWidget button {
@@ -42,7 +45,15 @@
   width: 100%;
 }
 
-.blocklySvg .blocklyNonEditableText text,
-.blocklySvg .blocklyEditableText text {
+.turtleField.blocklyEditableField {
+  cursor: pointer;
+}
+
+.turtleField.blocklyNonEditableField {
+  cursor: not-allowed;
+}
+
+.blocklySvg .blocklyNonEditableField .blocklyFieldText,
+.blocklySvg .blocklyEditableField .blocklyFieldText {
   fill: #000;
 }