@visns-studio/visns-components 5.15.3 → 5.15.5
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 +53 -2
- package/package.json +4 -1
- package/src/components/CameraPlacement.jsx +1638 -0
- package/src/components/data/verkadaCameras.js +818 -0
- package/src/components/generic/GenericQuote.jsx +2 -20
- package/src/components/styles/CameraMarkers.scss +200 -0
- package/src/components/styles/CameraPlacement.module.scss +1318 -0
- package/src/components/styles/CameraPlacementModal.module.scss +185 -0
- package/src/components/styles/GenericQuote.module.scss +7 -6
- package/src/components/utils/CameraIcon.jsx +18 -0
- package/src/index.js +2 -0
|
@@ -87,7 +87,6 @@ function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
|
|
|
87
87
|
// Content editor state
|
|
88
88
|
const [showContentEditor, setShowContentEditor] = useState(false);
|
|
89
89
|
const [proposalContent, setProposalContent] = useState('');
|
|
90
|
-
const [contentSectionType, setContentSectionType] = useState('content');
|
|
91
90
|
|
|
92
91
|
// Modal state variables
|
|
93
92
|
const [modalShow, setModalShow] = useState(false);
|
|
@@ -1030,8 +1029,7 @@ function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
|
|
|
1030
1029
|
`/ajax/quotes/${data.id}/proposal-content`,
|
|
1031
1030
|
'POST',
|
|
1032
1031
|
{
|
|
1033
|
-
content: proposalContent
|
|
1034
|
-
section_type: contentSectionType
|
|
1032
|
+
content: proposalContent
|
|
1035
1033
|
}
|
|
1036
1034
|
);
|
|
1037
1035
|
|
|
@@ -1570,22 +1568,6 @@ function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
|
|
|
1570
1568
|
</button>
|
|
1571
1569
|
</div>
|
|
1572
1570
|
<div className={styles.contentEditorBody}>
|
|
1573
|
-
<div className={styles.editorSection}>
|
|
1574
|
-
<label className={styles.editorLabel}>
|
|
1575
|
-
<Settings size={16} />
|
|
1576
|
-
Section Type:
|
|
1577
|
-
<select
|
|
1578
|
-
value={contentSectionType}
|
|
1579
|
-
onChange={(e) => setContentSectionType(e.target.value)}
|
|
1580
|
-
className={styles.sectionTypeSelect}
|
|
1581
|
-
>
|
|
1582
|
-
<option value="content">Content Section</option>
|
|
1583
|
-
<option value="overview">Overview Section</option>
|
|
1584
|
-
<option value="solution">Solution Section</option>
|
|
1585
|
-
<option value="benefits">Benefits Section</option>
|
|
1586
|
-
</select>
|
|
1587
|
-
</label>
|
|
1588
|
-
</div>
|
|
1589
1571
|
<div className={styles.editorContainer}>
|
|
1590
1572
|
<Editor
|
|
1591
1573
|
apiKey="qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc"
|
|
@@ -1593,7 +1575,7 @@ function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
|
|
|
1593
1575
|
onEditorChange={handleContentChange}
|
|
1594
1576
|
init={{
|
|
1595
1577
|
height: '100%',
|
|
1596
|
-
min_height:
|
|
1578
|
+
min_height: 500,
|
|
1597
1579
|
resize: false,
|
|
1598
1580
|
menubar: true,
|
|
1599
1581
|
plugins: [
|
|
@@ -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
|
+
}
|