scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2024-12-23 14:02:50 -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 {endPointHit, touching} from '../helper/snapping';
import {drawHitPoint, removeHitPoint} from '../helper/guides'; import {drawHitPoint, removeHitPoint} from '../helper/guides';
import {styleShape} from '../helper/style-path'; 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 {changeStrokeWidth} from '../reducers/stroke-width';
import {changeMode} from '../reducers/modes'; import {changeMode} from '../reducers/modes';
import {clearSelectedItems} from '../reducers/selected-items'; import {clearSelectedItems} from '../reducers/selected-items';
@ -60,10 +60,16 @@ class LineMode extends React.Component {
activateTool () { activateTool () {
clearSelection(this.props.clearSelectedItems); clearSelection(this.props.clearSelectedItems);
// Force the default line color if stroke is MIXED or transparent // Force the default line color if stroke is MIXED or transparent
const strokeColor = this.props.colorState.strokeColor.primary; const strokeColor1 = this.props.colorState.strokeColor.primary;
if (strokeColor === MIXED || strokeColor === null) { const strokeColor2 = this.props.colorState.strokeColor.secondary;
if (strokeColor1 === MIXED ||
(strokeColor1 === null &&
(strokeColor2 === null || strokeColor2 === MIXED))) {
this.props.onChangeStrokeColor(LineMode.DEFAULT_COLOR); this.props.onChangeStrokeColor(LineMode.DEFAULT_COLOR);
} }
if (strokeColor2 === MIXED) {
this.props.clearStrokeGradient();
}
// Force a minimum stroke width // Force a minimum stroke width
if (!this.props.colorState.strokeWidth) { if (!this.props.colorState.strokeWidth) {
this.props.onChangeStrokeWidth(1); this.props.onChangeStrokeWidth(1);
@ -274,6 +280,7 @@ class LineMode extends React.Component {
LineMode.propTypes = { LineMode.propTypes = {
clearSelectedItems: PropTypes.func.isRequired, clearSelectedItems: PropTypes.func.isRequired,
clearStrokeGradient: PropTypes.func.isRequired,
colorState: PropTypes.shape({ colorState: PropTypes.shape({
fillColor: ColorStyleProptype, fillColor: ColorStyleProptype,
strokeColor: ColorStyleProptype, strokeColor: ColorStyleProptype,
@ -294,6 +301,9 @@ const mapDispatchToProps = dispatch => ({
clearSelectedItems: () => { clearSelectedItems: () => {
dispatch(clearSelectedItems()); dispatch(clearSelectedItems());
}, },
clearStrokeGradient: () => {
dispatch(clearStrokeGradient());
},
handleMouseDown: () => { handleMouseDown: () => {
dispatch(changeMode(Modes.LINE)); dispatch(changeMode(Modes.LINE));
}, },

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

@ -298,6 +298,20 @@ const applyGradientTypeToSelection = function (gradientType, applyToStroke, text
continue; 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) { if (itemColor1 === null) {
itemColor1 = getColorStringForTransparent(itemColor2); itemColor1 = getColorStringForTransparent(itemColor2);
} }
@ -439,6 +453,7 @@ const getColorsFromSelection = function (selectedItems, bitmapMode) {
itemFillColorString = item.fillColor.alpha === 0 ? itemFillColorString = item.fillColor.alpha === 0 ?
null : null :
item.fillColor.toCSS(); item.fillColor.toCSS();
itemFillColor2String = null;
} }
} }
if (item.strokeColor) { if (item.strokeColor) {
@ -447,12 +462,11 @@ const getColorsFromSelection = function (selectedItems, bitmapMode) {
let strokeColorString = primary; let strokeColorString = primary;
const strokeColor2String = secondary; const strokeColor2String = secondary;
let strokeGradientType = gradientType; const strokeGradientType = gradientType;
// If the item's stroke width is 0, pretend the stroke color is null // If the item's stroke width is 0, pretend the stroke color is null
if (!item.strokeWidth) { if (!item.strokeWidth) {
strokeColorString = null; strokeColorString = null;
strokeGradientType = GradientTypes.SOLID;
} }
// Stroke color is fill color in bitmap // Stroke color is fill color in bitmap
@ -479,6 +493,7 @@ const getColorsFromSelection = function (selectedItems, bitmapMode) {
} }
} else { } else {
itemStrokeColorString = null; itemStrokeColorString = null;
itemStrokeColor2String = null;
} }
// check every style against the first of the items // check every style against the first of the items
if (firstChild) { if (firstChild) {
@ -489,7 +504,7 @@ const getColorsFromSelection = function (selectedItems, bitmapMode) {
selectionStrokeColor2String = itemStrokeColor2String; selectionStrokeColor2String = itemStrokeColor2String;
selectionFillGradientType = itemFillGradientType; selectionFillGradientType = itemFillGradientType;
selectionStrokeGradientType = itemStrokeGradientType; selectionStrokeGradientType = itemStrokeGradientType;
selectionStrokeWidth = itemStrokeColorString ? item.strokeWidth : 0; selectionStrokeWidth = itemStrokeColorString || itemStrokeColor2String ? item.strokeWidth : 0;
if (item.strokeWidth && item.data && item.data.zoomLevel) { if (item.strokeWidth && item.data && item.data.zoomLevel) {
selectionThickness = item.strokeWidth / item.data.zoomLevel; selectionThickness = item.strokeWidth / item.data.zoomLevel;
} }
@ -516,7 +531,7 @@ const getColorsFromSelection = function (selectedItems, bitmapMode) {
if (itemStrokeColor2String !== selectionStrokeColor2String) { if (itemStrokeColor2String !== selectionStrokeColor2String) {
selectionStrokeColor2String = MIXED; selectionStrokeColor2String = MIXED;
} }
const itemStrokeWidth = itemStrokeColorString ? item.strokeWidth : 0; const itemStrokeWidth = itemStrokeColorString || itemStrokeColor2String ? item.strokeWidth : 0;
if (selectionStrokeWidth !== itemStrokeWidth) { if (selectionStrokeWidth !== itemStrokeWidth) {
selectionStrokeWidth = null; selectionStrokeWidth = null;
} }
@ -555,7 +570,6 @@ const getColorsFromSelection = function (selectedItems, bitmapMode) {
thickness: selectionThickness thickness: selectionThickness
}; };
} }
return { return {
fillColor: selectionFillColorString ? selectionFillColorString : null, fillColor: selectionFillColorString ? selectionFillColorString : null,
fillColor2: selectionFillColor2String ? selectionFillColor2String : null, fillColor2: selectionFillColor2String ? selectionFillColor2String : null,