commit
25b5a2d619
|
@ -455,7 +455,7 @@ class EditorStartup {
|
||||||
});
|
});
|
||||||
$id('tool_import').addEventListener('click', (e) => {
|
$id('tool_import').addEventListener('click', (e) => {
|
||||||
this.clickImport();
|
this.clickImport();
|
||||||
window.dispatchEvent(new CustomEvent('importImage'));
|
window.dispatchEvent(new CustomEvent('importImages'));
|
||||||
});
|
});
|
||||||
$id('tool_save').addEventListener('click', function (e) {
|
$id('tool_save').addEventListener('click', function (e) {
|
||||||
const $editorDialog = document.getElementById('se-svg-editor-dialog');
|
const $editorDialog = document.getElementById('se-svg-editor-dialog');
|
||||||
|
@ -617,14 +617,15 @@ class EditorStartup {
|
||||||
* @param {Event} e
|
* @param {Event} e
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
|
let editorObj = this;
|
||||||
const importImage = function (e) {
|
const importImage = function (e) {
|
||||||
$.process_cancel(this.uiStrings.notification.loadingImage);
|
document.getElementById('se-prompt-dialog').title = editorObj.uiStrings.notification.loadingImage;
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
$('#main_menu').hide();
|
$('#main_menu').hide();
|
||||||
const file = (e.type === 'drop') ? e.dataTransfer.files[0] : this.files[0];
|
const file = (e.type === 'drop') ? e.dataTransfer.files[0] : this.files[0];
|
||||||
if (!file) {
|
if (!file) {
|
||||||
$('#dialog_box').hide();
|
document.getElementById('se-prompt-dialog').setAttribute('close', true);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -637,15 +638,15 @@ class EditorStartup {
|
||||||
if (file.type.includes('svg')) {
|
if (file.type.includes('svg')) {
|
||||||
reader = new FileReader();
|
reader = new FileReader();
|
||||||
reader.onloadend = function (ev) {
|
reader.onloadend = function (ev) {
|
||||||
const newElement = this.svgCanvas.importSvgString(ev.target.result, true);
|
const newElement = editorObj.svgCanvas.importSvgString(ev.target.result, true);
|
||||||
this.svgCanvas.ungroupSelectedElement();
|
editorObj.svgCanvas.ungroupSelectedElement();
|
||||||
this.svgCanvas.ungroupSelectedElement();
|
editorObj.svgCanvas.ungroupSelectedElement();
|
||||||
this.svgCanvas.groupSelectedElements();
|
editorObj.svgCanvas.groupSelectedElements();
|
||||||
this.svgCanvas.alignSelectedElements('m', 'page');
|
editorObj.svgCanvas.alignSelectedElements('m', 'page');
|
||||||
this.svgCanvas.alignSelectedElements('c', 'page');
|
editorObj.svgCanvas.alignSelectedElements('c', 'page');
|
||||||
// highlight imported element, otherwise we get strange empty selectbox
|
// highlight imported element, otherwise we get strange empty selectbox
|
||||||
this.svgCanvas.selectOnly([newElement]);
|
editorObj.svgCanvas.selectOnly([newElement]);
|
||||||
$('#dialog_box').hide();
|
document.getElementById('se-prompt-dialog').setAttribute('close', true);
|
||||||
};
|
};
|
||||||
reader.readAsText(file);
|
reader.readAsText(file);
|
||||||
} else {
|
} else {
|
||||||
|
@ -659,23 +660,23 @@ class EditorStartup {
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
const insertNewImage = function (imageWidth, imageHeight) {
|
const insertNewImage = function (imageWidth, imageHeight) {
|
||||||
const newImage = this.svgCanvas.addSVGElementFromJson({
|
const newImage = editorObj.svgCanvas.addSVGElementFromJson({
|
||||||
element: 'image',
|
element: 'image',
|
||||||
attr: {
|
attr: {
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
width: imageWidth,
|
width: imageWidth,
|
||||||
height: imageHeight,
|
height: imageHeight,
|
||||||
id: this.svgCanvas.getNextId(),
|
id: editorObj.svgCanvas.getNextId(),
|
||||||
style: 'pointer-events:inherit'
|
style: 'pointer-events:inherit'
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
this.svgCanvas.setHref(newImage, result);
|
editorObj.svgCanvas.setHref(newImage, result);
|
||||||
this.svgCanvas.selectOnly([newImage]);
|
editorObj.svgCanvas.selectOnly([newImage]);
|
||||||
this.svgCanvas.alignSelectedElements('m', 'page');
|
editorObj.svgCanvas.alignSelectedElements('m', 'page');
|
||||||
this.svgCanvas.alignSelectedElements('c', 'page');
|
editorObj.svgCanvas.alignSelectedElements('c', 'page');
|
||||||
this.topPanelHandlers.updateContextPanel();
|
editorObj.topPanelHandlers.updateContextPanel();
|
||||||
$('#dialog_box').hide();
|
document.getElementById('se-prompt-dialog').setAttribute('close', true);
|
||||||
};
|
};
|
||||||
// create dummy img so we know the default dimensions
|
// create dummy img so we know the default dimensions
|
||||||
let imgWidth = 100;
|
let imgWidth = 100;
|
||||||
|
@ -697,6 +698,8 @@ class EditorStartup {
|
||||||
this.workarea[0].addEventListener('dragover', this.onDragOver);
|
this.workarea[0].addEventListener('dragover', this.onDragOver);
|
||||||
this.workarea[0].addEventListener('dragleave', this.onDragLeave);
|
this.workarea[0].addEventListener('dragleave', this.onDragLeave);
|
||||||
this.workarea[0].addEventListener('drop', importImage);
|
this.workarea[0].addEventListener('drop', importImage);
|
||||||
|
const imgImport = $('<input type="file">').change(importImage);
|
||||||
|
$(window).on('importImages', () => imgImport.click());
|
||||||
}
|
}
|
||||||
|
|
||||||
this.updateCanvas(true);
|
this.updateCanvas(true);
|
||||||
|
|
|
@ -0,0 +1,69 @@
|
||||||
|
/* eslint-disable node/no-unpublished-import */
|
||||||
|
import PlainAlertDialog from 'elix/src/plain/PlainAlertDialog.js';
|
||||||
|
import {template} from 'elix/src/base/internal.js';
|
||||||
|
import {fragmentFrom} from 'elix/src/core/htmlLiterals.js';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @class SePlainAlertDialog
|
||||||
|
*/
|
||||||
|
export default class SePlainAlertDialog extends PlainAlertDialog {
|
||||||
|
/**
|
||||||
|
* @function get
|
||||||
|
* @returns {PlainObject}
|
||||||
|
*/
|
||||||
|
get [template] () {
|
||||||
|
const result = super[template];
|
||||||
|
// Replace the default slot with a new default slot and a button container.
|
||||||
|
const defaultSlot = result.content.querySelector('#frameContent');
|
||||||
|
if (defaultSlot) {
|
||||||
|
defaultSlot.replaceWith(fragmentFrom.html`
|
||||||
|
<div id="alertDialogContent">
|
||||||
|
<div id="se-content-alert">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
<div id="choiceButtonContainer" part="choice-button-container"></div>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
result.content.append(
|
||||||
|
fragmentFrom.html`
|
||||||
|
<style>
|
||||||
|
[part~="frame"] {
|
||||||
|
padding: 1em;
|
||||||
|
background: #CCC;
|
||||||
|
width: 300px;
|
||||||
|
border: 1px outset #777;
|
||||||
|
font-size: 0.8em;
|
||||||
|
font-family: Verdana,Helvetica,sans-serif;
|
||||||
|
border-radius: 5px;
|
||||||
|
-moz-border-radius: 5px;
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
[part~="choice-button-container"] {
|
||||||
|
margin-top: 1em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
[part~="choice-button"]:not(:first-child) {
|
||||||
|
margin-left: 0.5em;
|
||||||
|
}
|
||||||
|
#se-content-alert{
|
||||||
|
height: 95px;
|
||||||
|
background: #DDD;
|
||||||
|
overflow: auto;
|
||||||
|
text-align: left;
|
||||||
|
border: 1px solid #B0B0B0;
|
||||||
|
padding: 1em;
|
||||||
|
border-radius: 5px;
|
||||||
|
-moz-border-radius: 5px;
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define('se-elix-alert-dialog', SePlainAlertDialog);
|
|
@ -1,8 +1,7 @@
|
||||||
// eslint-disable-next-line node/no-unpublished-import
|
import SePlainAlertDialog from './SePlainAlertDialog.js';
|
||||||
import AlertDialog from 'elix/define/AlertDialog.js';
|
|
||||||
|
|
||||||
const dialog = new AlertDialog();
|
|
||||||
const seAlert = (text) => {
|
const seAlert = (text) => {
|
||||||
|
const dialog = new SePlainAlertDialog();
|
||||||
dialog.textContent = text;
|
dialog.textContent = text;
|
||||||
dialog.choices = ['Ok'];
|
dialog.choices = ['Ok'];
|
||||||
dialog.open();
|
dialog.open();
|
||||||
|
|
|
@ -1,8 +1,7 @@
|
||||||
// eslint-disable-next-line node/no-unpublished-import
|
import SePlainAlertDialog from './SePlainAlertDialog.js';
|
||||||
import AlertDialog from 'elix/define/AlertDialog.js';
|
|
||||||
|
|
||||||
const seConfirm = async (text, choices) => {
|
const seConfirm = async (text, choices) => {
|
||||||
const dialog = new AlertDialog();
|
const dialog = new SePlainAlertDialog();
|
||||||
dialog.textContent = text;
|
dialog.textContent = text;
|
||||||
dialog.choices = (choices === undefined) ? ['Ok', 'Cancel'] : choices;
|
dialog.choices = (choices === undefined) ? ['Ok', 'Cancel'] : choices;
|
||||||
dialog.open();
|
dialog.open();
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
// eslint-disable-next-line node/no-unpublished-import
|
import SePlainAlertDialog from './SePlainAlertDialog.js';
|
||||||
import AlertDialog from 'elix/define/AlertDialog.js';
|
|
||||||
/**
|
/**
|
||||||
* @class SePromptDialog
|
* @class SePromptDialog
|
||||||
*/
|
*/
|
||||||
|
@ -11,7 +10,7 @@ export class SePromptDialog extends HTMLElement {
|
||||||
super();
|
super();
|
||||||
// create the shadowDom and insert the template
|
// create the shadowDom and insert the template
|
||||||
this._shadowRoot = this.attachShadow({mode: 'open'});
|
this._shadowRoot = this.attachShadow({mode: 'open'});
|
||||||
this.dialog = new AlertDialog();
|
this.dialog = new SePlainAlertDialog();
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* @function observedAttributes
|
* @function observedAttributes
|
||||||
|
|
|
@ -1,8 +1,7 @@
|
||||||
// eslint-disable-next-line node/no-unpublished-import
|
import SePlainAlertDialog from './SePlainAlertDialog.js';
|
||||||
import AlertDialog from 'elix/define/AlertDialog.js';
|
|
||||||
|
|
||||||
const dialog = new AlertDialog();
|
|
||||||
const seSelect = async (text, choices) => {
|
const seSelect = async (text, choices) => {
|
||||||
|
const dialog = new SePlainAlertDialog();
|
||||||
dialog.textContent = text;
|
dialog.textContent = text;
|
||||||
dialog.choices = choices;
|
dialog.choices = choices;
|
||||||
dialog.open();
|
dialog.open();
|
||||||
|
|
|
@ -1250,7 +1250,7 @@ class Editor extends EditorStartup {
|
||||||
* @param {Event} e
|
* @param {Event} e
|
||||||
* @returns {void} Resolves to `undefined`
|
* @returns {void} Resolves to `undefined`
|
||||||
*/
|
*/
|
||||||
saveSourceEditor (e) {
|
async saveSourceEditor (e) {
|
||||||
const $editorDialog = document.getElementById('se-svg-editor-dialog');
|
const $editorDialog = document.getElementById('se-svg-editor-dialog');
|
||||||
if ($editorDialog.getAttribute('dialog') !== 'open') return;
|
if ($editorDialog.getAttribute('dialog') !== 'open') return;
|
||||||
const saveChanges = () => {
|
const saveChanges = () => {
|
||||||
|
@ -1262,8 +1262,8 @@ class Editor extends EditorStartup {
|
||||||
};
|
};
|
||||||
|
|
||||||
if (!this.svgCanvas.setSvgString(e.detail.value)) {
|
if (!this.svgCanvas.setSvgString(e.detail.value)) {
|
||||||
const ok = seConfirm(this.uiStrings.notification.QerrorsRevertToSource);
|
const ok = await seConfirm(this.uiStrings.notification.QerrorsRevertToSource);
|
||||||
if (!ok) {
|
if (ok === false || ok === 'Cancel') {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
saveChanges();
|
saveChanges();
|
||||||
|
|
Loading…
Reference in New Issue