diff --git a/editor/extensions/ext-connector.js b/editor/extensions/ext-connector.js index 7bcf040c..2f1990a1 100644 --- a/editor/extensions/ext-connector.js +++ b/editor/extensions/ext-connector.js @@ -36,6 +36,15 @@ svgEditor.addExtension("Connector", function(S) { ] }; + function getOffset(side, line) { + var give_offset = !!line.getAttribute('marker-' + side); +// var give_offset = $(line).data(side+'_off'); + + // TODO: Make this number (5) be based on marker width/height + var size = line.getAttribute('stroke-width') * 5; + return give_offset ? size : 0; + } + function showPanel(on) { var conn_rules = $('#connector_rules'); if(!conn_rules.length) { @@ -73,8 +82,43 @@ svgEditor.addExtension("Connector", function(S) { } } - function findConnectors() { - var elems = selElems; + function updateLine(diff_x, diff_y) { + // Update line with element + var i = connections.length; + while(i--) { + var conn = connections[i]; + var line = conn.connector; + var elem = conn.elem; + + var pre = conn.is_start?'start':'end'; +// var sw = line.getAttribute('stroke-width') * 5; + + // Update bbox for this element + var bb = $(line).data(pre+'_bb'); + bb.x = conn.start_x + diff_x; + bb.y = conn.start_y + diff_y; + $(line).data(pre+'_bb', bb); + + var alt_pre = conn.is_start?'end':'start'; + + // Get center pt of connected element + var bb2 = $(line).data(alt_pre+'_bb'); + var src_x = bb2.x + bb2.width/2; + var src_y = bb2.y + bb2.height/2; + + // Set point of element being moved + var pt = getBBintersect(src_x, src_y, bb, getOffset(pre, line)); // $(line).data(pre+'_off')?sw:0 + setPoint(line, conn.is_start?0:'end', pt.x, pt.y, true); + + // Set point of connected element + var pt2 = getBBintersect(pt.x, pt.y, $(line).data(alt_pre + '_bb'), getOffset(alt_pre, line)); + setPoint(line, conn.is_start?'end':0, pt2.x, pt2.y, true); + + } + } + + function findConnectors(elems) { + if(!elems) elems = selElems; var connectors = $(svgcontent).find(conn_sel); connections = []; @@ -99,7 +143,6 @@ svgEditor.addExtension("Connector", function(S) { $(this).remove(); continue; } - if($.inArray(c_elem, elems) !== -1 || add_this) { var bb = svgCanvas.getStrokedBBox([c_elem]); connections.push({ @@ -114,11 +157,11 @@ svgEditor.addExtension("Connector", function(S) { }); } - function updateConnectors() { + function updateConnectors(elems) { // Updates connector lines based on selected elements // Is not used on mousemove, as it runs getStrokedBBox every time, // which isn't necessary there. - findConnectors(); + findConnectors(elems); if(connections.length) { // Update line with element var i = connections.length; @@ -127,7 +170,7 @@ svgEditor.addExtension("Connector", function(S) { var line = conn.connector; var elem = conn.elem; - var sw = line.getAttribute('stroke-width'); + var sw = line.getAttribute('stroke-width') * 5; var pre = conn.is_start?'start':'end'; // Update bbox for this element @@ -145,11 +188,11 @@ svgEditor.addExtension("Connector", function(S) { var src_y = bb2.y + bb2.height/2; // Set point of element being moved - var pt = getBBintersect(src_x, src_y, bb, add_offset?sw:0); + var pt = getBBintersect(src_x, src_y, bb, getOffset(pre, line)); setPoint(line, conn.is_start?0:'end', pt.x, pt.y, true); // Set point of connected element - var pt2 = getBBintersect(pt.x, pt.y, $(line).data(alt_pre + '_bb'), $(line).data(alt_pre + '_off')?sw:0); + var pt2 = getBBintersect(pt.x, pt.y, $(line).data(alt_pre + '_bb'), getOffset(alt_pre, line)); setPoint(line, conn.is_start?'end':0, pt2.x, pt2.y, true); // Update points attribute manually for webkit @@ -336,9 +379,10 @@ svgEditor.addExtension("Connector", function(S) { var mode = svgCanvas.getMode(); if(mode == "connector" && started) { - + + var sw = cur_line.getAttribute('stroke-width') * 3; // Set start point (adjusts based on bb) - var pt = getBBintersect(x, y, $(cur_line).data('start_bb')); + var pt = getBBintersect(x, y, $(cur_line).data('start_bb'), getOffset('start', cur_line)); start_x = pt.x; start_y = pt.y; @@ -360,38 +404,8 @@ svgEditor.addExtension("Connector", function(S) { } } if(connections.length) { - // Update line with element - var i = connections.length; - while(i--) { - var conn = connections[i]; - var line = conn.connector; - var elem = conn.elem; - - var pre = conn.is_start?'start':'end'; - var sw = line.getAttribute('stroke-width'); - - // Update bbox for this element - var bb = $(line).data(pre+'_bb'); - bb.x = conn.start_x + diff_x; - bb.y = conn.start_y + diff_y; - $(line).data(pre+'_bb', bb); - - var alt_pre = conn.is_start?'end':'start'; - - // Get center pt of connected element - var bb2 = $(line).data(alt_pre+'_bb'); - var src_x = bb2.x + bb2.width/2; - var src_y = bb2.y + bb2.height/2; - - // Set point of element being moved - var pt = getBBintersect(src_x, src_y, bb, $(line).data(pre+'_off')?sw:0); - setPoint(line, conn.is_start?0:'end', pt.x, pt.y, true); - - // Set point of connected element - var pt2 = getBBintersect(pt.x, pt.y, $(line).data(alt_pre + '_bb'), $(line).data(alt_pre+'_off')?sw:0); - setPoint(line, conn.is_start?'end':0, pt2.x, pt2.y, true); + updateLine(diff_x, diff_y); - } } } @@ -449,7 +463,7 @@ svgEditor.addExtension("Connector", function(S) { var bb = svgCanvas.getStrokedBBox([end_elem]); - var pt = getBBintersect(start_x, start_y, bb); + var pt = getBBintersect(start_x, start_y, bb, getOffset('start', cur_line)); setPoint(cur_line, 'end', pt.x, pt.y, true); $(cur_line) .data("c_start", start_id) @@ -492,6 +506,7 @@ svgEditor.addExtension("Connector", function(S) { showPanel(false); } } + updateConnectors(); }, elementChanged: function(opts) { var elem = opts.elems[0]; @@ -540,10 +555,16 @@ svgEditor.addExtension("Connector", function(S) { svgCanvas.clearSelection(); pline.id = id; svgCanvas.addToSelection([pline]); + elem = pline; } - } - updateConnectors(); + // Update line if it's a connector + if(elem.getAttribute('class') == conn_sel.substr(1)) { + var start = getElem($(elem).data('c_start')); + updateConnectors([start]); + } else { + updateConnectors(); + } }, toolButtonStateUpdate: function(opts) { if(opts.nostroke) { diff --git a/editor/extensions/ext-markers.js b/editor/extensions/ext-markers.js index 6fa449b1..25b08be9 100644 --- a/editor/extensions/ext-markers.js +++ b/editor/extensions/ext-markers.js @@ -261,6 +261,7 @@ svgEditor.addExtension("Markers", function(S) { if (val=='') val='\\nomarker'; if (val=='\\nomarker') { setIcon(pos,val); + S.call("changed", selElems); return; } // Set marker on element