flea-qml 0.0.0-stage → 0.2.0

package/ui/DialogButton.qml

@@ -0,0 +1,150 @@
+import QtQuick
+import qs.Commons
+import "js/Buttons.js" as Buttons
+
+// The one control every dialog, card, picker button and strip action draws.
+Item {
+    id: root
+
+    property string label: ""
+    property bool primary: false
+    // A destructive action rests as the error label in a muted frame, never primary.
+    property bool destructive: false
+    property real horizontalPadding: Theme.spacing.gap
+    // An unavailable action shows muted ink and its press does nothing.
+    property bool available: true
+    // The keyboard's own signal. Callers whose focus sits on a wrapper pass it down.
+    property bool focused: root.activeFocus
+    // True where the form owns the Tab order and the button only reports through tabbed.
+    property bool tabHandle: false
+    // A stop in its dialog's own Tab walk; while unavailable it is disabled, so it leaves the walk and keeps its look.
+    property bool tabStop: false
+    // A member of a set (the protocols): its frame and label are foreground while it is the current one and muted otherwise.
+    property bool setMember: false
+    property bool current: false
+    // Hosted in the chrome strip: a Theme.chromeHeight press area around a Theme.chromeControlHeight frame at caption size, and Tab reaches it.
+    property bool inStrip: false
+
+    // The pointer's own state, read by the native capture harness before it shoots a hover or a press.
+    readonly property bool hovered: hover.hovered
+    readonly property bool pressed: tap.pressed
+    // A release activates only inside the press area, so a held point outside draws the resting control.
+    readonly property bool pressShown: root.pressed && root.available && tap.point.position.x >= 0 && tap.point.position.x < root.width
+        && tap.point.position.y >= 0 && tap.point.position.y < root.height
+
+    signal activated()
+    // The form owns the order; a button only reports that Tab happened inside it.
+    signal tabbed(var from, bool back)
+
+    // Focus is the control's own frame: foreground, or accent for a set member where it has hue. Where a hairline would match the rest (a primary whose rest frame is the foreground, a set member without hue) the frame draws RING wide.
+    readonly property string focusFrame: Buttons.focusFrame(Theme.color.accentHasHue, root.setMember, root.primary && Qt.colorEqual(Theme.color.accentFrame, Theme.color.foreground))
+    readonly property bool focusShown: root.focused && root.available
+    // A secondary frame takes mutedFrame, ThemeRoles' border role, under a live label; a set member takes foreground while current and mutedFrame otherwise.
+    readonly property color frame: root.focusShown && root.focusFrame === "accent" ? Theme.color.accent
+        : root.focusShown ? Theme.color.foreground
+        : root.setMember ? (root.current ? Theme.color.foreground : Theme.color.mutedFrame)
+        : root.primary && root.available ? Theme.color.accentFrame : Theme.color.mutedFrame
+    readonly property color ink: !root.available || root.setMember && !root.current ? Theme.color.muted
+        : root.destructive ? Theme.color.error : Theme.color.foreground
+    // The frame and this wash say which action is being asked for; the label stays foreground.
+    readonly property color wash: root.primary && root.available ? Qt.alpha(Theme.color.accent, Buttons.WASH_PRIMARY) : "transparent"
+    // A border draws inside its rectangle, so the thick frame grows inward and nothing moves.
+    readonly property int frameWidth: root.focusShown && root.focusFrame === "thick" ? Buttons.RING : Theme.spacing.hairline
+
+    // A chrome strip's press area fills the strip and centres the control height above its rule.
+    readonly property real frameHeight: root.inStrip ? Theme.chromeControlHeight : root.height
+    readonly property real frameY: root.inStrip ? Math.round((root.height - Theme.spacing.hairline - root.frameHeight) / 2) : 0
+
+    implicitWidth: Math.max(Theme.hitMin, text.implicitWidth + 2 * root.horizontalPadding + 2 * Theme.spacing.hairline)
+    implicitHeight: root.inStrip ? Theme.chromeHeight : Theme.rowHeight - Theme.spacing.rowPaddingY
+    // A strip control or a tab stop stays in the Tab chain and drops out as a disabled item; flipping activeFocusOnTab under a focused control only warns.
+    activeFocusOnTab: root.inStrip || root.tabStop
+    enabled: root.available || !root.inStrip && !root.tabStop
+    opacity: root.available ? 1 : Buttons.DISABLED_OPACITY
+
+    Accessible.role: Accessible.Button
+    Accessible.name: root.label
+    Accessible.onPressAction: if (root.available) root.activated()
+
+    Item {
+        id: box
+        y: root.frameY
+        width: parent.width
+        height: root.frameHeight
+
+        // Only the frame and wash shrink: native text loses thin stems under a non-integer scale.
+        Item {
+            id: chrome
+            property int insetX: root.pressShown && !Theme.reducedMotion ? Math.round(box.width * (1 - Buttons.PRESS_SCALE) / 2) : 0
+            property int insetY: root.pressShown && !Theme.reducedMotion ? Math.round(box.height * (1 - Buttons.PRESS_SCALE) / 2) : 0
+            x: chrome.insetX
+            y: chrome.insetY
+            width: Math.round(box.width) - 2 * chrome.insetX
+            height: Math.round(box.height) - 2 * chrome.insetY
+            Behavior on insetX {
+                enabled: !Theme.reducedMotion
+                NumberAnimation { duration: Buttons.PRESS_MS; easing.type: Easing.OutCubic }
+            }
+            Behavior on insetY {
+                enabled: !Theme.reducedMotion
+                NumberAnimation { duration: Buttons.PRESS_MS; easing.type: Easing.OutCubic }
+            }
+            Rectangle {
+                objectName: "buttonFrame"
+                anchors.fill: parent
+                color: root.wash
+                border.width: root.frameWidth
+                border.color: root.frame
+            }
+            // Hover and press lay the control's own ink inside the frame at its width.
+            Rectangle {
+                objectName: "buttonWash"
+                anchors.fill: parent
+                anchors.margins: root.frameWidth
+                color: root.pressShown ? Qt.alpha(root.ink, Buttons.WASH_PRESS)
+                    : !root.pressed && hover.hovered && root.available ? Qt.alpha(root.ink, Buttons.WASH_HOVER) : "transparent"
+            }
+        }
+
+        Text {
+            id: text
+            objectName: "buttonLabel"
+            anchors.centerIn: parent
+            text: root.label
+            color: root.ink
+            font.family: Theme.font.family
+            font.pixelSize: root.inStrip ? Theme.font.caption : Theme.font.body
+            textFormat: Text.PlainText
+        }
+    }
+
+    HoverHandler {
+        id: hover
+        cursorShape: root.available ? Qt.PointingHandCursor : Qt.ArrowCursor
+    }
+
+    // A held key's repeats never activate again, so a key held past a focus move cannot press the next button.
+    function keyActivate(event) { if (!root.available) event.accepted = false; else if (!event.isAutoRepeat) root.activated() }
+
+    // A focused button answers Enter exactly as a press does; a handled Tab is accepted here so Qt never moves focus past the form's own stepFocus order.
+    Keys.onReturnPressed: function(event) { root.keyActivate(event) }
+    Keys.onEnterPressed: function(event) { root.keyActivate(event) }
+    Keys.onSpacePressed: function(event) { root.keyActivate(event) }
+    Keys.onTabPressed: function(event) {
+        if (!root.tabHandle) { event.accepted = false; return }
+        root.tabbed(root, (event.modifiers & Qt.ShiftModifier) !== 0)
+        event.accepted = true
+    }
+    Keys.onBacktabPressed: function(event) {
+        if (!root.tabHandle) { event.accepted = false; return }
+        root.tabbed(root, true)
+        event.accepted = true
+    }
+
+    TapHandler {
+        id: tap
+        acceptedButtons: Qt.LeftButton
+        gesturePolicy: TapHandler.ReleaseWithinBounds
+        onTapped: if (root.available) root.activated()
+    }
+}

package/ui/DialogField.qml

@@ -0,0 +1,147 @@
+import QtQuick
+import qs.Commons
+import "." as Flea
+
+// One labelled field, as the canvas's Network board draws it: a small uppercase label above a
+// bordered box that takes the accent while it has the caret.
+Item {
+    id: root
+
+    property string label: ""
+    // An alias, not a plain property assigned from onTextChanged: writing to a property that carries
+    // a binding destroys that binding, so a later programmatic set (switching protocol resets the
+    // port) would silently never reach the field.
+    property alias text: field.text
+    property string placeholder: ""
+    // A password box hides what it holds, and the eye beside it reveals while held.
+    property bool secret: false
+    // The field that holds a refused answer frames itself in the error role; off everywhere else.
+    property bool error: false
+    // Bullets that stand for a refused answer the field no longer holds; the first key replaces them.
+    property int heldMask: 0
+
+    signal accepted()
+    // Keys changed the text, so a card can drop the sentence the error frame stands for.
+    signal edited()
+    // The form owns the order; a field only reports that Tab happened inside it.
+    signal tabbed(var from, bool back)
+
+    readonly property alias input: field
+    readonly property bool focused: field.activeFocus
+    // Read by the capture harness: whether the eye is held, and its centre in window coordinates.
+    readonly property bool revealed: reveal.pressed
+    function eyeCentre() {
+        var at = eye.mapToItem(null, eye.width / 2, eye.height / 2)
+        return Math.round(at.x) + " " + Math.round(at.y)
+    }
+
+    function takeFocus() {
+        field.forceActiveFocus()
+    }
+    readonly property real labelSpacing: 0.1
+
+    implicitHeight: caption.implicitHeight + Theme.spacing.hairline * 4 + box.height
+
+    Text {
+        id: caption
+        anchors.top: parent.top
+        anchors.left: parent.left
+        text: root.label.toUpperCase()
+        color: Theme.color.muted
+        font.family: Theme.font.family
+        font.pixelSize: Theme.font.caption
+        font.letterSpacing: Theme.font.caption * root.labelSpacing
+        textFormat: Text.PlainText
+    }
+
+    Rectangle {
+        id: box
+        anchors.top: caption.bottom
+        anchors.topMargin: Theme.spacing.hairline * 4
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: Theme.rowHeight - Theme.spacing.rowPaddingY
+        color: Theme.color.background
+        border.width: Theme.spacing.hairline
+        border.color: root.error ? Theme.color.error : (field.activeFocus ? Theme.color.accent : Theme.color.mutedFrame)
+
+        TextInput {
+            id: field
+            anchors.left: parent.left
+            anchors.right: eye.left
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.leftMargin: Theme.spacing.gap
+            anchors.rightMargin: Theme.spacing.gap
+            color: Theme.color.foreground
+            selectionColor: Theme.color.accent
+            selectedTextColor: Theme.color.background
+            font.family: Theme.font.family
+            font.pixelSize: Theme.font.body
+            clip: true
+            leftPadding: heldMarks.visible ? heldMarks.width : 0
+            // Revealed only while the eye is held, so a shoulder never reads it from a stuck toggle.
+            echoMode: root.secret && !reveal.pressed ? TextInput.Password : TextInput.Normal
+            // The boards draw a masked value as U+2022 bullets, never Qt's larger default circle.
+            passwordCharacter: "\u2022"
+            onAccepted: root.accepted()
+            onTextEdited: { root.heldMask = 0; root.edited() }
+            Keys.onPressed: function(event) {
+                if ((event.key === Qt.Key_Backspace || event.key === Qt.Key_Delete) && field.text.length === 0 && root.heldMask > 0) { root.heldMask = 0; root.edited() }
+            }
+            Keys.onTabPressed: function(event) { root.tabbed(root, (event.modifiers & Qt.ShiftModifier) !== 0) }
+            Keys.onBacktabPressed: root.tabbed(root, true)
+        }
+
+        Text {
+            id: heldMarks
+            anchors.left: field.left
+            anchors.verticalCenter: field.verticalCenter
+            visible: root.heldMask > 0 && field.text.length === 0 && !reveal.pressed
+            text: field.passwordCharacter.repeat(Math.max(0, root.heldMask))
+            color: Theme.color.foreground
+            font: field.font
+            textFormat: Text.PlainText
+        }
+
+        Text {
+            anchors.left: field.left
+            anchors.verticalCenter: parent.verticalCenter
+            visible: field.text.length === 0 && !field.activeFocus && !heldMarks.visible
+            text: root.placeholder
+            color: Theme.color.muted
+            font.family: Theme.font.family
+            font.pixelSize: Theme.font.body
+            textFormat: Text.PlainText
+            elide: Text.ElideRight
+        }
+
+        Item {
+            id: eye
+            anchors.right: parent.right
+            anchors.rightMargin: Theme.spacing.gap
+            anchors.verticalCenter: parent.verticalCenter
+            width: root.secret ? Math.max(Theme.hitMin, Theme.font.bodySmall) : 0
+            height: root.secret ? Math.max(Theme.hitMin, Theme.font.bodySmall) : 0
+
+            Accessible.role: Accessible.Button
+            Accessible.name: "Show password"
+            Accessible.ignored: !root.secret
+
+            Flea.Glyph {
+                anchors.centerIn: parent
+                width: Theme.font.bodySmall
+                height: Theme.font.bodySmall
+                visible: root.secret
+                name: "eye"
+                color: reveal.pressed ? Theme.color.accent : Theme.color.mutedFrame
+            }
+
+            MouseArea {
+                id: reveal
+                anchors.fill: parent
+                enabled: root.secret
+                cursorShape: Qt.PointingHandCursor
+            }
+        }
+    }
+}

package/ui/DialogHeader.qml

@@ -0,0 +1,31 @@
+import QtQuick
+import "." as Flea
+
+// A 0.4.0 dialog card's header (MergeFolders, RunFile, Unlock): DialogTitle, the boards' air, then a hairline rule.
+Item {
+    id: root
+
+    property alias text: title.text
+    property alias elide: title.elide
+    readonly property bool truncated: title.truncated
+    readonly property alias ruleItem: rule
+
+    // The boards draw 8 px of air under the title at their 13 px reference body.
+    readonly property real boardAir: 8
+    readonly property real referenceBody: 13
+    implicitHeight: title.implicitHeight + Math.round(root.boardAir * Theme.font.bodySmall / root.referenceBody) + Theme.spacing.hairline
+
+    Flea.DialogTitle {
+        id: title
+        width: parent.width
+    }
+
+    Rectangle {
+        id: rule
+        anchors.bottom: parent.bottom
+        width: parent.width
+        height: Theme.spacing.hairline
+        color: Theme.color.mutedFrame
+        opacity: 0.4
+    }
+}

package/ui/DialogScrim.qml

@@ -0,0 +1,20 @@
+import QtQuick
+
+// The dimmed ground under a dialog card: it takes hover, both buttons and the wheel, and a click on it dismisses the dialog.
+Rectangle {
+    id: root
+
+    signal dismissed()
+
+    anchors.fill: parent
+    color: Theme.color.background
+    opacity: 0.5
+
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
+        onClicked: root.dismissed()
+        onWheel: function(wheel) { wheel.accepted = true }
+    }
+}

