From e75c0cc81cb6b390e305964975dc9ac0c5e0bd3d Mon Sep 17 00:00:00 2001 From: Jacques Distler Date: Thu, 4 Mar 2010 00:05:36 -0600 Subject: [PATCH] Sync with latext SVG-Edit Subpath tool. Also make the itex tool a little more selective (only applies to s with a firstChild. --- .../editor/extensions/ext-foreignobject.js | 6 +- .../editor/extensions/ext-helloworld.js | 80 +++++++++++++++++++ public/svg-edit/editor/extensions/ext-itex.js | 3 +- .../editor/extensions/helloworld-icon.xml | 23 ++++++ .../svg-edit/editor/images/svg_edit_icons.svg | 20 +++++ public/svg-edit/editor/svg-editor.html | 4 +- public/svg-edit/editor/svg-editor.js | 19 ++++- public/svg-edit/editor/svgcanvas.js | 43 ++++++++-- 8 files changed, 187 insertions(+), 11 deletions(-) create mode 100644 public/svg-edit/editor/extensions/ext-helloworld.js create mode 100644 public/svg-edit/editor/extensions/helloworld-icon.xml diff --git a/public/svg-edit/editor/extensions/ext-foreignobject.js b/public/svg-edit/editor/extensions/ext-foreignobject.js index 2156f3cd..a4a98502 100644 --- a/public/svg-edit/editor/extensions/ext-foreignobject.js +++ b/public/svg-edit/editor/extensions/ext-foreignobject.js @@ -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 { diff --git a/public/svg-edit/editor/extensions/ext-helloworld.js b/public/svg-edit/editor/extensions/ext-helloworld.js new file mode 100644 index 00000000..7daf2a3a --- /dev/null +++ b/public/svg-edit/editor/extensions/ext-helloworld.js @@ -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); + } + } + }; + }); +}); + diff --git a/public/svg-edit/editor/extensions/ext-itex.js b/public/svg-edit/editor/extensions/ext-itex.js index c23ba442..57599e1e 100644 --- a/public/svg-edit/editor/extensions/ext-itex.js +++ b/public/svg-edit/editor/extensions/ext-itex.js @@ -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")); diff --git a/public/svg-edit/editor/extensions/helloworld-icon.xml b/public/svg-edit/editor/extensions/helloworld-icon.xml new file mode 100644 index 00000000..68b6d964 --- /dev/null +++ b/public/svg-edit/editor/extensions/helloworld-icon.xml @@ -0,0 +1,23 @@ + + + + + + + Layer 1 + + Hello + World! + + + + + \ No newline at end of file diff --git a/public/svg-edit/editor/images/svg_edit_icons.svg b/public/svg-edit/editor/images/svg_edit_icons.svg index 00a0ffde..3653d24a 100644 --- a/public/svg-edit/editor/images/svg_edit_icons.svg +++ b/public/svg-edit/editor/images/svg_edit_icons.svg @@ -198,6 +198,26 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/public/svg-edit/editor/svg-editor.html b/public/svg-edit/editor/svg-editor.html index e05a4b84..0a971c08 100644 --- a/public/svg-edit/editor/svg-editor.html +++ b/public/svg-edit/editor/svg-editor.html @@ -21,7 +21,8 @@ - + +
+
diff --git a/public/svg-edit/editor/svg-editor.js b/public/svg-edit/editor/svg-editor.js index 221a4bd4..3c5ce50c 100644 --- a/public/svg-edit/editor/svg-editor.js +++ b/public/svg-edit/editor/svg-editor.js @@ -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', diff --git a/public/svg-edit/editor/svgcanvas.js b/public/svg-edit/editor/svgcanvas.js index 08b9a555..bb93e96c 100644 --- a/public/svg-edit/editor/svgcanvas.js +++ b/public/svg-edit/editor/svgcanvas.js @@ -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) {