Made improvements to extension support as well as connector extension

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1279 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Alexis Deveria 2010-01-26 21:28:52 +00:00
parent 1dcb9aac42
commit d60fb28557
6 changed files with 276 additions and 109 deletions

View File

@ -1,11 +1,13 @@
$(function() {
svgCanvas.addExtension("Connector", function(vars) {
var svgcontent = vars.content;
var getNextId = vars.getNextId;
var addElem = vars.addSvgElementFromJson;
var selManager = vars.selectorManager;
var started = false,
var svgcontent = vars.content,
svgroot = vars.root,
getNextId = vars.getNextId,
getElem = vars.getElem,
addElem = vars.addSvgElementFromJson,
selManager = vars.selectorManager,
started = false,
start_x,
start_y,
cur_line,
@ -16,12 +18,123 @@ $(function() {
connect_str = "-SE_CONNECT-",
selElems;
// Init code
// (function() {
//
//
// }());
var lang_list = {
"en":[
{"id": "mode_connect", "title": "Connect two objects" },
{"id": "conn_arrow_none", "textContent": "No arrow" },
{"id": "conn_arrow_arrow", "textContent": "Arrow" }
],
"fr":[
{"id": "mode_connect", "title": "Connecter deux objets"},
{"id": "conn_arrow_none", "textContent": "Sans flèche" },
{"id": "conn_arrow_arrow", "textContent": "Flèche" }
]
};
function showPanel(on) {
var conn_rules = $('#connector_rules');
if(!conn_rules.length) {
conn_rules = $('<style id="connector_rules"><\/style>').appendTo('head');
}
conn_rules.text(!on?"":"#tool_clone, #tool_topath, #tool_angle, #xy_panel { display: none !important; }");
$('#connector_panel').toggle(on);
if(on) {
var has_arrow = selElems[0].getAttribute("marker-mid");
$("#connector_arrow").val(has_arrow?"arrow":"none");
}
}
function setPoint(elem, pos, x, y, setMid) {
var pts = elem.points;
var pt = svgroot.createSVGPoint();
pt.x = x;
pt.y = y;
if(pos === 'end') pos = pts.numberOfItems-1;
// TODO: Test for this on init, then use alt only if needed
try {
pts.replaceItem(pt, pos);
} catch(err) {
// Should only occur in FF which formats points attr as "n,n n,n", so just split
var pt_arr = elem.getAttribute("points").split(" ");
for(var i=0; i< pt_arr.length; i++) {
if(i == pos) {
pt_arr[i] = x + ',' + y;
}
}
elem.setAttribute("points",pt_arr.join(" "));
}
if(setMid) {
// Add center point
var pt_start = pts.getItem(0);
var pt_end = pts.getItem(pts.numberOfItems-1);
setPoint(elem, 1, (pt_end.x + pt_start.x)/2, (pt_end.y + pt_start.y)/2);
}
}
function addArrow() {
var defs = vars.findDefs();
var m_id = "se_connector_arrow";
var marker = getElem(m_id);
if(!marker) {
marker = addElem({
"element": "marker",
"attr": {
"viewBox": "0 0 10 10",
"id": m_id,
"refX": 5,
"refY": 5,
"markerUnits": "strokeWidth",
"markerWidth": 16,
"markerHeight": 14,
"orient": "auto"
}
});
var arrow = addElem({
"element": "path",
"attr": {
"d": "M0,0 L10,5 L0,10 z",
"fill": "#000"
}
});
marker.appendChild(arrow);
defs.appendChild(marker);
}
selElems[0].setAttribute("marker-mid", "url(#" + m_id + ")");
}
function remArrow() {
selElems[0].removeAttribute("marker-mid");
}
// Init code
(function() {
var conn_tools = $('<div id="connector_panel">\
<label><select id="connector_arrow">\
<option id="conn_arrow_none" value="none">No arrow</option>\
<option id="conn_arrow_arrow" value="arrow">Arrow</option>\
</select></label></div>"').hide().appendTo("#tools_top");
$('#connector_arrow').change(function() {
switch ( this.value ) {
case "arrow":
addArrow();
break;
case "none":
remArrow();
break;
}
});
vars.extendWhitelist({
"marker": ["viewBox", "id", "refX", "refY", "markerUnits", "markerWidth", "markerHeight", "orient"],
"polyline": ["class", "marker-mid"]
});
}());
return {
name: "Connector",
@ -30,12 +143,18 @@ $(function() {
id: "mode_connect",
type: "mode",
icon: "images/cut.png",
title: "Connect two objects",
events: {
'click': function() {
svgCanvas.setMode("connector");
}
}
}],
addLangData: function(lang) {
return {
data: lang_list[lang]
};
},
mouseDown: function(opts) {
var e = opts.event;
@ -58,13 +177,9 @@ $(function() {
started = true;
cur_line = addElem({
"element": "line",
"element": "polyline",
"attr": {
"x1": x,
"y1": y,
"x2": start_x,
"y2": start_y,
"id": getNextId(),
"points": (x+','+y+' '+x+','+y+' '+start_x+','+start_y),
"stroke": '#000',
"stroke-width": 1,
"fill": "none",
@ -103,7 +218,6 @@ $(function() {
var bb = svgCanvas.getStrokedBBox([elem]);
var x = bb.x + bb.width/2;
var y = bb.y + bb.height/2;
connections.push({
elem: elem,
connector: this,
@ -128,8 +242,8 @@ $(function() {
var mode = svgCanvas.getMode();
if(mode == "connector" && started) {
cur_line.setAttributeNS(null, "x2", x);
cur_line.setAttributeNS(null, "y2", y);
// Set middle point for marker
setPoint(cur_line, 'end', x, y, true);
} else if(mode == "select") {
var slen = selElems.length;
@ -141,18 +255,16 @@ $(function() {
svgCanvas.getTransformList(elem).clear();
}
}
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 n = conn.is_start ? 1 : 2;
line.setAttributeNS(null, "x"+n, conn.start_x + diff_x);
line.setAttributeNS(null, "y"+n, conn.start_y + diff_y);
var pt_x = conn.start_x + diff_x;
var pt_y = conn.start_y + diff_y;
setPoint(line, conn.is_start?0:'end', pt_x, pt_y, true);
}
}
}
@ -200,10 +312,8 @@ $(function() {
var bb = svgCanvas.getStrokedBBox([end_elem]);
var x = bb.x + bb.width/2;
var y = bb.y + bb.height/2;
cur_line.setAttributeNS(null, "x2", x);
cur_line.setAttributeNS(null, "y2", y);
setPoint(cur_line, 'end', x, y, true);
cur_line.id = line_id;
console.log('cur_line',cur_line.id);
cur_line.setAttribute("class", conn_class);
svgCanvas.addToSelection([cur_line]);
svgCanvas.moveToBottomSelectedElement();
@ -224,8 +334,6 @@ $(function() {
var i = selElems.length;
// var to_hide = $('#tool_clone, #tool_topath, div.toolset:has(#angle), #line_panel');
while(i--) {
var elem = selElems[i];
if(elem && elem.getAttribute('class') == conn_class) {
@ -233,8 +341,12 @@ $(function() {
if(opts.selectedElement && !opts.multiselected) {
// TODO: Set up context tools and hide most regular line tools
showPanel(true);
} else {
showPanel(false);
}
} else {
showPanel(false);
}
}
}

View File

@ -37,6 +37,10 @@ var put_locale = function(svgCanvas, given_param){
var processFile = function(data){
var LangData = eval(data), js_strings;
var more = svgCanvas.runExtensions("addLangData", lang_param);
if(more) {
LangData = $.merge(LangData, more.data);
}
$.each(LangData, function(i, data) {
if(data.id) {
var elem = $('#'+data.id)[0];

View File

@ -422,7 +422,7 @@
}
#tools_top label {
margin-top: 3px;
margin-top: 0;
margin-left: 5px;
}

View File

@ -147,9 +147,11 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<div class="push_button" id="tool_reorient" title="Reorient path"></div>
<div class="tool_sep"></div>
</div>
<div class="toolset">
<label id="group_opacityLabel" class="selected_tool" for="group_opacity">opac:</label>
<input id="group_opacity" class="selected_tool" title="Change selected item opacity" size="3" value="100" type="text"/>
<div class="toolset" id="tool_opacity">
<label>
<span id="group_opacityLabel">opac:</span>
<input id="group_opacity" title="Change selected item opacity" size="3" value="100" type="text"/>
</label>
<div id="opacity_dropdown" class="dropdown">
<button></button>
<ul>
@ -163,15 +165,19 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
</ul>
</div>
</div>
<div class="toolset">
<label id="angleLabel" class="selected_tool">angle:</label>
<input id="angle" class="selected_tool" title="Change rotation angle" size="2" value="0" type="text"/>
</div>
<label id="tool_angle">
<span id="angleLabel">angle:</span>
<input id="angle" title="Change rotation angle" size="2" value="0" type="text"/>
</label>
<div id="xy_panel" class="toolset">
<label class="selected_tool">x:</label>
<input id="selected_x" class="selected_tool attr_changer" title="Change X coordinate" size="3" data-attr="x"/>
<label class="selected_tool">y:</label>
<input id="selected_y" class="selected_tool attr_changer" title="Change Y coordinate" size="3" data-attr="y"/>
<label>
x: <input id="selected_x" class="attr_changer" title="Change X coordinate" size="3" data-attr="x"/>
</label>
<label>
y: <input id="selected_y" class="attr_changer" title="Change Y coordinate" size="3" data-attr="y"/>
</label>
</div>
</div>
@ -188,13 +194,15 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<div class="push_button" id="tool_aligntop" title="Align Top"></div>
<div class="push_button" id="tool_alignmiddle" title="Align Middle"></div>
<div class="push_button" id="tool_alignbottom" title="Align Bottom"></div>
<span id="relativeToLabel" class="selected_tool">relative to:</span>
<select id="align_relative_to" class="selected_tool" title="Align relative to ...">
<label id="tool_align_relative">
<span id="relativeToLabel">relative to:</span>
<select id="align_relative_to" title="Align relative to ...">
<option id="selected_objects" value="selected">selected objects</option>
<option id="largest_object" value="largest">largest object</option>
<option id="smallest_object" value="smallest">smallest object</option>
<option id="page" value="page">page</option>
</select>
</label>
<div class="tool_sep"></div>
</div>
@ -206,72 +214,89 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<div id="rect_panel">
<div class="toolset">
<label id="rwidthLabel" class="rect_tool">width:</label>
<input id="rect_width" class="rect_tool attr_changer" title="Change rectangle width" size="3" data-attr="width"/>
<label id="rheightLabel" class="rect_tool">height:</label>
<input id="rect_height" class="rect_tool attr_changer" title="Change rectangle height" size="3" data-attr="height"/>
</div>
<div class="toolset">
<label id="cornerRadiusLabel" class="rect_tool">Corner Radius:</label>
<input id="rect_rx" size="3" value="0" class="rect_tool" type="text" title="Change Rectangle Corner Radius" data-attr="Corner Radius"/>
<label>
<span id="rwidthLabel">width:</span>
<input id="rect_width" class="attr_changer" title="Change rectangle width" size="3" data-attr="width"/>
</label>
<label>
<span id="rheightLabel">height:</span>
<input id="rect_height" class="attr_changer" title="Change rectangle height" size="3" data-attr="height"/>
</label>
</div>
<label id="cornerRadiusLabel">Corner Radius:
<input id="rect_rx" size="3" value="0" type="text" title="Change Rectangle Corner Radius" data-attr="Corner Radius"/>
</label>
</div>
<div id="image_panel">
<div class="toolset">
<label id="iwidthLabel" class="image_tool">width:</label>
<input id="image_width" class="image_tool attr_changer" title="Change image width" size="3" data-attr="width"/>
<label id="iheightLabel" class="image_tool">height:</label>
<input id="image_height" class="image_tool attr_changer" title="Change image height" size="3" data-attr="height"/>
<label id="iwidthLabel"><span id="iwidthLabel">width:</span>
<input id="image_width" class="attr_changer" title="Change image width" size="3" data-attr="width"/>
</label>
<label><span id="iheightLabel">height:</span>
<input id="image_height" class="attr_changer" title="Change image height" size="3" data-attr="height"/>
</label>
</div>
<div class="toolset">
<label class="image_tool">url:</label>
<input id="image_url" class="image_tool" type="text" title="Change URL" size="35"/>
<label id="tool_image_url">url:
<input id="image_url" type="text" title="Change URL" size="35"/>
<button id="change_image_url" style="display:none;">Change Image</button>
<div id="url_notice" title="NOTE: This image cannot be embedded. It will depend on this path to be displayed"></div>
</label>
</div>
</div>
<div id="circle_panel">
<div class="toolset">
<label class="circle_tool">cx:</label>
<input id="circle_cx" class="circle_tool attr_changer" title="Change circle's cx coordinate" size="3" data-attr="cx"/>
<label class="circle_tool">cy:</label>
<input id="circle_cy" class="circle_tool attr_changer" title="Change circle's cy coordinate" size="3" data-attr="cy"/>
<label id="tool_ellipse_cx">cx:
<input id="circle_cx" class="attr_changer" title="Change circle's cx coordinate" size="3" data-attr="cx"/>
</label>
<label id="tool_ellipse_cy">cy:
<input id="circle_cy" class="attr_changer" title="Change circle's cy coordinate" size="3" data-attr="cy"/>
</label>
</div>
<div class="toolset">
<label class="circle_tool">r:</label>
<input id="circle_r" class="circle_tool attr_changer" title="Change circle's radius" size="3" data-attr="r"/>
<label id="tool_ellipse_r">r:
<input id="circle_r" class="attr_changer" title="Change circle's radius" size="3" data-attr="r"/>
</label>
</div>
</div>
<div id="ellipse_panel">
<div class="toolset">
<label class="ellipse_tool">cx:</label>
<input id="ellipse_cx" class="ellipse_tool attr_changer" title="Change ellipse's cx coordinate" size="3" data-attr="cx"/>
<label class="ellipse_tool">cy:</label>
<input id="ellipse_cy" class="ellipse_tool attr_changer" title="Change ellipse's cy coordinate" size="3" data-attr="cy"/>
<label id="tool_ellipse_cx">cx:
<input id="ellipse_cx" class="attr_changer" title="Change ellipse's cx coordinate" size="3" data-attr="cx"/>
</label>
<label id="tool_ellipse_cy">cy:
<input id="ellipse_cy" class="attr_changer" title="Change ellipse's cy coordinate" size="3" data-attr="cy"/>
</label>
</div>
<div class="toolset">
<label class="ellipse_tool">rx:</label>
<input id="ellipse_rx" class="ellipse_tool attr_changer" title="Change ellipse's x radius" size="3" data-attr="rx"/>
<label class="ellipse_tool">ry:</label>
<input id="ellipse_ry" class="ellipse_tool attr_changer" title="Change ellipse's y radius" size="3" data-attr="ry"/>
<label id="tool_ellipse_rx">rx:
<input id="ellipse_rx" class="attr_changer" title="Change ellipse's x radius" size="3" data-attr="rx"/>
</label>
<label id="tool_ellipse_ry">ry:
<input id="ellipse_ry" class="attr_changer" title="Change ellipse's y radius" size="3" data-attr="ry"/>
</label>
</div>
</div>
<div id="line_panel">
<div class="toolset">
<label class="line_tool">x1:</label>
<input id="line_x1" class="line_tool attr_changer" title="Change line's starting x coordinate" size="3" data-attr="x1"/>
<label class="line_tool">y1:</label>
<input id="line_y1" class="line_tool attr_changer" title="Change line's starting y coordinate" size="3" data-attr="y1"/>
<label id="tool_line_x1">x1:
<input id="line_x1" class="attr_changer" title="Change line's starting x coordinate" size="3" data-attr="x1"/>
</label>
<label id="tool_line_y1">y1:
<input id="line_y1" class="attr_changer" title="Change line's starting y coordinate" size="3" data-attr="y1"/>
</label>
</div>
<div class="toolset">
<label class="line_tool">x2:</label>
<input id="line_x2" class="line_tool attr_changer" title="Change line's ending x coordinate" size="3" data-attr="x2"/>
<label class="line_tool">y2:</label>
<input id="line_y2" class="line_tool attr_changer" title="Change line's ending y coordinate" size="3" data-attr="y2"/>
<label id="tool_line_x2">x2:
<input id="line_x2" class="attr_changer" title="Change line's ending x coordinate" size="3" data-attr="x2"/>
</label>
<label id="tool_line_y2">y2:
<input id="line_y2" class="attr_changer" title="Change line's ending y coordinate" size="3" data-attr="y2"/>
</label>
</div>
</div>
@ -281,8 +306,8 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<div class="tool_button" id="tool_italic" title="Italic Text [I]"><span></span>i</div>
</div>
<div class="toolset">
<input id="font_family" class="text_tool" type="text" title="Change Font Family" size="12"/>
<div class="toolset" id="tool_font_family">
<input id="font_family" type="text" title="Change Font Family" size="12"/>
<div id="font_family_dropdown" class="dropdown">
<button></button>
<ul>
@ -295,22 +320,24 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
</div>
</div>
<div class="toolset">
<label id="font_sizeLabel" class="text_tool" for="font_size">size:</label>
<input id="font_size" class="text_tool" title="Change Font Size" size="3" value="0" type="text"/>
</div>
<input id="text" class="text_tool" type="text" title="Change text contents" size="35"/>
<label id="tool_font_size">
<span id="font_sizeLabel">size:</span>
<input id="font_size" title="Change Font Size" size="3" value="0" type="text"/>
</label>
<input id="text" type="text" title="Change text contents" size="35"/>
</div>
<div id="path_node_panel">
<div class="tool_sep"></div>
<div class="tool_button" id="tool_node_link" title="Link Control Points"></div>
<div class="tool_sep"></div>
<label class="path_node_tool">x:</label>
<input id="path_node_x" class="path_node_tool attr_changer" title="Change node's x coordinate" size="3" data-attr="x"/>
<label class="path_node_tool">y:</label>
<input id="path_node_y" class="path_node_tool attr_changer" title="Change node's y coordinate" size="3" data-attr="y"/>
<select id="seg_type" class="path_node_tool" title="Change Segment type">
<label id="tool_node_x">x:
<input id="path_node_x" class="attr_changer" title="Change node's x coordinate" size="3" data-attr="x"/>
</label>
<label id="tool_node_y">y:</label>
<input id="path_node_y" class="attr_changer" title="Change node's y coordinate" size="3" data-attr="y"/>
</label>
<select id="seg_type" title="Change Segment type">
<option id="straight_segments" selected="selected" value="4">Straight</option>
<option id="curve_segments" value="6">Curve</option>
</select>
@ -339,7 +366,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<!-- Zoom buttons -->
<div id="zoom_panel" class="magic_field">
<span id="zoomLabel" class="zoom_tool label">zoom:</span>
<input id="zoom" class="zoom_tool" title="Change zoom level" size="3" value="100" type="text" />
<input id="zoom" title="Change zoom level" size="3" value="100" type="text" />
<div id="zoom_dropdown" class="dropdown">
<button></button>
<ul>

View File

@ -298,6 +298,7 @@ function svg_edit_setup() {
var button = $('<div/>')
.attr("id", id)
.attr("title", btn.title)
.addClass(cls)
.appendTo(parent);
if(!svgicons) {
@ -1443,17 +1444,18 @@ function svg_edit_setup() {
"#tools_top > div, #tools_top": {
'line-height': {s: '17px', l: '34px', xl: '50px'}
},
"div.toolset": {
'height': {s: '25px', l: '43px', xl: '64px'}
},
// "div.toolset, #tools_top label": {
// 'height': {s: '25px', l: '43px', xl: '64px'}
// },
".dropdown button": {
'height': {s: '18px', l: '34px', xl: '40px'},
'line-height': {s: '18px', l: '34px', xl: '40px'},
'margin-top': {s: '3px'}
},
"#tools_top label, #tools_bottom label": {
"div.toolset, #tools_top label, #tools_bottom label": {
'font-size': {s: '1em', l: '1.5em', xl: '2em'},
'margin-top': {s: '1px', l: '3px', xl: '5px'}
'margin-top': {s: '1px', l: '3px', xl: '5px'},
'height': {s: '25px', l: '43px', xl: '64px'}
},
"#tool_bold, #tool_italic": {
'font-size': {s: '1.5em', l: '3em', xl: '4.5em'}
@ -2323,6 +2325,7 @@ function svg_edit_setup() {
populateLayers();
}
svgCanvas.runExtensions("langChanged", lang);
}
};

View File

@ -977,9 +977,30 @@ function BatchCommand(text) {
// Provide constants here (or should these be accessed through getSomething()?
var ext = ext_func({
content: svgcontent,
root: svgroot,
getNextId: getNextId,
getElem: getElem,
addSvgElementFromJson: addSvgElementFromJson,
selectorManager: selectorManager
selectorManager: selectorManager,
findDefs: findDefs,
// Probably only needed for extensions, so no need to make public?
// Also, should we prevent extensions from allowing <script> elements to be added?
extendWhitelist: function(new_data) {
$.each(new_data, function(elname, attrs) {
// add element
if(!(elname in svgWhiteList)) {
svgWhiteList[elname] = attrs;
} else {
$.each(attrs, function(i, attr) {
// add attributes
if($.inArray(attr, svgWhiteList[elname]) == -1) {
svgWhiteList[elname].push(attr);
}
});
}
});
}
});
extensions[name] = ext;
call("extension_added", ext);