three-cad-viewer 1.4.0 → 1.5.1

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.
Files changed (14) hide show
  1. package/dist/three-cad-viewer.css +63 -15
  2. package/dist/three-cad-viewer.esm.css +63 -15
  3. package/dist/three-cad-viewer.esm.js +1736 -1190
  4. package/dist/three-cad-viewer.esm.min.css +63 -15
  5. package/dist/three-cad-viewer.esm.min.js +1 -1
  6. package/dist/three-cad-viewer.js +1736 -1190
  7. package/dist/three-cad-viewer.min.css +63 -15
  8. package/dist/three-cad-viewer.min.js +1 -1
  9. package/package.json +3 -3
  10. package/src/animation.js +39 -3
  11. package/src/display.js +327 -175
  12. package/src/treeview.js +19 -8
  13. package/src/utils.js +14 -1
  14. package/src/viewer.js +99 -14
package/dist/three-cad-viewer.css CHANGED
@@ -1,7 +1,8 @@
1
1
  [data-theme="light"] {
2
2
  --tcv-font-color: #333;
3
3
  --tcv-bg-color: #fff;
4
- --tcv-bg-highligth-color: #eee;
4
+ --tcv-bg-overlay-color: rgba(255, 255, 255, 0.6);
5
+ --tcv-bg-highlight-color: #eee;
5
6
  --tcv-bg-tooltip-color: rgb(226, 238, 248);
6
7
  --tcv-x-color: red;
7
8
  --tcv-y-color: green;
@@ -15,7 +16,8 @@
15
16
  [data-theme="dark"] {
16
17
  --tcv-font-color: #ddd;
17
18
  --tcv-bg-color: #444;
18
- --tcv-bg-highligth-color: rgb(102, 102, 102);
19
+ --tcv-bg-overlay-color: rgba(68, 68, 68, 0.6);
20
+ --tcv-bg-highlight-color: rgb(102, 102, 102);
19
21
  --tcv-bg-tooltip-color: rgb(77, 109, 138);
20
22
  --tcv-x-color: rgb(255, 69, 0);
21
23
  --tcv-y-color: rgb(50, 205, 50);
@@ -39,11 +41,13 @@ canvas {
39
41
  background-color: var(--tcv-bg-color);
40
42
  color: var(--tcv-font-color);
41
43
  margin: 4px;
44
+ width: fit-content;
42
45
  }
43
46
 
44
47
  .tcv_cad_navigation {
45
48
  display: flex;
46
49
  flex-direction: column;
50
+ z-index: 100;
47
51
  }
48
52
 
49
53
  .tcv_cad_body {
@@ -52,12 +56,15 @@ canvas {
52
56
  }
53
57
 
54
58
  .tcv_cad_view {
55
- width: 600px;
56
- height: 400px;
57
59
  position: relative;
58
60
  margin: 2px;
59
61
  }
60
62
 
63
+ .tcv_cad_view_glass {
64
+ position: absolute !important;
65
+ left: 16px;
66
+ }
67
+
61
68
  .tcv_cad_tree_toggles {
62
69
  text-align: right;
63
70
  margin-right: 0px;
@@ -75,6 +82,15 @@ canvas {
75
82
  border-top: 1px solid lightgray;
76
83
  }
77
84
 
85
+ .tcv_cad_tree_glass {
86
+ border: none !important;
87
+ height: fit-content;
88
+ }
89
+
90
+ .tcv_cad_tree_glass:hover {
91
+ background-color: var(--tcv-bg-overlay-color);
92
+ }
93
+
78
94
  .tcv_cad_info {
79
95
  width: 240px;
80
96
  height: 146px;
@@ -85,6 +101,25 @@ canvas {
85
101
  overflow: hidden;
86
102
  }
87
103
 
104
+ .tcv_cad_info_wrapper {
105
+ display: flex;
106
+ flex-direction: column;
107
+ }
108
+
109
+ .tcv_cad_info_toggler {
110
+ vertical-align: middle;
111
+ }
112
+
113
+ .tcv_toggle_info_wrapper {
114
+ display: none;
115
+ margin-left: 6px;
116
+ }
117
+
118
+ .tcv_cad_info_glass {
119
+ display: none;
120
+ background: var(--tcv-bg-overlay-color);
121
+ }
122
+
88
123
  .tcv_tcv_info_table {
89
124
  display: block;
90
125
  overflow-x: visible;
@@ -137,8 +172,7 @@ th {
137
172
  }
138
173
 
139
174
  .tcv_cad_toolbar {
140
- width: 844px;
141
- height: 36px;
175
+ background: var(--tcv-bg-overlay-color);
142
176
  }
143
177
 
144
178
  .tcv_cad_inset {
@@ -154,18 +188,23 @@ th {
154
188
  z-index: 100;
155
189
  }
156
190
 
191
+ .tcv_animation_label {
192
+ vertical-align: middle;
193
+ margin-left: 5px;
194
+ }
195
+
157
196
  .tcv_animation_slider {
158
197
  width: 120px !important;
159
198
  }
160
199
 
161
200
  .tcv_cad_animation {
162
201
  height: 36px;
163
- background-color: var(--tcv-bg-color);
202
+ background-color: var(--tcv-bg-overlay-color);
164
203
  border: none;
165
204
  margin: 0;
166
205
  padding: 0px;
167
206
  position: absolute;
168
- right: 0px;
207
+ right: 2px;
169
208
  bottom: 0px;
170
209
  z-index: 100;
171
210
  }
@@ -223,17 +262,24 @@ th {
223
262
  padding: 0px;
224
263
  }
225
264
 
265
+ .tcv_btn_highlight {
266
+ border: 1px solid var(--tcv-shadow);
267
+ }
268
+
226
269
  .tcv_small_btn {
227
270
  width: 14px !important;
228
271
  height: 14px !important;
229
272
  font-size: 11px !important;
230
273
  color: var(--tcv-font-color);
231
- border: 1px solid var(--tcv-bg-highligth-color);
274
+ /* border: 1px solid var(--tcv-bg-overlay-color); */
275
+ }
276
+ .tcv_small_btn:hover {
277
+ background-color: var(--tcv-bg-overlay-color);
232
278
  }
233
279
 
234
280
  .tcv_btn:hover {
235
281
  box-shadow: 1px 1px 1px 0 var(--tcv-shadow);
236
- background-color: var(--tcv-bg-highligth-color);
282
+ background-color: var(--tcv-bg-overlay-color);
237
283
  }
238
284
 
239
285
  .tcv_btn:active {
@@ -262,13 +308,13 @@ input[type="button"] {
262
308
  padding: 0px;
263
309
  border: none;
264
310
  /* margin-bottom: 6px; */
265
- background-color: var(--tcv-bg-color);
311
+ background-color: transparent;
266
312
  color: var(--tcv-font-color);
267
313
  font-size: 14px;
268
314
  }
269
315
 
270
316
  .tcv_tab:hover {
271
- /* background-color: #eee; */
317
+ background-color: var(--tcv-bg-overlay-color);
272
318
  font-weight: bold;
273
319
  }
274
320
 
@@ -304,6 +350,7 @@ input[type="button"] {
304
350
  margin-left: 4px;
305
351
  margin-right: 4px;
306
352
  vertical-align: middle;
353
+ user-select: none;
307
354
  }
308
355
 
309
356
  .tcv_check {
@@ -322,8 +369,8 @@ input[type="button"] {
322
369
  position: absolute;
323
370
  min-width: 18px;
324
371
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
325
- z-index: 1;
326
- background-color: var(--tcv-bg-highligth-color);
372
+ z-index: 200;
373
+ background-color: var(--tcv-bg-highlight-color);
327
374
  }
328
375
 
329
376
  .tcv_grid-dropdown:hover .tcv_grid-content {
@@ -345,7 +392,7 @@ input[type="button"] {
345
392
  .tcv_clip_input {
346
393
  width: 25%;
347
394
  border: 1px solid #d3d3d3;
348
- background-color: var(--tcv-bg-color);
395
+ background-color: var(--tcv-bg-overlay-color);
349
396
  color: var(--tcv-font-color);
350
397
  }
351
398
 
@@ -359,6 +406,7 @@ input[type="button"] {
359
406
  opacity: 0.7;
360
407
  -webkit-transition: 0.2s;
361
408
  transition: opacity 0.2s;
409
+ vertical-align: middle;
362
410
  }
363
411
 
364
412
  .tcv_clip_slider::-webkit-slider-thumb {
package/dist/three-cad-viewer.esm.css CHANGED
@@ -1,7 +1,8 @@
1
1
  [data-theme="light"] {
2
2
  --tcv-font-color: #333;
3
3
  --tcv-bg-color: #fff;
4
- --tcv-bg-highligth-color: #eee;
4
+ --tcv-bg-overlay-color: rgba(255, 255, 255, 0.6);
5
+ --tcv-bg-highlight-color: #eee;
5
6
  --tcv-bg-tooltip-color: rgb(226, 238, 248);
6
7
  --tcv-x-color: red;
7
8
  --tcv-y-color: green;
@@ -15,7 +16,8 @@
15
16
  [data-theme="dark"] {
16
17
  --tcv-font-color: #ddd;
17
18
  --tcv-bg-color: #444;
18
- --tcv-bg-highligth-color: rgb(102, 102, 102);
19
+ --tcv-bg-overlay-color: rgba(68, 68, 68, 0.6);
20
+ --tcv-bg-highlight-color: rgb(102, 102, 102);
19
21
  --tcv-bg-tooltip-color: rgb(77, 109, 138);
20
22
  --tcv-x-color: rgb(255, 69, 0);
21
23
  --tcv-y-color: rgb(50, 205, 50);
@@ -39,11 +41,13 @@ canvas {
39
41
  background-color: var(--tcv-bg-color);
40
42
  color: var(--tcv-font-color);
41
43
  margin: 4px;
44
+ width: fit-content;
42
45
  }
43
46
 
44
47
  .tcv_cad_navigation {
45
48
  display: flex;
46
49
  flex-direction: column;
50
+ z-index: 100;
47
51
  }
48
52
 
49
53
  .tcv_cad_body {
@@ -52,12 +56,15 @@ canvas {
52
56
  }
53
57
 
54
58
  .tcv_cad_view {
55
- width: 600px;
56
- height: 400px;
57
59
  position: relative;
58
60
  margin: 2px;
59
61
  }
60
62
 
63
+ .tcv_cad_view_glass {
64
+ position: absolute !important;
65
+ left: 16px;
66
+ }
67
+
61
68
  .tcv_cad_tree_toggles {
62
69
  text-align: right;
63
70
  margin-right: 0px;
@@ -75,6 +82,15 @@ canvas {
75
82
  border-top: 1px solid lightgray;
76
83
  }
77
84
 
85
+ .tcv_cad_tree_glass {
86
+ border: none !important;
87
+ height: fit-content;
88
+ }
89
+
90
+ .tcv_cad_tree_glass:hover {
91
+ background-color: var(--tcv-bg-overlay-color);
92
+ }
93
+
78
94
  .tcv_cad_info {
79
95
  width: 240px;
80
96
  height: 146px;
@@ -85,6 +101,25 @@ canvas {
85
101
  overflow: hidden;
86
102
  }
87
103
 
104
+ .tcv_cad_info_wrapper {
105
+ display: flex;
106
+ flex-direction: column;
107
+ }
108
+
109
+ .tcv_cad_info_toggler {
110
+ vertical-align: middle;
111
+ }
112
+
113
+ .tcv_toggle_info_wrapper {
114
+ display: none;
115
+ margin-left: 6px;
116
+ }
117
+
118
+ .tcv_cad_info_glass {
119
+ display: none;
120
+ background: var(--tcv-bg-overlay-color);
121
+ }
122
+
88
123
  .tcv_tcv_info_table {
89
124
  display: block;
90
125
  overflow-x: visible;
@@ -137,8 +172,7 @@ th {
137
172
  }
138
173
 
139
174
  .tcv_cad_toolbar {
140
- width: 844px;
141
- height: 36px;
175
+ background: var(--tcv-bg-overlay-color);
142
176
  }
143
177
 
144
178
  .tcv_cad_inset {
@@ -154,18 +188,23 @@ th {
154
188
  z-index: 100;
155
189
  }
156
190
 
191
+ .tcv_animation_label {
192
+ vertical-align: middle;
193
+ margin-left: 5px;
194
+ }
195
+
157
196
  .tcv_animation_slider {
158
197
  width: 120px !important;
159
198
  }
160
199
 
161
200
  .tcv_cad_animation {
162
201
  height: 36px;
163
- background-color: var(--tcv-bg-color);
202
+ background-color: var(--tcv-bg-overlay-color);
164
203
  border: none;
165
204
  margin: 0;
166
205
  padding: 0px;
167
206
  position: absolute;
168
- right: 0px;
207
+ right: 2px;
169
208
  bottom: 0px;
170
209
  z-index: 100;
171
210
  }
@@ -223,17 +262,24 @@ th {
223
262
  padding: 0px;
224
263
  }
225
264
 
265
+ .tcv_btn_highlight {
266
+ border: 1px solid var(--tcv-shadow);
267
+ }
268
+
226
269
  .tcv_small_btn {
227
270
  width: 14px !important;
228
271
  height: 14px !important;
229
272
  font-size: 11px !important;
230
273
  color: var(--tcv-font-color);
231
- border: 1px solid var(--tcv-bg-highligth-color);
274
+ /* border: 1px solid var(--tcv-bg-overlay-color); */
275
+ }
276
+ .tcv_small_btn:hover {
277
+ background-color: var(--tcv-bg-overlay-color);
232
278
  }
233
279
 
234
280
  .tcv_btn:hover {
235
281
  box-shadow: 1px 1px 1px 0 var(--tcv-shadow);
236
- background-color: var(--tcv-bg-highligth-color);
282
+ background-color: var(--tcv-bg-overlay-color);
237
283
  }
238
284
 
239
285
  .tcv_btn:active {
@@ -262,13 +308,13 @@ input[type="button"] {
262
308
  padding: 0px;
263
309
  border: none;
264
310
  /* margin-bottom: 6px; */
265
- background-color: var(--tcv-bg-color);
311
+ background-color: transparent;
266
312
  color: var(--tcv-font-color);
267
313
  font-size: 14px;
268
314
  }
269
315
 
270
316
  .tcv_tab:hover {
271
- /* background-color: #eee; */
317
+ background-color: var(--tcv-bg-overlay-color);
272
318
  font-weight: bold;
273
319
  }
274
320
 
@@ -304,6 +350,7 @@ input[type="button"] {
304
350
  margin-left: 4px;
305
351
  margin-right: 4px;
306
352
  vertical-align: middle;
353
+ user-select: none;
307
354
  }
308
355
 
309
356
  .tcv_check {
@@ -322,8 +369,8 @@ input[type="button"] {
322
369
  position: absolute;
323
370
  min-width: 18px;
324
371
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
325
- z-index: 1;
326
- background-color: var(--tcv-bg-highligth-color);
372
+ z-index: 200;
373
+ background-color: var(--tcv-bg-highlight-color);
327
374
  }
328
375
 
329
376
  .tcv_grid-dropdown:hover .tcv_grid-content {
@@ -345,7 +392,7 @@ input[type="button"] {
345
392
  .tcv_clip_input {
346
393
  width: 25%;
347
394
  border: 1px solid #d3d3d3;
348
- background-color: var(--tcv-bg-color);
395
+ background-color: var(--tcv-bg-overlay-color);
349
396
  color: var(--tcv-font-color);
350
397
  }
351
398
 
@@ -359,6 +406,7 @@ input[type="button"] {
359
406
  opacity: 0.7;
360
407
  -webkit-transition: 0.2s;
361
408
  transition: opacity 0.2s;
409
+ vertical-align: middle;
362
410
  }
363
411
 
364
412
  .tcv_clip_slider::-webkit-slider-thumb {