• B
    BobDay

    @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.

    posted in Mango feedback read more
  • B
    BobDay

    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];
        }
    }
    

    posted in User help read more
  • B
    BobDay

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

    posted in Mango feedback read more
  • B
    BobDay

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

    posted in Mango feedback read more
  • B
    BobDay

    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;}
    

    posted in Mango feedback read more
  • B
    BobDay

    caching is disabled... that was pilot error. Now only showing 2 warnings (IE errors) - no errors
    0_1577394053215_Screen Shot 2019-12-26 at 1.00.27 PM.png

    Note selected text in editor (CMD-a)

    posted in Mango feedback read more
  • B
    BobDay

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

    posted in Mango feedback read more
  • B
    BobDay

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

    posted in Mango feedback read more