Merge branch 'dev' into parser

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;
@@ -56,13 +57,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()
+        }
     }
 }
 

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();
+    }
+}

src/gfx/shapes.ts

@@ -0,0 +1,64 @@
+/// <reference path="../vector.ts" />
+/// <reference path="../shapeStyle.ts" />
+
+abstract class Shape
+{
+    protected ctx: CanvasRenderingContext2D
+    protected style: ShapeStyle
+
+    constructor(ctx) {
+        this.ctx = ctx
+        this.style = new ShapeStyle()
+    }
+
+    abstract draw()
+}
+
+class Line extends Shape
+{
+   private from: Vector2D
+   private to: Vector2D
+
+   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();
+    }
+}

src/shapes.ts

@@ -1,26 +0,0 @@
-/// <reference path="vector.ts" />
-/// <reference path="shapeStyle.ts" />
-
-function line(ctx: CanvasRenderingContext2D, from: Vector2D , to: Vector2D, style: ShapeStyle = new ShapeStyle())
-{
-    ctx.beginPath();
-    ctx.moveTo(from.x, from.y);
-    ctx.lineTo(to.x, to.y);
-
-    ctx.lineWidth = style.strokeWidth;
-    ctx.strokeStyle = style.strokeColor;
-    ctx.stroke();
-}
-
-function circle(ctx: CanvasRenderingContext2D, center: Vector2D, radius: number, style: ShapeStyle = new ShapeStyle())
-{
-    ctx.beginPath();
-    ctx.arc(center.x, center.y, radius, 0, 2 * Math.PI, false);
-
-    ctx.fillStyle = style.fillColor;
-    ctx.fill();
-    
-    ctx.lineWidth = style.strokeWidth;
-    ctx.strokeStyle = style.strokeColor;
-    ctx.stroke();
-}