From ca93f980958eaf43afdf917f8fd51996144cf9d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Davidovi=C4=87?= Date: Fri, 2 Jun 2023 14:21:10 +0200 Subject: [PATCH 1/3] Don't re-add existing styles to SVGShapeElement When calling `SVGShapeElement.reloadShapes()`, `searchShapes()` will correctly reconciliate modified and added shapes and reuse their elements. However, it will call `setElementStyles()`, which will add all styles unconditionally to `this.stylesList`, even if the styles were already in there. Modify `setElementStyles()` to check for the existence of a particular style before adding it. --- player/js/elements/svgElements/SVGShapeElement.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/player/js/elements/svgElements/SVGShapeElement.js b/player/js/elements/svgElements/SVGShapeElement.js index d71d17c43..7cd9d83af 100644 --- a/player/js/elements/svgElements/SVGShapeElement.js +++ b/player/js/elements/svgElements/SVGShapeElement.js @@ -211,6 +211,10 @@ SVGShapeElement.prototype.setElementStyles = function (elementData) { var j; var jLen = this.stylesList.length; for (j = 0; j < jLen; j += 1) { + if (arr.indexOf(this.stylesList[j]) !== -1) { + continue; + } + if (!this.stylesList[j].closed) { arr.push(this.stylesList[j]); } From 76150261daf39213a6c9328158c1ed4d5e0fe889 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Davidovi=C4=87?= Date: Fri, 9 Jun 2023 02:09:03 +0200 Subject: [PATCH 2/3] Fix ESLint error --- player/js/elements/svgElements/SVGShapeElement.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/player/js/elements/svgElements/SVGShapeElement.js b/player/js/elements/svgElements/SVGShapeElement.js index 7cd9d83af..a04c20a34 100644 --- a/player/js/elements/svgElements/SVGShapeElement.js +++ b/player/js/elements/svgElements/SVGShapeElement.js @@ -211,11 +211,7 @@ SVGShapeElement.prototype.setElementStyles = function (elementData) { var j; var jLen = this.stylesList.length; for (j = 0; j < jLen; j += 1) { - if (arr.indexOf(this.stylesList[j]) !== -1) { - continue; - } - - if (!this.stylesList[j].closed) { + if (arr.indexOf(this.stylesList[j]) === -1 && !this.stylesList[j].closed) { arr.push(this.stylesList[j]); } } From 5e6164b33d54855b56e55cc973d397451c3315d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Davidovi=C4=87?= Date: Tue, 31 Oct 2023 22:26:13 +0100 Subject: [PATCH 3/3] Ensure `_localMatMdf` is reset to `false` With efeb109, support for transform effects has been added, which required introducing another matrix on `TransformElement` to represent the final transform matrix including the effects. This matrix is denoted as `localMat` If there are no transform effects, `localMat` is the same (referentially) as the existing transform matrix (`mat`). Otherwise, it's calculated by composing the transform effects and then composing that with the "old" transform matrix. Alongside `localMat`, a `_localMatMdf` member is introduced, which tracks whether the local matrix was modified since its last commit to the DOM, analogously to `_matMdf`. Unfortunately, a logic bug introduced by efeb109 meant that, in the absence of transform effects, `_localMatMdf` was latched to `true`, i.e. no code path would ever be able to reset it to `false` after it was once set to `true` (e.g. as a result of the matrix being animated). This causes a serious performance regression, since all matrices that once had `_matMdf` set to `true` will keep being updated in the DOM every frame, causing costly full style recalculations. Fix by forcing `_matMdf` and `_localMatMdf` to be equivalent in the case of no transform effects, just as `mat` and `localMat` are referentially equal. In the case of >0 transform effects, the custom logic in `renderLocalTransform()` will take over and compute `_localMatMdf` separately from and based on `_matMdf`. --- player/js/elements/helpers/TransformElement.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/player/js/elements/helpers/TransformElement.js b/player/js/elements/helpers/TransformElement.js index bc270235d..cd733c39e 100644 --- a/player/js/elements/helpers/TransformElement.js +++ b/player/js/elements/helpers/TransformElement.js @@ -53,7 +53,7 @@ TransformElement.prototype = { } } } - if (this.finalTransform._matMdf) { + if (!this.localTransforms || this.finalTransform._matMdf) { this.finalTransform._localMatMdf = this.finalTransform._matMdf; } if (this.finalTransform._opMdf) {