flea-qml 0.0.0-stage → 0.2.0

package/ui/MarkdownRemote.qml

@@ -0,0 +1,82 @@
+import QtQuick
+import QtQuick.Shapes
+import "." as Flea
+import "js/Icons.js" as Icons
+import "js/Markdown.js" as Markdown
+
+// The board's placeholder spans the content with a dashed muted box around a left-aligned muted image glyph and sentence on one line.
+Item {
+    id: root
+
+    // The blocked image's host, which the sentence names.
+    property string host: ""
+    // RenderedPreviews' remote box is a 1 px CSS dashed border: 3 px dashes with 3 px gaps.
+    readonly property int dashPx: 3
+    readonly property int dashPitch: 2 * root.dashPx
+    // The delegate sets the width; the dashes and the sentence follow it.
+    height: remoteRow.implicitHeight + 2 * Theme.spacing.gap
+
+    // The dashes a side of this length holds, laid from its corner: the last one ends at the returned offset.
+    // Sample input: 20 answers 15, three dashes at 0, 6 and 12 ending at 15.
+    function dashEnd(length) {
+        return (Math.max(1, Math.floor((length + root.dashPx) / root.dashPitch)) - 1) * root.dashPitch + root.dashPx
+    }
+
+    // The four sides as SVG subpaths, each dashing from its own corner and running half a stroke inside the box.
+    // Sample input: (20, 10) with a 1 px hairline answers "M0 0.5 L15 0.5 M0 9.5 L15 9.5 M0.5 0 L0.5 9 M19.5 0 L19.5 9".
+    function borderPath(w, h) {
+        var half = Theme.spacing.hairline / 2
+        var across = root.dashEnd(w)
+        var down = root.dashEnd(h)
+        return "M0 " + half + " L" + across + " " + half + " M0 " + (h - half) + " L" + across + " " + (h - half)
+            + " M" + half + " 0 L" + half + " " + down + " M" + (w - half) + " 0 L" + (w - half) + " " + down
+    }
+
+    // One Shape draws all four sides, so a wide card builds a handful of objects instead of a Rectangle per dash.
+    Shape {
+        id: dashes
+        anchors.fill: parent
+
+        ShapePath {
+            strokeColor: Theme.color.mutedFrame
+            strokeWidth: Theme.spacing.hairline
+            fillColor: "transparent"
+            strokeStyle: ShapePath.DashLine
+            // A dash is dashPx long in units of the stroke width, which the hairline sets.
+            dashPattern: [root.dashPx / Theme.spacing.hairline, root.dashPx / Theme.spacing.hairline]
+            capStyle: ShapePath.FlatCap
+            PathSvg { path: root.borderPath(root.width, root.height) }
+        }
+    }
+
+    Row {
+        id: remoteRow
+        anchors.left: parent.left
+        anchors.leftMargin: Theme.spacing.gap
+        anchors.right: parent.right
+        anchors.rightMargin: Theme.spacing.gap
+        anchors.verticalCenter: parent.verticalCenter
+        spacing: Theme.spacing.gap
+
+        Flea.Glyph {
+            id: remoteMark
+            anchors.verticalCenter: parent.verticalCenter
+            width: Theme.chromeMarkSize
+            height: Theme.chromeMarkSize
+            maxSize: Theme.chromeMarkSize
+            name: Icons.glyphFor("image-x-generic")
+            color: Theme.color.mutedFrame
+        }
+
+        Text {
+            anchors.verticalCenter: parent.verticalCenter
+            width: parent.width - remoteMark.width - parent.spacing
+            text: Markdown.placeholder(root.host)
+            color: Theme.color.muted
+            font.family: Theme.font.family
+            font.pixelSize: Theme.font.caption
+            textFormat: Text.PlainText
+            elide: Text.ElideRight
+        }
+    }
+}

package/ui/MarkdownSource.qml

