From 02a5a2404f2f87085bda892d7652c05c9424c831 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Mon, 13 Feb 2023 13:40:27 +0100
Subject: [PATCH] Create example for raw items
---
example/src/App.vue | 198 ++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 198 insertions(+)
diff --git a/example/src/App.vue b/example/src/App.vue
index 9c15922..6d08a39 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -132,6 +132,68 @@ import NumberCounter from "./components/NumberCounter.vue";
</template>
</drag-grid>
</div>
+ <div class="ttt-container">
+ <drag-grid
+ :value="colorGrid"
+ :cols="4"
+ :rows="4"
+ grid-id="gridA"
+ context="colors"
+ class="bordered color-grid"
+ @itemChanged="handleColorItemChange"
+ >
+ <template #item="item">
+ <div
+ :style="{
+ background: item.rawItem.getColor('red'),
+ color: 'white',
+ }"
+ >
+ {{ item.data.name }}
+ </div>
+ </template>
+ </drag-grid>
+ <drag-grid
+ :value="colorGrid"
+ :cols="4"
+ :rows="4"
+ grid-id="gridB"
+ context="colors"
+ class="bordered color-grid"
+ @itemChanged="handleColorItemChange"
+ >
+ <template #item="item">
+ <div
+ :style="{
+ background: item.rawItem.getColor('green'),
+ color: 'black',
+ }"
+ >
+ {{ item.data.name }}
+ </div>
+ </template>
+ </drag-grid>
+ <drag-grid
+ :value="colorGrid"
+ :cols="4"
+ :rows="4"
+ grid-id="gridC"
+ context="colors"
+ class="bordered color-grid"
+ @itemChanged="handleColorItemChange"
+ >
+ <template #item="item">
+ <div
+ :style="{
+ background: item.rawItem.getColor('red'),
+ color: 'white',
+ }"
+ >
+ {{ item.data.name }}
+ </div>
+ </template>
+ </drag-grid>
+ </div>
</div>
</template>
@@ -178,6 +240,48 @@ export default {
handleLessonDropInContainer(lesson) {
if (lesson.key === "lesson3") this.lesson3inPlan = false;
},
+ contains(array, search) {
+ return array.filter((obj) => obj === search).length > 0;
+ },
+ findAndRemove(array, element) {
+ let index = array.findIndex((i) => {
+ return i === element;
+ });
+ if (index >= 0) array.splice(index, 1);
+ },
+ handleColorItemChange(item) {
+ this[item.key].x = item.x;
+ this[item.key].y = item.y;
+
+ if (item.gridId === item.originGridId) return;
+
+ switch (item.gridId) {
+ case "gridA":
+ // Moved to gridA
+ this.findAndRemove(
+ item.originGridId === "gridB" ? this.placedB : this.placedC,
+ item.key
+ );
+ this.placedA.push(item.key);
+ break;
+ case "gridB":
+ // Moved to gridB
+ this.findAndRemove(
+ item.originGridId === "gridA" ? this.placedA : this.placedC,
+ item.key
+ );
+ this.placedB.push(item.key);
+ break;
+ case "gridC":
+ // Moved to gridC
+ this.findAndRemove(
+ item.originGridId === "gridB" ? this.placedB : this.placedA,
+ item.key
+ );
+ this.placedC.push(item.key);
+ break;
+ }
+ },
},
data() {
return {
@@ -234,6 +338,33 @@ export default {
outside: "This is lesson3 outside of the plan",
},
},
+ placedA: ["item1", "item2"],
+ placedB: ["item3", "item4"],
+ placedC: ["item5", "item6"],
+ item1: {
+ x: 1,
+ y: 1,
+ },
+ item2: {
+ x: 2,
+ y: 2,
+ },
+ item3: {
+ x: 1,
+ y: 1,
+ },
+ item4: {
+ x: 3,
+ y: 3,
+ },
+ item5: {
+ x: 2,
+ y: 4,
+ },
+ item6: {
+ x: 4,
+ y: 2,
+ },
};
},
computed: {
@@ -294,6 +425,67 @@ export default {
},
];
},
+ colorGrid() {
+ let items = ["item1", "item2", "item3", "item4", "item5", "item6"];
+ let greens = [
+ "green",
+ "seagreen",
+ "greenyellow",
+ "darkolivegreen",
+ "limegreen",
+ "palegreen",
+ ];
+ let reds = [
+ "darkred",
+ "indianred",
+ "orangered",
+ "red",
+ "maroon",
+ "firebrick",
+ ];
+ return items.map((itemName) => {
+ return {
+ key: itemName,
+ x: (grid) => {
+ if (grid.gridId === "gridA") {
+ return this.contains(this.placedA, itemName)
+ ? this[itemName].x
+ : -1;
+ } else if (grid.gridId === "gridB") {
+ return this.contains(this.placedB, itemName)
+ ? this[itemName].x
+ : -1;
+ } else {
+ // gridC
+ return this.contains(this.placedC, itemName) ? 0 : -1;
+ }
+ },
+ y: (grid) => {
+ if (grid.gridId === "gridA") {
+ return this.contains(this.placedA, itemName)
+ ? this[itemName].y
+ : -1;
+ } else if (grid.gridId === "gridB") {
+ return this.contains(this.placedB, itemName)
+ ? this[itemName].y
+ : -1;
+ } else {
+ // gridC
+ return this.contains(this.placedC, itemName) ? 0 : -1;
+ }
+ },
+ w: 1,
+ h: 1,
+ data: {
+ name: itemName,
+ },
+ getColor: (a) =>
+ a === "red"
+ ? reds[parseInt(itemName[4]) - 1]
+ : greens[parseInt(itemName[4]) - 1],
+ };
+ });
+ },
},
};
</script>
@@ -346,4 +538,10 @@ export default {
.bordered {
border: 2px solid grey;
}
+
+.color-grid {
+ min-height: 11em;
+ line-height: 2em;
+ box-sizing: content-box;
+}
</style>
--
GitLab