z-bar-qt/Modules/Dock/Content.qml

pragma ComponentBehavior: Bound

import Quickshell
import QtQuick
import QtQml.Models
import qs.Modules.Dock.Parts
import qs.Components
import qs.Helpers
import qs.Config

Item {
	id: root

	readonly property int dockContentWidth: TaskbarApps.apps.reduce((sum, app, i) => sum + (app.appId === TaskbarApps.separatorId ? 1 : Config.dock.height) + (i > 0 ? dockRow.spacing : 0), 0)
	property bool dragActive: false
	property real dragHeight: Config.dock.height
	property real dragStartX: 0
	property real dragStartY: 0
	property real dragWidth: Config.dock.height
	property real dragX: 0
	property real dragY: 0
	property string draggedAppId: ""
	property var draggedModelData: null
	readonly property int padding: Appearance.padding.small
	required property var panels
	readonly property int rounding: Appearance.rounding.large
	required property ShellScreen screen
	required property PersistentProperties visibilities
	property var visualIds: []

	function beginVisualDrag(appId, modelData, item) {
		const pos = item.mapToItem(root, 0, 0);

		root.visualIds = TaskbarApps.apps.map(app => app.appId);
		root.draggedAppId = appId;
		root.draggedModelData = modelData;
		root.dragWidth = item.width;
		root.dragHeight = item.height;
		root.dragStartX = pos.x;
		root.dragStartY = pos.y;
		root.dragX = pos.x;
		root.dragY = pos.y;
		root.dragActive = true;
	}

	function endVisualDrag() {
		const ids = root.visualIds.slice();

		root.dragActive = false;
		root.draggedAppId = "";
		root.draggedModelData = null;
		root.visualIds = [];

		TaskbarApps.commitVisualOrder(ids);
	}

	function moveArrayItem(list, from, to) {
		const next = list.slice();
		const [item] = next.splice(from, 1);
		next.splice(to, 0, item);
		return next;
	}

	function previewVisualMove(from, hovered, before) {
		let to = hovered + (before ? 0 : 1);

		if (to > from)
			to -= 1;

		to = Math.max(0, Math.min(visualModel.items.count - 1, to));

		if (from === to)
			return;

		visualModel.items.move(from, to);
		root.visualIds = moveArrayItem(root.visualIds, from, to);
	}

	implicitHeight: Config.dock.height + root.padding * 2
	implicitWidth: root.dockContentWidth + root.padding * 2

	Component {
		id: dockDelegate

		DropArea {
			id: slot

			readonly property string appId: modelData.appId
			readonly property bool isSeparator: appId === TaskbarApps.separatorId
			required property var modelData
			property bool removing: false

			function previewReorder(drag) {
				const source = drag.source;
				if (!source || !source.appId || source.appId === appId)
					return;

				const from = source.visualIndex;
				const hovered = slot.DelegateModel.itemsIndex;

				if (from < 0 || hovered < 0)
					return;

				root.previewVisualMove(from, hovered, drag.x < width / 2);
			}

			function startDetachedRemove() {
				const p = mapToItem(removalLayer, 0, 0);

				removing = true;
				ListView.delayRemove = true;

				parent = removalLayer;
				x = p.x;
				y = p.y;

				removeAnim.start();
			}

			height: Config.dock.height
			transformOrigin: Item.Center
			width: isSeparator ? 1 : Config.dock.height
			z: removing ? 1 : 0

			ListView.onRemove: startDetachedRemove()
			onEntered: drag => previewReorder(drag)
			onPositionChanged: drag => previewReorder(drag)

			SequentialAnimation {
				id: removeAnim

				ParallelAnimation {
					Anim {
						property: "opacity"
						target: slot
						to: 0
					}

					Anim {
						property: "scale"
						target: slot
						to: 0.5
					}
				}

				ScriptAction {
					script: {
						slot.ListView.delayRemove = false;
					}
				}
			}

			DockAppButton {
				id: button

				anchors.centerIn: parent
				appListRoot: root
				appToplevel: modelData
				visibilities: root.visibilities
				visible: root.draggedAppId !== slot.appId
			}

			DragHandler {
				id: dragHandler

				enabled: !slot.isSeparator && !slot.removing
				grabPermissions: PointerHandler.CanTakeOverFromAnything
				target: null
				xAxis.enabled: true
				yAxis.enabled: false

				onActiveChanged: {
					if (active) {
						root.beginVisualDrag(slot.appId, slot.modelData, button);
					} else if (root.draggedAppId === slot.appId) {
						dragProxy.Drag.drop();
						root.endVisualDrag();
					}
				}
				onActiveTranslationChanged: {
					if (!active || root.draggedAppId !== slot.appId)
						return;

					root.dragX = root.dragStartX + activeTranslation.x;
					root.dragY = root.dragStartY + activeTranslation.y;
				}
			}
		}
	}

	DelegateModel {
		id: visualModel

		delegate: dockDelegate

		model: ScriptModel {
			objectProp: "appId"
			values: TaskbarApps.apps
		}
	}

	CustomListView {
		id: dockRow

		property bool enableAddAnimation: false

		anchors.left: parent.left
		anchors.margins: Appearance.padding.small
		anchors.top: parent.top
		boundsBehavior: Flickable.StopAtBounds
		height: Config.dock.height
		implicitWidth: root.dockContentWidth + Config.dock.height
		interactive: !root.dragActive
		model: visualModel
		orientation: ListView.Horizontal
		spacing: Appearance.padding.smaller

		add: Transition {
			ParallelAnimation {
				Anim {
					duration: dockRow.enableAddAnimation ? Appearance.anim.durations.normal : 0
					from: 0
					property: "opacity"
					to: 1
				}

				Anim {
					duration: dockRow.enableAddAnimation ? Appearance.anim.durations.normal : 0
					from: 0.5
					property: "scale"
					to: 1
				}
			}
		}
		displaced: Transition {
			Anim {
				duration: Appearance.anim.durations.small
				properties: "x,y"
			}
		}
		move: Transition {
			Anim {
				duration: Appearance.anim.durations.small
				properties: "x,y"
			}
		}
		remove: Transition {
			ParallelAnimation {
				Anim {
					property: "opacity"
					to: 0
				}

				Anim {
					property: "scale"
					to: 0.5
				}
			}
		}

		Component.onCompleted: {
			Qt.callLater(() => enableAddAnimation = true);
		}
	}

	Item {
		id: removalLayer

		anchors.fill: parent
		z: 9998
	}

	Item {
		id: dragProxy

		property string appId: root.draggedAppId
		property int visualIndex: root.visualIds.indexOf(root.draggedAppId)

		Drag.active: root.dragActive
		Drag.hotSpot.x: width / 2
		Drag.hotSpot.y: height / 2
		Drag.source: dragProxy
		height: root.dragHeight
		visible: root.dragActive && !!root.draggedModelData
		width: root.dragWidth
		x: root.dragX
		y: root.dragY
		z: 9999

		DockAppButton {
			anchors.fill: parent
			appListRoot: root
			appToplevel: root.draggedModelData
			enabled: false
			visibilities: root.visibilities
		}
	}
}