diff --git a/Examples/src/ViewPortContainerPage.qml b/Examples/src/ViewPortContainerPage.qml index 7171ff6..8d84051 100644 --- a/Examples/src/ViewPortContainerPage.qml +++ b/Examples/src/ViewPortContainerPage.qml @@ -6,20 +6,51 @@ import ViewSolutionsModule 1.0 Page { id: root - ListModel { - id: myModel - ListElement { type: "Dog"; age: 8 } - ListElement { type: "Cat"; age: 5 } - } - ViewPortContainer { + ListView { + id: viewPort + property real globalPos: 0 anchors.fill: parent - viewPortDelegat: ViewPortDelegat { - background: "qrc:/img/res/LOGO.png" - anchors.margins: 20 + delegate: Component { + ViewPortPage { + viewPortDelegatH: 500 + scrollPos: viewPort.globalPos + source: modelData + viewground: root + title: "Test ViewPortPage" + text: "Test ViewPortPage. General text and html code" + } } - model: myModel + ScrollBar.vertical: ScrollBar { + onPositionChanged: { + viewPort.globalPos = position + } + } + + + model: [ + "qrc:/img/res/LOGO.png", + "qrc:/img/res/LOGO-GREAN.png", + "qrc:/img/res/LOGO-ORANGE.png", + "qrc:/img/res/LOGO-RED.png", + "qrc:/img/res/LOGO.png", + "qrc:/img/res/LOGO-GREAN.png", + "qrc:/img/res/LOGO-ORANGE.png", + "qrc:/img/res/LOGO-RED.png", + "qrc:/img/res/LOGO.png", + "qrc:/img/res/LOGO-GREAN.png", + "qrc:/img/res/LOGO-ORANGE.png", + "qrc:/img/res/LOGO-RED.png", + "qrc:/img/res/LOGO.png", + "qrc:/img/res/LOGO-GREAN.png", + "qrc:/img/res/LOGO-ORANGE.png", + "qrc:/img/res/LOGO-RED.png", + "qrc:/img/res/LOGO.png", + "qrc:/img/res/LOGO-GREAN.png", + "qrc:/img/res/LOGO-ORANGE.png", + "qrc:/img/res/LOGO-RED.png", + ] } } diff --git a/Examples/src/res.qrc b/Examples/src/res.qrc index 2f8a926..c74e7a2 100644 --- a/Examples/src/res.qrc +++ b/Examples/src/res.qrc @@ -7,5 +7,8 @@ res/LOGO.png + res/LOGO-GREAN.png + res/LOGO-ORANGE.png + res/LOGO-RED.png diff --git a/Examples/src/res/LOGO-GREAN.png b/Examples/src/res/LOGO-GREAN.png new file mode 100644 index 0000000..b9f7dc2 Binary files /dev/null and b/Examples/src/res/LOGO-GREAN.png differ diff --git a/Examples/src/res/LOGO-ORANGE.png b/Examples/src/res/LOGO-ORANGE.png new file mode 100644 index 0000000..c067926 Binary files /dev/null and b/Examples/src/res/LOGO-ORANGE.png differ diff --git a/Examples/src/res/LOGO-RED.png b/Examples/src/res/LOGO-RED.png new file mode 100644 index 0000000..61f717c Binary files /dev/null and b/Examples/src/res/LOGO-RED.png differ diff --git a/README.md b/README.md index 09cde79..02796e2 100644 --- a/README.md +++ b/README.md @@ -14,4 +14,37 @@ This is animate image viewer anchors.margins: 100 borderColor: "red" } +``` + +#### ViewPortPage +This is animate Delegate viewer for ListView +##### Example: +``` qml + ListView { + id: viewPort + property real globalPos: 0 + anchors.fill: parent + delegate: Component { + ViewPortPage { + viewPortDelegatH: 500 // base size of content item + scrollPos: viewPort.globalPos // due to qml limitations, this field will have to be tied to updating the location of the scroll + source: modelData + viewground: root // this is plane to display the main background + title: "Test ViewPortPage" + text: "Test ViewPortPage. General text and html code" + } + } + + ScrollBar.vertical: ScrollBar { + onPositionChanged: { + viewPort.globalPos = position + } + } + + + model: [ + "qrc:/img/res/LOGO.png", + "qrc:/img/res/LOGO-GREAN.png", + ] + } ``` \ No newline at end of file diff --git a/ViewSolutions/src/ViewSolutionsModule/Updater.qml b/ViewSolutions/src/ViewSolutionsModule/Updater.qml new file mode 100644 index 0000000..ca97ce8 --- /dev/null +++ b/ViewSolutions/src/ViewSolutionsModule/Updater.qml @@ -0,0 +1,6 @@ +import QtQuick 2.0 + +Item { + signal + +} diff --git a/ViewSolutions/src/ViewSolutionsModule/ViewPortContainer.qml b/ViewSolutions/src/ViewSolutionsModule/ViewPortContainer.qml deleted file mode 100644 index 464c91e..0000000 --- a/ViewSolutions/src/ViewSolutionsModule/ViewPortContainer.qml +++ /dev/null @@ -1,38 +0,0 @@ -import QtQuick 2.14 -import QtQuick.Layouts 1.14 -import QtQuick.Controls 2.14 -import QtQuick.Controls.Material 2.14 -import QtQuick.Controls.Universal 2.14 - -ListView { - id: root - - - - property var viewPortDelegat: null - onViewPortDelegatChanged: { - if (viewPortDelegat && viewPortDelegat instanceof ViewPortDelegat) { - viewPortDelegat.viewground = root - if (delegateItem) - viewPortDelegat.parent = delegateItem - - } - } - - Component { - id: baseDelegate - Item { - id: delegateItem - - width: viewPortDelegat.width - height: viewPortDelegat.height - - Component.onCompleted: { - if (viewPortDelegat) - viewPortDelegat.parent = delegateItem - } - } - } - - delegate: baseDelegate -} diff --git a/ViewSolutions/src/ViewSolutionsModule/ViewPortDelegat.qml b/ViewSolutions/src/ViewSolutionsModule/ViewPortDelegat.qml deleted file mode 100644 index 46674e9..0000000 --- a/ViewSolutions/src/ViewSolutionsModule/ViewPortDelegat.qml +++ /dev/null @@ -1,51 +0,0 @@ -import QtQuick 2.14 -import QtQuick.Layouts 1.14 -import QtQuick.Controls 2.14 -import QtQuick.Controls.Material 2.14 -import QtQuick.Controls.Universal 2.14 - -Item { - - id: root - - property string background: "" - property var viewground: null - - onXChanged: updatePos; - onYChanged: updatePos; - - Flickable { - id: flickable - contentWidth: (viewground)? viewground.width: image.width - contentHeight: (viewground)? viewground.height: image.height - contentX: 0 - contentY: 0 - clip: true - interactive: false - function updatePos() { - if (!viewground) { - return {x: 0, y : 0}; - } - - const viewGlobal = root.mapToGlobal(viewground.x, viewground.y); - const img = image.mapFromGlobal(viewGlobal.x, viewGlobal.y); - flickable.contentX = img.x; - flickable.contentY = img.y; - } - - - Image { - id: image; - source: background - height: root.contentH - fillMode: Image.PreserveAspectFit - width: root.contentW - - } - - anchors.fill: parent - - } - - -} diff --git a/ViewSolutions/src/ViewSolutionsModule/ViewPortDelegatBase.qml b/ViewSolutions/src/ViewSolutionsModule/ViewPortDelegatBase.qml new file mode 100644 index 0000000..b983c77 --- /dev/null +++ b/ViewSolutions/src/ViewSolutionsModule/ViewPortDelegatBase.qml @@ -0,0 +1,106 @@ +import QtQuick 2.14 +import QtQuick.Layouts 1.14 +import QtQuick.Controls 2.14 +import QtQuick.Controls.Material 2.14 +import QtQuick.Controls.Universal 2.14 + +Item { + id: delegateItem + + property string source: "" + property var background: Rectangle { + border.color: "black" + anchors.fill: parent + color: "#00000000" + + } + + property var bloor: Item { + } + + property var viewground: null + property real scrollPos: 0 + property int imageMrgin: 5 + + property int viewPortDelegatW: 0 + property int viewPortDelegatH: 0 + property var content: Item { + anchors.fill: parent + } + + onBackgroundChanged:{ + updateLayout() + } + + onContentChanged:{ + updateLayout() + } + + onBloorChanged:{ + updateLayout() + } + + width: (viewPortDelegatW)? viewPortDelegatW: (viewground)? viewground.width : 0 + height: (viewPortDelegatH)? viewPortDelegatH: (viewground)?viewground.height * 0.1 : 0 + + onScrollPosChanged: { + updatePos(); + } + + function updatePos() { + if (!viewground) { + return ; + } + + const viewGlobal = viewground.mapToGlobal(0, 0); + const img = flickable.mapFromGlobal(viewGlobal.x, viewGlobal.y); + + flickable.contentX = -img.x; + flickable.contentY = -img.y; + } + + function updateLayout() { + + if (background) { + background.parent = this; + background.anchors.fill = this; + background.z = 0; + } + + flickable.z = 1; + + if (bloor) { + bloor.parent = this; + bloor.anchors.fill = this; + bloor.z = 2; + } + + if (content) { + content.parent = this; + content.anchors.fill = this; + content.z = 3; + } + } + + Flickable { + id: flickable + contentWidth: viewground.width + contentHeight: viewground.height + clip: true + interactive: false + + Image { + id: image; + source: delegateItem.source + + fillMode: Image.PreserveAspectFit + anchors.fill: parent + + } + + anchors.fill: parent + anchors.margins: imageMrgin + } + + +} diff --git a/ViewSolutions/src/ViewSolutionsModule/ViewPortPage.qml b/ViewSolutions/src/ViewSolutionsModule/ViewPortPage.qml new file mode 100644 index 0000000..78edfb6 --- /dev/null +++ b/ViewSolutions/src/ViewSolutionsModule/ViewPortPage.qml @@ -0,0 +1,59 @@ +import QtQuick 2.14 +import QtQuick.Layouts 1.14 +import QtQuick.Controls 2.14 +import QtQuick.Controls.Material 2.14 +import QtQuick.Controls.Universal 2.14 + +ViewPortDelegatBase { + id: root + property string title: "" + property string text: "" + + + background: Rectangle { + color: "#00ffffff" + border.color: "#a7777777" + border.width: 4 + radius: height * 0.01 + } + + bloor: Rectangle { + color: "#55ffffff" + border.color: "#a7777777" + border.width: 4 + radius: height * 0.01 + } + + content: Item { + Label { + id: header + font.bold: true + font.pixelSize: height * 0.5 + text: title; + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + wrapMode: Text.WordWrap + + height: parent.height * 0.2 + + anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right + } + + Label { + id: sourceText + font.bold: false + font.pixelSize: header.font.pixelSize * 0.5 + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + text: root.text + wrapMode: Text.WordWrap + anchors.bottom: parent.bottom + anchors.top: header.bottom + anchors.left: parent.left + anchors.right: parent.right + anchors.horizontalCenter: parent.Center + } + } +} diff --git a/ViewSolutions/src/ViewSolutionsModule/qmldir b/ViewSolutions/src/ViewSolutionsModule/qmldir index 9ea63f0..1b0c89a 100644 --- a/ViewSolutions/src/ViewSolutionsModule/qmldir +++ b/ViewSolutions/src/ViewSolutionsModule/qmldir @@ -1,4 +1,4 @@ module ViewSolutionsModule ImageView 1.0 ImageView.qml -ViewPortContainer 1.0 ViewPortContainer.qml -ViewPortDelegat 1.0 ViewPortDelegat.qml +ViewPortDelegatBase 1.0 ViewPortDelegatBase.qml +ViewPortPage 1.0 ViewPortPage.qml diff --git a/ViewSolutions/src/ViewSolutionsResources.qrc b/ViewSolutions/src/ViewSolutionsResources.qrc index 280d3be..04071e1 100644 --- a/ViewSolutions/src/ViewSolutionsResources.qrc +++ b/ViewSolutions/src/ViewSolutionsResources.qrc @@ -2,8 +2,9 @@ ViewSolutionsModule/qmldir ViewSolutionsModule/ImageView.qml - ViewSolutionsModule/ViewPortContainer.qml - ViewSolutionsModule/ViewPortDelegat.qml + ViewSolutionsModule/ViewPortDelegatBase.qml + ViewSolutionsModule/Updater.qml + ViewSolutionsModule/ViewPortPage.qml