package/ui/DialogTitle.qml

@@ -0,0 +1,37 @@
+import QtQuick
+import "." as Flea
+
+// A dialog's header line: what the dialog is doing on the left, and the word that closes it on the
+// right. Dialogs rule 7 puts that word in the same corner on every dialog, which is the corner
+// ui/SettingsPanel.qml already keeps it in, so one surface cannot spell the way out differently.
+Item {
+    id: root
+
+    property string text: ""
+    property int elide: Text.ElideRight
+    property bool showsEscape: true
+
+    readonly property bool truncated: label.truncated
+    implicitHeight: label.implicitHeight
+
+    Text {
+        id: label
+        anchors.left: parent.left
+        anchors.right: escHint.left
+        anchors.rightMargin: Theme.spacing.gap
+        text: root.text
+        color: Theme.color.foreground
+        font.family: Theme.font.family
+        font.pixelSize: Theme.font.body
+        font.bold: true
+        textFormat: Text.PlainText
+        elide: root.elide
+    }
+
+    Flea.EscapeHint {
+        id: escHint
+        anchors.right: parent.right
+        anchors.baseline: label.baseline
+        visible: root.showsEscape
+    }
+}

package/ui/Divider.qml

@@ -0,0 +1,9 @@
+import QtQuick
+
+// One hairline both the rail edge and the column edges draw, so width and ink match by construction.
+Rectangle {
+    property bool isDivider: true
+    width: Theme.spacing.hairline
+    color: Theme.color.foreground
+    opacity: 0.12
+}

package/ui/DropInto.qml

