OMG the chat is finally scrolling!

* implement UIScrollArea
* rework console to allow scrolling
* many core ui changes in the way.. so maybe we will have new bugs
* fix in UIScrollBar

modules/core_lib/widgets/uiscrollarea.lua

@@ -1,15 +1,74 @@
 UIScrollArea = extends(UIWidget)
 
+-- public functions
 function UIScrollArea.create()
   local scrollarea = UIScrollArea.internalCreate()
   scrollarea:setClipping(true)
+  scrollarea.inverted = false
   return scrollarea
 end
 
 function UIScrollArea:onStyleApply(styleName, styleNode)
   for name,value in pairs(styleNode) do
-    if name == 'horizontal-scrollbar' then
-      
+    if name == 'vertical-scrollbar' then
+      addEvent(function()
+        self:setVerticalScrollBar(self:getParent():getChildById(value))
+      end)
+    elseif name == 'horizontal-scrollbar' then
+      addEvent(function()
+        self:setHorizontalScrollBar(self:getParent():getChildById(value))
+      end)
+    elseif name == 'inverted-scroll' then
+      self:setInverted(value)
     end
   end
 end
+
+function UIScrollArea:updateScrollBars()
+  local offset = { x = 0, y = 0 }
+  local scrollheight = math.max(self:getChildrenRect().height - self:getClippingRect().height, 0)
+  local scrollwidth = math.max(self:getChildrenRect().width - self:getClippingRect().width, 0)
+
+  local scrollbar = self.verticalScrollBar
+  if scrollbar then
+    if self.inverted then
+      scrollbar:setMinimum(-scrollheight)
+    else
+      scrollbar:setMaximum(scrollheight)
+    end
+  end
+
+  local scrollbar = self.horizontalScrollBar
+  if scrollbar then
+    if self.inverted then
+      scrollbar:setMinimum(-scrollwidth)
+    else
+      scrollbar:setMaximum(scrollwidth)
+    end
+  end
+end
+
+function UIScrollArea:setVerticalScrollBar(scrollbar)
+  self.verticalScrollBar = scrollbar
+  scrollbar:setMaximum(0)
+  self.verticalScrollBar.onValueChange = function(scrollbar, value)
+    local virtualOffset = self:getVirtualOffset()
+    if self.inverted then value = -value end
+    virtualOffset.y = value
+    self:setVirtualOffset(virtualOffset)
+  end
+  self:updateScrollBars()
+end
+
+function UIScrollArea:setHorizontalScrollBar(scrollbar)
+  self.horizontalScrollBar = scrollbar
+  self:updateScrollBars()
+end
+
+function UIScrollArea:setInverted(inverted)
+  self.inverted = inverted
+end
+
+function UIScrollArea:onLayoutUpdate()
+  self:updateScrollBars()
+end

modules/core_lib/widgets/uiscrollbar.lua

@@ -18,9 +18,12 @@ local function calcValues(self)
   end
 
   local range = self.maximum - self.minimum + 1
-  local proportion = math.max(range*(self.step/range), 1)/range
+  local proportion = math.min(math.max(range*(self.step/range), 1), range)/range
   local px = math.max(math.floor(proportion * pxrange), 10)
-  local offset = ((self.value / (range - 1)) - 0.5) * (pxrange - px)
+  local offset = 0
+  if range > 1 then
+    offset = (((self.value - self.minimum) / (range - 1)) - 0.5) * (pxrange - px)
+  end
 
   return range, pxrange, px, offset, center
 end
@@ -54,7 +57,7 @@ local function parseSliderPos(self, pos)
   end
   local range, pxrange, px, offset, center = calcValues(self)
   offset = math.min(math.max(point - center, -pxrange/2), pxrange/2)
-  local newvalue = math.floor(((offset / (pxrange - px)) + 0.5) * (range - 1))
+  local newvalue = math.floor(((offset / (pxrange - px)) + 0.5) * (range - 1)) + self.minimum
   self:setValue(newvalue)
 end
 

modules/core_lib/widgets/uitabbar.lua

@@ -32,6 +32,7 @@ function UITabBar:addTab(text, panel)
   end
 
   local tab = createWidget(self:getStyleName() .. 'Button', self)
+  panel.isTab = true
   tab.tabPanel = panel
   tab.tabBar = self
   tab:setText(text)
@@ -68,8 +69,8 @@ end
 function UITabBar:selectTab(tab)
   if self.currentTab == tab then return end
   if self.contentWidget then
-    local selectedWidget = self.contentWidget:getFirstChild()
-    if selectedWidget then
+    local selectedWidget = self.contentWidget:getLastChild()
+    if selectedWidget and selectedWidget.isTab then
       self.contentWidget:removeChild(selectedWidget)
     end
     self.contentWidget:addChild(tab.tabPanel)

modules/core_styles/styles/panels.otui

@@ -1,6 +1,9 @@
 Panel < UIWidget
   phantom: true
 
+ScrollablePanel < UIScrollArea
+  phantom: true
+
 FlatPanel < Panel
   image-source: /core_styles/styles/images/panel_flat.png
   image-border: 1

modules/game/widgets/uigamemap.lua

@@ -57,23 +57,19 @@ function UIGameMap:onDrop(widget, mousePos)
   return true
 end
 
-function UIGameMap:onClick(mousePosition)
-  local tile = self:getTile(mousePosition)
-  if tile == nil then return false end
-  local dirs = g_map.findPath(g_game.getLocalPlayer():getPosition(), tile:getPosition(), 255)
-  if #dirs == 0 then
-    TextMessage.displayStatus('There is no way.')
-    return true
-  end
-  g_game.autoWalk(dirs)
-  return true
-end
-
 function UIGameMap:onMouseRelease(mousePosition, mouseButton)
   local tile = self:getTile(mousePosition)
   if tile == nil then return false end
   if GameInterface.processMouseAction(mousePosition, mouseButton, nil, tile:getTopLookThing(), tile:getTopUseThing(), tile:getTopCreature(), tile:getTopMultiUseThing()) then
     return true
+  elseif mouseButton == MouseLeftButton and self:isPressed() then
+    local dirs = g_map.findPath(g_game.getLocalPlayer():getPosition(), tile:getPosition(), 255)
+    if #dirs == 0 then
+      TextMessage.displayStatus('There is no way.')
+      return true
+    end
+    g_game.autoWalk(dirs)
+    return true
   end
   return false
 end

modules/game_console/console.lua

@@ -43,7 +43,7 @@ local SayModes = {
 }
 
 local consolePanel
-local consoleBuffer
+local consoleContentPanel
 local consoleTabBar
 local consoleLineEdit
 local channels
@@ -51,6 +51,7 @@ local messageHistory = { }
 local currentMessageIndex = 0
 local MaxHistory = 1000
 local channelsWindow
+local MAX_LINES = 100
 
 -- private functions
 local function navigateMessageHistory(step)
@@ -159,9 +160,9 @@ function Console.init()
 
   consolePanel = displayUI('console.otui', GameInterface.getBottomPanel())
   consoleLineEdit = consolePanel:getChildById('consoleLineEdit')
-  consoleBuffer = consolePanel:getChildById('consoleBuffer')
+  consoleContentPanel = consolePanel:getChildById('consoleContentPanel')
   consoleTabBar = consolePanel:getChildById('consoleTabBar')
-  consoleTabBar:setContentWidget(consoleBuffer)
+  consoleTabBar:setContentWidget(consoleContentPanel)
   channels = {}
 
   Console.addChannel('Default', 0)
@@ -208,7 +209,7 @@ function Console.terminate()
   consolePanel:destroy()
   consolePanel = nil
   consoleLineEdit = nil
-  consoleBuffer = nil
+  consoleContentPanel = nil
   consoleTabBar = nil
 
   Console = nil
@@ -323,13 +324,15 @@ function Console.addTabText(text, speaktype, tab)
   end
 
   local panel = consoleTabBar:getTabPanel(tab)
-  local label = createWidget('ConsoleLabel', panel)
+  local consoleBuffer = panel:getChildById('consoleBuffer')
+  local label = createWidget('ConsoleLabel', consoleBuffer)
+  label:setId('consoleLabel' .. panel:getChildCount())
   label:setText(text)
   label:setColor(speaktype.color)
   consoleTabBar:blinkTab(tab)
 
-  if panel:getChildCount() > 10 then
-    panel:removeChild(panel:getFirstChild())
+  if consoleBuffer:getChildCount() > MAX_LINES then
+    consoleBuffer:getFirstChild():destroy()
   end
 end
 

modules/game_console/console.otui

@@ -5,9 +5,30 @@ ConsoleLabel < UILabel
 
 ConsoleTabBar < TabBar
 ConsoleTabBarPanel < TabBarPanel
-  layout:
-    type: verticalBox
-    align-bottom: true
+  id: consoleTab
+
+  ScrollablePanel
+    id: consoleBuffer
+    // height = max lines * 14
+    anchors.fill: parent
+    margin-right: 12
+    vertical-scrollbar: consoleScrollBar
+    layout:
+      type: verticalBox
+      align-bottom: true
+    border-width: 1
+    border-color: #101317
+    background: #00000044
+    inverted-scroll: true
+    padding: 1
+
+  VerticalScrollBar
+    id: consoleScrollBar
+    anchors.top: parent.top
+    anchors.bottom: parent.bottom
+    anchors.right: parent.right
+    step: 14
+
 ConsoleTabBarButton < TabBarButton
 
 Panel
@@ -60,15 +81,16 @@ Panel
     @onClick: g_game.requestChannels()
 
   Panel
-    id: consoleBuffer
+    id: consoleContentPanel
     anchors.top: prev.bottom
     anchors.left: parent.left
     anchors.right: parent.right
     anchors.bottom: consoleLineEdit.top
-    margin-right: 6
     margin-left: 6
+    margin-right: 6
     margin-bottom: 4
     margin-top: 4
+    padding: 1
     focusable: false
 
   TabButton