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.7.0

Compare Source

• Added Group.isolated(). An isolated group draws its children into a transparent canvas, then applies its opacity and globalCompositeOperation once to the result, like SVG <g opacity>. Child blend modes and erasing stay inside the group. Unlike cache(), the content stays live
• Added Shape.selfRectFunc() for custom shapes: returns the local area its sceneFunc paints, so bounds, cache(), isolated groups and perfect drawing include paint outside width and height
• Improved performance and memory of translucent shapes with fill and stroke ("perfect drawing"): built-in shapes use a buffer the size of the shape instead of the whole stage, and the buffer is freed when no longer used. Glyphs with many stacked marks can be clipped in this mode
• Fixed a crash when a translucent shape with fill and stroke is drawn on a stage without size
• Fixed translucent shapes with fill and stroke rendered at the wrong resolution when a layer pixel ratio differs from Konva.pixelRatio
• Fixed getClientRect() of Arc, Ring and Star when the inner radius is larger than the outer radius or a radius is negative
• Fixed TextPath with strokeScaleEnabled(false) drawing its stroke near the canvas origin. Like Text, it now always scales its stroke
• Fixed Tag bounds when its pointer is wider than its side
• Fixed a layer staying clipped in every later draw after a sceneFunc threw
• Removed Stage.bufferCanvas and the third bufferCanvas argument of drawScene()

v10.6.0

Compare Source

• Improved Path arc performance: bounds of an arc segment are computed exactly instead of sampled every degree, and a point on a circular arc is found with a closed form instead of walking the arc
• Improved Text.getClientRect() and getSelfRect() of underlined text, which no longer measure the font on every call
• Fixed blurRadius, pixelSize and CSS filter lengths (for example blur(8px)) being applied in cache pixels instead of node coordinates, so a filtered node looked less blurred at a higher cache pixelRatio. Note: custom filter functions now receive (imageData, pixelRatio); use the ratio to convert node lengths to pixels
• Fixed a drag started from a pointerdown handler (startDrag(e), for example react-konva onPointerDown) never moving or ending and leaving the node stuck as dragging
• Fixed stopDrag() ending every active drag instead of only the drags of its own gesture, so a node dragged by another finger stopped too. Note: stopDrag() on a node that is not dragging is now a no-op
• Fixed a touchstart on empty stage area reporting the pointerId of the oldest active touch instead of the finger that just touched down
• Fixed gotpointercapture and lostpointercapture always reporting pointerId 0 instead of the captured pointer
• Fixed Transformer resetting a manually set rotation() back to zero on the next update() when useSingleNodeRotation is off
• Fixed Transformer rotating by the wrong amount when rotateAnchorAngle is used with Konva.angleDeg = false
• Fixed node.remove() leaving a stale absolute transform when a listener or a Transformer read the node's position during removal
• Fixed toObject(), toJSON() and clone() dropping an explicit width, height or dragDistance that happened to equal the computed value, so a restored Text re-flowed. Note: such attributes are now present in the serialized output
• Fixed Konva.Text and toImage()/toBlob() mutating the configuration object passed by the caller, which broke frozen and reused configurations
• Fixed mutating the array returned by an unset points(), enabledAnchors() or rotationSnaps() corrupting every other node that used the same default. Note: an unset array attribute now returns a new array on each read
• Fixed compound change events such as scaleChange, offsetChange and skewChange reporting oldVal as undefined
• Fixed cache() and toCanvas()/toDataURL()/toImage() cropping the last pixel row and column of content at a fractional position. Note: an automatically sized cache or export can now be one pixel larger, and a cache whose origin is past the content is skipped instead of built with a negative size
• Fixed layer.remove() and layer.destroy() leaving the layer canvases in the stage content when the stage container is not in the document, and never removing a hit canvas shown with toggleHitCanvas()
• Fixed out-of-range CSS color components, such as rgba(0, 0, 0, 2) or rgb(120%, 0, 0), distorting shadow opacity and color tweens
• Fixed the types of position(), absolutePosition(), size() and Stage.container() accepting null and undefined, which throw at runtime. Note: node.absolutePosition(stage.getPointerPosition()) no longer compiles, because the pointer position can be null
• Fixed Text reporting a width smaller than it paints with letterSpacing, align: 'justify' or charRenderFunc, because measurement used kerning while drawing does not
• Fixed Text bounds ignoring the underline, so cache(), getClientRect() and toDataURL() clipped it. Note: bounds of underlined text are now taller than height()
• Fixed Text with direction: 'ltr' inheriting the direction of an RTL canvas, because only 'rtl' was applied
• Fixed Text underline and line-through ignoring fillPriority, radial gradients and patterns instead of using the fill the text is drawn with
• Fixed TextPath kerningFunc moving glyphs off curved and vertical paths, and not being counted in the text width
• Fixed TextPath dropping its last character with align: 'right' and a positive letterSpacing, and adding a phantom trailing spacing to its bounds
• Fixed a close command (z) in Path data not travelling back to the start of the subpath. Note: getLength() of a closed path now includes the closing edge, as in SVG, and a relative command after z starts from the subpath start
• Fixed Path.getSelfRect() of an arc segment missing its end point, which reported an empty rect for a sub-degree arc
• Fixed Path.getPointAtLength() on a non-circular arc interpolating the angle instead of the distance, which bunched TextPath glyphs on ovals and made path animations change speed
• Fixed a negative arc radius in Path data throwing during a draw and aborting the layer. Note: an arc is now drawn with a single ellipse() call
• Fixed the length of a quadratic curve whose control point lies on the chord, which returned Infinity and made TextPath text disappear
• Fixed Arrow pointing its head horizontally when the line has repeated endpoints, for example a polyline finished by a double click
• Fixed Konva.Image created from a fresh new Image() never redrawing when its src is assigned afterwards
• Fixed Konva.Image.fromURL() calling its callback again, and creating a duplicate node, when the src of the loaded image is changed later
• Fixed Label stacking a new set of listeners on a child every time it is re-added, which multiplied its internal work and kept a removed child calling a destroyed Label
• Fixed Konva.Filters.Pixelate darkening blocks that mix opaque and transparent pixels, such as the edges of circles, text and images with alpha
• Fixed Tween restarting its animation when pause() or destroy() is called from onUpdate, and throwing from finish()/reset() after such a destroy()
• Fixed tweening strokeLinearGradientColorStops producing invalid colors such as redNaN and breaking every following draw
• Fixed tweening an array attribute such as dash to a shorter array writing NaN, and tweening between a scalar and an array cornerRadius throwing

