Almost dragging and WYSiWYG start

1 files changed, 121 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;
+}
+