#se-img-prop-dialog inject this component in the DOM dynamically

src/editor/dialogs/imagePropertiesDialog.js

@@ -127,6 +127,7 @@ export class SeImgPropDialog extends HTMLElement {
   constructor () {
     super();
     // create the shadowDom and insert the template
+    this.eventlisten = false;
     this._shadowRoot = this.attachShadow({mode: 'open'});
     this._shadowRoot.appendChild(template.content.cloneNode(true));
     this.$saveBtn = this._shadowRoot.querySelector('#tool_docprops_save');
@@ -180,10 +181,12 @@ export class SeImgPropDialog extends HTMLElement {
       }
       break;
     case 'dialog':
-      if (newValue === 'open') {
-        this.$dialog.open();
-      } else {
-        this.$dialog.close();
+      if (this.eventlisten) {
+        if (newValue === 'open') {
+          this.$dialog.open();
+        } else {
+          this.$dialog.close();
+        }
       }
       break;
     case 'save':
@@ -366,6 +369,7 @@ export class SeImgPropDialog extends HTMLElement {
     this.$saveBtn.addEventListener('click', onSaveHandler);
     this.$cancelBtn.addEventListener('click', onCancelHandler);
     this.$dialog.addEventListener('close', onCancelHandler);
+    this.eventlisten = true;
   }
 }
 

src/editor/index.html

@@ -440,7 +440,6 @@
         </form>
       </div>
     </div>
-    <se-img-prop-dialog id="se-img-prop" title="" width="" height="" save="" dialog=""></se-img-prop-dialog>
     <div id="svg_prefs">
       <div class="overlay"></div>
       <div id="svg_prefs_container">

src/editor/svgedit.js

@@ -610,6 +610,10 @@ editor.init = () => {
       */
       editor.storage = localStorage;
     }
+    // Image props dialog added to DOM
+    const newSeImgPropDialog = document.createElement('se-img-prop-dialog');
+    newSeImgPropDialog.setAttribute('id', 'se-img-prop');
+    document.body.append(newSeImgPropDialog);
   } catch (err) {}
 
   // get list of languages from options in the HTML