@@ -0,0 +1,155 @@
+import QtQuick
+import "." as Flea
+import "js/CodeRuns.js" as CodeRuns
+
+// The Source view: the file's lines coloured by the backend's code engine and numbered, asked a screen at a time through CodeLines.
+Item {
+    id: root
+
+    // The whole text, empty while Rendered shows; a save changes it, so the lines are asked again.
+    property string text: ""
+    property string path: ""
+    // True on network and phone storage, where the backend is never given the path.
+    property bool truncate: false
+    property var backend: null
+    // The backend's name for this pane's Source ask, so a sibling pane's ask never ends it.
+    property string slot: "look"
+    property bool active: false
+    // The document's read or listing-size refusal also applies when no code request can be made.
+    property bool tooLarge: false
+    property bool readFailed: false
+    // The wrap the code view uses: a long line ends in an ellipsis until w wraps it.
+    property bool wrap: false
+    property int insetX: 0
+    property int insetY: 0
+    // The notice drawn above the first line, empty for none, and the gap between it and the text.
+    property string notice: ""
+    property int blockGap: 0
+    property int bodyPx: Theme.font.body
+    // The lines are built on the first Source view and kept after it, so a Rendered file builds no CodeLines.
+    property bool built: false
+    Component.onCompleted: root.built = root.active
+    onActiveChanged: if (root.active) root.built = true
+    readonly property bool engine: root.backend !== null && typeof root.backend.askCode === "function"
+    // The CodeLines once built, null before.
+    readonly property var lines: frame.item !== null ? frame.item.lines : null
+    // CodeLines' scrolling view, which the scroll bar and the wheel read.
+    readonly property var list: frame.item !== null ? frame.item.list : null
+    readonly property bool binary: root.lines !== null && root.lines.answer === "binary"
+    readonly property bool large: root.tooLarge || (root.lines !== null && root.lines.answer === "large")
+    readonly property bool failed: root.readFailed || (root.lines !== null && root.lines.answer === "failed")
+    readonly property bool refused: root.binary || root.large || root.failed
+    readonly property string status: root.large ? "This file is too large to preview." : root.failed ? "This file could not be read." : root.firstScreen ? "ready" : "loading"
+    // Characters of the rows the list lays out, re-read as it scrolls or an answer lands.
+    readonly property int laidChars: root.list === null ? 0 : root.laidOf(root.list.contentY, root.lines.stamp)
+    // Lines in view are answered; a file the backend refused (binary, large, failed) has no lines, so it is no screen to wait for.
+    readonly property bool firstScreen: root.refused || (root.lines !== null && root.lines.firstScreen)
+    readonly property Item noticeItem: root.list !== null && root.list.headerItem !== null ? root.list.headerItem.notice : null
+
+    function laidOf(top, stamp) {
+        var n = 0
+        var rows = root.list.contentItem.children
+        for (var i = 0; i < rows.length; i++)
+            if (rows[i].index !== undefined && rows[i].children.length === 2) {
+                var runs = root.lines.rowAt(rows[i].index + 1)
+                if (runs) n += CodeRuns.plain(runs).length
+            }
+        return n
+    }
+    function keepTop(top) {
+        root.list.forceLayout()
+        root.list.positionViewAtIndex(top, ListView.Beginning)
+    }
+    // The line at the top of the view stays at the top while the rows change width.
+    onWrapChanged: if (root.list !== null) Qt.callLater(root.keepTop, Math.max(0, root.list.indexAt(0, root.list.contentY + 1)))
+
+    // The notice sits above the first line and scrolls with the rows, so the list never moves under a change to it.
+    Component {
+        id: noticeHeader
+
+        Item {
+            id: noticeRow
+            // The notice's Text, which the pane and the suites read for its place.
+            readonly property Item notice: deepNotice
+            width: ListView.view.width
+            height: root.notice !== "" ? deepNotice.height + root.blockGap : 0
+            visible: root.notice !== ""
+            onHeightChanged: if (root.list !== null && root.notice !== "") Qt.callLater(root.list.positionViewAtBeginning)
+
+            Text {
+                id: deepNotice
+                width: noticeRow.width
+                visible: root.notice !== ""
+                text: root.notice
+                textFormat: Text.PlainText
+                elide: Text.ElideRight
+                color: Theme.color.muted
+                font.family: Theme.font.family
+                font.pixelSize: Theme.font.caption
+            }
+        }
+    }
+
+    // Without an engine the backend cannot colour a line, so the text the caller holds is drawn plain.
+    Loader {
+        id: frame
+        anchors.fill: parent
+        active: root.built
+
+        sourceComponent: Item {
+            id: frameItem
+            anchors.fill: parent
+            property alias lines: codeLines
+            Component.onCompleted: Qt.callLater(frameItem.list.positionViewAtBeginning)
+            // CodeLines' scrolling view, its one Flickable child.
+            readonly property var list: {
+                var kids = codeLines.children
+                for (var i = 0; i < kids.length; i++)
+                    if (kids[i].contentY !== undefined) return kids[i]
+                return null
+            }
+
+            Flea.CodeLines {
+                id: codeLines
+                anchors.fill: parent
+                anchors.leftMargin: root.insetX
+                anchors.rightMargin: root.insetX
+                anchors.topMargin: root.insetY
+                anchors.bottomMargin: root.insetY
+                visible: !root.refused
+                backend: root.backend
+                slot: root.slot
+                path: root.path
+                fromText: root.truncate || !root.engine
+                text: root.text
+                active: root.active && !root.tooLarge
+                numbered: true
+                wrap: root.wrap
+                scrolls: true
+                pixelSize: root.bodyPx
+                header: noticeHeader
+            }
+
+            // The wheel and the bar belong to the frame, as in Rendered: the bar sits on the frame edge beside the list's top.
+            Flea.FastScrollHandler {
+                flickable: frameItem.list
+                visible: !root.refused
+            }
+
+            Flea.ViewportScrollBar {
+                anchors { top: parent.top; topMargin: root.insetY; right: parent.right }
+                flickable: frameItem.list
+                visible: !root.refused
+            }
+        }
+    }
+
+    Flea.CodeRefusal {
+        anchors.fill: parent
+        visible: root.refused
+        binary: root.binary
+        tooLarge: root.large
+        failed: root.failed
+        markName: "markdown"
+    }
+}

