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.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: ccf5db8

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