Icon Selection Enhancements

[mitchelljfranklin]

Bugs / Known Issues

• Start shape is mis-shaped when using Modern icon set.
• Certain custom shapes have current icons when used with Legacy/Modern icon sets.
• Legacy theme uses Legacy Connector and Legacy Start shapes instead of Modern ones. (This could be fixed easily... I wanted to hear community feedback before implementing)
• Some shapes in dialogs show new icons instead of old ones.
• Component icons in the sidebar are showing Minimal icons instead of Legacy ones.
• When dragging shapes on to the canvas, the old icon is shown until the shape is dropped. (The fix for this already exists, just need to implement in a way that doesn't cause performance issues on large processes)

Future Improvements

• Load images from plugin rather than base64 so they can be cached.
• Add query to replace Boomi-created shape styles with their equivalent.
• Add query build process to generate icon fills based off of colors automatically
• Load higher resolution images (or SVG) for canvas @2x size screenshots. (128px is ideal)

Code Used to Build invertedIconStyleColorCodes:

var itemColorCache = [];
for (elem of document.querySelectorAll('.gwt-Shape, .shape_palette_widget')){
    var img = elem.getElementsByTagName('img')[0];
    if(["Add to Cache","Branch","Business Rules","Cleanse","Connector","Data Process","Decision","Exception","Find Changes","Flow Control","Map","Message","Notify","Process Call","Process Route","Program Command","Remove From Cache","Retrieve From Cache","Return Documents","Route","Set Properties","Start (Connector)","Start (No Data)","Start (Trading Partner)","Stop","Try/Catch", "Start"].includes(img.title)){
        var svgElement, xmlHTTP, svgDoc
        xmlHTTP = new window.XMLHttpRequest();
        xmlHTTP.open("GET", img.src, false);
        xmlHTTP.send();
        svgDoc = xmlHTTP.responseText;
        var re = /#[0-9a-f]{3,6}/gi;
        var colors = svgDoc.match(re);
        var solidColor = colors[0];
        itemColorCache[elem.getElementsByTagName('img')[0].title] = solidColor;
    }
}
console.log(itemColorCache);