+ `.cloneNode(true));
+ // change the style so it fits in our toolbar
+ result.content.append(
+ templateFrom.html`
+
+ `.content
+ );
+ return result;
+ }
+ /**
+ * @function observedAttributes
+ * @returns {any} observed
+ */
+ static get observedAttributes () {
+ return ['title', 'src', 'inputsize', 'value'];
+ }
+ /**
+ * @function attributeChangedCallback
+ * @param {string} name
+ * @param {string} oldValue
+ * @param {string} newValue
+ * @returns {void}
+ */
+ attributeChangedCallback (name, oldValue, newValue) {
+ if (oldValue === newValue) return;
+ switch (name) {
+ case 'title':
+ // this.$span.setAttribute('title', `${newValue} ${shortcut ? `[${shortcut}]` : ''}`);
+ break;
+ case 'src':
+ this.src = newValue;
+ break;
+ case 'inputsize':
+ this.inputsize = newValue;
+ break;
+ default:
+ super.attributeChangedCallback(name, oldValue, newValue);
+ break;
+ }
+ }
+ /**
+ * @function [internal.render]
+ * @param {PlainObject} changed
+ * @returns {void}
+ */
+ [internal.render] (changed) {
+ super[internal.render](changed);
+ if (this[internal.firstRender]) {
+ this.$img = this.shadowRoot.querySelector('img');
+ this.$input = this.shadowRoot.getElementById('input');
+ }
+ if (changed.src) {
+ this.$img.setAttribute('src', this[internal.state].src);
+ }
+ if (changed.inputsize) {
+ this.$input.shadowRoot.querySelector('[part~="input"]').style.width = this[internal.state].inputsize;
+ }
+ if (changed.inputPartType) {
+ // Wire up handler on new input.
+ this.addEventListener('close', (e) => {
+ e.preventDefault();
+ const value = e.detail?.closeResult?.getAttribute('value');
+ if (value) {
+ const closeEvent = new CustomEvent('change', {detail: {value}});
+ this.dispatchEvent(closeEvent);
+ }
+ });
+ }
+ }
+ /**
+ * @function src
+ * @returns {string} src
+ */
+ get src () {
+ return this[internal.state].src;
+ }
+ /**
+ * @function src
+ * @returns {void}
+ */
+ set src (src) {
+ this[internal.setState]({src});
+ }
+ /**
+ * @function inputsize
+ * @returns {string} src
+ */
+ get inputsize () {
+ return this[internal.state].inputsize;
+ }
+ /**
+ * @function src
+ * @returns {void}
+ */
+ set inputsize (inputsize) {
+ this[internal.setState]({inputsize});
+ }
+ /**
+ * @function value
+ * @returns {string} src
+ */
+ get value () {
+ return this[internal.state].value;
+ }
+ /**
+ * @function value
+ * @returns {void}
+ */
+ set value (value) {
+ this[internal.setState]({value});
+ }
+}
+
+// Register
+customElements.define('se-zoom', Zoom);
+
+/*
+{TODO
+ min: 0.001, max: 10000, step: 50, stepfunc: stepZoom,
+ function stepZoom (elem, step) {
+ const origVal = Number(elem.value);
+ if (origVal === 0) { return 100; }
+ const sugVal = origVal + step;
+ if (step === 0) { return origVal; }
+
+ if (origVal >= 100) {
+ return sugVal;
+ }
+ if (sugVal >= origVal) {
+ return origVal * 2;
+ }
+ return origVal / 2;
+ }
+*/
diff --git a/src/editor/dialogs/index.js b/src/editor/dialogs/index.js
index 5e22a5af..8201da2a 100644
--- a/src/editor/dialogs/index.js
+++ b/src/editor/dialogs/index.js
@@ -4,3 +4,7 @@ import './svgSourceDialog.js';
import './cmenuDialog.js';
import './cmenuLayersDialog.js';
import './seSelectDialog.js';
+import './seConfirmDialog.js';
+import './sePromptDialog.js';
+import './seAlertDialog.js';
+import './storageDialog.js';
diff --git a/src/editor/dialogs/seAlertDialog.js b/src/editor/dialogs/seAlertDialog.js
new file mode 100644
index 00000000..2d178ee8
--- /dev/null
+++ b/src/editor/dialogs/seAlertDialog.js
@@ -0,0 +1,11 @@
+// eslint-disable-next-line node/no-unpublished-import
+import AlertDialog from 'elix/define/AlertDialog.js';
+
+const dialog = new AlertDialog();
+const seAlert = (type, text) => {
+ dialog.textContent = text;
+ dialog.choices = (type === 'alert') ? ['Ok'] : ['Cancel'];
+ dialog.open();
+};
+
+window.seAlert = seAlert;
diff --git a/src/editor/dialogs/seConfirmDialog.js b/src/editor/dialogs/seConfirmDialog.js
new file mode 100644
index 00000000..b2502ff1
--- /dev/null
+++ b/src/editor/dialogs/seConfirmDialog.js
@@ -0,0 +1,13 @@
+// eslint-disable-next-line node/no-unpublished-import
+import AlertDialog from 'elix/define/AlertDialog.js';
+
+const dialog = new AlertDialog();
+const seConfirm = async (text, choices) => {
+ dialog.textContent = text;
+ dialog.choices = (choices === undefined) ? ['Ok', 'Cancel'] : choices;
+ dialog.open();
+ const response = await dialog.whenClosed();
+ return response.choice;
+};
+
+window.seConfirm = seConfirm;
diff --git a/src/editor/dialogs/sePromptDialog.js b/src/editor/dialogs/sePromptDialog.js
new file mode 100644
index 00000000..10fdf802
--- /dev/null
+++ b/src/editor/dialogs/sePromptDialog.js
@@ -0,0 +1,83 @@
+// eslint-disable-next-line node/no-unpublished-import
+import AlertDialog from 'elix/define/AlertDialog.js';
+/**
+ * @class SePromptDialog
+ */
+export class SePromptDialog extends HTMLElement {
+ /**
+ * @function constructor
+ */
+ constructor () {
+ super();
+ // create the shadowDom and insert the template
+ this._shadowRoot = this.attachShadow({mode: 'open'});
+ this.dialog = new AlertDialog();
+ }
+ /**
+ * @function observedAttributes
+ * @returns {any} observed
+ */
+ static get observedAttributes () {
+ return ['title', 'close'];
+ }
+ /**
+ * @function attributeChangedCallback
+ * @param {string} name
+ * @param {string} oldValue
+ * @param {string} newValue
+ * @returns {void}
+ */
+ attributeChangedCallback (name, oldValue, newValue) {
+ switch (name) {
+ case 'title':
+ if (this.dialog.opened) {
+ this.dialog.close();
+ }
+ this.dialog.textContent = newValue;
+ this.dialog.choices = ['Cancel'];
+ this.dialog.open();
+ break;
+ case 'close':
+ if (this.dialog.opened) {
+ this.dialog.close();
+ }
+ break;
+ default:
+ console.error('unkonw attr for:', name, 'newValue =', newValue);
+ break;
+ }
+ }
+ /**
+ * @function get
+ * @returns {any}
+ */
+ get title () {
+ return this.getAttribute('title');
+ }
+
+ /**
+ * @function set
+ * @returns {void}
+ */
+ set title (value) {
+ this.setAttribute('title', value);
+ }
+ /**
+ * @function get
+ * @returns {any}
+ */
+ get close () {
+ return this.getAttribute('close');
+ }
+
+ /**
+ * @function set
+ * @returns {void}
+ */
+ set close (value) {
+ this.setAttribute('close', value);
+ }
+}
+
+// Register
+customElements.define('se-prompt-dialog', SePromptDialog);
diff --git a/src/editor/dialogs/storageDialog.js b/src/editor/dialogs/storageDialog.js
new file mode 100644
index 00000000..32ee919e
--- /dev/null
+++ b/src/editor/dialogs/storageDialog.js
@@ -0,0 +1,166 @@
+/* eslint-disable node/no-unpublished-import */
+import 'elix/define/Dialog.js';
+
+const template = document.createElement('template');
+template.innerHTML = `
+
+ + By default and where supported, SVG-Edit can store your editor preferences and SVG content locally on your machine so you do not need to add these back each time you load SVG-Edit. If, for privacy reasons, you do not wish to store this information on your machine, you can change away from the default option below. +
+ + +