@ohos-ports/jsvectormap 1.7.0-beta.0

package/src/js/core/createRegions.js

@@ -0,0 +1,23 @@
+import { merge } from '../util'
+import Region from '../components/region'
+
+export default function createRegions() {
+  this._regionLabelsGroup = this._regionLabelsGroup || this.canvas.createGroup('jvm-regions-labels-group')
+
+  for (const code in this._mapData.paths) {
+    const region = new Region({
+      map: this,
+      code: code,
+      path: this._mapData.paths[code].path,
+      style: merge({}, this.params.regionStyle),
+      labelStyle: this.params.regionLabelStyle, 
+      labelsGroup: this._regionLabelsGroup,
+      label: this.params.labels && this.params.labels.regions,
+    })
+
+    this.regions[code] = {
+      config: this._mapData.paths[code],
+      element: region,
+    }
+  }
+}

package/src/js/core/createRoutes.js

@@ -0,0 +1,16 @@
+import waypoints from "../../../../playground/data/waypoints"
+import { Route } from "../components/route"
+
+export default function createRoutes(routes) {
+  this._routes = {}
+
+  let index = 0
+  for (let route of routes) {
+    this._routes[route.name] = new Route({
+      map: this,
+      group: this._routesGroup,
+      waypoints: route.data,
+      index: index++,
+    }, {})
+  }
+}

package/src/js/core/createSeries.js

@@ -0,0 +1,13 @@
+import Series from '../series'
+
+export default function createSeries() {
+  this.series = { markers: [], regions: [] }
+
+  for (const key in this.params.series) {
+    for (let i = 0; i < this.params.series[key].length; i++) {
+      this.series[key][i] = new Series(
+        this.params.series[key][i], key === 'markers' ? this._markers : this.regions, this
+      )
+    }
+  }
+}

package/src/js/core/getInsetForPoint.js

@@ -0,0 +1,13 @@
+import Map from '../map'
+
+export default function getInsetForPoint(x, y) {
+  const insets = Map.maps[this.params.map].insets
+
+  for (let index = 0; index < insets.length; index++) {
+    const [start, end] = insets[index].bbox
+
+    if (x > start.x && x < end.x && y > start.y && y < end.y) {
+      return insets[index]
+    }
+  }
+}

package/src/js/core/getMarkerPosition.js

@@ -0,0 +1,12 @@
+import Map from '../map'
+
+export default function getMarkerPosition({ coords }) {
+  if (Map.maps[this.params.map].projection) {
+    return this.coordsToPoint(...coords)
+  }
+
+  return {
+    x: coords[0] * this.scale + this.transX * this.scale,
+    y: coords[1] * this.scale + this.transY * this.scale
+  }
+}

package/src/js/core/index.js

@@ -0,0 +1,41 @@
+import _setupContainerEvents from './setupContainerEvents'
+import _setupElementEvents from './setupElementEvents'
+import _setupZoomButtons from './setupZoomButtons'
+import _setupContainerTouchEvents from './setupContainerTouchEvents'
+import _createRegions from './createRegions'
+import _createLines from './createLines'
+import _createMarkers from './createMarkers'
+import _createSeries from './createSeries'
+import _applyTransform from './applyTransform'
+import _resize from './resize'
+import _setScale from './setScale'
+import setFocus from './setFocus'
+import updateSize from './updateSize'
+import coordsToPoint from './coordsToPoint'
+import getInsetForPoint from './getInsetForPoint'
+import getMarkerPosition from './getMarkerPosition'
+import _repositionLines from './repositionLines'
+import _repositionMarkers from './repositionMarkers'
+import _repositionLabels from './repositionLabels'
+
+export default {
+  _setupContainerEvents,
+  _setupElementEvents,
+  _setupZoomButtons,
+  _setupContainerTouchEvents,
+  _createRegions,
+  _createLines,
+  _createMarkers,
+  _createSeries,
+  _applyTransform,
+  _resize,
+  _setScale,
+  setFocus,
+  updateSize,
+  coordsToPoint,
+  getInsetForPoint,
+  getMarkerPosition,
+  _repositionLines,
+  _repositionMarkers,
+  _repositionLabels,
+}

package/src/js/core/repositionLabels.js

