Add PAG export support in viewer: PNG sequence, single frame PNG and APNG formats (#2755)

Author: CodeJhF

viewer/CMakeLists.txt

@@ -105,9 +105,13 @@ add_subdirectory(${CMAKE_CURRENT_SOURCE_DIR}/../ ./libpag)
 add_executable(PAGViewer ${RC_FILES} ${PAG_VIEWER_SOURCE_FILES} ${QT_RESOURCES})
 if (APPLE)
     list(APPEND PAG_VIEWER_INCLUDES ../third_party/out/rttr/mac/include)
+    list(APPEND PAG_VIEWER_INCLUDES ../third_party/tgfx/third_party/out/zlib/mac/include)
+    list(APPEND PAG_VIEWER_INCLUDES ../third_party/tgfx/third_party/out/libpng/mac/include)
     list(APPEND VIEWER_VENDOR_LIBRARIES ${CMAKE_SOURCE_DIR}/../vendor/sparkle/mac/Sparkle.framework)
 elseif (WIN32)
     list(APPEND PAG_VIEWER_INCLUDES ../third_party/out/rttr/win/include)
+    list(APPEND PAG_VIEWER_INCLUDES ../third_party/tgfx/third_party/out/zlib/win/include)
+    list(APPEND PAG_VIEWER_INCLUDES ../third_party/tgfx/third_party/out/libpng/win/include)
     list(APPEND PAG_VIEWER_INCLUDES ../vendor/winsparkle/include)
     list(APPEND VIEWER_VENDOR_LIBRARIES ${CMAKE_SOURCE_DIR}/../vendor/winsparkle/win/x64/${CMAKE_BUILD_TYPE}/WinSparkle.lib)
 endif ()

viewer/qml/Main.qml

@@ -2,7 +2,9 @@ import PAG
 import QtCore
 import QtQuick
 import QtQuick.Dialogs
+import QtQuick.Controls
 import Qt.labs.settings
+import Qt.labs.platform as Platform
 import "components"
 import "utils"
 
@@ -127,18 +129,6 @@ PAGWindow {
         }
     }
 
