详情： UI 状态发生变化时触发，uiService.set() 在写入的新值与旧值不同时触发
事件回调函数： (name: keyof UiState, value: UiState[typeof name], preValue: UiState[typeof name]) => void
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 事件