Merge pull request #68 from OptimistikSAS/issues/64

#64 The export dialog needs to include the quality options (except for PDF)

src/editor/EditorStartup.js

@@ -86,6 +86,10 @@ class EditorStartup {
       const promptBox = document.createElement('se-prompt-dialog');
       promptBox.setAttribute('id', 'se-prompt-dialog');
       document.body.append(promptBox);
+      // Export dialog added to DOM
+      const exportDialog = document.createElement('se-export-dialog');
+      exportDialog.setAttribute('id', 'se-export-dialog');
+      document.body.append(exportDialog);
     } catch (err) {
     // eslint-disable-next-line no-console
       console.error(err);
@@ -470,7 +474,11 @@ class EditorStartup {
         this.clickSave();
       }
     }.bind(this));
-    $id('tool_export').addEventListener('click', this.clickExport.bind(this));
+    // this.clickExport.bind(this)
+    $id('tool_export').addEventListener('click', function (e) {
+      document.getElementById('se-export-dialog').setAttribute('dialog', 'open');
+    });
+    $id('se-export-dialog').addEventListener('change', this.clickExport.bind(this));
     $id('tool_docprops').addEventListener('click', this.showDocProperties.bind(this));
     $id('tool_editor_prefs').addEventListener('click', this.showPreferences.bind(this));
     $id('tool_editor_homepage').addEventListener('click', this.openHomePage.bind(this));

src/editor/dialogs/exportDialog.js

