Module: SVGEditor

The main module for the visual SVG Editor

Copyright:
  • 2010 Alexis Deveria 2010 Pavol Rusnak 2010 Jeff Schiller 2010 Narendra Sisodiya 2014 Brett Zamir
License:
  • MIT
Source:

Interfaces

Config
CustomHandler
Prefs

Namespaces

Actions
defaultConfig
defaultPrefs

Members

(static) canvas :module:svgcanvas.SvgCanvas

Type:
Source:

(static) curConfig

Implements:
Source:

(static) curPrefs

Implements:
Source:

(static) exportWindowCt :Integer

Type:
Source:

(static) langChanged :boolean

Type:
  • boolean
Source:

(static, constant) setStrings

Looks for elements to localize using the supplied obj to indicate on which selectors (or IDs if ids is set to true) to set its strings (with selectors relative to the editor root element). All keys will be translated, but for each selector, only the first item found matching will be modified. If the type is content, the selector-identified element's children will be checked, and the first (non-empty) text (placeholder) node found will have its text replaced. If the type is title, the element's title property will be set. If the type is aria-label, the element's aria-label attribute will be set (i.e., instructions for screen readers when there is otherwise no visible text to be read for the function of the form control).

Source:

(static) showSaveWarning :boolean

Type:
  • boolean
Source:

(static) storage :external:Storage

Type:
Source:

(static) storagePromptState :"ignore"|"waiting"|"closed"

Will be set to a boolean by ext-storage.js

Type:
  • "ignore" | "waiting" | "closed"
Source:

(static) svgEditorReadyEvent :module:SVGEditor#event:svgEditorReadyEvent

Type:
Source:

(static) tool_scale :Float

Type:
Source:

(static) uiStrings :PlainObject

LOCALE

Type:
Source:

(inner) defaultExtensions :Array.<string>

Type:
  • Array.<string>
Source:

(inner) ToolButtons :Array.<module:SVGEditor.ToolButton>

Type:
Source:

Methods

(static) addDropDown(elem, callback, dropUp) → {void}

Parameters:
Name Type Description
elem Element | string

DOM Element or selector
callback module:SVGEditor.DropDownCallback

Mouseup callback
dropUp boolean
Source:
Returns:
Type
void

(static) addExtension(name, init, initArgs) → {Promise.<void>}

Parameters:
Name Type Description
name string

Used internally; no need for i18n.
init module:svgcanvas.ExtensionInitCallback

Config to be invoked on this module
initArgs module:svgcanvas.ExtensionInitArgs
Source:
Throws:

If called too early

Type
Error
Returns:

Resolves to undefined

Type
Promise.<void>

(static) clickSelect() → {void}

Unless the select toolbar button is disabled, sets the button and sets the select mode and cursor styles.

Source:
Returns:
Type
void

(static) disableUI(featList) → {void}

Not presently in use.

Parameters:
Name Type Description
featList PlainObject
Source:
Returns:
Type
void

(static) init() → {void}

Auto-run after a Promise microtask.

Source:
Returns:
Type
void

(static) loadContentAndPrefs() → {void}

Where permitted, sets canvas and/or defaultPrefs based on previous storage. This will override URL settings (for security reasons) but not svgedit-config-iife.js configuration (unless initial user overriding is explicitly permitted there via allowInitialUserOverride).

Source:
To Do:
  • Split `allowInitialUserOverride` into `allowOverrideByURL` and `allowOverrideByUserStorage` so `svgedit-config-iife.js` can disallow some individual items for URL setting but allow for user storage AND/OR change URL setting so that it always uses a different namespace, so it won't affect pre-existing user storage (but then if users saves that, it will then be subject to tampering
Returns:
Type
void

(static) loadFromDataURI(str, optsopt) → {Promise.<void>}

Parameters:
Name Type Attributes Default Description
str string

The Data URI to base64-decode (if relevant) and load
opts PlainObject <optional>
 {}
Properties
Name Type Attributes Description
noAlert boolean <optional>
Source:
Returns:

Resolves to undefined and rejects if loading SVG string fails and noAlert is enabled

Type
Promise.<void>

