shopdb-flask/frontend/src/components/LocationMapTooltip.vue

<template>
  <div class="location-tooltip-wrapper" @mouseenter="showTooltip" @mouseleave="onWrapperLeave">
    <slot></slot>
    <Teleport to="body">
      <div
        v-if="visible && hasPosition"
        class="map-tooltip"
        :style="tooltipStyle"
        ref="tooltipRef"
        @mouseenter="onTooltipEnter"
        @mouseleave="onTooltipLeave"
        @wheel.prevent="onWheel"
      >
        <div class="map-tooltip-content">
          <div class="map-preview" ref="mapPreview">
            <div
              class="map-transform"
              :style="transformStyle"
            >
              <img
                :src="blueprintUrl"
                alt="Shop Floor Map"
                class="map-image"
                @load="onImageLoad"
              />
              <!-- Marker dot -->
              <div
                class="marker-dot"
                :style="markerStyle"
              ></div>
            </div>
          </div>
          <div class="map-tooltip-footer">
            <span class="coordinates">{{ left }}, {{ top }}</span>
            <span class="zoom-hint">Scroll to zoom</span>
          </div>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup>
import { ref, computed, nextTick, watch, onMounted, onUnmounted } from 'vue'

const props = defineProps({
  left: { type: Number, default: null },
  top: { type: Number, default: null },
  machineName: { type: String, default: '' }
})

// Auto-detect system theme with reactive updates
const systemTheme = ref(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')

function handleThemeChange(e) {
  systemTheme.value = e.matches ? 'dark' : 'light'
}

onMounted(() => {
  mediaQuery.addEventListener('change', handleThemeChange)
})

onUnmounted(() => {
  mediaQuery.removeEventListener('change', handleThemeChange)
})

const visible = ref(false)
const tooltipRef = ref(null)
const mapPreview = ref(null)
const tooltipPosition = ref({ x: 0, y: 0 })
const isOverTooltip = ref(false)
const zoom = ref(1)
const imageLoaded = ref(false)

// Map dimensions
const MAP_WIDTH = 3300
const MAP_HEIGHT = 2550

const hasPosition = computed(() => {
  return props.left !== null && props.top !== null
})

const blueprintUrl = computed(() => {
  return systemTheme.value === 'light'
    ? '/static/images/sitemap2025-light.png'
    : '/static/images/sitemap2025-dark.png'
})

// Calculate marker position as percentage
const markerX = computed(() => {
  return (props.left / MAP_WIDTH) * 100
})

const markerY = computed(() => {
  return (props.top / MAP_HEIGHT) * 100
})

// Marker style with counter-scale to maintain constant size
const markerStyle = computed(() => ({
  left: markerX.value + '%',
  top: markerY.value + '%',
  transform: `translate(-50%, -50%) scale(${1 / zoom.value})`
}))

// Transform style that centers on the marker and zooms toward it
const transformStyle = computed(() => {
  // Calculate translation to center the marker in the preview
  const translateX = 50 - markerX.value
  const translateY = 50 - markerY.value

  return {
    transform: `translate(${translateX}%, ${translateY}%) scale(${zoom.value})`,
    transformOrigin: `${markerX.value}% ${markerY.value}%`
  }
})

const tooltipStyle = computed(() => ({
  left: `${tooltipPosition.value.x}px`,
  top: `${tooltipPosition.value.y}px`
}))

function onImageLoad() {
  imageLoaded.value = true
}

function showTooltip(event) {
  if (!hasPosition.value) return

  visible.value = true
  zoom.value = 1

  const rect = event.target.getBoundingClientRect()
  tooltipPosition.value = {
    x: rect.left + rect.width / 2,
    y: rect.bottom + 10
  }

  nextTick(() => {
    adjustPosition()
  })
}

function onWrapperLeave() {
  // Small delay to allow moving to tooltip
  setTimeout(() => {
    if (!isOverTooltip.value) {
      hideTooltip()
    }
  }, 100)
}

function onTooltipEnter() {
  isOverTooltip.value = true
}

function onTooltipLeave() {
  isOverTooltip.value = false
  hideTooltip()
}

function hideTooltip() {
  visible.value = false
  zoom.value = 1
}

function onWheel(event) {
  const delta = event.deltaY > 0 ? -0.3 : 0.3
  const newZoom = Math.max(1, Math.min(8, zoom.value + delta))
  zoom.value = newZoom
}

function adjustPosition() {
  if (!tooltipRef.value) return

  const tooltip = tooltipRef.value
  const rect = tooltip.getBoundingClientRect()
  const viewportWidth = window.innerWidth
  const viewportHeight = window.innerHeight

  if (rect.right > viewportWidth - 20) {
    tooltipPosition.value.x -= (rect.right - viewportWidth + 20)
  }
  if (rect.left < 20) {
    tooltipPosition.value.x += (20 - rect.left)
  }

  if (rect.bottom > viewportHeight - 20) {
    tooltipPosition.value.y = rect.top - tooltip.offsetHeight - 20
  }
}

// Reset zoom when tooltip becomes visible
watch(visible, (newVal) => {
  if (newVal) {
    zoom.value = 1
  }
})
</script>

<style scoped>
.location-tooltip-wrapper {
  display: inline;
  cursor: pointer;
}

.location-tooltip-wrapper:hover {
  color: var(--primary, #1976d2);
}
</style>

<style>
.map-tooltip {
  position: fixed;
  z-index: 10000;
  transform: translateX(-50%);
}

.map-tooltip-content {
  background: var(--bg-card, #ffffff);
  border-radius: 8px;
  border: 1px solid var(--border, #e0e0e0);
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  overflow: hidden;
}

.map-preview {
  position: relative;
  width: 500px;
  height: 385px;
  overflow: hidden;
  background: var(--bg, #f5f5f5);
}

.map-transform {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.15s ease-out;
}

.map-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.marker-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #ff0000;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,0,0,0.3), 0 0 10px #ff0000;
  pointer-events: none;
}

.map-tooltip-footer {
  padding: 0.5rem 0.75rem;
  background: var(--bg, #f5f5f5);
  border-top: 1px solid var(--border, #e0e0e0);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.coordinates {
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 0.875rem;
  color: var(--text-light, #666666);
}

.zoom-hint {
  font-size: 0.75rem;
  color: var(--text-light, #666666);
}
</style>