feat(mapclay): add callback to indicate rendering progress

2 files changed, 74 insertions, 10 deletions

diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index 7b7f393..c6782fc 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -52,6 +52,8 @@ root {
   position: relative;
   transform-origin: top left;
 
+  transition: flex-basis 300ms ease-in-out;
+
   &.focus::after {
     content: 'Map-ID: ' attr(id);
     padding: 0.3rem 0.5rem;
@@ -75,18 +77,52 @@ root {
     opacity: 0;
     animation: 1.5s forwards fade-out cubic-bezier(0.44, 0.18, 0.86, -0.21);
   }
+
+  &[data-report*='/'] {
+    &::after {
+      content: attr(data-report);
+      padding: 0.3rem 0.5rem;
+
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      z-index: 9999;
+
+      border: solid transparent;
+      border-radius: 5px;
+
+      background: gray;
+
+      color: white;
+      font-size: 1.5rem;
+      font-weight: bold;
+      line-height: 1.2;
+
+      transform: translate(-50%, -50%);
+    }
+
+    &[data-render='fulfilled'][data-report$="\20"]::after {
+      content: '\2714  ' attr(data-report);
+      animation: 1.5s forwards fade-out cubic-bezier(0.44, 0.18, 0.86, -0.21);
+    }
+
+    &[data-render='unfulfilled'][data-report$="\20"]::after {
+      content: '\2716  ' attr(data-report);
+      animation: 2.5s forwards fade-out cubic-bezier(0.44, 0.18, 0.86, -0.21);
+    }
+  }
 }
 
 .with-leader-line:not(:has(> *)) {
   display: inline-block;
+  padding-right: 15px;
+  padding-left: 6px;
 
   background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cG9seWdvbiBwb2ludHM9IjI0LDAgMCw4IDgsMTEgMCwxOSA1LDI0IDEzLDE2IDE2LDI0IiBmaWxsPSJjb3JhbCIvPjwvc3ZnPg==');
   background-repeat: no-repeat;
   background-position: right 2px top 2px;
 
   color: #555;
-  padding-right: 15px;
-  padding-left: 6px;
   background-size: 12px 12px;
 
   &.geolink {
@@ -219,9 +255,9 @@ root {
 .SemanticHtml {
   display: flex;
   flex-direction: column;
+  justify-content: flex-start;
   height: 100%;
   gap: 1rem;
-  justify-content: flex-start;
   overflow-y: auto;
 
   /* Trivial: gray out text not focused */
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index cb029de..241c6b9 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -426,19 +426,47 @@ export const generateMaps = (container, { delay, mapCallback }) => {
 
   // Render each code block with "language-map" class
   const elementsWithMapConfig = Array.from(
-    container.querySelectorAll("pre:has(.language-map)") ?? [],
-  );
-  // Add default aliases into each config
+    container.querySelectorAll('pre:has(.language-map)') ?? []
+  )
+  /**
+   * updateAttributeByStep.
+   *
+   * @param {Object} -- renderer which is running steps
+   */
+  const updateAttributeByStep = ({ results, target, steps }) => {
+    let passNum = results
+      .filter(r => r.type === 'step' && r.state.match(/success|skip/))
+      .length
+    const total = steps.length;
+    passNum  += `/${total}`;
+    if (results.filter(r=>r.type === 'step').length === total) {
+      passNum += '\u0020'
+    }
+
+    // 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, 150));
+      target.setAttribute('data-report', passNum);
+    });
+  }
+  /**
+   * config converter for mapclay.renderWith()
+   *
+   * @param {Object} config
+   * @return {Object} -- converted config
+   */
   const configConverter = config => ({
-    use: config.use ?? "Leaflet",
-    width: "100%",
+    use: config.use ?? 'Leaflet',
+    width: '100%',
     ...config,
     aliases: {
       ...defaultAliases,
       ...(config.aliases ?? {}),
     },
-  });
-  const render = renderWith(configConverter);
+    stepCallback: updateAttributeByStep,
+  })
+  const render = renderWith(configConverter)
   elementsWithMapConfig.forEach(target => {
     // Get text in code block starts with markdown text '```map'
     const configText = target