react-three-game 0.0.99 → 0.0.101

package/dist/tools/prefabeditor/components/SpotLightComponent.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { assetRef, assetRefs } from "./ComponentRegistry";
 import { useHelper } from "@react-three/drei";
-import { useRef, useEffect } from "react";
+import { useRef } from "react";
 import { BooleanField, ColorField, Label, NumberField, Vector3Input } from "./Input";
 import { SpotLightHelper } from "three";
 import { useAssetRuntime, useNode } from "../assetRuntime";
-import { useFrame } from "@react-three/fiber";
 import { TexturePicker } from "../../assetviewer/page";
 import { LightSection, ShadowBiasField, mergeWithDefaults } from "./lightUtils";
 const spotLightDefaults = {
@@ -30,51 +29,37 @@ function SpotLightComponentEditor({ component, onUpdate, basePath = "" }) {
     return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [_jsxs(LightSection, { title: "Light", children: [_jsx(ColorField, { name: "color", label: "Color", values: values, onChange: onUpdate }), _jsx(NumberField, { name: "intensity", label: "Intensity", values: values, onChange: onUpdate, min: 0, step: 0.1, fallback: 1 }), _jsx(NumberField, { name: "angle", label: "Angle", values: values, onChange: onUpdate, min: 0, max: Math.PI / 2, step: 0.05, fallback: Math.PI / 3 }), _jsx(NumberField, { name: "penumbra", label: "Penumbra", values: values, onChange: onUpdate, min: 0, max: 1, step: 0.05, fallback: 0 }), _jsx(NumberField, { name: "distance", label: "Distance", values: values, onChange: onUpdate, min: 0, step: 1, fallback: 0 }), _jsx(NumberField, { name: "decay", label: "Decay", values: values, onChange: onUpdate, min: 0, step: 0.1, fallback: 2 }), _jsx(Vector3Input, { label: "Target Offset", value: values.targetOffset, onChange: targetOffset => onUpdate({ targetOffset }), snap: 0.5 }), _jsxs("div", { children: [_jsx(Label, { children: "Texture Map" }), _jsx(TexturePicker, { value: values.map, onChange: (map) => onUpdate({ map }), basePath: basePath })] })] }), _jsxs(LightSection, { title: "Shadow", children: [_jsx(BooleanField, { name: "castShadow", label: "Cast Shadow", values: values, onChange: onUpdate, fallback: false }), values.castShadow ? (_jsxs(_Fragment, { children: [_jsx(BooleanField, { name: "shadowAutoUpdate", label: "Auto Update", values: values, onChange: onUpdate, fallback: true }), _jsx(NumberField, { name: "shadowMapSize", label: "Map Size", values: values, onChange: onUpdate, min: 128, step: 128, fallback: 512 }), _jsx(ShadowBiasField, { name: "shadowBias", label: "Bias", values: values, onChange: onUpdate, fallback: 0 }), _jsx(ShadowBiasField, { name: "shadowNormalBias", label: "Normal Bias", values: values, onChange: onUpdate, fallback: 0 }), _jsx(NumberField, { name: "shadowCameraNear", label: "Near", values: values, onChange: onUpdate, min: 0.001, step: 0.1, fallback: 0.5 }), _jsx(NumberField, { name: "shadowCameraFar", label: "Far", values: values, onChange: onUpdate, min: 0.1, step: 1, fallback: 500 })] })) : null] })] }));
 }
 function SpotLightView({ properties, children }) {
-    var _a;
+    var _a, _b;
     const { getTexture } = useAssetRuntime();
     const { editMode, isSelected } = useNode();
     const merged = mergeWithDefaults(spotLightDefaults, properties);
-    const color = merged.color;
-    const intensity = merged.intensity;
-    const angle = merged.angle;
-    const penumbra = merged.penumbra;
-    const distance = merged.distance;
-    const decay = merged.decay;
-    const castShadow = merged.castShadow;
-    const shadowMapSize = merged.shadowMapSize;
-    const shadowBias = merged.shadowBias;
-    const shadowNormalBias = merged.shadowNormalBias;
-    const shadowAutoUpdate = merged.shadowAutoUpdate;
-    const shadowCameraNear = merged.shadowCameraNear;
-    const shadowCameraFar = merged.shadowCameraFar;
-    const targetOffset = merged.targetOffset;
-    const textureMap = merged.map ? (_a = getTexture(merged.map)) !== null && _a !== void 0 ? _a : undefined : undefined;
+    const textureMap = merged.map
+        ? (_a = getTexture(merged.map)) !== null && _a !== void 0 ? _a : undefined
+        : undefined;
+    const lightProps = {
+        color: merged.color,
+        intensity: merged.intensity,
+        angle: merged.angle,
+        penumbra: merged.penumbra,
+        distance: merged.distance,
+        decay: merged.decay,
+        castShadow: merged.castShadow,
+        map: textureMap,
+        // mapped props
+        "shadow-mapSize-width": merged.shadowMapSize,
+        "shadow-mapSize-height": merged.shadowMapSize,
+        "shadow-bias": merged.shadowBias,
+        "shadow-normalBias": merged.shadowNormalBias,
+        "shadow-autoUpdate": merged.shadowAutoUpdate,
+        "shadow-camera-near": merged.shadowCameraNear,
+        "shadow-camera-far": merged.shadowCameraFar,
+    };
     const spotLightRef = useRef(null);
     const targetRef = useRef(null);
-    const helperTarget = editMode && isSelected && spotLightRef.current
-        ? { current: spotLightRef.current }
-        : null;
-    useHelper(helperTarget, SpotLightHelper, color);
-    useEffect(() => {
-        if (spotLightRef.current && targetRef.current) {
-            spotLightRef.current.target = targetRef.current;
-        }
-    });
-    useEffect(() => {
-        var _a;
-        const shadow = (_a = spotLightRef.current) === null || _a === void 0 ? void 0 : _a.shadow;
-        if (!shadow)
-            return;
-        shadow.needsUpdate = true;
-        shadow.camera.updateProjectionMatrix();
-    });
-    useFrame(() => {
-        var _a;
-        if ((_a = spotLightRef.current) === null || _a === void 0 ? void 0 : _a.target) {
-            spotLightRef.current.target.updateMatrixWorld();
-        }
-    });
-    return (_jsxs(_Fragment, { children: [_jsx("spotLight", { ref: spotLightRef, color: color, intensity: intensity, angle: angle, penumbra: penumbra, distance: distance, decay: decay, map: textureMap, castShadow: castShadow, "shadow-mapSize-width": shadowMapSize, "shadow-mapSize-height": shadowMapSize, "shadow-bias": shadowBias, "shadow-normalBias": shadowNormalBias, "shadow-autoUpdate": shadowAutoUpdate, "shadow-camera-near": shadowCameraNear, "shadow-camera-far": shadowCameraFar }), _jsx("object3D", { ref: targetRef, position: targetOffset }), editMode && isSelected && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: targetOffset, children: [_jsx("sphereGeometry", { args: [0.15, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] })] })), children] }));
+    const showHelper = editMode && isSelected;
+    const helperTarget = showHelper && spotLightRef.current ? { current: spotLightRef.current } : null;
+    useHelper(helperTarget, SpotLightHelper);
+    return (_jsxs("group", { children: [_jsxs("spotLight", Object.assign({ ref: spotLightRef }, lightProps, { target: (_b = targetRef.current) !== null && _b !== void 0 ? _b : undefined, children: [showHelper && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: merged.color, wireframe: true })] }), _jsxs("mesh", { position: merged.targetOffset, children: [_jsx("sphereGeometry", { args: [0.15, 8, 6] }), _jsx("meshBasicMaterial", { color: merged.color, wireframe: true, opacity: 0.5, transparent: true })] })] })), children] })), _jsx("object3D", { ref: targetRef, position: merged.targetOffset })] }));
 }
 const SpotLightComponent = {
     name: 'SpotLight',

package/dist/tools/prefabeditor/components/SpriteComponent.js

@@ -17,6 +17,7 @@ function SpriteComponentEditor({ component, onUpdate, }) {
 }
 const SpriteComponent = {
     name: 'Sprite',
+    disableSiblingComposition: true,
     Editor: SpriteComponentEditor,
     defaultProperties: {
         center: [0.5, 0.5],

package/dist/tools/prefabeditor/components/TransformComponent.js

@@ -48,6 +48,7 @@ function TransformComponentEditor({ component, onUpdate }) {
 }
 const TransformComponent = {
     name: 'Transform',
+    disableSiblingComposition: true,
     Editor: TransformComponentEditor,
     defaultProperties: {}
 };

package/dist/tools/prefabeditor/modelPrefab.d.ts

@@ -0,0 +1,16 @@
+import { Object3D } from 'three';
+import type { Texture } from 'three';
+import type { GameObject } from './types';
+export interface DecomposeModelOptions {
+    /** Prefix used for generated prefab node ids. Defaults to "model". */
+    idPrefix?: string;
+    /** Include invisible Three objects in the generated prefab tree. */
+    includeInvisible?: boolean;
+    /** Return a serializable texture ref for embedded or externally loaded textures. */
+    getTexturePath?: (texture: Texture, usage: 'map' | 'normalMap') => string | null | undefined;
+}
+/**
+ * Converts a live Three object hierarchy into prefab JSON nodes made from
+ * Transform, BufferGeometry, and Material components.
+ */
+export declare function decomposeModelToPrefabNodes(object: Object3D, options?: DecomposeModelOptions): GameObject;

package/dist/tools/prefabeditor/modelPrefab.js

@@ -0,0 +1,180 @@
+import { BackSide, DoubleSide, Mesh, } from 'three';
+function createId(prefix) {
+    return `${prefix}-${crypto.randomUUID()}`;
+}
+function toArrayAttribute(attribute, itemSize, vertexIndices) {
+    if (!attribute || attribute.itemSize < itemSize)
+        return undefined;
+    const values = [];
+    for (const vertexIndex of vertexIndices) {
+        for (let axis = 0; axis < itemSize; axis += 1) {
+            values.push(attribute.getComponent(vertexIndex, axis));
+        }
+    }
+    return values;
+}
+function getSequentialVertexIndices(count) {
+    return Array.from({ length: count }, (_, index) => index);
+}
+function serializeGeometry(geometry) {
+    var _a, _b, _c, _d;
+    const position = geometry.getAttribute('position');
+    const normal = geometry.getAttribute('normal');
+    const uv = geometry.getAttribute('uv');
+    const vertexIndices = getSequentialVertexIndices((_a = position === null || position === void 0 ? void 0 : position.count) !== null && _a !== void 0 ? _a : 0);
+    const index = geometry.index;
+    const indices = [];
+    if (index) {
+        for (let offset = 0; offset < index.count; offset += 1) {
+            indices.push(index.getX(offset));
+        }
+    }
+    else {
+        indices.push(...vertexIndices);
+    }
+    const positions = (_b = toArrayAttribute(position, 3, vertexIndices)) !== null && _b !== void 0 ? _b : [];
+    const normals = (_c = toArrayAttribute(normal, 3, vertexIndices)) !== null && _c !== void 0 ? _c : [];
+    const uvs = (_d = toArrayAttribute(uv, 2, vertexIndices)) !== null && _d !== void 0 ? _d : [];
+    const groups = geometry.groups.map(group => {
+        var _a;
+        return ({
+            start: group.start,
+            count: group.count,
+            materialIndex: (_a = group.materialIndex) !== null && _a !== void 0 ? _a : 0,
+        });
+    });
+    return {
+        positions,
+        indices,
+        normals,
+        uvs,
+        groups,
+        computeVertexNormals: normals.length === 0,
+    };
+}
+function getSideName(side) {
+    if (side === BackSide)
+        return 'BackSide';
+    if (side === DoubleSide)
+        return 'DoubleSide';
+    return 'FrontSide';
+}
+function getMaterialColor(material) {
+    var _a, _b;
+    const maybeColor = material;
+    return (_b = (_a = maybeColor.color) === null || _a === void 0 ? void 0 : _a.getStyle) === null || _b === void 0 ? void 0 : _b.call(_a);
+}
+function getTextureImagePath(texture) {
+    var _a;
+    const image = texture === null || texture === void 0 ? void 0 : texture.image;
+    const path = (_a = image === null || image === void 0 ? void 0 : image.currentSrc) !== null && _a !== void 0 ? _a : image === null || image === void 0 ? void 0 : image.src;
+    if (typeof path === 'string' && path.trim() && !path.startsWith('blob:')) {
+        return path;
+    }
+    return getTextureImageDataUrl(image);
+}
+function getTextureImageDataUrl(image) {
+    if (!image
+        || typeof document === 'undefined'
+        || typeof image.width !== 'number'
+        || typeof image.height !== 'number'
+        || image.width <= 0
+        || image.height <= 0) {
+        return undefined;
+    }
+    try {
+        const canvas = document.createElement('canvas');
+        canvas.width = image.width;
+        canvas.height = image.height;
+        const context = canvas.getContext('2d');
+        if (!context)
+            return undefined;
+        context.drawImage(image, 0, 0);
+        return canvas.toDataURL('image/png');
+    }
+    catch (_a) {
+        return undefined;
+    }
+}
+function getTexturePath(texture, usage, options) {
+    var _a, _b;
+    if (!texture)
+        return undefined;
+    return (_b = (_a = getTextureImagePath(texture)) !== null && _a !== void 0 ? _a : options.getTexturePath(texture, usage)) !== null && _b !== void 0 ? _b : undefined;
+}
+function serializeMaterial(material, attach, options) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const source = material;
+    const materialType = 'metalness' in source || 'roughness' in source ? 'standard' : 'basic';
+    const texture = getTexturePath(source.map, 'map', options);
+    const normalMapTexture = getTexturePath(source.normalMap, 'normalMap', options);
+    const normalScale = (_b = (_a = source.normalScale) === null || _a === void 0 ? void 0 : _a.toArray) === null || _b === void 0 ? void 0 : _b.call(_a);
+    return {
+        type: 'Material',
+        properties: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ attach,
+            materialType, color: (_c = getMaterialColor(material)) !== null && _c !== void 0 ? _c : '#ffffff' }, (texture ? { texture } : null)), (normalMapTexture ? { normalMapTexture } : null)), (normalScale ? { normalScale } : null)), { opacity: material.opacity, transparent: material.transparent, side: getSideName(material.side), wireframe: (_d = source.wireframe) !== null && _d !== void 0 ? _d : false, toneMapped: (_e = source.toneMapped) !== null && _e !== void 0 ? _e : true }), (materialType === 'standard' ? {
+            metalness: (_f = source.metalness) !== null && _f !== void 0 ? _f : 0,
+            roughness: (_g = source.roughness) !== null && _g !== void 0 ? _g : 1,
+        } : null)),
+    };
+}
+function getMeshParts(mesh) {
+    const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
+    return materials.map((material, index) => {
+        return {
+            key: materials.length > 1 ? `material_${index}` : 'material',
+            material,
+            attach: materials.length > 1 ? `material-${index}` : 'material',
+        };
+    }).filter(part => part.material);
+}
+function createTransformComponent(object) {
+    return {
+        type: 'Transform',
+        properties: {
+            position: object.position.toArray(),
+            rotation: [object.rotation.x, object.rotation.y, object.rotation.z],
+            scale: object.scale.toArray(),
+        },
+    };
+}
+function createNode(object, idPrefix, children = [], components = {}) {
+    return {
+        id: createId(idPrefix),
+        name: object.name || object.type,
+        hidden: object.visible === false ? true : undefined,
+        components: Object.assign({ transform: createTransformComponent(object) }, components),
+        children,
+    };
+}
+function decomposeObject(object, options) {
+    if (!options.includeInvisible && !object.visible)
+        return null;
+    const childNodes = object.children
+        .map(child => decomposeObject(child, options))
+        .filter((child) => child != null);
+    if (!(object instanceof Mesh)) {
+        return createNode(object, options.idPrefix, childNodes);
+    }
+    const parts = getMeshParts(object);
+    const materialComponents = parts.reduce((result, part) => {
+        result[part.key] = serializeMaterial(part.material, part.attach, options);
+        return result;
+    }, {});
+    return createNode(object, options.idPrefix, childNodes, Object.assign({ geometry: {
+            type: 'BufferGeometry',
+            properties: Object.assign(Object.assign({}, serializeGeometry(object.geometry)), { visible: object.visible, castShadow: object.castShadow, receiveShadow: object.receiveShadow }),
+        } }, materialComponents));
+}
+/**
+ * Converts a live Three object hierarchy into prefab JSON nodes made from
+ * Transform, BufferGeometry, and Material components.
+ */
+export function decomposeModelToPrefabNodes(object, options = {}) {
+    var _a, _b, _c, _d, _e;
+    return (_d = decomposeObject(object, {
+        idPrefix: (_a = options.idPrefix) !== null && _a !== void 0 ? _a : 'model',
+        includeInvisible: (_b = options.includeInvisible) !== null && _b !== void 0 ? _b : false,
+        getTexturePath: (_c = options.getTexturePath) !== null && _c !== void 0 ? _c : (() => undefined),
+    })) !== null && _d !== void 0 ? _d : createNode(object, (_e = options.idPrefix) !== null && _e !== void 0 ? _e : 'model');
+}

