@MattFox - Case closed. I stupidly put a non-specific div {...text-align:center}in one of my css files. Probably would have caught that, but the ace_text-layer width (& height) is set at 1000000px in ace/css/ace_editor.css, and height is further set to 1e+06px inline.

After much searching, I'm unable to find an example of why one would want to do that - although there must be one! Interestingly Chrome was rendering veeerrry slowly - when I lowered the width to 10000px, it sped up markedly.

We want to use a jquery plugin (jqSimpleConnect.js) to draw div connector lines; As we don't have access to the angularjs environment in designer per se, is there a preferred way to (1) wrap a jQuery plugin in a directive/component and (2) declare the external js file?

I believe I read that you do load jQuery in your .app. Thanks - sorry if this has been answered elsewhere - couldn't find it.

Code FYI:

/*
 * «Copyright 2012 José F. Maldonado»


/**
 * Declare namespace
 */
jqSimpleConnect = new Object();

/**
 * This member is an auxiliary counter used for generate unique identifiers.
 */
jqSimpleConnect._idGenerator = 0;

/**
 * This member is an associative array which contains all the document's connections.
 */
jqSimpleConnect._connections = new Object();

/**
 * Positions a connection, acording to the position of the elements which connects.
 *
 * @param {object} connection A connection object.
 */
jqSimpleConnect._positionConnection = function(connection) {
    // Calculate the positions of the element's center.
    var posA = connection.elementA.offset();
    posA.left = parseInt(posA.left, 10) + parseInt(connection.elementA.outerWidth()/2, 10);
    posA.top = parseInt(posA.top, 10) + parseInt(connection.elementA.outerHeight()/2, 10);

    var posB = connection.elementB.offset();
    posB.left = parseInt(posB.left, 10) + parseInt(connection.elementB.outerWidth()/2, 10);
    posB.top = parseInt(posB.top, 10) + parseInt(connection.elementB.outerHeight()/2, 10);

    // Get the line's elements.
    var line1 = jQuery('#' + connection.id + '_1');
    var line2 = jQuery('#' + connection.id + '_2');
    var line3 = jQuery('#' + connection.id + '_3');

    // Verify if the elements are aligned in a horizontal or vertical line.
    if(posA.left == posB.left || posA.top == posB.top) {
        // Uses only one line (hide the other two).
        line1.show();
        line2.hide();
        line3.hide();

        // Verify if the line must be vertical or horizonal.
        if(posA.left == posB.left) {
            // Vertical line.
            jqSimpleConnect._positionVerticalLine(line1, posA, posB, connection.radius, connection.roundedCorners);
        } else {
            // Horizontal line.
            jqSimpleConnect._positionHorizontalLine(line1, posA, posB, connection.radius, connection.roundedCorners);
        }
    } else {
        // Verify if must use two lines or three.
        if(connection.anchorA != connection.anchorB) {
            // Use two lines (hide the third).
            line1.show();
            line2.show();
            line3.hide();

            // Check the anchors of the elements.
            var corner = new Object();
            if(connection.anchorA == 'vertical') {
                // Find the corner's position.
                corner.left = posA.left;
                corner.top = posB.top;

                // Draw lines.
                jqSimpleConnect._positionVerticalLine(line1, posA, corner, connection.radius, connection.roundedCorners);
                jqSimpleConnect._positionHorizontalLine(line2, posB, corner, connection.radius, connection.roundedCorners);
            } else {
                // Find the corner's position.
                corner.left = posB.left;
                corner.top = posA.top;

                // Draw lines.
                jqSimpleConnect._positionVerticalLine(line1, posB, corner, connection.radius, connection.roundedCorners);
                jqSimpleConnect._positionHorizontalLine(line2, posA, corner, connection.radius, connection.roundedCorners);
            }
        } else {
            // Use three lines.
            line1.show();
            line2.show();
            line3.show();

            // Declare connection points.
            var corner1 = new Object();
            var corner2 = new Object();

            // Find if the middle's line must be vertical o horizontal.
            if(connection.anchorA == 'vertical') {
                // Middle's line must be horizontal.
                corner1.top = parseInt((posA.top + posB.top)/2, 10);
                corner2.top = corner1.top;
                corner1.left = posA.left;
                corner2.left = posB.left;

                // Draw lines.
                jqSimpleConnect._positionVerticalLine(line1, posA, corner1, connection.radius, connection.roundedCorners);
                jqSimpleConnect._positionVerticalLine(line2, posB, corner2, connection.radius, connection.roundedCorners);
                jqSimpleConnect._positionHorizontalLine(line3, corner1, corner2, connection.radius, connection.roundedCorners);
            } else {
                // Middle's line must be vertical.
                corner1.left = parseInt((posA.left + posB.left)/2, 10);
                corner2.left = corner1.left;
                corner1.top = posA.top;
                corner2.top = posB.top;

                // Draw lines.
                jqSimpleConnect._positionHorizontalLine(line1, posA, corner1, connection.radius, connection.roundedCorners);
                jqSimpleConnect._positionHorizontalLine(line2, posB, corner2, connection.radius, connection.roundedCorners);
                jqSimpleConnect._positionVerticalLine(line3, corner1, corner2, connection.radius, connection.roundedCorners);
            }
        }
    }
}

