dojox.gfx : the foundation for your crossbrowser advanced visualization.

Patrick Ruzand, IBM
April, 4th, 2012

GFX, the foundation for your cross-
browser advanced visualization

© 2011 IBM Corporation

Dojox.gfx: the foundation for your cross-browser advanced visualization

Agenda

 Dojox.gfx overview
 Working with the gfx api
 Gfx under the hood
 Leverage gfx for advanced visualization
 Q&A

2 © 2011 IBM Corporation

Dojox.gfx: the fundation for your cross-browser advanced visualization

Overview 1/2

 Gfx is the Dojo 2D Vector Graphics API
 Provides a high-level structured 2D JavaScript API
 One unified api, several implementations for each rendering technologies.
 The underlying technology is automatically selected depending on the browser:
• SVG : Firefox, Chrome, Opera, IE9, Safari, Android Browser (3+)
• VML : IE 6,7,8
• Silverlight : wherever Silverlight is available
• Canvas : mainly used for mobile web browsers with no SVG support (Android 2.x)
• SVGWeb : to render SVG via Flash plug-in

Public dojox.gfx API
SVG impl. Canvas impl. VML impl. Other impl.



Overview 2/2

 GFX operated similarly to SVG as a 'retained' mode graphics system, you build a tree of
visual 'live' shapes.
 Default supported shapes are :
– Rectangle, Image, Circle, Ellipse, Line, Polyline, Polygon, Path, Text, Text on Path
– Group (shape container) for composite shapes.
 Mouse event support on shapes
shape.connect('onmousedown', new function() {
// shape was clicked
});

 2D transformations on shapes (ex: zoom, rotation, translation)
 2-ways Serialization (Json)



Working with the gfx API: What you need
 the gfx module:
require([“dojox/gfx”, …], function(gfx){
}
 A drawing surface holder
<div id=“gfx_holder” style=“width:500px;height:500px;”></div>
 A gfx surface
require(["dojox/gfx", "dojo/ready"],
function(gfx, ready) {
var surface = gfx.createSurface("gfx_holder",500,500);
 Shapes !
– dojox.gfx.shape.Creator.createXXX methods
• createCircle, createEllipse, createGroup, createImage, createLine, createPath,
createPolyline, createRect, createText, createTextPath
– A mixin shared between Surface and Group classes
– Ex: surface.createPath("M204.33 139.83 C196.33 133.33 206.68
132.82 206.58 132.58 z");
– create = instantiate + add to scene



Working with the gfx API: What you can do
 Change the appearance
– setStroke
• width, color, style, cap, join
– setFill
• Solid
• Linear Gradient
• Radial Gradient
• Pattern
– setFont (Text)
 Change the geometry
– setShape: sets the new geometry definition.
– Support “partial” definition:
• setShape({width:200}) ~ mixin ({width:200}, current geometry)
 Listen to input events
– Shape.connect(eventName, scope, method)
– Get the targeted shape: evt.gfxTarget (new in 1.7)



Working with the gfx API: transforms
 Apply a transform: scale, translate, rotate
– setTransform: cancel the current transform and set a new one
– applyLeftTransform: adds a new transform to the current one, current first.
– applyRightTransform: adds a new transform to the current one, new first.

 The right coordinates:
– Get a coord in the parent coordinate system: apply shape.getTransform() to coord
var bbox = shape.getBoundingBox();
matrix.multiplyRectangle(shape.getTransform(), bbox); //bbox can be null!
– coord in surface coordinate: shape.getTransformedBoundingBox()
 For more complex operation: gfx.matrix API coord +



GFX Under the Hood 1/2

 One API, several (level of) implementations
– dojox.gfx.shape.* : the namespace for the gfx API (shape.js)
• Deals with the gfx API logic only
• abstract level (no DOM -or whatever- concept)
– dojox.gfx.(svg|canvas|...).* : renderer-specific implementation.
• Implements the gfx api for the given rendering technology

dojox.gfx.Group.add dojox.gfx.svg.Group.add
children=[]; add: function(shape){
add: function(shape){ if(this != shape.getParent()){
var oldParent = shape.getParent(); if(this.fragment){
if(oldParent){ this.fragment.appendChild(shape.rawNode);
oldParent.remove(shape, true); }else{
} this.rawNode.appendChild(shape.rawNode);
this.children.push(shape); }
return shape._setParent(this, C.add.apply(this, arguments);
this._getRealMatrix()); shape.setClip(shape.clip);
}, }
return this;
},



GFX Under the Hood 2/2 : Startup sequence

 require([“dojox/gfx”]):
– Starts the available rendering technologies detection process (renderer.js)
• check whether the requested renderers are supported
 dojoConfig.gfxRenderer or “svg,vml,canvas,silverlight” (default)
• Uses feature detection (not browser detection)
– Loads the rendering implementation
– Maps the graphic api to the implementation
• gfx.switchTo()
 Configuration options:
– Force a renderer: dojoConfig.forceGfxRenderer (String)
• skips detection process
• e.g. forceGfxRenderer:‟svg‟
– Specify a list of possible renderers: dojoConfig.gfxRenderers (String, comma-
separated)
• e.g. gfxRenderers:‟svg, silverlight, vml‟
– Lightweight canvas (i.e. no input events handling): dojoConfig.canvasEvents
• Must be explicitly set to „false‟



GFX Under the Hood 3/3 : Composite Shapes

 dojox.gfx.Group
 Manages a list of children shape (nested Group included)
 add/remove/clear and createXXX()
 Propagates transforms to the children hierarchy
 Things to know:
– Group.getBoundingBox() is incomplete in <= 1.7
– Fixed in 1.8,
– Manual backport: See http://bugs.dojotoolkit.org/changeset/27449/dojo
 Custom composite class: possible, but painfull in vml
– Inherit from gfx.shape.Group
– Sets the nodeType property to Group.nodeType
MyShape.nodeType = gfx.Group.nodeType;
– For VML:
• Add a Creator.createMyShape, copy the code from createGroup()…
• + this._overrideSize(node);



Leverage gfx for advanced visualization
 dojox.gfx initial goal: provide a small, generic, efficient 2D graphic api.
– =>compromises in the set of supported features
– =>May lacks of high-level features needed for advanced use cases.
 Use case: a diagramming component
– displays a graphical representation of a static or dynamic data model.
– Supports user interaction

 Rich graphical representation of dynamic data:
– Built from multiple shapes : composite shape with layout logic
– representation with logic/behavior
– Support multiple representations



Leverage gfx for advanced visualization: Layout for gfx

 A mechanism to automatically arrange shapes (position and size) in a container according to
a set of constraints

 Dynamic => bbox changes trigger a new layout
 Transparent to the user
 2 General purpose layout algorithms: Stack and Grid

 Size and Position set by constraints:
– H/V alignment: left, center, right, stretch
– Layout specific: column/row span, padding, gap



 Grid
– Arranges children of a container as grid elements.
– Properties: padding, margins, h/v alignments
– Row/column span

 Stack
– Arranges children of a container in a horizontal or a vertical stack.
– Properties: padding, gap, margins, h/v alignments



 New API :
– Layout Algorithm class hierarchy
– Shape preferred size vs explicit size
– Invalidate state (default: push invalidate up in the hierarchy, container: request a layout)
– Layout Engine to handle layout requests
 Gfx extensions:
– Text:
• Multiline text
• Metrics
• Auto-wrapping
– BBox Changed notification
– BBox caching
 Candidate for OSS



Leverage gfx for advanced visualization: Template

 Allows to separate the symbol logic/behavior from the graphical representation
 Based on gfx serialization
 + dojoAttachPoint : contract between the logic and the graphic
{children:[
{
dojoAttachPoint:„background‟;
shape: { type:‟rect‟}
}, ...
]}

 + extended attribute


Advanced Symbology with Gfx

Questions

Q&A
Contact: patrick.ruzand@fr.ibm.com


dojox.gfx : the foundation for your crossbrowser advanced visualization.

Recommended

Recommended

More Related Content

Similar to dojox.gfx : the foundation for your crossbrowser advanced visualization.

Similar to dojox.gfx : the foundation for your crossbrowser advanced visualization. (20)

Recently uploaded

Recently uploaded (20)

dojox.gfx : the foundation for your crossbrowser advanced visualization.