Quick commit with sort-of working WYSiWYG and moving chit

9 files changed, 200 insertions, 37 deletions

diff --git a/src/consts.ts b/src/consts.ts
index 401de7e..dd1d5d6 100644
--- a/src/consts.ts
+++ b/src/consts.ts
@@ -1,4 +1,6 @@
 export let _zi = -2147483648;
 export function zi() {
+  if (_zi + 1 > 2147483647)
+    _zi = -2147483648;
   return (_zi++).toString();
 }
diff --git a/src/index.ts b/src/index.ts
index 79d5386..79c88d2 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,7 +2,7 @@ import "Styles/index.css";
 
 async function goToMain() {
   const i = document.getElementsByTagName("input")[0]
-  const res = await (await fetch("http://localhost:8000/getFridge.php?name=" + i.value)).text()
+  const res = await (await fetch("http://localhost:8001/getFridge.php?name=" + i.value)).text()
   sessionStorage.fridge = res;
   location.href = "/main.html"
 }
diff --git a/src/main.ts b/src/main.ts
index 280cd99..a792dfd 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,26 +2,9 @@ import "Styles/main.css";
 
 import Fridge from "Modules/Fridge"
 import Events from "Modules/Events"
+import WYSiWYG from "Modules/WYSiWYG";
 
-import tinymce from 'tinymce';
-import 'tinymce/icons/default';
-import 'tinymce/themes/silver';
-import 'tinymce/skins/ui/oxide/skin.css';
-import 'tinymce/plugins/save'
+const wysiwyg = new WYSiWYG();
+const fridge = new Fridge(wysiwyg)
 
-tinymce.init({
-  selector: '#tinymce',
-  plugins: 'save',
-  // plugins: 'advlist code emoticons link lists table',
-  // toolbar: 'bold italic | bullist numlist | link emoticons',
-  // skin: false,
-  // content_css: false,
-  // content_style: contentUiCss.toString() + '\n' + contentCss.toString(),
-});
-
-const tinyFooter = document.getElementsByClassName("tox-statusbar__branding")[0].parentElement as HTMLDivElement
-tinyFooter.innerHTML = "<button>adsasd</button>"
-const fridge = new Fridge()
-// fridge.createChit()
 Events.setAll(fridge)
-
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";
diff --git a/src/modules/Fridge.ts b/src/modules/Fridge.ts
index 79da4dc..c12bc53 100644
--- a/src/modules/Fridge.ts
+++ b/src/modules/Fridge.ts
@@ -1,24 +1,34 @@
 import Chit, { ChitFromDb } from "Modules/Chit"
+import WYSiWYG from "./WYSiWYG";
 
 export default class Fridge {
   #chits: Chit[] = [];
+  //@ts-expect-error
+  #wysiwyg: WYSiWYG;
 
-  constructor() {
+  constructor(wysiwyg: WYSiWYG) {
     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))
+      this.#chits.push(new Chit(this, wysiwyg, c));
     }
