@dcl/ecs 7.21.1-22904194370.commit-34c867c → 7.21.1-22917715332.commit-e5d969d

package/dist/systems/crdt/index.d.ts

@@ -1,6 +1,7 @@
 import { Entity } from '../../engine/entity';
 import type { ComponentDefinition } from '../../engine';
 import { CrdtMessageType } from '../../serialization/crdt/types';
+export declare const LIVEKIT_MAX_SIZE = 12;
 /**
  * @public
  */

package/dist/systems/crdt/index.js

@@ -1,17 +1,24 @@
 import { EntityState } from '../../engine/entity';
 import { ReadWriteByteBuffer } from '../../serialization/ByteBuffer';
-import { AppendValueOperation, CrdtMessageProtocol } from '../../serialization/crdt';
+import { AppendValueOperation, CrdtMessageProtocol, DeleteComponentNetwork, DeleteEntityNetwork } from '../../serialization/crdt';
 import { DeleteComponent } from '../../serialization/crdt/deleteComponent';
 import { DeleteEntity } from '../../serialization/crdt/deleteEntity';
 import { PutComponentOperation } from '../../serialization/crdt/putComponent';
-import { AuthoritativePutComponentOperation } from '../../serialization/crdt/authoritativePutComponent';
 import { CrdtMessageType } from '../../serialization/crdt/types';
