(at the point of writing, the issue is only present in the "Dev" Branch)
In the "ShadeLayer.tsx" file, we currently use a workaround to avoid a bug in the Konva Transfomer.
We should investigate better ways to avoid this problem.
|
This is an ugly workaround for a pretty annoying bug involving the Konva transformer. |
|
|
|
The problem: |
|
Updating a shade value using ShadeLayerLeftToolbar causes a rerender of the corresponding shading component. |
|
Since this causes all affected shading components to be replaced by new React nodes, the Konva transformer looses |
|
all references to previously selected shadings. |
|
|
|
In simpler therms this means that the selection rectangle either disappears or becomes completely screwed up |
|
every time the user changes a shadings shade value. |
|
|
|
The solution: |
|
Manually reset the transformer after each rerender of the shade layer. |
|
*/ |
|
useEffect( |
|
() => { |
|
if (!props.listening) return; |
|
|
|
const selectedShadings = useMapStore.getState().untrackedState.layers.shade.selectedShadings; |
|
|
|
const isSelected = (id: string) => { |
|
return Boolean(selectedShadings?.find((shading) => shading.id === id)); |
|
}; |
|
|
|
const filteredShadingRefs = shadingRefs.current |
|
?.filter((ref) => isSelected(ref.id)) |
|
.map((ref) => ref.ref); |
|
|
|
useTransformerStore.getState().actions.removeAllNodesFromSelection(); |
|
useTransformerStore.getState().actions.replaceNodesInSelection(filteredShadingRefs ?? []); |
|
}, |
|
// For some reason using only shadingRefs is not enough to detect changes made to shadingRefs.current |
|
[shadingRefs.current], // eslint-disable-line react-hooks/exhaustive-deps |
|
); |