starred/Memola
1
0
Fork 0
mirror of https://github.com/dscyrescotti/Memola.git synced 2026-04-25 10:08:34 +02:00
Code Issues 5 Packages Projects Releases 3 Wiki Activity

feat: add shadow for pens

Browse Source
This commit is contained in:
dscyrescotti
2024-05-18 22:51:44 +07:00
parent 23ce30731c
commit 9058815b0a
2 changed files with 100 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
Memola/Features/Memo/ColorPicker/ColorPicker.swift
View File

@@ -29,10 +29,8 @@ struct ColorPicker: View {
.resizable() .resizable()
.scaleEffect(1.8) .scaleEffect(1.8)
.aspectRatio(contentMode: .fill) .aspectRatio(contentMode: .fill)
.opacity(0.5) .clipShape(Triangle())
.overlay { pen.color
pen.color
}
.clipShape(Triangle()) .clipShape(Triangle())
} }
.frame(width: size * 2 + 10) .frame(width: size * 2 + 10)
@@ -170,7 +168,6 @@ struct ColorPicker: View {
Image("transparent-grid-rect") Image("transparent-grid-rect")
.resizable() .resizable()
.aspectRatio(contentMode: .fill) .aspectRatio(contentMode: .fill)
.opacity(0.5)
.background(.white) .background(.white)
} }
color color

163
Memola/Features/Memo/PenDock/PenDockView.swift
View File

@@ -18,35 +18,7 @@ struct PenDockView: View {
VStack(alignment: .trailing) { VStack(alignment: .trailing) {
if let pen = tool.selectedPen { if let pen = tool.selectedPen {
VStack(spacing: 10) { VStack(spacing: 10) {
Button { penColorButton(pen)
tool.opensColorPicker = true
} label: {
let hsba = pen.color.hsba
Color(hue: hsba.hue, saturation: hsba.saturation, brightness: hsba.brightness)
.overlay {
Image("transparent-grid-square")
.resizable()
.scaleEffect(1.8)
.aspectRatio(contentMode: .fill)
.opacity(0.5)
.overlay {
pen.color
}
.clipShape(Triangle())
}
.clipShape(Capsule())
.overlay {
Capsule()
.stroke(Color.gray, lineWidth: 0.2)
}
.frame(height: 20)
.drawingGroup()
}
.hoverEffect(.lift)
.popover(isPresented: $tool.opensColorPicker) {
ColorPicker(pen: pen)
.presentationCompactAdaptation(.popover)
}
Capsule() Capsule()
.frame(height: 20) .frame(height: 20)
} }
@@ -61,48 +33,52 @@ struct PenDockView: View {
Color.clear Color.clear
.frame(width: width * factor - 18, height: 50) .frame(width: width * factor - 18, height: 50)
} }
ScrollViewReader { proxy in penScrollView
ScrollView(.vertical, showsIndicators: false) {
LazyVStack(spacing: 0) {
ForEach(tool.pens) { pen in
penView(pen)
.id(pen.id)
.scrollTransition { content, phase in
content
.scaleEffect(phase.isIdentity ? 1 : 0.04, anchor: .trailing)
}
}
}
.padding(.vertical, 10)
.padding(.leading, 40)
}
.onReceive(tool.scrollPublisher) { id in
DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
withAnimation {
proxy.scrollTo(id)
}
}
}
}
.frame(maxHeight:( (height * factor + 10) * 6) + 20)
.fixedSize()
.background(alignment: .trailing) {
RoundedRectangle(cornerRadius: 20)
.fill(.regularMaterial)
.frame(width: width * factor - 18)
}
.clipShape(.rect(cornerRadii: .init(bottomTrailing: 20, topTrailing: 20)))
.overlay(alignment: .bottomLeading) {
newPenButton
.offset(x: 60, y: 10)
}
} }
.fixedSize() .fixedSize()
} }
@ViewBuilder var penScrollView: some View {
ScrollViewReader { proxy in
ScrollView(.vertical, showsIndicators: false) {
LazyVStack(spacing: 0) {
ForEach(tool.pens) { pen in
penView(pen)
.id(pen.id)
.scrollTransition { content, phase in
content
.scaleEffect(phase.isIdentity ? 1 : 0.04, anchor: .trailing)
}
}
}
.padding(.vertical, 10)
.padding(.leading, 40)
}
.onReceive(tool.scrollPublisher) { id in
DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
withAnimation {
proxy.scrollTo(id)
}
}
}
}
.frame(maxHeight:( (height * factor + 10) * 6) + 20)
.fixedSize()
.background(alignment: .trailing) {
RoundedRectangle(cornerRadius: 20)
.fill(.regularMaterial)
.frame(width: width * factor - 18)
}
.clipShape(.rect(cornerRadii: .init(bottomTrailing: 20, topTrailing: 20)))
.overlay(alignment: .bottomLeading) {
newPenButton
.offset(x: 60, y: 10)
}
}
func penView(_ pen: Pen) -> some View { func penView(_ pen: Pen) -> some View {
ZStack { ZStack {
penShadow(pen)
if let tip = pen.style.icon.tip { if let tip = pen.style.icon.tip {
Image(tip) Image(tip)
.resizable() .resizable()
@@ -161,6 +137,38 @@ struct PenDockView: View {
.offset(x: tool.selectedPen === pen ? 0 : 25) .offset(x: tool.selectedPen === pen ? 0 : 25)
} }
func penColorButton(_ pen: Pen) -> some View {
Button {
tool.opensColorPicker = true
} label: {
let hsba = pen.color.hsba
Color(hue: hsba.hue, saturation: hsba.saturation, brightness: hsba.brightness)
.overlay {
Image("transparent-grid-square")
.resizable()
.scaleEffect(1.8)
.aspectRatio(contentMode: .fill)
.clipShape(Triangle())
pen.color
.clipShape(Triangle())
}
.background(.white)
.clipShape(Capsule())
.frame(height: 20)
.overlay {
Capsule()
.stroke(Color.gray, lineWidth: 0.4)
}
.padding(0.2)
.drawingGroup()
}
.hoverEffect(.lift)
.popover(isPresented: $tool.opensColorPicker) {
ColorPicker(pen: pen)
.presentationCompactAdaptation(.popover)
}
}
var newPenButton: some View { var newPenButton: some View {
Button { Button {
let pen = PenObject.createObject(\.viewContext, penStyle: .marker) let pen = PenObject.createObject(\.viewContext, penStyle: .marker)
@@ -199,4 +207,29 @@ struct PenDockView: View {
.padding(.vertical, 5) .padding(.vertical, 5)
.padding(.leading, 10) .padding(.leading, 10)
} }
func penShadow(_ pen: Pen) -> some View {
ZStack {
Group {
if let tip = pen.style.icon.tip {
Image(tip)
.resizable()
.renderingMode(.template)
}
Image(pen.style.icon.base)
.resizable()
.renderingMode(.template)
}
.drawingGroup()
.foregroundStyle(.black.opacity(0.2))
.blur(radius: 3)
if let tip = pen.style.icon.tip {
Image(tip)
.resizable()
.renderingMode(.template)
.foregroundStyle(Color(red: pen.rgba[0], green: pen.rgba[1], blue: pen.rgba[2]))
.blur(radius: 0.5)
}
}
}
} }