From c8b2d9e8ddb241f25e0efb50f35818fe501fb777 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phaneDucasse?= <stephane.ducasse@inria.fr>
Date: Tue, 11 Jun 2024 23:03:10 +0200
Subject: [PATCH 1/9] session with alain

---
 Chapters/toplo/skinningAWidget.md | 113 ++++++++++++++++++++++++------
 1 file changed, 91 insertions(+), 22 deletions(-)

diff --git a/Chapters/toplo/skinningAWidget.md b/Chapters/toplo/skinningAWidget.md
index 35bc31b..d32faaf 100644
--- a/Chapters/toplo/skinningAWidget.md
+++ b/Chapters/toplo/skinningAWidget.md
@@ -1,5 +1,6 @@
 ## Skinning a simple widget
 
+
 In this chapter we will show how we can take the simple input widget developed in a previous chapter and make it skinnable. 
 Remember that we want to create a widget as shown in Figure *@inputFinalSkin@*.
 
@@ -14,7 +15,10 @@ The definition of the `BlNumberInputElement` is available SD:DefineAPlace.
 The first thing that we should do is to make `ToNumberInputElement` inherit from `ToElement` as follows:
 
 ```
-ToElement << #ToNumberInputElement
	slots: { #plus . #minus . #inputValue . #value . #inputLabel };
	tag: 'Input';
	package: 'myBecherBloc'
+ToElement << #ToNumberInputElement
+	slots: { #plus . #minus . #inputValue . #value . #inputLabel };
+	tag: 'Input';
+	package: 'myBecherBloc'
 ```
 
 ### Define a skin