(static) loadFromString(str, optsopt) → {Promise.<void>}

Parameters:
Name Type Attributes Default Description
str string

The SVG string to load
opts PlainObject <optional>
 {}
Properties
Name Type Attributes Default Description
noAlert boolean <optional>
 false

Option to avoid alert to user and instead get rejected promise
Source:
Returns:
Type
Promise.<void>

(static) loadFromURL(url, optsopt) → {Promise.<void>}

Parameters:
Name Type Attributes Default Description
url string

URL from which to load an SVG string via Ajax
opts PlainObject <optional>
 {}

May contain properties: cache, callback

Properties
Name Type Attributes Description
cache boolean <optional>
noAlert boolean <optional>
Source:
Returns:

Resolves to undefined or rejects upon bad loading of the SVG (or upon failure to parse the loaded string) when noAlert is enabled

Type
Promise.<void>

(static) openPrep() → {Promise.<boolean>}

Source:
Returns:

Resolves to boolean indicating true if there were no changes and false after the user confirms.

Type
Promise.<boolean>

(static) putLocale(givenParam, goodLangs, conf) → {Promise.<module:locale.LangAndData>}

Parameters:
Name Type Description
givenParam string
goodLangs Array.<string>
conf Object
Source:
Fires:
Returns:

Resolves to result of module:locale.readLang

Type
Promise.<module:locale.LangAndData>

(static) randomizeIds(arg) → {void}

Parameters:
Name Type Description
arg boolean
Source:
Returns:
Type
void

(static) readLang(langData) → {Promise.<module:locale.LangAndData>}

Parameters:
Name Type Description
langData module:locale.LocaleStrings

See Locale Docs
Source:
Fires:
Returns:

Resolves to LangAndData

Type
Promise.<module:locale.LangAndData>

(static) ready(cb) → {Promise.<ArbitraryCallbackResult>}

Queues a callback to be invoked when the editor is ready (or to be invoked immediately if it is already ready--i.e., if runCallbacks has been run).

Parameters:
Name Type Description
cb module:SVGEditor.ReadyCallback

Callback to be queued to invoke
Source:
Returns:

Resolves when all callbacks, including the supplied have resolved

Type
Promise.<ArbitraryCallbackResult>

(static) runCallbacks() → {Promise.<void>}

Invokes the callbacks previous set by svgEditor.ready

Source:
Returns:

Resolves to undefined if all callbacks succeeded and rejects otherwise

Type
Promise.<void>

(static) savePreferences() → {Promise.<void>}

Save user preferences based on current values in the UI.

Source:
Returns:
Type
Promise.<void>

(static) setConfig(opts, cfgCfgopt) → {void}

Allows setting of preferences or configuration (including extensions).

Parameters:
Name Type Attributes Description
opts module:SVGEditor.Config | module:SVGEditor.Prefs

The preferences or configuration (including extensions). See the tutorial on Config Options for info on config and preferences.
cfgCfg PlainObject <optional>

Describes configuration which applies to the particular batch of supplied options

Properties
Name Type Attributes Default Description
allowInitialUserOverride boolean <optional>
 false

Set to true if you wish to allow initial overriding of settings by the user via the URL (if permitted) or previously stored preferences (if permitted); note that it will be too late if you make such calls in extension code because the URL or preference storage settings will have already taken place.
overwrite boolean <optional>
 true

Set to false if you wish to prevent the overwriting of prior-set preferences or configuration (URL settings will always follow this requirement for security reasons, so svgedit-config-iife.js settings cannot be overridden unless it explicitly permits via allowInitialUserOverride but extension config can be overridden as they will run after URL settings). Should not be needed in svgedit-config-iife.js.
Source:
Returns:
Type
void

(static) setCustomHandlers(opts) → {Promise.<void>}

Allows one to override default SVGEdit open, save, and export editor behaviors.

Parameters:
Name Type Description
opts module:SVGEditor.CustomHandler

Extension mechanisms may call setCustomHandlers with three functions: opts.open, opts.save, and opts.exportImage
Source:
Returns:
Type
Promise.<void>

(static) setImageURL(url) → {void}

