4 files changed, 134 insertions, 67 deletions

diff --git a/src/MenuItem.mjs b/src/MenuItem.mjs
index 7ce75f6..74b01d5 100644
--- a/src/MenuItem.mjs
+++ b/src/MenuItem.mjs
@@ -40,7 +40,9 @@ export class Item extends window.HTMLDivElement {
     }
   }
 }
-window.customElements.define('dumby-menu-item', Item, { extends: 'div' })
+if (!window.customElements.get('dumby-menu-item')) {
+  window.customElements.define('dumby-menu-item', Item, { extends: 'div' })
+}
 
 /**
  * Basic Element for menu item that generates a submenu on hover
@@ -80,7 +82,9 @@ export class Folder extends window.HTMLDivElement {
     }
   }
 }
-window.customElements.define('menu-folder', Folder, { extends: 'div' })
+if (!window.customElements.get('menu-folder')) {
+  window.customElements.define('menu-folder', Folder, { extends: 'div' })
+}
 
 /**
  * Creates a menu item for picking a map
@@ -232,7 +236,9 @@ export class Suggestion extends Item {
     }
   }
 }
-window.customElements.define('menu-item-suggestion', Suggestion, { extends: 'div' })
+if (!window.customElements.get('menu-item-suggestion')) {
+  window.customElements.define('menu-item-suggestion', Suggestion, { extends: 'div' })
+}
 
 /**
  * renderResults. return a menu item for reporting render results
diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index dc1f59b..c0bb1a9 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -161,12 +161,12 @@ root {
   &:hover, &.drag {
     background-image: none;
 
-    font-weight: bolder;
+    /* font-weight: bolder; */
     text-decoration: none;
   }
 }
 
