This page last changed on Mar 03, 2010 by rklancer.

another possibly-relevant file:


As of commit 4594962 on 3/1/2010, a few small edits have been made to this file, including one that hardcodes a VLE-specific url for the edit icons, in lines 348-360:

				svg_el.find('[fill="url(#' + id + ')"]').each(function() {
					//$(this).attr('fill', 'url(#' + new_id + ')');
					// fix for wise4 url() reference problems
					$(this).attr('fill', 'url(/vlewrapper/vle/node/draw/svg-edit-2.4rc1/images/svg_edit_icons.svg#' + id + ')');
				}).end().find('[stroke="url(#' + id + ')"]').each(function() {
					//$(this).attr('stroke', 'url(#' + new_id + ')');
					// fix for wise4 url() reference problems
					$(this).attr('stroke', 'url(/vlewrapper/vle/node/draw/svg-edit-2.4rc1/images/svg_edit_icons.svg#' + id + ')');
				}).end().find('use').each(function() {
					if(this.getAttribute('xlink:href') == '#' + id) {
						this.setAttributeNS(xlinkns,'href','#' + new_id);


The following are derived after comparing Stephen's wise4-svg-edit commit b12d149 vs. svg-edit revision 1145 and running Firebug on on 3/2/2010


The only changes relating to VLE are in code appended at end of the file:

  1. commenting-out of the following:
           svgCanvas = svg_edit_setup();
  2. Addition of VleDS constructor (under global name 'VleDS') and its method definitions

All other changes relate to interface changes and interaction with new svgcanvas functionality created by WISE4 team


  • some interface changes
  • addition of stamp and snapshot functionality:
    • new vars ('private properties') in the svgcanvas object:
    • new (public) methods:
      resetUndo (apparently just duplicates functionality of the private resetUndoStack method already in svg-edit's svgcanvas, but is public)


new buttons and UI changes for WISE4-related functionality like snapshots, descriptions, etc (the visible stuff)
addition of a script node that hooks into the VLE to run the svg-edit startup code. See my analysis at





before a SVGdraw VLE node (i.e., the iframe containing svg-editor.html) unloads, the following line of code is executed:

     var svgString = svgdraw.savetoVLE();   // (line 45, svg-editor.html)

savetoVLE() calls which is on line 2671 of svg-editor.js

save() in turn calls View.prototype.saveState() in vleview_studentwork.js ( )

saveState() in turn creates a new SVGDRAWSTATE object (which just adds a timestamp to the generated state string)

    newState = new SVGDRAWSTATE(state);   // (line 271, vleview_studentwork.js)

saveState then pushes the state onto a stack which records the state of ALL previous visits by this student to this node (including previous sessions, apparently)

long story short, a 'postAllUnsavedNodeVisits' is fired in the onRenderNodeStart function (line 362. vleview_core.js) and this presumably posts data back to the server.

this results in a call to View.prototype.postUnsavedNodeVisit (line 80, vleview_studentwork.js) which uses YUI ConnectionManager to actually POST the data

The important point here is that SVGDRAWSTATE itself doesn't do a lot of work. The posting is handled elsewhere and the construction of the svg string is handled elsewhere.


new constructors:


generates an object with a given svg string and id, and description taken from the canvas 'context' object)

methods of SVGDRAW:


calls svg_edit_setup, put_locale, this.loadModules


Loads the details and options for this svgdraw node that were set by the author and then calls 'load' function to load student's saved state (the kind of thing this function handles are setting the stamp images, the description text if any and the default description text, the prompt text, i.e., the instructions to the student, and whether snapshots are enabled.

loadModules then creates a new VleDS object and passes it as argument to this.setDataService. Then it calls load method


just calls dataservice load method with 'this' as the context and loadCallback as the callback


is just a setter for dataService; is called in loadModules with the new VleDS object as its argument


This is the callback passed to the dataService (i.e., VleDS object's) load method (See my notes on the wise4-svg-edit startup sequence elsewhere.) It is passed the JSON corresponding to the student's saved work.

This sets the state of svgdraw canva, description, annotations, and saved snapshots to the saved state of the student's work. Specifically, It sets the canvas SVG to the saved state of the student's work, then directly calls a VLE function to get 'annotations' for this node; it then calls the initDisplay method with the JSON file that was passed to it.

(The vle nodes in the test project I ran don't appear to have annotations, so I don't really know what annotations are for nor what they do.)

hint for analyzing the VLE function called: line 109 of svgdraw.js,

if(context.dataService.vle.getConfig().getConfigParam('mode') == 'run'){

references View.prototype.getConfig() which is defined on line 68 of config.js on the live site as of 3/3/2010)

Note that View is some kind of VLE "god object". Its constructor is in view.js and its method definitions are spread out in many js files: coreview.js, view_utils.js, config.js, and vleview_*.js (there are 9 such files, e.g., vlewview_audio.js, vleview_core.js...).


saves svg of canvas, description, snapshots to 'studentData' then passes studentData to method


Loads description, stamp images, snapshots and snapshot state to screen. initializes appropriate jQueryUI components for interacting with snapshots etc. Then it calls resetUndo to empty the undo stack.


creates new Snapshot object; copies canvas svg to it; adds the new snapshot object to snapshot stack; calls addSnapshot


scales svg to create thumbnail, adds the thumbnail to the thumbnail holder in the page and calls bindSnapshot; calls snapCheck after 100ms


sets canvas svg to that of snapshot; it then (sensibly) calls resetUndo to remove the undo stack – which must be why resetUndo functionality was made into a public method by wise4 team


from comment: 'Binds snapshot thumbnail to click function that opens corresponding snapshot, delete function, hover function, sorting function')


click handler for snapshot delete buttons


click handler for snapshot itself


helper function for changing opacity of buttons on hover


Checks that there have been no further draw operations to the canvas since the last snapshot was loaded or saved. If there have not been, it highlights the current snapshot & sets the description to that of the snapshot, as after selecting a snapshot

(note: warningStackSize appears intended to keep track of whether any further draw operations have taken place since the last snapshot was taken. warningStackSize is set to the canvas's undoStackSize when a snapshot is taken, and set to 0 (as is the undoStackSize, via resetUndo) when a snapshot is loaded. As long as warningStackSize == UndoStackSize, we know no undoable operations have been applied to the canvas since the snapshot was taken/loaded. (If operations have been done, we should warn the user before switching snapshots.) By keeping track of the stack size, rather than just setting a flag when operations are done, we can deal with the case that undoable operations were done, but were then undone.


updates html to reflect the new snapshot numbering after a reordering


makes the stamp image track the cursor when mouse is in the canvas area but not when mousing over tool buttons


grabbed from svg-edit; apparently just converts text representation of xml to formal xml string?

Document generated by Confluence on Jan 27, 2014 16:52