Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: colorPropToSVG comply with svg specification #9408

Merged
merged 6 commits into from
Oct 16, 2023
Merged

fix: colorPropToSVG comply with svg specification #9408

Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1af5958
fix: colorPropToSVG comply with svg specification
tyutjohn Oct 11, 2023
87efed5
feat: add test
tyutjohn Oct 11, 2023
317dab1
feat: add third arg for colorPropToSVG
tyutjohn Oct 12, 2023
69c0736
feat: clear no use package
tyutjohn Oct 12, 2023
67fc6c0
feat: rewrite colorPropToSVG & add text
tyutjohn Oct 13, 2023
a4908eb
feat: add changelog
tyutjohn Oct 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions src/util/misc/svgParsing.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,8 @@ export type MeetOrSlice = 'meet' | 'slice';

export type MinMidMax = 'Min' | 'Mid' | 'Max' | 'none';

export type ColorSeparator = ':' | '=';

export type TPreserveArParsed = {
meetOrSlice: MeetOrSlice;
alignX: MinMidMax;
Expand Down Expand Up @@ -139,20 +141,20 @@ export const matrixToSVG = (transform: TMat2D) =>
* @param value
* @returns
*/
export const colorPropToSVG = (prop: string, value?: any) => {
export const colorPropToSVG = (prop: string, value?: any, separator: ColorSeparator = ':') => {
if (!value) {
return `${prop}: none; `;
return separator === ':' ? `${prop}: none; ` : `${prop}="none" `;
} else if (value.toLive) {
return `${prop}: url(#SVGID_${value.id}); `;
return separator === ':' ? `${prop}: url(#SVGID_${value.id}); ` : `${prop}="url(#SVGID_${value.id})" `;
} else {
const color = new Color(value),
opacity = color.getAlpha();

let str = `${prop}: ${color.toRgb()}; `;
let str = separator === ':' ? `${prop}: ${color.toRgb()}; ` : `${prop}="${color.toRgb()}" `;

if (opacity !== 1) {
//change the color in rgb + opacity
str += `${prop}-opacity: ${opacity.toString()}; `;
str += separator === ':' ? `${prop}-opacity: ${opacity.toString()}; ` : `${prop}-opacity="${opacity.toString()}" `;
Copy link
Member

Choose a reason for hiding this comment

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

the code is fine as it is, and i not holding an approval on this.
But you you want to step up the game of cleaning up, you can remove at least 2 ternaries with something like this:

let colorValue;
let opacityValue;
if (!value) { 
  colorValue = 'none';
} else if(...) {
  colorValue = `#SVGID_${value.id}`;
} else {
 ....
 do color value and opacity value;
}
if (separator === ':') {
  return `${prop}: ${colorValue} ${opacityValue ? `${prop}-opacity: ${opacity.toString()}; ` : ''}`
} else {
 return `${prop}="${color.toRgb()}" ${opacityValue ? `${prop}-opacity="${opacity.toString()}" ` : ''}`
}

this maybe is easier to read? just a suggestion follow your gut feeling is not a big deal

}
return str;
}
Expand All @@ -163,7 +165,7 @@ export const createSVGRect = (
{ left, top, width, height }: TBBox,
precision = config.NUM_FRACTION_DIGITS
) => {
const svgColor = colorPropToSVG('fill', color);
const svgColor = colorPropToSVG('fill', color, '=');
const [x, y, w, h] = [left, top, width, height].map((value) =>
toFixed(value, precision)
);
Expand Down
Loading