uiService事件

state-change

• 详情： UI 状态发生变化时触发，uiService.set() 在写入的新值与旧值不同时触发

• 事件回调函数： (name: keyof UiState, value: UiState[typeof name], preValue: UiState[typeof name]) => void

  查看 UiState 类型定义

  export interface UiState {
    /** 当前点击画布是否触发选中，true: 不触发，false: 触发，默认为false */
    uiSelectMode: boolean;
    /** 是否显示整个配置源码， true: 显示， false: 不显示，默认为false */
    showSrc: boolean;
    /** 是否将样式配置单独一列显示， true: 显示， false: 不显示，默认为true */
    showStylePanel: boolean;
    /** 画布显示放大倍数，默认为 1 */
    zoom: number;
    /** 画布容器的宽高 */
    stageContainerRect: {
      width: number;
      height: number;
    };
    /** 画布顶层div的宽高，可用于改变画布的大小 */
    stageRect: StageRect;
    /** 编辑器列布局每一列的宽度，分为左中右三列 */
    columnWidth: GetColumnWidth;
    /** 编辑器列布局左侧列最小宽度 */
    minLeftColumnWidth: number;
    /** 编辑器列布局中间列最小宽度 */
    minCenterColumnWidth: number;
    /** 编辑器列布局右侧列最小宽度 */
    minRightColumnWidth: number;
    /** 是否显示画布参考线，true: 显示，false: 不显示，默认为true */
    showGuides: boolean;
    /** 画布上是否存在参考线 */
    hasGuides: boolean;
    /** 是否显示标尺，true: 显示，false: 不显示，默认为true */
    showRule: boolean;
    /** 用于控制该属性配置表单内组件的尺寸 */
    propsPanelSize: 'large' | 'default' | 'small';
    /** 是否显示新增页面按钮 */
    showAddPageButton: boolean;
    /** 是否在页面工具栏显示呼起页面列表按钮 */
    showPageListButton: boolean;
    /** 是否隐藏侧边栏 */
    hideSlideBar: boolean;
    /** 侧边栏面板配置 */
    sideBarItems: SideComponent[];
    /** 当前激活的侧边栏面板 */
    sideBarActiveTabName: string;
  
    // navMenu 的宽高
    navMenuRect: {
      left: number;
      top: number;
      width: number;
      height: number;
    };
    frameworkRect: {
      left: number;
      top: number;
      width: number;
      height: number;
    };
  }

• 示例：

import { uiService } from '@tmagic/editor';

uiService.on('state-change', (name, value, preValue) => {
  console.log(`${name} 从`, preValue, '变为', value);
});

uiService.set('zoom', 1.5);

TIP

• 新值与旧值相同时不会触发该事件
• 通过 set('stageRect', value) 修改画布尺寸时，内部会走 setStageRect 逻辑并可能联动更新 zoom，但不会触发 state-change 事件