package/dist/tools/prefabeditor/prefabStore.d.ts

@@ -5,6 +5,7 @@ import { denormalizePrefab, PrefabState, PrefabNodeRecord } from "./prefab";
 export interface PrefabStoreState extends PrefabState {
     replacePrefab: (prefab: Prefab) => void;
     updateNode: (id: string, update: (node: PrefabNodeRecord) => PrefabNodeRecord) => void;
+    replaceNode: (id: string, node: GameObject) => void;
     addChild: (parentId: string, node: GameObject) => void;
     deleteNode: (id: string) => void;
     duplicateNode: (id: string) => string | null;

package/dist/tools/prefabeditor/prefabStore.js

@@ -5,6 +5,45 @@ import { createStore } from "zustand/vanilla";
 import { collectAssetRefsForIds, collectSubtreeAssetRefs, collectSubtreeIds, cloneSubtree, createPrefabPatch, denormalizePrefab, insertSubtree, isDescendant, normalizePrefab, updateAssetRefsForNodeChange, } from "./prefab";
 const PrefabStoreContext = createContext(null);
 const EMPTY_CHILD_IDS = [];
+function addAssetRefs(assetRefCounts, refs) {
+    refs.forEach(ref => {
+        var _a;
+        assetRefCounts[ref] = ((_a = assetRefCounts[ref]) !== null && _a !== void 0 ? _a : 0) + 1;
+    });
+}
+function removeAssetRefs(assetRefCounts, refs) {
+    refs.forEach(ref => {
+        var _a;
+        const nextCount = ((_a = assetRefCounts[ref]) !== null && _a !== void 0 ? _a : 0) - 1;
+        if (nextCount > 0) {
+            assetRefCounts[ref] = nextCount;
+            return;
+        }
+        delete assetRefCounts[ref];
+    });
+}
+function cloneGraphState(state) {
+    return {
+        nodesById: Object.assign({}, state.nodesById),
+        childIdsById: Object.assign({}, state.childIdsById),
+        parentIdById: Object.assign({}, state.parentIdById),
+        assetRefCounts: Object.assign({}, state.assetRefCounts),
+    };
+}
+function removeSubtreeFromGraph(id, state, next) {
+    const ids = collectSubtreeIds(id, state.childIdsById);
+    removeAssetRefs(next.assetRefCounts, collectAssetRefsForIds(ids, state.nodesById));
+    ids.forEach(nodeId => {
+        delete next.nodesById[nodeId];
+        delete next.childIdsById[nodeId];
+        delete next.parentIdById[nodeId];
+    });
+    return ids;
+}
+function insertSubtreeIntoGraph(node, parentId, next) {
+    insertSubtree(node, parentId, next.nodesById, next.childIdsById, next.parentIdById);
+    addAssetRefs(next.assetRefCounts, collectSubtreeAssetRefs(node));
+}
 export function PrefabStoreProvider({ store, children, }) {
     return createElement(PrefabStoreContext.Provider, { value: store }, children);
 }
@@ -42,26 +81,40 @@ export function createPrefabStore(prefab) {
             set(createPrefabPatch(state, {
                 nodesById: Object.assign(Object.assign({}, state.nodesById), { [id]: nextNode }),
             }, nextAssetRefCounts));
+        }, replaceNode: (id, node) => {
+            var _a;
+            const state = get();
+            if (!state.nodesById[id])
+                return;
+            const parentId = state.parentIdById[id];
+            const next = cloneGraphState(state);
+            removeSubtreeFromGraph(id, state, next);
+            insertSubtreeIntoGraph(node, parentId, next);
+            const patch = {
+                nodesById: next.nodesById,
+                childIdsById: next.childIdsById,
+                parentIdById: next.parentIdById,
+            };
+            if (id === state.rootId) {
+                patch.rootId = node.id;
+            }
+            else if (parentId) {
+                next.childIdsById[parentId] = ((_a = next.childIdsById[parentId]) !== null && _a !== void 0 ? _a : []).map(childId => childId === id ? node.id : childId);
+            }
+            set(createPrefabPatch(state, patch, next.assetRefCounts));
         }, addChild: (parentId, node) => {
             var _a;
             const state = get();
             if (!state.nodesById[parentId])
                 return;
-            const nextNodesById = Object.assign({}, state.nodesById);
-            const nextChildIdsById = Object.assign({}, state.childIdsById);
-            const nextParentIdById = Object.assign({}, state.parentIdById);
-            const nextAssetRefCounts = Object.assign({}, state.assetRefCounts);
-            insertSubtree(node, parentId, nextNodesById, nextChildIdsById, nextParentIdById);
-            nextChildIdsById[parentId] = [...((_a = nextChildIdsById[parentId]) !== null && _a !== void 0 ? _a : []), node.id];
-            collectSubtreeAssetRefs(node).forEach(ref => {
-                var _a;
-                nextAssetRefCounts[ref] = ((_a = nextAssetRefCounts[ref]) !== null && _a !== void 0 ? _a : 0) + 1;
-            });
+            const next = cloneGraphState(state);
+            insertSubtreeIntoGraph(node, parentId, next);
+            next.childIdsById[parentId] = [...((_a = next.childIdsById[parentId]) !== null && _a !== void 0 ? _a : []), node.id];
             set(createPrefabPatch(state, {
-                nodesById: nextNodesById,
-                childIdsById: nextChildIdsById,
-                parentIdById: nextParentIdById,
-            }, nextAssetRefCounts));
+                nodesById: next.nodesById,
+                childIdsById: next.childIdsById,
+                parentIdById: next.parentIdById,
+            }, next.assetRefCounts));
         }, deleteNode: (id) => {
             var _a;
             const state = get();
@@ -70,31 +123,14 @@ export function createPrefabStore(prefab) {
             const parentId = state.parentIdById[id];
             if (!parentId)
                 return;
-            const idsToDelete = collectSubtreeIds(id, state.childIdsById);
-            const nextNodesById = Object.assign({}, state.nodesById);
-            const nextChildIdsById = Object.assign({}, state.childIdsById);
-            const nextParentIdById = Object.assign({}, state.parentIdById);
-            const nextAssetRefCounts = Object.assign({}, state.assetRefCounts);
-            collectAssetRefsForIds(idsToDelete, state.nodesById).forEach(ref => {
-                var _a;
-                const nextCount = ((_a = nextAssetRefCounts[ref]) !== null && _a !== void 0 ? _a : 0) - 1;
-                if (nextCount > 0) {
-                    nextAssetRefCounts[ref] = nextCount;
-                    return;
-                }
-                delete nextAssetRefCounts[ref];
-            });
-            idsToDelete.forEach(nodeId => {
-                delete nextNodesById[nodeId];
-                delete nextChildIdsById[nodeId];
-                delete nextParentIdById[nodeId];
-            });
-            nextChildIdsById[parentId] = ((_a = nextChildIdsById[parentId]) !== null && _a !== void 0 ? _a : []).filter(childId => childId !== id);
+            const next = cloneGraphState(state);
+            removeSubtreeFromGraph(id, state, next);
+            next.childIdsById[parentId] = ((_a = next.childIdsById[parentId]) !== null && _a !== void 0 ? _a : []).filter(childId => childId !== id);
             set(createPrefabPatch(state, {
-                nodesById: nextNodesById,
-                childIdsById: nextChildIdsById,
-                parentIdById: nextParentIdById,
-            }, nextAssetRefCounts));
+                nodesById: next.nodesById,
+                childIdsById: next.childIdsById,
+                parentIdById: next.parentIdById,
+            }, next.assetRefCounts));
         }, duplicateNode: (id) => {
             var _a;
             const state = get();
@@ -119,10 +155,7 @@ export function createPrefabStore(prefab) {
             }
             nextChildIdsById[parentId] = siblings;
             const nextAssetRefCounts = Object.assign({}, state.assetRefCounts);
-            collectAssetRefsForIds(collectSubtreeIds(id, state.childIdsById), state.nodesById).forEach(ref => {
-                var _a;
-                nextAssetRefCounts[ref] = ((_a = nextAssetRefCounts[ref]) !== null && _a !== void 0 ? _a : 0) + 1;
-            });
+            addAssetRefs(nextAssetRefCounts, collectAssetRefsForIds(collectSubtreeIds(id, state.childIdsById), state.nodesById));
             set(createPrefabPatch(state, {
                 nodesById: nextNodesById,
                 childIdsById: nextChildIdsById,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-three-game",
-	"version": "0.0.99",
+	"version": "0.0.101",
 	"description": "high performance 3D game engine built in React",
 	"main": "dist/index.js",
 	"module": "dist/index.js",