diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/dumbymap.mjs | 88 |
1 files changed, 46 insertions, 42 deletions
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs index 47c629c..72e864e 100644 --- a/src/dumbymap.mjs +++ b/src/dumbymap.mjs | |||
| @@ -138,7 +138,7 @@ export const markdown2HTML = (container, mdContent) => { | |||
| 138 | //}}} | 138 | //}}} |
| 139 | } | 139 | } |
| 140 | // FIXME Don't use hard-coded CSS selector | 140 | // FIXME Don't use hard-coded CSS selector |
| 141 | export const generateMaps = async (container) => { | 141 | export const generateMaps = async (container, callback) => { |
| 142 | // LeaderLine {{{ | 142 | // LeaderLine {{{ |
| 143 | 143 | ||
| 144 | // Get anchors with "geo:" scheme | 144 | // Get anchors with "geo:" scheme |
| @@ -250,51 +250,55 @@ export const generateMaps = async (container) => { | |||
| 250 | // Render each code block with "language-map" class | 250 | // Render each code block with "language-map" class |
| 251 | const render = renderWith(config => ({ width: "100%", ...config })) | 251 | const render = renderWith(config => ({ width: "100%", ...config })) |
| 252 | const renderTargets = Array.from(container.querySelectorAll('pre:has(.language-map)')) | 252 | const renderTargets = Array.from(container.querySelectorAll('pre:has(.language-map)')) |
| 253 | const renderAllTargets = renderTargets.map(async (target) => { | 253 | .map(async (target) => { |
| 254 | // Get text in code block starts with '```map' | 254 | // Get text in code block starts with '```map' |
| 255 | const configText = target.querySelector('.language-map') | 255 | const configText = target.querySelector('.language-map') |
| 256 | .textContent | 256 | .textContent |
| 257 | // BE CAREFUL!!! 0xa0 char is "non-breaking spaces" in HTML text content | 257 | // BE CAREFUL!!! 0xa0 char is "non-breaking spaces" in HTML text content |
| 258 | // replace it by normal space | 258 | // replace it by normal space |
| 259 | .replace(/\u00A0/g, '\u0020') | 259 | .replace(/\u00A0/g, '\u0020') |
| 260 | 260 | ||
| 261 | let configList = [] | 261 | let configList = [] |
| 262 | try { | 262 | try { |
| 263 | configList = parseConfigsFromYaml(configText).map(assignMapId) | 263 | configList = parseConfigsFromYaml(configText).map(assignMapId) |
| 264 | } catch (_) { | 264 | } catch (_) { |
| 265 | console.warn('Fail to parse yaml config for element', target) | 265 | console.warn('Fail to parse yaml config for element', target) |
| 266 | } | 266 | } |
| 267 | 267 | ||
| 268 | // Render maps | 268 | // Render maps |
| 269 | return render(target, configList) | 269 | return render(target, configList) |
| 270 | .then(results => { | 270 | .then(results => { |
| 271 | results.forEach((mapByConfig) => { | 271 | results.forEach((mapByConfig) => { |
| 272 | if (mapByConfig.status === 'fulfilled') { | 272 | if (mapByConfig.status === 'fulfilled') { |
| 273 | afterEachMapLoaded(mapByConfig.value) | 273 | afterEachMapLoaded(mapByConfig.value) |
| 274 | return mapByConfig.value | 274 | return mapByConfig.value |
| 275 | } else { | 275 | } else { |
| 276 | console.error('Fail to render target element', mapByConfig.reason) | 276 | console.error('Fail to render target element', mapByConfig.reason) |
| 277 | } | 277 | } |
| 278 | }) | ||
| 278 | }) | 279 | }) |
| 279 | }) | ||
| 280 | }) | ||
| 281 | const renderInfo = await Promise.all(renderAllTargets).then(() => 'Finish Rendering') | ||
| 282 | const maps = htmlHolder.querySelectorAll('.map-container') ?? [] | ||
| 283 | Array.from(maps) | ||
| 284 | .forEach(ele => { | ||
| 285 | const markers = geoLinks | ||
| 286 | .filter(link => !link.targets || link.targets.include(ele.id)) | ||
| 287 | .map(link => ({ | ||
| 288 | xy: link.xy, | ||
| 289 | title: link.url.pathname | ||
| 290 | })) | ||
| 291 | ele?.renderer?.addMarkers(markers) | ||
| 292 | }) | 280 | }) |
| 293 | 281 | ||
| 294 | htmlHolder.querySelectorAll('.marker') | 282 | const renderAllTargets = Promise.all(renderTargets) |
| 295 | .forEach(marker => htmlHolder.anchors.push(marker)) | 283 | renderAllTargets.then(() => { |
| 284 | console.info('Finish Rendering') | ||
| 285 | |||
| 286 | const maps = htmlHolder.querySelectorAll('.map-container') ?? [] | ||
| 287 | Array.from(maps) | ||
| 288 | .forEach(ele => { | ||
| 289 | callback(ele) | ||
| 290 | const markers = geoLinks | ||
| 291 | .filter(link => !link.targets || link.targets.include(ele.id)) | ||
| 292 | .map(link => ({ | ||
| 293 | xy: link.xy, | ||
| 294 | title: link.url.pathname | ||
| 295 | })) | ||
| 296 | ele?.renderer?.addMarkers(markers) | ||
| 297 | }) | ||
| 296 | 298 | ||
| 297 | console.info(renderInfo) | 299 | htmlHolder.querySelectorAll('.marker') |
| 300 | .forEach(marker => htmlHolder.anchors.push(marker)) | ||
| 301 | }) | ||
| 298 | 302 | ||
| 299 | //}}} | 303 | //}}} |
| 300 | // Draggable Blocks{{{ | 304 | // Draggable Blocks{{{ |
| @@ -407,5 +411,5 @@ export const generateMaps = async (container) => { | |||
| 407 | onRemove(htmlHolder, () => layoutObserver.disconnect()) | 411 | onRemove(htmlHolder, () => layoutObserver.disconnect()) |
| 408 | //}}} | 412 | //}}} |
| 409 | //}}} | 413 | //}}} |
| 410 | return container | 414 | return renderAllTargets |
| 411 | } | 415 | } |