Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat UIKit Tooltip #232

Merged
merged 87 commits into from
Jul 10, 2024
Merged
Changes from 1 commit
Commits
Show all changes
87 commits
Select commit Hold shift + click to select a range
38280a7
Add Tooltip view
kevinneko Jan 30, 2024
6bff03f
Refactor Tooltip style
kevinneko Jan 30, 2024
7caa72c
Merge branch 'main' into feat-swiftui-tooltip
kevinneko Jan 31, 2024
c5e0daa
Can adjust tooltip position
kevinneko Jan 31, 2024
cbd58af
Add tooltip playground for testing
kevinneko Jan 31, 2024
7d13811
Refine layout tips logic
kevinneko Jan 31, 2024
874a5b9
Refine layout logic
kevinneko Jan 31, 2024
eecaff8
Update CharcoalTooltip.swift
kevinneko Jan 31, 2024
0ea9f6a
Refine tooltip spacing
kevinneko Feb 6, 2024
085626f
Add CharcoalIdentifiableOverlayView
kevinneko Feb 6, 2024
b12beac
Use Actor to prevent Data Race
kevinneko Feb 6, 2024
d2c39e5
Remove CharcoalIdentifiableOverlayView out
kevinneko Feb 6, 2024
83cb45f
Clean code
kevinneko Feb 6, 2024
1a5cd1b
Only update view when it is isPresenting
kevinneko Feb 6, 2024
747da2a
Clean access control
kevinneko Feb 6, 2024
61fd850
Add TooltipsView
kevinneko Feb 6, 2024
7883c8a
Fix tooltipY layout logic
kevinneko Feb 6, 2024
a0cbea0
Use main actor and remove CharcoalContainerManagerKey
kevinneko Feb 6, 2024
bbb6b90
Fix access control on CharcoalContainerManager
kevinneko Feb 6, 2024
f5b77b3
Make viewID as @State
kevinneko Feb 6, 2024
5020edf
Use EnviromentObject to create CharcoalContainerManager for each cont…
kevinneko Feb 8, 2024
793a635
Use ObservedObject on CharcoalContainerManager
kevinneko Feb 8, 2024
131c2dd
Add use charcoal button as demo trigger
kevinneko Feb 12, 2024
3b4e47b
Add arrow logic on tooltip
kevinneko Feb 12, 2024
d902eed
Refine arrow logic
kevinneko Feb 12, 2024
9ae7e05
Refine arrow layout logic
kevinneko Feb 12, 2024
968feb9
Use StateObject to prevent unexpected reinit
kevinneko Feb 12, 2024
1539dac
Refactor TooltipBubbleShape
kevinneko Feb 12, 2024
ca43fec
Fix edge layout logic
kevinneko Feb 12, 2024
506345d
Add comment
kevinneko Feb 12, 2024
08b32dd
Format code
kevinneko Feb 12, 2024
2de961e
Use new approach to remove adaptiveMaxWidth
kevinneko Feb 12, 2024
64586f5
Fix the tip bubble's position latency
kevinneko Feb 12, 2024
abdd345
Add dismiss when interaction
kevinneko Feb 20, 2024
e38ca0e
Reformat
kevinneko Feb 20, 2024
4e67667
Init CharcoalTooltipView
kevinneko Apr 24, 2024
225c31e
Init Bubble shape
kevinneko Apr 24, 2024
51eff4a
Refine tooltip preview
kevinneko Apr 24, 2024
b658ce2
Rename as Charcoal Bubble Shape
kevinneko Apr 30, 2024
0073b9e
Add Label to tooltip
kevinneko Apr 30, 2024
15ffb14
Update text frame when traitCollection did change
kevinneko Apr 30, 2024
567de17
Update CharcoalTooltipView.swift
kevinneko Apr 30, 2024
6b1ae10
Add CharcoalTooltip
kevinneko Apr 30, 2024
ef1684c
Can debug show on method
kevinneko Apr 30, 2024
c7e60ae
Can layout point
kevinneko Apr 30, 2024
972e3b2
Can redraw target point
kevinneko Apr 30, 2024
1d0fb67
Update CharcoalTooltip.swift
kevinneko Apr 30, 2024
6f73f32
Refine tooltip display
kevinneko May 1, 2024
3efb6f3
Share the logic
kevinneko May 1, 2024
87ce7c2
Use interaction mode
kevinneko May 1, 2024
e0ba65e
Use CharcoalOverlayContainerView
kevinneko May 1, 2024
71bb979
Update CharcoalOverlay.swift
kevinneko May 1, 2024
8c5bf82
Refactor to ChacoalOverlayManager
kevinneko May 1, 2024
b391488
Makes CharcoalIdentifiableOverlayView Identifiable
kevinneko May 1, 2024
9586ce4
Refine layout logic
kevinneko May 1, 2024
a417758
Add display(view: CharcoalIdentifiableOverlayView)
kevinneko May 1, 2024
37cee23
Add tooltip to uikit example
kevinneko May 1, 2024
3c62e22
Update Tooltips.swift
kevinneko May 1, 2024
df2f52a
Add CharcoalIdentifiableOverlayDelegate
kevinneko May 1, 2024
ff1d909
Reformat
kevinneko May 1, 2024
dfe1553
Update StringExtension.swift
kevinneko May 1, 2024
a71477b
Add to UIKitSample
kevinneko May 1, 2024
479eaef
Merge branch 'main' into feat-swiftui-tooltip
kevinneko May 8, 2024
11c805a
Fix public requirements
kevinneko May 8, 2024
658afd5
Merge branch 'feat-swiftui-tooltip' into feat-uikit-tooltip
kevinneko May 8, 2024
6d1c039
Reformat
kevinneko May 8, 2024
9dcdb2c
Use touch began to handle dismiss on touch
kevinneko May 8, 2024
7708f10
Update CharcoalIdentifiableOverlayView.swift
kevinneko May 8, 2024
752ba6d
Move show logic out
kevinneko May 15, 2024
1f10419
Reformat
kevinneko May 15, 2024
e0231f0
Refine dismiss method
kevinneko May 15, 2024
f75fb7a
Add ActionContent and ActionComplete callback
kevinneko May 15, 2024
0f18ca5
Update CharcoalBubbleShape_UIKit.swift
kevinneko May 15, 2024
dde2404
Merge branch 'main' into feat-swiftui-tooltip
kevinneko May 30, 2024
a2e52b9
Merge branch 'main' into feat-swiftui-tooltip
kevinneko May 30, 2024
e55d4f0
Merge branch 'feat-swiftui-tooltip' into feat-uikit-tooltip
kevinneko May 30, 2024
53d1f9f
Make use of Autolayout logic
kevinneko Jun 4, 2024
ae4e7cf
Reformat
kevinneko Jun 4, 2024
7f927fa
Refine deinit
kevinneko Jun 4, 2024
c9b455f
Merge branch 'main' into feat-uikit-tooltip
kevinneko Jun 25, 2024
0f2f0b6
Merge branch 'main' into feat-uikit-tooltip
kevinneko Jul 10, 2024
7f0c626
Move config cell to TooltipTableViewCell
kevinneko Jul 10, 2024
bec9a13
guard backgroundView == nil
kevinneko Jul 10, 2024
08a5b18
Remove public of ChacoalOverlayManager
kevinneko Jul 10, 2024
73fe8f5
Make tooltipXY private
kevinneko Jul 10, 2024
f396a11
Reformat
kevinneko Jul 10, 2024
f5d4512
refactor backgroundView
kevinneko Jul 10, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Refine layout tips logic
kevinneko committed Jan 31, 2024
commit 7d138119e92a9bdc1fc3c283d0638ee408306df2
98 changes: 50 additions & 48 deletions Sources/CharcoalSwiftUI/Components/CharcoalTooltip.swift
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
import SwiftUI

