joonaspaakko / scriptui-dialog-builder-joonas

A web app for designing and building Adobe ScriptUI javascript dialogs (Illustrator, Indesign, Photoshop, After Effects, Bridge). Design your dialog using a graphical interface and export as .jsx

Website (web app)

ScriptUI Dialog Builder (SDB) - scriptui.joonas.me

Offline use

This repository includes a build folder that contains the same files as the website. So if the URL doesn't work for some reason, you should be able to download the repo and use it locally (offline). Everything it needs to run is in the build folder. Just open the build\index.html in Chrome.

Desktop applications

Read more...

The desktop apps won't work offline since each version of the app is only loading up the website and not a full fledged desktop app. The desktop applications are only trying to fill a small slot of convenience.

Download desktop applications (Dropbox link).

The desktop apps were created using an online tool that converts websites into desktop applications: Web2Desk. They don’t seem to mention it anywhere as far as I know, but I believe Web2Desk uses Electron to create the desktop app that simply displays the chosen website (https://scriptui.joonas.me) using Chromium. Also, I believe they inject their own google analytics. SDB by itself doesn't gather any data.

Chrome App

The download folder also includes a Chrome App. The great thing about it is that you can sync it to other computers. The downside is that it's tied to Chrome.

Download desktop applications (Dropbox link).

Documentation

For now SDB's general documentation is in the github wiki, but I'm planning to move that over to scriptui.joonas.me/docs at some point.

There's not much to write about in the SDB documentation, but I'm planning to perhaps include a changelog and sort of hidden or hard to find out features.

CEP Documentation

SDB has a CEP export: Export button (above dialog preview) > Gear icon (bottom right in the modal window) > CEP export (When this is turned on, the export comes out as html, css and js). It does not export you a fully functional extension, rather just a SUI style layout with some js helper functions to make it easier for you to work with it. You just paste the exported code into your CEP boilerplate's index.html and the rest is up to you writing the interaction logic.

This CEP documentation is in scriptui.joonas.me/docs → Look for CEP in the top menu.

scriptui.joonas.me/docs is also included in the repo: source/docs and build/docs.

Desktop app pros

• If you’re knee deep in the Windows ecosystem and a devout user of Internet Explorer (or any browser that is not Chrome), this desktop application has got your back since it uses Chromium to display the website.
• You don't have to worry about losing progress if you wipe your browser's browsing history. Although it may be good to know the app does allow you to do that too if the need arises.
• You get an Icon in your desktop you can use to launch the web app
• You get to use the web app in its own window

Desktop app cons

• Can't be used offline
• There is a tiny hiccup on Windows. In Windows, the Alt key shows the top menu... and especially if you're duplicating items, the structure panel may shift vertically causing you to drop the item in the wrong place.
• For some reason, the icons look kinda terrible, but since these apps are generated using a 3rd party tool, there's nothing to be done about it.

General info about ScriptUI Dialog Builder (SDB)

Description

SDB helps you design and build ScriptUI dialogs without writing code. It auto-generates ready to use Javascript on export. It doesn't handle events though, you'll need to write events yourself.

What to expect

Because SDB simply emulates ScriptUI layout and behavior, there are various differences here and there. This is to be expected. So be aware that the dialog preview may look completely different depending on the application you're passing the code through. There are also some differences between applications. As an example, a really easy to spot difference is that tabs look completely different in Photoshop than they do in other applications. While no application will be 100% accurate, Illustrator CC will be closest since SDB was built using it as the template.

In my experience, even when you run the code through ESTK, which is completely different looking than CC applications, SDB is still better than hand coding the dialog.

Data handling

Dialog data is saved locally by your browser (local storage). So if you refresh the page or come back later with the same browser, your dialog should still be there, as long as nothing goes wrong in the reconstruction of the dialog. There's always the off chance that an error of some kind wipes it clean. If you’re browsing in incognito mode, your browser will forget this data as soon as you close the tab or window. Each code export also includes importable JSON at the top of the code, which means you can continue working on a dialog on another computer as long as you store the importable JSON somewhere. I've been just leaving it in my scripts. Though if you're using images you might not want to do that since it could make the script size incredibly large (for a script anyway). Here's an example of one of my scripts where I left the import JSON in place.

SDB Layout PSD files

Maybe there's not a whole lot of need for this, but figured I might as well share it. It could be helpful if you wanna suggest a new feature or something. Font files included in the download folder.

Dropbox download link: ScriptUI Dialog Builder PSD files

This was generated using Page Layers. I did clean it up a bit but some of the layer structure may be unnecessarily complicated because it follows the html structure. Because it's essentially a fancy layered screenshot, it doesn't include anything but the visible elements. So no modal windows.

Usage

A good rule of thumb is to use width and height sparingly. Sometimes Align children: Fill or Alignment: Fill can be used to get the desired result without setting a static width. You can easily make the dialog hard to work with if you have to keep adjusting the width and/or height values every time you add new items or make other changes that would affect the size.

There's also the fact that while SDB gets fairly close in imitating SUI, it's not perfect and therefore things may end up shifting around, but the width or height you've set wont. There's a good example of this in the sample dialog. The two bottom panels are given the same height, but the bottom left panel ends up being tad bigger in Indesign CC, because the children end up taking more room than they do in SDB.

For example, the sample dialog only uses width and height for various EditText fields to basically leave room for characters and the 4 panels so that they have equal height. That said, if this issue gets implemented, it would be a way to get around the issue, by making sure items that are supposed to be the same size actually end up that way.

Browser support

Chrome. The development has shifted focus to Chrome so you probably shouldn't push your luck with Firefox either. No mobile support. Try the desktop app if you don't like to use Chrome.

Source folder

The source folder contains the development files, which are stitched together using Codekit. Codekit does have nifty features like compressing images and stuff, but the major thing is that it's used in order to stitch together various HTML, CSS and Javascript files... just because it's convenient.

I wouldn't expect anyone to contribute to the code because it's just a big mess. It's all pretty much just prototypes held together by duct tape (So Codekit probably won't be an issue). I may consider hopping off of Codekit in the future...

Dialog examples (JSX+JSON)

1. Export Layers Inside Selected Group Dialog (Gist) - (Comparison image - Illustrator CC 2019 ).
2. Import Multiple PDF pages (Gist) - (Comparison image below ↓).

Comparison between ScriptUI Dialog Builder and Indesign

I recreated the dialog of an Indesign script called Multi Page Importer (download link) in the builder, exported the code and ran it in Indesign CC 2019.

(Click to enlarge)

scriptui-dialog-builder-joonas's Issues

Soft wrapping StaticText may occasionally export with linebreaks in the wrong places

I've narrowed the cause down to this... In some cases long words cause the text to flow differently than it would otherwise, since long words can make the container wider.

Now here's the key:
The way the export determines where to split things is by clearing the text container and adding the text back word by word. If adding a word increases the containers height, it puts a line break infront that word. Simple enough, however with this discovery I'm realizing it wasn't as bulletproof as I once believed.

