3 files changed, 193 insertions, 0 deletions
diff --git a/src/modules/Chit.ts b/src/modules/Chit.ts
new file mode 100644
index 0000000..823ecab
--- /dev/null
+++ b/src/modules/Chit.ts
@@ -0,0 +1,121 @@
+import { zi } from "@/consts";
+import Fridge from "./Fridge";
+
+export default class Chit {
+  public isMoving = false;
+
+  #top: number;
+  #left: number;
+  #width: number;
+  #height: number;
+  #div: HTMLDivElement;
+  #txt: string;
+  #fride: Fridge;
+
+  get nCol() { return "lightblue" }
+  get cCol() { return "lightpink" }
+
+  constructor(f: Fridge, data?: ChitFromDb) {
+    if (data) {
+      this.#top = data.top;
+      this.#left = data.left;
+      this.#txt = data.txt;
+      this.#height = data.height;
+      this.#width = data.width;
+    } else {
+      this.#top = 200;
+      this.#left = 200;
+      this.#txt = '';
+      this.#width = 100;
+      this.#height = 100;
+    }
+    this.#div = this.createDiv();
+    this.#fride = f;
+  }
+
+  mouseDownH(e: MouseEvent) {
+    e;
+    // this.setzi();
+    const top = e.y
+    const left = e.x
+    this.#div.onmousemove = e => this.move(e, { top, left });
+    this.#div.style.backgroundColor = this.cCol
+    this.#div.style.zIndex = zi()
+    this.isMoving = true;
+  }
+  mouseUpH(e: MouseEvent) {
+    e;
+    // e.preventDefault()
+    this.#div.style.backgroundColor = this.nCol
+    this.#div.onmousemove = () => null;
+    this.#top = parseInt(this.#div.style.top.replace('px', ''))
+    this.#left = parseInt(this.#div.style.left.replace('px', ''))
+    // this.#div.style.zIndex = ""
+    this.isMoving = false;
+  }
+
+  move(e: MouseEvent, coord: { top: number, left: number }) {
+    this.#div.style.top = `${this.#top + e.y - coord.top}px`;
+    this.#div.style.left = `${this.#left + e.x - coord.left}px`;
+    // this.top = this.#div.offsetTop - coord.top
+    // this.left = this.#div.offsetLeft - coord.left
+  }
+  setzi() {
+    this.#fride.setChitZIAuto();
+    this.#div.style.zIndex = "10"
+  }
+
+  createDiv(): HTMLDivElement {
+    const div = document.createElement("div");
+    div.classList.add("chit")
+    div.style.top = this.topip;
+    div.style.left = this.leftip;
+    div.style.height = this.heightip;
+    div.style.width = this.widthip;
+    div.style.zIndex = zi();
+    div.style.backgroundColor = this.nCol
+    // div.onmousedown = e => this.mouseDownH(e);
+    div.onmousedown = e => this.mouseDownH(e);
+    div.onmouseup = e => this.mouseUpH(e);    // div.onmouseleave = (e) => this.mouseUpH(e);
+    document.onmouseleave = e => this.mouseUpH(e);    // div.onmouseleave = (e) => this.mouseUpH(e);
+    document.body.appendChild(div);
+    return div;
+  }
+
+  set top(t: number) {
+    this.#top = t;
+    this.div.style.top = this.topip;
+  }
+  set left(l: number) {
+    this.#left = l;
+    this.div.style.left = this.leftip;
+  }
+
+  get topip() {
+    return this.#top + "px";
+  }
+  get leftip() {
+    return this.#left + "px";
+  }
+  get widthip() {
+    return this.#width + "px";
+  }
+  get heightip() {
+    return this.#height + "px";
+  }
+  get div() {
+    return this.#div;
+  }
+  get txt() {
+    return this.#txt;
+  }
+}
+export interface ChitFromDb {
+  top: number;
+  left: number;
+  txt: string;
+  width: number;
+  height: number;
+  zi: number;
+}
+
diff --git a/src/modules/Events.ts b/src/modules/Events.ts
new file mode 100644
index 0000000..a135e45
--- /dev/null
+++ b/src/modules/Events.ts
@@ -0,0 +1,28 @@
+import Fridge from "Modules/Fridge"
+
+export default class Events {
+  static setAll(fridge: Fridge) {
+    this.setBAdd(fridge)
+    // this.docMouMov(fridge);
+    // this.docMouLea(fridge);
+  }
+  static setBAdd(fridge: Fridge) {
+    const bAdd = document.getElementById("document-add") as HTMLButtonElement
+    bAdd.onclick = () => fridge.createChit();
+  }
+  // static docMouMov(fridge: Fridge) {
+  //   let ox = 100, oy = 100;
+  //   document.onmousemove = e => {
+  //     if ((e.target as HTMLElement).localName === "div") {
+  //       e.preventDefault();
+  //       fridge.moveChit({ top: oy - e.y, left: ox - e.x });
+  //       [ox, oy] = [e.x, e.y]
+  //     }
+  //   }
+  // }
+  // static docMouLea(fridge: Fridge) {
+  //   document.onmouseleave = () => {
+  //     fridge.stopChitMove()
+  //   }
+  // }
+}
diff --git a/src/modules/Fridge.ts b/src/modules/Fridge.ts
new file mode 100644
index 0000000..79da4dc
--- /dev/null
+++ b/src/modules/Fridge.ts
@@ -0,0 +1,44 @@
+import Chit, { ChitFromDb } from "Modules/Chit"
+
+export default class Fridge {
+  #chits: Chit[] = [];
+
+  constructor() {
+    const f = sessionStorage.fridge;
+    if (f === null) {
+      location.href = "/"
+      return;
+    }
+    const cs = JSON.parse(f) as ChitFromDb[];
+    for (const c of cs) {
+      this.#chits.push(new Chit(this, c))
+    }
+  }
+
+  setChitZIAuto() {
+    for (const c of this.#chits)
+      c.div.style.zIndex = "auto"
+  }
+  // moveChit(coord: { top: number, left: number }) {
+  //   for (const c of this.#chits) {
+  //     if (c.isMoving) {
+  //       c.move(coord)
+  //     }
+  //   }
+  // }
+  // stopChitMove() {
+  //   for (const c of this.#chits) {
+  //     c.isMoving = false;
+  //     //@ts-expect-error
+  //     c.mouseUpH({ preventDefault: () => null })
+  //   }
+  // }
+
+  createChit() {
+    this.#chits.push(new Chit(this))
+  }
+
+  get chits(): Chit[] {
+    return this.#chits;
+  }
+}