{"version":3,"file":"ImageMapTooltip.e410188e.js","sources":["../../../../components/ImageMapTooltip/ImageMapTooltip.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { useWindowSize } from '@vueuse/core'\n  import { ImageMapTooltipFacet } from './ImageMapTooltipFacet'\n  import useBem from '~/composables/Bem/Bem'\n  import { UseBemProps } from '~/composables/Bem/BemFacetOptions'\n  import useSegment, { Rect } from '~/composables/Segment/Segment'\n  import { ImageMapRendering } from '~/model/ImageMap/ImageMap'\n  import useModelProvider, {\n    UseModelProviderEmits,\n    UseModelProviderProps,\n  } from '~/composables/ModelProvider/ModelProvider'\n\n  type ModelType = number | null\n\n  interface Emits extends UseModelProviderEmits {\n    (e: 'update:segmentIdxValue'): void\n  }\n\n  interface Props extends UseBemProps, UseModelProviderProps<ModelType> {\n    facets?: Array<string>\n    isVisible: boolean\n    wasCompleted: boolean\n    wasVisited: boolean\n    svgEl: SVGSVGElement\n    bgEl: SVGRectElement\n    linkEl: SVGAElement\n    segmentIdxValue: ModelType\n  }\n\n  const props = defineProps<Props>()\n  const emit = defineEmits<Emits>()\n  const { width, height } = useWindowSize()\n  const { bemAdd } = useBem('c-image-map-tooltip', props, {})\n  const segmentIdx = useModelProvider<ModelType, 'segmentIdxValue'>(props, emit, 'segmentIdxValue')\n\n  const areaLabelStyles = ref<Partial<CSSStyleDeclaration>>({})\n  const dimensions = computed<Rect>(() => {\n    const { x, y, width, height } = props.bgEl.getBBox()\n    return { x, y, width, height }\n  })\n\n  const { getSegmentFeatures, getSegmentIdxOfPoint } = useSegment(dimensions, [3, 3])\n\n  const rootClasses = computed<Array<string>>(() => {\n    return [\n      bemAdd(props.isVisible ? ImageMapTooltipFacet.IsVisible : ''),\n      bemAdd(props.wasVisited ? ImageMapTooltipFacet.WasVisited : ''),\n      bemAdd(props.wasCompleted ? ImageMapTooltipFacet.WasCompleted : ''),\n    ]\n  })\n\n  const labelClasses = computed<Array<string>>(() => {\n    if (segmentIdx.value == null) {\n      return []\n    }\n\n    return Object.entries(getSegmentFeatures(segmentIdx.value)).map(([key, value]) => {\n      return bemAdd(`${key}-${value}`, 'label')\n    })\n  })\n\n  const getAreaLabelStyles = () => {\n    const { x, y } = getAreaCenter(props.linkEl, ImageMapRendering.InDOM)\n\n    areaLabelStyles.value = {\n      top: `${y}px`,\n      left: `${x}px`,\n    }\n  }\n\n  const getAreaCenter = (svgPath: SVGAElement, renderingType: ImageMapRendering) => {\n    const point = props.svgEl.createSVGPoint() as DOMPoint\n    const matrix = svgPath.getCTM() as DOMMatrix\n    const { x, y, width, height } = svgPath.getBBox()\n\n    point.x = x + width / 2\n    point.y = y + height / 2\n\n    switch (renderingType) {\n      case ImageMapRendering.InDOM:\n        return point.matrixTransform(matrix)\n      case ImageMapRendering.InSVG:\n        return point\n    }\n  }\n\n  watch(\n    [width, height],\n    () => {\n      getAreaLabelStyles()\n    },\n    { immediate: true },\n  )\n\n  watchEffect(() => {\n    const center = getAreaCenter(props.linkEl, ImageMapRendering.InSVG)\n    segmentIdx.value = getSegmentIdxOfPoint(center)\n  })\n\n  onMounted(() => {\n    getAreaLabelStyles()\n  })\n</script>\n\n<template>\n  <span :class=\"rootClasses\" :style=\"areaLabelStyles\" class=\"c-image-map-tooltip\">\n    <span class=\"c-image-map-tooltip__circle\">\n      <span class=\"c-image-map-tooltip__circle-inner\" />\n    </span>\n    <span :class=\"labelClasses\" class=\"c-image-map-tooltip__label\">\n      <slot />\n    </span>\n  </span>\n</template>\n\n<style lang=\"scss\" scoped>\n  @use 'sass:math';\n  @use '/assets/scss/util/color/color' as col;\n  @use '/assets/scss/util/transition' as trs;\n  @use '/assets/scss/base/font/font' as font;\n  @use '/assets/scss/base/typography/typography' as type;\n  @use '/assets/scss/structure/image-map' as ImageMap;\n\n  $sz--circle: 24px;\n  $sz--circle-outer: 60px;\n  $sz--circle-inner: 12px;\n  $sz--label-offset: math.div($sz--circle, 2) + 4px;\n\n  $trs--delay-base: ImageMap.$trs--delay-path;\n  $trs--delay-circle: 100ms;\n  $trs--delay-label: 300ms;\n\n  @keyframes pulse-ring {\n    0% {\n      transform: translate(-50%, -50%) scale(0.35);\n    }\n    80%,\n    100% {\n      opacity: 0;\n    }\n  }\n\n  @keyframes pulse-dot {\n    0% {\n      transform: translate(-50%, -50%) scale(0.6);\n    }\n    50% {\n      transform: translate(-50%, -50%) scale(1);\n    }\n    100% {\n      transform: translate(-50%, -50%) scale(0.6);\n    }\n  }\n\n  .c-image-map-tooltip {\n    --value: calc(var(--scroll-bar) * -0.5);\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    transform: translateX(var(--value));\n  }\n\n  .c-image-map-tooltip__circle {\n    @include trs.common-props;\n    z-index: 2;\n    position: relative;\n    display: block;\n    width: $sz--circle;\n    height: $sz--circle;\n    background-color: col.$monochrome-black;\n    border-radius: $sz--circle;\n    padding: 2px;\n    opacity: 0;\n\n    transform: translate(-50%, -50%) scale(0.8);\n\n    &::before,\n    &::after {\n      @include trs.common-props;\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      display: block;\n      transform: translate(-50%, -50%);\n    }\n\n    &::before {\n      z-index: 1;\n      width: $sz--circle-outer;\n      height: $sz--circle-outer;\n      border-radius: $sz--circle-outer;\n      background-color: rgba(col.$brand-red, 0.6);\n      animation: pulse-ring 2400ms cubic-bezier(0.215, 0.61, 0.355, 1) infinite;\n    }\n\n    &::after {\n      z-index: 3;\n      width: $sz--circle-inner;\n      height: $sz--circle-inner;\n      border-radius: $sz--circle-inner;\n      background-color: col.$brand-cyan;\n      transform: translate(-50%, -50%) scale(0);\n\n      animation: pulse-dot 2400ms cubic-bezier(0.455, 0.03, 0.515, 0.955) -400ms infinite;\n    }\n  }\n\n  .c-image-map-tooltip__circle-inner {\n    @include trs.common-props;\n    z-index: 2;\n    position: relative;\n    top: 50%;\n    left: 50%;\n    display: block;\n    width: 100%;\n    height: 100%;\n    transform: translate(-50%, -50%);\n    background-color: col.$monochrome-white;\n    border-radius: $sz--circle;\n  }\n\n  .c-image-map-tooltip--is-visible {\n    z-index: 10;\n\n    .c-image-map-tooltip__circle {\n      opacity: 1;\n      transform: translate(-50%, -50%) scale(1);\n      transition-delay: $trs--delay-base + $trs--delay-circle;\n    }\n\n    .c-image-map-tooltip__label {\n      transition-delay: $trs--delay-base + $trs--delay-circle + $trs--delay-label;\n      opacity: 1;\n    }\n  }\n\n  .c-image-map-tooltip--was-visited {\n    .c-image-map-tooltip__circle {\n      opacity: 1;\n      transform: translate(-50%, -50%) scale(1);\n    }\n  }\n\n  .c-image-map-tooltip--was-completed {\n    .c-image-map-tooltip__circle::after {\n      background-color: col.$monochrome-quicksilver;\n    }\n  }\n\n  .c-image-map-tooltip--is-visible.c-image-map-tooltip--was-visited {\n    .c-image-map-tooltip__label {\n      transition-delay: 0ms;\n    }\n  }\n\n  .c-image-map-tooltip__label {\n    @include type.copy-x-small;\n    @include font.base-bold;\n    @include trs.common-props;\n    position: absolute;\n    display: block;\n    background-color: col.$monochrome-black;\n    border: 1px solid col.$monochrome-lead;\n    color: col.$monochrome-white;\n    padding: 3px 6px;\n    border-radius: 2px;\n    white-space: nowrap;\n\n    transition-delay: unset;\n    opacity: 0;\n\n    // Rows\n    &.c-image-map-tooltip__label--row-0 {\n      top: 0;\n    }\n\n    &.c-image-map-tooltip__label--row-1 {\n      top: 0;\n      transform: translateY(-50%);\n    }\n\n    &.c-image-map-tooltip__label--row-2 {\n      bottom: 0;\n    }\n\n    // Columns\n    &.c-image-map-tooltip__label--col-0 {\n      left: $sz--label-offset;\n    }\n\n    &.c-image-map-tooltip__label--col-1 {\n      top: $sz--label-offset;\n      bottom: unset;\n      transform: translateX(-50%);\n    }\n\n    &.c-image-map-tooltip__label--col-2 {\n      right: $sz--label-offset;\n    }\n\n    // Segments\n    &.c-image-map-tooltip__label--seg-5 {\n      top: unset;\n      bottom: $sz--label-offset;\n    }\n  }\n</style>\n"],"names":["width","height","useWindowSize","bemAdd","useBem","props","segmentIdx","useModelProvider","emit","areaLabelStyles","ref","dimensions","computed","x","y","width2","height2","getSegmentFeatures","getSegmentIdxOfPoint","useSegment","rootClasses","ImageMapTooltipFacet","labelClasses","key","value","getAreaLabelStyles","getAreaCenter","ImageMapRendering","svgPath","renderingType","point","matrix","watch","watchEffect","center","onMounted"],"mappings":"8zBA+BE,CAAA,MAAAA,EAAA,OAAAC,CAAA,EAAAC,EAAA,EACA,CAAA,OAAAC,CAAA,EAAAC,EAAA,sBAAAC,EAAA,CAAA,CAAA,EACAC,EAAAC,EAAAF,EAAAG,EAAA,iBAAA,EAEAC,EAAAC,EAAA,CAAA,CAAA,EACAC,EAAAC,EAAA,IAAA,CACE,KAAA,CAAA,EAAAC,EAAA,EAAAC,EAAA,MAAAC,EAAA,OAAAC,GAAAX,EAAA,KAAA,QAAA,EACA,MAAA,CAAA,EAAAQ,EAAA,EAAAC,EAAA,MAAAC,EAAA,OAAAC,EAA6B,CAAA,EAG/B,CAAA,mBAAAC,EAAA,qBAAAC,GAAAC,EAAAR,EAAA,CAAA,EAAA,CAAA,CAAA,EAEAS,EAAAR,EAAA,IACE,CAAOT,EAAAE,EAAA,UAAAgB,EAAA,UAAA,EAAA,EACuDlB,EAAAE,EAAA,WAAAgB,EAAA,WAAA,EAAA,EACElB,EAAAE,EAAA,aAAAgB,EAAA,aAAA,EAAA,CACI,CACpE,EAGFC,EAAAV,EAAA,IACEN,EAAA,OAAA,KACE,GAGF,OAAA,QAAAW,EAAAX,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA,CAAAiB,EAAAC,CAAA,IACErB,EAAA,GAAAoB,KAAAC,IAAA,OAAA,CAAwC,CACzC,EAGHC,EAAA,IAAA,CACE,KAAA,CAAA,EAAAZ,EAAA,EAAAC,GAAAY,EAAArB,EAAA,OAAAsB,EAAA,KAAA,EAEAlB,EAAA,MAAA,CAAwB,IAAA,GAAAK,MACd,KAAA,GAAAD,KACC,CACX,EAGFa,EAAA,CAAAE,EAAAC,IAAA,CACE,MAAAC,EAAAzB,EAAA,MAAA,eAAA,EACA0B,EAAAH,EAAA,SACA,CAAA,EAAAf,EAAA,EAAAC,EAAA,MAAAC,EAAA,OAAAC,CAAA,EAAAY,EAAA,UAKA,OAHAE,EAAA,EAAAjB,EAAAE,EAAA,EACAe,EAAA,EAAAhB,EAAAE,EAAA,EAEAa,EAAA,CAAuB,KAAAF,EAAA,MAEnB,OAAAG,EAAA,gBAAAC,CAAA,EAAmC,KAAAJ,EAAA,MAEnC,OAAAG,CAAO,CACX,EAGF,OAAAE,EAAA,CAAAhC,EAAAC,CAAA,EACgB,IAAA,CAEZwB,GAAmB,EACrB,CAAA,UAAA,EAAA,CACkB,EAGpBQ,EAAA,IAAA,CACE,MAAAC,EAAAR,EAAArB,EAAA,OAAAsB,EAAA,KAAA,EACArB,EAAA,MAAAY,EAAAgB,CAAA,CAA8C,CAAA,EAGhDC,EAAA,IAAA,CACEV,GAAmB,CAAA"}