pikaso

Changelog

• Upgrade packages to their most recent versions. (https://github.com/pikasojs/pikaso/commit/6fae2b97fdb94d88d27775a47ec20fa19eb9acfa)

Changelog

• Upgrade packages to their most recent versions. (https://github.com/pikasojs/pikaso/commit/244ff1c9614c3c66eff1649edc9f406947e6051a)

Changelog

• Upgrade packages to their most recent versions. (https://github.com/pikasojs/pikaso/commit/9212fe6be61967ee1992403da2ac3c08547ba3f7)

Changelog

• All packages have been upgraded to their most recent versions, the most notable of which are the Konva 9 and Typescript 5 updates. (https://github.com/pikasojs/pikaso/commit/3069427b102ec743fb29281eeb70a08aaeddad03)

Changelog

This release includes one fix and all dependencies have been updated to their latest versions:

• All packages have been updated and adopted with the latest versions
• Import of missing models and drawers has been fixed #94

Changelog

In addition to one fix, all dependencies have been updated to their latest version in this release:

• All packages have been updated and adopted with the latest versions
• Fix adding shape models to Board's shapes even if selection.interactive is not enabled (61aa9221af84f19330f3448de8cf92fc668ba1b1)

Changelog

• The global.DOMMatrix variable has been fixed to avoid conflict with PDF.js (https://github.com/pikasojs/pikaso/commit/09beab601a28ebd6691de9e4755aa24b07218d73)

Changelog

• Measurement Tag's dimension text is fixed (https://github.com/pikasojs/pikaso/discussions/75#discussioncomment-3218983)
• Fix typing of Settings

Changelog

• Measurement Tag's position is fixed when rotating the shape (#70)
• Inserting images in NodeJS has been fixed (#71)

Changelog

• Importing Text shapes from JSON has been fixed.

Support NodeJs 🎉

As of version 2.7.0, NodeJs is supported. This will enable collaboration between backend and frontend sides in creating images.
Using Pikaso in a NodeJs environment is similar to using it in a browser.

npm install canvas

const { Pikaso } = require('pikaso')

const editor = new Pikaso({
  width: 800,
  height: 600
})

Introducing Background Size (https://github.com/pikasojs/pikaso/issues/59)

From v2.6.0, both editor.loadFromUrl and editor.loadFromFile accept a second parameter with this interface

interface BackgroundOptions {
  size: 'auto' | 'resize' | 'cover' | 'contain' | 'stretch'
  x: number
  y: number
}

The size field describes how a background image should be loaded in the canvas. The functionality is the same as the CSS feature background-size.

editor.loadFromUrl('<url>') // resizes canvas to to file's size by default

editor.loadFromUrl('<url>', {
  size: 'cover'
})

editor.loadFromFile('<File>', {
  size: 'stretch'
})

Improve Label (https://github.com/pikasojs/pikaso/issues/66)

Labels can now be resized from different perspectives.

keepScale will be accessible as of v2.6.0 and by setting that to false, the default scaling behavior will be disabled.
Also, all options for Konva.Transformer are available through transformer

The following configuration should be followed to enable resizing from different aspects:

editor.shapes.label.insert({
    container: {/* config */},
    tag: {/* config */},
    text: {/* config */},
    config: {
      keepScale: false|true, // By setting keepScale to false, the default scaling behavior will be disabled
      transformer: {
        keepRatio: true, // keepRatio set to true to maintain scaling when scaling from corners
        enabledAnchors: ['middle-left', 'middle-right', 'bottom-right'] // Here are all the options available https://konvajs.org/api/Konva.Transformer.html#enabledAnchors__anchor
      }
    }
  })

Improve Export/Import (https://github.com/pikasojs/pikaso/issues/63)

zIndex export/import is now supported.

Thanks to amanver16, ehussain and kanarelo for their contributions.

Introducing Measurement Tag

The new Measurement Tag feature displays the size of a shape when drawing or transforming.
https://pikaso.app/#/core/measurement-tag

Improve SVG Drawing

To achieve a smoother drawing experience, the logic for drawing SVG paths has been reimplemented.

Pencil Drawing

Pencil Drawings have a minor difference in that, unlike other shapes, they begin a new drawing when the current one ends.
The editor.shapes.pencil.stopDrawing() method or editor.board.setActiveDrawing(null) method must be called in order to stop pencil drawing.

Changelog

• Fixed global variable issue in Svelte and UMD packages (#57)
• Added banner to builds

Thanks to magick93

Introducing Groups 🚀 🎊

Shapes can be arranged into multiple groups using the Groups.
The class provides a variety of APIs for working with groups.
Groups Full Documentation

New Groups events

• group:create
• group:delete
• group:undelete
• group:destroy
• group:attach
• group:detach
• group:ungroup

Snap to Grid 😱😱

The Snap To Grid feature ensures that objects can be easily positioned in line with any existing objects on the layer. By default, this feature is disabled, but it is easy to enable
Read more

New Methods

board.gc()

This method destroys all deleted shapes to free-up the memory

shape.name

This getter method returns the name of the shape

Changelog

• Fixed drawing shapes over each other (#44)
• Added autoSelect option to Drawing settings
• Removed useless "draw" methods
• Lint files and update some variable names

Changelog

• This version is just an upgrade of all packages to their latest versions

New Features

• The ability to convert a background image into a selectable shape. (#22)

editor.board.background.image.isSelectable = true | false
editor.board.background.overlay.isSelectable = true | false

New Methods

• Added isSelectable setter/getter to ShapeModel (#22)

Bug fixes

• Fixed transformation issue of shapes after importing a JSON file. (#23)

Major Bug Fixes

• Fixed flipping the rotated or scaled shapes https://github.com/pikasojs/pikaso/commit/22f802034b4eddc3a0b93c61ab44ec73be5038be
• Fixed rotating Arrow, Line and Pencil drawing https://github.com/pikasojs/pikaso/commit/f1568c6ecbf4e4cb57083c32ec879a73c51a7746

Enhancement

• Reimplemented rotate around center algorithm based on node's client rect https://github.com/pikasojs/pikaso/commit/7f9536d6ba342b188fa7e63766371866c7df55d7

New Features

• Introduce Svg shape 🚀

Enhancements

• Reimplemented Flip algorithms https://github.com/pikasojs/pikaso/commit/e763afe1e100bca6b5bf4a8b1c96428f06e8884b