@@ -0,0 +1,190 @@
+/* eslint-disable max-len */
+/* eslint-disable node/no-unpublished-import */
+import 'elix/define/Dialog.js';
+import 'elix/define/NumberSpinBox.js';
+
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+ 
+  #dialog_content {
+    margin: 10px 10px 5px 10px;
+    background: #DDD;
+    overflow: auto;
+    text-align: left;
+    border: 1px solid #B0B0B0;
+  }
+
+  #dialog_content p, #dialog_content select, #dialog_content label {
+    margin: 10px;
+    line-height: 0.3em;
+  }
+  
+  #dialog_container {
+    font-family: Verdana;
+    text-align: center;
+    left: 50%;
+    top: 50%;
+    max-width: 400px;
+    z-index: 50001;
+    background: #CCC;
+    border: 1px outset #777;
+    font-family:Verdana,Helvetica,sans-serif;
+    font-size:0.8em;
+  }
+  
+  #dialog_container, #dialog_content {
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+  }
+  
+  #dialog_buttons input[type=text] {
+    width: 90%;
+    display: block;
+    margin: 0 0 5px 11px;
+  }
+  
+  #dialog_buttons input[type=button] {
+    margin: 0 1em;
+  }
+  .se-select{
+    text-align: center;
+  }
+  elix-number-spin-box{
+    margin-left: 15px;
+  }
+  </style>
+  <elix-dialog id="export_box" aria-label="export svg" closed>
+    <div class="overlay"></div>
+    <div id="dialog_container">
+      <div id="dialog_content">
+        <p class="se-select"> 
+        Select an image type for export:
+        </p>
+        <p class="se-select">
+        <select id="se-storage-pref">
+          <option value="PNG">PNG</option>
+          <option value="JPEG">JPEG</option>
+          <option value="BMP">BMP</option>
+          <option value="WEBP">WEBP</option>
+          <option value="PDF">PDF</option>
+        </select> 
+        </p>
+        <p id="se-quality">Quality:<elix-number-spin-box min="-1" max="101" step="5" value="100"></elix-number-spin-box></p>
+      </div>
+      <div id="dialog_buttons">
+        <button id="export_ok">
+          <img class="svg_icon" src="./images/ok.svg" alt="icon" width="16" height="16" />
+          Ok
+        </button>
+        <button id="export_cancel">
+          <img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" />
+          Cancel
+        </button>
+      </div>
+    </div>
+  </elix-dialog>
+`;
+/**
+ * @class SeExportDialog
+ */
+export class SeExportDialog extends HTMLElement {
+  /**
+    * @function constructor
+    */
+  constructor () {
+    super();
+    // create the shadowDom and insert the template
+    this._shadowRoot = this.attachShadow({mode: 'open'});
+    this._shadowRoot.append(template.content.cloneNode(true));
+    this.$dialog = this._shadowRoot.querySelector('#export_box');
+    this.$okBtn = this._shadowRoot.querySelector('#export_ok');
+    this.$cancelBtn = this._shadowRoot.querySelector('#export_cancel');
+    this.$exportOption = this._shadowRoot.querySelector('#se-storage-pref');
+    this.$qualityCont = this._shadowRoot.querySelector('#se-quality');    
+    this.$input = this._shadowRoot.querySelector('elix-number-spin-box');
+    this.value = 1;
+  }
+  /**
+   * @function observedAttributes
+   * @returns {any} observed
+   */
+  static get observedAttributes () {
+    return ['dialog'];
+  }
+  /**
+   * @function attributeChangedCallback
+   * @param {string} name
+   * @param {string} oldValue
+   * @param {string} newValue
+   * @returns {void}
+   */
+  attributeChangedCallback (name, oldValue, newValue) {
+    switch (name) {
+    case 'dialog':
+      if (newValue === 'open') {
+        this.$dialog.open();
+      } else {
+        this.$dialog.close();
+      }
+      break;
+    default:
+      // super.attributeChangedCallback(name, oldValue, newValue);
+      break;
+    }
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get dialog () {
+    return this.getAttribute('dialog');
+  }
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set dialog (value) {
+    this.setAttribute('dialog', value);
+  }
+  /**
+   * @function connectedCallback
+   * @returns {void}
+   */
+  connectedCallback () {
+    this.$input.addEventListener('change', (e) => {
+      e.preventDefault();
+      this.value = e.target.value;
+    });
+    this.$input.addEventListener('click', (e) => {
+      e.preventDefault();
+      this.value = e.target.value;
+    });
+    const onSubmitHandler = (e, action) => {
+      if (action === 'cancel') {
+        document.getElementById('se-export-dialog').setAttribute('dialog', 'close');
+      } else {
+        const triggerEvent = new CustomEvent('change', {detail: {
+          trigger: action,
+          imgType: this.$exportOption.value,
+          quality: this.value
+        }});
+        this.dispatchEvent(triggerEvent);
+      }
+    };
+    const onChangeHandler = (e) => {
+      if (e.target.value === 'PDF') {
+        this.$qualityCont.style.display = 'none';
+      } else {
+        this.$qualityCont.style.display = 'block';
+      }
+    };
+    this.$okBtn.addEventListener('click', (evt) => onSubmitHandler(evt, 'ok'));
+    this.$cancelBtn.addEventListener('click', (evt) => onSubmitHandler(evt, 'cancel'));
+    this.$exportOption.addEventListener('change', (evt) => onChangeHandler(evt));
+  }
+}
+
+// Register
+customElements.define('se-export-dialog', SeExportDialog);

src/editor/dialogs/index.js

@@ -7,3 +7,4 @@ import './seSelectDialog.js';
 import './seConfirmDialog.js';
 import './sePromptDialog.js';
 import './seAlertDialog.js';
+import './exportDialog.js';

src/editor/svgedit.js

@@ -1106,17 +1106,12 @@ class Editor extends EditorStartup {
   *
   * @returns {Promise<void>} Resolves to `undefined`
   */
-  async clickExport () {
+  async clickExport (e) {
-    const imgType = await seSelect('Select an image type for export: ', [
+    if (e?.detail?.trigger !== 'ok' || e?.detail?.imgType === undefined) {
-      // See http://kangax.github.io/jstests/toDataUrl_mime_type_test/ for a useful list of MIME types and browser support
-      // 'ICO', // Todo: Find a way to preserve transparency in SVG-Edit if not working presently and do full packaging for x-icon; then switch back to position after 'PNG'
-      'PNG',
-      'JPEG', 'BMP', 'WEBP', 'PDF'
-    ]);
-
-    if (!imgType) {
       return;
     }
+    const imgType = e?.detail?.imgType;
+    const quality = (e?.detail?.quality) ? (e?.detail?.quality / 100) : 1;
     // Open placeholder window (prevents popup)
     let exportWindowName;
 
@@ -1161,10 +1156,6 @@ class Editor extends EditorStartup {
       if (!this.customExportImage) {
         openExportWindow();
       }
-      /**
-       * @todo "quality" should be an option of the dialog
-       */
-      const quality = 1;
       /* const results = */ await this.svgCanvas.rasterExport(imgType, quality, this.exportWindowName);
     }
   }