#cmenu_canvas cmenu_layers convert as separate web component
parent
0bb94c3304
commit
c280ba34f7
|
@ -23,42 +23,6 @@ class LayersPanel {
|
||||||
document.getElementById('layer_up').addEventListener('click', () => this.moveLayer.bind(this)(-1));
|
document.getElementById('layer_up').addEventListener('click', () => this.moveLayer.bind(this)(-1));
|
||||||
document.getElementById('layer_down').addEventListener('click', () => this.moveLayer.bind(this)(1));
|
document.getElementById('layer_down').addEventListener('click', () => this.moveLayer.bind(this)(1));
|
||||||
document.getElementById('layer_rename').addEventListener('click', this.layerRename.bind(this));
|
document.getElementById('layer_rename').addEventListener('click', this.layerRename.bind(this));
|
||||||
|
|
||||||
const lmenuFunc = (action, el, pos) => {
|
|
||||||
switch (action) {
|
|
||||||
case 'dupe':
|
|
||||||
/* await */ this.cloneLayer();
|
|
||||||
break;
|
|
||||||
case 'delete':
|
|
||||||
this.deleteLayer();
|
|
||||||
break;
|
|
||||||
case 'merge_down':
|
|
||||||
this.mergeLayer();
|
|
||||||
break;
|
|
||||||
case 'merge_all':
|
|
||||||
this.svgCanvas.mergeAllLayers();
|
|
||||||
this.updateContextPanel();
|
|
||||||
this.populateLayers();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
$('#layer_moreopts').contextMenu(
|
|
||||||
{
|
|
||||||
menu: 'cmenu_layers',
|
|
||||||
inSpeed: 0,
|
|
||||||
allowLeft: true
|
|
||||||
},
|
|
||||||
lmenuFunc
|
|
||||||
);
|
|
||||||
|
|
||||||
$('#layerlist').contextMenu(
|
|
||||||
{
|
|
||||||
menu: 'cmenu_layers',
|
|
||||||
inSpeed: 0
|
|
||||||
},
|
|
||||||
lmenuFunc
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
|
|
|
@ -0,0 +1,193 @@
|
||||||
|
const template = document.createElement('template');
|
||||||
|
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_layers" class="contextMenu">
|
||||||
|
<li><a href="#dupe" id="se-dupe">Duplicate Layer...</a></li>
|
||||||
|
<li><a href="#delete" id="se-layer-delete">Delete Layer</a></li>
|
||||||
|
<li><a href="#merge_down" id="se-merge-down">Merge Down</a></li>
|
||||||
|
<li><a href="#merge_all" id="se-merge-all">Merge All</a></li>
|
||||||
|
</ul>
|
||||||
|
`;
|
||||||
|
/**
|
||||||
|
* @class SeCMenuLayerDialog
|
||||||
|
*/
|
||||||
|
export class SeCMenuLayerDialog 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.source = '';
|
||||||
|
this._workarea = undefined;
|
||||||
|
this.$sidePanels = document.getElementById('sidepanels');
|
||||||
|
this.$dialog = this._shadowRoot.querySelector('#cmenu_layers');
|
||||||
|
this.$duplicateLink = this._shadowRoot.querySelector('#se-dupe');
|
||||||
|
this.$deleteLink = this._shadowRoot.querySelector('#se-layer-delete');
|
||||||
|
this.$mergeDownLink = this._shadowRoot.querySelector('#se-merge-down');
|
||||||
|
this.$mergeAllLink = this._shadowRoot.querySelector('#se-merge-all');
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @function observedAttributes
|
||||||
|
* @returns {any} observed
|
||||||
|
*/
|
||||||
|
static get observedAttributes () {
|
||||||
|
return ['value', 'leftclick'];
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @function attributeChangedCallback
|
||||||
|
* @param {string} name
|
||||||
|
* @param {string} oldValue
|
||||||
|
* @param {string} newValue
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
attributeChangedCallback (name, oldValue, newValue) {
|
||||||
|
if (oldValue === newValue) return;
|
||||||
|
switch (name) {
|
||||||
|
case 'value':
|
||||||
|
this.source = newValue;
|
||||||
|
if (newValue !== '' && newValue !== undefined) {
|
||||||
|
this._workarea = document.getElementById(this.source);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
super.attributeChangedCallback(name, oldValue, newValue);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @function get
|
||||||
|
* @returns {any}
|
||||||
|
*/
|
||||||
|
get value () {
|
||||||
|
return this.getAttribute('value');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @function set
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
set value (value) {
|
||||||
|
this.setAttribute('value', value);
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @function get
|
||||||
|
* @returns {any}
|
||||||
|
*/
|
||||||
|
get leftclick () {
|
||||||
|
return this.getAttribute('leftclick');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @function set
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
set leftclick (value) {
|
||||||
|
this.setAttribute('leftclick', 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, id) => {
|
||||||
|
const triggerEvent = new CustomEvent('change', {detail: {
|
||||||
|
trigger: action,
|
||||||
|
source: id
|
||||||
|
}});
|
||||||
|
this.dispatchEvent(triggerEvent);
|
||||||
|
current.$dialog.style.display = 'none';
|
||||||
|
};
|
||||||
|
if (this._workarea !== undefined) {
|
||||||
|
this._workarea.addEventListener('contextmenu', onMenuOpenHandler);
|
||||||
|
if (this.getAttribute('leftclick') === 'true') {
|
||||||
|
this._workarea.addEventListener('click', onMenuOpenHandler);
|
||||||
|
}
|
||||||
|
this._workarea.addEventListener('mousedown', onMenuCloseHandler);
|
||||||
|
this.$sidePanels.addEventListener('mousedown', onMenuCloseHandler);
|
||||||
|
}
|
||||||
|
this.$duplicateLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'dupe', this.source));
|
||||||
|
this.$deleteLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'delete', this.source));
|
||||||
|
this.$mergeDownLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'merge_down', this.source));
|
||||||
|
this.$mergeAllLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'merge_all', this.source));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Register
|
||||||
|
customElements.define('se-cmenu-layers', SeCMenuLayerDialog);
|
|
@ -2,3 +2,4 @@ import './imagePropertiesDialog.js';
|
||||||
import './editorPreferencesDialog.js';
|
import './editorPreferencesDialog.js';
|
||||||
import './svgSourceDialog.js';
|
import './svgSourceDialog.js';
|
||||||
import './cmenuDialog.js';
|
import './cmenuDialog.js';
|
||||||
|
import './cmenuLayersDialog.js';
|
||||||
|
|
|
@ -420,13 +420,6 @@
|
||||||
<div id="dialog_buttons"></div>
|
<div id="dialog_buttons"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ul id="cmenu_layers" class="contextMenu">
|
|
||||||
<li><a href="#dupe">Duplicate Layer...</a></li>
|
|
||||||
<li><a href="#delete">Delete Layer</a></li>
|
|
||||||
<li><a href="#merge_down">Merge Down</a></li>
|
|
||||||
<li><a href="#merge_all">Merge All</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
@ -238,10 +238,21 @@ editor.init = () => {
|
||||||
const newSeEditorDialog = document.createElement('se-svg-source-editor-dialog');
|
const newSeEditorDialog = document.createElement('se-svg-source-editor-dialog');
|
||||||
newSeEditorDialog.setAttribute('id', 'se-svg-editor-dialog');
|
newSeEditorDialog.setAttribute('id', 'se-svg-editor-dialog');
|
||||||
document.body.append(newSeEditorDialog);
|
document.body.append(newSeEditorDialog);
|
||||||
// dialog_box added to DOM
|
// canvas menu added to DOM
|
||||||
const dialogBox = document.createElement('se-cmenu_canvas-dialog');
|
const dialogBox = document.createElement('se-cmenu_canvas-dialog');
|
||||||
dialogBox.setAttribute('id', 'se-cmenu_canvas');
|
dialogBox.setAttribute('id', 'se-cmenu_canvas');
|
||||||
document.body.append(dialogBox);
|
document.body.append(dialogBox);
|
||||||
|
// layer menu added to DOM
|
||||||
|
const menuMore = document.createElement('se-cmenu-layers');
|
||||||
|
menuMore.setAttribute('id', 'se-cmenu-layers-more');
|
||||||
|
menuMore.value = 'layer_moreopts';
|
||||||
|
menuMore.setAttribute('leftclick', true);
|
||||||
|
document.body.append(menuMore);
|
||||||
|
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);
|
||||||
} catch (err) {}
|
} catch (err) {}
|
||||||
|
|
||||||
configObj.load();
|
configObj.load();
|
||||||
|
@ -3289,6 +3300,25 @@ editor.init = () => {
|
||||||
changeSidePanelWidth(deltaX);
|
changeSidePanelWidth(deltaX);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const lmenuFunc = (action, el) => {
|
||||||
|
switch (action) {
|
||||||
|
case 'dupe':
|
||||||
|
/* await */ layersPanel.cloneLayer();
|
||||||
|
break;
|
||||||
|
case 'delete':
|
||||||
|
layersPanel.deleteLayer();
|
||||||
|
break;
|
||||||
|
case 'merge_down':
|
||||||
|
layersPanel.mergeLayer();
|
||||||
|
break;
|
||||||
|
case 'merge_all':
|
||||||
|
layersPanel.svgCanvas.mergeAllLayers();
|
||||||
|
layersPanel.updateContextPanel();
|
||||||
|
layersPanel.populateLayers();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* If width is non-zero, then fully close it; otherwise fully open it.
|
* If width is non-zero, then fully close it; otherwise fully open it.
|
||||||
* @param {boolean} close Forces the side panel closed
|
* @param {boolean} close Forces the side panel closed
|
||||||
|
@ -3546,6 +3576,12 @@ editor.init = () => {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
$id('se-cmenu-layers-more').addEventListener('change', function (e) {
|
||||||
|
lmenuFunc(e?.detail?.trigger, e?.detail?.source);
|
||||||
|
});
|
||||||
|
$id('se-cmenu-layers-list').addEventListener('change', function (e) {
|
||||||
|
lmenuFunc(e?.detail?.trigger, e?.detail?.source);
|
||||||
|
});
|
||||||
layersPanel.addEvents();
|
layersPanel.addEvents();
|
||||||
const toolButtons = [
|
const toolButtons = [
|
||||||
// Shortcuts not associated with buttons
|
// Shortcuts not associated with buttons
|
||||||
|
|
Loading…
Reference in New Issue