After Effects dockable (panel) wrapper

[joonaspaakko]

Currently the generated dialog can't be docked like native panels in After Effects without manually adding the wrapper. I'm planning to add this as an export option so users don't have to add it themselves...

[joonaspaakko]

This has now been added. I decided to trim it down to essentials, so instead of a wrapper, it's just extra code here and there that makes it work as a dockable panel. You can use the function wrapper option together with this one if you want.

Few important things:

• The scripts needs to be put in the /Scripts/ScriptUI Panels/ folder so that the panel can be docked.
• The window type palette is used on export no matter what it is set as in SDB's properties panel.

[jetrotal]

Hi! I'm testing the wrapper right now. I'm finding some hiccups with it:

First, it doubles the Panel name:

this can be solved by adding an if condition before the defining the dialog.text:
if (!(panelGlobal instanceof Panel)) dialog.text = "fontController";

But, it's kinda a bummer to add it everytime i update the layout.

---

The other problem is that, when i open the dialog as a scriptUI panel,
it always comes with a draggable border that cuts a part of my panel by default:

that doesn't happen when i execute it as a script:

I tried to adapt the solution from here:
https://community.adobe.com/t5/after-effects/how-do-i-make-scriptui-generated-by-https-scriptui-joonas-me-dockable-in-after-effects/m-p/10919532#M103842

but, i guess it's not possible to fix this issue without wrapping everything inside a function.

---

maybe i broke something in my layout, here it is for reference:

