ts-maps 0.0.0

package/dist/set-focus.d.ts

@@ -0,0 +1,58 @@
+declare interface BBox {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export default function setFocus(this: MapInterface, config: FocusOnOptions = {}): void {
+  let bbox: BBox | undefined
+  let codes: string[] = []
+
+  if (config.region) {
+    codes.push(config.region)
+  }
+  else if (config.regions) {
+    codes = config.regions
+  }
+
+  if (codes.length) {
+    codes.forEach((code) => {
+      if (this.regions[code]) {
+        const itemBbox = this.regions[code].element.shape.getBBox()
+
+        if (itemBbox) {
+          if (typeof bbox === 'undefined') {
+            bbox = itemBbox
+          }
+          else {
+            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),
+            }
+          }
+        }
+      }
+    })
+
+    if (bbox) {
+      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])
+    if (point) {
+      const x = this.transX - point.x / this.scale
+      const y = this.transY - point.y / this.scale
+      return this._setScale(config.scale ? config.scale * this._baseScale : this._baseScale, x, y, true, config.animate)
+    }
+  }
+};

package/dist/set-scale.d.ts

@@ -0,0 +1,80 @@
+export default function setScale(
+  this: MapInterface,
+  scale: number,
+  anchorX: number,
+  anchorY: number,
+  isCentered?: boolean,
+  animate?: boolean,
+): void {
+  let zoomStep: number
+  let interval: ReturnType<typeof setInterval>
+  let i = 0
+  const count = Math.abs(Math.round((scale - this.scale) * 60 / Math.max(scale, this.scale)))
+  let scaleStart: number
+  let scaleDiff: number
+  let transXStart: number
+  let transXDiff: number
+  let transYStart: number
+  let transYDiff: number
+  let transX = this.transX
+  let transY = this.transY
+
+  const zoomMax = this.params.zoomMax ?? 8
+  const zoomMin = this.params.zoomMin ?? 1
+
+  if (scale > zoomMax * this._baseScale) {
+    scale = zoomMax * this._baseScale
+  }
+  else if (scale < zoomMin * this._baseScale) {
+    scale = 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/dist/setup-container-events.d.ts

@@ -0,0 +1,48 @@
+export default function setupContainerEvents(this: MapInterface): void {
+  let mouseDown = false
+  let oldPageX: number | undefined
+  let oldPageY: number | undefined
+
+  if (this.params.draggable) {
+    EventHandler.on(this.container, 'mousemove', ((e) => {
+      if (!mouseDown) {
+        return false
+      }
+
+      const mouseEvent = e as MouseEvent
+      if (oldPageX !== undefined && oldPageY !== undefined) {
+        this.transX -= (oldPageX - mouseEvent.pageX) / this.scale
+        this.transY -= (oldPageY - mouseEvent.pageY) / this.scale
+        this.canvas.applyTransformParams(this.scale, this.transX, this.transY)
+      }
+      oldPageX = mouseEvent.pageX
+      oldPageY = mouseEvent.pageY
+    }) as EventListener)
+
+    EventHandler.on(this.container, 'mousedown', ((e) => {
+      mouseDown = true
+      const mouseEvent = e as MouseEvent
+      oldPageX = mouseEvent.pageX
+      oldPageY = mouseEvent.pageY
+      return false
+    }) as EventListener)
+
+    EventHandler.on(document.body, 'mouseup', () => {
+      mouseDown = false
+    })
+  }
+
+  if (this.params.zoomOnScroll) {
+    EventHandler.on(this.container, 'wheel', ((e) => {
+      const wheelEvent = e as WheelEvent
+      const deltaY = (((wheelEvent.deltaY || 0) >> 10) || 1) * 75
+      const rect = this.container.getBoundingClientRect()
+      const offsetX = wheelEvent.pageX - rect.left - window.scrollX
+      const offsetY = wheelEvent.pageY - rect.top - window.scrollY
+      const zoomStep = (1 + ((this.params.zoomOnScrollSpeed || 3) / 1000)) ** (-1.5 * deltaY)
+
+      setScale.call(this, this.scale * zoomStep, offsetX, offsetY)
+      e.preventDefault()
+    }) as EventListener)
+  }
+};

package/dist/setup-container-touch-events.d.ts

@@ -0,0 +1,68 @@
+export default function setupContainerTouchEvents(this: MapInterface): void {
+  let touchStartScale = 1
+  let touchStartDistance = 0
+  let centerTouchX = 0
+  let centerTouchY = 0
+  let lastTouchesLength = 0
+  let touchStartX = 0
+  let touchStartY = 0
+  let offset = { top: 0, left: 0 }
+
+  const handleTouchEvent = (e: TouchEvent) => {
+    const touches = e.touches
+    let currentScale = this.scale
+
+    if (touches.length === 1) {
+      if (lastTouchesLength === 1) {
+        const touch = touches[0]
+        if (touchStartScale === currentScale) {
+          this.transX -= (touchStartX - touch.pageX) / currentScale
+          this.transY -= (touchStartY - touch.pageY) / currentScale
+          this.canvas.applyTransformParams(currentScale, this.transX, this.transY)
+        }
+        touchStartX = touch.pageX
+        touchStartY = touch.pageY
+      }
+    }
+    else if (touches.length === 2) {
+      if (lastTouchesLength === 2) {
+        currentScale = Math.sqrt(
+          (touches[0].pageX - touches[1].pageX) ** 2
+          + (touches[0].pageY - touches[1].pageY) ** 2,
+        ) / touchStartDistance
+
+        setScale.call(this, touchStartScale * currentScale, centerTouchX, centerTouchY, false, false)
+        e.preventDefault()
+      }
+      else {
+        const rect = this.container.getBoundingClientRect()
+        offset = {
+          top: rect.top + window.scrollY,
+          left: rect.left + window.scrollX,
+        }
+
+        centerTouchX = touches[0].pageX > touches[1].pageX
+          ? touches[1].pageX + (touches[0].pageX - touches[1].pageX) / 2
+          : touches[0].pageX + (touches[1].pageX - touches[0].pageX) / 2
+
+        centerTouchY = touches[0].pageY > touches[1].pageY
+          ? touches[1].pageY + (touches[0].pageY - touches[1].pageY) / 2
+          : touches[0].pageY + (touches[1].pageY - touches[0].pageY) / 2
+
+        centerTouchX -= offset.left
+        centerTouchY -= offset.top
+        touchStartScale = this.scale
+
+        touchStartDistance = Math.sqrt(
+          (touches[0].pageX - touches[1].pageX) ** 2
+          + (touches[0].pageY - touches[1].pageY) ** 2,
+        )
+      }
+    }
+
+    lastTouchesLength = touches.length
+  }
+
+  EventHandler.on(this.container, 'touchstart', handleTouchEvent as EventListener)
+  EventHandler.on(this.container, 'touchmove', handleTouchEvent as EventListener)
+};

package/dist/setup-element-events.d.ts

@@ -0,0 +1,125 @@
+import type { MapInterface } from '../types';
+
+declare interface ElementWithInteraction {
+  hover?: (state: boolean) => void
+  select?: (state: boolean) => void
+  isSelected?: boolean
+  isHovered?: boolean
+  shape?: any
+}
+declare interface ParseEventResult {
+  type: 'region' | 'marker'
+  code: string
+  event: string
+  element: ElementWithInteraction
+  tooltipText: string
+}
+declare function parseEvent(map: MapInterface, selector: Element | string, isTooltip?: boolean): ParseEventResult;
+
+export default function setupElementEvents(this: MapInterface): void {
+  const container = this.container
+  let pageX: number | undefined
+  let pageY: number | undefined
+  let mouseMoved = false
+
+  EventHandler.on(container, 'mousemove', ((e: Event) => {
+    const mouseEvent = e as MouseEvent
+    if (Math.abs((pageX || 0) - mouseEvent.pageX) + Math.abs((pageY || 0) - mouseEvent.pageY) > 2) {
+      mouseMoved = true
+    }
+  }) as EventListener)
+
+  EventHandler.delegate(container, 'mousedown', '.jvm-element', ((e: Event) => {
+    const mouseEvent = e as MouseEvent
+    pageX = mouseEvent.pageX
+    pageY = mouseEvent.pageY
+    mouseMoved = false
+  }) as EventListener)
+
+  EventHandler.delegate(container, 'mouseover mouseout', '.jvm-element', ((e: Event) => {
+    try {
+      const data = parseEvent(this, (e.target as Element), true)
+      const { showTooltip } = this.params
+      const tooltip = this._tooltip
+
+      if (e.type === 'mouseover') {
+        if (typeof data.element.hover === 'function') {
+          data.element.hover(true)
+        }
+
+        if (showTooltip && tooltip) {
+          tooltip.text(data.tooltipText)
+          tooltip.show(data.tooltipText)
+          this._emit(data.event, [e, tooltip.getElement(), data.code])
+        }
+      }
+      else {
+        if (typeof data.element.hover === 'function') {
+          data.element.hover(false)
+        }
+
+        if (showTooltip && tooltip) {
+          tooltip.hide()
+        }
+      }
+    }
+    catch (error) {
+      console.error('Error in mouseover/mouseout handler:', error)
+    }
+  }) as EventListener)
+
+  EventHandler.delegate(container, 'mouseup', '.jvm-element', ((e: Event) => {
+    try {
+      const data = parseEvent(this, (e.target as Element), false)
+
+      if (mouseMoved) {
+        return
+      }
+
+      if (
+        (data.type === 'region' && this.params.regionsSelectable)
+        || (data.type === 'marker' && this.params.markersSelectable)
+      ) {
+        const element = data.element
+
+        if (this.params[`${data.type}sSelectableOne`]) {
+          data.type === 'region' ? this.clearSelectedRegions() : this.clearSelectedMarkers()
+        }
+
+        if (typeof element.select === 'function') {
+          if (element.isSelected) {
+            element.select(false)
+          }
+          else {
+            element.select(true)
+          }
+
+          this._emit(data.event, [
+            data.code,
+            element.isSelected,
+            data.type === 'region'
+              ? this.getSelectedRegions()
+              : this.getSelectedMarkers(),
+          ])
+        }
+      }
+    }
+    catch (error) {
+      console.error('Error in mouseup handler:', error)
+    }
+  }) as EventListener)
+
+  EventHandler.delegate(container, 'click', '.jvm-element', ((e: Event) => {
+    try {
+      const { type, code } = parseEvent(this, (e.target as Element), false)
+
+      this._emit(
+        type === 'region' ? Events.onRegionClick : Events.onMarkerClick,
+        [e, code],
+      )
+    }
+    catch (error) {
+      console.error('Error in click handler:', error)
+    }
+  }) as EventListener)
+};

package/dist/setup-zoom-buttons.d.ts

@@ -0,0 +1,21 @@
+export default function setupZoomButtons(this: MapInterface): void {
+  const zoomin = createElement('div', 'jvm-zoom-btn jvm-zoomin', '+', true)
+  const zoomout = createElement('div', 'jvm-zoom-btn jvm-zoomout', '&#x2212', true)
+
+  this.container.appendChild(zoomin)
+  this.container.appendChild(zoomout)
+
+  const handler = (zoomin = true) => {
+    return () => setScale.call(
+      this,
+      zoomin ? this.scale * (this.params.zoomStep || 1.5) : this.scale / (this.params.zoomStep || 1.5),
+      this._width / 2,
+      this._height / 2,
+      false,
+      this.params.zoomAnimate,
+    )
+  }
+
+  EventHandler.on(zoomin, 'click', handler())
+  EventHandler.on(zoomout, 'click', handler(false))
+};

package/dist/shape-element.d.ts

@@ -0,0 +1,10 @@
+export declare interface ShapeStyle {
+  initial: Record<string, string | number>
+  current?: Record<string, string | number>
+  hover?: Record<string, string | number>
+  selected?: Record<string, string | number>
+  selectedHover?: Record<string, string | number>
+}
+declare const attrs: Record<string, string | number>;
+
+export default SVGShapeElement;

package/dist/spain.d.ts

@@ -0,0 +1 @@
+export default spain;

package/dist/text-element.d.ts

@@ -0,0 +1 @@
+export default SVGTextElement;

package/dist/tooltip.d.ts

@@ -0,0 +1,80 @@
+import type { MapInterface } from '../types';
+
+export declare class Tooltip extends BaseComponent {
+  private _map: MapInterface
+  protected _tooltip: HTMLElement
+  private _hoveredRegion: string | null = null
+  private _hoveredMarker: string | null = null
+  private _customPositioning: boolean = true 
+
+  constructor(map: MapInterface) {
+    super()
+
+    this._map = map
+    this._tooltip = createElement('div', 'jvm-tooltip', '')
+    this._tooltip.style.display = 'none'
+    this._map.container.appendChild(this._tooltip)
+
+
+    return this
+  }
+
+  getElement(): HTMLElement {
+    return this._tooltip
+  }
+
+  show(text: string): void {
+    this._tooltip.style.display = 'block'
+    this._tooltip.innerHTML = text
+    this._tooltip.classList.add('active')
+  }
+
+  hide(): void {
+    this._tooltip.style.display = 'none'
+    this._tooltip.classList.remove('active')
+    this._hoveredRegion = null
+    this._hoveredMarker = null
+  }
+
+  text(text: string): void {
+    if (this._tooltip) {
+      this._tooltip.innerHTML = text
+    }
+  }
+
+  html(html: string): void {
+    if (this._tooltip) {
+      this._tooltip.innerHTML = html
+    }
+  }
+
+  css(css: Record<string, string>): this {
+    if (this._customPositioning && (css.top || css.left)) {
+      return this
+    }
+
+    for (const style in css) {
+      this._tooltip.style[style as any] = css[style]
+    }
+
+    return this
+  }
+
+  setHoveredRegion(code: string): void {
+    this._hoveredRegion = code
+  }
+
+  getHoveredRegion(): string | null {
+    return this._hoveredRegion
+  }
+
+  setHoveredMarker(index: string): void {
+    this._hoveredMarker = index
+  }
+
+  getHoveredMarker(): string | null {
+    return this._hoveredMarker
+  }
+}
+
+export default Tooltip;