How to set your own default page sizes?
You can make your own panel from scratch and define new Sizes section. For example:
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>
);
}),
};