deac/instiki
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Sync with latext SVG-Edit

Browse source 
Subpath tool.

Also make the itex tool a little more selective
(only applies to <foreignObject>s with a <math> firstChild.
This commit is contained in:
Jacques Distler 2010-03-04 00:05:36 -06:00
parent 932c42c24a
commit e75c0cc81c
8 changed files with 187 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
public/svg-edit/editor/extensions/ext-foreignobject.js
View file

@ -144,7 +144,7 @@ $(function() {
}, {
type: "input",
panel: "foreignObject_panel",
title: "Change the font-size of enclosed content",
title: "Change foreignObject's font size",
id: "foreign_font_size",
label: "font-size",
size: 2,
@ -234,10 +234,10 @@ $(function() {
}
},
mouseUp: function(opts) {
var e = opts.event;
var e = opts.event;
if(svgCanvas.getMode() == "foreign" && started) {
var attrs = $(newFO).attr(["width", "height"]);
keep = (attrs.width != 0 || attrs.height != 0);
keep = (attrs.width != 0 || attrs.height != 0);
svgCanvas.addToSelection([newFO], true);
return {

80
public/svg-edit/editor/extensions/ext-helloworld.js Normal file
View file

@ -0,0 +1,80 @@
/*
* ext-helloworld.js
*
* Licensed under the Apache License, Version 2
*
* Copyright(c) 2010 Alexis Deveria
*
*/
/*
This is a very basic SVG-Edit extension. It adds a "Hello World" button in
the left panel. Clicking on the button, and then the canvas will show the
user the point on the canvas that was clicked on.
*/
$(function() {
svgCanvas.addExtension("Hello World", function() {
return {
name: "Hello World",
// For more notes on how to make an icon file, see the source of
// the hellorworld-icon.xml
svgicons: "extensions/helloworld-icon.xml",
// Multiple buttons can be added in this array
buttons: [{
// Must match the icon ID in helloworld-icon.xml
id: "hello_world",
// This indicates that the button will be added to the "mode"
// button panel on the left side
type: "mode",
// Tooltip text
title: "Say 'Hello World'",
// Events
events: {
'click': function() {
// The action taken when the button is clicked on.
// For "mode" buttons, any other button will
// automatically be de-pressed.
svgCanvas.setMode("hello_world");
}
}
}],
// This is triggered when the main mouse button is pressed down
// on the editor canvas (not the tool panels)
mouseDown: function() {
// Check the mode on mousedown
if(svgCanvas.getMode() == "hello_world") {
// The returned object must include "started" with
// a value of true in order for mouseUp to be triggered
return {started: true};
}
},
// This is triggered from anywhere, but "started" must have been set
// to true (see above). Note that "opts" is an object with event info
mouseUp: function(opts) {
// Check the mode on mouseup
if(svgCanvas.getMode() == "hello_world") {
var zoom = svgCanvas.getZoom();
// Get the actual coordinate by dividing by the zoom value
var x = opts.mouse_x / zoom;
var y = opts.mouse_y / zoom;
var text = "Hello World!\n\nYou clicked here: "
+ x + ", " + y;
// Show the text using the custom alert function
$.alert(text);
}
}
};
});
});

3
public/svg-edit/editor/extensions/ext-itex.js
View file

@ -283,7 +283,8 @@ $(function() {
while(i--) {
var elem = selElems[i];
if(elem && elem.tagName == "foreignObject") {
if(opts.selectedElement && !opts.multiselected) {
if(opts.selectedElement && !opts.multiselected &&
elem.firstElementChild.namespaceURI == mathns ) {
$('#itex_font_size').val(elem.getAttribute("font-size"));
$('#itex_width').val(elem.getAttribute("width"));
$('#itex_height').val(elem.getAttribute("height"));

23
public/svg-edit/editor/extensions/helloworld-icon.xml Normal file
View file

@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg">
<!--
Sample icons file. This file looks like an SVG file with groups as its
children. Each group element has an ID that must match the ID of the button given
in the extension. The SVG inside the group makes up the actual icon, and
needs use a viewBox instead of width/height for it to scale properly.
Multiple icons can be included, each within their own group. A final element
with ID "svg_eof" must be included too.
-->
<g id="hello_world">
<svg viewBox="0 0 102 102" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Layer 1</title>
<rect ry="30" rx="30" x="2.5" y="2.5" width="97" height="97" id="svg_3" fill="#008000" stroke="#000000" stroke-width="5"/>
<text x="52.668" y="42.5" id="svg_1" fill="#ffffff" stroke="#000000" stroke-width="0" font-size="24" font-family="Monospace" text-anchor="middle" xml:space="preserve">Hello</text>
<text x="52.668" y="71.5" fill="#ffffff" stroke="#000000" stroke-width="0" font-size="24" font-family="Monospace" text-anchor="middle" xml:space="preserve" id="svg_2">World!</text>
</g>
</svg>
</g>
<g id="svg_eof"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

20
public/svg-edit/editor/images/svg_edit_icons.svg
View file

@ -198,6 +198,26 @@
</svg>
</g>
<g id="add_subpath">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124 124" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="svg_4" x1="0.33594" y1="0.28125" x2="1" y2="1">
<stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
<stop offset="1" stop-color="#33a533" stop-opacity="1"/>
</linearGradient>
</defs>
<g>
<path d="m6,103l55,-87c85,33.64 -26,37.12 55,87l-110,0z" id="svg_1" fill="url(#svg_4)" stroke="#000000" stroke-width="4" stroke-dasharray="null"/>
<g id="svg_7">
<circle stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#ffffff" id="svg_6" r="22.63281" cy="88.5" cx="45.5"/>
<line stroke-dasharray="null" stroke-width="7" stroke="#000000" id="svg_2" y2="104.03768" x2="45.5" y1="72.96232" x1="45.5"/>
<line stroke-dasharray="null" stroke-width="7" stroke="#000000" id="svg_3" y2="88.5" x2="61.03768" y1="88.5" x1="29.96232"/>
</g>
</g>
</svg>
</g>
<g id="image">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<defs>

4
public/svg-edit/editor/svg-editor.html
View file

@ -21,7 +21,8 @@
<script type="text/javascript" src="extensions/ext-closepath.js"></script>
<script type="text/javascript" src="extensions/ext-arrows.js"></script>
<script type="text/javascript" src="extensions/ext-connector.js"></script>
<!--<script type="text/javascript" src="extensions/ext-foreignobject.js"></script>-->
<!-- <script type="text/javascript" src="extensions/ext-helloworld.js"></script> -->
<!-- <script type="text/javascript" src="extensions/ext-foreignobject.js"></script> -->
<script type="text/javascript" src="extensions/ext-itex.js"></script>
<!-- Release version of script tags: >
@ -367,6 +368,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
</select>
<div class="tool_button" id="tool_node_clone" title="Clone Node"></div>
<div class="tool_button" id="tool_node_delete" title="Delete Node"></div>
<div class="tool_button" id="tool_add_subpath" title="Add sub-path"></div>
</div>
</div> <!-- tools_top -->

19
public/svg-edit/editor/svg-editor.js
View file

@ -794,6 +794,7 @@ function svg_edit_setup() {
$('#tool_reorient').toggleClass('disabled', angle == 0);
} else {
var point = path.getNodePoint();
$('#tool_add_subpath').removeClass('push_button_pressed').addClass('tool_button');
$('#tool_node_delete').toggleClass('disabled', !path.canDeleteNodes);
if(point) {
var seg_type = $('#seg_type');
@ -1415,6 +1416,20 @@ function svg_edit_setup() {
}
};
var addSubPath = function() {
var button = $('#tool_add_subpath');
var sp = !button.hasClass('push_button_pressed');
if (sp) {
button.addClass('push_button_pressed').removeClass('tool_button');
} else {
button.removeClass('push_button_pressed').addClass('tool_button');
}
path.addSubPath(sp);
};
var selectNext = function() {
svgCanvas.cycleElement(1);
};
@ -2486,6 +2501,7 @@ function svg_edit_setup() {
{sel:'#tool_node_link', fn: linkControlPoints, evt: 'click'},
{sel:'#tool_node_clone', fn: clonePathNode, evt: 'click'},
{sel:'#tool_node_delete', fn: deletePathNode, evt: 'click'},
{sel:'#tool_add_subpath', fn: addSubPath, evt: 'click'},
{sel:'#tool_move_top', fn: moveToTopSelected, evt: 'click', key: 'shift+up'},
{sel:'#tool_move_bottom', fn: moveToBottomSelected, evt: 'click', key: 'shift+down'},
{sel:'#tool_topath', fn: convertToPath, evt: 'click'},
@ -2790,7 +2806,7 @@ function svg_edit_setup() {
updateCanvas(true);
});
// var revnums = "svg-editor.js ($Rev: 1433 $) ";
// var revnums = "svg-editor.js ($Rev: 1443 $) ";
// revnums += svgCanvas.getVersion();
// $('#copyright')[0].setAttribute("title", revnums);
return svgCanvas;
@ -2885,6 +2901,7 @@ function svg_edit_setup() {
'#tool_clone,#tool_clone_multi,#tool_node_clone':'clone',
'#layer_delete,#tool_delete,#tool_delete_multi,#tool_node_delete':'delete',
'#tool_add_subpath':'add_subpath',
'#tool_move_top':'move_top',
'#tool_move_bottom':'move_bottom',
'#tool_topath':'to_path',

43
public/svg-edit/editor/svgcanvas.js
View file

@ -1190,7 +1190,7 @@ function BatchCommand(text) {
stroke: "#000000",
stroke_paint: null,
stroke_opacity: 1,
stroke_width: 2,
stroke_width: 5,
stroke_style: 'none',
opacity: 1
}
@ -3740,6 +3740,7 @@ function BatchCommand(text) {
var pathActions = function() {
var subpath = false;
var pathData = {};
var current_path;
var path;
@ -4346,6 +4347,13 @@ function BatchCommand(text) {
this.selectPt = function(pt, ctrl_num) {
p.clearSelection();
if(pt == null) {
p.eachSeg(function(i) {
if(this.prev) {
pt = i;
}
});
}
p.addPtsToSelection(pt);
if(ctrl_num) {
p.dragctrl = ctrl_num;
@ -4805,7 +4813,8 @@ function BatchCommand(text) {
'x2': mouse_x,
'y2': mouse_y
});
addPointGrip(0,mouse_x,mouse_y);
var index = subpath ? path.segs.length : 0;
addPointGrip(index, mouse_x, mouse_y);
}
else {
// determine if we clicked on an existing point
@ -4848,13 +4857,23 @@ function BatchCommand(text) {
keep = false;
return keep;
}
// removeAllPointGripsFromPath();
$(stretchy).remove();
// this will signal to commit the path
element = newpath;
current_path_pts = [];
started = false;
if(subpath) {
var new_d = newpath.getAttribute("d");
var orig_d = $(path.elem).attr("d");
$(path.elem).attr("d", orig_d + new_d);
$(newpath).remove();
path.init();
pathActions.toEditMode(path.elem);
path.selectPt();
return false;
}
}
// else, create a new point, append to pts array, update path element
else {
@ -4879,7 +4898,9 @@ function BatchCommand(text) {
'x2': mouse_x,
'y2': mouse_y
});
addPointGrip((current_path_pts.length/2 - 1),mouse_x,mouse_y);
var index = (current_path_pts.length/2 - 1);
if(subpath) index += path.segs.length;
addPointGrip(index, mouse_x, mouse_y);
}
keep = true;
}
@ -4930,6 +4951,7 @@ function BatchCommand(text) {
canvas.clearSelection();
path.show(true).update();
path.oldbbox = canvas.getBBox(path.elem);
subpath = false;
},
toSelectMode: function(elem) {
var selPath = (elem == path.elem);
@ -4948,6 +4970,17 @@ function BatchCommand(text) {
canvas.addToSelection([elem], true);
}
},
addSubPath: function(on) {
if(on) {
// Internally we go into "path" mode, but in the UI it will
// still appear as if in "pathedit" mode.
current_mode = "path";
subpath = true;
} else {
pathActions.clear(true);
pathActions.toEditMode(path.elem);
}
},
select: function(target) {
if (current_path == target) {
pathActions.toEditMode(target);
@ -7955,7 +7988,7 @@ function BatchCommand(text) {
// Function: getVersion
// Returns a string which describes the revision number of SvgCanvas.
this.getVersion = function() {
return "svgcanvas.js ($Rev: 1433 $)";
return "svgcanvas.js ($Rev: 1443 $)";
};
this.setUiStrings = function(strs) {