Merge pull request #49 from endlesstravel/master

add little IME support

README.md

@@ -23,7 +23,13 @@ More info and code is over at [readthedocs](http://suit.readthedocs.org/en/lates
 local suit = require 'suit'
 
 -- storage for text input
-local input = {text = ""}
+local input = {text = "", candidate_text = {text="", start=0, length=0}}
+
+-- make love use font which support CJK text
+function love.load()
+    local font = love.graphics.newFont("NotoSansHans-Regular.otf", 20)
+    love.graphics.setFont(font)
+end
 
 -- all the UI is defined in love.update or functions that are called from here
 function love.update(dt)
@@ -33,15 +39,15 @@ function love.update(dt)
 
 	-- put an input widget at the layout origin, with a cell size of 200 by 30 pixels
 	suit.Input(input, suit.layout:row(200,30))
-	
+
 	-- put a label that displays the text below the first cell
 	-- the cell size is the same as the last one (200x30 px)
 	-- the label text will be aligned to the left
 	suit.Label("Hello, "..input.text, {align = "left"}, suit.layout:row())
 
 	-- put an empty cell that has the same size as the last cell (200x30 px)
 	suit.layout:row()
-	
+
 	-- put a button of size 200x30 px in the cell below
 	-- if the button is pressed, quit the game
 	if suit.Button("Close", suit.layout:row()).hit then
@@ -54,6 +60,11 @@ function love.draw()
 	suit.draw()
 end
 
+function love.textedited(text, start, length)
+    -- for IME input
+    input.candidate_text = {text = text, start= start, length = length}
+end
+
 function love.textinput(t)
 	-- forward text input to SUIT
 	suit.textinput(t)

core.lua

@@ -64,6 +64,7 @@ function suit:isActive(id)
 	return id == self.active
 end
 
+
 function suit:setHit(id)
 	self.hit = id
 	-- simulate mouse release on button -- see suit:mouseReleasedOn()

input.lua

@@ -57,7 +57,7 @@ return function(core, input, ...)
 	opt.state = core:registerHitbox(opt.id, x,y,w,h)
 	opt.hasKeyboardFocus = core:grabKeyboardFocus(opt.id)
 
-	if opt.hasKeyboardFocus then
+	if (input.candidate_text.text == "") and opt.hasKeyboardFocus then
 		local keycode,char = core:getPressedKey()
 		-- text input
 		if char and char ~= "" then

theme.lua

@@ -123,12 +123,26 @@ function theme.Input(input, opt, x,y,w,h)
 	love.graphics.setFont(opt.font)
 	love.graphics.print(input.text, x, y+(h-th)/2)
 
+	-- candidate text
+	local tw = opt.font:getWidth(input.text)
+	local ctw = opt.font:getWidth(input.candidate_text.text)
+	love.graphics.setColor((opt.color and opt.color.normal and opt.color.normal.fg) or theme.color.normal.fg)
+	love.graphics.print(input.candidate_text.text, x + tw, y+(h-th)/2)
+
+	-- candidate text rectangle box
+	love.graphics.rectangle("line", x + tw, y+(h-th)/2, ctw, th)
+
 	-- cursor
 	if opt.hasKeyboardFocus and (love.timer.getTime() % 1) > .5 then
+		local ct = input.candidate_text;
+		local ss = ct.text:sub(1, utf8.offset(ct.text, ct.start))
+		local ws = opt.font:getWidth(ss)
+		if ct.start == 0 then ws = 0 end
+
 		love.graphics.setLineWidth(1)
 		love.graphics.setLineStyle('rough')
-		love.graphics.line(x + opt.cursor_pos, y + (h-th)/2,
-		                   x + opt.cursor_pos, y + (h+th)/2)
+		love.graphics.line(x + opt.cursor_pos + ws, y + (h-th)/2,
+		                   x + opt.cursor_pos + ws, y + (h+th)/2)
 	end
 
 	-- reset scissor