【Blockly开发教程】06 Workspace概念

你将收获

如何配置和使用workspace。

Workspace

Workspace是什么

在Blockly中，Workspace 是一个核心功能，代表了一个用户可以操作和编程的环境，类似于vscode的文件编辑器部分。它是构建程序逻辑的画布，用户可以在其中拖拽、连接和配置各种编程块（blocks）。每个Workspace提供了一个独立的编程空间，允许用户创建和管理自己的程序结构。

Workspace组成

一个Workspace通常包含以下几个主要部分：

• 工具箱（Toolbox）：包含了一系列积木块的分类列表，用户可以从这里选择所需的块。
  
• 主工作区：用户将工具箱中的块拖拽到这个区域，构建程序逻辑。
  
• 分类抽屉（Flyout）：当工具箱以抽屉形式展示时，用户可以从这里访问更多的块。
  
  在flyout中，也有一个工作区（Workspace），但是这个工作区不是主工作区，它的作用是展示积木块，而不可用于搭建程序逻辑。
  
• 工作区背景：提供视觉背景，帮助用户更清晰地识别和管理自己的代码结构。
• 滚动条：如果Workspace内容超过可视区域，滚动条允许用户滚动查看全部内容。
• 缩放控件：用户可以通过缩放控件调整Workspace的显示大小。
• 垃圾桶：用户可以将块拖到垃圾桶图标上来删除块。
  

Workspace作用

Workspace是Blockly编辑器的核心部件，主要作用包括：

• 程序构建：用户通过拖拽和连接块来构建程序的逻辑结构。Workspace提供了一个直观的界面，让用户能够轻松编辑和调整代码。
• 代码组织：用户可以在Workspace中整理和重组代码块，优化程序结构。
• 多用户协作：在某些配置下（如需要云服务器支持），Workspace支持多用户同时工作，促进协作编程。
• 功能扩展：通过添加插件或扩展，可以增强Workspace的功能，比如添加新的编程块或工具。
• 序列化/反序列化：将Workspace的数据导出为文件，或导入文件来加载已保存的Workspace数据。

创建Workspace

通过Blockly.inject方法创建Workspace:

workspace = Blockly.inject('blocklyDiv', options);

• options 在前面的文章中有提到过:

  // blockly/core/blockly_options.ts
  export interface BlocklyOptions {
       
    collapse?: boolean;	// 是否允许块的折叠以隐藏其内容。
    comments?: boolean;  	// 是否允许用户在块上添加注释。
    css?: boolean;	// 是否自动添加CSS样式到页面。
    disable?: boolean;	// 是否禁用工作区，使所有块不可编辑。
    grid?: GridOptions;	// 网格线的配置选项，如是否显示网格线和网格线的间隔。
    horizontalLayout?: boolean;	// 是否将工具箱和工作区水平布局。
    maxBlocks?: number;	// 工作区中允许的最大块数量。
    maxInstances?: {
       [blockType: string]: number};	// 特定块类型的最大实例数，以对象形式指定。
    media?: string;	// 加载媒体资源（如块定义和工具箱）的路径。
    modalInputs?: boolean;	// 是否使用模态对话框来编辑输入值。
    move?: MoveOptions;	// 块的移动选项，如是否启用拖放功能。
    oneBasedIndex?: boolean;	// 是否使用基于1的索引，默认为基于0的索引。
    readOnly?: boolean;	// 是否将工作区设置为只读模式。
    renderer?: string;	// 指定使用哪个渲染器来渲染块。
    rendererOverrides?: {
       [rendererConstant: string]: any};	// 用于覆盖特定渲染器设置的对象。
    rtl?: boolean;	// 是否启用从右到左的布局。
    scrollbars?: ScrollbarOptions | boolean;	// 工作区滚动条的行为配置，可以是一个对象或布尔值。
    sounds?: boolean;	// 是否启用声音效果。
    theme?: Theme | string | ITheme;	// 应用到Blockly编辑器的主题，可以是主题对象、主题名称的字符串或ITheme接口的实现。
    toolbox?: string | ToolboxDefinition | Element;	// 工具箱的内容，可以是一个XML字符串、工具箱定义对象或DOM元素。
    toolboxPosition?: string;	// 工具箱的位置，可以是'start'（左侧）或'end'（右侧）。
    trashcan?: boolean;	// 是否在工作区显示垃圾桶图标。
    maxTrashcanContents?: number