v10.5.0

Compare Source

Features

• Stage.eventBatchFunc() batches native input for framework integrations (Anton Lavrevov)

Bug Fixes

• touchcancel releases only the canceled pointers and fires a cancel event (Anton Lavrevov)
• toBlob() resolves with a Blob instead of unknown (Anton Lavrevov)

Documentation

• keep the Node class JSDoc attached to the class (Anton Lavrevov)
• document Path width() and height() for the API reference (Anton Lavrevov)

Performance Improvements

• Transformer reuses unchanged shape bounds and skips equal anchor updates (Anton Lavrevov)

Commits

• 8225a78: update CHANGELOG with new version (Anton Lavrevov)
• 9008123: build for 10.5.0 (Anton Lavrevov)

v10.4.0

Compare Source

• Added destroy event, fired at the start of node.destroy(). Transformer drops a destroyed node from nodes() and Tween stops the tweens of a destroyed node
• Added width() and height() to Path
• Added Konva.Transform#isInvertible()
• Added grapheme-aware text layout: flag emoji and ZWJ sequences stay together for letterSpacing, charRenderFunc and wrapping. letterSpacing now adds one spacing per grapheme instead of per UTF-16 code unit
• Improved Transformer performance: anchors are resolved directly instead of by selector
• Improved Text performance with charRenderFunc and when wrapping a long text (both were quadratic in text length)
• Improved Text and TextPath creation performance. Note: relayout listeners now live on the prototype, so text.off('textChange.konva') no longer removes them
• Improved TextPath layout performance on paths with many segments
• Improved hit detection on the edges of shapes: thin lines are hittable on their own pixels, and edge search is faster and no longer walks to an unrelated shape nearby
• Improved container.getClientRect(), drag and drop, Animation start/stop, component getters and Image drawing performance. Note: Konva.Animation.animations is now a Set
• Reduced memory usage of cache(), toCanvas(), toDataURL(), toImage() and toBlob(). Note: a cropped export no longer includes shadows of shapes lying fully outside the crop
• Reduced memory usage per node. hasStroke() returns a boolean instead of the stroke width
• Reduced canvas memory usage of Text, TextPath and CSS filter strings, and fixed a canvas leak on every draw of a node with CSS filters
• Published type declarations keep their JSDoc, so editors show the documentation on hover
• Fixed Transformer ignoring changes of attached nodes made between pointer moves during a resize (regression in 10.3.1)
• Fixed Transformer following the wrong finger during a pinch, writing NaN when resizing a zero-size node, not refreshing on padding change, blanking the hit graph of unrelated layers, and being misplaced inside a cached or transformed container
• Fixed layer.size() shrinking the layer canvas. A layer follows the stage size
• Fixed container.getChildren() and stage.getLayers() returning the internal array. They return a copy
• Fixed clearCache() of a container un-caching every descendant and leaking their canvases
• Fixed cache(), setAttrs() and setPosition() leaving a node in a broken state after an exception in a sceneFunc, a filter or a setter
• Fixed setAbsolutePosition() and dragging writing NaN under an ancestor with a zero scale
• Fixed a negative radius or cornerRadius throwing during draw and blanking the shapes after it
• Fixed layer.batchDraw() never drawing again after a draw threw
• Fixed toObject() and toJSON() modifying the node: circular or DOM attributes were lost, frozen state threw, and a custom attribute named like a node method invoked it
• Fixed the absolute getters and Transformer of a node inside a cached container. Note: getClientRect() under a cached ancestor is now absolute like everywhere else
• Fixed hasShadow() not updating when only shadowOffsetX or shadowOffsetY changes
• Fixed node.fire(type, null, true) throwing
• Fixed node.clone() sharing nested array attributes with the original
• Fixed Tween: component attributes (scale, offset...) wrote junk attributes, gradient color stops were replaced in the node's own array, onUpdate/onReset were tweened, the first tween of a page could not be cancelled, and node.to() modified its params. node.to() returns the tween
• Fixed deprecated setDashArray() setting nothing and deprecated aliases returning nothing
• Fixed Path bounds for rotated elliptical arcs and empty paths, parsing of SVGO-compressed arcs and 00 coordinates, and getPointAtLength() past the end of an arc. Degenerate data (truncated commands, zero-radius arcs, a number after z) follows SVG instead of producing NaN or hanging
• Fixed Sprite keeping its interval after destroy(), throwing on an unknown animation or frame, and missing getSelfRect()
• Fixed RegularPolygon without sides throwing from every draw
• Fixed Tag.getSelfRect() with pointerDirection left or right
• Fixed TextPath with a kerningFunc, and its underline thickness now matches Text
• Fixed isLastInLine of charRenderFunc for the last character of every line
• Fixed Blur filter darkening semi-transparent pixels and producing an empty image for a large blurRadius (now capped at 180)
• Fixed hue of the HSL and HSV filters mirroring outside -360..360, and the exact reference matrix is used
• Fixed the named color transparent fading through white
• Fixed Konva.pixelRatio set to 0 or undefined not falling back to the device pixel ratio
• Fixed canvas sizes at a fractional pixel ratio, which stretched cached nodes and stage exports by up to a pixel
• Fixed drawHitFromCache() with a hitCanvasPixelRatio other than 1
• Fixed releaseCapture() releasing a pointer held by another shape
• Fixed drag and drop: a clamping dragBoundFunc blocked a new drag, startDrag() off stage threw, lifting one finger cancelled the drags of other fingers, and startDrag() without an event never ended
• Fixed a non-finite size, position, dragBoundFunc result or export rect silently blanking a layer or exporting the wrong image. An error is logged instead
• Fixed type declarations: clipFunc context, line.points() typed arrays, text.width('auto'), tag.cornerRadius() array, stage.container('id'), getClientRect() config, oldVal/newVal on change events, namespace types, new Konva.FastLayer() without config. Removed the fillLinearRadial* declarations that had no implementation
• Fixed many JSDoc mistakes and broken examples
• Removed dead code, unused files and dev dependencies. Fixed the build and release scripts

