summaryrefslogtreecommitdiffstats
path: root/src/modules/Chit.ts
diff options
context:
space:
mode:
Diffstat (limited to 'src/modules/Chit.ts')
-rw-r--r--src/modules/Chit.ts240
1 files changed, 176 insertions, 64 deletions
diff --git a/src/modules/Chit.ts b/src/modules/Chit.ts
index bd11766..7d7169a 100644
--- a/src/modules/Chit.ts
+++ b/src/modules/Chit.ts
@@ -10,65 +10,34 @@ export default class Chit {
#width: number;
#height: number;
#div: HTMLDivElement;
- #txt: string;
+ #txt = '';
#fridge: Fridge;
#wysiwyg: WYSiWYG;
+ #span!: HTMLSpanElement;
- get nCol() { return "lightblue" }
- get cCol() { return "lightpink" }
+ get nCol() { return "darkblue" }
+ get cCol() { return "#CC00CC" }
constructor(f: Fridge, wysiwyg: WYSiWYG, data?: ChitFromDb) {
+ this.#fridge = f;
+ this.#wysiwyg = wysiwyg;
if (data) {
this.#top = data.top;
this.#left = data.left;
- this.#txt = data.txt;
this.#height = data.height;
this.#width = data.width;
+ this.#div = this.createDiv(data.zi);
+ this.txt = data.txt;
} else {
this.#top = 200;
this.#left = 200;
- this.#txt = '23';
- this.#width = 100;
- this.#height = 100;
+ this.#width = 150;
+ this.#height = 150;
+ this.#div = this.createDiv();
}
- this.#div = this.createDiv();
- this.#fridge = f;
- this.#wysiwyg = wysiwyg;
}
- 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.#fridge.setChitZIAuto();
- this.#div.style.zIndex = "10"
- }
-
- createDiv(): HTMLDivElement {
+ createDiv(z?: number): HTMLDivElement {
const div = document.createElement("div");
div.classList.add("chit")
div.style.top = this.topip;
@@ -77,53 +46,167 @@ export default class Chit {
div.style.width = this.widthip;
// div.style.minHeight = "75px"
// div.style.minWidth = "75px"
- div.style.zIndex = zi();
+ div.style.zIndex = z != null ? z.toString() : zi(this.#fridge);
div.style.backgroundColor = this.nCol
- div.innerHTML = `<button class="edit"></button><buttton class="resize"></buttton><buttton class="delete"></buttton>`
+ div.innerHTML = `<button class="edit"></button><buttton class="resize"></buttton><buttton class="delete"></buttton>
+ <div class="txt"></div>`
const be = div.children[0] as HTMLButtonElement;
const bl = div.children[1] as HTMLButtonElement;
const bd = div.children[2] as HTMLButtonElement;
+ const s = div.children[3] as HTMLSpanElement;
+
+ div.onmousedown = e => this.moveOrResize(e, "mov");
be.onmousedown = e => this.edit(e);
- bl.onmousedown = e => this.resize(e);
+ bl.onmousedown = e => this.moveOrResize(e, "res");
bd.onmousedown = () => this.remove();
+ this.#span = s;
- // 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;
}
- edit(e: MouseEvent) {
- e.stopPropagation();
- this.#wysiwyg.show(this)
- }
- resize(e: MouseEvent) {
+ moveOrResize(e: MouseEvent, what: "mov" | "res") {
e.stopPropagation()
const [sx, sy] = [e.x, e.y]
- let width: number, height: number
- this.#div.onmousemove = ee => {
+ let top = this.#top, left = this.#left, width = this.#width, height = this.#height;
+ this.color = this.cCol;
+ this.#fridge.makeTrans(this);
+ this.zi = zi(this.#fridge);
+
+ // this.#div.onmousemove = ee => {
+ document.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"
+
+ // console.log(top, left, dy, dx, ee.x === ee.clientX)
+ if (ee.x !== ee.clientX) throw new Error("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA")
+
+ if (what === "mov") {
+ top = this.#top - dy;
+ left = this.#left - dx;
+ this.#div.style.top = top + 'px';
+ this.#div.style.left = left + 'px';
+ } else {
+ const m = 150;
+ width = this.#width - dx > m ? this.#width - dx : m
+ height = this.#height - dy > m ? this.#height - dy : m
+ this.#div.style.width = width + "px"
+ this.#div.style.height = height + "px"
+ }
}
+
const stopRes = () => {
+ this.top = top
+ this.left = left
this.width = width
this.height = height
+
+ this.color = this.nCol;
+ this.save()
+ document.onmousemove = () => null
+ document.onmouseup = () => null
+ document.onmouseleave = () => null
this.#div.onmousemove = () => null
+ this.#div.onmouseup = () => null;
+ this.#div.onmouseleave = () => null;
+ this.#fridge.unmakeTrans();
+ // document.onmouseleave = () => null;
}
- this.#div.onmouseup = stopRes;
+ // this.#div.onmouseup = stopRes;
// this.#div.onmouseleave = stopRes;
- document.body.onmouseleave = stopRes;
+ document.onmouseup = stopRes;
+ document.onmouseleave = stopRes;
+
}
+ edit(e: MouseEvent) {
+ e.stopPropagation();
+ this.#wysiwyg.show(this)
+ }
+ //#region
+ // movement(e: MouseEvent) {
+ // // e.stopPropagation()
+ // const [sx, sy] = [e.x, e.y]
+ // let top: number, left: number
+ // this.color = this.cCol;
+ // this.#fridge.makeTrans(this);
+ // this.zi = zi(this.#fridge);
+
+ // // this.#div.onmousemove = ee => {
+ // document.onmousemove = ee => {
+ // const [dx, dy] = [sx - ee.x, sy - ee.y]
+ // top = this.#top - dy;
+ // left = this.#left - dx;
+ // console.log(top, left, dy, dx, ee.x === ee.clientX)
+ // if (ee.x !== ee.clientX) throw new Error("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA")
+ // this.#div.style.top = top.toString() + 'px';
+ // this.#div.style.left = left.toString() + 'px';
+ // }
+ // const stopRes = () => {
+ // this.#top = top
+ // this.#left = left
+ // this.color = this.nCol;
+ // this.save()
+ // document.onmousemove = () => null
+ // document.onmouseup = () => null
+ // document.onmouseleave = () => null
+ // this.#div.onmousemove = () => null
+ // this.#div.onmouseup = () => null;
+ // this.#div.onmouseleave = () => null;
+ // this.#fridge.unmakeTrans();
+ // // document.onmouseleave = () => null;
+ // }
+ // // this.#div.onmouseup = stopRes;
+ // // this.#div.onmouseleave = stopRes;
+ // document.onmouseup = stopRes;
+ // document.onmouseleave = stopRes;
+ // }
+
+ // resize(e: MouseEvent) {
+ // e.stopPropagation()
+ // const [sx, sy] = [e.x, e.y]
+ // let width: number, height: number
+ // this.#fridge.makeTrans(this);
+ // this.zi = zi(this.#fridge);
+
+ // // this.#div.onmousemove = ee => {
+ // document.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.save()
+ // document.onmousemove = () => null
+ // this.#div.onmousemove = () => null
+ // this.#div.onmouseup = () => null;
+ // this.#div.onmouseleave = () => null;
+ // this.#fridge.unmakeTrans();
+ // // document.onmouseleave = () => null;
+ // }
+ // this.#div.onmouseup = stopRes;
+ // // this.#div.onmouseleave = stopRes;
+ // // this.#div.onmouseleave = stopRes;
+ // }
+ //#endregion
remove() {
this.#fridge.removeChit(this);
this.#div.remove();
+ this.save()
+ }
+ save() {
+ this.#fridge.saveToDb();
+ }
+
+ makeTrans() {
+ this.#div.style.pointerEvents = "none";
+ }
+ unmakeTrans() {
+ this.#div.style.pointerEvents = "";
}
set top(t: number) {
@@ -142,7 +225,30 @@ export default class Chit {
this.#height = h;
this.div.style.height = this.heightip;
}
+ set color(c: string) {
+ this.#div.style.backgroundColor = c;
+ }
+ set zi(z: string) {
+ this.#div.style.zIndex = z;
+ }
+ set txt(t: string) {
+ this.#txt = t;
+ this.#span.innerHTML = t;
+ this.save();
+ }
+ get top() {
+ return this.#top;
+ }
+ get left() {
+ return this.#left;
+ }
+ get width() {
+ return this.#width;
+ }
+ get height() {
+ return this.#height;
+ }
get topip() {
return this.#top + "px";
}
@@ -161,6 +267,12 @@ export default class Chit {
get txt() {
return this.#txt;
}
+ get zi() {
+ return this.#div.style.zIndex;
+ }
+ get bgcolor() {
+ return this.#div.style.backgroundColor;
+ }
}
export interface ChitFromDb {
top: number;
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-23 05:22:23 +0000