Fixed Canvas not filling screen issue

- Created ResizableRaceCanvas Class
- Moved all draw functions to ResizableRaceCanvas
#fix

src/main/java/seng302/Controllers/RaceController.java

@@ -5,10 +5,13 @@ import javafx.scene.canvas.Canvas;
 import javafx.scene.canvas.GraphicsContext;
 import javafx.scene.control.TableView;
 import javafx.scene.layout.AnchorPane;
+import javafx.scene.layout.GridPane;
+import javafx.scene.layout.StackPane;
 import javafx.scene.paint.Color;
 import javafx.scene.paint.Paint;
 import javafx.scene.transform.Rotate;
 import seng302.GraphCoordinate;
+import seng302.Model.ResizableRaceCanvas;
 import seng302.RaceMap;
 
 import java.net.URL;
@@ -18,78 +21,22 @@ import java.util.ResourceBundle;
  * Created by Gondr on 15/03/2017.
  */
 public class RaceController extends Controller{
-    @FXML
-    Canvas raceMap;
     @FXML
     TableView boatInfoTable;
     @FXML
     AnchorPane canvasBase;
+    @FXML
+    ResizableRaceCanvas raceMap;
 
     private GraphicsContext gc;
     private RaceMap map;
 
-    public void displayBoat(GraphCoordinate graphCoordinate, Paint paint){
-        gc.setFill(paint);
-        gc.fillOval(graphCoordinate.getX(), graphCoordinate.getY(), 15, 15);
-    }
-
-    public void displayLine(GraphCoordinate graphCoordinateA, GraphCoordinate graphCoordinateB, Paint paint){
-        gc.setStroke(paint);
-        gc.setFill(paint);
-        gc.fillOval(graphCoordinateA.getX() - 3, graphCoordinateA.getY() - 3, 6, 6);
-        gc.fillOval(graphCoordinateB.getX() - 3, graphCoordinateB.getY() - 3, 6, 6);
-        gc.strokeLine(graphCoordinateA.getX(), graphCoordinateA.getY(), graphCoordinateB.getX(), graphCoordinateB.getY());
-    }
-
-
-    public void displayPoint(GraphCoordinate graphCoordinate, Paint paint){
-        gc.setFill(paint);
-        gc.fillOval(graphCoordinate.getX(), graphCoordinate.getY(), 10, 10);
-    }
-
-    public void displayArrow(GraphCoordinate coordinate, Paint paint){
-        rotate(10, 30,30);
-        gc.fillPolygon(new double[]{0, 6, 12, 8, 8, 4, 4},
-        new double[]{15, 0, 15, 15, 40, 40, 15},
-        7);
-        gc.restore();
-    }
-
-    private void rotate(double angle, double px, double py) {
-        Rotate r = new Rotate(angle, px, py);
-        gc.setTransform(r.getMxx(), r.getMyx(), r.getMxy(), r.getMyy(), r.getTx(), r.getTy());
-    }
-
     @Override
-    public void initialize(URL location, ResourceBundle resources) {/*
+    public void initialize(URL location, ResourceBundle resources) {
+        raceMap = new ResizableRaceCanvas();
         raceMap.widthProperty().bind(canvasBase.widthProperty());
-        raceMap.heightProperty().bind(canvasBase.heightProperty());*/
+        raceMap.heightProperty().bind(canvasBase.heightProperty());
-        this.gc = raceMap.getGraphicsContext2D();
+        raceMap.draw();
-        this.map = new RaceMap(32.321989, -64.8553, 32.246, -64.831, (int)raceMap.getWidth(), (int)raceMap.getHeight());
+        canvasBase.getChildren().add(raceMap);
-        //boat
-        GraphCoordinate boat1coord = this.map.convertGPS(32.296577, -64.854304);
-        displayBoat(boat1coord, Color.AQUAMARINE);
-        //finish line
-        gc.setLineWidth(2);
-        GraphCoordinate finishLineCoord1 = this.map.convertGPS(32.317379, -64.839291);
-        GraphCoordinate finishLineCoord2 = this.map.convertGPS(32.317257, -64.836260);
-        displayLine(finishLineCoord1, finishLineCoord2, Color.DARKRED);
-        //marks
-        GraphCoordinate markCoord = this.map.convertGPS(32.293039, -64.843983);
-        GraphCoordinate southGate1 = this.map.convertGPS(32.284680, -64.850045);
-        GraphCoordinate southGate2 = this.map.convertGPS(32.280164, -64.847591);
-        GraphCoordinate northGate1 = this.map.convertGPS(32.309693, -64.835249);
-        GraphCoordinate northGate2 = this.map.convertGPS(32.308046, -64.831785);
-        displayBoat(boat1coord, Color.AQUAMARINE);
-        displayBoat(markCoord, Color.GOLD);
-        displayLine(southGate1, southGate2, Color.DARKCYAN);
-        displayLine(northGate1, northGate2, Color.DARKVIOLET);
-        //start line
-        GraphCoordinate startline1 = this.map.convertGPS(32.296577, -64.854304);
-        GraphCoordinate startline2 = this.map.convertGPS(32.293771, -64.855242);
-        displayLine(startline1, startline2, Color.GREEN);
-
-        displayPoint(this.map.convertGPS(32.293771, -64.855242), Color.BLACK);
-        displayArrow(new GraphCoordinate(100, 100), Color.BLUEVIOLET);
     }
 }

src/main/java/seng302/Model/ResizableRaceCanvas.java

