blendish: support for beveled panels

blendish.h

@@ -389,7 +389,11 @@ void bndRoundedBox(NVGcontext *ctx, float x, float y, float w, float h,
 // Draw a flat panel without any decorations at position (x,y) with size (w,h)
 // and fills it with backgroundColor
 void bndBackground(NVGcontext *ctx, float x, float y, float w, float h);
-    
+
+// Draw a beveled border at position (x,y) with size (w,h) shaded with
+// lighter and darker versions of backgroundColor
+void bndBevel(NVGcontext *ctx, float x, float y, float w, float h);
+
 // Draw a lower inset for a rounded box at position (x,y) with size (w,h)
 // that gives the impression the surface has been pushed in.
 // cr2 and cr3 contain the radiuses of the bottom right and bottom left
@@ -495,8 +499,10 @@ void bndUpDownArrow(NVGcontext *ctx, float x, float y, float s, NVGcolor color);
 // alpha intensity of transparent items (0xa4)
 #define BND_TRANSPARENT_ALPHA 0.643
 
-// shade intensity of beveled insets
+// shade intensity of beveled panels
 #define BND_BEVEL_SHADE 30
+// shade intensity of beveled insets
+#define BND_INSET_BEVEL_SHADE 30
 // shade intensity of hovered inner boxes
 #define BND_HOVER_SHADE 15
 
@@ -1014,6 +1020,31 @@ NVGcolor bndOffsetColor(NVGcolor color, int delta) {
     ):color;
 }
 
+void bndBevel(NVGcontext *ctx, float x, float y, float w, float h) {
+    nvgStrokeWidth(ctx, 1);
+    
+    x += 0.5f;
+    y += 0.5f;
+    w -= 1;
+    h -= 1;
+    
+    nvgBeginPath(ctx);
+    nvgMoveTo(ctx, x, y+h);
+    nvgLineTo(ctx, x+w, y+h);
+    nvgLineTo(ctx, x+w, y);
+    nvgStrokeColor(ctx, bndTransparent(
+        bndOffsetColor(bnd_theme.backgroundColor, -BND_BEVEL_SHADE)));
+    nvgStroke(ctx);
+    
+    nvgBeginPath(ctx);
+    nvgMoveTo(ctx, x, y+h);
+    nvgLineTo(ctx, x, y);
+    nvgLineTo(ctx, x+w, y);
+    nvgStrokeColor(ctx, bndTransparent(
+        bndOffsetColor(bnd_theme.backgroundColor, BND_BEVEL_SHADE)));
+    nvgStroke(ctx);
+}
+
 void bndBevelInset(NVGcontext *ctx, float x, float y, float w, float h,
     float cr2, float cr3) {
     float d;
@@ -1029,7 +1060,7 @@ void bndBevelInset(NVGcontext *ctx, float x, float y, float w, float h,
     nvgArcTo(ctx, x,y+h, x,y, cr3);
     
     NVGcolor bevelColor = bndOffsetColor(bnd_theme.backgroundColor, 
-        BND_BEVEL_SHADE);
+        BND_INSET_BEVEL_SHADE);
     
     nvgStrokeWidth(ctx, 1);
     nvgStrokePaint(ctx,

example.cpp

@@ -36,6 +36,8 @@ typedef enum {
     ST_ROW = 5,
     // check button
     ST_CHECK = 6,
+    // panel
+    ST_PANEL = 7,
 } SubType;
 
 typedef struct {
@@ -124,6 +126,9 @@ void drawUI(NVGcontext *vg, int item, int x, int y) {
             default: {
                 testrect(vg,rect);
             } break;
+            case ST_PANEL: {
+                bndBevel(vg,rect.x,rect.y,rect.w,rect.h);
+            } break;
             case ST_LABEL: {
                 assert(head);
                 const UIButtonData *data = (UIButtonData*)head;
@@ -321,6 +326,13 @@ void columnhandler(int parent, UIevent event) {
     uiSetMargins(item, 0, (last < 0)?0:1, 0, 0);
 }
 
+int panel() {
+    int item = uiItem();
+    UIData *data = (UIData *)uiAllocData(item, sizeof(UIData));
+    data->subtype = ST_PANEL;
+    return item;
+}
+
 int column(int parent) {
     int item = uiItem();
     uiSetHandler(item, columnhandler, UI_APPEND);
@@ -582,13 +594,14 @@ void draw(NVGcontext *vg, float w, float h) {
     
     uiClear();
     
-    int root = uiItem(); 
+    int root = panel();
     // position root element
     uiSetLayout(0,UI_LEFT|UI_TOP);
     uiSetMargins(0,600,10,0,0);
     uiSetSize(0,250,400);
     
-    int col = column(0);
+    int col = column(root);
+    uiSetMargins(col, 10, 10, 10, 10);
     uiSetLayout(col, UI_TOP|UI_HFILL);
     
     button(col, 1, BND_ICONID(6,3), "Item 1", demohandler);