From 27075885e95bd0efc062920685e04287feb4b556 Mon Sep 17 00:00:00 2001 From: Maksymilian Jopek Date: Sun, 31 Oct 2021 14:31:29 +0100 Subject: Almost the end --- src/modules/Chit.ts | 240 ++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 176 insertions(+), 64 deletions(-) (limited to 'src/modules/Chit.ts') 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 = `` + div.innerHTML = ` +
` 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; -- cgit v1.3.1