diff --git a/src/UI/Components/TopToolBar/ToolsBlock.tsx b/src/UI/Components/TopToolBar/ToolsBlock.tsx index 6b12b8655..e8bae4313 100644 --- a/src/UI/Components/TopToolBar/ToolsBlock.tsx +++ b/src/UI/Components/TopToolBar/ToolsBlock.tsx @@ -1,10 +1,9 @@ import { Button, Intent } from "@blueprintjs/core"; -import { action, observable } from "mobx"; +import { action, observable, reaction } from "mobx"; import { observer } from "mobx-react"; import * as React from 'react'; import { end } from "xaop"; import { app } from "../../../ApplicationServices/Application"; -import { CommandNames } from "../../../Common/CommandNames"; import { Sleep } from "../../../Common/Sleep"; import { ZINDEX } from "../../../Common/ZIndex"; import { commandMachine } from "../../../Editor/CommandMachine"; @@ -12,7 +11,9 @@ import { CommandState } from "../../../Editor/CommandState"; import { userConfig } from "../../../Editor/UserConfig"; import { ICON_CDN } from "../../IconEnum"; import { ToolsBlockStore } from "./ToolsBlockStore"; -import { ICommandIconInfo, TopToolBarBlockData, TopToolBarBlockDataItem } from "./TopToolBarInterface"; +import { ICommandIconInfo, TopToolBarBlockData } from "./TopToolBarInterface"; + +const ICON_MAX = 35; // 顶端工具栏每部分最多显示个数 export interface ToolsBlockProps { @@ -26,12 +27,15 @@ export class ToolsBlock extends React.Component { @observable isExtendShow: boolean = false; divEl: HTMLDivElement; - @observable listMain: ICommandIconInfo[] = this.props.list.slice(0, 35); //顶端工具栏每部分最多显示个数 - @observable listSmall: ICommandIconInfo[] = this.props.list.slice(35); //顶端工具栏每部分最多显示个数 + @observable listMain: ICommandIconInfo[] = this.props.list.slice(0, ICON_MAX); + @observable listSmall: ICommandIconInfo[] = this.props.list.slice(ICON_MAX); @observable windowWidth = window.innerWidth; private blocksData = ToolsBlockStore.GetInstance().blocksData as TopToolBarBlockData; private _DisposeAOP: Function; + private reCalcLSNum: boolean = false; // 是否需要重新计算小图标个数 + private _DisposeReaction: Function; + componentDidMount() { window.addEventListener('resize', this.calSmallIconList, false); @@ -42,6 +46,11 @@ export class ToolsBlock extends React.Component { if (this.isExtendShow) this.isExtendShow = false; }); + this._DisposeReaction = reaction(() => userConfig.smalliconmode, () => + { + this.forceUpdate();// 图标模式发生变化时,需要先render渲染大图标工具块 + this.reCalcLSNum = true;// 渲染完毕后,再去计算小图标工具块个数 + }); } componentWillUnmount() { @@ -51,11 +60,34 @@ export class ToolsBlock extends React.Component this._DisposeAOP(); this._DisposeAOP = undefined; } + if (this._DisposeReaction) + { + this._DisposeReaction(); + this._DisposeReaction = undefined; + } } + + UNSAFE_componentWillReceiveProps(nextProps: Readonly): void + { + // 在切换普通账号和管理员账号时,工具块个数会变化,需要重新计算 + const nextLM = nextProps.list.slice(0, ICON_MAX); + if (this.listMain.length !== nextLM.length) + { + this.listMain = nextLM;// 工具块个数发生变化,需要先更新并render渲染大图标工具块 + this.reCalcLSNum = true;// 渲染完毕后,再去计算小图标工具块个数 + } + } + componentDidUpdate() { if (this.isExtendShow) this.divEl.focus(); + + if (this.reCalcLSNum) + { + this.reCalcLSNum = false; + this.calSmallIconList(); + } } @action @@ -69,29 +101,6 @@ export class ToolsBlock extends React.Component return; this.listSmall = []; let width = b.clientWidth; - //不可见的工具块 - if (width === 0) - { - let topToolBarEl = document.getElementById("TopToolBar"); - let topToolBarWidth: number; - if (topToolBarEl) - topToolBarWidth = topToolBarEl.clientWidth; - let blocksData = ToolsBlockStore.GetInstance().blocksData as TopToolBarBlockData; - let iconNum = 0; - for (let key in blocksData) - { - let data = blocksData[key] as TopToolBarBlockDataItem; - if (data.blocksId.includes(blockId)) - { - iconNum = data.IconNum; - break; - } - } - if (Math.floor(userConfig.smalliconmode ? (topToolBarWidth / 20) : (topToolBarWidth / 55)) < iconNum) - this.listSmall = [list[list.length - 1]]; - return; - } - //可见的工具块 let num: number; if (userConfig.smalliconmode) { @@ -102,11 +111,12 @@ export class ToolsBlock extends React.Component { num = Math.floor(width / 55); } - // this.listMain = list.slice(0, num); if (num >= list.length) return; + if (num === 0) return; // 大图标工具块个数不为0 this.listSmall = list.slice(num); }; + HandleOnClick = async (cmd: string) => { const { execFun } = this.props; @@ -127,14 +137,6 @@ export class ToolsBlock extends React.Component } execFun(cmd); }; - display = (cmd: ICommandIconInfo) => - { - if (cmd.command === CommandNames.TemplateCheck && !userConfig.isAdmin) - return true; - if (cmd.command === CommandNames.TemplateSearch && !userConfig.showShareModule) - return true; - return false; - }; renderMainList = () => { @@ -149,7 +151,7 @@ export class ToolsBlock extends React.Component title={cmd.title + "\n" + cmd.command} style={{ width: userConfig.smalliconmode ? 40 : 55, - display: cmd.command === CommandNames.TemplateCheck && !userConfig.isAdmin ? "none" : "block", + display: "block", marginRight: userConfig.smalliconmode && this.windowWidth > drawIconNum * 40 ? Math.floor((this.windowWidth - drawIconNum * 40) / drawIconNum) : 0 }} onClick={() => @@ -227,7 +229,6 @@ export class ToolsBlock extends React.Component