/**
 * Draws a vertical line, between the two points, by changing the properties of a HTML element.
 *
 *@param {object} jqElement A jQuery object of the HTML element used for represent the line.
 *@param {object} point1 An object with the properties 'left' and 'top' representing the position of the first point.
 *@param {object} point2 An object with the properties 'left' and 'top' representing the position of the second point.
 *@param {integer} radius The line's radius.
 *@param {boolean} roundedCorners A boolean indicating if the corners are going to be round.
 */
jqSimpleConnect._positionVerticalLine = function(jqElement, point1, point2, radius, roundedCorners) {
    var halfRadius = parseInt(radius/2, 10);
    jqElement.css('left', point1.left - halfRadius);
    jqElement.css('top', ((point1.top > point2.top)? (point2.top - halfRadius) : (point1.top - halfRadius)));
    jqElement.css('width', radius + 'px');
    jqElement.css('height', ((point1.top > point2.top)? (point1.top - point2.top + radius) : (point2.top - point1.top + radius) ) + 'px');
}

/**
 * Draws a horizontal line, between the two points, by changing the properties of a HTML element.
 *
 *@param {object} jqElement A jQuery object of the HTML element used for represent the line.
 *@param {object} point1 An object with the properties 'left' and 'top' representing the position of the first point.
 *@param {object} point2 An object with the properties 'left' and 'top' representing the position of the second point.
 *@param {integer} radius The line's radius.
 *@param {boolean} roundedCorners A boolean indicating if the corners are going to be round.
 */
jqSimpleConnect._positionHorizontalLine = function(jqElement, point1, point2, radius, roundedCorners) {
    var halfRadius = parseInt(radius/2, 10);
    jqElement.css('top', point1.top - halfRadius);
    jqElement.css('left', ((point1.left > point2.left)? (point2.left - halfRadius) : (point1.left - halfRadius)));
    jqElement.css('height', radius + 'px');
    jqElement.css('width', ((point1.left > point2.left)? (point1.left - point2.left + radius) : (point2.left - point1.left + radius) ) + 'px');
}

/**
 * Draws a connection between two elements.
 *
 * @param {object} elementA A CSS selector or a jQuery's object for select the first element.
 * @param {object} elementB A CSS selector or a jQuery's object for select the second element.
 * @param {object} options An associative array with the properties 'color' (which defines the color of the connection), 'radius' (the width of the
 * connection), 'roundedCorners' (a boolean indicating if the corners must be round), 'anchorA' (the anchor type of the first element, which can be
 * 'horizontal' or 'vertical') and 'anchorB' (the anchor type of second element).
 * @returns {string} The connection identifier or 'null' if the connection could not be draw.
 */
