chore(deps): update dependency konva to v10

[renovate]

This PR contains the following updates:

Package	Change	Age	Confidence
konva (source)	^9.3.0 → ^10.0.0

---

Release Notes

konvajs/konva (konva)

v10.3.1

Compare Source

• Added hsla() support and the space-separated CSS Color 4 syntax to Konva.Util.colorToRGBA()
• Declared canvas and skia-canvas as optional peer dependencies, so the node backends resolve under strict package managers
• Improved Transformer performance with many attached nodes
• Improved Text performance when a long text is resized
• Path.getSelfRect() now solves the bounds of a cubic segment exactly instead of sampling it at 100 points. Reported boxes get slightly larger and more accurate, and the calculation is about 9 times faster
• Line.getSelfRect() now solves the bounds of a line with a tension exactly, instead of using the box around its tension control points. Reported boxes get smaller and tighter, by about 19% of their area on a typical line
• Path.getSelfRect() now also solves the bounds of a quadratic segment (Q, q, T and t) exactly, instead of using the box around its control points. Reported boxes get smaller and tighter
• A tween of a color that Konva can not parse now throws a clear error
• Fixed several wrong named color values: darkgoldenrod, floralwhite, plum, slategray, slategrey, snow and yellowgreen
• Fixed the alpha of the named color transparent, so a tween to or from it fades again
• Fixed rgb() colors with percentage components
• Fixed hsl() colors with a non-integer hue or extra whitespace
• Fixed fillPatternImage ignoring imageSmoothingEnabled
• Fixed Arc.getSelfRect() for a zero-degree clockwise arc and for any full-turn angle
• Fixed Path.getPointAtLength() returning undefined past the end of a closed path
• Fixed NaN bounding rect on a closed Line with a tension and coincident points
• Fixed getSelfRect() on a Line with bezier: true, which read only the first curve segment and could report a box of zero height
• Fixed the ValidatorFunc type used by custom Factory validators

v10.3.0

Compare Source

• Added direction property to TextPath shape for better RTL support

v10.2.5

Compare Source

• Fixed transparent text with shadow render in Safari

v10.2.4

Compare Source

• Fixed possible event execution order

v10.2.3

Compare Source

• More crash fixes

v10.2.1

Compare Source

• Fix possible crash

v10.2.0

Compare Source

• Added rotateAnchorAngle property to Transformer to control the position of the rotation anchor around the bounding box

v10.1.0

Compare Source

• Added underline offset option and related test for Text Annotation
• Fixed large memory usage on cache
• Fix bounding box calculation for bezier lines
• Fixed cached render with buffer canvas is used

v10.0.12

Compare Source

• Better canvas farbling detection logic

v10.0.11

Compare Source

• Fixed broken release

v10.0.10

Compare Source

• Update hit detection system to handle canvas farbling. Hit detection should work better on Brave browser. Thanks @​wiverson to the idea and implementation idea.

v10.0.9

Compare Source

• Fixed line-through rendering when letter spacing is used

v10.0.8

Compare Source

• Fixed opacity level when a cached shape has opacity, fill and stroke

v10.0.7

Compare Source

• Fixed image element size re-calculation when change is changed with transformer is used.

v10.0.6

Compare Source

• Better Image.getClientRect() calculation if an instance has no image attached yet

v10.0.5

Compare Source

• Simplify types to fix TS errors

v10.0.4

Compare Source

• Remove logs

v10.0.3

Compare Source

• Add text decoration options to TextPath: support for 'line-through' and combined styles with 'underline'

v10.0.2

Compare Source

• Fixed internal calculations for TextPath to return correct width and height

v10.0.1

Compare Source

• Better canvas farbling detection logic

v10.0.0

Compare Source

Breaking Changes

• Breaking: Konva module is fully migrated from CommonJS modules to ES modules. It may break some older bundlers and CommonJS environments. In CommonJS environment you have to use default property from require:

// before
const Konva = require('konva');

// after
const Konva = require('konva').default;

• Breaking: Dropped default support for node.js environment. Now you have to explicitly import it:

npm install canvas

import Konva from 'konva';
import 'konva/canvas-backend';

Motivation: With increased usage of konva in SSR environments like Next.js, loading native canvas rendering on the server is unnecessary since we don't render canvas content server-side. Removing this requirement simplifies setup by avoiding native modules when they aren't needed.

• Improved text positioning to match DOM/CSS rendering. To restore previous behaviour use Konva.legacyTextRendering = true. This should NOT break major part of the apps. But if you care about pixel-perfect position of text elements, that change may effect you.

New Features

• Added new skia render backend for node.js:

npm install skia-canvas

import Konva from 'konva';
import 'konva/skia-backend';

• Native filters support via node.filters(['blur(10px)']). Native fitlers works MUCH faster if supported nativily (Chrome, Firefox). If there is no native support, Konva will automatially fallback to functional filter (on Safari).

node.filters(['blur(10px')]);
node.cache();

• New property charRenderFunc for Konva.Text for controlling "per-character-render". May be useful any character animations:

var text = new Konva.Text({
  x: 10,
  y: 10,
  text: 'AB',
  fontSize: 20,
  charRenderFunc: function ({ context, index }) {
    if (index === 1) {
      // shift only the second character
      context.translate(0, 10);
    }
  },
});

• New: Added Konva.Filters.Brightness filter in replace of deprecated Konva.Filters.Brighten to better match with css filters logic.
• Added cornerRadius support for Konva.RegularPolygon
• Added miterLimit property support for Konva.Shape to control line join appearance

Bug Fixes

• Fixed corner radius render for Konva.Rect when negative width or height are used
• Fixed TextPath rendering on right align for some fonts
• Fixed crash when node inside transformer was destroyed
• Fixed mouseup + click events order when clicked on empty area of stage
• Fixed transformer drag behavior with non-draggable nodes

Technical Improvements

• Performance: Rewrote Emboss and Solarize filters for improved performance and usability
• Changed return type of node.toImage()
• Brave detection and warning

---

Configuration

📅 Schedule: (UTC)

• Branch creation
  • At any time (no schedule defined)
• Automerge
  • At any time (no schedule defined)

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, check this box

---

This PR was generated by Mend Renovate. View the repository job log.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 8292762

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

💥 An error occurred when fetching the changed packages and changesets in this PR

Some errors occurred when validating the changesets config:
The package or glob expression "@sourceacademy/web-stepper" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch
The package or glob expression "@sourceacademy/web-data-visualizer" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch