Transcription
Copyright (c) 2012-2014 Lassalle Technologies. All Rights ReservedAddFlow for HTML5 v1.2TutorialJanuary 2014Lassalle Technologieshttp://www.lassalle.com- page 1 -
Copyright (c) 2012-2014 Lassalle Technologies. All Rights ReservedCONTENTS1) Introduction . 42) Last Version enhancements.52.1 Version 1.2.52.1.1 Graph Layout Algorithms. 52.1.2 xCustomOffset and yCustomOffset properties. 52.1.3 isDstPointAdjustable and isOrgPointAdjustable properties. 52.2 Version 1.1.52.2.12.2.22.2.32.2.4Better speed performance. 5isFixedSize property. 5selectionChange event. 5Context handle. 63) Licensing. 74) Getting Started. 95) Interactive creation of a diagram. 105.1 Overview.105.2 Create a diagram 75.2.8Draw a node. 10Draw a link. 11Stretch a link. 12Draw a reflexive link. 13Multiselection. 13Change properties of a node or a link. 14Change the destination or the origin node of a link. 14Selecting, zooming panning. 156) Programmatic creation of a diagram. 166.1 Overview.166.2 Diagram creation. 166.2.16.2.26.2.36.2.46.2.56.2.6Our first program. 16Node Properties. 18Link Properties. 18Changing property values. 19Default property values. 20Stretching the links. 216.3 Nodes.236.3.16.3.26.3.36.3.46.3.5Colors. 23Displaying a text in a node. 23Displaying an image in a node. 24Node shapes. 24Node pins. 266.4 Links.266.4.1 Colors. 266.4.2 Link line style. 266.4.3 Link arrows. 276.5 Selection of items.286.5.1 Programmatic selection . 28- page 2 -
Copyright (c) 2012-2014 Lassalle Technologies. All Rights Reserved6.5.2 Interactive selection. 286.5.3 getSelectedItems method. 286.6 Diagram navigation.296.7 Zooming.306.7.1 Programmatic zoom. 306.7.2 Interactive zoom. 307) Avanced topics. 317.1 Undo/Redo.317.1.17.1.27.1.37.1.47.1.57.1.6General features. 31Updating the user interface. 31Grouping basic actions. 31What can be undone and redone?. 31Undo/Redo customization. 31Undo/Redo API. 337.2 Serialization. 347.3 Performance tuning.347.3.1 beginUpdate / endUpdate. 347.3.2 Quadtree structure. 347.4 Customizing the user abilities. 35Appearances. 36Shadow properties. 36Grid properties. 37Handle properties. 37Pin properties. 38Miscellaneous. 388) Automatic Graph Layout.398.1.1 Hierarchic layout. 398.1.1.18.1.1.28.1.1.38.1.1.4Purpose. 39Code example. 40Limitation. 40Side Effect. 408.1.2 Orthogonal layout. 418.1.2.18.1.2.28.1.2.38.1.2.4Purpose. 41Code example. 41Limitation. 41Side Effect. 418.1.3 Force directed (symmetric) layout. 428.1.3.18.1.3.28.1.3.38.1.3.4Purpose. 42Code example. 42Limitation. 42Side Effect. 438.1.4 Series-parallel layout. 438.1.4.18.1.4.28.1.4.38.1.4.4Purpose. 43Code example. 44Limitation. 45Side Effect. 458.1.5 Tree layout. 458.1.5.18.1.5.28.1.5.38.1.5.4Purpose. 45Code example. 46Limitation. 46Side Effect. 46- page 3 -
Copyright (c) 2012-2014 Lassalle Technologies. All Rights Reserved1) IntroductionAddFlow for HTML5 is a general purpose Flowcharting/Diagramming HTML5 component, which letsyou quickly build flowchart-enabled HTML5 applications.AddFlow for HTML5 allows the creation and the manipulation of two-dimensional diagrams (a.k.agraphs). An AddFlow diagram is a set of objects called nodes (also called vertices or entities) that canbe linked each other with links (also called edges, arcs or relations). These diagrams can be createdprogrammatically or interactively.Each time you need to graphically display interactive diagrams, you should consider using AddFlow, aroyalty-free component that offers unique support to create diagrams interactively orprogrammatically: workflow diagrams, database diagrams, communication networks, organizationalcharts, process flows, state transitions diagrams, CTI applications, CRM (Customer RelationshipManagement), expert systems, graph theory, quality control diagrams, Notice that there are two editions of AddFlow for HTML5 : AddFlow for HTML5 Standard Edition. AddFlow for HTML5 Professional Edition which includes also a set of graph layoutalgorithms.Purpose of this tutorialThis tutorial provides information on:–licensing–creating diagrams programmatically, using the AddFlow for HTML5 API–creating diagrams interactivelyWho should use this tutorial?This guide is intended for application programmers building HTML5 applications.SamplesAddFlow for HTML5 is installed with one demo sample. Its source code (HTML, Javascript) isprovided.
Copyright (c) 2012-2014 Lassalle Technologies. All Rights Reserved2) Last Version enhancements2.1 Version 1.22.1.1 Graph Layout AlgorithmsWe provide now either a Standard Edition, either a Professional Edition of AddFlow for HTML5.The Professional Edition offers also a set of graph layout algorithms (hierarchic, force-directed,orthogonal, series-parallel, tree, radial).See paragraph #8.Automatic Graph Layout for more informations.2.1.2 xCustomOffset and yCustomOffset propertiesxCustomOffset and yCustomOffset are addflow properties that allow adding horizontal and verticaloffsets to the mouse coordinates. This may be useful in some development environments.2.1.3 isDstPointAdjustable and isOrgPointAdjustable propertiesisDstPointAdjustable and isOrgPointAdjustable are link properties that determine whether the lastor the first link point can be changed.2.2 Version 1.12.2.1 Better speed performanceThis new release provides better speed performance by using a quadtree structure. By default, thenthe quadtree structure is used. Otherwise, brute force is used. You may use the useQuadtree methodto determine if the quadtree structure is used.See the paragraph about Performance tuning for more explanations.2.2.2 isFixedSize propertyBy default, when adding new items in a diagram, the addflow canvas size is adjusted to be the sum ofthe size of the diagram and the size of the viewport (the size of the div element containing the addflowcanvas).However, now, if the isFixedSize property is true, then the size of the addflow canvas does notchange, whatever the size of the diagram may be.There is an example in the "Network" example of the demo (network.htm).2.2.3 selectionChange eventWe could live without this event but it is better to have it. The selectionChange event is fired eachtime an item is selected or unselected. However it is possible to prevent this event to be fired if theaddflow canSendSelectionChangedEvent property is false.There is an example of the use of this event in the "Custom undo" example of the demo(customundo.htm).
Copyright (c) 2012-2014 Lassalle Technologies. All Rights Reserved2.2.4 Context handleIf the isContextHandle property of an item (node or link) is true, then, if you select it, you will see acontext handle ooo and clicking on this handle causes the firing of a context event allowing you forinstance to display a context menu or a dialog box.On the following image, you can see the context handle "ooo" at the top right of the node.By default, the isContextHandle property is false. Also, if the addflow canShowContextHandleproperty is false, context handles will not be displayed, whatever the value of the isContexthandleproperty of each item may be.There is an example of the use of this event in the "State diagram" (statediagram.htm) and in the"Social network" example(socialnetwork.htm) of the demo. In the second example, only nodes havea context handle.
Copyright (c) 2012-2014 Lassalle Technologies. All Rights Reserved3) LicensingIf you do not own a commercial license, this file shall be governed by the license agreement that canbe found at: http://www.lassalle.com/html5/license evaluation.pdfIf you own a commercial license, this file shall be governed by the license agreement that can befound at: http://www.lassalle.com/html5/license commercial.pdfThe key points are the following:–it is royalty free–one license per individual developer–the evaluation version can be used only for evaluation and testing purpose.–if you purchase a commercial license, you get the source code, support and the right to useAddFlow for business purposes.–you may purchase either the Standard Edition of AddFlow, either the Professional Edition ofAddFlow. The professional version provides also a set of graph layout algorithms.The following FAQ gives more details.1. What is the difference between the evaluation license and the commercial license ?With the evaluation license, no support is provided and the javascript source code is obfuscated(minified): spaces and comments are removed and variables and function names are replaced bymeaningless names.With the commercial license, you are entitled to obtain free support and you get also the full javascriptsource code and have the right to modify it.However, you have not the right to divulge, publish or distribute the source code of AddFlow or of amodified version of AddFlow. You must previously obfuscate the source code before distributing orpublishing it.2. What is the difference between the Standard Edition and the Professional EditionThe Professional Edition includes also a set of graph layout algorithms (see paragraph #8.AutomaticGraph Layout)3. If purchase AddFlow, shall I have to purchase also an obfuscator ?You may purchase such a software but you can also use a free obfuscator like Google's ClosureCompiler. It is very easy to use. A simple command like the following is working:java -jar compiler.jar --js "addflow.js" --js output file "addflow-min.js"(this supposes that the file addflow.js is placed in the same directory as the Closure program)Then, you have to add the header comment you can find at the beginning of the file addflow-min.js fileof the evaluation version./* AddFlow for HTML5v1.2.0.2 - January 2014Copyright (c) 2012-2014 Lassalle Technologies. All rights reserved.http://www.lassalle.com
Copyright (c) 2012-2014 Lassalle Technologies. All Rights ReservedAuthor: Patrick Lassalle mailto:plassalle@lassalle.comIf you do not own a commercial license, this file shall be governed by the licenseagreement that can be found at: http://www.lassalle.com/html5/license evaluation.pdfIf you own a commercial license, this file shall be governed by the licenseagreement that can be found at: http://www.lassalle.com/html5/license commercial.pdf*/4. Can I just minify the source code ?Only if variables and function names are replaced by meaningless names. Just removing spaces andcomments is not enough.5. Do you provide an Open Source license ?While we acknowledge Open Source, we currently do not license AddFlow as an Open Sourcesoftware.6. Is AddFlow runtime-royalty free ?Yes.7. How many developers can use AddFlow for HTML5 ?AddFlow is licensed per individual developer. Each developer using AddFlow needs to purchase alicense.8. Do you offer multi-pack discounts ?Yes, we offer the following type of licenses:- Single developer license: allows just one developer- Team license: allows 4 developers- Site license: allows unlimited developers at a single physical address.- Enterprise license: allows all developers of an enterprise9. How many projects can I create with a license of AddFlow for HTML5 ?You can use your license of AddFlow for HTML5 on as many projects as you like because AddFlow forHTML5 can be distributed on a royalty-free basis.10. Will purchasing guarantee me upgrades ?It does not include major version upgrades. However, we will provide bug fixes and minorenhancements free of charge.11. Do you provide refunds ?Under no circumstances shall a refund be applied after the source code is sent to the client.
Copyright (c) 2012-2014 Lassalle Technologies. All Rights Reserved4) Getting Started1) Add the AddFlow script to your html page, preferably at head tag: script type "text/javascript"src " /script 2) Add the following html5 code to include a div element containing the canvas to display the diagram. div id "div1" style "border-style: solid; width: 900px; height: 400px; overflow:auto;" canvas id "canvas1" width "900" height "400" *** THIS BROWSER DOES NOT SUPPORT THE CANVAS ELEMENT *** /canvas /div Then you are ready to use AddFlow interactively or programmatically. Let us first see how to use itinteractively.remark: you are not forced to place the canvas inside a div element. You may find an example in the"Network" example of the demo (network.htm). However you have to do that to obtain a scrollingfeature.
Copyright (c) 2012-2014 Lassalle Technologies. All Rights Reserved5) Interactive creation of a diagram5.1 OverviewThe interactive creation of diagrams is mouse-based. It includes: the creation of nodes and links (including reflexive links) the selection of nodes and links (including multi-selection) the resizing of nodes the moving of nodes the stretching of links (the possibility to add or remove segments in a link) the possibility to change the origin or the destination of a linkMoreover, many properties allow customizing the interactive behavior of an AddFlow control. Forinstance, you can prevent the user to create reflexive links with the canReflexLink property or tomove nodes with the canMoveNode properties.And a set of methods and properties allow implementing a powerful Undo/Redo feature.5.2 Create a diagram interactively5.2.1 Draw a nodeBring the mouse cursor into the control, press the left button, move the mouse and release the leftbutton. You have created an elliptic node. This node is selected: that's why 8 handles (little circles) aredisplayed.The 8 handles allow resizing the node. If you want to move the node, you bring the mouse cursorinto the node (but not in the center), press the left button, move the mouse and release the left button.remark: here we suppose that the isContextHandle property of nodes is false (which is the case bydefault). Otherwise, you would see also a context handle “ooo” as in the following image:
Copyright (c) 2012-2014 Lassalle Technologies. All Rights ReservedTIP: Notice that, when adding new items in a diagram, the addflow canvas size is adjusted to be thesum of the size of the diagram and the size of the viewport (the size of the div element containingthe addflow canvas). However, you may alter this behavior with the isFixedSize property. It it is true,then the size of the addflow canvas does not change, whatever the size of the diagram may be.5.2.2 Draw a linkDraw a second node.Then bring the mouse cursor above the second node. A small circle handle is then displayed at thecenter of the selected node.
Copyright (c) 2012-2014 Lassalle Technologies. All Rights ReservedBring the mouse over this small circle handle, press the left button, move the mouse towards the othernode. When the mouse cursor is into the other node, release the left button. The link has beencreated. And it is selected: 3 handles are displayed in the link.As you can see, the link stretching handles are also displayed as little rectangles. By default, thosehandles are small rectangles as for the nodes above. But we can change the style of those handles.The DemoFlow sample provided with AddFlow shows many distinct ways to display the node resizinghandles and the link stretching handles.But, as you will see later in this tutorial, you can also use another way to create links by using pins.remark: here we suppose that the isContextHandle property of links is false (which is the case bydefault). Otherwise, you would see also a context handle “ooo”.5.2.3 Stretch a linkBring the mouse cursor into the link handle in the middle of the link, press the left button, move themouse and release the left button. You have created a new link segment. It has now 5 handlesallowing you to add or remove segments. (The handle at the intersection of two segments allows youto remove a segment: you move it with the mouse so that the two segments are aligned and whenthese two segments are approximately aligned, release the left button).Create another segment
Copyright (c) 2012-2014 Lassalle Technologies. All Rights Reserved5.2.4 Draw a reflexive linkSelect a node by clicking on it. Then bring the mouse cursor above the small diamond handle at thecenter of the selected node. Press the left button, move the mouse outside the selected node, thenmove it inside the selected node again, then release the left button. You have created a reflexive link,i.e. a link whose origin and destination are the same.5.2.5 MultiselectionYou can select several nodes or links by clicking them with the mouse and simultaneously pressingthe shift or control key.
Copyright (c) 2012-2014 Lassalle Technologies. All Rights ReservedYou can also select links or nodes and links.There is another way to perform multiselection, using the MouseSelection property and assigning itthe MouseSelection.Selection value. Then you can select several nodes and links: you bring themouse cursor into the AddFlow control, press the left button, move the mouse and release the leftbutton. All nodes or links inside the selection rectangle are selected. Then you can unselect somenodes by clicking them with the mouse and simultaneously pressing the shift or control key. You canselect them again by using the same method.5.2.6 Change properties of a node or a linkInteractively, without adding any code, you can change the position and the size of a node. You canadd segments to a link or remove them. To change other properties (shape, styles, colors, behaviors,etc) of a node or a link, you have to write some code.5.2.7 Change the destination or the origin node of a linkYou can change interactively the destination or the origin of a link.You bring the mouse cursor into thethird link handle (near the arrow head), press the left button, move the mouse until the isolated nodeand release the left button.
Copyright (c) 2012-2014 Lassalle Technologies. All Rights ReservedThe new destination of the link has changed.5.2.8 Selecting, zooming panning.SelectionIf the mouseSelection property of the AddFlow control is set to 'selection' or 'selection2', you canselect items with the mouse. The user brings the mouse cursor into the AddFlow control, press the leftbutton, move the mouse (which draws a rectangular area) and then release the left button: this has theeffect of selecting all items partially (in the case of 'selection') or completely (in the case of'selection2') inside the rectangular area.If the canSelectOnMouseMove property is true, the selection of items with the mouse is made ateach mouseMove event. Otherwise, it is made only when the mouseUp event is firedZoomingIf the mouseSelection property of the AddFlow control is set to 'zoom', you can zoom the diagraminteractively with the mouse. The user brings the mouse cursor into the AddFlow control, press the leftbutton, move the mouse (which draws a rectangular area) and then release the left button: this has theeffect of zooming and scrolling the view to fit the rectangular area.The zooming is isotropic.PanningIf the mouseSelection property of the AddFlow control is set to 'pan', you can pan the diagram withthe mouse. You click on the diagram at a place where there is no item and you move the mouse: thediagram is panned. This will work only if the AddFlow control is inside a Div element. The AddFlowcontrol is scrolled inside this div element.
Copyright (c) 2012-2014 Lassalle Technologies. All Rights Reserved6) Programmatic creation of a diagram6.1 OverviewIn this chapter we will focus on how to create a diagram programmatically.The main class is the Flow class. It uses a canvas to display the diagram.An AddFlow diagram contains two kinds of objects, Node objects and Link objects. A Link objectallows linking two nodes. It is a line that leaves the origin node and comes to the destination node. Alink cannot exist without its origin and destination nodes. If one of these two nodes is removed, the linkis also removed.WARNING: AddFlow is using a canvas to display the diagram. So the size of the diagram will belimited by the size of a HTML5 canvas. This limitation depends on the browser. Currently, mostbrowsers seem to limit the size to 8192.6.2 Diagram creation6.2.1 Our first program1) Add the AddFlow script to your html page, preferabily at head tag: script type "text/javascript"src " /script 2) Add the following html5 code to include a div element containing the canvas to display the diagram. div id "div1" style "border-style: solid; width: 900px; height: 400px; overflow:auto;" canvas id "canvas1" width "900" height "400" *** THIS BROWSER DOES NOT SUPPORT THE CANVAS ELEMENT *** /canvas /div 3) Add the code to create our first diagram.xmlfunction createDiagram() {var canvas, flow, node1, node2, node3, link1, link2, link3;canvas document.getElementById('canvas1');flow new Lassalle.Flow(canvas);// Create 3 nodesnode1 flow.addNode(40, 40, 80, 80, "First node");node2 flow.addNode(270, 179, 80, 80, "Second node");node3 flow.addNode(40, 230, 80, 80, "Third node");// Create 3 linkslink1 flow.addLink(node1, node2, "link 1");link2 flow.addLink(node2, node2, "link 2");link3 flow.addLink(node2, node3, "link 3");
Copyright (c) 2012-2014 Lassalle Technologies. All Rights Reservedflow.refresh();}4) Call the createDiagram() function from the appropiate place, for example at body "onload" event: body onload "createDiagram()" If we execute this program (tutorial firstprogram.htm), it will create the following diagram:In this diagram, the nodes and links receive default property values. For instance, the nodes have anelliptical shape. The links are composed of one line terminated by an arrow. The link 2 is reflexive andby default, it is created with 3 segments. The drawing color is black. The text color is black.We are going to enhance this diagram.However, let us focus on the way nodes and links are created. First we create the nodes then wecreate the links. This is because a link cannot exist without its origin and destination nodes.To create a node, you have to use the addNode method. There is no other method. However, the lastparameter is optional. For instance, to create the first node, you could have written:node1 flow.addNode(40, 40, 80, 80);node1.Text "First node";To create a link, you have to use the addLink method. There is no other method. However, th
Purpose of this tutorial This tutorial provides information on: – licensing – creating diagrams programmatically, using the AddFlow for HTML5 API – creating diagrams interactively Who should use this tutorial? This guide is intended for application programmers building HTML5 applications. Samples Add
