Grid2D

src/app/working-area/model/grid2D.ts

@@ -0,0 +1,86 @@
+import { Configuration, gridSpacing, viewBounds } from './configuration';
+import { EVENT_CHANGED } from './events';
+import { Graphics } from 'pixi.js';
+import { Vector2 } from 'three';
+import { Dimensioning } from './dimensioning';
+
+const GRID_SIZE = 10000;
+
+export class Grid2D extends Graphics {
+
+    canvas;
+    options;
+    size;
+    gridScale;
+    constructor(canvas, options) {
+        super();
+        // this.drawRect(0, 0, GRID_SIZE, GRID_SIZE);
+        this.canvas = canvas;
+        this.options = options;
+        this.size = new Vector2(GRID_SIZE, GRID_SIZE);
+        this.gridScale = 1.0;
+        this.width = this.size.x;
+        this.height = this.size.y;
+        this.drawRect(0, 0, GRID_SIZE, GRID_SIZE);
+        this.pivot.x = this.pivot.y = 0.5;
+        Configuration.getInstance().addEventListener(EVENT_CHANGED, (evt) => this.updateGrid());
+        this.updateGrid();
+    }
+
+    updateGrid() {
+        let gridSize = Dimensioning.cmToPixel(Configuration.getNumericValue(viewBounds) * 1);
+        let spacingCMS = Configuration.getNumericValue(gridSpacing);
+        let spacing = Dimensioning.cmToPixel(spacingCMS);
+        let totalLines = gridSize / spacing;
+        let halfSize = gridSize * 0.5;
+        let linewidth = Math.max(1.0 / this.gridScale, 1.0);
+        let highlightLineWidth = Math.max(2.0 / this.gridScale, 1.0);
+        let normalColor = 0xE0E0E0;
+        let highlightColor = 0xD0D0D0;
+        this.clear();
+        for (let i = 0; i <= totalLines; i++) {
+            let co = (i * spacing) - halfSize;
+            if (i % 5 === 0) {
+                this.lineStyle(highlightLineWidth, highlightColor).moveTo(-halfSize, co).lineTo(halfSize, co);
+                this.lineStyle(highlightLineWidth, highlightColor).moveTo(co, -halfSize).lineTo(co, halfSize);
+            } else {
+                this.lineStyle(linewidth, normalColor).moveTo(-halfSize, co).lineTo(halfSize, co);
+                this.lineStyle(linewidth, normalColor).moveTo(co, -halfSize).lineTo(co, halfSize);
+            }
+        }
+        this.endFill();
+
+        this.beginFill(0xFF0000, 1.0);
+        this.drawCircle(-halfSize, -halfSize,5);
+        this.drawCircle(halfSize, -halfSize,5);
+        this.drawCircle(halfSize, halfSize,5);
+        this.drawCircle(-halfSize, halfSize,5);
+        this.drawCircle(0, 0, 5);
+        this.endFill();
+    }
+
+    getGridScale() {
+        return this.gridScale;
+    }
+
+    setGridScale(value) {
+        this.gridScale = value;
+        this.updateGrid();
+    }
+
+    configurationUpdate(evt) {
+        if (evt.key === gridSpacing) {
+            this.updateGrid();
+        }
+    }
+    getCellCoordinates(x, y) {
+        let gridSize = Dimensioning.cmToPixel(Configuration.getNumericValue(viewBounds) * 1);
+        let spacingCMS = Configuration.getNumericValue(gridSpacing);
+        let spacing = Dimensioning.cmToPixel(spacingCMS);
+        let halfSize = gridSize * 0.5;
+        return {
+        x: Math.floor((x - -halfSize) / spacing),
+        y: Math.floor((y - -halfSize) / spacing),
+        };
+    }
+}