Flyout menu broken in 2019?

[Tool111]

Hey guys,

So I've had settings put into the flyout menu of my extension for easily a year or two now and in the latest adobe update it's disappeared which really really breaks the usability of it.

Here's a snippet of me setting the menu up.

function init() {
        // Ugly workaround to keep track of "checked" and "enabled" statuses
var checkableMenuItem_isChecked = true;
var targetMenuItem_isEnabled = true;
// Flyout menu XML string 
var flyoutXML = '<Menu> \
                            <MenuItem Id="modes" Label="Modes" Enabled="false"/>\
                            <MenuItem Label="---" /> \
<MenuItem Id="selectedGroupMode" Label="Selected Group Mode" Enabled="true" Checked="true"/> \
<MenuItem Id="groupContentsMode" Label="Group Contents Mode" Enabled="true" Checked="false"/> \
<MenuItem Id="channelPackingMode" Label="Channel Packing Mode" Enabled="true" Checked="false"/> \
<MenuItem Id="wysiwygMode" Label="WYSIWYG Mode" Enabled="true" Checked="false"/> \
<MenuItem Label="---" /> \
\
</Menu>';
// Uses the XML string to build the menu
csInterface.setPanelFlyoutMenu(flyoutXML);
// Flyout Menu Click Callback
function flyoutMenuClickedHandler (event) {
// the event's "data" attribute is an object, which contains "menuId" and "menuName"
console.dir(event); 
switch (event.data.menuId) {
case "selectedGroupMode": 
checkableMenuItem_isChecked = !checkableMenuItem_isChecked;
csInterface.updatePanelMenuItem("Selected Group Mode", true, true);
                    csInterface.updatePanelMenuItem("Group Contents Mode", true, false);
                    csInterface.updatePanelMenuItem("Channel Packing Mode", true, false);
                    csInterface.updatePanelMenuItem("WYSIWYG Mode", true, false);
                    loadJSX('selectedGroup.jsx');
break;
                case "groupContentsMode": 
checkableMenuItem_isChecked = !checkableMenuItem_isChecked;
csInterface.updatePanelMenuItem("Selected Group Mode", true, false);
                    csInterface.updatePanelMenuItem("Group Contents Mode", true, true);
                    csInterface.updatePanelMenuItem("Channel Packing Mode", true, false);
                    csInterface.updatePanelMenuItem("WYSIWYG Mode", true, false);
                    loadJSX('groupContents.jsx');
break;
                case "channelPackingMode": 
checkableMenuItem_isChecked = !checkableMenuItem_isChecked;
csInterface.updatePanelMenuItem("Selected Group Mode", true, false);
                    csInterface.updatePanelMenuItem("Group Contents Mode", true, false);
                    csInterface.updatePanelMenuItem("Channel Packing Mode", true, true);
                    csInterface.updatePanelMenuItem("WYSIWYG Mode", true, false);
                    loadJSX('channelPacking.jsx');
break;
                case "wysiwygMode": 
checkableMenuItem_isChecked = !checkableMenuItem_isChecked;
csInterface.updatePanelMenuItem("Selected Group Mode", true, false);
                    csInterface.updatePanelMenuItem("Group Contents Mode", true, false);
                    csInterface.updatePanelMenuItem("Channel Packing Mode", true, false);
                    csInterface.updatePanelMenuItem("WYSIWYG Mode", true, true);
                    loadJSX('wysiwyg.jsx');
break;
default: 
console.log(event.data.menuName + " clicked!");
}
//csInterface.evalScript("alert('Clicked!\\n \"" + event.data.menuName + "\"');");
}
// Listen for the Flyout menu clicks
csInterface.addEventListener("com.adobe.csxs.events.flyoutMenuClicked", flyoutMenuClickedHandler);

I've manually updated the CSInterface.js file I was using to the new one from
CEP-Resources/CSInterface.js at master · Adobe-CEP/CEP-Resources · GitHub
and same result after building.

Has something changed drastically? It was working fine for the longest time.

[Tool111]

Hey, so far all my things are only PS and only one is using the flyout. I'm thinking of removing it but till I get new UI built for it it would be great to fix it

[erinferinferinf]

Hi Tool111,

I asked the CEP team, and they said that flyout menus work in CEP 9 / Photoshop 2019 on their internal testing sample app. They tried your code sample above and could confirm the flyout menu didn't work.

Could we get some more details on your operating system and the exact version(s) of Photoshop that you've tried?

They also asked if they could see your extension. Is it available for download on Github or listed on the Creative Cloud Exchange by any change?

Wish I had some better news...

Erin

[user9282867]

Hi

   I am from CEP team.  we have sample extension where we are creating flyout menu. You can find code atCEP-Resources/CEPFeatures.html at master · Adobe-CEP/CEP-Resources · GitHub

Thank

Amit

[Tool111]

Ah, at this point I've already started a big UI/UX overhaul which is going to bring the stuff I had in the flyout menu just into the panel itself

Thanks for looking, sorry for time wasting.

[Silly-V]

Unfortunately the example code is not working, but it appears some limited functionality is still in play as the first and 2nd-to-last and last of the example string's menu items were displayed. This meant that nested items were not welcome.

Next, updating the items was not working - possibly because these items could not be checked and therefore would not report expected information in the callback event anyhow - so event.data.checked is out as well. Nevertheless, even with a global variable taking place of data.checked, it failed to update the item.

However, it appears that we can just re-apply the entire thing. Here is what I was able to make work just now:

// global variable
var GLOBAL_VAR = false;
/**
 * 
 * @param {Object} firstMenuItem - The object for the first menu item.
 * @param {string} firstMenuItem.name - Item's name.
 * @param {string} firstMenuItem.checked - Whether it's checked.
 */
function setFlyoutMenu(firstMenuItem){
  const menuString = `<Menu>
    <MenuItem Id="menuItemId1" Label="Is GLOBAL_VAR true?" Enabled="true" Checked="${GLOBAL_VAR}"/>
  </Menu>`;
  const cs = new CSInterface();
  cs.setPanelFlyoutMenu(menuString);
  cs.addEventListener("com.adobe.csxs.events.flyoutMenuClicked", setPanelCallback);
}
function setPanelCallback(event) {
  const cs = new CSInterface();
  console.log('The menu ID is: ' + event.data.menuId + '\n' + 'The menu name is: ' + event.data.menuName);
  if(event.data.menuId == "menuItemId1"){
    GLOBAL_VAR = !GLOBAL_VAR;
    // not working
    // cs.updatePanelMenuItem(event.data.menuId, true, event.data.checked);
    // cs.updatePanelMenuItem(event.data.menuId, true, GLOBAL_VAR);
    setFlyoutMenu({
      name: event.data.menuId,
      checked: GLOBAL_VAR
    });
  }
}

[schroef]

That example doesnt really show how to implement it a real panel since it gets all the data from the HTML panel and updating the panel is done but button press and then redrawing the menu.