[FIX] web_editor: fix gap between transformed shape and next section

Previously, when flipping some shapes vertically on chrome, and
vertically or horizontally on firefox, there was a gap of 1px or less at
some screen widths. This is caused by the way these browsers render
backgrounds on transformed elements. It seems like firefox will round
the size of the element to render the background image on it if the
element is transformed, while chrome will always render the background
at the correct size (or render it at a larger size and clip it to the
correct size after the fact), but will round the coordinates of the
symmetry point, causing only the vertical flip to have this issue, and
only if the background image would not extend beyond the bounds of the
element (on firefox, even shapes that would extend beyond the bounds of
the element would showcase a gap, eg origins 1)

This commit fixes that by applying the transform to the SVG rather than
to the element, by use of the shapes controller.

task-2369560

closes odoo/odoo#61114

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

11 files changed, 55 insertions, 25 deletions

diff --git a/addons/web_editor/controllers/main.py b/addons/web_editor/controllers/main.py
index 87db5e7b377..e85a678f54e 100644
--- a/addons/web_editor/controllers/main.py
+++ b/addons/web_editor/controllers/main.py
@@ -531,13 +531,20 @@ class Web_Editor(http.Controller):
                 svg = file.read()
 
         user_colors = []
-        for key, color in kwargs.items():
-            match = re.match('^c([1-5])$', key)
-            if match:
+        for key, value in kwargs.items():
+            colorMatch = re.match('^c([1-5])$', key)
+            if colorMatch:
                 # Check that color is hex or rgb(a) to prevent arbitrary injection
-                if not re.match(r'(?i)^#[0-9A-F]{6,8}$|^rgba?\(\d{1,3},\d{1,3},\d{1,3}(?:,[0-9.]{1,4})?\)$', color.replace(' ', '')):
+                if not re.match(r'(?i)^#[0-9A-F]{6,8}$|^rgba?\(\d{1,3},\d{1,3},\d{1,3}(?:,[0-9.]{1,4})?\)$', value.replace(' ', '')):
                     raise werkzeug.exceptions.BadRequest()
-                user_colors.append([tools.html_escape(color), match.group(1)])
+                user_colors.append([tools.html_escape(value), colorMatch.group(1)])
+            elif key == 'flip':
+                if value == 'x':
+                    svg = svg.replace('<svg ', '<svg style="transform: scaleX(-1);" ')
+                elif value == 'y':
+                    svg = svg.replace('<svg ', '<svg style="transform: scaleY(-1)" ')
+                elif value == 'xy':
+                    svg = svg.replace('<svg ', '<svg style="transform: scale(-1)" ')
 
         default_palette = {
             '1': '#3AADAA',
diff --git a/addons/web_editor/static/shapes/Airy/03.svg b/addons/web_editor/static/shapes/Airy/03.svg
index 3de5a0a0fd0..33c51924a9f 100644
--- a/addons/web_editor/static/shapes/Airy/03.svg
+++ b/addons/web_editor/static/shapes/Airy/03.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1400 244.7" style="enable-background:new 0 0 1400 244.7;" xml:space="preserve">
+	 viewBox="0 0 1400 244.7" xml:space="preserve">
 <style type="text/css">
 	.st0{opacity:0.58;}
 	.st1{fill:none;stroke:#383E45;stroke-width:1.4665;stroke-miterlimit:10;}
diff --git a/addons/web_editor/static/shapes/Origins/05.svg b/addons/web_editor/static/shapes/Origins/05.svg
index 80e23da7a1e..bc444fd8553 100644
--- a/addons/web_editor/static/shapes/Origins/05.svg
+++ b/addons/web_editor/static/shapes/Origins/05.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1400 1400" style="enable-background:new 0 0 1400 1400;" xml:space="preserve">
+	 viewBox="0 0 1400 1400" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#F6F6F6;}
 </style>
diff --git a/addons/web_editor/static/shapes/Origins/06.svg b/addons/web_editor/static/shapes/Origins/06.svg
index 53918be954d..a3b22d7ffd3 100644
--- a/addons/web_editor/static/shapes/Origins/06.svg
+++ b/addons/web_editor/static/shapes/Origins/06.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1400 450" style="enable-background:new 0 0 1400 450;" xml:space="preserve">
+	 viewBox="0 0 1400 450" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#F6F6F6;}
 </style>
diff --git a/addons/web_editor/static/shapes/Origins/11.svg b/addons/web_editor/static/shapes/Origins/11.svg
index 8e2970b759d..501d2126441 100644
--- a/addons/web_editor/static/shapes/Origins/11.svg
+++ b/addons/web_editor/static/shapes/Origins/11.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1400 2800" style="enable-background:new 0 0 1400 350.1;" xml:space="preserve">
+	 viewBox="0 0 1400 2800" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:url(#SVGID_1_);}
 </style>
diff --git a/addons/web_editor/static/shapes/Origins/13.svg b/addons/web_editor/static/shapes/Origins/13.svg
index 780e9d1ec0a..863b8bd520c 100644
--- a/addons/web_editor/static/shapes/Origins/13.svg
+++ b/addons/web_editor/static/shapes/Origins/13.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1400 446.9" style="enable-background:new 0 0 1400 446.9;" xml:space="preserve">
+	 viewBox="0 0 1400 446.9" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:url(#SVGID_1_);}
 </style>
diff --git a/addons/web_editor/static/shapes/Origins/14.svg b/addons/web_editor/static/shapes/Origins/14.svg
index 6b5ed1fc200..74ac000d374 100644
--- a/addons/web_editor/static/shapes/Origins/14.svg
+++ b/addons/web_editor/static/shapes/Origins/14.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 -1354.3 1400 1400" style="enable-background:new 0 0 1400 45.7;" xml:space="preserve">
+	 viewBox="0 -1354.3 1400 1400" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#FFFFFF;}
 </style>
diff --git a/addons/web_editor/static/shapes/Wavy/01.svg b/addons/web_editor/static/shapes/Wavy/01.svg
index ae18ac754fa..27037a91adc 100644
--- a/addons/web_editor/static/shapes/Wavy/01.svg
+++ b/addons/web_editor/static/shapes/Wavy/01.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 -840 1400 1400" style="enable-background:new 0 0 1400 560;" xml:space="preserve">
+	 viewBox="0 -840 1400 1400" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:url(#SVGID_1_);}
 	.st1{fill:#FFFFFF;fill-opacity:0.3;}
diff --git a/addons/web_editor/static/shapes/Wavy/05.svg b/addons/web_editor/static/shapes/Wavy/05.svg
index 0210c9b1c18..dd3173aea60 100644
--- a/addons/web_editor/static/shapes/Wavy/05.svg
+++ b/addons/web_editor/static/shapes/Wavy/05.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1400 1400" style="enable-background:new 0 0 1400 363.6;" xml:space="preserve">
+	 viewBox="0 0 1400 1400" xml:space="preserve">
 <style type="text/css">
 	.st0{opacity:0.2;fill:#3AADAA;enable-background:new    ;}
 	.st1{opacity:0.25;fill:#3AADAA;enable-background:new    ;}
diff --git a/addons/web_editor/static/shapes/Zigs/03.svg b/addons/web_editor/static/shapes/Zigs/03.svg
index 2702509531d..889001cbe3a 100644
--- a/addons/web_editor/static/shapes/Zigs/03.svg
+++ b/addons/web_editor/static/shapes/Zigs/03.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1400 1140" style="enable-background:new 0 0 1400 1140;" xml:space="preserve">
+	 viewBox="0 0 1400 1140" xml:space="preserve">
 <style type="text/css">
 	.st0{opacity:0.5;fill:#3AADAA;enable-background:new    ;}
 	.st1{opacity:0.08;fill:#3AADAA;enable-background:new    ;}
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 5050a622bd6..051ab4111b2 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -3846,10 +3846,14 @@ registry.BackgroundShape = SnippetOptionWidget.extend({
                 return color || '';
             }
             case 'flipX': {
-                return this.$target.find('> .o_we_shape.o_we_flip_x').length !== 0;
+                // Compat: flip classes are no longer used but may be present in client db
+                const hasFlipClass = this.$target.find('> .o_we_shape.o_we_flip_x').length !== 0;
+                return hasFlipClass || this._getShapeData().flip.includes('x');
             }
             case 'flipY': {
-                return this.$target.find('> .o_we_shape.o_we_flip_y').length !== 0;
+                // Compat: flip classes are no longer used but may be present in client db
+                const hasFlipClass = this.$target.find('> .o_we_shape.o_we_flip_y').length !== 0;
+                return hasFlipClass || this._getShapeData().flip.includes('y');
             }
         }
         return this._super(...arguments);
@@ -3955,11 +3959,27 @@ registry.BackgroundShape = SnippetOptionWidget.extend({
             target.style.position = 'relative';
         }
         shapeContainer.className = `o_we_shape o_${shape.replace(/\//g, '_')}`;
-        flip.forEach(dir => {
-            shapeContainer.classList.add(`o_we_flip_${dir}`);
-        });
-        // Custom colors, overwrite shape that is set by the class
-        $(shapeContainer).css('background-image', colors ? `url("${this._getShapeSrc()}")` : '');
+        // Compat: remove old flip classes as flipping is now done inside the svg
+        shapeContainer.classList.remove('o_we_flip_x', 'o_we_flip_y');
+
+        if (colors || flip.length) {
+            // Custom colors/flip, overwrite shape that is set by the class
+            $(shapeContainer).css('background-image', `url("${this._getShapeSrc()}")`);
+            shapeContainer.style.backgroundPosition = '';
+            if (flip.length) {
+                let [xPos, yPos] = $(shapeContainer)
+                    .css('background-position')
+                    .split(' ')
+                    .map(p => parseFloat(p));
+                // -X + 2*Y is a symmetry of X around Y, this is a symmetry around 50%
+                xPos = flip.includes('x') ? -xPos + 100 : xPos;
+                yPos = flip.includes('y') ? -yPos + 100 : yPos;
+                shapeContainer.style.backgroundPosition = `${xPos}% ${yPos}%`;
+            }
+        } else {
+            // Remove custom bg image and let the shape class set the bg shape
+            $(shapeContainer).css('background-image', '');
+        }
     },
     /**
      * Overwrites shape properties with the specified data.
@@ -3998,16 +4018,19 @@ registry.BackgroundShape = SnippetOptionWidget.extend({
      * @private
      */
     _getShapeSrc() {
-        const {shape, colors} = this._getShapeData();
+        const {shape, colors, flip} = this._getShapeData();
         if (!shape) {
             return '';
         }
-        const queryString = Object.entries(colors)
+        const searchParams = Object.entries(colors)
             .map(([colorName, colorValue]) => {
                 const encodedCol = encodeURIComponent(colorValue);
                 return `${colorName}=${encodedCol}`;
-            }).join('&');
-        return `/web_editor/shape/${shape}.svg?${queryString}`;
+            });
+        if (flip.length) {
+            searchParams.push(`flip=${flip.sort().join('')}`);
+        }
+        return `/web_editor/shape/${shape}.svg?${searchParams.join('&')}`;
     },
     /**
      * Retrieves current shape data from the target's dataset.