Fix export (#936)

* fix export * improve dialog and fix quality
2023-12-10 10:52:20 +01:00 · 2023-12-10 10:52:20 +01:00 · f0e4407f44
parent ec3e0522df
commit f0e4407f44
6 changed files with 11 additions and 52 deletions
--- a/packages/svgcanvas/core/svg-exec.js
+++ b/packages/svgcanvas/core/svg-exec.js
@ -896,7 +896,7 @@ const rasterExport = async (imgType, quality, WindowName, opts = {}) => {
                WindowName
              }
              if (!opts.avoidEvent) {
-                svgCanvas.call('ed', obj)
+                svgCanvas.call('exported', obj)
              }
              resolve(obj)
            }
--- a/src/editor/Editor.js
+++ b/src/editor/Editor.js
@ -28,7 +28,7 @@ import LayersPanel from './panels/LayersPanel.js'
 import MainMenu from './MainMenu.js'
 import { getParentsUntil } from '@svgedit/svgcanvas/common/util.js'

-const { $id, $click, decode64, blankPageObjectURL } = SvgCanvas
+const { $id, $click, decode64 } = SvgCanvas

 /**
 *
@ -295,9 +295,7 @@ class Editor extends EditorStartup {
   */
  exportHandler (win, data) {
    const { issues, exportWindowName } = data
-
-    this.exportWindow = window.open(blankPageObjectURL || '', exportWindowName) // A hack to get the window via JSON-able name without opening a new one
-
+    this.exportWindow = window.open('', exportWindowName) // A hack to get the window via JSON-able name without opening a new one
    if (!this.exportWindow || this.exportWindow.closed) {
      seAlert(this.i18next.t('notification.popupWindowBlocked'))
      return
@ -319,7 +317,6 @@ class Editor extends EditorStartup {
          pre +
          issues.join(pre)
      }
-
      // Note that this will also prevent the notice even though new issues may appear later.
      // May want to find a way to deal with that without annoying the user
      this.configObj.pref('export_notice_done', 'all')
--- a/src/editor/MainMenu.js
+++ b/src/editor/MainMenu.js
@ -129,35 +129,11 @@ class MainMenu {
     * @returns {void}
     */
    const openExportWindow = () => {
-      const loadingImage = this.editor.i18next.t('notification.loadingImage')
      if (this.editor.configObj.curConfig.exportWindowType === 'new') {
        this.editor.exportWindowCt++
      }
      this.editor.exportWindowName =
        this.editor.configObj.curConfig.canvasName + this.editor.exportWindowCt
-      let popHTML; let popURL
-      if (this.editor.loadingURL) {
-        popURL = this.editor.loadingURL
-      } else {
-        popHTML = `<!DOCTYPE html><html>
-          <head>
-            <meta charset="utf-8">
-            <title>${loadingImage}</title>
-          </head>
-          <body><h1>${loadingImage}</h1></body>
-        <html>`
-        if (URL?.createObjectURL) {
-          const blob = new Blob([popHTML], { type: 'text/html' })
-          popURL = URL.createObjectURL(blob)
-        } else {
-          popURL = 'data:text/html;base64;charset=utf-8,' + popHTML
-        }
-        this.editor.loadingURL = popURL
-      }
-      this.editor.exportWindow = window.open(
-        popURL,
-        this.editor.exportWindowName
-      )
    }
    const chrome = isChrome()
    if (imgType === 'PDF') {
--- a/src/editor/dialogs/exportDialog.html
+++ b/src/editor/dialogs/exportDialog.html
@ -3,7 +3,6 @@
        margin: 10px 10px 5px 10px;
        background: #5a6162;
        overflow: auto;
-        text-align: left;
        border: 1px solid #c8c8c8;
    }

@ -12,6 +11,7 @@
    #dialog_content label {
        margin: 10px;
        line-height: 0.3em;
+        color: #fff
    }

    #dialog_container {
@ -56,19 +56,9 @@
    <div class="overlay"></div>
    <div id="dialog_container">
        <div id="dialog_content">
-            <p class="se-select" id="export_select"></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">
-                <elix-number-spin-box min="-1" max="101" step="5" value="100"></elix-number-spin-box>
-            </p>
+            <p id="export_select"></p>
+            <se-select id="se-storage-pref" label="" options="PNG,JPEG,BMP,WEBP,PDF" values="PNG::JPEG::BMP::WEBP::PDF"></se-select>
+            <se-spin-input id="se-quality" label="ui.quality" size="3" min="0" max="100" value="100" step="5" />
        </div>
        <div id="dialog_buttons">
            <button id="export_ok"></button>
--- a/src/editor/dialogs/exportDialog.js
+++ b/src/editor/dialogs/exportDialog.js
@ -21,7 +21,7 @@ export class SeExportDialog extends HTMLElement {
    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.$input = this._shadowRoot.querySelector('#se-quality')
    this.value = 1
  }

@ -33,8 +33,8 @@ export class SeExportDialog extends HTMLElement {
  init (i18next) {
    this.setAttribute('common-ok', i18next.t('common.ok'))
    this.setAttribute('common-cancel', i18next.t('common.cancel'))
-    this.setAttribute('ui-quality', i18next.t('ui.quality'))
    this.setAttribute('ui-export_type_label', i18next.t('ui.export_type_label'))
+    this.value = 100
  }

  /**
@ -42,7 +42,7 @@ export class SeExportDialog extends HTMLElement {
   * @returns {any} observed
   */
  static get observedAttributes () {
-    return ['dialog', 'common-ok', 'common-cancel', 'ui-quality', 'ui-export_type_label']
+    return ['dialog', 'common-ok', 'common-cancel', 'ui-export_type_label']
  }

  /**
@ -68,10 +68,6 @@ export class SeExportDialog extends HTMLElement {
      case 'common-cancel':
        this.$cancelBtn.textContent = newValue
        break
-      case 'ui-quality':
-        node = this._shadowRoot.querySelector('#se-quality')
-        node.prepend(newValue)
-        break
      case 'ui-export_type_label':
        node = this._shadowRoot.querySelector('#export_select')
        node.textContent = newValue
--- a/src/editor/locale/lang.fr.js
+++ b/src/editor/locale/lang.fr.js
@ -21,7 +21,7 @@ export default {
    palette_info: 'Cliquer pour changer la couleur de remplissage, Maj+clic pour changer la couleur de contour',
    zoom_level: 'Changer le niveau de zoom',
    panel_action: 'Cliquer pour ouvrir le panel de côté',
-    quality: 'Quality:',
+    quality: 'Qualité:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
    pick_stroke_paint_opacity: 'Pick a Stroke Paint and Opacity',