@@ -0,0 +1,126 @@
+import QtQuick
+import "." as Flea
+import "js/Drag.js" as DragOps
+import "js/DragOut.js" as DragOut
+import "js/Swap.js" as Swap
+import "js/Tabs.js" as Tabs
+
+// A directory as a drop target, named by path: the listing's floor in ui/PaneWire.qml and each tab in
+// ui/TabBar.qml. The rows keep their own DropAreas above the floor, so only what a row refuses lands
+// here; ui/js/Drag.js dropInto decides the verb and sends the one transfer.
+DropArea {
+    id: root
+
+    property var pane: null
+    property string dest: ""
+    // What the status line calls the destination; the path itself when empty.
+    property string label: ""
+    // The destination's filesystem when it is known, 0 when it is not, which makes the drop a copy.
+    property int destDev: 0
+    // A tab takes every drag that carries paths, because resting on it is navigation: a drop the
+    // directory would refuse, its own rows lifted back onto it, is still refused by dropInto below.
+    property bool switchesOnHover: false
+    // The floor and the tab being opened set this while a listing is out. The area stays able to receive the drop.
+    property bool refuseLoading: false
+    property string enteredMarker: ""
+    property var enteredUrls: []
+    // The floor is the listing's own extent, so its pointer rows are the autoscroll band's rows.
+    property bool scrolls: false
+
+    keys: [DragOps.ROWS_MIME, DragOps.SHELF_MIME, "text/uri-list", "text/plain"]
+
+    Flea.FileDrag {
+        id: feedback
+        pane: root.pane
+    }
+
+    function updateFeedback() {
+        if (!root.containsDrag || !feedback.feedback) return
+        if (DragOps.canDropInto(root.enteredMarker, root.enteredUrls, root.dest))
+            feedback.showTarget(root.label || root.dest, root.destDev)
+        else feedback.leaveTarget()
+    }
+
+    function scrollBand(drag) {
+        if (root.scrolls) feedback.hoverMoved(drag.y, root.height)
+    }
+
+    function leaveFeedback() {
+        feedback.leaveTarget()
+        root.enteredMarker = ""
+        root.enteredUrls = []
+    }
+
+    onDestChanged: root.updateFeedback()
+    onDestDevChanged: root.updateFeedback()
+
+    // One read of a drag for both handlers: the marker, the shelf paths, the plain text and the refusal they share.
+    function readDrag(d) {
+        var marker = d.getDataAsString(DragOps.ROWS_MIME)
+        var shelf = d.getDataAsString(DragOps.SHELF_MIME)
+        var plain = d.getDataAsString("text/plain")
+        return { marker: marker, shelf: shelf, plain: plain,
+                 refusal: DragOut.refusal(DragOut.sources(d.urls, plain, marker, shelf), root.dest, marker, shelf) }
+    }
+
+    onEntered: function (drag) {
+        // xw6: a tab drag carries only the private tab type and is never a file drop:
+        // the strip catcher owns it, and the hover switch must not fire for it either.
+        if (drag.getDataAsString(Tabs.TAB_MIME) !== "") {
+            drag.accepted = false
+            return
+        }
+        var read = root.readDrag(drag)
+        var carrying = DragOps.hasPaths(drag.urls) || (read.plain && DragOut.usePlain(read.marker, read.shelf))
+        var allowed = DragOps.canDropInto(read.marker, drag.urls, root.dest, read.plain)
+        if (!(root.switchesOnHover && carrying) && !allowed && read.refusal === "") {
+            drag.accepted = false
+            return
+        }
+        root.scrollBand(drag)
+        root.enteredMarker = read.marker
+        DragOut.keys.enter(read.marker, drag.getDataAsString(DragOut.keys.liftMime))
+        var urls = []
+        for (var i = 0; i < drag.urls.length; i++) urls.push(String(drag.urls[i]))
+        root.enteredUrls = urls
+        // A tab may accept navigation without accepting a drop; only an eligible destination is named.
+        feedback.enterTarget(read.marker, drag.urls, allowed ? (root.label || root.dest) : "",
+            allowed ? root.destDev : DragOps.markerDev(read.marker), read.shelf,
+            drag.proposedAction)
+    }
+    onPositionChanged: function (drag) {
+        root.scrollBand(drag)
+        root.updateFeedback()
+    }
+    onExited: {
+        if (root.scrolls) feedback.hoverEnded()
+        DragOut.keys.leave()
+        root.leaveFeedback()
+    }
+    onDropped: function (drop) {
+        if (root.scrolls) feedback.hoverEnded()
+        // Every way out of a drop, refusals included, ends the drag's keys.
+        var ctrl = DragOut.keys.ctrl, shift = DragOut.keys.shift
+        DragOut.keys.clear()
+        if (drop.getDataAsString(Tabs.TAB_MIME) !== "") {
+            root.leaveFeedback()
+            return
+        }
+        if (root.refuseLoading) {
+            if (root.pane) root.pane.message(Swap.LOADING, false)
+            root.leaveFeedback()
+            return
+        }
+        var read = root.readDrag(drop)
+        if (read.refusal !== "" && root.pane) {
+            root.pane.message(read.refusal, false)
+            root.leaveFeedback()
+            return
+        }
+        if (DragOps.dropInto(root.pane, read.marker, drop.urls, root.dest, root.destDev, read.shelf, read.plain, drop.proposedAction, ctrl, shift)) {
+            // CopyAction: this transfer already moved or copied. MoveAction would make the source delete too.
+            drop.accept(Qt.CopyAction)
+        }
+        root.leaveFeedback()
+    }
+}

package/ui/DropTarget.qml

@@ -0,0 +1,35 @@
+import QtQuick
+import qs.Commons
+
+// States.dc.html's drop cue, shared by the file row and the rail's Trash row.
+Item {
+    id: root
+
+    property bool shown: true
+    property real paintWidth: 0
+    property alias text: dropLabel.text
+    property alias label: dropLabel
+
+    // The board's accent hairline over a faint wash at the hover rung's alpha.
+    Rectangle {
+        visible: root.shown
+        width: root.paintWidth > 0 ? root.paintWidth : parent.width
+        height: parent.height
+        color: Util.alpha(Theme.color.accent, Style.hoverFillAlpha)
+        border.width: Theme.spacing.hairline
+        border.color: Theme.color.accent
+    }
+
+    // Caption type in the accent, against the row padding, in place of trailing columns.
+    Text {
+        id: dropLabel
+        visible: root.shown
+        anchors.right: parent.right
+        anchors.rightMargin: Theme.spacing.rowPaddingX
+        anchors.verticalCenter: parent.verticalCenter
+        color: Theme.color.accent
+        font.family: Theme.font.family
+        font.pixelSize: Theme.font.caption
+        textFormat: Text.PlainText
+    }
+}

package/ui/DropboxMark.qml

@@ -0,0 +1,60 @@
+import QtQuick
+import QtQuick.Shapes
+import qs.Commons
+
+// The Dropbox mark, reproduced from the official artwork rather than recut, the same ruling that
+// brought TailscaleMark back. Five diamond tiles, monochrome and palette-tinted, no brand colour.
+// 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"
+
+    // The mark is wider than it is tall, so the box is too: scaling a wide mark into a square slot is
+    // the AdGuard lesson, it renders smaller than its neighbours.
+    readonly property real boxRatio: 1.18
+    // Tile centres and size as fractions of the box, taken off the official artwork.
+    readonly property var tileX: [0.25, 0.75, 0.25, 0.75, 0.50]
+    readonly property var tileY: [0.188, 0.188, 0.564, 0.564, 0.812]
+    readonly property real tileW: 0.50
+    readonly property real tileH: 0.376
+
+    readonly property real drawn: Math.min(Theme.markSize, root.iconSize)
+
+    implicitWidth: root.drawn * root.boxRatio
+    implicitHeight: root.drawn
+    width: root.drawn * root.boxRatio
+    height: root.drawn
+
+    // All five tiles in one path string: a ShapePath is not an Item, so a Repeater cannot make them.
+    readonly property string tiles: {
+        var hw = root.tileW * root.width / 2
+        var hh = root.tileH * root.height / 2
+        var out = ""
+        for (var i = 0; i < root.tileX.length; i++) {
+            var cx = root.tileX[i] * root.width
+            var cy = root.tileY[i] * root.height
+            out += "M " + cx + " " + (cy - hh)
+                 + " L " + (cx + hw) + " " + cy
+                 + " L " + cx + " " + (cy + hh)
+                 + " L " + (cx - hw) + " " + cy + " Z "
+        }
+        return out
+    }
+
+    Shape {
+        anchors.fill: parent
+        preferredRendererType: Shape.CurveRenderer
+
+        ShapePath {
+            fillColor: root.color
+            strokeColor: "transparent"
+            strokeWidth: 0
+
+            PathSvg { path: root.tiles }
+        }
+    }
+}