Destroying an Item that was set as the sourceItem

Question

What I'm doing, in short:

• I have a ShaderEffectSource Item named snapshotItem with live: false
• Dynamically instantiating an Item called dynamicItem
• Setting snapshotItem.sourceItem = dynamicItem
• Calling snapshotItem.scheduleUpdate()
• At this point, I successfully see two copies of dynamicItem on screen
• On any key, I:
  • set snapshotItem.sourceItem to an empty, dummy Item, to make the next step less likely to cause problems
  • destroy dynamicItem

The problem is that when a key is pressed, both copies disappear from screen, when I want the snapshotItem one to remain.

Note: If you're interested in the motivation behind wanting to achieve this, see my previous question.

My code:

import QtQuick 2.6
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480

    property int childWidth: 100
    property int childHeight: 100

    id: root
    property var dynamicItem

    Item {
        id: dummy
    }

    Component {
        id: dynamicItemComponent
        Rectangle {
            color: "red"
        }
    }

    Component.onCompleted: {
        dynamicItem = dynamicItemComponent.createObject(row);
        dynamicItem.width = childWidth;
        dynamicItem.height = childHeight;
        snapshotItem.sourceItem = dynamicItem;
        snapshotItem.scheduleUpdate();
    }

    Item {
        focus: true
        Keys.onPressed: {
            snapshotItem.sourceItem = dummy;
            dynamicItem.destroy();
        }
    }

    Row {
        id: row
        spacing: 10
        ShaderEffectSource {
            id: snapshotItem
            live: false
            width: childWidth
            height: childHeight
        }
    }
}

Answer 1

You don't need to use a dummyItem. You can set the sourceItem to the ShaderEffectSource itself.

Maybe you should set recursive to true, but it also works without it.

import QtQuick 2.6
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480

    property int childWidth: 100
    property int childHeight: 100

    id: root
    property var dynamicItem

    Component {
        id: dynamicItemComponent
        Rectangle {
            color: "red"
        }
    }

    Component.onCompleted: {
        dynamicItem = dynamicItemComponent.createObject(row);
        dynamicItem.width = childWidth;
        dynamicItem.height = childHeight;
        snapshotItem.sourceItem = dynamicItem;
        snapshotItem.scheduleUpdate();
    }

    Item {
        focus: true
        Keys.onPressed: {
            snapshotItem.sourceItem = snapshotItem;
            dynamicItem.destroy();
        }
    }

    Row {
        id: row
        spacing: 10
        ShaderEffectSource {
            id: snapshotItem
            live: false
            // recursive: sourceItem === this
            width: childWidth
            height: childHeight
        }
    }
}