From 097931d2924a255c5873e5bdeb247d5a37ff1b58 Mon Sep 17 00:00:00 2001
From: epioos <46408068+epioos@users.noreply.github.com>
Date: Tue, 30 Nov 2021 00:26:32 +0100
Subject: [PATCH 1/2] addes shape classes

---
 src/shapes.ts | 70 +++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 54 insertions(+), 16 deletions(-)

diff --git a/src/shapes.ts b/src/shapes.ts
index 29454ff..ea26817 100644
--- a/src/shapes.ts
+++ b/src/shapes.ts
@@ -1,26 +1,64 @@
 import { Vector2D } from "./vector.js"
 import { ShapeStyle } from "./shapeStyle.js";
 
-export function line(ctx: CanvasRenderingContext2D, from: Vector2D , to: Vector2D, style: ShapeStyle = new ShapeStyle())
+abstract class Shape
 {
-    ctx.beginPath();
-    ctx.moveTo(from.x, from.y);
-    ctx.lineTo(to.x, to.y);
+    protected ctx: CanvasRenderingContext2D
+    protected style: ShapeStyle
 
-    ctx.lineWidth = style.strokeWidth;
-    ctx.strokeStyle = style.strokeColor;
-    ctx.stroke();
+    constructor(ctx) {
+        this.ctx = ctx
+        this.style = new ShapeStyle()
+    }
+
+    abstract draw()
 }
 
-export function circle(ctx: CanvasRenderingContext2D, center: Vector2D, radius: number, style: ShapeStyle = new ShapeStyle())
+class Line extends Shape
 {
-    ctx.beginPath();
-    ctx.arc(center.x, center.y, radius, 0, 2 * Math.PI, false);
+   private from: Vector2D
+   private to: Vector2D
 
-    ctx.fillStyle = style.fillColor;
-    ctx.fill();
-    
-    ctx.lineWidth = style.strokeWidth;
-    ctx.strokeStyle = style.strokeColor;
-    ctx.stroke();
+   constructor(ctx,from, to) {
+       super(ctx)
+       this.from = from
+       this.to = to
+   }
+
+   public draw()
+   {
+       this.ctx.beginPath();
+       this.ctx.moveTo(this.from.x, this.from.y);
+       this.ctx.lineTo(this.to.x, this.to.y);
+
+       this.ctx.lineWidth = this.style.strokeWidth;
+       this.ctx.strokeStyle = this.style.strokeColor;
+       this.ctx.stroke();
+   }
+}
+
+class Circle extends Shape
+{
+
+    private center: Vector2D
+    private radius: number
+
+    constructor(ctx,center, radius) {
+        super(ctx)
+        this.center = center
+        this.radius = radius
+    }
+
+    public draw()
+    {
+        this.ctx.beginPath();
+        this.ctx.arc(this.center.x, this.center.y, this.radius, 0, 2 * Math.PI, false);
+
+        this.ctx.fillStyle = this.style.fillColor;
+        this.ctx.fill();
+
+        this.ctx.lineWidth = this.style.strokeWidth;
+        this.ctx.strokeStyle = this.style.strokeColor;
+        this.ctx.stroke();
+    }
 }
\ No newline at end of file

From d06c2c60786196fef33a213e6d50f7bedf16a175 Mon Sep 17 00:00:00 2001
From: epioos <46408068+epioos@users.noreply.github.com>
Date: Tue, 30 Nov 2021 00:57:09 +0100
Subject: [PATCH 2/2] added polygon class

---
 src/geometry.ts         | 23 ++++++++++++++++++++---
 src/gfx/polygon.ts      | 30 ++++++++++++++++++++++++++++++
 src/{ => gfx}/shapes.ts |  4 ++--
 3 files changed, 52 insertions(+), 5 deletions(-)
 create mode 100644 src/gfx/polygon.ts
 rename src/{ => gfx}/shapes.ts (93%)

diff --git a/src/geometry.ts b/src/geometry.ts
index 64da89e..4d13b06 100644
--- a/src/geometry.ts
+++ b/src/geometry.ts
@@ -1,5 +1,5 @@
 /// <reference path="vector.ts" />
-/// <reference path="shapes.ts" />
+/// <reference path="gfx/polygon.ts" />
 /// <reference path="parser/parser.ts" />
 
 function loadScript(filepath: string): string
@@ -17,6 +17,7 @@ function loadScript(filepath: string): string
 
 class Geometry extends HTMLElement
 {
+    private shapes: Shape[];
     private canvas: HTMLCanvasElement;
     private context: CanvasRenderingContext2D;
     private sourceFile: string;
@@ -50,13 +51,29 @@ class Geometry extends HTMLElement
 
         this.shadowRoot.append(this.canvas);
 
+
+        this.shapes = []
+        this.shapes.push(new Circle(this.context, new Vector2D(150, 150), 100))
+        this.shapes.push(new Line(this.context, new Vector2D(), new Vector2D(300, 300)))
+
+        this.shapes.push(new Polygon(this.context,
+            [
+                new Vector2D(150, 150),
+                new Vector2D(150, 250),
+                new Vector2D(250, 250),
+                new Vector2D(250, 150),
+                new Vector2D(300, 300),
+                new Vector2D(250, 350),
+            ]))
         this.redraw();
     }
 
     private redraw()
     {
-        line(this.context, new Vector2D(), new Vector2D(300, 300));
-        circle(this.context, new Vector2D(150, 150), 100);
+        for (let shape of this.shapes)
+        {
+            shape.draw()
+        }
     }
 }
 
diff --git a/src/gfx/polygon.ts b/src/gfx/polygon.ts
new file mode 100644
index 0000000..5ce58d4
--- /dev/null
+++ b/src/gfx/polygon.ts
@@ -0,0 +1,30 @@
+/// <reference path="./shapes.ts" />
+
+class Polygon extends Shape
+{
+    private points: Vector2D[]
+
+
+    constructor(ctx, points) {
+        super(ctx);
+        if (points.length <3)
+        {
+            console.error("cant draw polygon, need min 3 points")
+        }
+        this.points = points
+    }
+
+    public draw()
+    {
+        let last_element = this.points[this.points.length-1]
+        this.ctx.beginPath();
+        this.ctx.moveTo(last_element.x, last_element.y);
+        for (let point of this.points)
+        {
+            this.ctx.lineTo(point.x, point.y);
+        }
+        this.ctx.lineWidth = this.style.strokeWidth;
+        this.ctx.strokeStyle = this.style.strokeColor;
+        this.ctx.stroke();
+    }
+}
\ No newline at end of file
diff --git a/src/shapes.ts b/src/gfx/shapes.ts
similarity index 93%
rename from src/shapes.ts
rename to src/gfx/shapes.ts
index 4d2fd2d..4131d79 100644
--- a/src/shapes.ts
+++ b/src/gfx/shapes.ts
@@ -1,5 +1,5 @@
-/// <reference path="vector.ts" />
-/// <reference path="shapeStyle.ts" />
+/// <reference path="../vector.ts" />
+/// <reference path="../shapeStyle.ts" />
 
 abstract class Shape
 {