10-04-2026

frontend/_src/components/GlowDot.vue

@@ -0,0 +1,200 @@
+<template>
+  <div
+    class="glow-dot"
+    :class="{
+      'glow-dot--ghost': isGhost,
+      'glow-dot--selected': selected,
+      'glow-dot--dimmed': isDimmed,
+      'glow-dot--label-above': labelAbove
+    }"
+    :style="dotStyle"
+    @click.stop="onSelect"
+  >
+    <div class="glow-dot__inner" :style="{ boxShadow: glowShadow }">
+      <img
+        v-if="imageSrc"
+        :src="imageSrc"
+        class="glow-dot__image"
+        alt=""
+      />
+    </div>
+    <div v-if="!isGhost && event.title" class="glow-dot__label" :style="labelStyle">
+      <span class="glow-dot__title" :style="titleStyle">{{ event.title }}</span>
+      <span class="glow-dot__date" :style="dateStyle">{{ formattedDate }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useEventsStore } from 'stores/events'
+import { useSettingsStore } from 'stores/settings'
+import { useImageCache } from 'composables/useImageCache'
+
+const props = defineProps({
+  event: { type: Object, required: true },
+  x: { type: Number, default: 0 },
+  isGhost: { type: Boolean, default: false },
+  selected: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['select'])
+const eventsStore = useEventsStore()
+const settingsStore = useSettingsStore()
+
+// Resolve image: cached thumbnail from IndexedDB or fetch & cache
+const { resolvedSrc: imageSrc } = props.event.image
+  ? useImageCache(props.event.image, props.event.id)
+  : { resolvedSrc: computed(() => null) }
+
+const fl = computed(() => settingsStore.floatingLines)
+const glowColor = computed(() => eventsStore.getGlowColor(props.event))
+
+// CSS diameter derived from settings (circleRadius is half-size in px)
+const dpr = Math.min(window.devicePixelRatio || 1, 2)
+const dotSize = computed(() => 2 * fl.value.circleRadius / dpr)
+
+// Y position: emotion +1 → top (20%), 0 → middle (47%), -1 → bottom (74%)
+
+const yPercent = computed(() => 48 - props.event.emotion * 30)
+
+// Label above dot when dot is in lower half, below when in upper half
+const labelAbove = computed(() => yPercent.value > 48)
+
+// Format date as "12. Feb 2024"
+const MONTH_SHORT = ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
+const formattedDate = computed(() => {
+  const d = new Date(props.event.date)
+  return `${d.getDate()}. ${MONTH_SHORT[d.getMonth()]} ${d.getFullYear()}`
+})
+
+// Label font sizes per setting
+const LABEL_FONT = { small: { title: 10, date: 9 }, medium: { title: 12, date: 11 }, large: { title: 14, date: 13 } }
+const labelFont = computed(() => LABEL_FONT[fl.value.labelSize] ?? LABEL_FONT.small)
+const labelColor = computed(() => fl.value.labelColor ?? '#ffffff')
+
+const labelStyle = computed(() => ({
+  maxWidth: labelFont.value.title >= 14 ? '120px' : '90px'
+}))
+const titleStyle = computed(() => ({
+  fontSize: `${labelFont.value.title}px`,
+  color: labelColor.value,
+  maxWidth: labelFont.value.title >= 14 ? '120px' : '90px'
+}))
+const dateStyle = computed(() => ({
+  fontSize: `${labelFont.value.date}px`,
+  color: labelColor.value
+}))
+
+const dotStyle = computed(() => ({
+  left: `${props.x}px`,
+  top: `${yPercent.value}%`,
+  width: `${dotSize.value}px`,
+  height: `${dotSize.value}px`
+}))
+
+// Two-layer box-shadow: tight bright core + wide soft halo
+const glowShadow = computed(() => {
+  const size = fl.value.glowSize
+  const strength = fl.value.glowStrength
+  const color = glowColor.value
+  const core = alphaHex(Math.min(strength / 3, 1))
+  const halo = alphaHex(Math.min(strength / 7, 1))
+  return `0 0 ${size}px 0px ${color}${core}, 0 0 ${size * 2.5}px ${size * 0.3}px ${color}${halo}`
+})
+
+function alphaHex(a) {
+  return Math.round(Math.min(1, Math.max(0, a)) * 255).toString(16).padStart(2, '0')
+}
+
+const isDimmed = computed(() =>
+  eventsStore.selectedEventId !== null && !props.selected && !props.isGhost
+)
+
+function onSelect() {
+  if (!props.isGhost) emit('select')
+}
+</script>
+
+<style scoped>
+.glow-dot {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+  z-index: 10;
+  transition: opacity 0.3s ease, transform 0.15s ease;
+}
+
+.glow-dot__inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: #fff;
+}
+
+.glow-dot__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  border-radius: 50%;
+}
+
+/* States */
+.glow-dot--ghost {
+  opacity: 1;
+  cursor: default;
+}
+
+
+
+.glow-dot--selected {
+  transform: translate(-50%, -50%) scale(1.15);
+  z-index: 15;
+}
+
+.glow-dot--dimmed {
+  opacity: 1;
+}
+
+/* Event label (title + date) */
+.glow-dot__label {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: calc(100% + 6px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1px;
+  max-width: 90px;
+  pointer-events: none;
+}
+
+/* When dot is in lower half, show label above */
+.glow-dot--label-above .glow-dot__label {
+  top: auto;
+  bottom: calc(100% + 6px);
+}
+
+.glow-dot__title {
+  font-size: 10px;
+  font-weight: 600;
+  opacity: 0.7;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 90px;
+  text-align: center;
+  line-height: 1.2;
+}
+
+.glow-dot__date {
+  font-size: 9px;
+  font-weight: 400;
+  opacity: 0.4;
+  white-space: nowrap;
+  line-height: 1.2;
+}
+</style>