Changeset 247

  *
  * Get instance of canvas box by it's id
  *
- * @param integer id
+ * @param id integer
  */
 CanvasBox.Static.getCanvasBoxById = function getCanvasBoxById( id )
 {
     clear: function clear()
     {
         var objContext = this.getContext();
-        objContext.clearRect( 0, 0, this.width, this.height );
+        objContext.clearRect(
+            0,
+            0,
+            Math.max( this.width , this.defaultWidth ),
+            Math.max( this.height , this.defaultHeight )
+        );
     },
     /**
     saveFile: function saveFile()
     {
-        this.objCanvasHtml.setAttribute( "width" ,  ( this.defaultWidth * 10 )  + "px" );
+        var dblProportion = this.defaultHeight / this.defaultWidth;
-        this.objCanvasHtml.setAttribute( "height" , ( this.defaultHeight * 10 ) + "px" );
+        var intWidth = 1000;
+        var intHeight = Math.round( intWidth * dblProportion );
+        var dblOldZoom = this.dblZoom;
+        var dblNewZoom = intWidth / this.defaultWidth;
+        this.objCanvasHtml.setAttribute( "width" ,  ( intWidth )  + "px" );
+        this.objCanvasHtml.setAttribute( "height" , ( intHeight ) + "px" );
-        this.dblZoom *= 10;
+        this.dblZoom = dblNewZoom;
        var objNewForm = document.createElement( "form" );
        var objNewTextArea = document.createElement( "textarea" );
             30000
         );
        document.body.removeChild( objNewForm );
-        this.dblZoom /= 10;
+        this.dblZoom = dblOldZoom;
        this.objCanvasHtml.setAttribute( "width" ,  ( this.defaultWidth )  + "px" );
        this.objCanvasHtml.setAttribute( "height" , ( this.defaultHeight ) + "px" );
     },

	246		247
232	}	232	}
233	}	233	}
234	}	234	}
235	this.x = this.objElement.x + this.intRelativeX + this.intPaddingLeft;	235	this.x = this.intRelativeX + this.intPaddingLeft;
236	this.y = this.objElement.y + this.intRelativeY + this.intPaddingTop;	236	this.y = this.intRelativeY + this.intPaddingTop;
237	},	237	},
238		238
239	drawOut: function drawOut()	239	drawOut: function drawOut()

	246		247
81	in this <a href="#classDiagramEditor.php">external example</a> or in the embedded example below.	81	in this <a href="#classDiagramEditor.php">external example</a> or in the embedded example below.
82	</p>	82	</p>
83	<p>	83	<p>
84	Actual implemented features:	84	Already implemented features:
85	</p>	85	</p>
86	<ul>	86	<ul>
87	<li>	87	<li>
...		...
122	<canvas id="canvasBox">	122	<canvas id="canvasBox">
123	</canvas>	123	</canvas>
124	<script type="text/javascript" charset="utf-8">	124	<script type="text/javascript" charset="utf-8">
		125	intWidth = document.getElementById("box").clientWidth;
125	objBox = new window.autoload.newCanvasBox( "canvasBox" ,	126	objBox = new window.autoload.newCanvasBox( "canvasBox" ,
126	document.getElementById("box").clientWidth, 700 );	127	intWidth , intWidth );
127		128	window.objBox = objBox;
128	var objClass = new window.autoload.newCanvasBoxClass();	129	var objClass = new window.autoload.newCanvasBoxClass();
129	objClass.objBehavior = new window.autoload.newCanvasBoxMagneticBehavior( objClass );	130	objClass.objBehavior = new window.autoload.newCanvasBoxDefaultBehavior( objClass );
130	objClass.x = 100;	131	objClass.x = Math.round( intWidth / 2 );
131	objClass.y = 100;	132	objClass.y = Math.round( intWidth / 2 );
132	objClass.strClassElementName = "example";	133	objClass.strClassElementName = "example";
133	objBox.addElement( objClass );	134	objBox.addElement( objClass );
134	</script>	135	</script>

	246		247
65	to be saved as XML, as a jpeg image and as XMI UML file.	65	to be saved as XML, as a jpeg image and as XMI UML file.
66	</p>	66	</p>
67	<p>	67	<p>
68	MISSING TEXT	68	With the recent changes into the PHP, as namespaces, the code instrumentation
		69	need to be updated. Maybe this will take a big time because. Until then, try generate diagrams of projects what use this new
		70	features probably will fail. Another option more
		71	trustable, simple and fast it is the creation of diagrams based on the
		72	results of the XDebug. That is the reason because the creation of diagrams
		73	based on XDebug become one of the priority features.
69	</p>	74	</p>
70	<p>	75	<p>
71	If you have some special case, when any of the avaliable printers and factorys	76	<strong>The Diagram Generation With XDebug still is in working progress</strong>. You can help to accelerate
72	solve your problem, everthing it is extremly well
73	<a href="http://www.thiagomata.com/codetodiagram/doc/dox/html/">doc</a>
74	to help
75	to you create new classes and append new features.
76	</p>
77	<p>
78	<strong>The Class Diagram generation still is in working progress</strong>. You can help to accelerate
79	it making a <a href="#donation">donation</a>.	77	it making a <a href="#donation">donation</a>.
80	</p>	78	</p>
81	</div>	79	</div>
82	</div>	80	</div>
83	<div class="post">	81	<div class="post">
84	<p class="meta">
85	<span class="subtopic"><a name="PHP Code to Sequence Diagram" href="codeInstrumentation.php#PHP Code to Sequence Diagram">PHP Code to Sequence Diagram</a></span>
86	<span class="topic">Code Instrumentation</span>
87	</p>
88	<div style="clear: both;"> </div>
89	<div class="entry">
90	<p>
91	MISSING TEXT
92	</p>
93	<p>
94	MISSING TEXT
95	</p>
96	<p>
97	If you have some special case, when any of the avaliable printers and factorys
98	solve your problem, everthing it is extremly well
99	<a href="http://www.thiagomata.com/codetodiagram/doc/dox/html/">doc</a>
100	to help
101	to you create new classes and append new features.
102	</p>
103	<p>
104	<strong>The Sequence Diagram generation still is in working progress</strong>. You can help to accelerate
105	it making a <a href="#donation">donation</a>.
106	</p>
107	</div>
108	</div>
109	<div class="post">
110	<h2 class="title"><a href="#">Limitations</a></h2>	82	<h2 class="title"><a href="#">Limitations</a></h2>
111	<p class="meta">	83	<p class="meta">
112	<span class="subtopic">Internet Explorer Output</span>	84	<span class="subtopic">Internet Explorer Output</span>

                 </p>
             </div>
             <script type="text/javascript" charset="utf-8">
-                var objBox = new window.autoload.newCanvasBoxStateDiagram( "abc" , document.body.clientWidth / 3 , 450 );
+                var intWidth = Math.round( document.body.clientWidth / 3 );
+                var intHeight = Math.round(  intWidth * 1.15 );
+                var dblProportion =  intWidth / 400;
+                var objBox = new window.autoload.newCanvasBoxStateDiagram( "abc" , intWidth , intHeight );
                 window.box = objBox;
                 function addStateElement( color )
                 {
                 }
                 var objFactoryFromXml = addStateElement(  );
                 objFactoryFromXml.strStateName = "Factory From Xml";
-                objFactoryFromXml.x = 70;
+                objFactoryFromXml.x = 70 * dblProportion;
-                objFactoryFromXml.y = 80;
+                objFactoryFromXml.y = 80 * dblProportion;
                 var objFactoryFromCode = addStateElement(  );
                 objFactoryFromCode.strStateName = "Factory From Code";
-                objFactoryFromCode.x = 330;
+                objFactoryFromCode.x = 330 * dblProportion;
-                objFactoryFromCode.y = 80;
+                objFactoryFromCode.y = 80 * dblProportion;
                 var objDiagram = addStateElement( "rgb(200,200,230)" );
                 objDiagram.strStateName = "Uml Diagram";
-                objDiagram.x = 200;
+                objDiagram.x = 200 * dblProportion;
-                objDiagram.y = 200;
+                objDiagram.y = 200 * dblProportion;
                 var objPrinterHtml = addStateElement( );
                 objPrinterHtml.strStateName = "Printer Html";
-                objPrinterHtml.x = 100;
+                objPrinterHtml.x = 100 * dblProportion;
-                objPrinterHtml.y = 350;
+                objPrinterHtml.y = 350 * dblProportion;
                 var objPrinterXml = addStateElement( );
                 objPrinterXml.strStateName = "Printer Xml";
-                objPrinterXml.x = 200;
+                objPrinterXml.x = 200 * dblProportion;
-                objPrinterXml.y = 400;
+                objPrinterXml.y = 400 * dblProportion;
                 var objPrinterPng = addStateElement( );
                 objPrinterPng.strStateName = "Printer Png";
-                objPrinterPng.x = 300;
+                objPrinterPng.x = 300 * dblProportion;
-                objPrinterPng.y = 350;
+                objPrinterPng.y = 350 * dblProportion;
         var objLine;
         objLine = addLine( objFactoryFromXml , objDiagram );

                 We welcome anyone with the patience and desire to make the
                 CSS changes need for it to work on Internet Explorer.
             </p>
+            <p>
+                The Sequence Diagram should migrate from HTML with CSS to Canvas Box
+                what the <a href="classDiagram.php">Class Diagram</a> already is using. This should make more easy
+                interaction events as drag and drop, save as image, etc. So big changes
+                are comming to the Sequence Diagram Web Editor.
+            </p>
         </div>
         <p class="meta">
             <span class="subtopic">Under Development</span>

Code to Diagram

Affected files

canvasBox/default/download.php

default/close.html

experimental/canvasBox/default/CanvasBox.js Download diff

experimental/canvasBox/default/CanvasBoxFixedButton.js Download diff

public2/classDiagram.php Download diff

public2/codeInstrumentation.php Download diff

public2/index.php Download diff

public2/sequenceDiagram.php Download diff