feat: add dxf file import

Author: bertyhell

package-lock.json

@@ -30,6 +30,7 @@
     "teenyicons": "^0.4.1",
     "undo-stacker": "^0.2.1",
     "use-local-storage-state": "^19.5.0",
+    "dxf": "^5.2.0",
     "xstate": "^5.18.1"
   },
   "devDependencies": {
@@ -47,7 +48,6 @@
     "@vitejs/plugin-react-swc": "^3.8.1",
     "autoprefixer": "^10.4.21",
     "biome": "^0.3.3",
-    "dxf": "^5.2.0",
     "puppeteer": "^24.1.1",
     "tailwindcss": "^4.1.3",
     "typescript": "^5.2.2",

package.json

@@ -1,8 +1,19 @@
-import { toast } from 'react-toastify';
-import { v4 as uuidv4 } from 'uuid';
-import type { Point, LineEntity, CircleEntity, Entity } from '../../App.types';
-import { EntityType } from '../../App.types';
-import { getEntities, setEntities, getActiveLayerId, getActiveLineColor, getActiveLineWidth } from '../../state';
+import {Point} from '@flatten-js/core';
+import type {Entities as DxfEntities, Helper} from 'dxf';
+import {isNil, uniqBy} from 'es-toolkit';
+import {toast} from 'react-toastify';
+import {CircleEntity} from '../../entities/CircleEntity.ts';
+import type {Entity} from '../../entities/Entity.ts';
+import {LineEntity} from '../../entities/LineEntity.ts';
+import {getActiveLayerId, getActiveLineColor, getActiveLineWidth, getEntities, setEntities,} from '../../state';
+import {toHex} from '../rgb-to-hex-color.ts';
+
+function getDxfLineColor(dxfColor: [number, number, number] | undefined): string {
+	if (isNil(dxfColor)) {
+		return getActiveLineColor();
+	}
+	return toHex(dxfColor[0], dxfColor[1], dxfColor[2], 1);
+}
 
 /**
  * Imports entities from a DXF file.
@@ -30,72 +41,64 @@ export const importEntitiesFromDxfFile = async (file?: File): Promise<void> => {
 			console.log('DXF file content loaded, attempting to parse...');
 			// Dynamically import the dxf library
 			const dxf = await import('dxf');
-			const parser = new dxf.DxfParser();
-			const parsedDxf = parser.parseSync(fileContent); // Use parseSync as parseString is not available in the version I expect
+			const parsedDxf = new dxf.Helper(fileContent) as Helper;
 
-			if (!parsedDxf || !parsedDxf.entities) {
+			if (!parsedDxf || !parsedDxf.denormalised) {
 				toast.error('Failed to parse DXF file. No entities found or invalid format.');
 				console.error('Parsed DXF data is invalid or contains no entities:', parsedDxf);
 				return;
 			}
 
-			console.log(`Successfully parsed DXF. Found ${parsedDxf.entities.length} entities.`);
+			console.log(`Successfully parsed DXF. Found ${parsedDxf.denormalised.length} entities.`);
 			const newEntities: Entity[] = [];
 			const currentLayerId = getActiveLayerId();
-			const defaultColor = getActiveLineColor();
 			const defaultWidth = getActiveLineWidth();
 
-			for (const entity of parsedDxf.entities) {
+			for (const entity of parsedDxf.denormalised) {
 				// TODO: Coordinate transformation for Y-axis (DXF Y is usually up, canvas Y is down)
 				// For now, we assume positive Y is down for simplicity matching canvas.
 				// If DXF typically has Y up, then Y coordinates from DXF might need to be negated or subtracted from canvas height.
 				if (entity.type === 'LINE') {
-					if (entity.vertices && entity.vertices.length >= 2) {
-						const startPoint: Point = { x: entity.vertices[0].x, y: entity.vertices[0].y };
-						const endPoint: Point = { x: entity.vertices[1].x, y: entity.vertices[1].y };
-						const line: LineEntity = {
-							id: uuidv4(),
-							type: EntityType.LINE,
-							layerId: currentLayerId,
-							start: startPoint,
-							end: endPoint,
-							color: (entity.colorNumber !== undefined && entity.colorNumber !== 256) ? `#${entity.colorNumber.toString(16).padStart(6, '0')}` : defaultColor, // TODO: Map DXF color index to HEX
-							width: defaultWidth, // TODO: Potentially use layer lineweight or entity thickness
-						};
+					const dxfLine = entity as DxfEntities.Line;
+					if (dxfLine.start && dxfLine.end) {
+						const startPoint: Point = new Point(dxfLine.start.x, dxfLine.start.y);
+						const endPoint: Point = new Point(dxfLine.end.x, dxfLine.end.y);
+						const line = new LineEntity(currentLayerId, startPoint, endPoint);
+						line.lineColor = getDxfLineColor(dxfLine.colorNumber);
+						line.lineWidth = dxfLine.thickness || defaultWidth;
+						line.lineDash = undefined;
 						newEntities.push(line);
-						console.log('Converted DXF LINE to LineEntity:', line);
 					} else {
-						console.warn('Skipping DXF LINE entity due to missing or insufficient vertices:', entity);
+						console.warn('Skipping DXF LINE due to missing or insufficient vertices:', dxfLine);
 					}
 				} else if (entity.type === 'CIRCLE') {
-					if (entity.center && typeof entity.radius === 'number') {
-						const centerPoint: Point = { x: entity.center.x, y: entity.center.y };
-						const circle: CircleEntity = {
-							id: uuidv4(),
-							type: EntityType.CIRCLE,
-							layerId: currentLayerId,
-							center: centerPoint,
-							radius: entity.radius,
-							color: (entity.colorNumber !== undefined && entity.colorNumber !== 256) ? `#${entity.colorNumber.toString(16).padStart(6, '0')}` : defaultColor, // TODO: Map DXF color index to HEX
-							width: defaultWidth, // TODO: Potentially use layer lineweight or entity thickness
-						};
+					const dxfCircle = entity as DxfEntities.Circle;
+					if (dxfCircle.x && dxfCircle.y && dxfCircle.r) {
+						const centerPoint = new Point(dxfCircle.x, dxfCircle.y);
+						const circle = new CircleEntity(currentLayerId, centerPoint, dxfCircle.r);
+						circle.lineColor = getDxfLineColor(dxfCircle.colorNumber);
+						circle.lineWidth = defaultWidth;
+						circle.lineDash = undefined;
 						newEntities.push(circle);
-						console.log('Converted DXF CIRCLE to CircleEntity:', circle);
 					} else {
-						console.warn('Skipping DXF CIRCLE entity due to missing center or radius:', entity);
+						console.warn('Skipping DXF CIRCLE due to missing center or radius:', dxfCircle);
 					}
 				} else {
-					console.log(`Unsupported DXF entity type: ${entity.type}. Skipping.`);
+					console.log(`Unsupported DXF type: ${entity.type}. Skipping.`);
 				}
 			}
 
 			if (newEntities.length > 0) {
-				setEntities([...getEntities(), ...newEntities]);
-				toast.success(`${newEntities.length} entities imported successfully from DXF!`);
+				const uniqueEntities = uniqBy(
+					newEntities,
+					(entity) =>
+						`${JSON.stringify(entity.getShape())}|${entity.lineColor}|${entity.lineWidth}|${entity.lineDash}`
+				);
+				setEntities([...getEntities(), ...uniqueEntities]);
+				toast.success(`${uniqueEntities.length} entities imported successfully from DXF!`);
 			} else {
 				toast.info('No supported entities found in the DXF file.');
 			}
-
 		} catch (error) {
 			console.error('Error parsing DXF file:', error);
 			toast.error('An error occurred while parsing the DXF file. See console for details.');

src/helpers/import-export-handlers/import-entities-from-dxf.test.ts

@@ -0,0 +1,3 @@
+export function toHex(red: number, green: number, blue: number, alpha: number): string {
+	return (blue | (green << 8) | (red << 16) | (1 << 24)).toString(16).slice(1) + alpha;
+}