flea-qml 0.0.0-stage → 0.1.0

package/ui/LocalSend.qml

@@ -0,0 +1,56 @@
+import QtQuick
+
+// Directive 71: the menu's LocalSend row is the Taildrop row's twin, so this is ui/Taildrop.qml's
+// shape for the other one: the only thing here that knows about LocalSend, with ui/ContextMenu.qml
+// reading "peers" and rendering it. The work itself is the backend's, which drives localsend-cli on
+// a pty of its own; nothing here ever opens the LocalSend app.
+Item {
+    id: root
+
+    property var backend: null
+    // [{id, label}], the devices the CLI discovered, named the way their own owners named them.
+    property var peers: []
+    property string reason: "checking"
+    property bool checking: false
+    // Whether this install has answered once: until then a look in flight dims the row, afterwards the last answer stands.
+    property bool answeredOnce: false
+    signal refreshed()
+    signal completed(bool ok, string reason)
+
+    // The list is asked for when a menu opens, and kept while it is warm: discovery costs a CLI run
+    // of over a second, and a right click is not a reason to announce this box on the LAN again.
+    readonly property int warmMs: 15000
+    property double _askedAt: 0
+
+    function refresh(installed) {
+        if (!installed) {
+            root.peers = []
+            root.answeredOnce = false
+            root.reason = "localsend-cli is not installed"
+            return true
+        }
+        if (root.checking) return false
+        if (root._askedAt > 0 && Date.now() - root._askedAt < root.warmMs) return true
+        root.checking = true
+        root.backend.localSend("peers", "", [])
+        return true
+    }
+
+    function send(peer, paths) {
+        if (!peer || paths.length === 0) return false
+        root.backend.localSend("send", peer, paths)
+        return true
+    }
+
+    function answered(list, why) {
+        root._askedAt = Date.now()
+        root.checking = false
+        root.answeredOnce = true
+        var rows = []
+        for (var i = 0; i < list.length; i++)
+            rows.push({ id: String(list[i].name), label: String(list[i].name) })
+        root.peers = rows
+        root.reason = why
+        root.refreshed()
+    }
+}

package/ui/LocalSendMark.qml

@@ -0,0 +1,73 @@
+import QtQuick
+import QtQuick.Shapes
+import qs.Commons
+
+// The LocalSend mark, reproduced from the official artwork rather than recut, the same ruling that
+// brought TailscaleMark and DropboxMark back: a solid disc inside a ring of eight dashes, monochrome
+// and palette-tinted, no brand teal. Outside the cut and outside Glyph.qml, where FleaMark sits.
+Item {
+    id: root
+
+    // The type scale, not the slot, and clamped so a reproduction can never out-size the cut glyph
+    // beside it. A smaller caller slot still wins, the way Glyph's own min() lets it.
+    property real iconSize: Theme.markSize
+    property color color: "transparent"
+
+    // Measured off docs/design/flea-shelf/export/localsend-96.png at alpha 128: the disc ends at
+    // 20 px, the dash band runs 31.25 to 36.25 px, and the ink is eight runs of 31 degrees whose
+    // centres are 45 degrees apart. The logo's own ink box is 72.5 px of that 96 px file, and this
+    // mark fills its slot rather than keeping the file's padding, which is the AdGuard lesson, so
+    // every fraction below is of that ink box.
+    readonly property real discRadius: 0.276
+    readonly property real ringRadius: 0.466
+    readonly property real dashStroke: 0.069
+    // Round ends add half the stroke beyond each arc, which is what turns the 22.5 degrees drawn
+    // here into the 31 degrees of ink the artwork shows.
+    readonly property real dashArc: 22.5
+    readonly property int dashes: 8
+
+    readonly property real drawn: Math.min(Theme.markSize, root.iconSize)
+
+    implicitWidth: root.drawn
+    implicitHeight: root.drawn
+    width: root.drawn
+    height: root.drawn
+
+    // All eight arcs in one path string: a ShapePath is not an Item, so a Repeater cannot make them.
+    readonly property string ring: {
+        var centre = root.drawn / 2
+        var radius = root.ringRadius * root.drawn
+        var half = root.dashArc / 2
+        var out = ""
+        for (var i = 0; i < root.dashes; i++) {
+            var from = (i * 360 / root.dashes - half) * Math.PI / 180
+            var to = (i * 360 / root.dashes + half) * Math.PI / 180
+            out += "M " + (centre + radius * Math.cos(from)) + " " + (centre + radius * Math.sin(from))
+                 + " A " + radius + " " + radius + " 0 0 1 "
+                 + (centre + radius * Math.cos(to)) + " " + (centre + radius * Math.sin(to)) + " "
+        }
+        return out
+    }
+
+    Rectangle {
+        anchors.centerIn: parent
+        width: 2 * root.discRadius * root.drawn
+        height: width
+        radius: width / 2
+        color: root.color
+    }
+
+    Shape {
+        anchors.fill: parent
+        preferredRendererType: Shape.CurveRenderer
+
+        ShapePath {
+            fillColor: "transparent"
+            strokeColor: root.color
+            strokeWidth: root.dashStroke * root.drawn
+            capStyle: ShapePath.RoundCap
+
+            PathSvg { path: root.ring }
+        }
+    }
+}

