Skip to content

Commit 8a3d81e

Browse files
wjyrichwjyrich
committed
fix: test animation with drag and drop/
1 parent f26b5ff commit 8a3d81e

3 files changed

Lines changed: 205 additions & 14 deletions

File tree

‎qml/FolderGridViewPopup.qml‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -541,9 +541,15 @@ Popup {
541541
}
542542

543543
component DelegateDropArea: DropArea {
544+
property bool isDragHover: false
545+
544546
onEntered: function(drag) {
545547
root.onDragEnter(this)
546-
folderDragApplyTimer.dragId = drag.getDataAsString("text/x-dde-launcher-dnd-desktopId")
548+
let dragId = drag.getDataAsString("text/x-dde-launcher-dnd-desktopId")
549+
if (dragId !== model.desktopId) {
550+
isDragHover = true
551+
}
552+
folderDragApplyTimer.dragId = dragId
547553
folderDragApplyTimer.restart()
548554
}
549555
onPositionChanged: function(drag) {
@@ -558,6 +564,7 @@ Popup {
558564
}
559565
}
560566
onExited: {
567+
isDragHover = false
561568
root.onDragExit(this)
562569
folderDragApplyTimer.stop()
563570
folderDragApplyTimer.dragId = ""
@@ -566,6 +573,7 @@ Popup {
566573
root.onDragExit(this)
567574
}
568575
onDropped: function(drop) {
576+
isDragHover = false
569577
let dragId = drop.getDataAsString("text/x-dde-launcher-dnd-desktopId")
570578
if (dragId === "") {
571579
return
@@ -619,6 +627,7 @@ Popup {
619627
id: innerItem
620628
anchors.fill: parent
621629
dndEnabled: true
630+
isDragHover: parent.isDragHover
622631
displayFont: isWindowedMode ? DTK.fontManager.t9 : DTK.fontManager.t6
623632
Drag.mimeData: Helper.generateDragMimeData(model.desktopId)
624633
visible: dndItem.currentlyDraggedId !== model.desktopId

‎qml/FullscreenFrame.qml‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,16 @@ InputEventItem {
3333
// ----------- Drag and Drop related functions START -----------
3434
Label {
3535
property string currentlyDraggedId
36+
property string currentlyDraggedIconName
37+
38+
property bool mergeAnimPending: false
39+
//被拖拽图标
40+
property string mergeAnimTargetIcon: ""
41+
//放下的图标或文件夹
42+
property string mergeAnimTargetIcon2: ""
43+
// 鼠标松手位置（窗口坐标）
44+
property real mergeAnimStartX: 0
45+
property real mergeAnimStartY: 0
3646

3747
signal dragEnded()
3848

@@ -45,6 +55,7 @@ InputEventItem {
4555
text = "Dragging " + currentlyDraggedId
4656
} else {
4757
currentlyDraggedId = ""
58+
currentlyDraggedIconName = ""
4859
dragEnded()
4960
}
5061
}
@@ -547,21 +558,32 @@ InputEventItem {
547558
delegate: DropArea {
548559
Keys.forwardTo: [iconItemDelegate]
549560

561+
property bool isDragHover: false
562+
550563
visible: !folderGridViewPopup.visible || folderGridViewPopup.currentFolderId !== Number(model.desktopId.replace("internal/folders/", ""))
551564
width: gridViewContainer.cellWidth
552565
height: gridViewContainer.cellHeight
553566
onEntered: function (drag) {
554567
if (folderGridViewPopup.opened) {
555568
folderGridViewPopup.close()
556569
}
557-
dndDropEnterTimer.dragId = drag.getDataAsString("text/x-dde-launcher-dnd-desktopId")
570+
let dragId = drag.getDataAsString("text/x-dde-launcher-dnd-desktopId")
571+
if (dragId !== model.desktopId) {
572+
isDragHover = true
573+
}
574+
dndDropEnterTimer.dragId = dragId
558575
dndDropEnterTimer.restart()
559576
}
560577
onExited: {
578+
isDragHover = false
561579
dndDropEnterTimer.stop()
562580
dndDropEnterTimer.dragId = ""
563581
}
582+
onPositionChanged: {
583+
console.warn("drag position: (" + drag.x + "," + drag.y + ") in item " + model.desktopId)
584+
}
564585
onDropped: function (drop) {
586+
isDragHover = false
565587
dndDropEnterTimer.stop()
566588
dndDropEnterTimer.dragId = ""
567589
let dragId = drop.getDataAsString("text/x-dde-launcher-dnd-desktopId")
@@ -572,6 +594,17 @@ InputEventItem {
572594
} else if (drop.x > (width - sideOpPadding)) {
573595
op = 1
574596
}
597+
if (op === 0) {
598+
dndItem.mergeAnimTargetIcon = dndItem.currentlyDraggedIconName
599+
dndItem.mergeAnimTargetIcon2 = !folderIcons ? iconItemDelegate.iconSource : ""
600+
let cursorScene = mapToItem(null, drop.x, drop.y)
601+
let hs = dndItem.Drag.hotSpot
602+
console.warn("mergeAnimStart cursorScene=(" + cursorScene.x + "," + cursorScene.y + ")"
603+
+ " hotSpot=(" + hs.x + "," + hs.y + ")")
604+
dndItem.mergeAnimStartX = cursorScene.x - hs.x
605+
dndItem.mergeAnimStartY = cursorScene.y - hs.y
606+
dndItem.mergeAnimPending = true
607+
}
575608
dropOnItem(dragId, model.desktopId, op)
576609
proxyModel.sort(0)
577610
}
@@ -606,6 +639,7 @@ InputEventItem {
606639
}
607640
enabled: !folderGridViewPopup.visible
608641
dndEnabled: !folderGridViewPopup.opened
642+
isDragHover: parent.isDragHover
609643
Drag.mimeData: Helper.generateDragMimeData(model.desktopId)
610644
visible: dndItem.currentlyDraggedId !== model.desktopId
611645
iconSource: (iconName && iconName !== "") ? iconName : "application-x-desktop"

‎qml/IconItemDelegate.qml‎

Lines changed: 160 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ Control {
2828

2929
property string iconSource
3030
property bool dndEnabled: false
31+
property bool isDragHover: false
3132
readonly property bool isWindowedMode: LauncherController.currentFrame === "WindowedFrame"
3233
property alias displayFont: iconItemLabel.font
3334
property real iconScaleFactor: 1.0
@@ -57,6 +58,14 @@ Control {
5758
ColorSelector.pressed: false
5859
ColorSelector.family: D.Palette.CrystalColor
5960
flat: true
61+
62+
Rectangle {
63+
anchors.fill: parent
64+
color: "transparent"
65+
border.width: 2
66+
border.color: "blue"
67+
z: 999
68+
}
6069
contentItem: Column {
6170
anchors.fill: parent
6271

@@ -71,6 +80,22 @@ Control {
7180
height: width
7281
anchors.horizontalCenter: parent.horizontalCenter
7382

83+
Rectangle {
84+
id: dragHoverBackground
85+
visible: root.isDragHover
86+
anchors.centerIn: parent
87+
width: (parent.width + 16) * root.iconScaleFactor
88+
height: (parent.height + 16) * root.iconScaleFactor
89+
radius: isWindowedMode ? 10 : 18
90+
color: Qt.rgba(1, 1, 1, 0.25)
91+
}
92+
93+
// Rectangle {
94+
// anchors.fill: parent
95+
// border.width: 1
96+
// border.color: "red"
97+
// }
98+
7499
Loader {
75100
id: iconLoader
76101
anchors.fill: parent
@@ -91,6 +116,7 @@ Control {
91116
// Item will be hidden by checking the dndItem.currentlyDraggedId property. We assign the value
92117
// to that property here
93118
dndItem.currentlyDraggedId = target.Drag.mimeData["text/x-dde-launcher-dnd-desktopId"]
119+
dndItem.currentlyDraggedIconName = root.iconSource
94120
dndItem.Drag.hotSpot = target.Drag.hotSpot
95121
dndItem.Drag.mimeData = target.Drag.mimeData
96122

@@ -119,35 +145,149 @@ Control {
119145
id: folderComponent
120146

121147
Rectangle {
148+
id: ddd
122149
anchors.fill: parent
123150
color: "#26FFFFFF"
124151
radius: 12
125152

126-
GridLayout {
127-
id: folderGrid
128-
anchors.fill: parent
129-
rows: 2
130-
columns: 2
131-
anchors.margins: 8
132-
columnSpacing: 8
133-
rowSpacing: 8
153+
property real itemWidth: (width - (3 * 8)) / 2
154+
property real itemHeight: (height - (3 * 8)) / 2
155+
156+
function getItemX(index) {
157+
let col = index % 2
158+
let ret = (col + 1) * 8 + col * itemWidth
159+
console.warn("getItemX for index", index, "itemWidth", itemWidth,
160+
"ret", ret)
161+
return ret
162+
}
163+
164+
function getItemY(index) {
165+
let row = Math.floor(index / 2)
166+
let ret = (row + 1) * 8 + row * itemHeight
167+
console.warn("getItemY for index", index, "itemHeight", itemHeight, "ret", ret)
168+
return ret
169+
}
170+
Rectangle {
171+
width: 100
172+
height: 100
173+
color: "red"
174+
id: testRect
175+
scale: 1.5
176+
x: 93
177+
y: 95
178+
visible:true
179+
}
180+
181+
// GridLayout {
182+
// id: folderGrid
183+
// anchors.fill: parent
184+
// rows: 2
185+
// columns: 2
186+
// anchors.margins: 8
187+
// columnSpacing: 8
188+
// rowSpacing: 8
134189

135190
Repeater {
136191
model: icons
137192

138193
DciIcon {
194+
id: folderIcon
139195
Layout.fillHeight: true
140196
Layout.fillWidth: true
141197
Layout.alignment: Qt.AlignTop | Qt.AlignLeft
142198

143199
// 添加最大高度限制，确保图标高度一致
144200
Layout.maximumHeight: Math.max(0, parent.height / 2 - folderGrid.rowSpacing / 2)
145201

202+
x: ddd.getItemX(index)
203+
y: ddd.getItemY(index)
204+
205+
width: ddd.itemWidth
206+
height: ddd.itemHeight
207+
146208
name: modelData
147-
sourceSize: Qt.size(root.maxIconSizeInFolder, root.maxIconSizeInFolder)
148-
scale: (parent.width / 2 / root.maxIconSizeInFolder) * root.iconScaleFactor
209+
property var maxSize: Math.min(root.maxIconSizeInFolder, Math.min(width, height))
210+
sourceSize: Qt.size(Math.min(width, root.maxIconSizeInFolder), Math.min(height, root.maxIconSizeInFolder))
211+
scale: (parent.width / 2 / maxSize) * root.iconScaleFactor * introScale
212+
213+
onSourceSizeChanged: {
214+
console.warn("sourceSize changed for index", index, "new sourceSize", sourceSize,
215+
"maxSize", maxSize, "width", width, "height", height)
216+
}
217+
property real introScale: 1.0
218+
149219
palette: DTK.makeIconPalette(root.palette)
150220
theme: ApplicationHelper.DarkType
221+
222+
Rectangle {
223+
visible: false
224+
anchors.fill: parent
225+
border.width: 3
226+
border.color: "red"
227+
color: "transparent"
228+
z: 999
229+
}
230+
231+
// 位移动画属性
232+
property real introTranslateX: 0
233+
property real introTranslateY: 0
234+
ParallelAnimation {
235+
id: iconIntroAnim
236+
237+
NumberAnimation {
238+
target: folderIcon
239+
property: "introScale"
240+
from: folderIcon.introScale; to: 1.0
241+
duration: 1000
242+
easing.type: Easing.OutCubic
243+
}
244+
NumberAnimation {
245+
target: folderIcon
246+
property: "x"
247+
from: folderIcon.introTranslateX; to: ddd.getItemX(index)
248+
duration: 1000
249+
easing.type: Easing.OutCubic
250+
}
251+
NumberAnimation {
252+
target: folderIcon
253+
property: "y"
254+
from: folderIcon.introTranslateY; to: ddd.getItemY(index)
255+
duration: 1000
256+
easing.type: Easing.OutCubic
257+
}
258+
259+
onFinished: {
260+
dndItem.mergeAnimPending = false
261+
dndItem.mergeAnimTargetIcon = ""
262+
dndItem.mergeAnimTargetIcon2 = ""
263+
}
264+
}
265+
266+
Component.onCompleted: {
267+
if (dndItem.mergeAnimPending
268+
&& modelData === dndItem.mergeAnimTargetIcon) {
269+
folderIcon.visible = false
270+
introScale = 2
271+
// introScale = 1
272+
Qt.callLater(function() {
273+
let localPos = ddd.mapFromItem(null,
274+
dndItem.mergeAnimStartX, dndItem.mergeAnimStartY)
275+
folderIcon.introTranslateX = localPos.x + folderIcon.width / 2 * (folderIcon.scale - 1)
276+
folderIcon.introTranslateY = localPos.y + folderIcon.height / 2 * (folderIcon.scale - 1)
277+
console.warn("local:", localPos, "introTranslateX" ,dndItem.mergeAnimStartX, "introTranslateY", dndItem.mergeAnimStartY)
278+
folderIcon.visible = true
279+
iconIntroAnim.start()
280+
testRect.x = localPos.x + testRect.width / 2 * (testRect.scale - 1)
281+
testRect.y = localPos.y + testRect.height / 2 * (testRect.scale - 1)
282+
testRect.z = 999
283+
})
284+
} else if (dndItem.mergeAnimPending
285+
&& modelData === dndItem.mergeAnimTargetIcon2) {
286+
introScale = 2
287+
// introScale = 1
288+
iconIntroAnim.start()
289+
}
290+
}
151291
}
152292
}
153293

@@ -163,7 +303,7 @@ Control {
163303
height: parent.height / 2
164304
}
165305
}
166-
}
306+
// }
167307
}
168308
}
169309

@@ -178,7 +318,14 @@ Control {
178318
scale: (parent.width / root.maxIconSize) * root.iconScaleFactor
179319
palette: DTK.makeIconPalette(root.palette)
180320
theme: ApplicationHelper.DarkType
181-
fillMode: Image.PreserveAspectFit
321+
322+
Rectangle {
323+
anchors.fill: parent
324+
color: "transparent"
325+
border.width:2
326+
border.color: "red"
327+
}
328+
// fillMode: Image.PreserveAspectFit
182329
}
183330
}
184331
}
@@ -193,6 +340,7 @@ Control {
193340
property bool singleRow: font.pixelSize > (isWindowedMode ? Helper.windowed.doubleRowMaxFontSize : Helper.fullscreen.doubleRowMaxFontSize)
194341
property bool isNewlyInstalled: model.lastLaunchedTime === 0 && model.installedTime !== 0
195342
id: iconItemLabel
343+
visible: !root.isDragHover
196344
text: isNewlyInstalled ? ("<font color='#669DFF' size='1' style='text-shadow: 0 0 1px rgba(255,255,255,0.1)'>●</font>&nbsp;&nbsp;" + root.text) : root.text
197345
textFormat: isNewlyInstalled ? Text.StyledText : Text.PlainText
198346
width: parent.width

0 commit comments

Comments
 (0)