svgedit
Version:
Powerful SVG-Editor for your browser
248 lines (234 loc) • 8.17 kB
JavaScript
/* globals svgEditor */
import cMenuDialogHTML from './cmenuDialog.html'
const template = document.createElement('template')
template.innerHTML = cMenuDialogHTML
/**
* @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')
}
/**
* @function init
* @param {any} name
* @returns {void}
*/
init (i18next) {
this.setAttribute('tools-cut', i18next.t('tools.cut'))
this.setAttribute('tools-copy', i18next.t('tools.copy'))
this.setAttribute('tools-paste', i18next.t('tools.paste'))
this.setAttribute('tools-paste_in_place', i18next.t('tools.paste_in_place'))
this.setAttribute('tools-delete', i18next.t('tools.delete'))
this.setAttribute('tools-group', i18next.t('tools.group'))
this.setAttribute('tools-ungroup', i18next.t('tools.ungroup'))
this.setAttribute('tools-move_front', i18next.t('tools.move_front'))
this.setAttribute('tools-move_up', i18next.t('tools.move_up'))
this.setAttribute('tools-move_down', i18next.t('tools.move_down'))
this.setAttribute('tools-move_back', i18next.t('tools.move_back'))
}
/**
* @function observedAttributes
* @returns {any} observed
*/
static get observedAttributes () {
return ['disableallmenu', 'enablemenuitems', 'disablemenuitems', 'tools-cut',
'tools-copy', 'tools-paste', 'tools-paste_in_place', 'tools-delete', 'tools-group',
'tools-ungroup', 'tools-move_front', 'tools-move_up', 'tools-move_down',
'tools-move_back']
}
/**
* @function attributeChangedCallback
* @param {string} name
* @param {string} oldValue
* @param {string} newValue
* @returns {void}
*/
attributeChangedCallback (name, oldValue, newValue) {
let eles = []
let textnode
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 'tools-cut':
textnode = document.createTextNode(newValue)
this.$cutLink.prepend(textnode)
break
case 'tools-copy':
textnode = document.createTextNode(newValue)
this.$copyLink.prepend(textnode)
break
case 'tools-paste':
this.$pasteLink.textContent = newValue
break
case 'tools-paste_in_place':
this.$pasteInPlaceLink.textContent = newValue
break
case 'tools-delete':
textnode = document.createTextNode(newValue)
this.$deleteLink.prepend(textnode)
break
case 'tools-group':
textnode = document.createTextNode(newValue)
this.$groupLink.prepend(textnode)
break
case 'tools-ungroup':
textnode = document.createTextNode(newValue)
this.$ungroupLink.prepend(textnode)
break
case 'tools-move_front':
textnode = document.createTextNode(newValue)
this.$moveFrontLink.prepend(textnode)
break
case 'tools-move_up':
textnode = document.createTextNode(newValue)
this.$moveUpLink.prepend(textnode)
break
case 'tools-move_down':
textnode = document.createTextNode(newValue)
this.$moveDownLink.prepend(textnode)
break
case 'tools-move_back':
textnode = document.createTextNode(newValue)
this.$moveBackLink.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()
// Detect mouse position
let x = e.pageX
let y = e.pageY
const xOff = screen.width - 250 // menu width
const yOff = screen.height - (276 + 150) // menu height + bottom panel height and scroll bar
if (x > xOff) {
x = xOff
}
if (y > yOff) {
y = yOff
}
current.$dialog.style.top = y + 'px'
current.$dialog.style.left = x + '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)
svgEditor.$click(this.$cutLink, (evt) => onMenuClickHandler(evt, 'cut'))
svgEditor.$click(this.$copyLink, (evt) => onMenuClickHandler(evt, 'copy'))
svgEditor.$click(this.$pasteLink, (evt) => onMenuClickHandler(evt, 'paste'))
svgEditor.$click(this.$pasteInPlaceLink, (evt) => onMenuClickHandler(evt, 'paste_in_place'))
svgEditor.$click(this.$deleteLink, (evt) => onMenuClickHandler(evt, 'delete'))
svgEditor.$click(this.$groupLink, (evt) => onMenuClickHandler(evt, 'group'))
svgEditor.$click(this.$ungroupLink, (evt) => onMenuClickHandler(evt, 'ungroup'))
svgEditor.$click(this.$moveFrontLink, (evt) => onMenuClickHandler(evt, 'move_front'))
svgEditor.$click(this.$moveUpLink, (evt) => onMenuClickHandler(evt, 'move_up'))
svgEditor.$click(this.$moveDownLink, (evt) => onMenuClickHandler(evt, 'move_down'))
svgEditor.$click(this.$moveBackLink, (evt) => onMenuClickHandler(evt, 'move_back'))
}
}
// Register
customElements.define('se-cmenu_canvas-dialog', SeCMenuDialog)