package/ui/MarkdownTable.qml

@@ -0,0 +1,222 @@
+import QtQuick
+import "." as Flea
+import "js/Markdown.js" as Markdown
+import "js/MarkdownTableFit.js" as Fit
+import "js/Scroll.js" as Scroll
+
+// A table hugs its cells with Grid, Column and Row, never QtQuick.Layouts, so the preview never loads it.
+Column {
+    id: root
+    objectName: "tableGrid"
+
+    // The parsed table chunk, and the preview that sets the document's size and gap.
+    property var block: ({ head: [], aligns: [], rows: [], measure: [], pictures: [], weights: [], words: [], cols: 0 })
+    property Item preview: null
+    // The width the block column gives the table; columns wrap inside it, and 0 means no limit.
+    property real availableWidth: 0
+    readonly property int bodyPx: root.preview.bodyPx
+    // A chunk after the first sits flush under its predecessor, across the gap the list puts between blocks.
+    y: root.block.joined === true ? -root.preview.blockGap : 0
+    // A table wider than its block clips to the block and scrolls sideways; the bar's lane is reserved under it, once under a chunked table's last chunk, and under no fitting table.
+    width: root.overflows ? root.availableWidth : root.tableWidth
+    clip: root.overflows
+    readonly property bool lane: root.overflows && root.block.last !== false
+    bottomPadding: root.lane ? Theme.spacing.rowPaddingX : 0
+    spacing: 0
+
+    // The sideways scroll, built when the table overflows and dropped when it stops: a table that fits owns no object for it, which the block cost gates count.
+    property Item scroller: null
+    function syncScroller() {
+        if (root.scroller === null && root.overflows) {
+            root.scroller = Qt.createComponent("MarkdownTableScroll.qml").createObject(root, { table: root })
+        } else if (root.scroller !== null && !root.overflows) {
+            root.scroller.destroy()
+            root.scroller = null
+        }
+    }
+    onOverflowsChanged: root.syncScroller()
+    Component.onCompleted: root.syncScroller()
+    // Every row slides by the scroll position under the clip, so a table that fits sits at zero.
+    readonly property real shift: root.overflows && root.scroller !== null ? -root.scroller.contentX : 0
+
+    Row {
+        id: headerRow
+        x: root.shift
+        spacing: root.cellGap
+
+        Repeater {
+            model: root.block.head.length
+            delegate: Flea.MarkdownText {
+                linkGate: Markdown.isExternalLink
+                width: root.textWidth(index)
+                bodyPx: root.bodyPx
+                cellPad: 2
+                markdown: root.block.head[index]
+                horizontalAlignment: root.alignAt(index)
+                font.bold: true
+                color: Theme.color.foregroundBright
+            }
+        }
+    }
+
+    Rectangle {
+        visible: root.block.head.length > 0
+        x: root.shift
+        width: root.tableWidth
+        height: Theme.spacing.hairline
+        color: Theme.color.foreground
+        opacity: root.preview.ruleOpacity
+    }
+
+    Repeater {
+        id: bodyRows
+        model: root.block.rows.length
+        delegate: Column {
+            readonly property int row: index
+            x: root.shift
+            width: root.tableWidth
+            spacing: 0
+
+            Row {
+                spacing: root.cellGap
+
+                Repeater {
+                    model: root.columns
+                    delegate: Flea.MarkdownText {
+                        linkGate: Markdown.isExternalLink
+                        width: root.textWidth(index)
+                        bodyPx: root.bodyPx
+                        cellPad: 2
+                        markdown: root.cellAt(row, index)
+                        horizontalAlignment: root.alignAt(index)
+                    }
+                }
+            }
+
+            Rectangle {
+                width: root.tableWidth
+                height: Theme.spacing.hairline
+                color: Theme.color.foreground
+                opacity: root.preview.ruleOpacity
+            }
+        }
+    }
+
+    // Invisible measurers carry each column's widest cell plus a second for an image cell, since the parser cannot know the image's width.
+    Repeater {
+        id: measurers
+        model: root.measureTexts
+        delegate: Text {
+            objectName: "measurer"
+            visible: false
+            text: modelData
+            textFormat: Text.MarkdownText
+            font.family: Theme.font.family
+            font.pixelSize: root.bodyPx
+            // A header cell may set the width and is bold, so every measurer is: chunks without the header must agree.
+            font.bold: true
+        }
+    }
+
+    // The measure of each column, then the picture cell of every column that has one, in the order the measurers are built.
+    readonly property var measureTexts: {
+        var texts = []
+        var pictures = root.block.pictures || []
+        for (var c = 0; c < root.columns; c++)
+            texts.push(c < root.block.measure.length ? root.block.measure[c] : "")
+        for (var p = 0; p < root.columns; p++) {
+            if (p < pictures.length && pictures[p] !== "")
+                texts.push(pictures[p])
+        }
+        return texts
+    }
+    // The empty gap each column keeps beside its text, and the width of one glyph when the parser measured no text.
+    readonly property int cellGap: 14
+    readonly property real fallbackGlyphEm: 0.6
+    // A column's text width: the wider of its measure and its picture cell, once the measurers have laid out.
+    readonly property var columnPx: {
+        // Count and implicitWidth notify when a measurer arrives and lays out; itemAt alone notifies nothing.
+        var widths = []
+        var pictures = root.block.pictures || []
+        var next = root.columns
+        for (var c = 0; c < root.columns; c++) {
+            var own = measurers.count > c ? measurers.itemAt(c) : null
+            var px = own ? own.implicitWidth : 0
+            if (c < pictures.length && pictures[c] !== "") {
+                var extra = measurers.count > next ? measurers.itemAt(next) : null
+                px = Math.max(px, extra ? extra.implicitWidth : 0)
+                next++
+            }
+            widths.push(px)
+        }
+        return widths
+    }
+    // A column's text width beside its picture width: the parser weighs text alone, so the glyph price divides text by text.
+    readonly property var textPx: {
+        // Count and implicitWidth notify when a measurer arrives and lays out; itemAt alone notifies nothing.
+        var widths = []
+        for (var c = 0; c < root.columns; c++) {
+            var own = measurers.count > c ? measurers.itemAt(c) : null
+            widths.push(own ? own.implicitWidth : 0)
+        }
+        return widths
+    }
+    // Pixels a column of the parser's width weight draws: the table's measured text over its weight, so the longest word converts to pixels.
+    readonly property real glyphPx: {
+        var px = 0
+        var weight = 0
+        var weights = root.block.weights || []
+        for (var c = 0; c < root.columns; c++) {
+            if (c < weights.length && weights[c] > 0) {
+                px += root.textPx[c]
+                weight += weights[c]
+            }
+        }
+        return weight > 0 ? px / weight : root.bodyPx * root.fallbackGlyphEm
+    }
+    // Each column's width: natural when the table fits the block, else shared by Fit with every column keeping its longest word first.
+    readonly property var widths: {
+        var natural = []
+        var minimum = []
+        var words = root.block.words || []
+        for (var c = 0; c < root.columns; c++) {
+            // Whole pixels up: Fit floors its shares, and a text box a fraction short of its word breaks the word.
+            natural.push(Math.ceil(root.columnPx[c]) + root.cellGap)
+            minimum.push(Math.ceil((c < words.length ? words[c] : 0) * root.glyphPx) + root.cellGap)
+        }
+        // A wide glyph takes two, so no column goes under two glyphs of text.
+        var least = root.cellGap + Math.ceil(2 * root.glyphPx)
+        return root.availableWidth > 0 ? Fit.fit(natural, minimum, root.availableWidth, least) : natural
+    }
+    readonly property real tableWidth: {
+        var total = 0
+        for (var c = 0; c < root.widths.length; c++)
+            total += root.widths[c]
+        return total
+    }
+    // Wider than its block once every column holds its longest word whole; the block's width then bounds the table.
+    readonly property bool overflows: root.availableWidth > 0 && root.tableWidth - root.availableWidth > Scroll.OVERFLOW_PX
+
+    // The first body row, which the capture's IPC aims its wheel at.
+    function firstRow() { return bodyRows.itemAt(0) }
+
+    // Helpers over the block, so delegates read cells and alignment by place.
+    readonly property int columns: Math.max(1, root.block.cols)
+    function alignName(i) {
+        return i < root.block.aligns.length ? root.block.aligns[i] : "left"
+    }
+    function alignAt(i) {
+        var name = root.alignName(i)
+        return name === "center" ? Text.AlignHCenter : name === "right" ? Text.AlignRight : Text.AlignLeft
+    }
+    function cellAt(r, c) {
+        return r < root.block.rows.length && c < root.block.rows[r].length ? root.block.rows[r][c] : ""
+    }
+    function colWidth(col) {
+        return col < root.widths.length ? root.widths[col] : 0
+    }
+    // A cell's text stays inside its column's share minus the gap the next cell starts after, so the gap never holds ink.
+    function textWidth(col) {
+        return Math.max(0, root.colWidth(col) - root.cellGap)
+    }
+}

