class Editor {
  sceneGraph: SceneGraph;
  setting: Setting;
  viewportManager: ViewportManager;
  toolManager: ToolManager;
  commandManager: CommandManager;
  zoomManager: ZoomManager;
  hostEventManager: HostEventManager;
  selectedElements: SelectedElements;

  // ...

  constructor(options: IEditorOptions) {
    // 也有些模塊不需要和其他模塊通信
    this.setting = new Setting();
    
    // 將 Editor 示例作為子模塊的構(gòu)造參數(shù)
    this.sceneGraph = new SceneGraph(this);
    this.viewportManager = new ViewportManager(this);
    this.toolManager = new ToolManager(this);
    this.commandManager = new CommandManager(this);
    this.zoomManager = new ZoomManager(this);
    this.selectedElements = new SelectedElements(this);
    // ...
    this.hostEventManager = new HostEventManager(this);
    
    this.hostEventManager.bindHotkeys();
    this.zoomManager.zoomToFit(1);
  }
}

export class ZoomManager {
 private editor: Editor
  // ...

  constructor(editor: Editor) {
    // 將傳入的 Editor 對(duì)象保存為私有屬性
    this.editor = editor
    // ...
  }
  
  zoomIn(cx?: number, cy?: number) {
    // 通過(guò) this.editor 訪問(wèn)到其他模塊
    const zoomStep = this.editor.setting.get('zoomStep');
   // ...
}

const { EventEmitter } = require('events');

// 創(chuàng)建事件觸發(fā)器實(shí)例
const emitter = new EventEmitter();

// 給 event-1 事件添加監(jiān)聽(tīng)器
emitter.on('event-1', (a, b) => {
  console.log('收到事件1消息，參數(shù)為：', a, b);
});

// 觸發(fā)事件，并提供參數(shù)。
emitter.emit('event-1', 3, 4);

// 移除指定監(jiān)聽(tīng)器
// emitter.off('event-1', handler);

const ee = new EventEmitter<{
  // 指定事件和對(duì)應(yīng)的函數(shù)類(lèi)型
  update(newVal: string, prevVal: string): void;
  destroy(): void;
}>();
const handler = (newVal: string, prevVal: string) => {
  console.log(newVal, prevVal)
}
ee.on("update", handler);
ee.emit('update', '前端西瓜哥上班前的精神狀態(tài)', '前端西瓜哥上班后的精神狀態(tài)')
ee.off("update", handler);

// 編譯報(bào)錯(cuò)（數(shù)字不匹配字符串類(lèi)型）
// 'number' is not assignable to parameter of type 'string'
ee.emit('update', 1, 2)

// (val: number) => void' is not assignable to parameter of type '() => void
ee.on('destroy', (val: number) => {})

class A extends EventEmitter {
  // ...
}

A.on('event-1', () => {})

class A {
  emitter = new Emitter()
}

A.emitter.on('event-1', () => {})

class ZoomManager {
  private zoom = 1;
  // 自己造的 EventEmitter 輪子
  private emitter = new EventEmitter<{
    zoomChange(zoom: number, prevZoom: number): void;
  }>();
  
  setZoom(zoom: number) {
    const prevZoom = this.zoom;
    this.zoom = zoom;

    // 觸發(fā) “zoom改變” 事件
    this.emitter.emit('zoomChanged', zoom, prevZoom);
  }
}

const ZoomActions = () => {
  const editor = useContext(EditorContext);
  const [zoom, setZoom] = useState(1);
  
  // 組件掛載 hook
  useEffect(() => {
    if (editor) {
      // 初始化時(shí)要主動(dòng)獲取 zoom 值
      setZoom(editor.zoomManager.getZoom());

      // 通過(guò)事件同步 core 層的狀態(tài)
      const handler = (zoom: number) => {
        setZoom(zoom);
      };
      editor.zoomManager.emitter.on('zoomChanged', handler);
  
      // 組件銷(xiāo)毀時(shí)解綁
      return () => {
        editor.zoomManager.emitter.off('zoomChanged', handler);
      };
    }
  }, []);
}