webglmusti 0.0.0

package/src/App/water/water.ts

@@ -0,0 +1,206 @@
+import * as Matrix from "./../../WebGL/Matrix/matrix";
+import * as App from "./../../WebGL/app";
+import * as Grid from "../ResourceSim/grid"
+import * as Shader from "./../../WebGL/Shaders/custom";
+import * as Shapes from './../../WebGL/Shapes/Shapes';
+import * as Colour from './../../WebGL/colour';
+import WebGL from "./../../WebGL/globals";
+
+type Int32 = number;
+
+const WaterStateEnum = {
+  Nothing: 0,
+  Wall: 1,
+  Still: 2,
+  Flow: 3,
+}
+
+type WaterState = typeof WaterStateEnum[keyof typeof WaterStateEnum];
+
+
+export class WaterEngine extends App.BaseEngine{
+  grid: Grid.RectGrid; 
+
+  hovered: Grid.GridPosition | undefined;
+
+  private state: WaterState[][];
+  constructor(){
+    super();
+    const w = 30;
+    const h = 30;
+    this.grid = new Grid.RectGrid(w, h, 20);
+    this.state = Array.from({length: w}, () => Array.from({length: h}, () => WaterStateEnum.Nothing));
+
+    this.hovered = undefined;
+  }
+
+  drop(x: Int32, y: Int32){
+    //check below
+    if(this.grid.isInsideGrid(x, y)){
+      while(y < this.grid.height && this.state[y][x] == WaterStateEnum.Nothing){
+        y++;
+      }
+      const my = y-1;
+      if(y == this.grid.height){
+        this.state[my][x] = WaterStateEnum.Flow;
+      }else{
+        if(this.state[y][x] == WaterStateEnum.Flow){
+          this.state[my][x] = WaterStateEnum.Flow;
+        }else{
+          //hit a wall or still
+          if(x-1 >= 0 && this.state[my][x-1] == WaterStateEnum.Nothing){
+          //check left
+            while(x-1 >= 0 && this.state[my][x-1] == WaterStateEnum.Nothing){
+              //check below
+              if(this.state[y][x-1] == WaterStateEnum.Nothing){
+                console.log("drop left");
+                this.drop(x-1, y);
+                return;
+              }else if(this.state[y][x-1] == WaterStateEnum.Flow){
+                this.state[my][x-1] = WaterStateEnum.Flow;
+                return;
+              }
+              x--;
+            }
+            if(x == 0){ // on left edge of map, water is flow
+              this.state[my][0] = WaterStateEnum.Flow;
+              return;
+            }
+            else if(x > 0){
+              if(this.state[my][x-1] == WaterStateEnum.Flow){
+                this.state[my][x] = WaterStateEnum.Flow;
+              }else{
+                this.state[my][x] = WaterStateEnum.Still;
+              }
+              return;
+            }
+          }
+          else if(x+1 < this.grid.width && this.state[my][x+1] == WaterStateEnum.Nothing){
+            //console.log("right");
+            //check right
+            while(x+1 < this.grid.width && this.state[my][x+1] == WaterStateEnum.Nothing){
+              if(this.state[y][x+1] == WaterStateEnum.Nothing){
+                console.log("drop right");
+                this.drop(x+1, y);
+                return;
+              }else if(this.state[y][x+1] == WaterStateEnum.Flow){
+                this.state[my][x+1] = WaterStateEnum.Flow;
+                return;
+              }
+              x++;
+            }
+            if(x == this.grid.width){
+              console.log("right lim");
+            }else if(x < this.grid.width){
+              if(this.state[my][x+1] == WaterStateEnum.Flow){
+                this.state[my][x] = WaterStateEnum.Flow;
+              }else{
+                this.state[my][x] = WaterStateEnum.Still;
+              }
+            }
+          }else{
+            //
+            console.log("open spot");
+            if(this.state[my][x+1] == WaterStateEnum.Flow || this.state[my][x-1] == WaterStateEnum.Flow){
+              this.state[my][x] = WaterStateEnum.Flow;
+            }else{
+              this.state[my][x] = WaterStateEnum.Still;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  private toggleWallAtHovered(){
+    if(this.hovered != undefined){
+      switch(this.state[this.hovered.y][this.hovered.x]){
+        case WaterStateEnum.Nothing:
+          this.state[this.hovered.y][this.hovered.x] = WaterStateEnum.Wall;
+          break;
+        case WaterStateEnum.Wall:
+          this.state[this.hovered.y][this.hovered.x] = WaterStateEnum.Nothing;
+          break;
+        default:
+          break;
+      }
+    }
+  }
+  stateAt(x: Int32, y: Int32): WaterState{
+    return this.state[y][x];
+  }
+  
+  protected handleKeyDown(ev: KeyboardEvent): void {
+    if(this.hovered != undefined){
+      this.drop(this.hovered.x, this.hovered.y);
+    }
+  }
+  protected handleKeyUp(ev: KeyboardEvent): void {
+
+  }
+  protected handleMouseMove(ev: MouseEvent): void {
+    const x = ev.clientX;
+    const y = ev.clientY;
+    const coll = this.grid.getPosition(x, y);
+    this.hovered = coll;
+  }
+  protected handleMouseDown(ev: MouseEvent): void {
+    console.log(this.hovered);
+    this.toggleWallAtHovered();
+  }
+
+}
+
+export class WaterRenderer implements App.IEngineRenderer<WaterEngine>{
+  private perspective: Matrix.TransformationMatrix3x3;
+  private solid_shader: Shader.MVPColourProgram;
+
+  private cell_colours: Map<WaterState, Colour.ColourRGB>;
+
+  private width: Int32;
+  private height: Int32;
+
+  constructor(width: Int32, height: Int32){
+    this.width = width;
+    this.height = height;
+    this.perspective = Matrix.TransformationMatrix3x3.orthographic(0, width, height, 0);
+    this.solid_shader = new Shader.MVPColourProgram();
+
+    this.cell_colours = new Map();
+    this.cell_colours.set(WaterStateEnum.Nothing, Colour.ColourUtils.black());
+    this.cell_colours.set(WaterStateEnum.Wall, Colour.ColourUtils.white());
+    this.cell_colours.set(WaterStateEnum.Still, Colour.ColourUtils.blue());
+    this.cell_colours.set(WaterStateEnum.Flow , Colour.ColourUtils.red());
+  }
+  render(engine: WaterEngine){
+    //background
+    this.solid_shader.use();
+    this.solid_shader.setColour(0.1, 0.2, 0.3);
+    const bg_sq = WebGL.rectangleModel(0, 0, this.width, this.height);
+    this.solid_shader.setMvp(this.perspective.multiplyCopy(bg_sq));
+    Shapes.Quad.draw();
+
+    const scale = Matrix.TransformationMatrix3x3.scale(engine.grid.size, engine.grid.size);
+    for(let y = 0; y < engine.grid.height; y++){
+      for(let x = 0; x < engine.grid.width; x++){
+        const tr = Matrix.TransformationMatrix3x3.translate(x*engine.grid.size, y*engine.grid.size);
+
+        //set colour depending on water state enum
+        const colour = this.cell_colours.get(engine.stateAt(x, y))!;
+        this.solid_shader.setColour(colour.red, colour.green, colour.blue);
+        const model = tr.multiplyCopy(scale);
+        this.solid_shader.setMvp(this.perspective.multiplyCopy(model));
+        Shapes.Quad.draw();
+      }
+    }
+
+    if(engine.hovered){
+      this.solid_shader.setColour(1, 0.5, 1);
+      const tr = Matrix.TransformationMatrix3x3.translate(engine.hovered.x*engine.grid.size, engine.hovered.y*engine.grid.size);
+      const model = tr.multiplyCopy(scale);
+      this.solid_shader.setMvp(this.perspective.multiplyCopy(model));
+      Shapes.Quad.draw();
+    }
+    requestAnimationFrame(() => this.render(engine));
+  }
+}

package/src/Interface/button.ts

@@ -0,0 +1,345 @@
+import * as WebGL from "./../WebGL/globals";
+
+type Int32 = number;
+type Float = number;
+type VoidFunction = () => void;
+const EmptyFunction = () => {};
+
+export interface Point{
+  x: Int32;
+  y: Int32;
+  equals:(p:Point) => boolean;
+}
+
+export const ButtonStateEnum = {
+  Off: 0,
+  Disabled: 1,
+  Hovered: 2,
+  Pressed: 3,
+  PressedHovered: 4,
+  Selected: 5,
+} as const;
+
+
+
+export type ButtonState = (typeof ButtonStateEnum)[keyof typeof ButtonStateEnum];
+
+interface Button{
+  mouseDown: VoidFunction;
+  mouseUp: VoidFunction;
+  updateMouse: (point: Point) => void;
+}
+
+export class BasicButton{
+  x: Int32;
+  y: Int32;
+  text: string;
+  width: Int32;
+  height: Int32;
+  text_size: Int32;
+
+  state: ButtonState;
+
+  colours: Map<ButtonState, WebGL.Colour.ColourRGB>;
+  text_colour: WebGL.Colour.ColourRGB;
+  onHoveredOver: VoidFunction;
+  onHoveredOut: VoidFunction;
+  onPressed: VoidFunction;
+  onPressedOut: VoidFunction;
+
+  constructor(x: Int32, y: Int32, w: Int32, h: Int32, ts: Int32=h){
+    this.text = "";
+    this.x = x;
+    this.y = y;
+    this.width = w;
+    this.height = h;
+    this.text_size = ts;
+    this.state = ButtonStateEnum.Off;
+    this.colours = new Map();
+    this.colours.set(ButtonStateEnum.Off, WebGL.Colour.ColourUtils.blue());
+    this.colours.set(ButtonStateEnum.Hovered, WebGL.Colour.ColourUtils.red());
+    this.colours.set(ButtonStateEnum.Pressed, WebGL.Colour.ColourUtils.green());
+    this.colours.set(ButtonStateEnum.PressedHovered, WebGL.Colour.ColourUtils.cyan());
+    this.text_colour = WebGL.Colour.ColourUtils.white();
+    this.onHoveredOver = EmptyFunction;
+    this.onHoveredOut = EmptyFunction;
+    this.onPressed = EmptyFunction;
+    this.onPressedOut = EmptyFunction;
+  }
+  setTextColour(colour: WebGL.Colour.ColourRGB){
+
+  }
+  setButtonColour(){
+
+  }
+  private isInside(x: Int32, y: Int32): boolean{
+    const sx = x - this.x;
+    const sy = y - this.y;
+    return 0 < sx && sx < this.width && 0 < sy && sy < this.height;
+  }
+  mouseDown(){
+    if(this.state == ButtonStateEnum.Hovered){
+      this.state = ButtonStateEnum.PressedHovered;
+      this.onPressed();
+    }
+  }
+  mouseUp(){
+    if(this.state === ButtonStateEnum.Pressed){
+      this.state = ButtonStateEnum.Off;
+      this.onPressedOut();
+    }else if(this.state === ButtonStateEnum.PressedHovered){
+      this.state = ButtonStateEnum.Hovered;
+      this.onPressedOut();
+    }
+  }
+  updateMouse(point: Point){
+    if(this.isInside(point.x, point.y)){
+      if(this.state == ButtonStateEnum.Off){
+        this.state = ButtonStateEnum.Hovered;
+      }else if(this.state == ButtonStateEnum.Pressed){
+        this.state = ButtonStateEnum.PressedHovered;
+      }
+      this.onHoveredOver();
+    }else{
+      if(this.state === ButtonStateEnum.Hovered){
+        this.state = ButtonStateEnum.Off;
+      }else if(this.state === ButtonStateEnum.PressedHovered){
+        this.state = ButtonStateEnum.Pressed;
+      }
+      this.onHoveredOut();
+    }
+  }
+  draw(vp: WebGL.Matrix.TransformationMatrix3x3, colour_shader: WebGL.Shader.MVPColourProgram, text_drawer: WebGL.TextDrawer){
+    colour_shader.use();
+    const transformation = WebGL.WebGL.rectangleModel(this.x, this.y, this.width, this.height);
+    colour_shader.setMvp(vp.multiplyCopy(transformation));
+    if(this.colours.has(this.state)){
+      colour_shader.setColourFromColourRGB(this.colours.get(this.state)!);
+    }
+    WebGL.Shapes.Quad.draw();
+
+    if(this.text.length > 0){
+      const text_width = this.text_size*this.text.length;
+      const tx = this.x + (this.width/2) - (text_width/2);
+      const ty = this.y + (this.height/2) - (this.text_size/2);
+      text_drawer.drawTextColour(vp, tx, ty, this.text, this.text_size, this.text_colour);
+    }
+  }
+}
+
+export class ButtonSet{
+  buttons: BasicButton[];
+  constructor(){
+    this.buttons = [];
+  }
+  addButton(b: BasicButton){
+    this.buttons.push(b);
+  }
+  updateMouse(pt: Point){
+    for(const button of this.buttons){
+      button.updateMouse(pt);
+    }
+  }
+  mouseDown(){
+    for(const button of this.buttons){
+      button.mouseDown();
+    }
+  }
+  mouseUp(){
+    for(const button of this.buttons){
+      button.mouseUp();
+    }
+  }
+  draw(vp: WebGL.Matrix.TransformationMatrix3x3, colour_shader: WebGL.Shader.MVPColourProgram, text_drawer: WebGL.TextDrawer){
+    for(const button of this.buttons){
+      button.draw(vp, colour_shader, text_drawer);
+    }
+  }
+}
+
+export const ToggleButtonStateEnum = {
+  Off: 0,
+  On: 1,
+  OffHovered: 2,
+  OnHovered: 3,
+
+} as const;
+
+type ToggleButtonState = (typeof ToggleButtonStateEnum)[keyof typeof ToggleButtonStateEnum];
+
+export class ToggleButton implements Button{
+  x: Int32;
+  y: Int32;
+  off_text: string;
+  on_text: string;
+  text: string;
+  width: Int32;
+  height: Int32;
+  text_size: Int32;
+  state: ToggleButtonState;
+
+  colours: Map<ToggleButtonState, WebGL.Colour.ColourRGB>;
+
+  onToggleOn: VoidFunction;
+  onToggleOff: VoidFunction;
+
+  text_colour: WebGL.Colour.ColourRGB;
+
+  constructor(x: Int32, y: Int32, w: Int32, h: Int32, ts: Int32=h){
+    this.off_text = "";
+    this.on_text = "";
+    this.text = "";
+    this.x = x;
+    this.y = y;
+    this.width = w;
+    this.height = h;
+    this.text_size = ts;
+    this.state = ToggleButtonStateEnum.Off;
+
+    this.colours = new Map();
+    this.colours.set(ToggleButtonStateEnum.Off, WebGL.Colour.ColourUtils.pink());
+    this.colours.set(ToggleButtonStateEnum.OffHovered, WebGL.Colour.ColourUtils.blue());
+    this.colours.set(ToggleButtonStateEnum.On, WebGL.Colour.ColourUtils.cyan());
+    this.colours.set(ToggleButtonStateEnum.OnHovered, WebGL.Colour.ColourUtils.green());
+
+    this.onToggleOn = () => {};
+    this.onToggleOff = () => {};
+    this.text_colour = WebGL.Colour.ColourUtils.white();
+  }
+  private isInside(x: Int32, y: Int32): boolean{
+    const sx = x - this.x;
+    const sy = y - this.y;
+    return 0 < sx && sx < this.width && 0 < sy && sy < this.height;
+  }
+  isOn(): boolean{
+    return this.state === ToggleButtonStateEnum.On || this.state === ToggleButtonStateEnum.OnHovered;
+  }
+  isOff(): boolean{
+    return this.state === ToggleButtonStateEnum.Off || this.state === ToggleButtonStateEnum.OffHovered;
+  }
+  toggleOff(){
+    if(this.state === ToggleButtonStateEnum.OnHovered){
+      this.state = ToggleButtonStateEnum.OffHovered;
+    }else if(this.state === ToggleButtonStateEnum.On){
+      this.state = ToggleButtonStateEnum.Off;
+    }
+    this.onToggleOff();
+  }
+  toggleOn(){
+    if(this.state === ToggleButtonStateEnum.Off){
+      this.state = ToggleButtonStateEnum.On;
+    }else if(this.state === ToggleButtonStateEnum.OffHovered){
+      this.state = ToggleButtonStateEnum.OnHovered;
+    }
+    this.onToggleOn();
+  }
+  updateMouse(point: Point){
+    //console.log(point);
+    if(this.isInside(point.x, point.y)){ 
+      if(this.state === ToggleButtonStateEnum.Off){
+        this.state = ToggleButtonStateEnum.OffHovered;
+      }else if(this.state == ToggleButtonStateEnum.On){
+        this.state = ToggleButtonStateEnum.OnHovered;
+      }
+    }else{
+      if(this.state === ToggleButtonStateEnum.OffHovered){
+        this.state = ToggleButtonStateEnum.Off;
+      }else if(this.state === ToggleButtonStateEnum.OnHovered){
+        this.state = ToggleButtonStateEnum.On;
+      }
+    }
+  }
+  mouseDown(){
+    if(this.state === ToggleButtonStateEnum.OffHovered){
+      this.state = ToggleButtonStateEnum.OnHovered;
+      this.onToggleOn();
+    }else if(this.state === ToggleButtonStateEnum.OnHovered){
+      this.state = ToggleButtonStateEnum.OffHovered;
+      this.onToggleOff();
+    }
+  }
+  mouseUp(){
+  }
+
+  draw(vp: WebGL.Matrix.TransformationMatrix3x3, colour_shader: WebGL.Shader.MVPColourProgram, text_drawer: WebGL.TextDrawer){
+    colour_shader.use();
+    const transformation = WebGL.WebGL.rectangleModel(this.x, this.y, this.width, this.height);
+    colour_shader.setMvp(vp.multiplyCopy(transformation));
+    if(this.colours.has(this.state)){
+      colour_shader.setColourFromColourRGB(this.colours.get(this.state)!);
+    }
+    WebGL.Shapes.Quad.draw();
+    const text = this.isOn() ? this.on_text : this.off_text;
+    if(text.length > 0){
+      const text_width = this.text_size*text.length;
+      const tx = this.x + (this.width/2) - (text_width/2);
+      const ty = this.y + (this.height/2) - (this.text_size/2);
+      text_drawer.drawTextColour(vp, tx, ty, text, this.text_size, this.text_colour);
+    }
+  }
+}
+
+export class ToggleButtonSet{
+  buttons: ToggleButton[];
+  constructor(){
+    this.buttons = [];
+  }
+  addButton(b: ToggleButton){
+    this.buttons.push(b);
+  }
+  updateMouse(pt: Point){
+    for(const button of this.buttons){
+      button.updateMouse(pt);
+    }
+  }
+  mouseDown(){
+    for(const button of this.buttons){
+      button.mouseDown();
+    }
+  }
+  mouseUp(){
+    for(const button of this.buttons){
+      button.mouseUp();
+    }
+  }
+  draw(vp: WebGL.Matrix.TransformationMatrix3x3, colour_shader: WebGL.Shader.MVPColourProgram, text_drawer: WebGL.TextDrawer){
+    for(const button of this.buttons){
+      button.draw(vp, colour_shader, text_drawer);
+    }
+  }
+}
+
+export class SingleSelectToggleButtonSet extends ToggleButtonSet{
+  selected_button: Int32 | undefined;
+  //hovered_button: ToggleButton | undefined;
+  constructor(){
+    super();
+    this.selected_button = undefined;
+  }
+  mouseDown(){
+    for(let i = 0; i < this.buttons.length; i++){
+      const button = this.buttons[i];
+      button.mouseDown();
+      if(button.isOn()){
+        if(this.selected_button != undefined){
+          this.buttons[this.selected_button].toggleOff();
+        }
+        this.selected_button = i;
+      }else if(this.selected_button == i){
+        this.selected_button = undefined;
+      }
+    }
+  }
+}
+
+export class GridButtonSet{
+  buttons: Button[];
+  rows: Int32;
+  cols: Int32;
+  constructor(){
+    this.buttons = [];
+    this.rows = 1;
+    this.cols = 1;
+  }
+  
+}

package/src/Interface/interface_element.ts

@@ -0,0 +1,30 @@
+import * as WebGL from "./../WebGL/globals";
+type Int32 = number;
+
+export class InterfaceElement{
+  x: Int32;
+  y: Int32;
+  width: Int32;
+  height: Int32;
+  constructor(x: Int32, y: Int32, width: Int32, height: Int32){
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+  }
+  isInside(point: WebGL.Matrix.Point2D){
+    const in_x = this.x < point.x && point.x < this.x+this.width;
+    const in_y = this.y < point.y  && point.y < this.y+this.height;
+    return in_x && in_y;
+  }
+  drawBackground(vp: WebGL.Matrix.TransformationMatrix3x3, 
+    colour_shader: WebGL.Shader.MVPColourProgram, 
+    bg_colour: WebGL.Colour.ColourRGB){
+    colour_shader.use();
+    colour_shader.setColourFromColourRGB(bg_colour);
+    const bg_model = WebGL.WebGL.rectangleModel(this.x, this.y, this.width, this.height);
+    colour_shader.setMvp(vp.multiplyCopy(bg_model));
+    WebGL.Shapes.Quad.draw();
+  }
+
+}

package/src/Interface/internal_window.ts

@@ -0,0 +1,100 @@
+import * as WebGL from "./../WebGL/globals";
+
+type Int32 = number;
+type Float = number;
+type VoidFunction = () => void;
+const EmptyFunction = () => {};
+
+export class InternalWindow{
+  x: Int32;
+  y: Int32;
+  header_height: Int32;
+  width: Int32;
+  height: Int32;
+  hover_header: boolean;
+  dragged_header: boolean;
+  header_offset_x: Int32;
+  header_offset_y: Int32;
+
+  can_close: boolean;
+  visible: boolean;
+  
+  onClose: VoidFunction;
+  constructor(x: Int32, y: Int32, width: Int32, height: Int32){
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    this.header_height = 15;
+    this.hover_header = false;
+    this.dragged_header = false;
+    this.header_offset_x = 0;
+    this.header_offset_y = 0;
+    this.can_close = true;
+    this.visible = true;
+    this.onClose = EmptyFunction;
+  }
+  getInternalY(): Int32{ // where the internal window starts
+    return this.y+this.header_height;
+  }
+  isInsideHeader(pos: WebGL.Matrix.Point2D): boolean{
+    const inside_x = this.x < pos.x && pos.x < this.x + this.width;
+    const inside_y = this.y < pos.y && pos.y < this.y + this.header_height;
+    return inside_x && inside_y;
+  }
+  isInsideClose(pos: WebGL.Matrix.Point2D): boolean{
+    const inside_x = this.x+this.width-this.header_height < pos.x && pos.x < this.x+this.width;
+    const inside_y = this.y < pos.y && pos.y < this.y + this.header_height;
+    return inside_x && inside_y;
+  }
+  getWindowPosition(): WebGL.Matrix.Point2D{
+    return new WebGL.Matrix.Point2D(this.x, this.y+this.header_height);
+  }
+  mouseMove(global_position: WebGL.Matrix.Point2D){
+    if(!this.visible) return;
+    this.hover_header = this.isInsideHeader(global_position);
+    if(this.dragged_header){
+      this.x = global_position.x + this.header_offset_x;
+      this.y = global_position.y + this.header_offset_y;
+    }
+  }
+  mouseDown(global_position: WebGL.Matrix.Point2D){
+    if(this.isInsideClose(global_position)){
+      this.visible = false;
+      this.onClose();
+    }
+    if(this.hover_header){
+      this.dragged_header = true;
+      this.header_offset_x = this.x - global_position.x;
+      this.header_offset_y = this.y - global_position.y;
+    }
+  }
+  mouseUp(){
+    this.dragged_header = false;
+  }
+  draw(vp: WebGL.Matrix.TransformationMatrix3x3, solid_shader: WebGL.Shader.MVPColourProgram){
+    if(this.visible){
+      //draw header
+      solid_shader.use();
+      const header_model = WebGL.WebGL.rectangleModel(this.x, this.y, this.width, this.header_height);
+      solid_shader.setColourFromColourRGB(WebGL.Colour.ColourUtils.grey());
+      solid_shader.setMvp(vp.multiplyCopy(header_model));
+      WebGL.Shapes.Quad.draw();
+
+      //window background
+      const back_model = WebGL.WebGL.rectangleModel(this.x, this.y+this.header_height, this.width, this.height);
+      solid_shader.setColourFromColourRGB(WebGL.Colour.ColourUtils.white());
+      solid_shader.setMvp(vp.multiplyCopy(back_model));
+      WebGL.Shapes.Quad.draw();
+
+      //close header
+      if(this.can_close){
+        const close_model = WebGL.WebGL.rectangleModel(this.x+this.width-this.header_height, this.y, this.header_height, this.header_height);
+        solid_shader.setColourFromColourRGB(WebGL.Colour.ColourUtils.grey(0.75));
+        solid_shader.setMvp(vp.multiplyCopy(close_model));
+        WebGL.Shapes.Quad.draw();
+      }
+    }
+  } 
+
+}