feat: add bounding box calculation

README.md

@@ -0,0 +1,7 @@
+<p align="center"><img width="50" height="50" alt="vektor" src="https://github.com/user-attachments/assets/d05df51f-c906-4a8f-a054-45e0d7e72326" /></p>
+
+<hr>
+
+<p align="center">Vektor: Modern Vector Graphics Editor</p>
+
+Vektor is a vector graphics editor built in C with GTK4, aiming for ease of creating graphics, simple user interface and lightweight size.

flake.nix

@@ -3,29 +3,33 @@
 
   inputs.nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
 
-  outputs = {
-    self,
-    nixpkgs,
-  }: let
-    system = "x86_64-linux";
-    pkgs = import nixpkgs {inherit system;};
-  in {
-    devShells.${system}.default = pkgs.mkShell {
-      nativeBuildInputs = with pkgs; [
-        gcc
-        clang-tools
-        lldb
+  outputs =
+    {
+      self,
+      nixpkgs,
+    }:
+    let
+      system = "x86_64-linux";
+      pkgs = import nixpkgs { inherit system; };
+    in
+    {
+      devShells.${system}.default = pkgs.mkShell {
+        nativeBuildInputs = with pkgs; [
+          gcc
+          clang-tools
+          lldb
 
-        meson
-        ninja
-        pkg-config
+          meson
+          ninja
+          pkg-config
 
-        gtk4
+          gtk4
+          libepoxy
 
-        gdb
-      ];
+          gdb
+        ];
 
-      shellHook = "";
+        shellHook = "";
+      };
     };
-  };
 }

icons/hicolor/scalable/actions/tool-circle-symbolic.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" version="1.1">
+ <defs>
+  <style id="current-color-scheme" type="text/css">
+   .ColorScheme-Text { color:#444444; } .ColorScheme-Highlight { color:#4285f4; } .ColorScheme-NeutralText { color:#ff9800; } .ColorScheme-PositiveText { color:#4caf50; } .ColorScheme-NegativeText { color:#f44336; }
+  </style>
+ </defs>
+ <path style="fill:currentColor" class="ColorScheme-Text" d="m 12,5 a 7,7 0 0 0 -7,7 7,7 0 0 0 7,7 7,7 0 0 0 7,-7 7,7 0 0 0 -7,-7 z m 0,2 a 5,5 0 0 1 5,5 5,5 0 0 1 -5,5 5,5 0 0 1 -5,-5 5,5 0 0 1 5,-5 z"/>
+</svg>

icons/hicolor/scalable/actions/tool-line-symbolic.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" version="1.1">
+ <defs>
+  <style id="current-color-scheme" type="text/css">
+   .ColorScheme-Text { color:#444444; } .ColorScheme-Highlight { color:#4285f4; } .ColorScheme-NeutralText { color:#ff9800; } .ColorScheme-PositiveText { color:#4caf50; } .ColorScheme-NegativeText { color:#f44336; }
+  </style>
+ </defs>
+ <path style="fill:currentColor" class="ColorScheme-Text" d="m 15.776522,16.777778 c 0,0 0.5,0.5 1,0 0.5,-0.5 0,-1 0,-1 L 6.2222222,5.2234778 c 0,0 -0.5,-0.5 -1,0 -0.5,0.5 0,1 0,1 z"/>
+</svg>

icons/hicolor/scalable/actions/tool-rectangle-symbolic.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" version="1.1">
+ <defs>
+  <style id="current-color-scheme" type="text/css">
+   .ColorScheme-Text { color:#444444; } .ColorScheme-Highlight { color:#4285f4; } .ColorScheme-NeutralText { color:#ff9800; } .ColorScheme-PositiveText { color:#4caf50; } .ColorScheme-NegativeText { color:#f44336; }
+  </style>
+ </defs>
+ <path style="fill:currentColor" class="ColorScheme-Text" d="M 4,4 V 18 H 18 V 4 Z M 6,6 H 16 V 16 H 6 Z"/>
+</svg>

meson.build

@@ -11,6 +11,7 @@ project(
 )
 
 gtk = dependency('gtk4', required: true)
+epoxy = dependency('epoxy')
 
 src = files(
   'src/main.c',
@@ -19,13 +20,14 @@ src = files(
   'src/core/raster.c',
   'src/ui/uicontroller.c',
   'src/ui/vektorcanvas.c',
+  'src/ui/widgets/colorwheel.c',
   'src/application/applicationstate.c'
 )
 
 executable(
   'vektor',
   src,
-  dependencies: [gtk],
+  dependencies: [gtk,epoxy],
   link_args: ['-lm'],
   install: true,
 )

shaders/triangle.frag.glsl

@@ -0,0 +1,10 @@
+#version 320 es
+precision mediump float;
+
+in vec4 vColor;
+out vec4 FragColor;
+
+void main()
+{
+    FragColor = vColor;
+}

shaders/triangle.vert.glsl

@@ -0,0 +1,15 @@
+#version 320 es
+precision mediump float;
+
+layout(location = 0) in vec2 aPos;
+layout (location = 1) in vec4 aColor;
+
+uniform mat4 uProjection;
+
+out vec4 vColor;
+
+void main()
+{
+    gl_Position = uProjection * vec4(aPos, 0.0, 1.0);
+    vColor = aColor;
+}

src/application/applicationstate.c

@@ -1,10 +1,15 @@
 #include "./applicationstate.h"
 #include "glib.h"
+#include "gtk/gtk.h"
+#include "gtk/gtkrevealer.h"
 #include "src/core/primitives.h"
 #include "src/core/raster.h"
 #include "src/ui/vektorcanvas.h"
+#include "src/ui/widgets/colorwheel.h"
+#include "src/util/color.h"
 
 typedef struct button_tool_set_data {
+    GtkRevealer* revealer;
     VektorAppState* state;
     VektorAppTool tool;
 } button_tool_set_data;
@@ -13,8 +18,29 @@ static void appstate_set_tool(GtkButton* button, gpointer user_data) {
     button_tool_set_data* data = (button_tool_set_data*)user_data;
     data->state->selectedTool = data->tool;
 
-    // setting tool also resets selected primitive
-    data->state->selectedPrimitive = NULL;
+    // setting tool makes the sub-tools menu to close
+    gtk_revealer_set_reveal_child(data->revealer, FALSE);
+
+    // setting tool also resets selected shape
+    data->state->selectedShape = NULL;
+}
+
+static void appstate_reveal_subtools(GtkButton* button, gpointer user_data) {
+    GtkRevealer* revealer = (GtkRevealer*)user_data;
+    gboolean visible = gtk_revealer_get_reveal_child(revealer);
+    gtk_revealer_set_reveal_child(revealer, !visible);
+}
+
+static void appstate_on_color_change(VektorColorWheel* wheel, gpointer user_data) {
+    VektorColor c = vektor_color_wheel_get_color(wheel);
+    VektorAppState* appstate = (VektorAppState*)user_data;
+    appstate->currentColor = c;
+
+    if(appstate->selectedShape != NULL) {
+        appstate->selectedShape->style.stroke_color = c;
+    }
+    
+    gtk_gl_area_queue_render(GTK_GL_AREA(appstate->widgetState->workspaceCanvas));
 }
 
 static void canvas_onclick(GtkGestureClick* gesture, int n_press, double x,
@@ -31,11 +57,12 @@ static void canvas_onclick(GtkGestureClick* gesture, int n_press, double x,
     int canvas_w = state->canvas->width;
     int canvas_h = state->canvas->height;
 
-    double sx = canvas_w / (double)widget_w;
-    double sy = canvas_h / (double)widget_h;
+    V2 normalized_coords =
+        (V2){(2 * (x / widget_w)) - 1, 1 - (2 * (y / widget_h))};
 
-    g_debug("<%f , %f>", x * sx, y * sy);
-    vektor_appstate_canvas_click(state, x * sx, y * sy);
+    vektor_appstate_canvas_click(state, normalized_coords.x,
+                                 normalized_coords.y);
+    gtk_gl_area_queue_render(GTK_GL_AREA(widget));
 }
 
 void vektor_appstate_canvas_click(VektorAppState* state, double x, double y) {
@@ -43,51 +70,74 @@ void vektor_appstate_canvas_click(VektorAppState* state, double x, double y) {
 
 begin_click_dispatch:
     if (state->selectedTool == VektorLineTool) {
-        // create new polyline primitive if none is selected
-        if (state->selectedPrimitive == NULL) {
+        // create new polyline shape if none is selected
+        if (state->selectedShape == NULL) {
 
             VektorPolyline* line = vektor_polyline_new();
             VektorPrimitive linePrimitive =
                 (VektorPrimitive){.kind = VEKTOR_POLYLINE, .polyline = line};
-            vektor_primitivebuffer_add_primitive(state->primitiveBuffer,
-                                                 linePrimitive);
+            VektorStyle style =
+                (VektorStyle){.stroke_color = state->currentColor,
+                              .stroke_width = 0.01};
+            VektorShape shape = (VektorShape){
+                .primitive = linePrimitive, .z_index = 0, .style = style};
+            vektor_shapebuffer_add_shape(state->shapeBuffer, vektor_shape_new(linePrimitive, style, 0));
 
-            state->selectedPrimitive =
-                &(state->primitiveBuffer
-                      ->primitives[state->primitiveBuffer->count - 1]);
 
-        } else if (state->selectedPrimitive->kind != VEKTOR_POLYLINE) {
+            state->selectedShape =
+                &(state->shapeBuffer->shapes[state->shapeBuffer->count - 1]);
+
+        } else if (state->selectedShape->primitive.kind != VEKTOR_POLYLINE) {
             // selecting a tool resets the selection, so this condition
             // should not happen
             g_warning("Invalid selected primitive; polyline expected");
-            state->selectedPrimitive = NULL;
+            state->selectedShape = NULL;
             goto begin_click_dispatch; // retry
         }
 
-        vektor_polyline_add_point(state->selectedPrimitive->polyline, pos);
-    }
+        vektor_polyline_add_point(state->selectedShape->primitive.polyline,
+                                  pos);
 
-    vektor_framebuffer_rasterize(state->frameBuffer, state->primitiveBuffer);
-    vektor_canvas_drawfrom(state->frameBuffer, state->canvas);
-    vektor_canvas_update(state->canvas);
+                                              vektor_shapes_update_bbox(state->shapeBuffer);
+
+
+                    for (size_t i = 0; i < state->shapeBuffer->count; i++) {
+                g_print("<%f,%f>-<%f,%f>\n", state->shapeBuffer->shapes[i].bbox.min.x, state->shapeBuffer->shapes[i].bbox.min.y, state->shapeBuffer->shapes[i].bbox.max.x, state->shapeBuffer->shapes[i].bbox.max.y);
+            }
+    }
 }
 
 void vektor_appstate_new(VektorWidgetState* wstate, VektorAppState* stateOut) {
     button_tool_set_data* data_linetool = malloc(sizeof(button_tool_set_data));
     data_linetool->state = stateOut;
     data_linetool->tool = VektorLineTool;
+    data_linetool->revealer = wstate->workspaceRevealerShapes;
 
     // populate appstate
-    stateOut->primitiveBuffer = malloc(sizeof(VektorPrimitiveBuffer));
-    *stateOut->primitiveBuffer = (VektorPrimitiveBuffer){0};
-    stateOut->frameBuffer = malloc(sizeof(VektorFramebuffer));
-    *stateOut->frameBuffer = vektor_framebuffer_new(400, 400);
+    stateOut->shapeBuffer = malloc(sizeof(VektorShapeBuffer));
+    *stateOut->shapeBuffer = (VektorShapeBuffer){0};
     stateOut->canvas = malloc(sizeof(VektorCanvas));
-    vektor_canvas_init(wstate, stateOut->canvas);
+    stateOut->widgetState = wstate;
+    stateOut->currentColor = vektor_color_blank;
+    stateOut->selectedShape = NULL;
+    vektor_canvas_init(wstate, stateOut->canvas, stateOut->shapeBuffer);
 
     // link all the buttons
     g_signal_connect(G_OBJECT(wstate->workspaceButtonLinetool), "clicked",
                      G_CALLBACK(appstate_set_tool), data_linetool);
+    g_signal_connect(G_OBJECT(wstate->workspaceButtonRecttool), "clicked",
+                     G_CALLBACK(appstate_set_tool), data_linetool);
+    g_signal_connect(G_OBJECT(wstate->workspaceButtonCircletool), "clicked",
+                     G_CALLBACK(appstate_set_tool), data_linetool);
+
+    // hook subtool revealers to their master buttons
+    g_signal_connect(G_OBJECT(wstate->workspaceButtonMasterShapes), "clicked",
+                     G_CALLBACK(appstate_reveal_subtools),
+                     wstate->workspaceRevealerShapes);
+
+    // hook relevant stuff to master color picker
+    g_signal_connect(G_OBJECT(wstate->workspaceColorPicker), "color-changed",
+                    G_CALLBACK(appstate_on_color_change), stateOut);
 
     // Add click gesture to canvas
     GtkGesture* canvasClickGesture = gtk_gesture_click_new();

src/application/applicationstate.h

@@ -9,13 +9,15 @@
 typedef enum VektorAppTool { VektorLineTool } VektorAppTool;
 
 typedef struct VektorAppState {
+    VektorWidgetState* widgetState;
+
     VektorAppTool selectedTool;
-    VektorPrimitive* selectedPrimitive;
+    VektorShape* selectedShape;
+
+    VektorColor currentColor;
 
     // Logic space
-    VektorPrimitiveBuffer* primitiveBuffer;
-    // Pixel space
-    VektorFramebuffer* frameBuffer;
+    VektorShapeBuffer* shapeBuffer;
     // View space
     VektorCanvas* canvas;
 

src/core/primitives.c

@@ -1,4 +1,7 @@
 #include "primitives.h"
+#include <assert.h>
+#include <math.h>
+#include <stddef.h>
 
 VektorPolyline* vektor_polyline_new(void) {
     VektorPolyline* pl = malloc(sizeof(VektorPolyline));
@@ -46,12 +49,65 @@ void vektor_polygon_free(VektorPolygon* pg) {
     free(pg);
 }
 
-void vektor_primitivebuffer_add_primitive(VektorPrimitiveBuffer* buffer,
-                                          VektorPrimitive prim) {
+void vektor_shapebuffer_add_shape(VektorShapeBuffer* buffer,
+                                  VektorShape shape) {
     if (buffer->count >= buffer->capacity) {
         buffer->capacity = buffer->capacity ? buffer->capacity * 2 : 4;
-        buffer->primitives = realloc(
-            buffer->primitives, sizeof(VektorPrimitive) * buffer->capacity);
+        buffer->shapes =
+            realloc(buffer->shapes, sizeof(VektorShape) * buffer->capacity);
     }
-    buffer->primitives[buffer->count++] = prim;
+    buffer->shapes[buffer->count++] = shape;
 }
+
+VektorBBox polyline_mk_bbox(VektorPrimitive prim) {
+    float min_x, max_x, min_y, max_y;
+    for (size_t i = 0; i < prim.polyline->count; i++) {
+        V2 p = prim.polyline->points[i];
+        min_x = fminf(min_x, p.x);
+        min_y = fminf(min_y, p.y);
+
+        max_x = fminf(max_x, p.x);
+        max_y = fminf(max_y, p.y);
+    }
+    return (VektorBBox){(V2){min_x, min_y}, (V2){max_x, max_y}};
+}
+
+VektorBBox polygon_mk_bbox(VektorPrimitive prim) {
+    float min_x, max_x, min_y, max_y;
+    for (size_t i = 0; i < prim.polygon->count; i++) {
+        V2 p = prim.polygon->points[i];
+        min_x = fminf(min_x, p.x);
+        min_y = fminf(min_y, p.y);
+
+        max_x = fminf(max_x, p.x);
+        max_y = fminf(max_y, p.y);
+    }
+    return (VektorBBox){(V2){min_x, min_y}, (V2){max_x, max_y}};
+}
+
+VektorBBox vektor_mk_bbox(VektorPrimitive prim) {
+    switch (prim.kind) {
+    case VEKTOR_POLYLINE:
+        return polyline_mk_bbox(prim);
+        break;
+
+    case VEKTOR_POLYGON:
+        return polygon_mk_bbox(prim);
+        break;
+
+    default:
+        // TODO: fill in all primitives
+        break;
+    }
+}
+
+VektorShape vektor_shape_new(VektorPrimitive prim, VektorStyle style,
+                             int z_index) {
+    return (VektorShape){.primitive = prim, .style = style, .z_index = z_index, .bbox=vektor_mk_bbox(prim)};
+}
+
+void vektor_shapes_update_bbox(VektorShapeBuffer* buffer) {
+    for (size_t i = 0; i < buffer->count; i++) {
+        buffer->shapes[i].bbox = vektor_mk_bbox(buffer->shapes[i].primitive);
+    }
+}

src/core/primitives.h

@@ -1,15 +1,11 @@
 #ifndef PRIMITIVES_H_
 #define PRIMITIVES_H_
 
+#include "src/util/color.h"
 #include "stddef.h"
 #include "stdlib.h"
 #include "vector.h"
 
-typedef struct {
-    V2 p1;
-    V2 p2;
-} VektorLine;
-
 typedef struct {
     V2* points;
     size_t count;
@@ -28,7 +24,6 @@ typedef struct {
 } VektorCircle;
 
 typedef enum {
-    VEKTOR_LINE,
     VEKTOR_POLYLINE,
     VEKTOR_POLYGON,
     VEKTOR_CIRCLE
@@ -37,7 +32,6 @@ typedef enum {
 typedef struct {
     VektorPrimitiveKind kind;
     union {
-        VektorLine line;
         VektorPolyline* polyline;
         VektorPolygon* polygon;
         VektorCircle circle;
@@ -53,12 +47,36 @@ void vektor_polygon_add_point(VektorPolygon* pl, V2 point);
 void vektor_polygon_free(VektorPolygon* pl);
 
 typedef struct {
-    VektorPrimitive* primitives;
+    VektorColor stroke_color;
+    float stroke_width;
+} VektorStyle;
+
+typedef struct {
+    V2 min;
+    V2 max;
+} VektorBBox;
+
+typedef struct {
+    VektorStyle style;
+    int z_index;
+    VektorBBox bbox;
+    VektorPrimitive primitive;
+} VektorShape;
+
+VektorBBox polyline_mk_bbox(VektorPrimitive prim);
+VektorBBox polygon_mk_bbox(VektorPrimitive prim);
+
+VektorBBox vektor_mk_bbox(VektorPrimitive prim);
+
+VektorShape vektor_shape_new(VektorPrimitive prim, VektorStyle style,
+                             int z_index);
+
+typedef struct {
+    VektorShape* shapes;
     size_t count;
     size_t capacity;
-} VektorPrimitiveBuffer;
-
-void vektor_primitivebuffer_add_primitive(VektorPrimitiveBuffer* edges,
-                                          VektorPrimitive edge);
+} VektorShapeBuffer;
 
+void vektor_shapebuffer_add_shape(VektorShapeBuffer* buffer, VektorShape shape);
+void vektor_shapes_update_bbox(VektorShapeBuffer* buffer);
 #endif // PRIMITIVES_H_

src/core/raster.c

@@ -1,4 +1,5 @@
 #include "raster.h"
+#include "epoxy/gl.h"
 #include "primitives.h"
 #include "stddef.h"
 #include <stddef.h>
@@ -11,18 +12,15 @@ void vektor_edgebuffer_add_edge(EdgeBuffer* buffer, Edge edge) {
     buffer->edges[buffer->count++] = edge;
 }
 
-void vektor_line_flatten(EdgeBuffer* buffer, VektorLine line) {
-    vektor_edgebuffer_add_edge(buffer, (Edge){line.p1, line.p2, 0});
-}
-
-void vektor_polyline_flatten(EdgeBuffer* buffer, VektorPolyline* line) {
+void vektor_polyline_flatten(EdgeBuffer* buffer, VektorPolyline* line,
+                             size_t j) {
     for (size_t i = 0; i + 1 < line->count; i++) {
         vektor_edgebuffer_add_edge(
-            buffer, (Edge){line->points[i], line->points[i + 1], 0});
+            buffer, (Edge){line->points[i], line->points[i + 1], 0, j});
     }
 }
 
-void vektor_polygon_flatten(EdgeBuffer* buffer, VektorPolygon* pg) {
+void vektor_polygon_flatten(EdgeBuffer* buffer, VektorPolygon* pg, size_t j) {
     size_t n = pg->count;
     if (n < 3)
         return;
@@ -31,96 +29,70 @@ void vektor_polygon_flatten(EdgeBuffer* buffer, VektorPolygon* pg) {
         V2 p1 = pg->points[i];
         V2 p2 = pg->points[(i + 1) % n];
         int winding = (p1.y < p2.y) ? +1 : -1;
-        vektor_edgebuffer_add_edge(buffer, (Edge){p1, p2, winding});
+        vektor_edgebuffer_add_edge(buffer, (Edge){p1, p2, winding, j});
     }
 }
 
-inline VektorFramebuffer vektor_framebuffer_new(unsigned int W,
-                                                unsigned int H) {
-    VektorFramebuffer fb = {
-        .width = W, .height = H, .pixels = calloc(W * H * 4, 1)};
-    return fb;
-}
-
-inline void vektor_framebuffer_putpixel(VektorFramebuffer* fb, int x, int y,
-                                        VektorColor color) {
-    if ((unsigned)x >= fb->width || (unsigned)y >= fb->height)
-        return;
-
-    int i = (y * fb->width + x) * 4;
-    fb->pixels[i + 0] = color.r;
-    fb->pixels[i + 1] = color.g;
-    fb->pixels[i + 2] = color.b;
-    fb->pixels[i + 3] = color.a;
-}
-
-void draw_filled_circle(VektorFramebuffer* fb, int cx, int cy, int r,
-                        VektorColor color) {
-    for (int y = -r; y <= r; y++) {
-        int dx = (int)sqrt(r * r - y * y);
-        for (int x = -dx; x <= dx; x++) {
-            vektor_framebuffer_putpixel(fb, cx + x, cy + y, color);
-        }
-    }
-}
-
-void vektor_framebuffer_drawline(VektorFramebuffer* fb, V2 a, V2 b,
-                                 VektorColor color, double thickness) {
-    int x0 = (int)a.x;
-    int y0 = (int)a.y;
-    int x1 = (int)b.x;
-    int y1 = (int)b.y;
-
-    int dx = abs(x1 - x0);
-    int sx = x0 < x1 ? 1 : -1;
-    int dy = -abs(y1 - y0);
-    int sy = y0 < y1 ? 1 : -1;
-    int err = dx + dy;
-
-    for (;;) {
-        draw_filled_circle(fb, x0, y0, thickness / 2, color);
-        if (x0 == x1 && y0 == y1)
-            break;
-
-        int e2 = 2 * err;
-        if (e2 >= dy) {
-            err += dy;
-            x0 += sx;
-        }
-        if (e2 <= dx) {
-            err += dx;
-            y0 += sy;
-        }
-    }
-}
-
-void vektor_framebuffer_rasterize(VektorFramebuffer* fb,
-                                  VektorPrimitiveBuffer* prims) {
+void vektor_rasterize(VertexBuffer* vb, VektorShapeBuffer* shapes) {
     EdgeBuffer edges = {0};
-    for (size_t i = 0; i < prims->count; i++) {
-        VektorPrimitive* p = &prims->primitives[i];
+    for (size_t i = 0; i < shapes->count; i++) {
+        VektorPrimitive* p = &shapes->shapes[i].primitive;
 
         switch (p->kind) {
-        case VEKTOR_LINE:
-            vektor_line_flatten(&edges, p->line);
-            break;
-
         case VEKTOR_POLYLINE:
-            vektor_polyline_flatten(&edges, p->polyline);
+            vektor_polyline_flatten(&edges, p->polyline, i);
             break;
 
         case VEKTOR_POLYGON:
-            vektor_polygon_flatten(&edges, p->polygon);
+            vektor_polygon_flatten(&edges, p->polygon, i);
             break;
 
         default:
-            // TODO fill in all primitives
+            // TODO: fill in all primitives
             break;
         }
     }
 
-    for (size_t i = 0; i < edges.count; i++) {
-        vektor_framebuffer_drawline(fb, edges.edges[i].p1, edges.edges[i].p2,
-                                    vektor_color_solid(255, 0, 255), 4);
+    vektor_edges_to_triangles(vb, &edges, shapes);
+}
+
+void vb_add_triangle(VertexBuffer* vb, V2 v0, V2 v1, V2 v2, VektorColor color) {
+    if (vb->count + 3 >= vb->capacity) {
+        vb->capacity = vb->capacity ? vb->capacity * 2 : 8;
+        vb->vertices = realloc(vb->vertices, sizeof(Vertex) * vb->capacity);
+    }
+    vb->vertices[vb->count++] = (Vertex){v0, color};
+    vb->vertices[vb->count++] = (Vertex){v1, color};
+    vb->vertices[vb->count++] = (Vertex){v2, color};
+}
+
+void vektor_edge_to_triangles(VertexBuffer* vb, Edge e,
+                              VektorShapeBuffer* shape_buffer) {
+    float dx = e.p2.x - e.p1.x;
+    float dy = e.p2.y - e.p1.y;
+    float len = sqrtf(dx * dx + dy * dy);
+    if (len == 0)
+        return;
+
+    float px =
+        -dy / len * (shape_buffer->shapes[e.shape_id].style.stroke_width / 2);
+    float py =
+        dx / len * (shape_buffer->shapes[e.shape_id].style.stroke_width / 2);
+
+    V2 v0 = {e.p1.x + px, e.p1.y + py};
+    V2 v1 = {e.p1.x - px, e.p1.y - py};
+    V2 v2 = {e.p2.x + px, e.p2.y + py};
+    V2 v3 = {e.p2.x - px, e.p2.y - py};
+
+    vb_add_triangle(vb, v0, v1, v2,
+                    shape_buffer->shapes[e.shape_id].style.stroke_color);
+    vb_add_triangle(vb, v2, v1, v3,
+                    shape_buffer->shapes[e.shape_id].style.stroke_color);
+}
+
+void vektor_edges_to_triangles(VertexBuffer* vb, EdgeBuffer* edges,
+                               VektorShapeBuffer* shape_buffer) {
+    for (size_t i = 0; i < edges->count; i++) {
+        vektor_edge_to_triangles(vb, edges->edges[i], shape_buffer);
     }
 }

src/core/raster.h

@@ -3,14 +3,16 @@
 
 #include "primitives.h"
 
-#include "src/util/color.h"
+#include "../util/color.h"
 #include "stddef.h"
 #include "vector.h"
+#include <stddef.h>
 
 typedef struct {
     V2 p1;
     V2 p2;
     int winding;
+    size_t shape_id;
 } Edge;
 
 typedef struct {
@@ -21,26 +23,25 @@ typedef struct {
 
 void vektor_edgebuffer_add_edge(EdgeBuffer* edges, Edge edge);
 
-void vektor_line_flatten(EdgeBuffer* edges, VektorLine line);
-void vektor_polyline_flatten(EdgeBuffer* edges, VektorPolyline* line);
-void vektor_polygon_flatten(EdgeBuffer* buffer, VektorPolygon* line);
+void vektor_polyline_flatten(EdgeBuffer* edges, VektorPolyline* line, size_t i);
+void vektor_polygon_flatten(EdgeBuffer* buffer, VektorPolygon* line, size_t i);
 
 typedef struct {
-    unsigned int width;
-    unsigned int height;
-    unsigned char* pixels; // Flat RGBA8 array
-} VektorFramebuffer;
+    V2 coords;
+    VektorColor color;
+} Vertex;
 
-VektorFramebuffer vektor_framebuffer_new(unsigned int width,
-                                         unsigned int height);
+typedef struct {
+    Vertex* vertices;
+    size_t count;
+    size_t capacity;
+} VertexBuffer;
 
-void vektor_framebuffer_putpixel(VektorFramebuffer* fb, int x, int y,
-                                 VektorColor color);
-
-void vektor_framebuffer_drawline(VektorFramebuffer* fb, V2 a, V2 b,
-                                 VektorColor color, double thickness);
-
-void vektor_framebuffer_rasterize(VektorFramebuffer* fb,
-                                  VektorPrimitiveBuffer* primitives);
+void vb_add_triangle(VertexBuffer* vb, V2 v0, V2 v1, V2 v2, VektorColor color);
+void vektor_edge_to_triangles(VertexBuffer* vb, Edge e,
+                              VektorShapeBuffer* shape_buffer);
+void vektor_edges_to_triangles(VertexBuffer* vb, EdgeBuffer* edges,
+                               VektorShapeBuffer* shape_buffer);
+void vektor_rasterize(VertexBuffer* vb, VektorShapeBuffer* shapes);
 
 #endif // RASTER_H_

src/core/vector.h

@@ -4,8 +4,8 @@
 #include "math.h"
 
 typedef struct {
-    double x;
-    double y;
+    float x;
+    float y;
 } V2;
 
 typedef struct {

src/ui/uicontroller.c

@@ -3,8 +3,12 @@
 #include "glib-object.h"
 #include "gtk/gtk.h"
 #include "gtk/gtkcssprovider.h"
+#include "gtk/gtkrevealer.h"
+#include "src/ui/widgets/colorwheel.h"
 
 void vektor_uictrl_init(GtkApplication* app, VektorWidgetState* stateOut) {
+    g_type_ensure(VEKTOR_TYPE_COLOR_WHEEL);
+
     GtkBuilder* builder = gtk_builder_new();
     GError* error = NULL;
 
@@ -20,15 +24,38 @@ void vektor_uictrl_init(GtkApplication* app, VektorWidgetState* stateOut) {
         gdk_display_get_default(), GTK_STYLE_PROVIDER(provider),
         GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
 
+    // Load theme
+    gtk_icon_theme_add_search_path(
+        gtk_icon_theme_get_for_display(gdk_display_get_default()), "icons");
+
+    GtkIconTheme* theme =
+        gtk_icon_theme_get_for_display(gdk_display_get_default());
+    
+    /*if (gtk_icon_theme_has_icon(theme, "vektor-circle-symbolic"))
+        g_print("GTK sees it!\n");
+    else
+        g_print("Still invisible...\n");*/
+
     // populate state
     stateOut->window =
         GTK_WINDOW(gtk_builder_get_object(builder, "main_window"));
     stateOut->workspacePaned =
         GTK_PANED(gtk_builder_get_object(builder, "workspace_paned"));
     stateOut->workspaceCanvas =
-        GTK_PICTURE(gtk_builder_get_object(builder, "workspace"));
+        GTK_GL_AREA(gtk_builder_get_object(builder, "workspace"));
+
+    stateOut->workspaceButtonMasterShapes =
+        GTK_BUTTON(gtk_builder_get_object(builder, "button_shapetools"));
+    stateOut->workspaceRevealerShapes =
+        GTK_REVEALER(gtk_builder_get_object(builder, "shape_revealer"));
     stateOut->workspaceButtonLinetool =
         GTK_BUTTON(gtk_builder_get_object(builder, "button_linetool"));
+    stateOut->workspaceButtonRecttool =
+        GTK_BUTTON(gtk_builder_get_object(builder, "button_rectangletool"));
+    stateOut->workspaceButtonCircletool =
+        GTK_BUTTON(gtk_builder_get_object(builder, "button_circletool"));
+    stateOut->workspaceColorPicker =
+        VEKTOR_COLOR_WHEEL(gtk_builder_get_object(builder, "color_picker"));
 
     // Set window properties
     gtk_window_set_application(stateOut->window, app);
@@ -39,9 +66,5 @@ void vektor_uictrl_init(GtkApplication* app, VektorWidgetState* stateOut) {
 }
 
 void vektor_uictrl_map(VektorWidgetState* state) {
-
-    // set the workspace divider to 7:3 ratio
-    int window_width = gtk_widget_get_width(GTK_WIDGET(state->window));
-    g_print("%i", window_width);
     gtk_paned_set_position(state->workspacePaned, 800 * .7);
 }

src/ui/uicontroller.h

@@ -2,6 +2,8 @@
 #define VKTR_UICTRL_H
 
 #include "gtk/gtk.h"
+#include "gtk/gtkrevealer.h"
+#include "src/ui/widgets/colorwheel.h"
 
 /*
 Global application widget state, holding references to
@@ -10,9 +12,15 @@ all the widgets used in internal logic of the program
 typedef struct VektorWidgetState {
     GtkWindow* window;
     GtkPaned* workspacePaned;
-    GtkPicture* workspaceCanvas;
+    GtkGLArea* workspaceCanvas;
 
+    GtkButton* workspaceButtonMasterShapes;
+    GtkRevealer* workspaceRevealerShapes;
     GtkButton* workspaceButtonLinetool;
+    GtkButton* workspaceButtonRecttool;
+    GtkButton* workspaceButtonCircletool;
+
+    VektorColorWheel* workspaceColorPicker;
 
     // GtkWidget* Workspace
 } VektorWidgetState;

src/ui/vektorcanvas.c

@@ -1,14 +1,167 @@
+#include "epoxy/gl.h"
 #include "gtk/gtk.h"
 
 #include "../core/raster.h"
+#include "src/core/primitives.h"
 #include "uicontroller.h"
 #include "vektorcanvas.h"
+#include <epoxy/gl_generated.h>
 
 #define VKTR_CANVAS_WIDTH 400
 #define VKTR_CANVAS_HEIGHT 400
 #define VKTR_CANVAS_SIZE (VKTR_CANVAS_WIDTH * VKTR_CANVAS_HEIGHT * 4)
 
-void vektor_canvas_init(VektorWidgetState* state, VektorCanvas* canvasOut) {
+char* read_file(const char* path) {
+    FILE* f = fopen(path, "rb");
+    if (!f)
+        return NULL;
+
+    fseek(f, 0, SEEK_END);
+    long size = ftell(f);
+    fseek(f, 0, SEEK_SET);
+
+    char* buffer = malloc(size + 1);
+    fread(buffer, 1, size, f);
+    buffer[size] = '\0'; // null-terminate
+    fclose(f);
+    return buffer;
+}
+
+static GLuint shader_program;
+static GLuint vao;
+VertexBuffer vb;
+
+static GLuint compile_shader(GLenum type, const char* src) {
+    GLuint shader = glCreateShader(type);
+    glShaderSource(shader, 1, &src, NULL);
+    glCompileShader(shader);
+
+    GLint success;
+    glGetShaderiv(shader, GL_COMPILE_STATUS, &success);
+    if (!success) {
+        char info[512];
+        glGetShaderInfoLog(shader, 512, NULL, info);
+        g_error("Shader compile failed: %s", info);
+    }
+    return shader;
+}
+
+static void init_shader(void) {
+    char* vert_src = read_file("./shaders/triangle.vert.glsl");
+    char* frag_src = read_file("./shaders/triangle.frag.glsl");
+
+    if (!vert_src || !frag_src)
+        g_error("Failed to load shader files");
+
+    GLuint vertex = compile_shader(GL_VERTEX_SHADER, vert_src);
+    GLuint fragment = compile_shader(GL_FRAGMENT_SHADER, frag_src);
+
+    shader_program = glCreateProgram();
+    glAttachShader(shader_program, vertex);
+    glAttachShader(shader_program, fragment);
+    glLinkProgram(shader_program);
+
+    GLint success;
+    glGetProgramiv(shader_program, GL_LINK_STATUS, &success);
+    if (!success) {
+        char info[512];
+        glGetProgramInfoLog(shader_program, 512, NULL, info);
+        g_error("Shader link failed: %s", info);
+    }
+
+    glDeleteShader(vertex);
+    glDeleteShader(fragment);
+}
+
+static void init_geometry(void) {
+    GLuint vbo;
+
+    glGenVertexArrays(1, &vao);
+    glBindVertexArray(vao);
+
+    glGenBuffers(1, &vbo);
+    glBindBuffer(GL_ARRAY_BUFFER, vbo);
+
+    glEnableVertexAttribArray(0);
+    glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, sizeof(Vertex),
+                          (void*)offsetof(Vertex, coords));
+
+    glEnableVertexAttribArray(1);
+    glVertexAttribPointer(1, 4, GL_UNSIGNED_BYTE, GL_TRUE, sizeof(Vertex),
+                          (void*)offsetof(Vertex, color));
+
+    glBindVertexArray(0);
+}
+static gboolean render(GtkGLArea* area, GdkGLContext* context,
+                       VektorShapeBuffer* prims) {
+    vektor_rasterize(&vb, prims);
+
+    glBufferData(GL_ARRAY_BUFFER, vb.count * sizeof(Vertex), vb.vertices,
+                 GL_STATIC_DRAW);
+
+    glUseProgram(shader_program);
+
+    GLuint uProjectionLoc = glGetUniformLocation(shader_program, "uProjection");
+    float projectionMatrix[16] = {1, 0, 0, 0, 0, 1, 0, 0,
+                                  0, 0, 1, 0, 0, 0, 0, 1};
+    glUniformMatrix4fv(uProjectionLoc, 1, GL_FALSE, projectionMatrix);
+
+    glBindVertexArray(vao);
+    glDisable(GL_CULL_FACE);
+    // glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);
+    glClearColor(0.1f, 0.1f, 0.1f, 1.0f);
+    glClear(GL_COLOR_BUFFER_BIT);
+
+    glDrawArrays(GL_TRIANGLES, 0, vb.count);
+    GLenum err = glGetError();
+    //printf("OpenGL error: %x\n", err);
+    // glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
+    glBindVertexArray(0);
+    glUseProgram(0);
+
+    return TRUE;
+}
+
+static void dump_gl_info(GtkGLArea* area) {
+    gtk_gl_area_make_current(area);
+
+    if (gtk_gl_area_get_error(area)) {
+        g_warning("Failed to make GL context current");
+        return;
+    }
+
+    const GLubyte* renderer = glGetString(GL_RENDERER);
+    const GLubyte* vendor = glGetString(GL_VENDOR);
+    const GLubyte* version = glGetString(GL_VERSION);
+    const GLubyte* shading = glGetString(GL_SHADING_LANGUAGE_VERSION);
+
+    g_debug("GL Vendor    : %s", vendor);
+    g_debug("GL Renderer  : %s", renderer);
+    g_debug("GL Version   : %s", version);
+    g_debug("GLSL Version : %s", shading);
+
+    GLint n;
+    glGetIntegerv(GL_NUM_EXTENSIONS, &n);
+    g_debug("Supported extensions (%d):", n);
+    for (GLint i = 0; i < n; ++i) {
+        g_debug("  %s", glGetStringi(GL_EXTENSIONS, i));
+    }
+}
+
+static void realize(GtkGLArea* area, gpointer user_data) {
+    gtk_gl_area_make_current(area);
+
+    if (gtk_gl_area_get_error(area) != NULL)
+        return;
+
+    glEnable(GL_DEBUG_OUTPUT);
+    dump_gl_info(area);
+    init_shader();
+    init_geometry();
+}
+
+void vektor_canvas_init(VektorWidgetState* state, VektorCanvas* canvasOut,
+                        VektorShapeBuffer* prims) {
     canvasOut->canvasWidget = state->workspaceCanvas;
     canvasOut->width = VKTR_CANVAS_WIDTH;
     canvasOut->height = VKTR_CANVAS_HEIGHT;
@@ -20,49 +173,8 @@ void vektor_canvas_init(VektorWidgetState* state, VektorCanvas* canvasOut) {
         VKTR_CANVAS_WIDTH, VKTR_CANVAS_HEIGHT, GDK_MEMORY_R8G8B8A8,
         canvasOut->canvasPixelBytes, VKTR_CANVAS_WIDTH * 4);
 
-    gtk_picture_set_paintable(canvasOut->canvasWidget,
-                              GDK_PAINTABLE(canvasOut->canvasTexture));
-    gtk_picture_set_content_fit(GTK_PICTURE(canvasOut->canvasWidget),
-                                GTK_CONTENT_FIT_CONTAIN);
-    // g_object_unref(bytes);
+    g_signal_connect(canvasOut->canvasWidget, "realize", G_CALLBACK(realize),
+                     NULL);
+    g_signal_connect(canvasOut->canvasWidget, "render", G_CALLBACK(render),
+                     prims);
 }
-
-/* Generate new texture based on canvasPixels*/
-void vektor_canvas_update(VektorCanvas* canvas) {
-    g_bytes_unref(canvas->canvasPixelBytes);
-    canvas->canvasPixelBytes =
-        g_bytes_new(canvas->canvasPixels, VKTR_CANVAS_SIZE);
-
-    g_object_unref(canvas->canvasTexture);
-    canvas->canvasTexture = gdk_memory_texture_new(
-        canvas->width, canvas->height, GDK_MEMORY_R8G8B8A8,
-        canvas->canvasPixelBytes, canvas->width * 4);
-
-    gtk_picture_set_paintable(canvas->canvasWidget,
-                              GDK_PAINTABLE(canvas->canvasTexture));
-}
-
-void vektor_canvas_fill(VektorCanvas* canvas, VektorColor color) {
-    for (int x = 0; x < VKTR_CANVAS_WIDTH; x++) {
-        for (int y = 0; y < VKTR_CANVAS_HEIGHT; y++) {
-            int i = (y * VKTR_CANVAS_WIDTH + x) * 4;
-            canvas->canvasPixels[i + 0] = color.r;
-            canvas->canvasPixels[i + 1] = color.g;
-            canvas->canvasPixels[i + 2] = color.b;
-            canvas->canvasPixels[i + 3] = color.a;
-        }
-    }
-}
-
-void vektor_canvas_drawfrom(VektorFramebuffer* fb, VektorCanvas* target) {
-    for (int x = 0; x < fb->width; x++) {
-        for (int y = 0; y < fb->height; y++) {
-
-            int i = (y * fb->width + x) * 4;
-            target->canvasPixels[i + 0] = (guchar)fb->pixels[i + 0];
-            target->canvasPixels[i + 1] = (guchar)fb->pixels[i + 1];
-            target->canvasPixels[i + 2] = (guchar)fb->pixels[i + 2];
-            target->canvasPixels[i + 3] = (guchar)fb->pixels[i + 3];
-        }
-    }
-}

src/ui/vektorcanvas.h

@@ -3,10 +3,11 @@
 
 #include "../core/raster.h"
 #include "../util/color.h"
+#include "gtk/gtk.h"
 #include "uicontroller.h"
 
 typedef struct VektorCanvas {
-    GtkPicture* canvasWidget;
+    GtkGLArea* canvasWidget;
 
     // texture related stuff
     guchar* canvasPixels;
@@ -17,9 +18,10 @@ typedef struct VektorCanvas {
     int height;
 } VektorCanvas;
 
-void vektor_canvas_init(VektorWidgetState* state, VektorCanvas* canvasOut);
-void vektor_canvas_update(VektorCanvas* canvas);
-void vektor_canvas_fill(VektorCanvas* canvas, VektorColor color);
-void vektor_canvas_drawfrom(VektorFramebuffer* fb, VektorCanvas* canvas);
+void vektor_canvas_init(VektorWidgetState* state, VektorCanvas* canvasOut,
+                        VektorShapeBuffer* shapes);
+// void vektor_canvas_update(VektorCanvas* canvas);
+// void vektor_canvas_fill(VektorCanvas* canvas, VektorColor color);
+// void vektor_canvas_drawfrom(VektorFramebuffer* fb, VektorCanvas* canvas);
 
 #endif

src/ui/widgets/colorwheel.c

@@ -0,0 +1,301 @@
+#include "colorwheel.h"
+#include "cairo.h"
+#include "gtk/gtk.h"
+#include "gtk/gtkshortcut.h"
+
+#define M_PI 3.14159265358979323846
+
+enum { COLOR_CHANGED, LAST_SIGNAL };
+static guint signals[LAST_SIGNAL];
+
+struct _VektorColorWheel {
+    GtkDrawingArea parent_instance;
+
+    double hue;
+    double saturation;
+    double lightness;
+
+    gboolean dragging_wheel;
+    gboolean dragging_triangle;
+};
+
+G_DEFINE_TYPE(VektorColorWheel, vektor_color_wheel, GTK_TYPE_DRAWING_AREA)
+
+static gboolean point_in_triangle(
+    double px, double py,
+    double ax, double ay,
+    double bx, double by,
+    double cx, double cy,
+    double* u, double* v, double* w)
+{
+    double denom =
+        (by - cy)*(ax - cx) +
+        (cx - bx)*(ay - cy);
+
+    *u =
+        ((by - cy)*(px - cx) +
+         (cx - bx)*(py - cy)) / denom;
+
+    *v =
+        ((cy - ay)*(px - cx) +
+         (ax - cx)*(py - cy)) / denom;
+
+    *w = 1 - *u - *v;
+
+    return (*u >= 0 && *v >= 0 && *w >= 0);
+}
+
+static void vektor_color_wheel_snapshot(GtkWidget* widget, GtkSnapshot* snapshot) {
+    VektorColorWheel* self = VEKTOR_COLOR_WHEEL(widget);
+
+    int width = gtk_widget_get_width(widget);
+    int height = gtk_widget_get_height(widget);
+
+    graphene_rect_t bounds = GRAPHENE_RECT_INIT(0,0,width,height);
+    cairo_t* cr = gtk_snapshot_append_cairo(snapshot, &bounds);
+
+    double cx = width / 2.0;
+    double cy = height / 2.0;
+
+    double outer_radius = MIN(width, height) / 2.0;
+    double wheel_radius = outer_radius * 0.95;
+    double inner_radius = wheel_radius * 0.9;
+
+    double triangle_radius = wheel_radius * 0.75;
+
+    // wheel draw
+    for(int a = 0; a < 360; a++) {
+        double angle_1 = a*(M_PI / 180.0);
+        double angle_2 = (a + 1) * (M_PI / 180.0);
+
+        cairo_new_path(cr);
+        cairo_arc(cr, cx, cy, wheel_radius, angle_1, angle_2);
+        cairo_arc_negative(cr, cx, cy, inner_radius, angle_2, angle_1);
+        cairo_close_path(cr);
+
+        float r,g,b;
+        gtk_hsv_to_rgb(a / 360.0, 1.0, 1.0, &r, &g, &b);
+
+        cairo_set_source_rgb(cr, r, g, b);
+        cairo_fill(cr);
+    }
+
+    // triangle draw
+    double ax = cx +  triangle_radius;
+    double ay = cy;
+
+    double bx = cx - 0.5 * triangle_radius;
+    double by = cy + 0.866 * triangle_radius;
+
+    double cx2 = cx - 0.5 * triangle_radius;
+    double cy2 = cy - 0.866 * triangle_radius;
+
+    cairo_new_path(cr);
+
+    cairo_move_to(cr, ax, ay);
+    cairo_line_to(cr, bx, by);
+    cairo_line_to(cr, cx2, cy2);
+    cairo_close_path(cr);
+
+    cairo_save(cr);
+    cairo_clip(cr);
+
+    // base color (pure hue at full brightness)
+    float r, g, b;
+    gtk_hsv_to_rgb(self->hue, 1.0, 1.0, &r, &g, &b);
+    cairo_set_source_rgb(cr, r, g, b);
+    cairo_paint(cr);
+
+    // White gradient: from pure hue (right) → white (bottom)
+    cairo_pattern_t* white = cairo_pattern_create_linear(ax, ay, bx, by);
+    cairo_pattern_add_color_stop_rgba(white, 0.0, 1,1,1, 0.0);     // transparent at pure hue
+    cairo_pattern_add_color_stop_rgba(white, 1.0, 1,1,1, 1.0);     // opaque white at bottom
+    cairo_set_source(cr, white);
+    cairo_paint(cr);
+    cairo_pattern_destroy(white);
+
+    // Black gradient: from pure hue (right) → black (top)
+    cairo_pattern_t* black = cairo_pattern_create_linear(ax, ay, cx2, cy2);
+    cairo_pattern_add_color_stop_rgba(black, 0.0, 0,0,0, 0.0);     // transparent at pure hue
+    cairo_pattern_add_color_stop_rgba(black, 1.0, 0,0,0, 1.0);     // opaque black at top
+    cairo_set_source(cr, black);
+    cairo_paint(cr);
+    cairo_pattern_destroy(black);
+
+    cairo_restore(cr);
+
+    // triangle outline
+    cairo_set_source_rgb(cr,.1,.1,.1);
+    cairo_move_to(cr, ax, ay);
+    cairo_line_to(cr, bx, by);
+    cairo_line_to(cr, cx2, cy2);
+    cairo_close_path(cr);
+
+    cairo_set_source_rgb(cr,.1,.1,.1);
+    cairo_stroke(cr);
+
+    // selectors draw
+
+    // triangle selector
+    double chroma_weight = self->saturation * self->lightness;
+    double white_weight  = (1.0 - self->saturation) * self->lightness;
+    double black_weight  = 1.0 - self->lightness;
+
+    double px = ax * chroma_weight + bx * white_weight + cx2 * black_weight;
+    double py = ay * chroma_weight + by * white_weight + cy2 * black_weight;
+
+    cairo_arc(cr, px, py, 5, 0, 2*M_PI);
+
+    float fr, fg, fb;
+    vektor_colorout_wheel_get_color(self, &fr, &fg, &fb);
+    cairo_set_source_rgb(cr, fr, fg, fb);
+    cairo_fill_preserve(cr);
+    cairo_set_source_rgb(cr, 0.1, 0.1, 0.1);
+    cairo_set_line_width(cr, 2.0);
+    cairo_stroke(cr);
+
+    // wheel selector
+    double selector_angle = self->hue * 2 * M_PI;
+    double selector_width = 0.08;
+
+    cairo_new_path(cr);
+
+    cairo_arc(cr,
+            cx, cy,
+            wheel_radius,
+            selector_angle - selector_width,
+            selector_angle + selector_width);
+
+    cairo_arc_negative(cr,
+                    cx, cy,
+                    inner_radius,
+                    selector_angle + selector_width,
+                    selector_angle - selector_width);
+
+    cairo_close_path(cr);
+
+    cairo_set_source_rgb(cr, 1, 1, 1);
+    cairo_stroke(cr);
+
+    cairo_destroy(cr);
+}
+
+static void on_click(GtkGestureClick* gesture, int n_press, double x, double y, gpointer data) {
+    VektorColorWheel* wheel = VEKTOR_COLOR_WHEEL(data);
+    GtkWidget* widget = GTK_WIDGET(wheel);
+
+    int width = gtk_widget_get_width(widget);
+    int height = gtk_widget_get_height(widget);
+
+    double outer_radius = MIN(width, height) / 2.0;
+    double wheel_radius = outer_radius * 0.95;
+    double inner_radius = wheel_radius * 0.9;
+
+    double triangle_radius = wheel_radius * 0.75;
+
+    double cx = width / 2.0;
+    double cy = height / 2.0;
+
+    double ax = cx +  triangle_radius;
+    double ay = cy;
+
+    double bx = cx - 0.5 * triangle_radius;
+    double by = cy + 0.866 * triangle_radius;
+
+    double cx2 = cx - 0.5 * triangle_radius;
+    double cy2 = cy - 0.866 * triangle_radius;
+
+    double u,v,w;
+    if(point_in_triangle(x,y, ax,ay, bx,by, cx2,cy2, &u,&v,&w)) {
+
+        double denom = u + v;
+        if (denom > 0.0001) {  // avoid div-by-zero at black vertex
+            wheel->saturation = u / denom;
+        } else {
+            wheel->saturation = 0.0;  // arbitrary, since S irrelevant at V=0
+        }
+        wheel->lightness = denom;
+        g_signal_emit(wheel, signals[COLOR_CHANGED], 0);
+
+    } else {
+        double dx = x - cx;
+        double dy = y - cy;
+        double dist = sqrt(dx*dx+dy*dy);
+
+        if(dist > inner_radius && dist < outer_radius) {
+            
+            double angle = atan2(dy, dx);
+            if(angle < 0) { angle += 2 * M_PI; }
+
+            wheel->hue = angle / (2*M_PI);
+            g_signal_emit(wheel, signals[COLOR_CHANGED], 0);
+        }
+    }
+
+    gtk_widget_queue_draw(widget);
+}
+
+static void on_drag(GtkGestureDrag* gesture, double offset_x, double offset_y, gpointer data) {
+    double x,y;
+    gtk_gesture_drag_get_start_point(gesture,&x,&y);
+
+    x += offset_x;
+    y += offset_y;
+
+    on_click(NULL,0,x,y,data);
+}
+
+static void vektor_color_wheel_init(VektorColorWheel* self) {
+    GtkGesture* click = gtk_gesture_click_new();
+    gtk_widget_add_controller(GTK_WIDGET(self), GTK_EVENT_CONTROLLER(click));
+
+    g_signal_connect(click, "pressed", G_CALLBACK(on_click), self);
+
+    GtkGesture* drag = gtk_gesture_drag_new();
+    gtk_widget_add_controller(GTK_WIDGET(self), GTK_EVENT_CONTROLLER(drag));
+
+    g_signal_connect(drag, "drag-update", G_CALLBACK(on_drag), self);
+}
+
+static void vektor_color_wheel_class_init(VektorColorWheelClass* klass) {
+    GtkWidgetClass* widget_class = GTK_WIDGET_CLASS(klass);
+    widget_class->snapshot = vektor_color_wheel_snapshot;
+
+    signals[COLOR_CHANGED] =
+    g_signal_new(
+        "color-changed",
+        G_TYPE_FROM_CLASS(klass),
+        G_SIGNAL_RUN_FIRST,
+        0,
+        NULL,
+        NULL,
+        NULL,
+        G_TYPE_NONE,
+        0
+    );
+}
+
+GtkWidget* vektor_color_wheel_new(void) {
+    return g_object_new(VEKTOR_TYPE_COLOR_WHEEL, NULL);
+}
+
+VektorColor vektor_color_wheel_get_color(VektorColorWheel* wheel) {
+    float r,g,b;
+    gtk_hsv_to_rgb(wheel->hue,
+                   wheel->saturation,
+                   wheel->lightness,
+                   &r, &g, &b);
+    
+    return (VektorColor) {
+        .r = (unsigned char)(r*255), 
+        .g = (unsigned char)(g*255), 
+        .b = (unsigned char)(b*255) 
+    };
+}
+
+void vektor_colorout_wheel_get_color(VektorColorWheel* wheel, float* r, float* g, float* b) {
+    gtk_hsv_to_rgb(wheel->hue,
+                   wheel->saturation,
+                   wheel->lightness,
+                   r, g, b);
+}

src/ui/widgets/colorwheel.h

@@ -0,0 +1,14 @@
+#ifndef VKTR_COLORWHEEL_H
+#define VKTR_COLORWHEEL_H
+
+#include "gtk/gtk.h"
+#include "src/util/color.h"
+
+#define VEKTOR_TYPE_COLOR_WHEEL vektor_color_wheel_get_type()
+G_DECLARE_FINAL_TYPE(VektorColorWheel, vektor_color_wheel, VEKTOR, COLOR_WHEEL, GtkDrawingArea)
+
+GtkWidget* vektor_color_wheel_new(void);
+VektorColor vektor_color_wheel_get_color(VektorColorWheel* wheel);
+void vektor_colorout_wheel_get_color(VektorColorWheel* wheel, float* r, float* g, float* b);
+
+#endif

ui/main.css

@@ -5,5 +5,5 @@
 }
 
 button {
-    background: none;
+    /*background: none;*/
 }

ui/main.ui

@@ -45,11 +45,9 @@
 
                                 <!--Main canvas-->
                                 <child>
-                                    <object class="GtkPicture" id="workspace">
-                                        <property name="content-fit">contain</property>
+                                    <object class="GtkGLArea" id="workspace">
                                         <property name="hexpand">true</property>
                                         <property name="vexpand">true</property>
-
                                     </object>
                                 </child>
 
@@ -66,15 +64,64 @@
                                         <property name="margin-bottom">12</property>
 
                                         <!--Tool buttons-->
+
+                                        <!--Shape tool (row container)-->
                                         <child>
-                                            <object class="GtkButton" id="button_linetool">
-                                                <property name="icon-name">insert-object-symbolic</property>
+                                            <object class="GtkBox">
+                                                <property name="orientation">horizontal</property>
+
+                                                    <!--Shape tool-->
+                                                    <child>
+                                                        <object class="GtkButton" id="button_shapetools">
+                                                            <property name="icon-name">tool-line-symbolic</property>
+                                                        </object>
+                                                    </child>
+                                                    
+                                                    <!--Shape subtools revealer-->
+                                                    <child>
+                                                        <object class="GtkRevealer" id="shape_revealer">
+                                                            <property name="transition-type">slide-right</property>
+
+                                                            <!--Subtool container-->
+                                                            <child>
+                                                                <object class="GtkBox">
+                                                                    <property name="orientation">horizontal</property>
+
+                                                                    <!--Line tool-->
+                                                                    <child>
+                                                                        <object class="GtkButton" id="button_linetool">
+                                                                            <property name="icon-name">tool-line-symbolic</property>
+                                                                        </object>
+                                                                    </child>
+
+                                                                    <!--Rectangle tool-->
+                                                                    <child>
+                                                                        <object class="GtkButton" id="button_rectangletool">
+                                                                            <property name="icon-name">tool-rectangle-symbolic</property>
+                                                                        </object>
+                                                                    </child>
+
+                                                                    <!--Circle tool-->
+                                                                    <child>
+                                                                        <object class="GtkButton" id="button_circletool">
+                                                                            <property name="icon-name">tool-circle-symbolic</property>
+                                                                        </object>
+                                                                    </child>
+
+                                                                </object>
+                                                            </child>
+
+                                                        </object>
+                                                    </child>
+
                                             </object>
                                         </child>
 
+                                        <!--Copy tool-->
                                         <child>
-                                            <object class="GtkButton">
+                                            <object class="GtkButton" id="button_copytool">
                                                 <property name="icon-name">edit-copy-symbolic</property>
+                                                <property name="halign">start</property>
                                             </object>
                                         </child>
 
@@ -86,8 +133,58 @@
 
                         <!--Sidepanel (layers & modifiers)-->
                         <child>
-                            <object class="GtkFrame" id="sidepanel">
-                                <property name="label">Sidepanel</property>
+                            <object class="GtkPaned" id="sidepanel">
+                                <property name="orientation">vertical</property>
+                                <property name="wide-handle">true</property>
+                                <property name="hexpand">true</property>
+
+                                <child>
+                                    <object class="GtkBox">
+                                        <property name="hexpand">true</property>
+                                        <property name="vexpand">true</property>
+                                        <property name="margin-start">6</property>
+                                        <property name="margin-end">6</property>
+                                        <property name="margin-top">6</property>
+                                        <property name="margin-bottom">6</property>
+
+                                        <child>
+                                            <object class="VektorColorWheel" id="color_picker">
+                                                <property name="hexpand">true</property>
+                                                <property name="vexpand">true</property>
+                                            </object>
+                                        </child>
+
+                                    </object>
+                                </child>
+
+                                <child>
+                                    <object class="GtkFrame">
+                                        <property name="label">Modifiers</property>
+                                    </object>
+                                </child>
+
+                            </object>
+                        </child>
+
+                    </object>
+                </child>
+
+                <!--Footer-->
+                <child>
+                    <object class="GtkBox" id="footer">
+                        <style><class name="footer"/></style>
+
+                        <property name="orientation">horizontal</property>
+                        <property name="margin-start">6</property>
+                        <property name="margin-end">6</property>
+                        <property name="margin-top">3</property>
+                        <property name="margin-bottom">3</property>
+
+                        <!--Footer status bar-->
+                        <child>
+                            <object class="GtkLabel" id="footer_status">
+                                <property name="label">0 MiB</property>
+                                <property name="xalign">0</property>
                             </object>
                         </child>
 
@@ -98,4 +195,6 @@
         </child>
 
     </object>
+
+
 </interface>