- 作者：约克
- 原文地址：https://yorkyu.cn/scratch-example-blocks-style-078ba0174e9a.html
- 文章版权归作者所有，转载请注明出处！
一，前言
本文主要讲解，怎么定制 scratch-blocks 的积木区风格，如主题色，滚动条，积木工作区边界限制等。并深入源码，探究其根本。Github项目usetools/scratch-example/v1.0.1。由于scratch-blocks基于blockly二次开发，而blockly已迭代多个版本，在使用上会有所差异，后续作者会有文章，结合源码单独讲解blockly的使用。
1.1. 定制项概览
- 主题色
- 滚动条
- 积木工作区边界限制
1.2. 名词介绍
- 根容器 包裹所有积木工作区/积木分类菜单/积木弹出列表的容器，即class为 injectionDiv的节点
- 积木工作区（或工作区) 即积木可以拖放的积木代码区域
- 可视工作区 可以看到的工作区（不包括被积木分类菜单遮住的部分），随着滚动条的滚动，可视工作区中的内容在变化，但是可视工作区整体的宽度/高度是不变的。
- 内容矩形 当前角色所有工作区中的积木的边界组成的一个矩形的区域。
- 积木分类菜单 左侧积木分类列表的菜单
- 积木弹出列表 点击积木分类菜单才弹出的积木块列表，宽度固定为250
- 工作区坐标 工作区有一个坐标系，积木放置的位置都是在这个坐标系中。
1.3. 定制技术实现
实现scratch-blocks的定制的方法当前使用到的有：
- 通过入口函数inject()方法的入参options
- 借助Javascript语言中的函数重写能力
- 使用全局CSS样式覆盖
二，前置依赖项
2.1. 引入google-closure-library
google-closure-library 是一个功能强大的低级 JavaScript 库，旨在构建复杂且可扩展的 Web 应用程序。Webpack项目中使用时需要使用google-closure-library-webpack-plugin插件进行解析，具体配置如下：
安装依赖包
声明googTS描述
在文件src/react-app-env.d.ts添加下述描述
在项目中引用goog
三，执行定制
3.1 主题色
在scratch-blocks入口方法inject，参数opt_options提供了主题色的基础配置方式，常用配置项如下。点击查看scratch-examples使用
const blockOptions = {
// 设置积木分类猜到/积木弹出列表到右边
toolboxPosition: 'end',
zoom: {
wheel: false,
// 积木缩放
startScale: 0.8,
},
colours: {
// 积木工作区 背景色
workspace: '#292b32',
// 积木弹出列表，背景色
flyout: '#33353c',
// 积木分类菜单，背景色
toolbox: '#1b1d23',
// 积木分类菜单，选中颜色
toolboxSelected: '#292b32',
// 积木分类菜单，分类名称文本颜色
toolboxText: '#d5c1c1',
// 滚动条颜色
scrollbar: 'rgba(255, 255, 255, 0.2)',
// hover状态下，滚动条颜色
scrollbarHover: 'rgba(255, 255, 255, 0.2)',
insertionMarker: '#000000',
insertionMarkerOpacity: 0.2,
fieldShadow: 'rgba(255, 255, 255, 0.3)',
dragShadowOpacity: 0.6
},
};从上述配置项，可知通过提供的opt_options定制能力有限，若需要更多复杂高级的风格定制，可使用CSS样式覆盖的方式，关注后续文章讲解。
3.2. 滚动条定制
3.2.1. 主题色
滚动条主题色定制见上一节3.1 主题色。
3.2.2. 滚动条位置
示例中把积木区垂直滚动条移动到了工作区左侧，其主要实现方式为重写scratch-blocks/scrollbar.js中的方法，重写后的方法如下。点击查看scratch-examples使用
// 移动垂直滚动条到工作区左侧
ScratchBlocks.Scrollbar.prototype.resizeViewVertical = function(hostMetrics) {}
// 设置工作区水平滚动条左侧流程滚动条厚度
ScratchBlocks.Scrollbar.prototype.resizeViewHorizontal = function(hostMetrics) {}3.2.3. 滚动条可见性
工作区没有任何积木时，期望滚动条隐藏不可见。主要思想是：当内容区与可视区大小相等时，设置滚动条长度为0即可
代码语言：javascript复制// 设置垂直滚动条长度
ScratchBlocks.Scrollbar.prototype.resizeContentVertical = function(hostMetrics) {}
// 设置水平滚动条长度
ScratchBlocks.Scrollbar.prototype.resizeContentHorizontal = function(hostMetrics) {}4. 积木工作区边界限制
由于scratch-bocks工作区的自由度较高，积木块可任意上下左右无限制的拖动。为了提升体验，示例中将限制工作区的上/左边界与可是工作区的上/左边界重叠。即：积木块不能拖动超出可视工作的上/左边界。重写后的方法如下。
4.1. 工作区大小限制
通过重新方法点击查看getContentDimensionsBounded_使用，实现思路：把工作区的上/左边界设置为0，当积木块拖动到可是工作区的上/左边界附近时，不会自动扩大工作区大小。
代码语言：javascript复制// 重新工作区边界方法
ScratchBlocks.WorkspaceSvg.getContentDimensionsBounded_ = function(ws, svgSize) {}4.2. 积木块移动距离
通过重新类方法点击查看Gesture使用，限制积木块拖动的距离，当超出可视工作区上/左边界时，对积木块移动距离重置，使其不超出可视工作区边界。其主要思想是：在鼠标拖动事件的移动距离计算方法中，重新计算移动距离
代码语言：javascript复制// 重新拖动距离方法
ScratchBlocks.Gesture.prototype.updateDragDelta_ = function(currentXY) {}五，效果预览
参考
- [1] scratch-blocks积木计算容器和定位容器的大致流程
- [2] google-closure-library-webpack-plugin/examples/goog-require-example
