diff --git a/src/editor/dialogs/cmenuDialog.js b/src/editor/dialogs/cmenuDialog.js
new file mode 100644
index 00000000..67384998
--- /dev/null
+++ b/src/editor/dialogs/cmenuDialog.js
@@ -0,0 +1,249 @@
+const template = document.createElement('template');
+template.innerHTML = `
+
+
+`;
+/**
+ * @class SeCMenuDialog
+ */
+export class SeCMenuDialog extends HTMLElement {
+ /**
+ * @function constructor
+ */
+ constructor () {
+ super();
+ // create the shadowDom and insert the template
+ this._shadowRoot = this.attachShadow({mode: 'open'});
+ this._shadowRoot.appendChild(template.content.cloneNode(true));
+ this._workarea = document.getElementById('workarea');
+ this._svgEditor = document.getElementById('svg_editor');
+ this.$dialog = this._shadowRoot.querySelector('#cmenu_canvas');
+ this.$copyLink = this._shadowRoot.querySelector('#se-copy');
+ }
+ /**
+ * @function observedAttributes
+ * @returns {any} observed
+ */
+ static get observedAttributes () {
+ return ['disableallmenu', 'enablemenuitems', 'disablemenuitems'];
+ }
+ /**
+ * @function attributeChangedCallback
+ * @param {string} name
+ * @param {string} oldValue
+ * @param {string} newValue
+ * @returns {void}
+ */
+ attributeChangedCallback (name, oldValue, newValue) {
+ if (oldValue === newValue) return;
+ let eles = [];
+ const sdowRoot = this._shadowRoot;
+ switch (name) {
+ case 'disableallmenu':
+ if (newValue === 'true') {
+ const elesli = sdowRoot.querySelectorAll('li');
+ elesli.forEach(function (eleli) {
+ eleli.classList.add('disabled');
+ });
+ }
+ break;
+ case 'enablemenuitems':
+ eles = newValue.split(',');
+ eles.forEach(function (ele) {
+ const selEle = sdowRoot.querySelector('a[href*="' + ele + '"]');
+ selEle.parentElement.classList.remove('disabled');
+ });
+ break;
+ case 'disablemenuitems':
+ eles = newValue.split(',');
+ eles.forEach(function (ele) {
+ const selEle = sdowRoot.querySelector('a[href*="' + ele + '"]');
+ selEle.parentElement.classList.add('disabled');
+ });
+ break;
+ default:
+ super.attributeChangedCallback(name, oldValue, newValue);
+ break;
+ }
+ }
+ /**
+ * @function get
+ * @returns {any}
+ */
+ get disableallmenu () {
+ return this.getAttribute('disableallmenu');
+ }
+
+ /**
+ * @function set
+ * @returns {void}
+ */
+ set disableallmenu (value) {
+ this.setAttribute('disableallmenu', value);
+ }
+ /**
+ * @function get
+ * @returns {any}
+ */
+ get enablemenuitems () {
+ return this.getAttribute('enablemenuitems');
+ }
+
+ /**
+ * @function set
+ * @returns {void}
+ */
+ set enablemenuitems (value) {
+ this.setAttribute('enablemenuitems', value);
+ }
+ /**
+ * @function get
+ * @returns {any}
+ */
+ get disablemenuitems () {
+ return this.getAttribute('disablemenuitems');
+ }
+
+ /**
+ * @function set
+ * @returns {void}
+ */
+ set disablemenuitems (value) {
+ this.setAttribute('disablemenuitems', value);
+ }
+ /**
+ * @function connectedCallback
+ * @returns {void}
+ */
+ connectedCallback () {
+ const current = this;
+ const onMenuOpenHandler = (e) => {
+ current.$dialog.style.top = e.pageY + 'px';
+ current.$dialog.style.left = e.pageX + 'px';
+ current.$dialog.style.display = 'block';
+ e.preventDefault();
+ };
+ const onCopyClickHandler = (e) => {
+ console.log('came');
+ };
+ this._workarea.addEventListener('contextmenu', onMenuOpenHandler, false);
+ this.$copyLink.addEventListener('click', onCopyClickHandler);
+ }
+}
+
+// Register
+customElements.define('se-cmenu_canvas-dialog', SeCMenuDialog);
diff --git a/src/editor/dialogs/index.js b/src/editor/dialogs/index.js
index efa4b307..c2aa4348 100644
--- a/src/editor/dialogs/index.js
+++ b/src/editor/dialogs/index.js
@@ -1,3 +1,4 @@
import './imagePropertiesDialog.js';
import './editorPreferencesDialog.js';
import './svgSourceDialog.js';
+import './cmenuDialog.js';
diff --git a/src/editor/index.html b/src/editor/index.html
index b6585617..ac57f2fa 100644
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -420,7 +420,7 @@
-