|
|
|
|
@ -1,11 +1,9 @@
|
|
|
|
|
import { action, observable } from 'mobx';
|
|
|
|
|
import { observer } from 'mobx-react';
|
|
|
|
|
import * as React from 'react';
|
|
|
|
|
import { CoolDownTime } from '../../../Common/CoolDownTime';
|
|
|
|
|
import { commandMachine } from '../../../Editor/CommandMachine';
|
|
|
|
|
import { userConfig } from '../../../Editor/UserConfig';
|
|
|
|
|
import { ICON_CDN } from '../../IconEnum';
|
|
|
|
|
import { ToolsBlockStore } from '../TopToolBar/ToolsBlockStore';
|
|
|
|
|
import { ICommandIconInfo, TopToolBarBlockData } from '../TopToolBar/TopToolBarInterface';
|
|
|
|
|
import { ICommandIconInfo } from '../TopToolBar/TopToolBarInterface';
|
|
|
|
|
import './PropertiesPanel.less';
|
|
|
|
|
|
|
|
|
|
export interface ToolBarProps
|
|
|
|
|
@ -15,42 +13,50 @@ export interface ToolBarProps
|
|
|
|
|
@observer
|
|
|
|
|
export class ToolBar extends React.Component<ToolBarProps, {}>
|
|
|
|
|
{
|
|
|
|
|
@observable actualWidth: string;
|
|
|
|
|
@observable windowHeigth = window.innerHeight;
|
|
|
|
|
@observable windowWidth = window.innerWidth;
|
|
|
|
|
componentDidMount()
|
|
|
|
|
ulRef = React.createRef<HTMLUListElement>();
|
|
|
|
|
observer: ResizeObserver;
|
|
|
|
|
time = new CoolDownTime;
|
|
|
|
|
componentDidMount(): void
|
|
|
|
|
{
|
|
|
|
|
window.addEventListener('resize', this.calToolbarWidth, false);
|
|
|
|
|
this.observer = new ResizeObserver((entries: ResizeObserverEntry[]) =>
|
|
|
|
|
{
|
|
|
|
|
this.UpdateWidth();
|
|
|
|
|
});
|
|
|
|
|
this.observer.observe(this.ulRef.current);
|
|
|
|
|
}
|
|
|
|
|
@action
|
|
|
|
|
calToolbarWidth = () =>
|
|
|
|
|
componentWillUnmount(): void
|
|
|
|
|
{
|
|
|
|
|
const { iconList } = this.props;
|
|
|
|
|
this.windowHeigth = window.innerHeight;
|
|
|
|
|
this.windowWidth = window.innerWidth;
|
|
|
|
|
let iconNum = iconList.length;
|
|
|
|
|
let blocksData = ToolsBlockStore.GetInstance().blocksData as TopToolBarBlockData;
|
|
|
|
|
let drawIconNum = blocksData.draw.IconNum;
|
|
|
|
|
let headHeight = 0;
|
|
|
|
|
drawIconNum * 40 <= this.windowWidth ? headHeight = 108 : headHeight = 153;
|
|
|
|
|
if (this.windowHeigth > iconNum * 58 + (userConfig.smalliconmode ? (headHeight + 16) : 124))
|
|
|
|
|
this.actualWidth = "40px";
|
|
|
|
|
else if (this.windowHeigth < (iconNum % 2 == 1 ? iconNum + 1 : iconNum) * 58 / 2 + (userConfig.smalliconmode ? (headHeight + 17) : 125))
|
|
|
|
|
this.actualWidth = "130px";
|
|
|
|
|
else
|
|
|
|
|
this.actualWidth = "80px";
|
|
|
|
|
};
|
|
|
|
|
this.observer.disconnect();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidUpdate(prevProps: Readonly<ToolBarProps>, prevState: Readonly<{}>, snapshot?: any): void
|
|
|
|
|
{
|
|
|
|
|
this.UpdateWidth();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private UpdateWidth()
|
|
|
|
|
{
|
|
|
|
|
this.time.Debounce(() =>
|
|
|
|
|
{
|
|
|
|
|
this.ulRef.current.parentElement.style.width = `${this.ulRef.current.scrollWidth}px`;
|
|
|
|
|
}, 50);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render()
|
|
|
|
|
{
|
|
|
|
|
const { iconList } = this.props;
|
|
|
|
|
const liStyle: React.CSSProperties = {
|
|
|
|
|
textAlign: "center",
|
|
|
|
|
writingMode: "horizontal-tb"
|
|
|
|
|
};
|
|
|
|
|
this.calToolbarWidth();
|
|
|
|
|
return (
|
|
|
|
|
<ul className="ul-unstyle" style={{ width: this.actualWidth }} >
|
|
|
|
|
<div style={{ display: "flex" }}>
|
|
|
|
|
<ul className='ul-unstyle'
|
|
|
|
|
style={{ display: "inline-flex" }}
|
|
|
|
|
ref={this.ulRef}
|
|
|
|
|
>
|
|
|
|
|
{
|
|
|
|
|
iconList.map((cmd, index) =>
|
|
|
|
|
iconList.map((cmd) =>
|
|
|
|
|
{
|
|
|
|
|
return (
|
|
|
|
|
<li key={cmd.command} title={cmd.command} style={liStyle}
|
|
|
|
|
@ -66,6 +72,7 @@ export class ToolBar extends React.Component<ToolBarProps, {}>
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
ChenX
3 years ago