{"activeId":0,"items":{"item-0":{"id":0,"type":"Dialog","parentId":false,"style":{"enabled":true,"varName":null,"windowType":"Dialog","creationProps":{"su1PanelCoordinates":false,"maximizeButton":false,"minimizeButton":false,"independent":false,"closeButton":true,"borderless":false,"resizeable":false},"text":"fontController","preferredSize":[0,0],"margins":[0,0,0,0],"orientation":"column","spacing":0,"alignChildren":["center","top"]}},"item-4":{"id":4,"type":"IconButton","parentId":17,"style":{"enabled":true,"varName":"btReveal","text":"","preferredSize":[0,0],"creationProps":{"style":"toolbutton","toggle":false},"iconButtonStroke":false,"image":["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAlCAYAAADFniADAAAB6UlEQVRYhe3XQY6bMBQG4P+ZbKIgpUeolF2ETI6QnqBzg2ZukCP0BtMblN6AIzAnmPqJLVJ6gqYSzirodVFo0xEBD2PSLvg3xMSWPyFsP4ApU6b8CTM/5Hke32Iu5dKJmT8D2FdVld0CRo6gXdMWkWMQBNsoiszNUUVRLMuyzIho0/a/iOziOP4yZFJmfr9YLLLVavXDGdUHuoSFYZhaazv7PRuzIaJPIvI1DMNtG2zWNtBam/aBAICIEmvtVkRSInrjgiKi5rqx1qYA3jmhlFL7qqoyh4kSrfUjM9+5gOrsAOzqd3PfCr82Ms/zuAeWaK3vX4D5HWZ+UEol1xZL5+rrgCWz2ezjer3+NgTVl859KooiEwTBVkSOlyAAyfl8PhhjPoyBckqe57Ex5nu9ZwH4tX8xs/xzWFEUy8t7Y8GcjhkAqKoqPZ1Of62W+kVPiCjxCXNGEdHbtvtjwJxRXfEN84IC/MK8oQB/MK8owA/MOwp4PWwUFPA62GgoYDhsVBQwDNZaT/mO1vqemVHDQETHrnLY6Uk1XzAi4lz2tsFQPzEAaVmW2fOz1BnV1FR18+6yUhiQpPlxUQ6/HDWfzw8ADk1bRLJrffuitX5sYCJyVEq1lsNOKYpiaYx58nXg3vJre8qU/zY/AW3BHAWKhb96AAAAAElFTkSuQmCC"],"alignment":null,"helpTip":""}},"item-5":{"id":5,"type":"IconButton","parentId":17,"style":{"enabled":true,"varName":"btReset","text":"","preferredSize":[0,0],"creationProps":{"style":"toolbutton","toggle":false},"iconButtonStroke":false,"image":["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAlCAYAAADFniADAAAB50lEQVRYhe3WwXGbQBQG4P/t6qKT1YFUAFqpg6iEdBDcgdIB6cCuwLiCpINQgnaH4cYMJfiARgdmeTnYzMgyinbxokOid4PH8r6BfQ+AW9ziPwi6dEFRFHNrbTzk5sy8E0JUURTpoChjzBcA2RAUESVt226llBsfmBhSzCeIaGatzfI8X7muGR0F+MOuggL8YFdDAe6wyZiItm0rIURyAoO1dgPg7Mb3RaUAYteLiShl5r7zGYDHc+ucXx8zx0qpeyJKXNcMDacnRUSJUuoZAJbL5Q9jzAIAlFL3PsWMMb8BbIKg2rbd5nn+K4oiXRTFvGmaNYDZWxHnYOY10cV57fykZtbaTGu9bZrmgYhmb6mFD8oF5IzqYHjd6KNHqDmVCiHWzPwyMB8W1XVlFEVaSrnpKZxeyIdFMfOLlHLXHfcUTo87dDqdVgCqUVF9n40OBuDhGFSW5V1d1xkRrUdF/Q2mlPo+BBQEdQ42FBQMdQT7UPhwOCzgOc+CoZg5Xq1Wz6fnfbouKKoPVBTFfCgsyJw6BRljnpqm2fV15dXnVFmWd8aYnwDivs1/1Tmltf7WdRmAr6f5Drbf71OXLvz073D3oa7ruiKixTm4MeYd+FOoyWRSWWsTB5xLbge8/ru74G5xi386/gDlhS/SlN+vEQAAAABJRU5ErkJggg=="],"alignment":null,"helpTip":""}},"item-6":{"id":6,"type":"IconButton","parentId":17,"style":{"enabled":true,"varName":"btExtract","text":"","preferredSize":[0,0],"creationProps":{"style":"toolbutton","toggle":false},"iconButtonStroke":false,"image":["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAlCAYAAADFniADAAACF0lEQVRYhe3WXW7aQBQF4HPGvDkS2QFIvCEY0xWUHYQdhB2U7oDugCU4OyArqLsDPEJ+s0R3QCTejOf2oSZCUTDjn6ipxHmxbM3P52v52sAtt3zCpGnaNcY8tLWearpAmqbdw+EQAVjHcfzYnASwDRDJyemaiMyDIHj6J6j3QG3BaqHKQG3AKqNcQE1hlVBVQE1gzqg6oLowJ1QTUB3YVVQboKqw2i3BGCOlC5PL8Xj8o87ajTv6R+SGcs2nRHVcBiVJ0svzfG6t3VVthHXmOlVqOBz+ttYuSIZpmnaLy1HZHBHZAECWZTMRWVZpKc6Pj+QaAA6Hw6zYNCwB7X3fj4rTRXGM3h/dAAVgfb5JEARPp2q8Dcn5YDB4McY8kOy/QbaH0lo/i8iO5CSO428F7ItSagIgBBCRXHY6nb7W+jlN066IrABAKbUaDAYvrns1+vO8lO12G+R5HpKciMj+7u6uXwXl9Pa5JEmSXpZlM5Iza+2UJERk73netAoIqFCpOI4fSc4BQEQmJO+vTAmVUqvRaBQnSdID/r7FLns5V0op1ReRKQCQF+9lTXLjeV54AhhjvmZZtiY5A9AcZYz5qZRajEaj2PO88Hg8RpfG+r6/ufSYSM58398ArxWfaK2/10IBmFpr74HX0jvd6Xm01r/Oz4uKlzbS//bbFxljWttQRIAr3b0URXLZmuYs1trdR6x7yy2X8gdQdSSBDu4tugAAAABJRU5ErkJggg=="],"alignment":null,"helpTip":""}},"item-8":{"id":8,"type":"Group","parentId":18,"style":{"enabled":true,"varName":null,"preferredSize":[0,0],"margins":[5,1,1,0],"orientation":"column","spacing":1,"alignChildren":["center","center"],"alignment":null}},"item-9":{"id":9,"type":"DropDownList","parentId":8,"style":{"enabled":true,"varName":"presetList","text":"DropDownList","listItems":"Default Shape,Linear Shape  [ Full ],Linear Shape \n [ Half ],Linear Shape  [ Single ],V Shape, U Shape","preferredSize":[153,0],"alignment":"center","selection":0,"helpTip":"Select a Preset for your Curve Controller"}},"item-14":{"id":14,"type":"IconButton","parentId":15,"style":{"enabled":true,"varName":"btApply","text":"","preferredSize":[0,74],"creationProps":{"style":"toolbutton","toggle":false},"iconButtonStroke":false,"image":["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAA8CAYAAADhR3NQAAAC+klEQVRoge2XUY7aMBCGZxz2ZTcS3AAkv0WRww2aGyw9QekN2BtwBHoDegN6gqYnKIkiv1nK3gAk5ykR04cmyJgAu9qUl/p/wmYm/jwzZAYAJycnJycnJycnp/9WaG9kWUb3hhBCnHGc6N5QXeexewK8VQN7g4jmSqmh1nrOGBsR0bTZTzzPS8IwTO8O5fv+RmudIOKUiAAAEkRMiGjXAqVp+gUR541LIYT4+s+gmggliNhGZxFF0bcOvwUATNuFlHIZBMFrX1AnNVWW5eoWkJRy3Nq0qut60RfQGRQRzdrPFyLUCWD69QqVZdkzIo6aZXLJoQsAESd5nke9Q9kp6VKe5xEiTrq+OxwOvaWw8z3VvgY6Dp4bNlvLp7cUdkIh4ijLsk/2PhEdoTzPmxNRYfk89wqFiBvru7m5MGuOiIowDFPG2Pqaz4ehwjBMiWhnHiClHBvrY3raC3ieZ0PNlFLD3qAAABhjK3Nd1/XxULNm2ggFQfBq15bW+sO1dQL1+Pi4sqIVSynHTVs5SZ1hszafYbSffqA453szWkS0DYLgFRHPUtfK9/0TKGgu0hsUwDFabUpWTY2cpa4V53wPACegVVV9KIWdE5+UclxV1db3/YnWeoaIJkiCiAkAwOFw2CHiFhFjIlq2BkRUMMbWRBQT0cjopwUiFo3ZijFWMMZ2djO/OIYqpYac832WZT8BIH7vbYlogYir25awGQwGCxPs6mwspRzXdV28F6jRiohmVltKLJsY4G8Efd+fNqVwPuSZqqpqhnjCncAbo0ZE84eHh2ld1xMhxK8uG6XUsCzLGACWWutEKRVzzvdXI5Wm6W+jUW+EEJ8BALpaEACMwCp4AJgJIX7cuoAxXCZCiJeLkWpSd2zMRHQ88NLN0zQtrHTNAOAmFOd8r5SKtdYFALxc/DdjDnNEtIui6Puth7e/SsPvzW2Hc75HxHWe59G1mhpBU5iMseSKnakNAEwMSCjLcgoAnZG19fT0tOyjTTk5OTk5OTk53VF/AMd4gAur5ZoKAAAAAElFTkSuQmCC"],"alignment":"fill","helpTip":""}},"item-15":{"id":15,"type":"Panel","parentId":16,"style":{"enabled":true,"varName":null,"creationProps":{"borderStyle":"etched","su1PanelCoordinates":false},"text":"","preferredSize":[0,0],"margins":0,"orientation":"column","spacing":10,"alignChildren":["left","top"],"alignment":null}},"item-16":{"id":16,"type":"Group","parentId":18,"style":{"enabled":true,"varName":null,"preferredSize":[0,0],"margins":[5,0,1,0],"orientation":"row","spacing":0,"alignChildren":["left","center"],"alignment":null}},"item-17":{"id":17,"type":"Panel","parentId":8,"style":{"enabled":true,"varName":null,"creationProps":{"borderStyle":"etched","su1PanelCoordinates":false},"text":"","preferredSize":[200,0],"margins":0,"orientation":"row","spacing":0,"alignChildren":["left","top"],"alignment":null}},"item-18":{"id":18,"type":"Group","parentId":31,"style":{"enabled":true,"varName":null,"preferredSize":[0,0],"margins":0,"orientation":"row","spacing":0,"alignChildren":["center","top"],"alignment":null}},"item-23":{"id":23,"type":"IconButton","parentId":29,"style":{"enabled":true,"varName":"btHelp","text":"?","preferredSize":[17,17],"creationProps":{"style":"toolbutton","toggle":false},"iconButtonStroke":false,"image":["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEX/TQBcNTh/AAAAAXRSTlMAQObYZgAAAApJREFUeJxjYgAAAAYAAzY3fKgAAAAASUVORK5CYII="],"alignment":"center","helpTip":null}},"item-29":{"id":29,"type":"Panel","parentId":31,"style":{"enabled":true,"varName":"group4","creationProps":{"borderStyle":"etched","su1PanelCoordinates":false},"text":"","preferredSize":[271,15],"margins":[0,0,0,2],"orientation":"row","spacing":0,"alignChildren":["center","center"],"alignment":"center"}},"item-30":{"id":30,"type":"StaticText","parentId":29,"style":{"enabled":true,"varName":"tooltip","creationProps":{"truncate":"none","multiline":false,"scrolling":false},"softWrap":false,"text":"fontController 1.0","justify":"left","preferredSize":[184,17],"alignment":null,"helpTip":null}},"item-31":{"id":31,"type":"Group","parentId":0,"style":{"enabled":true,"varName":"appContainer","preferredSize":[0,0],"margins":[5,5,10,5],"orientation":"column","spacing":0,"alignChildren":["center","center"],"alignment":null}}},"order":[0,31,18,8,9,17,4,6,5,16,15,14,29,30,23],"settings":{"importJSON":true,"indentSize":false,"cepExport":false,"includeCSSJS":true,"showDialog":true,"functionWrapper":false,"afterEffectsDockable":true,"itemReferenceList":"None"}} 

