45 lines
1.8 KiB
JavaScript
45 lines
1.8 KiB
JavaScript
elSvgCont = document.querySelector('div#svg-wrapper')
|
|
elSvg = elSvgCont.childNodes[0]
|
|
elCoordBox = document.createElement('div')
|
|
elCoordBox.style.display='none'
|
|
elCoordBox.style.position='absolute'
|
|
elCoordBox.style.padding='3px'
|
|
elCoordBox.style.background='#ffffff99'
|
|
elCoordBox.style.border='1px solid black'
|
|
elSvgCont.appendChild(elCoordBox)
|
|
elScale = elSvg.getAttribute('mwscale')
|
|
elSvgCont.addEventListener('click', (e) => {
|
|
e.preventDefault()
|
|
console.log(e)
|
|
if (!e.ctrlKey) {
|
|
elInput = document.getElementById('wpTextbox1')
|
|
elInput.setRangeText(`[${elCoordBox.textContent}]`)
|
|
elInput.selectionStart += elCoordBox.textContent.length + 2
|
|
} else {
|
|
navigator.clipboard.writeText(`[${elCoordBox.textContent}]`)
|
|
}
|
|
|
|
})
|
|
elSvgCont.addEventListener('contextmenu', (e) => {e.preventDefault()})
|
|
elSvgCont.addEventListener('auxclick', (e) => {
|
|
e.preventDefault()
|
|
console.log(e)
|
|
if (!e.ctrlKey) {
|
|
elInput = document.getElementById('wpTextbox1')
|
|
elInput.setRangeText(` ${elCoordBox.textContent.replace(',','')}`)
|
|
elInput.selectionStart += elCoordBox.textContent.length
|
|
} else {
|
|
navigator.clipboard.writeText(` ${elCoordBox.textContent.replace(',','')}`)
|
|
}
|
|
|
|
})
|
|
elSvgCont.addEventListener('mouseenter', () => {elCoordBox.style.display='block'})
|
|
elSvgCont.addEventListener('mouseleave', () => {elCoordBox.style.display='none'})
|
|
elSvgCont.addEventListener('mousemove',(e) => {
|
|
xPoint = ((e.offsetX / elSvgCont.clientWidth) * elSvg.width.baseVal.value / elScale).toFixed(1)
|
|
yPoint = ((e.offsetY / elSvgCont.clientHeight) * elSvg.height.baseVal.value / elScale).toFixed(1)
|
|
elCoordBox.textContent = `${xPoint}, ${yPoint}`
|
|
elCoordBox.style.left = e.offsetX + 6
|
|
elCoordBox.style.top = e.offsetY + 12
|
|
})
|