1
0
mirror of https://github.com/lxsang/Diya-API.git synced 2025-03-12 18:42:48 +01:00

wip: styling support to graphic node

This commit is contained in:
Dany LE 2022-03-23 00:52:15 +01:00
parent e2adc4f733
commit d70df41681
15 changed files with 139 additions and 190 deletions

View File

@ -2,7 +2,6 @@ Class {
#name : #Diya2DNode, #name : #Diya2DNode,
#superclass : #DiyaNode, #superclass : #DiyaNode,
#instVars : [ #instVars : [
'color',
'vbuffer' 'vbuffer'
], ],
#category : #'Diya-Graphics' #category : #'Diya-Graphics'
@ -22,12 +21,12 @@ Diya2DNode >> boundingBox [
{ #category : #accessing } { #category : #accessing }
Diya2DNode >> color [ Diya2DNode >> color [
^ color ^ self style get: #color.
] ]
{ #category : #accessing } { #category : #accessing }
Diya2DNode >> color: anObject [ Diya2DNode >> color: anObject [
color := anObject style set:#color value: anObject
] ]
{ #category : #accessing } { #category : #accessing }
@ -53,7 +52,6 @@ Diya2DNode >> initialize [
rotation := 0. rotation := 0.
tf := Array2D identity: 3. tf := Array2D identity: 3.
shader := Diya2DShader uniqueInstance. shader := Diya2DShader uniqueInstance.
color := Color white.
vbuffer := nil. vbuffer := nil.
] ]

View File

@ -1,95 +0,0 @@
Class {
#name : #Diya2DNodeStyle,
#superclass : #DiyaNodeStyle,
#instVars : [
'bgcolor',
'color',
'border',
'fontSize',
'fontFamilly',
'borderColor',
'bgcolor2',
'fontStyle'
],
#category : #'Diya-Graphics'
}
{ #category : #accessing }
Diya2DNodeStyle >> bgcolor [
^ bgcolor
]
{ #category : #accessing }
Diya2DNodeStyle >> bgcolor2 [
^ bgcolor2
]
{ #category : #accessing }
Diya2DNodeStyle >> bgcolor2: anObject [
bgcolor2 := anObject
]
{ #category : #accessing }
Diya2DNodeStyle >> bgcolor: anObject [
bgcolor := anObject
]
{ #category : #accessing }
Diya2DNodeStyle >> border [
^ border
]
{ #category : #accessing }
Diya2DNodeStyle >> border: anObject [
border := anObject
]
{ #category : #accessing }
Diya2DNodeStyle >> borderColor [
^ borderColor
]
{ #category : #accessing }
Diya2DNodeStyle >> borderColor: anObject [
borderColor := anObject
]
{ #category : #accessing }
Diya2DNodeStyle >> color [
^ color
]
{ #category : #accessing }
Diya2DNodeStyle >> color: anObject [
color := anObject
]
{ #category : #accessing }
Diya2DNodeStyle >> fontFamilly [
^ fontFamilly
]
{ #category : #accessing }
Diya2DNodeStyle >> fontFamilly: anObject [
fontFamilly := anObject
]
{ #category : #accessing }
Diya2DNodeStyle >> fontSize [
^ fontSize
]
{ #category : #accessing }
Diya2DNodeStyle >> fontSize: anObject [
fontSize := anObject
]
{ #category : #accessing }
Diya2DNodeStyle >> fontStyle [
^ fontStyle
]
{ #category : #accessing }
Diya2DNodeStyle >> fontStyle: anObject [
fontStyle := anObject
]

View File

@ -4,21 +4,29 @@ Class {
#instVars : [ #instVars : [
'texture', 'texture',
'type', 'type',
'border',
'bcolor',
'bbox' 'bbox'
], ],
#category : #'Diya-Graphics' #category : #'Diya-Graphics'
} }
{ #category : #accessing }
Diya2DPrimShape >> border [
^style get: #border
]
{ #category : #accessing }
Diya2DPrimShape >> borderColor [
^style get: #borderColor
]
{ #category : #accessing } { #category : #accessing }
Diya2DPrimShape >> borderColor: c [ Diya2DPrimShape >> borderColor: c [
bcolor := c style set: #borderColor value: c.
] ]
{ #category : #accessing } { #category : #accessing }
Diya2DPrimShape >> borderWidth: w [ Diya2DPrimShape >> borderWidth: w [
border := w style set: #border value: w.
] ]
{ #category : #accessing } { #category : #accessing }
@ -41,19 +49,17 @@ Diya2DPrimShape >> draw [
OpenGL drawArrays: type first:0 count:((vbuffer size )>> 2 ). OpenGL drawArrays: type first:0 count:((vbuffer size )>> 2 ).
"reset value" "reset value"
self texture ifNotNil: [self texture drop.]. self texture ifNotNil: [self texture drop.].
border > 0 ifTrue: [ self drawBorder ]. self border > 0 ifTrue: [ self drawBorder ].
context vao disableAttribute: 0. context vao disableAttribute: 0.
] ]
{ #category : #initialization } { #category : #initialization }
Diya2DPrimShape >> drawBorder [ Diya2DPrimShape >> drawBorder [
"Diya2DShader uniqueInstance use." "Diya2DShader uniqueInstance use."
color = bcolor ifFalse:[ shader setUniform: #u_color value: self borderColor asGL4FArray;
shader setUniform: #u_color value: bcolor asGL4FArray;
setUniform: #u_texture_type value: 0. setUniform: #u_texture_type value: 0.
].
OpenGL OpenGL
lineWidth: border. lineWidth: self border.
self drawLines. self drawLines.
OpenGL lineWidth: 1.0. OpenGL lineWidth: 1.0.
] ]
@ -79,8 +85,6 @@ Diya2DPrimShape >> initialize [
texture := nil. texture := nil.
children := nil. children := nil.
type := GL_TRIANGLES. type := GL_TRIANGLES.
border := 0.
bcolor := Color white.
bbox := Rectangle origin: 0@0 corner: 0@0. bbox := Rectangle origin: 0@0 corner: 0@0.
] ]

View File

@ -80,7 +80,7 @@ DiyaApplicationLauncher >> running [
DiyaApplicationLauncher >> setup [ DiyaApplicationLauncher >> setup [
event := SDL_Event new. event := SDL_Event new.
root addNode: (Diya2DNode new) at: 0@10. root addNode: (Diya2DNode new) at: 0@10.
txtFPS := root addNode:(DiyaText data: 'tick') at: ( self context resolution x - 80)@40. txtFPS := root addNode:(DiyaText data: '') at: ( self context resolution x - 80)@40.
txtFPS extent: 80@40. txtFPS extent: 80@40.
txtFPS fontSize: 18. txtFPS fontSize: 18.
txtFPS color: Color red. txtFPS color: Color red.

View File

@ -1,18 +1,18 @@
Class { Class {
#name : #DiyaDefaultStyle, #name : #DiyaDefaultStyle,
#superclass : #Diya2DNodeStyle, #superclass : #DiyaNodeStyle,
#category : #'Diya-Graphics' #category : #'Diya-Graphics'
} }
{ #category : #initialization } { #category : #initialization }
DiyaDefaultStyle >> initialize [ DiyaDefaultStyle >> initialize [
super initialize. super initialize.
bgcolor := (Color r: 0.2118 g: 0.2118 b: 0.2118). self set: #bgcolor value:(Color r: 0.2118 g: 0.2118 b: 0.2118).
color := Color white. self set: #color value: Color white.
border := 1. self set: #border value: 1.
fontSize := 18. self set: #fontSize value: 18.
fontFamilly := DiyaFontManager uniqueInstance defaultFamily. self set: #fontFamily value: DiyaFontManager uniqueInstance defaultFamily.
fontStyle := DiyaFontManager uniqueInstance defaultStyle. self set: #fontStyle value: DiyaFontManager uniqueInstance defaultStyle.
borderColor := (Color r: 0.051 g: 0.051 b: 0.051). self set: #borderColor value: (Color r: 0.051 g: 0.051 b: 0.051).
bgcolor2 := (Color r: 0.1529 g: 0.1529 b: 0.1529) self set: #bgcolor2 value: (Color r: 0.1529 g: 0.1529 b: 0.1529)
] ]

View File

@ -85,8 +85,8 @@ DiyaEllipse >> ry: anObject [
DiyaEllipse >> setUpShader [ DiyaEllipse >> setUpShader [
super setUpShader. super setUpShader.
self shader self shader
setUniform: #u_border value: border; setUniform: #u_border value: (style get: #border);
setUniform: #u_border_color value: bcolor asGL4FArray; setUniform: #u_border_color value: (style get:#borderColor) asGL4FArray;
setUniform: #u_rx value: rx; setUniform: #u_rx value: rx;
setUniform: #u_ry value: ry. setUniform: #u_ry value: ry.
] ]

View File

@ -16,21 +16,22 @@ DiyaExampleApp >> main [
{ #category : #accessing } { #category : #accessing }
DiyaExampleApp >> setup [ DiyaExampleApp >> setup [
|node node1 ell txtNode icon| |node node1 ell label icon|
txtNode := root addNode: (DiyaText data: 'Event') at: 10@55. label := root addNode: (DiyaLabel new) at: 10@30.
txtNode color: Color orange. label extent: 250@30.
txtNode extent: 200@40. label color: Color orange.
label icon: 16rF254.
node1 := root addNode: (DiyaRectangle size:100@150 shader: DiyaExampleShader uniqueInstance) at: 100 @ 400. node1 := root addNode: (DiyaRectangle size:100@150 shader: DiyaExampleShader uniqueInstance) at: 100 @ 400.
node1 rotation: (Float pi / 8.0). node1 rotation: (Float pi / 8.0).
node1 scale: 1.2@1.2. node1 scale: 1.2@1.2.
node1 on: #(mousebuttondown fingerdown) do:[:e| node1 on: #(mousebuttondown fingerdown) do:[:e|
txtNode data: 'Mouse ', (node1 local: e mapped worldPosition) asIntegerPoint asString]. label txt: 'Mouse ', (node1 local: e mapped worldPosition) asIntegerPoint asString].
node := root addNode: (DiyaImageView from:'mrsang.png') at: 250 @ 430. node := root addNode: (DiyaImageView from:'mrsang.png') at: 250 @ 430.
node color: (Color r: 1.0 g:1.0 b:1.0 alpha:1.0 ). node color: (Color r: 1.0 g:1.0 b:1.0 alpha:1.0 ).
node borderColor: Color red. "node borderColor: Color red."
node borderWidth: 3.0. "node borderWidth: 3.0."
node extent:200@200. node extent:200@200.
node := root addNode: (DiyaText data: String loremIpsum) at: 10@400. node := root addNode: (DiyaText data: String loremIpsum) at: 10@400.
@ -49,7 +50,7 @@ DiyaExampleApp >> setup [
"node rotation: Float pi / 2.0." "node rotation: Float pi / 2.0."
ell textureNamed:'mrsang.png'. ell textureNamed:'mrsang.png'.
ell on: #(mousebuttondown fingerdown) do:[:e| ell on: #(mousebuttondown fingerdown) do:[:e|
txtNode data: 'Ellipse clicked', (ell local:e mapped worldPosition) asIntegerPoint asString]. label txt: 'Ellipse clicked', (ell local:e mapped worldPosition) asIntegerPoint asString].
node := root addNode: (DiyaConvexPolygon points:{250@100. 400@250. 450@80. 350@60}). node := root addNode: (DiyaConvexPolygon points:{250@100. 400@250. 450@80. 350@60}).
node color: Color green. node color: Color green.

View File

@ -34,7 +34,7 @@ DiyaFontIcon >> drawText [
DiyaFontIcon >> fontName: name style: face size: size [ DiyaFontIcon >> fontName: name style: face size: size [
super fontName: name style:face size: size. super fontName: name style:face size: size.
data ifNil: [ ^ self ]. data ifNil: [ ^ self ].
bbox := Rectangle origin: 0@0 corner: ((data size) * (self fontSize) ) @ self fontSize. bbox := Rectangle origin: 0@0 corner: ((data size) * size ) @ size.
] ]
{ #category : #initialization } { #category : #initialization }
@ -49,7 +49,6 @@ DiyaFontIcon >> initialize [
self fontName: 'bootstrap-icons' style: 'Regular' size: 16. self fontName: 'bootstrap-icons' style: 'Regular' size: 16.
vbuffer := FFIExternalArray externalNewType: GLfloat size:24. vbuffer := FFIExternalArray externalNewType: GLfloat size:24.
vbuffer autoRelease. vbuffer autoRelease.
style := DiyaFontManager uniqueInstance defaultIconSet.
] ]
{ #category : #initialization } { #category : #initialization }

View File

@ -8,19 +8,6 @@ Class {
#category : #'Diya-Widgets' #category : #'Diya-Widgets'
} }
{ #category : #accessing }
DiyaLabel >> applyStyle [
txt color: style color.
txt fontName: style fontFamily style: style fontStyle size: style fontSize.
txt wordWrap: true.
icon ifNotNil: [
icon color: style color.
icon fontSize: style fontSize
].
"update extent"
]
{ #category : #accessing } { #category : #accessing }
DiyaLabel >> icon [ DiyaLabel >> icon [
^ icon ^ icon
@ -29,8 +16,8 @@ DiyaLabel >> icon [
{ #category : #accessing } { #category : #accessing }
DiyaLabel >> icon: anObject [ DiyaLabel >> icon: anObject [
icon := nil. icon := nil.
anObject isNumber ifTrue: [ icon := root addNode: (DiyaFontIcon data: anObject) ]. anObject isNumber ifTrue: [ icon := self addNode: (DiyaFontIcon data: anObject) ].
anObject isString ifTrue: [ icon := root addNode: (DiyaImageView from: anObject)]. anObject isString ifTrue: [ icon := self addNode: (DiyaImageView from: anObject)].
icon ifNil: [ ^ DiyaCoreAPIError signal: 'Invalid icon identification']. icon ifNil: [ ^ DiyaCoreAPIError signal: 'Invalid icon identification'].
dirty := true. dirty := true.
] ]
@ -38,9 +25,10 @@ DiyaLabel >> icon: anObject [
{ #category : #initialization } { #category : #initialization }
DiyaLabel >> initialize [ DiyaLabel >> initialize [
super initialize. super initialize.
txt := root addNode:(DiyaText new). txt := self addNode:(DiyaText data: '').
icon := nil. icon := nil.
self extent: 0@0. self extent: 0@0.
"style := DiyaDefaultStyle uniqueInstance."
] ]
{ #category : #accessing } { #category : #accessing }
@ -53,3 +41,17 @@ DiyaLabel >> txt: anObject [
txt data: anObject. txt data: anObject.
dirty := true dirty := true
] ]
{ #category : #accessing }
DiyaLabel >> updateLayout [
|offset isize|
offset := 0.
isize := style get: #fontSize.
icon ifNotNil: [
offset := isize + (isize >> 1).
icon position: 0 @ (extent y - isize)
].
txt extent: (extent x - offset) @ (extent y).
txt position: offset @ (extent y)
]

View File

@ -32,17 +32,12 @@ DiyaLine class >> points: points [
yourself yourself
] ]
{ #category : #accessing }
DiyaLine >> borderColor: c [
color := c
]
{ #category : #initialization } { #category : #initialization }
DiyaLine >> draw [ DiyaLine >> draw [
OpenGL OpenGL
"enable: GL_LINE_SMOOTH; "enable: GL_LINE_SMOOTH;
hint: GL_LINE_SMOOTH_HINT mode: GL_NICEST;" hint: GL_LINE_SMOOTH_HINT mode: GL_NICEST;"
lineWidth: border. lineWidth: self border.
super draw. super draw.
OpenGL lineWidth: 1.0"; OpenGL lineWidth: 1.0";
disable: GL_LINE_SMOOTH". disable: GL_LINE_SMOOTH".
@ -78,7 +73,7 @@ DiyaLine >> initialize [
vbuffer := FFIExternalArray externalNewType: GLfloat size:8. vbuffer := FFIExternalArray externalNewType: GLfloat size:8.
vbuffer autoRelease. vbuffer autoRelease.
type := GL_LINES. type := GL_LINES.
border := 1.0 style set: #border value: 0
] ]
{ #category : #'as yet unclassified' } { #category : #'as yet unclassified' }

View File

@ -12,7 +12,8 @@ Class {
'context', 'context',
'dirty', 'dirty',
'ehandlers', 'ehandlers',
'root' 'root',
'style'
], ],
#pools : [ #pools : [
'OpenGLConstants', 'OpenGLConstants',
@ -39,6 +40,7 @@ DiyaNode >> addNode: node at: pos [
node position: pos. node position: pos.
children add: node. children add: node.
node root: self root. node root: self root.
node style parent: style.
^ node ^ node
] ]
@ -76,6 +78,7 @@ DiyaNode >> initialize [
children := OrderedCollection new. children := OrderedCollection new.
dirty := false. dirty := false.
ehandlers := Dictionary new. ehandlers := Dictionary new.
style := DiyaNodeStyle new.
root := nil. root := nil.
] ]
@ -128,7 +131,8 @@ DiyaNode >> register: aBlock to: eventName [
{ #category : #accessing } { #category : #accessing }
DiyaNode >> render [ DiyaNode >> render [
dirty ifTrue:[dirty := self update not]. dirty ifTrue:[
dirty := self update not].
shader ifNotNil: [ self setUpShader ]. shader ifNotNil: [ self setUpShader ].
self draw. self draw.
children ifNil: [ ^self ]. children ifNil: [ ^self ].
@ -199,9 +203,20 @@ DiyaNode >> shader: anObject [
shader := anObject shader := anObject
] ]
{ #category : #accessing }
DiyaNode >> style [
^style
]
{ #category : #accessing }
DiyaNode >> style: aStyle [
style := aStyle.
dirty := true.
parent ifNotNil: [ style parent: parent style ]
]
{ #category : #accessing } { #category : #accessing }
DiyaNode >> tf [ DiyaNode >> tf [
parent ifNil: [ ^ DiyaCoreAPIError signal: 'TF: This node is not attached to the main tree' ].
^ tf ^ tf
] ]

View File

@ -1,5 +1,41 @@
Class { Class {
#name : #DiyaNodeStyle, #name : #DiyaNodeStyle,
#superclass : #DiyaBaseObject, #superclass : #DiyaBaseObject,
#instVars : [
'styles',
'parent'
],
#category : #'Diya-Graphics' #category : #'Diya-Graphics'
} }
{ #category : #'as yet unclassified' }
DiyaNodeStyle class >> inherit: parent [
^self new parent: parent; yourself
]
{ #category : #initialization }
DiyaNodeStyle >> get: styleName [
^ styles at: styleName ifAbsent: [ parent ifNotNil: [ parent get: styleName ] ifNil: nil]
]
{ #category : #initialization }
DiyaNodeStyle >> initialize [
super initialize.
styles := Dictionary new.
parent := nil
]
{ #category : #accessing }
DiyaNodeStyle >> parent [
^ parent
]
{ #category : #accessing }
DiyaNodeStyle >> parent: anObject [
parent := anObject
]
{ #category : #initialization }
DiyaNodeStyle >> set: styleName value: value [
styles at: styleName put: value
]

View File

@ -11,7 +11,9 @@ DiyaRootNode >> boundingBox [
{ #category : #accessing } { #category : #accessing }
DiyaRootNode >> draw [ DiyaRootNode >> draw [
OpenGL clearColorR: 0.0 G: 0.0 B: 0.0 A:0. |c|
c := style get: #bgcolor.
OpenGL clearColorR: c red G: c green B: c blue A: c alpha.
OpenGL clear: GL_COLOR_BUFFER_BIT. OpenGL clear: GL_COLOR_BUFFER_BIT.
context vbo bind: GL_ARRAY_BUFFER. context vbo bind: GL_ARRAY_BUFFER.
] ]
@ -27,6 +29,7 @@ DiyaRootNode >> initialize [
parent := self. parent := self.
shader := nil. shader := nil.
root := self. root := self.
style := DiyaDefaultStyle new
] ]
{ #category : #'as yet unclassified' } { #category : #'as yet unclassified' }

View File

@ -2,13 +2,10 @@ Class {
#name : #DiyaText, #name : #DiyaText,
#superclass : #Diya2DPrimShape, #superclass : #Diya2DPrimShape,
#instVars : [ #instVars : [
'fontStyle',
'fontSize',
'fontName',
'data', 'data',
'style',
'wrap', 'wrap',
'texheight' 'texheight',
'font'
], ],
#pools : [ #pools : [
'FT2Types' 'FT2Types'
@ -76,25 +73,21 @@ DiyaText >> extent: v [
{ #category : #accessing } { #category : #accessing }
DiyaText >> fontName [ DiyaText >> fontName [
^ fontName ^ self style get: #fontFamily
] ]
{ #category : #initialization } { #category : #initialization }
DiyaText >> fontName: name style: face size: size [ DiyaText >> fontName: name style: face size: size [
name ifNotNil: [fontName := name]. name ifNotNil: [style set:#fontFamily value: name].
face ifNotNil: [fontStyle := face]. face ifNotNil: [style set: #fontStyle value:face].
style set: #fontSize value: size.
fontName := fontName ifNil: [DiyaFontManager uniqueInstance defaultFamily]. font := nil.
fontStyle := fontStyle ifNil: [DiyaFontManager uniqueInstance defaultStyle].
fontSize := size.
style := DiyaFontManager uniqueInstance style: self fontStyle from: self fontName.
dirty := true. dirty := true.
] ]
{ #category : #accessing } { #category : #accessing }
DiyaText >> fontSize [ DiyaText >> fontSize [
^ fontSize ^ self style get:#fontSize
] ]
{ #category : #initialization } { #category : #initialization }
@ -104,7 +97,7 @@ DiyaText >> fontSize: size [
{ #category : #accessing } { #category : #accessing }
DiyaText >> fontStyle [ DiyaText >> fontStyle [
^ fontStyle ^ self style get: #fontStyle
] ]
{ #category : #accessing } { #category : #accessing }
@ -147,12 +140,10 @@ DiyaText >> getLinebreakIndices: delta [
{ #category : #initialization } { #category : #initialization }
DiyaText >> initialize [ DiyaText >> initialize [
super initialize. super initialize.
"self fontName: 'Ubuntu' style:'Regular' size: 16."
data := nil. data := nil.
wrap := false. wrap := false.
bbox := nil.
texheight := 0. texheight := 0.
self fontSize: 16 style set: #border value: 0
] ]
{ #category : #'as yet unclassified' } { #category : #'as yet unclassified' }
@ -165,8 +156,9 @@ DiyaText >> lastSeparatorFrom: index [
{ #category : #accessing } { #category : #accessing }
DiyaText >> texture [ DiyaText >> texture [
|tex| | tex|
tex := style textureOf: self fontSize. font:= font ifNil: [ DiyaFontManager uniqueInstance style: self fontStyle from: self fontName ].
tex := font textureOf: self fontSize.
texheight = tex height ifFalse: [ texheight = tex height ifFalse: [
texheight := tex height. texheight := tex height.
self update. self update.

View File

@ -2,7 +2,6 @@ Class {
#name : #DiyaWidget, #name : #DiyaWidget,
#superclass : #Diya2DNode, #superclass : #Diya2DNode,
#instVars : [ #instVars : [
'style',
'extent' 'extent'
], ],
#category : #'Diya-Widgets' #category : #'Diya-Widgets'
@ -13,11 +12,6 @@ DiyaWidget class >> fromStyle: aStyle [
^self new style: aStyle; yourself ^self new style: aStyle; yourself
] ]
{ #category : #accessing }
DiyaWidget >> applyStyle [
self subclassResponsibility
]
{ #category : #geometry } { #category : #geometry }
DiyaWidget >> extent: size [ DiyaWidget >> extent: size [
extent := size. extent := size.
@ -38,11 +32,16 @@ DiyaWidget >> style [
{ #category : #accessing } { #category : #accessing }
DiyaWidget >> style: anObject [ DiyaWidget >> style: anObject [
style := anObject. style := anObject.
self applyStyle. dirty := true
] ]
{ #category : #accessing } { #category : #accessing }
DiyaWidget >> update [ DiyaWidget >> update [
self applyStyle. self updateLayout.
^ true ^ true
] ]
{ #category : #accessing }
DiyaWidget >> updateLayout [
self subclassResponsibility
]