@swiftbrowser/swift 0.0.0-stage → 0.2.0

package/Sources/SwiftUI/API/SectionSupplements.swift

@@ -0,0 +1,96 @@
+// `Section` headers and footers that are views, not just `Text`.
+//
+// A `Text` header or footer (or an optional one, `footer: { if x { Text(…) } }`)
+// stays the `section`'s `header` / `footer` string, as it always was. Any
+// other view becomes a child of the `section`: a `sectionheader` before the
+// rows and a `sectionfooter` after them, each with the view inside (props
+// `{}`). In a list the page lays the header view out above the section's card
+// and the footer view below it, in the content width, in the footnote font
+// and the secondary color; outside a list (a `Section` in a `LazyVStack`) they
+// stack with the rows. As for a string header, the texts in a header view
+// are upper-cased (the environment's `textCase`, which `.textCase(nil)`
+// inside the header undoes).
+
+/// A section's view header or footer: kind `sectionheader` or `sectionfooter`.
+struct _SectionSupplement {
+    let kind: String
+    let content: any View
+}
+extension _SectionSupplement: _PrimitiveView {}
+extension _SectionSupplement: _HostView {
+    var _kind: String { kind }
+    func _props(in environment: EnvironmentValues) -> _JSON { .object([:]) }
+    var _content: [any View] {
+        guard kind == "sectionheader" else { return [content] }
+        return [_withEnvironment(content) { $0.textCase = .uppercase }]
+    }
+}
+
+/// `content.environment(…)` for an existential view.
+private func _withEnvironment(_ view: any View, _ apply: @escaping (inout EnvironmentValues) -> Void) -> any View {
+    func open<V: View>(_ content: V) -> any View { _EnvironmentView(content: content, apply: apply) }
+    return open(view)
+}
+
+/// A header or footer view as the section stores it: a `Text` (or an
+/// optional `Text`) as its string, anything else as a view.
+private enum _SectionLabel {
+    case text(String?)
+    case view(any View)
+
+    init<V: View>(_ view: V) {
+        if let text = view as? Text {
+            self = .text(text.content)
+        } else if let optional = view as? Text? {
+            self = .text(optional?.content)
+        } else {
+            self = .view(view)
+        }
+    }
+
+    var string: String? {
+        if case .text(let string) = self { return string }
+        return nil
+    }
+
+    var view: (any View)? {
+        if case .view(let view) = self { return view }
+        return nil
+    }
+}
+
+extension Section {
+    private init(content: Content, header: _SectionLabel?, footer: _SectionLabel?) {
+        self.header = header?.string
+        self.footer = footer?.string
+        self.content = content
+        headerView = header?.view
+        footerView = footer?.view
+    }
+
+    public init<H: View>(@ViewBuilder content: () -> Content, @ViewBuilder header: () -> H) {
+        self.init(content: content(), header: _SectionLabel(header()), footer: nil)
+    }
+
+    public init<F: View>(@ViewBuilder content: () -> Content, @ViewBuilder footer: () -> F) {
+        self.init(content: content(), header: nil, footer: _SectionLabel(footer()))
+    }
+
+    public init<H: View, F: View>(@ViewBuilder content: () -> Content, @ViewBuilder header: () -> H,
+                                  @ViewBuilder footer: () -> F) {
+        self.init(content: content(), header: _SectionLabel(header()), footer: _SectionLabel(footer()))
+    }
+
+    /// The pre-iOS 15 spellings, with the header and footer as values.
+    public init<H: View>(header: H, @ViewBuilder content: () -> Content) {
+        self.init(content: content(), header: _SectionLabel(header), footer: nil)
+    }
+
+    public init<F: View>(footer: F, @ViewBuilder content: () -> Content) {
+        self.init(content: content(), header: nil, footer: _SectionLabel(footer))
+    }
+
+    public init<H: View, F: View>(header: H, footer: F, @ViewBuilder content: () -> Content) {
+        self.init(content: content(), header: _SectionLabel(header), footer: _SectionLabel(footer))
+    }
+}

package/Sources/SwiftUI/API/Shape.swift

@@ -0,0 +1,214 @@
+// Custom shapes: a `Shape` that is not one of the built-in shapes the page
+// draws by name (`_name` is `"path"`) is drawn from its `path(in:)`.
+//
+// The path depends on the size the shape is laid out at, which only the page
+// knows, so a shape's element reports its size (`reportsSize`, like a
+// `GeometryReader`'s) and the next render sends the path for it: SVG path
+// data in `path`, for the rectangle `size`. Until the first report the
+// shape draws nothing.
+//
+// SwiftUI animates a shape by interpolating its `animatableData` and asking
+// for the path at each step. Here, when a shape's `animatableData` changes in
+// a pass that may animate it (the transaction has an animation, or an
+// `.animation(_:value:)` above it saw its value change), the element also
+// carries the path along the way (`frames`: the paths at
+// fractions of the change, and below 0 and above 1 for a spring that
+// overshoots). The page plays them when the commit animates the shape, in the
+// commit's timing curve (src/animation.ts); otherwise it draws the end path.
+
+/// A shape that can be inset (`strokeBorder` draws inside its bounds).
+public protocol InsettableShape: Shape {
+    associatedtype InsetShape: InsettableShape
+    func inset(by amount: CGFloat) -> InsetShape
+}
+
+/// A shape inset by `amount` on every side.
+nonisolated public struct _InsetShape<Base: Shape>: InsettableShape {
+    let base: Base
+    let amount: CGFloat
+
+    public func path(in rect: CGRect) -> Path {
+        let inset = rect.insetBy(dx: amount, dy: amount)
+        guard inset.width >= 0, inset.height >= 0 else { return Path() }
+        return base.path(in: inset)
+    }
+
+    public func inset(by amount: CGFloat) -> _InsetShape<Base> {
+        _InsetShape(base: base, amount: self.amount + amount)
+    }
+
+    public var animatableData: CGFloat {
+        get { amount }
+        set { self = _InsetShape(base: base, amount: newValue) }
+    }
+}
+
+extension Rectangle: InsettableShape {
+    public func inset(by amount: CGFloat) -> _InsetShape<Rectangle> { _InsetShape(base: self, amount: amount) }
+}
+extension RoundedRectangle: InsettableShape {
+    public func inset(by amount: CGFloat) -> _InsetShape<RoundedRectangle> { _InsetShape(base: self, amount: amount) }
+}
+extension UnevenRoundedRectangle: InsettableShape {
+    public func inset(by amount: CGFloat) -> _InsetShape<UnevenRoundedRectangle> { _InsetShape(base: self, amount: amount) }
+}
+extension Circle: InsettableShape {
+    public func inset(by amount: CGFloat) -> _InsetShape<Circle> { _InsetShape(base: self, amount: amount) }
+}
+extension Capsule: InsettableShape {
+    public func inset(by amount: CGFloat) -> _InsetShape<Capsule> { _InsetShape(base: self, amount: amount) }
+}
+extension Ellipse: InsettableShape {
+    public func inset(by amount: CGFloat) -> _InsetShape<Ellipse> { _InsetShape(base: self, amount: amount) }
+}
+extension ContainerRelativeShape: InsettableShape {
+    public func inset(by amount: CGFloat) -> _InsetShape<ContainerRelativeShape> { _InsetShape(base: self, amount: amount) }
+}
+
+extension Path: Shape {
+    public func path(in rect: CGRect) -> Path { self }
+}
+
+/// A shape is a view: drawn filled with the foreground style.
+extension Shape {
+    public var body: _ShapeView<Self> { _ShapeView(shape: self, fill: nil, stroke: nil) }
+}
+
+// MARK: - Drawing from the path
+
+/// A view whose element may draw a path for its laid-out size: the runtime
+/// reports the size to it and adds the path to its props.
+@MainActor protocol _PathDrawing: _TraitBearing {
+    /// Whether this value draws a path (a built-in shape draws by name).
+    var _drawsPath: Bool { get }
+    /// `props` with the path for `size`, and the frames of a change of the
+    /// shape's `animatableData` when the pass may animate it (`animated`).
+    func _pathProps(_ props: _JSON, size: CGSize, state: _PathState, animated: Bool) -> _JSON
+}
+
+/// What a path-drawing node keeps between renders: the shape it drew last,
+/// for which size, and the path props it sent for them.
+final class _PathState {
+    var shape: Any?
+    var size = CGSize.zero
+    var inset: CGFloat = 0
+    var fields: [String: _JSON] = [:]
+}
+
+/// The paths at these fractions of an animated change are sent with it.
+let _pathFrameProgress: [Double] = [-0.3, -0.2, -0.1] + (0...60).map { Double($0) / 60 } + [1.1, 1.2, 1.3]
+
+extension _ShapeView: _PathDrawing {
+    var _drawsPath: Bool { shape._name == "path" }
+
+    /// How far inside its bounds the path is drawn: half the line of a
+    /// `strokeBorder`, so that the line lies inside.
+    private var strokeInset: CGFloat {
+        guard let stroke, stroke.inset else { return 0 }
+        return stroke.lineWidth / 2
+    }
+
+    @MainActor func _pathProps(_ props: _JSON, size: CGSize, state: _PathState, animated: Bool) -> _JSON {
+        guard case .object(var fields) = props else { return props }
+        let inset = strokeInset
+        var budget = 4096
+        let unchanged = state.size == size && state.inset == inset
+            && state.shape.map { _Sameness.same($0, shape, budget: &budget) } == true
+        if !unchanged {
+            var path: [String: _JSON] = [
+                "path": .string(size == .zero ? "" : Self.drawnPath(of: shape, inset: inset, in: size)._svg),
+                "size": .object(["width": .number(size.width), "height": .number(size.height)]),
+            ]
+            if animated, size != .zero, let previous = state.shape as? S,
+               let frames = Self.frames(from: previous, to: shape, inset: inset, in: size) {
+                path["frames"] = frames
+            }
+            state.shape = shape
+            state.size = size
+            state.inset = inset
+            state.fields = path
+        }
+        fields.merge(state.fields) { _, new in new }
+        return .object(fields)
+    }
+
+    /// The path of `shape` in a rectangle of `size`, inset by `inset` (an
+    /// insettable shape is inset as a shape, any other as a rectangle).
+    @MainActor static func drawnPath(of shape: S, inset: CGFloat, in size: CGSize) -> Path {
+        let rect = CGRect(origin: .zero, size: size)
+        guard inset != 0 else { return shape.path(in: rect) }
+        if let insettable = shape as? any InsettableShape {
+            return insettable.inset(by: inset).path(in: rect)
+        }
+        return shape.path(in: rect.insetBy(dx: inset, dy: inset))
+    }
+
+    /// The paths along a change of `animatableData`, or nil when it did not change.
+    @MainActor static func frames(from previous: S, to shape: S, inset: CGFloat, in size: CGSize) -> _JSON? {
+        let from = previous.animatableData, to = shape.animatableData
+        guard S.AnimatableData.self != EmptyAnimatableData.self, from != to else { return nil }
+        var paths: [String] = []
+        var indices: [Int: Int] = [:]
+        var index: [_JSON] = []
+        for progress in _pathFrameProgress {
+            var step = shape
+            step.animatableData = from.interpolated(towards: to, amount: progress)
+            let svg = drawnPath(of: step, inset: inset, in: size)._svg
+            let hash = svg.hashValue
+            if let known = indices[hash], paths[known] == svg {
+                index.append(.number(Double(known)))
+            } else {
+                indices[hash] = paths.count
+                index.append(.number(Double(paths.count)))
+                paths.append(svg)
+            }
+        }
+        return .object([
+            "progress": .array(_pathFrameProgress.map(_JSON.number)),
+            "index": .array(index),
+            "paths": .array(paths.map(_JSON.string)),
+        ])
+    }
+}
+
+extension _TrimmedShapeView: _PathDrawing {
+    var _drawsPath: Bool { _name == "path" }
+
+    @MainActor func _pathProps(_ props: _JSON, size: CGSize, state: _PathState, animated: Bool) -> _JSON {
+        _ShapeView(shape: self, fill: nil, stroke: nil)._pathProps(props, size: size, state: state, animated: animated)
+    }
+}
+
+// MARK: - Scaled shapes
+
+/// A shape scaled about an anchor of its bounds (`shape.scale(0.99)`), drawn from its path.
+nonisolated public struct ScaledShape<Content: Shape>: Shape {
+    public var shape: Content
+    public var scale: CGSize
+    public var anchor: UnitPoint
+
+    public init(shape: Content, scale: CGSize, anchor: UnitPoint = .center) {
+        self.shape = shape
+        self.scale = scale
+        self.anchor = anchor
+    }
+
+    public func path(in rect: CGRect) -> Path {
+        let x = rect.minX + anchor.x * rect.width
+        let y = rect.minY + anchor.y * rect.height
+        let transform = CGAffineTransform(translationX: -x, y: -y)
+            .concatenating(CGAffineTransform(scaleX: scale.width, y: scale.height))
+            .concatenating(CGAffineTransform(translationX: x, y: y))
+        return shape.path(in: rect).applying(transform)
+    }
+}
+
+nonisolated extension Shape {
+    public func scale(x: CGFloat = 1, y: CGFloat = 1, anchor: UnitPoint = .center) -> ScaledShape<Self> {
+        ScaledShape(shape: self, scale: CGSize(width: x, height: y), anchor: anchor)
+    }
+
+    public func scale(_ scale: CGFloat, anchor: UnitPoint = .center) -> ScaledShape<Self> {
+        ScaledShape(shape: self, scale: CGSize(width: scale, height: scale), anchor: anchor)
+    }
+}