287 lines
8.6 KiB
JavaScript
287 lines
8.6 KiB
JavaScript
/* gl#bals svgEditor */
|
|
const template = document.createElement('template');
|
|
// eslint-disable-next-line no-unsanitized/property
|
|
template.innerHTML = `
|
|
<style>
|
|
.contextMenu {
|
|
position: absolute;
|
|
z-index: 99999;
|
|
border: solid 1px rgba(0,0,0,.33);
|
|
background: rgba(255,255,255,.95);
|
|
padding: 5px 0;
|
|
margin: 0px;
|
|
display: none;
|
|
font: 12px/15px Lucida Sans, Helvetica, Verdana, sans-serif;
|
|
border-radius: 5px;
|
|
-moz-border-radius: 5px;
|
|
-moz-box-shadow: 2px 5px 10px rgba(0,0,0,.3);
|
|
-webkit-box-shadow: 2px 5px 10px rgba(0,0,0,.3);
|
|
box-shadow: 2px 5px 10px rgba(0,0,0,.3);
|
|
}
|
|
|
|
.contextMenu li {
|
|
list-style: none;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.contextMenu .shortcut {
|
|
width: 115px;
|
|
text-align:right;
|
|
float:right;
|
|
}
|
|
|
|
.contextMenu a {
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
color: #222;
|
|
text-decoration: none;
|
|
display: block;
|
|
line-height: 20px;
|
|
height: 20px;
|
|
background-position: 6px center;
|
|
background-repeat: no-repeat;
|
|
outline: none;
|
|
padding: 0px 15px 1px 20px;
|
|
}
|
|
|
|
.contextMenu li.hover a {
|
|
background-color: #2e5dea;
|
|
color: white;
|
|
cursor: default;
|
|
}
|
|
|
|
.contextMenu li.disabled a {
|
|
color: #999;
|
|
}
|
|
|
|
.contextMenu li.hover.disabled a {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.contextMenu li.separator {
|
|
border-top: solid 1px #E3E3E3;
|
|
padding-top: 5px;
|
|
margin-top: 5px;
|
|
}
|
|
</style>
|
|
<ul id="cmenu_canvas" class="contextMenu">
|
|
<li>
|
|
<a href="#cut" id="se-cut">
|
|
<span class="shortcut">META+X</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#copy" id="se-copy">
|
|
#{svgEditor.i18next.t('tools.copy')}<span class="shortcut">META+C</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#paste" id="se-paste">#{svgEditor.i18next.t('tools.paste')}</a>
|
|
</li>
|
|
<li>
|
|
<a href="#paste_in_place" id="se-paste-in-place">#{svgEditor.i18next.t('tools.paste_in_place')}</a>
|
|
</li>
|
|
<li class="separator">
|
|
<a href="#delete" id="se-delete">
|
|
#{svgEditor.i18next.t('tools.delete')}<span class="shortcut">BACKSPACE</span>
|
|
</a>
|
|
</li>
|
|
<li class="separator">
|
|
<a href="#group" id="se-group">
|
|
#{svgEditor.i18next.t('tools.group')}<span class="shortcut">G</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#ungroup" id="se-ungroup">
|
|
#{svgEditor.i18next.t('tools.ungroup')}<span class="shortcut">G</span>
|
|
</a>
|
|
</li>
|
|
<li class="separator">
|
|
<a href="#move_front" id="se-move-front">
|
|
#{svgEditor.i18next.t('tools.move_front')}<span class="shortcut">CTRL+SHFT+]</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#move_up" id="se-move-up">
|
|
#{svgEditor.i18next.t('tools.move_up')}<span class="shortcut">CTRL+]</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#move_down" id="se-move-down">
|
|
#{svgEditor.i18next.t('tools.move_down')}<span class="shortcut">CTRL+[</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#move_back" id="se-move-back">
|
|
#{svgEditor.i18next.t('tools.move_back')}<span class="shortcut">CTRL+SHFT+[</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
`;
|
|
/**
|
|
* @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.append(template.content.cloneNode(true));
|
|
this._workarea = document.getElementById('workarea');
|
|
this.$dialog = this._shadowRoot.querySelector('#cmenu_canvas');
|
|
this.$copyLink = this._shadowRoot.querySelector('#se-copy');
|
|
this.$cutLink = this._shadowRoot.querySelector('#se-cut');
|
|
this.$pasteLink = this._shadowRoot.querySelector('#se-paste');
|
|
this.$pasteInPlaceLink = this._shadowRoot.querySelector('#se-paste-in-place');
|
|
this.$deleteLink = this._shadowRoot.querySelector('#se-delete');
|
|
this.$groupLink = this._shadowRoot.querySelector('#se-group');
|
|
this.$ungroupLink = this._shadowRoot.querySelector('#se-ungroup');
|
|
this.$moveFrontLink = this._shadowRoot.querySelector('#se-move-front');
|
|
this.$moveUpLink = this._shadowRoot.querySelector('#se-move-up');
|
|
this.$moveDownLink = this._shadowRoot.querySelector('#se-move-down');
|
|
this.$moveBackLink = this._shadowRoot.querySelector('#se-move-back');
|
|
}
|
|
init (i18next) {
|
|
var textnode = document.createTextNode(newValue);
|
|
this._shadowRoot.querySelector('#se-cut').prepend(textnode);
|
|
}
|
|
/**
|
|
* @function observedAttributes
|
|
* @returns {any} observed
|
|
*/
|
|
static get observedAttributes () {
|
|
return [ 'disableallmenu', 'enablemenuitems', 'disablemenuitems', 'toolscut' ];
|
|
}
|
|
/**
|
|
* @function attributeChangedCallback
|
|
* @param {string} name
|
|
* @param {string} oldValue
|
|
* @param {string} newValue
|
|
* @returns {void}
|
|
*/
|
|
attributeChangedCallback (name, oldValue, newValue) {
|
|
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;
|
|
case 'toolscut':
|
|
var textnode = document.createTextNode(newValue);
|
|
this._shadowRoot.querySelector('#se-cut').prepend(textnode);
|
|
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) => {
|
|
e.preventDefault();
|
|
current.$dialog.style.top = e.pageY + 'px';
|
|
current.$dialog.style.left = e.pageX + 'px';
|
|
current.$dialog.style.display = 'block';
|
|
};
|
|
const onMenuCloseHandler = (e) => {
|
|
if (e.button !== 2) {
|
|
current.$dialog.style.display = 'none';
|
|
}
|
|
};
|
|
const onMenuClickHandler = (e, action) => {
|
|
const triggerEvent = new CustomEvent('change', { detail: {
|
|
trigger: action
|
|
} });
|
|
this.dispatchEvent(triggerEvent);
|
|
};
|
|
this._workarea.addEventListener('contextmenu', onMenuOpenHandler);
|
|
this._workarea.addEventListener('mousedown', onMenuCloseHandler);
|
|
this.$cutLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'cut'));
|
|
this.$copyLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'copy'));
|
|
this.$pasteLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'paste'));
|
|
this.$pasteInPlaceLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'paste_in_place'));
|
|
this.$deleteLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'delete'));
|
|
this.$groupLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'group'));
|
|
this.$ungroupLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'ungroup'));
|
|
this.$moveFrontLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'move_front'));
|
|
this.$moveUpLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'move_up'));
|
|
this.$moveDownLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'move_down'));
|
|
this.$moveBackLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'move_back'));
|
|
}
|
|
}
|
|
|
|
// Register
|
|
customElements.define('se-cmenu_canvas-dialog', SeCMenuDialog);
|