@@ -0,0 +1,117 @@
+package seng302.Model;
+
+import javafx.scene.canvas.Canvas;
+import javafx.scene.canvas.GraphicsContext;
+import javafx.scene.paint.Color;
+import javafx.scene.paint.Paint;
+import javafx.scene.transform.Rotate;
+import seng302.GraphCoordinate;
+import seng302.RaceMap;
+
+/**
+ * Created by fwy13 on 17/03/17.
+ */
+public class ResizableRaceCanvas extends Canvas {
+    GraphicsContext gc;
+    RaceMap map;
+
+    public ResizableRaceCanvas(RaceMap map) {
+        this.map = map;
+        gc = this.getGraphicsContext2D();
+        // Redraw canvas when size changes.
+        widthProperty().addListener(evt -> draw());
+        heightProperty().addListener(evt -> draw());
+    }
+
+    public ResizableRaceCanvas(){
+        this(null);
+    }
+
+    public void setMap (RaceMap map) {
+        this.map = map;
+    }
+
+    public void displayBoat(GraphCoordinate graphCoordinate, Paint paint){
+        gc.setFill(paint);
+        gc.fillOval(graphCoordinate.getX(), graphCoordinate.getY(), 15, 15);
+    }
+
+    public void displayLine(GraphCoordinate graphCoordinateA, GraphCoordinate graphCoordinateB, Paint paint){
+        gc.setStroke(paint);
+        gc.setFill(paint);
+        gc.fillOval(graphCoordinateA.getX() - 3, graphCoordinateA.getY() - 3, 6, 6);
+        gc.fillOval(graphCoordinateB.getX() - 3, graphCoordinateB.getY() - 3, 6, 6);
+        gc.strokeLine(graphCoordinateA.getX(), graphCoordinateA.getY(), graphCoordinateB.getX(), graphCoordinateB.getY());
+    }
+
+
+    public void displayPoint(GraphCoordinate graphCoordinate, Paint paint){
+        gc.setFill(paint);
+        gc.fillOval(graphCoordinate.getX(), graphCoordinate.getY(), 10, 10);
+    }
+
+    public void displayArrow(GraphCoordinate coordinate, Paint paint){
+        rotate(10, 30,30);
+        gc.fillPolygon(new double[]{0, 6, 12, 8, 8, 4, 4},
+                new double[]{15, 0, 15, 15, 40, 40, 15},
+                7);
+        gc.restore();
+    }
+
+    private void rotate(double angle, double px, double py) {
+        Rotate r = new Rotate(angle, px, py);
+        gc.setTransform(r.getMxx(), r.getMyx(), r.getMxy(), r.getMyy(), r.getTx(), r.getTy());
+    }
+
+    public void draw() {
+        double width = getWidth();
+        double height = getHeight();
+        System.out.println("Race Map Canvas Width: "+ width + ", Height:" + height);
+        this.map = new RaceMap(32.321989, -64.873, 32.28, -64.831, (int)width, (int)height);
+
+        if (map == null){
+            return;
+        }
+        System.out.println("Drawing");
+        gc.clearRect(0, 0, width, height);
+        //boat
+        GraphCoordinate boat1coord = map.convertGPS(32.296577, -64.854304);
+        displayBoat(boat1coord, Color.AQUAMARINE);
+        //finish line
+        gc.setLineWidth(2);
+        GraphCoordinate finishLineCoord1 = map.convertGPS(32.317379, -64.839291);
+        GraphCoordinate finishLineCoord2 = map.convertGPS(32.317257, -64.836260);
+        displayLine(finishLineCoord1, finishLineCoord2, Color.DARKRED);
+        //marks
+        GraphCoordinate markCoord = map.convertGPS(32.293039, -64.843983);
+        GraphCoordinate southGate1 = map.convertGPS(32.284680, -64.850045);
+        GraphCoordinate southGate2 = map.convertGPS(32.280164, -64.847591);
+        GraphCoordinate northGate1 = map.convertGPS(32.309693, -64.835249);
+        GraphCoordinate northGate2 = map.convertGPS(32.308046, -64.831785);
+        displayBoat(boat1coord, Color.AQUAMARINE);
+        displayBoat(markCoord, Color.GOLD);
+        displayLine(southGate1, southGate2, Color.DARKCYAN);
+        displayLine(northGate1, northGate2, Color.DARKVIOLET);
+        //start line
+        GraphCoordinate startline1 = map.convertGPS(32.296577, -64.854304);
+        GraphCoordinate startline2 = map.convertGPS(32.293771, -64.855242);
+        displayLine(startline1, startline2, Color.GREEN);
+
+        displayArrow(new GraphCoordinate(100, 100), Color.BLUEVIOLET);
+    }
+
+    @Override
+    public boolean isResizable() {
+        return true;
+    }
+
+    @Override
+    public double prefWidth(double height) {
+        return getWidth();
+    }
+
+    @Override
+    public double prefHeight(double width) {
+        return getHeight();
+    }
+}

src/main/resources/scenes/racepane.fxml

@@ -7,16 +7,13 @@
 
 <AnchorPane xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.Controllers.RaceController">
    <children>
-      <SplitPane fx:id="racePane" dividerPositions="0.75" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+      <SplitPane dividerPositions="0.75" AnchorPane.bottomAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0">
          <items>
-          <AnchorPane fx:id="canvasBase" minHeight="0.0" minWidth="0.0">
+            <AnchorPane fx:id="canvasBase">
-               <children>
-                  <Canvas fx:id="raceMap" height="600.0" width="600.0" />
-               </children>
             </AnchorPane>
-          <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
+          <AnchorPane layoutX="450.0" minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0" GridPane.columnIndex="1">
                <children>
-                  <TableView fx:id="boatInfoTable" prefHeight="400.0" prefWidth="146.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+                  <TableView fx:id="boatInfoTable" prefHeight="400.0" prefWidth="146.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.bottomAnchor="0.0">
                     <columns>
                       <TableColumn prefWidth="75.0" text="C1" />
                       <TableColumn prefWidth="75.0" text="C2" />