So when the export does this thing where it lays each word back, the text flow is different than it is with all of the text in place.

Here's a gif where I add a manual line break and the first 3 words naturally flow in 3 separate rows:

A better visual example might've been to remove all of the text starting from the long word, but that works too I guess.

Tooltip ( helpTip )

Totally forgot about this. Today I started thinking about a specific dialog and realized I wanted to use tooltips, but there's no way to add them in SDB right now.

Already when I added the Custom variable field, I felt the Properties panel was getting kinda crowded. I wonder if the custom variable and this tooltip should be hidden originally and made visible if it's set and shown on click if not set yet. That said this tooltip could just be added to the very bottom and call it a day?

Lock focus to dialog preview in its content editable fields

Right now if you are focused on the very last contenteditable element in the dialog preview and you press Tab, it jumps away from the dialog... and when you Shift+Tab on the first element it does the same thing.

Not a bug, but also not super ideal... So, the idea is this:

• On the first contenteditable element (Always the dialog title), do one of these things:
  1. Jump to the last item
  2. Stay on the first item
• On the last contenteditable element, do one of these things:
  1. Jump to the first item
  2. Stay on the last item

Now, whether it's going to be #1 or #2, I'm not sure yet. Right now I kinda feel it's going to be #2.

This shouldn't take much to add... but isn't a rush job either.

Option for StaticText and EditText to disable text wrapping?

This is not really a bug, but it can be crippling enough to treat it as such. On occasion I've had to collapse all the panels in order to export the code without it essentially forcing the text to show up in multiple lines. Obviously you can give the item a static width so it wont collapse, but that's hardly ideal.

At the very least here has to be a setting that disables text wrapping. I've had plenty of scenarios where small viewport size forced text to flow into multiple rows since it didn't fit horizontally.

I've dreamed of getting rid of text wrapping because it's cause a lot of issues and you can just add manual line breaks... But I haven't done it cause it can also be convenient. I think it would make sense to add a new option that disables text wrapping.

Request: Export to resource strings...

An option to export to resource string format would be nice. Script-UI-Resource-Strings.

EditText: scrollbars on Windows Chrome, even though there shouldn't be

• Could be it's on mac too, but I just didn't notice it.
• This most likely surfaced after the last commit, in which I played around with the container padding, in order to get the text flow match scriptui.
• These two inputs are the only ones with scrollbars because the text content is bigger than the defined width. The text essentially doesn't fit anymore. Meaning that there is technically no issue here. If I change the sample dialog to have slightly bigger ExitText items, that would take care of it.
• The only reason I count this as a bug is because it has to do with the sample dialog, which essentially looks broken. I want to see if I can get rid of this without having to change the sample dialog...
• The checkbox I highlighted in yellow is squished because the parent Panel has a user set height value, so when the scrollbars appear, other things get a little cramped.

Export option: Leave arrays undefined

If you need to fetch data from the application to populate an array, you'd have to remove the array variable every single time you make edits using SDB. So if there was an option to leave it off the export, you could just swap the innards of the dialog without having to worry about hiding bunch of variables.

That said... Wouldn't this really be needed for most properties?

At the very least:

item.text
item.value
item.selection

---

Something like this (for DropDownList):

Code example of a possible scenario:

#target photoshop

var myDropdown_array = fetchDocuments( 'name' );

function fetchDocuments( prop ) {
    var ar = [];
    for ( var i=0; i < app.documents.length; i++ ) {
        ar.push( app.documents[i][ prop ] );
    }
    return ar;
};

/* 
Code for Import https://scriptui.joonas.me — (Triple click to select): 
{"activeId":1,"items":{"item-0":{"id":0,"type":"Dialog","parentId":false,"style":{"varName":null,"text":"Dialog","preferredSize":[0,0],"margins":16,"orientation":"column","spacing":10,"alignChildren":["center","top"]}},"item-1":{"id":1,"type":"DropDownList","parentId":0,"style":{"varName":"myDropdown","text":"Choose Document:","listItems":"Item 1, Item 2, Item 3","preferredSize":[0,0],"alignment":null,"selection":0,"helpTip":null}}},"order":[0,1]}
*/ 

// DIALOG
// ======
var dialog = new Window("dialog"); 
    dialog.text = "Dialog"; 
    dialog.orientation = "column"; 
    dialog.alignChildren = ["center","top"]; 
    dialog.spacing = 10; 
    dialog.margins = 16; 

// This would be included in the export:
// var myDropdown_array = ["Item 1","Item 2","Item 3"];  
var myDropdown = dialog.add("dropdownlist", undefined, myDropdown_array); 
    myDropdown.selection = 0; 
    myDropdown.text = "Choose Document:"; 

dialog.show();

EditText caret in dialog preview looking weird when in position 0

In position 0:

Anywhere else:

The issue comes from the :before in the element span.text-container. It takes care of text vertical centering. I'm not sure why I did it this way. Should be an easy fix.

Snapshots feature?

It would be useful to be able to save snapshots sort of like Photoshop history snapshots. This wouldn't be considered a long term save but rather something that enables you to try different things more freely.

This should be fairly simple to implement as a very bare bones list but I would love it if this could have a preview. Maybe this could be used: http://html2canvas.hertzen.com/

Hovered item in the Structure Panel doesn't light up in the dialog preview

Only happens when hide active item accent color (lightbulb icon) is turned on and the hovered item is active.

Missing text in multiline StaticText

I noticed that sometimes a new line has an extra space in the front (in export only) and that causes that line of text to shift.

I'm honestly not sure if there's an underlying issue there, because why would a space cause text to get clipped off... You'd think it would just make it wider since it has no static width. But right now it seems the fix would be to just get rid of that unnecessary space. All in all, it seems kind of an edge case, but none the less it should be fixed.

It can cause the text to disappear fully, but only the whole line contains just a single character:

Just in case... I should say I'm seeing this happening in Illustrator CC 2019.

Code export example where the first two lines have an extra space in front:

/* 
Code for Import https://scriptui.joonas.me — (Triple click to select): 
{"activeId":0,"items":{"item-0":{"id":0,"type":"Dialog","parentId":false,"style":{"varName":null,"text":"Dialog","preferredSize":[0,0],"margins":0,"orientation":"column","spacing":10,"alignChildren":["center","top"]}},"item-1":{"id":1,"type":"StaticText","parentId":0,"style":{"varName":null,"text":"a\na\na","justify":"center","preferredSize":[0,0],"alignment":null,"helpTip":null}}},"order":[0,1]}
*/ 

// DIALOG
// ======
var dialog = new Window("dialog"); 
    dialog.text = "Dialog"; 
    dialog.orientation = "column"; 
    dialog.alignChildren = ["center","top"]; 
    dialog.spacing = 10; 
    dialog.margins = 0; 