jqSimpleConnect.connect = function(elementA, elementB, options) {
    // Verify if the element's selector are ok.
    if(elementA == null || jQuery(elementA).length == 0 ||
       elementB == null || jQuery(elementB).length == 0) {
       return null;
       }

    elementA = jQuery(elementA);
    if(elementA.length > 1) elementA = elementA.first();
    elementB = jQuery(elementB);
    if(elementB.length > 1) elementB = elementB.first();

    // Create connection object.
    var connection = new Object();
    connection.id = 'jqSimpleConnect_' + jqSimpleConnect._idGenerator++;
    connection.elementA = elementA;
    connection.elementB = elementB;
    connection.color = (options != null && options.color != null)? options.color + '' : '#808080';
    connection.radius = (options != null && options.radius != null && !isNaN(options.radius))? parseInt(options.radius, 10) : 5;
    connection.anchorA = (options != null && options.anchorA != null && (options.anchorA == 'vertical' || options.anchorA == 'horizontal'))? options.anchorA : 'horizontal';
    connection.anchorB = (options != null && options.anchorB != null && (options.anchorB == 'vertical' || options.anchorB == 'horizontal'))? options.anchorB : 'horizontal';
    connection.roundedCorners = options != null && options.roundedCorners != null && (options.roundedCorners == true || options.roundedCorners == 'true');

    // Add connection to the connection's list.
    jqSimpleConnect._connections[connection.id] = connection;

    // Create HTML elements.
    var div = '<div id="divUniqueIdentifier" class="jqSimpleConnect '+connection.id+'" ' +
              'style="width:'+connection.radius+'px; ' +
                     'height:'+connection.radius+'px; ' +
                     'background-color:'+connection.color+'; ' +
                     (connection.roundedCorners? 'border-radius:'+parseInt(connection.radius/2,10)+'px; -webkit-border-radius:'+parseInt(connection.radius/2,10)+'px; -moz-border-radius:'+parseInt(connection.radius/2,10)+'px; ' : '') +
                     'position:absolute;"></div>';
    jQuery('body').prepend(div.replace('divUniqueIdentifier', connection.id + '_1'));
    jQuery('body').prepend(div.replace('divUniqueIdentifier', connection.id + '_2'));
    jQuery('body').prepend(div.replace('divUniqueIdentifier', connection.id + '_3'));

    // Position connection.
    jqSimpleConnect._positionConnection(connection);

    // Return result.
    return connection.id;
}

/**
 * Repaints a connection.
 *
 * @param {string} connectionId The connection identifier.
 * @returns {boolean} 'true' if the operation was done, 'false' if the connection no exists.
 */
jqSimpleConnect.repaintConnection = function(connectionId) {
    var connection = jqSimpleConnect._connections[connectionId];
    if(connection != null) {
        jqSimpleConnect._positionConnection(connection);
        return true;
    }
    return false;
}

/**
 * Repaints all the connections.
 */
jqSimpleConnect.repaintAll = function() {
    for(var key in jqSimpleConnect._connections) {
        jqSimpleConnect._positionConnection(jqSimpleConnect._connections[key]);
    }
}

/**
 * Removes a connection.
 *
 * @param {string} connectionId The connection identifier.
 * @returns {boolean} 'true' if the operation was done, 'false' if the connection no exists.
 */
jqSimpleConnect.removeConnection = function(connectionId) {
    if(jqSimpleConnect._connections[connectionId] != null) {
        // Remove HTML element.
        jQuery('.jqSimpleConnect.'+connectionId).remove();

        // Remove connection data.
        jqSimpleConnect._connections[connectionId] = null;
        delete jqSimpleConnect._connections[connectionId];

        // Return result.
        return true;
    }
    return false;
}

/**
 * Removes all the connections.
 */
jqSimpleConnect.removeAll = function() {
    // Remove HTML elements.
    jQuery('.jqSimpleConnect').remove();

    // Clear connections list.
    for(var key in jqSimpleConnect._connections) {
        jqSimpleConnect._connections[key] = null;
        delete jqSimpleConnect._connections[key];
    }
}

Ah... but of course you knew all that. Short answer is yes!

...confirmed it parses the pasted html at paste time. If I add a color: class to any of the spans, it's not read.

