Implement file info display in Viewer

CMakeLists.txt

@@ -185,8 +185,8 @@ endif ()
 
 if (PAG_USE_QT)
     # need to set the CMAKE_PREFIX_PATH to local QT installation path, for example :
-    # set(CMAKE_PREFIX_PATH /Users/username/Qt5.13.0/5.13.0/clang_64/lib/cmake)
-    find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core)
+    # set(CMAKE_PREFIX_PATH /Users/username/Qt6.2.0/Qt6.2.0/clang_64/lib/cmake)
+    find_package(QT NAMES Qt6 REQUIRED COMPONENTS Core)
     find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Widgets OpenGL Quick)
     list(APPEND PAG_SHARED_LIBS Qt${QT_VERSION_MAJOR}::Widgets Qt${QT_VERSION_MAJOR}::OpenGL
             Qt${QT_VERSION_MAJOR}::Quick)

ohos/libpag/README.md

@@ -104,7 +104,7 @@ versions, you can download the precompiled libraries from [here](https://github.
 - NodeJS 14.14.0+
 - Ninja 1.9.0+
 - CMake 3.13.0+
-- QT 5.13.0+
+- QT 6.2.0+
 - Emscripten 3.1.58+
 
 ### Dependency Management

viewer/qml/Main.qml

@@ -28,6 +28,8 @@ PAGWindow {
 
     property int windowTitleBarHeight: isWindows ? 32 : 22
 
+    property int minWindowHeightWithEditPanel: 650
+
     Settings {
         id: settings
         property bool isEditPanelOpen: false
@@ -67,6 +69,9 @@ PAGWindow {
                 let preferredSize = pagView.preferredSize;
                 let width = Math.max(viewWindow.minimumWidth, preferredSize.width);
                 let height = Math.max(viewWindow.minimumHeight, preferredSize.height);
+                if (settings.isEditPanelOpen) {
+                    width += mainForm.rightItem.width + mainForm.splitHandleWidth;
+                }
                 let x = Math.max(0, oldX - ((width - oldWidth) / 2));
                 let y = Math.max(50, oldY - ((height - oldHeight) / 2));
                 settings.lastX = x;
@@ -312,7 +317,31 @@ PAGWindow {
         if (mainForm.controlForm.panelsButton.checked !== willOpen) {
             mainForm.controlForm.panelsButton.checked = willOpen;
         }
+
+        if (willOpen) {
+            let widthChange = (mainForm.rightItem.width === 0) ? mainForm.minPanelWidth : mainForm.rightItem.width;
+            widthChange += mainForm.splitHandleWidth;
+            if (viewWindow.visibility === Window.FullScreen) {
+                mainForm.centerItem.width = viewWindow.width - widthChange;
+            } else {
+                viewWindow.width = viewWindow.width + widthChange;
+            }
+            mainForm.rightItem.width = widthChange;
+            if (viewWindow.height < minWindowHeightWithEditPanel) {
+                viewWindow.height = minWindowHeightWithEditPanel;
+            }
+        } else {
+            let widthChange = -1 * mainForm.rightItem.width;
+            if ((viewWindow.width + widthChange) < viewWindow.minimumWidth) {
+                viewWindow.width = viewWindow.minimumWidth;
+            } else {
+                viewWindow.width = viewWindow.width + widthChange;
+            }
+            mainForm.rightItem.width = 0;
+        }
+
         settings.isEditPanelOpen = willOpen;
+        mainForm.isEditPanelOpen = willOpen;
     }
 
     function onCommand(command) {

viewer/qml/MainForm.qml

@@ -14,6 +14,8 @@ SplitView {
 
     property int minPlayerWidth: 360
 
+    property int minPanelWidth: 300
+
     property int splitHandleWidth: 0
 
     property int splitHandleHeight: 0
@@ -26,6 +28,8 @@ SplitView {
 
     property alias centerItem: centerItem
 
+    property alias rightItem: rightItem
+
     property alias controlForm: controlForm
     anchors.fill: parent
     orientation: Qt.Horizontal
@@ -112,4 +116,39 @@ SplitView {
             }
         }
     }
+
+    PAGRectangle {
+        id: rightItem
+        visible: isEditPanelOpen
+        SplitView.minimumWidth: minPanelWidth
+        SplitView.preferredWidth: minPanelWidth
+        color: "#16161d"
+        radius: 5
+        leftTopRadius: false
+        rightTopRadius: false
+        rightBottomRadius: false
+
+        PAGRectangle {
+            id: performance
+            color: "#16161D"
+            clip: true
+            anchors.top: parent.top
+            anchors.topMargin: 0
+            anchors.right: parent.right
+            anchors.rightMargin: 0
+            anchors.left: parent.left
+            anchors.leftMargin: 0
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 0
+            radius: 5
+            leftTopRadius: false
+            rightTopRadius: false
+            leftBottomRadius: false
+
+            Profiler {
+                id: profilerForm
+                anchors.fill: parent
+            }
+        }
+    }
 }