12.0p Bug with animateResize

[Blama]

Hi Isomorphic,

please see this problem with Canvas.animateResize(). It's happening in this modified online showcase (v12.0p_2019-12-07 and also way older versions)
The issue is that the resize to the small version is not happening. This seems to be somehow timing related, as the problem does not exist with an animateResizeTime: 1.
Please see and test the comments in the sample as well.

I'd expect the size of the "non expanded" red/green at the top to be as the blue placeholders.
I created this sample as I have another, but perhaps related problem. For me in my application, the scollbar (that I can see in the modified sample after load at FullHD resolution) is not always displayed, again something spurious.

isc.VLayout.create({
    ID: "mainVLayout",
    width: 400,
    height: 700,
    overflow: "auto",
    maxWidth: 400,
    membersMargin: 20,
    members: [
        isc.VLayout.create({
            ID: "innerVLayout1",
            animateResizeTime: 400, // No problem with 1, sometimes problem with 75
            backgroundColor: "red",
            width: 200,
            height: 100,
            align: "center", // bottom even more strange
            members: [
                isc.Img.create({
                    layoutAlign: "center",
                    width: 48,
                    height: 48,
                    src: "[SKINIMG]NavigationBar/miniNav_up.svg"
                }),
                isc.Label.create({
                    height: 50,
                    padding: 4,
                    backgroundColor: "#ffffd0",
                    align: "center",
                    valign: "center",
                    wrap: false,
                    showEdges: true,
                    showShadow: true,
                    contents: "innerVLayout1 - action"
                })
            ],
            click: function() {
                this.animateResize(null, 300);
                innerVLayout2.animateResize(null, 100);

            }
        }), isc.VLayout.create({
            ID: "innerVLayout2",
            animateResizeTime: 400, // No problem with 1, sometimes problem with 75
            backgroundColor: "green",
            width: 200,
            height: 100,
            align: "center", // bottom even more strange
            members: [
                isc.Img.create({
                    layoutAlign: "center",
                    width: 48,
                    height: 48,
                    src: "[SKINIMG]NavigationBar/miniNav_up.svg"
                }),
                isc.Label.create({
                    height: 50,
                    padding: 4,
                    backgroundColor: "#ffffd0",
                    align: "center",
                    valign: "center",
                    wrap: false,
                    showEdges: true,
                    showShadow: true,
                    contents: "innerVLayout2 - action"
                })
            ],
            click: function() {
                this.animateResize(null, 300);
                innerVLayout1.animateResize(null, 100);

            }
        }), isc.VLayout.create({
            ID: "innerVLayout3",
            backgroundColor: "blue",
            width: 200,
            height: 100,
            align: "center",
            members: [
                isc.Img.create({
                    layoutAlign: "center",
                    width: 48,
                    height: 48,
                    src: "[SKINIMG]NavigationBar/miniNav_up.svg"
                }),
                isc.Label.create({
                    height: 50,
                    padding: 4,
                    backgroundColor: "#ffffd0",
                    align: "center",
                    valign: "center",
                    wrap: false,
                    showEdges: true,
                    showShadow: true,
                    contents: "innerVLayout3 - filler"
                })
            ]
        }), isc.VLayout.create({
            ID: "innerVLayout4",
            backgroundColor: "blue",
            width: 200,
            height: 100,
            align: "center",
            members: [
                isc.Img.create({
                    layoutAlign: "center",
                    width: 48,
                    height: 48,
                    src: "[SKINIMG]NavigationBar/miniNav_up.svg"
                }),
                isc.Label.create({
                    height: 50,
                    padding: 4,
                    backgroundColor: "#ffffd0",
                    align: "center",
                    valign: "center",
                    wrap: false,
                    showEdges: true,
                    showShadow: true,
                    contents: "innerVLayout4 - filler"
                })
            ]
        }), isc.VLayout.create({
            ID: "innerVLayout5",
            backgroundColor: "blue",
            width: 200,
            height: 100,
            align: "center",
            members: [
                isc.Img.create({
                    layoutAlign: "center",
                    width: 48,
                    height: 48,
                    src: "[SKINIMG]NavigationBar/miniNav_up.svg"
                }),
                isc.Label.create({
                    height: 50,
                    padding: 4,
                    backgroundColor: "#ffffd0",
                    align: "center",
                    valign: "center",
                    wrap: false,
                    showEdges: true,
                    showShadow: true,
                    contents: "innerVLayout5 - filler"
                })
            ]
        }), isc.Label.create({
            contents: "Collapse all",
            left: 120,
            click: function() {
                innerVLayout2.animateResize(null, 100);
                innerVLayout2.animateResize(null, 100);
            }
        })
    ]
});
innerVLayout1.click();

