feat: add menu items for dumbymap.utils

3 files changed, 56 insertions, 11 deletions

diff --git a/src/MenuItem.mjs b/src/MenuItem.mjs
index 1b04d1c..85ab1a2 100644
--- a/src/MenuItem.mjs
+++ b/src/MenuItem.mjs
@@ -1,5 +1,32 @@
 import { createGeoLink } from './dumbymap'
 
+export function nextMap() {
+  const element = document.createElement('div')
+  element.className = 'menu-item'
+  element.innerHTML = 'Next Map <span class="info">(Tab)</span>'
+  element.onclick = () => this.utils.focusNextMap()
+
+  return element
+}
+
+export function nextBlock() {
+  const element = document.createElement('div')
+  element.className = 'menu-item'
+  element.innerHTML = 'Next Block <span class="info">(n)</span>'
+  element.onclick = () => this.utils.focusNextBlock()
+
+  return element
+}
+
+export function nextLayout() {
+  const element = document.createElement('div')
+  element.className = 'menu-item'
+  element.innerHTML = 'Next Layout <span class="info">(x)</span>'
+  element.onclick = () => this.utils.switchToNextLayout()
+
+  return element
+}
+
 export class GeoLink {
 
   constructor({ range }) {
@@ -8,7 +35,7 @@ export class GeoLink {
 
   createElement = () => {
     const element = document.createElement('div')
-    element.className = 'menu-item-add-geolink'
+    element.className = 'menu-item'
     element.innerText = "Add GeoLink"
     element.onclick = this.addGeoLinkbyRange
 
diff --git a/src/css/index.css b/src/css/index.css
index a5fd37f..a84a029 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -114,7 +114,7 @@ body {
   z-index: 100;
 
   border: 2px solid gray;
-  border-radius: 0.5rem;
+  border-radius: 6px;
 
   background: white;
   min-width: 10rem;
@@ -164,8 +164,21 @@ body {
   }
 }
 
-.menu-item-add-geolink {
+.menu-item {
+  display: flex;
   padding: 0.5rem;
 
+  z-index: 9999;
+
   cursor: pointer;
+  justify-content: space-between;
+
+  &:hover {
+    background: rgb(226 232 240);
+  }
+
+  .info {
+    color: steelblue;
+    font-weight: bold;
+  }
 }
diff --git a/src/editor.mjs b/src/editor.mjs
index 297d75a..ea80a19 100644
--- a/src/editor.mjs
+++ b/src/editor.mjs
@@ -2,7 +2,7 @@
 /*eslint no-undef: "error"*/
 import { markdown2HTML, generateMaps } from './dumbymap'
 import { defaultAliases, parseConfigsFromYaml } from 'mapclay'
-import { GeoLink, Suggestion } from './MenuItem'
+import * as menuItem from './MenuItem'
 
 // Set up Containers {{{
 
@@ -300,7 +300,7 @@ const getSuggestionsForOptions = (optionTyped, validOptions) => {
   }
 
   return suggestOptions
-    .map(o => new Suggestion({
+    .map(o => new menuItem.Suggestion({
       text: `<span>${o.valueOf()}</span><span class='info' title="${o.desc ?? ''}">ⓘ</span>`,
       replace: `${o.valueOf()}: `,
     }))
@@ -314,7 +314,7 @@ const getSuggestionFromMapOption = (option) => {
     ? `<span>${option.example_desc}</span><span class="truncate"style="color: gray">${option.example}</span>`
     : `<span>${option.example}</span>`
 
-  return new Suggestion({
+  return new menuItem.Suggestion({
     text: text,
     replace: `${option.valueOf()}: ${option.example ?? ""}`,
   })
@@ -325,7 +325,7 @@ const getSuggestionsFromAliases = (option) => Object.entries(aliasesForMapOption
   ?.map(record => {
     const [alias, value] = record
     const valueString = JSON.stringify(value).replaceAll('"', '')
-    return new Suggestion({
+    return new menuItem.Suggestion({
       text: `<span>${alias}</span><span class="truncate" style="color: gray">${valueString}</span>`,
       replace: `${option.valueOf()}: ${valueString}`,
     })
@@ -420,7 +420,7 @@ const getSuggestions = (anchor) => {
         return [
           getSuggestionFromMapOption(matchedOption),
           ...getSuggestionsFromAliases(matchedOption)
-        ].filter(s => s instanceof Suggestion)
+        ].filter(s => s instanceof menuItem.Suggestion)
       }
       if (valueTyped && !isValidValue) {
         markInputIsInvalid()
@@ -439,7 +439,7 @@ const getSuggestions = (anchor) => {
           (suggestionPattern.includes(textPattern))
       })
       .map(([renderer, info]) =>
-        new Suggestion({
+        new menuItem.Suggestion({
           text: `<span>use: ${renderer}</span><span class='info' title="${info.desc}">ⓘ</span>`,
           replace: `use: ${renderer}`,
         })
@@ -577,15 +577,20 @@ layoutObserver.observe(HtmlContainer, {
 // }}}
 // ContextMenu {{{
 document.oncontextmenu = (e) => {
+  if (cm.hasFocus()) return
+
   const selection = document.getSelection()
   const range = selection.getRangeAt(0)
-  if (!cm.hasFocus() && selection) {
+  if (selection) {
     e.preventDefault()
     menu.innerHTML = ''
     menu.style.cssText = `display: block; left: ${e.clientX + 10}px; top: ${e.clientY + 5}px;`
-    const addGeoLink = new GeoLink({ range })
+    const addGeoLink = new menuItem.GeoLink({ range })
     menu.appendChild(addGeoLink.createElement())
   }
+  menu.appendChild(menuItem.nextMap.bind(dumbymap)())
+  menu.appendChild(menuItem.nextBlock.bind(dumbymap)())
+  menu.appendChild(menuItem.nextLayout.bind(dumbymap)())
 }
 
 const actionOutsideMenu = (e) => {