github/tmagic-editor
1
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2026-09-14 07:59:46 +00:00
Code Issues Packages Projects Releases Wiki Activity
tmagic-editor/docs/assets/api_editor_uiServiceEvents.md.Da5ctlXQ.js
github-actions[bot] 04e99d7014 Deploy to GitHub pages
2026-09-14 07:30:26 +00:00

63 lines
18 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import{H as e,Mt as t,dt as n,lt as r}from"./chunks/framework.BTDV-FQ9.js";var i=JSON.parse(`{"title":"uiService事件","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/uiServiceEvents.md","filePath":"api/editor/uiServiceEvents.md"}`),a={name:`api/editor/uiServiceEvents.md`};function o(e,i,a,o,s,c){return t(),r(`div`,null,[...i[0]||=[n(`<h1 id="uiservice事件" tabindex="-1">uiService事件 <a class="header-anchor" href="#uiservice事件" aria-label="Permalink to “uiService事件”">​</a></h1><h2 id="state-change" tabindex="-1">state-change <a class="header-anchor" href="#state-change" aria-label="Permalink to “state-change”">​</a></h2><ul><li><p><strong>详情：</strong> UI 状态发生变化时触发，<a href="./uiServiceMethods.html#set">uiService.set()</a> 在写入的新值与旧值不同时触发</p></li><li><p><strong>事件回调函数：</strong> <code>(name: keyof UiState, value: UiState[typeof name], preValue: UiState[typeof name]) =&gt; void</code></p><details class="details custom-block"><summary>查看 UiState 类型定义</summary><div class="language-ts"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> UiState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 当前点击画布是否触发选中，true: 不触发，false: 触发，默认为false */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> uiSelectMode</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 是否显示整个配置源码， true: 显示， false: 不显示，默认为false */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> showSrc</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 是否将样式配置单独一列显示， true: 显示， false: 不显示，默认为true */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> showStylePanel</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 画布显示放大倍数，默认为 1 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> zoom</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 画布容器的宽高 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> stageContainerRect</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> width</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> height</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> };</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 画布顶层div的宽高，可用于改变画布的大小 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> stageRect</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> StageRect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 编辑器列布局每一列的宽度，分为左中右三列 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> columnWidth</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> GetColumnWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 编辑器列布局左侧列最小宽度 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> minLeftColumnWidth</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 编辑器列布局中间列最小宽度 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> minCenterColumnWidth</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 编辑器列布局右侧列最小宽度 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> minRightColumnWidth</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 是否显示画布参考线，true: 显示，false: 不显示，默认为true */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> showGuides</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 画布上是否存在参考线 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> hasGuides</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 是否显示标尺，true: 显示，false: 不显示，默认为true */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> showRule</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 用于控制该属性配置表单内组件的尺寸 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> propsPanelSize</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;large&#39;</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;default&#39;</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;small&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 是否显示新增页面按钮 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> showAddPageButton</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 是否在页面工具栏显示呼起页面列表按钮 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> showPageListButton</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 是否隐藏侧边栏 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> hideSlideBar</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 侧边栏面板配置 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> sideBarItems</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> SideComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[];</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 当前激活的侧边栏面板 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> sideBarActiveTabName</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> // navMenu 的宽高</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> navMenuRect</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> left</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> top</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> width</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> height</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> };</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> frameworkRect</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> left</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> top</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> width</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> height</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> };</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></details></li><li><p><strong>示例：</strong></p></li></ul><div class="language-js"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { uiService } </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/editor&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">uiService.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;state-change&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">preValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`\${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">name</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">} 从\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, preValue, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;变为&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">uiService.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">set</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;zoom&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title custom-block-title-default">TIP</p><ul><li>新值与旧值相同时不会触发该事件</li><li>通过 <code>set(&#39;stageRect&#39;, value)</code> 修改画布尺寸时，内部会走 <code>setStageRect</code> 逻辑并可能联动更新 <code>zoom</code>，但不会触发 <code>state-change</code> 事件</li></ul></div>`,5)]])}var s=e(a,[[`render`,o]]);export{i as __pageData,s as default};
Reference in New Issue View Git Blame Copy Permalink