+Added a Group Widget.

*Updated the doc.

Author: paladin-t

README.md

@@ -13,8 +13,9 @@ Try it [in browser](https://paladin-t.github.io/begui/).
   * [2. Structures](#2-structures)
     * [beStructures.Percent](#bestructurespercent)
     * [beGUI.percent](#beguipercent)
-  * [3. Widgets](#3-widgets)
+  * [3. Widget](#3-widget)
     * [beGUI.Widget](#beguiwidget)
+  * [4. Basic Widgets](#4-basic-widgets)
     * [beGUI.Label](#beguilabel)
     * [beGUI.MultilineLabel](#beguimultilinelabel)
     * [beGUI.Url](#beguiurl)
@@ -28,19 +29,21 @@ Try it [in browser](https://paladin-t.github.io/begui/).
     * [beGUI.NumberBox](#beguinumberbox)
     * [beGUI.ProgressBar](#beguiprogressbar)
     * [beGUI.Slide](#beguislide)
+    * [beGUI.Group](#beguigroup)
+  * [5. Container Widgets](#5-container-widgets)
     * [beGUI.List](#beguilist)
     * [beGUI.Draggable](#beguidraggable)
     * [beGUI.Droppable](#beguidroppable)
     * [beGUI.Tab](#beguitab)
     * [beGUI.Popup](#beguipopup)
     * [beGUI.MessageBox](#beguimessagebox)
     * [beGUI.QuestionBox](#beguiquestionbox)
-  * [4. Theme](#4-theme)
-  * [5. Tweening](#5-tweening)
-    * [beGUI.Tween](#beguitween)
-  * [6. Custom Widgets](#6-custom-widgets)
+  * [6. Custom Widget](#6-custom-widget)
     * [beGUI.Custom](#beguicustom)
     * [Writing Your Own Widget](#writing-your-own-widget)
+  * [7. Theme](#7-theme)
+  * [8. Tweening](#8-tweening)
+    * [beGUI.Tween](#beguitween)
 * [License](#license)
 
 # Features
@@ -59,6 +62,7 @@ Try it [in browser](https://paladin-t.github.io/begui/).
 * `ComboBox`
 * `NumberBox`
 * `ProgressBar`, `Slide`
+* `Group`
 * Scrollable `List`
 * `Draggable` and `Droppable`
 * `Tab`
@@ -164,10 +168,10 @@ Shortcut to create `Percent` object.
 
 </details>
 
-## 3. Widgets
+## 3. Widget
 
 <details open>
-<summary>Widgets</summary>
+<summary>Widget</summary>
 
 ### beGUI.Widget
 
@@ -278,6 +282,13 @@ Shortcut to create `Percent` object.
 * `widget:clearTweenings()`: clears all tweening procedures
   * returns `self`
 
+</details>
+
+## 4. Basic Widgets
+
+<details open>
+<summary>Basic Widgets</summary>
+
 ### beGUI.Label
 
 **Model: `require 'libs/beGUI/beGUI'`, implements beGUI.`Widget`**
@@ -625,6 +636,26 @@ Shortcut to create `Percent` object.
 * `slide:on('changed', function (sender, value) end)`: registers an event which will be triggered when the `Widget` value has been changed
   * returns `self`
 
+### beGUI.Group
+
+**Model: `require 'libs/beGUI/beGUI'`, implements beGUI.`Widget`**
+
+* beGUI.`Group.new(content)`: constructs a `Group`
+  * `content`: the content string
+
+* `group:getValue()`: gets the content text
+  * returns the content string
+* `group:setValue(val)`: sets the content text
+  * `val`: the specific content string
+  * returns `self`
+
+</details>
+
+## 5. Container Widgets
+
+<details open>
+<summary>Container Widgets</summary>
+
 ### beGUI.List
 
 **Model: `require 'libs/beGUI/beGUI'`, implements beGUI.`Widget`**
@@ -730,51 +761,10 @@ Shortcut to create `Percent` object.
 
 </details>
 
-## 4. Theme
+## 6. Custom Widget
 
 <details open>
-<summary>Theme</summary>
-
-Defined in "src/libs/beGUI/beTheme.lua". Widget classes will lookup for image resources, client area, content offset, fonts, colors and all other appearance config from it.
-
-</details>
-
-## 5. Tweening
-
-<details open>
-<summary>Tweening</summary>
-
-beGUI is integrated with a tweening lib adapted from [kikito/tween.lua](https://github.com/kikito/tween.lua), which allows to create tweening animations.
-
-### beGUI.Tween
-
-**Model: `require 'libs/beGUI/beGUI'`**
-
-* beGUI.`Tween.new(duration, subject, target, easing)`: constructs a `Tween` object
-  * `duration`: the duration in seconds
-  * `subject`: the tweening subject
-  * `target`: the tweening target
-  * `easing`: the easing function
-
-* `tween:set(clock)`: sets the `Tween` object to a specific clock point
-  * `clock`: the click time point
-  * returns `true` for success, otherwise `false`
-* `tween:reset()`: resets the `Tween` object
-  * returns `true` for success, otherwise `false`
-* `tween:update(delta)`: updates the `Tween` object with a specific delta time in seconds
-  * returns `true` for success, otherwise `false`
-
-* `tween:on('changed', function (sender) end)`: registers an event which will be triggered when the `Tween` has been updated
-  * returns `self`
-* `tween:on('completed', function (sender) end)`: registers an event which will be triggered when the `Tween` has completed
-  * returns `self`
-
-</details>
-
-## 6. Custom Widgets
-
-<details open>
-<summary>Custom Widgets</summary>
+<summary>Custom Widget</summary>
 
 There are two ways to customize your own `Widget`, one is to use the beWidget.`Custom` `Widget`, the other is to write your own `Widget` class.
 
@@ -849,6 +839,50 @@ local MyWidget = beClass.class({
 
 </details>
 
+## 7. Theme
+
+<details open>
+<summary>Theme</summary>
+
+Defined in "src/libs/beGUI/beTheme.lua". Widget classes will lookup for image resources, client area, content offset, fonts, colors and all other appearance config from it.
+
+</details>
+
+## 8. Tweening
+
+<details open>
+<summary>Tweening</summary>
+
+beGUI is integrated with a tweening lib adapted from [kikito/tween.lua](https://github.com/kikito/tween.lua), which allows to create tweening animations.
+
+### beGUI.Tween
+
+**Model: `require 'libs/beGUI/beGUI'`**
+
+* beGUI.`Tween.new(duration, subject, target, easing)`: constructs a `Tween` object
+  * `duration`: the duration in seconds
+  * `subject`: the tweening subject
+  * `target`: the tweening target
+  * `easing`: the easing function
+
+* `tween:reset()`: resets the `Tween` object
+  * returns `self`
+* `tween:set(clock)`: sets the `Tween` object to a specific clock point
+  * `clock`: the click time point
+  * returns `true` for success, otherwise `false`
+* `tween:update(delta)`: updates the `Tween` object with a specific delta time in seconds
+  * returns `true` for success, otherwise `false`
+
+* `tween:on('changed', function (sender) end)`: registers an event which will be triggered when the `Tween` has been updated
+  * returns `self`
+* `tween:on('completed', function (sender) end)`: registers an event which will be triggered when the `Tween` has completed
+  * returns `self`
+* `tween:off(event)`: unregisters the handlers of the specific event
+  * `event`: event name string
+  * returns `self`
+
+</details>
+
 # License
 
 beGUI is distributed under the MIT license.

docs/bitty.data

@@ -3,7 +3,7 @@
   "title": "beGUI | Bitty Engine",
   "description": "Tiny customizable GUI system for Bitty Engine",
   "author": "Tony",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "genre": "LIB",
   "url": "https://github.com/paladin-t/begui"
 }

imgs/beGUI1.png

@@ -41,7 +41,7 @@ end
 beGUI = beUtils.merge(
 	beGUI,
 	{
-		version = '1.3.1',
+		version = '1.4.0',
 
 		-- Data structure to represent relative number.
 		percent = beStructures.percent,
@@ -94,6 +94,8 @@ beGUI = beUtils.merge(
 		-- Events:
 		--   'changed': function (sender, value) end
 		Slide = beBasics.Slide,
+		-- Group widget.
+		Group = beContainers.Group,
 		-- List widget.
 		List = beContainers.List,
 		-- Draggable widget.

imgs/beGUI2.png

@@ -29,6 +29,58 @@ local beWidget = require 'libs/beGUI/beGUI_Widget'
 Widgets.
 ]]
 
+local Group = beClass.class({
+	ctor = function (self, content)
+		beWidget.Widget.ctor(self)
+
+		self.content = content
+	end,
+
+	__tostring = function (self)
+		return 'Group'
+	end,
+
+	-- Gets the group name.
+	getValue = function (self)
+		return self.content
+	end,
+	-- Sets the group name.
+	setValue = function (self, val)
+		self.content = val
+
+		return self
+	end,
+
+	navigatable = function (self)
+		return 'children'
+	end,
+
+	_update = function (self, theme, delta, dx, dy, event)
+		if not self.visibility then
+			return
+		end
+
+		local ox, oy = self:offset()
+		local px, py = self:position()
+		local x, y = dx + px + ox, dy + py + oy
+		local w, h = self:size()
+
+		local elem = theme['group']
+		local x_ = x + elem.content_offset[1]
+		local w_, h_ = measure(self.content, theme['font'].resource)
+		local black = Color.new(elem.color.r, elem.color.g, elem.color.b, self.transparency or 255)
+		line(x, y + h_ * 0.5, x, y + h - 1, black)
+		line(x, y + h - 1, x + w - 1, y + h - 1, black)
+		line(x + w - 1, y + h_ * 0.5, x + w - 1, y + h - 1, black)
+		line(x, y + h_ * 0.5, x_ - 2, y + h_ * 0.5, black)
+		line(x_ + w_ + 2, y + h_ * 0.5, x + w - 1, y + h_ * 0.5, black)
+		local elem_ = theme['group_title']
+		beUtils.textCenter(self.content, theme['font'], x_, y, w_, h_, elem_.content_offset, self.transparency)
+
+		beWidget.Widget._update(self, theme, delta, dx, dy, event)
+	end
+}, beWidget.Widget)
+
 local List = beClass.class({
 	_withScrollBar = false,
 	_scrolledTimestamp = nil,
@@ -757,6 +809,7 @@ Exporting.
 ]]
 
 return {
+	Group = Group,
 	List = List,
 	Draggable = Draggable,
 	Droppable = Droppable,

src/info.json

@@ -186,6 +186,16 @@ local function default()
 			content_offset = nil
 		},
 
+		['group'] = {
+			resource = nil,
+			color = Color.new(0, 0, 0),
+			area = nil,
+			content_offset = { 8, 0 }
+		},
+		['group_title'] = {
+			content_offset = nil
+		},
+
 		['list'] = {
 			resource = Resources.load('imgs/panel_white.png'),
 			color = Color.new(127, 127, 127, 128),

src/libs/beGUI/beGUI.lua

@@ -2,6 +2,7 @@
 MIT LICENSE
 
 Copyright (c) 2014 Enrique García Cota, Yuichi Tateno, Emmanuel Oga
+Adapted by Tony for Bitty Engine
 
 Permission is hereby granted, free of charge, to any person obtaining a
 copy of this software and associated documentation files (the
@@ -436,6 +437,15 @@ end
 local Tween_idx = { }
 local Tween_mt = { __index = Tween_idx }
 
+function Tween_idx:reset()
+	self.initial = self.initial or copyTables({ }, self.target, self.subject)
+	self.clock = 0
+	copyTables(self.subject, self.initial)
+	self.finished = false
+
+	return self
+end
+
 function Tween_idx:set(clock)
 	assert(type(clock) == 'number', "clock must be a positive number or 0")
 
@@ -469,15 +479,6 @@ function Tween_idx:set(clock)
 	return true
 end
 
-function Tween_idx:reset()
-	self.initial = self.initial or copyTables({ }, self.target, self.subject)
-	self.clock = 0
-	copyTables(self.subject, self.initial)
-	self.finished = false
-
-	return self
-end
-
 function Tween_idx:update(delta)
 	assert(type(delta) == 'number', "delta must be a number")
 
@@ -496,6 +497,21 @@ function Tween_idx:on(event, handler)
 	return self
 end
 
+function Tween_idx:off(event)
+	if not event then
+		return self
+	end
+	if self.events == nil then
+		return self
+	end
+	if self.events[event] == nil then
+		return self
+	end
+	self.events[event] = nil
+
+	return self
+end
+
 function Tween_idx:trigger(event, ...)
 	if not event then
 		return nil