github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

#cmenu_canvas right click menu completed

Browse Source
This commit is contained in:
Agriya Dev5
2020-12-24 14:55:25 +05:30
parent 9714b118ae
commit 9ef116b471
3 changed files with 99 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/editor/dialogs/cmenuDialog.js
View File

@@ -65,7 +65,7 @@ template.innerHTML = `
</style>
<ul id="cmenu_canvas" class="contextMenu">
<li>
<a href="#cut">
<a href="#cut" id="se-cut">
Cut<span class="shortcut">META+X</span>
</a>
</li>
@@ -75,43 +75,43 @@ template.innerHTML = `
</a>
</li>
<li>
<a href="#paste">Paste</a>
<a href="#paste" id="se-paste">Paste</a>
</li>
<li>
<a href="#paste_in_place">Paste in Place</a>
<a href="#paste_in_place" id="se-paste-in-place">Paste in Place</a>
</li>
<li class="separator">
<a href="#delete">
<a href="#delete" id="se-delete">
Delete<span class="shortcut">BACKSPACE</span>
</a>
</li>
<li class="separator">
<a href="#group">
<a href="#group" id="se-group">
Group<span class="shortcut">G</span>
</a>
</li>
<li>
<a href="#ungroup">
<a href="#ungroup" id="se-ungroup">
Ungroup<span class="shortcut">G</span>
</a>
</li>
<li class="separator">
<a href="#move_front">
<a href="#move_front" id="se-move-front">
Bring to Front<span class="shortcut">CTRL+SHFT+]</span>
</a>
</li>
<li>
<a href="#move_up">
<a href="#move_up" id="se-move-up">
Bring Forward<span class="shortcut">CTRL+]</span>
</a>
</li>
<li>
<a href="#move_down">
<a href="#move_down" id="se-move-down">
Send Backward<span class="shortcut">CTRL+[</span>
</a>
</li>
<li>
<a href="#move_back">
<a href="#move_back" id="se-move-back">
Send to Back<span class="shortcut">CTRL+SHFT+[</span>
</a>
</li>
@@ -133,6 +133,16 @@ export class SeCMenuDialog extends HTMLElement {
this._svgEditor = document.getElementById('svg_editor');
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');
}
/**
* @function observedAttributes
@@ -149,7 +159,8 @@ export class SeCMenuDialog extends HTMLElement {
* @returns {void}
*/
attributeChangedCallback (name, oldValue, newValue) {
if (oldValue === newValue) return;
console.log('name =', name);
// if (oldValue === newValue) return;
let eles = [];
const sdowRoot = this._shadowRoot;
switch (name) {
@@ -166,6 +177,7 @@ export class SeCMenuDialog extends HTMLElement {
eles.forEach(function (ele) {
const selEle = sdowRoot.querySelector('a[href*="' + ele + '"]');
selEle.parentElement.classList.remove('disabled');
console.log('enable --> ' + ele);
});
break;
case 'disablemenuitems':
@@ -173,6 +185,7 @@ export class SeCMenuDialog extends HTMLElement {
eles.forEach(function (ele) {
const selEle = sdowRoot.querySelector('a[href*="' + ele + '"]');
selEle.parentElement.classList.add('disabled');
console.log('disabled --> ' + ele);
});
break;
default:
@@ -232,16 +245,37 @@ export class SeCMenuDialog extends HTMLElement {
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';
e.preventDefault();
};
const onCopyClickHandler = (e) => {
console.log('came');
const onMenuCloseHandler = (e) => {
if (e.button !== 2) {
current.$dialog.style.display = 'none';
console.log('onMenuCloseHandler');
}
};
this._workarea.addEventListener('contextmenu', onMenuOpenHandler, false);
this.$copyLink.addEventListener('click', onCopyClickHandler);
const onMenuClickHandler = (e, action) => {
console.log('action ------> ', 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'));
}
}

116
src/editor/svgedit.js
View File

@@ -549,24 +549,16 @@ editor.init = () => {
$('#g_title').prop('disabled', tagName === 'use');
}
}
console.log((tagName === 'g' ? 'en' : 'dis') + 'ablemenuitems');
console.log(((tagName === 'g' || !multiselected) ? 'dis' : 'en') + 'ablemenuitems');
menuItems.setAttribute((tagName === 'g' ? 'en' : 'dis') + 'ablemenuitems', '#ungroup');
menuItems.setAttribute(((tagName === 'g' || !multiselected) ? 'dis' : 'en') + 'ablemenuitems', '#group');
// menuItems[(tagName === 'g' ? 'en' : 'dis') + 'ableContextMenuItems']('#ungroup');
// menuItems[((tagName === 'g' || !multiselected) ? 'dis' : 'en') + 'ableContextMenuItems']('#group');
// if (!Utils.isNullish(elem))
} else if (multiselected) {
$('#multiselected_panel').show();
menuItems.setAttribute('enablemenuitems', '#group');
menuItems.setAttribute('disablemenuitems', '#ungroup');
/* menuItems
.enableContextMenuItems('#group')
.disableContextMenuItems('#ungroup'); */
} else {
menuItems.setAttribute('disablemenuitems', '#delete,#cut,#copy,#group,#ungroup,#move_front,#move_up,#move_down,#move_back');
// menuItems.disableContextMenuItems('#delete,#cut,#copy,#group,#ungroup,#move_front,#move_up,#move_down,#move_back');
}
// update history buttons
@@ -580,8 +572,8 @@ editor.init = () => {
$('#selLayerNames').removeAttr('disabled').val(currentLayerName);
// Enable regular menu options
menuItems.setAttribute('enablemenuitems', '#delete,#cut,#copy,#move_front,#move_up,#move_down,#move_back');
// canvMenu.enableContextMenuItems('#delete,#cut,#copy,#move_front,#move_up,#move_down,#move_back');
const canCMenu = document.getElementById('se-cmenu_canvas');
canCMenu.setAttribute('enablemenuitems', '#delete,#cut,#copy,#move_front,#move_up,#move_down,#move_back');
} else {
$('#selLayerNames').attr('disabled', 'disabled');
}
@@ -3510,6 +3502,50 @@ editor.init = () => {
saveSourceEditor(e);
}
});
$id('se-cmenu_canvas').addEventListener('change', function (e) {
const action = e?.detail?.trigger;
switch (action) {
case 'delete':
deleteSelected();
break;
case 'cut':
cutSelected();
break;
case 'copy':
copySelected();
break;
case 'paste':
svgCanvas.pasteElements();
break;
case 'paste_in_place':
svgCanvas.pasteElements('in_place');
break;
case 'group':
case 'group_elements':
svgCanvas.groupSelectedElements();
break;
case 'ungroup':
svgCanvas.ungroupSelectedElement();
break;
case 'move_front':
moveToTopSelected();
break;
case 'move_up':
moveUpDownSelected('Up');
break;
case 'move_down':
moveUpDownSelected('Down');
break;
case 'move_back':
moveToBottomSelected();
break;
default:
if (hasCustomHandler(action)) {
getCustomHandler(action).call();
}
break;
}
});
layersPanel.addEvents();
const toolButtons = [
// Shortcuts not associated with buttons
@@ -3708,63 +3744,8 @@ editor.init = () => {
// zoom
$id('zoom').value = (svgCanvas.getZoom() * 100).toFixed(1);
/* $('#workarea').contextMenu(
{
menu: 'cmenu_canvas',
inSpeed: 0
},
function (action, el, pos) {
switch (action) {
case 'delete':
deleteSelected();
break;
case 'cut':
cutSelected();
break;
case 'copy':
copySelected();
break;
case 'paste':
svgCanvas.pasteElements();
break;
case 'paste_in_place':
svgCanvas.pasteElements('in_place');
break;
case 'group':
case 'group_elements':
svgCanvas.groupSelectedElements();
break;
case 'ungroup':
svgCanvas.ungroupSelectedElement();
break;
case 'move_front':
moveToTopSelected();
break;
case 'move_up':
moveUpDownSelected('Up');
break;
case 'move_down':
moveUpDownSelected('Down');
break;
case 'move_back':
moveToBottomSelected();
break;
default:
if (hasCustomHandler(action)) {
getCustomHandler(action).call();
}
break;
}
}
);
$('.contextMenu li').mousedown(function (ev) {
ev.preventDefault();
}); */
canvMenu.setAttribute('disableallmenu', true);
canvMenu.setAttribute('enablemenuitems', '#delete,#cut,#copy');
// $('#cmenu_canvas li').disableContextMenu();
// canvMenu.enableContextMenuItems('#delete,#cut,#copy');
/**
* @returns {void}
*/
@@ -3774,10 +3755,7 @@ editor.init = () => {
svgeditClipboard = localStorage.getItem('svgedit_clipboard');
} catch (err) {}
// eslint-disable-next-line max-len
canvMenu.setAttribute((svgeditClipboard ? 'en' : 'dis') + 'ablemenuitems', '#delete,#cut,#copy,#move_front,#move_up,#move_down,#move_back');
/* canvMenu[(svgeditClipboard ? 'en' : 'dis') + 'ableContextMenuItems'](
'#paste,#paste_in_place'
); */
canvMenu.setAttribute((svgeditClipboard ? 'en' : 'dis') + 'ablemenuitems', '#paste,#paste_in_place');
}
enableOrDisableClipboard();

6
src/svgcanvas/selected-elem.js
View File

@@ -421,11 +421,9 @@ export const copySelectedElements = function () {
sessionStorage.setItem(elementContext_.getClipboardID(), data);
elementContext_.flashStorage();
const menu = $('#cmenu_canvas');
// Context menu might not exist (it is provided by editor.js).
if (menu.enableContextMenuItems) {
menu.enableContextMenuItems('#paste,#paste_in_place');
}
const canvMenu = document.getElementById('se-cmenu_canvas');
canvMenu.setAttribute('enablemenuitems', '#paste,#paste_in_place');
};
/**