@@ -22,72 +26,137 @@ ToElement << #ToNumberInputElement
	slots: { #plus . #minus . #inputValue . #val
 We define a skin 
 
 ```
-ToRawSkin << #ToInputElementSkin
	package: 'myBecherBloc'```
+ToRawSkin << #ToInputElementSkin
+	package: 'myBecherBloc'```
 
 ```
 
 We will now define action that should be done when the skin is installed. 
 
 ```
-ToInputElementSkin >> installLookEvent: anEvent
	"when installing the skin, changes the properties of widget mentionned down here"

	super installLookEvent: anEvent.
	anEvent elementDo: [ :e |
		e border: (BlBorder
				 paint: (e valueOfTokenNamed: #'color-border')
				 width: (e valueOfTokenNamed: #'line-width')).
		e background: e backgroundPaint ]
+ToInputElementSkin >> installLookEvent: anEvent
+	"when installing the skin, changes the properties of widget mentionned down here"
+
+	super installLookEvent: anEvent.
+	anEvent elementDo: [ :e |
+		e border: (BlBorder
+				 paint: (e valueOfTokenNamed: #'color-border')
+				 width: (e valueOfTokenNamed: #'line-width')).
+		e background: e backgroundPaint.
+		e plus background: Color blue.
+		e minus background: Color red ]
 ```
 
+In the `ToNumberInputElement` we define the method 
+
+
+
+
 ```
+ToNumberInputElement >> newRawSkin
+	"Allow to create an instance of the widget skin"
 
-ToInputElementSkin >> pressedLookEvent: anEvent
	"Change the color of the widget when clicking on it"

	super pressedLookEvent: anEvent.
	anEvent elementDo: [ :e |
		e plus background: Color blue.
		e minus background: Color red ]
+	^ ToInputElementSkin new
 ```
 
 
-SD: Je n'ai pas compris comment on passe du skin au theme. 
-Ou sont definis les token color-border et autre. 
+Update the following instance method.
 
-In the `ToNumberInputElement` we define the method 
+```
+ToNumberInputElement >> initialize
 
+	super initialize.
+	self size: self inputExtent.
+	self background: self backgroundPaint.
+	self geometry: (BlRoundedRectangleGeometry cornerRadius: 20).
+	self layout: BlFrameLayout new.
+	self border: (BlBorder paint: Color pink).
+	self initializePlusButton.
+	self initializeMinusButton.
+	self initializeInputValue: 20.
+	self label: 'Input'.
+```
+
+### Decorating a BlElement to get a ToElement
 
 ```
-newRawSkin
	"Allow to create an instance of the widget skin"

	^ ToInputElementSkin new
+BlNumberInputElement << #ToNumberInputElement
	traits: {TToElement}
+
 ```
 
-SD: comment on sait ou est defini #'color-border'
+```
+ToNumberInputElement >> initialize
+	super initialize. 
+	self initializeForToplo
+```
 
-SD:Alain est ce que cela fait du sens d'invoker  `defaultSkin:` dans l'initialize?
 
+??? we should check if the following is necessary
 ```
-ToNumberInputElement >> initialize

	super initialize.
	self size: self inputExtent.
	self background: self backgroundPaint.
	self geometry: (BlRoundedRectangleGeometry cornerRadius: 20).
	self layout: BlFrameLayout new.
	self border: (BlBorder paint: Color pink).
	self initializePlusButton.
	self initializeMinusButton.
	self initializeInputValue: 20.
	self label: 'Input'.
	self defaultSkin: self newRawSkin
+ToNumberInputElement >> onAddedToSceneGraph
+
+    super onAddedToSceneGraph.
+    self ensuredSkinManager requestInstallSkinIn: self.
+    self addEventHandler: ToSkinStateGenerator new
 ```
 
 
-Alexis le faisait ailleurs mais je trouvais cela un peu moche:
 
 
-```
-ToNumberInputElement >> openInput: anInput
	"sets configuration to display the input element in a space"

	| space |
	space := BlSpace new.
	self defaultSkin: self newRawSkin.
	space root layout: BlFlowLayout horizontal.
	anInput transformDo: [ :c | c translateBy: 250 @ 200 ].
	space root addChild: anInput.
	space toTheme: MfInputElementTheme new.
	space applyAllSkinInstallers.
	space show.
	^ anInput
-```
 
 
-### Define a theme
+
+
+
+### Define a theme that extends an existing one
 
 we also define a theme
 
 ```
-ToRawTheme << #ToInputElementTheme
	package: 'Mooflod'
+ToRawTheme << #ToInputElementTheme
+	package: 'Mooflod'
 ```
 
 
 ```
-ToInputElementTheme class >> defaultTokenProperties
	"define here token properties of the widget theme"

	^ super defaultTokenProperties
	  ,
	  { (ToTokenProperty
		   name: #'background-color'
		   value: Color lightGreen) }
+ToInputElementTheme class >> defaultTokenProperties
+	"define here token properties of the widget theme"
+
+	^ super defaultTokenProperties ,
+	  { (ToTokenProperty
+		   name: #'background-color'
+		   value: Color lightGreen) }
 ```
 
 
 ```
-ToNumberInputElement class >> openInputWithSkin

	<script>
	| space anInput |
	anInput := self new.
	space := BlSpace new.
	space root
		background: Color purple;
		layout: BlFlowLayout horizontal.
	anInput transformDo: [ :c | c translateBy: 200 @ 200 ].
	space root addChild: anInput.
	space toTheme: ToInputElementTheme new.
	space applyAllSkinInstallers.
	space show.
	^ anInput
+ToNumberInputElement class >> openInputWithSkin

	<script>
	| space anInput |
	space := BlSpace new.
	space toTheme: ToInputElementTheme new.
	anInput := self new position: 200 @ 200.
	space root addChild: anInput.
	space show.
	^ anInput
+```
+
+
+### Autonome theme
+
+```
+ToTheme << #ToMooflooTheme
	slots: {};
	tag: 'Input';
	package: 'myBecherBloc'
+```
+
+```
+ToMooflooThemenewSkinInstanceFor: anElement

	^ anElement newMooflooSkin
 ```
 
-Why the following does not use the install skin and it does not work. 
+```
+ToNumberInputElement class >> openInputWithSkin

	<script>
	| space anInput |
	space := BlSpace new.
	space toTheme: ToMooflooTheme new.
	anInput := self new position: 200 @ 200.
	space root addChild: anInput.
	space show.
	^ anInput
+```
 
-the following does call default skin but the button do not get color changed :(
+```
+BlElement >> newMooflooSkin

	^ ToBasicMooflooSkin new
+```
 
 ```
-openInputWithSkin

	<script>
	| space anInput |
	anInput := self new.
	anInput defaultSkin: anInput newRawSkin.
	space := BlSpace new.
	space root
		background: Color purple;
		layout: BlFlowLayout horizontal.
	anInput transformDo: [ :c | c translateBy: 200 @ 200 ].
	space root addChild: anInput.
	space toTheme: ToInputElementTheme new.
	space applyAllSkinInstallers.

	space show.
	^ anInput
+ToNumberInputElement >> newMooflooSkin

	^ ToInputElementSkin new
 ```
 
+
+### Using a stylesheet
+
+

From c879e8c2e107e0b036468cdbbfef5059366b5d87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phaneDucasse?= <stephane.ducasse@inria.fr>
Date: Wed, 12 Jun 2024 13:44:01 +0200
Subject: [PATCH 2/9] more details

---
 Chapters/toplo/skinningAWidget.md | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/Chapters/toplo/skinningAWidget.md b/Chapters/toplo/skinningAWidget.md
index d32faaf..4afad90 100644
--- a/Chapters/toplo/skinningAWidget.md
+++ b/Chapters/toplo/skinningAWidget.md
@@ -1,12 +1,18 @@
 ## Skinning a simple widget
 
+In this chapter we show how we can take the simple input widget developed in a previous chapter and make it skinnable. 
+
+In a first period, we will focus on what is called raw skins. The idea behind raw skins are that we define classes with states and methods to define the behavior of a skin in a given theme. At the end of this chapter we will see that we can also skin widgets
+using stylesheets following the spirit of CSS. 
+ 
+The outline of this chapter is then: first we show that we can extend a theme and define a skin. 
+Then in a second time we show that we can define an autonomous theme. 
+Finally we will show that we can use stylesheet
 
-In this chapter we will show how we can take the simple input widget developed in a previous chapter and make it skinnable. 
 Remember that we want to create a widget as shown in Figure *@inputFinalSkin@*.
 
 ![An integer input widget. % anchor=inputFinalSkin&width=50](figures/input.png )
 
-
 ### Getting started
 
 If you implemented the widget as presented earlier, just copy the class giving it a new name for example `ToNumberInputElement`.
@@ -50,6 +56,15 @@ ToInputElementSkin >> installLookEvent: anEvent
 In the `ToNumberInputElement` we define the method 
 
 
+Notice that two following forms are equivalent: 
+
+```
+anEvent elementDo: [ :e | 
+		e border: (e valueOfTokenNamed: #'color-border-checkable’).
+
+target := anEvent currentTarget.
+target border: target valueOfTokenNamed: #'color-border-checkable’)
+```
 
 
 ```
@@ -68,7 +83,6 @@ ToNumberInputElement >> initialize
 	super initialize.
 	self size: self inputExtent.
 	self background: self backgroundPaint.
-	self geometry: (BlRoundedRectangleGeometry cornerRadius: 20).
 	self layout: BlFrameLayout new.
 	self border: (BlBorder paint: Color pink).
 	self initializePlusButton.

From 36076b0e3121c03d5bafa902767c6991d186fa79 Mon Sep 17 00:00:00 2001
From: Enzo-Demeulenaere <121249182+Enzo-Demeulenaere@users.noreply.github.com>
Date: Thu, 13 Jun 2024 14:59:49 +0200
Subject: [PATCH 3/9] added snippets doc

interesting snippet that could be added to Bloc booklet
---
 Chapters/bloc/SnippetsDoc.md | 650 +++++++++++++++++++++++++++++++++++
 1 file changed, 650 insertions(+)
 create mode 100644 Chapters/bloc/SnippetsDoc.md

diff --git a/Chapters/bloc/SnippetsDoc.md b/Chapters/bloc/SnippetsDoc.md
new file mode 100644
index 0000000..78bb1a8
--- /dev/null
+++ b/Chapters/bloc/SnippetsDoc.md
@@ -0,0 +1,650 @@
+# Interesting snippets of Bloc 
+
+This document aims to share small interesting snippets that highlight some particularities of Bloc
+
+## Star shape using Bloc Geometry
+
+Here, we can make a star with N branches using this code
+outerSize is for the length of the branches, innerSize for the width of the branches bases
+We could maybe use this implementation to define a new star geometry that could be configured with those 3 parameters
+
+```smalltalk
+outerSize := 100.
+innerSize := 40.
+numberOfPoints := N.
+angleStep := 360.0 / numberOfPoints.
+
+vertices := OrderedCollection new.
+0 to: 360 by: angleStep do: [ :angle |
+    vertices
+        add: (0@innerSize rotateBy: (angle - (angleStep * 0.5)) degreesToRadians about: 0 asPoint);
+        add: (0@outerSize rotateBy: angle degreesToRadians about: 0 asPoint);
+        add: (0@innerSize rotateBy: (angle + (angleStep * 0.5)) degreesToRadians about: 0 asPoint) ].
+
+starElement := BlElement new
+        geometry: (BlPolygonGeometry vertices: vertices);
+        background: Color black;
+        position: 200 @ 150;
+        yourself.
+
+space := BlSpace new.
+space root addChild: starElement.
+space show.
+```
+
+## Explosion animation 
+
+We create an explosion animation by creating some BlElements and making them translate along a rotating line starting from a center point
+
+Here we also add a rotation on the BlElements themselves with random color
+
+```smalltalk
+space := BlSpace new.
+explosionCenter := 400 @ 300.
+
+0 to: 359 by: 12 do: [ :angle |
+    | anElement relativeFinalPosition |
+    relativeFinalPosition := 0@400 rotateBy: angle degreesToRadians about: 0@0.
+
+    anElement := BlElement new
+        background: Color random;
+        position: explosionCenter;
+        addAnimation: (BlTransformAnimation new
+            duration: 1200 milliSeconds;
+            transformDo: [ :t |
+                t translateBy: relativeFinalPosition.
+                t rotateBy: 180 ];
+            onFinishedDo: [ anElement removeFromParent ];
+          yourself);
+        yourself.
+
+    space root addChild: anElement ].
+space show.
+
+```
+
+## Square Layout 
+
+This example shows how the squareLayout works when applied to an element, in fact here we give constraints to match parent horizontally and vertically but the squareLayout forces our element to be of square shape meaning that this will draw the biggest square in the available space?
+
+```smalltalk
+anElement := 
+        BlElement new
+                background: Color blue;
+                geometry: (BlRoundedRectangleGeometry cornerRadius: 25);
+                margin: (BlInsets all: 5);
+                constraintsDo: [ :c |
+                        c horizontal matchParent.
+                        c vertical matchParent ];
+                yourself.
+
+squarifierElement :=
+        BlElement new
+                layout: ((BlSquaredLayout on: BlLinearLayout vertical alignCenter) beTight; yourself);
+                addChild: anElement;
+                constraintsDo: [ :c |
+                        c horizontal matchParent.
+                        c vertical matchParent ];
+                yourself.
+        
+space := BlSpace new.
+space root addChild: squarifierElement.
+space
+        extent: 200 @ 250;
+        show
+```
+Something interesting I found using a SquareLayout: If you use a gridLayout and want its elements contained to matchParent and stay as square while resizing the gridLayout, you can encapsulate the gridLayout into a squareLayout so the contained elements will matchParent with a square shape
+
+
+## Space extent following its child extent 
+
+```smalltalk
+space := BlSpace new.
+space show.
+
+rootUniqueChild := BlElement new
+	geometry: BlEllipseGeometry new;
+	background: Color blue;
+	"Transfer the new extent to the space"
+	addEventHandlerOn: BlElementExtentChangedEvent
+		do: [ :evt | space extent: evt target extent ]; 
+	yourself.
+space addChild: rootUniqueChild.
+
+"Gradually expand element in a background process"
+[ 	50 to: 400 by: 50 do: [ :sideLength |
+		rootUniqueChild size: (sideLength*2) @ sideLength.
+		500 milliSeconds wait ].
+	space close ] fork
+```
+
+Here, space extent is redefined whenever the extent of its child changes using a basic eventHandler
+
+## Dynamically change fontSize of a TextElement
+
+For now in Bloc, we can't change the fontSize of a text after its first definition. 
+To change it dynamically we'll have to create a new text which is a copy of the former text and define the new fontSize
+
+Don't forget to remove the former textElement from children of your element and replace it with the new textElement
+
+```smalltalk
+textElement := BlTextElement new.
+textElement text fontName: 'Source Sans Pro'.
+textElement text fontSize: 50.
+textElement text: 'A' asRopedText .
+
+container := BlElement new.
+container geometry: (BlRoundedRectangleGeometry cornerRadius: 50);
+	background: Color lightBlue;
+	constraintsDo: [ :c |
+		c horizontal matchParent.
+		c vertical matchParent  ].
+
+container addEventHandlerOn: BlElementExtentChangedEvent do: [ :evt | | newText fontSize| 
+	fontSize:= evt currentTarget size x // 2.
+	newText := BlTextElement new.
+	newText text: textElement text.
+	newText text fontSize: fontSize.
+	container removeChildNamed: 'text';
+	    addChild: newText as: 'text' ].
+
+container addChild: textElement as: 'text'.
+
+container openInNewSpace 
+```
+
+**Improvement**
+
+The former paragraph was notes written at a time we didn't know about this improvement.
+
+Apparently it seems, we can change the fontSize dynamically BUT it's the UI of the text that won't change... unless we tell it to !
+
+So we can basically just use announcements that are already implemented in Bloc and those will call `BlTextElement>>textChanged` that will change the UI.
+Here's the same example with this improved implementation: 
+
+```smalltalk
+textElement := BlTextElement new.
+textElement text fontName: 'Source Sans Pro'.
+textElement text fontSize: 50.
+textElement text: 'A' asRopedText .
+textElement text
+    when: BlTextStringsInserted send: #textChanged to: textElement;
+    when: BlTextsDeleted send: #textChanged to: textElement;
+    when: BlTextAttributeAdded send: #textChanged to: textElement;
+    when: BlTextAttributesRemoved send: #textChanged to: textElement.
+
+container := BlElement new.
+container geometry: (BlRoundedRectangleGeometry cornerRadius: 50);
+	background: Color lightBlue;
+	constraintsDo: [ :c |
+		c horizontal matchParent.
+		c vertical matchParent  ].
+
+container addEventHandlerOn: BlElementExtentChangedEvent do: [ | fontSize| 
+	fontSize:= (container extent x min: container extent y) // 2.
+	textElement text fontSize: fontSize.
+	].
+
+container addChild: textElement as: 'text'.
+
+container openInNewSpace
+```
+
+## Center a space
+
+```smalltalk
+space := BlSpace new.
+space root background: Color lightGreen.
+
+space enqueueTask:
+   (BlTaskAction new
+      action: [ space center ];
+      yourself).
+
+space show
+```
+
+Spaces are by default opened with their origin on the top left or the screen, but we can change this by sending the message `BlSpace>>center`.
+However you might wonder why in this example we send it as a task that we enqueue, the reason behind it is that (apparently) the space needs to be rendered to be centered and executing something like the following snippet doesn't work
+
+```st
+space show; center
+```
+
+## RequestFocus for KeyboardEvent
+
+To deal with keyboard events, we need to specify our element to request the focus
+
+```smalltalk
+
+elt := BlElement new background: Color purple;
+    addEventHandlerOn: BlKeyboardEvent  do: [ :anEvent | anEvent inspect ];
+    constraintsDo: [ :c | c horizontal matchParent. c vertical matchParent ];
+requestFocus.
+    
+elt openInSpace
+```
+
+You can see with this example that the background of the element might change twice quickly, it's simply explained by the fact there is an event sent when a key is pressed and another when it is released so there's two events sent when quickly pressing a key.
+
+## Reset a transformation
+
+When applying a transformation to an object, its position doesn't change even if we translate it so the element might be displayed elsewhere than where it 'actually is', we can reset its transformation with this message `transformation: BlElementIdentityTransformation uniqueInstance` just like in this snippet:
+
+```smalltalk
+space := BlSpace new.
+elt := BlElement new background: Color purple.
+
+space root addChild: elt.
+space show.
+
+animation := (BlTransformAnimation translate: 250@250) duration: 2 seconds. 
+elt addAnimation: (animation onFinishedDo: [ elt transformation: BlElementIdentityTransformation uniqueInstance ])
+```
+
+### To go further with animations
+
+The most common animations are translations and rotations but as explained above, whenever we translate or rotate an object, its position doesn't change even if it does visually.
+
+But this doesn't mean that nothing changes, in fact the origin of the "transform axis" moves with the transformation, meaning that if we apply a horizontal translation to an element that was previously rotated for example 90 degrees, then the element will visually translate vertically like in this example.
+
+```st
+elt := BlElement new background: Color purple.
+
+t1 := (BlTransformAnimation translate: 150@0) duration: 2 seconds. 
+t2 := (BlTransformAnimation translate: 150@0) duration: 2 seconds.
+rotateAnimation := (BlTransformAnimation rotate: 90) duration: 2 seconds.
+
+elt addAnimation: (t1 onFinishedDo: [ elt addAnimation: (rotateAnimation onFinishedDo: [ elt addAnimation: (t2 onFinishedDo: [ elt position inspect ]) ]) ]).
+
+elt openInSpace.
+```
+
+And you will see that the position of the element hasn't changed and still is 0@0, but you can ask for `BlElement>>transformedBounds` to have the bounds of your element after its transformations if you need to exploit this visual position.
+
+## Scale an image according to its parent extent 
+
+This snippet shows how to deal with extent constraints when having a form as a background, here only in the case of matching parent both horizontally and vertically but this could be interesting to see when applying only one direction
+
+```smalltalk
+aForm := Smalltalk ui icons iconNamed: #pharoBig.
+image := BlElement new
+    background: aForm;
+    size: aForm extent;
+    yourself.
+imageWrapper := BlElement new
+    addChild: image;
+    layout: BlLinearLayout horizontal;
+    border: (BlBorder paint: Color green width: 3);
+    constraintsDo: [ :c |
+        c horizontal matchParent.
+        c vertical matchParent ];
+    addEventHandlerOn: BlElementExtentChangedEvent do: [ :evt |
+        "Scale the wrapped element to "
+        image transformDo: [ :builder |
+            builder
+                topLeftOrigin;
+                scaleBy: evt target extent / aForm extent ] ];
+    yourself.
+
+imageWrapper openInSpace
+```
+
+"What could be interesting is look if we can apply this transformation directly to the background instead of adding a child with the image."
+
+When trying the idea above we manage to do it using `Form>>scaledIntoFormOfSize:` but we can observe the form kept its aspect ratio, not giving the exact result as the previous snippet.
+
+```st
+aForm := Smalltalk ui icons iconNamed: #pharoBig.
+
+imageWrapper := BlElement new
+    background: aForm;
+    layout: BlLinearLayout horizontal;
+    border: (BlBorder paint: Color green width: 3);
+    constraintsDo: [ :c |
+        c horizontal matchParent.
+        c vertical matchParent ];
+    addEventHandlerOn: BlElementExtentChangedEvent do: [ :evt |
+        imageWrapper background: (aForm scaledIntoFormOfSize: evt currentTarget extent) ];
+    yourself.
+
+imageWrapper openInSpace
+```
+
+## Enqueue tasks 
+
+```smalltalk
+a := BlElement new
+    position: 50 @ 100;
+    size: 100 asPoint;
+    background: Color green;
+    yourself.
+
+a addAnimation: 
+    (BlNumberTransition new
+        from: 0;
+        to: Float twoPi;
+        duration: 5 seconds;
+        onStepDo: [ :t |
+            | offset |
+            offset := (t cos * 50) @ (t sin * 50).
+            a effect:
+                (BlSimpleShadowEffect
+                    color: Color blue
+                    offset: offset) ];
+        onFinishedDo: [
+                | removeAction |
+                removeAction :=
+                    BlDelayedTaskAction new
+                        delay: 2 seconds;
+                        action: [ a removeFromParent ];
+                        yourself.
+                a enqueueTask: removeAction ];
+        yourself).
+
+a openInSpace
+```
+
+This snippet is an example of how to enqueue tasks and delay the time of the next instruction. This is also an example of a circular animation using an offset on a shadow effect
+
+## Root Element is special
+
+```smalltalk
+a := BlElement new.
+aSpace := BlSpace new.
+aSpace root addChild: a.
+aSpace root background: Color transparent.
+aSpace extent: 200 asPoint; show.
+	
+wheel := Color wheel: 20.
+[ 	wheel do: [ :eachColor |
+		0.25 seconds wait.
+		a position: (a position + 5 asPoint).
+		a background: eachColor ] ] fork
+```
+
+When you set Color transparent as root's background, nothing clears the space
+
+```smalltalk
+a := BlElement new.
+aSpace := BlSpace new.
+aSpace root addChild: a.
+aSpace root background: Color blue.
+aSpace root size: 100 asPoint.
+aSpace extent: 150 asPoint; show.
+	
+wheel := Color wheel: 20.
+[ 	wheel do: [ :eachColor |
+		0.25 seconds wait.
+		a position: (a position + 5 asPoint).
+		a background: eachColor ] ] fork.
+```
+
+"When you set an exact root size, only a portion of the space might be cleared between frames"
+
+[Enzo] I keep this note here but I don't see any changes personally
+
+
+## [TOPLO] Placing buttons inside a Notebook page 
+
+
+
+```smalltalk
+|book page|
+
+book := ToNotebook new background: Color lightGreen.
+
+page := book addPageTitle: 'page 1' bodyFactory: [ 
+	|container|
+	container := BlElement new layout: (BlGridLayout horizontal columnCount: 5; cellSpacing: 10).
+	
+	1 to: 10 do: [ :i |
+		|stream|
+		stream := String streamContents: [ :out | out nextPutAll: 'Button '; print: i ].
+		container addChild: (ToButton new labelText: stream; constraintsDo: [ :c | c horizontal matchParent. c vertical matchParent ])
+		 ].
+	container ].
+
+book openInSpace
+```
+To make our buttons take the whole space, we have to apply the matchParent constraint to each button and not to the container layout
+
+## [TOPLO] Cool color gradient displayed in notebook
+
+```smalltalk
+notebook := ToNotebook new.
+
+500 to: 3000 by: 500 do: [ :numberOfElements |
+    | container grid scrollableGrid vscrollBar |
+    container := BlElement new
+        constraintsDo:[ :c | 
+          c horizontal matchParent. 
+          c vertical matchParent ];
+        yourself.    
+
+    grid := BlElement new 
+      layout: 
+        (BlGridLayout horizontal 
+          columnCount: 10; 
+          cellSpacing: 10); 
+      constraintsDo: [ :c | 
+        c horizontal fitContent. 
+        c vertical fitContent ]; 
+      yourself .
+
+    (Color wheel: numberOfElements) do: [ :eachColor | 
+      grid addChild: (BlElement new background: eachColor; yourself) ].
+    scrollableGrid := grid asScrollableElement.
+    vscrollBar := BlVerticalScrollbarElement new.
+    vscrollBar constraintsDo: [ :c |
+            c ignoreByLayout.
+            c padding: (BlInsets right: 2).
+            c ignored horizontal alignRight.
+            c ignored vertical alignBottom ].
+    vscrollBar attachTo: scrollableGrid .
+    container addChildren: { scrollableGrid. vscrollBar }. 
+
+    notebook addPageTitle: numberOfElements asString, ' elements' body: container ].
+
+    
+space := BlSpace new.
+space root addChild: notebook.
+space show
+```
+
+## Rotate a textElement in a parent
+
+```smalltalk
+label := BlTextElement text: ('HelloHiHolaBonjour' asRopedText fontSize: 40; yourself).
+
+handle := BlElement new.
+handle addChild: label.
+handle background: Color orange.
+handle padding: (BlInsets all: 10).
+handle geometry: (BlRoundedRectangleGeometry cornerRadii:
+			(BlCornerRadii new
+				topLeft: 0;
+				topRight: 15;
+				bottomLeft: 0;
+				bottomRight: 15;
+				yourself)).
+handle layout: BlLinearLayout horizontal.
+handle constraintsDo: [ :c |
+	c frame vertical alignCenter.
+	c vertical fitContent.
+	c horizontal fitContent ].
+
+space := handle openInNewSpace.
+space root layout: BlFrameLayout new.
+
+label forceLayout.
+textSize := label size.
+
+label transformDo: [ :t |
+	t translateBy: 0 @ textSize y negated.
+	t topLeftOrigin.
+	t rotateBy: 90 ].
+
+label size: label transformedBounds extent.
+```
+
+In this snippet we rotate the element containing the text (but not the textElement) using `TBlTransformable>>tranformDo:` but for that we need to force its layout and just like in the earlier example, the transformation didn't change the position nor the bounds hence the last line.
+
+## Using a PullHandler to stay in bounds 
+
+When dealing with drag and drop events you can use a PullHandler that does the work, you can even select the behavior to keep the child inside its parent's bounds with `BlPullHandler>>disallowOutOfBounds`
+
+```smalltalk
+hero := BlElement new
+    geometry: BlCircleGeometry new;
+    background: Color purple; 
+    addEventHandler: (BlPullHandler new disallowOutOfBounds; yourself);
+    yourself.
+
+hero openInSpace.
+```
+
+## transform a Form into ByteString and vice versa
+
+Starting from a ByteString (self), we can have a Form using this code:
+
+```st
+Form fromBinaryStream:
+			  self base64Decoded asByteArray readStream
+```
+
+and starting from a Form, we can translate it into a ByteString using this code: 
+
+```st
+byteString := (ByteArray streamContents: [ :out |
+	PNGReadWriter putForm: form onStream: out ]) base64Encoded.
+```
+
+It seems that doing the translation ByteString -> Form -> ByteString doesn't give the same ByteString between input/output but Form -> ByteString -> Form seems to work correctly (except maybe small changes invisible to the human eye).
+
+Also here we use `PNGReadWriter` but other subclasses of `ImageReadWriter` can be used depending on the format you want to save
+
+try this:
+
+```st
+String streamContents: [:s | self storeOn: s]
+```
+
+```st
+OpalCompiler new
+	source: self;
+	evaluate 
+```
+```st
+Object readFrom: byteString
+```
+
+## need to define outskirts to have round cap/join border 
+
+```st
+elt := BlElement new background: Color lightGray; size: 100 asPoint; position: 50 asPoint.
+	
+elt geometry: BlTriangleGeometry new.
+	
+elt border: (BlBorder builder paint: Color black; width: 10; capRound; joinRound ; build).
+
+elt outskirts: BlOutskirts centered.
+
+elt openInSpace
+```
+
+In this example the border does not have cap/join round if the `outskirts:` message is commented.
+
+[Enzo] I don't know the meaning of the outskirts but it is weird sending `capRound`, `joinRound` to the border is not enough
+
+## Example of curved arrow 
+
+This arrow is created using an annulus sector and a polyline geometry. This polyline geometry is used (instead of a polygon geometry) to give the impression of a single element when applying a border.
+
+This polyline geometry displays the background of the element in between the lines but when adding a click event handler, only clicking the lines work as if the element is "empty".
+
+For this examples, the polyline geometry is placed and rotated manually which isn't really pretty for the code but we get the result expected.
+
+Note that you can flip the arrow by applying `flipX` and `flipY` to the container transform.
+
+```st
+	| annulus arrow border container |
+	border := BlBorder paint: Color lightGray width: 2.
+	annulus := BlElement new
+		           background: Color lightGreen;
+		           size: 100 asPoint;
+		           geometry: (BlAnnulusSectorGeometry new
+				            startAngle: 45;
+				            endAngle: 135;
+				            innerRadius: 0.6;
+				            outerRadius: 0.95);
+		           border: border.
+
+	arrow := BlElement new
+		         background: Color lightGreen;
+		         geometry: (BlPolylineGeometry vertices: {
+						          (12 @ 20).
+						          (0 @ 20).
+						          (20 @ 0).
+						          (40 @ 20).
+						          (28 @ 20) });
+		         border: border.
+
+	arrow position: 50 @ 62.
+	arrow transformDo: [ :t | t rotateBy: 45 ].
+
+
+	container := BlElement new size: 100 asPoint.
+
+	container addChild: annulus.
+	container addChild: arrow.
+
+	container childrenDo: [ :each |
+		each addEventHandlerOn: BlClickEvent do: [ each inspect ] ].
+
+	container openInSpace.
+	^ container
+```
+
+## Show trajectories of corner with rotation animation 
+
+This snippet was written to prove the rotation animation didn't have the right feeling, by showing the trajectories of each corner of a totating square. By default, people expect each corner to draw a circle when the square is fully rotated but here we can see it is not the case.
+
+This might be an issue with the calcutation of the transform matrix when the rotation is applied
+
+```smalltalk
+container := BlElement new background: Color veryVeryLightGray; size: 500 asPoint.
+
+parent := BlElement new background: Color veryLightGray; size: 100 asPoint; position: 200 asPoint.
+
+elt1 := BlElement new background: Color red; size: 1 asPoint.
+elt2 := BlElement new background: Color blue; size: 1 asPoint; position: 99 @ 0.
+elt3 := BlElement new background: Color green; size: 1 asPoint; position: 0 @ 99.
+elt4 := BlElement new background: Color yellow; size: 1 asPoint; position: 99 @ 99.
+
+parent addChildren: { elt1. elt2. elt3. elt4 }.
+
+container addChild: parent.
+
+elt1Trajectory := OrderedCollection new add: 200 @ 200; yourself.
+elt2Trajectory := OrderedCollection new add: 299 @ 200; yourself.
+elt3Trajectory := OrderedCollection new add: 200 @ 299; yourself.
+elt4Trajectory := OrderedCollection new add: 299 @ 299; yourself.
+
+anim := (BlTransformAnimation rotate: 90) duration: 2 seconds.
+anim addEventHandlerOn: BlAnimationStepEvent do: [ elt1Trajectory add: elt1 positionInSpace. 
+	elt2Trajectory add: elt2 positionInSpace.
+	elt3Trajectory add: elt3 positionInSpace.
+	elt4Trajectory add: elt4 positionInSpace.].
+
+parent addEventHandlerOn: BlClickEvent do: [ parent addAnimation: anim copy. ].
+
+container openInSpace.
+
+elt1TrajectoryElt := BlElement new background: Color transparent; geometry: (BlPolylineGeometry vertices: elt1Trajectory); border: (BlBorder paint: Color red width: 5) .
+elt2TrajectoryElt := BlElement new background: Color transparent; geometry: (BlPolylineGeometry vertices: elt2Trajectory); border: (BlBorder paint: Color blue width: 5).
+elt3TrajectoryElt := BlElement new background: Color transparent; geometry: (BlPolylineGeometry vertices: elt3Trajectory); border: (BlBorder paint: Color green width: 5).
+elt4TrajectoryElt := BlElement new background: Color transparent; geometry: (BlPolylineGeometry vertices: elt4Trajectory); border: (BlBorder paint: Color yellow width: 5).
+
+container addChildren: { elt1TrajectoryElt. elt2TrajectoryElt.elt3TrajectoryElt.elt4TrajectoryElt.}.
+```
\ No newline at end of file

From 900de219290eca0e9d7bd1ff16de3878bdf54b19 Mon Sep 17 00:00:00 2001
From: Enzo-Demeulenaere <121249182+Enzo-Demeulenaere@users.noreply.github.com>
Date: Thu, 13 Jun 2024 15:00:30 +0200
Subject: [PATCH 4/9] Update index.md

---
 index.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/index.md b/index.md
index 28fc90b..7e3a442 100644
--- a/index.md
+++ b/index.md
@@ -10,6 +10,7 @@
 <!inputFile|path=Chapters/bloc/text.md!>
 <!inputFile|path=Chapters/bloc/animation.md!>
 <!inputFile|path=Chapters/bloc/complexElement.md!>
+<!inputFile|path=Chapters/bloc/snippets.md
 
 # Toplo: Bloc widget set
 

From 297ebf17a44cc25d7f0b0cf3c9c0f107db66fd7c Mon Sep 17 00:00:00 2001
From: Enzo-Demeulenaere <121249182+Enzo-Demeulenaere@users.noreply.github.com>
Date: Thu, 13 Jun 2024 15:00:53 +0200
Subject: [PATCH 5/9] Rename SnippetsDoc.md to snippets.md

---
 Chapters/bloc/{SnippetsDoc.md => snippets.md} | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename Chapters/bloc/{SnippetsDoc.md => snippets.md} (99%)

diff --git a/Chapters/bloc/SnippetsDoc.md b/Chapters/bloc/snippets.md
similarity index 99%
rename from Chapters/bloc/SnippetsDoc.md
rename to Chapters/bloc/snippets.md
index 78bb1a8..26fffb8 100644
--- a/Chapters/bloc/SnippetsDoc.md
+++ b/Chapters/bloc/snippets.md
@@ -647,4 +647,4 @@ elt3TrajectoryElt := BlElement new background: Color transparent; geometry: (BlP
 elt4TrajectoryElt := BlElement new background: Color transparent; geometry: (BlPolylineGeometry vertices: elt4Trajectory); border: (BlBorder paint: Color yellow width: 5).
 
 container addChildren: { elt1TrajectoryElt. elt2TrajectoryElt.elt3TrajectoryElt.elt4TrajectoryElt.}.
-```
\ No newline at end of file
+```

From 46443887d6302e33b16c9a98fa767d90be5d6fff Mon Sep 17 00:00:00 2001
From: Renaud de Villemeur <renaud.devillemeur@tuta.io>
Date: Tue, 18 Jun 2024 13:33:10 -0400
Subject: [PATCH 6/9] add more information on transformation.

---
 Chapters/bloc/element.md | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/Chapters/bloc/element.md b/Chapters/bloc/element.md
index 5715a9d..127f4da 100644
--- a/Chapters/bloc/element.md
+++ b/Chapters/bloc/element.md
@@ -253,6 +253,33 @@ You can apply transformations to a `BlElement`:
 - reflection
 - etc...
 
+Transformation are affine transformation. For more detail, you can search on the internet, there are countless references to it. To simplify it, I'll say we apply  a transformation matrix (*BlMatrix2D*) to all point of our figure path, each point represented as *BlVector*. 
+
+You have 3 type of tranformation available in Bloc:
+- **BlElementLocalTransformation**: This transformation combine an affine transformation (*BlAffineTransformation* subclasses), with a point of origin (*BlAffineTransformationOrigin* subclasses). By default, origin is the center of your element, BlAffineTransformationCenterOrigin.
+- **BlElementAbsoluteTransformation**: This transformation apply a transformation matrix to your shape, without point of origin. Its  result is similar to *BlElementLocalTransformation*, with origin set to *BlAffineTransformationTopLeftOrigin*
+- **BlElementCompositeTransformation** which are combination of *BlElementLocalTransformation* and/or *BlElementAbsoluteTransformation*
+
+Most of the time, you won't have to deal with matrix definition. You'll use the 
+helper method `transformDo`, and define your transformation using *BlTransformationBuilder*.
+
+When you're defining a transformation using `transformDo:` , you'll, by default, 
+use *BlAffineCompositeTransformation*. All transformation move added subsequently will be composed together.
+The origin will be set to *BlAffineTransformationCenterOrigin*.
+
+Those two transformation below are strictly equivalent, and rotate your element by 45 degree. 
+One use the underlying object, while the other use the helper methods:
+
+```smalltalk
+elt transformation: (BlElementLocalTransformation 
+	newWith: ((BlRotationTransformation new angle: 45) 
+	origin: (BlAffineTransformationCenterOrigin defaultInstance ) )).
+```
+
+```smalltalk
+elt transformDo: [ :t | t rotateBy: 45 ].
+```
+
 A transformation is applied in the scope of the message `transformDo:` as shown below.
 ```
 element transformDo: [ :b | b scaleBy: 0.2; translateBy: -25 @ -15 ];

From 8d32e68c72fca829329e2e00fad3f3acb44fa3c1 Mon Sep 17 00:00:00 2001
From: Renaud de Villemeur <renaud.devillemeur@tuta.io>
Date: Tue, 18 Jun 2024 13:57:27 -0400
Subject: [PATCH 7/9] small code fix

---
 Chapters/bloc/animation.md | 21 ++++++---------------
 1 file changed, 6 insertions(+), 15 deletions(-)

diff --git a/Chapters/bloc/animation.md b/Chapters/bloc/animation.md
index e2117f7..eeb6c22 100644
--- a/Chapters/bloc/animation.md
+++ b/Chapters/bloc/animation.md
@@ -215,7 +215,7 @@ sequencially to an element:
 
 A custom animation for element rotation.
 
-```
+```smalltalk
 BlAnimation << #BlRotateAnimation 
 	slots: { #angle }; 
 	tag: 'Animation'; 
@@ -231,22 +231,13 @@ BlRotateAnimation >> valueForStep: aNumber
 	^ (angle * aNumber)
 ```
 
-You then update your example with:
+you can then use it like:
 
-```
+```smalltalk
 | elt frame container anim |
-elt := BlElement new 
-	background: (Color red alpha: 0.5); 
-	position: 100 asPoint; 
-	size: 100 asPoint.
-frame := BlElement new 
-	background: Color yellow; 
-	position: 100 asPoint; 
-	size: 100 asPoint.
-container := BlElement new 
-	background: Color lightGreen; 
-	size: 500 asPoint; 
-	addChildren: {frame. elt}.
+elt := BlElement new background: (Color red alpha: 0.5); position: 100 asPoint; size: 100 asPoint.
+frame := BlElement new background: Color yellow; position: 100 asPoint; size: 100 asPoint.
+container := BlElement new background: Color lightGreen; size: 500 asPoint; addChildren: {frame. elt}.
 
 anim := BlRotateAnimation new angle: 90; duration: 1 second.
 

From 65cda88672cc31a4f9c06f37ea88b2ded776e438 Mon Sep 17 00:00:00 2001
From: Renaud de Villemeur <renaud.devillemeur@tuta.io>
Date: Fri, 28 Jun 2024 09:57:51 -0400
Subject: [PATCH 8/9] added example of use of zIndex in element ordering.

---
 Chapters/bloc/figures/zIndexExample.png | Bin 0 -> 10423 bytes
 Chapters/bloc/layout.md                 |  20 ++++++++++++++++++++
 2 files changed, 20 insertions(+)
 create mode 100644 Chapters/bloc/figures/zIndexExample.png

diff --git a/Chapters/bloc/figures/zIndexExample.png b/Chapters/bloc/figures/zIndexExample.png
new file mode 100644
index 0000000000000000000000000000000000000000..85c1d878efd0652d2c9547f1307c6548aa91bbac
GIT binary patch
literal 10423
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

literal 0
HcmV?d00001

diff --git a/Chapters/bloc/layout.md b/Chapters/bloc/layout.md
index 17501ec..fbeb5f7 100644
--- a/Chapters/bloc/layout.md
+++ b/Chapters/bloc/layout.md
@@ -62,8 +62,28 @@ To ease this kind of script one can use `whenLayoutedDoOnce:` which arms a one
 shot event handler that reacts to the `BlElementLayoutComputedEvent` event.
 
 
+### element order
+Your element will be displayed in the order you added them to your parent. You
+can, however, specify their *zIndex*. They will then follow this index order, 
+from low to high.
 
+In the example below, with zIndex, element shoud appears from black to red. 
+With zIndex, you can reorder the order of display of the elements. Note that
+zIndex can be negative.
 
+```smalltalk
+container:= BlElement new geometry: BlRectangleGeometry new; size: 150@150; background: Color lightGray .
+        
+elt1 := BlElement new geometry: BlCircleGeometry new;  size: 100 asPoint; zIndex: 1;  background:Color  black.
+elt2 := BlElement new geometry: BlCircleGeometry new;  size: 100 asPoint; zIndex: 2; position:10@10; background: Color blue.
+elt3 := BlElement new geometry: BlCircleGeometry new; size: 100 asPoint; zIndex: -1; position:20@20; background: Color red.
+        
+container addChildren: {elt1 . elt2 . elt3}.
+
+container.
+```
+
+![zIndex example](figures/zIndexExample.png)
 
 ### Space around elements
 

From 7455dda113e0a22f92143e4c57a7593f9451d929 Mon Sep 17 00:00:00 2001
From: Renaud de Villemeur <renaud.devillemeur@tuta.io>
Date: Fri, 28 Jun 2024 10:26:17 -0400
Subject: [PATCH 9/9] add missing file declaration upper symbols

---
 index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.md b/index.md
index 7e3a442..c1604b0 100644
--- a/index.md
+++ b/index.md
@@ -10,7 +10,7 @@
 <!inputFile|path=Chapters/bloc/text.md!>
 <!inputFile|path=Chapters/bloc/animation.md!>
 <!inputFile|path=Chapters/bloc/complexElement.md!>
-<!inputFile|path=Chapters/bloc/snippets.md
+<!inputFile|path=Chapters/bloc/snippets.md!>
 
 # Toplo: Bloc widget set