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

Merge pull request #1211 from fsih/gradientOutlines

Browse source 
Gradient outlines fixes
This commit is contained in:
DD Liu 2020-08-13 17:02:11 -04:00 committed by GitHub
commit 5d5e3ee654
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
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);
@ -274,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,
@ -294,6 +301,9 @@ const mapDispatchToProps = dispatch => ({
clearSelectedItems: () => {
dispatch(clearSelectedItems());
},
clearStrokeGradient: () => {
dispatch(clearStrokeGradient());
},
handleMouseDown: () => {
dispatch(changeMode(Modes.LINE));
},

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

@ -298,6 +298,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
item.strokeWidth = 1;
}
}
if (itemColor1 === null) {
itemColor1 = getColorStringForTransparent(itemColor2);
}
@ -439,6 +453,7 @@ const getColorsFromSelection = function (selectedItems, bitmapMode) {
itemFillColorString = item.fillColor.alpha === 0 ?
null :
item.fillColor.toCSS();
itemFillColor2String = null;
}
}
if (item.strokeColor) {
@ -447,12 +462,11 @@ 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) {
strokeColorString = null;
strokeGradientType = GradientTypes.SOLID;
}
// Stroke color is fill color in bitmap
@ -479,6 +493,7 @@ const getColorsFromSelection = function (selectedItems, bitmapMode) {
}
} else {
itemStrokeColorString = null;
itemStrokeColor2String = null;
}
// check every style against the first of the items
if (firstChild) {
@ -489,7 +504,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 +531,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 +570,6 @@ const getColorsFromSelection = function (selectedItems, bitmapMode) {
thickness: selectionThickness
};
}
return {
fillColor: selectionFillColorString ? selectionFillColorString : null,
fillColor2: selectionFillColor2String ? selectionFillColor2String : null,