bar: use shape > canvas

quickshell/Modules/DankBar/BarCanvas.qml

@@ -1,6 +1,6 @@
 import QtQuick
+import QtQuick.Shapes
 import qs.Common
-import qs.Services
 
 Item {
     id: root
@@ -19,12 +19,42 @@ Item {
     anchors.topMargin: -(gothEnabled && !axis.isVertical && axis.edge === "bottom" ? barWindow._wingR : 0)
     anchors.bottomMargin: -(gothEnabled && !axis.isVertical && axis.edge === "top" ? barWindow._wingR : 0)
 
-    readonly property real dpr: CompositorService.getScreenScale(barWindow.screen)
+    readonly property int barPos: barConfig?.position ?? 0
+    readonly property bool isTop: barPos === SettingsData.Position.Top
+    readonly property bool isBottom: barPos === SettingsData.Position.Bottom
+    readonly property bool isLeft: barPos === SettingsData.Position.Left
+    readonly property bool isRight: barPos === SettingsData.Position.Right
 
-    function requestRepaint() {
+    readonly property real wing: gothEnabled ? barWindow._wingR : 0
-        debounceTimer.restart();
+    readonly property real rt: (barConfig?.squareCorners ?? false) ? 0 : Theme.cornerRadius
+
+    property string _cachedMainPath: ""
+    property string _cachedBorderFullPath: ""
+    property string _cachedBorderEdgePath: ""
+    property string _pathKey: ""
+
+    readonly property string currentPathKey: `${width}|${height}|${barPos}|${wing}|${rt}|${barBorder.inset}`
+
+    onCurrentPathKeyChanged: {
+        if (_pathKey !== currentPathKey) {
+            _pathKey = currentPathKey;
+            _cachedMainPath = generatePathForPosition();
+            _cachedBorderFullPath = generateBorderFullPath();
+            _cachedBorderEdgePath = generateBorderEdgePath();
+        }
     }
 
+    Component.onCompleted: {
+        _pathKey = currentPathKey;
+        _cachedMainPath = generatePathForPosition();
+        _cachedBorderFullPath = generateBorderFullPath();
+        _cachedBorderEdgePath = generateBorderEdgePath();
+    }
+
+    readonly property string mainPath: _cachedMainPath
+    readonly property string borderFullPath: _cachedBorderFullPath
+    readonly property string borderEdgePath: _cachedBorderEdgePath
+
     MouseArea {
         anchors.fill: parent
         acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
@@ -44,398 +74,547 @@ Item {
         }
     }
 
-    Timer {
+    Shape {
-        id: debounceTimer
-        interval: 50
-        repeat: false
-        onTriggered: {
-            barShape.requestPaint();
-            barTint.requestPaint();
-            barBorder.requestPaint();
-        }
-    }
-
-    Canvas {
         id: barShape
         anchors.fill: parent
-        antialiasing: true
+        preferredRendererType: Shape.CurveRenderer
-        renderTarget: Canvas.FramebufferObject
-        renderStrategy: Canvas.Cooperative
 
-        readonly property real correctWidth: Theme.px(root.width, dpr)
+        ShapePath {
-        readonly property real correctHeight: Theme.px(root.height, dpr)
+            fillColor: barWindow._bgColor
-        canvasSize: Qt.size(correctWidth, correctHeight)
+            strokeColor: "transparent"
+            strokeWidth: 0
 
-        property real wing: (barConfig?.gothCornersEnabled ?? false) ? Theme.px(barWindow._wingR, dpr) : 0
+            PathSvg {
-        property real rt: (barConfig?.squareCorners ?? false) ? 0 : Theme.px(Theme.cornerRadius, dpr)
+                path: root.mainPath
-
-        onWingChanged: root.requestRepaint()
-        onRtChanged: root.requestRepaint()
-        onCorrectWidthChanged: root.requestRepaint()
-        onCorrectHeightChanged: root.requestRepaint()
-        onVisibleChanged: if (visible)
-            root.requestRepaint()
-        Component.onCompleted: root.requestRepaint()
-
-        Connections {
-            target: root
-            function onDprChanged() {
-                root.requestRepaint();
             }
         }
-
-        Connections {
-            target: barWindow
-            function on_BgColorChanged() {
-                root.requestRepaint();
-            }
-            function onGothCornersEnabledChanged() {
-                root.requestRepaint();
-            }
-            function onWingtipsRadiusChanged() {
-                root.requestRepaint();
-            }
-        }
-
-        Connections {
-            target: Theme
-            function onIsLightModeChanged() {
-                root.requestRepaint();
-            }
-            function onSurfaceContainerChanged() {
-                root.requestRepaint();
-            }
-        }
-
-        onPaint: {
-            const ctx = getContext("2d");
-            const W = barWindow.isVertical ? correctHeight : correctWidth;
-            const H_raw = barWindow.isVertical ? correctWidth : correctHeight;
-            const R = wing;
-            const RT = rt;
-            const H = H_raw - (R > 0 ? R : 0);
-            const barPos = barConfig?.position ?? 0;
-            const isTop = barPos === SettingsData.Position.Top;
-            const isBottom = barPos === SettingsData.Position.Bottom;
-            const isLeft = barPos === SettingsData.Position.Left;
-            const isRight = barPos === SettingsData.Position.Right;
-
-            function drawTopPath() {
-                ctx.beginPath();
-                ctx.moveTo(RT, 0);
-                ctx.lineTo(W - RT, 0);
-                ctx.arcTo(W, 0, W, RT, RT);
-                ctx.lineTo(W, H);
-
-                if (R > 0) {
-                    ctx.lineTo(W, H + R);
-                    ctx.arc(W - R, H + R, R, 0, -Math.PI / 2, true);
-                    ctx.lineTo(R, H);
-                    ctx.arc(R, H + R, R, -Math.PI / 2, -Math.PI, true);
-                    ctx.lineTo(0, H + R);
-                } else {
-                    ctx.lineTo(W, H - RT);
-                    ctx.arcTo(W, H, W - RT, H, RT);
-                    ctx.lineTo(RT, H);
-                    ctx.arcTo(0, H, 0, H - RT, RT);
-                }
-
-                ctx.lineTo(0, RT);
-                ctx.arcTo(0, 0, RT, 0, RT);
-                ctx.closePath();
-            }
-
-            ctx.reset();
-            ctx.clearRect(0, 0, W, H_raw);
-
-            ctx.save();
-            if (isBottom) {
-                ctx.translate(W, H_raw);
-                ctx.rotate(Math.PI);
-            } else if (isLeft) {
-                ctx.translate(0, W);
-                ctx.rotate(-Math.PI / 2);
-            } else if (isRight) {
-                ctx.translate(H_raw, 0);
-                ctx.rotate(Math.PI / 2);
-            }
-
-            drawTopPath();
-            ctx.restore();
-
-            ctx.fillStyle = barWindow._bgColor;
-            ctx.fill();
-        }
     }
 
-    Canvas {
+    Shape {
         id: barTint
         anchors.fill: parent
-        antialiasing: true
+        preferredRendererType: Shape.CurveRenderer
-        renderTarget: Canvas.FramebufferObject
-        renderStrategy: Canvas.Cooperative
 
-        readonly property real correctWidth: Theme.px(root.width, dpr)
+        readonly property real alphaTint: (barWindow._bgColor?.a ?? 1) < 0.99 ? (Theme.stateLayerOpacity ?? 0) : 0
-        readonly property real correctHeight: Theme.px(root.height, dpr)
-        canvasSize: Qt.size(correctWidth, correctHeight)
 
-        property real wing: (barConfig?.gothCornersEnabled ?? false) ? Theme.px(barWindow._wingR, dpr) : 0
+        ShapePath {
-        property real rt: (barConfig?.squareCorners ?? false) ? 0 : Theme.px(Theme.cornerRadius, dpr)
+            fillColor: Qt.rgba(Theme.surface.r, Theme.surface.g, Theme.surface.b, barTint.alphaTint)
-        property real alphaTint: (barWindow._bgColor?.a ?? 1) < 0.99 ? (Theme.stateLayerOpacity ?? 0) : 0
+            strokeColor: "transparent"
+            strokeWidth: 0
 
-        onWingChanged: root.requestRepaint()
+            PathSvg {
-        onRtChanged: root.requestRepaint()
+                path: root.mainPath
-        onAlphaTintChanged: root.requestRepaint()
-        onCorrectWidthChanged: root.requestRepaint()
-        onCorrectHeightChanged: root.requestRepaint()
-        onVisibleChanged: if (visible)
-            root.requestRepaint()
-        Component.onCompleted: root.requestRepaint()
-
-        Connections {
-            target: root
-            function onDprChanged() {
-                root.requestRepaint();
             }
         }
-
-        Connections {
-            target: barWindow
-            function on_BgColorChanged() {
-                root.requestRepaint();
-            }
-            function onGothCornersEnabledChanged() {
-                root.requestRepaint();
-            }
-            function onWingtipsRadiusChanged() {
-                root.requestRepaint();
-            }
-        }
-
-        Connections {
-            target: Theme
-            function onIsLightModeChanged() {
-                root.requestRepaint();
-            }
-            function onSurfaceChanged() {
-                root.requestRepaint();
-            }
-        }
-
-        onPaint: {
-            const ctx = getContext("2d");
-            const W = barWindow.isVertical ? correctHeight : correctWidth;
-            const H_raw = barWindow.isVertical ? correctWidth : correctHeight;
-            const R = wing;
-            const RT = rt;
-            const H = H_raw - (R > 0 ? R : 0);
-            const barPos = barConfig?.position ?? 0;
-            const isTop = barPos === SettingsData.Position.Top;
-            const isBottom = barPos === SettingsData.Position.Bottom;
-            const isLeft = barPos === SettingsData.Position.Left;
-            const isRight = barPos === SettingsData.Position.Right;
-
-            function drawTopPath() {
-                ctx.beginPath();
-                ctx.moveTo(RT, 0);
-                ctx.lineTo(W - RT, 0);
-                ctx.arcTo(W, 0, W, RT, RT);
-                ctx.lineTo(W, H);
-
-                if (R > 0) {
-                    ctx.lineTo(W, H + R);
-                    ctx.arc(W - R, H + R, R, 0, -Math.PI / 2, true);
-                    ctx.lineTo(R, H);
-                    ctx.arc(R, H + R, R, -Math.PI / 2, -Math.PI, true);
-                    ctx.lineTo(0, H + R);
-                } else {
-                    ctx.lineTo(W, H - RT);
-                    ctx.arcTo(W, H, W - RT, H, RT);
-                    ctx.lineTo(RT, H);
-                    ctx.arcTo(0, H, 0, H - RT, RT);
-                }
-
-                ctx.lineTo(0, RT);
-                ctx.arcTo(0, 0, RT, 0, RT);
-                ctx.closePath();
-            }
-
-            ctx.reset();
-            ctx.clearRect(0, 0, W, H_raw);
-
-            ctx.save();
-            if (isBottom) {
-                ctx.translate(W, H_raw);
-                ctx.rotate(Math.PI);
-            } else if (isLeft) {
-                ctx.translate(0, W);
-                ctx.rotate(-Math.PI / 2);
-            } else if (isRight) {
-                ctx.translate(H_raw, 0);
-                ctx.rotate(Math.PI / 2);
-            }
-
-            drawTopPath();
-            ctx.restore();
-
-            ctx.fillStyle = Qt.rgba(Theme.surface.r, Theme.surface.g, Theme.surface.b, alphaTint);
-            ctx.fill();
-        }
     }
 
-    Canvas {
+    Shape {
         id: barBorder
         anchors.fill: parent
         visible: barConfig?.borderEnabled ?? false
-        renderTarget: Canvas.FramebufferObject
+        preferredRendererType: Shape.CurveRenderer
-        renderStrategy: Canvas.Cooperative
 
-        readonly property real correctWidth: Theme.px(root.width, dpr)
+        readonly property real borderThickness: Math.max(1, barConfig?.borderThickness ?? 1)
-        readonly property real correctHeight: Theme.px(root.height, dpr)
+        readonly property real inset: 0.5
-        canvasSize: Qt.size(correctWidth, correctHeight)
+        readonly property string borderColorKey: barConfig?.borderColor || "surfaceText"
+        readonly property color baseColor: (borderColorKey === "surfaceText") ? Theme.surfaceText : (borderColorKey === "primary") ? Theme.primary : Theme.secondary
+        readonly property color borderColor: Theme.withAlpha(baseColor, barConfig?.borderOpacity ?? 1.0)
+        readonly property bool showFullBorder: (barConfig?.spacing ?? 4) > 0
 
-        property real wing: (barConfig?.gothCornersEnabled ?? false) ? Theme.px(barWindow._wingR, dpr) : 0
+        ShapePath {
-        property real rt: (barConfig?.squareCorners ?? false) ? 0 : Theme.px(Theme.cornerRadius, dpr)
+            fillColor: "transparent"
-        property bool borderEnabled: barConfig?.borderEnabled ?? false
+            strokeColor: barBorder.borderColor
+            strokeWidth: barBorder.borderThickness
+            joinStyle: ShapePath.RoundJoin
+            capStyle: ShapePath.FlatCap
 
-        antialiasing: rt > 0 || wing > 0
+            PathSvg {
-
+                path: barBorder.showFullBorder ? root.borderFullPath : root.borderEdgePath
-        onWingChanged: root.requestRepaint()
-        onRtChanged: root.requestRepaint()
-        onBorderEnabledChanged: root.requestRepaint()
-        onCorrectWidthChanged: root.requestRepaint()
-        onCorrectHeightChanged: root.requestRepaint()
-        onVisibleChanged: if (visible)
-            root.requestRepaint()
-        Component.onCompleted: root.requestRepaint()
-
-        Connections {
-            target: root
-            function onDprChanged() {
-                root.requestRepaint();
             }
         }
-
+    }
-        Connections {
+
-            target: Theme
+    function generatePathForPosition() {
-            function onIsLightModeChanged() {
+        if (isTop)
-                root.requestRepaint();
+            return generateTopPath();
-            }
+        if (isBottom)
-            function onSurfaceTextChanged() {
+            return generateBottomPath();
-                root.requestRepaint();
+        if (isLeft)
-            }
+            return generateLeftPath();
-            function onPrimaryChanged() {
+        if (isRight)
-                root.requestRepaint();
+            return generateRightPath();
-            }
+        return generateTopPath();
-            function onSecondaryChanged() {
+    }
-                root.requestRepaint();
+
-            }
+    function generateBorderPathForPosition() {
-            function onOutlineChanged() {
+        if (isTop)
-                root.requestRepaint();
+            return generateTopBorderPath();
-            }
+        if (isBottom)
-        }
+            return generateBottomBorderPath();
-
+        if (isLeft)
-        Connections {
+            return generateLeftBorderPath();
-            target: barWindow
+        if (isRight)
-            function onGothCornersEnabledChanged() {
+            return generateRightBorderPath();
-                root.requestRepaint();
+        return generateTopBorderPath();
-            }
+    }
-            function onWingtipsRadiusChanged() {
+
-                root.requestRepaint();
+    function generateTopPath() {
-            }
+        const w = width;
-        }
+        const h = height - wing;
-
+        const r = wing;
-        onPaint: {
+        const cr = rt;
-            if (!borderEnabled)
+
-                return;
+        if (w <= 0 || h <= 0)
-            const ctx = getContext("2d");
+            return "";
-            const W = barWindow.isVertical ? correctHeight : correctWidth;
+
-            const H_raw = barWindow.isVertical ? correctWidth : correctHeight;
+        let d = `M ${cr} 0`;
-            const R = wing;
+        d += ` L ${w - cr} 0`;
-            const RT = rt;
+        if (cr > 0)
-            const H = H_raw - (R > 0 ? R : 0);
+            d += ` A ${cr} ${cr} 0 0 1 ${w} ${cr}`;
-            const barPos = barConfig?.position ?? 0;
+        if (r > 0) {
-            const isTop = barPos === SettingsData.Position.Top;
+            d += ` L ${w} ${h + r}`;
-            const isBottom = barPos === SettingsData.Position.Bottom;
+            d += ` A ${r} ${r} 0 0 0 ${w - r} ${h}`;
-            const isLeft = barPos === SettingsData.Position.Left;
+            d += ` L ${r} ${h}`;
-            const isRight = barPos === SettingsData.Position.Right;
+            d += ` A ${r} ${r} 0 0 0 0 ${h + r}`;
-
+        } else {
-            const spacing = barConfig?.spacing ?? 4;
+            d += ` L ${w} ${h - cr}`;
-
+            if (cr > 0)
-            ctx.reset();
+                d += ` A ${cr} ${cr} 0 0 1 ${w - cr} ${h}`;
-            ctx.clearRect(0, 0, W, H_raw);
+            d += ` L ${cr} ${h}`;
-
+            if (cr > 0)
-            ctx.save();
+                d += ` A ${cr} ${cr} 0 0 1 0 ${h - cr}`;
-            if (isBottom) {
+        }
-                ctx.translate(W, H_raw);
+        d += ` L 0 ${cr}`;
-                ctx.rotate(Math.PI);
+        if (cr > 0)
-            } else if (isLeft) {
+            d += ` A ${cr} ${cr} 0 0 1 ${cr} 0`;
-                ctx.translate(0, W);
+        d += " Z";
-                ctx.rotate(-Math.PI / 2);
+        return d;
-            } else if (isRight) {
+    }
-                ctx.translate(H_raw, 0);
+
-                ctx.rotate(Math.PI / 2);
+    function generateBottomPath() {
-            }
+        const w = width;
-
+        const h = height - wing;
-            const uiThickness = Math.max(1, barConfig?.borderThickness ?? 1);
+        const r = wing;
-            const devThickness = Math.max(1, Math.round(Theme.px(uiThickness, dpr)));
+        const cr = rt;
-
+
-            const key = barConfig?.borderColor || "surfaceText";
+        if (w <= 0 || h <= 0)
-            const base = (key === "surfaceText") ? Theme.surfaceText : (key === "primary") ? Theme.primary : Theme.secondary;
+            return "";
-            const color = Theme.withAlpha(base, barConfig?.borderOpacity ?? 1.0);
+
-
+        let d = `M ${cr} ${height}`;
-            ctx.strokeStyle = color;
+        d += ` L ${w - cr} ${height}`;
-            ctx.lineWidth = devThickness * 2;
+        if (cr > 0)
-            ctx.lineJoin = "round";
+            d += ` A ${cr} ${cr} 0 0 0 ${w} ${height - cr}`;
-            ctx.lineCap = "butt";
+        if (r > 0) {
-
+            d += ` L ${w} 0`;
-            function drawFullShape() {
+            d += ` A ${r} ${r} 0 0 1 ${w - r} ${r}`;
-                ctx.beginPath();
+            d += ` L ${r} ${r}`;
-                ctx.moveTo(RT, 0);
+            d += ` A ${r} ${r} 0 0 1 0 0`;
-                ctx.lineTo(W - RT, 0);
+        } else {
-                ctx.arcTo(W, 0, W, RT, RT);
+            d += ` L ${w} ${cr}`;
-                ctx.lineTo(W, H);
+            if (cr > 0)
-
+                d += ` A ${cr} ${cr} 0 0 0 ${w - cr} 0`;
-                if (R > 0) {
+            d += ` L ${cr} 0`;
-                    ctx.lineTo(W, H + R);
+            if (cr > 0)
-                    ctx.arc(W - R, H + R, R, 0, -Math.PI / 2, true);
+                d += ` A ${cr} ${cr} 0 0 0 0 ${cr}`;
-                    ctx.lineTo(R, H);
+        }
-                    ctx.arc(R, H + R, R, -Math.PI / 2, -Math.PI, true);
+        d += ` L 0 ${height - cr}`;
-                    ctx.lineTo(0, H + R);
+        if (cr > 0)
-                } else {
+            d += ` A ${cr} ${cr} 0 0 0 ${cr} ${height}`;
-                    ctx.lineTo(W, H - RT);
+        d += " Z";
-                    ctx.arcTo(W, H, W - RT, H, RT);
+        return d;
-                    ctx.lineTo(RT, H);
+    }
-                    ctx.arcTo(0, H, 0, H - RT, RT);
+
-                }
+    function generateLeftPath() {
-
+        const w = width - wing;
-                ctx.lineTo(0, RT);
+        const h = height;
-                ctx.arcTo(0, 0, RT, 0, RT);
+        const r = wing;
-                ctx.closePath();
+        const cr = rt;
-            }
+
-
+        if (w <= 0 || h <= 0)
-            drawFullShape();
+            return "";
-            ctx.clip();
+
-
+        let d = `M 0 ${cr}`;
-            if (spacing > 0) {
+        d += ` L 0 ${h - cr}`;
-                drawFullShape();
+        if (cr > 0)
-            } else {
+            d += ` A ${cr} ${cr} 0 0 0 ${cr} ${h}`;
-                ctx.beginPath();
+        if (r > 0) {
-                if (R > 0) {
+            d += ` L ${w + r} ${h}`;
-                    ctx.moveTo(W, H + R);
+            d += ` A ${r} ${r} 0 0 1 ${w} ${h - r}`;
-                    ctx.arc(W - R, H + R, R, 0, -Math.PI / 2, true);
+            d += ` L ${w} ${r}`;
-                    ctx.lineTo(R, H);
+            d += ` A ${r} ${r} 0 0 1 ${w + r} 0`;
-                    ctx.arc(R, H + R, R, -Math.PI / 2, -Math.PI, true);
+        } else {
-                } else {
+            d += ` L ${w - cr} ${h}`;
-                    ctx.moveTo(W, H - RT);
+            if (cr > 0)
-                    ctx.arcTo(W, H, W - RT, H, RT);
+                d += ` A ${cr} ${cr} 0 0 0 ${w} ${h - cr}`;
-                    ctx.lineTo(RT, H);
+            d += ` L ${w} ${cr}`;
-                    ctx.arcTo(0, H, 0, H - RT, RT);
+            if (cr > 0)
-                }
+                d += ` A ${cr} ${cr} 0 0 0 ${w - cr} 0`;
-            }
+        }
-            ctx.stroke();
+        d += ` L ${cr} 0`;
-
+        if (cr > 0)
-            ctx.restore();
+            d += ` A ${cr} ${cr} 0 0 0 0 ${cr}`;
-        }
+        d += " Z";
+        return d;
+    }
+
+    function generateRightPath() {
+        const w = width - wing;
+        const h = height;
+        const r = wing;
+        const cr = rt;
+
+        if (w <= 0 || h <= 0)
+            return "";
+
+        let d = `M ${width} ${cr}`;
+        d += ` L ${width} ${h - cr}`;
+        if (cr > 0)
+            d += ` A ${cr} ${cr} 0 0 1 ${width - cr} ${h}`;
+        if (r > 0) {
+            d += ` L 0 ${h}`;
+            d += ` A ${r} ${r} 0 0 0 ${r} ${h - r}`;
+            d += ` L ${r} ${r}`;
+            d += ` A ${r} ${r} 0 0 0 0 0`;
+        } else {
+            d += ` L ${cr} ${h}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 0 ${h - cr}`;
+            d += ` L 0 ${cr}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 ${cr} 0`;
+        }
+        d += ` L ${width - cr} 0`;
+        if (cr > 0)
+            d += ` A ${cr} ${cr} 0 0 1 ${width} ${cr}`;
+        d += " Z";
+        return d;
+    }
+
+    function generateTopBorderPath() {
+        const w = barBorder.width;
+        const h = barBorder.height - wing;
+        const r = wing;
+        const cr = rt;
+
+        if (w <= 0 || h <= 0)
+            return "";
+
+        let d = "";
+        if (r > 0) {
+            d = `M ${w} ${h + r}`;
+            d += ` A ${r} ${r} 0 0 0 ${w - r} ${h}`;
+            d += ` L ${r} ${h}`;
+            d += ` A ${r} ${r} 0 0 0 0 ${h + r}`;
+        } else {
+            d = `M ${w} ${h - cr}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 ${w - cr} ${h}`;
+            d += ` L ${cr} ${h}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 0 ${h - cr}`;
+        }
+        return d;
+    }
+
+    function generateBottomBorderPath() {
+        const w = barBorder.width;
+        const r = wing;
+        const cr = rt;
+
+        if (w <= 0)
+            return "";
+
+        let d = "";
+        if (r > 0) {
+            d = `M ${w} 0`;
+            d += ` A ${r} ${r} 0 0 1 ${w - r} ${r}`;
+            d += ` L ${r} ${r}`;
+            d += ` A ${r} ${r} 0 0 1 0 0`;
+        } else {
+            d = `M ${w} ${cr}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 ${w - cr} 0`;
+            d += ` L ${cr} 0`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 0 ${cr}`;
+        }
+        return d;
+    }
+
+    function generateLeftBorderPath() {
+        const w = barBorder.width - wing;
+        const h = barBorder.height;
+        const r = wing;
+        const cr = rt;
+
+        if (h <= 0)
+            return "";
+
+        let d = "";
+        if (r > 0) {
+            d = `M ${w + r} ${h}`;
+            d += ` A ${r} ${r} 0 0 1 ${w} ${h - r}`;
+            d += ` L ${w} ${r}`;
+            d += ` A ${r} ${r} 0 0 1 ${w + r} 0`;
+        } else {
+            d = `M ${w - cr} ${h}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 ${w} ${h - cr}`;
+            d += ` L ${w} ${cr}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 ${w - cr} 0`;
+        }
+        return d;
+    }
+
+    function generateRightBorderPath() {
+        const h = barBorder.height;
+        const r = wing;
+        const cr = rt;
+
+        if (h <= 0)
+            return "";
+
+        let d = "";
+        if (r > 0) {
+            d = `M 0 ${h}`;
+            d += ` A ${r} ${r} 0 0 0 ${r} ${h - r}`;
+            d += ` L ${r} ${r}`;
+            d += ` A ${r} ${r} 0 0 0 0 0`;
+        } else {
+            d = `M ${cr} ${h}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 0 ${h - cr}`;
+            d += ` L 0 ${cr}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 ${cr} 0`;
+        }
+        return d;
+    }
+
+    function generateBorderFullPath() {
+        const i = barBorder.inset;
+        const r = wing;
+        const cr = rt;
+
+        if (isTop) {
+            const w = width - i * 2;
+            const h = height - wing - i * 2;
+            if (w <= 0 || h <= 0)
+                return "";
+
+            let d = `M ${i + cr} ${i}`;
+            d += ` L ${i + w - cr} ${i}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 ${i + w} ${i + cr}`;
+            if (r > 0) {
+                d += ` L ${i + w} ${height - i}`;
+                d += ` A ${r} ${r} 0 0 0 ${i + w - r} ${i + h}`;
+                d += ` L ${i + r} ${i + h}`;
+                d += ` A ${r} ${r} 0 0 0 ${i} ${height - i}`;
+            } else {
+                d += ` L ${i + w} ${i + h - cr}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 1 ${i + w - cr} ${i + h}`;
+                d += ` L ${i + cr} ${i + h}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 1 ${i} ${i + h - cr}`;
+            }
+            d += ` L ${i} ${i + cr}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 ${i + cr} ${i}`;
+            d += " Z";
+            return d;
+        }
+
+        if (isBottom) {
+            const w = width - i * 2;
+            const h = height - wing - i * 2;
+            if (w <= 0 || h <= 0)
+                return "";
+
+            let d = `M ${i + cr} ${height - i}`;
+            d += ` L ${i + w - cr} ${height - i}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 0 ${i + w} ${height - i - cr}`;
+            if (r > 0) {
+                d += ` L ${i + w} ${i}`;
+                d += ` A ${r} ${r} 0 0 1 ${i + w - r} ${i + r}`;
+                d += ` L ${i + r} ${i + r}`;
+                d += ` A ${r} ${r} 0 0 1 ${i} ${i}`;
+            } else {
+                d += ` L ${i + w} ${i + cr}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 0 ${i + w - cr} ${i}`;
+                d += ` L ${i + cr} ${i}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 0 ${i} ${i + cr}`;
+            }
+            d += ` L ${i} ${height - i - cr}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 0 ${i + cr} ${height - i}`;
+            d += " Z";
+            return d;
+        }
+
+        if (isLeft) {
+            const w = width - wing - i * 2;
+            const h = height - i * 2;
+            if (w <= 0 || h <= 0)
+                return "";
+
+            let d = `M ${i} ${i + cr}`;
+            d += ` L ${i} ${i + h - cr}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 0 ${i + cr} ${i + h}`;
+            if (r > 0) {
+                d += ` L ${width - i} ${i + h}`;
+                d += ` A ${r} ${r} 0 0 1 ${i + w} ${i + h - r}`;
+                d += ` L ${i + w} ${i + r}`;
+                d += ` A ${r} ${r} 0 0 1 ${width - i} ${i}`;
+            } else {
+                d += ` L ${i + w - cr} ${i + h}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 0 ${i + w} ${i + h - cr}`;
+                d += ` L ${i + w} ${i + cr}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 0 ${i + w - cr} ${i}`;
+            }
+            d += ` L ${i + cr} ${i}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 0 ${i} ${i + cr}`;
+            d += " Z";
+            return d;
+        }
+
+        if (isRight) {
+            const w = width - wing - i * 2;
+            const h = height - i * 2;
+            if (w <= 0 || h <= 0)
+                return "";
+
+            let d = `M ${width - i} ${i + cr}`;
+            d += ` L ${width - i} ${i + h - cr}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 ${width - i - cr} ${i + h}`;
+            if (r > 0) {
+                d += ` L ${i} ${i + h}`;
+                d += ` A ${r} ${r} 0 0 0 ${i + r} ${i + h - r}`;
+                d += ` L ${i + r} ${i + r}`;
+                d += ` A ${r} ${r} 0 0 0 ${i} ${i}`;
+            } else {
+                d += ` L ${wing + i + cr} ${i + h}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 1 ${wing + i} ${i + h - cr}`;
+                d += ` L ${wing + i} ${i + cr}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 1 ${wing + i + cr} ${i}`;
+            }
+            d += ` L ${width - i - cr} ${i}`;
+            if (cr > 0)
+                d += ` A ${cr} ${cr} 0 0 1 ${width - i} ${i + cr}`;
+            d += " Z";
+            return d;
+        }
+
+        return "";
+    }
+
+    function generateBorderEdgePath() {
+        const i = barBorder.inset;
+        const r = wing;
+        const cr = rt;
+
+        if (isTop) {
+            const w = width - i * 2;
+            const h = height - wing - i * 2;
+            if (w <= 0 || h <= 0)
+                return "";
+
+            let d = "";
+            if (r > 0) {
+                d = `M ${i + w} ${i + h + r}`;
+                d += ` A ${r} ${r} 0 0 0 ${i + w - r} ${i + h}`;
+                d += ` L ${i + r} ${i + h}`;
+                d += ` A ${r} ${r} 0 0 0 ${i} ${i + h + r}`;
+            } else {
+                d = `M ${i + w} ${i + h - cr}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 1 ${i + w - cr} ${i + h}`;
+                d += ` L ${i + cr} ${i + h}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 1 ${i} ${i + h - cr}`;
+            }
+            return d;
+        }
+
+        if (isBottom) {
+            const w = width - i * 2;
+            if (w <= 0)
+                return "";
+
+            let d = "";
+            if (r > 0) {
+                d = `M ${i + w} ${i}`;
+                d += ` A ${r} ${r} 0 0 1 ${i + w - r} ${i + r}`;
+                d += ` L ${i + r} ${i + r}`;
+                d += ` A ${r} ${r} 0 0 1 ${i} ${i}`;
+            } else {
+                d = `M ${i + w} ${i + cr}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 1 ${i + w - cr} ${i}`;
+                d += ` L ${i + cr} ${i}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 1 ${i} ${i + cr}`;
+            }
+            return d;
+        }
+
+        if (isLeft) {
+            const w = width - wing - i * 2;
+            const h = height - i * 2;
+            if (h <= 0)
+                return "";
+
+            let d = "";
+            if (r > 0) {
+                d = `M ${i + w + r} ${i + h}`;
+                d += ` A ${r} ${r} 0 0 1 ${i + w} ${i + h - r}`;
+                d += ` L ${i + w} ${i + r}`;
+                d += ` A ${r} ${r} 0 0 1 ${i + w + r} ${i}`;
+            } else {
+                d = `M ${i + w - cr} ${i + h}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 1 ${i + w} ${i + h - cr}`;
+                d += ` L ${i + w} ${i + cr}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 1 ${i + w - cr} ${i}`;
+            }
+            return d;
+        }
+
+        if (isRight) {
+            const h = height - i * 2;
+            if (h <= 0)
+                return "";
+
+            let d = "";
+            if (r > 0) {
+                d = `M ${i} ${i + h}`;
+                d += ` A ${r} ${r} 0 0 0 ${i + r} ${i + h - r}`;
+                d += ` L ${i + r} ${i + r}`;
+                d += ` A ${r} ${r} 0 0 0 ${i} ${i}`;
+            } else {
+                d = `M ${i + cr} ${i + h}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 1 ${i} ${i + h - cr}`;
+                d += ` L ${i} ${i + cr}`;
+                if (cr > 0)
+                    d += ` A ${cr} ${cr} 0 0 1 ${i + cr} ${i}`;
+            }
+            return d;
+        }
+
+        return "";
     }
 }