Swiftui Path onhover - swiftui

Question

The problem is, that .onHover doesn't work on Path. In this case is will be one wrong area as hovered detected. How can I make .onHover modifier for the Path?
For example .onHover with rectangle is works, but I don't now why. But rectangle is now good idea for my case, because is most be resizable.
struct CenterCategoryPlanView : View {
#State private var isMouseHover = false
// MARK: Points
#Binding var startPoint: CGPoint
#Binding var endPoint: CGPoint
#Binding var categoryEntity : CategoryEntity
// MARK: Sizes
#Binding var monthColumnSize : CGSize
var body: some View {
Path { (path) in
path.move(to: startPoint )
path.addLine(to: endPoint)
path.closeSubpath()
}
.stroke(style: StrokeStyle(lineWidth: 30, lineCap: .square))
.onHover(perform: { value in
print("isHovered: \(value)")
})
.foregroundColor(Color(hex: categoryEntity.color ?? ""))
Text(categoryEntity.name ?? "-")
.position(x: max(monthColumnSize.width, (endPoint.x + startPoint.x) / 2), y: startPoint.y)
.aspectRatio(1, contentMode: .fill)
.font(.title2)
}
}
Call all views
struct CategoryRowView: View {
#Binding var startPoint: CGPoint
#Binding var endPoint: CGPoint
#Binding var categoryEntity : CategoryEntity
#Binding var isCategorySelected : Bool
#Binding var spacing : Double
#Binding var monthColumnSize : CGSize
#Binding var sliderSize : CGSize
#State private var isMouseHover = false
#State var fromMonth = 2
#State var toMonth = 4
#State var itemRowNr : Int = 1
var body: some View {
Text("")
.onAppear(){
CaclulateStartPositions()
}
ZStack{
CenterCategoryPlanView(startPoint: $startPoint, endPoint: $endPoint, categoryEntity: $categoryEntity, monthColumnSize: $monthColumnSize, sliderSize: $sliderSize)
if( isMouseHover || true ){
// LEFT
LeftCategoryPlanView(startPoint: $startPoint, endPoint: $endPoint, sliderSize: $sliderSize, monthColumnSize: $monthColumnSize, isCategorySelected: $isCategorySelected)
//RIGHT
RightCategoryPlanView(startPoint: $startPoint, endPoint: $endPoint, sliderSize: $sliderSize, monthColumnSize: $monthColumnSize, isCategorySelected: $isCategorySelected)
}
}
Color.clear
}
private func CaclulateStartPositions(){
startPoint.x = monthColumnSize.width * CGFloat(fromMonth - 1) + sliderSize.width
startPoint.y = 80
endPoint.x = monthColumnSize.width * CGFloat(toMonth) - sliderSize.width
endPoint.y = 80
print("startPoint.x: \(startPoint.x)")
print("startPoint.y: \(startPoint.y)")
}
}
Left slider
struct LeftCategoryPlanView : View {
#Binding var startPoint: CGPoint
#Binding var endPoint: CGPoint
#Binding var sliderSize : CGSize
#Binding var monthColumnSize : CGSize
#Binding var isCategorySelected : Bool
var LeftSliderPos : CGPoint {
get{
return CGPoint(x: startPoint.x - sliderSize.width / 2, y: startPoint.y)
}
}
var body: some View {
Rectangle()
.frame(width: sliderSize.width, height: sliderSize.height, alignment: .leading)
.position(LeftSliderPos)
.foregroundColor(.gray)
.gesture(DragGesture()
.onChanged { (value) in
if(value.location.x < endPoint.x)
{
if(value.location.x < (endPoint.x - monthColumnSize.width / 2)){
self.startPoint = CGPoint(x: value.location.x , y: startPoint.y)
isCategorySelected = true
}
}
}
.onEnded({ value in
isCategorySelected = false
withAnimation(.easeIn(duration: 0.3)) {
startPoint.x = startPoint.x - startPoint.x.truncatingRemainder(dividingBy: monthColumnSize.width) + sliderSize.width + 1
}
}))
}
}
Right slider
struct RightCategoryPlanView : View {
#Binding var startPoint: CGPoint
#Binding var endPoint: CGPoint
#Binding var sliderSize : CGSize
#Binding var monthColumnSize : CGSize
#Binding var isCategorySelected : Bool
var RightSliderPos : CGPoint {
get{
return CGPoint(x: endPoint.x + sliderSize.width / 2, y: startPoint.y)
}
}
var body: some View {
Rectangle()
.frame(width: sliderSize.width, height: sliderSize.height)
.position(RightSliderPos)
.foregroundColor(.gray)
.gesture(DragGesture()
.onChanged { (value) in
if(value.location.x > (startPoint.x + monthColumnSize.width / 2)){
self.endPoint = CGPoint(x: value.location.x, y: endPoint.y)
isCategorySelected = true
}
}
.onEnded({ value in
isCategorySelected = false
withAnimation(.easeIn(duration: 0.3)) {
endPoint.x = endPoint.x - endPoint.x.truncatingRemainder(dividingBy: monthColumnSize.width) + monthColumnSize.width - sliderSize.width - 1
}
}))
}
}