feat: move editorState to workspace

packages/context/src/context.ts

@@ -30,7 +30,7 @@ export const useDesigner = () => {
 };
 
 export const useEditorState = () => {
-  return useTangoEngine()?.engine.editor;
+  return useTangoEngine()?.engine.workspace.editorState;
 };
 
 export const useWorkspaceData = () => {

packages/core/src/factory.ts

@@ -38,15 +38,10 @@ export function createEngine({
   defaultActiveSidebarPanel = '',
   menuData,
 }: ICreateEngineOptions) {
-  const editorState = new EditorState({
-    defaultActiveFile: workspace.activeViewFile || workspace.entry,
-  });
   const engine = new Engine({
     workspace,
-    editor: editorState,
     designer: new Designer({
       workspace,
-      editor: editorState,
       simulator: defaultSimulatorMode,
       activeView: defaultActiveView,
       activeSidebarPanel: defaultActiveSidebarPanel,

packages/core/src/models/designer.ts

@@ -1,7 +1,6 @@
 import { action, computed, makeObservable, observable, toJS } from 'mobx';
-import { IWorkspace } from './interfaces';
 import { MenuDataType } from '@music163/tango-helpers';
-import { EditorState } from './editor-state';
+import { IWorkspace } from './interfaces';
 
 export type SimulatorNameType = 'desktop' | 'phone';
 
@@ -19,7 +18,6 @@ interface IViewportBounding {
 }
 
 interface IDesignerOptions {
-  editor: EditorState;
   workspace: IWorkspace;
   simulator?: SimulatorNameType | ISimulatorType;
   /**
@@ -112,8 +110,6 @@ export class Designer {
 
   private readonly workspace: IWorkspace;
 
-  private readonly editor: EditorState;
-
   get simulator(): ISimulatorType {
     return toJS(this._simulator);
   }
@@ -164,7 +160,6 @@ export class Designer {
 
   constructor(options: IDesignerOptions) {
     this.workspace = options.workspace;
-    this.editor = options.editor;
 
     const {
       simulator,
@@ -248,26 +243,16 @@ export class Designer {
       return;
     }
 
-    const editor2workspace = () => {
-      if (this.editor.isFilesChanged) {
-        this.workspace.clearFiles();
-        this.workspace.addFiles(this.editor.listFileData());
-      }
-    };
-    const workspace2editor = () => {
-      this.editor.clear();
-      this.editor.addFiles(this.workspace.listFileData());
-    };
     if (view === 'dual') {
       this.setActiveSidebarPanel('');
       this.toggleRightPanel(false);
       this.toggleIsPreview(true);
-      workspace2editor();
+      this.workspace.setMode('code');
     } else if (view === 'design') {
       this.toggleIsPreview(false);
-      editor2workspace();
+      this.workspace.setMode('design');
     } else if (view === 'code') {
-      workspace2editor();
+      this.workspace.setMode('code');
     }
 
     this._activeView = view;

packages/core/src/models/editor-state.ts

@@ -15,6 +15,7 @@ type UpdateFilePayload = Pick<EditorActionPayload, 'filename' | 'code'>;
 
 interface EditorStateConfig {
   defaultActiveFile: string;
+  files: IFileConfig[];
 }
 
 export class EditorState {
@@ -36,8 +37,9 @@ export class EditorState {
   }
 
   constructor(options?: EditorStateConfig) {
-    this._activeFile = options?.defaultActiveFile;
     this._history = new EditorHistory();
+    this._activeFile = options?.defaultActiveFile;
+    this.addFiles(options?.files);
 
     makeObservable(this, {
       _activeFile: observable,
@@ -97,6 +99,10 @@ export class EditorState {
   }
 
   addFiles(fileList: AddFilePayload[]) {
+    if (!fileList || !fileList.length) {
+      return;
+    }
+
     fileList.forEach(({ filename, ...rest }) => {
       this._files.set(filename, rest);
     });

packages/core/src/models/engine.ts

@@ -1,5 +1,4 @@
 import { Designer } from './designer';
-import { EditorState } from './editor-state';
 import { IWorkspace } from './interfaces';
 
 /**
@@ -14,14 +13,9 @@ export class Engine {
    * 设计器状态
    */
   designer: Designer;
-  /**
-   * 编辑器状态
-   */
-  editor: EditorState;
 
-  constructor(options: Pick<Engine, 'workspace' | 'designer' | 'editor'>) {
+  constructor(options: Pick<Engine, 'workspace' | 'designer'>) {
     this.workspace = options.workspace;
     this.designer = options.designer;
-    this.editor = options.editor;
   }
 }

packages/core/src/models/interfaces.ts

@@ -17,6 +17,7 @@ import { TangoStoreModule } from './store-module';
 import { TangoServiceModule } from './service-module';
 import { IdGenerator } from '../helpers';
 import { AppEntryModule } from './entry-module';
+import { EditorState } from './editor-state';
 
 export interface IViewFile {
   readonly workspace: IWorkspace;
@@ -136,10 +137,17 @@ export interface IViewNode {
   get loc(): unknown;
 }
 
+export type WorkspaceMode = 'design' | 'code';
+
 export interface IWorkspace {
   history: TangoHistory;
   selectSource: SelectSource;
   dragSource: DragSource;
+  editorState: EditorState;
+  /**
+   * 工作区模式: design-设计模式, code-源码模式
+   */
+  mode: WorkspaceMode;
 
   files: Map<string, TangoFile>;
   componentPrototypes: Map<string, IComponentPrototype>;
@@ -176,6 +184,8 @@ export interface IWorkspace {
   ready: () => void;
   refresh: (names: string[]) => void;
 
+  setMode: (mode: WorkspaceMode) => void;
+
   setActiveRoute: (path: string) => void;
 
   /**

packages/core/src/models/workspace.ts

@@ -27,7 +27,7 @@ import { HistoryMessage, TangoHistory } from './history';
 import { TangoNode } from './node';
 import { TangoJsModule } from './module';
 import { TangoFile, TangoJsonFile, TangoLessFile } from './file';
-import { IWorkspace } from './interfaces';
+import { IWorkspace, WorkspaceMode } from './interfaces';
 import { IFileConfig, FileType, ITangoConfigPackages, IPageConfigData } from '../types';
 import { SelectSource } from './select-source';
 import { DragSource } from './drag-source';
@@ -37,6 +37,7 @@ import { TangoServiceModule } from './service-module';
 import { TangoViewModule } from './view-module';
 import { TangoComponentsEntryModule } from './component-module';
 import { AppEntryModule } from './entry-module';
+import { EditorState } from './editor-state';
 
 export interface IWorkspaceOptions {
   /**
@@ -65,9 +66,27 @@ export interface IWorkspaceOptions {
  * 工作区
  */
 export class Workspace extends EventTarget implements IWorkspace {
+  /**
+   * 历史记录
+   */
   history: TangoHistory;
+  /**
+   * 选中源
+   */
   selectSource: SelectSource;
+  /**
+   * 拖拽源
+   */
   dragSource: DragSource;
+  /**
+   * 编辑器状态
+   */
+  editorState: EditorState;
+
+  /**
+   * 工作区模式
+   */
+  mode: WorkspaceMode;
 
   /**
    * 工作区的文件列表
@@ -223,6 +242,11 @@ export class Workspace extends EventTarget implements IWorkspace {
     this.history = new TangoHistory(this);
     this.selectSource = new SelectSource(this);
     this.dragSource = new DragSource(this);
+    this.editorState = new EditorState({
+      defaultActiveFile: options?.entry,
+      files: options?.files,
+    });
+    this.mode = 'code';
     this.componentPrototypes = new Map();
     this.entry = options?.entry;
     this.activeRoute = options?.defaultActiveRoute || '/';
@@ -244,6 +268,7 @@ export class Workspace extends EventTarget implements IWorkspace {
     }
 
     makeObservable(this, {
+      mode: observable,
       files: observable,
       activeRoute: observable,
       activeViewFile: observable,
@@ -252,9 +277,34 @@ export class Workspace extends EventTarget implements IWorkspace {
       setActiveRoute: action,
       addFile: action,
       removeFile: action,
+      setMode: action,
     });
   }
 
+  /**
+   * 设置工作区模式
+   */
+  setMode(mode: WorkspaceMode) {
+    const prevMode = this.mode;
+    if (prevMode === mode) {
+      return;
+    }
+
+    this.mode = mode;
+
+    if (mode === 'design') {
+      // 从源码切换到设计模式
+      if (this.editorState.isFilesChanged) {
+        this.clearFiles();
+        this.addFiles(this.editorState.listFileData());
+      }
+    } else {
+      // 从设计切换到源码模式
+      this.editorState.clear();
+      this.editorState.addFiles(this.listFileData());
+    }
+  }
+
   getPrototype(name: string | IComponentPrototype) {
     if (isString(name)) {
       return this.componentPrototypes.get(name);
@@ -289,6 +339,9 @@ export class Workspace extends EventTarget implements IWorkspace {
         }
       }
     }
+    if (filename) {
+      this.editorState.setActiveFile(filename);
+    }
   }
 
   setComponentPrototypes(prototypes: Record<string, IComponentPrototype>) {