From c74d0a8957e41b6c276a73bf80ef6a92135f3d41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Wed, 16 Feb 2022 22:01:41 +0100 Subject: [PATCH 1/2] Test cloning IconImage without cache --- test/browser/spec/ol/style/icon.test.js | 47 +++++++++++++++++++++---- 1 file changed, 40 insertions(+), 7 deletions(-) diff --git a/test/browser/spec/ol/style/icon.test.js b/test/browser/spec/ol/style/icon.test.js index 5606b214a9..38c04fcccd 100644 --- a/test/browser/spec/ol/style/icon.test.js +++ b/test/browser/spec/ol/style/icon.test.js @@ -11,6 +11,9 @@ describe('ol.style.Icon', function () { 'data:image/gif;base64,' + 'R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs='; + beforeEach(function () { + iconImageCache.clear(); + }); describe('constructor', function () { it('caches canvas images with a uid as src', function () { const canvas = document.createElement('canvas'); @@ -47,7 +50,7 @@ describe('ol.style.Icon', function () { expect(clone).to.not.be(original); }); - it('copies all values ', function () { + it('copies all values with img', function () { const canvas = document.createElement('canvas'); const original = new Icon({ anchor: [1, 0], @@ -82,14 +85,44 @@ describe('ol.style.Icon', function () { expect(original.getOpacity()).to.eql(clone.getOpacity()); expect(original.getRotation()).to.eql(clone.getRotation()); expect(original.getRotateWithView()).to.eql(clone.getRotateWithView()); - - const original2 = new Icon({ + }); + it('copies all values with src', function () { + const original = new Icon({ src: src, }); - const clone2 = original2.clone(); - expect(original2.getImage(1)).to.be(clone2.getImage(1)); - expect(original2.iconImage_).to.be(clone2.iconImage_); - expect(original2.getSrc()).to.eql(clone2.getSrc()); + const clone = original.clone(); + expect(original.getImage(1)).to.be(clone.getImage(1)); + expect(original.iconImage_).to.be(clone.iconImage_); + expect(original.getSrc()).to.be(clone.getSrc()); + }); + it('copies all values with src without shared IconImageCache', function (done) { + const imgSize = [11, 13]; + const original = new Icon({ + src: src, + imgSize: imgSize.slice(), + }); + iconImageCache.clear(); + + const clone = original.clone(); + + original.load(); + clone.load(); + Promise.all([ + new Promise(function (resolve) { + original.iconImage_.addEventListener('change', resolve); + }), + new Promise(function (resolve) { + clone.iconImage_.addEventListener('change', resolve); + }), + ]).then(function () { + expect(original.getSrc()).to.be(clone.getSrc()); + expect(original.iconImage_).to.not.be(clone.iconImage_); + expect(original.getImage(1).width).to.be(imgSize[0]); + expect(original.getImage(1).height).to.be(imgSize[1]); + expect(original.getImage(1).width).to.be(clone.getImage(1).width); + expect(original.getImage(1).height).to.be(clone.getImage(1).height); + done(); + }); }); it('the clone does not reference the same objects as the original', function () { From ab5e4f88381dd5891d975cdf3fea0417d67e5ae7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Tue, 15 Feb 2022 19:16:55 +0100 Subject: [PATCH 2/2] Fix cloning of Icon style when IconImage is not cached --- src/ol/style/Icon.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/ol/style/Icon.js b/src/ol/style/Icon.js index 1a40e35711..58c52a60f7 100644 --- a/src/ol/style/Icon.js +++ b/src/ol/style/Icon.js @@ -140,9 +140,10 @@ class Icon extends ImageStyle { const image = options.img !== undefined ? options.img : null; /** - * @type {import("../size.js").Size} + * @private + * @type {import("../size.js").Size|undefined} */ - const imgSize = options.imgSize !== undefined ? options.imgSize : null; + this.imgSize_ = options.imgSize; /** * @type {string|undefined} @@ -150,7 +151,7 @@ class Icon extends ImageStyle { let src = options.src; assert(!(src !== undefined && image), 4); // `image` and `src` cannot be provided at the same time - assert(!image || (image && imgSize), 5); // `imgSize` must be set when `image` is provided + assert(!image || (image && this.imgSize_), 5); // `imgSize` must be set when `image` is provided if ((src === undefined || src.length === 0) && image) { src = /** @type {HTMLImageElement} */ (image).src || getUid(image); @@ -176,7 +177,7 @@ class Icon extends ImageStyle { this.iconImage_ = getIconImage( image, /** @type {string} */ (src), - imgSize, + this.imgSize_ !== undefined ? this.imgSize_ : null, this.crossOrigin_, imageState, this.color_ @@ -221,19 +222,20 @@ class Icon extends ImageStyle { anchorOrigin: this.anchorOrigin_, anchorXUnits: this.anchorXUnits_, anchorYUnits: this.anchorYUnits_, - crossOrigin: this.crossOrigin_, color: this.color_ && this.color_.slice ? this.color_.slice() : this.color_ || undefined, - src: this.getSrc(), + crossOrigin: this.crossOrigin_, + imgSize: this.imgSize_, offset: this.offset_.slice(), offsetOrigin: this.offsetOrigin_, - size: this.size_ !== null ? this.size_.slice() : undefined, opacity: this.getOpacity(), - scale: Array.isArray(scale) ? scale.slice() : scale, - rotation: this.getRotation(), rotateWithView: this.getRotateWithView(), + rotation: this.getRotation(), + scale: Array.isArray(scale) ? scale.slice() : scale, + size: this.size_ !== null ? this.size_.slice() : undefined, + src: this.getSrc(), }); }