var statictext1 = dialog.add("group"); 
    statictext1.orientation = "column"; 
    statictext1.alignChildren = ["center","center"]; 
    statictext1.spacing = 0; 

    statictext1.add("statictext", undefined, " a"); 
    statictext1.add("statictext", undefined, " a"); 
    statictext1.add("statictext", undefined, "a"); 
    // statictext1.justify = "center"; 

dialog.show();

Button — Default and cancel elements

Perhaps something like a dropdown with the title "Special Type". I don't really know what to call that. That's the best I got for now.

So far whenever I've made changes to the dialog, I've just manually written in the properties name, since this has to be added when the item is created, so I can't just slip it in somewher outside of the code coming out from SDB.

Buttons named "ok" and "cancel" are treated special. You can trigger the ok button with Enter and the cancel button with Esc.

Special type [ ------ ] 
             [   Ok   ] 
             [ Cancel ] 

Export shortcut animated icon not working as intended

The icon was supposed to animate every time the shortcut Alt+E is used, but for some reason it animates once after refresh...

PreferredSize: width and height inputs show null instead of 0

This doesn't seem to affect anything, but it's supposed to be 0, not null. I don't know off the top of my head what is causing it, but it has something to do with a recent change.

Request: Ability to change variable names in exported code.

Ability to name the variables in the exported code.

e.g.:
var group2 = dialog.add("group"); group2.orientation = "row"; group2.alignChildren = ["left","center"]; group2.spacing = 10; group2.margins = 0;

Instead of "group2", I could, using the interface to name it something else - like "optioanlParams".

Multi-item selection to the structure panel (Shift & Cmd/Ctrl)

What should you be able to do with the selection?

1. Remove multiple items
2. Move multiple items
3. Duplicate multiple items
4. Edit the properties of multiple items if they are the same type? I'm not sure if this idea is feasible...

Expand the tool to build "Palette" and "Window" along with the "Dialog" builder

This is a powerfull tool that could create not only dialogs, but floating panels for after effects.

Here are the basic settings from a similar tool called "P9 scriptUI builder" for after effects.

This is how it builds the ScriptUI when "Workspace" is off:
win=new Window("palette","new project",[0,0,500,500],{resizeable:true,borderless:true,independent:false,minimizeButton:false,maximizeButton:false,closeButton:false,}); win.center(); win.show();

And when "Workspace" is on:
UI(this) function UI(object){ var win = (object instanceof Panel) ? object : new Window("palette","new project",[0,0,500,500],{resizeable:true,borderless:true,independent:false,minimizeButton:false,maximizeButton:false,closeButton:false,}); }

Disable drag drop for Image and IconButton in the Preview

After adding the Image or IconButton, it can be dragged (and duplicated) into any other text-based element. After dropping Image is removed from the structure and saved as part of the text in the text element.

Item Properties Panel: clicking margins lock doesn't change the margin at all

It only updates after you change the margin value again.

Technically not a bug, but not expected behavior either...

'statictext' renders differently in ScriptUI

Hi Joonas, I'm having an issue with statictext, I'm not sure what's happening exactly, but statictext is being cut by it's group. I realise it's a ScriptUI issue but I wonder if it's possible to fix somehow.
Here's a JSON of a panel I built:
{"activeId":0,"items":{"item-0":{"id":0,"type":"Dialog","parentId":false,"style":{"text":"Dialog","preferredSize":[600,400],"margins":16,"orientation":"column","spacing":10,"alignChildren":["center","top"]}},"item-1":{"id":1,"type":"Group","parentId":0,"style":{"preferredSize":[400,0],"margins":0,"orientation":"row","spacing":10,"alignChildren":["center","center"],"alignment":"center"}},"item-2":{"id":2,"type":"Group","parentId":0,"style":{"preferredSize":[0,0],"margins":0,"orientation":"row","spacing":10,"alignChildren":["left","center"],"alignment":null}},"item-3":{"id":3,"type":"Button","parentId":2,"style":{"text":"Button","justify":"center","preferredSize":[0,0],"alignment":null}},"item-4":{"id":4,"type":"Button","parentId":2,"style":{"text":"Button","justify":"center","preferredSize":[0,0],"alignment":null}},"item-5":{"id":5,"type":"Button","parentId":2,"style":{"text":"Button","justify":"center","preferredSize":[0,0],"alignment":null}},"item-6":{"id":6,"type":"StaticText","parentId":1,"style":{"text":"Warning! Photoshop Scripts folder is read only: duplicating, renaming and deleting is disabled. Restart Photoshop as Administrator to re-enable those functions.","justify":"left","preferredSize":[399,0],"alignment":"center"}}},"order":[0,1,6,2,3,4,5]}

expected result:
http://prntscr.com/lrzhr6

actual result:
http://prntscr.com/lrzhxh

Panel dropdowns forcefully closing (sometimes)

I've noticed that sometimes the dropdowns do not stay open after clicking on them. It seems to happen randomly but often. I've linked to a screencast of it happening.

Here's a gif with most of the original video (first 30seconds).
And here's just the part with the issue:

TabbedPanel & Tab items have issues with margin

• TabbedPanel: I should probably remove margin from this item as it seems highly irrelevant (It also doesn't mirror the way it works in ScriptUI)

  • On second thought maybe I should make it so that TabbedPanel margin (if set) overrides the margin of its child tabs.

• Tab: If you make the margin something like 100 and then put it back to 10, the width sticks around where margin pushed it...

TabbedPanel gets clipped due to issue with width

This is an interesting one... I started noticing at some point that that seemingly every app besides Photoshop added a little extra to the width if the width was not set.

Even weirder was that apparently, the number of tabs had something to with how big the empty space was. I can't remember anything too specific, but while a few tabs would have an empty space of something like 20px, 10 tabs would have an empty space of like 300px. Kind of nuts... The child item width didn't seem to affect this quirk.

I eventually found that I can fix it by setting tabbedPanel.preferredSize.width = 1; if width is not set by the user.

However, I recently found out that it doesn't always work...?

Fill should override PreferredSize

This is the behavior in ScriptUI, but not in the dialog builder preview / Flexbox...

This is how it should happen:

• Horizontal fill → overrides width
• Vertical fill → overrides height

_{^{In ScriptUI you can set fill to both X and Y axis, but I limited that in SDB because of issues with flexbox.}}

Sadly it's the other way around in Flexbox and it doesn't seem overridable... So I guess the way this would have to be done is by changing the JS logic a little:

• When setting Align Children:

  • Fill - Remove width or height from all affected items in dialog preview.
  • Anything else - Add width or height to all affected items in dialog preview (if needed).

• When setting Alignment:

  • Fill - Remove width or height from the item itself.
  • Anything else - Add width or height to the item itself (if needed).

• When setting width or height:

  • Don't set if parent AlignChildren is set to fill
  • Don't set if item Alignment is set to fill

All of this would only apply to the dialog preview.

---

Another way to do it would be to have a warning close to Alignment and AlignChildren saying something like Warning: Make sure to remove width or height from items you want to "Fill" the container with using alignment.

Though I have a feeling I wouldn't be satisfied with that.

Request: Add the Options "justify", "multiline" and "readonly" the EditText editor

These are some problematics properties, but they are useful too.

Justify can only work through some workarounds, here's one of them:

function test2(){  
    var w = new Window('dialog', 'Test');  
     
    var eResource = "EditText { properties:{multiline:false, readonly:true}, text:'<your message here>', justify:'center' } ";  
  
  
    var e = w.add(eResource);  
    e.characters = 20;  
    w.show();  
};  
test2(); 

this and others workarounds came from this discussion:
https://forums.adobe.com/thread/2085789

Loading screen on Windows Chrome doesn't cover the whole viewport

I can see the scrollbars as the loading screen shows up, but then they disappear and leave the gap.

This is me just guessing,, but it could be caused by a css animation that scales the whole page when a modal window is opened and then animates it back to normal once it's closed. So maybe the backstretch jquery plugin resizes the background when the scrollbars are visible.

Request: implement vertical TabbedPanel component

This may be a bit controversial because in itself it is not a native ScriptUI component, rather it is a combination of them.

See page 64 of "ScriptUI for Dummies" for screenshots and implementation details:
https://adobeindd.com/view/publications/a0207571-ff5b-4bbf-a540-07079bd21d75/y2c4/publication-web-resources/pdf/scriptui-2-13-f-2017.pdf

Essentially, it recreates the various "Preferences" dialogs found in the Adobe apps, where you select the "tab" from the ListBox and it changes the displayed panel/group.

Since you already have the base components implemented (ListBox, Group, Panel) perhaps it would be possible to construct something combining these? A customized ListBox where in addition to the "List Items" array, you specify a group or panel that each list item activates. The generated JSX should then have the minimal function logic required to do the tab switching.

(note: the dialog's height will be the maximum of the possible panels/groups that can be shown and I think that's okay)

Click image item in the preview to activate it

Most items get activated when the content editable div with the text is focused. I forgot to write custom logic to the image so currently, nothing happens if image item is clicked in the preview.

Restricting the parent item dimensions to the children doesn't work so well with statictext

The issue stems from the fact that I decided to support text wrapping... Ugh...

Issue:

It does actually give in a little, which it shouldn't... but however I fix this, it should get rid of that as well.

Ideal behavior:

The only solution that comes to mind is to strip away this behavior where parent item cannot be smaller than its children. Not a big deal in terms of execution, but it was in place for a purpose. It's because ScriptUI parent items with PreferredSize will never show up smaller than their children. I don't like the idea of taking that away so I should at least give it a go and see if I can come up with anything else.

I should probably also test if stripping away that restriction would be so terrible. I don't think it would be actually... I started already warming up to the idea of just getting rid of it.

Test case import JSON:

{"activeId":0,"items":{"item-0":{"id":0,"type":"Dialog","parentId":false,"style":{"text":"Dialog","preferredSize":[0,0],"margins":16,"orientation":"column","spacing":10,"alignChildren":["center","top"]}},"item-1":{"id":1,"type":"StaticText","parentId":0,"style":{"text":"Ut vitae posuere turpis. Morbi vehicula eros vitae massa luctus, quis pellentesque dui feugiat. ","justify":"left","preferredSize":[0,0],"alignment":null}}},"order":[0,1]}

How to replicate the issue:
Try to make the dialog width smaller than the static text. It won't happen in the preview. If you load the page again it does, but that doesn't really matter.

Item duplication creating copies of the wrong items (sometimes)

I don't have a clear idea of what is going on yet, but it was definitely copying the wrong items. The right number of items, but not the correct items. Not only that, but it didn't create unique ids for the new items as it should.

JSON before:

^{I'm having trouble trying to recreate the environment where this happens consistently, but when I import this JSON and try to duplicate that one group, it fails every time.}

{"activeId":14,"items":{"item-0":{"id":0,"type":"Dialog","parentId":false,"style":{"text":"Export Layers Inside Selected Group","preferredSize":[0,0],"margins":16,"orientation":"column","spacing":10,"alignChildren":["right","top"]}},"item-1":{"id":1,"type":"Checkbox","parentId":6,"style":{"text":"PSD","preferredSize":[0,0],"alignment":null}},"item-2":{"id":2,"type":"Checkbox","parentId":6,"style":{"text":"TIFF","preferredSize":[0,0],"alignment":null}},"item-3":{"id":3,"type":"Checkbox","parentId":6,"style":{"text":"JPEG","preferredSize":[0,0],"alignment":null,"checked":true}},"item-4":{"id":4,"type":"Checkbox","parentId":6,"style":{"text":"PNG","preferredSize":[0,0],"alignment":null}},"item-5":{"id":5,"type":"Checkbox","parentId":6,"style":{"text":"PDF","preferredSize":[0,0],"alignment":null}},"item-6":{"id":6,"type":"Panel","parentId":9,"style":{"text":"File format","preferredSize":[0,0],"margins":10,"orientation":"row","spacing":10,"alignChildren":["left","top"],"alignment":null}},"item-7":{"id":7,"type":"Panel","parentId":9,"style":{"text":"File name options","preferredSize":[0,0],"margins":10,"orientation":"column","spacing":10,"alignChildren":["left","top"],"alignment":null}},"item-8":{"id":8,"type":"EditText","parentId":14,"style":{"text":"File Name ","preferredSize":[160,0],"alignment":null}},"item-9":{"id":9,"type":"Group","parentId":0,"style":{"preferredSize":[0,0],"margins":0,"orientation":"column","spacing":10,"alignChildren":["fill","top"],"alignment":null}},"item-10":{"id":10,"type":"Group","parentId":0,"style":{"preferredSize":[0,0],"margins":0,"orientation":"row","spacing":10,"alignChildren":["left","top"],"alignment":null}},"item-11":{"id":11,"type":"Button","parentId":10,"style":{"text":"Save","justify":"center","preferredSize":[0,0],"alignment":null}},"item-12":{"id":12,"type":"Button","parentId":10,"style":{"text":"Cancel","justify":"center","preferredSize":[0,0],"alignment":null}},"item-13":{"id":13,"type":"StaticText","parentId":14,"style":{"text":"Custom name:","justify":"left","preferredSize":[0,0],"alignment":null}},"item-14":{"id":14,"type":"Group","parentId":7,"style":{"preferredSize":[0,0],"margins":0,"orientation":"row","spacing":10,"alignChildren":["left","center"],"alignment":null}},"item-15":{"id":15,"type":"Checkbox","parentId":7,"style":{"text":"Use layer name","preferredSize":[0,0],"alignment":null}}},"order":[0,9,7,15,14,13,8,6,3,4,1,5,2,10,12,11]}

JSON after:

{"activeId":16,"items":{"item-0":{"id":0,"type":"Dialog","parentId":false,"style":{"text":"Export Layers Inside Selected Group","preferredSize":[0,0],"margins":16,"orientation":"column","spacing":10,"alignChildren":["right","top"]}},"item-1":{"id":1,"type":"Checkbox","parentId":6,"style":{"text":"PSD","preferredSize":[0,0],"alignment":null}},"item-2":{"id":2,"type":"Checkbox","parentId":6,"style":{"text":"TIFF","preferredSize":[0,0],"alignment":null}},"item-3":{"id":3,"type":"Checkbox","parentId":6,"style":{"text":"JPEG","preferredSize":[0,0],"alignment":null,"checked":true}},"item-4":{"id":4,"type":"Checkbox","parentId":6,"style":{"text":"PNG","preferredSize":[0,0],"alignment":null}},"item-5":{"id":5,"type":"Checkbox","parentId":6,"style":{"text":"PDF","preferredSize":[0,0],"alignment":null}},"item-6":{"id":6,"type":"Panel","parentId":9,"style":{"text":"File format","preferredSize":[0,0],"margins":10,"orientation":"row","spacing":10,"alignChildren":["left","top"],"alignment":null}},"item-7":{"id":7,"type":"Panel","parentId":9,"style":{"text":"File name options","preferredSize":[0,0],"margins":10,"orientation":"column","spacing":10,"alignChildren":["left","top"],"alignment":null}},"item-8":{"id":8,"type":"EditText","parentId":14,"style":{"text":"File Name ","preferredSize":[160,0],"alignment":null}},"item-9":{"id":9,"type":"Group","parentId":0,"style":{"preferredSize":[0,0],"margins":0,"orientation":"column","spacing":10,"alignChildren":["fill","top"],"alignment":null}},"item-10":{"id":10,"type":"Group","parentId":0,"style":{"preferredSize":[0,0],"margins":0,"orientation":"row","spacing":10,"alignChildren":["left","top"],"alignment":null}},"item-11":{"id":11,"type":"Button","parentId":10,"style":{"text":"Save","justify":"center","preferredSize":[0,0],"alignment":null}},"item-12":{"id":12,"type":"Button","parentId":10,"style":{"text":"Cancel","justify":"center","preferredSize":[0,0],"alignment":null}},"item-13":{"id":13,"type":"StaticText","parentId":14,"style":{"text":"Custom name:","justify":"left","preferredSize":[0,0],"alignment":null}},"item-14":{"id":14,"type":"Group","parentId":7,"style":{"preferredSize":[0,0],"margins":0,"orientation":"row","spacing":10,"alignChildren":["left","center"],"alignment":null}},"item-15":{"id":15,"type":"Checkbox","parentId":7,"style":{"text":"Use layer name","preferredSize":[0,0],"alignment":null}},"item-16":{"id":16,"type":"Group","parentId":7,"style":{"preferredSize":[0,0],"margins":0,"orientation":"row","spacing":10,"alignChildren":["left","center"],"alignment":null}}},"order":[0,9,7,15,14,13,8,16,15,10,6,3,4,1,5,2,10,12,11]}

Make images reusable

Right now if you want to reuse some image, you have to load it again and when you export the dialog, the import JSON and the JSX will contain the image data twice or as many times as the image is reused.

Ideas:

• Instead of storing images inside each item object, how about just storing the unique images in one place along with the IDs.
  • Perhaps something like:

  •   { base64: 'Unique_Image_1', ids: [2,4,5,] },
      { base64: 'Unique_Image_2', ids: [1,20,21] }

• On export: only store the image in a variable for the first item that uses it and references that variable for any other items that use the same image.
• Asset Manager, that opens as a sort of floating tooltip container? This would help with the pain of loading the image over and over and over again.

Ability to collapse the treeview in the structure panel

I haven't locked in how collapsing and expanding would happen, but I'm leaning heavily towards double clicking the item name. Should definitely be stored in local storage so the state is persistent (it would also then be included in the Import JSON).

This is what I'm thinking a collapsed parent would look like:

StaticText: adding a line break is not working when editing in the dialog preview

The culprit is display: flex; in the .static-text element. I need to use similar trick to center the text, as what I used with .edit-text.

No 'image' element?

Hi Joonas,
I wonder if you're going to implement 'image' element? Maybe even with an option to convert an uploaded image to binary string... *dreaming

DropDownList: selects the selected item + the first item (on load)

It seems the local storage data is correct, which probably means the extra selection is made when the selection is set in the dialog preview.

Feature Request: Right click on a control to copy object hierarchy...

When adding events to controls, it would be nice to be able to right click on a control and have a context menu appear where I could copy the object hierarchy into the clipboard.

Making a new item by dragging works, but the item is not activated.

activeId disappears from Local storage.

Item dragging issues...

This seems like it sprouted recently.

{"activeId":19,"items":{"item-0":{"id":0,"type":"Dialog","parentId":false,"style":{"text":"Import Multiple PDF pages","preferredSize":[0,0],"margins":16,"orientation":"row","spacing":10,"alignChildren":["left","top"]}},"item-19":{"id":19,"type":"Group","parentId":0,"style":{"preferredSize":[0,0],"margins":0,"orientation":"column","spacing":10,"alignChildren":["fill","top"],"alignment":null}},"item-21":{"id":21,"type":"Panel","parentId":19,"style":{"text":"Positioning Options","preferredSize":[0,205],"margins":10,"orientation":"column","spacing":10,"alignChildren":["fill","top"],"alignment":null}},"item-22":{"id":22,"type":"StaticText","parentId":21,"style":{"text":"Position on Page Aligned From:","justify":"left","preferredSize":[0,0],"alignment":null}},"item-23":{"id":23,"type":"DropDownList","parentId":21,"style":{"text":"","listItems":"Top Left, Top Center, Top Right, Center Left, Center, Center Right, Bottom Left, Bottom Center, Bottom Right, -, Top - Relative to spine,  Center  - Relative to spine,  Right  - Relative to spine","preferredSize":[0,0],"alignment":null,"selection":0}},"item-24":{"id":24,"type":"DropDownList","parentId":21,"style":{"text":"Rotation:","listItems":"0, 90, 180, 270","preferredSize":[0,0],"alignment":null,"selection":0}},"item-25":{"id":25,"type":"StaticText","parentId":21,"style":{"text":"Offset by:","justify":"left","preferredSize":[0,0],"alignment":null}},"item-26":{"id":26,"type":"Group","parentId":21,"style":{"preferredSize":[0,0],"margins":0,"orientation":"row","spacing":10,"alignChildren":["left","center"],"alignment":null}},"item-27":{"id":27,"type":"StaticText","parentId":26,"style":{"text":"X:","justify":"left","preferredSize":[0,0],"alignment":null}},"item-28":{"id":28,"type":"EditText","parentId":26,"style":{"text":"0","preferredSize":[40,0],"alignment":null}},"item-29":{"id":29,"type":"StaticText","parentId":26,"style":{"text":"X:","justify":"left","preferredSize":[0,0],"alignment":null}},"item-30":{"id":30,"type":"EditText","parentId":26,"style":{"text":"0","preferredSize":[40,0],"alignment":null}},"item-31":{"id":31,"type":"Panel","parentId":19,"style":{"text":"Placement Options","preferredSize":[0,160],"margins":10,"orientation":"column","spacing":10,"alignChildren":["fill","top"],"alignment":null}},"item-32":{"id":32,"type":"DropDownList","parentId":31,"style":{"text":"Crop to:","listItems":"Art, Crop, Trim, Bleed, Media","preferredSize":[0,0],"alignment":null,"selection":0}},"item-33":{"id":33,"type":"Checkbox","parentId":31,"style":{"text":"Place Pages on a New Layer","preferredSize":[0,0],"alignment":null}},"item-34":{"id":34,"type":"Checkbox","parentId":31,"style":{"text":"Ignore Font and Image Errors","preferredSize":[0,0],"alignment":null}},"item-35":{"id":35,"type":"Checkbox","parentId":31,"style":{"text":"Transparent PDF Background","preferredSize":[0,0],"alignment":null,"checked":true}}},"order":[0,19,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35]}

Issue 1.

Dragging sometimes leaves an empty space when active item is outside the dragged item:

Issue 2.

Sometimes it can't find a place to drop it.

Item duplication failing to duplicate everything (sometimes)

This could have something to do with nesting. When the active group (in the dialog below) is duplicated, it just sort of duplicates some of it:

{"activeId":19,"items":{"item-0":{"id":0,"type":"Dialog","parentId":false,"style":{"text":"Import Multiple PDF pages","preferredSize":[0,0],"margins":16,"orientation":"row","spacing":10,"alignChildren":["left","top"]}},"item-19":{"id":19,"type":"Group","parentId":0,"style":{"preferredSize":[0,0],"margins":0,"orientation":"column","spacing":10,"alignChildren":["fill","top"],"alignment":null}},"item-21":{"id":21,"type":"Panel","parentId":19,"style":{"text":"Positioning Options","preferredSize":[0,205],"margins":10,"orientation":"column","spacing":10,"alignChildren":["fill","top"],"alignment":null}},"item-22":{"id":22,"type":"StaticText","parentId":21,"style":{"text":"Position on Page Aligned From:","justify":"left","preferredSize":[0,0],"alignment":null}},"item-23":{"id":23,"type":"DropDownList","parentId":21,"style":{"text":"","listItems":"Top Left, Top Center, Top Right, Center Left, Center, Center Right, Bottom Left, Bottom Center, Bottom Right, -, Top - Relative to spine,  Center  - Relative to spine,  Right  - Relative to spine","preferredSize":[0,0],"alignment":null,"selection":0}},"item-24":{"id":24,"type":"DropDownList","parentId":21,"style":{"text":"Rotation:","listItems":"0, 90, 180, 270","preferredSize":[0,0],"alignment":null,"selection":0}},"item-25":{"id":25,"type":"StaticText","parentId":21,"style":{"text":"Offset by:","justify":"left","preferredSize":[0,0],"alignment":null}},"item-26":{"id":26,"type":"Group","parentId":21,"style":{"preferredSize":[0,0],"margins":0,"orientation":"row","spacing":10,"alignChildren":["left","center"],"alignment":null}},"item-27":{"id":27,"type":"StaticText","parentId":26,"style":{"text":"X:","justify":"left","preferredSize":[0,0],"alignment":null}},"item-28":{"id":28,"type":"EditText","parentId":26,"style":{"text":"0","preferredSize":[40,0],"alignment":null}},"item-29":{"id":29,"type":"StaticText","parentId":26,"style":{"text":"X:","justify":"left","preferredSize":[0,0],"alignment":null}},"item-30":{"id":30,"type":"EditText","parentId":26,"style":{"text":"0","preferredSize":[40,0],"alignment":null}},"item-31":{"id":31,"type":"Panel","parentId":19,"style":{"text":"Placement Options","preferredSize":[0,160],"margins":10,"orientation":"column","spacing":10,"alignChildren":["fill","top"],"alignment":null}},"item-32":{"id":32,"type":"DropDownList","parentId":31,"style":{"text":"Crop to:","listItems":"Art, Crop, Trim, Bleed, Media","preferredSize":[0,0],"alignment":null,"selection":0}},"item-33":{"id":33,"type":"Checkbox","parentId":31,"style":{"text":"Place Pages on a New Layer","preferredSize":[0,0],"alignment":null}},"item-34":{"id":34,"type":"Checkbox","parentId":31,"style":{"text":"Ignore Font and Image Errors","preferredSize":[0,0],"alignment":null}},"item-35":{"id":35,"type":"Checkbox","parentId":31,"style":{"text":"Transparent PDF Background","preferredSize":[0,0],"alignment":null,"checked":true}}},"order":[0,19,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35]}

Item Properties Panel: textarea fails to resize on activate (sometimes)

It seems this happens when the next line has 1-3 characters in it.

Text: Nulla facilisi. Sed dolor am.

What this looks like after activating:

What it's supposed to look like:

Not sure if this is an issue with the 3rd party script I used or if it's my code that is causing it to fail in this scenario.

Request: capture show() result in variable

Currently dialogs are displayed without their return value captured, eg:

dialog.show();

It would be really helpful for extending the code if the result is automatically captured in a variable, eg:

var result = dialog.show();

This means elsewhere (eg. from a button click) we could call dialog.close(100) and result would now be 100

If the result is not needed, then this variable is unused and does nothing. But if the developer needs to perform actions based on the return result of the dialog, then they'd currently have to edit the exported code from SDB.

Alternatively, do not add the show() call at all, and let us add it and assign to variable as needed. This would result in more reusable export code.

Request: wrap dialog in its own namespace

In order to make the exported dialogs more modular and to avoid name collisions, add an export option (or by default?) to wrap the exported code in its own function, and assigned to a (user-defined) variable name.

This is essentially a classic JavaScript module pattern and should fit into any developer's framework without needing to conform to specific bundlers, builders, etc.

In order to make this truly useful, the following features should be in place:

1. The dialog's Window object is returned as the final result, without its show method called
2. All of the dialog's components... groups, panels, buttons, etc... need to be accessible from the namespace, eg. namespace.panel1.group1.button1 so events and callbacks can be added.

Proposed export:

var namespace = (function () {

  var dialog = new Window("dialog"); 
    dialog.text = "Dialog"; 
    dialog.orientation = "column"; 
    dialog.alignChildren = ["center","top"]; 
    dialog.spacing = 10; 
    dialog.margins = 16; 

  var button1 = dialog.add("button"); 
    button1.text = "Button"; 
    button1.justify = "center";

    dialog.button1 = button1; //add some way to access via top-level namespace
      
  return dialog;

}());

This exported snippet can now be used from within the same script or an external script, depending on the developer's needs and how they structure their code:

namespace.button1.onClick = function () {
  alert('clicked!');
  namespace.close(100);
};

var result = namespace.show();

Multiline statictext exports an extra empty line at the end

I recently made the change where multiline statictext rows get sliced into separate items (...to avoid other issues). I noticed that it now seems to be adding an extra line at the end.

It's happening in this setup (Import JSON):

I didn't encounter this in my tests before but now it seems to be happening all the time. Maybe I'm doing something differently.

{"activeId":0,"items":{"item-0":{"id":0,"type":"Dialog","parentId":false,"style":{"text":"Dialog","preferredSize":[0,0],"margins":38,"orientation":"row","spacing":18,"alignChildren":["left","top"]}},"item-11":{"id":11,"type":"StaticText","parentId":17,"style":{"text":"Smart objects with multiple layers in the root will be grouped.\n","justify":"left","preferredSize":[280,0],"alignment":null}},"item-17":{"id":17,"type":"Panel","parentId":0,"style":{"text":"Info","preferredSize":[0,0],"margins":10,"orientation":"column","spacing":10,"alignChildren":["left","top"],"alignment":null}}},"order":[0,17,11]}

Example of the code it exports, where the last line is extra:

    statictext1.add("statictext", undefined, "Smart objects with multiple layers in the root"); 
    statictext1.add("statictext", undefined, "will be grouped."); 
    statictext1.add("statictext", undefined, ""); 

Feature Request: Empty event callbacks on export....

Would be nice to have a section of checkboxes (perhaps expandable) for each control where we can check various events (onClick, onEdit, etc...) and have empty callback functions generated on export.

Tab height calculation fails when child item text is edited (in preview)

When I add spaces to StaticText, it seems to occasionally add to the height of the parent tab, almost like I just added a line break...

...and when I type more letters without using spaces, it starts decreasing the height...

The issue is definitely related to tab behavior where their size gets updated when child items are edited. Why space causes this... No idea.

Happens with both StaticText and EditText, but not with Checkbox. Based on this my best guess is it has something to do with the text wrapping when the height calculation happens.

CEP export (HTML)

This is for everyone who always wanted to build websites using the ScriptUI layout... Or perhaps CEP panels. No judging from me either way.

---

A checklist for me for later use… On CEP export:

1. Grab HTML from the DOM
   • Remove dialog title? Hide it? Morph it into the <title>?
   • Add a CEP specific class that sort of stretches the dialog to cover the whole container with the help of some extra CSS (maybe?)
2. Grab dialog-preview.css (that has been compiled beforehand)
3. Grab CEP specific JS (jquery? or vanilla?) (I would imagine this to be like 30 lines tops. Just scaffolding for the most part. TabbedPanel and Dropdownlist would likely be the beefiest functions)
4. Link to font-awesome, jquery(?) and the fonts via a CDN.
   • With a little work, I could get rid of the need for font-awesome since it’s only used for a few items in the dialog preview.
5. Put it all together so it can be exported to clipboard or downloaded as a single .html file.

Link preferred size to other items

The sample dialog for has 4 panels where A + C share the same height and B + D share the same height. What if you could just change the height of B and D height would be mirrored?:

I've been thinking the actual linking should probably be completely visual. The labels for width and height could have click events that toggle linking mode on/off and then you could just select which items share the same width or height. And maybe if the active item is linked to some other item, the label would have a different color or something... I'm not really sure about that.

Something like this:

• The linked sizes should probably be stored separately, so that when you unlink it, it goes back to the original size. Perhaps: linkedWidth and linkedHeight.
• This linking could also work with 0 value and then just define the height on export.
• The sample dialog uses horizontal fill to match width and a static height is used to make sure the panels form a nice grid.

JPEGs don't work in Photoshop CC 2015-2019

The good thing is that PNGs seem to work fine. And JPEGs don't have any issues in other applications (AFAIK).

To prevent issues that leave users scratching their heads, I added a warning to image items:

---

Right now I don't have a fix for this and I'm not sure if I ever will. It looks like the decode function throws an error when it tries to decode a JPEG in Photoshop.

If someone out there has some insight about this, help would be appreciated. The priorty of this issue isn't very high since there's a clear workaround and I also wouldn't expect a whole lot of people needing to use JPEGS in the dialogs. Here's a proof of concept (jsfiddle), that I made before. The binary string is fetched exactly the same way in the app.

You can copy & paste the generated text straight to ESTK and run it.

I realized this issue is just a general issue with Photoshop. Trying to display a JPEG with or without the encode function fails.

Structure panel (treeview) path accent color is a little wonky

The purple lines shift vertically and sometimes they are missing entirely.

This can be observed with almost any kind of item structure, but here's JSON for the item structure used in the gif:

{"activeId":4,"items":{"item-0":{"id":0,"type":"Dialog","parentId":false,"style":{"text":"Dialog","preferredSize":[0,0],"margins":16,"orientation":"column","spacing":10,"alignChildren":["center","top"]}},"item-1":{"id":1,"type":"TabbedPanel","parentId":0,"style":{"preferredSize":[0,0],"margins":10,"alignment":null,"selection":4}},"item-2":{"id":2,"type":"Tab","parentId":1,"style":{"text":"Tab","preferredSize":[0,0],"margins":10,"orientation":"column","spacing":10,"alignChildren":["left","top"]}},"item-3":{"id":3,"type":"Tab","parentId":1,"style":{"text":"Tab","preferredSize":[0,0],"margins":10,"orientation":"column","spacing":10,"alignChildren":["left","top"]}},"item-4":{"id":4,"type":"Tab","parentId":1,"style":{"text":"Tab","preferredSize":[0,0],"margins":10,"orientation":"column","spacing":10,"alignChildren":["left","top"]}},"item-5":{"id":5,"type":"Panel","parentId":3,"style":{"text":"Panel","preferredSize":[0,0],"margins":10,"orientation":"column","spacing":10,"alignChildren":["left","top"],"alignment":null}},"item-6":{"id":6,"type":"EditText","parentId":5,"style":{"text":"EditText","preferredSize":[0,0],"alignment":null}}},"order":[0,1,2,3,5,6,4]}

DropDownList: alignment fill not working

Just straight up doesn't seem to do a thing.

In dialog example (import code below ↓) I had to use align children horizontal fill on the parent to make the Rotation DropDownList fill in.

After trying it I realized it works better that way for this dialog, but it's obviously still an issue that should be fixed.

{"activeId":9,"items":{"item-0":{"id":0,"type":"Dialog","parentId":false,"style":{"text":"Import Multiple PDF pages","preferredSize":[0,0],"margins":16,"orientation":"row","spacing":10,"alignChildren":["left","top"]}},"item-1":{"id":1,"type":"Panel","parentId":20,"style":{"text":"Page Selection","preferredSize":[0,205],"margins":10,"orientation":"column","spacing":10,"alignChildren":["left","top"],"alignment":null}},"item-2":{"id":2,"type":"StaticText","parentId":1,"style":{"text":"Import PDF Pages:","justify":"left","preferredSize":[0,0],"alignment":null}},"item-3":{"id":3,"type":"EditText","parentId":6,"style":{"text":"1","preferredSize":[60,0],"alignment":null}},"item-4":{"id":4,"type":"StaticText","parentId":6,"style":{"text":"thru","justify":"left","preferredSize":[0,0],"alignment":null}},"item-5":{"id":5,"type":"EditText","parentId":6,"style":{"text":"1","preferredSize":[60,0],"alignment":null}},"item-6":{"id":6,"type":"Group","parentId":1,"style":{"preferredSize":[0,0],"margins":0,"orientation":"row","spacing":10,"alignChildren":["left","center"],"alignment":null}},"item-7":{"id":7,"type":"StaticText","parentId":1,"style":{"text":"Start Placing on Doc Page:","justify":"left","preferredSize":[0,0],"alignment":null}},"item-8":{"id":8,"type":"Checkbox","parentId":1,"style":{"text":"Reverse Page Order","preferredSize":[0,0],"alignment":null}},"item-9":{"id":9,"type":"Panel","parentId":20,"style":{"text":"Sizing Options","preferredSize":[0,160],"margins":10,"orientation":"column","spacing":10,"alignChildren":["left","top"],"alignment":null}},"item-10":{"id":10,"type":"Checkbox","parentId":9,"style":{"text":"Fit to Page","preferredSize":[0,0],"alignment":null}},"item-11":{"id":11,"type":"Checkbox","parentId":9,"style":{"text":"Keep Proportions","preferredSize":[0,0],"alignment":null}},"item-12":{"id":12,"type":"Checkbox","parentId":9,"style":{"text":"Bleed the Fit Page","preferredSize":[0,0],"alignment":null,"checked":true}},"item-13":{"id":13,"type":"StaticText","parentId":9,"style":{"text":"Scale of Imported Page","justify":"left","preferredSize":[0,0],"alignment":null}},"item-14":{"id":14,"type":"Group","parentId":9,"style":{"preferredSize":[0,0],"margins":0,"orientation":"row","spacing":10,"alignChildren":["left","center"],"alignment":null}},"item-15":{"id":15,"type":"EditText","parentId":14,"style":{"text":"100","preferredSize":[40,0],"alignment":null}},"item-16":{"id":16,"type":"StaticText","parentId":14,"style":{"text":"Y%","justify":"left","preferredSize":[0,0],"alignment":null}},"item-17":{"id":17,"type":"EditText","parentId":14,"style":{"text":"100","preferredSize":[40,0],"alignment":null}},"item-18":{"id":18,"type":"StaticText","parentId":14,"style":{"text":"X%:","justify":"left","preferredSize":[0,0],"alignment":null}},"item-19":{"id":19,"type":"Group","parentId":0,"style":{"preferredSize":[0,0],"margins":0,"orientation":"column","spacing":10,"alignChildren":["fill","top"],"alignment":null}},"item-20":{"id":20,"type":"Group","parentId":0,"style":{"preferredSize":[0,0],"margins":0,"orientation":"column","spacing":10,"alignChildren":["fill","top"],"alignment":null}},"item-21":{"id":21,"type":"Panel","parentId":19,"style":{"text":"Positioning Options","preferredSize":[0,205],"margins":10,"orientation":"column","spacing":10,"alignChildren":["fill","top"],"alignment":null}},"item-22":{"id":22,"type":"StaticText","parentId":21,"style":{"text":"Position on Page Aligned From:","justify":"left","preferredSize":[0,0],"alignment":null}},"item-23":{"id":23,"type":"DropDownList","parentId":21,"style":{"text":"","listItems":"Top Left, Top Center, Top Right, Center Left, Center, Center Right, Bottom Left, Bottom Center, Bottom Right, -, Top - Relative to spine,  Center  - Relative to spine,  Right  - Relative to spine","preferredSize":[0,0],"alignment":null,"selection":0}},"item-24":{"id":24,"type":"DropDownList","parentId":21,"style":{"text":"Rotation:","listItems":"0, 90, 180, 270","preferredSize":[0,0],"alignment":null,"selection":0}},"item-25":{"id":25,"type":"StaticText","parentId":21,"style":{"text":"Offset by:","justify":"left","preferredSize":[0,0],"alignment":null}},"item-26":{"id":26,"type":"Group","parentId":21,"style":{"preferredSize":[0,0],"margins":0,"orientation":"row","spacing":10,"alignChildren":["left","center"],"alignment":null}},"item-27":{"id":27,"type":"StaticText","parentId":26,"style":{"text":"X:","justify":"left","preferredSize":[0,0],"alignment":null}},"item-28":{"id":28,"type":"EditText","parentId":26,"style":{"text":"0","preferredSize":[40,0],"alignment":null}},"item-29":{"id":29,"type":"StaticText","parentId":26,"style":{"text":"X:","justify":"left","preferredSize":[0,0],"alignment":null}},"item-30":{"id":30,"type":"EditText","parentId":26,"style":{"text":"0","preferredSize":[40,0],"alignment":null}},"item-31":{"id":31,"type":"Panel","parentId":19,"style":{"text":"Placement Options","preferredSize":[0,160],"margins":10,"orientation":"column","spacing":10,"alignChildren":["fill","top"],"alignment":null}},"item-32":{"id":32,"type":"DropDownList","parentId":31,"style":{"text":"Crop to:","listItems":"Art, Crop, Trim, Bleed, Media","preferredSize":[0,0],"alignment":null,"selection":0}},"item-33":{"id":33,"type":"Checkbox","parentId":31,"style":{"text":"Place Pages on a New Layer","preferredSize":[0,0],"alignment":null}},"item-34":{"id":34,"type":"Checkbox","parentId":31,"style":{"text":"Ignore Font and Image Errors","preferredSize":[0,0],"alignment":null}},"item-35":{"id":35,"type":"Checkbox","parentId":31,"style":{"text":"Transparent PDF Background","preferredSize":[0,0],"alignment":null,"checked":true}},"item-36":{"id":36,"type":"Group","parentId":0,"style":{"preferredSize":[0,0],"margins":0,"orientation":"column","spacing":10,"alignChildren":["fill","top"],"alignment":null}},"item-37":{"id":37,"type":"Button","parentId":36,"style":{"text":"OK","justify":"center","preferredSize":[0,0],"alignment":null}},"item-38":{"id":38,"type":"Button","parentId":36,"style":{"text":"Cancel","justify":"center","preferredSize":[0,0],"alignment":null}},"item-39":{"id":39,"type":"EditText","parentId":1,"style":{"text":"1","preferredSize":[60,0],"alignment":null}},"item-40":{"id":40,"type":"Checkbox","parentId":1,"style":{"text":"Map to Doc Pages","preferredSize":[0,0],"alignment":null}}},"order":[0,20,1,2,6,3,4,5,8,7,39,40,9,10,11,12,13,14,18,15,16,17,19,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38]}