@@ -0,0 +1,21 @@
+export default function repositionLabels() {
+  const labels = this.params.labels
+
+  if (!labels) {
+    return
+  }
+
+  // Regions labels
+  if (labels.regions) {
+    for (const key in this.regions) {
+      this.regions[key].element.updateLabelPosition()
+    }
+  }
+
+  // Markers labels
+  if (labels.markers) {
+    for (const key in this._markers) {
+      this._markers[key].element.updateLabelPosition()
+    }
+  }
+}

package/src/js/core/repositionLines.js

@@ -0,0 +1,30 @@
+export default function repositionLines() {
+  const curvature = this.params.lineStyle.curvature
+
+  Object.values(this._lines).forEach((line) => {
+    const startMarker = Object.values(this._markers).find(
+      ({ config }) => config.name === line.getConfig().from
+    )
+
+    const endMarker = Object.values(this._markers).find(
+      ({ config }) => config.name === line.getConfig().to
+    )
+
+    if (startMarker && endMarker) {
+      const { x: x1, y: y1 } = this.getMarkerPosition(startMarker.config)
+      const { x: x2, y: y2 } = this.getMarkerPosition(endMarker.config)
+      const curvatureOption = line._options.curvature == 0
+        ? 0
+        : line._options.curvature || curvature
+
+      const midX = (x1 + x2) / 2
+      const midY = (y1 + y2) / 2
+      const curveX = midX + curvatureOption * (y2 - y1)
+      const curveY = midY - curvatureOption * (x2 - x1)
+
+      line.setStyle({
+        d: `M${x1},${y1} Q${curveX},${curveY} ${x2},${y2}`,
+      })
+    }
+  })
+}

package/src/js/core/repositionMarkers.js

@@ -0,0 +1,11 @@
+export default function repositionMarkers() {
+  for (const index in this._markers) {
+    const point = this.getMarkerPosition(this._markers[index].config)
+
+    if (point !== false) {
+      this._markers[index].element.setStyle({
+        cx: point.x, cy: point.y
+      })
+    }
+  }
+}

package/src/js/core/resize.js

@@ -0,0 +1,15 @@
+export default function resize() {
+  const curBaseScale = this._baseScale
+
+  if (this._width / this._height > this._defaultWidth / this._defaultHeight) {
+    this._baseScale = this._height / this._defaultHeight
+    this._baseTransX = Math.abs(this._width - this._defaultWidth * this._baseScale) / (2 * this._baseScale)
+  } else {
+    this._baseScale = this._width / this._defaultWidth
+    this._baseTransY = Math.abs(this._height - this._defaultHeight * this._baseScale) / (2 * this._baseScale)
+  }
+
+  this.scale *= this._baseScale / curBaseScale
+  this.transX *= this._baseScale / curBaseScale
+  this.transY *= this._baseScale / curBaseScale
+}

package/src/js/core/setFocus.js

@@ -0,0 +1,46 @@
+export default function setFocus(config = {}) {
+  let bbox, codes = []
+
+  if (config.region) {
+    codes.push(config.region)
+  } else if (config.regions) {
+    codes = config.regions
+  }
+
+  if (codes.length) {
+    codes.forEach((code) => {
+      if (this.regions[code]) {
+        let itemBbox = this.regions[code].element.shape.getBBox()
+
+        if (itemBbox) {
+          // Handle the first loop
+          if (typeof bbox == 'undefined') {
+            bbox = itemBbox
+          } else {
+            // get the old bbox properties plus the current
+            // this kinda incrementing the old values and the new values
+            bbox = {
+              x: Math.min(bbox.x, itemBbox.x),
+              y: Math.min(bbox.y, itemBbox.y),
+              width: Math.max(bbox.x + bbox.width, itemBbox.x + itemBbox.width) - Math.min(bbox.x, itemBbox.x),
+              height: Math.max(bbox.y + bbox.height, itemBbox.y + itemBbox.height) - Math.min(bbox.y, itemBbox.y),
+            }
+          }
+        }
+      }
+    })
+
+    return this._setScale(
+      Math.min(this._width / bbox.width, this._height / bbox.height),
+      -(bbox.x + bbox.width / 2),
+      -(bbox.y + bbox.height / 2),
+      true,
+      config.animate,
+    )
+  } else if (config.coords) {
+    const point = this.coordsToPoint(config.coords[0], config.coords[1])
+    const x = this.transX - point.x / this.scale
+    const y = this.transY - point.y / this.scale
+    return this._setScale(config.scale * this._baseScale, x, y, true, config.animate)
+  }
+}

