文章目录
你将收获
如何配置和使用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