Author: max
Date: 2007-06-14 15:26:59 -0700 (Thu, 14 Jun 2007)
New Revision: 5422
Modified:
openlaszlo/branches/legals/lps/components/extensions/drawview.lzx
Log:
Change 20070612-maxcarlson-Q by [EMAIL PROTECTED] on 2007-06-12 19:27:38 PDT
in /Users/maxcarlson/openlaszlo/legals-clean
for http://svn.openlaszlo.org/openlaszlo/branches/legals
Summary: Fix drawview to wait for correct initial width/height in dhtml
New Features:
Bugs Fixed: LPP-4128 - Drawview's width and height cannot be constrained in
DHTML.
Technical Reviewer: promanik
QA Reviewer: jcrowley
Doc Reviewer: (pending)
Documentation:
Release Notes:
Details: drawview.lzx - Add lineCap attribute. Delay until after onconstruct
event in IE. Add _buildcanvas(), which is called with a width and height to
create the canvas. setWidth() and setHeight() call _buildcanvas() when both
values have been set. clear() clears the entire canvas size, regardless of the
current width. Show/hide context visibility directly rather than calling
setVisible(), and do this for swf only. Reduce the number of curves drawn for
small circles.
Tests: Testcase from LPP-4128 passes in dhtml (IE, firefox and Safari) and swf
Modified: openlaszlo/branches/legals/lps/components/extensions/drawview.lzx
===================================================================
--- openlaszlo/branches/legals/lps/components/extensions/drawview.lzx
2007-06-14 22:02:42 UTC (rev 5421)
+++ openlaszlo/branches/legals/lps/components/extensions/drawview.lzx
2007-06-14 22:26:59 UTC (rev 5422)
@@ -92,6 +92,12 @@
@access public
-->
<attribute name="lineWidth" value= "1" type="number"/>
+
+ <!--- Gives the default lineCap value for lines. Round for consistency
between swf and dhtml.
+ @type string
+ @access public
+ -->
+ <attribute name="lineCap" value="round" type="string"/>
<!--- Represents the colour to use for the lines around shapes. Specified
as a hexadecimal number (0xffffff) or a CSS string ('#ff00ff' or '#f0f').
@access public
@@ -102,6 +108,7 @@
@access public
-->
<attribute name="fillStyle" value= "#000000" type="string"/>
+
<!--- Contains a reference to the raw drawview context. oncontext is sent
when the context is ready to use, which can take some time in IE.
@access public
@@ -254,6 +261,7 @@
var globalAlpha = 1;
var lineWidth = 1;
+ var lineCap = 'round';
var strokeStyle = '#000000';
var fillStyle = '#000000';
var context = null;
@@ -263,20 +271,33 @@
function construct(parent,args) {
super.construct(parent, args);
-
- new LzDelegate( this , "_onconstruct" , this , "onconstruct" );
+ if (Lz.__BrowserDetect.isIE) {
+ new LzDelegate( this , "_onconstruct" , this ,
"onconstruct" );
+ } else {
+ this._onconstruct(args);
+ }
}
+ function _onconstruct(args) {
+ var w = args ? args['width'] : this.width;
+ var h = args ? args['height'] : this.height;
+ if (this['__id'] == null && w > 0 && h > 0) {
+ this._buildcanvas(w, h);
+ }
+ }
- function _onconstruct() {
+ function _buildcanvas(width, height) {
if (drawview.prototype.uid == null) {
drawview.prototype.uid = 0;
}
this.__id = 'canvas-' + drawview.prototype.uid++;
+ //Debug.write('_buildcanvas', this.__id, width, height);
this.__LZcanvas = document.createElement('canvas');
this.__LZcanvas.setAttribute('id', this.__id);
- this.__LZcanvas.setAttribute('width', this.width);
- this.__LZcanvas.setAttribute('height', this.height);
+ this.__LZcanvas.setAttribute('width', width);
+ this.__LZcanvas.setAttribute('height', height);
+ this.__canvaswidth = width;
+ this.__canvasheight = height;
var div = this.getMCRef();
div.appendChild(this.__LZcanvas);
this.beginPath();
@@ -289,7 +310,19 @@
this.setAttribute('context',
this.__LZcanvas.getContext("2d"));
}
}
-
+ function setWidth(w) {
+ super.setWidth(w);
+ if (this['__id'] == null && this.height > 0) {
+ this._buildcanvas(w, this.height);
+ }
+ }
+ function setHeight(h) {
+ super.setHeight(h);
+ if (this['__id'] == null && this.width > 0) {
+ this._buildcanvas(this.width, h);
+ }
+ }
+
function __initie() {
try {
if (this.__LZcanvas && this.__LZcanvas.parentNode != null)
{
@@ -373,8 +406,8 @@
function __playPath() {
if ($debug) this.__checkContext();
- this.setVisible(false);
this.context.lineWidth = this.lineWidth;
+ this.context.lineCap = this.lineCap;
if (typeof this.fillStyle == 'object' && this.fillStyle
instanceof LzCanvasGradient) {
//Debug.write('before apply');
this.fillStyle.__applyTo(this.context);
@@ -395,7 +428,6 @@
}
this.direct = false;
}
- this.setVisible(true);
}
function clip() {
@@ -411,7 +443,7 @@
function clear() {
if ($debug) this.__checkContext();
- this.context.clearRect(0, 0, this.width, this.height);
+ this.context.clearRect(0, 0, this.__canvaswidth,
this.__canvasheight);
}
function clearMask() {
@@ -494,6 +526,7 @@
function _oninit() {
this.oncontext.sendEvent();
}
+
function beginPath() {
//Debug.write('beginPath');
@@ -669,7 +702,7 @@
}
function __playPath(m) {
- this.setVisible(false);
+ this.context._visible = false;
var p = this.__path;
//Debug.write(p, m);
for (var i = 0; i < p.length; i++) {
@@ -686,7 +719,7 @@
m.curveTo(op[1], op[2], op[3], op[4]);
}
}
- this.setVisible(true);
+ this.context._visible = true;
}
function clip () {
@@ -910,16 +943,17 @@
if (yRadius == undefined) {
yRadius = radius;
}
- // covert 45 degrees to radians for our calculations
- theta = Math.PI/4;
+ var s = (radius < 20 && yRadius < 20) ? 5 : 8;
+ // covert to radians for our calculations
+ theta = Math.PI/ (s / 2);
// calculate the distance for the control point
xrCtrl = radius/Math.cos(theta/2);
yrCtrl = yRadius/Math.cos(theta/2);
// start on the right side of the circle
angle = 0;
this.moveTo(x+radius, y);
- // this loop draws the circle in 8 segments
- for (var i = 0; i<8; i++) {
+ // this loop draws the circle in n segments
+ for (var i = 0; i<s; i++) {
// increment our angles
angle += theta;
angleMid = angle-(theta/2);
_______________________________________________
Laszlo-checkins mailing list
[email protected]
http://www.openlaszlo.org/mailman/listinfo/laszlo-checkins