well, not exactly. Ace appears to parse out the JSON into 'lines', concatenated with spans:

<div class="ace_line" style="height: 30px;">
    <span class="ace_meta ace_tag ace_punctuation ace_tag-open ace_xml">&lt; 
       </span>
    <span class="ace_meta ace_tag ace_tag-name ace_xml">div</span>
    <span class="ace_text ace_tag-whitespace ace_xml"> </span>
    <span class="ace_entity ace_other ace_attribute-name ace_xml">class</span> 
   <span class="ace_keyword ace_operator ace_attribute-equals ace_xml">= 
       </span> 
   <span class="ace_string ace_attribute-value ace_xml">"ma-designer-root" 
       </span> 
   <span class="ace_text ace_tag-whitespace ace_xml"> </span>
   <span class="ace_entity ace_other ace_attribute-name ace_xml">id</span>
   <span class="ace_keyword ace_operator ace_attribute-equals ace_xml">= 
      </span> 
   <span class="ace_string ace_attribute-value ace_xml">"6d41eb7c-475e-48df- 
      9132</span>
</div>

but, yes, the info is all there.
I can copy and paste into and from the editor.
text color is inherited from theme:

.ace-monokai {background-color: #272822;color: #F8F8F2;}

caching is disabled... that was pilot error. Now only showing 2 warnings (IE errors) - no errors

Note selected text in editor (CMD-a)

@MattFox oops sorry... it only showed the warnings prior to this iteration...

sure. thanks...

...did. nothing out of the ordinary. very odd.

@MattFox - posted issue in Mango Feedback, should you have any thoughts.

strange... all of a sudden, all instances (edit pages, dashboard designer, json store editor...) of ace editor are NOT showing any text, however:

• underlying text is there, just hidden from view - can copy and paste in and out;
• occurs in all browsers (chrome, ff, safari);
• CSS is correct under inspector - and unable to change color: attribute;
• happened on 3.6.x - upgraded to 3.7.4, still occurring;
• user is superadmin;

Behavior - when entering editor instance for the first time in session, (eg, started process), the editor background blinks white for ~ 100ms, then displays blank. Note: ace_active-line background is as its css shows: #202020.

I'm stumped...

Thanks, @MattFox. I attempted that, I think - but now have a situation where no text shows in ace or json store editor... css is right, but not sure what's going on here. Even upgraded to 3.7.4... when I sort that out I'll try your fix.

This has been addressed, but obliquely... what we are trying to accomplish is, in our designer page, have ma container, object point gets, and then include the main body html from a file:

<div class="ma-designer-root" id="6d41eb7c-475e-48df-9132-056d861a617d" style="width: 1366px; height: 768px; position: relative;">
    <div ng-init="page = {}"></div>

    <ma-watch-list-get ng-model="indicatorWl.watchlist" parameters="indicatorWl.parameters" on-points-change="page.points = $points" id="wl-indicator-id" watch-list-xid="WL_Indicator">
    </ma-watch-list-get>

    <ma-get-point-value points="page.points"></ma-get-point-value>
    //path to hmi.html here:
    <ng-include src="'./hmi.html'"></nginclude>
<div>

Our "hmi.html" file is in /overrides/web/modules/mangoUI/web/dev, along with our userModule.js and customCSS.css files.

any thoughts on how to set up ng-include here? (other than route provider...) - or do I need to use a component for this?

-This so we can edit outside of ace editor...

Thanks.

Very cool! a man of his word. This will be most helpful.

well, on second thought then, that would be super!

Thanks, @Jared-Wiltshire. Let me bug you when things appear to be getting out of hand!

yes - that occurred to me - might make things a little more straightforward. Thanks - didn't think about the REST rate issue. Is there anything about using Webpack with mango?

Since angularjs doesn't have ng2's parsers, we cannot encapsulate css inside a component. Assuming several components on a page, and several custom pages in an app, would it be preferable to include (or link) all css on each page, or combined in custom.css? I'm assuming namespacing the css as necessary to appropriately component-scope it. Thanks for your thoughts.