aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/dumbymap.mjs
diff options
context:
space:
mode:
Diffstat (limited to 'src/dumbymap.mjs')
-rw-r--r--src/dumbymap.mjs93
1 files changed, 3 insertions, 90 deletions
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index edc1521..bb98cea 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -152,87 +152,10 @@ export const generateMaps = (container, { delay, mapCallback }) => {
152 utils.createDocLink 152 utils.createDocLink
153 ) 153 )
154 154
155 // Get anchors with "geo:" scheme 155 // Add GeoLinks
156 htmlHolder.anchors = [] 156 container.querySelectorAll(geoLinkSelector)
157 const geoLinkCallback = link => { 157 .forEach(utils.createGeoLink)
158 link.onmouseover = () => addLeaderLines(link)
159 link.onmouseout = () => removeLeaderLines(link)
160 link.onclick = event => {
161 event.preventDefault()
162 htmlHolder.anchors
163 .filter(isAnchorPointedBy(link))
164 .forEach(updateMapByMarker(link.xy))
165 // TODO Just hide leader line and show it again
166 removeLeaderLines(link)
167 }
168 }
169 const geoLinks = Array.from(
170 container.querySelectorAll(geoLinkSelector)
171 ).filter(l => utils.createGeoLink(l, geoLinkCallback))
172
173 const isAnchorPointedBy = link => anchor => {
174 const mapContainer = anchor.closest('.mapclay')
175 const isTarget = !link.targets || link.targets.includes(mapContainer.id)
176 return anchor.title === link.url.searchParams.get('text') && isTarget
177 }
178
179 const isAnchorVisible = anchor => {
180 const mapContainer = anchor.closest('.mapclay')
181 return insideWindow(anchor) && insideParent(anchor, mapContainer)
182 }
183
184 const drawLeaderLine = link => anchor => {
185 const line = new LeaderLine({
186 start: link,
187 end: anchor,
188 hide: true,
189 middleLabel: link.url.searchParams.get('text'),
190 path: 'magnet'
191 })
192 line.show('draw', { duration: 300 })
193 return line
194 }
195
196 const addLeaderLines = link => {
197 link.lines = htmlHolder.anchors
198 .filter(isAnchorPointedBy(link))
199 .filter(isAnchorVisible)
200 .map(drawLeaderLine(link))
201 }
202 158
203 const removeLeaderLines = link => {
204 if (!link.lines) return
205 link.lines.forEach(line => line.remove())
206 link.lines = []
207 }
208
209 const updateMapByMarker = xy => marker => {
210 const renderer = marker.closest('.mapclay')?.renderer
211 renderer.updateCamera({ center: xy }, true)
212 }
213
214 const insideWindow = element => {
215 const rect = element.getBoundingClientRect()
216 return (
217 rect.left > 0 &&
218 rect.right < window.innerWidth + rect.width &&
219 rect.top > 0 &&
220 rect.bottom < window.innerHeight + rect.height
221 )
222 }
223
224 const insideParent = (childElement, parentElement) => {
225 const childRect = childElement.getBoundingClientRect()
226 const parentRect = parentElement.getBoundingClientRect()
227 const offset = 20
228
229 return (
230 childRect.left > parentRect.left + offset &&
231 childRect.right < parentRect.right - offset &&
232 childRect.top > parentRect.top + offset &&
233 childRect.bottom < parentRect.bottom - offset
234 )
235 }
236 // }}} 159 // }}}
237 // CSS observer {{{ 160 // CSS observer {{{
238 // Focus Map {{{ 161 // Focus Map {{{
@@ -378,16 +301,6 @@ export const generateMaps = (container, { delay, mapCallback }) => {
378 301
379 // Execute callback from caller 302 // Execute callback from caller
380 mapCallback?.call(this, mapElement) 303 mapCallback?.call(this, mapElement)
381 const markers = geoLinks
382 .filter(link => !link.targets || link.targets.includes(mapElement.id))
383 .map(link => ({ xy: link.xy, title: link.url.searchParams.get('text') }))
384
385 // FIXME Here may cause error
386 // Add markers with Geolinks
387 renderer.addMarkers(markers)
388 mapElement
389 .querySelectorAll('.marker')
390 .forEach(marker => htmlHolder.anchors.push(marker))
391 } 304 }
392 305
393 // Set unique ID for map container 306 // Set unique ID for map container