API
Page
Page API β container for elements inside the store
Page is a container for elements in the store. A store may have several pages.
const page = store.addPage({
background: 'grey', // default is "white"
});
page.set(attrs)
You can use set()
to change properties of the page container. You can change background
, custom
, bleed
, width
, and height
.
See also: docs
page.set({
// background can be any CSS color string or a URL to an image
background: 'red',
// you can use "custom" to save your own app-specific data
custom: { myInternalId: 'some-id-here' },
bleed: 10, // in pixels
width: 1000, // in pixels. Use 'auto' to inherit width from the store
height: 1000, // in pixels. Use 'auto' to inherit height from the store
});
page.setSize({ width, height, useMagic })
Change size of the specified page. If useMagic
is true
, all elements will be resized proportionally.
See also: docs
page.setSize({
width: 1000,
height: 1000,
useMagic: true,
});
page.addElement(attrs)
Create an element with the specified attributes. It is important to provide the type
attribute.
See also: docs
store.activePage?.addElement({
type: 'text',
x: 50,
y: 50,
fill: 'black',
text: 'hello',
});
page.clone()
Duplicate the page.
See also: docs
store.activePage?.clone();
page.setZIndex(index)
Change the order of pages.
See also: docs
// move active page to the beginning of the list
store.activePage?.setZIndex(0);
page.children
Use children
to access elements inside the page.
See also: docs
// move every element by 10px to the right
store.activePage?.children.forEach((element) => {
element.set({ x: element.x + 10 });
});
page.computedWidth
Return width of the page in pixels.
See also: docs
page.computedHeight
Return height of the page in pixels.
See also: docs