-
-
Notifications
You must be signed in to change notification settings - Fork 20
/
generator.js
executable file
·141 lines (124 loc) · 3.96 KB
/
generator.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
/*
TODO: write tests (lazy) like always right? <3
*/
const parser = require("gradient-parser");
const memoize = require("fast-memoize");
const getColor = color => {
switch (color.type) {
case "hex":
return `#${color.value}`;
case "literal":
return color.value;
default:
return `${color.type}(${color.value.join(",")})`;
}
};
const getColorsAndLocations = memoize((colorStops, maxWidth) =>
colorStops.reduce(
(acc, color, index) => {
acc.colors = [...acc.colors, getColor(color)];
// PX value for location will break!
// TODO Make it happen for px + repeat?
const locationValue = getPixelsForColor(color, colorStops.length, index, maxWidth);
acc["locations"] = [...acc.locations, locationValue];
return acc;
},
{ colors: [], locations: [] }
)
);
const getPixelsForColor = memoize((color, colorsLength, index, maxWidth) => {
const { length } = color;
if (!length) {
return (1 / (colorsLength - 1)) * index;
}
if (length.type === "px") {
return parseFloat(length.value);
}
if (length.type === "%") {
if (maxWidth) {
return (parseFloat(length.value) * maxWidth) / 100;
} else {
return length.value / 100;
}
}
});
const getRepeatingColorsAndLocations = (colorStops, sizes) => {
const { width: maxWidth, height: maxHeight } = sizes;
const { colors: initialColors, locations: initialLocations } = getColorsAndLocations(colorStops, maxWidth);
const maxValue = parseFloat(initialLocations.slice(-1)[0]);
const increment = maxValue / maxWidth;
// we need to add +1 but this is breaking LinearGradient, maybe can't render
// it outside the viewport.
const maxChunks = Math.round(maxWidth / maxValue);
const locations = [...Array(maxChunks).keys()].reduce((acc, i) => {
return [
...acc,
...initialLocations.map(j => {
return j / maxWidth + increment * i;
})
];
}, []);
const colors = locations.map((_, i) => initialColors[i % initialColors.length]);
return { colors, locations };
};
const getVectorsByDirection = memoize(direction => {
switch (direction) {
case "top":
return getVectorsByAngle(0);
case "right":
return getVectorsByAngle(90);
case "bottom":
return getVectorsByAngle(180);
case "left":
return getVectorsByAngle(270);
case "left top":
return getVectorsByAngle(270 + 45);
case "left bottom":
return getVectorsByAngle(180 + 45);
case "right top":
return getVectorsByAngle(45);
case "right bottom":
return getVectorsByAngle(90 + 45);
}
});
const round = memoize(number => Math.round(number * 10000) / 10000);
const degreesToRadians = memoize(degrees => (degrees * Math.PI) / 180);
const getVectorsByAngle = memoize(alfa => {
const angle = degreesToRadians(alfa);
let gradientLineLength = round(Math.abs(Math.sin(angle)) + Math.abs(Math.cos(angle)));
let center = { x: 0.5, y: 0.5 };
let yDiff = (Math.sin(angle - Math.PI / 2) * gradientLineLength) / 2;
let xDiff = (Math.cos(angle - Math.PI / 2) * gradientLineLength) / 2;
return {
start: {
x: center.x - xDiff,
y: center.y - yDiff
},
end: {
x: center.x + xDiff,
y: center.y + yDiff
}
};
});
const getVectorsByOrientation = orientation => {
return orientation.type === "directional"
? getVectorsByDirection(orientation.value)
: getVectorsByAngle(orientation.value);
};
const generateGradient = memoize((gradient, sizes) => {
return parser.parse(gradient).map(({ type, colorStops, orientation }) => {
// YOLO: Radial gradients <3
if (type === "radial-gradient") {
return "Only linear-gradient type is supported for now";
}
const colorsAndLocations =
type === "linear-gradient"
? getColorsAndLocations(colorStops)
: getRepeatingColorsAndLocations(colorStops, sizes);
return {
...colorsAndLocations,
...getVectorsByOrientation(orientation)
};
});
});
export default generateGradient;