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

fix issue #669

master
JFH 2021-12-01 01:22:09 +01:00
parent 7638bb7cea
commit edcdd3429e
3 changed files with 84 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
src/editor/EditorStartup.js
View File

@ -580,96 +580,97 @@ class EditorStartup {
// if browser has HTML5 File API support, then we will show the open menu item // if browser has HTML5 File API support, then we will show the open menu item
// and provide a file input to click. When that change event fires, it will // and provide a file input to click. When that change event fires, it will
// get the text contents of the file and send it to the canvas // get the text contents of the file and send it to the canvas
if (window.FileReader) {
/** /**
* @param {Event} e * @param {Event} e
* @returns {void} * @returns {void}
*/ */
const editorObj = this; const importImage = (e) => {
const importImage = function (e) { $id('se-prompt-dialog').title = this.i18next.t('notification.loadingImage');
$id('se-prompt-dialog').title = editorObj.i18next.t('notification.loadingImage'); $id('se-prompt-dialog').setAttribute('close', false);
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
const file = (e.type === 'drop') ? e.dataTransfer.files[0] : this.files[0]; const file = (e.type === 'drop') ? e.dataTransfer.files[0] : e.currentTarget.files[0];
if (!file) { if (!file) {
$id('se-prompt-dialog').setAttribute('close', true); $id('se-prompt-dialog').setAttribute('close', true);
return; return;
} }
if (!file.type.includes('image')) { if (!file.type.includes('image')) {
return; return;
} }
// Detected an image // Detected an image
// svg handling // svg handling
let reader; let reader;
if (file.type.includes('svg')) { if (file.type.includes('svg')) {
reader = new FileReader(); reader = new FileReader();
reader.onloadend = function (ev) { reader.onloadend = (ev) => {
const newElement = editorObj.svgCanvas.importSvgString(ev.target.result, true); const newElement = this.svgCanvas.importSvgString(ev.target.result, true);
editorObj.svgCanvas.ungroupSelectedElement(); this.svgCanvas.alignSelectedElements('m', 'page');
editorObj.svgCanvas.ungroupSelectedElement(); this.svgCanvas.alignSelectedElements('c', 'page');
editorObj.svgCanvas.groupSelectedElements(); // highlight imported element, otherwise we get strange empty selectbox
editorObj.svgCanvas.alignSelectedElements('m', 'page'); this.svgCanvas.selectOnly([ newElement ]);
editorObj.svgCanvas.alignSelectedElements('c', 'page'); $id('se-prompt-dialog').setAttribute('close', true);
// highlight imported element, otherwise we get strange empty selectbox };
editorObj.svgCanvas.selectOnly([ newElement ]); reader.readAsText(file);
$id('se-prompt-dialog').setAttribute('close', true); } else {
};
reader.readAsText(file);
} else {
// bitmap handling // bitmap handling
reader = new FileReader(); reader = new FileReader();
reader.onloadend = function ({ target: { result } }) { reader.onloadend = function ({ target: { result } }) {
/** /**
* Insert the new image until we know its dimensions. * Insert the new image until we know its dimensions.
* @param {Float} imageWidth * @param {Float} imageWidth
* @param {Float} imageHeight * @param {Float} imageHeight
* @returns {void} * @returns {void}
*/ */
const insertNewImage = function (imageWidth, imageHeight) { const insertNewImage = (imageWidth, imageHeight) => {
const newImage = editorObj.svgCanvas.addSVGElementFromJson({ const newImage = this.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: editorObj.svgCanvas.getNextId(), id: this.svgCanvas.getNextId(),
style: 'pointer-events:inherit' style: 'pointer-events:inherit'
} }
});
editorObj.svgCanvas.setHref(newImage, result);
editorObj.svgCanvas.selectOnly([ newImage ]);
editorObj.svgCanvas.alignSelectedElements('m', 'page');
editorObj.svgCanvas.alignSelectedElements('c', 'page');
editorObj.topPanel.updateContextPanel();
$id('se-prompt-dialog').setAttribute('close', true);
};
// create dummy img so we know the default dimensions
let imgWidth = 100;
let imgHeight = 100;
const img = new Image();
img.style.opacity = 0;
img.addEventListener('load', () => {
imgWidth = img.offsetWidth || img.naturalWidth || img.width;
imgHeight = img.offsetHeight || img.naturalHeight || img.height;
insertNewImage(imgWidth, imgHeight);
}); });
img.src = result; this.svgCanvas.setHref(newImage, result);
this.svgCanvas.selectOnly([ newImage ]);
this.svgCanvas.alignSelectedElements('m', 'page');
this.svgCanvas.alignSelectedElements('c', 'page');
this.topPanel.updateContextPanel();
$id('se-prompt-dialog').setAttribute('close', true);
}; };
reader.readAsDataURL(file); // create dummy img so we know the default dimensions
} let imgWidth = 100;
}; let imgHeight = 100;
const img = new Image();
img.style.opacity = 0;
img.addEventListener('load', () => {
imgWidth = img.offsetWidth || img.naturalWidth || img.width;
imgHeight = img.offsetHeight || img.naturalHeight || img.height;
insertNewImage(imgWidth, imgHeight);
});
img.src = result;
};
reader.readAsDataURL(file);
}
};
this.workarea.addEventListener('dragenter', this.onDragEnter);
this.workarea.addEventListener('dragover', this.onDragOver);
this.workarea.addEventListener('dragleave', this.onDragLeave);
// create an input with type file to open the filesystem dialog
const imgImport = document.createElement('input');
imgImport.type="file";
imgImport.addEventListener('change', importImage);
// the importImages event will activate the input field
window.addEventListener('importImages', () => imgImport.click());
// dropping a svg file will import it in the svg as well
this.workarea.addEventListener('drop', importImage);
this.workarea.addEventListener('dragenter', this.onDragEnter);
this.workarea.addEventListener('dragover', this.onDragOver);
this.workarea.addEventListener('dragleave', this.onDragLeave);
this.workarea.addEventListener('drop', importImage);
const imgImport = document.createElement('input');
imgImport.type="file";
imgImport.addEventListener('change', importImage);
window.addEventListener('importImages', () => imgImport.click());
}
this.updateCanvas(true); this.updateCanvas(true);
// Load extensions // Load extensions

