@visns-studio/visns-components 5.15.4 → 5.15.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -1
- package/package.json +4 -1
- package/src/components/CameraPlacement.jsx +1871 -0
- package/src/components/data/verkadaCameras.js +818 -0
- package/src/components/styles/CameraMarkers.scss +200 -0
- package/src/components/styles/CameraPlacement.module.scss +1495 -0
- package/src/components/styles/CameraPlacementModal.module.scss +185 -0
- package/src/components/utils/CameraIcon.jsx +18 -0
- package/src/index.js +2 -0
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
// Enhanced camera markers with rotation handles
|
|
2
|
+
:global {
|
|
3
|
+
// Override any MapLibre GL marker default styles
|
|
4
|
+
.maplibregl-marker {
|
|
5
|
+
width: 24px !important;
|
|
6
|
+
height: 24px !important;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.camera-marker-container {
|
|
10
|
+
position: relative;
|
|
11
|
+
display: flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
width: 24px !important;
|
|
15
|
+
height: 24px !important;
|
|
16
|
+
cursor: grab;
|
|
17
|
+
|
|
18
|
+
&:active {
|
|
19
|
+
cursor: grabbing;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&.rotating {
|
|
23
|
+
cursor: default;
|
|
24
|
+
|
|
25
|
+
.rotation-handle {
|
|
26
|
+
opacity: 1 !important;
|
|
27
|
+
transform: scale(1.2) !important;
|
|
28
|
+
background: #1d4ed8 !important;
|
|
29
|
+
box-shadow: 0 8px 24px rgba(29, 78, 216, 0.6) !important;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// Styles for dragging state with MapLibre GL
|
|
35
|
+
.maplibregl-marker {
|
|
36
|
+
transition: none;
|
|
37
|
+
|
|
38
|
+
&.maplibregl-marker-dragging {
|
|
39
|
+
.camera-marker-content {
|
|
40
|
+
transform: scale(1.2);
|
|
41
|
+
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6) !important;
|
|
42
|
+
z-index: 1000;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.rotation-handle {
|
|
46
|
+
opacity: 0.3;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.camera-marker-container.dragging {
|
|
52
|
+
.camera-marker-content {
|
|
53
|
+
transform: scale(1.3) !important;
|
|
54
|
+
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7) !important;
|
|
55
|
+
border-width: 3px !important;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.camera-map-marker {
|
|
60
|
+
position: relative;
|
|
61
|
+
cursor: pointer;
|
|
62
|
+
width: 24px !important;
|
|
63
|
+
height: 24px !important;
|
|
64
|
+
border-radius: 50% !important;
|
|
65
|
+
|
|
66
|
+
&.dome {
|
|
67
|
+
.camera-marker-content {
|
|
68
|
+
background: #10b981;
|
|
69
|
+
border-color: #059669;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&.bullet {
|
|
74
|
+
.camera-marker-content {
|
|
75
|
+
background: #f59e0b;
|
|
76
|
+
border-color: #d97706;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&.ptz {
|
|
81
|
+
.camera-marker-content {
|
|
82
|
+
background: #8b5cf6;
|
|
83
|
+
border-color: #7c3aed;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
&.fisheye {
|
|
88
|
+
.camera-marker-content {
|
|
89
|
+
background: #06b6d4;
|
|
90
|
+
border-color: #0891b2;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
&.multisensor {
|
|
95
|
+
.camera-marker-content {
|
|
96
|
+
background: #ef4444;
|
|
97
|
+
border-color: #dc2626;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
&.minidome {
|
|
102
|
+
.camera-marker-content {
|
|
103
|
+
background: #a855f7;
|
|
104
|
+
border-color: #9333ea;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
&.outdoor {
|
|
109
|
+
.camera-marker-content {
|
|
110
|
+
border-width: 3px;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
// Default styling for unselected cameras
|
|
115
|
+
.camera-marker-content {
|
|
116
|
+
background: #6b7280;
|
|
117
|
+
border-color: #4b5563;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.camera-marker-content {
|
|
122
|
+
width: 24px !important;
|
|
123
|
+
height: 24px !important;
|
|
124
|
+
min-width: 24px;
|
|
125
|
+
min-height: 24px;
|
|
126
|
+
max-width: 24px;
|
|
127
|
+
max-height: 24px;
|
|
128
|
+
border-radius: 50% !important;
|
|
129
|
+
border: 2px solid;
|
|
130
|
+
display: flex;
|
|
131
|
+
align-items: center;
|
|
132
|
+
justify-content: center;
|
|
133
|
+
position: relative;
|
|
134
|
+
z-index: 1;
|
|
135
|
+
transition: all 0.2s ease;
|
|
136
|
+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
|
|
137
|
+
overflow: hidden;
|
|
138
|
+
flex-shrink: 0;
|
|
139
|
+
|
|
140
|
+
&:hover {
|
|
141
|
+
transform: scale(1.15);
|
|
142
|
+
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.camera-number {
|
|
147
|
+
color: white;
|
|
148
|
+
font-size: 12px;
|
|
149
|
+
font-weight: 800;
|
|
150
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
|
|
151
|
+
line-height: 1;
|
|
152
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.rotation-handle {
|
|
156
|
+
position: absolute;
|
|
157
|
+
top: -6px;
|
|
158
|
+
right: -6px;
|
|
159
|
+
width: 16px;
|
|
160
|
+
height: 16px;
|
|
161
|
+
background: #3b82f6;
|
|
162
|
+
border: 2px solid white;
|
|
163
|
+
border-radius: 50%;
|
|
164
|
+
cursor: grab;
|
|
165
|
+
opacity: 0.9;
|
|
166
|
+
transition: all 0.2s ease;
|
|
167
|
+
display: flex;
|
|
168
|
+
align-items: center;
|
|
169
|
+
justify-content: center;
|
|
170
|
+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
|
171
|
+
z-index: 1000;
|
|
172
|
+
|
|
173
|
+
&:hover {
|
|
174
|
+
opacity: 1;
|
|
175
|
+
transform: scale(1.25);
|
|
176
|
+
background: #2563eb;
|
|
177
|
+
box-shadow: 0 3px 10px rgba(59, 130, 246, 0.6);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
&:active {
|
|
181
|
+
cursor: grabbing;
|
|
182
|
+
background: #1d4ed8;
|
|
183
|
+
transform: scale(1.1);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.rotation-icon {
|
|
187
|
+
width: 6px;
|
|
188
|
+
height: 6px;
|
|
189
|
+
border: 1px solid white;
|
|
190
|
+
border-left-color: transparent;
|
|
191
|
+
border-radius: 50%;
|
|
192
|
+
animation: spin 2s linear infinite;
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
@keyframes spin {
|
|
197
|
+
0% { transform: rotate(0deg); }
|
|
198
|
+
100% { transform: rotate(360deg); }
|
|
199
|
+
}
|
|
200
|
+
}
|