+import { PutNetworkComponentOperation } from '../../serialization/crdt/network/putComponentNetwork';
+import { NetworkEntity as defineNetworkEntity, NetworkParent as defineNetworkParent, Transform as defineTransform } from '../../components';
+import * as networkUtils from '../../serialization/crdt/network/utils';
+// NetworkMessages can only have a MAX_SIZE of 12kb. So we need to send it in chunks.
+export const LIVEKIT_MAX_SIZE = 12;
 /**
  * @internal
  */
 export function crdtSceneSystem(engine, onProcessEntityComponentChange) {
     const transports = [];
-    // No network components needed - pure CRDT processing only
+    // Components that we used on this system
+    const NetworkEntity = defineNetworkEntity(engine);
+    const NetworkParent = defineNetworkParent(engine);
+    const Transform = defineTransform(engine);
     // Messages that we received at transport.onMessage waiting to be processed
     const receivedMessages = [];
     // Messages already processed by the engine but that we need to broadcast to other transports.
@@ -36,20 +43,27 @@ export function crdtSceneSystem(engine, onProcessEntityComponentChange) {
                 if (header.type === CrdtMessageType.DELETE_COMPONENT) {
                     message = DeleteComponent.read(buffer);
                 }
+                else if (header.type === CrdtMessageType.DELETE_COMPONENT_NETWORK) {
+                    message = DeleteComponentNetwork.read(buffer);
+                }
                 else if (header.type === CrdtMessageType.PUT_COMPONENT) {
                     message = PutComponentOperation.read(buffer);
                 }
-                else if (header.type === CrdtMessageType.AUTHORITATIVE_PUT_COMPONENT) {
-                    message = AuthoritativePutComponentOperation.read(buffer);
+                else if (header.type === CrdtMessageType.PUT_COMPONENT_NETWORK) {
+                    message = PutNetworkComponentOperation.read(buffer);
                 }
                 else if (header.type === CrdtMessageType.DELETE_ENTITY) {
                     message = DeleteEntity.read(buffer);
                 }
+                else if (header.type === CrdtMessageType.DELETE_ENTITY_NETWORK) {
+                    message = DeleteEntityNetwork.read(buffer);
+                }
                 else if (header.type === CrdtMessageType.APPEND_VALUE) {
                     message = AppendValueOperation.read(buffer);
+                    // Unknown message, we skip it
                 }
                 else {
-                    // Unknown message, we skip it (including NETWORK messages)
+                    // consume the message
                     buffer.incrementReadOffset(header.length);
                 }
                 if (message) {
@@ -70,6 +84,22 @@ export function crdtSceneSystem(engine, onProcessEntityComponentChange) {
         const messagesToProcess = value.splice(0, value.length);
         return messagesToProcess;
     }
+    /**
+     * Find the local entityId associated to the network component message.
+     * It's a mapping Network -> to Local
+     * If it's not a network message, return the entityId received by the message
+     */
+    function findNetworkId(msg) {
+        const hasNetworkId = 'networkId' in msg;
+        if (hasNetworkId) {
+            for (const [entityId, network] of engine.getEntitiesWith(NetworkEntity)) {
+                if (network.networkId === msg.networkId && network.entityId === msg.entityId) {
+                    return { entityId, network };
+                }
+            }
+        }
+        return { entityId: msg.entityId };
+    }
     /**
      * This fn will be called on every tick.
      * Process all the messages queue received by the transport
@@ -78,52 +108,46 @@ export function crdtSceneSystem(engine, onProcessEntityComponentChange) {
         const messagesToProcess = getMessages(receivedMessages);
         const entitiesShouldBeCleaned = [];
         for (const msg of messagesToProcess) {
-            // Simple CRDT processing - no network logic
-            if (msg.type === CrdtMessageType.DELETE_ENTITY) {
-                entitiesShouldBeCleaned.push(msg.entityId);
+            let { entityId, network } = findNetworkId(msg);
+            // We receive a new Entity. Create the localEntity and map it to the NetworkEntity component
+            if (networkUtils.isNetworkMessage(msg) && !network) {
+                entityId = engine.addEntity();
+                network = { entityId: msg.entityId, networkId: msg.networkId };
+                NetworkEntity.createOrReplace(entityId, network);
+            }
+            if (msg.type === CrdtMessageType.DELETE_ENTITY || msg.type === CrdtMessageType.DELETE_ENTITY_NETWORK) {
+                entitiesShouldBeCleaned.push(entityId);
                 broadcastMessages.push(msg);
             }
             else {
-                const entityState = engine.entityContainer.getEntityState(msg.entityId);
-                // Skip updates from removed entities
+                const entityState = engine.entityContainer.getEntityState(entityId);
+                // Skip updates from removed entityes
                 if (entityState === EntityState.Removed)
                     continue;
-                // Entities with unknown state should update its entity state
+                // Entities with unknown entities should update its entity state
                 if (entityState === EntityState.Unknown) {
-                    engine.entityContainer.updateUsedEntity(msg.entityId);
-                }
-                // Only process component-related messages (not DELETE_ENTITY)
-                if ('componentId' in msg) {
-                    const component = engine.getComponentOrNull(msg.componentId);
-                    if (component) {
-                        // Handle authoritative messages differently - they force the state regardless of timestamp
-                        const tryUpdate = () => {
-                            try {
-                                return msg.type === CrdtMessageType.AUTHORITATIVE_PUT_COMPONENT
-                                    ? component.__forceUpdateFromCrdt(msg)
-                                    : component.updateFromCrdt(msg);
-                            }
-                            catch (e) {
-                                console.error('[receiveMessages] ERROR processing message', msg, e);
-                                return null;
-                            }
-                        };
-                        const result = tryUpdate();
-                        if (!result)
-                            continue;
-                        const [conflictMessage, value] = result;
-                        if (!conflictMessage) {
-                            // Add message to broadcast queue when no conflict
-                            broadcastMessages.push(msg);
-                            onProcessEntityComponentChange && onProcessEntityComponentChange(msg.entityId, msg.type, component, value);
-                        }
+                    engine.entityContainer.updateUsedEntity(entityId);
+                }
+                const component = engine.getComponentOrNull(msg.componentId);
+                /* istanbul ignore else */
+                if (component) {
+                    if (msg.type === CrdtMessageType.PUT_COMPONENT &&
+                        component.componentId === Transform.componentId &&
+                        NetworkEntity.has(entityId) &&
+                        NetworkParent.has(entityId)) {
+                        msg.data = networkUtils.fixTransformParent(msg);
                     }
-                    else {
-                        // Component not found - still broadcast for editor compatibility
-                        /* istanbul ignore next */
+                    const [conflictMessage, value] = component.updateFromCrdt({ ...msg, entityId });
+                    if (!conflictMessage) {
+                        // Add message to transport queue to be processed by others transports
                         broadcastMessages.push(msg);
+                        onProcessEntityComponentChange && onProcessEntityComponentChange(entityId, msg.type, component, value);
                     }
                 }
+                else {
+                    // TODO: test this line, it is fundammental to make the editor work
+                    broadcastMessages.push(msg);
+                }
             }
         }
         // the last stage of the syncrhonization is to delete the entities
@@ -137,17 +161,16 @@ export function crdtSceneSystem(engine, onProcessEntityComponentChange) {
         }
     }
     /**
-     * Simple CRDT message broadcasting - no network-specific logic
+     * Iterates the dirty map and generates crdt messages to be send
      */
     async function sendMessages(entitiesDeletedThisTick) {
-        // Get messages from broadcast queue and component updates
+        // CRDT Messages will be the merge between the recieved transport messages and the new crdt messages
         const crdtMessages = getMessages(broadcastMessages);
         const buffer = new ReadWriteByteBuffer();
-        // Generate CRDT messages from component updates
         for (const component of engine.componentsIter()) {
             for (const message of component.getCrdtUpdates()) {
                 const offset = buffer.currentWriteOffset();
-                // Only create messages if there's a transport that will handle it
+                // Avoid creating messages if there is no transport that will handle it
                 if (transports.some((t) => t.filter(message))) {
                     if (message.type === CrdtMessageType.PUT_COMPONENT) {
                         PutComponentOperation.write(message.entityId, message.timestamp, message.componentId, message.data, buffer);
@@ -171,7 +194,7 @@ export function crdtSceneSystem(engine, onProcessEntityComponentChange) {
                 }
             }
         }
-        // Handle deleted entities
+        // After all updates, I execute the DeletedEntity messages
         for (const entityId of entitiesDeletedThisTick) {
             const offset = buffer.currentWriteOffset();
             DeleteEntity.write(entityId, buffer);
@@ -182,19 +205,87 @@ export function crdtSceneSystem(engine, onProcessEntityComponentChange) {
             });
             onProcessEntityComponentChange && onProcessEntityComponentChange(entityId, CrdtMessageType.DELETE_ENTITY);
         }
-        // Simple transport broadcasting - no network-specific transforms
-        for (const transport of transports) {
-            const transportBuffer = new ReadWriteByteBuffer();
+        // Send CRDT messages to transports
+        const transportBuffer = new ReadWriteByteBuffer();
+        for (const index in transports) {
+            const __NetworkMessagesBuffer = [];
+            const transportIndex = Number(index);
+            const transport = transports[transportIndex];
+            const isRendererTransport = transport.type === 'renderer';
+            const isNetworkTransport = transport.type === 'network';
+            // Reset Buffer for each Transport
+            transportBuffer.resetBuffer();
+            const buffer = new ReadWriteByteBuffer();
+            // Then we send all the new crdtMessages that the transport needs to process
             for (const message of crdtMessages) {
+                // Check if adding this message would exceed the size limit
+                const currentBufferSize = transportBuffer.toBinary().byteLength;
+                const messageSize = message.messageBuffer.byteLength;
+                if (isNetworkTransport && (currentBufferSize + messageSize) / 1024 > LIVEKIT_MAX_SIZE) {
+                    // If the current buffer has content, save it as a chunk
+                    if (currentBufferSize > 0) {
+                        __NetworkMessagesBuffer.push(transportBuffer.toCopiedBinary());
+                        transportBuffer.resetBuffer();
+                    }
+                    // If the message itself is larger than the limit, we need to handle it specially
+                    // For now, we'll skip it to prevent infinite loops
+                    if (messageSize / 1024 > LIVEKIT_MAX_SIZE) {
+                        console.error(`Message too large (${messageSize} bytes), skipping message for entity ${message.entityId}`);
+                        continue;
+                    }
+                }
                 // Avoid echo messages
-                if (message.transportId === transports.indexOf(transport))
+                if (message.transportId === transportIndex)
+                    continue;
+                // Redundant message for the transport
+                if (!transport.filter(message))
+                    continue;
+                const { entityId } = findNetworkId(message);
+                const transformNeedsFix = 'componentId' in message &&
+                    message.componentId === Transform.componentId &&
+                    Transform.has(entityId) &&
+                    NetworkParent.has(entityId) &&
+                    NetworkEntity.has(entityId);
+                // If there was a LOCAL change in the transform. Add the parent to that transform
+                if (isRendererTransport && message.type === CrdtMessageType.PUT_COMPONENT && transformNeedsFix) {
+                    const parent = findNetworkId(NetworkParent.get(entityId));
+                    const transformData = networkUtils.fixTransformParent(message, Transform.get(entityId), parent.entityId);
+                    const offset = buffer.currentWriteOffset();
+                    PutComponentOperation.write(entityId, message.timestamp, message.componentId, transformData, buffer);
+                    transportBuffer.writeBuffer(buffer.buffer().subarray(offset, buffer.currentWriteOffset()), false);
                     continue;
-                // Check if transport wants this message
-                if (transport.filter(message)) {
-                    transportBuffer.writeBuffer(message.messageBuffer, false);
                 }
+                if (isRendererTransport && networkUtils.isNetworkMessage(message)) {
+                    // If it's the renderer transport and its a NetworkMessage, we need to fix the entityId field and convert it to a known Message.
+                    // PUT_NETWORK_COMPONENT -> PUT_COMPONENT
+                    let transformData = 'data' in message ? message.data : new Uint8Array();
+                    if (transformNeedsFix) {
+                        const parent = findNetworkId(NetworkParent.get(entityId));
+                        transformData = networkUtils.fixTransformParent(message, Transform.get(entityId), parent.entityId);
+                    }
+                    networkUtils.networkMessageToLocal({ ...message, data: transformData }, entityId, buffer, transportBuffer);
+                    // Iterate the next message
+                    continue;
+                }
+                // If its a network transport and its a PUT_COMPONENT that has a NetworkEntity component, we need to send this message
+                // through comms with the EntityID and NetworkID from ther NetworkEntity so everyone can recieve this message and map to their custom entityID.
+                if (isNetworkTransport && !networkUtils.isNetworkMessage(message)) {
+                    const networkData = NetworkEntity.getOrNull(message.entityId);
+                    // If it has networkData convert the message to PUT_NETWORK_COMPONENT.
+                    if (networkData) {
+                        networkUtils.localMessageToNetwork(message, networkData, buffer, transportBuffer);
+                        // Iterate the next message
+                        continue;
+                    }
+                }
+                // Common message
+                transportBuffer.writeBuffer(message.messageBuffer, false);
+            }
+            if (isNetworkTransport && transportBuffer.currentWriteOffset()) {
+                __NetworkMessagesBuffer.push(transportBuffer.toBinary());
             }
-            await transport.send(transportBuffer.toBinary());
+            const message = isNetworkTransport ? __NetworkMessagesBuffer : transportBuffer.toBinary();
+            await transport.send(message);
         }
     }
     /**

package/dist/systems/events.d.ts

@@ -18,6 +18,12 @@ export type EventSystemOptions = {
     showHighlight?: boolean;
     maxPlayerDistance?: number;
 };
+/**
+ * @public
+ */
+export type EventSystemOptionsCallback = EventSystemOptions & {
+    cb: EventSystemCallback;
+};
 export declare const getDefaultOpts: (opts?: Partial<EventSystemOptions>) => EventSystemOptions;
 /**
  * @public
@@ -47,11 +53,37 @@ export interface PointerEventsSystem {
      * @param entity - Entity where the callback was attached
      */
     removeOnPointerHoverLeave(entity: Entity): void;
+    /**
+     * @public
+     * Remove the callback for onPointerDrag event
+     * @param entity - Entity where the callback was attached
+     */
+    removeOnPointerDrag(entity: Entity): void;
+    /**
+     * @public
+     * Remove the callback for onPointerDragLocked event
+     * @param entity - Entity where the callback was attached
+     */
+    removeOnPointerDragLocked(entity: Entity): void;
+    /**
+     * @public
+     * Remove the callback for onPointerDragEnd event
+     * @param entity - Entity where the callback was attached
+     */
+    removeOnPointerDragEnd(entity: Entity): void;
+    /**
+     * @public
+     * Execute callbacks when the user presses one of the InputButtons pointing at the entity
+     * @param pointerData - Entity to attach the callbacks, list of options to trigger Feedback, Button, and Callback
+     */
+    onPointerDown(pointerData: {
+        entity: Entity;
+        optsList: EventSystemOptionsCallback[];
+    }): void;
     /**
      * @public
      * Execute callback when the user press the InputButton pointing at the entity
      * @param pointerData - Entity to attach the callback, Opts to trigger Feedback and Button
-     * @param cb - Function to execute when click fires
      */
     onPointerDown(pointerData: {
         entity: Entity;
@@ -64,6 +96,15 @@ export interface PointerEventsSystem {
      * @param opts - Opts to trigger Feedback and Button
      */
     onPointerDown(entity: Entity, cb: EventSystemCallback, opts?: Partial<EventSystemOptions>): void;
+    /**
+     * @public
+     * Execute callbacks when the user releases one of the InputButtons pointing at the entity
+     * @param pointerData - Entity to attach the callbacks, list of options to trigger Feedback, Button, and Callback
+     */
+    onPointerUp(pointerData: {
+        entity: Entity;
+        optsList: EventSystemOptionsCallback[];
+    }): void;
     /**
      * @public
      * Execute callback when the user releases the InputButton pointing at the entity
@@ -101,6 +142,64 @@ export interface PointerEventsSystem {
         entity: Entity;
         opts?: Partial<EventSystemOptions>;
     }, cb: EventSystemCallback): void;
+    /**
+     * @public
+     * Execute callbacks when the user drags the pointer from inside the entity
+     * @param pointerData - Entity to attach the callbacks, list of options to trigger Feedback, Button, and Callback
+     */
+    onPointerDrag(pointerData: {
+        entity: Entity;
+        optsList: EventSystemOptionsCallback[];
+    }): void;
+    /**
+     * @public
+     * Execute callback when the user clicks and drags the pointer from inside the entity
+     * @param pointerData - Entity to attach the callback - Opts to trigger Feedback and Button
+     * @param cb - Function to execute when click fires
+     */
+    onPointerDrag(pointerData: {
+        entity: Entity;
+        opts?: Partial<EventSystemOptions>;
+    }, cb: EventSystemCallback): void;
+    /**
+     * @public
+     * Execute callbacks when the user drags the pointer from inside the entity, locking the cursor in place.
+     * @param pointerData - Entity to attach the callbacks, list of options to trigger Feedback, Button, and Callback
+     */
+    onPointerDragLocked(pointerData: {
+        entity: Entity;
+        optsList: EventSystemOptionsCallback[];
+    }): void;
+    /**
+     * @public
+     * Execute callback when the user clicks and drags the pointer from inside the entity,
+     * locking the cursor in place
+     * @param pointerData - Entity to attach the callback - Opts to trigger Feedback and Button
+     * @param cb - Function to execute when click fires
+     */
+    onPointerDragLocked(pointerData: {
+        entity: Entity;
+        opts?: Partial<EventSystemOptions>;
+    }, cb: EventSystemCallback): void;
+    /**
+     * @public
+     * Execute callbacks when the user releases a button after a drag
+     * @param pointerData - Entity to attach the callbacks, list of options to trigger Feedback, Button, and Callback
+     */
+    onPointerDragEnd(pointerData: {
+        entity: Entity;
+        optsList: EventSystemOptionsCallback[];
+    }): void;
+    /**
+     * @public
+     * Execute callback when the user releases the button after a drag
+     * @param pointerData - Entity to attach the callback - Opts to trigger Feedback and Button
+     * @param cb - Function to execute when click fires
+     */
+    onPointerDragEnd(pointerData: {
+        entity: Entity;
+        opts?: Partial<EventSystemOptions>;
+    }, cb: EventSystemCallback): void;
 }
 /**
  * @public