From 66e861351b24d0242a928a6ecee672bd57369e41ab90195253ae05f1ca9da49b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Linus=20Bj=C3=B6rnstam?= Date: Sun, 25 Oct 2026 19:26:56 +0100 Subject: [PATCH] The Readme on components and canvases MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🤖 Generated with [ECA](https://eca.dev) (anthropic/claude-opus-4-8) Co-Authored-By: eca-agent --- Readme.org | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/Readme.org b/Readme.org index 0c2540c..3be094b 100644 --- a/Readme.org +++ b/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.