zcy
/
svgedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
editor/ext-connector.js
View File

@ -1,11 +1,13 @@
$(function() { $(function() {
svgCanvas.addExtension("Connector", function(vars) { svgCanvas.addExtension("Connector", function(vars) {
var svgcontent = vars.content; var svgcontent = vars.content,
var getNextId = vars.getNextId; svgroot = vars.root,
var addElem = vars.addSvgElementFromJson; getNextId = vars.getNextId,
var selManager = vars.selectorManager; getElem = vars.getElem,
var started = false, addElem = vars.addSvgElementFromJson,
selManager = vars.selectorManager,
started = false,
start_x, start_x,
start_y, start_y,
cur_line, cur_line,
@ -16,12 +18,123 @@ $(function() {
connect_str = "-SE_CONNECT-", connect_str = "-SE_CONNECT-",
selElems; selElems;
// Init code var lang_list = {
// (function() { "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 { return {
name: "Connector", name: "Connector",
@ -30,12 +143,18 @@ $(function() {
id: "mode_connect", id: "mode_connect",
type: "mode", type: "mode",
icon: "images/cut.png", icon: "images/cut.png",
title: "Connect two objects",
events: { events: {
'click': function() { 'click': function() {
svgCanvas.setMode("connector"); svgCanvas.setMode("connector");
} }
} }
}], }],
addLangData: function(lang) {
return {
data: lang_list[lang]
};
},
mouseDown: function(opts) { mouseDown: function(opts) {
var e = opts.event; var e = opts.event;
@ -58,13 +177,9 @@ $(function() {
started = true; started = true;
cur_line = addElem({ cur_line = addElem({
"element": "line", "element": "polyline",
"attr": { "attr": {
"x1": x, "points": (x+','+y+' '+x+','+y+' '+start_x+','+start_y),
"y1": y,
"x2": start_x,
"y2": start_y,
"id": getNextId(),
"stroke": '#000', "stroke": '#000',
"stroke-width": 1, "stroke-width": 1,
"fill": "none", "fill": "none",
@ -103,7 +218,6 @@ $(function() {
var bb = svgCanvas.getStrokedBBox([elem]); var bb = svgCanvas.getStrokedBBox([elem]);
var x = bb.x + bb.width/2; var x = bb.x + bb.width/2;
var y = bb.y + bb.height/2; var y = bb.y + bb.height/2;
connections.push({ connections.push({
elem: elem, elem: elem,
connector: this, connector: this,
@ -128,8 +242,8 @@ $(function() {
var mode = svgCanvas.getMode(); var mode = svgCanvas.getMode();
if(mode == "connector" && started) { if(mode == "connector" && started) {
cur_line.setAttributeNS(null, "x2", x); // Set middle point for marker
cur_line.setAttributeNS(null, "y2", y); setPoint(cur_line, 'end', x, y, true);
} else if(mode == "select") { } else if(mode == "select") {
var slen = selElems.length; var slen = selElems.length;
@ -141,18 +255,16 @@ $(function() {
svgCanvas.getTransformList(elem).clear(); svgCanvas.getTransformList(elem).clear();
} }
} }
if(connections.length) { if(connections.length) {
// Update line with element // Update line with element
var i = connections.length; var i = connections.length;
while(i--) { while(i--) {
var conn = connections[i]; var conn = connections[i];
var line = conn.connector; var line = conn.connector;
var elem = conn.elem; var elem = conn.elem;
var n = conn.is_start ? 1 : 2; var pt_x = conn.start_x + diff_x;
line.setAttributeNS(null, "x"+n, conn.start_x + diff_x); var pt_y = conn.start_y + diff_y;
line.setAttributeNS(null, "y"+n, 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 bb = svgCanvas.getStrokedBBox([end_elem]);
var x = bb.x + bb.width/2; var x = bb.x + bb.width/2;
var y = bb.y + bb.height/2; var y = bb.y + bb.height/2;
cur_line.setAttributeNS(null, "x2", x); setPoint(cur_line, 'end', x, y, true);
cur_line.setAttributeNS(null, "y2", y);
cur_line.id = line_id; cur_line.id = line_id;
console.log('cur_line',cur_line.id);
cur_line.setAttribute("class", conn_class); cur_line.setAttribute("class", conn_class);
svgCanvas.addToSelection([cur_line]); svgCanvas.addToSelection([cur_line]);
svgCanvas.moveToBottomSelectedElement(); svgCanvas.moveToBottomSelectedElement();
@ -224,8 +334,6 @@ $(function() {
var i = selElems.length; var i = selElems.length;
// var to_hide = $('#tool_clone, #tool_topath, div.toolset:has(#angle), #line_panel');
while(i--) { while(i--) {
var elem = selElems[i]; var elem = selElems[i];
if(elem && elem.getAttribute('class') == conn_class) { if(elem && elem.getAttribute('class') == conn_class) {
@ -233,8 +341,12 @@ $(function() {
if(opts.selectedElement && !opts.multiselected) { if(opts.selectedElement && !opts.multiselected) {
// TODO: Set up context tools and hide most regular line tools // TODO: Set up context tools and hide most regular line tools
showPanel(true);
} else {
showPanel(false);
} }
} else {
showPanel(false);
} }
} }
} }

4
editor/locale/locale.js
View File

@ -37,6 +37,10 @@ var put_locale = function(svgCanvas, given_param){
var processFile = function(data){ var processFile = function(data){
var LangData = eval(data), js_strings; 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) { $.each(LangData, function(i, data) {
if(data.id) { if(data.id) {
var elem = $('#'+data.id)[0]; var elem = $('#'+data.id)[0];

2
editor/svg-editor.css
View File

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

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

13
editor/svg-editor.js
View File

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

23
editor/svgcanvas.js
View File

@ -977,9 +977,30 @@ function BatchCommand(text) {
// Provide constants here (or should these be accessed through getSomething()? // Provide constants here (or should these be accessed through getSomething()?
var ext = ext_func({ var ext = ext_func({
content: svgcontent, content: svgcontent,
root: svgroot,
getNextId: getNextId, getNextId: getNextId,
getElem: getElem,
addSvgElementFromJson: addSvgElementFromJson, 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; extensions[name] = ext;
call("extension_added", ext); call("extension_added", ext);