@ng-blockly/blockly

对可视化编程语言blockly做的一个angular的简单封装

安装

Install from npm repository:

npm install @ng-blockly/blockly --save

Add the blockly scripts and assets in angular.json

"assets": [
  {
    "glob": "**/*",
    "input": "./node_modules/@ng-blockly/blockly/scripts/",
    "output": "/assets/"
  }
]

"scripts": [
  "node_modules/@ng-blockly/blockly/scripts/blockly/blockly_compressed.js",
  "node_modules/@ng-blockly/blockly/scripts/blockly/blocks_compressed.js",
  "node_modules/@ng-blockly/blockly/scripts/blockly/python_compressed.js",
  "node_modules/@ng-blockly/blockly/scripts/blockly/javascript_compressed.js",
  "node_modules/@ng-blockly/blockly/scripts/blockly/php_compressed.js",
  "node_modules/@ng-blockly/blockly/scripts/blockly/dart_compressed.js",
  "node_modules/@ng-blockly/blockly/scripts/blockly/lua_compressed.js",
  "node_modules/@ng-blockly/blockly/scripts/blockly/msg/js/zh-hans.js"
]

Or you can use:

ng add @ng-blockly/blockly

in this way, angular.json will be changed automatically like above.

例子

Example app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { NgBlocklyModule } from '@ng-blockly/blockly';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgBlocklyModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

'Example app.component.ts'

import {NgBlocklyConfig } from '@ng-blockly/blockly';

export class AppComponent {
    
    public config: NgBlocklyConfig = {
        toolbox: '<xml id="toolbox" style="display: none">' +
                    '<block type="controls_if"></block>' +
                    '<block type="controls_repeat_ext"></block>' +
                    '<block type="logic_compare"></block>' +
                    '<block type="math_number"></block>' +
                    '<block type="math_arithmetic"></block>' +
                    '<block type="text"></block>' +
                    '<block type="text_print"></block>' +
                 '</xml>',
        scrollbars: true,
        trashcan: true,
        media: '/assets/blockly/media/'
    };
}

Example app.component.ts

<ng-blockly [config]="config"></ng-blockly>

Styling

ng-blockly {
  position: absolute;
  width: 100%;
  height: 100%;
}

配置

