add padding

README.md

@@ -7,7 +7,7 @@
 [![time tracker](https://wakatime.com/badge/github/Ethosa/nodesnim.svg)](https://wakatime.com/badge/github/Ethosa/nodesnim)
 [![test](https://github.com/Ethosa/nodesnim/workflows/test/badge.svg)](https://github.com/Ethosa/nodesnim/actions)
 
-<h4>Stable version - 0.2.4</h4>
+<h4>Stable version - 0.3.0</h4>
 </div>
 
 ## Install

examples/novel/main.nim

@@ -39,6 +39,7 @@ build:
       call setSizeAnchor(0.8, 0.3)
       call setAnchor(0.1, 0.6, 0, 0)
       call setBackgroundColor(Color(0x0e131760))
+      call setPadding(8, 8, 8, 8)
       - Label name_charapter:
         call resize(128, 32)
         call setAnchor(0, 0, 0, 1)

nodesnim.nimble

@@ -1,7 +1,7 @@
 [Package]
 name = "nodesnim"
 author = "Ethosa"
-version = "0.2.4"
+version = "0.3.0"
 description = "The Nim GUI/2D framework based on OpenGL and SDL2."
 license = "MIT"
 srcDir = "src"

src/nodesnim/nodescontrol/box.nim

@@ -61,8 +61,13 @@ method addChild*(self: BoxRef, child: NodeRef) =
 method draw*(self: BoxRef, w, h: GLfloat) =
   ## this method uses in the `window.nim`.
   for child in self.children:
-    child.CanvasRef.position.x = self.rect_size.x*self.child_anchor.x1 - child.CanvasRef.rect_size.x*self.child_anchor.x2
-    child.CanvasRef.position.y = self.rect_size.y*self.child_anchor.y1 - child.CanvasRef.rect_size.y*self.child_anchor.y2
+    child.CanvasRef.position.x = self.rect_size.x*self.child_anchor.x1 - child.CanvasRef.rect_size.x*self.child_anchor.x2 + self.padding.x1
+    child.CanvasRef.position.y = self.rect_size.y*self.child_anchor.y1 - child.CanvasRef.rect_size.y*self.child_anchor.y2 + self.padding.y1
+
+    if child.CanvasRef.rect_size.x > self.rect_size.x:
+      self.rect_size.x = child.CanvasRef.rect_size.x
+    if child.CanvasRef.rect_size.y > self.rect_size.y:
+      self.rect_size.y = child.CanvasRef.rect_size.y
   procCall self.ControlRef.draw(w, h)
 
 method duplicate*(self: BoxRef): BoxRef {.base.} =

src/nodesnim/nodescontrol/control.nim

@@ -23,8 +23,10 @@ type
     hovered*: bool
     pressed*: bool
     focused*: bool
+    padding_used*: bool
 
     mousemode*: MouseMode
+    padding*: AnchorObj
     background*: DrawableRef
 
     on_mouse_enter*: proc(self: ControlRef, x, y: float): void  ## This called when the mouse enters the Control node.
@@ -32,8 +34,8 @@ type
     on_click*: proc(self: ControlRef, x, y: float): void        ## This called when the user clicks on the Control node.
     on_press*: proc(self: ControlRef, x, y: float): void        ## This called when the user holds on the mouse on the Control node.
     on_release*: proc(self: ControlRef, x, y: float): void      ## This called when the user no more holds on the mouse.
-    on_focus*: proc(self: ControlRef): void                   ## This called when the Control node gets focus.
-    on_unfocus*: proc(self: ControlRef): void                 ## This called when the Control node loses focus.
+    on_focus*: proc(self: ControlRef): void                     ## This called when the Control node gets focus.
+    on_unfocus*: proc(self: ControlRef): void                   ## This called when the Control node loses focus.
   ControlRef* = ref ControlObj
 
 
@@ -41,15 +43,17 @@ template controlpattern*: untyped =
   result.hovered = false
   result.focused = false
   result.pressed = false
+  result.padding_used = true
 
   result.mousemode = MOUSEMODE_SEE
-  result.background = Drawable()
   result.rect_size = Vector2()
   result.rect_min_size = Vector2()
   result.position = Vector2()
   result.global_position = Vector2()
-  result.anchor = Anchor(0, 0, 0, 0)
   result.size_anchor = Vector2()
+  result.anchor = Anchor(0, 0, 0, 0)
+  result.padding = Anchor(0, 0, 0, 0)
+  result.background = Drawable()
 
   result.on_mouse_enter = proc(self: ControlRef, x, y: float) = discard
   result.on_mouse_exit = proc(self: ControlRef, x, y: float) = discard
@@ -79,8 +83,8 @@ method calcPositionAnchor*(self: ControlRef) =
     if self.size_anchor.y > 0.0:
       self.rect_size.y = self.parent.CanvasRef.rect_size.y * self.size_anchor.y
     if not self.anchor.isEmpty():
-      self.position.x = self.parent.CanvasRef.rect_size.x*self.anchor.x1 - self.rect_size.x*self.anchor.x2
-      self.position.y = self.parent.CanvasRef.rect_size.y*self.anchor.y1 - self.rect_size.y*self.anchor.y2
+      self.position.x = self.parent.CanvasRef.rect_size.x*self.anchor.x1 - (self.rect_size.x+self.padding.x1+self.padding.x2)*self.anchor.x2
+      self.position.y = self.parent.CanvasRef.rect_size.y*self.anchor.y1 - (self.rect_size.y+self.padding.y1+self.padding.y2)*self.anchor.y2
 
 method draw*(self: ControlRef, w, h: GLfloat) =
   ## this method uses in the `window.nim`.
@@ -90,7 +94,9 @@ method draw*(self: ControlRef, w, h: GLfloat) =
     x = -w/2 + self.global_position.x
     y = h/2 - self.global_position.y
 
-  self.background.draw(x, y, self.rect_size.x, self.rect_size.y)
+  self.background.draw(
+    x, y, self.rect_size.x + self.padding.x1 + self.padding.x2,
+    self.rect_size.y + self.padding.y1 + self.padding.y2)
 
   # Press
   if self.pressed:
@@ -145,6 +151,14 @@ method setBackgroundColor*(self: ControlRef, color: ColorRef) {.base.} =
   ## Changes Control background color.
   self.background.setColor(color)
 
+method setPadding*(self: ControlRef, padding: AnchorObj) {.base.} =
+  ## Changes Control padding.
+  self.padding = padding
+
+method setPadding*(self: ControlRef, x1, y1, x2, y2: float) {.base.} =
+  ## Changes Control padding.
+  self.setPadding(Anchor(x1, y1, x2, y2))
+
 method setStyle*(self: ControlRef, style: StyleSheetRef) {.base.} =
   self.background.setStyle(style)
   for i in style.dict:
@@ -169,5 +183,17 @@ method setStyle*(self: ControlRef, style: StyleSheetRef) {.base.} =
           parseFloat(tmp[0]), parseFloat(tmp[1]),
           parseFloat(tmp[2]), parseFloat(tmp[3]))
         )
+    # padding: 1
+    # padding: 0.5 1 0.5 1
+    of "padding":
+      let tmp = i.value.split(Whitespace)
+      if tmp.len() == 1:
+        let tmp2 = parseFloat(tmp[0])
+        self.setPadding(Anchor(tmp2, tmp2, tmp2, tmp2))
+      elif tmp.len() == 4:
+        self.setPadding(Anchor(
+          parseFloat(tmp[0]), parseFloat(tmp[1]),
+          parseFloat(tmp[2]), parseFloat(tmp[3]))
+        )
     else:
       discard

src/nodesnim/nodescontrol/edittext.nim

@@ -73,9 +73,9 @@ method draw*(self: EditTextRef, w, h: Glfloat) =
     self.is_blink = not self.is_blink
 
   if self.text.chars.len() == 0:
-    self.hint.renderTo(Vector2(x, y), self.rect_size, self.text_align)
+    self.hint.renderTo(Vector2(x+self.padding.x1, y-self.padding.y1), self.rect_size, self.text_align)
   else:
-    self.text.renderTo(Vector2(x, y), self.rect_size, self.text_align)
+    self.text.renderTo(Vector2(x+self.padding.x1, y-self.padding.y1), self.rect_size, self.text_align)
 
   if self.is_blink:
     glColor4f(self.caret_color.r, self.caret_color.g, self.caret_color.b, self.caret_color.a)

src/nodesnim/nodescontrol/hbox.nim

@@ -32,7 +32,6 @@ proc HBox*(name: string = "HBox"): HBoxRef =
   controlpattern()
   result.rect_size.x = 40
   result.rect_size.y = 40
-  result.child_anchor = Anchor(0.5, 0.5, 0.5, 0.5)
   result.separator = 4f
   result.kind = HBOX_NODE
 
@@ -56,19 +55,19 @@ method addChild*(self: HBoxRef, child: NodeRef) =
   ## - `child`: other node.
   self.children.add(child)
   child.parent = self
-  self.rect_size = self.getChildSize()
+  self.resize(self.rect_size.x, self.rect_size.y)
 
 
 method draw*(self: HBoxRef, w, h: GLfloat) =
   ## This uses in the `window.nim`.
+  procCall self.ControlRef.draw(w, h)
   var
     fakesize = self.getChildSize()
     x = self.rect_size.x*self.child_anchor.x1 - fakesize.x*self.child_anchor.x2
   for child in self.children:
-    child.CanvasRef.position.x = x
-    child.CanvasRef.position.y = self.rect_size.y*self.child_anchor.y1 - child.CanvasRef.rect_size.y*self.child_anchor.y2
+    child.CanvasRef.position.x = x + self.padding.x1
+    child.CanvasRef.position.y = self.rect_size.y*self.child_anchor.y1 - child.CanvasRef.rect_size.y*self.child_anchor.y2 + self.padding.y1
     x += child.CanvasRef.rect_size.x + self.separator
-  procCall self.ControlRef.draw(w, h)
 
 method duplicate*(self: HBoxRef): HBoxRef {.base.} =
   ## Duplicates HBox object and create a new HBox.

src/nodesnim/nodescontrol/label.nim

@@ -54,7 +54,7 @@ method draw*(self: LabelRef, w, h: GLfloat) =
 
   if not self.text.rendered:
     self.text.render(self.rect_size, self.text_align)
-  self.text.renderTo(Vector2(x, y), self.rect_size, self.text_align)
+  self.text.renderTo(Vector2(x + self.padding.x1, y - self.padding.y1), self.rect_size, self.text_align)
 
 method duplicate*(self: LabelRef): LabelRef {.base.} =
   ## Duplicates Label object and create a new Label.

src/nodesnim/nodescontrol/vbox.nim

@@ -32,7 +32,6 @@ proc VBox*(name: string = "VBox"): VBoxRef =
   controlpattern()
   result.rect_size.x = 40
   result.rect_size.y = 40
-  result.child_anchor = Anchor(0.5, 0.5, 0.5, 0.5)
   result.separator = 4f
   result.kind = VBOX_NODE
 
@@ -57,18 +56,22 @@ method addChild*(self: VBoxRef, child: NodeRef) =
   ## - `child`: other node.
   self.children.add(child)
   child.parent = self
+  self.resize(self.rect_size.x, self.rect_size.y)
 
 
 method draw*(self: VBoxRef, w, h: GLfloat) =
   ## This uses in the `window.nim`.
+  procCall self.ControlRef.draw(w, h)
   var
     fakesize = self.getChildSize()
     y = self.rect_size.y*self.child_anchor.y1 - fakesize.y*self.child_anchor.y2
   for child in self.children:
-    child.CanvasRef.position.x = self.rect_size.x*self.child_anchor.x1 - child.CanvasRef.rect_size.x*self.child_anchor.x2
-    child.CanvasRef.position.y = y
+    child.CanvasRef.position.x = self.rect_size.x*self.child_anchor.x1 - child.CanvasRef.rect_size.x*self.child_anchor.x2 + self.padding.x1
+    child.CanvasRef.position.y = y + self.padding.y1
     y += child.CanvasRef.rect_size.y + self.separator
-  procCall self.ControlRef.draw(w, h)
+
+    if child.CanvasRef.rect_size.x > self.rect_size.x:
+      self.rect_size.x = child.CanvasRef.rect_size.x
 
 method duplicate*(self: VBoxRef): VBoxRef {.base.} =
   ## Duplicate VBox object and create a new VBox.

tests/README.md

@@ -45,3 +45,4 @@
 - [Use CheckBox node.](https://github.com/Ethosa/nodesnim/blob/master/tests/test43.nim)
 - [Use GradientDrawable and Control.](https://github.com/Ethosa/nodesnim/blob/master/tests/test44.nim)
 - [Use TileMap node.](https://github.com/Ethosa/nodesnim/blob/master/tests/test45.nim)
+- [Use Padding.](https://github.com/Ethosa/nodesnim/blob/master/tests/test46.nim)

tests/test46.nim

@@ -0,0 +1,47 @@
+# --- Test 46. Use Padding. --- #
+import nodesnim
+
+
+Window("Padding")
+
+
+build:
+  - Scene main:
+    - Box box:
+      call setPadding(8, 16, 2, 8)
+      call setBackgroundColor(Color("#5aa"))
+      - ColorRect rect1:
+        color: Color("#ff7")
+        call resize(64, 64)
+      - ColorRect rect2:
+        color: Color("#f7f")
+    - VBox vbox:
+      call setPadding(2, 4, 8, 16)
+      call move(100, 64)
+      call setChildAnchor(1, 1, 1, 1)
+      call setBackgroundColor(Color("#5aa"))
+      - ColorRect rect3:
+        color: Color("#ff7")
+        call resize(64, 64)
+      - ColorRect rect4:
+        color: Color("#f7f")
+    - HBox hbox:
+      call setPadding(2, 4, 8, 16)
+      call move(200, 64)
+      call setChildAnchor(1, 1, 1, 1)
+      call setBackgroundColor(Color("#5aa"))
+      - ColorRect rect5:
+        color: Color("#ff7")
+        call resize(64, 64)
+      - ColorRect rect6:
+        color: Color("#f7f")
+    - Label text:
+      call setText("Hello, world!")
+      call setBackgroundColor(Color("#324"))
+      call resize(0, 0)
+      call setPadding(8, 8, 8, 8)
+      call move(32, 200)
+
+
+addMainScene(main)
+windowLaunch()