Color Wheel with multiple thumbs

[theutku]

Hello all,

This is my first post on discussions, so I am sorry for any mistakes in advance :)

I am trying to implement a color wheel that utilizes multiple thumbs with react-native-reanimated and react-native-pan-gesture-handler.

The implementation is an alteration of https://github.com/iyegoroff/react-native-reanimated-color-picker library.

I have successfully implemented until the part that it takes an array of hex colors and initializes them correctly on the wheel.

The problem is that, I cannot move the thumbs after initializing, since the position calculation had me confused. I have provided a set of states and panhandlers for each color to the child-most component, and instead of the whole wheel background, my panhandlers wrap the thumbs.

With the order from parent to child, here is my code so far:

Main Component:

                        <WheelWrapper
                            wheelStyle={wheelStyle}
                            onColorChangeComplete={this.colorChanged}
                            colors={["#2577ff", "#ff0273"]}
                        />

WheelWrapper.js

import React from 'react'
import { HueSaturationWheel } from './HueSaturationWheel'

export class WheelWrapper extends React.PureComponent {

    render() {
        const { wheelStyle, thumbSize, snapToCenter, onColorChange, onColorChangeComplete, colors } = this.props

        return (
            <>
                <HueSaturationWheel
                    style={wheelStyle}
                    snapToCenter={snapToCenter}
                    onColorChangeComplete={onColorChangeComplete}
                    onColorChange={onColorChange}
                    thumbRadius={thumbSize}
                    colors={colors}
                />
            </>
        )
    }

    valueInit = (value, valueGestureState) => {
        this.setState({ value, valueGestureState })
    }
}

HueSaturationWheel.js

import React from 'react';
import { hex2Hsv } from 'colorsys';
import { View, StyleSheet } from 'react-native';
import { State as GestureState } from 'react-native-gesture-handler';
import Animated, { debug } from 'react-native-reanimated';
import { Wheel } from './Wheel';
import { colorHSV } from './colorHSV';
import { defaultStyle } from './defaultStyle';
import ColorImage from './ColorImage';
import { getCenter, getSide, isGestureStartedInsideCircle, toCartesian } from './helpers';

const { set, block, Value, multiply, divide, sqrt, pow, sub, add, greaterThan, cond, event, interpolate, Extrapolate, lessThan, acos, eq, call } = Animated

export class HueSaturationWheel extends React.PureComponent {

    static defaultProps = {
        value: new Value(1),
        valueGestureState: new Value(GestureState.UNDETERMINED),
        thumbRadius: 50
    }

    constructor(props) {
        super(props);

        const { style, snapToCenter, value, thumbRadius, colors } = props;
        const side = getSide(style)

        this.state = side === undefined || thumbRadius === undefined
            ? {}
            : (
                {
                    pans: colors.map((color, index) => {
                        const hsvColor = hex2Hsv(color);
                        return this.generateCurrentState(
                            side,
                            thumbRadius,
                            new Value(1),
                            0,
                            snapToCenter,
                            hsvColor.h,
                            hsvColor.s,
                            index
                        )
                    })
                }
            )

    }

    generateCurrentState = (side, thumbRadius, value, codeKey = 0, snapToCenter = 0, initialHue = 0, initialSaturation = 0, index) => {
        console.log('idx', index)
        const halfThumbSize = thumbRadius / 2
        const center = getCenter(side, thumbRadius)
        const radius = center
        const spring = new Value(0);
        const startX = new Value(0)
        const startY = new Value(0)
        const cartesian = toCartesian(-initialHue, initialSaturation * radius)
        console.log('rad', radius, center, cartesian)
        console.log('hue', initialHue)
        const posX = new Value(center + cartesian.x)
        const posY = new Value(center + cartesian.y)
        const gestureState = new Value(GestureState.UNDETERMINED)
        const distance = sqrt(add(pow(sub(posX, center), 2), pow(sub(posY, center), 2)))
        const shouldSnapToCenter = lessThan(distance, snapToCenter)
        const dist = cond(shouldSnapToCenter, 0, distance)
        const isOutsideWheel = greaterThan(dist, radius)
        const isInCenter = eq(dist, 0)
        const sinT = cond(isInCenter, 0, divide(sub(posY, center), dist))
        const cosT = cond(isInCenter, 1, divide(sub(posX, center), dist))

        const translateX = cond(
            shouldSnapToCenter,
            center,
            cond(isOutsideWheel, add(center, multiply(radius, cosT)), posX)
        )

        const translateY = cond(
            shouldSnapToCenter,
            center,
            cond(isOutsideWheel, add(center, multiply(radius, sinT)), posY)
        )

        const angle = divide(multiply(acos(cosT), 180), Math.PI)
        const hue = cond(
            greaterThan(sub(translateY, center), 0),
            sub(360, angle),
            angle
        )

        const saturation = interpolate(dist, {
            inputRange: [0, radius],
            outputRange: [0, 1],
            extrapolate: Extrapolate.CLAMP
        })

        return {
            codeKey: codeKey + index + 1,
            spring,
            gestureState,
            side,
            translateX,
            translateY,
            posX,
            posY,
            startX,
            startY,
            hue,
            saturation,
            thumbColor: colorHSV(hue, saturation, value),
            panGestureEvent: event([{
                nativeEvent: ({ x, y, state }) => {
                    return block([
                        debug('isOutside: ', isOutsideWheel),
                        debug('dist: ', posX),
                        set(gestureState, state),
                        cond(
                            eq(gestureState, GestureState.BEGAN),
                            [
                                set(startX, x),
                                set(startY, y),
                                set(spring, new Value(1))
                            ]
                        ),
                        cond(
                            eq(gestureState, GestureState.END),
                            set(spring, new Value(0))
                        ),
                        cond(
                            isGestureStartedInsideCircle(
                                gestureState,
                                startX,
                                startY,
                                thumbRadius,
                                side
                            ),
                            [
                                set(posX, sub(x, halfThumbSize)),
                                set(posY, sub(y, halfThumbSize))
                            ],
                            [
                                call([], () => {
                                    console.log('Outside');
                                }),

                                debug('X: ', translateX),
                                debug('Y: ', translateY),
                                debug('State: ', gestureState),
                            ]
                        )
                    ])
                }
            }])
        }
    }

