Merge pull request #919 from adroitwhiz/handle-null-color

Handle `null` colors in bitmap shape tools
This commit is contained in:
DD Liu 2020-05-15 14:56:42 -04:00 committed by GitHub
commit 902b599cfa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 6 deletions

View file

@ -76,7 +76,8 @@ class OvalTool extends paper.Tool {
this.thickness = this.oval.strokeWidth; this.thickness = this.oval.strokeWidth;
} }
this.filled = this.oval.strokeWidth === 0; this.filled = this.oval.strokeWidth === 0;
this.color = this.filled ? this.oval.fillColor.toCSS() : this.oval.strokeColor.toCSS(); const color = this.filled ? this.oval.fillColor : this.oval.strokeColor;
this.color = color ? color.toCSS() : null;
} else if (this.oval && this.oval.isInserted() && !this.oval.selected) { } else if (this.oval && this.oval.isInserted() && !this.oval.selected) {
// Oval got deselected // Oval got deselected
this.commitOval(); this.commitOval();

View file

@ -76,7 +76,8 @@ class RectTool extends paper.Tool {
this.thickness = this.rect.strokeWidth; this.thickness = this.rect.strokeWidth;
} }
this.filled = this.rect.strokeWidth === 0; this.filled = this.rect.strokeWidth === 0;
this.color = this.filled ? this.rect.fillColor.toCSS() : this.rect.strokeColor.toCSS(); const color = this.filled ? this.rect.fillColor : this.rect.strokeColor;
this.color = color ? color.toCSS() : null;
} else if (this.rect && this.rect.isInserted() && !this.rect.selected) { } else if (this.rect && this.rect.isInserted() && !this.rect.selected) {
// Rectangle got deselected // Rectangle got deselected
this.commitRect(); this.commitRect();

View file

@ -776,9 +776,13 @@ const commitOvalToBitmap = function (oval, bitmap) {
const radiusY = Math.abs(oval.size.height / 2); const radiusY = Math.abs(oval.size.height / 2);
const context = bitmap.getContext('2d'); const context = bitmap.getContext('2d');
const filled = oval.strokeWidth === 0; const filled = oval.strokeWidth === 0;
context.fillStyle = filled ?
oval.fillColor && oval.fillColor.toCSS() : oval.strokeColor && oval.strokeColor.toCSS();
const canvasColor = filled ? oval.fillColor : oval.strokeColor;
// If the color is null (e.g. fully transparent/"no fill"), don't bother drawing anything,
// and especially don't try calling `toCSS` on it
if (!canvasColor) return;
context.fillStyle = canvasColor.toCSS();
const drew = drawEllipse({ const drew = drawEllipse({
position: oval.position, position: oval.position,
radiusX, radiusX,
@ -799,8 +803,13 @@ const commitRectToBitmap = function (rect, bitmap) {
const tmpCanvas = createCanvas(); const tmpCanvas = createCanvas();
const context = tmpCanvas.getContext('2d'); const context = tmpCanvas.getContext('2d');
const filled = rect.strokeWidth === 0; const filled = rect.strokeWidth === 0;
context.fillStyle = filled ?
rect.fillColor && rect.fillColor.toCSS() : rect.strokeColor && rect.strokeColor.toCSS(); const canvasColor = filled ? rect.fillColor : rect.strokeColor;
// If the color is null (e.g. fully transparent/"no fill"), don't bother drawing anything,
// and especially don't try calling `toCSS` on it
if (!canvasColor) return;
context.fillStyle = canvasColor.toCSS();
if (filled) { if (filled) {
fillRect(rect, context); fillRect(rect, context);
} else { } else {