public struct CharcoalTooltip: CharcoalPopupView {
public static func == (lhs: CharcoalTooltip, rhs: CharcoalTooltip) -> Bool {
return lhs.text == rhs.text && lhs.targetFrame == rhs.targetFrame && lhs.maxWidth == rhs.maxWidth
}

let text: String
let targetFrame: CGRect
let maxWidth: CGFloat
@@ -29,20 +25,20 @@ public struct CharcoalTooltip: CharcoalPopupView {
}

func tooltipX(canvasGeometrySize: CGSize) -> CGFloat {
// print("targetFrameMidX \(targetFrame.midX) tooltipWidth \(tooltipSize.width)")
let minX = targetFrame.midX - (tooltipSize.width / 2.0)
// print("tooltipX \(max(0, minX))")
let edgeLeft = max(0, minX)
let edgeRight = min(edgeLeft, canvasGeometrySize.width - tooltipSize.width)
// print("edgeLeft \(edgeLeft) edgeRight \(edgeRight)")
return min(edgeLeft, edgeRight)
}

func tooltipY(canvasGeometrySize: CGSize) -> CGFloat {
print("targetFrameMidX \(targetFrame.midX) tooltipHeight \(tooltipSize.height)")
let minX = targetFrame.maxY + spacingToTarget
let edgeBottom = canvasGeometrySize.height - tooltipSize.height - targetFrame.height - spacingToTarget
print("edgeBottom \(edgeBottom)")
var edgeBottom = targetFrame.maxY + spacingToTarget + targetFrame.height

if edgeBottom >= canvasGeometrySize.height {
edgeBottom = targetFrame.minY - tooltipSize.height - spacingToTarget
}

return min(minX, edgeBottom)
}

@@ -65,10 +61,7 @@ public struct CharcoalTooltip: CharcoalPopupView {
})
)
.onPreferenceChange(TooltipSizeKey.self, perform: { value in
DispatchQueue.main.async {
tooltipSize = value
}
print("canvasGeometry \(canvasGeometry.size) tooltipSize \(tooltipSize)")
tooltipSize = value
})
.offset(CGSize(
width: tooltipX(canvasGeometrySize: canvasGeometry.size),
@@ -77,6 +70,10 @@ public struct CharcoalTooltip: CharcoalPopupView {
.animation(.none, value: targetFrame)
})
}

