Split off the arrow part of the connector plugin to be its own arrows plugin (start on issue 308)
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1317 eee81c28-f429-11dd-99c0-75d572ba1dddmaster
Alexis Deveria
parent
f415aee687
commit
bed10696d2
|
|
@ -0,0 +1,131 @@
|
|||
/*
|
||||
* ext-arrows.js
|
||||
*
|
||||
* Licensed under the Apache License, Version 2
|
||||
*
|
||||
* Copyright(c) 2010 Alexis Deveria
|
||||
*
|
||||
*/
|
||||
|
||||
$(function() {
|
||||
svgCanvas.addExtension("Arrows", function(S) {
|
||||
var svgcontent = S.content,
|
||||
getElem = S.getElem,
|
||||
addElem = S.addSvgElementFromJson,
|
||||
selElems;
|
||||
|
||||
var lang_list = {
|
||||
"en":[
|
||||
{"id": "arrow_none", "textContent": "No arrow" },
|
||||
{"id": "arrow_arrow", "textContent": "Arrow" }
|
||||
],
|
||||
"fr":[
|
||||
{"id": "arrow_none", "textContent": "Sans flèche" },
|
||||
{"id": "arrow_arrow", "textContent": "Flèche" }
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
function showPanel(on) {
|
||||
$('#arrow_panel').toggle(on);
|
||||
|
||||
if(on) {
|
||||
var has_arrow = selElems[0].getAttribute("marker-mid");
|
||||
$("#arrow_list").val(has_arrow?"arrow":"none");
|
||||
}
|
||||
}
|
||||
|
||||
function addArrow() {
|
||||
var defs = S.findDefs();
|
||||
var m_id = "se_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": 5,
|
||||
"markerHeight": 5,
|
||||
"orient": "auto"
|
||||
}
|
||||
});
|
||||
var arrow = addElem({
|
||||
"element": "path",
|
||||
"attr": {
|
||||
"d": "m0,0l10,5l-10,5l5,-5l-5,-5z",
|
||||
"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="arrow_panel">\
|
||||
<label><select id="arrow_list">\
|
||||
<option id="arrow_none" value="none">No arrow</option>\
|
||||
<option id="arrow_arrow" value="arrow">Arrow</option>\
|
||||
</select></label></div>"').hide().appendTo("#tools_top");
|
||||
$('#arrow_list').change(function() {
|
||||
switch ( this.value ) {
|
||||
case "arrow":
|
||||
addArrow();
|
||||
break;
|
||||
case "none":
|
||||
remArrow();
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
S.extendWhitelist({
|
||||
"marker": ["viewBox", "id", "refX", "refY", "markerUnits", "markerWidth", "markerHeight", "orient"],
|
||||
"polyline": ["class", "marker-mid"]
|
||||
});
|
||||
}());
|
||||
|
||||
return {
|
||||
name: "Arrows",
|
||||
addLangData: function(lang) {
|
||||
return {
|
||||
data: lang_list[lang]
|
||||
};
|
||||
},
|
||||
selectedChanged: function(opts) {
|
||||
|
||||
// Use this to update the current selected elements
|
||||
selElems = opts.elems;
|
||||
|
||||
var i = selElems.length;
|
||||
var marker_elems = ['line','path','polyline','polygon'];
|
||||
|
||||
while(i--) {
|
||||
var elem = selElems[i];
|
||||
if(elem && $.inArray(elem.tagName, marker_elems) != -1) {
|
||||
if(opts.selectedElement && !opts.multiselected) {
|
||||
showPanel(true);
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
});
|
||||
|
|
@ -1,3 +1,12 @@
|
|||
/*
|
||||
* ext-connector.js
|
||||
*
|
||||
* Licensed under the Apache License, Version 2
|
||||
*
|
||||
* Copyright(c) 2010 Alexis Deveria
|
||||
*
|
||||
*/
|
||||
|
||||
$(function() {
|
||||
svgCanvas.addExtension("Connector", function(S) {
|
||||
var svgcontent = S.content,
|
||||
|
|
@ -15,18 +24,14 @@ $(function() {
|
|||
connections = [],
|
||||
conn_class = "se_connect",
|
||||
connect_str = "-SE_CONNECT-",
|
||||
selElems;
|
||||
selElems = [];
|
||||
|
||||
var lang_list = {
|
||||
"en":[
|
||||
{"id": "mode_connect", "title": "Connect two objects" },
|
||||
{"id": "conn_arrow_none", "textContent": "No arrow" },
|
||||
{"id": "conn_arrow_arrow", "textContent": "Arrow" }
|
||||
{"id": "mode_connect", "title": "Connect two objects" }
|
||||
],
|
||||
"fr":[
|
||||
{"id": "mode_connect", "title": "Connecter deux objets"},
|
||||
{"id": "conn_arrow_none", "textContent": "Sans flèche" },
|
||||
{"id": "conn_arrow_arrow", "textContent": "Flèche" }
|
||||
{"id": "mode_connect", "title": "Connecter deux objets"}
|
||||
]
|
||||
};
|
||||
|
||||
|
|
@ -37,11 +42,6 @@ $(function() {
|
|||
}
|
||||
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) {
|
||||
|
|
@ -72,44 +72,6 @@ $(function() {
|
|||
}
|
||||
}
|
||||
|
||||
function addArrow() {
|
||||
var defs = S.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");
|
||||
}
|
||||
|
||||
function findConnectors() {
|
||||
|
||||
// Check if selected elements have connections
|
||||
|
|
@ -194,22 +156,22 @@ $(function() {
|
|||
|
||||
// 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;
|
||||
}
|
||||
});
|
||||
// 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;
|
||||
// }
|
||||
// });
|
||||
|
||||
S.extendWhitelist({
|
||||
"marker": ["viewBox", "id", "refX", "refY", "markerUnits", "markerWidth", "markerHeight", "orient"],
|
||||
|
|
|
|||
|
|
@ -37,13 +37,15 @@ 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);
|
||||
var more = svgCanvas.runExtensions("addLangData", lang_param, true);
|
||||
if(more.length) {
|
||||
$.each(more, function(i, m) {
|
||||
LangData = $.merge(LangData, m.data);
|
||||
});
|
||||
}
|
||||
$.each(LangData, function(i, data) {
|
||||
if(data.id) {
|
||||
var elem = $('#svg_editor #'+data.id)[0];
|
||||
var elem = $('#svg_editor').parent().find('#'+data.id)[0];
|
||||
if(elem) {
|
||||
if(data.title)
|
||||
elem.title = data.title;
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
<script type="text/javascript" src="locale/locale.js"></script>
|
||||
<script type="text/javascript" src="svgcanvas.js"></script>
|
||||
<script type="text/javascript" src="svg-editor.js"></script>
|
||||
<script type="text/javascript" src="ext-arrows.js"></script>
|
||||
<script type="text/javascript" src="ext-connector.js"></script>
|
||||
|
||||
<!-- Release version of script tags: >
|
||||
|
|
|
|||
|
|
@ -967,11 +967,17 @@ function BatchCommand(text) {
|
|||
curBBoxes = [],
|
||||
extensions = {};
|
||||
|
||||
var runExtensions = this.runExtensions = function(action, vars) {
|
||||
// Should this return an array by default, so extension results aren't overwritten?
|
||||
var runExtensions = this.runExtensions = function(action, vars, returnArray) {
|
||||
var result = false;
|
||||
if(returnArray) result = [];
|
||||
$.each(extensions, function(name, opts) {
|
||||
if(action in opts) {
|
||||
result = opts[action](vars);
|
||||
if(returnArray) {
|
||||
result.push(opts[action](vars))
|
||||
} else {
|
||||
result = opts[action](vars);
|
||||
}
|
||||
}
|
||||
});
|
||||
return result;
|
||||
|
|
|
|||
Loading…
Reference in New Issue