9
src/editor/MainMenu.js
View File

@ -195,14 +195,6 @@ class MainMenu {
} }
} }
/**
*
* @returns {void}
*/
clickImport() {
/* empty fn */
}
/** /**
* *
* @returns {void} * @returns {void}
@ -290,7 +282,6 @@ class MainMenu {
* Associate all button actions as well as non-button keyboard shortcuts. * Associate all button actions as well as non-button keyboard shortcuts.
*/ */
$id("tool_import").addEventListener("click", () => { $id("tool_import").addEventListener("click", () => {
this.clickImport();
window.dispatchEvent(new CustomEvent("importImages")); window.dispatchEvent(new CustomEvent("importImages"));
}); });
$id("tool_export").addEventListener("click", function() { $id("tool_export").addEventListener("click", function() {

9
src/editor/dialogs/sePromptDialog.js
View File

@ -39,6 +39,8 @@ export class SePromptDialog extends HTMLElement {
case 'close': case 'close':
if (this.dialog.opened) { if (this.dialog.opened) {
this.dialog.close(); this.dialog.close();
} else {
this.dialog.open();
} }
break; break;
default: default:
@ -74,7 +76,12 @@ export class SePromptDialog extends HTMLElement {
* @returns {void} * @returns {void}
*/ */
set close (value) { set close (value) {
this.setAttribute('close', value); // boolean value => existence = true
if (value) {
this.setAttribute('close', 'true');
} else {
this.removeAttribute('close');
}
} }
} }