Not approved,
because WHATWG says HTML-<canvas> width/height must be "valid
non-negative integers"
("http://www.whatwg.org/specs/web-apps/current-work/#width3";).
So we need to convert width/height to int before applying to the
underlying <canvas> element.
In addition to that, we need to change CSS-"visibility" / "display" in
case we want to set the drawview's width/height to 0,
because we do not allow zero values for "_buildcanvas(..)"
and in Firefox, zero-values for <canvas> width/height will be
automatically changed to default-values!
Attached testcase.
Patch:
279,281c279,280
< var w = Math.floor(args ? args['width'] : this.width);
< var h = Math.floor(args ? args['height'] : this.height);
<
---
> var w = args ? args['width'] : this.width;
> var h = args ? args['height'] : this.height;
302d300
< this.__LZcanvas.style.visibility = "visible";
333,340c331,332
< w = Math.floor(w);
< var h = Math.floor(this.height);
< if (h > 0 && w > 0) {
< this._buildcanvas(w, h);
< } else {
< if (this.__LZcanvas) {
< this.__LZcanvas.style.visibility = "hidden";
< }
---
> if (this.height > 0) {
> this._buildcanvas(w, this.height);
345,352c337,338
< var w = Math.floor(this.width);
< h = Math.floor(h);
< if (w > 0 && h > 0) {
< this._buildcanvas(w, h);
< } else {
< if (this.__LZcanvas) {
< this.__LZcanvas.style.visibility = "hidden";
< }
---
> if (this.width > 0) {
> this._buildcanvas(this.width, h);
Max Carlson wrote:
Change 20070925-maxcarlson-3 by [EMAIL PROTECTED] on 2007-09-25
17:03:02 PDT
in /Users/maxcarlson/openlaszlo/trunk
for http://svn.openlaszlo.org/openlaszlo/trunk
Summary: Make drawviews resize.
New Features:
Bugs Fixed: LPP-3905 - Changes on width/height must be propagated down
to the HTML-canvas in DHTML
Technical Reviewer: promanik
QA Reviewer: [EMAIL PROTECTED]
Doc Reviewer: (pending)
Documentation: Drawviews now resize when the width or height are
changed. In DHTML, the drawview will be cleared so it must be redrawn
whenever the oncanvas event is sent.
Release Notes:
Details: drawview.lzx - In _buildcanvas(), if the canvas exists it is
resized and the oncontext event is sent because it will be cleared.
For IE, the canvas must be completely destroyed and rebuilt.
setWidth() and setHeight() call _buildcanvas() whenever a valid height
and width are set.
roundrect.lzx - Clear cached color state when oncontext is sent to
ensure canvas state is reset properly.
Tests:
http://localhost:8080/trunk/lps/components/incubator/test/test-roundrectbutton.lzx?lzr=dhtml
now resizes beyond 100 pixels in IE and firefox.
Files:
M lps/components/extensions/drawview.lzx
M lps/components/incubator/roundrect.lzx
Changeset:
http://svn.openlaszlo.org/openlaszlo/patches/20070925-maxcarlson-3.tar
<canvas debug="true" >
<include href="incubator/boxview.lzx" />
<script when="immediate" >
Debug.showInternalProperties = true;
</script>
<class name="mydrawview" extends="drawview" >
<switch>
<when runtime="dhtml" />
<otherwise>
<attribute name="clip" value="true" /><!-- consistent behaviour
SWF <-> DHTML -->
</otherwise>
</switch>
<handler name="oncontext" >
this.clear();
this.beginPath();
this.lineTo(100, 100);
this.strokeStyle = 0x000000;
this.lineWidth = 2;
this.stroke();
</handler>
<method name="expand" >
if ($as2 || Lz.__BrowserDetect.isFirefox) {
this.animgrp.doStart();
} else {
this.setWidth(100);
this.setHeight(100);
this.animgrp.onstop.sendEvent();
}
</method>
<method name="shrink" >
if ($as2 || Lz.__BrowserDetect.isFirefox) {
this.animgrp2.doStart();
} else {
this.setWidth(0);
this.setHeight(0);
this.animgrp2.onstop.sendEvent();
}
</method>
<animatorgroup name="animgrp" start="false" duration="1000"
process="simultaneous" >
<animator attribute="width" to="100" />
<animator attribute="height" to="100" />
</animatorgroup>
<animatorgroup name="animgrp2" start="false" duration="1000"
process="simultaneous" >
<animator attribute="width" to="0" />
<animator attribute="height" to="0" />
</animatorgroup>
</class>
<view width="440" >
<wrappinglayout axis="x" xspacing="10" yspacing="15" duration="0" />
<boxview width="100" height="100" >
<mydrawview id="dv1" width="0" height="0" >
</mydrawview>
</boxview>
<boxview width="100" height="100" >
<mydrawview id="dv2" width="100" height="0" >
</mydrawview>
</boxview>
<boxview width="100" height="100" >
<mydrawview id="dv3" width="0" height="100" >
</mydrawview>
</boxview>
<boxview width="100" height="100" >
<mydrawview id="dv4" width="100" height="100" >
</mydrawview>
</boxview>
<attribute name="del" value="$once{new LzDelegate(this, 'enableBtns')}"
/>
<attribute name="counter" value="0" type="number" />
<method name="enableBtns" >
if (++this.counter == 4) {
this.del.unregisterAll();
this.counter = 0;
btn1.setAttribute("enabled", true);
btn2.setAttribute("enabled", true);
}
</method>
<method name="disableBtns" args="expand" >
btn1.setAttribute("enabled", false);
btn2.setAttribute("enabled", false);
if (expand) {
this.del.register(dv1.animgrp, "onstop");
this.del.register(dv2.animgrp, "onstop");
this.del.register(dv3.animgrp, "onstop");
this.del.register(dv4.animgrp, "onstop");
} else {
this.del.register(dv1.animgrp2, "onstop");
this.del.register(dv2.animgrp2, "onstop");
this.del.register(dv3.animgrp2, "onstop");
this.del.register(dv4.animgrp2, "onstop");
}
</method>
<button id="btn1" text="Expand" >
<handler name="onclick" >
this.parent.disableBtns(true);
dv1.expand();
dv2.expand();
dv3.expand();
dv4.expand();
</handler>
</button>
<button id="btn2" text="Shrink" >
<handler name="onclick" >
this.parent.disableBtns(false);
dv1.shrink();
dv2.shrink();
dv3.shrink();
dv4.shrink();
</handler>
</button>
</view>
</canvas>
