State management issue

[hussainabuhajjaj]

I am facing an issue with state management, specifically when adding an element. Its position is not accurate, indicating that something is wrong. In general, we need to mention that we aim to improve state management.
` const GestureHandler = ({
element,
onGestureEnd,
onTransformUpdate,
onShowMore,
onEdit,
onDelete,
}) => {
const [isSelected, setIsSelected] = useState(false);
const centerX = useSharedValue(element.position.x);
const centerY = useSharedValue(element.position.y);
const scale = useSharedValue(1);
const rotation = useSharedValue(0);
const savedScale = useSharedValue(1);
const lastRotation = useSharedValue(0);

// Get element dimensions based on type
const dimensions = getElementDimensions(element);

useEffect(() => {
centerX.value = element.position.x;
centerY.value = element.position.y;
}, [element.position.x, element.position.y]);

const tapGesture = Gesture.Tap().onStart(() => {
runOnJS(setIsSelected)(!isSelected);
});

const panGesture = Gesture.Pan()
.averageTouches(true)
.onChange((event) => {
centerX.value += event.changeX;
centerY.value += event.changeY;
runOnJS(onTransformUpdate)({
translateX: centerX.value,
translateY: centerY.value,
scale: scale.value,
rotate: rotation.value,
});
})
.onEnd(() => {
runOnJS(onGestureEnd)({
x: centerX.value,
y: centerY.value,
});
});

const pinchGesture = Gesture.Pinch()
.onStart(() => {
savedScale.value = scale.value;
})
.onChange((event) => {
scale.value = savedScale.value * event.scale;
runOnJS(onTransformUpdate)({
translateX: centerX.value,
translateY: centerY.value,
scale: scale.value,
rotate: rotation.value,
});
});

const rotationGesture = Gesture.Rotation()
.onStart(() => {
lastRotation.value = rotation.value;
})
.onChange((event) => {
rotation.value = lastRotation.value + event.rotation;
runOnJS(onTransformUpdate)({
translateX: centerX.value,
translateY: centerY.value,
scale: scale.value,
rotate: rotation.value,
});
});

const gesture = Gesture.Simultaneous(
tapGesture,
panGesture,
pinchGesture,
rotationGesture,
);

const animatedStyle = useAnimatedStyle(() => ({
transform: [
{ translateX: centerX.value },
{ translateY: centerY.value },
{ scale: scale.value },
{ rotate: ${rotation.value}rad },
],
width: dimensions.width,
height: dimensions.height,
}));

return (

<Animated.View
style={[
styles.hitArea,
animatedStyle,
isSelected && styles.selectedHitArea,
]}
>
{isSelected && (
<ControlButtons
scale={scale.value}
onShowMore={() => {
onShowMore?.(element.id);
setIsSelected(false);
}}
onEdit={() => {
onEdit?.(element.id);
setIsSelected(false);
}}
onDelete={() => {
onDelete?.(element.id);
setIsSelected(false);
}}
/>
)}
</Animated.View>

);
};

`
https://github.com/user-attachments/assets/ea6f84e5-24cf-4db8-8e61-a6cdcba4f591

https://github.com/mahm0udsaad/Hala-qr.git

Originally posted by @hussainabuhajjaj in #2900