{"id":40477179,"url":"https://github.com/mlightcad/cad-simple-viewer-example","last_synced_at":"2026-01-20T18:25:48.812Z","repository":{"id":319106779,"uuid":"1073665964","full_name":"mlightcad/cad-simple-viewer-example","owner":"mlightcad","description":"A minimal web application demonstrating how to use the @mlightcad/cad-simple-viewer package to display DXF and DWG files in a web browser with a clean, modern interface.","archived":false,"fork":false,"pushed_at":"2025-10-31T07:34:03.000Z","size":76,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-31T09:26:40.246Z","etag":null,"topics":["autocad","dwg-reader","dwg-viewer","dxf-reader","dxf-viewer","example","threejs","webgl"],"latest_commit_sha":null,"homepage":"https://mlightcad.github.io/cad-simple-viewer-example/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mlightcad.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-10T12:49:53.000Z","updated_at":"2025-10-31T07:34:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"e8796f26-2275-4d14-9ef3-48eb79419df7","html_url":"https://github.com/mlightcad/cad-simple-viewer-example","commit_stats":null,"previous_names":["mlightcad/cad-simple-viewer-example"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mlightcad/cad-simple-viewer-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlightcad%2Fcad-simple-viewer-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlightcad%2Fcad-simple-viewer-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlightcad%2Fcad-simple-viewer-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlightcad%2Fcad-simple-viewer-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mlightcad","download_url":"https://codeload.github.com/mlightcad/cad-simple-viewer-example/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlightcad%2Fcad-simple-viewer-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28609119,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T16:10:39.856Z","status":"ssl_error","status_checked_at":"2026-01-20T16:10:39.493Z","response_time":117,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autocad","dwg-reader","dwg-viewer","dxf-reader","dxf-viewer","example","threejs","webgl"],"created_at":"2026-01-20T18:25:48.704Z","updated_at":"2026-01-20T18:25:48.781Z","avatar_url":"https://github.com/mlightcad.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CAD Simple Viewer Example\n\nThis is an example application that demonstrates how to use the `@mlightcad/cad-simple-viewer` package to display DXF and DWG files in a web browser.\n\n[**🌐 Live Demo**](https://mlightcad.github.io/cad-simple-viewer-example/)\n\n## Features\n\n- 📁 Open one DWG/DXF file\n- ✏️ Create one drawing\n\n## Development\n\n```bash\n# Install dependencies\npnpm install\n\n# Start development server\npnpm dev\n\n# Build for production\npnpm build\n\n# Preview production build\npnpm preview\n```\n\n## Usage\n\n### Basic Usage\n\nFirstly, add the following dependencies into your `package.json`.\n\n- @mlightcad/cad-simple-viewer\n- @mlightcad/data-model\n\nSecondly, add one contain element for cad-simple-viewer.\n\n```html\n\u003cbody\u003e\n  \u003cdiv id=\"cad-container\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n```\n\nThirdly, add the following code in the entry point of cad-simple-viewer integration page.\n\n```typescript\nimport { AcApDocManager } from '@mlightcad/cad-simple-viewer'\nimport { AcDbDatabaseConverterManager, AcDbFileType, registerWorkers } from '@mlightcad/data-model'\n\n// Get canvas DOM element by its id\nconst canvas = document.getElementById('canvas') as HTMLCanvasElement\nAcApDocManager.createInstance(canvas)\n\n// Read the file content\nconst fileContent = await this.readFile(file)\n\n// Set database options\nconst options: AcDbOpenDatabaseOptions = {\n  minimumChunkSize: 1000,\n  readOnly: true\n}\n\n// Open the document\nconst success = await AcApDocManager.instance.openDocument(\n  file.name,\n  fileContent,\n  options\n)\n\n// Your application logic here...\n......\n```\n\nFinally, copy web worker javascript files to `dist/assets` folder.\n\nWeb worker are used to parser dxf/dwg file and render mtext entities so that UI not blocked. You can copy the following web worker files to folder `dist/assets` manually.\n\n- `./node_modules/@mlightcad/data-model/dist/dxf-parser-worker.js`\n- `./node_modules/@mlightcad/cad-simple-viewer/dist/libredwg-parser-worker.js`\n- `./node_modules/@mlightcad/cad-simple-viewer/dist/mtext-renderer-worker.js`\n\nHowever, `vite-plugin-static-copy` is recommended to make your life easier.\n\n```typescript\nimport { resolve } from 'path'\nimport { defineConfig } from 'vite'\nimport { viteStaticCopy } from 'vite-plugin-static-copy'\n\nexport default defineConfig(() =\u003e {\n  return {\n    base: './',\n    build: {\n      modulePreload: false,\n      rollupOptions: {\n        // Main entry point for the app\n        input: {\n          main: resolve(__dirname, 'index.html')\n        }\n      }\n    },\n    plugins: [\n      viteStaticCopy({\n        targets: [\n          {\n            src: './node_modules/@mlightcad/data-model/dist/dxf-parser-worker.js',\n            dest: 'assets'\n          },\n          {\n            src: './node_modules/@mlightcad/cad-simple-viewer/dist/*-worker.js',\n            dest: 'assets'\n          }\n        ]\n      })\n    ]\n  }\n})\n```\n\n### Beyond a Viewer\n\nWhile `cad-simple-viewer` doesn't support saving drawings to DWG/DXF files, it provides comprehensive support for **modifying drawings in real-time**. You can add, edit, and delete entities within the drawing, and the viewer will automatically update to reflect these changes.\n\nWhen you modify entities, you're working directly with the underlying drawing database. The viewer automatically detects these changes and updates the display accordingly. This real-time synchronization ensures that:\n\n- All modifications are immediately visible\n- The command stack properly tracks changes for undo/redo operations. This will be implemented soon.\n\nThis capability makes `cad-simple-viewer` suitable for applications that need to not only display CAD files but also allow users to interact with and modify the drawing content.\n\n**Important Note**: The usage patterns in `cad-simple-viewer` are **very similar to AutoCAD RealDWG**. If you're familiar with AutoCAD RealDWG development, you'll find the API structure and workflow nearly identical. The main difference is that we use the [**realdwg-web API**](https://mlightcad.github.io/realdwg-web/) instead of the native RealDWG libraries.\n\n#### Example: Adding Entities\n\nThe following code demonstrates how to add entities, following the same pattern you'd use in AutoCAD RealDWG:\n\n```typescript\nimport { AcApDocManager } from '@mlightcad/cad-simple-viewer'\nimport { AcDbLine, AcDbCircle, AcDbText, AcGePoint3d, AcGeVector3d } from '@mlightcad/data-model'\n\n// Get the current document (same as RealDWG)\nconst doc = AcApDocManager.instance.curDocument\nif (!doc) return\n\n// Get the model space (identical to RealDWG pattern)\nconst modelSpace = doc.database.modelSpace\n\n// Add a line (same constructor and property setting as RealDWG)\nconst startPoint = new AcGePoint3d(0, 0, 0)\nconst endPoint = new AcGePoint3d(100, 100, 0)\nconst line = new AcDbLine(startPoint, endPoint)\nline.layer = '0' // Set layer (same property name as RealDWG)\nline.color = 1 // Red color (same color index as RealDWG)\nmodelSpace.appendEntity(line)\n\n// Add a circle (identical API to RealDWG)\nconst centerPoint = new AcGePoint3d(50, 50, 0)\nconst radius = 25\nconst circle = new AcDbCircle(centerPoint, radius)\ncircle.layer = '0'\ncircle.color = 2 // Yellow color\nmodelSpace.appendEntity(circle)\n\n// Add text (same constructor pattern as RealDWG)\nconst textPoint = new AcGePoint3d(0, -50, 0)\nconst text = new AcDbText(textPoint, 'Sample Text', 10) // position, text, height\ntext.layer = '0'\ntext.color = 3 // Green color\nmodelSpace.appendEntity(text)\n```\n\nPlease refer to class [DocCreator](./src/docCreator.ts) to get one full example to create one new drawing.\n\n\n#### Example: Custom Command\n\nCommands are the primary way users interact with the CAD-Viewer. Each command represents a specific operation, such as drawing a line, creating a circle, zooming, or selecting objects. CAD-Viewer supports creating custom commands to extend functionalities of CAD-Viewer.\n\n- [Wiki Page](https://github.com/mlightcad/cad-viewer/wiki/Command): Introduce how to create one custom command.\n- [Example Code](./src/ellipseCmd.ts): One demo command to create one ellipse by center, major axis, and minor radius.\n\n## License\n\n[MIT](LICENSE)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlightcad%2Fcad-simple-viewer-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmlightcad%2Fcad-simple-viewer-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlightcad%2Fcad-simple-viewer-example/lists"}