Page

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

On this page