Set a selected image's URL.

Parameters:
Name Type Description
url string
Source:
Returns:
Type
void

(static) setLang(lang, allStrings) → {Promise.<void>}

Parameters:
Name Type Description
lang string

The language code
allStrings module:locale.LocaleStrings

See Locale Docs
Source:
Fires:
Returns:

A Promise which resolves to undefined

Type
Promise.<void>

(static) setPanning(active) → {void}

Parameters:
Name Type Description
active boolean
Source:
Returns:
Type
void

(static) updateCanvas(center, newCtr) → {void}

Parameters:
Name Type Description
center boolean
newCtr module:math.XYObject
Source:
Returns:
Type
void

(inner) addLangData(langParam) → {Array.<module:locale.AddLangExtensionLocaleData>}

Gets an array of results from extensions with a addLangData method, returning an object with a data property set to its locales (to be merged with regular locales).

Parameters:
Name Type Description
langParam string
Source:
To Do:
  • Can we forego this in favor of `langReady` (or forego `langReady`)?
Fires:
Returns:
Type
Array.<module:locale.AddLangExtensionLocaleData>

(inner) getButtonData(sel) → {module:SVGEditor.ToolButton}

Parameters:
Name Type Description
sel string

Selector to match
Source:
Returns:
Type
module:SVGEditor.ToolButton

(inner) getImportLocale(defaults) → {module:SVGEditor~ImportLocale}

Parameters:
Name Type Description
defaults PlainObject
Properties
Name Type Description
defaultLang string
defaultName string
Source:
Returns:
Type
module:SVGEditor~ImportLocale

(inner) ImportLocale(localeInfo) → {Promise.<module:locale.LocaleStrings>}

Parameters:
Name Type Description
localeInfo PlainObject
Properties
Name Type Attributes Default Description
name string <optional>

Defaults to defaultName of module:SVGEditor~getImportLocale
lang string <optional>
 defaultLang

Defaults to defaultLang of module:SVGEditor~getImportLocale
Source:
Returns:

Resolves to module:locale.LocaleStrings

Type
Promise.<module:locale.LocaleStrings>

(async, inner) loadSvgString(str, optsopt) → {Promise.<void>}

Parameters:
Name Type Attributes Default Description
str string

SVG string
opts PlainObject <optional>
 {}
Properties
Name Type Attributes Description
noAlert boolean <optional>
Source:
Throws:

Upon failure to load SVG

Type
Error
Returns:

Resolves to undefined upon success (or if noAlert is falsey, though only until after the alert is closed); rejects if SVG loading fails and noAlert is truthy.

Type
Promise.<void>

(inner) messageListener(info) → {void}

Parameters:
Name Type Description
info PlainObject
Properties
Name Type Description
data any
origin string
Source:
Fires:
Returns:
Type
void

(inner) setAll() → {void}

Source:
Returns:
Type
void

(inner) setTitles() → {void}

Source:
Returns:
Type
void

Type Definitions

BBoxObjectWithFactor

(like DOMRect)

Type:
Properties:
Name Type Attributes Description
x Float
y Float
width Float
height Float
factor Float <optional>

Needed if width or height are 0
zoom Float <optional>
Source:
See:

Button

Type:
Properties:
Name Type Attributes Description
id string

A unique identifier for this button. If SVG icons are used, this must match the ID used in the icon file. Required.
type "mode_flyout" | "mode" | "context" | "app_menu"

Type of button. Required.
title string

The tooltip text that will appear when the user hovers over the icon. Required.
events PlainObject.<string, external:jQuery.Function> | PlainObject.<"click", external:jQuery.Function>

DOM event names with associated functions. Example: {click () { alert('Button was clicked') } }. Click is used with includeWith and type of "mode_flyout" (and "mode"); any events may be added if list is not present. Expected.
panel string

The ID of the context panel to be included, if type is "context". Required only if type is "context".
icon string

The file path to the raster version of the icon image source. Required only if no svgicons is supplied from ExtensionInitResponse.
svgicon string <optional>

If absent, will utilize the button "id"; used to set "placement" on the svgIcons call
list string <optional>

