three-cad-viewer 1.5.1 → 1.5.4

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 (12) hide show
  1. package/dist/three-cad-viewer.css +65 -14
  2. package/dist/three-cad-viewer.esm.css +65 -14
  3. package/dist/three-cad-viewer.esm.js +225 -151
  4. package/dist/three-cad-viewer.esm.min.css +65 -14
  5. package/dist/three-cad-viewer.esm.min.js +1 -1
  6. package/dist/three-cad-viewer.js +225 -151
  7. package/dist/three-cad-viewer.min.css +65 -14
  8. package/dist/three-cad-viewer.min.js +1 -1
  9. package/package.json +1 -1
  10. package/src/animation.js +4 -0
  11. package/src/display.js +212 -147
  12. package/src/viewer.js +9 -4
package/dist/three-cad-viewer.css CHANGED
@@ -1,13 +1,14 @@
1
1
  [data-theme="light"] {
2
2
  --tcv-font-color: #333;
3
3
  --tcv-bg-color: #fff;
4
- --tcv-bg-overlay-color: rgba(255, 255, 255, 0.6);
4
+ --tcv-bg-overlay-color: rgba(255, 255, 255, 0.7);
5
5
  --tcv-bg-highlight-color: #eee;
6
6
  --tcv-bg-tooltip-color: rgb(226, 238, 248);
7
7
  --tcv-x-color: red;
8
8
  --tcv-y-color: green;
9
9
  --tcv-z-color: blue;
10
10
  --tcv-shadow: rgba(0, 0, 0, 0.4);
11
+ --tcv-menu-shadow: rgba(127, 127, 127, 0.4);
11
12
  --tcv-scrollbar-hover: rgba(0, 0, 0, 0.3);
12
13
  --tcv-scrollbar-active: rgba(0, 0, 0, 0.5);
13
14
  --tcv-scrollbar-thumb: rgba(0, 0, 0, 0.1);
@@ -16,13 +17,14 @@
16
17
  [data-theme="dark"] {
17
18
  --tcv-font-color: #ddd;
18
19
  --tcv-bg-color: #444;
19
- --tcv-bg-overlay-color: rgba(68, 68, 68, 0.6);
20
+ --tcv-bg-overlay-color: rgba(68, 68, 68, 0.7);
20
21
  --tcv-bg-highlight-color: rgb(102, 102, 102);
21
22
  --tcv-bg-tooltip-color: rgb(77, 109, 138);
22
23
  --tcv-x-color: rgb(255, 69, 0);
23
24
  --tcv-y-color: rgb(50, 205, 50);
24
25
  --tcv-z-color: rgb(59, 158, 255);
25
26
  --tcv-shadow: rgba(255, 255, 255, 0.6);
27
+ --tcv-menu-shadow: rgba(127, 127, 127, 0.6);
26
28
  --tcv-scrollbar-hover: rgba(255, 255, 255, 0.4);
27
29
  --tcv-scrollbar-active: rgba(255, 255, 255, 0.6);
28
30
  --tcv-scrollbar-thumb: rgba(255, 255, 255, 0.2);
@@ -62,7 +64,7 @@ canvas {
62
64
 
63
65
  .tcv_cad_view_glass {
64
66
  position: absolute !important;
65
- left: 16px;
67
+ left: 4px;
66
68
  }
67
69
 
68
70
  .tcv_cad_tree_toggles {
@@ -120,6 +122,17 @@ canvas {
120
122
  background: var(--tcv-bg-overlay-color);
121
123
  }
122
124
 
125
+ .tcv_small_info_btn {
126
+ width: 24px !important;
127
+ height: 14px !important;
128
+ font-size: 12px !important;
129
+ color: var(--tcv-font-color);
130
+ border: 1px solid var(--tcv-bg-overlay-color);
131
+ font-family: "Courier New", Courier, monospace;
132
+ font-weight: bold;
133
+ margin-left: 2px;
134
+ }
135
+
123
136
  .tcv_tcv_info_table {
124
137
  display: block;
125
138
  overflow-x: visible;
@@ -204,7 +217,7 @@ th {
204
217
  margin: 0;
205
218
  padding: 0px;
206
219
  position: absolute;
207
- right: 2px;
220
+ right: 0px;
208
221
  bottom: 0px;
209
222
  z-index: 100;
210
223
  }
@@ -263,7 +276,7 @@ th {
263
276
  }
264
277
 
265
278
  .tcv_btn_highlight {
266
- border: 1px solid var(--tcv-shadow);
279
+ outline: 1px solid var(--tcv-shadow);
267
280
  }
268
281
 
269
282
  .tcv_small_btn {
@@ -273,13 +286,14 @@ th {
273
286
  color: var(--tcv-font-color);
274
287
  /* border: 1px solid var(--tcv-bg-overlay-color); */
275
288
  }
289
+
276
290
  .tcv_small_btn:hover {
277
291
  background-color: var(--tcv-bg-overlay-color);
278
292
  }
279
293
 
280
294
  .tcv_btn:hover {
281
295
  box-shadow: 1px 1px 1px 0 var(--tcv-shadow);
282
- background-color: var(--tcv-bg-overlay-color);
296
+ background-color: var(--tcv-bg-highlight-color);
283
297
  }
284
298
 
285
299
  .tcv_btn:active {
@@ -314,7 +328,7 @@ input[type="button"] {
314
328
  }
315
329
 
316
330
  .tcv_tab:hover {
317
- background-color: var(--tcv-bg-overlay-color);
331
+ background-color: var(--tcv-bg-highlight-color);
318
332
  font-weight: bold;
319
333
  }
320
334
 
@@ -328,12 +342,12 @@ input[type="button"] {
328
342
 
329
343
  .tcv_tab-selected {
330
344
  border-bottom: none;
331
- /* font-weight: bold; */
345
+ font-weight: bold;
332
346
  }
333
347
 
334
348
  .tcv_tab-unselected {
335
349
  border-bottom: 1px solid lightgray;
336
- /* font-weight: normal; */
350
+ font-weight: normal;
337
351
  }
338
352
 
339
353
  .tcv_vertical-center {
@@ -359,18 +373,53 @@ input[type="button"] {
359
373
  margin-left: 6px;
360
374
  }
361
375
 
362
- .tcv_grid-dropdown {
376
+ .tcv_more-dropdown {
363
377
  position: relative;
364
378
  display: inline-block;
365
379
  }
366
380
 
367
- .tcv_grid-content {
381
+ .tcv_more-btn {
382
+ border: 0px;
383
+ background-color: transparent;
384
+ font-size: 14px;
385
+ color: var(--tcv-font-color);
386
+ }
387
+
388
+ .tcv_dropdown-content {
368
389
  display: none;
369
390
  position: absolute;
370
- min-width: 18px;
371
- box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
391
+ box-shadow: 0px 4px 8px 0px var(--tcv-menu-shadow);
372
392
  z-index: 200;
373
- background-color: var(--tcv-bg-highlight-color);
393
+ background-color: var(--tcv-bg-color);
394
+ padding-top: 8px;
395
+ padding-bottom: 2px;
396
+ }
397
+
398
+ .tcv_dropdown-entry {
399
+ margin-top: 6px;
400
+ margin-bottom: 6px;
401
+ }
402
+
403
+ .tcv_more_icon {
404
+ font-size: 10px;
405
+ margin-left: 4px;
406
+ }
407
+
408
+ .tcv_more-content {
409
+ width: 115px;
410
+ }
411
+
412
+ .tcv_more-dropdown:hover .tcv_more-content {
413
+ display: block;
414
+ }
415
+
416
+ .tcv_grid-dropdown {
417
+ position: relative;
418
+ display: inline-block;
419
+ }
420
+
421
+ .tcv_grid-content {
422
+ width: 60px;
374
423
  }
375
424
 
376
425
  .tcv_grid-dropdown:hover .tcv_grid-content {
@@ -497,6 +546,8 @@ input[type="button"] {
497
546
  border-radius: 2px;
498
547
  margin-top: 2.5em;
499
548
  padding: 2px;
549
+ margin-left: 24px;
550
+ z-index: 200;
500
551
  }
501
552
 
502
553
  [data-tooltip]:hover:before {
package/dist/three-cad-viewer.esm.css CHANGED
@@ -1,13 +1,14 @@
1
1
  [data-theme="light"] {
2
2
  --tcv-font-color: #333;
3
3
  --tcv-bg-color: #fff;
4
- --tcv-bg-overlay-color: rgba(255, 255, 255, 0.6);
4
+ --tcv-bg-overlay-color: rgba(255, 255, 255, 0.7);
5
5
  --tcv-bg-highlight-color: #eee;
6
6
  --tcv-bg-tooltip-color: rgb(226, 238, 248);
7
7
  --tcv-x-color: red;
8
8
  --tcv-y-color: green;
9
9
  --tcv-z-color: blue;
10
10
  --tcv-shadow: rgba(0, 0, 0, 0.4);
11
+ --tcv-menu-shadow: rgba(127, 127, 127, 0.4);
11
12
  --tcv-scrollbar-hover: rgba(0, 0, 0, 0.3);
12
13
  --tcv-scrollbar-active: rgba(0, 0, 0, 0.5);
13
14
  --tcv-scrollbar-thumb: rgba(0, 0, 0, 0.1);
@@ -16,13 +17,14 @@
16
17
  [data-theme="dark"] {
17
18
  --tcv-font-color: #ddd;
18
19
  --tcv-bg-color: #444;
19
- --tcv-bg-overlay-color: rgba(68, 68, 68, 0.6);
20
+ --tcv-bg-overlay-color: rgba(68, 68, 68, 0.7);
20
21
  --tcv-bg-highlight-color: rgb(102, 102, 102);
21
22
  --tcv-bg-tooltip-color: rgb(77, 109, 138);
22
23
  --tcv-x-color: rgb(255, 69, 0);
23
24
  --tcv-y-color: rgb(50, 205, 50);
24
25
  --tcv-z-color: rgb(59, 158, 255);
25
26
  --tcv-shadow: rgba(255, 255, 255, 0.6);
27
+ --tcv-menu-shadow: rgba(127, 127, 127, 0.6);
26
28
  --tcv-scrollbar-hover: rgba(255, 255, 255, 0.4);
27
29
  --tcv-scrollbar-active: rgba(255, 255, 255, 0.6);
28
30
  --tcv-scrollbar-thumb: rgba(255, 255, 255, 0.2);
@@ -62,7 +64,7 @@ canvas {
62
64
 
63
65
  .tcv_cad_view_glass {
64
66
  position: absolute !important;
65
- left: 16px;
67
+ left: 4px;
66
68
  }
67
69
 
68
70
  .tcv_cad_tree_toggles {
@@ -120,6 +122,17 @@ canvas {
120
122
  background: var(--tcv-bg-overlay-color);
121
123
  }
122
124
 
125
+ .tcv_small_info_btn {
126
+ width: 24px !important;
127
+ height: 14px !important;
128
+ font-size: 12px !important;
129
+ color: var(--tcv-font-color);
130
+ border: 1px solid var(--tcv-bg-overlay-color);
131
+ font-family: "Courier New", Courier, monospace;
132
+ font-weight: bold;
133
+ margin-left: 2px;
134
+ }
135
+
123
136
  .tcv_tcv_info_table {
124
137
  display: block;
125
138
  overflow-x: visible;
@@ -204,7 +217,7 @@ th {
204
217
  margin: 0;
205
218
  padding: 0px;
206
219
  position: absolute;
207
- right: 2px;
220
+ right: 0px;
208
221
  bottom: 0px;
209
222
  z-index: 100;
210
223
  }
@@ -263,7 +276,7 @@ th {
263
276
  }
264
277
 
265
278
  .tcv_btn_highlight {
266
- border: 1px solid var(--tcv-shadow);
279
+ outline: 1px solid var(--tcv-shadow);
267
280
  }
268
281
 
269
282
  .tcv_small_btn {
@@ -273,13 +286,14 @@ th {
273
286
  color: var(--tcv-font-color);
274
287
  /* border: 1px solid var(--tcv-bg-overlay-color); */
275
288
  }
289
+
276
290
  .tcv_small_btn:hover {
277
291
  background-color: var(--tcv-bg-overlay-color);
278
292
  }
279
293
 
280
294
  .tcv_btn:hover {
281
295
  box-shadow: 1px 1px 1px 0 var(--tcv-shadow);
282
- background-color: var(--tcv-bg-overlay-color);
296
+ background-color: var(--tcv-bg-highlight-color);
283
297
  }
284
298
 
285
299
  .tcv_btn:active {
@@ -314,7 +328,7 @@ input[type="button"] {
314
328
  }
315
329
 
316
330
  .tcv_tab:hover {
317
- background-color: var(--tcv-bg-overlay-color);
331
+ background-color: var(--tcv-bg-highlight-color);
318
332
  font-weight: bold;
319
333
  }
320
334
 
@@ -328,12 +342,12 @@ input[type="button"] {
328
342
 
329
343
  .tcv_tab-selected {
330
344
  border-bottom: none;
331
- /* font-weight: bold; */
345
+ font-weight: bold;
332
346
  }
333
347
 
334
348
  .tcv_tab-unselected {
335
349
  border-bottom: 1px solid lightgray;
336
- /* font-weight: normal; */
350
+ font-weight: normal;
337
351
  }
338
352
 
339
353
  .tcv_vertical-center {
@@ -359,18 +373,53 @@ input[type="button"] {
359
373
  margin-left: 6px;
360
374
  }
361
375
 
362
- .tcv_grid-dropdown {
376
+ .tcv_more-dropdown {
363
377
  position: relative;
364
378
  display: inline-block;
365
379
  }
366
380
 
367
- .tcv_grid-content {
381
+ .tcv_more-btn {
382
+ border: 0px;
383
+ background-color: transparent;
384
+ font-size: 14px;
385
+ color: var(--tcv-font-color);
386
+ }
387
+
388
+ .tcv_dropdown-content {
368
389
  display: none;
369
390
  position: absolute;
370
- min-width: 18px;
371
- box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
391
+ box-shadow: 0px 4px 8px 0px var(--tcv-menu-shadow);
372
392
  z-index: 200;
373
- background-color: var(--tcv-bg-highlight-color);
393
+ background-color: var(--tcv-bg-color);
394
+ padding-top: 8px;
395
+ padding-bottom: 2px;
396
+ }
397
+
398
+ .tcv_dropdown-entry {
399
+ margin-top: 6px;
400
+ margin-bottom: 6px;
401
+ }
402
+
403
+ .tcv_more_icon {
404
+ font-size: 10px;
405
+ margin-left: 4px;
406
+ }
407
+
408
+ .tcv_more-content {
409
+ width: 115px;
410
+ }
411
+
412
+ .tcv_more-dropdown:hover .tcv_more-content {
413
+ display: block;
414
+ }
415
+
416
+ .tcv_grid-dropdown {
417
+ position: relative;
418
+ display: inline-block;
419
+ }
420
+
421
+ .tcv_grid-content {
422
+ width: 60px;
374
423
  }
375
424
 
376
425
  .tcv_grid-dropdown:hover .tcv_grid-content {
@@ -497,6 +546,8 @@ input[type="button"] {
497
546
  border-radius: 2px;
498
547
  margin-top: 2.5em;
499
548
  padding: 2px;
549
+ margin-left: 24px;
550
+ z-index: 200;
500
551
  }
501
552
 
502
553
  [data-tooltip]:hover:before {