运行逻辑整理

项目入口主要功能包装（高阶组件） src/containers/gui.jsx

const WrappedGui = compose(
    LocalizationHOC, // 提供 “本地化” 功能
    ErrorBoundaryHOC('Top Level App'),
    FontLoaderHOC,
    QueryParserHOC, // 提供 “提示查询” 功能（src/lib/query-parser-hoc.jsx）
    ProjectFetcherHOC, // 提供 “获取项目” 功能（src/lib/project-fetcher-hoc.jsx）
    TitledHOC,
    ProjectSaverHOC, // 提供 “保存项目” 功能（src/lib/project-saver-hoc.jsx）
    vmListenerHOC,
    vmManagerHOC,
    SBFileUploaderHOC, // 提供 “上传文件” 功能（src/lib/sb-file-uploader-hoc.jsx）
    cloudManagerHOC // 提供 “云管理” 功能
)(ConnectedGUI);

WrappedGui.setAppElement = ReactModal.setAppElement;
export default WrappedGui;

高阶组件

• “本地化” LocalizationHOC: 监听 onSetLanguage 事件修改 state.locales 状态切换语言

• “提示查询” QueryParserHOC: 通过 onOpenTipsLibrary 调用 state.openTipsLibrary 更新状态，以供 src/components/menu-bar/menu-bar.jsx 点击事件调用

• “获取项目” ProjectFetcherHOC: 设置 资源主机、项目主机 通过 fetchProject 调用 storage.load 加载项目

• “保存项目” ProjectSaverHOC:

  • componentWillMount 添加 离开页面 监听器 window.onbeforeunload = e => this.leavePageConfirm(e);
  • updateProjectToStorage 调用 this.storeProject 更新项目到 storage
  • createNewProjectToStorage 调用 this.storeProject 创建项目到 storage
  • createCopyToStorage 调用 this.storeProject 复制项目到 storage
  • createRemixToStorage 调用 this.storeProject 重制项目到 storage
  • storeProject 调用 this.storeProjectThumbnail 存储项目到 storage
  • storeProjectThumbnail 调用 this.getProjectThumbnail 设置项目快照
  • getProjectThumbnail 获取项目快照

• “上传文件” SBFileUploaderHOC: 添加 onStartSelectingFileUpload 文件上传逻辑，并添加回调点以供 src/components/menu-bar/menu-bar.jsx 点击事件调用，步骤如下

  1. handleStartSelectingFileUpload 预处理 可能会有其他逻辑
  2. createFileObjects 清理内存后上传 sb3 文件，并监听文件读取事件 onload
  3. handleChange 选择文件后弹框确认，同意后进入下一步，不同意清理内存后关闭 “文件选择框”
  4. requestProjectUpload 修改 state.scratchGui.projectState.loadingState 项目状态为 “uploading”
  5. handleFinishedLoadingUpload 读取文件内容 （文件上传后触发组件 componentDidUpdate 事件时调用此方法）
  6. onload 通过 dispatch(openLoadingProject()) 打开 “加载提示” 模态框，并调用 state.scratchGui.vm.loadProject 开始加载项目，然后调用 dispatch(setProjectTitle(title)) 设置项目名称，最后改变 state.scratchGui.projectState 关闭模态框。
  7. removeFileObjects 清理内存（开始、完成、失败时都执行清理工作）