Fix child boxes rendering on top of borders

Closes #4

go.mod

@@ -3,7 +3,7 @@ module git.tebibyte.media/tomo/backend
 go 1.20
 
 require (
-	git.tebibyte.media/tomo/tomo v0.42.0
+	git.tebibyte.media/tomo/tomo v0.46.1
 	git.tebibyte.media/tomo/typeset v0.7.1
 	git.tebibyte.media/tomo/xgbkb v1.0.1
 	github.com/jezek/xgb v1.1.1

go.sum

@@ -1,6 +1,6 @@
 git.tebibyte.media/sashakoshka/xgbkb v1.0.0/go.mod h1:pNcE6TRO93vHd6q42SdwLSTTj25L0Yzggz7yLe0JV6Q=
-git.tebibyte.media/tomo/tomo v0.42.0 h1:yaEUnURYrvBdMdcajrFhpd83TNzyQyBB+jOxvIyQTkU=
+git.tebibyte.media/tomo/tomo v0.46.1 h1:/8fT6I9l4TK529zokrThbNDHGRvUsNgif1Zs++0PBSQ=
-git.tebibyte.media/tomo/tomo v0.42.0/go.mod h1:WrtilgKB1y8O2Yu7X4mYcRiqOlPR8NuUnoA/ynkQWrs=
+git.tebibyte.media/tomo/tomo v0.46.1/go.mod h1:WrtilgKB1y8O2Yu7X4mYcRiqOlPR8NuUnoA/ynkQWrs=
 git.tebibyte.media/tomo/typeset v0.7.1 h1:aZrsHwCG5ZB4f5CruRFsxLv5ezJUCFUFsQJJso2sXQ8=
 git.tebibyte.media/tomo/typeset v0.7.1/go.mod h1:PwDpSdBF3l/EzoIsa2ME7QffVVajnTHZN6l3MHEGe1g=
 git.tebibyte.media/tomo/xgbkb v1.0.1 h1:b3HDUopjdQp1MZrb5Vpil4bOtk3NnNXtfQW27Blw2kE=

internal/system/attribute.go

@@ -1,26 +1,48 @@
 package system
 
 import "git.tebibyte.media/tomo/tomo"
+import "git.tebibyte.media/tomo/backend/internal/util"
 
 type attrHierarchy [T tomo.Attr] struct {
-	style T
+	fallback T
-	user  T
+	style    util.Optional[T]
-	userExists bool
+	user     util.Optional[T]
+}
+
+func (this *attrHierarchy[T]) SetFallback (fallback T) {
+	this.fallback = fallback
 }
 
 func (this *attrHierarchy[T]) SetStyle (style T) (different bool) {
-	styleEquals := this.style.Equals(style)
+	styleEquals := false
-	this.style = style
+	if previous, ok := this.style.Value(); ok {
-	return !styleEquals && !this.userExists
+		styleEquals = previous.Equals(style)
+	}
+	this.style.Set(style)
+	return !styleEquals && !this.user.Exists()
+}
+
+func (this *attrHierarchy[T]) UnsetStyle () (different bool) {
+	different = this.style.Exists()
+	this.style.Unset()
+	return different
 }
 
 func (this *attrHierarchy[T]) SetUser (user T) (different bool) {
-	userEquals := this.user.Equals(user)
+	userEquals := false
-	this.user = user
+	if previous, ok := this.user.Value(); ok {
-	this.userExists = true
+		userEquals = previous.Equals(user)
+	}
+	this.user.Set(user)
 	return !userEquals
 }
 
+func (this *attrHierarchy[T]) UnsetUser () (different bool) {
+	different = this.user.Exists()
+	this.user.Unset()
+	return different
+}
+
 func (this *attrHierarchy[T]) Set (attr T, user bool) (different bool) {
 	if user {
 		return this.SetUser(attr)
@@ -29,10 +51,20 @@ func (this *attrHierarchy[T]) Set (attr T, user bool) (different bool) {
 	}
 }
 
-func (this *attrHierarchy[T]) Value () T {
+func (this *attrHierarchy[T]) Unset (user bool) (different bool) {
-	if this.userExists {
+	if user {
-		return this.user
+		return this.UnsetUser()
 	} else {
-		return this.style
+		return this.UnsetStyle()
+	}
+}
+
+func (this *attrHierarchy[T]) Value () T {
+	if user, ok := this.user.Value(); ok {
+		return user
+	} else if style, ok := this.style.Value(); ok{
+		return style
+	} else {
+		return this.fallback
 	}
 }

internal/system/box.go

@@ -17,7 +17,7 @@ type box struct {
 	tags             util.Set[string]
 	role             tomo.Role
 	lastStyleNonce   int
-	lastIconsNonce  int
+	lastIconSetNonce int
 	styleApplicator  *styleApplicator
 
 	minSize             util.Memo[image.Point]
@@ -41,7 +41,6 @@ type box struct {
 	focused bool
 	pressed bool
 	
-
 	canvas util.Memo[canvas.Canvas]
 	drawer canvas.Drawer
 
@@ -71,11 +70,13 @@ func (this *System) newBox (outer anyBox) *box {
 		drawer:  outer,
 		tags:    make(util.Set[string]),
 	}
+	box.attrColor.SetFallback(tomo.AColor(color.Transparent))
 	box.canvas = util.NewMemo (func () canvas.Canvas {
 		if box.parent == nil { return nil }
 		parentCanvas := box.parent.getCanvas()
 		if parentCanvas == nil { return nil }
-		return parentCanvas.SubCanvas(box.bounds)
+		drawableArea := box.bounds.Intersect(box.parent.getInnerClippingBounds())
+		return parentCanvas.SubCanvas(drawableArea)
 	})
 	if outer == nil {
 		box.drawer = box
@@ -130,17 +131,25 @@ func (this *box) Tag (tag string) bool {
 }
 
 func (this *box) SetTag (tag string, on bool) {
+	wasOn := this.tags.Has(tag)
 	if on {
 		this.tags.Add(tag)
 	} else {
 		delete(this.tags, tag)
 	}
+	if wasOn != on {
+		this.invalidateStyle()
+	}
 }
 
 func (this *box) SetAttr (attr tomo.Attr) {
 	this.outer.setAttr(attr, true)
 }
 
+func (this *box) UnsetAttr (kind tomo.AttrKind) {
+	this.outer.unsetAttr(kind, true)
+}
+
 func (this *box) SetDNDData (dat data.Data) {
 	this.dndData = dat
 }
@@ -201,18 +210,7 @@ func (this *box) setAttr (attr tomo.Attr, user bool) {
 	case tomo.AttrBorder:
 		previousBorderSum := this.borderSum()
 		different         := this.attrBorder.Set(attr, user)
-
+		this.handleBorderChange(previousBorderSum, different)
-		// only invalidate the layout if the border is sized differently
-		if this.borderSum() != previousBorderSum {
-			this.invalidateLayout()
-			this.invalidateMinimum()
-		}
-
-		// if the border takes up the same amount of space, only invalidate the
-		// drawing if it looks different
-		if different {
-			this.invalidateDraw()
-		}
 		
 	case tomo.AttrMinimumSize:
 		if this.attrMinimumSize.Set(attr, user) {
@@ -220,13 +218,66 @@ func (this *box) setAttr (attr tomo.Attr, user bool) {
 		}
 		
 	case tomo.AttrPadding:
-		if this.attrPadding.Set(attr, true) {
+		if this.attrPadding.Set(attr, user) {
 			this.invalidateLayout()
 			this.invalidateMinimum()
 		}
 	}
 }
 
+func (this *box) unsetAttr (kind tomo.AttrKind, user bool) {
+	switch kind {
+	case tomo.AttrKindColor:
+		if this.attrColor.Unset(user) {
+			this.invalidateDraw()
+		}
+		
+	case tomo.AttrKindTexture:
+		if this.attrTexture.Unset(user) {
+			this.invalidateDraw()
+		}
+		
+	case tomo.AttrKindTextureMode:
+		if this.attrTextureMode.Unset(user) {
+			this.invalidateDraw()
+		}
+		
+	case tomo.AttrKindBorder:
+		previousBorderSum := this.borderSum()
+		different         := this.attrBorder.Unset(user)
+		this.handleBorderChange(previousBorderSum, different)
+	
+	case tomo.AttrKindMinimumSize:
+		if this.attrMinimumSize.Unset(user) {
+			this.invalidateMinimum()
+		}
+		
+	case tomo.AttrKindPadding:
+		if this.attrPadding.Unset(user) {
+			this.invalidateLayout()
+			this.invalidateMinimum()
+		}
+	}
+}
+
+func (this *box) unsetAllAttrs (user bool) {
+	// keep this in sync with tomo.AttrKind!
+	this.outer.unsetAttr(tomo.AttrKindColor, user)
+	this.outer.unsetAttr(tomo.AttrKindTexture, user)
+	this.outer.unsetAttr(tomo.AttrKindTextureMode, user)
+	this.outer.unsetAttr(tomo.AttrKindBorder, user)
+	this.outer.unsetAttr(tomo.AttrKindMinimumSize, user)
+	this.outer.unsetAttr(tomo.AttrKindPadding, user)
+	this.outer.unsetAttr(tomo.AttrKindGap, user)
+	this.outer.unsetAttr(tomo.AttrKindTextColor, user)
+	this.outer.unsetAttr(tomo.AttrKindDotColor, user)
+	this.outer.unsetAttr(tomo.AttrKindFace, user)
+	this.outer.unsetAttr(tomo.AttrKindWrap, user)
+	this.outer.unsetAttr(tomo.AttrKindAlign, user)
+	this.outer.unsetAttr(tomo.AttrKindOverflow, user)
+	this.outer.unsetAttr(tomo.AttrKindLayout, user)
+}
+
 func (this *box) setBounds (bounds image.Rectangle) {
 	if this.bounds == bounds { return }
 	this.bounds = bounds
@@ -395,6 +446,13 @@ func (this *box) Draw (can canvas.Canvas) {
 
 	// centered texture
 	if textureMode == tomo.TextureModeCenter && texture != nil {
+		this.centeredTexture(can, texture)
+	}
+}
+
+func (this *box) centeredTexture (can canvas.Canvas, texture canvas.Texture) {
+	pen           := can.Pen()
+	bounds        := this.Bounds()
 	textureBounds := texture.Bounds()
 	textureOrigin :=
 		bounds.Min.
@@ -408,7 +466,6 @@ func (this *box) Draw (can canvas.Canvas) {
 	pen.Fill(color.Transparent)
 	pen.Texture(texture)
 	pen.Rectangle(textureBounds.Sub(textureBounds.Min).Add(textureOrigin))
-	}
 }
 
 func (this *box) drawBorders (can canvas.Canvas) {
@@ -531,7 +588,21 @@ func (this *box) recursiveRedo () {
 }
 
 func (this *box) recursiveLoseCanvas () {
-	this.canvas.InvalidateTo(nil)
+	this.canvas.Invalidate()
+}
+
+func (this *box) handleBorderChange (previousBorderSum tomo.Inset, different bool) {
+	// only invalidate the layout if the border is sized differently
+	if this.borderSum() != previousBorderSum {
+		this.invalidateLayout()
+		this.invalidateMinimum()
+	}
+
+	// if the border takes up the same amount of space, only invalidate the
+	// drawing if it looks different
+	if different {
+		this.invalidateDraw()
+	}
 }
 
 func (this *box) invalidateStyle () {
@@ -560,7 +631,8 @@ func (this *box) invalidateMinimum () {
 }
 
 func (this *box) recursiveReApply () {
-	if this.getHierarchy() == nil { return }
+	hierarchy := this.getHierarchy()
+	if hierarchy == nil { return }
 	
 	// re-apply styling, icons *if needed*
 
@@ -571,16 +643,17 @@ func (this *box) recursiveReApply () {
 		// applicator for every box, it's so style applicators can cache
 		// information about the boxes they're linked to (like all rules
 		// with a matching role).
+		this.unsetAllAttrs(false)
 		this.lastStyleNonce = hierarchyStyleNonce
-		this.styleApplicator = this.getHierarchy().newStyleApplicator()
+		this.styleApplicator = hierarchy.newStyleApplicator()
 		this.invalidateStyle()
 		this.on.styleChange.Broadcast()
 	}
 
 	// icons
-	hierarchyIconsNonce := this.getIconsNonce()
+	hierarchyIconSetNonce := this.getIconSetNonce()
-	if this.lastIconsNonce != hierarchyIconsNonce {
+	if this.lastIconSetNonce != hierarchyIconSetNonce {
-		this.lastIconsNonce = hierarchyIconsNonce
+		this.lastIconSetNonce = hierarchyIconSetNonce
 		this.on.iconSetChange.Broadcast()
 	}
 }
@@ -629,7 +702,7 @@ func (this *box) getStyleNonce () int {
 	return this.getHierarchy().getStyleNonce()
 }
 
-func (this *box) getIconsNonce () int {
+func (this *box) getIconSetNonce () int {
 	// should panic if not in the tree
-	return this.getHierarchy().getIconsNonce()
+	return this.getHierarchy().getIconSetNonce()
 }

internal/system/containerbox.go

@@ -186,6 +186,53 @@ func (this *containerBox) setAttr (attr tomo.Attr, user bool) {
 	}
 }
 
+func (this *containerBox) unsetAttr (kind tomo.AttrKind, user bool) {
+	switch kind {
+	case tomo.AttrKindColor:
+		if this.attrColor.Unset(user) {
+			this.invalidateTransparentChildren()
+			this.invalidateDraw()
+		}
+		
+	case tomo.AttrKindTexture:
+		if this.attrTexture.Unset(user) {
+			this.invalidateTransparentChildren()
+			this.invalidateDraw()
+		}
+		
+	case tomo.AttrKindTextureMode:
+		if this.attrTextureMode.Unset(user) {
+			this.invalidateTransparentChildren()
+			this.invalidateDraw()
+		}
+
+	case tomo.AttrKindGap:
+		if this.attrGap.Unset(user) {
+			this.invalidateLayout()
+			this.invalidateMinimum()
+		}
+		
+	case tomo.AttrKindAlign:
+		if this.attrAlign.Unset(user) {
+			this.invalidateLayout()
+		}
+		
+	case tomo.AttrKindOverflow:
+		if this.attrOverflow.Unset(user) {
+			this.invalidateLayout()
+			this.invalidateMinimum()
+		}
+		
+	case tomo.AttrKindLayout:
+		if this.attrLayout.Unset(user) {
+			this.invalidateLayout()
+			this.invalidateMinimum()
+		}
+
+	default: this.box.unsetAttr(kind, user)
+	}
+}
+
 func (this *containerBox) recommendedHeight (width int) int {
 	layout := this.attrLayout.Value().Layout
 	if layout == nil || !this.attrOverflow.Value().Y {
@@ -251,6 +298,10 @@ func (this *containerBox) getCanvas () canvas.Canvas {
 	return this.canvas.Value()
 }
 
+func (this *containerBox) getInnerClippingBounds () image.Rectangle {
+	return this.innerClippingBounds
+}
+
 func (this *containerBox) notifyMinimumSizeChange (child anyBox) {
 	this.invalidateMinimum()
 	size   := child.minimumSize()

internal/system/hierarchy.go

@@ -4,6 +4,7 @@ import "image"
 import "git.tebibyte.media/tomo/tomo"
 import "git.tebibyte.media/tomo/tomo/input"
 import "git.tebibyte.media/tomo/tomo/canvas"
+import "git.tebibyte.media/tomo/backend/style"
 import "git.tebibyte.media/tomo/backend/internal/util"
 
 // Hierarchy is coupled to a tomo.Window implementation, and manages a tree of
@@ -168,22 +169,34 @@ func (this *Hierarchy) getWindow () tomo.Window {
 	return this.link.GetWindow()
 }
 
-func (this *Hierarchy) getStyle () *tomo.Style {
+func (this *Hierarchy) getStyle () *style.Style {
 	return this.system.style
 }
 
+func (this *Hierarchy) getIconSet () style.IconSet {
+	return this.system.iconSet
+}
+
+func (this *Hierarchy) getFaceSet () style.FaceSet {
+	return this.system.faceSet
+}
+
 func (this *Hierarchy) getStyleNonce () int {
 	return this.system.styleNonce
 }
 
-func (this *Hierarchy) getIconsNonce () int {
+func (this *Hierarchy) getIconSetNonce () int {
-	return this.system.iconsNonce
+	return this.system.iconSetNonce
 }
 
 func (this *Hierarchy) getCanvas () canvas.Canvas {
 	return this.canvas
 }
 
+func (this *Hierarchy) getInnerClippingBounds () image.Rectangle {
+	return this.canvas.Bounds()
+}
+
 func (this *Hierarchy) getModifiers () input.Modifiers {
 	return this.modifiers
 }

internal/system/internal-iface.go

@@ -12,6 +12,9 @@ type parent interface {
 	getHierarchy            () *Hierarchy
 	// canvas returns the canvas held by the parent.
 	getCanvas               () canvas.Canvas
+	// getInnerClippingBounds returns the area of the canvas that children
+	// can draw to.
+	getInnerClippingBounds  () image.Rectangle
 	// notifyMinimumSizeChange informs the parent that the minimum size of
 	// one of its children has changed.
 	notifyMinimumSizeChange (anyBox)
@@ -75,6 +78,9 @@ type anyBox interface {
 	// setAttr sets an attribute at the user or style level depending
 	// on the value of user.
 	setAttr   (attr tomo.Attr, user bool)
+	// unsetAttr unsets an attribute at the user or style level depending
+	// on the value of user.
+	unsetAttr (kind tomo.AttrKind, user bool)
 
 	// propagate recursively calls a function on this anyBox, and all of its
 	// children (if applicable) The normal propagate behavior calls the

internal/system/style.go

@@ -1,11 +1,13 @@
 package system
 
 import "git.tebibyte.media/tomo/tomo"
+import "git.tebibyte.media/tomo/backend/style"
 
 type styleApplicator struct {
-	style *tomo.Style
+	style      *style.Style
 	role       tomo.Role
-	rules []tomo.Rule
+	rules      []style.Rule
+	currentSet style.AttrSet
 }
 
 func (this *styleApplicator) apply (box anyBox) {
@@ -25,7 +27,7 @@ func (this *styleApplicator) apply (box anyBox) {
 	}
 
 	// compile list of attributes by searching through the cached ruleset
-	attrs := make(tomo.AttrSet)
+	attrs := make(style.AttrSet)
 	for _, rule := range this.rules {
 		satisifed := true
 		for _, tag := range rule.Tags {
@@ -40,7 +42,18 @@ func (this *styleApplicator) apply (box anyBox) {
 		}
 	}
 
+	// reset an attribute if it is no longer specified
+	if this.currentSet != nil {
+		for kind := range this.currentSet {
+			_, exists := attrs[kind]
+			if !exists {
+				box.unsetAttr(kind, false)
+			}
+		}
+	}
+
 	// apply that list of attributes
+	this.currentSet = attrs
 	for _, attr := range attrs {
 		box.setAttr(attr, false)
 	}

internal/system/system.go

@@ -2,8 +2,8 @@ package system
 
 import "io"
 import "image"
-import "git.tebibyte.media/tomo/tomo"
 import "git.tebibyte.media/tomo/tomo/canvas"
+import "git.tebibyte.media/tomo/backend/style"
 import "git.tebibyte.media/tomo/backend/internal/util"
 
 // System is coupled to a tomo.Backend implementation, and manages Hierarchies
@@ -11,9 +11,11 @@ import "git.tebibyte.media/tomo/backend/internal/util"
 type System struct {
 	link BackendLink
 
-	style      *tomo.Style
+	style        *style.Style
+	iconSet      style.IconSet
+	faceSet      style.FaceSet
 	styleNonce   int
-	iconsNonce int
+	iconSetNonce int
 	
 	hierarchies util.Set[*Hierarchy]
 }
@@ -43,9 +45,9 @@ func New (link BackendLink) *System {
 	}
 }
 
-// SetStyle sets the tomo.Style that is applied to objects, and notifies them
+// SetStyle sets the style that is applied to objects, and notifies them
 // that the style has changed.
-func (this *System) SetStyle (style *tomo.Style) {
+func (this *System) SetStyle (style *style.Style) {
 	this.style = style
 	this.styleNonce ++
 	for hierarchy := range this.hierarchies {
@@ -53,14 +55,21 @@ func (this *System) SetStyle (style *tomo.Style) {
 	}
 }
 
-// SetIconSet notifies objects that the icons have changed.
+// SetIconSet sets the icon set that provides icon textures, and notifies
-func (this *System) SetIconSet (iconSet tomo.IconSet) {
+// objects that the icons have changed.
-	this.iconsNonce ++
+func (this *System) SetIconSet (iconSet style.IconSet) {
+	this.iconSet = iconSet
+	this.iconSetNonce ++
 	for hierarchy := range this.hierarchies {
 		hierarchy.setIconSet()
 	}
 }
 
+// SetFaceSet sets the face set that provides font faces.
+func (this *System) SetFaceSet (faceSet style.FaceSet) {
+	this.faceSet = faceSet
+}
+
 func (this *System) removeHierarchy (hierarchy *Hierarchy) {
 	delete(this.hierarchies, hierarchy)
 }

internal/system/textbox.go

@@ -2,6 +2,7 @@ package system
 
 import "image"
 import "image/color"
+import "golang.org/x/image/font"
 import "git.tebibyte.media/tomo/tomo"
 import "golang.org/x/image/math/fixed"
 import "git.tebibyte.media/tomo/typeset"
@@ -9,6 +10,7 @@ import "git.tebibyte.media/tomo/tomo/text"
 import "git.tebibyte.media/tomo/tomo/input"
 import "git.tebibyte.media/tomo/tomo/event"
 import "git.tebibyte.media/tomo/tomo/canvas"
+import "git.tebibyte.media/tomo/backend/internal/util"
 
 type textBox struct {
 	*box
@@ -31,6 +33,7 @@ type textBox struct {
 	dot         text.Dot
 
 	drawer typeset.Drawer
+	face   util.Cycler[font.Face]
 
 	on struct {
 		contentBoundsChange event.FuncBroadcaster
@@ -41,6 +44,8 @@ type textBox struct {
 func (this *System) NewTextBox () tomo.TextBox {
 	box := &textBox { }
 	box.box = this.newBox(box)
+	box.attrTextColor.SetFallback(tomo.ATextColor(color.Black))
+	box.attrDotColor.SetFallback(tomo.ADotColor(color.RGBA { G: 255, B: 255, A: 255}))
 	return box
 }
 
@@ -108,7 +113,6 @@ func (this *textBox) Draw (can canvas.Canvas) {
 
 	texture := this.attrTexture.Value().Texture
 	col     := this.attrColor.Value().Color
-	if col == nil { col = color.Transparent }
 	
 	this.drawBorders(can)
 	
@@ -124,9 +128,8 @@ func (this *textBox) Draw (can canvas.Canvas) {
 		this.drawDot(can)
 	}
 
-	if this.attrFace.Value().Face != nil {
+	if this.face.Value() != nil {
 		textColor := this.attrTextColor.Value().Color
-		if textColor == nil { textColor = color.Black }
 		this.drawer.Draw(can, textColor, this.textOffset())
 	}
 }
@@ -145,23 +148,22 @@ func (this *textBox) setAttr (attr tomo.Attr, user bool) {
 		
 	case tomo.AttrFace:
 		if this.attrFace.Set(attr, user) {
-			this.drawer.SetFace(attr.Face)
+			this.handleFaceChange()
-			this.invalidateMinimum()
-			this.invalidateLayout()
 		}
 		
 	case tomo.AttrWrap:
 		if this.attrWrap.Set(attr, user) {
-			this.drawer.SetWrap(bool(attr))
+			this.drawer.SetWrap(bool(this.attrWrap.Value()))
 			this.invalidateMinimum()
 			this.invalidateLayout()
 		}
 		
 	case tomo.AttrAlign:
 		if this.attrAlign.Set(attr, user) {
+			align := this.attrAlign.Value()
 			this.drawer.SetAlign (
-				typeset.Align(attr.X),
+				typeset.Align(align.X),
-				typeset.Align(attr.Y))
+				typeset.Align(align.Y))
 			this.invalidateDraw()
 		}
 		
@@ -175,6 +177,49 @@ func (this *textBox) setAttr (attr tomo.Attr, user bool) {
 	}
 }
 
+func (this *textBox) unsetAttr (kind tomo.AttrKind, user bool) {
+	switch kind {
+	case tomo.AttrKindTextColor:
+		if this.attrTextColor.Unset(user) && !this.dot.Empty() {
+			this.invalidateDraw()
+		}
+		
+	case tomo.AttrKindDotColor:
+		if this.attrDotColor.Unset(user) && !this.dot.Empty() {
+			this.invalidateDraw()
+		}
+		
+	case tomo.AttrKindFace:
+		if this.attrFace.Unset(user) {
+			this.handleFaceChange()
+		}
+		
+	case tomo.AttrKindWrap:
+		if this.attrWrap.Unset(user) {
+			this.drawer.SetWrap(bool(this.attrWrap.Value()))
+			this.invalidateMinimum()
+			this.invalidateLayout()
+		}
+		
+	case tomo.AttrKindAlign:
+		if this.attrAlign.Unset(user) {
+			align := this.attrAlign.Value()
+			this.drawer.SetAlign (
+				typeset.Align(align.X),
+				typeset.Align(align.Y))
+			this.invalidateDraw()
+		}
+		
+	case tomo.AttrKindOverflow:
+		if this.attrOverflow.Unset(user) {
+			this.invalidateMinimum()
+			this.invalidateLayout()
+		}
+		
+	default: this.box.unsetAttr(kind, user)
+	}
+}
+
 func roundPt (point fixed.Point26_6) image.Point {
 	return image.Pt(point.X.Round(), point.Y.Round())
 }
@@ -184,13 +229,11 @@ func fixPt (point image.Point) fixed.Point26_6 {
 }
 
 func (this *textBox) drawDot (can canvas.Canvas) {
-	if this.attrFace.Value().Face == nil { return }
+	face := this.face.Value()
+	if face == nil { return }
 
-	face      := this.attrFace.Value().Face
 	textColor := this.attrTextColor.Value().Color
 	dotColor  := this.attrDotColor.Value().Color
-	if textColor == nil { textColor = color.Black }
-	if dotColor  == nil { dotColor  = color.RGBA { G: 255, B: 255, A: 255 } }
 	
 	pen := can.Pen()
 
@@ -447,3 +490,36 @@ func (this *textBox) scrollToDot () {
 	
 	this.ScrollTo(scroll)
 }
+
+func (this *textBox) handleFaceChange () {
+	hierarchy := this.getHierarchy()
+	if hierarchy == nil { return }
+	faceSet := hierarchy.getFaceSet()
+	if faceSet == nil { return }
+	
+	face := faceSet.Face(tomo.Face(this.attrFace.Value()))
+	this.face.Set(face, face)
+	this.drawer.SetFace(face)
+	this.invalidateMinimum()
+	this.invalidateLayout()
+}
+
+func (this *textBox) recursiveReApply () {
+	this.box.recursiveReApply()
+	
+	hierarchy := this.getHierarchy()
+	if hierarchy == nil { return }
+	
+	previousFace := this.face.Value()
+	if previousFace == nil {
+		faceSet := hierarchy.getFaceSet()
+		if faceSet == nil { return }
+		face := faceSet.Face(tomo.Face(this.attrFace.Value()))
+		if face != previousFace {
+			this.face.Set(face, face)
+			this.drawer.SetFace(face)
+			this.invalidateMinimum()
+			this.invalidateLayout()
+		}
+	}
+}

internal/util/util.go

@@ -149,3 +149,8 @@ func (this *Optional[T]) Unset () {
 	this.value = zero
 	this.exists = false
 }
+
+// Exists returns if the value is currently set.
+func (this *Optional[T]) Exists () bool {
+	return this.exists
+}

style/faceset.go

@@ -0,0 +1,13 @@
+package style
+
+import "golang.org/x/image/font"
+import "git.tebibyte.media/tomo/tomo"
+
+// FaceSet holds a set of font faces.
+type FaceSet interface {
+	// Face returns the font face which most closely matches the given
+	// tomo.Face. The face must be closed when it is done being used. If no
+	// suitable face could be found, This behavior must return a fallback
+	// face (such as basicfont.Face7x13) instead of nil.
+	Face (tomo.Face) font.Face
+}

style/iconset.go

@@ -0,0 +1,28 @@
+package style
+
+import "git.tebibyte.media/tomo/tomo"
+import "git.tebibyte.media/tomo/tomo/data"
+import "git.tebibyte.media/tomo/tomo/canvas"
+
+// IconSet holds a set of icon textures.
+type IconSet interface {
+	// A word on textures:
+	//
+	// Because textures can be linked to some resource that is outside of
+	// the control of Go's garbage collector, methods of IconSet must not
+	// allocate new copies of a texture each time they are called. It is
+	// fine to lazily load textures and save them for later use, but the
+	// same texture must never be allocated multiple times as this could
+	// cause a memory leak.
+	//
+	// As such, textures returned by these methods must be protected.
+	
+	// Icon returns a texture of the corresponding icon ID. If there is no
+	// suitable option, it should return nil.
+	Icon (tomo.Icon, tomo.IconSize) canvas.Texture
+
+	// MimeIcon returns a texture of an icon corresponding to a MIME type.
+	// If there is no suitable specific option, it should return a more
+	// generic icon or a plain file icon.
+	MimeIcon (data.Mime, tomo.IconSize) canvas.Texture
+}

x/backend.go

@@ -4,7 +4,9 @@ import "image"
 import "errors"
 import "git.tebibyte.media/tomo/tomo"
 import "git.tebibyte.media/tomo/xgbkb"
+import "git.tebibyte.media/tomo/tomo/data"
 import "git.tebibyte.media/tomo/tomo/canvas"
+import "git.tebibyte.media/tomo/backend/style"
 import "git.tebibyte.media/tomo/backend/x/canvas"
 import "git.tebibyte.media/tomo/backend/internal/system"
 
@@ -18,6 +20,9 @@ type Backend struct {
 	x         *xgbutil.XUtil
 	system    *system.System
 
+	style     *style.Style
+	iconSet   style.IconSet
+	
 	doChannel chan func()
 	windows   map[xproto.Window] *window
 	open      bool
@@ -126,12 +131,33 @@ func (this *Backend) NewCanvas (bounds image.Rectangle) canvas.CanvasCloser {
 	return xcanvas.NewCanvas(this.x, bounds)
 }
 
-func (this *Backend) SetStyle (style *tomo.Style) {
+func (this *Backend) ColorRGBA (id tomo.Color) (r, g, b, a uint32) {
+	if col, ok := this.style.Colors[id]; ok {
+		return col.RGBA()
+	}
+	return 0xFFFF, 0, 0xFFFF, 0xFFFF // punish bad styles
+}
+
+func (this *Backend) IconTexture (id tomo.Icon, size tomo.IconSize) canvas.Texture {
+	return this.iconSet.Icon(id, size)
+}
+
+func (this *Backend) MimeIconTexture (mime data.Mime, size tomo.IconSize) canvas.Texture {
+	return this.iconSet.MimeIcon(mime, size)
+}
+
+func (this *Backend) SetStyle (style *style.Style) {
+	this.style = style
 	this.system.SetStyle(style)
 }
 
-func (this *Backend) SetIconSet (icons tomo.IconSet) {
+func (this *Backend) SetIconSet (iconSet style.IconSet) {
-	this.system.SetIconSet(icons)
+	this.iconSet = iconSet
+	this.system.SetIconSet(iconSet)
+}
+
+func (this *Backend) SetFaceSet (faceSet style.FaceSet) {
+	this.system.SetFaceSet(faceSet)
 }
 
 func (this *Backend) assert () {

x/canvas/canvas.go

@@ -132,3 +132,32 @@ func convertColor (c color.Color) xgraphics.BGRA {
 		A: uint8(a >> 8),
 	}
 }
+
+// For some reason, xgraphics.BGRA does not specify whether or not it uses
+// premultiplied alpha, and information regarding this is contradictory.
+// Basically:
+//   - BGRAModel just takes the result of c.RGBA and bit shifts it, without
+//     un-doing the aplha premultiplication that is required by Color.RGBA,
+//     suggesting that xgraphics.BGRA stores alpha-premultiplied color.
+//   - xgraphics.BlendBGRA lerps between dest and src using only the alpha of
+//     src (temporarily converting the colors to fucking floats for some reason)
+//     which seems to suggest that xgraphics.BGRA *does not* store alpha-
+//     premultiplied color.
+// There is no issues page on xgbutil so we may never get an answer to this
+// question. However, in this package we just use xgraphics.BGRA to store alpha-
+// premultiplied color anyway because its way faster, and I would sooner eat
+// spaghetti with a spoon than convert to and from float64 to blend pixels.
+func blendPremultipliedBGRA (dst, src xgraphics.BGRA) xgraphics.BGRA {
+	// https://en.wikipedia.org/wiki/Alpha_compositing
+	return xgraphics.BGRA {
+		B: blendPremultipliedChannel(dst.B, src.B, src.A),
+		G: blendPremultipliedChannel(dst.G, src.G, src.A),
+		R: blendPremultipliedChannel(dst.R, src.R, src.A),
+		A: blendPremultipliedChannel(dst.A, src.A, src.A),
+	}
+}
+
+func blendPremultipliedChannel (dst, src, a uint8) uint8 {
+	dst16, src16, a16 := uint16(dst), uint16(src), uint16(a)
+	return uint8(src16 + ((dst16 * (255 - a16)) >> 8))
+}

x/canvas/draw.go

@@ -46,7 +46,7 @@ func (this *pen) textureRectangleTransparent (bounds image.Rectangle) {
 		srcPos := pos.Add(offset)
 		dstIndex := this.image.PixOffset(pos.X, pos.Y)
 		srcIndex := this.texture.PixOffset(srcPos.X, srcPos.Y)
-		pixel := xgraphics.BlendBGRA(xgraphics.BGRA {
+		pixel := blendPremultipliedBGRA(xgraphics.BGRA {
 			B: dst[dstIndex + 0],
 			G: dst[dstIndex + 1],
 			R: dst[dstIndex + 2],
@@ -93,7 +93,7 @@ func (this *pen) fillRectangleTransparent (c xgraphics.BGRA, bounds image.Rectan
 	for pos.Y = bounds.Min.Y; pos.Y < bounds.Max.Y; pos.Y ++ {
 	for pos.X = bounds.Min.X; pos.X < bounds.Max.X; pos.X ++ {
 		index := this.image.PixOffset(pos.X, pos.Y)
-		pixel := xgraphics.BlendBGRA(xgraphics.BGRA {
+		pixel := blendPremultipliedBGRA(xgraphics.BGRA {
 			B: this.image.Pix[index + 0],
 			G: this.image.Pix[index + 1],
 			R: this.image.Pix[index + 2],
@@ -256,7 +256,7 @@ func (context *fillingContext) fillPolygonHotTransparent () {
 			// fill pixels in between
 			for x := left; x < right; x ++ {
 				index := context.image.PixOffset(x, context.y)
-				pixel := xgraphics.BlendBGRA(xgraphics.BGRA {
+				pixel := blendPremultipliedBGRA(xgraphics.BGRA {
 					B: context.image.Pix[index + 0],
 					G: context.image.Pix[index + 1],
 					R: context.image.Pix[index + 2],

x/canvas/plot.go

@@ -32,7 +32,7 @@ func (context plottingContext) plot (center image.Point) {
 		for y := square.Min.Y; y < square.Max.Y; y ++ {
 		for x := square.Min.X; x < square.Max.X; x ++ {
 			index := context.image.PixOffset(x, y)
-			pixel := xgraphics.BlendBGRA(xgraphics.BGRA {
+			pixel := blendPremultipliedBGRA(xgraphics.BGRA {
 				B: context.image.Pix[index + 0],
 				G: context.image.Pix[index + 1],
 				R: context.image.Pix[index + 2],

x/event.go

@@ -145,12 +145,15 @@ func (window *window) updateBounds () {
 	// need to sum up all their positions.
 	decorGeometry, _ := window.xWindow.DecorGeometry()
 	windowGeometry, _ := window.xWindow.Geometry()
-	origin := image.Pt(
+	origin := image.Pt (
-		windowGeometry.X() + decorGeometry.X(),
+		decorGeometry.X(),
-		windowGeometry.Y() + decorGeometry.Y())
+		decorGeometry.Y())
-	window.metrics.bounds = image.Rectangle {
+	innerOrigin := origin.Add(image.Pt (
-		Min: origin,
+		windowGeometry.X(),
-		Max: origin.Add(image.Pt(windowGeometry.Width(), windowGeometry.Height())),
+		windowGeometry.Y()))
+	window.metrics.innerBounds = image.Rectangle {
+		Min: innerOrigin,
+		Max: innerOrigin.Add(image.Pt(windowGeometry.Width(), windowGeometry.Height())),
 	}
 }
 
@@ -161,9 +164,9 @@ func (window *window) handleConfigureNotify (
 	configureEvent := *event.ConfigureNotifyEvent
 	configureEvent = window.compressConfigureNotify(configureEvent)
 	
-	oldBounds := window.metrics.bounds
+	oldBounds := window.metrics.innerBounds
 	window.updateBounds()
-	newBounds := window.metrics.bounds
+	newBounds := window.metrics.innerBounds
 
 	sizeChanged :=
 		oldBounds.Dx() != newBounds.Dx() ||

x/window.go

@@ -37,7 +37,8 @@ type window struct {
 	resizeY     bool
 
 	metrics struct {
-		bounds image.Rectangle
+		bounds      image.Rectangle // bounds, including frame
+		innerBounds image.Rectangle // bounds of the drawable area
 	}
 
 	onClose event.FuncBroadcaster
@@ -156,7 +157,7 @@ func (this *Backend) newWindow (
 	// xevent.SelectionRequestFun(window.handleSelectionRequest).
 		// Connect(this.x, window.xWindow.Id)
 	
-	window.metrics.bounds = bounds
+	window.metrics.innerBounds = bounds
 	window.doMinimumSize()
 
 	this.windows[window.xWindow.Id] = window
@@ -165,6 +166,14 @@ func (this *Backend) newWindow (
 	return
 }
 
+func (this *window) Bounds () image.Rectangle {
+	return this.metrics.bounds.Sub(this.metrics.innerBounds.Min)
+}
+
+func (this *window) InnerBounds () image.Rectangle {
+	return this.metrics.innerBounds.Sub(this.metrics.innerBounds.Min)
+}
+
 func (this *window) SetRoot (root tomo.Object) {
 	if root == nil {
 		this.hierarchy.SetRoot(nil)
@@ -242,7 +251,7 @@ func (this *window) NewChild (bounds image.Rectangle) (tomo.Window, error) {
 	leader := this.leader
 	
 	child, err := this.backend.newWindow (
-		bounds.Add(this.metrics.bounds.Min), false)
+		bounds.Add(this.metrics.innerBounds.Min), false)
 	child.leader = leader
 	if err != nil { return nil, err }
 	
@@ -260,7 +269,7 @@ func (this *window) NewChild (bounds image.Rectangle) (tomo.Window, error) {
 
 func (this *window) NewMenu (bounds image.Rectangle) (tomo.Window, error) {
 	menu, err := this.backend.newWindow (
-		bounds.Add(this.metrics.bounds.Min), true)
+		bounds.Add(this.metrics.innerBounds.Min), true)
 	menu.shy = true
 	icccm.WmTransientForSet (
 		this.backend.x,
@@ -273,7 +282,7 @@ func (this *window) NewMenu (bounds image.Rectangle) (tomo.Window, error) {
 
 func (this *window) NewModal (bounds image.Rectangle) (tomo.Window, error) {
 	modal, err := this.backend.newWindow (
-		bounds.Add(this.metrics.bounds.Min), false)
+		bounds.Add(this.metrics.innerBounds.Min), false)
 	icccm.WmTransientForSet (
 		this.backend.x,
 		modal.xWindow.Id,
@@ -382,8 +391,8 @@ func (this *window) reallocateCanvas () {
 		previousHeight = this.xCanvas.Bounds().Dy()
 	}
 	
-	newWidth  := this.metrics.bounds.Dx()
+	newWidth  := this.metrics.innerBounds.Dx()
-	newHeight := this.metrics.bounds.Dy()
+	newHeight := this.metrics.innerBounds.Dy()
 	larger    := newWidth > previousWidth || newHeight > previousHeight
 	smaller   := newWidth < previousWidth / 2 || newHeight < previousHeight / 2
 
@@ -403,7 +412,7 @@ func (this *window) reallocateCanvas () {
 	}
 
 	this.hierarchy.SetCanvas(this.xCanvas.SubCanvas (
-		this.metrics.bounds.Sub(this.metrics.bounds.Min)))
+		this.metrics.innerBounds.Sub(this.metrics.innerBounds.Min)))
 }
 
 func (this *window) pushAll () {
@@ -458,12 +467,12 @@ func (this *window) doMinimumSize () {
 		this.backend.x,
 		this.xWindow.Id,
 		&hints)
-	newWidth  := this.metrics.bounds.Dx()
+	newWidth  := this.metrics.innerBounds.Dx()
-	newHeight := this.metrics.bounds.Dy()
+	newHeight := this.metrics.innerBounds.Dy()
 	if newWidth  < size.X { newWidth  = size.X }
 	if newHeight < size.Y { newHeight = size.Y }
-	if newWidth != this.metrics.bounds.Dx() ||
+	if newWidth != this.metrics.innerBounds.Dx() ||
-		newHeight != this.metrics.bounds.Dy() {
+		newHeight != this.metrics.innerBounds.Dy() {
 		this.xWindow.Resize(newWidth, newHeight)
 	}
 }