From 63cf8a693a5262600d465d70f0383229464d71e7 Mon Sep 17 00:00:00 2001 From: "Arthur Detroux (ard)" Date: Thu, 21 Oct 2021 08:58:42 +0000 Subject: [PATCH] [IMP] web_editor: add support for fixed size SVGs for image shapes With this PR's next commits introducing device shapes, it was needed to have SVGs with a fixed size. Originally the code was created with the idea that svg will take the size of the image they're going to clip. This commit introduces a data attribute that allows SVGs to bypass being resized so that they always keep the same aspect ratio. task-2666049 Part-of: odoo/odoo#79068 Co-authored-by: Benjamin Vray --- .../static/src/js/editor/snippets.options.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) 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 b0e936a3b9c..c3817f2c409 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -5447,6 +5447,7 @@ registry.ImageTools = ImageHandlerOption.extend({ */ async _writeShape(svgText) { const img = this._getImg(); + const initialImageWidth = img.naturalWidth; const svg = new DOMParser().parseFromString(svgText, 'image/svg+xml').documentElement; // We will store the image in base64 inside the SVG. @@ -5458,9 +5459,19 @@ registry.ImageTools = ImageHandlerOption.extend({ // Force natural width & height (note: loading the original image is // needed for Safari where natural width & height of SVG does not return // the correct values). - const originalImage = await loadImage(img.src); - svg.setAttribute('width', originalImage.naturalWidth); - svg.setAttribute('height', originalImage.naturalHeight); + const originalImage = await loadImage(imgDataURL, img); + // If the svg forces the size of the shape we still want to have the resized + // width + if (!svg.dataset.forcedSize) { + svg.setAttribute('width', originalImage.naturalWidth); + svg.setAttribute('height', originalImage.naturalHeight); + } else { + const imageWidth = Math.trunc(img.dataset.resizeWidth || img.dataset.width || initialImageWidth); + const svgAspectRatio = parseInt(svg.getAttribute('width')) / parseInt(svg.getAttribute('height')); + const newHeight = imageWidth / svgAspectRatio; + svg.setAttribute('width', imageWidth); + svg.setAttribute('height', newHeight); + } // Transform the current SVG in a base64 file to be saved by the server const blob = new Blob([svg.outerHTML], { type: 'image/svg+xml',