fix: tf global to local problem on 2D node, add LoadingBar widget, and refactor code

Diya/Diya2DNode.class.st

@@ -52,8 +52,7 @@ Diya2DNode >> inner: aPoint [
 
 { #category : #accessing }
 Diya2DNode >> local: aPoint [
-	^((aPoint - (0@0 applyTf: self tf) )/ scale)
-			rotateBy: rotation about: 0@0.
+	^ self tf globalPointToLocal: aPoint
 	
 ]
 

Diya/Diya2DPrimShape.class.st

@@ -16,7 +16,7 @@ Diya2DPrimShape >> borderWidth [
 
 { #category : #accessing }
 Diya2DPrimShape >> boundingBox [ 
-	^ bbox applyTf: self tf.
+	^ self tf localBoundsToGlobal: bbox.
 ]
 
 { #category : #initialization }

Diya/DiyaDefaultTheme.class.st

@@ -0,0 +1,43 @@
+Class {
+	#name : #DiyaDefaultTheme,
+	#superclass : #DiyaStyleSheet,
+	#category : #'Diya-UIThemes'
+}
+
+{ #category : #define }
+DiyaDefaultTheme >> defineGlobal [
+	self define: #global styles: {
+			#bgColor -> (Color r: 0.2118 g: 0.2118  b: 0.2118).
+			#color -> Color white.
+			#border -> 0.
+			#fontSize -> 18.
+			#fontFamily -> DiyaFontManager uniqueInstance defaultFamily.
+			#textIconFamily -> 'bootstrap-icons'.
+			#fontStyle -> DiyaFontManager uniqueInstance defaultStyle.
+			#borderColor -> Color transparent.
+			#xAlign -> #left.
+			#yAlign -> #middle.
+			#iconSize -> 24.
+	 	}
+]
+
+{ #category : #define }
+DiyaDefaultTheme >> defineLoadingBar [
+	self define: #loadingBar styles: {
+			#bgColor -> Color red.
+			#border -> 1.
+			#borderColor -> Color white.
+	 	}; 
+		define: #loadingProgress styles: {
+			#bgColor -> Color white.
+			#border -> 0.
+			#fontSize -> 18.
+	 	}
+]
+
+{ #category : #initialization }
+DiyaDefaultTheme >> initialize [
+	super initialize.
+	self defineGlobal.
+	self defineLoadingBar.
+]

Diya/DiyaExampleApp.class.st

@@ -74,7 +74,7 @@ DiyaExampleApp >> main [
 
 { #category : #accessing }
 DiyaExampleApp >> setup [
-	|node node1 img ell label icon button texture|
+	|node node1 img ell label icon button texture loading|
 	texture := DiyaImageTex new.
 	"DiyaRendererContext uniqueInstance assets
 		addAsset:
@@ -120,10 +120,11 @@ DiyaExampleApp >> setup [
 	ell := root addNode: (DiyaEllipse rx:100  ry: 70) at: 120@300.
 	ell scale: 1.2 @ 1.2.
 	ell styleName: #ell_view.
+	ell rotation: 30.
 	ell textureNamed:'mrsang.png'.
-	ell addNode: (DiyaTimerNode timeout: 1000 / 6 do:[:n |
+	"ell addNode: (DiyaTimerNode timeout: 1000 / 6 do:[:n |
 		n parent rotation: n parent rotation + 10.	
-	] ).
+	] )".
 	ell on: #(mousebuttondown fingerdown) do:[:e|
 		label txt: 'Ellipse clicked', (ell local:e mapped worldPosition) asIntegerPoint asString].
 
@@ -144,6 +145,17 @@ DiyaExampleApp >> setup [
 	button icon: icon "'mrsang.png'".
 	"button rotation: Float pi / 2.0."
 	button styleName: #button_view.
+	
+	loading := root addNode: (DiyaLoadingBar new) at: 240@550.
+	loading extent: 200 @ 20.
+	 
+	loading addNode: (DiyaTimerNode timeout: 2000 do:[:n |
+		|p|
+		p := (n parent percent + 10).
+		p > 100 ifTrue:[ p := 0].
+		n parent percent: p.
+	] ).
+	
 	Transcript show: 'Application setup';cr.
 	^ root 
 ]

Diya/DiyaLoadingBar.class.st

@@ -0,0 +1,59 @@
+Class {
+	#name : #DiyaLoadingBar,
+	#superclass : #DiyaWidget,
+	#instVars : [
+		'label',
+		'bar',
+		'progress',
+		'percent'
+	],
+	#category : #'Diya-Widgets'
+}
+
+{ #category : #accessing }
+DiyaLoadingBar >> bar [
+	^ bar
+]
+
+{ #category : #initialization }
+DiyaLoadingBar >> initialize [
+	super initialize.
+	bar := self addNode: (DiyaRectangle new).
+	progress := self addNode: (DiyaRectangle new).
+	bar styleName: #loadingBar.
+	progress styleName: #loadingProgress.
+	"label := self addNode: (DiyaLabel new).
+	label wordWrap: false."
+	percent := 0.
+]
+
+{ #category : #accessing }
+DiyaLoadingBar >> label [
+	^ label
+]
+
+{ #category : #accessing }
+DiyaLoadingBar >> percent [
+	^ percent
+]
+
+{ #category : #accessing }
+DiyaLoadingBar >> percent: anObject [
+	percent := anObject.
+	self setDirty.
+]
+
+{ #category : #processing }
+DiyaLoadingBar >> process [
+	|border|
+	border := bar ? #border.
+	bar extent: self extent.
+	progress position: border@border.
+	progress extent: ((self percent) * (self extent x) / 100 -( border << 1)) @ (self extent y - (border << 1)).
+	"label extent: self extent."
+]
+
+{ #category : #accessing }
+DiyaLoadingBar >> progress [
+	^ progress
+]

Diya/DiyaMetaNode.class.st

@@ -11,7 +11,7 @@ DiyaMetaNode >> addNode: node at: pos [
 
 { #category : #accessing }
 DiyaMetaNode >> boundingBox [
-	^ 0@0
+	^ Rectangle origin: 0@0 extent: 0@0
 ]
 
 { #category : #rendering }

Diya/DiyaPolygon.class.st

@@ -42,23 +42,7 @@ DiyaPolygon >> points: anObject [
 
 { #category : #accessing }
 DiyaPolygon >> process [
-	bbox := self recFromPoints.
+	bbox := Rectangle encompassing: points.
 	self calculateVertices.
 	^true
 ]
-
-{ #category : #accessing }
-DiyaPolygon >> recFromPoints [
-	|maxX maxY minX minY x y|
-	maxX := minX := (points at: 1) x.
-	maxY := minY := (points at: 1) y.
-	points  do: [ :p|
-		x := p x.
-		y := p y.
-		maxX := maxX max: x.
-		maxY := maxY max: y.
-		minX := minX min: x.
-		minY := minY min: y.
-	].
-	^ Rectangle origin: minX@minY corner: maxX @ maxY
-]

Diya/DiyaStyle.class.st

@@ -5,7 +5,7 @@ Class {
 		'parent',
 		'style'
 	],
-	#category : #'Diya-Graphics'
+	#category : #'Diya-UIThemes'
 }
 
 { #category : #accessing }

Diya/DiyaStyleSheet.class.st

@@ -4,7 +4,7 @@ Class {
 	#instVars : [
 		'stylesheet'
 	],
-	#category : #'Diya-Graphics'
+	#category : #'Diya-UIThemes'
 }
 
 { #category : #convenience }

Diya/DiyaUIThemesManager.class.st

@@ -5,7 +5,7 @@ Class {
 		'themes',
 		'currentThemeName'
 	],
-	#category : #'Diya-Graphics'
+	#category : #'Diya-UIThemes'
 }
 
 { #category : #adding }
@@ -37,21 +37,7 @@ DiyaUIThemesManager >> defaultTheme [
 
 { #category : #initialization }
 DiyaUIThemesManager >> defineDefaultTheme [
-	self addTheme: #default stylesheet: (DiyaStyleSheet new
-		define: #global styles: {
-			#bgColor -> (Color r: 0.2118 g: 0.2118  b: 0.2118).
-			#color -> Color white.
-			#border -> 0.
-			#fontSize -> 18.
-			#fontFamily -> DiyaFontManager uniqueInstance defaultFamily.
-			#textIconFamily -> 'bootstrap-icons'.
-			#fontStyle -> DiyaFontManager uniqueInstance defaultStyle.
-			#borderColor -> Color transparent.
-			#xAlign -> #left.
-			#yAlign -> #middle.
-			#iconSize -> 24.
-	 	}; yourself
-	)
+	self addTheme: #default stylesheet: DiyaDefaultTheme new. 
 ]
 
 { #category : #initialization }

Diya/Point.extension.st

@@ -1,10 +1,5 @@
 Extension { #name : #Point }
 
-{ #category : #'*Diya' }
-Point >> applyTf: tf [
-	^ tf localPointToGlobal: self
-]
-
 { #category : #'*Diya' }
 Point >> asArray3F [
 	^ self asArray3F: 1.0

Diya/Rectangle.extension.st

@@ -1,6 +0,0 @@
-Extension { #name : #Rectangle }
-
-{ #category : #'*Diya' }
-Rectangle >> applyTf: tf [
-	^ tf localBoundsToGlobal: self 
-]