Я использую response-konva, в нем у меня есть массив со всеми моими объектами konva, и у меня есть функция, которая переносит выбранный объект в начало или конец этого массива для создания слоев в моих канвах.
Когда я запускаю эту функцию, порядок объектов внутри массива работает нормально, но изменения преобразования для всех объектов теряются, что я могу сделать, чтобы не потерять эти параметры во время этого изменения в массиве?
changeOrderArray = (front) => {
let { arrayObjectsLayer, selectedObject } = this.state;
front ?
arrayObjectsLayer.push(
arrayObjectsLayer.splice(
arrayObjectsLayer.findIndex(
elt => elt.id === selectedObject.id),
1)[0]
)
: arrayObjectsLayer.unshift(
arrayObjectsLayer.splice(
arrayObjectsLayer.findIndex(
elt => elt.id === selectedObject.id),
1)[0]
)
this.setState({
arrayObjectsLayer
});
}
петля
arrayObjectsLayer.map((item, index) => {
return (
item.type === 'square' ?
<RectanguleComponent
shapeProps={item}
isSelected={
selectedObject && item.id === selectedObject.id
}
onSelect={() => {
this.selectShape(item);
}}
onChange={newAttrs => {
const item = arrayObjectsLayer.slice();
item[index] = newAttrs;
this.setArrayObject(item);
}}
/>
:
item.type === 'triangule' ?
<TrianguleComponent
shapeProps={item}
isSelected={
selectedObject && item.id === selectedObject.id
}
onSelect={() => {
this.selectShape(item);
}}
onChange={newAttrs => {
const item = arrayObjectsLayer.slice();
item[index] = newAttrs;
this.setArrayObject(item);
}}
/>
:
etc ...
базовый компонент с трансформатором
export const RectanguleComponent = ({ shapeProps, isSelected, onSelect, onChange }) => {
const shapeRef = React.useRef();
const trRef = React.useRef();
React.useEffect(() => {
if (isSelected) {
trRef.current.setNode(shapeRef.current);
trRef.current.getLayer().batchDraw();
}
}, [isSelected]);
return (
<React.Fragment>
<Rect
onClick={onSelect}
ref={shapeRef}
{...shapeProps}
draggable
onDragEnd={e => {
onChange({
...shapeProps,
x: e.target.x(),
y: e.target.y()
});
}}
onTransformEnd={e => {
// transformer is changing scale
const node = shapeRef.current;
const scaleX = node.scaleX();
const scaleY = node.scaleY();
// we will reset it back
node.scaleX(1);
node.scaleY(1);
onChange({
...shapeProps,
x: node.x(),
y: node.y(),
width: node.width() * scaleX,
height: node.height() * scaleY
});
}}
/>
{isSelected && <Transformer ref={trRef} />}
</React.Fragment>
);
};