<title>A-Frame Undo/Redo/Delete Example</title>



<style>

    .ui-button {

        position: absolute;

        padding: 10px 20px;

        background: #333;

        color: #fff;

        border: none;

        cursor: pointer;

        font-size: 18px;

    }

    .ui-button:hover {

        background: #555;

    }

    #delete-button {

        top: 20px;

        left: 20px;

    }

    #undo-button {

        top: 20px;

        left: 100px;

    }

    #redo-button {

        top: 20px;

        left: 180px;

    }

</style>



<a-scene progressive-controls>

    <a-asset-item id="anotherchair" src="https://cdn.glitch.global/3c9342e0-0b69-45d0-b7e8-6f2e8cb53f2c/Chair.glb?v=1719489270451"></a-asset-item>

    <a-asset-item id="chair" src="https://cdn.glitch.global/3c9342e0-0b69-45d0-b7e8-6f2e8cb53f2c/Chair.glb?v=1719489270451"></a-asset-item>

    <a-asset-item id="sofa" src="https://cdn.glitch.global/3c9342e0-0b69-45d0-b7e8-6f2e8cb53f2c/Sofa.glb?v=1719489265917"></a-asset-item>

    <a-entity gltf-model="#anotherchair" class="clickable" position="-4 1 -3" grabbable></a-entity>

    <a-entity gltf-model="#chair" class="clickable" position="-2 1 -3" grabbable></a-entity>

    <a-entity gltf-model="#sofa" class="clickable" position="-6 1 -3" grabbable></a-entity>

    <a-camera position="0 1.6 0">

        <a-cursor></a-cursor>

    </a-camera>

</a-scene>

<button id="delete-button" class="ui-button">Delete</button>

<button id="undo-button" class="ui-button">Undo</button>

<button id="redo-button" class="ui-button">Redo</button>

<script>




    let actionHistory = [];
    let redoStack = [];
    let selectedEntity = null;
    const scene = document.querySelector('a-scene');

    // Serialize entity data including all necessary attributes

   

    function serializeEntity(entity) {
        const attributes = {};
        ['position', 'rotation'].forEach(attr => {
            const value = entity.getAttribute(attr);
            if (value) {
                attributes[attr] = value;
            }
        });

        return {
            id: entity.getAttribute('id'),
            type: entity.tagName.toLowerCase(),
            attributes: attributes
        };

    }

    // Create an entity from serialized data

    function createEntityFromData(data) {

        const entity = document.createElement(data.type);

        entity.setAttribute('id', data.id);

        Object.keys(data.attributes).forEach(attr => {

            entity.setAttribute(attr, data.attributes[attr]);

        });

        return entity;

    }

    // Handle deletion and store the state for undo

    function deleteEntity(entity) {

        const data = serializeEntity(entity);
        //data = position, rotation of entity add

        actionHistory.push({ action: 'delete', data: data });

        redoStack = []; // Clear redo stack on new action

        entity.parentNode.removeChild(entity);

        selectedEntity = null; // Clear selected entity after deletion

    }

    // Handle undo operation

    function undo() {

        if (actionHistory.length === 0) return;

        const lastAction = actionHistory.pop();

        redoStack.push(lastAction);

        if (lastAction.action === 'delete') {

            const restoredEntity = createEntityFromData(lastAction.data);

            scene.appendChild(restoredEntity);
            //restoreEntity . position, rotation

            restoredEntity.addEventListener('click', () => selectEntity(restoredEntity));

        }

    }

    // Handle redo operation

    function redo() {

        if (redoStack.length === 0) return;

        const lastRedo = redoStack.pop();

        actionHistory.push(lastRedo);

        if (lastRedo.action === 'delete') {

            const entity = scene.querySelector( lastRedo.data.id);

            if (entity) {

                entity.parentNode.removeChild(entity);

            }

        }

    }

    // Select an entity

    function selectEntity(entity) {

        selectedEntity = entity;

    }

    // Attach click event to all clickable entities

    document.querySelectorAll('.clickable').forEach((entity) => {

        entity.addEventListener('click', () => selectEntity(entity));

    });

    // Bind UI buttons for delete, undo, and redo

    document.getElementById('delete-button').addEventListener('click', () => {

        if (selectedEntity) deleteEntity(selectedEntity);

    });

    document.getElementById('undo-button').addEventListener('click', undo);

    document.getElementById('redo-button').addEventListener('click', redo);


</script>

Here is the code what i have tried and deleting is working fine but when i am clicking on undo it is placing at some other place.

I want to place the object at initial plosition

Initial Image before delete and undo

after deleting and undoing it is placing in different position

I need to fix this issue

I am working on webxr for learning i need to add undo and redo functionality so anyone please help me to fix it.

it is placing in differenct position from initial position it placing at position= {0, 0 ,0}, and rotation= {0, 0 ,0}

BEFORE RUNNING ABOVE FILE
PLEASE ADD THESE SCRIPTS IN HEAD TAG