v10.3.3

Compare Source

• No code changes. Updated npm package metadata (description, keywords, homepage) and README to describe what Konva is used for and to point at Polotno for a complete design editor built on Konva

v10.3.2

Compare Source

• Reduced canvas memory usage, most of all for non-interactive scenes. A layer with listening: false (and every layer of a non-listening stage) now releases its stage-sized hit canvas instead of keeping it allocated, and re-creates it when it starts listening again. The two stage-sized buffer canvases of every Konva.Stage are now created empty and only allocated by the first feature that needs them ("perfect drawing" and shape.intersects()). node.cache() of a non-listening node skips its cached hit canvas the same way, building it only if the node starts listening (previously such a node kept an empty cached hit graph and stayed unhittable until re-cached). Note: after turning listening back on, the hit graph appears on the next layer draw (automatic unless Konva.autoDrawEnabled is off - then call layer.draw(), as a single shape.draw() is not enough to re-create the layer hit canvas)
• Fixed charRenderFunc of Konva.Text ignoring fillStyle/strokeStyle set on the context by the callback. A style set for a character now wins over the shape attributes for that character, as documented
• Fixed setPointerCapture() not capturing the pointer on the stage container, so the stage kept missing pointer events outside of its bounds. A captured pointer now keeps sending pointermove/pointerup to the stage beyond its edges, like pointer capture on plain HTML elements
• Fixed pointerclick firing after a drag and drop, while click correctly did not
• Fixed Transformer shaking the shape when a corner anchor with keepRatio was dragged across the shape with padding enabled
• Fixed Transformer switching its active anchor when boundBoxFunc rejects a flip. A rejected flip now keeps the grabbed anchor active, so resizing keeps following the pointer — and getActiveAnchor() inside boundBoxFunc now reports the anchor being held instead of the prematurely flipped one
• Fixed drag and drop of a stage rendered in another window than the one Konva was imported into - an iframe, or a window opened with window.open. Such a stage now uses the pointer events of its own window, and a pointer move in another window no longer drags its nodes
• Fixed Transformer of such a stage, which got no pointer move or release events at all
• Fixed layer.batchDraw() of such a stage, which asked the window Konva was imported into for the frame and stopped drawing when that window was not visible
• Fixed stage.destroy() leaving the content of such a stage in the container

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: 6d1c66f

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.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

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