Default Blockly Configuration (see https://developers.google.com/blockly/guides/get-started/web#configuration)

export class NgBlocklyConfig {
    collapse?: boolean; // Allows blocks to be collapsed or expanded. Defaults to true if the toolbox has categories, false otherwise.
    comments?: boolean; // Allows blocks to have comments. Defaults to true if the toolbox has categories, false otherwise.
    css?: boolean; // If false, don't inject CSS (providing CSS becomes the document's responsibility). Defaults to true.
    disable?: boolean; // If false, don't inject CSS (providing CSS becomes the document's responsibility). Defaults to true.
    grid?: {
      spacing: number,
      length: number,
      colour: string,
      snap: boolean
    };
    horizontalLayout?: boolean; // If true toolbox is horizontal, if false toolbox is vertical. Defaults to false.
    maxBlocks?: number; // 	Maximum number of blocks that may be created. Useful for student exercises. Defaults to Infinity.
    maxInstances?: object; // Map from block types to maximum number of blocks of that type that may be created. Undeclared types default to Infinity.
    media?: string; // Path from page (or frame) to the Blockly media directory. Defaults to "https://blockly-demo.appspot.com/static/media/"
    oneBasedIndex?: boolean; // If true list and string operations should index from 1, if false index from 0. Defaults to true.
    readOnly?: boolean; // If true, prevent the user from editing. Supresses the toolbox and trashcan. Defaults to false.
    rtl?: boolean; // If true, mirror the editor (for Arabic or Hebrew locales). Defaults to false.
    scrollbars?: boolean; // Sets whether the workspace is scrollable or not. Defaults to true if the toolbox has categories, false otherwise
    sounds?: boolean; // If false, don't play sounds (e.g. click and delete). Defaults to true.
    theme?: any; // Defaults to classic theme if no theme is provided. (https://developers.google.com/blockly/guides/configure/web/themes)
    toolbox?: string; // Tree structure of categories and blocks available to the user
    toolboxPosition?: string; // If "start" toolbox is on top (if horizontal) or left (if vertical and LTR) or right (if vertical and RTL). If "end" toolbox is on opposite side. Defaults to "start".
    trashcan?: boolean; // Displays or hides the trashcan. Defaults to true if the toolbox has categories, false otherwise.
    maxTrashcanContents?: number; // Maximum number of deleted items that will appear in the trashcan flyout. '0' disables the feature. Defaults to '32'.
    zoom?: {
      controls: boolean,
      wheel: boolean,
      startScale: number,
      maxScale: number,
      minScale: number,
      scaleSpeed: number
    };

}

Blockly Generator 配置

export class NgBlocklyGeneratorConfig {
    dart?: boolean;
    javascript?: boolean;
    lua?: boolean;
    php?: boolean;
    python?: boolean;
    xml?: boolean
}

生成代码

import { Component } from '@angular/core';
import { NgBlocklyConfig, NgBlocklyGeneratorConfig } from '@ng-blockly/blockly';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {

    public config: ngBlocklyConfig = {
        toolbox: '<xml id="toolbox" style="display: none">' +
            '<block type="controls_if"></block>' +
            '<block type="controls_repeat_ext"></block>' +
            '<block type="logic_compare"></block>' +
            '<block type="math_number"></block>' +
            '<block type="math_arithmetic"></block>' +
            '<block type="text"></block>' +
            '<block type="text_print"></block>' +
            '</xml>',
        scrollbars: true,
        trashcan: true
    };


    public generatorConfig: NgBlocklyGeneratorConfig = {
        dart: true,
        javascript: true,
        lua: true,
        php: true,
        python: true,
        xml: true
    };

    onCode(code: string) {
        console.log(code);
    }
}

<ng-blockly [config]="config" [generatorConfig]="generatorConfig" (javascriptCode)="onCode($event)" (pythonCode)="onCode($event)"></ng-blockly>

Import/Export Blockly Project

    @ViewChild(NgBlocklyComponent) workspace;

    // 返回当前workspace的xml
    this.workspace.toXml();

    // 从xml复原到workspace (会先清空workspace)
    this.workspace.fromXml(xml);

    // 从xml复原到workspace(不会先清空workspace)
    this.workspace.appendFromXml(xml);

Blockly Toolbox

XML-Definition

public config: NgBlocklyConfig = {
        toolbox: '<xml id="toolbox" style="display: none">' +
            '<block type="controls_if"></block>' +
            '<block type="controls_repeat_ext"></block>' +
            '<block type="logic_compare"></block>' +
            '<block type="math_number"></block>' +
            '<block type="math_arithmetic"></block>' +
            '<block type="text"></block>' +
            '<block type="text_print"></block>' +
            '</xml>',
        scrollbars: true,
        trashcan: true
    };

Toolbox Generator

    public customBlocks: CustomBlock[] = [
        new TestBlock('test', null, null),
        new DeviceBlock('device', null, null)
    ];


    constructor(ngToolboxBuilder: NgToolboxBuilderService) {
        ngToolboxBuilder.nodes = [
                   new Category(this.customBlocks, '#FF00FF', 'Test', null),
                   LOGIC_CATEGORY,
                   LOOP_CATEGORY,
                   MATH_CATEGORY,
                   TEXT_CATEGORY,
                   new Separator(), //Add Separator
                   LISTS_CATEGORY,
                   COLOUR_CATEGORY,
                   VARIABLES_CATEGORY,
                   FUNCTIONS_CATEGORY
        ];
        this.config.toolbox = ngToolboxBuilder.build();
    }

    # do not forget to add your customblocks
   <ng-blockly [config]="config" [customBlocks]="customBlocks" [generatorConfig]="generatorConfig"  (javascriptCode)="onCode($event)"></ng-blockly>

自定义 Block

declare var Blockly: any;

export class TestBlock extends CustomBlock {


    constructor(type: string, block: any, blockMutator: BlockMutator, ...args: any[]) {
        super(type, block, blockMutator, ...args);
        this.class = TestBlock;
    }

    defineBlock() {
        this.block.appendDummyInput()
            .appendField(this.type)
            .appendField(new Blockly.FieldImage('assets/testblock.png', 50, 50, '*'));
            .appendField(new Blockly.FieldImage(this.args[0], 50, 50, '*'));
        this.block.setOutput(true, 'Input');
        this.block.setColour(30);
        this.block.setTooltip('');
        this.block.setHelpUrl('');
    }

    toXML() {
        return '<block type="test"></block>';
    }


    onChange(changeEvent: any) {
        console.log(changeEvent);
    }
}

主题

Customized theme can be specified in the theme option for ngBlocklyConfig, and the format of the block style and category style is stated in the Themes.

Sample theme class (Using Google Blockly Classic theme):

export const blockStyles: BlockStyles = {
  logic_blocks: {
    colourPrimary: '210',
  },
};

export const categoryStyles: CategoryStyles = {
  logic_category: {
    colour: '210',
  },
}

export const ClassicTheme: Theme = new Theme (
  blockStyles,
  categoryStyles
)

When you have specified the theme used in Blockly workspace, you need to declare the corresponding block style/category style in block/category definition. Noted that once you have defined the theme option in ngBlocklyConfig, then you need to manage color scheme of all blocks and categories.

Block Styling

{
  "type": "controls_if",
  "style": "logic_blocks", // Specify the block style to apply
}

Category Styling

<!-- Specify the category style to apply -->
<category name="Logic" categorystyle="logic_category">
</category>

Corresponding NgBlocklyConfig

config: NgBlocklyConfig = {
    theme: ClassicTheme.createBlocklyTheme(),
  };

自定义

前往查看@ng-blockly/custom https://www.npmjs.com/package/@ng-blockly/custom

联系我

目前，该项目不是开源的，如果有问题可以联系我，[email protected]