Warning, /plasma/plasma-desktop/kcms/keyboard/tastenbrett/qml/ShapeCanvas.qml is written in an unsupported language. File is not indexed.

 /*
     SPDX-FileCopyrightText: 2019 Harald Sitter <sitter@kde.org>
 
     SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
 */
 
 import QtQuick 2.12
 import QtQuick.Controls 2.5
 
 Canvas {
     property QtObject shape
     property variant strokeSyle: "yellow"
     property variant fillStyle: "steelblue"
     // Only draw one outline. Outlines are tricky because xkb has no
     // concept of displaying text on top of the shapes. IOW: it
     // only thinks about blank keys. This means we have no layout
     // constraints for our text and as a result we'd have to figure out
     // where to put text so it doesn't conflict with any of the drawn
     // paths and is inside most/all of them. It's not worth the work...
     property int maxOutline: 1
     // use a round number, we divide this by two to balance spacing
     property real lineWidth: 4.0
     // scoot away from 0,0 to translation,translation
     property real translation: lineWidth / 2.0
     // reduce the scale to account for the scoot of translation
     property real scale: Math.min((width - lineWidth) / width, (height - lineWidth) / height)
 
     id: canvas
     width: shape.bounds.width
     height: shape.bounds.height
     onStrokeSyleChanged: requestPaint()
     onFillStyleChanged: requestPaint()
 
     onPaint: {
         var ctx = getContext("2d")
         ctx.reset()
         ctx.lineWidth = lineWidth
         ctx.strokeStyle = strokeSyle
         ctx.fillStyle = fillStyle
         // Transform the context a bunch. The way strokes work is that
         // they extend to the left and right of the path, so with a
         // lineWidth of 8 we'll need the entire scene scooted so
         // 0,0 becomes 4,4. Since that also would screw up our absolute
         // coordinates towards the right (e.g. our width bounds as reported
         // by XKB) we also need to then adjust the scale so the entire
         // coordinate system so the scene leaves sufficient space at all
         // borders.
         // i.e. we move the scene so the top and right strokes are fully
         // visible and then shrink it so the left and bottom are fully visible.
         ctx.translate(translation, translation)
         ctx.scale(scale, scale)
 
         ctx.beginPath()
 
         for (var i in shape.outlines) {
             if (maxOutline && i >= maxOutline) {
                 break;
             }
 
             var outline = shape.outlines[i]
 
             if (outline.points.length === 1) { // rect from 0,0 to point
                 var point = outline.points[0]
 
                 ctx.roundedRect(0, 0,
                                 point.x, point.y,
                                 outline.corner_radius, outline.corner_radius)
             } else if (outline.points.length === 2) { // rect from p1 to p2
                 var topLeftPoint = outline.points[0]
                 var bottomRightPoint = outline.points[1]
 
                 ctx.roundedRect(topLeftPoint.x, topLeftPoint.y,
                                 bottomRightPoint.x, bottomRightPoint.y,
                                 outline.corner_radius, outline.corner_radius)
             } else { // polygon point to point draw (used for doodads and non-rect keys such as Enter)
                 for (var j in outline.points) {
                     var anyPoint = outline.points[j]
                     if (j < 1) { // move to first point
                         ctx.moveTo(anyPoint.x, anyPoint.y)
                     } else { // from there we draw point to point
                         ctx.lineTo(anyPoint.x, anyPoint.y)
                     }
 
                     // TODO: should probably draw short of target and then arcTo over the target so we get a round corner?
                     // Currently shapes are not rounded.
                 }
             }
         }
 
         ctx.closePath()
         if (fillStyle) {
             ctx.fill()
         }
         ctx.stroke()
     }
 }