package/src/js/core/setScale.js

@@ -0,0 +1,65 @@
+import Events from '../defaults/events'
+
+export default function setScale(scale, anchorX, anchorY, isCentered, animate) {
+  let zoomStep,
+    interval,
+    i = 0,
+    count = Math.abs(Math.round((scale - this.scale) * 60 / Math.max(scale, this.scale))),
+    scaleStart,
+    scaleDiff,
+    transXStart,
+    transXDiff,
+    transYStart,
+    transYDiff,
+    transX,
+    transY
+
+  if (scale > this.params.zoomMax * this._baseScale) {
+    scale = this.params.zoomMax * this._baseScale
+  } else if (scale < this.params.zoomMin * this._baseScale) {
+    scale = this.params.zoomMin * this._baseScale
+  }
+
+  if (typeof anchorX != 'undefined' && typeof anchorY != 'undefined') {
+    zoomStep = scale / this.scale
+    if (isCentered) {
+      transX = anchorX + this._defaultWidth * (this._width / (this._defaultWidth * scale)) / 2
+      transY = anchorY + this._defaultHeight * (this._height / (this._defaultHeight * scale)) / 2
+    } else {
+      transX = this.transX - (zoomStep - 1) / scale * anchorX
+      transY = this.transY - (zoomStep - 1) / scale * anchorY
+    }
+  }
+
+  if (animate && count > 0) {
+    scaleStart = this.scale
+    scaleDiff = (scale - scaleStart) / count
+    transXStart = this.transX * this.scale
+    transYStart = this.transY * this.scale
+    transXDiff = (transX * scale - transXStart) / count
+    transYDiff = (transY * scale - transYStart) / count
+    interval = setInterval(() => {
+      i += 1
+      this.scale = scaleStart + scaleDiff * i
+      this.transX = (transXStart + transXDiff * i) / this.scale
+      this.transY = (transYStart + transYDiff * i) / this.scale
+      this._applyTransform()
+      if (i == count) {
+        clearInterval(interval)
+
+        this._emit(Events.onViewportChange, [
+          this.scale, this.transX, this.transY
+        ])
+      }
+    }, 10)
+  } else {
+    this.transX = transX
+    this.transY = transY
+    this.scale = scale
+
+    this._applyTransform()
+    this._emit(Events.onViewportChange, [
+      this.scale, this.transX, this.transY
+    ])
+  }
+}

package/src/js/core/setupContainerEvents.js

@@ -0,0 +1,50 @@
+import EventHandler from '../eventHandler'
+
+export default function setupContainerEvents() {
+  const map = this
+  let mouseDown = false
+  let oldPageX
+  let oldPageY
+
+  if (this.params.draggable) {
+    EventHandler.on(this.container, 'mousemove', (e) => {
+      if (!mouseDown) {
+        return false
+      }
+
+      map.transX -= (oldPageX - e.pageX) / map.scale
+      map.transY -= (oldPageY - e.pageY) / map.scale
+      map._applyTransform()
+      oldPageX = e.pageX
+      oldPageY = e.pageY
+    })
+
+    EventHandler.on(this.container, 'mousedown', (e) => {
+      mouseDown = true
+      oldPageX = e.pageX
+      oldPageY = e.pageY
+      return false
+    })
+
+    EventHandler.on(document.body, 'mouseup', () => {
+      mouseDown = false
+    })
+  }
+
+  if (this.params.zoomOnScroll) {
+    EventHandler.on(this.container, 'wheel', event => {
+      const deltaY = (((event.deltaY || -event.wheelDelta || event.detail) >> 10) || 1) * 75
+      const rect = this.container.getBoundingClientRect()
+      const offsetX = event.pageX - rect.left - window.scrollX
+      const offsetY = event.pageY - rect.top - window.scrollY
+      const zoomStep = Math.pow(1 + (map.params.zoomOnScrollSpeed / 1000), -1.5 * deltaY)
+
+      if (map.tooltip) {
+        map._tooltip.hide()
+      }
+
+      map._setScale(map.scale * zoomStep, offsetX, offsetY)
+      event.preventDefault()
+    })
+  }
+}

