tandem-front-end
Version:
Visual editor for web components
282 lines • 10.3 kB
JavaScript
;
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
t[p[i]] = s[p[i]];
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var recompose_1 = require("recompose");
var tandem_common_1 = require("tandem-common");
var canvas_controller_1 = require("./canvas-controller");
var lodash_1 = require("lodash");
var CHANGE_THROTTLE_MS = 1000 / 20;
exports.default = recompose_1.compose(function (Base) { return function (props) {
return React.createElement(Base, __assign({}, props));
}; }, recompose_1.pure, recompose_1.withState("hsla", "setHSLA", function (_a) {
var value = _a.value;
var rgba = parseRGBA(value || "#FF0000");
return rgbaToHsla(rgba);
}), recompose_1.lifecycle({
componentWillUpdate: function (props) {
if (this.props.value !== props.value) {
var rgba = parseRGBA(props.value);
var hsla = rgbaToHsla(rgba);
if (hsla.join("") !== props.hsla.join("")) {
this.props.setHSLA(hsla);
}
}
}
}), recompose_1.withHandlers(function () {
var colorChangeCallback = function (updater) { return function (_a) {
var onChange = _a.onChange, hsla = _a.hsla, setHSLA = _a.setHSLA;
return lodash_1.throttle(function (rgba) {
setHSLA((hsla = updater(rgba, hsla)));
if (onChange) {
onChange(stringifyRgba(hslaToRgba(hsla)));
}
}, CHANGE_THROTTLE_MS);
}; };
var colorChangeCompleteCallback = function (updater) { return function (_a) {
var onChangeComplete = _a.onChangeComplete, hsla = _a.hsla, setHSLA = _a.setHSLA;
return function (rgba) {
setHSLA((hsla = updater(rgba, hsla)));
if (onChangeComplete) {
setTimeout(onChangeComplete, CHANGE_THROTTLE_MS * 2, stringifyRgba(hslaToRgba(hsla)));
}
};
}; };
return {
onHSLChange: colorChangeCallback(updateHSLA),
onHSLChangeComplete: colorChangeCompleteCallback(updateHSLA),
onSpectrumChange: colorChangeCallback(updateHue),
onSpectrumChangeComplete: colorChangeCompleteCallback(updateHue),
onOpacityChange: colorChangeCallback(updateOpacity),
onOpacityChangeComplete: colorChangeCompleteCallback(updateOpacity),
onRGBAInputChange: function (_a) {
var onChange = _a.onChange, setHSLA = _a.setHSLA;
return function (rgba) {
setHSLA(rgbaToHsla(rgba));
};
}
};
}), function (Base) { return function (_a) {
var hsla = _a.hsla, onRGBAInputChange = _a.onRGBAInputChange, onHSLChange = _a.onHSLChange, onHSLChangeComplete = _a.onHSLChangeComplete, onSpectrumChange = _a.onSpectrumChange, onSpectrumChangeComplete = _a.onSpectrumChangeComplete, onOpacityChange = _a.onOpacityChange, onOpacityChangeComplete = _a.onOpacityChangeComplete, rest = __rest(_a, ["hsla", "onRGBAInputChange", "onHSLChange", "onHSLChangeComplete", "onSpectrumChange", "onSpectrumChangeComplete", "onOpacityChange", "onOpacityChangeComplete"]);
var rgba = hslaToRgba(hsla);
return (React.createElement(Base, { hslProps: {
draw: hslDrawer(hsla[0]),
value: hsla,
onChange: onHSLChange,
getGraggerPoint: hslPointer,
onChangeComplete: onHSLChangeComplete,
grabberAxis: canvas_controller_1.GrabberAxis.X | canvas_controller_1.GrabberAxis.Y
}, spectrumProps: {
draw: hueDrawer,
value: hsla,
onChange: onSpectrumChange,
getGraggerPoint: huePointer,
onChangeComplete: onSpectrumChangeComplete,
grabberAxis: canvas_controller_1.GrabberAxis.X
}, opacityProps: {
draw: opacityDrawer(hsla[0]),
value: hsla,
onChange: onOpacityChange,
getGraggerPoint: opacityPointer,
onChangeComplete: onOpacityChangeComplete,
grabberAxis: canvas_controller_1.GrabberAxis.X
}, rgbaInputProps: {
value: rgba,
onChange: onRGBAInputChange
} }));
}; });
var stringifyRgba = function (_a) {
var r = _a[0], g = _a[1], b = _a[2], a = _a[3];
return "rgba(" + r + ", " + g + ", " + b + ", " + a + ")";
};
var hslDrawer = tandem_common_1.memoize(function (h) { return function (canvas, width, height) {
var hv = h * 360;
var ctx = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;
for (var row = 0; row <= height; row++) {
var grad = ctx.createLinearGradient(0, 0, width, 0);
grad.addColorStop(1, "hsl(" + hv + ", 0%, " + (height - row) / height * 100 + "%)");
grad.addColorStop(0, "hsl(" + hv + ", 100%, " + (height - row) / height * 50 + "%)");
ctx.fillStyle = grad;
ctx.fillRect(0, row, width, 1);
}
}; });
var hslPointer = function (hsl, width, height) {
var _a = hslToHsv(hsl), h = _a[0], s = _a[1], v = _a[2];
return {
left: width * (1 - s),
top: height * (1 - v)
};
};
var opacityPointer = function (_a, width, height) {
var h = _a[0], s = _a[1], l = _a[2], a = _a[3];
return {
left: width * a
};
};
var huePointer = function (_a, width, height) {
var h = _a[0];
return {
left: width * (h * 360) / 360
};
};
var hueDrawer = function (canvas, width, height) {
var ctx = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;
for (var row = 0; row <= width; row++) {
ctx.fillStyle = "hsl(" + (row - width) / width * 360 + ", 100%, 50%)";
ctx.fillRect(row, 0, 1, height);
}
};
var opacityDrawer = tandem_common_1.memoize(function (h) { return function (canvas, width, height) {
var ctx = canvas.getContext("2d");
var hv = h * 360;
canvas.width = width;
canvas.height = height;
for (var row = 0; row <= width; row++) {
ctx.fillStyle = "hsl(" + hv + ", 100%, " + ((width - row) / width * 50 + 50) + "%)";
ctx.fillRect(row, 0, 1, height);
}
}; });
var updateOpacity = function (rgba, _a) {
var h = _a[0], s = _a[1], l = _a[2];
var l2 = rgbaToHsla(rgba)[2];
return [h, s, l, lToA(l2)];
};
var lToA = function (l) {
return Number((1 - Math.min(0.5, Math.max(0, l - 0.5)) / 0.5).toFixed(2));
};
var updateHue = function (rgba, _a) {
var s = _a[1], l = _a[2], a = _a[3];
return [
rgbaToHsla(rgba)[0],
s,
l,
a
];
};
var updateHSLA = function (rgba, _a) {
var h = _a[0], a = _a[3];
var _b = rgbaToHsla(rgba), s = _b[1], l = _b[2];
return [h, s, l, a];
};
var calcGGBAHueFromString = tandem_common_1.memoize(function (value) {
return calcGGBAHue(parseRGBA(value));
});
var calcGGBAHue = function (rgba) { return rgbaToHsla(rgba)[0] * 360; };
var rgbaToHsla = function (_a) {
var r = _a[0], g = _a[1], b = _a[2], a = _a[3];
(r /= 255), (g /= 255), (b /= 255);
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if (max == min) {
h = s = 0; // achromatic
}
else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
return [h, s, l, a];
};
var hueToRgb = function (p, q, t) {
if (t < 0)
t += 1;
if (t > 1)
t -= 1;
if (t < 1 / 6)
return p + (q - p) * 6 * t;
if (t < 1 / 2)
return q;
if (t < 2 / 3)
return p + (q - p) * (2 / 3 - t) * 6;
return p;
};
var hslaToRgba = function (_a) {
var h = _a[0], s = _a[1], l = _a[2], a = _a[3];
var r, g, b;
if (s == 0) {
r = g = b = l;
}
else {
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hueToRgb(p, q, h + 1 / 3);
g = hueToRgb(p, q, h);
b = hueToRgb(p, q, h - 1 / 3);
}
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), a];
};
var rgbToHsv = function (_a) {
var r = _a[0], g = _a[1], b = _a[2];
(r /= 255), (g /= 255), (b /= 255);
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, v = max;
var d = max - min;
s = max == 0 ? 0 : d / max;
if (max == min) {
h = 0; // achromatic
}
else {
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
return [h, s, v];
};
var hslToHsv = function (hsl) { return rgbToHsv(hslaToRgba(hsl)); };
var getColorHSL = tandem_common_1.memoize(function (color) { return rgbaToHsla(parseRGBA(color)); });
var parseRGBA = tandem_common_1.memoize(function (value) {
if (value.indexOf("rgba") !== -1) {
return (value.match(/[\d\.]+/g) || [0, 0, 0, 1]).map(Number);
}
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(value) ||
/^#?([a-f\d]{1})([a-f\d]{1})([a-f\d]{1})$/i.exec(value);
return result
? [
parseInt(result[1], 16),
parseInt(result[2], 16),
parseInt(result[3], 16),
1
]
: [0, 0, 0, 1];
});
//# sourceMappingURL=picker-controller.js.map