feat(VPie): support touch for segment interaction (#21871)

Author: J-Sek

packages/vuetify/src/labs/VPie/VPie.sass

@@ -43,6 +43,9 @@
         .v-overlay__content
           pointer-events: none !important
 
+    &__segments
+      border-radius: 50%
+
     &__content-underlay
       border-radius: 50%
       position: absolute

packages/vuetify/src/labs/VPie/VPie.tsx

@@ -13,6 +13,9 @@ import { VDefaultsProvider } from '@/components/VDefaultsProvider'
 import { useColor } from '@/composables/color'
 import { makeDensityProps } from '@/composables/density'
 
+// Directives
+import vClickOutside from '@/directives/click-outside'
+
 // Utilities
 import { computed, shallowRef, toRef, watch } from 'vue'
 import { formatTextTemplate } from './utils'
@@ -103,6 +106,8 @@ export const makeVPieProps = propsFactory({
 export const VPie = genericComponent<VPieSlots>()({
   name: 'VPie',
 
+  directives: { vClickOutside },
+
   props: makeVPieProps(),
 
   setup (props, { slots }) {
@@ -153,7 +158,7 @@ export const VPie = genericComponent<VPieSlots>()({
     const visibleItems = computed(() => {
       // hidden items get (value: 0) to trigger disappearing animation
       return arcs.value.map(item => {
-        return isActive(item)
+        return isVisible(item)
           ? item
           : { ...item, value: 0 }
       })
@@ -185,12 +190,12 @@ export const VPie = genericComponent<VPieSlots>()({
       return typeof paletteItem === 'object' ? paletteItem.pattern : undefined
     }
 
-    function isActive (item: PieItem) {
+    function isVisible (item: PieItem) {
       return visibleItemsKeys.value.includes(item.key)
     }
 
     function toggle (item: PieItem) {
-      if (isActive(item)) {
+      if (isVisible(item)) {
         visibleItemsKeys.value = visibleItemsKeys.value.filter(x => x !== item.key)
       } else {
         visibleItemsKeys.value = [...visibleItemsKeys.value, item.key]
@@ -199,29 +204,53 @@ export const VPie = genericComponent<VPieSlots>()({
 
     const tooltipItem = shallowRef<PieItem | null>(null)
     const tooltipVisible = shallowRef(false)
+    const tooltipTarget = shallowRef<[x: number, y: number]>([0, 0])
 
     let mouseLeaveTimeout = null! as ReturnType<typeof setTimeout>
 
-    function onMouseenter (item: PieItem) {
-      if (!props.tooltip) return
+    function setItemActive (item: PieItem, active: boolean) {
+      arcs.value.forEach(a => a.isActive = a.key === item.key && active)
 
-      clearTimeout(mouseLeaveTimeout)
-      tooltipVisible.value = true
-      tooltipItem.value = item
+      if (props.tooltip) {
+        setTooltip(item, active)
+      }
     }
 
-    function onMouseleave () {
-      if (!props.tooltip) return
-
+    function setTooltip (item: PieItem, active: boolean) {
       clearTimeout(mouseLeaveTimeout)
-      mouseLeaveTimeout = setTimeout(() => {
-        tooltipVisible.value = false
 
-        // intentionally reusing timeout here
+      if (active) {
+        tooltipVisible.value = true
+        tooltipItem.value = item
+      } else {
         mouseLeaveTimeout = setTimeout(() => {
-          tooltipItem.value = null
-        }, 500)
-      }, 100)
+          tooltipVisible.value = false
+
+          // intentionally reusing timeout here
+          mouseLeaveTimeout = setTimeout(() => {
+            tooltipItem.value = null
+          }, 500)
+        }, 100)
+      }
+    }
+
+    let frame = -1
+    function onSvgMousemove ({ clientX, clientY }: MouseEvent) {
+      cancelAnimationFrame(frame)
+      frame = requestAnimationFrame(() => {
+        tooltipTarget.value = [clientX, clientY]
+      })
+    }
+
+    function onSvgTouchstart ({ touches }: TouchEvent) {
+      if (!touches) return
+      const { clientX, clientY } = touches[0]
+      tooltipTarget.value = [clientX, clientY]
+    }
+
+    function onSvgClickOutside () {
+      arcs.value.forEach(a => a.isActive = false)
+      tooltipVisible.value = false
     }
 
     return () => {
@@ -247,6 +276,7 @@ export const VPie = genericComponent<VPieSlots>()({
         subtitleFormat: typeof props.tooltip === 'object' ? props.tooltip.subtitleFormat : '[value]',
         transition: typeof props.tooltip === 'object' ? props.tooltip.transition : defaultTooltipTransition,
         offset: typeof props.tooltip === 'object' ? props.tooltip.offset : 16,
+        target: tooltipTarget.value,
       }
 
       const legendDefaults = {
@@ -311,17 +341,22 @@ export const VPie = genericComponent<VPieSlots>()({
             <svg
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 100 100"
+              class="v-pie__segments"
+              onMousemove={ onSvgMousemove }
+              onTouchstart={ onSvgTouchstart }
+              v-click-outside={{ handler: onSvgClickOutside }}
             >
               { arcs.value.map((item, index) => (
                 <VPieSegment
                   { ...segmentProps }
                   key={ item.key }
+                  active={ item.isActive }
                   color={ item.color }
-                  value={ isActive(item) ? arcSize(item.value) : 0 }
+                  value={ isVisible(item) ? arcSize(item.value) : 0 }
                   rotate={ arcOffset(index) }
                   pattern={ item.pattern }
-                  onMouseenter={ () => onMouseenter(item) }
-                  onMouseleave={ () => onMouseleave() }
+                  onUpdate:active={ val => setItemActive(item, val) }
+                  onTouchend={ () => setItemActive(item, true) }
                 />
               ))}
             </svg>
@@ -343,7 +378,7 @@ export const VPie = genericComponent<VPieSlots>()({
           { legendConfig.value.visible && (
             <VDefaultsProvider key="legend" defaults={ legendDefaults }>
               <div class="v-pie__legend">
-                { slots.legend?.({ isActive, toggle, items: arcs.value, total: total.value }) ?? (
+                { slots.legend?.({ isActive: isVisible, toggle, items: arcs.value, total: total.value }) ?? (
                   <VChipGroup
                     column
                     multiple

packages/vuetify/src/labs/VPie/VPieSegment.tsx

@@ -1,15 +1,17 @@
 // Composables
+import { useProxiedModel } from '@/composables/proxiedModel'
 import { makeRevealProps, useReveal } from '@/composables/reveal'
 
 // Utilities
-import { computed, shallowRef, toRef } from 'vue'
+import { computed, toRef } from 'vue'
 import { useInnerSlicePath, useOuterSlicePath, usePieArc } from './utils'
 import { easingPatterns, genericComponent, propsFactory, useTransition } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
 
 export const makeVPieSegmentProps = propsFactory({
+  active: Boolean,
   rotate: [Number, String],
   value: {
     type: Number,
@@ -40,8 +42,12 @@ export const VPieSegment = genericComponent()({
 
   props: makeVPieSegmentProps(),
 
+  emits: {
+    'update:active': (val: boolean) => true,
+  },
+
   setup (props) {
-    const isHovering = shallowRef(false)
+    const isActive = useProxiedModel(props, 'active')
 
     const { state: revealState, duration: revealDuration } = useReveal(props)
 
@@ -70,15 +76,15 @@ export const VPieSegment = genericComponent()({
       outerX,
       outerY,
       arcWidth,
-    } = usePieArc(props, isHovering)
+    } = usePieArc(props, isActive)
 
     const arcSize = toRef(() => revealState.value === 'initial' ? 0 : normalizedValue.value)
     const currentArcSize = useTransition(arcSize, transitionConfig)
 
     const angle = toRef(() => revealState.value === 'initial' ? 0 : (Number(props.rotate ?? 0) + Number(props.gap ?? 0) / 2))
     const currentAngle = useTransition(angle, transitionConfig)
 
-    const arcRadius = toRef(() => 50 * (isHovering.value ? 1 : (1 - hoverZoomRatio.value)))
+    const arcRadius = toRef(() => 50 * (isActive.value ? 1 : (1 - hoverZoomRatio.value)))
     const currentArcRadius = useTransition(arcRadius, transitionConfig)
     const currentArcWidth = useTransition(arcWidth, transitionConfig)
 
@@ -129,8 +135,8 @@ export const VPieSegment = genericComponent()({
             transform={ `rotate(${currentAngle.value} 50 50)` }
             class="v-pie-segment__overlay"
             d={ overlayPath.value }
-            onMouseenter={ () => isHovering.value = true }
-            onMouseleave={ () => isHovering.value = false }
+            onMouseenter={ () => isActive.value = true }
+            onMouseleave={ () => isActive.value = false }
           />
         )}
       </g>

packages/vuetify/src/labs/VPie/VPieTooltip.tsx

@@ -6,9 +6,9 @@ import { makeVTooltipProps, VTooltip } from '@/components/VTooltip/VTooltip'
 import { makeTransitionProps, MaybeTransition } from '@/composables/transition'
 
 // Utilities
-import { onBeforeUnmount, onMounted, shallowRef, toRef } from 'vue'
+import { toRef } from 'vue'
 import { formatTextTemplate } from './utils'
-import { genericComponent, getCurrentInstance, pick, propsFactory } from '@/util'
+import { genericComponent, pick, propsFactory } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -21,6 +21,7 @@ export type VPieTooltipSlots = {
 
 export const makeVPieTooltipProps = propsFactory({
   modelValue: Boolean,
+  target: Object as PropType<[x: number, y: number]>,
   item: {
     type: Object as PropType<PieItem | null>,
     default: null,
@@ -43,25 +44,6 @@ export const VPieTooltip = genericComponent<VPieTooltipSlots>()({
   props: makeVPieTooltipProps(),
 
   setup (props, { slots }) {
-    const target = shallowRef<[x: number, y: number]>([0, 0])
-    const vm = getCurrentInstance('VPieTooltip')
-
-    let frame = -1
-    function onMouseMove ({ clientX, clientY }: MouseEvent) {
-      cancelAnimationFrame(frame)
-      frame = requestAnimationFrame(() => {
-        target.value = [clientX, clientY]
-      })
-    }
-
-    onMounted(() => {
-      vm.proxy!.$el.parentNode.addEventListener('mousemove', onMouseMove)
-    })
-
-    onBeforeUnmount(() => {
-      vm.proxy!.$el.parentNode.removeEventListener('mousemove', onMouseMove)
-    })
-
     const tooltipTitleFormatFunction = toRef(() => (segment: PieItem) => {
       return typeof props.titleFormat === 'function'
         ? props.titleFormat(segment)
@@ -78,7 +60,7 @@ export const VPieTooltip = genericComponent<VPieTooltipSlots>()({
       <VTooltip
         offset={ props.offset }
         modelValue={ props.modelValue }
-        target={ target.value }
+        target={ props.target }
         contentClass="v-pie__tooltip-content"
       >
         { !!props.item && (

packages/vuetify/src/labs/VPie/types.ts

@@ -4,6 +4,7 @@ export interface PieItem {
   value: number
   title: string
   pattern?: string
+  isActive: boolean
   raw?: Record<string, any>
 }