package/src/js/core/setupContainerTouchEvents.js

@@ -0,0 +1,85 @@
+import EventHandler from '../eventHandler'
+
+export default function setupContainerTouchEvents() {
+  let map = this,
+      touchStartScale,
+      touchStartDistance,
+      touchX,
+      touchY,
+      centerTouchX,
+      centerTouchY,
+      lastTouchesLength
+
+  let handleTouchEvent = e => {
+    const touches = e.touches
+    let offset, scale, transXOld, transYOld
+
+    if (e.type == 'touchstart') {
+      lastTouchesLength = 0
+    }
+
+    if (touches.length == 1) {
+      if (lastTouchesLength == 1) {
+        transXOld = map.transX
+        transYOld = map.transY
+        map.transX -= (touchX - touches[0].pageX) / map.scale
+        map.transY -= (touchY - touches[0].pageY) / map.scale
+
+        map._tooltip?.hide()
+        map._applyTransform()
+
+        if (transXOld != map.transX || transYOld != map.transY) {
+          e.preventDefault()
+        }
+      }
+
+      touchX = touches[0].pageX
+      touchY = touches[0].pageY
+    } else if (touches.length == 2) {
+      if (lastTouchesLength == 2) {
+        scale = Math.sqrt(
+          Math.pow(touches[0].pageX - touches[1].pageX, 2) +
+          Math.pow(touches[0].pageY - touches[1].pageY, 2)
+        ) / touchStartDistance
+
+        map._setScale(touchStartScale * scale, centerTouchX, centerTouchY)
+
+        map._tooltip?.hide()
+        e.preventDefault()
+      } else {
+        let rect = map.container.getBoundingClientRect()
+
+        offset = {
+          top: rect.top + window.scrollY,
+          left: rect.left + window.scrollX,
+        }
+
+        if (touches[0].pageX > touches[1].pageX) {
+          centerTouchX = touches[1].pageX + (touches[0].pageX - touches[1].pageX) / 2
+        } else {
+          centerTouchX = touches[0].pageX + (touches[1].pageX - touches[0].pageX) / 2
+        }
+
+        if (touches[0].pageY > touches[1].pageY) {
+          centerTouchY = touches[1].pageY + (touches[0].pageY - touches[1].pageY) / 2
+        } else {
+          centerTouchY = touches[0].pageY + (touches[1].pageY - touches[0].pageY) / 2
+        }
+
+        centerTouchX -= offset.left
+        centerTouchY -= offset.top
+        touchStartScale = map.scale
+
+        touchStartDistance = Math.sqrt(
+          Math.pow(touches[0].pageX - touches[1].pageX, 2) +
+          Math.pow(touches[0].pageY - touches[1].pageY, 2)
+        )
+      }
+    }
+
+    lastTouchesLength = touches.length
+  }
+
+  EventHandler.on(map.container, 'touchstart', handleTouchEvent)
+  EventHandler.on(map.container, 'touchmove', handleTouchEvent)
+}

package/src/js/core/setupElementEvents.js

