feat: Change box alignment to use PositionalAnchors (#84)

* Fix flake8 moan

* feat: change box alignment to use PositionAnchors

* feat: Focus now working correctly (I hope). More tests need to be added; but manual verification looks good.

Box size is broken

* fix: Text box size; base Box bounding rect of children; button text to use Textbox instead of pyglet label.

* fix: Text box alignment and dynamic size of Boxes

* fix: Ensure bounding rects end up with integer width

* fix: Aligning anchors with each other needs to be calculated in world coordinates

* fix: Fix all linters; optimise imports and fix tests

* fix: Fix typing problem

.github/workflows/release.yml

@@ -32,8 +32,8 @@ jobs:
         with:
           branch: master
           extra_plugins: |
-            @semantic-release/exec
-            @semantic-release/git
+            @semantic-release/exec@3.3.8
+            @semantic-release/git@7.0.18
             @semantic-release/changelog
         env:
           GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}

examples/calculator.py

@@ -9,13 +9,10 @@
 from shimmer.display.widgets.button import ButtonDefinition, Button
 from shimmer.display.widgets.window import WindowDefinition, Window
 from shimmer.display.widgets.text_box import TextBoxDefinition, TextBox
-from shimmer.display.data_structures import (
-    VerticalAlignment,
-    HorizontalAlignment,
-)
+from shimmer.display.alignment import LeftTop
 from shimmer.display.keyboard import (
     KeyboardActionDefinition,
-    KeyMap,
+    KeyboardHandlerDefinition,
     KeyboardHandler,
     ChordDefinition,
 )
@@ -66,11 +63,7 @@ def __init__(self):
 
         # Add the display and the buttons to the Window body with sensible alignment.
         self.add_child_to_body(
-            self.text_box,
-            align_x=HorizontalAlignment.left,
-            margin_x=self.margin,
-            align_y=VerticalAlignment.top,
-            margin_y=self.margin,
+            self.text_box, body_anchor=LeftTop, spacing=(self.margin, 0),
         )
         self.add_child_to_body(self.button_layout)
 
@@ -128,7 +121,7 @@ def update_display(self):
         """Update the calculator display."""
         self.text_box.text = self.calculation
 
-    def create_keymap(self) -> KeyMap:
+    def create_keymap(self) -> KeyboardHandlerDefinition:
         """
         Create an additional keymap for this calculator.
 
@@ -147,7 +140,7 @@ def inner() -> bool:
 
             return inner
 
-        keymap = KeyMap()
+        keymap = KeyboardHandlerDefinition()
 
         # Make the ENTER keys also trigger equals.
         keymap.add_keyboard_action(
@@ -183,9 +176,7 @@ def main():
     """Run the calculator program."""
     cocos.director.director.init()
     new_calculator_button = Button(
-        ButtonDefinition(
-            text="New Calculator", on_press=create_new_calculator, dynamic_size=True
-        )
+        ButtonDefinition(text="New Calculator", on_press=create_new_calculator)
     )
     new_calculator_button.position = (
         0,

pyproject.toml

@@ -22,6 +22,7 @@ toml = "^0.9"
 janus = "^0.4.0"
 cocos2d = "^0.6.7"
 more-itertools = "^8.0.2"
+pyglet = "1.4.3"
 
 [tool.poetry.dev-dependencies]
 black = "^19.10b0"
@@ -35,6 +36,7 @@ pytest-mock = "^1.13.0"
 
 [tool.pytest]
 mock_use_standalone_module = true
+
 [build-system]
 requires = ["poetry>=1.0.0"]
 build-backend = "poetry.masonry.api"

pytest.ini

@@ -0,0 +1,5 @@
+[pytest]
+log_format = %(asctime)s.%(msecs)03d %(levelname)s %(message)s
+log_date_format = %Y-%m-%dT%H:%M:%S
+log_cli = true
+log_cli_level = 0

shimmer/display/alignment.py

@@ -0,0 +1,96 @@
+"""Module of alignment definitions."""
+
+from dataclasses import dataclass
+from enum import Enum
+
+import cocos
+
+
+class HorizontalAlignment(Enum):
+    """Enum of possible values for horizontal alignment in pyglet."""
+
+    left = "left"
+    right = "right"
+    center = "center"
+
+
+class VerticalAlignment(Enum):
+    """Enum of possible values for vertical alignment in pyglet."""
+
+    bottom = "bottom"
+    center = "center"
+    top = "top"
+
+
+class VerticalTextAlignment(Enum):
+    """Enum of possible values for vertical alignment of text in pyglet."""
+
+    bottom = "bottom"
+    center = "center"
+    top = "top"
+    # Baseline is the bottom of the first line of text, as opposed to `bottom` which is
+    # the bottom of the pyglet text layout.
+    baseline = "baseline"
+
+
+class ZIndexEnum(Enum):
+    """Indicators of where in the stack of cocos children to add a child."""
+
+    top = "top"
+    bottom = "bottom"
+
+
+@dataclass(frozen=True)
+class PositionalAnchor:
+    """Pair of alignments that define a relative anchor point in 2D space."""
+
+    horizontal: HorizontalAlignment
+    vertical: VerticalAlignment
+
+    @property
+    def x(self) -> HorizontalAlignment:
+        """Synonym for `self.horizontal`."""
+        return self.horizontal
+
+    @property
+    def y(self) -> VerticalAlignment:
+        """Synonym for `self.vertical`."""
+        return self.vertical
+
+    def get_coord_in_rect(self, width: int, height: int) -> cocos.draw.Point2:
+        """
+        Get the (x, y) coordinate of this anchor in the given rect.
+
+        :param width: The width of the rect to consider.
+        :param height: The height of the rect to consider.
+        :return: cocos.draw.Point2 of the anchor position.
+        """
+        x, y = 0.0, 0.0
+
+        if self.horizontal == HorizontalAlignment.left:
+            x = 0
+        elif self.horizontal == HorizontalAlignment.center:
+            x = width / 2
+        elif self.horizontal == HorizontalAlignment.right:
+            x = width
+
+        if self.vertical == VerticalAlignment.bottom:
+            y = 0
+        elif self.vertical == VerticalAlignment.center:
+            y = height / 2
+        elif self.vertical == VerticalAlignment.top:
+            y = height
+
+        return cocos.draw.Point2(x, y)
+
+
+# Define the 9 basic anchor points of a rectangle.
+LeftTop = PositionalAnchor(HorizontalAlignment.left, VerticalAlignment.top)
+LeftCenter = PositionalAnchor(HorizontalAlignment.left, VerticalAlignment.center)
+LeftBottom = PositionalAnchor(HorizontalAlignment.left, VerticalAlignment.bottom)
+CenterTop = PositionalAnchor(HorizontalAlignment.center, VerticalAlignment.top)
+CenterCenter = PositionalAnchor(HorizontalAlignment.center, VerticalAlignment.center)
+CenterBottom = PositionalAnchor(HorizontalAlignment.center, VerticalAlignment.bottom)
+RightTop = PositionalAnchor(HorizontalAlignment.right, VerticalAlignment.top)
+RightCenter = PositionalAnchor(HorizontalAlignment.right, VerticalAlignment.center)
+RightBottom = PositionalAnchor(HorizontalAlignment.right, VerticalAlignment.bottom)