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