【react】blockly结合react快速上手

前言

最近玩了blockly，感觉太强大了，原来scratch也是blockly做的。

文档

blockly文档：https://developers.google.com/blockly/guides/overview?hl=en
blockly开发工具：https://blockly-demo.appspot.com/static/demos/blockfactory/index.html

快速上手

首先安装blockly

npm i  blockly

blockly 主要靠xml注入和获取块，可以建造个blocklyComponent制作该playground：

/*
 * @Author: yehuozhili
 * @Date: 2021-07-15 15:45:35
 * @LastEditors: yehuozhili
 * @LastEditTime: 2021-07-15 21:34:15
 * @FilePath: \blockdemo\src\Blockly\BlocklyComponent.tsx
 */
import  {
    
     PropsWithChildren, RefObject, useEffect } from 'react';
import './BlocklyComponent.css';

import Blockly, {
    
     BlocklyOptions } from 'blockly/core';
import locale from 'blockly/msg/zh-hans';
import 'blockly/blocks';
Blockly.setLocale(locale);


interface BlocklyProps extends BlocklyOptions{
    
    
    initialXml:string,
    blocklyDiv:RefObject<HTMLDivElement>
    toolboxDiv:RefObject<HTMLElement>
}


function BlocklyComponent(props:PropsWithChildren<BlocklyProps>){
    
    
    const {
    
     initialXml, children,blocklyDiv,toolboxDiv, ...rest } = props;

    useEffect(()=>{
    
    
        if(blocklyDiv.current && toolboxDiv.current){
    
    
            const primaryWorkspace = Blockly.inject(
                blocklyDiv.current,{
    
    
                    toolbox:toolboxDiv.current,...rest
                }
            )
            if (initialXml) {
    
    
                Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(initialXml), primaryWorkspace);
            }
        }

    },[blocklyDiv, initialXml, rest, toolboxDiv])


    return <>
         <div ref={
    
    blocklyDiv} id="blocklyDiv" />
            <xml xmlns="https://developers.google.com/blockly/xml" is="blockly" style={
    
    {
    
     display: 'none' }} ref={
    
    toolboxDiv}>
                {
    
    props.children}
            </xml>
    </>
}

export default BlocklyComponent;

由于我们需要在该组件外调用拖拽的代码生成，所以将workspce的ref给提到父组件。
这个组件的children里放block后，即可渲染workspace块以及操作区了。
有可能jsx不认识xml元素，直接扩展下：

// eslint-disable-next-line @typescript-eslint/no-unused-vars
namespace JSX {
    
    
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    interface IntrinsicElements {
    
    
        xml:any
    }
}

一般，block有以下几种：

/*
 * @Author: yehuozhili
 * @Date: 2021-07-15 15:58:54
 * @LastEditors: yehuozhili
 * @LastEditTime: 2021-07-15 16:04:57
 * @FilePath: \blockdemo\src\Blockly\index.ts
 */
import React, {
    
     PropsWithChildren } from 'react';
import BlocklyComponent from './BlocklyComponent';

export default BlocklyComponent;

const Block = (p:PropsWithChildren<any>) => {
    
    
    const {
    
     children, ...props } = p;
    props.is = "blockly";
    return React.createElement("block", props, children);
};

const Category = (p:PropsWithChildren<any>) => {
    
    
    const {
    
     children, ...props } = p;
    props.is = "blockly";
    return React.createElement("category", props, children);
};

const Value = (p:PropsWithChildren<any>) => {
    
    
    const {
    
     children, ...props } = p;
    props.is = "blockly";
    return React.createElement("value", props, children);
};

const Field = (p:PropsWithChildren<any>) => {
    
    
    const {
    
     children, ...props } = p;
    props.is = "blockly";
    return React.createElement("field", props, children);
};

const Shadow = (p:PropsWithChildren<any>) => {
    
    
    const {
    
     children, ...props } = p;
    props.is = "blockly";
    return React.createElement("shadow", props, children);
};

export {
    
     Block, Category, Value, Field, Shadow }

这些组件的文档说明在这：https://developers.google.com/blockly/guides/configure/web/toolbox

// All standard block types in provided in Blockly core.
StandardCategories.coreBlockTypes =  ["controls_if", "logic_compare",
    "logic_operation", "logic_negate", "logic_boolean", "logic_null",
    "logic_ternary", "controls_repeat_ext", "controls_whileUntil",
    "controls_for", "controls_forEach", "controls_flow_statements",
    "math_number", "math_arithmetic", "math_single", "math_trig",
    "math_constant", "math_number_property", "math_change", "math_round",
    "math_on_list", "math_modulo", "math_constrain", "math_random_int",
    "math_random_float", "text", "text_join", "text_append", "text_length",
    "text_isEmpty", "text_indexOf", "variables_get", "text_charAt",
    "text_getSubstring", "text_changeCase", "text_trim", "text_print",
    "text_prompt_ext", "colour_picker", "colour_random", "colour_rgb",
    "colour_blend", "lists_create_with", "lists_repeat", "lists_length",
    "lists_isEmpty", "lists_indexOf", "lists_getIndex", "lists_setIndex",
    "lists_getSublist", "lists_split", "lists_sort", "variables_set",
    "procedures_defreturn", "procedures_ifreturn", "procedures_defnoreturn",
    "procedures_callreturn"];

