Resolve "Implement basic functionality"

Closes #1 (closed) Closes #2 (closed) Closes #3 (closed) Closes #4 (closed) Closes #5 (closed) Closes #6 (closed)

src/DragGrid.vue

+<template>
+  <interact
+    droppable
+    @dropmove="disabled || loading ? undefined : handleDragOver($event)"
+    @drop.prevent="disabled || loading ? undefined : handleDrop($event)"
+    @dragleave="$refs.highlightContainer.style.display = 'none'"
+    class="grid"
+  >
+    <template v-if="loading">
+      <template v-for="loader in cols * rows">
+        <div :key="loader">
+          <slot name="loader"></slot>
+        </div>
+      </template>
+    </template>
+
+    <template v-else>
+      <div class="highlight-container" ref="highlightContainer">
+        <slot name="highlight">
+          <div class="highlight"></div>
+        </slot>
+      </div>
+
+      <DragContainer
+        v-for="item in value"
+        :key="item.key"
+        :drag-i-d="item.key"
+        :x="getInt('x', item)"
+        :y="getInt('y', item)"
+        :w="getInt('w', item)"
+        :h="getInt('h', item)"
+        :data="getObject('data', item)"
+        :context="context"
+        :grid-id="gridId"
+        :disabled="disabled || loading || item.disabled"
+      >
+        <slot v-bind="transformItem(item)" :raw-item="item" name="item">
+          <dl>
+            <dt>Key</dt>
+            <dd>{{ item.key }}</dd>
+            <dt>Position</dt>
+            <dd>{{ item.x }}, {{ item.y }}</dd>
+            <dt>Size</dt>
+            <dd>{{ item.w }} × {{ item.h }}</dd>
+            <dt>Data</dt>
+            <dd>{{ item.data }}</dd>
+          </dl>
+        </slot>
+      </DragContainer>
+      <template v-for="disabledField in disabledFields">
+        <GridItem
+          class="disabledField"
+          :x="disabledField.x"
+          :y="disabledField.y"
+          :key="disabledField.x + '|' + disabledField.y"
+        >
+          <slot name="disabledField"></slot>
+        </GridItem>
+      </template>
+      <slot></slot>
+    </template>
+  </interact>
+</template>
+
+<script>
+import DragContainer from "./DragContainer.vue";
+import { v4 as uuidv4 } from "uuid";
+import GridItem from "./GridItem.vue";
+
+export default {
+  name: "DragGrid",
+  components: {
+    GridItem,
+    DragContainer,
+  },
+  emits: ["input", "itemChanged"],
+  props: {
+    rows: {
+      type: Number,
+      required: true,
+    },
+    cols: {
+      type: Number,
+      required: true,
+    },
+    posValidation: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
+    validateElement: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
+    value: {
+      type: Array,
+      required: true,
+    },
+    context: {
+      type: String,
+      required: false,
+      default: uuidv4,
+    },
+    gridId: {
+      type: String,
+      required: false,
+      default: uuidv4,
+    },
+    noHighlight: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    disabledFields: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  methods: {
+    positionAllowed(x, y, key) {
+      if (x < 0 || y < 0) return false;
+      if (x > this.cols) return false;
+      if (y > this.rows) return false;
+
+      if (
+        this.disabledFields.filter((field) => field.x === x && field.y === y)
+          .length > 0
+      ) {
+        // Field is disabled
+        return false;
+      }
+
+      for (let item of this.value) {
+        if (key === item.key) continue;
+        if (
+          x >= this.getInt("x", item) &&
+          x < this.getInt("x", item) + this.getInt("w", item)
+        ) {
+          if (
+            y >= this.getInt("y", item) &&
+            y < this.getInt("y", item) + this.getInt("h", item)
+          ) {
+            return false;
+          }
+        }
+      }
+      if (this.posValidation) return this.posValidation(x, y, key);
+      return true;
+    },
+    handleDragOver(event) {
+      let data = event.relatedTarget.dataset.transfer;
+      if (!data) return;
+      let element = JSON.parse(data);
+      let coords = this.getCoords(
+        event.dragEvent.client.x - element.mouseX,
+        event.dragEvent.client.y - element.mouseY
+      );
+
+      if (element.context !== this.context || this.noHighlight) {
+        this.$refs.highlightContainer.style.display = "none";
+        return;
+      }
+
+      let newPositionValid = true;
+
+      for (let x = coords.x; x < coords.x + element.w; x++) {
+        for (let y = coords.y; y < coords.y + element.h; y++) {
+          newPositionValid = this.positionAllowed(x, y, element.key);
+          if (!newPositionValid) break;
+        }
+        if (!newPositionValid) break;
+      }
+
+      if (!newPositionValid) {
+        this.$refs.highlightContainer.style.display = "none";
+        return;
+      }
+
+      this.$refs.highlightContainer.style.display = "block";
+      this.$refs.highlightContainer.style.gridColumnStart = coords.x + "";
+      this.$refs.highlightContainer.style.gridRowStart = coords.y + "";
+      this.$refs.highlightContainer.style.gridColumnEnd = "span " + element.w;
+      this.$refs.highlightContainer.style.gridRowEnd = "span " + element.h;
+    },
+    handleDrop(event) {
+      this.$refs.highlightContainer.style.display = "none";
+      let data = event.relatedTarget.dataset.transfer;
+      if (!data) return;
+      let element = JSON.parse(data);
+
+      if (this.validateElement) this.validateElement(element);
+
+      if (element.context !== this.context) {
+        return;
+      }
+
+      let coords = this.getCoords(
+        event.dragEvent.client.x - element.mouseX,
+        event.dragEvent.client.y - element.mouseY
+      );
+
+      let newPositionValid = true;
+
+      for (let x = coords.x; x < coords.x + element.w; x++) {
+        for (let y = coords.y; y < coords.y + element.h; y++) {
+          newPositionValid = this.positionAllowed(x, y, element.key);
+          if (!newPositionValid) break;
+        }
+        if (!newPositionValid) break;
+      }
+
+      if (!newPositionValid) return;
+
+      element.x = coords.x;
+      element.y = coords.y;
+
+      try {
+        let valueCopy = structuredClone(this.value);
+
+        let index = valueCopy.findIndex((i) => {
+          return i.key === element.key;
+        });
+        if (index >= 0) valueCopy.splice(index, 1);
+
+        let elementCopy = structuredClone(element);
+
+        elementCopy.context = undefined;
+        elementCopy.originGridId = undefined;
+        elementCopy.mouseX = undefined;
+        elementCopy.mouseY = undefined;
+
+        valueCopy.push(elementCopy);
+        this.$emit("input", valueCopy);
+      } catch (e) {
+        if (e.code === DOMException.DATA_CLONE_ERR) {
+          // We use functions for properties → we can't clone; only emit `item-changed` event
+          console.debug(
+            "Grid couldn't be cloned, please listen to the `item-changed` event and handle changes yourself."
+          );
+        } else {
+          throw e;
+        }
+      }
+
+      element.gridId = this.gridId;
+
+      this.$emit("itemChanged", element);
+    },
+    clamp: (min, num, max) => Math.min(Math.max(num, min), max),
+    getCoords(x, y) {
+      let rect = this.$el.getBoundingClientRect();
+      return {
+        x: this.clamp(
+          1,
+          Math.ceil((x - rect.x) / (rect.width / this.cols)),
+          this.cols
+        ),
+        y: this.clamp(
+          1,
+          Math.ceil((y - rect.y) / (rect.height / this.rows)),
+          this.rows
+        ),
+      };
+    },
+    getInt(property, item) {
+      let val = item[property] || 1;
+      return val instanceof Function ? val(this.gridData) : parseInt(val);
+    },
+    getObject(property, item) {
+      let val = item[property] || {};
+      return val instanceof Function ? val(this.gridData) : val;
+    },
+    transformItem(item) {
+      let newItem = { key: item.key };
+      newItem.x = this.getInt("x", item);
+      newItem.y = this.getInt("y", item);
+      newItem.w = this.getInt("w", item);
+      newItem.h = this.getInt("h", item);
+      newItem.data = this.getObject("data", item);
+      return newItem;
+    },
+  },
+  computed: {
+    gridData() {
+      return {
+        gridId: this.gridId,
+        context: this.context,
+      };
+    },
+  },
+};
+</script>
+
+<style scoped>
+.highlight {
+  background: darkgrey;
+  border: grey dashed 2px;
+  width: 100%;
+  height: 100%;
+}
+
+.highlight-container {
+  display: none;
+  transition: all 2s ease-in-out;
+  pointer-events: none;
+  user-select: none;
+  width: 100%;
+  height: 100%;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(v-bind(cols), 1fr);
+  grid-template-rows: repeat(v-bind(rows), 1fr);
+  width: 100%;
+  height: 100%;
+  min-width: 100px;
+  min-height: 100px;
+  gap: 1em;
+  touch-action: none;
+  isolation: isolate;
+}
+</style>