The Readme on components and canvases

🤖 Generated with [ECA](https://eca.dev) (anthropic/claude-opus-4-8)

Co-Authored-By: eca-agent <git@eca.dev>

Readme.org

@@ -139,6 +139,44 @@ A tree node is known by its key, which must be its own in the tree. A node
 is open at first when it says ~#:expanded~; after that the user opens and
 closes it.
 
+* Components: view-map
+
+A part of a program can have a message type, an update and a view of its
+own, and know nothing of the program it is in. ~(view-map f view)~ puts its
+view in a larger one: each message it sends is given to ~f~ first, which is
+usually the case of the larger message that carries it.
+
+#+BEGIN_SRC scheme
+(type (: Msg (Union (: Colour PickerMsg) (: Width PickerMsg) ...)))
+
+(column (view-map Colour (picker-view (.colour m)))
+        (view-map Width (picker-view (.width m))))
+
+((Colour pm) (next (record-set m (colour (picker-update pm (.colour m))))))
+#+END_SRC
+
+* Drawing: canvas
+
+[[file:docs/sketch.png]]
+
+~(canvas width height shape ...)~ is a surface to draw on. A shape is placed
+by its own numbers, and any other view by ~(at-point x y view)~.
+
+| Shape                                    | Takes                                         |
+|------------------------------------------+-----------------------------------------------|
+| ~(rect x y width height)~                | ~#:fill~, ~#:stroke~, ~#:stroke-width~, ~#:radius~ |
+| ~(ellipse x y width height)~             | ~#:fill~, ~#:stroke~, ~#:stroke-width~         |
+| ~(line x1 y1 x2 y2)~                     | ~#:stroke~, ~#:stroke-width~                   |
+| ~(path "M 10 10 L 50 10 L 30 40 Z")~      | ~#:fill~, ~#:stroke~, ~#:stroke-width~         |
+
+A path is written as SVG writes one. ~(on-press canvas f)~, ~(on-move canvas
+f)~ and ~(on-release canvas f)~ send ~(f x y)~, the place on the canvas, when
+a button is pressed, when the pointer moves, and when the button is let go.
+A press takes the pointer, so a drag that leaves the canvas still reaches it.
+Shapes are views like any other, so keyed ones are kept as their list
+changes. [[file:examples/sketch.bjo][examples/sketch.bjo]] is the picture
+above, and uses two components of its own.
+
 * Styles and themes
 
 [[file:docs/styles.png]]
@@ -290,10 +328,12 @@ bjo run tests/inputs.bjo    # prints "bjogui inputs ok"
 bjo run tests/menus.bjo     # prints "bjogui menus ok"
 bjo run tests/dialogs.bjo   # prints "bjogui dialogs ok"
 bjo run tests/tree.bjo      # prints "bjogui tree ok"
+bjo run tests/canvas.bjo    # prints "bjogui canvas ok"
 bjo run examples/counter.bjo
 bjo run examples/stopwatch.bjo
 bjo run examples/todo.bjo
 bjo run examples/styles.bjo
+bjo run examples/sketch.bjo
 #+END_SRC
 
 * Not yet
@@ -302,5 +342,7 @@ bjo run examples/styles.bjo
 - Dialogs of one's own, with a view and a state.
 - The macOS menu bar.
 - Pointer-over and pressed colours for kinds other than buttons.
+- Controls of Avalonia's or another package's that bjogui does not wrap, and
+  controls that draw themselves, which would need a subclass.
 - A moved control is taken out of the panel and put back, so it may lose the
   keyboard focus.