-.dumby-block {
+.Dumby:not([data-layout=""]) .dumby-block {
   padding: 1rem 1rem 1rem 2rem;
 
   position: relative;
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index 8e26ee6..706e874 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -3,7 +3,7 @@ import MarkdownItAnchor from 'markdown-it-anchor'
 import MarkdownItFootnote from 'markdown-it-footnote'
 import MarkdownItFrontMatter from 'markdown-it-front-matter'
 import MarkdownItInjectLinenumbers from 'markdown-it-inject-linenumbers'
-import { renderWith, defaultAliases, parseConfigsFromYaml } from 'mapclay'
+import * as mapclay from 'mapclay'
 import { replaceTextNodes, onRemove, animateRectTransition, throttle, shiftByWindow } from './utils'
 import { Layout, SideBySide, Overlay } from './Layout'
 import * as utils from './dumbyUtils'
@@ -14,7 +14,7 @@ import { register, fromEPSGCode } from 'ol/proj/proj4'
 import LeaderLine from 'leader-line'
 
 /** CSS Selector for main components */
-const mapBlockSelector = 'pre:has(.language-map)'
+const mapBlockSelector = 'pre:has(.language-map), .mapclay-container'
 const docLinkSelector = 'a[href^="#"][title^="=>"]'
 const geoLinkSelector = 'a[href^="geo:"]'
 
@@ -86,6 +86,68 @@ export const markdown2HTML = (container, mdContent) => {
 }
 
 /**
+ * defaultBlocks.
+ * @description Default way to get blocks from Semantic HTML
+ * @param {HTMLElement} root
+ */
+const defaultBlocks = root => {
+  const articles = root.querySelectorAll('article')
+  if (articles.length > 2) return articles
+
+  const others = Array.from(
+    root.querySelectorAll(':has(>p, >blockquote, >pre, >ul, >ol, >table, >details)'),
+  )
+    .map(e => {
+      e.classList.add('dumby-block')
+      return e
+    })
+    .filter(e => {
+      const isContained = e.parentElement.closest('.dumby-block')
+      if (isContained) e.classList.remove('dumby-block')
+      return !isContained
+    })
+
+  return others
+}
+
+/**
+ * updateAttributeByStep.
+ * @description Update data attribute by steps of map render
+ * @param {Object} - renderer which is running steps
+ */
+const updateAttributeByStep = ({ results, target, steps }) => {
+  let passNum = results.filter(
+    r => r.type === 'render' && r.state.match(/success|skip/),
+  ).length
+  const total = steps.length
+  passNum += `/${total}`
+
+  const final = results.filter(r => r.type === 'render').length === total
+
+  // FIXME HACK use MutationObserver for animation
+  if (!target.animations) target.animations = Promise.resolve()
+  target.animations = target.animations.then(async () => {
+    await new Promise(resolve => setTimeout(resolve, 100))
+    if (final) passNum += '\x20'
+    target.dataset.report = passNum
+
+    if (final) setTimeout(() => delete target.dataset.report, 100)
+  })
+}
+
+/** Get default render method by converter */
+const defaultRender = mapclay.renderWith(config => ({
+  use: config.use ?? 'Leaflet',
+  width: '100%',
+  ...config,
+  aliases: {
+    ...mapclay.defaultAliases,
+    ...(config.aliases ?? {}),
+  },
+  stepCallback: updateAttributeByStep,
+}))
+
+/**
  * Generates maps based on the provided configuration
  *
  * @param {HTMLElement} container - The container element for the maps
@@ -96,30 +158,38 @@ export const markdown2HTML = (container, mdContent) => {
  */
 export const generateMaps = (container, {
   crs = 'EPSG:4326',
+  initialLayout,
   layouts = [],
   delay,
   renderCallback,
-  addBlocks = htmlHolder => Array.from(htmlHolder.querySelectorAll('article')),
+  addBlocks = defaultBlocks,
+  autoMap = false,
+  render = defaultRender,
 } = {}) => {
-  /** Prepare Contaner/HTML-Holder/Showcase */
+  /** Prepare Contaner */
   container.classList.add('Dumby')
   delete container.dataset.layout
-  container.dataset.layout = defaultLayouts[0].name
+  container.dataset.layout = initialLayout ?? defaultLayouts[0].name
 
-  const htmlHolder = container.querySelector('.SemanticHtml, :has(article, section)') ?? container.firstElementChild
+  /** Prepare Semantic HTML part and blocks of contents inside */
+  const htmlHolder = container.querySelector('.SemanticHtml') ??
+    Array.from(container.children).find(e => e.id?.includes('main') || e.className.includes('main')) ??
+    Array.from(container.children).sort((a, b) => a.textContent.length < b.textContent.length).at(0)
   htmlHolder.classList.add('.SemanticHtml')
+
   const blocks = addBlocks(htmlHolder)
   blocks.forEach(b => {
     b.classList.add('dumby-block')
     b.dataset.total = blocks.length
   })
 
+  /** Prepare Showcase */
   const showcase = document.createElement('div')
   container.appendChild(showcase)
   showcase.classList.add('Showcase')
-  const renderPromises = []
 
-  /** Prepare Modal */
+  /** Prepare Other Variables */
+  const renderPromises = []
   const modalContent = document.createElement('div')
   container.appendChild(modalContent)
   const modal = new PlainModal(modalContent)
@@ -175,13 +245,10 @@ export const generateMaps = (container, {
     register(proj4)
     fromEPSGCode(crs).then(() => resolve())
   })
-  const addGeoSchemeByText = new Promise(resolve => {
-    const coordPatterns = [
-      /[\x28\x5B\uFF08]\D*(-?\d+\.?\d*)([\x2F\s])(-?\d+\.?\d*)\D*[\x29\x5D\uFF09]/,
-      /(-?\d+\.?\d*)([,\uFF0C])(-?\d+\.?\d*)/,
-    ]
-    const re = new RegExp(coordPatterns.map(p => p.source).join('|'), 'g')
-    htmlHolder.querySelectorAll('p')
+  const addGeoSchemeByText = (async () => {
+    const coordPatterns = /(-?\d+\.?\d*)([,\x2F\uFF0C])(-?\d+\.?\d*)/
+    const re = new RegExp(coordPatterns, 'g')
+    htmlHolder.querySelectorAll('.dumby-block')
       .forEach(p => {
         replaceTextNodes(p, re, match => {
           const a = document.createElement('a')
@@ -190,8 +257,7 @@ export const generateMaps = (container, {
           return a
         })
       })
-    resolve()
-  })
+  })()
 
   Promise.all([setCRS, addGeoSchemeByText]).then(() => {
     Array.from(container.querySelectorAll(geoLinkSelector))
@@ -392,63 +458,26 @@ export const generateMaps = (container, {
   const elementsWithMapConfig = Array.from(
     container.querySelectorAll(mapBlockSelector) ?? [],
   )
-  /**
-   * updateAttributeByStep.
-   *
-   * @param {Object} - renderer which is running steps
-   */
-  const updateAttributeByStep = ({ results, target, steps }) => {
-    let passNum = results.filter(
-      r => r.type === 'render' && r.state.match(/success|skip/),
-    ).length
-    const total = steps.length
-    passNum += `/${total}`
-
-    const final = results.filter(r => r.type === 'render').length === total
-
-    // FIXME HACK use MutationObserver for animation
-    if (!target.animations) target.animations = Promise.resolve()
-    target.animations = target.animations.then(async () => {
-      await new Promise(resolve => setTimeout(resolve, 100))
-      if (final) passNum += '\x20'
-      target.dataset.report = passNum
-
-      if (final) setTimeout(() => delete target.dataset.report, 100)
-    })
+  if (autoMap && elementsWithMapConfig.length === 0) {
+    const mapContainer = document.createElement('pre')
+    mapContainer.className = 'mapclay-container'
+    mapContainer.textContent = '#Created by DumbyMap'
+    htmlHolder.insertBefore(mapContainer, htmlHolder.firstElementChild)
+    elementsWithMapConfig.push(mapContainer)
   }
-  /**
-   * config converter for mapclay.renderWith()
-   *
-   * @param {Object} config
-   * @return {Object} - converted config
-   */
-  const configConverter = config => ({
-    use: config.use ?? 'Leaflet',
-    width: '100%',
-    ...config,
-    aliases: {
-      ...defaultAliases,
-      ...(config.aliases ?? {}),
-    },
-    stepCallback: updateAttributeByStep,
-  })
-
-  /** Get render method by converter */
-  const render = renderWith(configConverter)
 
   /** Render each taget element for maps */
   let order = 0
   elementsWithMapConfig.forEach(target => {
     // Get text in code block starts with markdown text '```map'
     const configText = target
-      .querySelector('.language-map')
       .textContent // BE CAREFUL!!! 0xa0 char is "non-breaking spaces" in HTML text content
       // replace it by normal space
       .replace(/\u00A0/g, '\u0020')
 
     let configList = []
     try {
-      configList = parseConfigsFromYaml(configText).map(assignMapId)
+      configList = mapclay.parseConfigsFromYaml(configText).map(assignMapId)
     } catch (_) {
       console.warn('Fail to parse yaml config for element', target)
       return
@@ -510,7 +539,7 @@ export const generateMaps = (container, {
   container.oncontextmenu = e => {
     menu.replaceChildren()
     menu.style.display = 'block'
-    menu.style.cssText = `left: ${e.x - menu.offsetParent.offsetLeft + 10}px; top: ${e.y - menu.offsetParent.offsetTop + 5}px;`
+    menu.style.cssText = `left: ${e.clientX - menu.offsetParent.offsetLeft + 10}px; top: ${e.clientY - menu.offsetParent.offsetTop + 5}px;`
     e.preventDefault()
 
     // Menu Items for map
diff --git a/src/utils.mjs b/src/utils.mjs
index 1fe3ce5..327bee4 100644
--- a/src/utils.mjs
+++ b/src/utils.mjs
@@ -177,3 +177,35 @@ export const replaceTextNodes = (
     node = nodeIterator.nextNode()
   }
 }
+
+/**
+ * Get the common ancestor of two or more elements
+ * {@link https://gist.github.com/kieranbarker/cd86310d0782b7c52ce90cd7f45bb3eb}
+ * @param {String} selector A valid CSS selector
+ * @returns {Element} The common ancestor
+ */
+export function getCommonAncestor (selector) {
+  // Get the elements matching the selector
+  const elems = document.querySelectorAll(selector)
+
+  // If there are no elements, return null
+  if (elems.length < 1) return null
+
+  // If there's only one element, return it
+  if (elems.length < 2) return elems[0]
+
+  // Otherwise, create a new Range
+  const range = document.createRange()
+
+  // Start at the beginning of the first element
+  range.setStart(elems[0], 0)
+
+  // Stop at the end of the last element
+  range.setEnd(
+    elems[elems.length - 1],
+    elems[elems.length - 1].childNodes.length,
+  )
+
+  // Return the common ancestor
+  return range.commonAncestorContainer
+}