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,
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"
activePageBorderColor="red"
bleedColor="rgba(255, 0, 0, 0.2)"
paddingX={50}
paddingY={50}
altCloneEnabled={true}
/>
Change default styles of Transformer (resize tool) and Highlighter (on object select or hover).
import { setHighlighterStyle, setTransformerStyle } from 'polotno/config';
setTransformerStyle({
anchorStroke: 'red',
borderStroke: 'red',
});
setHighlighterStyle({
stroke: 'red',
});
import { setInnerImageCropTransformerStyle, setOuterImageCropTransformerStyle } from 'polotno/config';
setInnerImageCropTransformerStyle({
borderStroke: 'red'
});
Show only the current page in Workspace
You can you renderOnlyActivePage
property to show only one page in the workspace.
<Workspace renderOnlyActivePage />
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/canvas/hotkeys';
<Workspace
store={store}
onKeyDown={(e, store) => {
if (e.key === 'Escape') {
store.selectElements([]);
return;
}
handleHotkey(e, store);
}}
/>;