25-02-2025

frontend/src/components/GlowDot.vue

@@ -4,20 +4,24 @@
     :class="{
       'glow-dot--ghost': isGhost,
       'glow-dot--selected': selected,
-      'glow-dot--dimmed': isDimmed
+      'glow-dot--dimmed': isDimmed,
+      'glow-dot--label-above': labelAbove
     }"
     :style="dotStyle"
     @click.stop="onSelect"
   >
-    <!-- White inner circle — shader provides the glow -->
-    <div class="glow-dot__inner">
+    <div class="glow-dot__inner" :style="{ boxShadow: glowShadow }">
       <img
-        v-if="event.image"
-        :src="event.image"
+        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>
 
@@ -25,6 +29,7 @@
 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 },
@@ -37,17 +42,49 @@ const emit = defineEmits(['select'])
 const eventsStore = useEventsStore()
 const settingsStore = useSettingsStore()
 
-// Match shader circle: CSS diameter = 2 * circleRadiusPx / dpr
+// 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)
 
-const dotSize = computed(() => {
-  return 2 * settingsStore.floatingLines.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()}`
 })
 
-// Y position: emotion +1 → top (15%), 0 → middle (50%), -1 → bottom (85%)
-const yPercent = computed(() => {
-  return 50 - props.event.emotion * 35
-})
+// 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`,
@@ -56,14 +93,26 @@ const dotStyle = computed(() => ({
   height: `${dotSize.value}px`
 }))
 
-const isDimmed = computed(() => {
-  return eventsStore.selectedEventId !== null && !props.selected && !props.isGhost
+// 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')
-  }
+  if (!props.isGhost) emit('select')
 }
 </script>
 
@@ -76,14 +125,12 @@ function onSelect() {
   transition: opacity 0.3s ease, transform 0.15s ease;
 }
 
-/* Clean inner circle — shader provides the glow around it */
 .glow-dot__inner {
   position: relative;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   background: #fff;
-  overflow: hidden;
 }
 
 .glow-dot__image {
@@ -91,20 +138,63 @@ function onSelect() {
   height: 100%;
   object-fit: cover;
   display: block;
+  border-radius: 50%;
 }
 
 /* States */
 .glow-dot--ghost {
-  opacity: 0.7;
+  opacity: 1;
   cursor: default;
 }
 
+
+
 .glow-dot--selected {
   transform: translate(-50%, -50%) scale(1.15);
   z-index: 15;
 }
 
 .glow-dot--dimmed {
-  opacity: 0.5;
+  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>