Commit e73c0251 authored by Yuya Nishihara's avatar Yuya Nishihara
Browse files

reimplement tile without using SplitView

parent ff5b19b4
import QtQuick 2.15
import QtQuick.Controls 2.15
Control {
id: root
property int majorOrientation: Qt.Horizontal
property int majorCount: 2
property var minorCounts: [5, 5]
property var _majorPositions: {
let positions = [];
for (let i = 0; i < majorCount; ++i) {
positions.push(i / majorCount);
}
return positions;
}
property var _minorPositions: {
let count = Math.max(...minorCounts);
let positions = [];
for (let i = 0; i < count; ++i) {
positions.push(i / count);
}
return positions;
}
property alias model: contentRepeater.model
property Component delegate
contentItem: Item {
id: contentArea
Item {
anchors.fill: parent
Repeater {
id: contentRepeater
Item {
id: tile
// TODO: how to propagate required properties from delegate
required property int index
required property string name
required property int tileIndex
readonly property int majorIndex: {
let count = 0;
for (let i = 0; i < root.minorCounts.length; ++i) {
count += root.minorCounts[i];
if (tileIndex < count)
return i;
}
return root.minorCounts.length;
}
readonly property int minorIndex: {
tileIndex - root.minorCounts.slice(0, majorIndex).reduce((a, b) => a + b, 0)
}
// TODO: handle out-of-range index
readonly property real _majorPosition: root._majorPositions[majorIndex]
readonly property real _minorPosition: root._minorPositions[minorIndex]
readonly property real _majorSize: {
(majorIndex + 1 < root.majorCount ? root._majorPositions[majorIndex + 1] : 1) - _majorPosition
}
readonly property real _minorSize: {
let n = minorIndex < root.minorCounts.length ? root.minorCounts[minorIndex] : 0;
return (minorIndex + 1 < n ? root._minorPositions[minorIndex + 1] : 1) - _minorPosition;
}
x: contentArea.width * (root.majorOrientation === Qt.Horizontal ? _majorPosition : _minorPosition)
y: contentArea.height * (root.majorOrientation === Qt.Horizontal ? _minorPosition : _majorPosition)
width: contentArea.width * (root.majorOrientation === Qt.Horizontal ? _majorSize : _minorSize)
height: contentArea.height * (root.majorOrientation === Qt.Horizontal ? _minorSize : _majorSize)
visible: tileIndex >= 0 && majorIndex < root.majorCount && minorIndex < root.minorCounts[majorIndex]
Component.onCompleted: {
root.delegate.createObject(tile, {
name: Qt.binding(() => tile.name),
index: Qt.binding(() => tile.index),
tileIndex: Qt.binding(() => tile.tileIndex),
});
}
// XXX
Rectangle {
anchors.fill: parent
z: -1
border.width: 1
border.color: "gray"
color: "transparent"
}
}
}
}
}
}
......@@ -18,22 +18,16 @@ Window {
ListModel {
id: tileListModel
function reorder() {
// TODO: will be rewritten to remap everything and emit layoutChanged.
let totalCount = root.leftCount + root.rightCount;
for (let i = 0; i < totalCount; ++i) {
if (get(i).tileIndex === i)
function setTileIndex(index, tileIndex) {
if (get(index).tileIndex === tileIndex)
return;
for (let i = 0; i < count; ++i) {
if (get(i).tileIndex !== tileIndex)
continue;
for (let j = i + 1; j < count; ++j) {
if (get(j).tileIndex !== i)
continue;
move(j, i, 1);
break;
}
if (get(i).tileIndex !== i) {
insert(i, {name: "", tileIndex: -1}); // spacer
}
setProperty(i, "tileIndex", -1);
break;
}
setProperty(index, "tileIndex", tileIndex);
}
ListElement { name: "A"; tileIndex: 0 }
......@@ -48,49 +42,22 @@ Window {
ListElement { name: "J"; tileIndex: 9 }
}
DelegateModel {
id: tileContentModel
model: tileListModel
delegate: Package {
id: tile
required property int index
required property string name
required property int tileIndex
readonly property int column: {
if (index < root.leftCount) {
return 0;
} else if (index < root.leftCount + root.rightCount) {
return 1;
} else {
return -1;
}
}
Pane {
id: leftPane
Package.name: "left"
visible: tile.column === 0
}
RowLayout {
anchors.fill: parent
Pane {
id: rightPane
Package.name: "right"
visible: tile.column === 1
}
TileView {
id: tileView
Layout.fillWidth: true
Layout.fillHeight: true
majorOrientation: Qt.Horizontal
model: tileListModel
delegate: GridLayout {
id: tile
Pane {
id: stacked
Package.name: "stacked"
}
required property int index
required property string name
required property int tileIndex
GridLayout {
parent: {
if (tile.tileIndex < 0)
return stacked.contentItem;
return [stacked.contentItem, leftPane.contentItem, rightPane.contentItem][tile.column + 1]
}
anchors.fill: parent
columns: 2
Component.onCompleted: {
dummyField.text = tile.name + ": " + tile.index;
......@@ -109,9 +76,7 @@ Window {
value: tile.tileIndex
onValueModified: {
dummyField.text += " " + value;
tileListModel.setProperty(value, "tileIndex", -1);
tileListModel.setProperty(tile.index, "tileIndex", value);
tileListModel.reorder();
tileListModel.setTileIndex(tile.index, value);
}
}
......@@ -122,30 +87,6 @@ Window {
}
}
}
}
RowLayout {
anchors.fill: parent
SplitView {
Layout.fillWidth: true
Layout.fillHeight: true
orientation: Qt.Horizontal
SplitView {
SplitView.preferredWidth: parent.width / 2
orientation: Qt.Vertical
Repeater {
model: tileContentModel.parts.left
}
}
SplitView {
SplitView.preferredWidth: parent.width / 2
orientation: Qt.Vertical
Repeater {
model: tileContentModel.parts.right
}
}
}
Pane {
Layout.fillHeight: true
......@@ -157,35 +98,69 @@ Window {
anchors.top: parent.top
columns: 2
Label { text: "leftCount:" }
Label { text: "majorCount:" }
SpinBox {
editable: true
value: tileView.majorCount
onValueModified: {
tileView.majorCount = value;
}
}
Label { text: "minorCount[0]:" }
SpinBox {
editable: true
value: root.leftCount
value: tileView.minorCounts[0]
onValueModified: {
root.leftCount = value;
let counts = tileView.minorCounts;
counts[0] = value;
tileView.minorCounts = counts;
}
}
Label { text: "rightCount:" }
Label { text: "minorCount[1]:" }
SpinBox {
editable: true
value: root.rightCount
value: tileView.minorCounts[1]
onValueModified: {
root.rightCount = value;
let counts = tileView.minorCounts;
counts[1] = value;
tileView.minorCounts = counts;
}
}
Label {
Layout.columnSpan: 2
font.bold: true
text: "stacked tiles:"
text: "tiles:"
}
ColumnLayout {
Layout.fillWidth: true
Layout.columnSpan: 2
Repeater {
model: tileContentModel.parts.stacked
model: tileListModel
RowLayout {
id: stackedItem
required property int index
required property string name
required property int tileIndex
Label {
Layout.preferredWidth: 50
text: stackedItem.name
}
SpinBox {
editable: true
from: -1
value: stackedItem.tileIndex
onValueModified: {
tileListModel.setTileIndex(stackedItem.index, value);
}
}
}
}
}
}
......
<RCC>
<qresource prefix="/">
<file>TileView.qml</file>
<file>main.qml</file>
</qresource>
</RCC>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment