Jump to content
  • entries
    943
  • comments
    5,899
  • views
    923,737

Textfield Widget


Josh

1,239 views

 Share

It took a few hours to add scrolling to the textfield widget. Now when the caret moves beyond the bounds of the box, text will slide over to keep the caret visible. This really isn't much different from a full text editor. The script is available now on the beta branch on Steam and presently weights in at 381 lines of Lua code.

 

 

The Draw function is pretty short and easy to understand. I think most people will customize the appearance of these widgets more than the behavior:

function Script:Draw(x,y,width,height)
   local gui = self.widget:GetGUI()
   local pos = self.widget:GetPosition(true)
   local sz = self.widget:GetSize(true)
   local scale = gui:GetScale()
   local item = self.widget:GetSelectedItem()
   local text = self.widget:GetText()

   self:UpdateOffset()

   --Draw the widget background
   gui:SetColor(0.2,0.2,0.2)
   gui:DrawRect(pos.x,pos.y,sz.width,sz.height,0)

   --Draw the widget outline
   if self.hovered==true then
       gui:SetColor(51/255/4,151/255/4,1/4)
   else
       gui:SetColor(0,0,0)
   end
   gui:DrawRect(pos.x,pos.y,sz.width,sz.height,1)

   --Draw text selection background
   if self.sellen~=0 then
       local n
       local x = gui:GetScale()*self.textindent
       local px = x
       local fragment = self:GetSelectedText()
       local w = gui:GetTextWidth(fragment)
       local c1 = math.min(self.caretposition,self.caretposition+self.sellen)
       local c2 = math.max(self.caretposition,self.caretposition+self.sellen)
       local prefix = String:Left(text,c1)
       px = px + gui:GetTextWidth(prefix)
       gui:SetColor(0.4,0.4,0.4)
       gui:DrawRect(pos.x + px + self.offsetx, pos.y+2*scale,w,sz.height-4*scale,0)
   end

   --Draw text
   gui:SetColor(0.75,0.75,0.75)
   if text~="" then
       gui:DrawText(text,scale * self.textindent + pos.x+self.offsetx,pos.y,math.max(sz.width,sz.width-self.offsetx),sz.height,Text.Left+Text.VCenter)
   end

   --Draw the caret
   if self.cursorblinkmode then
       if self.focused then
           local x = self:GetCaretCoord()
           gui:DrawLine(pos.x + x + self.offsetx,pos.y+2*scale,pos.x + x + self.offsetx,pos.y + sz.height-4*scale)
       end
   end

end

  • Upvote 7
 Share

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...