scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2024-12-22 21:42:30 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Fix stroke width showing 0 when the first color of a gradient is transparent. Fix "MIXED" being the secondary gradient color

Browse source
This commit is contained in:
DD Liu 2020-08-07 19:14:31 -04:00
parent 0b16ca16eb
commit 92ec567887
2 changed files with 32 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/containers/line-mode.jsx
View file

@ -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));
},

24
src/helper/style-path.js
View file

@ -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,