[joonaspaakko]

@jetrotal, yea the first thing should be super effortless to fix. Just to put it out there, this happens because the dockable panel in AE seems to automatically use the filename in the title, making the window title just like a secondary title.

The second thing is something I'll have to look into because I'm not sure how to fix it right now. I think it could be loosely related to a third issue that I just realized was a thing, which is that parent items don't seem to care about the preferredSize in a dockable panel.

And like you said, both of these sizing related issues happen in the dockable panel only.

I don't think any of this will require a lot of work, but all of these things are very specific AE quirks that I have no prior experience with. I just need to investigate it a little...

[jetrotal]

I played around a bit more , maybe that has nothing to do with the code you built:

It breaks the external panel "permanently" only if I drag the panel to this stack of other panels.
Then, the glitch persists every time i close and reload the panel.

---

I managed to fix it "permanently" again, by
drag-and-dropping it into a more traditional array of panels:

---

My final guess is that you shouldn't worry about this glitch after all.
Looks like AE forces the scriptUI to lose the ability of tracking the main panel resize,
after stacking panels in a less traditional way.

Even the official Adobe panels breaks the same:

---

Maybe @rendertom can help us understanding this issue.
He is a master at AEs scripting and always helped the Adobe comunity.

[jetrotal]

Yep, the issue comes from the "Stacked Panel Groups" Mode:

Panels change to it automatically when attached to a stacked panel.

It's a very specific case...

[joonaspaakko]

@jetrotal, the double title issue should be handled now. I'm still looking into the other issues.

[jetrotal]

I just noticed that the fix was applied to an iconbutton's text too:

---

About the other issues, maybe they are not bugs, but intended behaviours from the "stacked panel groups" mode...

[joonaspaakko]

Yes. Now that you said it, I remember how I forgot to specify that this is for the dialog window only. Well, I'll be fixing it just as fast and loose later today and if we are lucky I won't forget anything this time.

[joonaspaakko]

I've been looking into the sizing quirks and as far as I know, they seem pretty normal behavior. I've never actually written anything past an expression in AE, so I don't know for sure though.

The preferredSize issue that I mentioned does seem fixable by replacing it with seemingly any other size property. I'm likely going to fix by forcing all sizes to use minimumSize if dockable panel option is enabled.