blockly一下载完内置了很多组件，所以你也需要对其内置的组件有一定了解，否则不知道type是啥，里面插值的Value的name填啥。内置组件地址：https://github.com/google/blockly/tree/master/blocks

自定义块

我们模仿官方循环做个循环块。
首先需要注册块，可以使用json进行注册：

Blockly.Blocks['myblock']= {
    
    
  init : function(this: Blockly.Block__Class){
    
    
    this.jsonInit( {
    
    
      "type": "myblock",
      "message0": "我的重复 %1 次 %2 执行 %3",
      "args0": [
        {
    
    
          "type": "input_value",
          "name": "mycount",
          "check": "Number"
        },
        {
    
    
          "type": "input_dummy"
        },
        {
    
    
          "type": "input_statement",
          "name": "do"
        }
      ],
      "inputsInline": true,
      "previousStatement": null,
      "nextStatement": null,
      "colour": 330,
      "tooltip": "",
      "helpUrl": ""
    })  
  }
}

接收的值即为mycount，语句为do。
组件里国际化使用的语法是icu语法，具体可以在我博客里搜索。
再使用前面react.createelement的组件创建下：

         <Block   type="myblock">
          <Value name="mycount">
              <Shadow type="math_number">
                <Field name="NUM">10</Field>
              </Shadow>
            </Value>
          </Block>

就能显示出来了。
下面，还需要对myblock制作生成语句。
语句使用blockly对应的语言包，我们以生成javascript为例，生成方式主要是这2句：

import BlocklyJS from 'blockly/javascript';

  const generateCode = ()=>{
    
    
    var code = BlocklyJS.workspaceToCode(
      (blocklyDiv as any).current.workspace
    );
    console.log(code);
  }

blocklyDiv是被 Blockly.inject后的实例。
对刚注册的组件定义语句：

//@ts-ignore
Blockly.JavaScript['myblock'] = function (block :any) {
    
    
    // Repeat n times.
let repeats
  if (block.getField('mycount')) {
    
    
    // Internal number.
     repeats = String(Number(block.getFieldValue('mycount')));
  } else {
    
    
    //@ts-ignore
     repeats = Blockly.JavaScript.valueToCode(block, 'mycount','0')
  }//@ts-ignore
  let branch = Blockly.JavaScript.statementToCode(block, 'do');
  //@ts-ignore
  branch = Blockly.JavaScript.addLoopTrap(branch, block);
  let code = '';
  //@ts-ignore
  let loopVar = Blockly.JavaScript.nameDB_.getDistinctName(
      'count', Blockly.VARIABLE_CATEGORY_NAME);
  var endVar = repeats;
  if (!repeats.match(/^\w+$/) && !Blockly.isNumber(repeats)) {
    
    
      //@ts-ignore
    endVar = Blockly.JavaScript.nameDB_.getDistinctName(
        'repeat_end', Blockly.VARIABLE_CATEGORY_NAME);
    code += 'var ' + endVar + ' = ' + repeats + ';\n';
  }
  code += 'for (var ' + loopVar + ' = 0; ' +
      loopVar + ' < ' + endVar + '; ' +
      loopVar + '++) {\n' +
      branch + '}\n';
  return code;
};

其中使用Blockly.JavaScript.nameDB_.getDistinctName可以避免上下文中有重复的定义。
这样就可以在生成循环语句时生成code类似：

for (var count = 0; count < 10; count++) {
    
    
}

自定义field

上面自定义组件里每个args的type是个field，field也可以自定义，我们以自定义时间选择为例：

/*
 * @Author: yehuozhili
 * @Date: 2021-07-15 16:18:56
 * @LastEditors: yehuozhili
 * @LastEditTime: 2021-07-15 16:25:06
 * @FilePath: \blockdemo\src\fields\DateField.tsx
 */
import * as Blockly from 'blockly/core';

import BlocklyReactField from './BlocklyReactField';

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";


class ReactDateField extends BlocklyReactField {
    
    

  static fromJson(options:any) {
    
    
    return new ReactDateField(new Date(options['date']));
  }
  
  onDateSelected_ = (date:Date) => {
    
    
    this.setValue(new Date(date));
    Blockly.DropDownDiv.hideIfOwner(this, true);
  }

  getText_() {
    
    
    return this.value_.toLocaleDateString();
  };

  fromXml(fieldElement :Element) {
    
    
    this.setValue(new Date(fieldElement.textContent as unknown as Date));
  }

  render() {
    
    
    return <DatePicker
        selected={
    
    this.value_}
        onChange={
    
    this.onDateSelected_}
        inline />
  }
}

