Tutorial: Events

Events

Introduction

save, open, exportImage (setCustomHandlers)

You can hook to the save event (e.g. in an extension), to handle saving the SVG file differently:

Example

svgEditor.setCustomHandlers({
  save (_win, _data) {
    // Save svg
  }
})

Other methods corresponding to UI events that may be supplied are open and exportImage.

See CustomHandler for the required format of the object to be passed to setCustomHandlers.

Parent/Opening window events

svgEditorReady

The svgEditorReady event is triggered on a containing document (of window.opener or window.parent) when the editor is loaded.

See svgEditorReadyEvent for the JSDocs.

Example

$(document).bind('svgEditorReady', function () {
  const svg = `
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="50">
      <ellipse cx="50" cy="25" rx="50" ry="25" style="fill:blue;"/>
    </svg>`
  $('iframe.svgedit')[0].contentWindow.svgCanvas.setSvgString(svg)
})

If you are acting within the frame, you may use svgEditor.ready (see "Editor (within-frame) events (svgEditor)" below).

Editor (within-frame) events (svgEditor)

svgEditor.canvas

  • Canvas object. See "Canvas events".

svgEditor.canvas.bind(eventName, function () {})

  • Method for listening to canvas events. See "Canvas events".

svgEditor.ready(function () {})

Method for listening to editor callbacks. Used internally as well.

No arguments passed to callback.

See SVGEditor.ready.

Extension events

Most extensions will want to run functions when certain events are triggered. This is a list of the current events that can be hooked onto. All events are optional.

See the vars param of runExtensions for some of the available extension events and their descriptions and types.

See ExtensionStatus for the values to be returned by the corresponding extension methods listening for these extension event types.

Canvas events

Canvas events are listened to with the bind method (JSDocs API):

canvas.bind(eventName, callback)

Canvas events are passed between the editor and canvas and should mostly only of be of interest to those working with the Canvas alone or those developing SVGEdit).

callback (see EventHandler) will be passed the window object and a single argument specific to the event (see GenericCanvasEvent).

The bind method will return any previous callback attached to the given event name.

The method used to trigger these bound events is call() (JSDocs).

All events below are currently called from within svgcanvas.js except where noted. All events are also defined internally within svg-editor.js except where noted.

Event Where bound/defined (besides editor) Where called/triggered (besides canvas)
changed (Also called from draw.js, ext-arrows.js, ext-foreignObject.js, ext-markers.js, ext-polygon.js, ext-star.js, and path.js)
cleared Not bound/defined in SVGEdit.
contextset Only called from draw.js
exported
exportedPDF
extension_added
extensions_added Only called from svg-editor.js
message Only bound/defined in ext-webappfind.js Only called from svg-editor.js
pointsAdded Not bound/defined in SVGEdit.
saved
selected Also called from path.js
setnonce Only bound/defined in ext-arrows.js
transition
updateCanvas
unsetnonce Only bound/defined in ext-arrows.js
zoomed
zoomDone