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

Merge pull request #670 from SVG-Edit/fix-issue-#669 

Fix issue #669
master
JFH 2021-12-01 11:27:59 +01:00 committed by GitHub
parent 7638bb7cea a8be016400
commit 9a04258991
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 1184 additions and 508 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1479
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

12
package.json
View File

@ -69,12 +69,12 @@
],
"dependencies": {
"@babel/polyfill": "7.12.1",
"browser-fs-access": "0.21.1",
"browser-fs-access": "0.23.0",
"canvg": "3.0.9",
"core-js": "3.19.1",
"core-js": "3.19.2",
"elix": "15.0.1",
"html2canvas": "1.3.3",
"i18next": "21.5.3",
"i18next": "21.5.4",
"jspdf": "2.4.0",
"pathseg": "1.2.1",
"regenerator-runtime": "0.13.9",
@ -86,7 +86,7 @@
"@babel/preset-env": "7.16.4",
"@babel/register": "7.16.0",
"@babel/runtime-corejs3": "7.16.3",
"@cypress/code-coverage": "3.9.11",
"@cypress/code-coverage": "3.9.12",
"@cypress/fiddle": "1.19.2",
"@fintechstudios/eslint-plugin-chai-as-promised": "3.1.0",
"@rollup/plugin-babel": "5.3.0",
@ -100,7 +100,7 @@
"@web/dev-server-rollup": "0.3.13",
"babel-plugin-transform-object-rest-spread": "7.0.0-beta.3",
"copyfiles": "2.4.1",
"core-js-bundle": "3.19.1",
"core-js-bundle": "3.19.2",
"cp-cli": "2.0.0",
"cypress": "9.1.0",
"cypress-multi-reporters": "1.5.0",
@ -135,7 +135,7 @@
"remark-cli": "10.0.1",
"remark-lint-ordered-list-marker-value": "3.1.0",
"rimraf": "3.0.2",
"rollup": "2.60.1",
"rollup": "2.60.2",
"rollup-plugin-copy": "3.4.0",
"rollup-plugin-filesize": "9.1.1",
"rollup-plugin-node-polyfills": "0.2.1",

86
src/editor/EditorStartup.js
View File

@ -580,96 +580,10 @@ class EditorStartup {
// 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
// get the text contents of the file and send it to the canvas
if (window.FileReader) {
/**
* @param {Event} e
* @returns {void}
*/
const editorObj = this;
const importImage = function (e) {
$id('se-prompt-dialog').title = editorObj.i18next.t('notification.loadingImage');
e.stopPropagation();
e.preventDefault();
const file = (e.type === 'drop') ? e.dataTransfer.files[0] : this.files[0];
if (!file) {
$id('se-prompt-dialog').setAttribute('close', true);
return;
}
if (!file.type.includes('image')) {
return;
}
// Detected an image
// svg handling
let reader;
if (file.type.includes('svg')) {
reader = new FileReader();
reader.onloadend = function (ev) {
const newElement = editorObj.svgCanvas.importSvgString(ev.target.result, true);
editorObj.svgCanvas.ungroupSelectedElement();
editorObj.svgCanvas.ungroupSelectedElement();
editorObj.svgCanvas.groupSelectedElements();
editorObj.svgCanvas.alignSelectedElements('m', 'page');
editorObj.svgCanvas.alignSelectedElements('c', 'page');
// highlight imported element, otherwise we get strange empty selectbox
editorObj.svgCanvas.selectOnly([ newElement ]);
$id('se-prompt-dialog').setAttribute('close', true);
};
reader.readAsText(file);
} else {
// bitmap handling
reader = new FileReader();
reader.onloadend = function ({ target: { result } }) {
/**
* Insert the new image until we know its dimensions.
* @param {Float} imageWidth
* @param {Float} imageHeight
* @returns {void}
*/
const insertNewImage = function (imageWidth, imageHeight) {
const newImage = editorObj.svgCanvas.addSVGElementFromJson({
element: 'image',
attr: {
x: 0,
y: 0,
width: imageWidth,
height: imageHeight,
id: editorObj.svgCanvas.getNextId(),
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;
};
reader.readAsDataURL(file);
}
};
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);
// Load extensions

13
src/editor/MainMenu.js
View File

@ -195,14 +195,6 @@ class MainMenu {
}
}
/**
*
* @returns {void}
*/
clickImport() {
/* empty fn */
}
/**
*
* @returns {void}
@ -277,7 +269,6 @@ class MainMenu {
const template = document.createElement("template");
template.innerHTML = `
<se-menu id="main_button" label="SVG-Edit" src="logo.svg" alt="logo">
<se-menu-item id="tool_import" label="tools.import_doc" src="importImg.svg"></se-menu-item>
<se-menu-item id="tool_export" label="tools.export_img" src="export.svg"></se-menu-item>
<se-menu-item id="tool_docprops" label="tools.docprops" shortcut="D" src="docprop.svg"></se-menu-item>
<se-menu-item id="tool_editor_prefs" label="config.editor_prefs" src="editPref.svg"></se-menu-item>
@ -289,10 +280,6 @@ class MainMenu {
/**
* Associate all button actions as well as non-button keyboard shortcuts.
*/
$id("tool_import").addEventListener("click", () => {
this.clickImport();
window.dispatchEvent(new CustomEvent("importImages"));
});
$id("tool_export").addEventListener("click", function() {
document
.getElementById("se-export-dialog")

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

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

85
src/editor/extensions/ext-opensave/ext-opensave.js
View File

@ -40,7 +40,88 @@ export default {
const { svgCanvas } = svgEditor;
const { $id } = svgCanvas;
await loadExtensionTranslation(svgEditor);
/**
* @param {Event} e
* @returns {void}
*/
const importImage = (e) => {
$id('se-prompt-dialog').title = this.i18next.t('notification.loadingImage');
$id('se-prompt-dialog').setAttribute('close', false);
e.stopPropagation();
e.preventDefault();
const file = (e.type === 'drop') ? e.dataTransfer.files[0] : e.currentTarget.files[0];
if (!file) {
$id('se-prompt-dialog').setAttribute('close', true);
return;
}
if (!file.type.includes('image')) {
return;
}
// Detected an image
// svg handling
let reader;
if (file.type.includes('svg')) {
reader = new FileReader();
reader.onloadend = (ev) => {
const newElement = this.svgCanvas.importSvgString(ev.target.result, true);
this.svgCanvas.alignSelectedElements('m', 'page');
this.svgCanvas.alignSelectedElements('c', 'page');
// highlight imported element, otherwise we get strange empty selectbox
this.svgCanvas.selectOnly([ newElement ]);
$id('se-prompt-dialog').setAttribute('close', true);
};
reader.readAsText(file);
} else {
// bitmap handling
reader = new FileReader();
reader.onloadend = function ({ target: { result } }) {
/**
* Insert the new image until we know its dimensions.
* @param {Float} imageWidth
* @param {Float} imageHeight
* @returns {void}
*/
const insertNewImage = (imageWidth, imageHeight) => {
const newImage = this.svgCanvas.addSVGElementFromJson({
element: 'image',
attr: {
x: 0,
y: 0,
width: imageWidth,
height: imageHeight,
id: this.svgCanvas.getNextId(),
style: 'pointer-events:inherit'
}
});
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);
};
// 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);
}
};
// create an input with type file to open the filesystem dialog
const imgImport = document.createElement('input');
imgImport.type="file";
imgImport.addEventListener('change', importImage);
// dropping a svg file will import it in the svg as well
this.workarea.addEventListener('drop', importImage);
/**
* @fires module:svgcanvas.SvgCanvas#event:ext_onNewDocument
* @returns {void}
@ -166,11 +247,15 @@ export default {
svgCanvas.insertChildAtIndex($id('main_button'), saveButtonTemplate, 2);
const saveAsButtonTemplate = `<se-menu-item id="tool_save_as" label="opensave.save_as_doc" src="saveImg.svg"></se-menu-item>`;
svgCanvas.insertChildAtIndex($id('main_button'), saveAsButtonTemplate, 3);
const importButtonTemplate = `<se-menu-item id="tool_import" label="tools.import_doc" src="importImg.svg"></se-menu-item>`;
svgCanvas.insertChildAtIndex($id('main_button'), importButtonTemplate, 4);
// handler
$id("tool_clear").addEventListener("click", clickClear.bind(this));
$id("tool_open").addEventListener("click", clickOpen.bind(this));
$id("tool_save").addEventListener("click", clickSave.bind(this, "save"));
$id("tool_save_as").addEventListener("click", clickSave.bind(this, "saveas"));
$id("tool_import").addEventListener("click", () => imgImport.click());
}
};
}