Author: max
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 [EMAIL PROTECTED] 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 FF
Technical 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
[email protected]
http://www.openlaszlo.org/mailman/listinfo/laszlo-checkins