    componentDidUpdate(prevProps, prevState) {
        const { style, snapToCenter, value, thumbRadius, colors } = this.props
        const { width, height } = StyleSheet.flatten(style)
        const { width: prevWidth, height: prevHeight } = StyleSheet.flatten(prevProps.style)

        if (prevHeight !== height || prevWidth !== width) {
            this.setState({ side: getSide(style) })

        } else {
            const { side = getSide(style) } = this.state

            if ((
                side !== undefined && thumbRadius !== undefined
            ) && (
                    side !== prevState.side ||
                    value !== prevProps.value ||
                    snapToCenter !== prevProps.snapToCenter ||
                    thumbRadius !== prevProps.thumbRadius
                )) {
                const pans = colors.map((color, index) => {
                    const hsvColor = hex2Hsv(color);
                    console.log(hsvColor);
                    return this.generateCurrentState(
                        side,
                        thumbRadius,
                        new Value(1),
                        prevState.codeKey,
                        snapToCenter,
                        hsvColor.h,
                        hsvColor.s / 100,
                        index
                    )
                });
                console.log('update')
                this.setState({ pans, side: pans[0].side })
                // this.setState(this.generateCurrentState(
                //     side,
                //     thumbRadius,
                //     value,
                //     prevState.codeKey,
                //     snapToCenter,
                //     initialHue,
                //     initialSaturation
                // ))
            }
        }
        console.log(this.state);

    }

    render() {
        const { style, valueGestureState, thumbRadius, value, colors } = this.props
        const { side, pans, codeKey, thumbColor, translateX, translateY, panGestureEvent, gestureState, startX, startY, hue, saturation } = this.state

        const containerStyle = side === undefined ? {} : { width: side, height: side }
        const imageSide = side - thumbRadius
        const imageStyle = { width: imageSide, height: imageSide, borderRadius: imageSide / 2 }

        return (
            <View
                style={[defaultStyle.container, style, containerStyle]}
                key={`wheel_${codeKey}`}
                onLayout={this.layout}
            >
                {/* {(
                    side !== undefined &&
                    thumbColor !== undefined &&
                    translateX !== undefined &&
                    translateY !== undefined &&
                    panGestureEvent !== undefined &&
                    gestureState !== undefined &&
                    codeKey !== undefined &&
                    startX !== undefined &&
                    startY !== undefined &&
                    valueGestureState !== undefined &&
                    thumbRadius !== undefined &&
                    hue !== undefined &&
                    saturation !== undefined &&
                    value !== undefined
                ) ? ( */}
                <>
                    {side && <ColorImage imageStyle={imageStyle} />}
                    <Wheel
                        pans={pans}
                        // hue={pan.hue}
                        // saturation={pan.saturation}
                        // value={pan.value}
                        side={side}
                        // thumbColor={pan.thumbColor}
                        // startX={pan.startX}
                        // startY={pan.startY}
                        // translateX={pan.translateX}
                        // translateY={pan.translateY}
                        thumbSize={thumbRadius}
                        // panGestureEvent={pan.panGestureEvent}
                        // gestureState={pan.gestureState}
                        valueGestureState={valueGestureState}
                        onColorChange={this.colorChange}
                        onColorChangeComplete={this.colorChangeComplete}
                    // codeKey={pan.codeKey}
                    />
                </>
                {/* )
                    : false
                } */}
            </View>
        )
    }

