10.3. Customize DRAW SVG UI

10.3.1. Introduction
10.3.2. The MVP pattern
10.3.3. The SVG viewing area
10.3.4. The application
10.3.5. The DRAWSVG engine
10.3.6. The drwapp sample application
10.3.7. Website integration

10.3.1. Introduction

This chapter is intended for developers to create a personalized application for the DRAWSVG editor.

This developpement requires the Edrawsvg distribution

To download Edrawsvg, you should request a registered API Key.

See this sample of customized application.

10.3.2. The MVP pattern

DRAWSVG editor is designed on the MVP (Model View Presenter).

The application is structured with logical views that interact with the SVG document through presenters.

Each view has a given presenter and is responsible to update its UI objects. Presenters does-not seen UI objects.

The structure of views and UI objects (buttons, inputs, labels,..) is full free of choices.

Drawsvg has 12 views and corresponding presenters

Table 10.1. DRAWSVG views and presenters

ViewResponsibilityPresenter

Document view

Shows and run document management tasks

Presenter

Navigation view

Shows and run viewing actions (zoom in/out, pan,..)

Presenter

Selection view

Shows selection and run available presenter's tasks on selected elements

Presenter

Edit view

Shows and run (select, undo, redo) tasks

Presenter

Stoke view

Shows and modify the stroke style properties of the selected element.

Presenter

Fill view

Shows and modify the fill style properties of the selected element.

Presenter

Text style view

Shows and modify the text style properties of the selected element.

Presenter

Marker style view

Shows and modify the marker style properties of the selected element.

Presenter

Elements view

Shows and run tasks to draw basic elements.

Presenter

Shapes view

Shows and run shape drawing tasks.

Presenter

Controls view

Shows and run controls drawing tasks.

Presenter

Layer view

Shows and run layers tasks.

Presenter


See the full API

By default UI objects of actions that depends on the selection should be disabled. Presenters send instructions to enable or disable UI when depends of the selection.

Implementation of views by the application can be fully, partially or not exist.

Note

Each view and presenter are specified by a java interface because DRAW SVG kernel is written in java based on GWT framwork.

10.3.3. The SVG viewing area

The SVG viewing area is defined by the application and is specified by the SVG view interface.

This view has no presenter and is responsible to:

  • give the div element where to insert the svg engine window,

  • indicates whether this area is scrollable, if not the SVG document is scaled to fully covers the area, otherwhile it is displayed with its real size.

  • give the maximun SVG viewing area size.

Implementation of the SVG viewing area must be fully.

10.3.4. The application

The application is implemented as a javascript object that gives the views as specified by its ISVGEngineApp interface.

The object application make the glue between the UI objects and views.

The application object is informed by the method onSVGEngineLoad when the application is ready to use.

The application javascript object must be registered as a global variable of the window under the name svgEngineApp to be identified by the engine.

Implementation of the application can be fully or partially.

// The SVG Engine application, implements ISVGEngineApp
var drwApp = {};

// Notify SVG engine ready
drwApp.onSVGEngineLoad = function(engine) {
	console.log("drwApp.onSVGEngineLoad engine="+engine);
	drwApp.engine=engine;
};

// SVG view implements ISVGView (required)
drwApp.svgView = {	
	// the svg window div element
	getSVGWindowContainer : function() {
		return document.getElementById("svgwindow");
	},
	// The maximun sgv size
	getSVGMaxPixelSize : function() {
		console.log("drwApp.svgView.getSVGMaxPixelSize ");
		let w = document.getElementById("svgwindow");
		console.log("drwApp.svgView.getSVGMaxPixelSize "+w.clientWidth);
		return {width:w.clientWidth ,height:460};
	},	
	// Setting the svg area size
	setSVGPixelSize : function(sz) {			
	},
	// Indicates whether the visualization container has scrollbars.
	hasScrollbars : function() {
		return false;
	}
};
drwApp.getSVGView = function() {return drwApp.svgView;};

// implements views ....

// Register drwApp as svgEngineApp
window['svgEngineApp']=drwApp;

10.3.5. The DRAWSVG engine

The DRAWSVG engine is the controller, it detains view presenters and is visible from the application through its client API once ready.

The engine is automatically loaded on website startup:

  • It load presenters,

  • It find the object application,

  • Inserts the SVG window widget with a default empty SVG document inside the div element given by the application,

  • Calls the application onSVGEngineLoad when ready to use.

10.3.6. The drwapp sample application

The drwapp sample application must be understand as a quick start to explain how to develop a DRAWSVG custom application.

Its UI should be replaced by a custom one based on different choices.

Its javascript file can be duplicated to be adapted. It contents all the necessary objects and methods to implements.

Not desired implemented methods or views can be removed or leave empty.

10.3.7. Website integration

To integration the application inside a website and to interact with it use the JsChannel API in the same way for edrawsvg within a iframe (see chapter integration).

Insert the application within an iframe with the 'jsChannel' entry and key parameter like this:

<iframe id="drawsvg" src="drwapp.html#jsChannel:key=yourKey"></iframe>

See demo of jsChannel drwapp integration