Style management changes

.vdocignore

@@ -0,0 +1,2 @@
+/examples
+/bin

component/accordion.v

@@ -18,6 +18,7 @@ pub mut:
 
 @[params]
 pub struct AccordionParams {
+pub:
  id string
  titles []string
  children []ui.Widget

component/alpha.v

@@ -17,6 +17,7 @@ pub mut:
 
 @[params]
 pub struct AlphaParams {
+pub:
  id string
  alpha int
  direction ui.Direction = .column

component/colorbox.v

@@ -29,6 +29,8 @@ struct HSVColor {
 pub struct ColorBoxComponent {
 mut:
  simg C.sg_image
+ sampler C.sg_sampler
+ buf &u8 = unsafe { 0 }
  h f64 = 0.0
  s f64 = 0.75
  v f64 = 0.75
@@ -62,6 +64,7 @@ pub mut:
 
 @[params]
 pub struct ColorBoxParams {
+pub:
  id string
  light bool
  hsl bool
@@ -184,6 +187,8 @@ fn colorbox_init(layout &ui.Stack) {
  }
  cb.update_theme()
  cb.simg = ui.create_dynamic_texture(256, 256)
+ cb.sampler = ui.create_image_sampler()
+ cb.buf = unsafe { malloc(4 * 256 * 256) }
  cb.update_buffer()
 }
 
@@ -248,7 +253,7 @@ fn cv_sv_draw(mut d ui.DrawDevice, mut c ui.CanvasLayout) {
  mut cb := colorbox_component(c)
 
  // TODO: check extra_draw c.draw_device_texture
- c.draw_texture(cb.simg)
+ c.draw_texture(cb.simg, cb.sampler)
 
  c.draw_device_rounded_rect_filled(d, int(cb.s * 256.0) - 10, int((1.0 - cb.v) * 256.0) - 10,
  20, 20, 10, cb.hsv_to_rgb(cb.h, 1 - cb.s, 1.0 - cb.v))
@@ -335,9 +340,7 @@ pub fn (mut cb ColorBoxComponent) update_sel_color() {
 
 // TODO: documentation
 pub fn (mut cb ColorBoxComponent) update_buffer() {
- unsafe { ui.destroy_texture(cb.simg) }
- sz := 256 * 256 * 4
- buf := unsafe { malloc(sz) }
+ buf := unsafe { cb.buf }
  mut col := gx.Color{}
  mut i := 0
  for y in 0 .. 256 {
@@ -352,11 +355,7 @@ pub fn (mut cb ColorBoxComponent) update_buffer() {
  }
  }
  }
- unsafe {
- cb.simg = ui.create_texture(256, 256, buf)
- // update_text_texture(cb.simg, 256, 256, buf)
- free(buf)
- }
+ ui.update_text_texture(cb.simg, 256, 256, cb.buf)
 }
 
 fn tb_char(tb &ui.TextBox, cp u32) {

component/colorbutton.v

@@ -18,6 +18,7 @@ pub mut:
 
 @[params]
 pub struct ColorButtonParams {
+pub:
  id string
  text string
  height int

component/colorpalette.v

@@ -18,6 +18,7 @@ pub mut:
 
 @[params]
 pub struct ColorPaletteParams {
+pub:
  id string
  title string
  items []string

component/colorsliders.v

@@ -29,6 +29,7 @@ pub mut:
 
 @[params]
 pub struct ColorSlidersParams {
+pub:
  id string
  color gx.Color = gx.white
  orientation ui.Orientation = .vertical

component/demo.v

@@ -15,6 +15,7 @@ pub mut:
 
 @[params]
 pub struct DemoParams {
+pub:
  id string = 'demo'
 }
 

component/double_listbox.v

@@ -15,6 +15,7 @@ pub mut:
 
 @[params]
 pub struct DoubleListBoxParams {
+pub:
  id string
  title string
  items []string

component/filebrowser.v

@@ -16,6 +16,7 @@ pub mut:
 
 @[params]
 pub struct FileBrowserParams {
+pub:
  id string
  dirs []string = [os.expand_tilde_to_home('~'), '/']
  text_ok string = 'Ok'

component/fontbutton.v

@@ -12,6 +12,7 @@ pub mut:
 
 @[params]
 pub struct FontButtonParams {
+pub:
  id string
  dtw ui.DrawTextWidget = ui.canvas_plus()
  text string

component/fontchooser.v

@@ -15,6 +15,7 @@ pub mut:
 
 @[params]
 pub struct FontChooserParams {
+pub:
  id string = component.fontchooser_lb_id
  draw_lines bool = true
  dtw ui.DrawTextWidget = ui.canvas_plus() // since it requires an intialisation

component/gg_app.v

@@ -14,6 +14,7 @@ pub mut:
 
 @[params]
 pub struct GGComponentParams {
+pub:
  id string = 'gg_app'
  app ui.GGApplication
  z_index int

component/grid.v

@@ -6,7 +6,7 @@ import gx
 import math
 
 pub struct Factor {
-mut:
+pub mut:
  levels []string
  values []int
 }
@@ -78,14 +78,15 @@ pub mut:
 
 @[params]
 pub struct GridParams {
+pub:
  vars map[string]GridData
  formulas map[string]string
  width int = 100
  height int = 25
  scrollview bool = true
  is_focused bool
  fixed_height bool = true
-mut:
+pub mut:
  id string
 }
 

component/grid_data.v

@@ -14,6 +14,7 @@ pub mut:
 @[params]
 pub struct DataGridParams {
  GridParams // for settings prepended by settings_
+pub:
  settings_bg_color gx.Color = gx.light_blue
  settings_z_index int = 100
 }

component/grid_formula.v

@@ -17,6 +17,7 @@ type ActiveCells = AlphaCell | AlphaCellBlock
 
 // Matrix-like (zero indexed)
 pub struct GridCell {
+pub:
  i int
  j int
 }

component/grid_tools.v

@@ -15,6 +15,7 @@ pub mut:
 
 @[params]
 pub struct GridSettingsParams {
+pub:
  id string
  bg_color gx.Color = gx.light_blue
  grid &GridComponent = unsafe { nil }

component/hideable.v

@@ -18,6 +18,7 @@ pub mut:
 
 @[params]
 pub struct HideableParams {
+pub:
  id string
  bg_color gx.Color
  layout &ui.Stack = unsafe { nil }

component/menufile.v

@@ -22,6 +22,7 @@ pub mut:
 
 @[params]
 pub struct MenuFileParams {
+pub:
  id string
  hidden_files bool
  dirs []string

component/messagebox.v

@@ -16,6 +16,7 @@ pub struct MessageBoxComponent {
 
 @[params]
 pub struct MessageBoxParams {
+pub:
  id string
  text string
  on_click MessageBoxFn = MessageBoxFn(0)

component/rasterview.v

@@ -51,6 +51,7 @@ pub mut:
 
 @[params]
 pub struct RasterViewParams {
+pub:
  id string
  width int = 16
  height int = 16

component/settings.v

@@ -19,6 +19,7 @@ mut:
 
 @[params]
 pub struct SettingFontParams {
+pub:
  id string
  param string
  text string

component/splitpanel.v

@@ -20,6 +20,7 @@ pub mut:
 
 @[params]
 pub struct SplitPanelParams {
+pub:
  id string
  child1 &ui.Widget = unsafe { nil }
  child2 &ui.Widget = unsafe { nil }

component/subwindow_filebrowser.v

@@ -9,6 +9,7 @@ const newfilebrowser_subwindow_id = '_sw_newfilebrowser'
 @[params]
 pub struct FileBrowserSubWindowParams {
  FileBrowserParams
+pub:
  x int
  y int
 }

component/subwindow_messagebox.v

@@ -4,6 +4,7 @@ import ui
 
 @[params]
 pub struct MessageBoxSubWindowParams {
+pub:
  id string
  text string
  shortcut string = 'ctrl + h'

component/tabs.v

@@ -29,6 +29,7 @@ pub mut:
 
 @[params]
 pub struct TabsParams {
+pub:
  id string
  mode TabsMode = .vertical
  active int
@@ -51,7 +52,12 @@ pub fn tabs_stack(c TabsParams) &ui.Stack {
  // bg_color: gx.white
  on_key_down: tab_key_down
  children: [
- ui.label(id: tab_id(c.id, i) + '_label', text: tab),
+ ui.row(
+ id: tab_id(c.id, i) + '_row'
+ children: [
+ ui.label(id: tab_id(c.id, i) + '_label', text: tab),
+ ]
+ ),
  ]
  )
  }
@@ -259,7 +265,8 @@ fn (tabs &TabsComponent) update_pos(win &ui.Window) {
  // println("$dx, $dy $lab.x $lab.y")
  lab.set_pos(dx, dy)
  // println("$dx, $dy $lab.x $lab.y")
+ row_id := tab_id(tabs.id, i) + '_row'
  mut c := win.get_or_panic[ui.CanvasLayout](tab_id(tabs.id, i))
- c.set_child_relative_pos(lab_id, dx, dy)
+ c.set_child_relative_pos(row_id, dx, dy)
  }
 }

component/treeview.v

@@ -10,7 +10,7 @@ const root_sep = '_|||_'
 type TreeItem = Tree | string
 
 pub struct Tree {
-mut:
+pub mut:
  title string
  items []TreeItem
 }
@@ -152,6 +152,7 @@ pub mut:
 
 @[params]
 pub struct TreeViewParams {
+pub:
  id string
  trees []Tree
  icons map[string]string
@@ -205,6 +206,7 @@ pub fn treeview_stack(c TreeViewParams) &ui.Stack {
 
 @[params]
 pub struct TreeViewDirParams {
+pub:
  id string = 'tvd'
  trees []string
  icons map[string]string

examples/canvas_plus_gradient_texture.v

@@ -0,0 +1,60 @@
+// A small demo of how to draw arbitrary images to a custom canvas,
+// by using ui.create_dynamic_texture and c.draw_texture .
+// The gradient is generated by calculating the color of each pixel in the canvas,
+// then blitting the resulting image/texture to the canvas at once at the end.
+import ui
+import gx
+import sokol.gfx
+
+@[heap]
+struct App {
+mut:
+ window &ui.Window = unsafe { nil }
+ buf &u8 = unsafe { nil }
+ texture gfx.Image
+ sampler gfx.Sampler
+}
+
+fn main() {
+ mut app := App{}
+ app.window = ui.window(
+ width: 600
+ height: 400
+ title: 'gradient'
+ on_init: app.init_texture
+ children: [
+ ui.canvas_plus(
+ id: 'canvas_gradient'
+ on_draw: app.draw_gradient
+ ),
+ ]
+ )
+ ui.run(app.window)
+}
+
+fn (mut app App) init_texture(w &ui.Window) {
+ app.texture = ui.create_dynamic_texture(256, 256)
+ app.sampler = ui.create_image_sampler()
+ app.buf = unsafe { malloc(256 * 256 * 4) }
+}
+
+fn (app &App) draw_gradient(mut d ui.DrawDevice, c &ui.CanvasLayout) {
+ target_hue, _, _ := ui.rgb_to_hsv(gx.rgb(255, 0, 0))
+ mut i := 0
+ for y in 0 .. 256 {
+ for x in 0 .. 256 {
+ saturation := f32(y) / 255.0
+ value := f32(255 - x) / 255.0
+ rgb_color := ui.hsv_to_rgb(target_hue, saturation, value)
+ unsafe {
+ app.buf[i] = rgb_color.r
+ app.buf[i + 1] = rgb_color.g
+ app.buf[i + 2] = rgb_color.b
+ app.buf[i + 3] = 255
+ i += 4
+ }
+ }
+ }
+ ui.update_text_texture(app.texture, 256, 256, app.buf)
+ c.draw_texture(app.texture, app.sampler)
+}

libvg/raster.v

@@ -32,6 +32,7 @@ pub mut:
 
 @[params]
 pub struct RasterParams {
+pub:
  width int = 16
  height int = 16
  channels int = 4

libvg/raster_tool.v

@@ -599,6 +599,7 @@ fn color_multiply_alpha(c gx.Color, a f64) gx.Color {
 
 @[params]
 pub struct TextBlockParams {
+pub:
  x int // x postion of the left high corner
  y int // y postion of the left high corner
  w int // width of the text block