From b8c0b29aea86079a3bdb763fdb8fd93eb87df6c3 Mon Sep 17 00:00:00 2001 From: DD Date: Tue, 19 Dec 2017 11:59:54 -0500 Subject: [PATCH 1/2] Null checks for fill with transparent --- src/helper/style-path.js | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/helper/style-path.js b/src/helper/style-path.js index cb5d4004..61fcb1f2 100644 --- a/src/helper/style-path.js +++ b/src/helper/style-path.js @@ -5,6 +5,12 @@ import {isGroup} from './group'; const MIXED = 'scratch-paint/style-path/mixed'; +const _fillColorMatch = function (item, incomingColor) { + return item.fillColor && item.fillColor.type !== 'gradient' && // @todo check whether the gradient has changed + ((!item.fillColor && !incomingColor) || + (item.fillColor && incomingColor && item.fillColor.toCSS() === new paper.Color(incomingColor).toCSS())); +}; + /** * Called when setting fill color * @param {string} colorString New color, css format @@ -19,16 +25,14 @@ const applyFillColorToSelection = function (colorString) { if (child.children) { for (const path of child.children) { if (!path.data.isPGGlyphRect) { - if ((path.fillColor === null && colorString) || - path.fillColor.toCSS() !== new paper.Color(colorString).toCSS()) { + if (!_fillColorMatch(path.fillColor, colorString)) { changed = true; path.fillColor = colorString; } } } } else if (!child.data.isPGGlyphRect) { - if ((child.fillColor === null && colorString) || - child.fillColor.toCSS() !== new paper.Color(colorString).toCSS()) { + if (!_fillColorMatch(child.fillColor, colorString)) { changed = true; child.fillColor = colorString; } @@ -38,8 +42,7 @@ const applyFillColorToSelection = function (colorString) { if (isPointTextItem(item) && !colorString) { colorString = 'rgba(0,0,0,0)'; } - if ((item.fillColor === null && colorString) || - item.fillColor.toCSS() !== new paper.Color(colorString).toCSS()) { + if (!_fillColorMatch(item, colorString)) { changed = true; item.fillColor = colorString; } @@ -49,8 +52,9 @@ const applyFillColorToSelection = function (colorString) { }; const _strokeColorMatch = function (item, incomingColor) { - return (!item.strokeColor && !incomingColor) || - (item.strokeColor && incomingColor && item.strokeColor.toCSS() === new paper.Color(incomingColor).toCSS()); + return item.strokeColor && item.strokeColor.type !== 'gradient' && // @todo check whether the gradient has changed + ((!item.strokeColor && !incomingColor) || + (item.strokeColor && incomingColor && item.strokeColor.toCSS() === new paper.Color(incomingColor).toCSS())); }; /** From 45dea428637c5801a65fbf35ed17ca36b5327d98 Mon Sep 17 00:00:00 2001 From: DD Date: Tue, 19 Dec 2017 13:15:31 -0500 Subject: [PATCH 2/2] merge match stroke color and match fill color --- src/helper/style-path.js | 30 ++++++++++++++---------------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/src/helper/style-path.js b/src/helper/style-path.js index 61fcb1f2..3cd25545 100644 --- a/src/helper/style-path.js +++ b/src/helper/style-path.js @@ -5,10 +5,14 @@ import {isGroup} from './group'; const MIXED = 'scratch-paint/style-path/mixed'; -const _fillColorMatch = function (item, incomingColor) { - return item.fillColor && item.fillColor.type !== 'gradient' && // @todo check whether the gradient has changed - ((!item.fillColor && !incomingColor) || - (item.fillColor && incomingColor && item.fillColor.toCSS() === new paper.Color(incomingColor).toCSS())); +// Check if the item color matches the incoming color. If the item color is a gradient, we assume +// that the incoming color never matches, since we don't support gradients yet. +const _colorMatch = function (itemColor, incomingColor) { + // @todo check whether the gradient has changed when we support gradients + if (itemColor && itemColor.type === 'gradient') return false; + // Either both are null or both are the same color when converted to CSS. + return (!itemColor && !incomingColor) || + (itemColor && incomingColor && itemColor.toCSS() === new paper.Color(incomingColor).toCSS()); }; /** @@ -25,14 +29,14 @@ const applyFillColorToSelection = function (colorString) { if (child.children) { for (const path of child.children) { if (!path.data.isPGGlyphRect) { - if (!_fillColorMatch(path.fillColor, colorString)) { + if (!_colorMatch(path.fillColor, colorString)) { changed = true; path.fillColor = colorString; } } } } else if (!child.data.isPGGlyphRect) { - if (!_fillColorMatch(child.fillColor, colorString)) { + if (!_colorMatch(child.fillColor, colorString)) { changed = true; child.fillColor = colorString; } @@ -42,7 +46,7 @@ const applyFillColorToSelection = function (colorString) { if (isPointTextItem(item) && !colorString) { colorString = 'rgba(0,0,0,0)'; } - if (!_fillColorMatch(item, colorString)) { + if (!_colorMatch(item.fillColor, colorString)) { changed = true; item.fillColor = colorString; } @@ -51,12 +55,6 @@ const applyFillColorToSelection = function (colorString) { return changed; }; -const _strokeColorMatch = function (item, incomingColor) { - return item.strokeColor && item.strokeColor.type !== 'gradient' && // @todo check whether the gradient has changed - ((!item.strokeColor && !incomingColor) || - (item.strokeColor && incomingColor && item.strokeColor.toCSS() === new paper.Color(incomingColor).toCSS())); -}; - /** * Called when setting stroke color * @param {string} colorString New color, css format @@ -72,7 +70,7 @@ const applyStrokeColorToSelection = function (colorString) { if (child.children) { for (const path of child.children) { if (!path.data.isPGGlyphRect) { - if (!_strokeColorMatch(path, colorString)) { + if (!_colorMatch(path.strokeColor, colorString)) { changed = true; path.strokeColor = colorString; } @@ -86,12 +84,12 @@ const applyStrokeColorToSelection = function (colorString) { } } } else if (!item.data.isPGGlyphRect) { - if (!_strokeColorMatch(item, colorString)) { + if (!_colorMatch(item.strokeColor, colorString)) { changed = true; item.strokeColor = colorString; } } - } else if (!_strokeColorMatch(item, colorString)) { + } else if (!_colorMatch(item.strokeColor, colorString)) { changed = true; item.strokeColor = colorString; }