public static func == (lhs: CharcoalTooltip, rhs: CharcoalTooltip) -> Bool {
return lhs.text == rhs.text && lhs.targetFrame == rhs.targetFrame && lhs.maxWidth == rhs.maxWidth && lhs.tooltipSize == rhs.tooltipSize
}
}

struct TooltipSizeKey: PreferenceKey {
@@ -118,41 +115,46 @@ private struct TooltipsPreviewView: View {
@State var isPresenting4 = false

var body: some View {
ZStack(alignment: .topLeading) {
GeometryReader(content: { geometry in
Button {
isPresenting.toggle()
} label: {
Image(charocalIcon: .question24)
GeometryReader(content: { geometry in
ScrollView {
ZStack(alignment: .topLeading) {
Color.clear

Button {
isPresenting.toggle()
} label: {
Image(charocalIcon: .question24)
}
.charcoalTooltip(isPresenting: $isPresenting, text: "Hello World ")
.offset(CGSize(width: 20.0, height: 20.0))

Button {
isPresenting2.toggle()
} label: {
Image(charocalIcon: .question24)
}
.charcoalTooltip(isPresenting: $isPresenting2, text: "Hello World This is a tooltip")
.offset(CGSize(width: 100.0, height: 100.0))

Button {
isPresenting3.toggle()
} label: {
Image(charocalIcon: .question24)
}
.charcoalTooltip(isPresenting: $isPresenting3, text: "here is testing it's multiple line feature")
.offset(CGSize(width: geometry.size.width - 30, height: 100.0))

Button {
isPresenting4.toggle()
} label: {
Image(charocalIcon: .question24)
}
.charcoalTooltip(isPresenting: $isPresenting4, text: "Hello World This is a tooltip and here is testing it's multiple line feature")
.offset(CGSize(width: geometry.size.width - 40, height: geometry.size.height - 40))

}
.charcoalTooltip(isPresenting: $isPresenting, text: "Hello World This is a tooltip and here is testing it's multiple line feature")
.offset(CGSize(width: 20.0, height: 20.0))

Button {
isPresenting2.toggle()
} label: {
Image(charocalIcon: .question24)
}
.charcoalTooltip(isPresenting: $isPresenting2, text: "Hello World This is a tooltip and here is testing it's multiple line feature")
.offset(CGSize(width: 100.0, height: 100.0))

Button {
isPresenting3.toggle()
} label: {
Image(charocalIcon: .question24)
}
.charcoalTooltip(isPresenting: $isPresenting3, text: "Hello World This is a tooltip and here is testing it's multiple line feature")
.offset(CGSize(width: geometry.size.width - 30, height: 100.0))

Button {
isPresenting4.toggle()
} label: {
Image(charocalIcon: .question24)
}
.charcoalTooltip(isPresenting: $isPresenting4, text: "Hello World This is a tooltip and here is testing it's multiple line feature")
.offset(CGSize(width: geometry.size.width - 40, height: geometry.size.height - 40))
})
}
}
})
.ignoresSafeArea()
.charcoalOverlayContainer()
}
Original file line number Diff line number Diff line change
@@ -68,7 +68,7 @@ struct CharcoalOverlayContainer: View {
}
}
}
.animation(.spring, value: viewManager.isPresenting)
.animation(.easeInOut(duration: 0.2), value: viewManager.isPresenting)
.onDisappear { viewManager.removeView() }
}
}