Store
is a root data model object that you can use to read and control canvas content, check selection, export into different formats and a lot more! It will also provide you with access to Pages and Elements.
Working with pages
store.addPage()
Store is a set of pages. Each pages have elements on it.
store.pages
The getter. Returns all pages of the store.
store.activePage
The getter. Returns current active page or the last created.
store.selectPage(id)
Mark a page as active. It will automatically scroll <Workspace />
to that page.
store.deletePages(ids)
Remove pages from the store
store.clear()
Remove all pages from the store
UI
store.width
and store.height
Returns size of every page.
store.setSize(width, height, shouldUseMagicResize?)
Set new size of every page in the store.
store.scale
Getter for current zoom level of the active page.
store.setScale(size)
Change zooming of active page.
store.openedSidePanel
Getter for current opened side panel
store.previousOpenedSidePanel
Name of the side-panel that was opened before the current want. Useful if you want to open a side panel temporary for some action then restore back the original side panel.
store.openSidePanel(panelName)
Change open side panel manually.
store.setUnit({ unit, dpi })
Set unit metrics to use in UI.
Important! Setting new unit will NOT change values in store and elements attributes, such as width
, height
, x
, y
, fontSize
. They will still be saved in pixels. Unit metrics will be used only for default UI from Polotno.
store.unit
Returns unit used in UI to display measures. By default it is px
. You can change it to pt
, mm
, cm
, in
.
store.dpi
Returns dpi used to convert pixels to other units.
store.toggleBleed()
Show or hide bleed area on the workspace
store.bleedVisible
Getter for current state of bleed visibility
store.toggleRulers()
Show or hide rulers on workspace
store.rulesVisible
Getter for current state of rulers visibility
store.setRole(role)
Set role of the current user. Possible values are: user
and admin
. For more information see Roles Documentation.
Working with elements
store.selectedElements
Returns array of currently selected elements on the current page
store.selectElements(ids)
Selects elements on the canvas by their ids.
store.deleteElements(ids)
Remove elements from the store.
store.getElementById(id)
Finds elements on the store by passed id:
store.groupElements([element1.id, element2.id])
Group elements. It will create a new element with type group
and will move all passed elements inside it.
store.ungroupElements([element1.id, element2.id])
Ungroup elements. It will move all elements inside group to the page and remove the group.
History
store.history.canUndo
Can we undo state?
store.history.undo()
Undo last changes
store.history.redo()
Redo changes.
store.history.transaction(async () => {})
Batch several actions into one history entry.
store.history.ignore(async () => {})
Run transaction that should be ignored in history
store.history.startTransaction()
Create a new history transaction. After that command all changes will be recorded as one history point.
store.history.endTransaction()
Finish created transaction and record all changes as one history point.
store.history.clear()
Clear history.
Serializations
store.toJSON()
Save store into plain object.
store.loadJSON(json, keepHistory?)
Load passed json into the store. It will update all properties, pages and elements. By default loading JSON into the store will reset undo/redo history (so a user can't undo it). You can use keepHistory
argument, if you want to preserve the history.
Events
store.on('change', () => {})
Listen to any changes in the store. The event may trigger frequently on some operations like resize or dragging. store.on()
will return back unsubscribe function.
Export
store.waitLoading()
Wait until all resources (images, fonts, etc) are loaded and displayed on the canvas.
await store.toDataURL()
Export store into image in base64 URL format
await store.saveAsImage()
saveAsImage
will export drawing into image and save it as local file. By default it exports just the first page. If you need to export another pages, pass pageId
property.
async store.toPDFDataURL()
Export store into PDF file in base64 URL format. You can use it to save to the backend.
await store.saveAsPDF()
saveAsPDF
will export drawing into PDF and save it as local file. By default it exports just the first page. If you need to export another pages, pass pageId
property.
await store.toBlob()
Export store into blob object, it may work faster than toDataURL
method.
await store.toHTML()
Warning: this function is beta and may produce inconsistent result.
Export store into HTML string.
await store.saveAsHTML()
Warning: this function is beta and may produce inconsistent result.
Export store into HTML string and save it as local .html
file.
await store.toSVG()
Warning: this function is beta and may produce inconsistent result.
Export store into SVG string.
await store.saveAsSVG()
Warning: this function is beta and may produce inconsistent result.
Export store into SVG string and save it as local .svg
file.
await store.toGIFDataURL()
Export store into GIF image in base64 URL format.
await store.saveAsGIF()
saveAsGIF
will export drawing into GIF and save it as local file.
store.setElementsPixelRatio(ratio)
In most of scenarios polotno
is rasterizing (converting into bitmap) vector elements such as texts and svg images. When you do hight quality exports, you may want to temporary increase resolution of rendered elements.
Animations and video
store.play()
Preview animations inside the workspace
store.stop()
Stop all animations, reset the current time
store.currentTime
Returns current time of playback
store.setCurrentTime()
Seek to a specific time
Working with fonts
store.addFont({ fontFamily, url })
The function to add a new custom font to the user project. Added fonts will be saved into exported JSON. If you want to add fonts available globally (ignored in JSON export), take a look into Fonts Tutorial.
Also you can use a richer API for more control:
Or you can just register font in the store and then manually add required CSS into the page:
store.removeFont(name)
Remove custom font from the store by its name
store.loadFont(name)
Prepare the font to use on the webpage. Text elements inside <Workarea>
will use this function automatically. But it can be useful if you want to show a list of fonts somewhere in the UI. store.loadFont(name)
function will add font to the webpage, so the browser can render correct font.