src/modules/Chit.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
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;
}