fix: viewBox issue (#741)

src/editor/ConfigObj.js

@@ -142,6 +142,8 @@ export default class ConfigObj {
       baseUnit: 'px',
       snappingStep: 10,
       showRulers: true,
+      // SOURCE OUTPUT BEHAVIOR
+      dynamicOutput: false,
       // URL BEHAVIOR CONFIGURATION
       preventAllURLConfig: false,
       preventURLContentLoading: false,

src/editor/Editor.js

@@ -945,6 +945,18 @@ class Editor extends EditorStartup {
     }
   }
 
+  /**
+   * @returns {void}
+   */
+  toggleDynamicOutput (e) {
+    this.configObj.curConfig.dynamicOutput = e.detail.dynamic
+    this.svgCanvas.setConfig(this.configObj.curConfig)
+    const $editorDialog = document.getElementById('se-svg-editor-dialog')
+    const origSource = this.svgCanvas.getSvgString()
+    $editorDialog.setAttribute('dialog', 'open')
+    $editorDialog.setAttribute('value', origSource)
+  }
+
   /**
    * @returns {void}
    */

src/editor/EditorStartup.js

@@ -453,6 +453,8 @@ class EditorStartup {
     $id('se-svg-editor-dialog').addEventListener('change', function (e) {
       if (e?.detail?.copy === 'click') {
         this.cancelOverlays(e)
+      } else if (e?.detail?.dialog === 'dynamic') {
+        this.toggleDynamicOutput(e)
       } else if (e?.detail?.dialog === 'closed') {
         this.hideSourceEditor()
       } else {
@@ -548,6 +550,10 @@ class EditorStartup {
       if (this.configObj.curConfig.gridColor) {
         $editDialog.setAttribute('gridcolor', this.configObj.curConfig.gridColor)
       }
+
+      if (this.configObj.curConfig.dynamicOutput) {
+        $editDialog.setAttribute('dynamicoutput', true)
+      }
     }.bind(this))
 
     // zoom

src/editor/dialogs/svgSourceDialog.html

@@ -54,6 +54,20 @@
         margin-left: 30%;
         margin-top: 5px;
     }
+    
+    #tool_source_dynamic {
+        cursor: pointer;
+    }
+    
+    .tool_label {
+        cursor: pointer;
+        margin: 5px 0;
+        display: inline-block;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
 
     #tool_source_cancel {
         width: 20%;
@@ -73,5 +87,8 @@
         <form>
             <textarea id="svg_source_textarea" spellcheck="false" rows="5" cols="80"></textarea>
         </form>
+        <label class="tool_label" for="tool_source_dynamic">
+          <input type="checkbox" id="tool_source_dynamic" checked>Toggle dynamic size
+        </label>
     </div>
 </elix-dialog>

src/editor/dialogs/svgSourceDialog.js

@@ -22,6 +22,8 @@ export class SeSvgSourceEditorDialog extends HTMLElement {
     this.$sourceTxt = this._shadowRoot.querySelector('#svg_source_textarea')
     this.$copySec = this._shadowRoot.querySelector('#save_output_btns')
     this.$applySec = this._shadowRoot.querySelector('#tool_source_back')
+    this.$toggleDynamic = this._shadowRoot.querySelector('#tool_source_dynamic')
+    this.$toggleDynamic.checked = svgEditor.configObj.curConfig.dynamicOutput
   }
 
   /**
@@ -195,9 +197,19 @@ export class SeSvgSourceEditorDialog extends HTMLElement {
       })
       this.dispatchEvent(closeEvent)
     }
+    const onToggleDynamicHandler = () => {
+      const closeEvent = new CustomEvent('change', {
+        detail: {
+          dynamic: this.$toggleDynamic.checked,
+          dialog: 'dynamic'
+        }
+      })
+      this.dispatchEvent(closeEvent)
+    }
     svgEditor.$click(this.$copyBtn, onCopyHandler)
     svgEditor.$click(this.$saveBtn, onSaveHandler)
     svgEditor.$click(this.$cancelBtn, onCancelHandler)
+    svgEditor.$click(this.$toggleDynamic, onToggleDynamicHandler)
     this.$dialog.addEventListener('close', onCancelHandler)
   }
 }

src/svgcanvas/svg-exec.js

@@ -148,7 +148,7 @@ const svgToString = (elem, indent) => {
       // Process root element separately
       const res = svgCanvas.getResolution()
 
-      const vb = ''
+      let vb = ''
       // TODO: Allow this by dividing all values by current baseVal
       // Note that this also means we should properly deal with this on import
       // if (curConfig.baseUnit !== 'px') {
@@ -160,24 +160,31 @@ const svgToString = (elem, indent) => {
       //   res.w += unit;
       //   res.h += unit;
       // }
-
-      if (unit !== 'px') {
-        res.w = convertUnit(res.w, unit) + unit
-        res.h = convertUnit(res.h, unit) + unit
+      if (curConfig.dynamicOutput) {
+        vb = elem.getAttribute('viewBox')
+        out.push(
+          ' viewBox="' +
+            vb +
+            '" xmlns="' +
+            NS.SVG +
+            '"'
+        )
+      } else {
+        if (unit !== 'px') {
+          res.w = convertUnit(res.w, unit) + unit
+          res.h = convertUnit(res.h, unit) + unit
+        }
+        out.push(
+          ' width="' +
+            res.w +
+            '" height="' +
+            res.h +
+            '" xmlns="' +
+            NS.SVG +
+            '"'
+        )
       }
 
-      out.push(
-        ' width="' +
-          res.w +
-          '" height="' +
-          res.h +
-          '"' +
-          vb +
-          ' xmlns="' +
-          NS.SVG +
-          '"'
-      )
-
       const nsuris = {}
 
       // Check elements for namespaces, add if found