1 files changed, 91 insertions, 62 deletions

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