Points to the "id" of a context_tools item of type "button-select" into which the button will be added as a panel list item
position Integer <optional>

The numeric index for placement; defaults to last position (as of the time of extension addition) if not present. For use with http://api.jquery.com/eq/.
isDefault boolean <optional>

Whether or not the button is the default. Used with list.
includeWith PlainObject <optional>

Object with flyout menu data

Properties
Name Type Attributes Description
isDefault boolean <optional>

Indicates whether button is default in flyout list or not.
button string

jQuery selector of the existing button to be joined. Example: '#tool_line'. Required if includeWith is used.
position "last" | Integer <optional>

Position of icon in flyout list; will be added to end if not indicated. Integer is for use with http://api.jquery.com/eq/.
key module:SVGEditor.Key <optional>

The key to bind to the button
Source:

ContextTool

Type:
Properties:
Name Type Attributes Description
panel string

The ID of the existing panel to which the tool is being added. Required.
id string

The ID of the actual tool element. Required.
events PlainObject.<string, external:jQuery.Function> | PlainObject.<"change", external:jQuery.Function>

DOM event names keyed to associated functions. Example: {change () { alert('Option was changed') } }. "change" event is one specifically handled for the "button-select" type. Required.
title string

The tooltip text that will appear when the user hovers over the tool. Required.
type "tool_button" | "select" | "button-select" | "input" | string

The type of tool being added. Expected.
options PlainObject.<string, string> <optional>

List of options and their labels for select tools. Example: {1: 'One', 2: 'Two', all: 'All' }. Required by "select" tools.
container_id string <optional>

The ID to be given to the tool's container element.
defval string <optional>

Default value
colnum string | Integer <optional>

Added as part of the option list class.
label string <optional>

Label associated with the tool, visible in the UI
size Integer <optional>

Value of the "size" attribute of the tool input
spindata module:jQuerySpinButton.SpinButtonConfig <optional>

When added to a tool of type "input", this tool becomes a "spinner" which allows the number to be in/decreased.
Source:

DropDownCallback(ev) → {void|boolean}

See http://api.jquery.com/bind/#bind-eventType-eventData-handler

Parameters:
Name Type Description
ev external:jQuery.Event

See http://api.jquery.com/Types/#Event
Source:
Listens to Events:
  • external:jQuery.event:Event
Returns:

Calls preventDefault() and stopPropagation()

Type
void | boolean

ExtensionObject

Type:
Properties:
Name Type Attributes Description
name string <optional>

Name of the extension. Used internally; no need for i18n. Defaults to extension name without beginning "ext-" or ending ".js".
init module:svgcanvas.ExtensionInitCallback <optional>
Source:
Tutorials:

IconSize

Type:
  • "s" | "m" | "l" | "xl" | Float
Source:

Key

Type:
Source:

KeyArray

Type:
Properties:
Name Type Description
0 string

The key to bind (on keydown)
1 boolean

Whether to preventDefault on the keydown event
2 boolean

Not apparently in use (NoDisableInInput)
Source:

ReadyCallback() → {Promise.<void>|void}

Source:
Returns:
Type
Promise.<void> | void

Stylesheet

@default will automatically load all of the default CSS paths for SVGEditor

Type:
  • "@default" | string
Source:

ToolButton

Type:
Properties:
Name Type Attributes Description
sel string

The CSS selector for the tool
fn external:jQuery.Function

A handler to be attached to the evt
evt string

The event for which the fn listener will be added
key module:SVGEditor.Key <optional>

[key, preventDefault, NoDisableInInput]
parent string <optional>

Selector
hidekey boolean <optional>

Whether to show key value in title
icon string <optional>

The button ID
isDefault boolean

For flyout holders
Source:

URLLoadCallback(success) → {void}

Parameters:
Name Type Description
success boolean
Source:
Returns:
Type
void

XYDimensions

Type:
Properties:
Name Type Description
length Integer

2
0 Float
1 Float
Source:

Events

event:svgEditorReadyEvent

Triggered on a containing document (of window.opener or window.parent) when the editor is loaded.

Type:
  • Event
Properties:
Name Type Description
bubbles true
cancelable true
Source: