Customizing Resize Panel
How to set your own default page sizes?
If you don't like default size panel, you cal always make your own from scratch. You just need to define new Sizes section. In can be like this:
import { observer } from 'mobx-react-lite';
import { SectionTab } from 'polotno/side-panel';
import { Button } from '@blueprintjs/core';
import { GiResize } from 'react-icons/gi';
const AVAILABLE_SIZES = [
{ width: 500, height: 500 },
{ width: 1000, height: 1000 },
{ width: 1500, height: 1500 },
];
// define the new custom section
const CustomSizesPanel = {
name: 'sizes',
Tab: (props) => (
<SectionTab name="Sizes" {...props}>
<GiResize icon="new-text-box" />
</SectionTab>
),
// we need observer to update component automatically on any store changes
Panel: observer(({ store }) => {
// we will just render buttons for each size
// but you also can add your own controls
// size inputs, etc
return (
<div>
{AVAILABLE_SIZES.map(({ width, height }, i) => (
<Button
key={i}
style={{ width: '100%', marginBottom: '20px' }}
onClick={() => {
store.setSize(width, height);
}}
>
{width}x{height}
</Button>
))}
</div>
);
}),
};