vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-26 08:04:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Zoom toolbar reandered during load.

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2022-10-09 21:00:53 -07:00
parent 0dcdfc69ff
commit 3d8e8dce38
2 changed files with 26 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/editor/src/components/index.tsx
View File

@ -80,7 +80,11 @@ const Editor = ({
const locale = options.locale; const locale = options.locale;
const msg = I18nMsg.loadLocaleData(locale); const msg = I18nMsg.loadLocaleData(locale);
const menubarConfiguration = buildAppBarConfig( return (
<ThemeProvider theme={editorTheme}>
<IntlProvider locale={locale} messages={msg}>
<AppBar
configurations={buildAppBarConfig(
model, model,
options.mapTitle, options.mapTitle,
capability, capability,
@ -89,15 +93,9 @@ const Editor = ({
() => { () => {
model.save(true); model.save(true);
}, },
); )}
/>
// if the Toolbar is not hidden before the variable 'isMobile' is defined, it appears intermittently when the page loads
// if the Toolbar is not rendered, Menu.ts cant find buttons for create event listeners
// so, with this hack the Toolbar is rendered but no visible until the variable 'isMobile' is defined
return (
<ThemeProvider theme={editorTheme}>
<IntlProvider locale={locale} messages={msg}>
<AppBar configurations={menubarConfiguration} />
<Popover <Popover
id="popover" id="popover"
open={popoverOpen} open={popoverOpen}
@ -117,7 +115,7 @@ const Editor = ({
></Toolbar> ></Toolbar>
)} )}
<Toolbar <Toolbar
configurations={buildZoomToolbarConfig(capability, model?.getDesigner())} configurations={buildZoomToolbarConfig(model, capability)}
position={{ position={{
position: { position: {
right: '7px', right: '7px',

19
packages/editor/src/components/toolbar/toolbarConfigBuilder.tsx
View File

@ -300,40 +300,45 @@ export function buildToolbarConfig(designer: Designer): ActionConfig[] {
]; ];
} }
export function buildZoomToolbarConfig(capability: Capability, designer: Designer): ActionConfig[] { export function buildZoomToolbarConfig(model: Editor, capability: Capability): ActionConfig[] {
if (!designer) return [];
return [ return [
{ {
icon: <CenterFocusStrongOutlinedIcon />, icon: <CenterFocusStrongOutlinedIcon />,
tooltip: $msg('CENTER_POSITION'), tooltip: $msg('CENTER_POSITION'),
onClick: () => { onClick: () => {
designer.zoomToFit(); model.getDesigner().zoomToFit();
}, },
disabled: () => !model?.isMapLoadded(),
}, },
{ {
// zoom value candidate, neds to fixit // zoom value candidate, neds to fixit
render: () => ( render: () => (
<Box sx={{ p: 0.5 }}> <Box sx={{ p: 0.5 }}>
<Typography variant="overline" color="gray"> <Typography variant="overline" color="gray">
%{Math.floor((1 / designer.getWorkSpace()?.getZoom()) * 100)} %
{!model?.isMapLoadded()
? 100
: Math.floor((1 / designer.getWorkSpace()?.getZoom()) * 100)}
</Typography> </Typography>
</Box> </Box>
), ),
disabled: () => !model?.isMapLoadded(),
}, },
{ {
icon: <ZoomInOutlinedIcon />, icon: <ZoomInOutlinedIcon />,
tooltip: $msg('ZOOM_IN'), tooltip: $msg('ZOOM_IN'),
onClick: () => { onClick: () => {
designer.zoomIn(); model.getDesigner().zoomIn();
}, },
disabled: () => !model?.isMapLoadded(),
}, },
{ {
icon: <ZoomOutOutlinedIcon />, icon: <ZoomOutOutlinedIcon />,
tooltip: $msg('ZOOM_OUT'), tooltip: $msg('ZOOM_OUT'),
onClick: () => { onClick: () => {
designer.zoomOut(); model.getDesigner().zoomOut();
}, },
disabled: () => !model?.isMapLoadded(),
}, },
{ {
icon: <KeyboardOutlined />, icon: <KeyboardOutlined />,