Skip to main content

Workspace UI

Workspace is essential part of Polotno framework. It is the main React component that you are going to use to display the drawings and interact with them. You can change canvas and its content programmatically using Store API.

import { Workspace } from 'polotno/canvas/workspace';
import { createStore } from 'polotno/model/store';

const store = createStore({
key: YOUR_API_KEY, // you can create it here: https://polotno.com/cabinet/
// you can hide back-link on a paid license
// but it will be good if you can keep it for Polotno project support
showCredit: true,
});

const App = () => {
return (
<div style={{ height: '100vh' }}>
<Workspace store={store} />
</div>
);
};

The Workspace will automatically take full width and height of its parent. So you don't have adjust its size manually. You can just setup the size of parent <div> with CSS.

Customize page controls

You can customize page controls of your <Workspace /> component. You can remove some buttons, add new one, etc. You are in total control on what else you want to see around page on the canvas.

Take a look into Page Name Demo to see controls component in action.

<Workspace
store={store}
components={{
PageControls: ({ width, height, xPadding, yPadding }) => (
<div
style={{
position: 'absolute',
top: yPadding + 'px',
left: xPadding + 'px',
}}
>
My controls here...
</div>
),
}}
/>

Hide page controls

Optionally you can hide UI to add/remove/duplicate pages.

<Workspace store={store} components={{ PageControls: () => null }} />

Workspace styling

Optionally you can change some styles of the workspace.

<Workspace
store={store}
backgroundColor="grey"
pageBorderColor="black" // border around page
activePageBorderColor="red" // border around active page. It will be used only if you have several pages. Otherwise just pageBorderColor will be used
bleedColor="rgba(255, 0, 0, 0.2)" // color of the bleed area, when it is toggled with `store.toggleBleed()`
// optionally you can change default padding around page content
// you can set it to 0 if you want to have full width and height of the canvas
paddingX={50}
paddingY={50}
altCloneEnabled={true} // enable alt+drag to clone objects, default is true
/>

Change default styles of Transformer (resize tool) and Highlighter (on object select or hover).

import { setHighlighterStyle, setTransformerStyle } from 'polotno/config';

// pass properties of Konva.Transformer shape
setTransformerStyle({
anchorStroke: 'red',
borderStroke: 'red',
});

// pass properties of Konva.Rect node
setHighlighterStyle({
stroke: 'red',
});

No pages UI

If your store has no pages, <Workspace /> component will show a simple UI with a button to create a new page. You can overwrite this UI with your own.

<Workspace
store={store}
components={{
NoPages: ({ store }) => <div>The project has no pages...</div>,
}}
/>

Overwrite keyboard handler

If you don't like default keyboard shortcuts, you can overwrite them with your own.

import { handleHotkey } from 'polotno/workplace/hotkeys';

<Workspace
store={store}
onKeyDown={(e, store) => {
if (e.key === 'Escape') {
store.selectElements([]);
return;
}
// optionally you can call default handler
handleHotkey(e, store);
}}
/>;