Best regards
Blama

[Isomorphic]

This should be resolved now back to SC 11.1p in the nightly builds dated 2019-12-12, and back to SC 10.1p in tomorrow's nightlies.

[Blama]

Hi Isomorphic,

this definitely changed and got better as the end sizes are correct using v12.0p_2019-12-12, but is still somewhat strange:

• Clicking 1 and 2 is a smooth change first, but in the end there is a jump
• The jump is not there with innerVLayout1.align:top and innerVLayout2.align:top, but if both are set to center or bottom
• If both are set to center or bottom, during resize, the scroll bar size changes. This is unexpected and does not happen with top.

[Isomorphic]

Currently, Canvas.layoutChildren() is only called at the end of an animation to maximize performance. In the case of your sample, as the VLayout's nominal size shrinks during the animation, the label's positioning eventually causes the VLayout to overflow and not shrink any further. We may consider providing a setting to run layoutChildren() during an animation, but in such a mode the performance overhead would be higher.

[Blama]

Hi Isomorphic,

OK, thanks for the answer. I already assumed such a thing. A configuration for this might be useful if it is sth that does not run too often and where one wants it to look crisp.

Best regards
Blama

[Isomorphic]

We've added a new property to control child relayout during animated moves, Canvas.animateResizeLayoutMode. If large hierarchies of widgets require relayout, this may not be desirable, but you should see it work smoothly if applied to your sample code above.

[Blama]

Hi Isomorphic,

thank you, it's looking fine now using v12.0p_2020-01-04 and the code below.

It does not work though if I set animateResizeLayoutMode: "always" for mainVLayout only and not also on innerVLayout1/innerVLayout2, so in this case it does not inherit down.
I'm not sure if this is correct, as you are speaking about "If large hierarchies of widgets require relayout" in #5.
I think it's fine the way it is for me, I just think that the way it is does perhaps not match #5.

Modified sample:

isc.VLayout.create({
    ID: "mainVLayout",
    width: 400,
    height: 700,
    overflow: "auto",
    maxWidth: 400,
    membersMargin: 20,
    members: [
        isc.VLayout.create({
            ID: "innerVLayout1",
[B]           animateResizeLayoutMode: "always",[/B]
            animateResizeTime: 400, // No problem with 1, sometimes problem with 75
            backgroundColor: "red",
            width: 200,
            height: 100,
            align: "center", // bottom even more strange
            members: [
                isc.Img.create({
                    layoutAlign: "center",
                    width: 48,
                    height: 48,
                    src: "[SKINIMG]NavigationBar/miniNav_up.svg"
                }),
                isc.Label.create({
                    height: 50,
                    padding: 4,
                    backgroundColor: "#ffffd0",
                    align: "center",
                    valign: "center",
                    wrap: false,
                    showEdges: true,
                    showShadow: true,
                    contents: "innerVLayout1 - action"
                })
            ],
            click: function() {
                this.animateResize(null, 300);
                innerVLayout2.animateResize(null, 100);

            }
        }), isc.VLayout.create({
            ID: "innerVLayout2",
[B]           animateResizeLayoutMode: "always",[/B]
            animateResizeTime: 400, // No problem with 1, sometimes problem with 75
            backgroundColor: "green",
            width: 200,
            height: 100,
            align: "center", // bottom even more strange
            members: [
                isc.Img.create({
                    layoutAlign: "center",
                    width: 48,
                    height: 48,
                    src: "[SKINIMG]NavigationBar/miniNav_up.svg"
                }),
                isc.Label.create({
                    height: 50,
                    padding: 4,
                    backgroundColor: "#ffffd0",
                    align: "center",
                    valign: "center",
                    wrap: false,
                    showEdges: true,
                    showShadow: true,
                    contents: "innerVLayout2 - action"
                })
            ],
            click: function() {
                this.animateResize(null, 300);
                innerVLayout1.animateResize(null, 100);

            }
        }), isc.VLayout.create({
            ID: "innerVLayout3",
            backgroundColor: "blue",
            width: 200,
            height: 100,
            align: "center",
            members: [
                isc.Img.create({
                    layoutAlign: "center",
                    width: 48,
                    height: 48,
                    src: "[SKINIMG]NavigationBar/miniNav_up.svg"
                }),
                isc.Label.create({
                    height: 50,
                    padding: 4,
                    backgroundColor: "#ffffd0",
                    align: "center",
                    valign: "center",
                    wrap: false,
                    showEdges: true,
                    showShadow: true,
                    contents: "innerVLayout3 - filler"
                })
            ]
        }), isc.VLayout.create({
            ID: "innerVLayout4",
            backgroundColor: "blue",
            width: 200,
            height: 100,
            align: "center",
            members: [
                isc.Img.create({
                    layoutAlign: "center",
                    width: 48,
                    height: 48,
                    src: "[SKINIMG]NavigationBar/miniNav_up.svg"
                }),
                isc.Label.create({
                    height: 50,
                    padding: 4,
                    backgroundColor: "#ffffd0",
                    align: "center",
                    valign: "center",
                    wrap: false,
                    showEdges: true,
                    showShadow: true,
                    contents: "innerVLayout4 - filler"
                })
            ]
        }), isc.VLayout.create({
            ID: "innerVLayout5",
            backgroundColor: "blue",
            width: 200,
            height: 100,
            align: "center",
            members: [
                isc.Img.create({
                    layoutAlign: "center",
                    width: 48,
                    height: 48,
                    src: "[SKINIMG]NavigationBar/miniNav_up.svg"
                }),
                isc.Label.create({
                    height: 50,
                    padding: 4,
                    backgroundColor: "#ffffd0",
                    align: "center",
                    valign: "center",
                    wrap: false,
                    showEdges: true,
                    showShadow: true,
                    contents: "innerVLayout5 - filler"
                })
            ]
        }), isc.Label.create({
            contents: "Collapse all",
            left: 120,
            click: function() {
                innerVLayout2.animateResize(null, 100);
                innerVLayout2.animateResize(null, 100);
            }
        })
    ]
});
//innerVLayout1.click();

Thank you & Best regards
Blama

[Isomorphic]

Hi Isomorphic,

thank you, it's looking fine now using v12.0p_2020-01-04 and the code below.

It does not work though if I set animateResizeLayoutMode: "always" for mainVLayout only and not also on innerVLayout1/innerVLayout2, so in this case it does not inherit down.

There was no claim that it would be inherited. For maximum flexibility each canvas in a hierarchy can set it independently. If you want to to change the default behavior, you can modify the class prototype.

I'm not sure if this is correct, as you are speaking about "If large hierarchies of widgets require relayout" in #5.
I think it's fine the way it is for me, I just think that the way it is does perhaps not match #5.

The caution about using it for a"large hierarchy of widgets" was to cover the case of applying it to all widgets in the hierarchy. If you look at the documentation linked above, it specifically states that the property affects child layout, rather than, say, descendant layout. However, we can make this more explicit.