Correct openGL transparent color display problem, stylesheet now allows style inheritance

Diya/Array.extension.st

@@ -1,5 +1,15 @@
 Extension { #name : #Array }
 
+{ #category : #'*Diya' }
+Array >> asDiyaStyle [
+	|style|
+	style := DiyaStyle new.
+	self do:[:v |
+		style at: v key put: v value
+	].
+	^style
+]
+
 { #category : #'*Diya' }
 Array >> asPoint [
 	^ (self at: 1 ifAbsent:[0]) @ (self at: 2 ifAbsent:[0])

Diya/Diya2DPrimShape.class.st

@@ -22,6 +22,10 @@ Diya2DPrimShape >> boundingBox [
 { #category : #initialization }
 Diya2DPrimShape >> draw [
 	vbuffer ifNil: [ ^self ].
+	OpenGL
+		enable: GL_CULL_FACE;
+		enable: GL_BLEND;
+		blendFnWithSfactor: GL_SRC_ALPHA dfactor: GL_ONE_MINUS_SRC_ALPHA.
 	"configure vao vbo for texture QUAD"
 	self texture ifNotNil: [
 		self texture setup.
@@ -36,6 +40,9 @@ Diya2DPrimShape >> draw [
 	self texture ifNotNil: [self texture drop.].
 	self borderWidth > 0 ifTrue: [ self drawBorder ].
 	context vao disableAttribute: 0.
+	OpenGL
+		disable: GL_CULL_FACE;
+		disable: GL_BLEND.
 ]
 
 { #category : #initialization }

Diya/Diya2DShader.class.st

@@ -20,7 +20,13 @@ uniform vec4 u_bg_color;
 uniform sampler2D u_texture;
 varying vec2 texcoord;
 void main(void) {
-	vec4 texcolor = vec4(0,0,0,0);
+	if(u_texture_type == 1)
+	{
+		// draw border
+		gl_FragColor = u_color;
+		return;
+	}
+	vec4 texcolor = u_bg_color;
 	// alpha
 	if(u_texture_type == 0x1906) { 
 		texcolor = vec4(1, 1, 1, texture2D(u_texture, texcoord).a);
@@ -29,10 +35,6 @@ void main(void) {
 	else if (u_texture_type == 0x1908){ 
 		texcolor =  texture2D(u_texture, texcoord);
 	} 
-	else if(u_texture_type == 1)
-	{
-		texcolor = vec4(1,1,1,1);
-	}
   	vec4 pxcolor =  texcolor * u_color;
 	if(pxcolor.a > 0.0)
 	{ 

Diya/DiyaEllipse.class.st

@@ -23,16 +23,6 @@ DiyaEllipse class >> rx: rx ry: ry shader: s [
 		yourself
 ]
 
-{ #category : #initialization }
-DiyaEllipse >> draw [
-	OpenGL
-		enable: GL_BLEND;
-		blendFnWithSfactor: GL_SRC_ALPHA dfactor: GL_ONE_MINUS_SRC_ALPHA.
-	super draw.
-	OpenGL
-		disable: GL_BLEND
-]
-
 { #category : #initialization }
 DiyaEllipse >> drawBorder [
 	"do nothing"

Diya/DiyaExampleApp.class.st

@@ -17,12 +17,18 @@ DiyaExampleApp >> defineStyleSheet [
 			#fontSize -> 24.
 			#bgColor -> Color transparent.
 		};
+		define: #text_icon_2 extend:#text_icon_1  styles: {
+			#fontSize -> 16.
+		 };
 		define: #image_view styles: { 
-			#color -> (Color r: 1.0 g:1.0  b:1.0  alpha:1.0 ).
+			#color -> Color white.
-			#border -> 3.
+			#border -> 1.
 			#bgColor -> Color cyan.
 			#borderColor -> Color red
 		};
+		define: #rect_view extend: #image_view styles: { 
+			#bgColor -> Color transparent.
+		};
 		define: #text_view styles: { 
 			#color -> Color orange.
 			#fontSize -> 16.
@@ -36,18 +42,18 @@ DiyaExampleApp >> defineStyleSheet [
 		define: #ell_view styles: { 
 			#borderColor -> Color red.
 			#color -> Color white.
-			#bgColor -> Color cyan.
+			#border -> 2.
-			#border -> 3.
 		};
 		define: #poly_view styles: { 
 			#borderColor -> Color red.
 			#color -> Color green.
-			#border -> 3.
+			#border -> 1.
+			#bgColor -> Color transparent.
 		};
 		define: #button_view styles: { 
-			#borderColor -> Color red.
+			#borderColor -> (Color r: 0.051 g: 0.051  b: 0.051).
 			#color -> Color white.
-			#bgColor -> Color magenta.
+			#bgColor -> (Color r: 0.1529 g: 0.1529  b: 0.1529).
 			#border -> 1.
 			#yAlign -> #middle.
 			#xAlign -> #center
@@ -80,7 +86,7 @@ DiyaExampleApp >> setup [
 	node extent:200@200.
 	
 	node := root addNode: (DiyaRectangle new) at: 10@80.
-	node styleName: #image_view.
+	node styleName: #rect_view.
 	node extent: 240@320.
 	
 	node := root addNode: (DiyaText data: String loremIpsum) at: 10@80.
@@ -103,12 +109,13 @@ DiyaExampleApp >> setup [
 	node textureNamed: 'mrsang.png'.
 	node styleName: #poly_view.
 	
-	"icon := root addNode: (DiyaFontIcon data: #(16rF101 16rF155 16rF185 16rF21B 16rF298 16rF254)) at: 240@500.
+	icon := root addNode: (DiyaFontIcon data: #(16rF101 16rF155 16rF185 16rF21B 16rF298 16rF254)) at: 240@500.
-	icon styleName: #text_icon_1 ."
+	icon styleName: #text_icon_2.
 	
 	button := root addNode: (DiyaButton text: 'Click me !') at: 240@460.
 	button extent: 200@40.
 	button icon:16rF185"'mrsang.png'".
+	"button rotation: Float pi / 2.0."
 	button styleName: #button_view.
 	^ root 
 ]

Diya/DiyaImageTex.class.st

@@ -18,9 +18,9 @@ DiyaImageTex class >> fromFile: path [
 
 { #category : #accessing }
 DiyaImageTex >> drop [
-	OpenGL
+	"OpenGL
 		disable: GL_CULL_FACE;
-		disable: GL_BLEND.
+		disable: GL_BLEND."
 ]
 
 { #category : #'instance creation' }
@@ -72,10 +72,6 @@ DiyaImageTex >> path [
 
 { #category : #accessing }
 DiyaImageTex >> setup [
-	OpenGL
-		enable: GL_CULL_FACE;
-		enable: GL_BLEND;
-		blendFnWithSfactor: GL_SRC_ALPHA dfactor: GL_ONE_MINUS_SRC_ALPHA.
 	OpenGLTexture
 		parameteri: GL_TEXTURE_2D pname: GL_TEXTURE_WRAP_S param: GL_CLAMP_TO_EDGE;
 		parameteri: GL_TEXTURE_2D pname: GL_TEXTURE_WRAP_T param: GL_CLAMP_TO_EDGE;

Diya/DiyaStyle.class.st

@@ -0,0 +1,41 @@
+Class {
+	#name : #DiyaStyle,
+	#superclass : #DiyaBaseObject,
+	#instVars : [
+		'parent',
+		'style'
+	],
+	#category : #'Diya-Graphics'
+}
+
+{ #category : #accessing }
+DiyaStyle >> at: name ifAbsent: aBlock [
+	|value|
+	value := style at: name ifAbsent:[nil].
+	value ifNotNil: [ ^value ].
+	parent ifNil: [ ^aBlock value ].
+	^ parent at:name ifAbsent: aBlock.
+]
+
+{ #category : #accessing }
+DiyaStyle >> at: name put: value [
+	style at: name put: value
+]
+
+{ #category : #initialization }
+DiyaStyle >> initialize [ 
+	super initialize.
+	style := Dictionary new.
+	parent := nil
+	
+]
+
+{ #category : #accessing }
+DiyaStyle >> parent [
+	^ parent
+]
+
+{ #category : #accessing }
+DiyaStyle >> parent: anObject [
+	parent := anObject
+]

Diya/DiyaStyleSheet.class.st

@@ -8,16 +8,28 @@ Class {
 }
 
 { #category : #convenience }
-DiyaStyleSheet >> ? sheet [
+DiyaStyleSheet >> ? styleName [
-	^stylesheet at: sheet ifAbsent:[
+	^stylesheet at: styleName ifAbsent:[
-		DiyaCoreAPIError signal: 'Unable to query stylesheet ', sheet	
+		DiyaCoreAPIError signal: 'Unable to query stylesheet ', styleName
 	]. 
 ]
 
 { #category : #initialization }
-DiyaStyleSheet >> define: name styles: styles [
+DiyaStyleSheet >> define: styName extend: parentStyName styles: rules [
-	stylesheet at: name put: styles asDictionary.
+	|parentSheet style|
-	^self
+	parentSheet := self ? parentStyName.
+	style := self define: styName styles: rules.
+	style parent: parentSheet.
+	^style
+	
+]
+
+{ #category : #initialization }
+DiyaStyleSheet >> define: name styles: rules [
+	|style|
+	style := rules asDiyaStyle.
+	stylesheet at: name put: style.
+	^style
 	
 ]
 

Diya/DiyaUIThemesManager.class.st

@@ -50,7 +50,7 @@ DiyaUIThemesManager >> defineDefaultTheme [
 			#xAlign -> #left.
 			#yAlign -> #middle.
 			#iconSize -> 24.
-	 	} 
+	 	}; yourself
 	)
 ]