Moving an object on array makes konva objects lose their transform changes like rotation and position

I’m using react-konva, in it I have an array with all my konva objects, and I have a function that brings the selected object to the front or back of this array to create layers on my kanvas.

When I fire this function, the order of objects inside the array works fine but the transform changes on all objects are lost, what can I do to don’t lose this params during this change on the array?

a example of the object

    newSquareObj: {
      x: 20,
      y: 20,
      width: 100,
      height: 50,
      fill: "green",
      id: 0,
      type: 'square',
    },

  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
    });
  }

the loop

  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 ...

basic component with transformer

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>
  );
};

[lavrton]

Usually, it is better not to use index as a key, use id instead. Also make sure you save rotation into shapes properties:

onChange({
            ...shapeProps,
            rotation: node.rotation(),
            x: node.x(),
            y: node.y(),
            width: node.width() * scaleX,
            height: node.height() * scaleY
          });

[ribas14]

@lavrton i’m using keys based on the index, I just removed them to be easier to see the code

                     <RectanguleComponent
                        key={index}
                        shapeProps={item}
                        isSelected={
                          selectedObject && item.id === selectedObject.id
                        }
                        onSelect={() => {
                          this.selectShape(item);
                        }}
                        onChange={newAttrs => {
                          const item = arrayObjectsLayer.slice();
                          item[index] = newAttrs;
                          this.setArrayObject(item);
                        }}
                      />