Blockly.fieldRegistry.register('field_react_date', ReactDateField);

export default ReactDateField;

最下面注册的field_react_date即为组件里field使用的名字。
我们注册个自定义组件试试field:

var reactDateField = {
    
    
  "type": "test_react_date_field",
  "message0": "date field %1",
  "args0": [
    {
    
    
      "type": "field_react_date",
      "name": "DATE",
      "date": "01/01/2020"
    },
  ],
  "previousStatement": null,
  "nextStatement": null,
};

Blockly.Blocks['test_react_date_field'] = {
    
    
  init: function(this: Blockly.Block__Class) {
    
    
    this.jsonInit(reactDateField);
    this.setStyle('loop_blocks');
  }
};

然后对该block注册语句：

//@ts-ignore
Blockly.JavaScript['test_react_date_field'] = function (block :any) {
    
    
    console.log(block,'bbz')
    return 'console.log(' + block.getField('DATE').getText() + ');\n';
};

放置block:

       <Block type="test_react_date_field" />

语句生成：

console.log(2020/1/10);

优先级

blockly拼出的优先级和正常的语法优先级不一样，你可以使用加括号解决，但如果代码不展示还好，展示的话就不容易读，所以谷歌整了个优先级概念。
优先级字段：

Blockly.JavaScript.ORDER_ATOMIC = 0;           // 0 "" ...
Blockly.JavaScript.ORDER_NEW = 1.1;            // new
Blockly.JavaScript.ORDER_MEMBER = 1.2;         // . []
Blockly.JavaScript.ORDER_FUNCTION_CALL = 2;    // ()
Blockly.JavaScript.ORDER_INCREMENT = 3;        // ++
Blockly.JavaScript.ORDER_DECREMENT = 3;        // --
Blockly.JavaScript.ORDER_BITWISE_NOT = 4.1;    // ~
Blockly.JavaScript.ORDER_UNARY_PLUS = 4.2;     // +
Blockly.JavaScript.ORDER_UNARY_NEGATION = 4.3; // -
Blockly.JavaScript.ORDER_LOGICAL_NOT = 4.4;    // !
Blockly.JavaScript.ORDER_TYPEOF = 4.5;         // typeof
Blockly.JavaScript.ORDER_VOID = 4.6;           // void
Blockly.JavaScript.ORDER_DELETE = 4.7;         // delete
Blockly.JavaScript.ORDER_AWAIT = 4.8;          // await
Blockly.JavaScript.ORDER_EXPONENTIATION = 5.0; // **
Blockly.JavaScript.ORDER_MULTIPLICATION = 5.1; // *
Blockly.JavaScript.ORDER_DIVISION = 5.2;       // /
Blockly.JavaScript.ORDER_MODULUS = 5.3;        // %
Blockly.JavaScript.ORDER_SUBTRACTION = 6.1;    // -
Blockly.JavaScript.ORDER_ADDITION = 6.2;       // +
Blockly.JavaScript.ORDER_BITWISE_SHIFT = 7;    // << >> >>>
Blockly.JavaScript.ORDER_RELATIONAL = 8;       // < <= > >=
Blockly.JavaScript.ORDER_IN = 8;               // in
Blockly.JavaScript.ORDER_INSTANCEOF = 8;       // instanceof
Blockly.JavaScript.ORDER_EQUALITY = 9;         // == != === !==
Blockly.JavaScript.ORDER_BITWISE_AND = 10;     // &
Blockly.JavaScript.ORDER_BITWISE_XOR = 11;     // ^
Blockly.JavaScript.ORDER_BITWISE_OR = 12;      // |
Blockly.JavaScript.ORDER_LOGICAL_AND = 13;     // &&
Blockly.JavaScript.ORDER_LOGICAL_OR = 14;      // ||
Blockly.JavaScript.ORDER_CONDITIONAL = 15;     // ?:
Blockly.JavaScript.ORDER_ASSIGNMENT = 16;      // = += -= **= *= /= %= <<= >>= ...
Blockly.JavaScript.ORDER_YIELD = 16.5;         // yield
Blockly.JavaScript.ORDER_COMMA = 17;           // ,
Blockly.JavaScript.ORDER_NONE = 99;            // (...)

一般来说，需要将参数结合的地方使用最高优先级，返回语句的地方使用最低优先级，即可确保生成正确的代码：

var arg0 = Blockly.JavaScript.valueToCode(this, 'NUM1', Blockly.JavaScript.ORDER_DIVISION);

return [arg0 + ' / ' + arg1, Blockly.JavaScript.ORDER_DIVISION];

再简单说就是你的参数可能是由其他组合块拼接而成，而你不能简单的使用js去做加减乘除，其他组合块拼接时生成的有优先级，最简单方式就是参数里面都使用最高优先级，生成的语句都使用最低优先级。

【react】blockly结合react快速上手

前言

文档

快速上手

自定义块

自定义field

优先级

猜你喜欢