@storybook/addon-ondevice-controls
Version:
Display storybook controls on your device.
73 lines (72 loc) • 2.71 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.toHsv = toHsv;
exports.fromHsv = fromHsv;
exports.createPanResponder = createPanResponder;
exports.rotatePoint = rotatePoint;
const tinycolor2_1 = __importDefault(require("tinycolor2"));
const react_native_1 = require("react-native");
/**
* Converts color to hsv representation.
* @param {string} color any color representation - name, hexa, rgb
* @return {object} { h: number, s: number, v: number } object literal
*/
function toHsv(color) {
return (0, tinycolor2_1.default)(color).toHsv();
}
/**
* Converts hsv object to hexa color string.
* @param {object} hsv { h: number, s: number, v: number } object literal
* @return {string} color in hexa representation
*/
function fromHsv(hsv) {
return (0, tinycolor2_1.default)(hsv).toHexString();
}
const fn = () => true;
/**
* Simplified pan responder wrapper.
*/
function createPanResponder({ onStart = fn, onMove = fn, onEnd = fn, }) {
return react_native_1.PanResponder.create({
onStartShouldSetPanResponder: fn,
onStartShouldSetPanResponderCapture: fn,
onMoveShouldSetPanResponder: fn,
onMoveShouldSetPanResponderCapture: fn,
onPanResponderTerminationRequest: fn,
onPanResponderGrant: (evt, state) => {
return onStart({ x: evt.nativeEvent.pageX, y: evt.nativeEvent.pageY }, evt, state);
},
onPanResponderMove: (evt, state) => {
return onMove({ x: evt.nativeEvent.pageX, y: evt.nativeEvent.pageY }, evt, state);
},
onPanResponderRelease: (evt, state) => {
return onEnd({ x: evt.nativeEvent.pageX, y: evt.nativeEvent.pageY }, evt, state);
},
});
}
/**
* Rotates point around given center in 2d.
* Point is object literal { x: number, y: number }
* @param {point} point to be rotated
* @param {number} angle in radians
* @param {point} center to be rotated around
* @return {point} rotated point
*/
function rotatePoint(point, angle, center = { x: 0, y: 0 }) {
// translation to origin
const transOriginX = point.x - center.x;
const transOriginY = point.y - center.y;
// rotation around origin
const rotatedX = transOriginX * Math.cos(angle) - transOriginY * Math.sin(angle);
const rotatedY = transOriginY * Math.cos(angle) + transOriginX * Math.sin(angle);
// translate back from origin
const normalizedX = rotatedX + center.x;
const normalizedY = rotatedY + center.y;
return {
x: normalizedX,
y: normalizedY,
};
}