Skip to content
This repository was archived by the owner on Jun 10, 2026. It is now read-only.

Transform gradients in strokes#143

Merged
adroitwhiz merged 4 commits into
scratchfoundation:developfrom
adroitwhiz:gradient-stroke
Jun 4, 2020
Merged

Transform gradients in strokes#143
adroitwhiz merged 4 commits into
scratchfoundation:developfrom
adroitwhiz:gradient-stroke

Conversation

@adroitwhiz

Copy link
Copy Markdown
Contributor

Resolves

Resolves #142

Proposed Changes

This PR extends the gradient-transforming logic in transformStrokeWidths to transform gradients not only in fills (as it previously did) but in strokes as well.

Reason for Changes

Strokes can also have gradients (and scratchfoundation/scratch-paint#1004 makes this much more likely). Previously, they weren't being taken into account when transforms were being applied.

Test Coverage

Tested manually

Comment thread src/transform-applier.js Outdated
Comment on lines +519 to +520
const svg = SvgElement.set(windowRef.document.createElementNS(SvgElement.svg, 'svg'));
const path = SvgElement.set(windowRef.document.createElementNS(SvgElement.svg, 'path'));

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const svg = SvgElement.set(windowRef.document.createElementNS(SvgElement.svg, 'svg'));
const path = SvgElement.set(windowRef.document.createElementNS(SvgElement.svg, 'path'));
const svg = SvgElement.set(doc.createElementNS(SvgElement.svg, 'svg'));
const path = SvgElement.set(doc.createElementNS(SvgElement.svg, 'path'));

Should I include this code style enhancement as part of this PR?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure

@fsih fsih self-assigned this May 26, 2020
Comment thread src/transform-applier.js
fill = element.attributes.fill.value;
if (element.attributes) {
if (element.attributes.fill) fill = element.attributes.fill.value;
if (element.attributes.stroke) stroke = element.attributes.stroke.value;

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are we checking if element.attributes exists here but not checking it in the previous if-block (if (element.attributes['stroke-width']))?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like element.attributes should exist if element.tagName exists, which is what we check for in _isContainerElement, except on Internet Explorer. So the if above would break on IE (but we don't support IE anyway)

Comment thread src/transform-applier.js
const newStrokeRef = _createGradient(strokeGradientId, svgTag, bbox, matrix);
if (newStrokeRef) stroke = newStrokeRef;
}
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems like fillGradientId and strokeGradientId might be the same, and if they're the same, we should try not to make a duplicate definition (although I'm not sure if it hurts anything if we do have duplicates)

Instead of checking if an element is a graphics element,
check if it's "paintable" (fill/stroke applies to it).

This includes several text-related elements,
and excludes `use` and `image` elements.

@fsih fsih left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Let's merge this after the deploy.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Strokes/outlines that have gradients sometimes don't render properly

2 participants