Quick commit with sort-of working WYSiWYG and moving chit

1 files changed, 57 insertions, 5 deletions

diff --git a/src/modules/Chit.ts b/src/modules/Chit.ts
index 823ecab..bd11766 100644
--- a/src/modules/Chit.ts
+++ b/src/modules/Chit.ts
@@ -1,5 +1,6 @@
 import { zi } from "@/consts";
 import Fridge from "./Fridge";
+import WYSiWYG from "./WYSiWYG";
 
 export default class Chit {
   public isMoving = false;
@@ -10,12 +11,13 @@ export default class Chit {
   #height: number;
   #div: HTMLDivElement;
   #txt: string;
-  #fride: Fridge;
+  #fridge: Fridge;
+  #wysiwyg: WYSiWYG;
 
   get nCol() { return "lightblue" }
   get cCol() { return "lightpink" }
 
-  constructor(f: Fridge, data?: ChitFromDb) {
+  constructor(f: Fridge, wysiwyg: WYSiWYG, data?: ChitFromDb) {
     if (data) {
       this.#top = data.top;
       this.#left = data.left;
@@ -25,12 +27,13 @@ export default class Chit {
     } else {
       this.#top = 200;
       this.#left = 200;
-      this.#txt = '';
+      this.#txt = '23';
       this.#width = 100;
       this.#height = 100;
     }
     this.#div = this.createDiv();
-    this.#fride = f;
+    this.#fridge = f;
+    this.#wysiwyg = wysiwyg;
   }
 
   mouseDownH(e: MouseEvent) {
@@ -61,7 +64,7 @@ export default class Chit {
     // this.left = this.#div.offsetLeft - coord.left
   }
   setzi() {
-    this.#fride.setChitZIAuto();
+    this.#fridge.setChitZIAuto();
     this.#div.style.zIndex = "10"
   }
 
@@ -72,8 +75,19 @@ export default class Chit {
     div.style.left = this.leftip;
     div.style.height = this.heightip;
     div.style.width = this.widthip;
+    // div.style.minHeight = "75px"
+    // div.style.minWidth = "75px"
     div.style.zIndex = zi();
     div.style.backgroundColor = this.nCol
+
+    div.innerHTML = `<button class="edit"></button><buttton class="resize"></buttton><buttton class="delete"></buttton>`
+    const be = div.children[0] as HTMLButtonElement;
+    const bl = div.children[1] as HTMLButtonElement;
+    const bd = div.children[2] as HTMLButtonElement;
+    be.onmousedown = e => this.edit(e);
+    bl.onmousedown = e => this.resize(e);
+    bd.onmousedown = () => this.remove();
+
     // div.onmousedown = e => this.mouseDownH(e);
     div.onmousedown = e => this.mouseDownH(e);
     div.onmouseup = e => this.mouseUpH(e);    // div.onmouseleave = (e) => this.mouseUpH(e);
@@ -82,6 +96,36 @@ export default class Chit {
     return div;
   }
 
+  edit(e: MouseEvent) {
+    e.stopPropagation();
+    this.#wysiwyg.show(this)
+  }
+  resize(e: MouseEvent) {
+    e.stopPropagation()
+    const [sx, sy] = [e.x, e.y]
+    let width: number, height: number
+    this.#div.onmousemove = ee => {
+      const [dx, dy] = [sx - ee.x, sy - ee.y]
+      width = this.#width - dx > 75 ? this.#width - dx : 75
+      height = this.#height - dy > 75 ? this.#height - dy : 75
+      console.log(sx, sy, dx, dy, width, height)
+      this.#div.style.width = width + "px"
+      this.#div.style.height = height + "px"
+    }
+    const stopRes = () => {
+      this.width = width
+      this.height = height
+      this.#div.onmousemove = () => null
+    }
+    this.#div.onmouseup = stopRes;
+    // this.#div.onmouseleave = stopRes;
+    document.body.onmouseleave = stopRes;
+  }
+  remove() {
+    this.#fridge.removeChit(this);
+    this.#div.remove();
+  }
+
   set top(t: number) {
     this.#top = t;
     this.div.style.top = this.topip;
@@ -90,6 +134,14 @@ export default class Chit {
     this.#left = l;
     this.div.style.left = this.leftip;
   }
+  set width(w: number) {
+    this.#width = w;
+    this.div.style.width = this.widthip;
+  }
+  set height(h: number) {
+    this.#height = h;
+    this.div.style.height = this.heightip;
+  }
 
   get topip() {
     return this.#top + "px";