add Updater and Drawer interface (#57)

README.md

@@ -37,7 +37,7 @@ Here are some of the key features of Furex:
 
 - Flexbox layout: The UI layout can be configured using the properties of [View](https://pkg.go.dev/github.com/yohamta/furex/v2#View) instances, which can be thought of as equivalent to `DIV` elements in HTML. These views can be stacked or nested to create complex layouts.
 
-- Custom widgets: `View` instances can receive a `Handler` which is responsible for drawing and updating the view. This allows users to create any type of UI component by implementing the appropriate handler interfaces, such as [DrawHandler](https://pkg.go.dev/github.com/yohamta/furex/v2#DrawHandler), [UpdateHandler](https://pkg.go.dev/github.com/yohamta/furex/v2#UpdateHandler), and more.
+- Custom widgets: `View` instances can receive a `Handler` which is responsible for drawing and updating the view. This allows users to create any type of UI component by implementing the appropriate handler interfaces, such as [Drawer](https://pkg.go.dev/github.com/yohamta/furex/v2#Drawer), [Updater](https://pkg.go.dev/github.com/yohamta/furex/v2#Updater), and more.
 
 - Button support: To create a button, users can implement the [ButtonHandler](https://pkg.go.dev/github.com/yohamta/furex/v2#ButtonHandler) interface. This supports both touch and mouse input for button actions. See the [Example Button](./examples/game/widgets/button.go) for more details.
 
@@ -112,9 +112,9 @@ type Box struct {
   Color color.Color
 }
 
-var _ furex.DrawHandler = (*Box)(nil)
+var _ furex.Drawer = (*Box)(nil)
 
-func (b *Box) HandleDraw(screen *ebiten.Image, frame image.Rectangle) {
+func (b *Box) Draw(screen *ebiten.Image, frame image.Rectangle, view *furex.View) {
   graphic.FillRect(screen, &graphic.FillRectOpts{
     Rect: frame, Color: b.Color,
   })
@@ -229,7 +229,7 @@ The following table lists the available HTML attributes:
 
 There are three types of components you can create in Furex:
 
-- **Handler Instance**: A `furex.Handler` instance, such as `DrawHandler`.
+- **Handler Instance**: A `furex.Handler` instance, such as `Drawer` or `Updater`.
 - **Factory Function**: A function that returns a `furex.Handler` instance. This is useful when you want to create separate handler instances for each HTML tag.
 - **Function Component**: A function that returns a `*furex.View` instance. This is an alternative way to create components that encapsulate their own behavior and styles.
 

container.go

@@ -39,8 +39,8 @@ func (ct *containerEmbed) Draw(screen *ebiten.Image) {
 					h.HandleDraw(screen, b)
 					break
 				}
-				if h, ok := c.item.Handler.(DrawHandlerWithView); ok {
-					h.HandleDraw(screen, b, c.item)
+				if h, ok := c.item.Handler.(Drawer); ok {
+					h.Draw(screen, b, c.item)
 					break
 				}
 				break

examples/game/widgets/bar.go

@@ -15,10 +15,10 @@ type Bar struct {
 }
 
 var (
-	_ furex.DrawHandlerWithView = (*Bar)(nil)
+	_ furex.Drawer = (*Bar)(nil)
 )
 
-func (b *Bar) HandleDraw(screen *ebiten.Image, frame image.Rectangle, view *furex.View) {
+func (b *Bar) Draw(screen *ebiten.Image, frame image.Rectangle, view *furex.View) {
 	b.drawBlackBar(screen, frame)
 	b.drawBar(screen, frame, view)
 }

examples/game/widgets/button.go

@@ -22,7 +22,7 @@ type Button struct {
 
 var (
 	_ furex.ButtonHandler          = (*Button)(nil)
-	_ furex.DrawHandlerWithView    = (*Button)(nil)
+	_ furex.Drawer                 = (*Button)(nil)
 	_ furex.MouseEnterLeaveHandler = (*Button)(nil)
 )
 
@@ -39,7 +39,7 @@ func (b *Button) HandleRelease(x, y int, isCancel bool) {
 	}
 }
 
-func (b *Button) HandleDraw(screen *ebiten.Image, frame image.Rectangle, view *furex.View) {
+func (b *Button) Draw(screen *ebiten.Image, frame image.Rectangle, view *furex.View) {
 	x, y := float64(frame.Min.X+frame.Dx()/2), float64(frame.Min.Y+frame.Dy()/2)
 
 	sprite := view.Attrs["sprite"]

examples/game/widgets/panel.go

@@ -24,11 +24,11 @@ type Panel struct {
 var (
 	_ furex.ButtonHandler          = (*Panel)(nil)
 	_ furex.NotButton              = (*Panel)(nil)
-	_ furex.DrawHandlerWithView    = (*Panel)(nil)
+	_ furex.Drawer                 = (*Panel)(nil)
 	_ furex.MouseEnterLeaveHandler = (*Panel)(nil)
 )
 
-func (p *Panel) HandleDraw(screen *ebiten.Image, frame image.Rectangle, view *furex.View) {
+func (p *Panel) Draw(screen *ebiten.Image, frame image.Rectangle, view *furex.View) {
 	// This code is just for demo.
 	// It's dirty and not optimized.
 

examples/game/widgets/sprite.go

@@ -13,10 +13,10 @@ type Sprite struct {
 }
 
 var (
-	_ furex.DrawHandlerWithView = (*Sprite)(nil)
+	_ furex.Drawer = (*Sprite)(nil)
 )
 
-func (t *Sprite) HandleDraw(screen *ebiten.Image, frame image.Rectangle, view *furex.View) {
+func (t *Sprite) Draw(screen *ebiten.Image, frame image.Rectangle, view *furex.View) {
 	sprite := view.Attrs["sprite"]
 	spr := sprites.Get(sprite)
 	x, y := float64(frame.Min.X)+float64(frame.Dx())/2, float64(frame.Min.Y)+float64(frame.Dy())/2

examples/game/widgets/text.go

@@ -19,10 +19,10 @@ type Text struct {
 }
 
 var (
-	_ furex.DrawHandlerWithView = (*Text)(nil)
+	_ furex.Drawer = (*Text)(nil)
 )
 
-func (t *Text) HandleDraw(screen *ebiten.Image, frame image.Rectangle, view *furex.View) {
+func (t *Text) Draw(screen *ebiten.Image, frame image.Rectangle, view *furex.View) {
 	if t.Shadow {
 		ebitenutil.DrawRect(
 			screen, float64(frame.Min.X), float64(frame.Min.Y), float64(len(view.Text)*6+4), float64(frame.Dy()), color.RGBA{0, 0, 0, 50})

examples/simple/main.go

@@ -76,9 +76,9 @@ type Box struct {
 	Color color.Color
 }
 
-var _ furex.DrawHandler = (*Box)(nil)
+var _ furex.Drawer = (*Box)(nil)
 
-func (b *Box) HandleDraw(screen *ebiten.Image, frame image.Rectangle) {
+func (b *Box) Draw(screen *ebiten.Image, frame image.Rectangle, view *furex.View) {
 	ebitenutil.DrawRect(
 		screen,
 		float64(frame.Min.X),

handler.go

@@ -9,34 +9,33 @@ import (
 // Handler represents a component that can be added to a container.
 type Handler interface{}
 
+// Drawer represents a component that can be added to a container.
+type Drawer interface {
+	// Draw function draws the content of the component inside the frame.
+	Draw(screen *ebiten.Image, frame image.Rectangle, v *View)
+}
+
+// Updater represents a component that updates by one tick.
+type Updater interface {
+	// Update updates the state of the component by one tick.
+	Update(v *View)
+}
+
 // DrawHandler represents a component that can be added to a container.
+// deprectead: use Drawer instead
 type DrawHandler interface {
 	// HandleDraw function draws the content of the component inside the frame.
 	// The frame parameter represents the location (x,y) and size (width,height) relative to the window (0,0).
 	HandleDraw(screen *ebiten.Image, frame image.Rectangle)
 }
 
-// DrawHandlerWithView represents a component that can be added to a container.
-// The component can access the view itself.
-type DrawHandlerWithView interface {
-	// HandleDraw function draws the content of the component inside the frame.
-	// The frame parameter represents the location (x,y) and size (width,height) relative to the window (0,0).
-	HandleDraw(screen *ebiten.Image, frame image.Rectangle, v *View)
-}
-
 // UpdateHandler represents a component that updates by one tick.
+// deprectead: use Updater instead
 type UpdateHandler interface {
 	// Updater updates the state of the component by one tick.
 	HandleUpdate()
 }
 
-// UpdateHandlerWithView represents a component that updates by one tick.
-// The component can access the view itself.
-type UpdateHandlerWithView interface {
-	// Updater updates the state of the component by one tick.
-	HandleUpdate(v *View)
-}
-
 // ButtonHandler represents a button component.
 type ButtonHandler interface {
 	// HandlePress handle the event when user just started pressing the button

view.go

@@ -72,8 +72,8 @@ func (v *View) processHandler() {
 		u.HandleUpdate()
 		return
 	}
-	if u, ok := v.Handler.(UpdateHandlerWithView); ok {
-		u.HandleUpdate(v)
+	if u, ok := v.Handler.(Updater); ok {
+		u.Update(v)
 		return
 	}
 }