From b27a88d2610456d7f7d41ccf99be06aea09809be Mon Sep 17 00:00:00 2001 From: zhuzichu Date: Mon, 18 Sep 2023 18:10:27 +0800 Subject: [PATCH] update --- example/qml/page/T_TreeView.qml | 6 +- src/FluTreeModel.cpp | 61 ++++++---- src/FluTreeModel.h | 22 ++++ .../imports/FluentUI/Controls/FluAppBar.qml | 28 ++++- .../imports/FluentUI/Controls/FluDivider.qml | 3 +- .../imports/FluentUI/Controls/FluTreeView.qml | 106 +++++++++--------- .../imports/FluentUI/Controls/FluDivider.qml | 3 +- .../imports/FluentUI/Controls/FluTreeView.qml | 26 +---- 8 files changed, 150 insertions(+), 105 deletions(-) diff --git a/example/qml/page/T_TreeView.qml b/example/qml/page/T_TreeView.qml index 45fbcabf..b817173b 100644 --- a/example/qml/page/T_TreeView.qml +++ b/example/qml/page/T_TreeView.qml @@ -87,22 +87,20 @@ FluScrollablePage { } FluSlider{ id:slider_width - value: 200 + value: 280 from: 160 to:400 } } - FluToggleSwitch{ id:switch_showline text:"showLine" checked: true } - FluToggleSwitch{ id:switch_draggable text:"draggable" - checked: false + checked: true } } } diff --git a/src/FluTreeModel.cpp b/src/FluTreeModel.cpp index a881222e..c56636fd 100644 --- a/src/FluTreeModel.cpp +++ b/src/FluTreeModel.cpp @@ -155,7 +155,7 @@ void FluTreeModel::expand(int row){ } void FluTreeModel::dragAnddrop(int dragIndex,int dropIndex){ - if(dragIndex == dropIndex+1){ + if(dragIndex == dropIndex+1 || dropIndex>_rows.count() || dropIndex<0){ return; } auto dragItem = _rows[dragIndex]; @@ -164,29 +164,48 @@ void FluTreeModel::dragAnddrop(int dragIndex,int dropIndex){ return; } if(dragItem->_parent == dropItem->_parent){ - if(dragItem->hasChildren()){ - - }else{ - QList* children = &(dragItem->_parent->_children); - int srcIndex = children->indexOf(dragItem); - int destIndex = children->indexOf(dropItem); - children->move(srcIndex,destIndex>srcIndex? destIndex : destIndex +1); - _rows.move(dragIndex,dropIndex>dragIndex? dropIndex : dropIndex+1); - } + QList* children = &(dragItem->_parent->_children); + int srcIndex = children->indexOf(dragItem); + int destIndex = children->indexOf(dropItem); + children->move(srcIndex,destIndex>srcIndex? destIndex : destIndex +1); + _rows.move(dragIndex,dropIndex>dragIndex? dropIndex : dropIndex+1); }else{ + QList* srcChildren = &(dragItem->_parent->_children); + QList* destChildren = &(dropItem->_parent->_children); + int srcIndex = srcChildren->indexOf(dragItem); + int destIndex = destChildren->indexOf(dropItem); + dragItem->_depth = dropItem->_depth; + dragItem->_parent = dropItem->_parent; if(dragItem->hasChildren()){ - - }else{ - QList* srcChildren = &(dragItem->_parent->_children); - QList* destChildren = &(dropItem->_parent->_children); - int srcIndex = srcChildren->indexOf(dragItem); - int destIndex = destChildren->indexOf(dropItem); - dragItem->_depth = dropItem->_depth; - dragItem->_parent = dropItem->_parent; - srcChildren->removeAt(srcIndex); - destChildren->insert(destIndex+1,dragItem); - _rows.move(dragIndex,dropIndex>dragIndex? dropIndex : dropIndex+1); + QList stack = dragItem->_children; + foreach (auto node, stack) { + node->_depth = dragItem->_depth+1; + } + std::reverse(stack.begin(), stack.end()); + while (stack.count() > 0) { + auto item = stack.at(stack.count()-1); + stack.pop_back(); + QList children = item->_children; + if(!children.isEmpty()){ + std::reverse(children.begin(), children.end()); + foreach (auto c, children) { + c->_depth = item->_depth+1; + stack.append(c); + } + } + } } + srcChildren->removeAt(srcIndex); + destChildren->insert(destIndex+1,dragItem); + _rows.move(dragIndex,dropIndex>dragIndex? dropIndex : dropIndex+1); } endMoveRows(); } + +void FluTreeModel::refreshNode(int row){ + Q_EMIT dataChanged(index(row,0),index(row,0)); +}; + +Node* FluTreeModel::getNode(int row){ + return _rows.at(row); +} diff --git a/src/FluTreeModel.h b/src/FluTreeModel.h index e28ef6f3..288d9222 100644 --- a/src/FluTreeModel.h +++ b/src/FluTreeModel.h @@ -20,6 +20,26 @@ public: Q_INVOKABLE int depth(){return _depth;}; Q_INVOKABLE bool isExpanded(){return _isExpanded;}; Q_INVOKABLE bool hasChildren(){ return !_children.isEmpty();}; + Q_INVOKABLE bool isHeaderNode(){ + if(hasChildren() && _isExpanded){ + return true; + } + return false; + } + Q_INVOKABLE bool isFooterNode(){ + return this->_parent->_children.indexOf(this) == this->_parent->_children.count()-1; + } + + Q_INVOKABLE bool hasNextNodeByIndex(int index){ + Node* p = this; + for(int i=0;i<(_depth - index -1);i++){ + p = p->_parent; + } + if(p->_parent->_children.indexOf(p) == p->_parent->_children.count()-1){ + return false; + } + return true; + } Q_INVOKABLE bool hideLineFooter(){ if(_parent){ auto childIndex = _parent->_children.indexOf(this); @@ -72,6 +92,8 @@ public: Q_INVOKABLE void collapse(int row); Q_INVOKABLE void expand(int row); Q_INVOKABLE void dragAnddrop(int dragIndex,int dropIndex); + Q_INVOKABLE Node* getNode(int row); + Q_INVOKABLE void refreshNode(int row); private: QList _rows; QList _dataSource; diff --git a/src/Qt5/imports/FluentUI/Controls/FluAppBar.qml b/src/Qt5/imports/FluentUI/Controls/FluAppBar.qml index 2720bc43..43a0d1bb 100644 --- a/src/Qt5/imports/FluentUI/Controls/FluAppBar.qml +++ b/src/Qt5/imports/FluentUI/Controls/FluAppBar.qml @@ -13,11 +13,14 @@ Rectangle{ property string closeText : "关闭" property color textColor: FluTheme.dark ? "#FFFFFF" : "#000000" property color minimizeNormalColor: Qt.rgba(0,0,0,0) - property color minimizeHoverColor: FluTheme.dark ? Qt.rgba(1,1,1,0.1) : Qt.rgba(0,0,0,0.06) + property color minimizeHoverColor: FluTheme.dark ? Qt.rgba(1,1,1,0.03) : Qt.rgba(0,0,0,0.03) + property color minimizePressColor: FluTheme.dark ? Qt.rgba(1,1,1,0.06) : Qt.rgba(0,0,0,0.06) property color maximizeNormalColor: Qt.rgba(0,0,0,0) - property color maximizeHoverColor: FluTheme.dark ? Qt.rgba(1,1,1,0.1) : Qt.rgba(0,0,0,0.06) + property color maximizeHoverColor: FluTheme.dark ? Qt.rgba(1,1,1,0.03) : Qt.rgba(0,0,0,0.03) + property color maximizePressColor: FluTheme.dark ? Qt.rgba(1,1,1,0.06) : Qt.rgba(0,0,0,0.06) property color closeNormalColor: Qt.rgba(0,0,0,0) property color closeHoverColor: Qt.rgba(251/255,115/255,115/255,1) + property color closePressColor: Qt.rgba(251/255,115/255,115/255,0.8) property bool showDark: false property bool showClose: true property bool showMinimize: true @@ -114,7 +117,12 @@ Rectangle{ radius: 0 visible: !isMac && showMinimize iconColor: control.textColor - color: hovered ? minimizeHoverColor : minimizeNormalColor + color: { + if(pressed){ + return minimizePressColor + } + return hovered ? minimizeHoverColor : minimizeNormalColor + } onClicked: minClickListener() } FluIconButton{ @@ -122,7 +130,12 @@ Rectangle{ Layout.preferredWidth: 40 Layout.preferredHeight: 30 iconSource : d.isRestore ? FluentIcons.ChromeRestore : FluentIcons.ChromeMaximize - color: hovered ? maximizeHoverColor : maximizeNormalColor + color: { + if(pressed){ + return maximizePressColor + } + return hovered ? maximizeHoverColor : maximizeNormalColor + } Layout.alignment: Qt.AlignVCenter visible: d.resizable && !isMac && showMaximize radius: 0 @@ -142,7 +155,12 @@ Rectangle{ radius: 0 iconSize: 10 iconColor: hovered ? Qt.rgba(1,1,1,1) : control.textColor - color:hovered ? closeHoverColor : closeNormalColor + color:{ + if(pressed){ + return closePressColor + } + return hovered ? closeHoverColor : closeNormalColor + } onClicked: closeClickListener() } } diff --git a/src/Qt5/imports/FluentUI/Controls/FluDivider.qml b/src/Qt5/imports/FluentUI/Controls/FluDivider.qml index a8e35aba..71adcffc 100644 --- a/src/Qt5/imports/FluentUI/Controls/FluDivider.qml +++ b/src/Qt5/imports/FluentUI/Controls/FluDivider.qml @@ -8,9 +8,8 @@ Rectangle { id:control color:Qt.rgba(0,0,0,0) height: spacing*2+separator.height - Rectangle{ + FluRectangle{ id:separator - clip: true color: FluTheme.dark ? Qt.rgba(80/255,80/255,80/255,1) : Qt.rgba(210/255,210/255,210/255,1) width:parent.width anchors.centerIn: parent diff --git a/src/Qt5/imports/FluentUI/Controls/FluTreeView.qml b/src/Qt5/imports/FluentUI/Controls/FluTreeView.qml index ad4f4dbf..d380b4e6 100644 --- a/src/Qt5/imports/FluentUI/Controls/FluTreeView.qml +++ b/src/Qt5/imports/FluentUI/Controls/FluTreeView.qml @@ -56,6 +56,8 @@ Item { return w } height: 30 + implicitWidth: width + implicitHeight: height function toggle(){ if(itemModel.isExpanded){ tree_model.collapse(rowIndex) @@ -63,33 +65,6 @@ Item { tree_model.expand(rowIndex) } } - Rectangle{ - anchors.fill: parent - radius: 4 - anchors.leftMargin: 6 - anchors.rightMargin: 6 - border.color: d.hitColor - border.width: d.dragIndex === rowIndex ? 1 : 0 - color: { - if(FluTheme.dark){ - if(isCurrent){ - return Qt.rgba(1,1,1,0.03) - } - if(item_mouse.containsMouse){ - return Qt.rgba(1,1,1,0.03) - } - return Qt.rgba(0,0,0,0) - }else{ - if(isCurrent){ - return Qt.rgba(0,0,0,0.06) - } - if(item_mouse.containsMouse){ - return Qt.rgba(0,0,0,0.03) - } - return Qt.rgba(0,0,0,0) - } - } - } Rectangle{ width: 3 height: 18 @@ -104,6 +79,7 @@ Item { } MouseArea{ id:item_mouse + property point clickPos: Qt.point(0,0) anchors.fill: parent drag.target:control.draggable ? loader_container : undefined hoverEnabled: true @@ -116,15 +92,18 @@ Item { loader_container.sourceComponent = com_item_container } } - onPressed: { - loader_container.itemControl = itemControl - loader_container.itemModel = itemModel - var cellPosition = item_container.mapToItem(table_view, 0, 0) - loader_container.width = item_container.width - loader_container.height = item_container.height - loader_container.x = table_view.contentX + cellPosition.x - loader_container.y = table_view.contentY + cellPosition.y - } + onPressed: (mouse)=>{ + clickPos = Qt.point(mouse.x,mouse.y) + console.debug(clickPos) + loader_container.itemControl = itemControl + loader_container.itemModel = itemModel + var cellPosition = item_container.mapToItem(table_view, 0, 0) + loader_container.width = item_container.width + loader_container.height = item_container.height + loader_container.x = table_view.contentX + cellPosition.x + loader_container.y = table_view.contentY + cellPosition.y + + } onClicked: { d.current = itemModel } @@ -151,6 +130,7 @@ Item { var index = Math.round(y/30) if(index !== d.dragIndex){ d.dropIndex = index + tree_model.refreshNode(rowIndex) }else{ d.dropIndex = -1 } @@ -174,10 +154,11 @@ Item { anchors{ left: parent.left leftMargin: { + var count = itemModel.depth+1 if(itemModel.hasChildren()){ - return 30*(itemModel.depth+1) - 8 + return 30*count - 8 } - return 30*(itemModel.depth+1) + 18 + return 30*count + 18 } right: parent.right rightMargin: 10 @@ -202,10 +183,10 @@ Item { } } } - Rectangle{ + FluRectangle{ width: 1 color: control.lineColor - visible: itemModel.depth !== 0 && control.showLine && !itemModel.hasChildren() + visible: control.showLine && isItemLoader && itemModel.depth !== 0 && !itemModel.hasChildren() height: itemModel.hideLineFooter() ? parent.height/2 : parent.height anchors{ top: parent.top @@ -213,10 +194,10 @@ Item { rightMargin: -9 } } - Rectangle{ + FluRectangle{ height: 1 color: control.lineColor - visible: itemModel.depth !== 0 && control.showLine && !itemModel.hasChildren() + visible: control.showLine && isItemLoader && itemModel.depth !== 0 && !itemModel.hasChildren() width: 18 anchors{ right: layout_row.left @@ -226,11 +207,11 @@ Item { } Repeater{ model: Math.max(itemModel.depth-1,0) - delegate: Rectangle{ + delegate: FluRectangle{ required property int index width: 1 color: control.lineColor - visible: itemModel.depth !== 0 && control.showLine + visible: control.showLine && isItemLoader && itemModel.depth !== 0 && itemModel.hasNextNodeByIndex(index) anchors{ top:parent.top bottom: parent.bottom @@ -239,6 +220,33 @@ Item { } } } + Rectangle{ + anchors.fill: parent + radius: 4 + anchors.leftMargin: 6 + anchors.rightMargin: 6 + border.color: d.hitColor + border.width: d.dragIndex === rowIndex ? 1 : 0 + color: { + if(FluTheme.dark){ + if(isCurrent){ + return Qt.rgba(1,1,1,0.03) + } + if(item_mouse.containsMouse){ + return Qt.rgba(1,1,1,0.03) + } + return Qt.rgba(0,0,0,0) + }else{ + if(isCurrent){ + return Qt.rgba(0,0,0,0.06) + } + if(item_mouse.containsMouse){ + return Qt.rgba(0,0,0,0.03) + } + return Qt.rgba(0,0,0,0) + } + } + } RowLayout{ id:layout_row anchors.verticalCenter: parent.verticalCenter @@ -310,14 +318,9 @@ Item { property var itemControl: item_control property var itemModel: modelData property int rowIndex: row + property bool isItemLoader: true id:item_loader_container - width: item.width - height: item.height - sourceComponent: { - if(modelData) - return com_item_container - return undefined - } + sourceComponent: com_item_container } } } @@ -326,6 +329,7 @@ Item { id:loader_container property var itemControl property var itemModel + property bool isItemLoader: false } } function count(){ diff --git a/src/Qt6/imports/FluentUI/Controls/FluDivider.qml b/src/Qt6/imports/FluentUI/Controls/FluDivider.qml index 996b7a12..56f0295b 100644 --- a/src/Qt6/imports/FluentUI/Controls/FluDivider.qml +++ b/src/Qt6/imports/FluentUI/Controls/FluDivider.qml @@ -8,9 +8,8 @@ Rectangle { id:control color:Qt.rgba(0,0,0,0) height: spacing*2+separator.height - Rectangle{ + FluRectangle{ id:separator - clip: true color: FluTheme.dark ? Qt.rgba(80/255,80/255,80/255,1) : Qt.rgba(210/255,210/255,210/255,1) width:parent.width anchors.centerIn: parent diff --git a/src/Qt6/imports/FluentUI/Controls/FluTreeView.qml b/src/Qt6/imports/FluentUI/Controls/FluTreeView.qml index f7a741df..d7f250d8 100644 --- a/src/Qt6/imports/FluentUI/Controls/FluTreeView.qml +++ b/src/Qt6/imports/FluentUI/Controls/FluTreeView.qml @@ -56,6 +56,8 @@ Item { return w } height: 30 + implicitWidth: width + implicitHeight: height function toggle(){ if(itemModel.isExpanded){ tree_model.collapse(rowIndex) @@ -203,7 +205,7 @@ Item { } } } - Rectangle{ + FluRectangle{ width: 1 color: control.lineColor visible: itemModel.depth !== 0 && control.showLine && !itemModel.hasChildren() @@ -214,7 +216,7 @@ Item { rightMargin: -9 } } - Rectangle{ + FluRectangle{ height: 1 color: control.lineColor visible: itemModel.depth !== 0 && control.showLine && !itemModel.hasChildren() @@ -227,7 +229,7 @@ Item { } Repeater{ model: Math.max(itemModel.depth-1,0) - delegate: Rectangle{ + delegate: FluRectangle{ required property int index width: 1 color: control.lineColor @@ -312,23 +314,7 @@ Item { property var itemModel: modelData property int rowIndex: row id:item_loader_container - width:{ - if(item){ - return item.width - } - return 1 - } - height: { - if(item){ - return item.height - } - return 1 - } - sourceComponent: { - if(modelData) - return com_item_container - return undefined - } + sourceComponent: com_item_container } } }