+ ToCircularMenuLayout to align sub-menu sectors with the parent menu middle angle

Author: plantec

src/Toplo-Examples/ToExperiments.class.st

@@ -825,23 +825,6 @@ ToExperiments class >> example_TextFlowWithBlElements2 [
 	element openInNewSpace
 ]
 
-{ #category : #album }
-ToExperiments class >> example_TextPane [
-
-	| text album space scrollbar |
-	space := BlSpace new.
-	text := self methodText asRopedText.
-	album := ToAlbum new.
-	album text: text copy.
-	scrollbar := ToScrollbarElement vertical: true.
-	scrollbar attachTo: album next.
-	album addChild: scrollbar.
-	space root addChild: album.
-	album infinite vFitContent.
-	album next next vFitContent.
-	space show
-]
-
 { #category : #collapse }
 ToExperiments class >> example_collapse1 [
 

src/Toplo-Examples/ToSandBox.class.st

@@ -2214,7 +2214,6 @@ ToSandBox class >> example_CircularMenuPaneWithSubmenus2 [
 
 	item := ToCircularMenu new icon:
 		        (iconProvider iconNamed: 'filled_checklist').
-
 	item layoutRadius: 80.
 
 	sub := ToMenuItem new labelText: 'Menu item 1'.
@@ -5617,33 +5616,34 @@ ToSandBox class >> example_SkinIsRenewWhenLableTextChange [
 ToSandBox class >> example_Smalltalk_ui_icons [
 
 	| column root vscrollBar container |
-	column := BlElement new
-		          layout: BlLinearLayout vertical;
+	column := ToPane vertical
 		          constraintsDo: [ :c |
-			          c horizontal fitContent.
-			          c vertical fitContent ];
+				          c horizontal matchParent.
+				          c vertical fitContent ];
 		          yourself.
 	Smalltalk ui icons allIconNames do: [ :k |
-		| lab im node |
-		im := ToImage new innerImage: (self iconNamed: k).
-		lab := ToLabel new text: k asString.
-		node := ToButton new icon: im; label: lab; yourself.
-		node width: 600.
-		node startFlexible: true.
-		column addChild: node ].
+			| lab im node |
+			im := ToImage new innerImage: (self iconNamed: k).
+			lab := ToLabel new text: k asString.
+			node := ToButton new
+				        icon: im;
+				        label: lab;
+				        yourself.
+			node hMatchParent.
+			node startFlexible: true.
+			column addChild: node ].
 
 	root := column asScrollableElement.
-	vscrollBar := BlVerticalScrollbarElement new.
+	vscrollBar := ToScrollbarElement new.
 	vscrollBar constraintsDo: [ :c |
-		c ignoreByLayout.
-		c margin: (BlInsets right: 2).
-		c ignored horizontal alignRight.
-		c ignored vertical alignBottom ].
+			c ignoreByLayout.
+			c ignored horizontal alignRight.
+			c ignored vertical alignBottom ].
 	vscrollBar attachTo: root.
 	container := BlElement new
 		             constraintsDo: [ :c |
-			             c horizontal matchParent.
-			             c vertical matchParent ];
+				             c horizontal matchParent.
+				             c vertical matchParent ];
 		             yourself.
 	container
 		addChild: root;

src/Toplo-Widget-Circular/TToAnnulusSectorLayoutState.trait.st

@@ -90,3 +90,15 @@ TToAnnulusSectorLayoutState >> startAngleOffset: anAngleInDegrees [
 
 	startAngleOffset := anAngleInDegrees
 ]
+
+{ #category : #'t - annulus sector layout state' }
+TToAnnulusSectorLayoutState >> startAngleRadians [
+
+	^ startAngle degreesToRadians 
+]
+
+{ #category : #'t - annulus sector layout state' }
+TToAnnulusSectorLayoutState >> startAngleRadians: anAngleInRadians [
+
+	startAngle := anAngleInRadians radiansToDegrees 
+]

src/Toplo-Widget-Circular/TToAnnulusSectorLayoutUser.trait.st

@@ -73,8 +73,19 @@ TToAnnulusSectorLayoutUser >> startAngle [
 TToAnnulusSectorLayoutUser >> startAngle: anAngleInDegrees [
 
 	(self startAngle closeTo: anAngleInDegrees) ifTrue: [ ^ self ].
-	self stateHolder startAngle: anAngleInDegrees.
-	self requestLayout
+	self stateHolder startAngle: anAngleInDegrees
+]
+
+{ #category : #'t - annulus sector layout user' }
+TToAnnulusSectorLayoutUser >> startAngleRadians [
+
+	^ self startAngle degreesToRadians 
+]
+
+{ #category : #'t - annulus sector layout user' }
+TToAnnulusSectorLayoutUser >> startAngleRadians: anAngleInRadians [
+
+	self startAngle: anAngleInRadians radiansToDegrees 
 ]
 
 { #category : #'t - annulus sector layout user' }

src/Toplo-Widget-Circular/ToAnnulusCircularLayout.class.st

@@ -56,10 +56,24 @@ ToAnnulusCircularLayout >> centroidOf: anElement in: aContainer [
 { #category : #layout }
 ToAnnulusCircularLayout >> layout: anElement in: aBounds context: aBlElementBoundsUpdateContext [
 
+	self
+		layoutSectors: anElement
+		in: aBounds
+		context: aBlElementBoundsUpdateContext.
+	super
+		layout: anElement
+		in: aBounds
+		context: aBlElementBoundsUpdateContext.
+
+	anElement invalidate
+]
+
+{ #category : #layout }
+ToAnnulusCircularLayout >> layoutSectors: anElement in: aBounds context: aBlElementBoundsUpdateContext [
+
 	| radius defaultGap sectorStartAngle remainder sectors numberWithGap |
 	sectors := anElement children accountedByLayout.
 	sectors isEmpty ifTrue: [ ^ self ].
-
 	radius := aBounds extent x / 2.
 	remainder := 360.
 	numberWithGap := 0.
@@ -69,12 +83,10 @@ ToAnnulusCircularLayout >> layout: anElement in: aBounds context: aBlElementBoun
 				 inSectorElement: each) ifNotNil: [ :gap |
 					remainder := remainder - gap.
 					numberWithGap := numberWithGap + 1 ] ].
-
 	defaultGap := numberWithGap < sectors size
 		              ifTrue: [ remainder / (sectors size - numberWithGap) ]
 		              ifFalse: [ 0 ].
 	sectorStartAngle := self startAngle + self startAngleOffset.
-
 	sectors do: [ :each |
 			| centroid edgePoint innerEdgePoint sectorGap |
 			centroid := self centroidOf: each in: anElement.
@@ -86,29 +98,22 @@ ToAnnulusCircularLayout >> layout: anElement in: aBounds context: aBlElementBoun
 				                  pointOnInnerPeripheryFromCenter: aBounds center
 				                  through: centroid
 				                  in: anElement.
-
 			each constraints annulusSector centroid: centroid.
 			each constraints annulusSector edgePoint: edgePoint.
 			each constraints annulusSector innerEdgePoint: innerEdgePoint.
 			each extent: anElement measuredExtent.
-
 			sectorGap := (each constraints annulus
 				              sectorAngleInDegreesWithRadius: radius
 				              inSectorElement: each)
 				             ifNotNil: [ :gap | gap ]
 				             ifNil: [ defaultGap ].
-
 			each
 				innerRadialRatio: self innerRadialRatio;
 				outerRadialRatio: self outerRadialRatio;
 				startAngle: sectorStartAngle;
 				endAngle: sectorStartAngle + sectorGap.
-			sectorStartAngle := sectorStartAngle + sectorGap ].
-	super
-		layout: anElement
-		in: aBounds
-		context: aBlElementBoundsUpdateContext.
-	anElement invalidate
+			sectorStartAngle := sectorStartAngle + sectorGap ]
+
 ]
 
 { #category : #private }

src/Toplo-Widget-Circular/ToAnnulusSectorElement.class.st

@@ -12,7 +12,7 @@ Class {
 { #category : #accessing }
 ToAnnulusSectorElement >> arcLength [
 
-	^ self outerRadius * self deltaAngleInRadians - (self radialGap * 2)
+	^ self outerRadius * self deltaAngleRadians - (self radialGap * 2)
 ]
 
 { #category : #accessing }
@@ -80,7 +80,7 @@ ToAnnulusSectorElement >> chordLength [
 
 	| r |
 	r := self outerRadius.
-	^ 2 * r * (self deltaAngleInRadians / 2) sin - (self radialGap * 2)
+	^ 2 * r * (self deltaAngleRadians / 2) sin - (self radialGap * 2)
 ]
 
 { #category : #initialization }
@@ -96,8 +96,9 @@ ToAnnulusSectorElement >> defaultLayout [
 ]
 
 { #category : #accessing }
-ToAnnulusSectorElement >> deltaAngleInRadians [
-    ^ (self endAngleInRadians - self startAngleInRadians) \\ (2 * Float pi)
+ToAnnulusSectorElement >> deltaAngleRadians [
+
+    ^ (self endAngleRadians - self startAngleRadians) \\ (2 * Float pi)
 ]
 
 { #category : #accessing }
@@ -122,16 +123,21 @@ ToAnnulusSectorElement >> endAngle [
 ToAnnulusSectorElement >> endAngle: anAngleInDegrees [
 
 	(self endAngle closeTo: anAngleInDegrees) ifTrue: [ ^ self ].
-	layout endAngle: anAngleInDegrees.
-	self requestLayout
+	layout endAngle: anAngleInDegrees
 ]
 
 { #category : #accessing }
-ToAnnulusSectorElement >> endAngleInRadians [
+ToAnnulusSectorElement >> endAngleRadians [
 
 	^ self endAngle degreesToRadians 
 ]
 
+{ #category : #accessing }
+ToAnnulusSectorElement >> endAngleRadians: anAngleInRadians [
+
+	self endAngle: anAngleInRadians radiansToDegrees 
+]
+
 { #category : #initialization }
 ToAnnulusSectorElement >> initialize [
 
@@ -143,15 +149,15 @@ ToAnnulusSectorElement >> initialize [
 { #category : #accessing }
 ToAnnulusSectorElement >> innerArcLength [
 
-	^ (self innerRadius * self deltaAngleInRadians) - (self radialGap * 2)
+	^ (self innerRadius * self deltaAngleRadians) - (self radialGap * 2)
 ]
 
 { #category : #accessing }
 ToAnnulusSectorElement >> innerChordLength [
 
 	 | r |
     r := self innerRadius.
-    ^ (2 * r * (self deltaAngleInRadians / 2) sin) - (self radialGap * 2)
+    ^ (2 * r * (self deltaAngleRadians / 2) sin) - (self radialGap * 2)
 ]
 
 { #category : #accessing }
@@ -167,8 +173,9 @@ ToAnnulusSectorElement >> innerRadius [
 ]
 
 { #category : #accessing }
-ToAnnulusSectorElement >> midAngleInRadians [
-    ^ self startAngleInRadians + (self deltaAngleInRadians / 2)
+ToAnnulusSectorElement >> midAngleRadians [
+
+    ^ self startAngleRadians + (self deltaAngleRadians / 2)
 ]
 
 { #category : #initialization }
@@ -200,12 +207,6 @@ ToAnnulusSectorElement >> radialGap: aNumber [
 
 ]
 
-{ #category : #accessing }
-ToAnnulusSectorElement >> startAngleInRadians [
-
-	^ self startAngle degreesToRadians 
-]
-
 { #category : #'t - annulus circular layout user' }
 ToAnnulusSectorElement >> stateHolder [
 

src/Toplo-Widget-Circular/ToCircularMenuInnerElement.class.st

@@ -12,6 +12,12 @@ ToCircularMenuInnerElement >> addNodeContainer: aNodeContainer at: aPosition [
 	self addChild: aNodeContainer at: aPosition
 ]
 
+{ #category : #'t - circular element' }
+ToCircularMenuInnerElement >> defaultLayout [ 
+
+	^ ToCircularMenuLayout new
+]
+
 { #category : #initialization }
 ToCircularMenuInnerElement >> initialize [
 

src/Toplo-Widget-Circular/ToCircularMenuLayout.class.st

@@ -0,0 +1,37 @@
+Class {
+	#name : #ToCircularMenuLayout,
+	#superclass : #ToAnnulusCircularLayout,
+	#category : #'Toplo-Widget-Circular-Menu'
+}
+
+{ #category : #layout }
+ToCircularMenuLayout >> layoutSectors: anElement in: aBounds context: aBlElementBoundsUpdateContext [
+	" Align the circular submdenu sectors with the parent menu sector middle angle "
+
+	| sectors sectorsStartAngle sectorsEndAngle sectorsMidAngle parentMenu midAngleGap pmStartAngle pmEndAngle pmSector |
+	super
+		layoutSectors: anElement
+		in: aBounds
+		context: aBlElementBoundsUpdateContext.
+	anElement listElement menuListOwner isSubmenu ifFalse: [ ^ self ].
+
+	sectors := anElement children accountedByLayout.
+	sectors isEmpty ifTrue: [ ^ self ].
+
+	sectorsStartAngle := sectors first startAngleRadians.
+	sectorsEndAngle := sectors last endAngleRadians.
+	sectorsMidAngle := sectorsEndAngle - sectorsStartAngle / 2.
+
+	sectorsMidAngle < Float pi ifFalse: [ ^ self ].
+
+	parentMenu := anElement listElement menuListOwner.
+	pmSector := parentMenu holder nodeContainer.
+	pmStartAngle := pmSector startAngleRadians.
+	pmEndAngle := pmSector endAngleRadians.
+	midAngleGap := sectorsMidAngle - (pmEndAngle - pmStartAngle / 2).
+
+	sectors do: [ :each |
+			each
+				startAngleRadians: each startAngleRadians - midAngleGap;
+				endAngleRadians: each endAngleRadians - midAngleGap ]
+]

src/Toplo/TToElement.trait.st

@@ -23,3 +23,9 @@ TToElement >> menuPaneDo: aBlock [
 
 	self flag: 'Check how to remove that'
 ]
+
+{ #category : #'instance creation' }
+TToElement >> newScrollableParent [
+
+	^ ToScrollableElement new
+]