@zhangly1403/dxfviewer 1.3.0 → 1.4.0

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 CHANGED
@@ -19,7 +19,6 @@ yarn add @zhangly1403/dxfviewer
19
19
  ```tsx
20
20
  import React from 'react';
21
21
  import { DxfViewerMain } from '@zhangly1403/dxfviewer';
22
- import '@zhangly1403/dxfviewer/style.css';
23
22
 
24
23
  function App() {
25
24
  return (
@@ -70,7 +69,6 @@ yarn add @zhangly1403/dxfviewer
70
69
  ```tsx
71
70
  import React, { useState } from 'react';
72
71
  import { DxfViewerMain } from '@zhangly1403/dxfviewer';
73
- import '@zhangly1403/dxfviewer/style.css';
74
72
 
75
73
  function App() {
76
74
  const [lang, setLang] = useState('zh');
@@ -1,3 +1,525 @@
1
+ (function() {
2
+ "use strict";
3
+ try {
4
+ if (typeof document != "undefined") {
5
+ var elementStyle = document.createElement("style");
6
+ elementStyle.appendChild(document.createTextNode(`:root {\r
7
+ /* Light Theme (Default) */\r
8
+ --bg-primary: #ffffff;\r
9
+ --bg-secondary: #f3f3f3;\r
10
+ --bg-tertiary: #eeeeee;\r
11
+ --bg-hover: #e5e5e5;\r
12
+ --bg-selected: #007acc;\r
13
+ \r
14
+ --border-color: #cccccc;\r
15
+ --text-primary: #333333;\r
16
+ --text-secondary: #666666;\r
17
+ --text-bright: #000000;\r
18
+ \r
19
+ --accent-blue: #007acc;\r
20
+ --accent-blue-hover: #0062a3;\r
21
+ \r
22
+ --toolbar-height: 30px;\r
23
+ --sidebar-width: 260px;\r
24
+ --properties-width: 320px;\r
25
+ --status-bar-bg: #2d4a76;\r
26
+ }\r
27
+ \r
28
+ .theme-dark {\r
29
+ --bg-primary: #1e1e1e;\r
30
+ --bg-secondary: #252526;\r
31
+ --bg-tertiary: #2d2d2d;\r
32
+ --bg-hover: #37373d;\r
33
+ --bg-selected: #37373d;\r
34
+ \r
35
+ --border-color: #3c3c3c;\r
36
+ --text-primary: #cccccc;\r
37
+ --text-secondary: #969696;\r
38
+ --text-bright: #ffffff;\r
39
+ }\r
40
+ \r
41
+ html, body {\r
42
+ margin: 0;\r
43
+ padding: 0;\r
44
+ height: 100%;\r
45
+ width: 100%;\r
46
+ overflow: hidden;\r
47
+ }\r
48
+ \r
49
+ body {\r
50
+ font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;\r
51
+ -webkit-font-smoothing: antialiased;\r
52
+ -moz-osx-font-smoothing: grayscale;\r
53
+ background-color: var(--bg-primary);\r
54
+ color: var(--text-primary);\r
55
+ font-size: 13px;\r
56
+ }\r
57
+ \r
58
+ .app-container {\r
59
+ display: flex;\r
60
+ flex-direction: column;\r
61
+ height: 100%;\r
62
+ width: 100%;\r
63
+ background-color: var(--bg-primary);\r
64
+ overflow: hidden;\r
65
+ position: relative;\r
66
+ flex: 1;\r
67
+ min-height: 0;\r
68
+ }\r
69
+ \r
70
+ /* Loading Overlay */\r
71
+ .loading-overlay {\r
72
+ position: absolute;\r
73
+ top: 0;\r
74
+ left: 0;\r
75
+ right: 0;\r
76
+ bottom: 0;\r
77
+ background-color: rgba(255, 255, 255, 0.7);\r
78
+ backdrop-filter: blur(2px);\r
79
+ z-index: 1000;\r
80
+ display: flex;\r
81
+ flex-direction: column;\r
82
+ align-items: center;\r
83
+ justify-content: center;\r
84
+ }\r
85
+ \r
86
+ .theme-dark .loading-overlay {\r
87
+ background-color: rgba(30, 30, 30, 0.7);\r
88
+ }\r
89
+ \r
90
+ .loading-box {\r
91
+ width: 200px;\r
92
+ text-align: center;\r
93
+ }\r
94
+ \r
95
+ .loading-text {\r
96
+ font-size: 13px;\r
97
+ font-weight: 600;\r
98
+ color: var(--text-primary);\r
99
+ margin-bottom: 12px;\r
100
+ }\r
101
+ \r
102
+ .progress-bar-container {\r
103
+ height: 4px;\r
104
+ width: 100%;\r
105
+ background-color: var(--bg-tertiary);\r
106
+ border-radius: 2px;\r
107
+ overflow: hidden;\r
108
+ }\r
109
+ \r
110
+ .progress-bar {\r
111
+ height: 100%;\r
112
+ background-color: var(--accent-blue);\r
113
+ transition: width 0.2s ease-out;\r
114
+ }\r
115
+ \r
116
+ .progress-text {\r
117
+ font-size: 10px;\r
118
+ color: var(--text-secondary);\r
119
+ font-family: monospace;\r
120
+ margin-top: 6px;\r
121
+ }\r
122
+ \r
123
+ .main-content {\r
124
+ display: flex;\r
125
+ flex: 1;\r
126
+ overflow: hidden;\r
127
+ position: relative;\r
128
+ min-height: 0; /* Fix flex shrink issue */\r
129
+ }\r
130
+ \r
131
+ .viewer-container {\r
132
+ flex: 1;\r
133
+ display: flex;\r
134
+ flex-direction: column;\r
135
+ overflow: hidden;\r
136
+ position: relative;\r
137
+ min-height: 0; /* Fix flex shrink issue */\r
138
+ }\r
139
+ \r
140
+ /* Toolbar Styles */\r
141
+ .toolbar {\r
142
+ height: var(--toolbar-height);\r
143
+ background-color: var(--bg-secondary);\r
144
+ border-bottom: 1px solid var(--border-color);\r
145
+ display: flex;\r
146
+ align-items: center;\r
147
+ padding: 0 4px;\r
148
+ gap: 2px;\r
149
+ z-index: 500;\r
150
+ user-select: none;\r
151
+ }\r
152
+ \r
153
+ .menu-item {\r
154
+ position: relative;\r
155
+ padding: 0 10px;\r
156
+ height: calc(var(--toolbar-height) - 4px);\r
157
+ display: flex;\r
158
+ align-items: center;\r
159
+ cursor: pointer;\r
160
+ color: var(--text-primary);\r
161
+ border-radius: 2px;\r
162
+ font-size: 12px;\r
163
+ transition: background-color 0.1s;\r
164
+ }\r
165
+ \r
166
+ .menu-item:hover {\r
167
+ background-color: var(--bg-hover);\r
168
+ }\r
169
+ \r
170
+ .menu-item.active {\r
171
+ background-color: var(--bg-hover);\r
172
+ }\r
173
+ \r
174
+ .dropdown-menu {\r
175
+ position: absolute;\r
176
+ top: 100%;\r
177
+ left: 0;\r
178
+ background-color: #ffffff;\r
179
+ border: 1px solid #cccccc;\r
180
+ box-shadow: 0 2px 8px rgba(0,0,0,0.15);\r
181
+ border-radius: 0;\r
182
+ padding: 2px 0;\r
183
+ min-width: 160px;\r
184
+ z-index: 600;\r
185
+ margin-top: 1px;\r
186
+ }\r
187
+ \r
188
+ .theme-dark .dropdown-menu {\r
189
+ background-color: var(--bg-secondary);\r
190
+ border-color: var(--border-color);\r
191
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);\r
192
+ }\r
193
+ \r
194
+ .dropdown-item {\r
195
+ padding: 6px 12px;\r
196
+ display: flex;\r
197
+ align-items: center;\r
198
+ justify-content: space-between;\r
199
+ cursor: pointer;\r
200
+ color: #333333;\r
201
+ font-size: 12px;\r
202
+ }\r
203
+ \r
204
+ .theme-dark .dropdown-item {\r
205
+ color: var(--text-primary);\r
206
+ }\r
207
+ \r
208
+ .dropdown-item:hover {\r
209
+ background-color: var(--accent-blue);\r
210
+ color: #ffffff;\r
211
+ }\r
212
+ \r
213
+ .dropdown-item.checked::after {\r
214
+ content: '✓';\r
215
+ margin-left: 8px;\r
216
+ font-weight: bold;\r
217
+ }\r
218
+ \r
219
+ .divider {\r
220
+ height: 1px;\r
221
+ background-color: var(--border-color);\r
222
+ margin: 2px 0;\r
223
+ }\r
224
+ \r
225
+ /* Sidebar Styles */\r
226
+ .sidebar {\r
227
+ width: var(--sidebar-width);\r
228
+ background-color: var(--bg-secondary);\r
229
+ border-right: 1px solid var(--border-color);\r
230
+ display: flex;\r
231
+ flex-direction: column;\r
232
+ height: 100%;\r
233
+ flex-shrink: 0;\r
234
+ z-index: 200;\r
235
+ }\r
236
+ \r
237
+ .sidebar-header {\r
238
+ height: 28px;\r
239
+ background-color: var(--bg-tertiary);\r
240
+ border-bottom: 1px solid var(--border-color);\r
241
+ display: flex;\r
242
+ align-items: center;\r
243
+ padding: 0 10px;\r
244
+ font-size: 11px;\r
245
+ font-weight: 600;\r
246
+ color: var(--text-secondary);\r
247
+ }\r
248
+ \r
249
+ .sidebar-content {\r
250
+ flex: 1;\r
251
+ overflow-y: auto;\r
252
+ scrollbar-width: thin;\r
253
+ }\r
254
+ \r
255
+ .layer-row {\r
256
+ display: flex;\r
257
+ align-items: center;\r
258
+ height: 26px;\r
259
+ padding: 0 6px;\r
260
+ cursor: pointer;\r
261
+ font-size: 12px;\r
262
+ color: var(--text-primary);\r
263
+ }\r
264
+ \r
265
+ .layer-row:hover {\r
266
+ background-color: var(--bg-hover);\r
267
+ }\r
268
+ \r
269
+ .chevron {\r
270
+ width: 12px;\r
271
+ height: 12px;\r
272
+ margin-right: 4px;\r
273
+ color: var(--text-secondary);\r
274
+ transition: transform 0.1s;\r
275
+ }\r
276
+ \r
277
+ .chevron.expanded {\r
278
+ transform: rotate(90deg);\r
279
+ }\r
280
+ \r
281
+ .layer-icon {\r
282
+ width: 10px;\r
283
+ height: 10px;\r
284
+ border-radius: 1px;\r
285
+ margin-right: 6px;\r
286
+ border: 1px solid rgba(0,0,0,0.1);\r
287
+ }\r
288
+ \r
289
+ .layer-name {\r
290
+ flex: 1;\r
291
+ overflow: hidden;\r
292
+ text-overflow: ellipsis;\r
293
+ white-space: nowrap;\r
294
+ }\r
295
+ \r
296
+ .layer-count {\r
297
+ font-size: 10px;\r
298
+ color: var(--text-secondary);\r
299
+ margin-left: 6px;\r
300
+ opacity: 0.7;\r
301
+ }\r
302
+ \r
303
+ .entity-row {\r
304
+ display: flex;\r
305
+ align-items: center;\r
306
+ height: 24px;\r
307
+ padding: 0 6px 0 24px;\r
308
+ cursor: pointer;\r
309
+ font-size: 11px;\r
310
+ color: var(--text-secondary);\r
311
+ }\r
312
+ \r
313
+ .entity-row:hover {\r
314
+ background-color: var(--bg-hover);\r
315
+ color: var(--text-primary);\r
316
+ }\r
317
+ \r
318
+ .entity-row.selected {\r
319
+ background-color: #e8f2ff;\r
320
+ color: var(--accent-blue);\r
321
+ }\r
322
+ \r
323
+ .theme-dark .entity-row.selected {\r
324
+ background-color: var(--bg-selected);\r
325
+ color: #ffffff;\r
326
+ }\r
327
+ \r
328
+ .entity-icon {\r
329
+ width: 14px;\r
330
+ text-align: center;\r
331
+ font-family: monospace;\r
332
+ font-size: 9px;\r
333
+ margin-right: 6px;\r
334
+ opacity: 0.6;\r
335
+ }\r
336
+ \r
337
+ .entity-name {\r
338
+ flex: 1;\r
339
+ overflow: hidden;\r
340
+ text-overflow: ellipsis;\r
341
+ white-space: nowrap;\r
342
+ }\r
343
+ \r
344
+ /* Properties Panel */\r
345
+ .properties-panel {\r
346
+ width: var(--properties-width);\r
347
+ background-color: var(--bg-secondary);\r
348
+ border-left: 1px solid var(--border-color);\r
349
+ display: flex;\r
350
+ flex-direction: column;\r
351
+ height: 100%;\r
352
+ flex-shrink: 0;\r
353
+ z-index: 200;\r
354
+ }\r
355
+ \r
356
+ .properties-header {\r
357
+ height: 28px;\r
358
+ background-color: var(--bg-tertiary);\r
359
+ border-bottom: 1px solid var(--border-color);\r
360
+ display: flex;\r
361
+ align-items: center;\r
362
+ padding: 0 10px;\r
363
+ font-size: 11px;\r
364
+ font-weight: 600;\r
365
+ color: var(--text-secondary);\r
366
+ }\r
367
+ \r
368
+ .properties-content {\r
369
+ flex: 1;\r
370
+ overflow-y: auto;\r
371
+ padding: 4px 0;\r
372
+ }\r
373
+ \r
374
+ .properties-table {\r
375
+ width: 100%;\r
376
+ border-collapse: collapse;\r
377
+ }\r
378
+ \r
379
+ .property-row {\r
380
+ border-bottom: 1px solid var(--border-color);\r
381
+ }\r
382
+ \r
383
+ .property-row:hover {\r
384
+ background-color: var(--bg-hover);\r
385
+ }\r
386
+ \r
387
+ .property-label-cell {\r
388
+ padding: 4px 10px;\r
389
+ color: var(--text-secondary);\r
390
+ font-size: 11px;\r
391
+ width: 40%;\r
392
+ vertical-align: top;\r
393
+ }\r
394
+ \r
395
+ .property-value-cell {\r
396
+ padding: 4px 10px;\r
397
+ color: var(--text-primary);\r
398
+ font-size: 11px;\r
399
+ word-break: break-all;\r
400
+ }\r
401
+ \r
402
+ .color-preview-container {\r
403
+ display: flex;\r
404
+ align-items: center;\r
405
+ gap: 6px;\r
406
+ }\r
407
+ \r
408
+ .color-swatch {\r
409
+ width: 12px;\r
410
+ height: 12px;\r
411
+ border-radius: 1px;\r
412
+ border: 1px solid rgba(0,0,0,0.1);\r
413
+ }\r
414
+ \r
415
+ /* Viewer Wrapper */\r
416
+ .viewer-wrapper {\r
417
+ display: flex;\r
418
+ flex-direction: column;\r
419
+ flex: 1;\r
420
+ height: 100%;\r
421
+ position: relative;\r
422
+ overflow: hidden;\r
423
+ }\r
424
+ \r
425
+ .canvas-container {\r
426
+ flex: 1;\r
427
+ position: relative;\r
428
+ cursor: default !important; /* Disallow changing mouse shape */\r
429
+ user-select: none;\r
430
+ overflow: hidden;\r
431
+ background-color: var(--canvas-bg, #212121);\r
432
+ }\r
433
+ \r
434
+ .canvas-container canvas {\r
435
+ display: block;\r
436
+ margin: 0;\r
437
+ padding: 0;\r
438
+ }\r
439
+ \r
440
+ .selection-box {\r
441
+ position: absolute;\r
442
+ border: 1px solid #0078d4;\r
443
+ background-color: rgba(0, 120, 212, 0.2);\r
444
+ pointer-events: none;\r
445
+ z-index: 100;\r
446
+ }\r
447
+ \r
448
+ /* Status Bar */\r
449
+ .status-bar {\r
450
+ height: 24px;\r
451
+ background-color: var(--status-bar-bg);\r
452
+ color: #ffffff;\r
453
+ display: flex;\r
454
+ align-items: center;\r
455
+ padding: 0 12px;\r
456
+ font-size: 11px;\r
457
+ z-index: 1000;\r
458
+ flex-shrink: 0;\r
459
+ }\r
460
+ \r
461
+ .status-coords {\r
462
+ display: flex;\r
463
+ gap: 12px;\r
464
+ }\r
465
+ \r
466
+ .status-left {\r
467
+ flex: 1;\r
468
+ display: flex;\r
469
+ justify-content: flex-start;\r
470
+ }\r
471
+ \r
472
+ .status-center {\r
473
+ flex: 2;\r
474
+ display: flex;\r
475
+ justify-content: center;\r
476
+ font-weight: 500;\r
477
+ }\r
478
+ \r
479
+ .status-right {\r
480
+ flex: 1;\r
481
+ display: flex;\r
482
+ justify-content: flex-end;\r
483
+ }\r
484
+ \r
485
+ .status-value {\r
486
+ font-family: monospace;\r
487
+ color: #ffffff;\r
488
+ margin-left: 2px;\r
489
+ }\r
490
+ \r
491
+ /* Scrollbar Styles */\r
492
+ ::-webkit-scrollbar {\r
493
+ width: 10px;\r
494
+ height: 10px;\r
495
+ }\r
496
+ \r
497
+ ::-webkit-scrollbar-track {\r
498
+ background: transparent;\r
499
+ }\r
500
+ \r
501
+ ::-webkit-scrollbar-thumb {\r
502
+ background: #bbbbbb;\r
503
+ border-radius: 4px;\r
504
+ }\r
505
+ \r
506
+ .theme-dark ::-webkit-scrollbar-thumb {\r
507
+ background: #555555;\r
508
+ }\r
509
+ \r
510
+ ::-webkit-scrollbar-thumb:hover {\r
511
+ background: #999999;\r
512
+ }\r
513
+ \r
514
+ .hidden {\r
515
+ display: none;\r
516
+ }`));
517
+ document.head.appendChild(elementStyle);
518
+ }
519
+ } catch (e) {
520
+ console.error("vite-plugin-css-injected-by-js", e);
521
+ }
522
+ })();
1
523
  import require$$1, { useRef, useState, useLayoutEffect, useEffect, useMemo, useCallback } from "react";
2
524
  import require$$2 from "react-dom";
3
525
  function getDefaultExportFromCjs(x) {