    colorChangeComplete = ([h, s, v]) => {
        const { onColorChangeComplete = noop } = this.props

        onColorChangeComplete({ h, s, v })
    }

    colorChange = ([h, s, v]) => {
        const { onColorChange = noop } = this.props

        onColorChange({ h, s, v })
    }

    layout = ({ nativeEvent: { layout: { width, height } } }) => {
        this.setState({ side: Math.min(width, height) })
    }
}

const noop = () => { /* */ }

Wheel.js

import React from 'react'
import Animated, { Extrapolate, interpolate } from 'react-native-reanimated'
import { PanGestureHandler, State as GestureState } from 'react-native-gesture-handler'
import { View, StyleSheet } from 'react-native'
import { isGestureStartedInsideCircle } from './helpers'

const { call, cond, eq, and, or, set } = Animated

export const Wheel = React.memo((props) => {
    const {
        side,
        thumbSize,
        // translateX,
        // translateY,
        // thumbColor,
        // panGestureEvent,
        onColorChange,
        onColorChangeComplete,
        pans,
        // codeKey,
        // gestureState,
        // startX,
        // startY,
        valueGestureState,
        // hue,
        // saturation,
        // value
    } = props

    const thumbOffset = -thumbSize / 2
    const imageSide = side - thumbSize
    const containerStyle = { width: side, height: side }
    const imageStyle = { width: imageSide, height: imageSide, borderRadius: imageSide / 2 }
    const thumbStyle = { width: thumbSize, height: thumbSize, borderRadius: thumbSize / 2 }

    return (
        pans && <Animated.View style={[styles.container, containerStyle]}>
            <Animated.View style={[styles.container, containerStyle]}>
                <View style={[styles.wheel, imageStyle]}>
                    {pans.map((pan, index) =>
                        <PanGestureHandler
                            key={index}
                            maxPointers={1}
                            onGestureEvent={pan.panGestureEvent}
                            onHandlerStateChange={pan.panGestureEvent}
                        >
                            <Animated.View
                                style={[
                                    styles.thumb,
                                    thumbStyle,
                                    {
                                        backgroundColor: pan.thumbColor,
                                        transform: [
                                            { translateX: pan.translateX },
                                            { translateY: pan.translateY },
                                            { translateX: thumbOffset },
                                            { translateY: thumbOffset },
                                            {
                                                scale: interpolate(pan.spring, {
                                                    inputRange: [0, 1],
                                                    outputRange: [1, 1.2],
                                                    extrapolate: Extrapolate.EXTEND
                                                })
                                            }
                                        ],

                                    }
                                ]}
                            />
                            {/* {onColorChangeComplete !== undefined
                                ? (
                                    <Animated.Code
                                        key={`change_complete_${pan.codeKey}`}
                                        exec={
                                            cond(
                                                and(
                                                    or(
                                                        eq(pan.gestureState, GestureState.END),
                                                        eq(pan.gestureState, GestureState.UNDETERMINED)
                                                    ),
                                                    or(
                                                        eq(valueGestureState, GestureState.END),
                                                        eq(valueGestureState, GestureState.UNDETERMINED)
                                                    ),
                                                    or(
                                                        isGestureStartedInsideCircle(
                                                            pan.gestureState,
                                                            pan.startX,
                                                            pan.startY,
                                                            thumbSize,
                                                            side
                                                        ),
                                                        eq(valueGestureState, GestureState.END)
                                                    )
                                                ),
                                                [
                                                    set(
                                                        valueGestureState,
                                                        GestureState.UNDETERMINED
                                                    ),
                                                    call([pan.hue, pan.saturation, pan.value], onColorChangeComplete)
                                                ]
                                            )
                                        }
                                    />
                                )
                                : false}
                            {onColorChange !== undefined
                                ? (
                                    <Animated.Code
                                        key={`change_${pan.codeKey}`}
                                        exec={
                                            cond(
                                                or(
                                                    isGestureStartedInsideCircle(
                                                        pan.gestureState,
                                                        pan.startX,
                                                        pan.startY,
                                                        thumbSize,
                                                        side
                                                    ),
                                                    eq(valueGestureState, GestureState.BEGAN),
                                                    eq(valueGestureState, GestureState.ACTIVE)
                                                ),
                                                call([pan.hue, pan.saturation, pan.value], onColorChange)
                                            )
                                        }
                                    />
                                )
                                : false} */}
                        </PanGestureHandler>
                    )}
                </View>
            </Animated.View>
        </Animated.View>
    )
})

