-
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.
-
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]; } }
-
B BobDay
Ah... but of course you knew all that. Short answer is yes!
-
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.
-
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">< </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;}
-
B BobDay
caching is disabled... that was pilot error. Now only showing 2 warnings (IE errors) - no errors
Note selected text in editor (CMD-a)
-
B BobDay
@MattFox oops sorry... it only showed the warnings prior to this iteration...
-
-
-
B BobDay
@MattFox - posted issue in Mango Feedback, should you have any thoughts.