From 92ec567887af8e26cef006124a3ec4d7be4c965f Mon Sep 17 00:00:00 2001 From: DD Liu Date: Fri, 7 Aug 2020 19:14:31 -0400 Subject: [PATCH 1/4] Fix stroke width showing 0 when the first color of a gradient is transparent. Fix "MIXED" being the secondary gradient color --- src/containers/line-mode.jsx | 15 ++++++++++++--- src/helper/style-path.js | 24 ++++++++++++++++++++---- 2 files changed, 32 insertions(+), 7 deletions(-) diff --git a/src/containers/line-mode.jsx b/src/containers/line-mode.jsx index 3d0925f5..5099d06a 100644 --- a/src/containers/line-mode.jsx +++ b/src/containers/line-mode.jsx @@ -9,7 +9,7 @@ import {clearSelection} from '../helper/selection'; import {endPointHit, touching} from '../helper/snapping'; import {drawHitPoint, removeHitPoint} from '../helper/guides'; import {styleShape} from '../helper/style-path'; -import {changeStrokeColor} from '../reducers/stroke-style'; +import {changeStrokeColor, clearStrokeGradient} from '../reducers/stroke-style'; import {changeStrokeWidth} from '../reducers/stroke-width'; import {changeMode} from '../reducers/modes'; import {clearSelectedItems} from '../reducers/selected-items'; @@ -60,10 +60,16 @@ class LineMode extends React.Component { activateTool () { clearSelection(this.props.clearSelectedItems); // Force the default line color if stroke is MIXED or transparent - const strokeColor = this.props.colorState.strokeColor.primary; - if (strokeColor === MIXED || strokeColor === null) { + const strokeColor1 = this.props.colorState.strokeColor.primary; + const strokeColor2 = this.props.colorState.strokeColor.secondary; + if (strokeColor1 === MIXED || + (strokeColor1 === null && + (strokeColor2 === null || strokeColor2 === MIXED))) { this.props.onChangeStrokeColor(LineMode.DEFAULT_COLOR); } + if (strokeColor2 === MIXED) { + this.props.clearStrokeGradient(); + } // Force a minimum stroke width if (!this.props.colorState.strokeWidth) { this.props.onChangeStrokeWidth(1); @@ -294,6 +300,9 @@ const mapDispatchToProps = dispatch => ({ clearSelectedItems: () => { dispatch(clearSelectedItems()); }, + clearStrokeGradient: () => { + dispatch(clearStrokeGradient()); + }, handleMouseDown: () => { dispatch(changeMode(Modes.LINE)); }, diff --git a/src/helper/style-path.js b/src/helper/style-path.js index 59907b69..a1a589ff 100644 --- a/src/helper/style-path.js +++ b/src/helper/style-path.js @@ -260,6 +260,7 @@ const applyGradientTypeToSelection = function (gradientType, applyToStroke, text const itemColorProp = applyToStroke ? 'strokeColor' : 'fillColor'; const itemColor = item[itemColorProp]; + let itemStrokeWidth = item.strokeWidth; const hasGradient = itemColor && itemColor.gradient; @@ -298,6 +299,20 @@ const applyGradientTypeToSelection = function (gradientType, applyToStroke, text continue; } + if (!hasGradient && applyToStroke) { + const noStrokeOriginally = item.strokeWidth === 0 || !itemColor || + (itemColor.gradient && + itemColor.gradient.stops && + itemColor.gradient.stops.length === 2 && + itemColor.gradient.stops[0].color.alpha === 0 && + itemColor.gradient.stops[1].color.alpha === 0) + const hasGradientNow = itemColor1 || itemColor2; + if (noStrokeOriginally && hasGradientNow) { + // Make outline visible + itemStrokeWidth = item.strokeWidth = 1; + } + } + if (itemColor1 === null) { itemColor1 = getColorStringForTransparent(itemColor2); } @@ -335,7 +350,7 @@ const applyGradientTypeToSelection = function (gradientType, applyToStroke, text gradientType, item.bounds, null, // radialCenter - item.strokeWidth + itemStrokeWidth ); } } @@ -439,6 +454,7 @@ const getColorsFromSelection = function (selectedItems, bitmapMode) { itemFillColorString = item.fillColor.alpha === 0 ? null : item.fillColor.toCSS(); + itemFillColor2String = null; } } if (item.strokeColor) { @@ -479,6 +495,7 @@ const getColorsFromSelection = function (selectedItems, bitmapMode) { } } else { itemStrokeColorString = null; + itemStrokeColor2String = null; } // check every style against the first of the items if (firstChild) { @@ -489,7 +506,7 @@ const getColorsFromSelection = function (selectedItems, bitmapMode) { selectionStrokeColor2String = itemStrokeColor2String; selectionFillGradientType = itemFillGradientType; selectionStrokeGradientType = itemStrokeGradientType; - selectionStrokeWidth = itemStrokeColorString ? item.strokeWidth : 0; + selectionStrokeWidth = itemStrokeColorString || itemStrokeColor2String ? item.strokeWidth : 0; if (item.strokeWidth && item.data && item.data.zoomLevel) { selectionThickness = item.strokeWidth / item.data.zoomLevel; } @@ -516,7 +533,7 @@ const getColorsFromSelection = function (selectedItems, bitmapMode) { if (itemStrokeColor2String !== selectionStrokeColor2String) { selectionStrokeColor2String = MIXED; } - const itemStrokeWidth = itemStrokeColorString ? item.strokeWidth : 0; + const itemStrokeWidth = itemStrokeColorString || itemStrokeColor2String ? item.strokeWidth : 0; if (selectionStrokeWidth !== itemStrokeWidth) { selectionStrokeWidth = null; } @@ -555,7 +572,6 @@ const getColorsFromSelection = function (selectedItems, bitmapMode) { thickness: selectionThickness }; } - return { fillColor: selectionFillColorString ? selectionFillColorString : null, fillColor2: selectionFillColor2String ? selectionFillColor2String : null, From 4ec6bcae99c884a3e8fe8262028b9d5ea5a3d230 Mon Sep 17 00:00:00 2001 From: DD Liu Date: Sat, 8 Aug 2020 02:19:56 -0400 Subject: [PATCH 2/4] Don't report the gradient type as solid when it's a transparent to transparent gradient, because then switching to a gradient doesn't add a stroke width as expected --- src/helper/style-path.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/helper/style-path.js b/src/helper/style-path.js index a1a589ff..3dd83f37 100644 --- a/src/helper/style-path.js +++ b/src/helper/style-path.js @@ -468,7 +468,6 @@ const getColorsFromSelection = function (selectedItems, bitmapMode) { // If the item's stroke width is 0, pretend the stroke color is null if (!item.strokeWidth) { strokeColorString = null; - strokeGradientType = GradientTypes.SOLID; } // Stroke color is fill color in bitmap From d2a78a9e9f72630bee58a745a5e3ec7a71985be7 Mon Sep 17 00:00:00 2001 From: DD Liu Date: Sat, 8 Aug 2020 21:42:32 -0400 Subject: [PATCH 3/4] Lint --- src/containers/line-mode.jsx | 1 + src/helper/style-path.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/containers/line-mode.jsx b/src/containers/line-mode.jsx index 5099d06a..f9043ad4 100644 --- a/src/containers/line-mode.jsx +++ b/src/containers/line-mode.jsx @@ -280,6 +280,7 @@ class LineMode extends React.Component { LineMode.propTypes = { clearSelectedItems: PropTypes.func.isRequired, + clearStrokeGradient: PropTypes.func.isRequired, colorState: PropTypes.shape({ fillColor: ColorStyleProptype, strokeColor: ColorStyleProptype, diff --git a/src/helper/style-path.js b/src/helper/style-path.js index 3dd83f37..2dae24d7 100644 --- a/src/helper/style-path.js +++ b/src/helper/style-path.js @@ -305,7 +305,7 @@ const applyGradientTypeToSelection = function (gradientType, applyToStroke, text itemColor.gradient.stops && itemColor.gradient.stops.length === 2 && itemColor.gradient.stops[0].color.alpha === 0 && - itemColor.gradient.stops[1].color.alpha === 0) + itemColor.gradient.stops[1].color.alpha === 0); const hasGradientNow = itemColor1 || itemColor2; if (noStrokeOriginally && hasGradientNow) { // Make outline visible @@ -463,7 +463,7 @@ const getColorsFromSelection = function (selectedItems, bitmapMode) { let strokeColorString = primary; const strokeColor2String = secondary; - let strokeGradientType = gradientType; + const strokeGradientType = gradientType; // If the item's stroke width is 0, pretend the stroke color is null if (!item.strokeWidth) { From 474b309f7ae297e862fff519dcab22ce917f75bd Mon Sep 17 00:00:00 2001 From: DD Liu Date: Thu, 13 Aug 2020 16:48:45 -0400 Subject: [PATCH 4/4] Remove unnecessary change --- src/helper/style-path.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/helper/style-path.js b/src/helper/style-path.js index 2dae24d7..07663296 100644 --- a/src/helper/style-path.js +++ b/src/helper/style-path.js @@ -260,7 +260,6 @@ const applyGradientTypeToSelection = function (gradientType, applyToStroke, text const itemColorProp = applyToStroke ? 'strokeColor' : 'fillColor'; const itemColor = item[itemColorProp]; - let itemStrokeWidth = item.strokeWidth; const hasGradient = itemColor && itemColor.gradient; @@ -309,7 +308,7 @@ const applyGradientTypeToSelection = function (gradientType, applyToStroke, text const hasGradientNow = itemColor1 || itemColor2; if (noStrokeOriginally && hasGradientNow) { // Make outline visible - itemStrokeWidth = item.strokeWidth = 1; + item.strokeWidth = 1; } } @@ -350,7 +349,7 @@ const applyGradientTypeToSelection = function (gradientType, applyToStroke, text gradientType, item.bounds, null, // radialCenter - itemStrokeWidth + item.strokeWidth ); } }