How can adjust resizable corner of a node while resizable:true is set?

My node object contains a picture inside and a text bellow of it.
When i set resizable:true in node template and renders the resizable corners on my node object. I added a addDiagramListener on partResized event to scale the picture size and text font based on resized area. The problem arises when i resize the node to smaller object, the selected corners crop the text and part of the picture(left picture). After that i need to adjust the corners again to make the text and picture be visible(middle picture). Three pictures demonstrate my issue. The right most picture is normal node. So how can i adjust the selected area to be fit on blue line rounded the node?

Thanks for any help.

Use a “Viewbox” Panel: GoJS Panels -- Northwoods Software
If you resize the whole Viewbox panel you do not need to implement any event handler to change the font size of the TextBlock. Here is the basic outline for your node template:

Node, "Viewbox", resizable
    Panel, "Vertical"
        Picture, source, width, height

Thank you walter. It worked greatly. You were my lifesaver like always.
My next plan is to add some panels containing ports on the nodes borders (you can see 2 red ports on top of the above right most picture). formerly (before use Viewbox in my node template) i used the Table template (instead of Viewbox) to add panels on my node. So provided using Viewbox, how can i add port panels to my node object?

Have the Viewbox Panel be an element in your Table Panel, and set Node.resizeObjectName to the name of that Viewbox Panel.