[Nim] Layout - DSL

import wnim/[wApp, wFrame, wPanel, wButton]

proc main() =
  let app = App()
  let frame = Frame(title="Test DSL")
  let panel = Panel(frame)

  # alle Button gleiche Höhe, gesamte Fensterhöhe ausnutzen (abzgl. Rand: 10)
  # Zeile 1 - gesamte Breite ausfüllen
  let button1 = Button(panel, label="1")
  let button2 = Button(panel, label="2")
  let button3 = Button(panel, label="3")

  # Zeile 2 - mittig mit derselben Breite der Button aus #1
  let button4 = Button(panel, label="4")
  let button5 = Button(panel, label="5")

  # Zeile 3 - wie Zeile 2
  let button6 = Button(panel, label="6")
  let button7 = Button(panel, label="7")

  # Zeile 4 - wie Zeile 1
  let button8 = Button(panel, label="8")
  let button9 = Button(panel, label="9")
  let button10 = Button(panel, label="10")

  proc layout() =
    panel.layout:
      # Zeile 1
      button1:
        top = panel.top + 10
        left = panel.left + 10
        # oberer + unterer Rand + 3*Zwischenräume (5*10)
        height = (panel.height - (5 * 10)) / 4  # 4 Zeilen
        # linker + rechter Rand + 2*Zwischenräume (4*10)
        width = (panel.width - (4 * 10)) / 3  # 3 Spalten
      button2:
        top = button1.top
        left = button1.right + 10
        height = button1.height
        width = button1.width
      button3:
        top = button1.top
        left = button2.right + 10
        height = button1.height
        width = button1.width
      # Zeile 2
      button4:
        top = button1.bottom + 10
        # links von Mitte 1/2 Abstand und Buttonbreite
        left = (panel.width / 2) - (5 + button1.width) 
        height = button1.height
        width = button1.width
      button5:
        top = button4.top
        left = button4.right + 10
        height = button1.height
        width = button1.width
      # Zeile 3
      button6:
        top = button4.bottom + 10
        left = button4.left
        height = button1.height
        width = button1.width
      button7:
        top = button6.top
        left = button6.right + 10
        height = button1.height
        width = button1.width
      # Zeile 4
      button8:
        top = button6.bottom + 10
        left = button1.left
        height = button1.height
        width = button1.width
      button9:
        top = button8.top
        left = button8.right + 10
        height = button1.height
        width = button1.width
      button10:
        top = button8.top
        left = button9.right + 10
        height = button1.height
        width = button1.width    

  frame.wIdExit do ():
    frame.delete()

  panel.wEvent_Size do ():
    layout()

  layout()
  frame.center()
  frame.show()
  app.mainLoop()

main()

import wnim/[wApp, wFrame, wPanel, wStaticText, wTextCtrl]

proc main() =
  let app = App()
  let frame = Frame(title="Test DSL #2")
  let panel = Panel(frame)

  let st1 = StaticText(panel, label="Zeile 1 ist die längste")
  # von längster Zeile die Größe abfragen
  let stWidth = st1.getBestSize().width
  let stHeight = st1.getBestSize().height
  let tcHeight = stHeight     
  let tc1 = TextCtrl(panel)   # horizontral mit StaticText zentrieren

  let st2 = StaticText(panel, label="Zeile 2")
  let tc2 = TextCtrl(panel)

  let st3 = StaticText(panel, label="Zeile 3")
  let tc3 = TextCtrl(panel)

  let st4 = StaticText(panel, label="Zeile 4")
  let tc4 = TextCtrl(panel)

  proc layout() =
    panel.layout:
      # Zeile 1
      st1:
        left = panel.left + 10
        centerY = panel.top + 10 + (stHeight / 2)
        height = stHeight # beste Höhe des (längsten) Textes
        width = stWidth   # beste Breite des längsten Textes
      tc1:
        left = st1.right + 20
        centerY = st1.centerY
        height = tcHeight
        # Rand (links + rechts) + StaticText.Breite + Abstand zw. st & tc 
        width = panel.width - (20 + stWidth + 20) 
      # Zeile 2
      st2:
        left = st1.left
        centerY = tc1.centerY + 10 + tcHeight
        height = stHeight
        width = stWidth
      tc2:
        left = tc1.left
        centerY = st2.centerY
        height = tcHeight
        width = tc1.width
      # Zeile 3
      st3:
        left = st1.left
        centerY = tc2.centerY + 10 + tcHeight
        height = stHeight
        width = stWidth
      tc3:
        left = tc1.left
        centerY = st3.centerY
        height = tcHeight
        width = tc1.width
      # Zeile 4
      st4:
        left = st1.left
        centerY = tc3.centerY + 10 + tcHeight
        height = stHeight
        width = stWidth
      tc4:
        left = tc1.left
        centerY = st4.centerY
        height = tcHeight
        width = tc1.width

  frame.wIdExit do ():
    frame.delete()

  panel.wEvent_Size do ():
    layout()

  layout()

  # Breite: Rand + StaticText + TextCtrl (min 200); Höhe 4 Zeilen + Abstände
  frame.minSize = (stWidth + 230, (4 * tcHeight) + (5 * 10) + (frame.size.height - panel.size.height))

  frame.center()
  frame.show()
  app.mainLoop()

main()