運行邏輯整理

項目入口主要功能包裝（高階組件） 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: 監(jiān)聽 onSetLanguage 事件修改 state.locales 狀態(tài)切換語言

• “提示查詢” QueryParserHOC: 通過 onOpenTipsLibrary 調(diào)用 state.openTipsLibrary 更新狀態(tài)，以供 src/components/menu-bar/menu-bar.jsx 點擊事件調(diào)用

• “獲取項目” ProjectFetcherHOC: 設(shè)置 資源主機、項目主機 通過 fetchProject 調(diào)用 storage.load 加載項目

• “保存項目” ProjectSaverHOC:

  • componentWillMount 添加 離開頁面 監(jiān)聽器 window.onbeforeunload = e => this.leavePageConfirm(e);
  • updateProjectToStorage 調(diào)用 this.storeProject 更新項目到 storage
  • createNewProjectToStorage 調(diào)用 this.storeProject 創(chuàng)建項目到 storage
  • createCopyToStorage 調(diào)用 this.storeProject 復(fù)制項目到 storage
  • createRemixToStorage 調(diào)用 this.storeProject 重制項目到 storage
  • storeProject 調(diào)用 this.storeProjectThumbnail 存儲項目到 storage
  • storeProjectThumbnail 調(diào)用 this.getProjectThumbnail 設(shè)置項目快照
  • getProjectThumbnail 獲取項目快照

• “上傳文件” SBFileUploaderHOC: 添加 onStartSelectingFileUpload 文件上傳邏輯，并添加回調(diào)點以供 src/components/menu-bar/menu-bar.jsx 點擊事件調(diào)用，步驟如下

  1. handleStartSelectingFileUpload 預(yù)處理 可能會有其他邏輯
  2. createFileObjects 清理內(nèi)存后上傳 sb3 文件，并監(jiān)聽文件讀取事件 onload
  3. handleChange 選擇文件后彈框確認，同意后進入下一步，不同意清理內(nèi)存后關(guān)閉 “文件選擇框”
  4. requestProjectUpload 修改 state.scratchGui.projectState.loadingState 項目狀態(tài)為 “uploading”
  5. handleFinishedLoadingUpload 讀取文件內(nèi)容 （文件上傳后觸發(fā)組件 componentDidUpdate 事件時調(diào)用此方法）
  6. onload 通過 dispatch(openLoadingProject()) 打開 “加載提示” 模態(tài)框，并調(diào)用 state.scratchGui.vm.loadProject 開始加載項目，然后調(diào)用 dispatch(setProjectTitle(title)) 設(shè)置項目名稱，最后改變 state.scratchGui.projectState 關(guān)閉模態(tài)框。
  7. removeFileObjects 清理內(nèi)存（開始、完成、失敗時都執(zhí)行清理工作）