-    FileDialog {
-        id: openPAGFileDialog
-        visible: false
-        title: qsTr("Open PAG File")
-        fileMode: FileDialog.OpenFile
-        nameFilters: ["PAG files(*.pag)"]
-        onAccepted: {
-            let filePath = openPAGFileDialog.selectedFile;
-            mainForm.pagView.setFile(filePath);
-        }
-    }
-
     SettingsWindow {
         id: settingsWindow
         visible: false
@@ -163,6 +153,120 @@ PAGWindow {
         aboutMessage: "<b>PAGViewer</b> " + Qt.application.version + "<br><br>Copyright © 2017-present Tencent. All rights reserved."
     }
 
+    PAGTaskFactory {
+        id: taskFactory
+        objectName: "taskFactory"
+    }
+
+    FileDialog {
+        id: openFileDialog
+
+        property var currentAcceptHandler: null
+
+        visible: false
+        title: ""
+        fileMode: FileDialog.OpenFile
+        nameFilters: []
+    }
+
+    Platform.FolderDialog {
+        id: openFolderDialog
+
+        property var currentAcceptHandler: null
+
+        visible: false
+        title: qsTr("Select Save Path")
+    }
+
+    PAGWindow {
+        id: progressWindow
+
+        property var task
+        property alias progressBar: progressBar
+
+        width: 300
+        height: 64
+        minimumWidth: width
+        maximumWidth: width
+        minimumHeight: height
+        maximumHeight: height
+        hasMenu: false
+        canResize: false
+        titleBarHeight: windowTitleBarHeight
+        visible: false
+
+        PAGRectangle {
+            id: rectangle
+
+            color: "#2D2D37"
+            anchors.fill: parent
+            leftTopRadius: false
+            rightTopRadius: false
+            radius: 5
+
+            ProgressBar {
+                id: progressBar
+                width: parent.width - 24
+                height: 30
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
+                value: 0
+
+                contentItem: Item {
+                    Rectangle {
+                        width: parent.width
+                        height: 15
+                        radius: 5
+                        color: "#DDDDDD"
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                    Rectangle {
+                        width: progressBar.visualPosition * parent.width
+                        height: 15
+                        radius: 5
+                        color: "#448EF9"
+                        anchors.verticalCenter: parent.verticalCenter
+                    }
+
+                    Text {
+                        anchors.centerIn: parent
+                        text: Math.round(progressBar.value * 100) + "%"
+                        color: progressBar.value > 0.5 ? "white" : "black"
+                        font.pixelSize: 12
+                    }
+                }
+            }
+        }
+
+        onClosing: {
+            if (task) {
+                task.stop();
+            }
+        }
+    }
+
+    Connections {
+        id: taskConnections
+        onProgressChanged: function (progress) {
+            progressWindow.progressBar.value = progress;
+        }
+
+        onVisibleChanged: function (visible) {
+            progressWindow.visible = visible;
+        }
+
+        onTaskFinished: function (filePath, result) {
+            if (result !== 0) {
+                let errStr = qsTr("Export failed, error code: ");
+                alert(errStr + result);
+            }
+            progressWindow.task = null;
+            progressWindow.progressBar.value = 0;
+            progressWindow.visible = false;
+        }
+    }
+
     Component.onCompleted: {
         viewWindow.title = "PAGViewer";
 
@@ -217,11 +321,19 @@ PAGWindow {
         case "open-pag-file":
             if (mainForm.hasPAGFile) {
                 let filePath = mainForm.pagView.filePath;
-                openPAGFileDialog.currentFolder = Utils.getFileDir(filePath);
+                openFileDialog.currentFolder = Utils.getFileDir(filePath);
             } else {
-                openPAGFileDialog.currentFolder = StandardPaths.writableLocation(StandardPaths.DocumentsLocation);
+                openFileDialog.currentFolder = StandardPaths.writableLocation(StandardPaths.DocumentsLocation);
             }
-            openPAGFileDialog.open();
+            openFileDialog.accepted.disconnect();
+            openFileDialog.fileMode = FileDialog.OpenFile;
+            openFileDialog.title = qsTr("Open PAG File");
+            openFileDialog.nameFilters = ["PAG files(*.pag)"];
+            openFileDialog.accepted.connect(function () {
+                let filePath = openFileDialog.selectedFile;
+                mainForm.pagView.setFile(filePath);
+            });
+            openFileDialog.open();
             break;
         case "close-window":
             viewWindow.close();
@@ -273,6 +385,79 @@ PAGWindow {
         case "fullscreen-window":
             viewWindow.visibility = viewWindow.visibility !== Window.Maximized ? Window.Maximized : Window.AutomaticVisibility;
             break;
+        case "export-frame-as-png":
+            if (openFileDialog.currentAcceptHandler) {
+                openFileDialog.accepted.disconnect(openFileDialog.currentAcceptHandler);
+            }
+            openFileDialog.fileMode = FileDialog.SaveFile;
+            openFileDialog.title = qsTr("Select save path");
+            openFileDialog.nameFilters = ["PNG files(*.png)"];
+            openFileDialog.defaultSuffix = "png";
+            openFileDialog.currentFolder = Utils.getFileDir(mainForm.pagView.filePath);
+            openFileDialog.currentAcceptHandler = function () {
+                let filePath = openFileDialog.selectedFile;
+                let task = taskFactory.createTask(PAGTaskFactory.PAGTaskType_ExportPNG, filePath, {
+                    "exportFrame": mainForm.pagView.currentFrame
+                });
+                if (task) {
+                    taskConnections.target = task;
+                    progressWindow.title = qsTr("Exporting");
+                    progressWindow.task = task;
+                    progressWindow.visible = true;
+                    progressWindow.raise();
+                    task.start();
+                }
+            };
+            openFileDialog.accepted.connect(openFileDialog.currentAcceptHandler);
+            openFileDialog.open();
+            break;
+        case "export-as-png-sequence":
+            if (openFolderDialog.currentAcceptHandler) {
+                openFolderDialog.accepted.disconnect(openFolderDialog.currentAcceptHandler);
+            }
+            openFolderDialog.title = qsTr("Select save path");
+            openFolderDialog.currentFolder = Utils.getFileDir(mainForm.pagView.filePath);
+            openFolderDialog.currentAcceptHandler = function () {
+                let filePath = openFolderDialog.folder;
+                let task = taskFactory.createTask(PAGTaskFactory.PAGTaskType_ExportPNG, filePath, {});
+                if (task) {
+                    taskConnections.target = task;
+                    progressWindow.title = qsTr("Exporting");
+                    progressWindow.progressBar.value = 0;
+                    progressWindow.task = task;
+                    progressWindow.visible = true;
+                    progressWindow.raise();
+                    task.start();
+                }
+            };
+            openFolderDialog.accepted.connect(openFolderDialog.currentAcceptHandler);
+            openFolderDialog.open();
+            break;
+        case "export-as-apng":
+            if (openFileDialog.currentAcceptHandler) {
+                openFileDialog.accepted.disconnect(openFileDialog.currentAcceptHandler);
+            }
+            openFileDialog.fileMode = FileDialog.SaveFile;
+            openFileDialog.title = qsTr("Select save path");
+            openFileDialog.nameFilters = ["APNG files(*.png)"];
+            openFileDialog.defaultSuffix = "png";
+            openFileDialog.currentFolder = Utils.getFileDir(mainForm.pagView.filePath);
+            openFileDialog.currentAcceptHandler = function () {
+                let filePath = openFileDialog.selectedFile;
+                let task = taskFactory.createTask(PAGTaskFactory.PAGTaskType_ExportAPNG, filePath, {});
+                if (task) {
+                    taskConnections.target = task;
+                    progressWindow.title = qsTr("Exporting");
+                    progressWindow.progressBar.value = 0;
+                    progressWindow.task = task;
+                    progressWindow.visible = true;
+                    progressWindow.raise();
+                    task.start();
+                }
+            };
+            openFileDialog.accepted.connect(openFileDialog.currentAcceptHandler);
+            openFileDialog.open();
+            break;
         default:
             console.log(`Undefined command: [${command}]`);
             break;

viewer/qml/Menu.qml

@@ -48,6 +48,32 @@ Item {
                         root.command("open-preferences");
                     }
                 }
+                PAGMenu {
+                    menuWidth: windowsMenuBar.menuWidth
+                    title: qsTr("Export")
+                    Action {
+                        text: qsTr("Export as PNG Sequence Frames")
+                        enabled: root.hasPAGFile
+                        onTriggered: {
+                            root.command('export-as-png-sequence');
+                        }
+                    }
+                    Action {
+                        text: qsTr("Export as APNG")
+                        enabled: root.hasPAGFile
+                        onTriggered: {
+                            root.command('export-as-apng');
+                        }
+                    }
+                    Action {
+                        text: qsTr("Export current frame as PNG")
+                        enabled: root.hasPAGFile
+                        shortcut: "Ctrl+P"
+                        onTriggered: {
+                            root.command('export-frame-as-png');
+                        }
+                    }
+                }
             }
 
             PAGMenu {
@@ -196,6 +222,31 @@ Item {
                         root.command("open-pag-file");
                     }
                 }
+                Platform.Menu {
+                    title: qsTr("Export")
+                    Platform.MenuItem {
+                        text: qsTr("Export as PNG Sequence Frames")
+                        enabled: root.hasPAGFile
+                        onTriggered: {
+                            root.command('export-as-png-sequence');
+                        }
+                    }
+                    Platform.MenuItem {
+                        text: qsTr("Export as APNG")
+                        enabled: root.hasPAGFile
+                        onTriggered: {
+                            root.command('export-as-apng');
+                        }
+                    }
+                    Platform.MenuItem {
+                        text: qsTr("Export current frame as PNG")
+                        enabled: root.hasPAGFile
+                        shortcut: "Meta+P"
+                        onTriggered: {
+                            root.command('export-frame-as-png');
+                        }
+                    }
+                }
             }
             Platform.Menu {
                 title: qsTr("Play")

viewer/qml/utils/Utils.qml

@@ -23,4 +23,13 @@ QtObject {
         let fileName = urlObject.pathname.split('/').pop();
         return fileName;
     }
-}
+
+    function replaceLastIndexOf(str, oldPara, newPara) {
+        let lastIndex = str.lastIndexOf(oldPara);
+        if (lastIndex !== -1) {
+            return str;
+        }
+
+        return str.substring(0, lastIndex) + newPara + str.substring(lastIndex + oldPara.length);
+    }
+}

viewer/src/main.cpp

@@ -22,6 +22,7 @@
 #include <QSGRendererInterface>
 #include "PAGViewer.h"
 #include "rendering/PAGView.h"
+#include "task/PAGTaskFactory.h"
 
 int main(int argc, char* argv[]) {
   bool cpuMode = false;
@@ -60,6 +61,7 @@ int main(int argc, char* argv[]) {
   pag::PAGViewer app(argc, argv);
   QApplication::setWindowIcon(QIcon(":/images/window-icon.png"));
   qmlRegisterType<pag::PAGView>("PAG", 1, 0, "PAGView");
+  qmlRegisterType<pag::PAGTaskFactory>("PAG", 1, 0, "PAGTaskFactory");
   app.openFile(filePath.data());
 
   return QApplication::exec();

viewer/src/platform/mac/PAGUtilsImpl.h

@@ -0,0 +1,27 @@
+/////////////////////////////////////////////////////////////////////////////////////////////////
+//
+//  Tencent is pleased to support the open source community by making libpag available.
+//
+//  Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved.
+//
+//  Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file
+//  except in compliance with the License. You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  unless required by applicable law or agreed to in writing, software distributed under the
+//  license is distributed on an "as is" basis, without warranties or conditions of any kind,
+//  either express or implied. see the license for the specific language governing permissions
+//  and limitations under the license.
+//
+/////////////////////////////////////////////////////////////////////////////////////////////////
+
+#pragma once
+
+#include <QFileInfo>
+
+namespace pag::Utils {
+
+auto openFileInFinder(QFileInfo& fileInfo) -> void;
+
+}  // namespace pag::Utils