From 3e8f0dff8f3daaa45c5db389272103111295f58f Mon Sep 17 00:00:00 2001 From: Anton Lavrevov Date: Wed, 12 Mar 2025 07:29:07 -0700 Subject: [PATCH 01/11] docs fix --- src/FastLayer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/FastLayer.ts b/src/FastLayer.ts index a7f59931..0c782cba 100644 --- a/src/FastLayer.ts +++ b/src/FastLayer.ts @@ -11,7 +11,7 @@ import { _registerNode } from './Global'; * @constructor * @memberof Konva * @augments Konva.Layer - * @@containerParams + @@containerParams * @example * var layer = new Konva.FastLayer(); */ From 48ce5e97128f108e55f198b93d16bc3fd1d51398 Mon Sep 17 00:00:00 2001 From: Anton Lavrevov Date: Wed, 12 Mar 2025 07:48:47 -0700 Subject: [PATCH 02/11] fix memory leak. close #1896 --- src/shapes/Image.ts | 23 +++++++++++--- test/sandbox.html | 75 ++++++++++++++++++++++----------------------- 2 files changed, 55 insertions(+), 43 deletions(-) diff --git a/src/shapes/Image.ts b/src/shapes/Image.ts index ae509530..a091b3ec 100644 --- a/src/shapes/Image.ts +++ b/src/shapes/Image.ts @@ -40,9 +40,16 @@ export interface ImageConfig extends ShapeConfig { * imageObj.src = '/path/to/image.jpg' */ export class Image extends Shape { + private _loadListener: () => void; + constructor(attrs: ImageConfig) { super(attrs); - this.on('imageChange.konva', () => { + this._loadListener = () => { + this._requestDraw(); + }; + + this.on('imageChange.konva', (props: any) => { + this._removeImageLoad(props.oldVal); this._setImageLoad(); }); @@ -59,11 +66,19 @@ export class Image extends Shape { return; } if (image && image['addEventListener']) { - image['addEventListener']('load', () => { - this._requestDraw(); - }); + image['addEventListener']('load', this._loadListener); } } + _removeImageLoad(image: any) { + if (image && image['removeEventListener']) { + image['removeEventListener']('load', this._loadListener); + } + } + destroy() { + this._removeImageLoad(this.image()); + super.destroy(); + return this; + } _useBufferCanvas() { const hasCornerRadius = !!this.cornerRadius(); const hasShadow = this.hasShadow(); diff --git a/test/sandbox.html b/test/sandbox.html index 82bf29e9..bf961d4d 100644 --- a/test/sandbox.html +++ b/test/sandbox.html @@ -17,25 +17,9 @@ padding: 0; margin: 0; } - - .test { - position: absolute; - color: red; - font-size: 20px; - font-family: Arial; - border: 0; - background-color: transparent; - outline: none; - resize: none; - overflow: hidden; - line-height: 1; - padding: 0px; - letter-spacing: 20px; - width: 500px; - text-align: center; - } + @@ -52,36 +36,49 @@ From 2f5f0557ccc74f31fb193c4f54f9f492cf80ebe3 Mon Sep 17 00:00:00 2001 From: Anton Lavrevov Date: Wed, 12 Mar 2025 07:51:46 -0700 Subject: [PATCH 03/11] changes --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 922a43a5..972f5e2d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,11 @@ All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/). +## 9.3.19 (2025-03-12) + +- Typescript fixes +- Memory leak fixes + ## 9.3.18 (2024-12-23) - Fixed emoji split in multiple lines From acb19bd5525c3d0d2ef73a12f0ff9b8c781228e6 Mon Sep 17 00:00:00 2001 From: Anton Lavrevov Date: Wed, 12 Mar 2025 07:52:02 -0700 Subject: [PATCH 04/11] update CHANGELOG with new version From bc0e4edc07d107f29b3c91ef358a485e8a0e4021 Mon Sep 17 00:00:00 2001 From: Anton Lavrevov Date: Wed, 12 Mar 2025 07:52:04 -0700 Subject: [PATCH 05/11] build for 9.3.19 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6b31ba08..c04ac569 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "konva", - "version": "9.3.18", + "version": "9.3.19", "description": "HTML5 2d canvas library.", "author": "Anton Lavrenov", "files": [ From 224e60e32d4e71256629525d6f580fd988681c74 Mon Sep 17 00:00:00 2001 From: Anton Lavrevov Date: Wed, 12 Mar 2025 07:52:05 -0700 Subject: [PATCH 06/11] update cdn link From 1fb391d551813f04f9181e154eb18983d9bfec9f Mon Sep 17 00:00:00 2001 From: Anton Lavrevov Date: Thu, 20 Mar 2025 14:26:01 -0500 Subject: [PATCH 07/11] better text calculations on ellipsis config --- rollup.config.cjs => rollup.config.mjs | 2 -- src/shapes/Text.ts | 17 ++++++++++++++--- test/unit/Text-test.ts | 3 ++- 3 files changed, 16 insertions(+), 6 deletions(-) rename rollup.config.cjs => rollup.config.mjs (96%) diff --git a/rollup.config.cjs b/rollup.config.mjs similarity index 96% rename from rollup.config.cjs rename to rollup.config.mjs index 3e7aa510..8d3f7f5c 100644 --- a/rollup.config.cjs +++ b/rollup.config.mjs @@ -1,8 +1,6 @@ // import resolve from 'rollup-plugin-node-resolve'; import typescript from 'rollup-plugin-typescript2'; -const pkg = require('./package.json'); - export default { input: `src/index.ts`, output: [ diff --git a/src/shapes/Text.ts b/src/shapes/Text.ts index 984b553d..eeeb6026 100644 --- a/src/shapes/Text.ts +++ b/src/shapes/Text.ts @@ -534,12 +534,23 @@ export class Text extends Shape { // Convert array indices to string lineArray = stringToArray(line), substr = lineArray.slice(0, mid + 1).join(''), - substrWidth = this._getTextWidth(substr) + additionalWidth; + substrWidth = this._getTextWidth(substr); - if (substrWidth <= maxWidth) { + // Only add ellipsis width when we need to consider truncation + // for the current line (when it might be the last visible line) + const shouldConsiderEllipsis = + shouldAddEllipsis && + fixedHeight && + currentHeightPx + lineHeightPx > maxHeightPx; + + const effectiveWidth = shouldConsiderEllipsis + ? substrWidth + additionalWidth + : substrWidth; + + if (effectiveWidth <= maxWidth) { low = mid + 1; match = substr; - matchWidth = substrWidth; + matchWidth = substrWidth; // Store actual text width without ellipsis } else { high = mid; } diff --git a/test/unit/Text-test.ts b/test/unit/Text-test.ts index b2d7ea52..eba4159f 100644 --- a/test/unit/Text-test.ts +++ b/test/unit/Text-test.ts @@ -545,7 +545,7 @@ describe('Text', function () { }); // ====================================================== - it('multiline with ellipsis', function () { + it.only('multiline with ellipsis', function () { var stage = addStage(); var layer = new Konva.Layer(); @@ -569,6 +569,7 @@ describe('Text', function () { assert.equal(text.textArr.length, 7); assert.equal(text.textArr[6].text.slice(-1), '…'); + console.log(ayer.getContext().getTrace(false, true)); if (isBrowser) { assert.equal( layer.getContext().getTrace(false, true), From bdd43b239cd771dea1ea1a4ad2bb21d13d11dab6 Mon Sep 17 00:00:00 2001 From: Anton Lavrevov Date: Thu, 20 Mar 2025 14:27:08 -0500 Subject: [PATCH 08/11] fix test --- test/unit/Text-test.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/test/unit/Text-test.ts b/test/unit/Text-test.ts index eba4159f..f7f76926 100644 --- a/test/unit/Text-test.ts +++ b/test/unit/Text-test.ts @@ -545,7 +545,7 @@ describe('Text', function () { }); // ====================================================== - it.only('multiline with ellipsis', function () { + it('multiline with ellipsis', function () { var stage = addStage(); var layer = new Konva.Layer(); @@ -569,11 +569,10 @@ describe('Text', function () { assert.equal(text.textArr.length, 7); assert.equal(text.textArr[6].text.slice(-1), '…'); - console.log(ayer.getContext().getTrace(false, true)); if (isBrowser) { assert.equal( layer.getContext().getTrace(false, true), - "clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 14px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();fillStyle=black;fillText(HEADING,18,7);restore();save();fillStyle=black;fillText(,50,21);restore();save();fillStyle=black;fillText(All the world's,7,35);restore();save();fillStyle=black;fillText(a stage,,25,49);restore();save();fillStyle=black;fillText(merely,28,63);restore();save();fillStyle=black;fillText(players. They,7,77);restore();save();fillStyle=black;fillText(have…,27,91);restore();restore();" + "clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 14px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();fillStyle=black;fillText(HEADING,18,7);restore();save();fillStyle=black;fillText(,50,21);restore();save();fillStyle=black;fillText(All the world's a,1,35);restore();save();fillStyle=black;fillText(stage, merely,7,49);restore();save();fillStyle=black;fillText(players. They,7,63);restore();save();fillStyle=black;fillText(have theirrrrrrr,5,77);restore();save();fillStyle=black;fillText(exits and…,14,91);restore();restore();" ); } }); From 244fb2448abe7a6a93f223c81b5905fb67196dfd Mon Sep 17 00:00:00 2001 From: Anton Lavrevov Date: Thu, 20 Mar 2025 15:40:15 -0500 Subject: [PATCH 09/11] update CHANGELOG with new version --- CHANGELOG.md | 4 ++++ release.sh | 18 +++++++++--------- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 972f5e2d..be7f89b7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/). +## 9.3.20 (2025-03-20) + +- Fix text rendering when ellipses are used + ## 9.3.19 (2025-03-12) - Typescript fixes diff --git a/release.sh b/release.sh index 2b4eedee..57355c8b 100755 --- a/release.sh +++ b/release.sh @@ -49,7 +49,7 @@ echo "build for $1" npm run build >/dev/null git commit -am "build for $1" --allow-empty >/dev/null -echo "update CDN link in REAME" +echo "update CDN link in README" perl -i -pe "s|${old_cdn_min}|${new_cdn_min}|g" ./README.md >/dev/null git commit -am "update cdn link" --allow-empty >/dev/null @@ -61,17 +61,17 @@ git push >/dev/null git push --tags >/dev/null npm publish -echo "copy konva.js into konva-site" -cp ./konva.js ../konva-site/ -cd ../konva-site +# echo "copy konva.js into konva-site" +# cp ./konva.js ../konva-site/ +# cd ../konva-site -echo "replace CDN links" +# echo "replace CDN links" -find source themes/hexo3/layout react-demos vue-demos main-demo -name "*.json" -exec perl -i -pe "s|${old_version}|${new_version}|g" {} + >/dev/null -find source themes/hexo3/layout react-demos vue-demos main-demo -name "*.html" -exec perl -i -pe "s|${old_version}|${new_version}|g" {} + >/dev/null +# find source themes/hexo3/layout react-demos vue-demos main-demo -name "*.json" -exec perl -i -pe "s|${old_version}|${new_version}|g" {} + >/dev/null +# find source themes/hexo3/layout react-demos vue-demos main-demo -name "*.html" -exec perl -i -pe "s|${old_version}|${new_version}|g" {} + >/dev/null -echo "regenerate site" -./deploy.sh >/dev/null +# echo "regenerate site" +# ./deploy.sh >/dev/null echo "DONE!" From e9c438715973a1099b7ef37d42cca9cb71b68aa3 Mon Sep 17 00:00:00 2001 From: Anton Lavrevov Date: Thu, 20 Mar 2025 15:40:18 -0500 Subject: [PATCH 10/11] build for 9.3.20 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c04ac569..99f554c7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "konva", - "version": "9.3.19", + "version": "9.3.20", "description": "HTML5 2d canvas library.", "author": "Anton Lavrenov", "files": [ From 4eddaf813d50c320e88b62e07219e21dc6d52f5a Mon Sep 17 00:00:00 2001 From: Anton Lavrevov Date: Thu, 20 Mar 2025 15:40:18 -0500 Subject: [PATCH 11/11] update cdn link