56 lines
2.4 KiB
JavaScript
56 lines
2.4 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(`${(e.altKey ? ' S' : ' ')}${elCoordBox.textContent.replace(',','')}`)
|
|
elInput.selectionStart += elCoordBox.textContent.length + (e.altKey ? 1 : 0)
|
|
} 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
|
|
})
|
|
document.addEventListener('keydown',(e) => {
|
|
if (e.altKey && !e.shiftKey && !e.ctrlKey && e.key == "F3") {
|
|
coordParse = /(\[?)([\d\.]+)(,|(?:,\s)|\s)\D*([\d\.]+)(\]?)/
|
|
oldCoord = coordParse.exec(window.getSelection().toString())
|
|
if (oldCoord) {
|
|
calcX = (oldCoord[2] / 100 * elSvg.width.baseVal.value / elScale).toFixed(1)
|
|
calcY = (oldCoord[4] / 100 * elSvg.height.baseVal.value / elScale).toFixed(1)
|
|
elInput = document.getElementById('wpTextbox1')
|
|
elInput.setRangeText(`${oldCoord[1]}${calcX}${oldCoord[3]}${calcY}${oldCoord[5]}`)
|
|
}
|
|
}
|
|
}) |