Changelog

• Fix export of image with filters on some pixel ratio configurations

• Saving custom data into store with store.set({ custom: { someData: 'someValue' }})

• Fix crashes on loading of tiny images

• Typescript fixes

• Fix HTML text render

• Better export of image when high pixelRatio is used

• Fixes in SVG colors replacement

• Add new translations

• Better font loading timeout control

• Fix some crashes

• Fix animations for move" direction"

• Network usage optimizations

• Lazy loading of images in Side Panel

• Fix page size on html export

• Remove group from export when it has `showInExport: false` property

• Remove html data from pasted text for rich text feature

• Fix loading of some svg files

• Fix loading of fonts with bad file names

• Improve performance of resizing of many elements

• Better detection if visible pages in the workspace

• Update internal dependencies

• `elementHook` for html export

• Animation support for `rich-text` feature

• Fix distance display on canvas when several elements are selected

• Better font loading detection

• Fix custom toolbar API for `figure` elements

• Fix blur filter picker

• Performance improvements

• Fix exporting on some text variations

• `altCloneEnabled` for workspace

• Better detection of used colors in color picker

• Second tap on selected side panel on mobile will close it

• Fix fails on exports for large designs or large pixelRatio values

• Mobile style fixes

• Fix deep grouping

• Pass `React.Context` into `<Tooltip />` component

• Better resize of text when it has effects

• Better filters picker when screen is small

• Better smart resize for figure elements

• Fix incorrect `text` export when it has some styles

• Fix broken magic resize

• Fix "Layers" menu scrolling on mobile devices

• Translation fixes

• Typescript fixes

• Some infinite scroll hotfixes

• Infinite scroll for icons in the Elements side panel

• Fix copy/paste offset for groups

• More options for frameworkless usage of Polotno.

• Gradients for figures strokes are disabled

• UX improvements for stroke toolbar button for figure elements

• Gradient for figures

• Video rendering fixes

• Tooltip fixes

• Touch device fixes

• Memory usage optimizations

• Fix bug with corner radius for `rect` shape of `figure` element

• Change style of figures side panel

• Fix JSON loading when some values are `null`

• Rewrite of elements side panel with new figure" elements

• Better image quality in the editor for some zooming cases

• HTML export fixes

• Use pinch for zoom in crop mode

• Performance improvements

• Fix image cropping when image has resizable: false

• Fix image cropping

• Performance fixes

• Fix video preview in the trim panel

• Fixes for `figure` rendering

• Make consistent zoom for zoom buttons and touchpad zooming

• Little UX fixes in the toolbar

• Fix bug with group selection\

• Admins will see all elements in the Layers menu

• Extended ability to create your own custom element models. See Custom Element for more details.

• Little style fix in custom fonts panel in Text side panel

• Ability to trim videos

• Image export fixes

• Hold ALT + drag start to copy selected elements

• Add number inputs into animation picker

• Fix preset colors in gradient picker

• Fix page background in HTML export

• Little internal changes for better support of circular dependencies

• Position menu UI updates

• Tooltip position fixes

• Undo/redo fixes

• Html render fixes

• Better video support

• Resize behavior improvements

• Update internal dependencies

• Delay and duration inputs for animation picker

• Redo fixes when several texts are resized

• Some hotfixes for new version

The new major version of Polotno is here! It is a huge update with some breaking changes. Please read this document carefully to migrate your application to the new version.

• Breaking: Update @blueprintjs/core to version 5.

• Breaking: deprecated properties that starts from "hide" are removed from <Toolbar /> component. If you don't have any deprecation warnings in the console with the last version of Polotno, you can skip this step.

• Ability to customize what variations of Google Fonts to load. For more info see Fonts Docs.

• Possible breaking: Better support for bold and italic for Google fonts. It may effect text layout in your designs. If you want to keep old behavior, you can use setGoogleFontsVariants('400,400italic') API.

• New: Distribute functionality in position menu. It will distribute selected elements with equal distance between them.

• New: Tooltip for canvas elements is enabled by default.

• Ability to customize Transformer and Highlighter styles. See Workspace Style for more details.

• Fix selection of element when it is select on non-active page

• Some components rename in polotno/toolbar/*, watch for typescript definitions to find new names.

Migration guide

Install last version of polotno package:

npm install polotno@latest

If you explicitly using @blueprintjs/core package (it is listed in your package.json) make sure you update it too:

npm install @blueprintjs/core@5

For blueprint related migration you can read Blueprint migration guide.

Update styles import

If you import from js

// old
import '@blueprintjs/icons/lib/css/blueprint-icons.css';
import '@blueprintjs/core/lib/css/blueprint.css';
import '@blueprintjs/popover2/lib/css/blueprint-popover2.css';

// new
import '@blueprintjs/core/lib/css/blueprint.css';

If you import style via CDN

<!-- old -->
<link
  href="https://unpkg.com/@blueprintjs/icons@4/lib/css/blueprint-icons.css"
  rel="stylesheet"
/>
<link
  href="https://unpkg.com/@blueprintjs/core@4/lib/css/blueprint.css"
  rel="stylesheet"
/>
<link
  href="https://unpkg.com/@blueprintjs/popover2@1/lib/css/blueprint-popover2.css"
  rel="stylesheet"
/>

<!-- NEW -->
<link
  href="https://unpkg.com/@blueprintjs/core@5/lib/css/blueprint.css"
  rel="stylesheet"
/>

Then replace all instances of bp4- with bp5- in your styles.

• Ability to set crop size when you export into PDF. `store.saveAsPDF({ cropMarkSize: 20 })`

• Ability to hide `Admin` button from toolbar via `components` API.

• Internal bugs fixes

• Tooltip position fixes

• Better localization for animation UI

• Fix crash on some cases of group usage

• New `Tooltip` component.

• Changes logic in smart resize. It should work better now and keep layout of elements.

• Update Resize side panel. More options and better UX.

• Fix infinite loop for text background rendering

• Fix `fileName` argument for `store.saveAsHTML()`

• Fix `fileName` property for `store.saveAsGIF()` method

• Ability to disable rotation snap when ctrl or meta key is pressed

• Little style changes of side panel.

• Add special class name `polotno-font-item` for uploaded font item in Text side panel

• Fix for bundled version

• Fix crashes on `line` elements usage

• Better export with `store.toHTML()`. Now it should NOT embed images into file. It will make output much smaller.

• Fix crashes in some cases

• New `store.clear()` method to purge all elements and pages from the store

• Remove some logs from the console

• Alpha release of animations support

• Fetch function customization for `useInfiniteAPI`.

• Ability to change type labels in layers menu via translations

• Force mobile view when `polotno-mobile` class is added to the any parent container

• Update internal dependencies

• Fixes for Position" button on the toolbar

• Fix vertical text resize

• Fix image drop from side panels

• Make rotate handle of transformer more beautiful

• Argument fixes for `onSelect` of `ImagesGrid` component

• Fix API to get image size to use `anonymous` mode for CORS images

• Show used fonts first in the font family dropdown

• Fix deselect of the element when you click on it with ctr or shift key pressed

• Fix render of text borders

• Some homework for video support

• Picker color from canvas on any color picker

• Update deps. May work a bit faster.

• Update dependencies

• Fix color format issues for `svg` element toolbar color change

• Fix text edit inside group

• Fix sidepanel size on mobile devices

• Change default background query

• Fixes for HTML text renderer

• Fix html display on text element edits

• Some homework for video support, but it is not ready yet

• Fixes for html text renderer

• Support for `line` and `group` elements in `store.toHTML()` method

• Better scrolling on `store.selectPage(id)` method

• Fix incorrect dragging when you try to move unselect child of a group

• Better line height control in the toolbar (it will not move line )

• Fixes for html text renderer

• Fix several downgrading bugs from previous version on resize of `image` element

• `page.setSize({ width, height })` API

• Fix text resizing with vertical resize is enabled

• Huge memory usage optimizations for `svg` elements.

• `line` elements fixes

• Fix `store.waitLoading()` indicator when you have `image` elements with `clipSrc` property

• **New element type `line`. You can use it for both lines and arrows!**

• Fix some typescript definitions

• Internal dependencies updates

• Slightly change label when you resize elements for better readability

• Some fixes for experimental HTML text renderer

• Better color picker for svg elements in the toolbar

• Fix bad background position on some mask elements

• More ruler fixes

• Huge improvements for `store.toHTML()` method

• Little ts fixes

• Rulers fixes

• Internal dependencies updates

• Show object size and rotation on transform

• Many fixes for rulers render

• Fix background effect for text with vertical align

• New Background" effect for text elements. Cool and shy! Now all `text` elements have additional properties `backgroundEnabled`

• New strike style button for `text` elements

• Fix align top when several elements are selected

• `onKeyDown` property for `` component to overwrite default keydown handler

• API to control preset colors in the color picker.

• Fix locking button for groups in "Layers" menu

• new property `keepRatio` for `image` elements.

• Hotfix to resolve incorrect locking behavior

• **New feature!** Groups! You can now group elements together and move them as one. To group elements, select them and click on the Group" button in the toolbar.

• Gradients now may have several colors and you can change their position.

• Little UI fixes

• Fix incorrect resize for HTML text renderer

• Optimize Polotno for iOS Safari usage

• Fix touchpad zooming

• Add numeric input for Corner Radius attribute in Filters menu

• Reactive flow for `setGoogleFonts` function

• Fix incorrect svg display for some files

• Fix many crashes across the app

• Smoother scrolling when design has many pages

• Fixed incorrect scroll position, when you select page via API

• Set default `crossOrigin` to `anonymous` for `` component

• Fix icon centering in side panel

• Performance improvements. Projects with many pages and many large images should work much faster.

• New translations for the toolbar.

• Linear gradient support for fill of text elements

• Fix bug on incorrect export while user is editing text

• Ignore placeholder" text elements in export

• Fix incorrect console warnings on PASTE action

• Fix color picker icon in "background" side panel

• Clipboard now preserves order of selected elements

• Clipboard now works across multiple browser's tabs

• Tooltip fixes in the toolbar (showing on bottom)

• Fix cloning of SVG elements when they have `cornerRadius` property"

• Enabled corner radius control in filters for `svg` elements

• Show elements outside of page bounding box. Make them selectable.

• `page.background` now supports base64 data urls.

• New API to replace specific inputs in the toolbar.

• Better crop defaults when images is replaced with drag&drop from side panel

• Deleting elements with API shouldn't deselect all elements

• UI fix for unknown Google fonts