pharo-graphics / Toplo

A widget framework on top of Bloc
MIT License
19 stars 9 forks source link

Using stamps in style rules declaration for button image size #213

Open LouisePla opened 3 days ago

LouisePla commented 3 days ago

I would like to add stamps in rules declaration to manage button image size but when I use it, I see the icon resizing.

Launching the test, the icon is small (the stamp is not applied) {EAEA6C61-755B-4F3E-B43A-DBCAC1FB4E24}

After 1 second, the icon have the correct size : {3EA194B9-BFC7-4F98-B6D3-8A2805E07AB1}

I add the method with big icon ToButton rules (called in ToBeeTheme > initializeStyleRules:)

initializeBigIconRules
    self select: ToButton asTypeSelector style: [ 
        self select: #bigButton asStampSelector style: [
            self when: ToInstallSkinEvent write: (self property: #icon) with: [ :e | 
                e icon ifNotNil: [ :i | i addStamp: #bigIcon ] ]
                animation: nil 
    ]].
    self select: ToImage asTypeSelector style: [
        self select: #bigIcon asStampSelector style: [
            self when: ToInstallSkinEvent write: (self property: #innerImage)
                with: [ :e | | newSize form newScale |
                    newSize := 200 asPoint.
                    form := e innerFormImage copy.
                    newScale := newSize / form extent.
                    ToImage new innerImage: (form magnifyBy: (newScale x max: newScale y)) ]
                animation: nil ] ]

I test with the code below :

| b i space vPane |
vPane := ToPane vertical.
vPane matchParent.
1 to: 10 do: [ :i | | b |
    b := ToButton new size: 200 asPoint.
    b icon: (ToImage new innerImage: (self iconNamed: #solidMenu)).
    b addStamp: #bigButton.
    vPane addChild: b ].

space := BlSpace new.
space toTheme: ToBeeTheme new.
space root addChild: vPane.
space show.
plantec commented 3 days ago

The visual cascading effect is normal because of the addStamp: in the ToInstallSkinEvent rule. The image need to be installed directly with the right scaled form. The solution I see is to use the withParent: selector.

self
       select: (ToImage asTypeSelector withParent: #bigButton asStampSelector)
       style: [
            self
                when: ToInstallSkinEvent
                write: (self property: #innerImage)
                with: [ :e |
                    | newSize form newScale |
                    newSize := 200 asPoint.
                    form := e innerFormImage copy.
                    newScale := newSize / form extent.
                    (form magnifyBy: (newScale x max: newScale y)) ] ]