diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/dumbyUtils.mjs | 1 | ||||
| -rw-r--r-- | src/dumbymap.mjs | 39 |
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 | } |