Warning, /libraries/kquickimageeditor/examples/KirigamiExample.qml is written in an unsupported language. File is not indexed.
0001 /* 0002 * SPDX-FileCopyrightText: (C) 2020 Carl Schwan <carl@carlschwan.eu> 0003 * 0004 * SPDX-License-Identifier: BSD-2-Clause 0005 */ 0006 0007 import QtQuick 2.10 0008 import QtQuick.Controls 2.1 as QQC2 0009 import QtQuick.Layouts 1.12 0010 import org.kde.kirigami 2.12 as Kirigami 0011 import QtQuick.Dialogs 1.2 0012 import org.kde.kquickimageeditor 1.0 as KQuickImageEditor 0013 import QtGraphicalEffects 1.12 0014 0015 Kirigami.ApplicationWindow { 0016 id: root 0017 Component.onCompleted: { 0018 pageStack.layers.push(editorComponent); 0019 } 0020 0021 pageStack.initialPage: Kirigami.Page { 0022 QQC2.Button { 0023 text: "Open Editor" 0024 onClicked: root.pageStack.layers.push(editorComponent); 0025 } 0026 } 0027 0028 Component { 0029 id: editorComponent 0030 0031 Kirigami.Page { 0032 id: rootEditorView 0033 0034 property bool resizing: false; 0035 property string imagePath: '/usr/share/wallpapers/Next/contents/images/5120x2880.jpg' 0036 0037 signal imageEdited(); 0038 0039 title: "Edit" 0040 leftPadding: 0 0041 rightPadding: 0 0042 topPadding: 0 0043 bottomPadding: 0 0044 0045 function crop() { 0046 rootEditorView.resizing = false 0047 imageDoc.crop(selectionTool.selectionX / editImage.ratioX, 0048 selectionTool.selectionY / editImage.ratioY, 0049 selectionTool.selectionWidth / editImage.ratioX, 0050 selectionTool.selectionHeight / editImage.ratioY); 0051 } 0052 0053 actions { 0054 main: Kirigami.Action { 0055 id: saveAction 0056 visible: imageDoc.edited 0057 text: "Save" 0058 iconName: "document-save" 0059 onTriggered: { 0060 if (!imageDoc.save()) { 0061 msg.type = Kirigami.MessageType.Error 0062 msg.text = "Unable to save file. Check if you have the correct permission to edit this file." 0063 msg.visible = true; 0064 } 0065 rootEditorView.imageEdited(); 0066 applicationWindow().pageStack.layers.pop(); 0067 } 0068 } 0069 left: Kirigami.Action { 0070 id: undoAction 0071 text: "Undo" 0072 iconName: "edit-undo" 0073 onTriggered: { 0074 if (imageDoc.edited) { 0075 imageDoc.undo(); 0076 } 0077 } 0078 visible: imageDoc.edited 0079 } 0080 contextualActions: [ 0081 Kirigami.Action { 0082 iconName: rootEditorView.resizing ? "dialog-ok" : "transform-crop" 0083 text: rootEditorView.resizing ? "Accept" : "Crop" 0084 onTriggered: rootEditorView.resizing = !rootEditorView.resizing; 0085 }, 0086 Kirigami.Action { 0087 iconName: "dialog-cancel" 0088 visible: rootEditorView.resizing 0089 text: "Cancel" 0090 onTriggered: rootEditorView.resizing = !rootEditorView.resizing 0091 }, 0092 Kirigami.Action { 0093 iconName: "object-rotate-left" 0094 text: "Rotate left"; 0095 onTriggered: imageDoc.rotate(-90); 0096 visible: !rootEditorView.resizing 0097 }, 0098 Kirigami.Action { 0099 iconName: "object-rotate-right" 0100 text: "@action:button Rotate an image to the right", "Rotate right"; 0101 onTriggered: imageDoc.rotate(90); 0102 visible: !rootEditorView.resizing 0103 }, 0104 Kirigami.Action { 0105 iconName: "object-flip-vertical" 0106 text: "Flip" 0107 onTriggered: imageDoc.mirror(false, true); 0108 visible: !rootEditorView.resizing 0109 }, 0110 Kirigami.Action { 0111 iconName: "object-flip-horizontal" 0112 text: "Mirror" 0113 onTriggered: imageDoc.mirror(true, false); 0114 visible: !rootEditorView.resizing 0115 }, 0116 Kirigami.Action { 0117 visible: rootEditorView.resizing 0118 displayComponent: QQC2.ToolSeparator { 0119 leftPadding: Kirigami.Units.largeSpacing 0120 rightPadding: leftPadding 0121 } 0122 }, 0123 Kirigami.Action { 0124 visible: rootEditorView.resizing 0125 displayComponent: QQC2.Label { 0126 text: "Size:" 0127 } 0128 }, 0129 Kirigami.Action { 0130 visible: rootEditorView.resizing 0131 displayComponent: EditorSpinBox { 0132 minimumContentWidth: widthTextMetrics.width 0133 from: 1 0134 to: editImage.nativeWidth 0135 value: selectionTool.selectionWidth / editImage.ratioX 0136 onValueModified: selectionTool.selectionWidth = value * editImage.ratioX 0137 } 0138 }, 0139 Kirigami.Action { 0140 visible: rootEditorView.resizing 0141 displayComponent: EditorSpinBox { 0142 minimumContentWidth: heightTextMetrics.width 0143 from: 1 0144 to: editImage.nativeHeight 0145 value: selectionTool.selectionHeight / editImage.ratioY 0146 onValueModified: selectionTool.selectionHeight = value * editImage.ratioY 0147 } 0148 }, 0149 Kirigami.Action { 0150 visible: rootEditorView.resizing 0151 displayComponent: Item { 0152 implicitWidth: Kirigami.Units.largeSpacing 0153 } 0154 }, 0155 Kirigami.Action { 0156 visible: rootEditorView.resizing 0157 displayComponent: QQC2.Label { 0158 text: "Position:" 0159 } 0160 }, 0161 Kirigami.Action { 0162 visible: rootEditorView.resizing 0163 displayComponent: EditorSpinBox { 0164 minimumContentWidth: widthTextMetrics.width 0165 from: 0 0166 to: editImage.nativeWidth - (selectionTool.selectionWidth / editImage.ratioX) 0167 value: selectionTool.selectionX / editImage.ratioX 0168 onValueModified: selectionTool.selectionX = value * editImage.ratioX 0169 } 0170 }, 0171 Kirigami.Action { 0172 visible: rootEditorView.resizing 0173 displayComponent: EditorSpinBox { 0174 minimumContentWidth: heightTextMetrics.width 0175 from: 0 0176 to: editImage.nativeHeight - (selectionTool.selectionHeight / editImage.ratioY) 0177 value: selectionTool.selectionY / editImage.ratioY 0178 onValueModified: selectionTool.selectionY = value * editImage.ratioY 0179 } 0180 } 0181 ] 0182 } 0183 0184 TextMetrics { 0185 id: widthTextMetrics 0186 text: editImage.nativeWidth.toLocaleString(rootEditorView.locale, 'f', 0) 0187 } 0188 0189 TextMetrics { 0190 id: heightTextMetrics 0191 text: editImage.nativeHeight.toLocaleString(rootEditorView.locale, 'f', 0) 0192 } 0193 0194 component EditorSpinBox : QQC2.SpinBox { 0195 id: control 0196 property real minimumContentWidth: 0 0197 contentItem: QQC2.TextField { 0198 id: textField 0199 implicitWidth: control.minimumContentWidth + leftPadding + rightPadding + 2 0200 implicitHeight: Math.ceil(contentHeight) + topPadding + bottomPadding 0201 palette: control.palette 0202 leftPadding: control.spacing 0203 rightPadding: control.spacing 0204 topPadding: 0 0205 bottomPadding: 0 0206 text: control.displayText 0207 font: control.font 0208 color: Kirigami.Theme.textColor 0209 selectionColor: Kirigami.Theme.highlightColor 0210 selectedTextColor: Kirigami.Theme.highlightedTextColor 0211 horizontalAlignment: Qt.AlignHCenter 0212 verticalAlignment: Qt.AlignVCenter 0213 readOnly: !control.editable 0214 validator: control.validator 0215 inputMethodHints: control.inputMethodHints 0216 selectByMouse: true 0217 background: null 0218 } 0219 } 0220 0221 FileDialog { 0222 id: fileDialog 0223 title: "Save As" 0224 folder: shortcuts.home 0225 selectMultiple: false 0226 selectExisting: false 0227 onAccepted: { 0228 if (imageDoc.saveAs(fileDialog.fileUrl)) {; 0229 imagePath = fileDialog.fileUrl; 0230 msg.type = Kirigami.MessageType.Information 0231 msg.text = "You are now editing a new file." 0232 msg.visible = true; 0233 } else { 0234 msg.type = Kirigami.MessageType.Error 0235 msg.text = "Unable to save file. Check if you have the correct permission to edit this file." 0236 msg.visible = true; 0237 } 0238 fileDialog.close() 0239 } 0240 onRejected: { 0241 fileDialog.close() 0242 } 0243 Component.onCompleted: visible = false 0244 } 0245 0246 KQuickImageEditor.ImageItem { 0247 id: editImage 0248 readonly property real ratioX: editImage.paintedWidth / editImage.nativeWidth; 0249 readonly property real ratioY: editImage.paintedHeight / editImage.nativeHeight; 0250 0251 // Assigning this to the contentItem and setting the padding causes weird positioning issues 0252 anchors.fill: parent 0253 anchors.margins: Kirigami.Units.gridUnit 0254 fillMode: KQuickImageEditor.ImageItem.PreserveAspectFit 0255 image: imageDoc.image 0256 0257 Shortcut { 0258 sequence: StandardKey.Undo 0259 onActivated: undoAction.trigger(); 0260 } 0261 0262 Shortcut { 0263 sequences: [StandardKey.Save, "Enter"] 0264 onActivated: saveAction.trigger(); 0265 } 0266 0267 Shortcut { 0268 sequence: StandardKey.SaveAs 0269 onActivated: saveAsAction.trigger(); 0270 } 0271 0272 KQuickImageEditor.ImageDocument { 0273 id: imageDoc 0274 path: rootEditorView.imagePath 0275 } 0276 0277 KQuickImageEditor.SelectionTool { 0278 id: selectionTool 0279 visible: rootEditorView.resizing 0280 width: editImage.paintedWidth 0281 height: editImage.paintedHeight 0282 x: editImage.horizontalPadding 0283 y: editImage.verticalPadding 0284 KQuickImageEditor.CropBackground { 0285 anchors.fill: parent 0286 z: -1 0287 insideX: selectionTool.selectionX 0288 insideY: selectionTool.selectionY 0289 insideWidth: selectionTool.selectionWidth 0290 insideHeight: selectionTool.selectionHeight 0291 } 0292 Connections { 0293 target: selectionTool.selectionArea 0294 function onDoubleClicked() { 0295 rootEditorView.crop() 0296 } 0297 } 0298 } 0299 onImageChanged: { 0300 selectionTool.selectionX = 0 0301 selectionTool.selectionY = 0 0302 selectionTool.selectionWidth = Qt.binding(() => selectionTool.width) 0303 selectionTool.selectionHeight = Qt.binding(() => selectionTool.height) 0304 } 0305 } 0306 0307 0308 footer: Kirigami.InlineMessage { 0309 id: msg 0310 type: Kirigami.MessageType.Error 0311 showCloseButton: true 0312 visible: false 0313 } 0314 } 0315 } 0316 }