package/ui/MarkdownTableScroll.qml

@@ -0,0 +1,64 @@
+import QtQuick
+import "." as Flea
+import "js/Scroll.js" as Scroll
+
+// The sideways scroll of a table wider than its block: the position and extent the table's rows slide by, the bar under the table, and the wheel's arithmetic.
+Flickable {
+    id: root
+    objectName: "tableScroll"
+
+    required property Item table
+
+    // A sibling of the table in the block, laid over it. A positioner would stack it as a row, so under one it takes the positioner's parent and offset.
+    readonly property Item flow: root.table.parent !== null && root.table.parent.move !== undefined ? root.table.parent : null
+    // The key every chunk of one table shares, undefined for a table in one piece.
+    readonly property var group: root.table.block.tableKey
+    parent: root.flow !== null ? root.flow.parent : root.table.parent
+    x: root.table.x + (root.flow !== null ? root.flow.x : 0)
+    y: root.table.y + (root.flow !== null ? root.flow.y : 0)
+    z: 1
+    width: root.table.width
+    height: root.table.height
+    contentWidth: root.table.tableWidth
+    contentHeight: root.height
+    // Only the wheel and the bar move it: a disabled item takes none of the presses the table's links and cells need.
+    enabled: false
+    // The chunks of one table follow one position, whichever of them the wheel is over.
+    onContentXChanged: if (root.route !== null) root.route.follow(root)
+    onWidthChanged: root.returnToBounds()
+    onContentWidthChanged: root.returnToBounds()
+
+    // The router calls this for a stroke it gave the table, since the disabled handler below gets no event of its own.
+    function wheel(event) {
+        return wheelHandler.handleWheel(event)
+    }
+
+    // Kept from the start, since the table is already going when this is destroyed with it.
+    property Item route: null
+    Component.onCompleted: {
+        root.route = root.table.preview !== null && root.table.preview.tableWheel ? root.table.preview.tableWheel : null
+        if (root.route !== null)
+            root.route.add(root)
+    }
+    Component.onDestruction: {
+        if (root.route !== null)
+            root.route.remove(root)
+    }
+
+    Flea.FastScrollHandler {
+        id: wheelHandler
+        parent: root
+        flickable: root
+    }
+
+    // The bar draws under the table, in the lane the table reserved; the lane shows it only while moving, hovered or dragged.
+    Flea.ViewportScrollBar {
+        parent: root.parent
+        // Only the last chunk of a table holds the lane, so a joined chunk stays flush under the one above.
+        visible: root.table.lane && root.contentWidth - root.width > Scroll.OVERFLOW_PX
+        x: root.x
+        y: root.y + root.height - height
+        flickable: root
+        orientation: Qt.Horizontal
+    }
+}