@@ -0,0 +1,112 @@
+import { getElement } from '../util'
+import EventHandler from '../eventHandler'
+import Events from '../defaults/events'
+
+const parseEvent = (map, selector, isTooltip) => {
+  const element = getElement(selector)
+  const type = element.getAttribute('class').indexOf('jvm-region') === -1 ? 'marker' : 'region'
+  const isRegion = type === 'region'
+  const code = isRegion ? element.getAttribute('data-code') : element.getAttribute('data-index')
+  let event = isRegion ? Events.onRegionSelected : Events.onMarkerSelected
+
+  // Init tooltip event
+  if (isTooltip) {
+    event = isRegion ? Events.onRegionTooltipShow : Events.onMarkerTooltipShow
+  }
+
+  return {
+    type,
+    code,
+    event,
+    element: isRegion ? map.regions[code].element : map._markers[code].element,
+    tooltipText: isRegion ? map._mapData.paths[code].name || '' : (map._markers[code].config.name || '')
+  }
+}
+
+export default function setupElementEvents() {
+  const map = this
+  const container = this.container
+  let pageX, pageY, mouseMoved
+
+  EventHandler.on(container, 'mousemove', (event) => {
+    if (Math.abs(pageX - event.pageX) + Math.abs(pageY - event.pageY) > 2) {
+      mouseMoved = true
+    }
+  })
+
+  // When the mouse is pressed
+  EventHandler.delegate(container, 'mousedown', '.jvm-element', (event) => {
+    pageX = event.pageX
+    pageY = event.pageY
+    mouseMoved = false
+  })
+
+  // When the mouse is over the region/marker | When the mouse is out the region/marker
+  EventHandler.delegate(container, 'mouseover mouseout', '.jvm-element', function (event) {
+    const data = parseEvent(map, this, true)
+    const { showTooltip } = map.params
+
+    if (event.type === 'mouseover') {
+      data.element.hover(true)
+
+      if (showTooltip) {
+        map._tooltip.text(data.tooltipText)
+        map._emit(data.event, [event, map._tooltip, data.code])
+        if (!event.defaultPrevented) {
+          map._tooltip.show()
+        }
+      }
+    } else {
+      data.element.hover(false)
+
+      if (showTooltip) {
+        map._tooltip.hide()
+      }
+    }
+  })
+
+  // When the click is released
+  EventHandler.delegate(container, 'mouseup', '.jvm-element', function (event) {
+    const data = parseEvent(map, this)
+
+    if (mouseMoved) {
+      return
+    }
+
+    if (
+      (data.type === 'region' && map.params.regionsSelectable) ||
+      (data.type === 'marker' && map.params.markersSelectable)
+    ) {
+      const element = data.element
+
+      // We're checking if regions/markers|SelectableOne option is presented
+      if (map.params[`${data.type}sSelectableOne`]) {
+        data.type === 'region' ? map.clearSelectedRegions() : map.clearSelectedMarkers()
+      }
+
+      if (data.element.isSelected) {
+        element.select(false)
+      } else {
+        element.select(true)
+      }
+
+      map._emit(data.event, [
+        data.code,
+        element.isSelected,
+        data.type === 'region'
+          ? map.getSelectedRegions()
+          : map.getSelectedMarkers()
+      ])
+    }
+  })
+
+  // When region/marker is clicked
+  EventHandler.delegate(container, 'click', '.jvm-element', function (event) {
+    const { type, code } = parseEvent(map, this)
+
+    map._emit(
+      type === 'region' ? Events.onRegionClick : Events.onMarkerClick,
+      [event, code]
+    )
+  })
+}

package/src/js/core/setupZoomButtons.js

@@ -0,0 +1,40 @@
+import { createElement } from '../util'
+import EventHandler from '../eventHandler'
+
+export default function setupZoomButtons() {
+  const zoomInOption = this.params.zoomInButton
+  const zoomOutOption = this.params.zoomOutButton
+
+  const getZoomButton = (zoomOption) => typeof zoomOption === 'string'
+    ? document.querySelector(zoomOption)
+    : zoomOption
+
+  const zoomIn = zoomInOption
+    ? getZoomButton(zoomInOption)
+    : createElement('div', 'jvm-zoom-btn jvm-zoomin', '+', true)
+
+  const zoomOut = zoomOutOption
+    ? getZoomButton(zoomOutOption)
+    : createElement('div', 'jvm-zoom-btn jvm-zoomout', '&#x2212', true)
+
+  if (!zoomInOption) {
+    this.container.appendChild(zoomIn)
+  }
+
+  if (!zoomOutOption) {
+    this.container.appendChild(zoomOut)
+  }
+
+  const handler = (zoomin = true) => {
+    return () => this._setScale(
+      zoomin ? this.scale * this.params.zoomStep : this.scale / this.params.zoomStep,
+      this._width / 2,
+      this._height / 2,
+      false,
+      this.params.zoomAnimate
+    )
+  }
+
+  EventHandler.on(zoomIn, 'click', handler())
+  EventHandler.on(zoomOut, 'click', handler(false))
+}

package/src/js/core/updateSize.js

@@ -0,0 +1,7 @@
+export default function updateSize() {
+  this._width = this.container.offsetWidth
+  this._height = this.container.offsetHeight
+  this._resize()
+  this.canvas.setSize(this._width, this._height)
+  this._applyTransform()
+}