Skip to main content

Toolbar

Toolbar is a UI components to change elements on the canvas, reorder and align them, apply undo/redo.

Toolbar image

Basic usage:

import Toolbar from 'polotno/toolbar/toolbar';
import Workspace from 'polotno/canvas/workspace';
const App = ({ store }) => {
return (
<div
style={{
display: 'flex',
height: '100%',
margin: 'auto',
flex: 1,
flexDirection: 'column',
position: 'relative',
}}
>
<Toolbar store={store} />
<Workspace store={store} />
</div>
);
};

Also Toolbar component has additional properties to hide some elements:

type ToolbarProps = {
store: StoreType,
downloadButtonEnabled?: Boolean,
hideTextSpacing?: boolean,
hideTextEffects?: boolean,
hideImageFlip?: boolean,
hideImageEffects?: boolean,
hideImageCrop?: boolean,
hideImageFit?: boolean,
hidePosition?: boolean,
hideOpacity?: boolean,
hideDuplicate?: boolean,
hideLock?: boolean,
hideRemove?: boolean,
};
// example
<Toolbar store={store} hideDuplicate downloadButtonEnabled={false} />;

How to overwrite available properties for an element?#

In some application you may want to change available properties for selected element. Following Custom Element Example you can make your own React component for any available element.

I recommend to use blueprintjs components to make your UI and use <Navbar.Group> to group inputs. Also remember to wrap your component to observer from mobx-react-lite library to add automatic reactivity of your components.

Example:

import React from 'react';
import { observer } from 'mobx-react-lite';
import { NumericInput, Navbar, Alignment } from '@blueprintjs/core';
import ColorPicker from 'polotno/toolbar/color-picker';
import { unstable_registerToolbarComponent } from 'polotno/config';
const TextToolbar = observer(({ store }) => {
const element = store.selectedElements[0];
return (
<Navbar.Group align={Alignment.LEFT}>
<ColorPicker
value={element.fill}
onChange={(fill) =>
element.set({
fill,
})
}
/>
<NumericInput
onValueChange={(fontSize) => {
element.set({ fontSize: fontSize });
}}
value={element.fontSize}
style={{ width: '50px', marginLeft: '10px' }}
min={1}
max={40}
/>
</Navbar.Group>
);
});
unstable_registerToolbarComponent('text', TextToolbar);

Text element inputs#

If you want to customize the toolbar for an text element, you can use some built-in inputs:

import {
FontFamilyInput,
FontSizeInput,
FontStyleGroup,
FontColorInput,
SpacingInput,
} from 'polotno/toolbar/text-toolbar';
// You need to pass "store" and "element" props to these inputs
<FontFamilyInput store={store} element={element} />;