package/ui/MarkdownTableWheel.qml

@@ -0,0 +1,126 @@
+import QtQuick
+import "js/Scroll.js" as Scroll
+
+// A wheel or swipe that goes sideways over a table wider than its block scrolls that table; a vertical one is left for the document's handler beneath.
+MouseArea {
+    id: root
+    objectName: "tableWheel"
+
+    // The sideways scrolls alive in the document, which each adds itself to and drops itself from.
+    property var scrollers: []
+    // The table a touchpad stroke went to until it ends, and whether the stroke went to the document instead.
+    property var held: null
+    property bool documentStroke: false
+    // The sideways position each chunked table was last left at, by key, so a chunk built later joins it.
+    property var positions: ({})
+
+    anchors.fill: parent
+    // A press is never taken: the table's links and the document's own handler need them.
+    acceptedButtons: Qt.NoButton
+    // Over the document's FastScrollHandler (z 1000), so a sideways stroke reaches the table first.
+    z: 1001
+
+    function add(scroller) {
+        root.scrollers = root.scrollers.concat([scroller])
+        if (scroller.group !== undefined && root.positions[scroller.group] !== undefined)
+            scroller.contentX = root.positions[scroller.group]
+    }
+
+    // The other chunks of this scroller's table move to its position.
+    function follow(scroller) {
+        if (scroller.group === undefined)
+            return
+        root.positions[scroller.group] = scroller.contentX
+        for (var i = 0; i < root.scrollers.length; i++) {
+            var other = root.scrollers[i]
+            if (other && other !== scroller && other.group === scroller.group && other.contentX !== scroller.contentX)
+                other.contentX = scroller.contentX
+        }
+    }
+
+    function remove(scroller) {
+        root.scrollers = root.scrollers.filter(function (s) { return s && s !== scroller })
+        if (root.held === scroller)
+            root.held = null
+    }
+
+    // A new document forgets the old one's sideways places; chunks of the live one still join.
+    function reset() {
+        root.positions = {}
+    }
+
+    // The overflowing table under a point of this item, else null.
+    function scrollerAt(x, y) {
+        for (var i = 0; i < root.scrollers.length; i++) {
+            var s = root.scrollers[i]
+            if (!s || !s.visible || !s.table || !s.table.overflows)
+                continue
+            var at = s.mapFromItem(root, x, y)
+            if (at.x >= 0 && at.y >= 0 && at.x < s.width && at.y < s.height)
+                return s
+        }
+        return null
+    }
+
+    // The sideways distance of an event: Shift turns a vertical wheel notch sideways, as it does in a browser.
+    function across(event, axis) {
+        var pixel = Number(event.pixelDelta.x) || 0
+        var angle = Number(event.angleDelta.x) || 0
+        if ((event.modifiers & Qt.ShiftModifier) && pixel === 0 && angle === 0)
+            return axis === "pixel" ? Number(event.pixelDelta.y) || 0 : Number(event.angleDelta.y) || 0
+        return axis === "pixel" ? pixel : angle
+    }
+
+    // Sideways when its sideways travel beats its vertical in the unit the event carries, or Shift holds a notch; Shift on a vertical notch is sideways.
+    function sideways(event) {
+        var pixel = (Number(event.pixelDelta.x) || 0) !== 0 || (Number(event.pixelDelta.y) || 0) !== 0
+        var x = Math.abs(root.across(event, pixel ? "pixel" : "angle"))
+        var y = Math.abs(Number(pixel ? event.pixelDelta.y : event.angleDelta.y) || 0)
+        return (event.modifiers & Qt.ShiftModifier) ? x !== 0 : x > y
+    }
+
+    // A table's wheel takes sideways deltas only; the vertical ones stay with the document.
+    function sidewaysEvent(event) {
+        return { pixelDelta: { x: root.across(event, "pixel"), y: 0 }, angleDelta: { x: root.across(event, "angle"), y: 0 },
+            modifiers: event.modifiers & ~Qt.ShiftModifier, phase: event.phase !== undefined ? event.phase : Qt.NoScrollPhase, accepted: false }
+    }
+
+    // True when the table took the event; a false answer leaves it to the document's handler under this one.
+    function route(event) {
+        if (event.modifiers & Qt.ControlModifier)
+            return false
+        var phase = event.phase !== undefined ? event.phase : Qt.NoScrollPhase
+        var at = root.scrollerAt(event.x, event.y)
+        if (!Scroll.isTouchpad(phase)) {
+            if (at === null || !root.sideways(event))
+                return false
+            at.wheel(root.sidewaysEvent(event))
+            return true
+        }
+        if (phase === Qt.ScrollBegin) {
+            root.held = null
+            root.documentStroke = false
+            // The table stops its own coasting on a new touch, and the document hears the Begin as well.
+            if (at !== null)
+                at.wheel(root.sidewaysEvent(event))
+            return false
+        }
+        if (root.held === null && !root.documentStroke && phase !== Qt.ScrollEnd) {
+            if (at !== null && root.sideways(event))
+                root.held = at
+            else if ((Number(event.pixelDelta.x) || 0) !== 0 || (Number(event.pixelDelta.y) || 0) !== 0)
+                root.documentStroke = true
+        }
+        var taker = root.held
+        if (phase === Qt.ScrollEnd) {
+            root.held = null
+            root.documentStroke = false
+        }
+        if (taker === null)
+            return false
+        taker.wheel(root.sidewaysEvent(event))
+        return true
+    }
+
+    onWheel: function (wheel) { wheel.accepted = root.route(wheel) }
+}