@mlightcad/cad-viewer 1.0.22 → 1.0.23
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 +87 -10
- package/dist/app/app.d.ts +1 -1
- package/dist/app/app.d.ts.map +1 -1
- package/dist/app/register.d.ts.map +1 -1
- package/dist/component/MlCadViewer.vue.d.ts +5 -2
- package/dist/component/MlCadViewer.vue.d.ts.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.js +955 -916
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -7,6 +7,8 @@ CAD Viewer is a **high-performance** Vue 3 component for viewing and editing CAD
|
|
|
7
7
|
- **High-performance** CAD editing and viewing with smooth 60+ FPS rendering
|
|
8
8
|
- **No backend required** - Files are parsed and processed entirely in the browser
|
|
9
9
|
- **Enhanced data security** - Files never leave your device, ensuring complete privacy
|
|
10
|
+
- **Local file support** - Load DWG/DXF files directly from your computer via file dialog or drag & drop
|
|
11
|
+
- **Remote file support** - Load CAD files from URLs automatically
|
|
10
12
|
- **Easy integration** - No server setup or backend infrastructure needed for third-party integration
|
|
11
13
|
- **Customizable UI** - Control visibility of toolbars, command line, coordinates, and performance stats
|
|
12
14
|
- Modern UI optimized for large CAD file handling
|
|
@@ -20,6 +22,7 @@ CAD Viewer is a **high-performance** Vue 3 component for viewing and editing CAD
|
|
|
20
22
|
Use `cad-viewer` if you want a **ready-to-use Vue 3 component** for viewing and editing CAD files with a modern UI, dialogs, toolbars, and state management. This package is ideal if:
|
|
21
23
|
|
|
22
24
|
- You want to quickly embed a high-performance CAD viewer/editor into your Vue application with minimal setup.
|
|
25
|
+
- You need support for both local file loading (from user's computer) and remote file loading (from URLs).
|
|
23
26
|
- You need a solution that handles file loading, rendering, layer/entity management, and user interactions out of the box.
|
|
24
27
|
- You want seamless integration with optimized SVG and THREE.js renderers, internationalization, and theming.
|
|
25
28
|
- You do **not** want to build your own UI from scratch.
|
|
@@ -31,11 +34,61 @@ Use `cad-viewer` if you want a **ready-to-use Vue 3 component** for viewing and
|
|
|
31
34
|
This Vue 3 component operates entirely in the browser with **no backend dependencies**. DWG/DXF files are parsed and processed locally using WebAssembly and JavaScript, providing:
|
|
32
35
|
|
|
33
36
|
- **Zero server requirements** - Deploy the component anywhere with just static file hosting
|
|
34
|
-
- **Complete data privacy** - CAD files never leave the user's device
|
|
37
|
+
- **Complete data privacy** - CAD files never leave the user's device, whether loaded locally or from URLs
|
|
38
|
+
- **Local file support** - Users can load files directly from their computer using the built-in file dialog
|
|
39
|
+
- **Remote file support** - Automatically load files from URLs when provided
|
|
35
40
|
- **Instant integration** - No complex backend setup or API configuration needed
|
|
36
41
|
- **Offline capability** - Works without internet connectivity once loaded
|
|
37
42
|
- **Third-party friendly** - Easy to embed in any Vue 3 application without server-side concerns
|
|
38
43
|
|
|
44
|
+
## File Loading Methods
|
|
45
|
+
|
|
46
|
+
The MlCadViewer component supports multiple ways to load CAD files:
|
|
47
|
+
|
|
48
|
+
### 1. Local File Loading
|
|
49
|
+
Users can load files directly from their computer:
|
|
50
|
+
- **File Dialog**: Click the main menu (☰) and select "Open" to browse and select local DWG/DXF files
|
|
51
|
+
- **Drag & Drop**: Drag and drop CAD files directly onto the viewer (if implemented in your application)
|
|
52
|
+
- **File Input**: Use the built-in file reader component for programmatic file selection
|
|
53
|
+
- **Component Prop**: Pass a File object directly to the `localFile` prop for automatic loading
|
|
54
|
+
|
|
55
|
+
#### Example: Using localFile prop with file input
|
|
56
|
+
```vue
|
|
57
|
+
<template>
|
|
58
|
+
<div>
|
|
59
|
+
<input
|
|
60
|
+
type="file"
|
|
61
|
+
accept=".dwg,.dxf"
|
|
62
|
+
@change="handleFileSelect"
|
|
63
|
+
/>
|
|
64
|
+
<MlCadViewer
|
|
65
|
+
:local-file="selectedFile"
|
|
66
|
+
/>
|
|
67
|
+
</div>
|
|
68
|
+
</template>
|
|
69
|
+
|
|
70
|
+
<script setup lang="ts">
|
|
71
|
+
import { ref } from 'vue'
|
|
72
|
+
import { MlCadViewer } from '@mlightcad/cad-viewer'
|
|
73
|
+
|
|
74
|
+
const selectedFile = ref<File | undefined>()
|
|
75
|
+
|
|
76
|
+
const handleFileSelect = (event: Event) => {
|
|
77
|
+
const target = event.target as HTMLInputElement
|
|
78
|
+
selectedFile.value = target.files?.[0]
|
|
79
|
+
}
|
|
80
|
+
</script>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### 2. Remote File Loading
|
|
84
|
+
Automatically load files from URLs:
|
|
85
|
+
- **URL Prop**: Provide a `url` prop to automatically load a file when the component mounts
|
|
86
|
+
- **Dynamic Loading**: Change the `url` prop to load different files without remounting the component
|
|
87
|
+
|
|
88
|
+
### 3. Supported File Formats
|
|
89
|
+
- **DWG files**: Binary AutoCAD drawing format (read as ArrayBuffer)
|
|
90
|
+
- **DXF files**: ASCII/binary AutoCAD drawing exchange format (read as text)
|
|
91
|
+
|
|
39
92
|
## Directory Structure (partial)
|
|
40
93
|
|
|
41
94
|
- `src/app/` – Application entry, store, and main logic
|
|
@@ -73,7 +126,20 @@ Then create one vue component as follows.
|
|
|
73
126
|
```vue
|
|
74
127
|
<template>
|
|
75
128
|
<div>
|
|
76
|
-
|
|
129
|
+
<!-- For local file loading (users can open files via menu) -->
|
|
130
|
+
<MlCADViewer :background="0x808080" />
|
|
131
|
+
|
|
132
|
+
<!-- For remote file loading (automatically loads from URL) -->
|
|
133
|
+
<!-- <MlCADViewer
|
|
134
|
+
:background="0x808080"
|
|
135
|
+
:url="'https://example.com/drawing.dwg'"
|
|
136
|
+
/> -->
|
|
137
|
+
|
|
138
|
+
<!-- For local file loading (automatically loads from File object) -->
|
|
139
|
+
<!-- <MlCADViewer
|
|
140
|
+
:background="0x808080"
|
|
141
|
+
:local-file="selectedFile"
|
|
142
|
+
/> -->
|
|
77
143
|
</div>
|
|
78
144
|
</template>
|
|
79
145
|
|
|
@@ -111,9 +177,9 @@ The `MlCadViewer` component accepts the following props:
|
|
|
111
177
|
| Property | Type | Default | Description |
|
|
112
178
|
|----------|------|---------|-------------|
|
|
113
179
|
| `locale` | `'en' \| 'zh' \| 'default'` | `'default'` | Sets the language for the component interface. Use `'en'` for English, `'zh'` for Chinese, or `'default'` to use the browser's default language. |
|
|
114
|
-
| `url` | `string` | `undefined` | Optional URL to automatically load a CAD file when the component mounts. The file will be fetched and opened automatically. |
|
|
180
|
+
| `url` | `string` | `undefined` | Optional URL to automatically load a CAD file when the component mounts. The file will be fetched and opened automatically. **Note**: If not provided, users can still load local files using the main menu "Open" option. |
|
|
181
|
+
| `localFile` | `File` | `undefined` | Optional local File object to automatically load a CAD file when the component mounts. The file will be read and opened automatically. **Note**: This takes precedence over the `url` prop if both are provided. |
|
|
115
182
|
| `wait` | `number` | `10` | When set to a positive number, the component will wait for DWG converter ready to use for the specified number of seconds before initializing. This is useful when you need to ensure DWG file support is available before the component becomes interactive. Set to `0` or negative value to disable waiting. |
|
|
116
|
-
| `canvasId` | `string` | **Required** | Canvas element ID for the CAD viewer. The component will automatically call `initializeCadViewer` with this ID during its mount lifecycle. |
|
|
117
183
|
| `background` | `number` | `undefined` | Background color as 24-bit hexadecimal RGB (e.g., `0x000000` for black, `0x808080` for gray). |
|
|
118
184
|
|
|
119
185
|
### UI Settings
|
|
@@ -130,10 +196,21 @@ The `MlCadViewer` reads its UI visibility from the global `AcApSettingManager` (
|
|
|
130
196
|
#### Example (recommended)
|
|
131
197
|
```vue
|
|
132
198
|
<template>
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
199
|
+
<!-- Local file loading - users can open files via main menu -->
|
|
200
|
+
<MlCadViewer locale="en" />
|
|
201
|
+
|
|
202
|
+
<!-- Remote file loading - automatically loads from URL -->
|
|
203
|
+
<!-- <MlCadViewer
|
|
204
|
+
locale="en"
|
|
205
|
+
:url="'https://example.com/drawing.dwg'"
|
|
206
|
+
:wait="10"
|
|
207
|
+
/> -->
|
|
136
208
|
|
|
209
|
+
<!-- Local file loading - automatically loads from File object -->
|
|
210
|
+
<!-- <MlCadViewer
|
|
211
|
+
locale="en"
|
|
212
|
+
:local-file="selectedFile"
|
|
213
|
+
/> -->
|
|
137
214
|
</template>
|
|
138
215
|
|
|
139
216
|
<script setup lang="ts">
|
|
@@ -158,13 +235,13 @@ AcApSettingManager.instance.isShowCommandLine = false
|
|
|
158
235
|
|
|
159
236
|
The `MlCadViewer` component includes:
|
|
160
237
|
|
|
161
|
-
- **Main Menu** - File operations, view controls, and settings
|
|
238
|
+
- **Main Menu** - File operations (including local file opening), view controls, and settings
|
|
162
239
|
- **Toolbars** - Drawing tools, zoom controls, and selection tools
|
|
163
240
|
- **Layer Manager** - Layer visibility and property management
|
|
164
241
|
- **Command Line** - AutoCAD-style command input
|
|
165
242
|
- **Status Bar** - Current position, zoom level, and system status
|
|
166
243
|
- **Dialog Manager** - Modal dialogs for various operations
|
|
167
|
-
- **File Reader** -
|
|
244
|
+
- **File Reader** - Local file loading via file dialog and drag-and-drop support
|
|
168
245
|
- **Entity Info** - Detailed information about selected entities
|
|
169
246
|
- **Language Selector** - UI language switching
|
|
170
247
|
- **Theme Support** - Dark/light mode toggle
|
|
@@ -173,7 +250,7 @@ The `MlCadViewer` component includes:
|
|
|
173
250
|
|
|
174
251
|
The component automatically handles various events:
|
|
175
252
|
|
|
176
|
-
- **File Loading** - Supports drag-and-drop and URL-based file loading
|
|
253
|
+
- **File Loading** - Supports local file loading (via file dialog), drag-and-drop, and URL-based file loading
|
|
177
254
|
- **Error Messages** - Displays user-friendly error messages for failed operations
|
|
178
255
|
- **Font Loading** - Handles missing fonts with appropriate notifications
|
|
179
256
|
- **System Messages** - Shows status updates and operation feedback
|
package/dist/app/app.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const initializeCadViewer: (
|
|
1
|
+
export declare const initializeCadViewer: (canvas: HTMLCanvasElement) => void;
|
|
2
2
|
//# sourceMappingURL=app.d.ts.map
|
package/dist/app/app.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../src/app/app.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAA;AACpC,OAAO,oBAAoB,CAAA;AAC3B,OAAO,qBAAqB,CAAA;AAM5B,eAAO,MAAM,mBAAmB,GAAI,
|
|
1
|
+
{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../src/app/app.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAA;AACpC,OAAO,oBAAoB,CAAA;AAC3B,OAAO,qBAAqB,CAAA;AAM5B,eAAO,MAAM,mBAAmB,GAAI,QAAQ,iBAAiB,SAI5D,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../../src/app/register.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../../src/app/register.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,YAAY,YAyBxB,CAAA;AAED,eAAO,MAAM,eAAe,YAY3B,CAAA"}
|
|
@@ -4,27 +4,30 @@ interface Props {
|
|
|
4
4
|
locale?: LocaleProp;
|
|
5
5
|
/** Optional URL to automatically load a CAD file on component mount */
|
|
6
6
|
url?: string;
|
|
7
|
+
/** Optional local File object to automatically load a CAD file on component mount */
|
|
8
|
+
localFile?: File;
|
|
7
9
|
/** Timeout in seconds to wait for DWG converter (libredwg.js) to load before proceeding */
|
|
8
10
|
wait?: number;
|
|
9
|
-
/** Canvas element ID for the CAD viewer. This is required to specify which canvas element to use */
|
|
10
|
-
canvasId: string;
|
|
11
11
|
/** Background color as 24-bit hexadecimal RGB number (e.g., 0x000000) */
|
|
12
12
|
background?: number;
|
|
13
13
|
}
|
|
14
14
|
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
|
|
15
15
|
locale: string;
|
|
16
16
|
url: undefined;
|
|
17
|
+
localFile: undefined;
|
|
17
18
|
wait: number;
|
|
18
19
|
background: undefined;
|
|
19
20
|
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
|
|
20
21
|
locale: string;
|
|
21
22
|
url: undefined;
|
|
23
|
+
localFile: undefined;
|
|
22
24
|
wait: number;
|
|
23
25
|
background: undefined;
|
|
24
26
|
}>>> & Readonly<{}>, {
|
|
25
27
|
locale: LocaleProp;
|
|
26
28
|
url: string;
|
|
27
29
|
background: number;
|
|
30
|
+
localFile: File;
|
|
28
31
|
wait: number;
|
|
29
32
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
30
33
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MlCadViewer.vue.d.ts","sourceRoot":"","sources":["../../src/component/MlCadViewer.vue"],"names":[],"mappings":"AAyCA;
|
|
1
|
+
{"version":3,"file":"MlCadViewer.vue.d.ts","sourceRoot":"","sources":["../../src/component/MlCadViewer.vue"],"names":[],"mappings":"AAyCA;AAsdA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAatC,UAAU,KAAK;IACb,0EAA0E;IAC1E,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,uEAAuE;IACvE,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,qFAAqF;IACrF,SAAS,CAAC,EAAE,IAAI,CAAA;IAChB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;;;;;;;;;;;;;;YATU,UAAU;SAEb,MAAM;gBAMC,MAAM;eAJP,IAAI;UAET,MAAM;;AAuYf,wBAMG;AAEH,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAC9B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAC7C,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KAAC,CAAC,GAC5C,CAAC,CAAC,CAAC,CAAC;CACP,CAAC;AACF,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC;AACF,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";body{margin:0;display:flex}body,html{height:100%}.
|
|
1
|
+
@charset "UTF-8";body{margin:0;display:flex}body,html{height:100%}.el-dialog{padding-bottom:8px;padding-top:8px}.el-dialog__headerbtn{height:36px;width:36px}html.dark{color-scheme:dark;--el-color-primary: #409eff;--el-color-primary-light-3: rgb(51, 117, 185);--el-color-primary-light-5: rgb(42, 89, 138);--el-color-primary-light-7: rgb(33, 61, 91);--el-color-primary-light-8: rgb(29, 48, 67);--el-color-primary-light-9: rgb(24, 34, 43);--el-color-primary-dark-2: rgb(102, 177, 255);--el-color-success: #67c23a;--el-color-success-light-3: rgb(78, 142, 47);--el-color-success-light-5: rgb(62, 107, 39);--el-color-success-light-7: rgb(45, 72, 31);--el-color-success-light-8: rgb(37, 55, 28);--el-color-success-light-9: rgb(28, 37, 24);--el-color-success-dark-2: rgb(133, 206, 97);--el-color-warning: #e6a23c;--el-color-warning-light-3: rgb(167, 119, 48);--el-color-warning-light-5: rgb(125, 91, 40);--el-color-warning-light-7: rgb(83, 63, 32);--el-color-warning-light-8: rgb(62, 48, 28);--el-color-warning-light-9: rgb(41, 34, 24);--el-color-warning-dark-2: rgb(235, 181, 99);--el-color-danger: #f56c6c;--el-color-danger-light-3: rgb(178, 82, 82);--el-color-danger-light-5: rgb(133, 64, 64);--el-color-danger-light-7: rgb(88, 46, 46);--el-color-danger-light-8: rgb(65, 38, 38);--el-color-danger-light-9: rgb(42, 29, 29);--el-color-danger-dark-2: rgb(247, 137, 137);--el-color-error: #f56c6c;--el-color-error-light-3: rgb(178, 82, 82);--el-color-error-light-5: rgb(133, 64, 64);--el-color-error-light-7: rgb(88, 46, 46);--el-color-error-light-8: rgb(65, 38, 38);--el-color-error-light-9: rgb(42, 29, 29);--el-color-error-dark-2: rgb(247, 137, 137);--el-color-info: #909399;--el-color-info-light-3: rgb(107, 109, 113);--el-color-info-light-5: rgb(82, 84, 87);--el-color-info-light-7: rgb(57, 58, 60);--el-color-info-light-8: rgb(45, 45, 47);--el-color-info-light-9: rgb(32, 33, 33);--el-color-info-dark-2: rgb(166, 169, 173);--el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .36), 0px 8px 20px rgba(0, 0, 0, .72);--el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, .72);--el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .72);--el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, .72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000;--el-bg-color-page: #0a0a0a;--el-bg-color: #141414;--el-bg-color-overlay: #1d1e1f;--el-text-color-primary: #E5EAF3;--el-text-color-regular: #CFD3DC;--el-text-color-secondary: #A3A6AD;--el-text-color-placeholder: #8D9095;--el-text-color-disabled: #6C6E72;--el-border-color-darker: #636466;--el-border-color-dark: #58585B;--el-border-color: #4C4D4F;--el-border-color-light: #414243;--el-border-color-lighter: #363637;--el-border-color-extra-light: #2B2B2C;--el-fill-color-darker: #424243;--el-fill-color-dark: #39393A;--el-fill-color: #303030;--el-fill-color-light: #262727;--el-fill-color-lighter: #1D1D1D;--el-fill-color-extra-light: #191919;--el-fill-color-blank: transparent;--el-mask-color: rgba(0, 0, 0, .8);--el-mask-color-extra-light: rgba(0, 0, 0, .3)}html.dark .el-button{--el-button-disabled-text-color: rgba(255, 255, 255, .5)}html.dark .el-card{--el-card-bg-color: var(--el-bg-color-overlay)}html.dark .el-empty{--el-empty-fill-color-0: var(--el-color-black);--el-empty-fill-color-1: #4b4b52;--el-empty-fill-color-2: #36383d;--el-empty-fill-color-3: #1e1e20;--el-empty-fill-color-4: #262629;--el-empty-fill-color-5: #202124;--el-empty-fill-color-6: #212224;--el-empty-fill-color-7: #1b1c1f;--el-empty-fill-color-8: #1c1d1f;--el-empty-fill-color-9: #18181a}:root{--ml-status-bar-height: 30px}body{font-family:Inter,system-ui,Avenir,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,微软雅黑,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}a{color:var(--el-color-primary)}code{border-radius:2px;padding:2px 4px;background-color:var(--el-color-primary-light-9);color:var(--elcolor-primary)}.ml-dialog-header-bottom-line[data-v-8df470d5]{margin-left:-16px;margin-top:6px;margin-bottom:6px;width:calc(100% + 64px)}.ml-dialog-footer-top-line[data-v-8df470d5]{margin-left:-16px;margin-top:6px;margin-bottom:6px;width:calc(100% + 32px)}.ml-toggle-button[data-v-48d6b055]{border:none;padding:0;cursor:pointer;width:var(--a97b120a);height:var(--a97b120a)}.ml-layer-list{width:100%;font-size:small;min-width:100%}.ml-layer-list .el-table__header,.ml-layer-list .el-table__body{border-bottom:1px solid var(--el-border-color)}.ml-layer-list-cell{display:flex;align-items:center;justify-content:center}.ml-layer-list-color{width:20px;height:20px}.ml-layer-manager[data-v-d49ba2cb]{left:2px;top:55px;width:400px;height:500px}.ml-layer-list-wrapper[data-v-d49ba2cb]{overflow:auto;width:100%;display:flex;align-items:flex-start;justify-content:flex-start}.autocomplete-container[data-v-082845cb]{position:fixed;left:50%;bottom:40px;transform:translate(-50%);width:80%;max-width:600px;z-index:1000}.autocomplete-input[data-v-082845cb]{width:100%}.ml-entity-info[data-v-6a67bbe7]{position:fixed;width:180px;left:var(--2d5cc4ca);top:var(--11fa7d7e);margin:0}.ml-entity-info-title[data-v-6a67bbe7]{font-weight:700}.ml-entity-info-text[data-v-6a67bbe7]{margin-bottom:6px;margin-top:6px}.ml-language-selector[data-v-1b9f7bc0]{position:fixed;right:40px;top:20px;z-index:1000}.ml-main-menu-container[data-v-8c0c738e]{position:fixed;left:40px;top:20px;z-index:1000}.ml-main-menu-icon[data-v-8c0c738e],.ml-main-menu-icon[data-v-8c0c738e]:hover{outline:none;border:none}.ml-vertical-toolbar-container{position:fixed;right:30px;top:50%;transform:translateY(-50%)}.ml-point-style-button[data-v-29692d7d]{border:none;padding:0;cursor:pointer;width:30px}.ml-progress[data-v-c4edb83e]{width:100px}.ml-setting-button[data-v-666f03a3],.ml-warning-button[data-v-3411a3ec]{border:none;padding:0;cursor:pointer;width:30px}.ml-status-bar[data-v-ee6f13c4]{box-sizing:border-box}.ml-status-bar-left-button-group[data-v-ee6f13c4]{border:none;box-sizing:border-box;height:var(--ml-status-bar-height)}.ml-status-bar-layout-button[data-v-ee6f13c4]{box-sizing:border-box}.ml-status-bar-right-button-group[data-v-ee6f13c4]{border:none;padding:0;height:var(--ml-status-bar-height)}.ml-status-bar-current-pos[data-v-ee6f13c4]{border:none;height:100%}.ml-cad-canvas{position:absolute;top:0;left:0;height:calc(100vh - var(--ml-status-bar-height));width:100%;display:block;outline:none;z-index:1;pointer-events:auto}.ml-cad-viewer-container{position:relative;z-index:2;pointer-events:auto}.ml-file-name{position:absolute;top:0;left:50%;transform:translate(-50%);text-align:center;width:100%;margin-top:20px;pointer-events:none;z-index:1}
|