QmlDesigner: Implementing exporting QML file as image

Task-number: QTCREATORBUG-11494
Change-Id: Ifcfef6f9434637c0be0a727d9f80dfed1ef1c11b
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

src/plugins/qmldesigner/components/formeditor/formeditorgraphicsview.h

@@ -39,10 +39,10 @@ public:
 
     void activateCheckboardBackground();
     void activateColoredBackground(const QColor &color);
+    void drawBackground(QPainter *painter, const QRectF &rect) override;
 
 protected:
     bool eventFilter(QObject *watched, QEvent *event) override;
-    void drawBackground(QPainter *painter, const QRectF &rect) override;
     void wheelEvent(QWheelEvent *event) override;
     void mousePressEvent(QMouseEvent *event) override;
     void mouseReleaseEvent(QMouseEvent *event) override;

src/plugins/qmldesigner/components/formeditor/formeditorview.cpp

@@ -533,6 +533,11 @@ void FormEditorView::setGotoErrorCallback(std::function<void (int, int)> gotoErr
     m_gotoErrorCallback = gotoErrorCallback;
 }
 
+void FormEditorView::exportAsImage()
+{
+    m_formEditorWidget->exportAsImage(m_scene->rootFormEditorItem()->boundingRect());
+}
+
 QList<ModelNode> FormEditorView::adjustStatesForModelNodes(const QList<ModelNode> &nodeList) const
 {
     QList<ModelNode> adjustedNodeList;

src/plugins/qmldesigner/components/formeditor/formeditorview.h

@@ -116,6 +116,8 @@ public:
     void gotoError(int, int);
     void setGotoErrorCallback(std::function<void(int, int)> gotoErrorCallback);
 
+    void exportAsImage();
+
 protected:
     void reset();
 

src/plugins/qmldesigner/components/formeditor/formeditorwidget.cpp

@@ -25,11 +25,13 @@
 
 #include "designeractionmanager.h"
 #include "formeditorwidget.h"
+#include "formeditorscene.h"
 #include "qmldesignerplugin.h"
 #include "designersettings.h"
 #include "qmldesignerconstants.h"
 #include "qmldesignericons.h"
 #include "viewmanager.h"
+#include <model.h>
 #include <theming.h>
 
 #include <QWheelEvent>
@@ -43,9 +45,14 @@
 #include <lineeditaction.h>
 #include <backgroundaction.h>
 
+#include <coreplugin/icore.h>
+
 #include <utils/fileutils.h>
 #include <utils/utilsicons.h>
 
+#include <QFileDialog>
+#include <QPainter>
+
 namespace QmlDesigner {
 
 FormEditorWidget::FormEditorWidget(FormEditorView *view)
@@ -353,6 +360,29 @@ QRectF FormEditorWidget::rootItemRect() const
     return m_graphicsView->rootItemRect();
 }
 
+void FormEditorWidget::exportAsImage(const QRectF &boundingRect)
+{
+    QString proposedFileName = m_formEditorView->model()->fileUrl().toLocalFile();
+    proposedFileName.chop(4);
+    if (proposedFileName.endsWith(".ui"))
+        proposedFileName.chop(3);
+    proposedFileName.append(".png");
+    const QString fileName = QFileDialog::getSaveFileName(Core::ICore::dialogParent(),
+                                                          tr("Export Current QML File as Image"),
+                                                          proposedFileName,
+                                                          tr("PNG (*.png);;JPG (*.jpg)"));
+
+    if (!fileName.isNull()) {
+        QImage image(boundingRect.size().toSize(), QImage::Format_ARGB32);
+        QPainter painter(&image);
+        QTransform viewportTransform = m_graphicsView->viewportTransform();
+        m_graphicsView->render(&painter,
+                               QRectF(0, 0, image.width(), image.height()),
+                               viewportTransform.mapRect(boundingRect).toRect());
+        image.save(fileName);
+    }
+}
+
 DocumentWarningWidget *FormEditorWidget::errorWidget()
 {
     if (m_documentErrorWidget.isNull()) {

src/plugins/qmldesigner/components/formeditor/formeditorwidget.h

@@ -79,6 +79,7 @@ public:
 
     void showWarningMessageBox(const QList<DocumentMessage> &warnings);
 
+    void exportAsImage(const QRectF &boundingRect);
 protected:
     void wheelEvent(QWheelEvent *event);
     QActionGroup *toolActionGroup() const;

src/plugins/qmldesigner/designercore/include/viewmanager.h

@@ -84,6 +84,8 @@ public:
 
     NodeInstanceView *nodeInstanceView() const;
 
+    void exportAsImage();
+
     QWidgetAction *componentViewAction() const;
 
     DesignerActionManager &designerActionManager();

src/plugins/qmldesigner/designercore/model/viewmanager.cpp

@@ -334,6 +334,11 @@ Model *ViewManager::documentModel() const
     return currentDesignDocument()->documentModel();
 }
 
+void ViewManager::exportAsImage()
+{
+    d->formEditorView.exportAsImage();
+}
+
 } // namespace QmlDesigner
 
 #endif //QMLDESIGNER_TEST

src/plugins/qmldesigner/qmldesignerconstants.h

@@ -46,6 +46,7 @@ const char RESTORE_DEFAULT_VIEW[] = "QmlDesigner.RestoreDefaultView";
 const char TOGGLE_LEFT_SIDEBAR[] = "QmlDesigner.ToggleLeftSideBar";
 const char TOGGLE_RIGHT_SIDEBAR[] = "QmlDesigner.ToggleRightSideBar";
 const char GO_INTO_COMPONENT[] = "QmlDesigner.GoIntoComponent";
+const char EXPORT_AS_IMAGE[] = "QmlDesigner.ExportAsImage";
 
 const char QML_DESIGNER_SUBFOLDER[] = "/designer/";
 

src/plugins/qmldesigner/shortcutmanager.cpp

@@ -69,6 +69,7 @@ ShortCutManager::ShortCutManager()
     m_revertToSavedAction(0),
     m_saveAction(0),
     m_saveAsAction(0),
+    m_exportAsImageAction(tr("Export as &Image...")),
     m_closeCurrentEditorAction(0),
     m_closeAllEditorsAction(0),
     m_closeOtherEditorsAction(0),
@@ -94,6 +95,7 @@ void ShortCutManager::registerActions(const Core::Context &qmlDesignerMainContex
                                       const Core::Context &qmlDesignerNavigatorContext)
 {
     Core::ActionContainer *editMenu = Core::ActionManager::actionContainer(Core::Constants::M_EDIT);
+    Core::ActionContainer *fileMenu = Core::ActionManager::actionContainer(Core::Constants::M_FILE);
 
     connect(&m_undoAction, SIGNAL(triggered()), this, SLOT(undo()));
 
@@ -159,6 +161,14 @@ void ShortCutManager::registerActions(const Core::Context &qmlDesignerMainContex
     Core::ActionManager::registerAction(&m_saveAsAction, Core::Constants::SAVEAS, qmlDesignerMainContext);
     connect(&m_saveAsAction, SIGNAL(triggered()), em, SLOT(saveDocumentAs()));
 
+    //Export as Image
+    command = Core::ActionManager::registerAction(&m_exportAsImageAction, QmlDesigner::Constants::EXPORT_AS_IMAGE, qmlDesignerMainContext);
+    command->setAttribute(Core::Command::CA_Hide);
+    connect(&m_exportAsImageAction, &QAction::triggered, [] {
+        QmlDesignerPlugin::instance()->viewManager().exportAsImage();
+    });
+    fileMenu->addAction(command, Core::Constants::G_FILE_SAVE);
+
     //Close Editor
     Core::ActionManager::registerAction(&m_closeCurrentEditorAction, Core::Constants::CLOSE, qmlDesignerMainContext);
     connect(&m_closeCurrentEditorAction, SIGNAL(triggered()), em, SLOT(slotCloseCurrentEditorOrDocument()));

src/plugins/qmldesigner/shortcutmanager.h

@@ -76,6 +76,7 @@ private:
     QAction m_revertToSavedAction;
     QAction m_saveAction;
     QAction m_saveAsAction;
+    QAction m_exportAsImageAction;
     QAction m_closeCurrentEditorAction;
     QAction m_closeAllEditorsAction;
     QAction m_closeOtherEditorsAction;