add MainMenu class
JFH
parent
57e7fe316b
commit
c19c53565d
|
|
@ -34,6 +34,7 @@ import LeftPanel from './panels/LeftPanel.js';
|
||||||
import TopPanel from './panels/TopPanel.js';
|
import TopPanel from './panels/TopPanel.js';
|
||||||
import BottomPanel from './panels/BottomPanel.js';
|
import BottomPanel from './panels/BottomPanel.js';
|
||||||
import LayersPanel from './panels/LayersPanel.js';
|
import LayersPanel from './panels/LayersPanel.js';
|
||||||
|
import MainMenu from './MainMenu.js';
|
||||||
|
|
||||||
const {$id, $qa, isNullish, encode64, decode64, blankPageObjectURL} = SvgCanvas;
|
const {$id, $qa, isNullish, encode64, decode64, blankPageObjectURL} = SvgCanvas;
|
||||||
|
|
||||||
|
|
@ -139,6 +140,7 @@ class Editor extends EditorStartup {
|
||||||
this.bottomPanel = new BottomPanel(this);
|
this.bottomPanel = new BottomPanel(this);
|
||||||
this.topPanel = new TopPanel(this);
|
this.topPanel = new TopPanel(this);
|
||||||
this.layersPanel = new LayersPanel(this);
|
this.layersPanel = new LayersPanel(this);
|
||||||
|
this.mainMenu = new MainMenu(this);
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
|
|
@ -988,170 +990,6 @@ class Editor extends EditorStartup {
|
||||||
this.topPanel.updateContextPanel();
|
this.topPanel.updateContextPanel();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* @fires module:svgcanvas.SvgCanvas#event:ext_onNewDocument
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
async clickClear () {
|
|
||||||
const [x, y] = this.configObj.curConfig.dimensions;
|
|
||||||
const ok = await seConfirm(this.uiStrings.notification.QwantToClear);
|
|
||||||
if (ok === 'Cancel') {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.leftPanel.clickSelect();
|
|
||||||
this.svgCanvas.clear();
|
|
||||||
this.svgCanvas.setResolution(x, y);
|
|
||||||
this.updateCanvas(true);
|
|
||||||
this.zoomImage();
|
|
||||||
this.layersPanel.populateLayers();
|
|
||||||
this.topPanel.updateContextPanel();
|
|
||||||
this.svgCanvas.runExtensions('onNewDocument');
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
clickSave () {
|
|
||||||
// In the future, more options can be provided here
|
|
||||||
const saveOpts = {
|
|
||||||
images: this.configObj.pref('img_save'),
|
|
||||||
round_digits: 6
|
|
||||||
};
|
|
||||||
this.svgCanvas.save(saveOpts);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @param e
|
|
||||||
* @returns {Promise<void>} Resolves to `undefined`
|
|
||||||
*/
|
|
||||||
async clickExport (e) {
|
|
||||||
if (e?.detail?.trigger !== 'ok' || e?.detail?.imgType === undefined) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const imgType = e?.detail?.imgType;
|
|
||||||
const quality = (e?.detail?.quality) ? (e?.detail?.quality / 100) : 1;
|
|
||||||
// Open placeholder window (prevents popup)
|
|
||||||
let exportWindowName;
|
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
const openExportWindow = () => {
|
|
||||||
const {loadingImage} = this.uiStrings.notification;
|
|
||||||
if (this.configObj.curConfig.exportWindowType === 'new') {
|
|
||||||
this.exportWindowCt++;
|
|
||||||
}
|
|
||||||
this.exportWindowName = this.configObj.curConfig.canvasName + this.exportWindowCt;
|
|
||||||
let popHTML, popURL;
|
|
||||||
if (this.loadingURL) {
|
|
||||||
popURL = this.loadingURL;
|
|
||||||
} else {
|
|
||||||
popHTML = `<!DOCTYPE html><html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>${loadingImage}</title>
|
|
||||||
</head>
|
|
||||||
<body><h1>${loadingImage}</h1></body>
|
|
||||||
<html>`;
|
|
||||||
if (typeof URL !== 'undefined' && URL.createObjectURL) {
|
|
||||||
const blob = new Blob([popHTML], {type: 'text/html'});
|
|
||||||
popURL = URL.createObjectURL(blob);
|
|
||||||
} else {
|
|
||||||
popURL = 'data:text/html;base64;charset=utf-8,' + encode64(popHTML);
|
|
||||||
}
|
|
||||||
this.loadingURL = popURL;
|
|
||||||
}
|
|
||||||
this.exportWindow = window.open(popURL, this.exportWindowName);
|
|
||||||
};
|
|
||||||
const chrome = isChrome();
|
|
||||||
if (imgType === 'PDF') {
|
|
||||||
if (!this.customExportPDF && !chrome) {
|
|
||||||
openExportWindow();
|
|
||||||
}
|
|
||||||
this.svgCanvas.exportPDF(exportWindowName);
|
|
||||||
} else {
|
|
||||||
if (!this.customExportImage) {
|
|
||||||
openExportWindow();
|
|
||||||
}
|
|
||||||
/* const results = */ await this.svgCanvas.rasterExport(imgType, quality, this.exportWindowName);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* By default, this.svgCanvas.open() is a no-op. It is up to an extension
|
|
||||||
* mechanism (opera widget, etc.) to call `setCustomHandlers()` which
|
|
||||||
* will make it do something.
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
clickOpen () {
|
|
||||||
this.svgCanvas.open();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
// eslint-disable-next-line class-methods-use-this
|
|
||||||
clickImport () {
|
|
||||||
/* empty fn */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
showDocProperties () {
|
|
||||||
if (this.docprops) { return; }
|
|
||||||
this.docprops = true;
|
|
||||||
const $imgDialog = document.getElementById('se-img-prop');
|
|
||||||
|
|
||||||
// update resolution option with actual resolution
|
|
||||||
const resolution = this.svgCanvas.getResolution();
|
|
||||||
if (this.configObj.curConfig.baseUnit !== 'px') {
|
|
||||||
resolution.w = convertUnit(resolution.w) + this.configObj.curConfig.baseUnit;
|
|
||||||
resolution.h = convertUnit(resolution.h) + this.configObj.curConfig.baseUnit;
|
|
||||||
}
|
|
||||||
$imgDialog.setAttribute('save', this.configObj.pref('img_save'));
|
|
||||||
$imgDialog.setAttribute('width', resolution.w);
|
|
||||||
$imgDialog.setAttribute('height', resolution.h);
|
|
||||||
$imgDialog.setAttribute('title', this.svgCanvas.getDocumentTitle());
|
|
||||||
$imgDialog.setAttribute('dialog', 'open');
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
showPreferences () {
|
|
||||||
if (this.configObj.preferences) { return; }
|
|
||||||
this.configObj.preferences = true;
|
|
||||||
const $editDialog = document.getElementById('se-edit-prefs');
|
|
||||||
// $('#main_menu').hide();
|
|
||||||
// Update background color with current one
|
|
||||||
const canvasBg = this.configObj.curPrefs.bkgd_color;
|
|
||||||
const url = this.configObj.pref('bkgd_url');
|
|
||||||
if (url) {
|
|
||||||
$editDialog.setAttribute('bgurl', url);
|
|
||||||
}
|
|
||||||
$editDialog.setAttribute('gridsnappingon', this.configObj.curConfig.gridSnapping);
|
|
||||||
$editDialog.setAttribute('gridsnappingstep', this.configObj.curConfig.snappingStep);
|
|
||||||
$editDialog.setAttribute('gridcolor', this.configObj.curConfig.gridColor);
|
|
||||||
$editDialog.setAttribute('canvasbg', canvasBg);
|
|
||||||
$editDialog.setAttribute('dialog', 'open');
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
// eslint-disable-next-line class-methods-use-this
|
|
||||||
openHomePage () {
|
|
||||||
window.open(homePage, '_blank');
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
|
|
@ -1239,37 +1077,6 @@ class Editor extends EditorStartup {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Save user preferences based on current values in the UI.
|
|
||||||
* @param {Event} e
|
|
||||||
* @function module:SVGthis.savePreferences
|
|
||||||
* @returns {Promise<void>}
|
|
||||||
*/
|
|
||||||
async savePreferences (e) {
|
|
||||||
const {lang, bgcolor, bgurl, gridsnappingon, gridsnappingstep, gridcolor, showrulers, baseunit} = e.detail;
|
|
||||||
// Set background
|
|
||||||
this.setBackground(bgcolor, bgurl);
|
|
||||||
|
|
||||||
// set language
|
|
||||||
if (lang && lang !== this.configObj.pref('lang')) {
|
|
||||||
const {langParam, langData} = await this.putLocale(lang, this.goodLangs);
|
|
||||||
await this.setLang(langParam, langData);
|
|
||||||
}
|
|
||||||
|
|
||||||
// set grid setting
|
|
||||||
this.configObj.curConfig.gridSnapping = gridsnappingon;
|
|
||||||
this.configObj.curConfig.snappingStep = gridsnappingstep;
|
|
||||||
this.configObj.curConfig.gridColor = gridcolor;
|
|
||||||
this.configObj.curConfig.showRulers = showrulers;
|
|
||||||
|
|
||||||
$('#rulers').toggle(this.configObj.curConfig.showRulers);
|
|
||||||
if (this.configObj.curConfig.showRulers) { this.rulers.updateRulers(); }
|
|
||||||
this.configObj.curConfig.baseUnit = baseunit;
|
|
||||||
this.svgCanvas.setConfig(this.configObj.curConfig);
|
|
||||||
this.updateCanvas();
|
|
||||||
this.hidePreferences();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {Event} e
|
* @param {Event} e
|
||||||
* @returns {void} Resolves to `undefined`
|
* @returns {void} Resolves to `undefined`
|
||||||
|
|
|
||||||
|
|
@ -110,6 +110,7 @@ class EditorStartup {
|
||||||
this.bottomPanel.init();
|
this.bottomPanel.init();
|
||||||
this.topPanel.init();
|
this.topPanel.init();
|
||||||
this.layersPanel.init();
|
this.layersPanel.init();
|
||||||
|
this.mainMenu.init();
|
||||||
|
|
||||||
const {undoMgr} = this.svgCanvas;
|
const {undoMgr} = this.svgCanvas;
|
||||||
this.workarea = document.getElementById('workarea');
|
this.workarea = document.getElementById('workarea');
|
||||||
|
|
@ -317,79 +318,6 @@ class EditorStartup {
|
||||||
this.setPanning = (active) => {
|
this.setPanning = (active) => {
|
||||||
this.svgCanvas.spaceKey = keypan = active;
|
this.svgCanvas.spaceKey = keypan = active;
|
||||||
};
|
};
|
||||||
// TODO: main menu move to webcomponent. so no need now
|
|
||||||
/*
|
|
||||||
const button = $('#main_icon');
|
|
||||||
const overlay = $('#main_icon span');
|
|
||||||
const list = $('#main_menu');
|
|
||||||
|
|
||||||
let onButton = false;
|
|
||||||
let height = 0;
|
|
||||||
let jsHover = true;
|
|
||||||
let setClick = false;
|
|
||||||
|
|
||||||
$(window).mouseup(function (evt) {
|
|
||||||
if (!onButton) {
|
|
||||||
button.removeClass('buttondown');
|
|
||||||
// do not hide if it was the file input as that input needs to be visible
|
|
||||||
// for its change event to fire
|
|
||||||
if (evt.target.tagName !== 'INPUT') {
|
|
||||||
list.fadeOut(200);
|
|
||||||
} else if (!setClick) {
|
|
||||||
setClick = true;
|
|
||||||
$(evt.target).click(() => {
|
|
||||||
list.css('margin-left', '-9999px').show();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
onButton = false;
|
|
||||||
}).mousedown(function (evt) {
|
|
||||||
// $('.contextMenu').hide();
|
|
||||||
const islib = $(evt.target).closest('.contextMenu').length;
|
|
||||||
if (!islib) {
|
|
||||||
$('.contextMenu').fadeOut(250);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
overlay.bind('mousedown', () => {
|
|
||||||
if (!button.hasClass('buttondown')) {
|
|
||||||
// Margin must be reset in case it was changed before;
|
|
||||||
list.css('margin-left', 0).show();
|
|
||||||
if (!height) {
|
|
||||||
height = list.height();
|
|
||||||
}
|
|
||||||
// Using custom animation as slideDown has annoying 'bounce effect'
|
|
||||||
list.css('height', 0).animate({
|
|
||||||
height
|
|
||||||
}, 200);
|
|
||||||
onButton = true;
|
|
||||||
} else {
|
|
||||||
list.fadeOut(200);
|
|
||||||
}
|
|
||||||
button.toggleClass('buttondown buttonup');
|
|
||||||
}).hover(() => {
|
|
||||||
onButton = true;
|
|
||||||
}).mouseout(() => {
|
|
||||||
onButton = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
const listItems = $('#main_menu li');
|
|
||||||
|
|
||||||
// Check if JS method of hovering needs to be used (Webkit bug)
|
|
||||||
listItems.mouseover(function () {
|
|
||||||
jsHover = ($(this).css('background-color') === 'rgba(0, 0, 0, 0)');
|
|
||||||
|
|
||||||
listItems.unbind('mouseover');
|
|
||||||
if (jsHover) {
|
|
||||||
listItems.mouseover(() => {
|
|
||||||
this.style.backgroundColor = '#FFC';
|
|
||||||
}).mouseout((evt) => {
|
|
||||||
evt.currentTarget.style.backgroundColor = 'transparent';
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}); */
|
|
||||||
// Unfocus text input when this.workarea is mousedowned.
|
|
||||||
let inp;
|
let inp;
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
|
|
@ -455,51 +383,6 @@ class EditorStartup {
|
||||||
// Prevent browser from erroneously repopulating fields
|
// Prevent browser from erroneously repopulating fields
|
||||||
$('input,select').attr('autocomplete', 'off');
|
$('input,select').attr('autocomplete', 'off');
|
||||||
|
|
||||||
/**
|
|
||||||
* Associate all button actions as well as non-button keyboard shortcuts.
|
|
||||||
*/
|
|
||||||
|
|
||||||
$id('tool_clear').addEventListener('click', this.clickClear.bind(this));
|
|
||||||
$id('tool_open').addEventListener('click', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
this.clickOpen();
|
|
||||||
window.dispatchEvent(new CustomEvent('openImage'));
|
|
||||||
});
|
|
||||||
$id('tool_import').addEventListener('click', (e) => {
|
|
||||||
this.clickImport();
|
|
||||||
window.dispatchEvent(new CustomEvent('importImages'));
|
|
||||||
});
|
|
||||||
$id('tool_save').addEventListener('click', function (e) {
|
|
||||||
const $editorDialog = document.getElementById('se-svg-editor-dialog');
|
|
||||||
const editingsource = $editorDialog.getAttribute('dialog') === 'open';
|
|
||||||
if (editingsource) {
|
|
||||||
this.saveSourceEditor();
|
|
||||||
} else {
|
|
||||||
this.clickSave();
|
|
||||||
}
|
|
||||||
}.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));
|
|
||||||
$id('se-img-prop').addEventListener('change', function (e) {
|
|
||||||
if (e.detail.dialog === 'closed') {
|
|
||||||
this.hideDocProperties();
|
|
||||||
} else {
|
|
||||||
this.saveDocProperties(e);
|
|
||||||
}
|
|
||||||
}.bind(this));
|
|
||||||
$id('se-edit-prefs').addEventListener('change', function (e) {
|
|
||||||
if (e.detail.dialog === 'closed') {
|
|
||||||
this.hidePreferences();
|
|
||||||
} else {
|
|
||||||
this.savePreferences(e);
|
|
||||||
}
|
|
||||||
}.bind(this));
|
|
||||||
$id('se-svg-editor-dialog').addEventListener('change', function (e) {
|
$id('se-svg-editor-dialog').addEventListener('change', function (e) {
|
||||||
if (e?.detail?.copy === 'click') {
|
if (e?.detail?.copy === 'click') {
|
||||||
this.cancelOverlays(e);
|
this.cancelOverlays(e);
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,323 @@
|
||||||
|
/* globals $ */
|
||||||
|
import SvgCanvas from "../svgcanvas/svgcanvas.js";
|
||||||
|
const { $id } = SvgCanvas;
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
class MainMenu {
|
||||||
|
/**
|
||||||
|
* @param {PlainObject} editor svgedit handler
|
||||||
|
*/
|
||||||
|
constructor(editor) {
|
||||||
|
this.editor = editor;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @fires module:svgcanvas.SvgCanvas#event:ext_onNewDocument
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
async clickClear() {
|
||||||
|
const [x, y] = this.editor.configObj.curConfig.dimensions;
|
||||||
|
const ok = await seConfirm(this.editor.uiStrings.notification.QwantToClear);
|
||||||
|
if (ok === "Cancel") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.editor.leftPanel.clickSelect();
|
||||||
|
this.editor.svgCanvas.clear();
|
||||||
|
this.editor.svgCanvas.setResolution(x, y);
|
||||||
|
this.editor.updateCanvas(true);
|
||||||
|
this.editor.zoomImage();
|
||||||
|
this.editor.layersPanel.populateLayers();
|
||||||
|
this.editor.topPanel.updateContextPanel();
|
||||||
|
this.editor.svgCanvas.runExtensions("onNewDocument");
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* Save user preferences based on current values in the UI.
|
||||||
|
* @param {Event} e
|
||||||
|
* @function module:SVGthis.savePreferences
|
||||||
|
* @returns {Promise<void>}
|
||||||
|
*/
|
||||||
|
async savePreferences (e) {
|
||||||
|
const {lang, bgcolor, bgurl, gridsnappingon, gridsnappingstep, gridcolor, showrulers, baseunit} = e.detail;
|
||||||
|
// Set background
|
||||||
|
this.editor.setBackground(bgcolor, bgurl);
|
||||||
|
|
||||||
|
// set language
|
||||||
|
if (lang && lang !== this.configObj.pref('lang')) {
|
||||||
|
const {langParam, langData} = await this.editor.putLocale(lang, this.goodLangs);
|
||||||
|
await this.editor.svgCanvassetLang(langParam, langData);
|
||||||
|
}
|
||||||
|
|
||||||
|
// set grid setting
|
||||||
|
this.editor.configObj.curConfig.gridSnapping = gridsnappingon;
|
||||||
|
this.editor.configObj.curConfig.snappingStep = gridsnappingstep;
|
||||||
|
this.editor.configObj.curConfig.gridColor = gridcolor;
|
||||||
|
this.editor.configObj.curConfig.showRulers = showrulers;
|
||||||
|
|
||||||
|
$('#rulers').toggle(this.editor.configObj.curConfig.showRulers);
|
||||||
|
if (this.editor.configObj.curConfig.showRulers) { this.editor.rulers.updateRulers(); }
|
||||||
|
this.editor.configObj.curConfig.baseUnit = baseunit;
|
||||||
|
this.editor.svgCanvas.setConfig(this.configObj.curConfig);
|
||||||
|
this.editor.updateCanvas();
|
||||||
|
this.editor.hidePreferences();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
clickSave() {
|
||||||
|
// In the future, more options can be provided here
|
||||||
|
const saveOpts = {
|
||||||
|
images: this.editor.configObj.pref("img_save"),
|
||||||
|
round_digits: 6
|
||||||
|
};
|
||||||
|
this.editor.svgCanvas.save(saveOpts);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param e
|
||||||
|
* @returns {Promise<void>} Resolves to `undefined`
|
||||||
|
*/
|
||||||
|
async clickExport(e) {
|
||||||
|
if (e?.detail?.trigger !== "ok" || e?.detail?.imgType === undefined) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const imgType = e?.detail?.imgType;
|
||||||
|
const quality = e?.detail?.quality ? e?.detail?.quality / 100 : 1;
|
||||||
|
// Open placeholder window (prevents popup)
|
||||||
|
let exportWindowName;
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
const openExportWindow = () => {
|
||||||
|
const { loadingImage } = this.editor.uiStrings.notification;
|
||||||
|
if (this.editor.configObj.curConfig.exportWindowType === "new") {
|
||||||
|
this.editor.exportWindowCt++;
|
||||||
|
}
|
||||||
|
this.editor.exportWindowName =
|
||||||
|
this.editor.configObj.curConfig.canvasName + this.editor.exportWindowCt;
|
||||||
|
let popHTML, 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 (typeof URL !== "undefined" && URL.createObjectURL) {
|
||||||
|
const blob = new Blob([popHTML], { type: "text/html" });
|
||||||
|
popURL = URL.createObjectURL(blob);
|
||||||
|
} else {
|
||||||
|
popURL = "data:text/html;base64;charset=utf-8," + encode64(popHTML);
|
||||||
|
}
|
||||||
|
this.editor.loadingURL = popURL;
|
||||||
|
}
|
||||||
|
this.editor.exportWindow = window.open(popURL, this.editor.exportWindowName);
|
||||||
|
};
|
||||||
|
const chrome = isChrome();
|
||||||
|
if (imgType === "PDF") {
|
||||||
|
if (!this.editor.customExportPDF && !chrome) {
|
||||||
|
openExportWindow();
|
||||||
|
}
|
||||||
|
this.editor.svgCanvas.exportPDF(exportWindowName);
|
||||||
|
} else {
|
||||||
|
if (!this.editor.customExportImage) {
|
||||||
|
openExportWindow();
|
||||||
|
}
|
||||||
|
/* const results = */ await this.editor.svgCanvas.rasterExport(
|
||||||
|
imgType,
|
||||||
|
quality,
|
||||||
|
this.editor.exportWindowName
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* By default, this.editor.svgCanvas.open() is a no-op. It is up to an extension
|
||||||
|
* mechanism (opera widget, etc.) to call `setCustomHandlers()` which
|
||||||
|
* will make it do something.
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
clickOpen() {
|
||||||
|
this.editor.svgCanvas.open();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
// eslint-disable-next-line class-methods-use-this
|
||||||
|
clickImport() {
|
||||||
|
/* empty fn */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
showDocProperties() {
|
||||||
|
if (this.editor.docprops) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.editor.docprops = true;
|
||||||
|
const $imgDialog = document.getElementById("se-img-prop");
|
||||||
|
|
||||||
|
// update resolution option with actual resolution
|
||||||
|
const resolution = this.editor.svgCanvas.getResolution();
|
||||||
|
if (this.editor.configObj.curConfig.baseUnit !== "px") {
|
||||||
|
resolution.w =
|
||||||
|
convertUnit(resolution.w) + this.editor.configObj.curConfig.baseUnit;
|
||||||
|
resolution.h =
|
||||||
|
convertUnit(resolution.h) + this.editor.configObj.curConfig.baseUnit;
|
||||||
|
}
|
||||||
|
$imgDialog.setAttribute("save", this.editor.configObj.pref("img_save"));
|
||||||
|
$imgDialog.setAttribute("width", resolution.w);
|
||||||
|
$imgDialog.setAttribute("height", resolution.h);
|
||||||
|
$imgDialog.setAttribute("title", this.editor.svgCanvas.getDocumentTitle());
|
||||||
|
$imgDialog.setAttribute("dialog", "open");
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
showPreferences() {
|
||||||
|
if (this.editor.configObj.preferences) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.editor.configObj.preferences = true;
|
||||||
|
const $editDialog = document.getElementById("se-edit-prefs");
|
||||||
|
// $('#main_menu').hide();
|
||||||
|
// Update background color with current one
|
||||||
|
const canvasBg = this.editor.configObj.curPrefs.bkgd_color;
|
||||||
|
const url = this.editor.configObj.pref("bkgd_url");
|
||||||
|
if (url) {
|
||||||
|
$editDialog.setAttribute("bgurl", url);
|
||||||
|
}
|
||||||
|
$editDialog.setAttribute(
|
||||||
|
"gridsnappingon",
|
||||||
|
this.editor.configObj.curConfig.gridSnapping
|
||||||
|
);
|
||||||
|
$editDialog.setAttribute(
|
||||||
|
"gridsnappingstep",
|
||||||
|
this.editor.configObj.curConfig.snappingStep
|
||||||
|
);
|
||||||
|
$editDialog.setAttribute("gridcolor", this.editor.configObj.curConfig.gridColor);
|
||||||
|
$editDialog.setAttribute("canvasbg", canvasBg);
|
||||||
|
$editDialog.setAttribute("dialog", "open");
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
// eslint-disable-next-line class-methods-use-this
|
||||||
|
openHomePage() {
|
||||||
|
window.open(homePage, "_blank");
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @type {module}
|
||||||
|
*/
|
||||||
|
init() {
|
||||||
|
// add Top panel
|
||||||
|
const template = document.createElement("template");
|
||||||
|
template.innerHTML = `
|
||||||
|
<se-menu id="main_button" label="SVG-Edit" src="./images/logo.svg" alt="logo">
|
||||||
|
<!-- File-like buttons: New, Save, Source -->
|
||||||
|
<se-menu-item id="tool_clear" label="New Image" shortcut="N" src="./images/new.svg"></se-menu-item>
|
||||||
|
<se-menu-item id="tool_open" label="Open SVG" src="./images/open.svg"></se-menu-item>
|
||||||
|
<se-menu-item id="tool_save" label="Save Image" shortcut="S" src="./images/saveImg.svg"></se-menu-item>
|
||||||
|
<se-menu-item id="tool_import" label="Import Image" src="./images/importImg.svg"></se-menu-item>
|
||||||
|
<se-menu-item id="tool_export" label="Export" src="./images/export.svg"></se-menu-item>
|
||||||
|
<se-menu-item id="tool_imagelib" label="Image library" src="./images/library.svg"></se-menu-item>
|
||||||
|
<se-menu-item id="tool_docprops" label="Document Properties" shortcut="D" src="./images/docprop.svg">
|
||||||
|
</se-menu-item>
|
||||||
|
<se-menu-item id="tool_editor_prefs" label="Editor Preferences" src="./images/editPref.svg"></se-menu-item>
|
||||||
|
<se-menu-item id="tool_editor_homepage" label="SVG-Edit Home Page" src="./images/logo.svg">
|
||||||
|
</se-menu-item>
|
||||||
|
</se-menu>
|
||||||
|
`;
|
||||||
|
this.editor.$svgEditor.append(template.content.cloneNode(true));
|
||||||
|
|
||||||
|
// register action to main menu entries
|
||||||
|
/**
|
||||||
|
* Associate all button actions as well as non-button keyboard shortcuts.
|
||||||
|
*/
|
||||||
|
|
||||||
|
$id("tool_clear").addEventListener("click", this.clickClear.bind(this));
|
||||||
|
$id("tool_open").addEventListener("click", e => {
|
||||||
|
e.preventDefault();
|
||||||
|
this.clickOpen();
|
||||||
|
window.dispatchEvent(new CustomEvent("openImage"));
|
||||||
|
});
|
||||||
|
$id("tool_import").addEventListener("click", e => {
|
||||||
|
this.clickImport();
|
||||||
|
window.dispatchEvent(new CustomEvent("importImages"));
|
||||||
|
});
|
||||||
|
$id("tool_save").addEventListener(
|
||||||
|
"click",
|
||||||
|
function(e) {
|
||||||
|
const $editorDialog = document.getElementById("se-svg-editor-dialog");
|
||||||
|
const editingsource = $editorDialog.getAttribute("dialog") === "open";
|
||||||
|
if (editingsource) {
|
||||||
|
this.saveSourceEditor();
|
||||||
|
} else {
|
||||||
|
this.clickSave();
|
||||||
|
}
|
||||||
|
}.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)
|
||||||
|
);
|
||||||
|
$id("se-img-prop").addEventListener(
|
||||||
|
"change",
|
||||||
|
function(e) {
|
||||||
|
if (e.detail.dialog === "closed") {
|
||||||
|
this.hideDocProperties();
|
||||||
|
} else {
|
||||||
|
this.saveDocProperties(e);
|
||||||
|
}
|
||||||
|
}.bind(this)
|
||||||
|
);
|
||||||
|
$id("se-edit-prefs").addEventListener(
|
||||||
|
"change",
|
||||||
|
function(e) {
|
||||||
|
if (e.detail.dialog === "closed") {
|
||||||
|
this.hidePreferences();
|
||||||
|
} else {
|
||||||
|
this.savePreferences(e);
|
||||||
|
}
|
||||||
|
}.bind(this)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MainMenu;
|
||||||
|
|
@ -29,21 +29,6 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="svg_editor" role="main">
|
<div id="svg_editor" role="main">
|
||||||
<se-menu id="main_button" label="SVG-Edit" src="./images/logo.svg" alt="logo">
|
|
||||||
<!-- File-like buttons: New, Save, Source -->
|
|
||||||
<se-menu-item id="tool_clear" label="New Image" shortcut="N" src="./images/new.svg"></se-menu-item>
|
|
||||||
<se-menu-item id="tool_open" label="Open SVG" src="./images/open.svg"></se-menu-item>
|
|
||||||
<se-menu-item id="tool_save" label="Save Image" shortcut="S" src="./images/saveImg.svg"></se-menu-item>
|
|
||||||
<se-menu-item id="tool_import" label="Import Image" src="./images/importImg.svg"></se-menu-item>
|
|
||||||
<se-menu-item id="tool_export" label="Export" src="./images/export.svg"></se-menu-item>
|
|
||||||
<se-menu-item id="tool_imagelib" label="Image library" src="./images/library.svg"></se-menu-item>
|
|
||||||
<se-menu-item id="tool_docprops" label="Document Properties" shortcut="D" src="./images/docprop.svg">
|
|
||||||
</se-menu-item>
|
|
||||||
<se-menu-item id="tool_editor_prefs" label="Editor Preferences" src="./images/editPref.svg"></se-menu-item>
|
|
||||||
<se-menu-item id="tool_editor_homepage" label="SVG-Edit Home Page" src="./images/logo.svg">
|
|
||||||
</se-menu-item>
|
|
||||||
</se-menu>
|
|
||||||
<div id="option_lists" class="dropdown"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -616,48 +616,10 @@ input[type=text] {
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*–––––––––––––––––––––––––––––––––––––*/
|
|
||||||
|
|
||||||
#option_lists ul {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
height: auto;
|
|
||||||
z-index: 3;
|
|
||||||
margin: -10px;
|
|
||||||
list-style: none;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#option_lists .optcols2 {
|
|
||||||
width: 70px;
|
|
||||||
margin-left: -15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#option_lists .optcols3 {
|
|
||||||
width: 90px;
|
|
||||||
margin-left: -31px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#option_lists .optcols4 {
|
|
||||||
width: 130px;
|
|
||||||
margin-left: -44px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#option_lists ul[class^=optcols] li {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul li.current {
|
ul li.current {
|
||||||
background-color: #F4E284;
|
background-color: #F4E284;
|
||||||
}
|
}
|
||||||
|
|
||||||
#option_lists ul li {
|
|
||||||
margin: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
-moz-border-radius: 0;
|
|
||||||
-webkit-border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#copyright {
|
#copyright {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding-right: .3em;
|
padding-right: .3em;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue