@ohos-ports/jsvectormap 1.7.0-beta.0

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@ohos-ports/jsvectormap",
+  "version": "1.7.0-beta.0",
+  "description": "A lightweight Javascript library for creating interactive maps",
+  "main": "dist/jsvectormap.min.js",
+  "jsdelivr": "dist/jsvectormap.min.js",
+  "exports": {
+    ".": {
+      "import": "./dist/jsvectormap.esm.js",
+      "default": "./dist/jsvectormap.min.js",
+      "require": "./dist/jsvectormap.cjs",
+      "style": "./dist/jsvectormap.css",
+      "sass": "./src/scss/jsvectormap.scss"
+    },
+    "./*": "./*"
+  },
+  "style": "dist/jsvectormap.min.css",
+  "sass": "src/scss/jsvectormap.scss",
+  "author": {
+    "name": "Mustafa Omar",
+    "email": "themustafaomar@gmail.com"
+  },
+  "scripts": {
+    "dev": "rollup --config --watch",
+    "build": "rollup --config ./build/package.js"
+  },
+  "keywords": [
+    "javascript",
+    "interactive",
+    "vector",
+    "map",
+    "svg"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ohos-ports/ohos-ports.git",
+    "directory": "ports/jsvectormap/1.7.0"
+  },
+  "bugs": {
+    "url": "https://github.com/ohos-ports/ohos-ports/issues"
+  },
+  "homepage": "https://jvm-docs.vercel.app",
+  "license": "MIT"
+}

package/src/js/components/base.js

@@ -0,0 +1,18 @@
+import { removeElement } from '../util'
+
+class BaseComponent {
+  dispose() {
+    if (this._tooltip) {
+      removeElement(this._tooltip)
+    } else {
+      // @todo: move shape in base component in v2
+      this.shape.remove()
+    }
+
+    for (const propertyName of Object.getOwnPropertyNames(this)) {
+      this[propertyName] = null
+    }
+  }
+}
+
+export default BaseComponent

package/src/js/components/concerns/interactable.js

@@ -0,0 +1,68 @@
+const Interactable = {
+  getLabelText(key, label) {
+    if (!label) {
+      return
+    }
+
+    if (typeof label.render === 'function') {
+      let params = []
+
+      // Pass additional paramater (Marker config object) in case it's a Marker.
+      if (this.constructor.Name === 'marker') {
+        params.push(this.getConfig())
+      }
+
+      // Becuase we need to add the key always at the end
+      params.push(key)
+
+      return label.render.apply(this, params)
+    }
+
+    return key
+  },
+
+  getLabelOffsets(key, label) {
+    if (typeof label.offsets === 'function') {
+      return label.offsets(key)
+    }
+
+    // If offsets are an array of offsets e.g offsets: [ [0, 25], [10, 15] ]
+    if (Array.isArray(label.offsets)) {
+      return label.offsets[key]
+    }
+
+    return [0, 0]
+  },
+
+  setStyle(property, value) {
+    this.shape.setStyle(property, value)
+  },
+
+  remove() {
+    this.shape.remove()
+    if (this.label) this.label.remove()
+  },
+
+  hover(state) {
+    this._setStatus('isHovered', state)
+  },
+
+  select(state) {
+    this._setStatus('isSelected', state)
+  },
+
+  // Private
+
+  _setStatus(property, state) {
+    this.shape[property] = state
+    this.shape.updateStyle()
+    this[property] = state
+
+    if (this.label) {
+      this.label[property] = state
+      this.label.updateStyle()
+    }
+  }
+}
+
+export default Interactable

package/src/js/components/line.js

@@ -0,0 +1,50 @@
+import BaseComponent from './base'
+
+const LINE_CLASS = 'jvm-line'
+
+class Line extends BaseComponent {
+  constructor(options, style) {
+    super()
+    this._options = options
+    this._style = { initial: style }
+    this._draw()
+  }
+
+  setStyle(property, value) {
+    this.shape.setStyle(property, value)
+  }
+
+  getConfig() {
+    return this._options.config
+  }
+
+  _draw() {
+    const { index, group, map } = this._options
+    const config = {
+      d: this._getDAttribute(),
+      fill: 'none',
+      dataIndex: index,
+    }
+
+    this.shape = map.canvas.createPath(config, this._style, group)
+    this.shape.addClass(LINE_CLASS)
+  }
+
+  _getDAttribute() {
+    const { x1, y1, x2, y2, curvature } = this._options
+    return `M${x1},${y1}${this._getQCommand(x1, y1, x2, y2, curvature)}${x2},${y2}`
+  }
+
+  _getQCommand(x1, y1, x2, y2, curvature) {
+    if (!curvature) {
+      return ' '
+    }
+
+    const curveX = (x1 + x2) / 2 + curvature * (y2 - y1)
+    const curveY = (y1 + y2) / 2 - curvature * (x2 - x1)
+
+    return ` Q${curveX},${curveY} `
+  }
+}
+
+export default Line

package/src/js/components/marker.js

@@ -0,0 +1,109 @@
+import { inherit } from '../util'
+import BaseComponent from './base'
+import Interactable from './concerns/interactable'
+
+const NAME = 'marker'
+const JVM_PREFIX = 'jvm-'
+const MARKER_CLASS = `${JVM_PREFIX}element ${JVM_PREFIX}marker`
+const MARKER_LABEL_CLASS = `${JVM_PREFIX}element ${JVM_PREFIX}label`
+
+class Marker extends BaseComponent {
+  static get Name() {
+    return NAME
+  }
+
+  constructor(options, style) {
+    super()
+
+    this._options = options
+    this._style = style
+    this._labelX = null
+    this._labelY = null
+    this._offsets = null
+    this._isImage = !!style.initial.image
+
+    this._draw()
+
+    if (this._options.label) {
+      this._drawLabel()
+    }
+
+    if (this._isImage) {
+      this.updateLabelPosition()
+    }
+  }
+
+  getConfig() {
+    return this._options.config
+  }
+
+  updateLabelPosition() {
+    const map = this._options.map
+    if (this.label) {
+      this.label.set({
+        x:
+          this._labelX * map.scale +
+          this._offsets[0] +
+          map.transX * map.scale +
+          5 +
+          (this._isImage
+            ? (this.shape.width || 0) / 2
+            : this.shape.node.r.baseVal.value),
+        y:
+          this._labelY * map.scale +
+          map.transY * this._options.map.scale +
+          this._offsets[1],
+      })
+    }
+  }
+
+  _draw() {
+    const { index, map, group, cx, cy } = this._options
+    const shapeType = this._isImage ? 'createImage' : 'createCircle'
+
+    this.shape = map.canvas[shapeType](
+      { dataIndex: index, cx, cy },
+      this._style,
+      group
+    )
+    this.shape.addClass(MARKER_CLASS)
+  }
+
+  _drawLabel() {
+    const {
+      index,
+      map,
+      label,
+      labelsGroup,
+      cx,
+      cy,
+      config,
+      isRecentlyCreated,
+    } = this._options
+    const labelText = this.getLabelText(index, label)
+
+    this._labelX = cx / map.scale - map.transX
+    this._labelY = cy / map.scale - map.transY
+    this._offsets = isRecentlyCreated && config.offsets ? config.offsets : this.getLabelOffsets(index, label)
+    this.label = map.canvas.createText(
+      {
+        text: labelText,
+        dataIndex: index,
+        x: this._labelX,
+        y: this._labelY,
+        dy: '0.6ex',
+      },
+      map.params.markerLabelStyle,
+      labelsGroup
+    )
+    this.label.addClass(MARKER_LABEL_CLASS)
+
+    if (isRecentlyCreated) {
+      this.updateLabelPosition()
+    }
+  }
+}
+
+inherit(Marker, Interactable)
+
+export default Marker

package/src/js/components/region.js

@@ -0,0 +1,53 @@
+import { inherit } from '../util'
+import BaseComponent from './base'
+import Interactable from './concerns/interactable'
+
+class Region extends BaseComponent {
+  constructor({ map, code, path, style, label, labelStyle, labelsGroup }) {
+    super()
+
+    this._map = map
+    this.shape = this._createRegion(path, code, style)
+
+    const text = this.getLabelText(code, label)
+
+    // If label is passed and render function returns something 
+    if (label && text) {
+      const bbox = this.shape.getBBox()
+      const offsets = this.getLabelOffsets(code, label)
+
+      this.labelX = bbox.x + bbox.width / 2 + offsets[0]
+      this.labelY = bbox.y + bbox.height / 2 + offsets[1]
+
+      this.label = this._map.canvas.createText({
+        text,
+        textAnchor: 'middle',
+        alignmentBaseline: 'central',
+        dataCode: code,
+        x: this.labelX,
+        y: this.labelY,
+      }, labelStyle, labelsGroup)
+
+      this.label.addClass('jvm-region jvm-element')
+    }
+  }
+
+  _createRegion(path, code, style) {
+    path = this._map.canvas.createPath({ d: path, dataCode: code }, style)
+    path.addClass('jvm-region jvm-element')
+    return path
+  }
+
+  updateLabelPosition() {
+    if (this.label) {
+      this.label.set({
+        x: this.labelX * this._map.scale + this._map.transX * this._map.scale,
+        y: this.labelY * this._map.scale + this._map.transY * this._map.scale
+      })
+    }
+  }
+}
+
+inherit(Region, Interactable)
+
+export default Region

package/src/js/components/route.js

@@ -0,0 +1,76 @@
+import Component from './base';
+
+export class Route extends Component {
+  constructor(options, style) {
+    super();
+    this._options = options;
+    this._style = style;
+    this._draw();
+  }
+
+  _draw() {
+    const { node: path } = this._options.map.canvas.createPath(
+      {
+        d: this._getDAttribute(),
+        fill: 'none',
+        stroke: '#666',
+        strokeWidth: 1,
+        dataIndex: this._options.index,
+        'stroke-dasharray': '2 4 2',
+      },
+      this.style,
+      this._options.group
+    );
+
+    // Get the total length of the path
+    const totalLength = path.getTotalLength();
+
+    // Initialize the stroke dash array and offset to create the drawing effect
+    path.style.strokeDasharray = totalLength;
+    path.style.strokeDashoffset = totalLength;
+
+    // Animate the stroke dash offset to draw the line
+    path.animate([{ strokeDashoffset: totalLength }, { strokeDashoffset: 0 }], {
+      duration: 4000, // Duration of the animation
+      easing: 'linear', // Easing function
+      fill: 'forwards', // Keep the line visible after animation ends
+    });
+  }
+
+  _getDAttribute() {
+    const curvature = -0.2;
+    const points = this._getPoints();
+    let d = `M${points[0].x},${points[0].y}`;
+    for (let i = 0; i < points.length - 1; i++) {
+      const nextPoint = points[i + 1];
+      const cpX =
+        (points[i].x + nextPoint.x) / 2 +
+        curvature * (nextPoint.y - points[i].y);
+      const cpY =
+        (points[i].y + nextPoint.y) / 2 -
+        curvature * (nextPoint.x - points[i].x);
+      d += ` Q${cpX},${cpY} ${nextPoint.x},${nextPoint.y}`;
+    }
+    // let d = `M${points[0].x},${points[0].y}`
+    // for (let i = 1; i < points.length; i++) {
+    //   d += ` L${points[i].x},${points[i].y}`
+    // }
+    return d
+  }
+
+  _getPoints() {
+    const map = this._options.map;
+    const points = [];
+
+    for (let i = 0; i < this._options.waypoints.length; i++) {
+      const p = this._options.map.getMarkerPosition({
+        coords: [
+          this._options.waypoints[i].lat,
+          this._options.waypoints[i].lng,
+        ],
+      });
+      points.push(p);
+    }
+    return points;
+  }
+}

package/src/js/components/tooltip.js

@@ -0,0 +1,88 @@
+import {
+  createElement,
+  findElement,
+} from '../util'
+import EventHandler from '../eventHandler'
+import BaseComponent from './base'
+
+class Tooltip extends BaseComponent {
+  constructor(map) {
+    super()
+
+    const tooltip = createElement('div', 'jvm-tooltip')
+
+    this._map = map
+    this._tooltip = document.body.appendChild(tooltip)
+
+    this._bindEventListeners()
+
+    return this
+  }
+
+  _bindEventListeners() {
+    EventHandler.on(this._map.container, 'mousemove', event => {
+      if (!this._tooltip.classList.contains('active')) {
+        return
+      }
+
+      const container = findElement(this._map.container, '#jvm-regions-group').getBoundingClientRect()
+      const space = 5 // Space between the cursor and tooltip element
+
+      // Tooltip
+      const { height, width } = this._tooltip.getBoundingClientRect()
+      const topIsPassed = event.clientY <= (container.top + height + space)
+      let top = event.pageY - height - space
+      let left = event.pageX - width - space
+
+      // Ensure the tooltip will never cross outside the canvas area(map)
+      if (topIsPassed) { // Top:
+        top += height + space
+
+        // The cursor is a bit larger from left side
+        left -= space * 2
+      }
+
+      if (event.clientX < (container.left + width + space)) { // Left:
+        left = event.pageX + space + 2
+
+        if (topIsPassed) {
+          left += space * 2
+        }
+      }
+
+      this.css({ top: `${top}px`, left: `${left}px` })
+    })
+  }
+
+  getElement() {
+    return this._tooltip
+  }
+
+  show() {
+    this._tooltip.classList.add('active')
+  }
+
+  hide() {
+    this._tooltip.classList.remove('active')
+  }
+
+  text(string, html = false) {
+    const property = html ? 'innerHTML' : 'textContent'
+
+    if (!string) {
+      return this._tooltip[property]
+    }
+
+    this._tooltip[property] = string
+  }
+
+  css(css) {
+    for (let style in css) {
+      this._tooltip.style[style] = css[style]
+    }
+
+    return this
+  }
+}
+
+export default Tooltip

package/src/js/core/applyTransform.js

@@ -0,0 +1,43 @@
+export default function applyTransform() {
+  let maxTransX, maxTransY, minTransX, minTransY
+
+  if (this._defaultWidth * this.scale <= this._width) {
+    maxTransX = (this._width - this._defaultWidth * this.scale) / (2 * this.scale)
+    minTransX = (this._width - this._defaultWidth * this.scale) / (2 * this.scale)
+  } else {
+    maxTransX = 0
+    minTransX = (this._width - this._defaultWidth * this.scale) / this.scale
+  }
+
+  if (this._defaultHeight * this.scale <= this._height) {
+    maxTransY = (this._height - this._defaultHeight * this.scale) / (2 * this.scale)
+    minTransY = (this._height - this._defaultHeight * this.scale) / (2 * this.scale)
+  } else {
+    maxTransY = 0
+    minTransY = (this._height - this._defaultHeight * this.scale) / this.scale
+  }
+
+  if (this.transY > maxTransY) {
+    this.transY = maxTransY
+  } else if (this.transY < minTransY) {
+    this.transY = minTransY
+  }
+
+  if (this.transX > maxTransX) {
+    this.transX = maxTransX
+  } else if (this.transX < minTransX) {
+    this.transX = minTransX
+  }
+
+  this.canvas.applyTransformParams(this.scale, this.transX, this.transY)
+ 
+  if (this._markers) {
+    this._repositionMarkers()
+  }
+
+  if (this._lines) {
+    this._repositionLines()
+  }
+
+  this._repositionLabels()
+}

package/src/js/core/coordsToPoint.js

@@ -0,0 +1,22 @@
+import Map from '../map'
+import Proj from '../projection'
+
+export default function coordsToPoint(lat, lng) {
+  const projection = Map.maps[this.params.map].projection
+  let { x, y } = Proj[projection.type](lat, lng, projection.centralMeridian)
+  let inset = this.getInsetForPoint(x, y)
+
+  if (!inset) {
+    return false
+  }
+
+  let bbox = inset.bbox
+
+  x = (x - bbox[0].x) / (bbox[1].x - bbox[0].x) * inset.width * this.scale
+  y = (y - bbox[0].y) / (bbox[1].y - bbox[0].y) * inset.height * this.scale
+
+  return {
+    x: x + this.transX * this.scale + inset.left * this.scale,
+    y: y + this.transY * this.scale + inset.top * this.scale
+  }
+}

package/src/js/core/createLines.js

@@ -0,0 +1,44 @@
+import { merge, getLineUid } from '../util'
+import Line from '../components/line'
+
+export default function createLines(lines) {
+  let point1 = false, point2 = false
+  const { curvature, ...lineStyle } = this.params.lineStyle
+
+  for (let index in lines) {
+    const lineConfig = lines[index]
+
+    for (let { config: markerConfig } of Object.values(this._markers)) {
+      if (markerConfig.name === lineConfig.from) {
+        point1 = this.getMarkerPosition(markerConfig)
+      }
+
+      if (markerConfig.name === lineConfig.to) {
+        point2 = this.getMarkerPosition(markerConfig)
+      }
+    }
+
+    if (point1 !== false && point2 !== false) {
+      const {
+        curvature: curvatureOption,
+        ...style
+      } = lineConfig.style || {}
+
+      // Register lines with unique keys
+      this._lines[getLineUid(lineConfig.from, lineConfig.to)] = new Line(
+        {
+          index,
+          map: this,
+          group: this._linesGroup,
+          config: lineConfig,
+          x1: point1.x,
+          y1: point1.y,
+          x2: point2.x,
+          y2: point2.y,
+          curvature: curvatureOption == 0 ? 0 : (curvatureOption || curvature),
+        },
+        merge(lineStyle, style, true)
+      )
+    }
+  }
+}

package/src/js/core/createMarkers.js

@@ -0,0 +1,55 @@
+import { merge } from '../util'
+import Marker from '../components/marker'
+
+export default function createMarkers(markers = {}, isRecentlyCreated = false) {
+  for (let index in markers) {
+    const config = markers[index]
+    const point = this.getMarkerPosition(config)
+    const uid = config.coords.join(':')
+
+    if (!point) {
+      continue
+    }
+
+    // We're checking if recently created marker does already exist
+    // If it does we don't need to create it again, so we'll continue
+    // Becuase we may have more than one marker submitted via `addMarkers` method.
+    if (isRecentlyCreated) {
+      if (
+        Object.keys(this._markers).filter(i => this._markers[i]._uid === uid).length
+      ) {
+        continue
+      }
+
+      index = Object.keys(this._markers).length
+    }
+
+    const marker = new Marker(
+      {
+        index,
+        map: this,
+        label: this.params.labels && this.params.labels.markers,
+        labelsGroup: this._markerLabelsGroup,
+        cx: point.x,
+        cy: point.y,
+        group: this._markersGroup,
+        config,
+        isRecentlyCreated,
+      },
+      merge(this.params.markerStyle, { ...(config.style || {}) }, true)
+    )
+
+    // Check for marker duplication
+    // this is useful when for example: a user clicks a button for creating marker two times
+    // so it will remove the old one and the new one will take its place.
+    if (this._markers[index]) {
+      this.removeMarkers([index])
+    }
+
+    this._markers[index] = {
+      _uid: uid,
+      config: config,
+      element: marker,
+    }
+  }
+}