| Key: |
LPP-4156
|
| Type: |
Bug
|
| Status: |
Closed
|
| Resolution: |
Fixed
|
| Priority: |
--
|
| Assignee: |
Unassigned
|
| Reporter: |
Robert Yeager
|
| Votes: |
0
|
| Watchers: |
0
|
|
If you were logged in you would be able to see more operations.
|
|
|
| Severity: |
Major
|
| Fixed in Change#: |
5,489
|
| Fixed in branch: |
branches/legals
|
| Runtime: |
N/A
|
| Fix in hand: |
True
|
|
Code was changed in the nightly build that causes my drawview fill() in DHTML FF 2.0.0.4 to result in a black fill, rather that the color I specify.
The offending code change is line 412 in drawview.lzx:
if (this['_fillStyle'] != this.fillStyle) {
If I comment out this new if() test, my drawview fills work as before w/ DHTML FF.
Unfortunately, I cannot create a separate test case that demonstrates the problem...it is embedded deep within my product code. In any case, here is a snippet where the problem occurs:
this.beginPath();
this.lineWidth = 1;
this.strokeStyle = classroot.bgcolor;
this.moveTo(0+classroot.framewidth, 0);
this.lineTo(0+classroot.framewidth, this.height);
this.lineTo(this.width-classroot.framewidth-classroot.correction, this.height);
this.lineTo(this.width-classroot.framewidth-classroot.correction, 0);
this.closePath();
this.fillStyle = classroot.bgcolor;
this.fill();
this.stroke();
I tried using hex color values, but the problem still occurred. Removing the if() test in drawview.lzx made my code work again w/ FF DHTML.
|
|
Description
|
Code was changed in the nightly build that causes my drawview fill() in DHTML FF 2.0.0.4 to result in a black fill, rather that the color I specify.
The offending code change is line 412 in drawview.lzx:
if (this['_fillStyle'] != this.fillStyle) {
If I comment out this new if() test, my drawview fills work as before w/ DHTML FF.
Unfortunately, I cannot create a separate test case that demonstrates the problem...it is embedded deep within my product code. In any case, here is a snippet where the problem occurs:
this.beginPath();
this.lineWidth = 1;
this.strokeStyle = classroot.bgcolor;
this.moveTo(0+classroot.framewidth, 0);
this.lineTo(0+classroot.framewidth, this.height);
this.lineTo(this.width-classroot.framewidth-classroot.correction, this.height);
this.lineTo(this.width-classroot.framewidth-classroot.correction, 0);
this.closePath();
this.fillStyle = classroot.bgcolor;
this.fill();
this.stroke();
I tried using hex color values, but the problem still occurred. Removing the if() test in drawview.lzx made my code work again w/ FF DHTML.
|
Show » |
|
Drawview fill() broken in R5451 DHTML FF
Date: 2007-06-20 19:25:04 -0700 (Wed, 20 Jun 2007)
New Revision: 5489
Modified:
openlaszlo/branches/legals/lps/components/extensions/drawview.lzx
Log:
Change 20070620-maxcarlson-e by maxcarlson@Plastik.local on 2007-06-20 18:06:04 PDT
in /Users/maxcarlson/openlaszlo/legals-clean
for http://svn.openlaszlo.org/openlaszlo/branches/legals
Summary: Fix color value caching in drawview
New Features:
Bugs Fixed:
LPP-4156- Drawview fill() broken in R5451 DHTML FFTechnical Reviewer: promanik
QA Reviewer: jcrowley
Doc Reviewer: (pending)
Documentation:
Release Notes:
Details: This change caches all color values in a _colorcache hash. This is much more reliable, and faster to boot. I also optimized and simplified __playPath() in DHTML.
Tests: http://localhost:8080/legals-clean/lps/components/extensions/test/drawing.lzx?lzr=dhtml and http://localhost:8080/legals-clean/lps/components/extensions/test/drawing.lzx?lzr=swf7 are the same as before. It's easy to see where the previous attempt at caching could go wrong.
Modified: openlaszlo/branches/legals/lps/components/extensions/drawview.lzx
===================================================================
--- openlaszlo/branches/legals/lps/components/extensions/drawview.lzx 2007-06-21 02:10:17 UTC (rev 5488)
+++ openlaszlo/branches/legals/lps/components/extensions/drawview.lzx 2007-06-21 02:25:04 UTC (rev 5489)
@@ -266,6 +266,7 @@
var fillStyle = '#000000';
var context = null;
var cachebitmap = true;
+ var _colorcache = {};
DeclareEvent(prototype, 'oncontext');
@@ -345,7 +346,6 @@
}
function beginPath() {
- this.direct = false;
this.__path = ['moveTo', [0,0]];
this.__pathisopen = true;
}
@@ -353,46 +353,31 @@
function closePath() {
if (this.__pathisopen) {
this.__path.push('closePath', arguments);
- } else if (this.direct) {
- if ($debug) this.__checkContext();
- this.context.closePath()
}
this.__pathisopen = false;
}
- function moveTo(x, y) {
+ function moveTo() {
if (this.__pathisopen) {
this.__path.push('moveTo', arguments);
- } else if (this.direct) {
- if ($debug) this.__checkContext();
- this.context.moveTo(x, y)
}
}
- function lineTo(x, y) {
+ function lineTo() {
if (this.__pathisopen) {
this.__path.push('lineTo', arguments);
- } else if (this.direct) {
- if ($debug) this.__checkContext();
- this.context.lineTo(x, y)
}
}
- function quadraticCurveTo(cpx, cpy, x, y) {
+ function quadraticCurveTo() {
if (this.__pathisopen) {
this.__path.push('quadraticCurveTo', arguments);
- } else if (this.direct) {
- if ($debug) this.__checkContext();
- this.context.quadraticCurveTo(cpx, cpy, x, y)
}
}
- function bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
+ function bezierCurveTo() {
if (this.__pathisopen) {
this.__path.push('bezierCurveTo', arguments);
- } else if (this.direct) {
- if ($debug) this.__checkContext();
- this.context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
}
}
@@ -405,31 +390,39 @@
if ($debug) this.__checkContext();
this.context.lineWidth = this.lineWidth;
this.context.lineCap = this.lineCap;
- if (typeof this.fillStyle == 'object' && this.fillStyle instanceof LzCanvasGradient) {
+ if (this.fillStyle instanceof LzCanvasGradient) {
//Debug.write('before apply');
this.fillStyle.__applyTo(this.context);
} else {
- if (this['_fillStyle'] != this.fillStyle) {
- this.context.fillStyle = LzUtils.color.torgb(this.fillStyle);
- this._fillStyle = this.fillStyle;
+ if (! this._colorcache[this.fillStyle]) {
+ this._colorcache[this.fillStyle] = LzUtils.color.torgb(this.fillStyle);
}
+ this.context.fillStyle = this._colorcache[this.fillStyle];
}
- if (this['_strokeStyle'] != this.strokeStyle) {
- this.context.strokeStyle = LzUtils.color.torgb(this.strokeStyle);
- this._strokeStyle = this.strokeStyle;
+ if (! this._colorcache[this.strokeStyle]) {
+ this._colorcache[this.strokeStyle] = LzUtils.color.torgb(this.strokeStyle);
}
+ this.context.strokeStyle = this._colorcache[this.strokeStyle];
+
this.context.globalAlpha = this.globalAlpha;
if (this.__path.length) {
this.context.beginPath();
- this.direct = true;
- this.__pathisopen = false;
for (var i = 0; i < this.__path.length; i += 2) {
var n = this.__path[i];
var a = this.__path[i + 1];
- this[n].apply(this, a);
+ if (n == 'closePath') {
+ this.context.closePath();
+ } else if (n == 'quadraticCurveTo') {
+ this.context.quadraticCurveTo(a[0], a[1], a[2], a[3]);
+ } else if (n == 'bezierCurveTo') {
+ this.context.bezierCurveTo(a[0], a[1], a[2], a[3], a[4], a[5]);
+ } else if (n == 'moveTo') {
+ this.context.moveTo(a[0], a[1]);
+ } else if (n == 'lineTo') {
+ this.context.lineTo(a[0], a[1]);
+ }
}
- this.direct = false;
}
}
@@ -485,7 +478,10 @@
* @param Number c: The color to be used at this color. A hexadecimal value, e.g. 0xffffff
*/
LzCanvasGradient.prototype.addColorStop = function(o, c) {
- this._g.addColorStop(o, LzUtils.color.torgb(c))
+ if (! lz.drawview.prototype._colorcache[c]) {
+ lz.drawview.prototype._colorcache[c] = LzUtils.color.torgb(c);
+ }
+ this._g.addColorStop(o, lz.drawview.prototype._colorcache[c])
}
LzCanvasGradient.prototype.__applyTo = function(scope) {
@@ -508,6 +504,7 @@
var fillStyle = '#000000';
var context = null;
var cachebitmap = true;
+ var _colorcache = {}
DeclareEvent(prototype, 'oncontext');
@@ -688,23 +685,20 @@
function fill() {
- var savedStyle = this.fillStyle;
- if (typeof this.fillStyle == 'object' && this.fillStyle instanceof LzCanvasGradient) {
+ if (this.fillStyle instanceof LzCanvasGradient) {
//Debug.write('before apply');
this.fillStyle.__applyTo(this.context);
} else {
- if (this['_fillStyle'] != this.fillStyle) {
- this.fillStyle = LzUtils.color.hextoint(this.fillStyle);
- this._fillStyle = this.fillStyle;
+ if (! this._colorcache[this.fillStyle]) {
+ this._colorcache[this.fillStyle] = LzUtils.color.hextoint(this.fillStyle);
}
//Debug.write('fill', this.context, this.fillStyle, this.globalAlpha * 100);
- this.context.beginFill(this.fillStyle, this.globalAlpha * 100);
+ this.context.beginFill(this._colorcache[this.fillStyle], this.globalAlpha * 100);
}
this.closePath();
this.__playPath(this.context);
this.context.endFill();
this.sprite.updateResourceSize();
- this.fillStyle = savedStyle;
}
function __playPath(m) {
@@ -739,24 +733,20 @@
}
function stroke() {
- var savedStyle = this.strokeStyle;
- if (typeof this.strokeStyle == 'object' && this.strokeStyle instanceof LzCanvasGradient) {
+ if (this.strokeStyle instanceof LzCanvasGradient) {
if ($debug) {
Debug.warn ("Gradient line fills aren't supported.");
}
return;
}
- if (this['_strokeStyle'] != this.strokeStyle) {
- this.strokeStyle = LzUtils.color.hextoint(this.strokeStyle);
- this._strokeStyle = this.strokeStyle;
+ if (! this._colorcache[this.strokeStyle]) {
+ this._colorcache[this.strokeStyle] = LzUtils.color.hextoint(this.strokeStyle);
}
- var m = this.context;
- m.lineStyle(this.lineWidth, this.strokeStyle, this.globalAlpha * 100);
- //Debug.write(m, 'stroke',this.lineWidth, this.strokeStyle, this.globalAlpha * 100);
- this.__playPath(m);
- m.lineStyle(undefined);
+ this.context.lineStyle(this.lineWidth, this._colorcache[this.strokeStyle], this.globalAlpha * 100);
+ //Debug.write(this.context, 'stroke',this.lineWidth, this._colorcache[this.strokeStyle], this.globalAlpha * 100);
+ this.__playPath(this.context);
+ this.context.lineStyle(undefined);
this.sprite.updateResourceSize();
- this.strokeStyle = savedStyle;
}
function clear() {
@@ -826,7 +816,10 @@
*/
LzCanvasGradient.prototype.addColorStop = function(o, c) {
this._o[this._o.length] = o * 255;
- this._c[this._c.length] = LzUtils.color.hextoint(c);
+ if (! this._context._colorcache[c]) {
+ this._context._colorcache[c] = LzUtils.color.hextoint(c);
+ }
+ this._c[this._c.length] = this._context._colorcache[c];
this._a[this._a.length] = this._context.globalAlpha * 100;
}
_______________________________________________
Laszlo-checkins mailing list
Laszlo-checkins@openlaszlo.org
http://www.openlaszlo.org/mailman/listinfo/laszlo-checkins