package/ui/MarkdownBlockView.qml

@@ -0,0 +1,311 @@
+import QtQuick
+import "." as Flea
+import "js/CodeRuns.js" as CodeRuns
+import "js/Markdown.js" as Markdown
+import "js/MdHtmlImage.js" as HtmlImage
+
+// One Markdown block, built as the one kind it is, at the top of the document or inside an item or a quote.
+Item {
+    id: view
+
+    property var block: ({})
+    property int blockIndex: -1
+    // How many blocks the list holding this one has, so the last one knows nothing follows it.
+    property int blockCount: 0
+    // The preview that sets the document's sizes and colours.
+    property Item preview: null
+    // Only a figure intersecting the viewport may send a render request.
+    property bool inView: true
+
+    // The drawn run text this view built, else null for any other kind or a maths run.
+    readonly property Item runText: view.block.type === "run" && view.block.maths === undefined ? (kind.item as Item) : null
+    // A picture followed by a picture block sits at the list spacing; a picture followed by text keeps the block gap, so what follows never touches it.
+    readonly property bool nextIsPicture: view.nextBlock !== null && view.nextBlock !== undefined && (view.nextBlock.type === "image" || view.nextBlock.type === "images" || view.nextBlock.type === "remote" || view.nextBlock.type === "figure")
+    readonly property int pictureGap: (view.block.type === "images" || view.block.type === "image") && view.blockIndex < view.blockCount - 1 && !view.nextIsPicture ? view.preview.blockGap : 0
+    // The blocks beside this one in the list that holds it: the document's list at the top, the item's or quote's parts inside one.
+    property var siblings: null
+    // The block after this one in the same list, which decides whether a picture keeps the block gap.
+    readonly property var neighbourList: view.siblings !== null ? view.siblings : (view.preview !== null ? view.preview.blockList : null)
+    readonly property var nextBlock: neighbourList === null || neighbourList === undefined || view.blockIndex + 1 >= neighbourList.length
+        ? null : neighbourList[view.blockIndex + 1]
+    // Only the drawn block lends its height, and a list or table chunk lies flush by its own negative y.
+    height: kind.item ? kind.item.height + kind.item.y + view.pictureGap : 0
+
+    // A block builds only the parts its own kind draws, on the view; an empty heading or quote builds none, so it has no height.
+    Loader {
+        id: kind
+        sourceComponent: view.block.text === "" && view.block.parts === undefined && (view.block.type === "heading" || view.block.type === "quote") ? null : view.block.type === "run" && view.block.maths !== undefined ? mathsBlock
+            : view.block.type === "run" || view.block.type === "heading" ? textBlock
+            : view.block.type === "fence" ? fenceBlock
+            : view.block.type === "figure" ? figureBlock
+            : view.block.type === "quote" ? quoteBlock
+            : view.block.type === "remote" ? remoteBlock
+            : view.block.type === "list" ? listBlock
+            : view.block.type === "table" ? tableBlock
+            : view.block.type === "images" ? imagesBlock : imageBlock
+        onLoaded: kind.item.parent = view
+    }
+
+    // Headings use the prescribed bold text size and line box.
+    Component {
+        id: textBlock
+        Flea.MarkdownText {
+            linkGate: Markdown.isExternalLink
+            width: view.width
+            bodyPx: view.preview.bodyPx
+            markdown: view.block.text
+            font.pixelSize: view.block.type === "heading" ? view.preview.headingPx(view.block.level) : view.preview.bodyPx
+            font.bold: view.block.type === "heading"
+            // h1 and h2 take the bright foreground; deeper levels and body stay the foreground.
+            color: view.block.type === "heading" && view.block.level <= view.preview.boardHeadings.length ? Theme.color.foregroundBright : Theme.color.foreground
+            // An HTML heading keeps its align attribute; Markdown headings stay left.
+            horizontalAlignment: view.block.align === "center" ? Text.AlignHCenter : view.block.align === "right" ? Text.AlignRight : Text.AlignLeft
+        }
+    }
+
+    // A run with inline formulas draws each in its line once the helper answers; the other runs build none of its parts.
+    Component {
+        id: mathsBlock
+        Flea.MarkdownMathsText {
+            objectName: "mathsText"
+            linkGate: Markdown.isExternalLink
+            width: view.width
+            bodyPx: view.preview.bodyPx
+            source: view.block.text
+            maths: view.block.maths
+            askArmed: view.preview.figuresArmed
+            inView: view.inView
+            bgHex: view.preview.hexOf(Theme.color.background)
+            fgHex: view.preview.inkHex
+            accentHex: view.preview.accentHex
+            mutedHex: view.preview.mutedHex
+            surfaceHex: view.preview.surfaceHex
+            fencePadX: view.preview.fencePadX
+            fencePadY: view.preview.fencePadY
+            font.pixelSize: view.preview.bodyPx
+        }
+    }
+
+    Component {
+        id: tableBlock
+        Flea.MarkdownTable {
+            block: view.block
+            preview: view.preview
+            availableWidth: view.width
+        }
+    }
+
+    // A named fence takes engine colours after its reply; the escaped foreground text before it preserves its height.
+    Component {
+        id: fenceBlock
+        Rectangle {
+            id: fenceBox
+            objectName: "fenceBox"
+            width: view.width
+            height: fenceText.implicitHeight + 2 * view.preview.fencePadY
+            color: view.preview.codeSurface
+            readonly property string info: String(view.block.info || "").trim()
+            readonly property var backend: view.preview.backend
+            readonly property bool coloured: fenceBox.info !== "" && view.preview.shownView !== Markdown.SOURCE
+                && fenceBox.backend !== null && typeof fenceBox.backend.askCode === "function"
+            // The one slot this fence asks on, handed out by the preview so no two fences share one.
+            property string slot: ""
+            property int token: 0
+            // The first 1-based line not yet answered, and the runs of each answered line.
+            property int next: 1
+            property var held: ({})
+            property int stamp: 0
+            // The engine refused this fence (binary, large or failed), so it stays in the foreground.
+            property bool refused: false
+            readonly property var fenceLines: view.block.text.split("\n")
+            readonly property int lineCap: 400
+            readonly property bool awaiting: fenceBox.coloured && !fenceBox.refused && fenceBox.next <= fenceBox.fenceLines.length
+            readonly property bool holdsScreen: fenceBox.awaiting && view.inView
+            readonly property string markup: {
+                if (fenceBox.stamp < 0)
+                    return ""
+                var out = []
+                for (var i = 0; i < fenceBox.fenceLines.length; i++) {
+                    var runs = fenceBox.held[i + 1]
+                    out.push(CodeRuns.styled(runs !== undefined ? runs : [0, fenceBox.fenceLines[i]], view.preview.inks))
+                }
+                return out.join("<br>")
+            }
+
+            function ask() {
+                if (fenceBox.slot === "" || !fenceBox.awaiting || fenceBox.token !== 0)
+                    return
+                var count = Math.min(fenceBox.lineCap, fenceBox.fenceLines.length - fenceBox.next + 1)
+                fenceBox.token = fenceBox.backend.askCode(fenceBox.slot, { text: view.block.text, name: "", lang: fenceBox.info }, fenceBox.next, count)
+            }
+            function rebind() {
+                fenceBox.token = 0
+                fenceBox.held = {}
+                fenceBox.stamp += 1
+                fenceBox.next = 1
+                fenceBox.refused = false
+                Qt.callLater(fenceBox.ask)
+            }
+            onBackendChanged: fenceBox.rebind()
+            function answered(message) {
+                if (fenceBox.token === 0 || message.token !== fenceBox.token)
+                    return
+                fenceBox.token = 0
+                var rows = message.lines || []
+                if ((message.state !== "styled" && message.state !== "plain") || rows.length === 0) {
+                    fenceBox.refused = true
+                    return
+                }
+                for (var i = 0; i < rows.length; i++)
+                    fenceBox.held[fenceBox.next + i] = rows[i]
+                fenceBox.next += rows.length
+                fenceBox.stamp += 1
+                fenceBox.ask()
+            }
+
+            // Only a viewport fence holds the first screen; tearing its block down releases that hold too.
+            property bool waiting: false
+            function setWaiting(on) {
+                if (on === fenceBox.waiting)
+                    return
+                fenceBox.waiting = on
+                view.preview.fenceWaiting(on ? 1 : -1)
+            }
+            onHoldsScreenChanged: fenceBox.setWaiting(fenceBox.holdsScreen)
+            onAwaitingChanged: fenceBox.ask()
+            Component.onCompleted: {
+                fenceBox.slot = view.preview.fenceSlot(fenceBox)
+                fenceBox.setWaiting(fenceBox.holdsScreen)
+                if (fenceBox.awaiting)
+                    fenceBox.ask()
+            }
+            Component.onDestruction: {
+                if (fenceBox.waiting) view.preview.fenceWaiting(-1)
+                delete view.preview.fenceReplies[fenceBox.slot]
+            }
+
+            Text {
+                id: fenceText
+                anchors.fill: parent
+                anchors.leftMargin: view.preview.fencePadX
+                anchors.rightMargin: view.preview.fencePadX
+                anchors.topMargin: view.preview.fencePadY
+                anchors.bottomMargin: view.preview.fencePadY
+                text: fenceBox.coloured ? fenceBox.markup : view.block.text
+                textFormat: fenceBox.coloured ? Text.StyledText : Text.PlainText
+                wrapMode: Text.Wrap
+                color: Theme.color.foreground
+                font.family: Theme.font.family
+                font.pixelSize: view.preview.bodyPx
+            }
+        }
+    }
+
+    // Display maths use the figure fallback's vertical inset; the list owns the block gap.
+    Component {
+        id: figureBlock
+        Item {
+            id: figureBox
+            objectName: "figureBox"
+            width: view.width
+            readonly property int figureInset: figureItem.ready && figureItem.kind === "math" && figureItem.fitHeight > 0 ? Theme.spacing.gap : 0
+            height: figureItem.implicitHeight + 2 * figureInset
+
+            Flea.MarkdownFigure {
+                id: figureItem
+                objectName: "figureItem"
+                y: parent.figureInset
+                width: parent.width
+                kind: view.block.kind
+                source: view.block.source
+                display: true
+                askArmed: view.preview.figuresArmed
+                inView: view.inView
+                bgHex: view.preview.hexOf(Theme.color.background)
+                fgHex: view.preview.inkHex
+                accentHex: view.preview.accentHex
+                mutedHex: view.preview.mutedHex
+                surfaceHex: view.preview.surfaceHex
+                fallbackColor: view.preview.codeSurface
+                fencePadX: view.preview.fencePadX
+                fencePadY: view.preview.fencePadY
+                fontFamily: Theme.font.family
+                bodyPx: view.preview.bodyPx
+            }
+        }
+    }
+
+    // A quote draws one bar per level, and a joined block sits flush under the one above so the outer bars run on.
+    Component {
+        id: quoteBlock
+        Flea.MarkdownQuote {
+            objectName: "quoteRow"
+            y: view.block.joined === true ? -view.preview.blockGap : 0
+            width: view.width
+            levels: view.block.depth !== undefined ? view.block.depth : 1
+            linkGate: Markdown.isExternalLink
+            bodyPx: view.preview.bodyPx
+            text: view.block.text
+            parts: view.block.parts !== undefined ? view.block.parts : []
+            preview: view.preview
+            inView: view.inView
+        }
+    }
+
+    // A chunk after the first sits flush under its predecessor, across the gap the list puts between blocks.
+    Component {
+        id: listBlock
+        Flea.MarkdownList {
+            objectName: "listColumn"
+            y: view.block.joined === true ? -view.preview.blockGap : 0
+            width: view.width
+            list: view.block
+            gap: view.preview.blockGap
+            linkGate: Markdown.isExternalLink
+            bodyPx: view.preview.bodyPx
+            preview: view.preview
+            inView: view.inView
+        }
+    }
+
+    Component {
+        id: remoteBlock
+        Flea.MarkdownRemote {
+            width: view.width
+            host: view.block.host
+        }
+    }
+
+    // A badge row builds only its own pictures, wrapped and aligned by the row itself.
+    Component {
+        id: imagesBlock
+        Flea.MarkdownImages {
+            width: view.width
+            images: view.block.type === "images" ? view.block.items : []
+            centred: view.block.type === "images" && view.block.align === "center"
+            gap: view.preview.blockGap
+            linkGate: Markdown.isExternalLink
+        }
+    }
+
+    Component {
+        id: imageBlock
+        Image {
+            id: localImage
+            // The size rule of the badge row (HtmlImage.pictureSize); its paragraph's align="center" centres it.
+            readonly property var fit: HtmlImage.pictureSize(view.block.type === "image" ? view.block : ({}), localImage.implicitWidth, localImage.implicitHeight, view.width)
+            width: localImage.fit.w
+            height: localImage.fit.h
+            x: view.block.type === "image" && view.block.align === "center" ? Math.round((view.width - localImage.width) / 2) : 0
+            fillMode: localImage.fit.stretch ? Image.Stretch : Image.PreserveAspectFit
+            visible: view.block.type === "image"
+            asynchronous: true
+            autoTransform: true
+            source: view.block.type === "image" ? view.block.url : ""
+
+            // A logo wrapped in a link opens it through the pane's link gate.
+            TapHandler { enabled: view.block.link !== undefined; gesturePolicy: TapHandler.ReleaseWithinBounds; onTapped: if (Markdown.isExternalLink(view.block.link)) Qt.openUrlExternally(view.block.link) }
+            HoverHandler { enabled: view.block.link !== undefined; cursorShape: Qt.PointingHandCursor }
+        }
+    }
+}

package/ui/MarkdownBlocks.qml

@@ -0,0 +1,35 @@
+import QtQuick
+
+// The blocks an item or a quote holds, in order, each drawn as its kind draws at the top of the document.
+Column {
+    id: root
+
+    property var blocks: []
+    // The preview that sets the document's sizes and colours, and whether this part of it is in view for figures.
+    property Item preview: null
+    property bool inView: true
+
+    spacing: root.preview !== null ? root.preview.blockGap : 0
+
+    // The first block's view, tracked without one object per item.
+    property Item firstView: null
+    // The first block's run text, null unless that block is a plain run.
+    readonly property Item firstRunText: root.firstView !== null ? root.firstView.runText : null
+
+    Repeater {
+        onItemAdded: function (index, item) { if (index === 0) root.firstView = item }
+        onItemRemoved: function (index, item) { if (item === root.firstView) root.firstView = null }
+        model: root.blocks
+        delegate: MarkdownBlockView {
+            required property var modelData
+            required property int index
+            block: modelData
+            blockIndex: index
+            blockCount: root.blocks.length
+            siblings: root.blocks
+            preview: root.preview
+            inView: root.inView
+            width: root.width
+        }
+    }
+}