zcy
/
svgedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix export (#936) 

* fix export

* improve dialog and fix quality
master
JFH 2023-12-10 10:52:20 +01:00 committed by GitHub
parent ec3e0522df
commit f0e4407f44
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 11 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/svgcanvas/core/svg-exec.js
View File

@ -896,7 +896,7 @@ const rasterExport = async (imgType, quality, WindowName, opts = {}) => {
WindowName WindowName
} }
if (!opts.avoidEvent) { if (!opts.avoidEvent) {
svgCanvas.call('ed', obj) svgCanvas.call('exported', obj)
} }
resolve(obj) resolve(obj)
} }

7
src/editor/Editor.js
View File

@ -28,7 +28,7 @@ import LayersPanel from './panels/LayersPanel.js'
import MainMenu from './MainMenu.js' import MainMenu from './MainMenu.js'
import { getParentsUntil } from '@svgedit/svgcanvas/common/util.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) { exportHandler (win, data) {
const { issues, exportWindowName } = data const { issues, exportWindowName } = data
this.exportWindow = window.open('', exportWindowName) // A hack to get the window via JSON-able name without opening a new one
this.exportWindow = window.open(blankPageObjectURL || '', exportWindowName) // A hack to get the window via JSON-able name without opening a new one
if (!this.exportWindow || this.exportWindow.closed) { if (!this.exportWindow || this.exportWindow.closed) {
seAlert(this.i18next.t('notification.popupWindowBlocked')) seAlert(this.i18next.t('notification.popupWindowBlocked'))
return return
@ -319,7 +317,6 @@ class Editor extends EditorStartup {
pre + pre +
issues.join(pre) issues.join(pre)
} }
// Note that this will also prevent the notice even though new issues may appear later. // 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 // May want to find a way to deal with that without annoying the user
this.configObj.pref('export_notice_done', 'all') this.configObj.pref('export_notice_done', 'all')

24
src/editor/MainMenu.js
View File

@ -129,35 +129,11 @@ class MainMenu {
* @returns {void} * @returns {void}
*/ */
const openExportWindow = () => { const openExportWindow = () => {
const loadingImage = this.editor.i18next.t('notification.loadingImage')
if (this.editor.configObj.curConfig.exportWindowType === 'new') { if (this.editor.configObj.curConfig.exportWindowType === 'new') {
this.editor.exportWindowCt++ this.editor.exportWindowCt++
} }
this.editor.exportWindowName = this.editor.exportWindowName =
this.editor.configObj.curConfig.canvasName + this.editor.exportWindowCt 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() const chrome = isChrome()
if (imgType === 'PDF') { if (imgType === 'PDF') {

18
src/editor/dialogs/exportDialog.html
View File

@ -3,7 +3,6 @@
margin: 10px 10px 5px 10px; margin: 10px 10px 5px 10px;
background: #5a6162; background: #5a6162;
overflow: auto; overflow: auto;
text-align: left;
border: 1px solid #c8c8c8; border: 1px solid #c8c8c8;
} }
@ -12,6 +11,7 @@
#dialog_content label { #dialog_content label {
margin: 10px; margin: 10px;
line-height: 0.3em; line-height: 0.3em;
color: #fff
} }
#dialog_container { #dialog_container {
@ -56,19 +56,9 @@
<div class="overlay"></div> <div class="overlay"></div>
<div id="dialog_container"> <div id="dialog_container">
<div id="dialog_content"> <div id="dialog_content">
<p class="se-select" id="export_select"></p> <p id="export_select"></p>
<p class="se-select"> <se-select id="se-storage-pref" label="" options="PNG,JPEG,BMP,WEBP,PDF" values="PNG::JPEG::BMP::WEBP::PDF"></se-select>
<select id="se-storage-pref"> <se-spin-input id="se-quality" label="ui.quality" size="3" min="0" max="100" value="100" step="5" />
<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>
</div> </div>
<div id="dialog_buttons"> <div id="dialog_buttons">
<button id="export_ok"></button> <button id="export_ok"></button>

10
src/editor/dialogs/exportDialog.js
View File

@ -21,7 +21,7 @@ export class SeExportDialog extends HTMLElement {
this.$cancelBtn = this._shadowRoot.querySelector('#export_cancel') this.$cancelBtn = this._shadowRoot.querySelector('#export_cancel')
this.$exportOption = this._shadowRoot.querySelector('#se-storage-pref') this.$exportOption = this._shadowRoot.querySelector('#se-storage-pref')
this.$qualityCont = this._shadowRoot.querySelector('#se-quality') 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 this.value = 1
} }
@ -33,8 +33,8 @@ export class SeExportDialog extends HTMLElement {
init (i18next) { init (i18next) {
this.setAttribute('common-ok', i18next.t('common.ok')) this.setAttribute('common-ok', i18next.t('common.ok'))
this.setAttribute('common-cancel', i18next.t('common.cancel')) 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.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 * @returns {any} observed
*/ */
static get observedAttributes () { 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': case 'common-cancel':
this.$cancelBtn.textContent = newValue this.$cancelBtn.textContent = newValue
break break
case 'ui-quality':
node = this._shadowRoot.querySelector('#se-quality')
node.prepend(newValue)
break
case 'ui-export_type_label': case 'ui-export_type_label':
node = this._shadowRoot.querySelector('#export_select') node = this._shadowRoot.querySelector('#export_select')
node.textContent = newValue node.textContent = newValue

2
src/editor/locale/lang.fr.js
View File

@ -21,7 +21,7 @@ export default {
palette_info: 'Cliquer pour changer la couleur de remplissage, Maj+clic pour changer la couleur de contour', palette_info: 'Cliquer pour changer la couleur de remplissage, Maj+clic pour changer la couleur de contour',
zoom_level: 'Changer le niveau de zoom', zoom_level: 'Changer le niveau de zoom',
panel_action: 'Cliquer pour ouvrir le panel de côté', 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', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
pathCtrlPtTooltip: 'Drag control point to adjust curve properties', pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
pick_stroke_paint_opacity: 'Pick a Stroke Paint and Opacity', pick_stroke_paint_opacity: 'Pick a Stroke Paint and Opacity',