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
|
const canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');
const input = document.getElementById('input');
let rectangles = JSON.parse(localStorage.getItem('rectangles')) || [];
let currentRectangle = null;
let dragging = false;
const createRectangle = (x, y, width, height, text) => ({ x, y, width, height, text });
const isPointInsideRectangle = (point, rectangle) => (
point.x >= rectangle.x &&
point.x <= rectangle.x + rectangle.width &&
point.y >= rectangle.y &&
point.y <= rectangle.y + rectangle.height
);
const handleMouseDown = (e) => {
currentRectangle = createRectangle(e.clientX, e.clientY, 0, 0, '');
dragging = true;
};
const handleMouseMove = (e) => {
if (dragging && currentRectangle) {
currentRectangle.width = e.clientX - currentRectangle.x;
currentRectangle.height = e.clientY - currentRectangle.y;
render();
}
};
const handleMouseUp = (e) => {
if (dragging && currentRectangle) {
rectangles.push(currentRectangle);
localStorage.setItem('rectangles', JSON.stringify(rectangles));
currentRectangle = null;
dragging = false;
}
};
const handleDoubleClick = (e) => {
const rectangle = rectangles.find((r) => isPointInsideRectangle({ x: e.clientX, y: e.clientY }, r));
if (rectangle) {
input.style.left = `${rectangle.x}px`;
input.style.top = `${rectangle.y}px`;
input.value = rectangle.text;
input.focus();
currentRectangle = rectangle;
}
};
const handleContextMenu = (e) => {
e.preventDefault();
const rectangle = rectangles.find((r) => isPointInsideRectangle({ x: e.clientX, y: e.clientY }, r));
if (rectangle) {
if (confirm('Are you sure you want to remove this rectangle?')) {
rectangles = rectangles.filter((r) => r !== rectangle);
localStorage.setItem('rectangles', JSON.stringify(rectangles));
render();
}
}
};
const handleInputBlur = (e) => {
if (currentRectangle) {
currentRectangle.text = input.value;
localStorage.setItem('rectangles', JSON.stringify(rectangles));
input.value = '';
render();
}
};
const handleClick = (e) => {
rectangles.forEach((r) => (r.focus = false));
const rectangle = rectangles.find((r) => isPointInsideRectangle({ x: e.clientX, y: e.clientY }, r));
if (rectangle) {
rectangle.focus = true;
render();
}
};
canvas.addEventListener('mousedown', handleMouseDown);
canvas.addEventListener('mousemove', handleMouseMove);
canvas.addEventListener('mouseup', handleMouseUp);
canvas.addEventListener('dblclick', handleDoubleClick);
canvas.addEventListener('contextmenu', handleContextMenu);
input.addEventListener('blur', handleInputBlur);
canvas.addEventListener('click', handleClick);
const render = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
rectangles.forEach((r) => {
ctx.fillStyle = 'white';
ctx.fillRect(r.x, r.y, r.width, r.height);
ctx.lineWidth = r.focus ? 3 : 1;
ctx.strokeRect(r.x, r.y, r.width, r.height);
ctx.fillStyle = 'black';
ctx.fillText(r.text, r.x, r.y + r.height);
});
if (currentRectangle) {
ctx.fillStyle = 'white';
ctx.fillRect(currentRectangle.x, currentRectangle.y, currentRectangle.width, currentRectangle.height);
ctx.lineWidth = 1;
ctx.strokeRect(currentRectangle.x, currentRectangle.y, currentRectangle.width, currentRectangle.height);
}
ctx.lineWidth = 1;
};
render();
|