aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--src/dumbyUtils.mjs1
-rw-r--r--src/dumbymap.mjs39
2 files changed, 21 insertions, 19 deletions
diff --git a/src/dumbyUtils.mjs b/src/dumbyUtils.mjs
index 2f64e38..214e44f 100644
--- a/src/dumbyUtils.mjs
+++ b/src/dumbyUtils.mjs
@@ -419,6 +419,7 @@ export const dragForAnchor = (container, range, endOfLeaderLine) => {
419 geoLink.classList.remove('drag') 419 geoLink.classList.remove('drag')
420 positionObserver.disconnect() 420 positionObserver.disconnect()
421 line.remove() 421 line.remove()
422 endOfLeaderLine.remove()
422 423
423 const map = document.elementFromPoint(e.clientX, e.clientY) 424 const map = document.elementFromPoint(e.clientX, e.clientY)
424 .closest('.mapclay[data-render="fulfilled"]') 425 .closest('.mapclay[data-render="fulfilled"]')
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index 706a4fe..5cca952 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -522,22 +522,9 @@ export const generateMaps = (container, {
522 }, mapDelay, 522 }, mapDelay,
523 ) 523 )
524 } 524 }
525 target.renderMap() 525 target.renderMap(configList)
526 } 526 }
527 527
528 /** MENU: Prepare Context Menu */
529 const menu = document.createElement('div')
530 menu.classList.add('menu', 'dumby-menu')
531 menu.style.display = 'none'
532 menu.onclick = (e) => {
533 const keepMenu = e.target.closest('.keep-menu') || e.target.classList.contains('.keep-menu')
534 if (keepMenu) return
535
536 menu.style.display = 'none'
537 }
538 container.appendChild(menu)
539 window.menu = menu
540
541 /** MENU: Menu Items for Context Menu */ 528 /** MENU: Menu Items for Context Menu */
542 container.oncontextmenu = e => { 529 container.oncontextmenu = e => {
543 const map = e.target.closest('.mapclay') 530 const map = e.target.closest('.mapclay')
@@ -545,6 +532,17 @@ export const generateMaps = (container, {
545 if (!block && !map) return 532 if (!block && !map) return
546 e.preventDefault() 533 e.preventDefault()
547 534
535 /** MENU: Prepare Context Menu */
536 const menu = document.createElement('div')
537 menu.classList.add('menu', 'dumby-menu')
538 menu.onclick = (e) => {
539 const keepMenu = e.target.closest('.keep-menu') || e.target.classList.contains('.keep-menu')
540 if (keepMenu) return
541
542 menu.remove()
543 }
544 container.body.appendChild(menu)
545
548 menu.replaceChildren() 546 menu.replaceChildren()
549 menu.style.display = 'block' 547 menu.style.display = 'block'
550 menu.style.cssText = `left: ${e.clientX - menu.offsetParent.offsetLeft + 10}px; top: ${e.clientY - menu.offsetParent.offsetTop + 5}px;` 548 menu.style.cssText = `left: ${e.clientX - menu.offsetParent.offsetLeft + 10}px; top: ${e.clientY - menu.offsetParent.offsetTop + 5}px;`
@@ -580,7 +578,8 @@ export const generateMaps = (container, {
580 578
581 /** MENU: Event Handler when clicking outside of Context Manu */ 579 /** MENU: Event Handler when clicking outside of Context Manu */
582 const actionOutsideMenu = e => { 580 const actionOutsideMenu = e => {
583 if (menu.style.display === 'none') return 581 const menu = container.querySelector('.dumby-menu')
582 if (!menu) return
584 const keepMenu = e.target.closest('.keep-menu') || e.target.classList.contains('.keep-menu') 583 const keepMenu = e.target.closest('.keep-menu') || e.target.classList.contains('.keep-menu')
585 if (keepMenu) return 584 if (keepMenu) return
586 585
@@ -591,7 +590,7 @@ export const generateMaps = (container, {
591 e.clientY < rect.top || 590 e.clientY < rect.top ||
592 e.clientY > rect.top + rect.height 591 e.clientY > rect.top + rect.height
593 ) { 592 ) {
594 menu.style.display = 'none' 593 menu.remove()
595 } 594 }
596 } 595 }
597 document.addEventListener('click', actionOutsideMenu) 596 document.addEventListener('click', actionOutsideMenu)
@@ -600,9 +599,6 @@ export const generateMaps = (container, {
600 ) 599 )
601 600
602 /** MOUSE: Drag/Drop on map for new GeoLink */ 601 /** MOUSE: Drag/Drop on map for new GeoLink */
603 const pointByArrow = document.createElement('div')
604 pointByArrow.className = 'point-by-arrow'
605 container.appendChild(pointByArrow)
606 container.ondragstart = () => false 602 container.ondragstart = () => false
607 container.onmousedown = (e) => { 603 container.onmousedown = (e) => {
608 // Check should start drag event for GeoLink 604 // Check should start drag event for GeoLink
@@ -615,6 +611,10 @@ export const generateMaps = (container, {
615 const mouseInRange = e.clientX < rect.right && e.clientX > rect.left && e.clientY < rect.bottom && e.clientY > rect.top 611 const mouseInRange = e.clientX < rect.right && e.clientX > rect.left && e.clientY < rect.bottom && e.clientY > rect.top
616 if (!mouseInRange) return 612 if (!mouseInRange) return
617 613
614 const pointByArrow = document.createElement('div')
615 pointByArrow.className = 'point-by-arrow'
616 container.appendChild(pointByArrow)
617
618 const timer = setTimeout(() => { 618 const timer = setTimeout(() => {
619 utils.dragForAnchor(container, range, pointByArrow) 619 utils.dragForAnchor(container, range, pointByArrow)
620 }, 300) 620 }, 300)
@@ -629,6 +629,7 @@ export const generateMaps = (container, {
629 container.onmousemove(e) 629 container.onmousemove(e)
630 container.onmouseup = () => { 630 container.onmouseup = () => {
631 clearTimeout(timer) 631 clearTimeout(timer)
632 pointByArrow.remove()
632 container.onmouseup = null 633 container.onmouseup = null
633 container.onmousemove = null 634 container.onmousemove = null
634 } 635 }