From b5f30c4b5c57346763a115a645f6f1798dc5d7db Mon Sep 17 00:00:00 2001
From: Renaud de Villemeur <renaud.devillemeur@tuta.io>
Date: Mon, 13 May 2024 09:34:34 -0400
Subject: [PATCH] - add example of drawing with Bloc AeCanvas

---
 Chapters/bloc/element.md          | 41 +++++++++++++++++++++++++++++++
 Chapters/toplo/widget_creation.md | 18 ++++++++++++++
 2 files changed, 59 insertions(+)

diff --git a/Chapters/bloc/element.md b/Chapters/bloc/element.md
index 86b85f7..1e51e8c 100644
--- a/Chapters/bloc/element.md
+++ b/Chapters/bloc/element.md
@@ -396,6 +396,47 @@ Drawing is done through method 'xxx', which receives an Alexandrie
 2. `aeDrawOn:`
 3. `aeDrawGeometryOn:`
 
+Drawing example -  draw hour tick around a circle 
+```
+aeDrawOn: aeCanvas
+	"draw clock tick on frame"
+
+	super aeDrawOn: aeCanvas.
+
+	aeCanvas setOutskirtsCentered.
+
+	0 to: 11 do: [ :items |
+		| target |
+		target := (items * Float pi / 6) cos @ (items * Float pi / 6) sin.
+
+		items % 3 == 0
+			ifTrue: [
+				aeCanvas pathFactory: [ :cairoContext |
+					cairoContext
+						moveTo: center;
+						relativeMoveTo: target * 115;
+						relativeLineTo: target * 35;
+						closePath ].
+
+				aeCanvas setBorderBlock: [
+					aeCanvas
+						setSourceColor: Color black;
+						setBorderWidth: 8 ] ]
+			ifFalse: [
+				aeCanvas pathFactory: [ :cairoContext |
+					cairoContext
+						moveTo: center;
+						relativeMoveTo: target * 125;
+						relativeLineTo: target * 25;
+						closePath ].
+
+				aeCanvas setBorderBlock: [
+					aeCanvas
+						setSourceColor: Color black;
+						setBorderWidth: 6 ] ].
+		aeCanvas drawFigure ]
+```
+
 ### Conclusion
 
 `BlElement` is defining a large spectrum of element functionalities. 
diff --git a/Chapters/toplo/widget_creation.md b/Chapters/toplo/widget_creation.md
index 4ef76df..fde9ec7 100644
--- a/Chapters/toplo/widget_creation.md
+++ b/Chapters/toplo/widget_creation.md
@@ -180,9 +180,27 @@ space toTheme: (name of your theme) new.
 
 
 
+## Notes in bulk
+Your element needs to be a Toplo Element. 
 
+* If e minutesNeedle return a BlElement, and not a ToElement, then you need to send it #ensureCanManageSkin `e ensureCanManageSkin.`
 
+*  One can send #withNullSkin to an element to set a NullSkin.
 
+* stylesheet can be useful because of the selection mechanism that allow the skin selection/building in one pass.
+* 
+I’ve no particular solution for this kind of issue.
 
+An example of this kind of sub-element skin is the ToLabelInListElementSkin that can be used when a node is selected in a ListElement.
+It is typically set from a ToListElement nodeBuilder (not in a #installLookEvent:  in my examples).
+
+
+A theme is to manage common token values for the set of widgets it is supposed to be designed for. So I’ve added the ToThemePreInstallEvent that you can use ton add new token values in the current theme.
+(Have a look at #example_WithLateBoundPropertyWriter).
+But the implementation of token values storage have to be revised to nicely fulfill this need.
+
+First if you only need a ToInstallLookEvent handling, note that adding a skin class is not mandatory. You can simply redefine the #installRawStyle method instead.
+
+In your #installLookEvent:, I see a lot of code that, I think, should stay in the initialize method because changing the theme Would not lead to the change of your element appearance.