canvas/maxlength/Ruler.qml

0001 /*
0002     SPDX-FileCopyrightText: 2018 Michail Vourlakos <mvourlakos@gmail.com>
0003     SPDX-License-Identifier: GPL-2.0-or-later
0004 */
0005
0006 import QtQuick 2.7
0007
0008 import QtQuick.Layouts 1.0
0009
0010 import org.kde.plasma.core 2.0 as PlasmaCore
0011 import org.kde.plasma.components 2.0 as PlasmaComponents
0012
0013 import org.kde.latte.core 0.2 as LatteCore
0014
0015 Item{
0016     id: rulerItem
0017
0018     width: root.isHorizontal ? userMaxLength : thickness
0019     height: root.isVertical ? userMaxLength : thickness
0020
0021     property int rulerAnimationTime: root.animationSpeed
0022     property int thicknessMargin: 0
0023
0024     readonly property bool containsMouse: rulerMouseArea.containsMouse
0025     readonly property int thickness: theme.defaultFont.pixelSize
0026
0027     readonly property string tooltip: i18nc("maximum length tooltip, %1 is maximum length percentage","You can use mouse wheel to change maximum length of %1%",plasmoid.configuration.maxLength)
0028
0029     readonly property int userMaxLength: {
0030         if (root.isHorizontal) {
0031             return root.width * (plasmoid.configuration.maxLength/100);
0032         } else {
0033             return root.height * (plasmoid.configuration.maxLength/100);
0034         }
0035     }
0036
0037     x: {
0038         if (root.isHorizontal) {
0039             return xL;
0040         } else {
0041             if (plasmoid.location === PlasmaCore.Types.LeftEdge){
0042                 return settingsRoot.width - thickness - thicknessMargin;
0043             } else if (plasmoid.location === PlasmaCore.Types.RightEdge){
0044                 return thicknessMargin;
0045             }
0046         }
0047     }
0048
0049     y: {
0050         if (root.isVertical) {
0051             return yL;
0052         } else {
0053             if (plasmoid.location === PlasmaCore.Types.BottomEdge){
0054                 return thicknessMargin;
0055             } else if (plasmoid.location === PlasmaCore.Types.TopEdge){
0056                 return settingsRoot.height - thickness - thicknessMargin;
0057             }
0058         }
0059
0060     }
0061
0062     property int length: userMaxLength
0063
0064     property int thickMargin: 3
0065     property int xL: 0
0066     property int yL: 0
0067
0068     Binding{
0069         target: ruler
0070         property: "xL"
0071         value: {
0072             if (root.isHorizontal) {
0073                 if (plasmoid.configuration.alignment === LatteCore.Types.Justify) {
0074                     return root.width/2 - rulerItem.length/2 + root.offset;
0075                 } else if (root.panelAlignment === LatteCore.Types.Left) {
0076                     return root.offset;
0077                 } else if (root.panelAlignment === LatteCore.Types.Center) {
0078                     return root.width/2 - rulerItem.length/2 + root.offset;
0079                 } else if (root.panelAlignment === LatteCore.Types.Right) {
0080                     return root.width - rulerItem.length - root.offset;
0081                 }
0082             } else {
0083                 return ;
0084             }
0085         }
0086     }
0087
0088     Binding{
0089         target: ruler
0090         property: "yL"
0091         value: {
0092             if (root.isVertical) {
0093                 if (plasmoid.configuration.alignment === LatteCore.Types.Justify) {
0094                     return root.height/2 - rulerItem.length/2 + root.offset;
0095                 } else if (root.panelAlignment === LatteCore.Types.Top) {
0096                     return root.offset;
0097                 } else if (root.panelAlignment === LatteCore.Types.Center) {
0098                     return root.height/2 - rulerItem.length/2 + root.offset;
0099                 } else if (root.panelAlignment === LatteCore.Types.Bottom) {
0100                     return root.height - rulerItem.length - root.offset;
0101                 }
0102             } else {
0103                 return;
0104             }
0105         }
0106     }
0107
0108     Behavior on width {
0109         NumberAnimation {
0110             id: horizontalAnimation
0111             duration: rulerAnimationTime
0112             easing.type: Easing.OutCubic
0113         }
0114     }
0115
0116     Behavior on height {
0117         NumberAnimation {
0118             id: verticalAnimation
0119             duration: rulerAnimationTime
0120             easing.type: Easing.OutCubic
0121         }
0122     }
0123
0124     Behavior on x {
0125         enabled: root.isHorizontal && !offsetAnimation.running
0126         NumberAnimation {
0127             duration: rulerAnimationTime
0128             easing.type: Easing.OutCubic
0129         }
0130     }
0131
0132     Behavior on y {
0133         enabled: root.isVertical && !offsetAnimation.running
0134         NumberAnimation {
0135             duration: rulerAnimationTime
0136             easing.type: Easing.OutCubic
0137         }
0138     }
0139
0140     Grid{
0141         id: rulerGrid
0142         width: root.isHorizontal ? parent.length : undefined
0143         height: root.isVertical ? parent.length : undefined
0144
0145         rows: root.isHorizontal ? 1 : 0
0146         columns: root.isVertical ? 1 : 0
0147         spacing: 2
0148
0149         flow: root.isHorizontal ? GridLayout.TopToBottom : GridLayout.LeftToRight
0150
0151         x: {
0152             if (plasmoid.location === PlasmaCore.Types.LeftEdge) {
0153                 return -thickMargin;
0154             } else if (plasmoid.location === PlasmaCore.Types.RightEdge) {
0155                 return thickMargin;
0156             } else {
0157                 return 0;
0158             }
0159         }
0160
0161         y: {
0162             if (plasmoid.location === PlasmaCore.Types.BottomEdge) {
0163                 return thickMargin;
0164             } else if (plasmoid.location === PlasmaCore.Types.TopEdge) {
0165                 return -thickMargin;
0166             } else {
0167                 return 0;
0168             }
0169         }
0170
0171         Behavior on width {
0172             NumberAnimation {
0173                 duration: rulerAnimationTime
0174                 easing.type: Easing.OutCubic
0175             }
0176         }
0177
0178         Behavior on height {
0179             NumberAnimation {
0180                 duration: rulerAnimationTime
0181                 easing.type: Easing.OutCubic
0182             }
0183         }
0184
0185         property int freeSpace: {
0186             if (root.isHorizontal) {
0187                 return rulerItem.width - rulerGrid.spacing - 1 //((rulerGrid.children.length-2) * rulerGrid.spacing)
0188                         - (startLine.width + startArrow.width + labelItem.width + endArrow.width + endArrow.width);
0189             } else {
0190                 return rulerItem.height - rulerGrid.spacing - 1 //((rulerGrid.children.length-2) * rulerGrid.spacing)
0191                         - (startLine.height + startArrow.height + labelItem.height + endArrow.height + endArrow.height);
0192             }
0193         }
0194
0195         Rectangle{
0196             id: startLine
0197             width: root.isHorizontal ? 2 : theme.defaultFont.pixelSize
0198             height: root.isVertical ? 2 : theme.defaultFont.pixelSize
0199
0200             color: settingsRoot.textColor
0201         }
0202
0203         Item{
0204             id: startArrow
0205             width: root.isHorizontal ? 0.6 * theme.defaultFont.pixelSize : theme.defaultFont.pixelSize
0206             height: root.isVertical ? 0.6 * theme.defaultFont.pixelSize : theme.defaultFont.pixelSize
0207
0208             clip:true
0209
0210             Rectangle{
0211                 anchors.verticalCenter: root.isHorizontal ? parent.verticalCenter : parent.bottom
0212                 anchors.horizontalCenter: root.isHorizontal ? parent.right : parent.horizontalCenter
0213                 width: 0.75*theme.defaultFont.pixelSize
0214                 height: width
0215                 rotation: 45
0216
0217                 color: settingsRoot.textColor
0218             }
0219         }
0220
0221         Item{
0222             id: startSpacer
0223             width: root.isHorizontal ? rulerGrid.freeSpace / 2 : theme.defaultFont.pixelSize
0224             height: root.isVertical ? rulerGrid.freeSpace / 2 : theme.defaultFont.pixelSize
0225
0226             Rectangle{
0227                 height: root.isHorizontal ? 2 : parent.height
0228                 width: root.isVertical ? 2 : parent.width
0229
0230                 anchors.centerIn: parent
0231
0232                 color: settingsRoot.textColor
0233             }
0234         }
0235
0236         Item {
0237             id: labelItem
0238             width: root.isHorizontal ? labelMetricsRec.width : labelMetricsRec.height / 2
0239             height: root.isVertical ? labelMetricsRec.width : labelMetricsRec.height / 2
0240
0241             PlasmaComponents.Label{
0242                 id: maxLengthLbl
0243
0244                 anchors.centerIn: parent
0245
0246                 text: i18n("Maximum Length")
0247                 color: settingsRoot.textColor
0248
0249                 transformOrigin: Item.Center
0250
0251                 rotation: {
0252                     if (root.isHorizontal) {
0253                         return 0;
0254                     } else if (plasmoid.location === PlasmaCore.Types.LeftEdge){
0255                         return 90;
0256                     } else if (plasmoid.location === PlasmaCore.Types.RightEdge){
0257                         return -90;
0258                     }
0259                 }
0260
0261                 Rectangle {
0262                     id: labelMetricsRec
0263                     anchors.fill: parent
0264                     visible: false
0265                 }
0266             }
0267         }
0268
0269         Item{
0270             id: endSpacer
0271             width: startSpacer.width
0272             height: startSpacer.height
0273
0274             Rectangle{
0275                 height: root.isHorizontal ? 2 : parent.height
0276                 width: root.isVertical ? 2 : parent.width
0277
0278                 anchors.centerIn: parent
0279
0280                 color: settingsRoot.textColor
0281             }
0282         }
0283
0284         Item{
0285             id: endArrow
0286             width: root.isHorizontal ? 0.6 * theme.defaultFont.pixelSize : theme.defaultFont.pixelSize
0287             height: root.isVertical ? 0.6 * theme.defaultFont.pixelSize : theme.defaultFont.pixelSize
0288             clip:true
0289
0290             Rectangle{
0291                 anchors.verticalCenter: root.isHorizontal ? parent.verticalCenter : parent.top
0292                 anchors.horizontalCenter: root.isHorizontal ? parent.left : parent.horizontalCenter
0293                 width: 0.75*theme.defaultFont.pixelSize
0294                 height: width
0295                 rotation: 45
0296
0297                 color: settingsRoot.textColor
0298             }
0299         }
0300
0301         Rectangle{
0302             id: endLine
0303             width: root.isHorizontal ? 2 : theme.defaultFont.pixelSize
0304             height: root.isVertical ? 2 : theme.defaultFont.pixelSize
0305
0306             color: settingsRoot.textColor
0307         }
0308     } // end of grid
0309
0310     RulerMouseArea {
0311         id: rulerMouseArea
0312         anchors.fill: parent
0313     }
0314
0315     PlasmaComponents.Button {
0316         anchors.fill: parent
0317         opacity: 0
0318         tooltip: rulerItem.tooltip
0319     }
0320 }