fix(chore): make svgedit less intrusive by adding components in its div instead of document.body.
parent
ee6bda3c5c
commit
b048afb72e
|
@ -74,34 +74,34 @@ class EditorStartup {
|
|||
this.$svgEditor.style.visibility = 'hidden';
|
||||
try {
|
||||
// add editor components to the DOM
|
||||
document.body.append(editorTemplate.content.cloneNode(true));
|
||||
this.$svgEditor.append(editorTemplate.content.cloneNode(true));
|
||||
// Image props dialog added to DOM
|
||||
const newSeImgPropDialog = document.createElement('se-img-prop-dialog');
|
||||
newSeImgPropDialog.setAttribute('id', 'se-img-prop');
|
||||
document.body.append(newSeImgPropDialog);
|
||||
this.$svgEditor.append(newSeImgPropDialog);
|
||||
newSeImgPropDialog.init(this.i18next);
|
||||
// editor prefences dialoag added to DOM
|
||||
const newSeEditPrefsDialog = document.createElement('se-edit-prefs-dialog');
|
||||
newSeEditPrefsDialog.setAttribute('id', 'se-edit-prefs');
|
||||
document.body.append(newSeEditPrefsDialog);
|
||||
this.$svgEditor.append(newSeEditPrefsDialog);
|
||||
newSeEditPrefsDialog.init(this.i18next);
|
||||
// canvas menu added to DOM
|
||||
const dialogBox = document.createElement('se-cmenu_canvas-dialog');
|
||||
dialogBox.setAttribute('id', 'se-cmenu_canvas');
|
||||
document.body.append(dialogBox);
|
||||
this.$svgEditor.append(dialogBox);
|
||||
dialogBox.init(this.i18next);
|
||||
// alertDialog added to DOM
|
||||
const alertBox = document.createElement('se-alert-dialog');
|
||||
alertBox.setAttribute('id', 'se-alert-dialog');
|
||||
document.body.append(alertBox);
|
||||
this.$svgEditor.append(alertBox);
|
||||
// promptDialog added to DOM
|
||||
const promptBox = document.createElement('se-prompt-dialog');
|
||||
promptBox.setAttribute('id', 'se-prompt-dialog');
|
||||
document.body.append(promptBox);
|
||||
this.$svgEditor.append(promptBox);
|
||||
// Export dialog added to DOM
|
||||
const exportDialog = document.createElement('se-export-dialog');
|
||||
exportDialog.setAttribute('id', 'se-export-dialog');
|
||||
document.body.append(exportDialog);
|
||||
this.$svgEditor.append(exportDialog);
|
||||
exportDialog.init(this.i18next);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
|
|
|
@ -18,7 +18,7 @@ class Rulers {
|
|||
this.svgCanvas = editor.svgCanvas;
|
||||
this.editor = editor;
|
||||
// add rulers component to the DOM
|
||||
document.body.append(rulersTemplate.content.cloneNode(true));
|
||||
this.editor.$svgEditor.append(rulersTemplate.content.cloneNode(true));
|
||||
}
|
||||
/**
|
||||
* @type {Module}
|
||||
|
|
|
@ -40,7 +40,7 @@ export default {
|
|||
let showGrid = svgEditor.configObj.curConfig.showGrid || false;
|
||||
|
||||
hcanvas.style.display = 'none';
|
||||
document.body.appendChild(hcanvas);
|
||||
svgEditor.$svgEditor.appendChild(hcanvas);
|
||||
|
||||
const canvasGrid = svgdoc.createElementNS(NS.SVG, 'svg');
|
||||
assignAttributes(canvasGrid, {
|
||||
|
|
|
@ -82,7 +82,7 @@ export default {
|
|||
// storageDialog added to DOM
|
||||
const storageBox = document.createElement('se-storage-dialog');
|
||||
storageBox.setAttribute('id', 'se-storage-dialog');
|
||||
document.body.append(storageBox);
|
||||
svgEditor.$svgEditor.append(storageBox);
|
||||
storageBox.init(svgEditor.i18next);
|
||||
|
||||
// manage the change in the storageDialog
|
||||
|
|
|
@ -149,13 +149,13 @@ class LayersPanel {
|
|||
menuMore.setAttribute("id", "se-cmenu-layers-more");
|
||||
menuMore.value = "layer_moreopts";
|
||||
menuMore.setAttribute("leftclick", true);
|
||||
document.body.append(menuMore);
|
||||
this.editor.$svgEditor.append(menuMore);
|
||||
menuMore.init(i18next);
|
||||
const menuLayerBox = document.createElement("se-cmenu-layers");
|
||||
menuLayerBox.setAttribute("id", "se-cmenu-layers-list");
|
||||
menuLayerBox.value = "layerlist";
|
||||
menuLayerBox.setAttribute("leftclick", false);
|
||||
document.body.append(menuLayerBox);
|
||||
this.editor.$svgEditor.append(menuLayerBox);
|
||||
menuLayerBox.init(i18next);
|
||||
document
|
||||
.getElementById("layer_new")
|
||||
|
|
|
@ -996,7 +996,7 @@ class TopPanel {
|
|||
"se-svg-source-editor-dialog"
|
||||
);
|
||||
newSeEditorDialog.setAttribute("id", "se-svg-editor-dialog");
|
||||
document.body.append(newSeEditorDialog);
|
||||
this.editor.$svgEditor.append(newSeEditorDialog);
|
||||
newSeEditorDialog.init(i18next);
|
||||
// register action to top panel buttons
|
||||
$id("tool_source").addEventListener(
|
||||
|
|
Loading…
Reference in New Issue