+
+
+    this.#wysiwyg = wysiwyg;
   }
 
   setChitZIAuto() {
     for (const c of this.#chits)
       c.div.style.zIndex = "auto"
   }
+  removeChit(ch: Chit) {
+    this.#chits = this.#chits.filter(c => c !== ch);
+  }
   // moveChit(coord: { top: number, left: number }) {
   //   for (const c of this.#chits) {
   //     if (c.isMoving) {
@@ -35,7 +45,7 @@ export default class Fridge {
   // }
 
   createChit() {
-    this.#chits.push(new Chit(this))
+    this.#chits.push(new Chit(this, this.#wysiwyg))
   }
 
   get chits(): Chit[] {
diff --git a/src/modules/WYSiWYG.ts b/src/modules/WYSiWYG.ts
new file mode 100644
index 0000000..1161cde
--- /dev/null
+++ b/src/modules/WYSiWYG.ts
@@ -0,0 +1,58 @@
+import tinymce, { Editor } from 'tinymce';
+import 'tinymce/icons/default';
+import 'tinymce/themes/silver';
+import 'tinymce/skins/ui/oxide/skin.css';
+import Chit from './Chit';
+
+export default class WYSiWYG {
+  #id = 'tinymce'
+  #bSave: HTMLButtonElement
+  #bCancel: HTMLButtonElement
+
+  constructor() {
+    tinymce.init({
+      selector: this.idAsSel,
+    });
+
+    const s = document.getElementsByClassName("tox-statusbar__branding")[0] as HTMLSpanElement;
+    const t = document.getElementsByClassName("tox-tinymce")[0] as HTMLDivElement;
+    const tf = s.parentElement as HTMLDivElement
+    const tfp = tf.parentElement as HTMLDivElement
+    tf.removeChild(s)
+
+    t.id = "wysiwyg"
+    tfp.id = "tfp";
+
+    this.#bSave = document.createElement("button")
+    this.#bCancel = document.createElement("button")
+    this.#bSave.id = "save"
+    this.#bCancel.id = "cancel"
+    tf.append(this.#bSave, this.#bCancel)
+
+    this.#bSave.onclick = () => this.setContent(this.content + "asd");
+    this.#bCancel.onclick = () => this.hide();
+    this.hide()
+  }
+
+  get #tmce(): Editor {
+    return tinymce.get(this.#id);
+  }
+  show(c: Chit) {
+    console.log(c.txt)
+    this.#tmce.show();
+    this.setContent(c.txt)
+  }
+  hide() {
+    this.#tmce.hide();
+  }
+  setContent(c: string) {
+    this.#tmce.setContent(c);
+  }
+  get content(): string {
+    return this.#tmce.getContent()
+  }
+
+  get idAsSel() {
+    return '#' + this.#id;
+  }
+}
diff --git a/src/server/start b/src/server/start
index 7538f45..a746e39 100755
--- a/src/server/start
+++ b/src/server/start
@@ -1 +1,2 @@
-php -S 0.0.0.0:8000
+#!/bin/sh
+php -S 0.0.0.0:8001 -t /home/maks/school/clientApps/isiqandisi/src/server
diff --git a/src/styles/main.css b/src/styles/main.css
index 5cbdb33..7918a59 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -1,3 +1,8 @@
+body {
+  background-color: black;
+  color: white;
+}
+
 #document-add {
   background-image: url('static/document-add.svg');
   border: 0;
@@ -10,11 +15,64 @@
   border: 1px solid black;
   position: absolute;
 }
+.edit {
+  position: absolute;
+  background-image: url('static/edit.svg');
+  background-color: rgba(0, 0, 0, 0);
+  border: 0;
+  cursor: pointer;
+  height: 25px;
+  width: 25px;
+}
+.resize {
+  position: absolute;
+  background-image: url('static/resize.svg');
+  background-color: rgba(0, 0, 0, 0);
+  cursor: pointer;
+  height: 25px;
+  width: 25px;
+  bottom: 0;
+  right: 0;
+}
+.delete {
+  position: absolute;
+  background-image: url('static/x.svg');
+  background-color: rgba(0, 0, 0, 0);
+  cursor: pointer;
+  height: 25px;
+  width: 25px;
+  top: 0;
+  right: 0;
+}
 
 #tinymce {
-  position: absolute;
-  top: 150;
-  left: 150;
-  width: 80vw;
-  height: 40vh;
+  display: none;
+}
+.tinymce-footer {
+  height: 40px;
+}
+#wysiwyg {
+    position: absolute;
+    top: 10%;
+    left: 17%;
+    width: 70vw;
+    height: 50vh;
+}
+#tfp {
+  height: 26px;
+  line-height: 26px;
+}
+#save {
+  background-image: url('static/save.svg');
+  border: 0;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+#cancel {
+  background-image: url('static/x.svg');
+  border: 0;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
 }
diff --git a/src/templates/main.html b/src/templates/main.html
index 14ad523..a248ec1 100644
--- a/src/templates/main.html
+++ b/src/templates/main.html
@@ -14,8 +14,7 @@
 
 <body>
   <button id="document-add"></button>
-  <div id="tinymce">
-  </div>
+  <div id="tinymce"></div>
 </body>
 
 </html>