const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
        borderWidth: 1,
    },
    wheel: {
        width: '100%',
        height: '100%',
        backgroundColor: 'transparent'
    },
    thumb: {
        position: 'absolute',
        borderColor: 'white',
        borderWidth: 2
    }
})

And my helpers are as follows:

The image generated to display the wheel:

import React from 'react';

import { SrcInComposition, SweepGradient, ImagePlaceholder, RadialGradient } from 'react-native-image-filter-kit'

const colors = ['#FF0000', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF', '#FF00FF', '#FF0000']
const stops = [0, 0.165, 0.33, 0.495, 0.66, 0.825, 1]
const radialColors = ['#00000000', '#000000FF']

const ColorImage = ({ imageStyle }) => {
    return (
        <SrcInComposition
            style={{ position: 'absolute' }}
            srcImage={
                <SweepGradient
                    colors={colors}
                    stops={stops}
                    image={<ImagePlaceholder style={imageStyle} />}
                />
            }
            dstImage={
                <RadialGradient
                    colors={radialColors}
                    image={<ImagePlaceholder style={imageStyle} />}
                />
            }
        />
    );
}

export default ColorImage;

The method for HSV conversion:

import Animated from 'react-native-reanimated'

const { multiply, divide, abs, sub, modulo, color, round, add, cond, lessThan, proc } = Animated

export const colorHSV = proc((h, s, v) => {
    // Converts color from HSV format into RGB
    // Formula explained here: https://www.rapidtables.com/convert/color/hsv-to-rgb.html
    const c = multiply(v, s)
    const hh = divide(h, 60)
    const x = multiply(c, sub(1, abs(sub(modulo(hh, 2), 1))))

    const m = sub(v, c)

    const colorRGB = (
        r,
        g,
        b
    ) => (
        color(
            round(multiply(255, add(r, m))),
            round(multiply(255, add(g, m))),
            round(multiply(255, add(b, m)))
        )
    )

    return cond(
        lessThan(h, 60),
        colorRGB(c, x, 0),
        cond(
            lessThan(h, 120),
            colorRGB(x, c, 0),
            cond(
                lessThan(h, 180),
                colorRGB(0, c, x),
                cond(
                    lessThan(h, 240),
                    colorRGB(0, x, c),
                    cond(
                        lessThan(h, 300),
                        colorRGB(x, 0, c),
                        colorRGB(c, 0, x)
                    )
                )
            )
        )
    )
})

Methods for layout and gesture locations:

import Animated from 'react-native-reanimated';
import { State as GestureState } from 'react-native-gesture-handler'
import { StyleSheet } from 'react-native';

const { and, neq, sqrt, pow, sub, add, lessOrEq } = Animated;


export const isGestureStartedInsideCircle = (gestureState, startX, startY, thumbSize, side) => {
    const halfThumbSize = thumbSize / 2
    const center = getCenter(side, thumbSize)
    const radius = center

    return (
        and(
            neq(gestureState, GestureState.UNDETERMINED),
            neq(gestureState, GestureState.FAILED),
            lessOrEq(
                sqrt(
                    add(
                        pow(sub(startX, center + halfThumbSize), 2),
                        pow(sub(startY, center + halfThumbSize), 2)
                    )
                ),
                radius + thumbSize / 1.5
            )
        )
    )
}

export const getSide = (style) => {
    if (style !== undefined) {
        const { width, height } = StyleSheet.flatten(style)

        if (typeof width === 'number' && typeof height === 'number') {
            return Math.min(width, height)
        }

        if (typeof width === 'number') {
            return width
        }

        if (typeof height === 'number') {
            return height
        }
    }

    return undefined
}

export const toCartesian = (degree, radius) => {
    const rad = degree / 180 * Math.PI

    return {
        x: Math.cos(rad) * radius,
        y: Math.sin(rad) * radius
    }
}

export const getCenter = (side, thumbSize) => {
    return (side - thumbSize) / 2
}

I am not sure if this can be implemented using only one PanGestureHandler. The other solution I have thought about was converting the x, y values emitted from the panGestureEvent with respect to the outermost container, but also no luck there.

The problem occurs at the following part inside HueSaturationWheel component:

                       cond(
                            isGestureStartedInsideCircle(
                                gestureState,
                                startX,
                                startY,
                                thumbRadius,
                                side
                            ),
                            [
                                set(posX, sub(x, halfThumbSize)),
                                set(posY, sub(y, halfThumbSize))
                            ],
                            [
                                call([], () => {
                                    console.log('Outside');
                                }),

                                debug('X: ', translateX),
                                debug('Y: ', translateY),
                                debug('State: ', gestureState),
                            ]
                        )

Since isGestureStartedInsideCircle method return false everytime, the condition always calls the else part.

I am very new to the React Native Reanimated Library, so any help will be appreciated.

Thanks