sync sprite transformations

Author: Titanium2099

src/addons/addons/collaboration/helpers/helper.js

@@ -3,6 +3,7 @@ import * as Y from 'yjs';
 import * as OH from './observeHandlers.js';
 import * as costumeSync from './costumeSync.js';
 import * as soundSync from './soundSync.js';
+import * as transformSync from './transformSync.js';
 
 const targetNameIdCache = new Map();
 
@@ -226,6 +227,8 @@ export function serializeSpriteForYjs(target) {
     yMap.set('id', target.id);
     yMap.set('name', target.getName());
     yMap.set('isStage', !!target.isStage);
+    const transform = transformSync.serializeTransformFields(target);
+    Object.keys(transform).forEach(key => yMap.set(key, transform[key]));
     return yMap;
 }
 
@@ -606,15 +609,17 @@ export function performInitialSync() {
 
                 if (target) {
                     newTargetList.push(target);
-                    localTargetsMap.delete(id); 
+                    localTargetsMap.delete(id);
                     if (target.getName() !== name) target.sprite.name = name;
+                    transformSync.applyTransformFromYjs(target, ySpriteMap);
                 } else {
                     const newSprite = new constants.mutableRefs.vm.exports.Sprite(null, vm.runtime);
                     newSprite.name = name;
                     target = newSprite.createClone(isStage ? 'background' : 'sprite');
                     target.id = id;
                     target.originalTargetId = id;
                     vm.runtime.addTarget(target);
+                    transformSync.applyTransformFromYjs(target, ySpriteMap);
                     newTargetList.push(target);
                 }
             });

src/addons/addons/collaboration/helpers/transformSync.js

@@ -0,0 +1,91 @@
+import * as constants from './constants.js';
+
+export const TRANSFORM_FIELDS = ['x', 'y', 'direction', 'size', 'rotationStyle', 'visible', 'draggable'];
+
+export function serializeTransformFields(target) {
+    return {
+        x: target.x,
+        y: target.y,
+        direction: target.direction,
+        size: target.size,
+        rotationStyle: target.rotationStyle,
+        visible: target.visible,
+        draggable: target.draggable
+    };
+}
+
+export function applyTransformFromYjs(target, yMap) {
+    const data = {};
+    TRANSFORM_FIELDS.forEach(field => {
+        const value = yMap.get(field);
+        if (value !== undefined) data[field] = value;
+    });
+
+    const isXChanged = Object.prototype.hasOwnProperty.call(data, 'x');
+    const isYChanged = Object.prototype.hasOwnProperty.call(data, 'y');
+    if (isXChanged || isYChanged) {
+        target.setXY(isXChanged ? data.x : target.x, isYChanged ? data.y : target.y, true);
+    }
+    if (Object.prototype.hasOwnProperty.call(data, 'direction')) target.setDirection(data.direction);
+    if (Object.prototype.hasOwnProperty.call(data, 'size')) target.setSize(data.size);
+    if (Object.prototype.hasOwnProperty.call(data, 'rotationStyle')) target.setRotationStyle(data.rotationStyle);
+    if (Object.prototype.hasOwnProperty.call(data, 'visible')) target.setVisible(data.visible);
+    if (Object.prototype.hasOwnProperty.call(data, 'draggable')) target.setDraggable(data.draggable);
+}
+
+function findSpriteMap(targetId) {
+    const sharedSprites = constants.mutableRefs.sharedSprites;
+    for (let i = 0; i < sharedSprites.length; i++) {
+        const yMap = sharedSprites.get(i);
+        if (yMap.get('id') === targetId) return yMap;
+    }
+    return null;
+}
+
+const TRANSFORM_PUSH_THROTTLE_MS = 50;
+const pendingPushes = new Map();
+const throttleTimers = new Map();
+const lastPushTimes = new Map();
+
+function flushTransformPush(targetId) {
+    throttleTimers.delete(targetId);
+    const properties = pendingPushes.get(targetId);
+    pendingPushes.delete(targetId);
+    if (!properties) return;
+
+    lastPushTimes.set(targetId, Date.now());
+    constants.mutableRefs.syncingTargets.add(targetId);
+    try {
+        constants.mutableRefs.ydoc.transact(() => {
+            const yMap = findSpriteMap(targetId);
+            if (!yMap) return;
+            Object.keys(properties).forEach(key => {
+                if (TRANSFORM_FIELDS.includes(key)) yMap.set(key, properties[key]);
+            });
+        }, constants.LOCAL_EVENT_SYNC_ORIGIN);
+    } finally {
+        constants.mutableRefs.syncingTargets.delete(targetId);
+    }
+}
+
+export function handleLocalTransformChange(targetId, properties) {
+    if (constants.mutableRefs.syncingTargets.has(targetId)) return;
+
+    const relevant = {};
+    TRANSFORM_FIELDS.forEach(key => {
+        if (Object.prototype.hasOwnProperty.call(properties, key)) relevant[key] = properties[key];
+    });
+    if (Object.keys(relevant).length === 0) return;
+
+    pendingPushes.set(targetId, Object.assign({}, pendingPushes.get(targetId), relevant));
+
+    if (throttleTimers.has(targetId)) return;
+
+    const elapsed = Date.now() - (lastPushTimes.get(targetId) || 0);
+    if (elapsed >= TRANSFORM_PUSH_THROTTLE_MS) {
+        flushTransformPush(targetId);
+    } else {
+        const delay = TRANSFORM_PUSH_THROTTLE_MS - elapsed;
+        throttleTimers.set(targetId, setTimeout(() => flushTransformPush(targetId), delay));
+    }
+}

src/addons/addons/collaboration/userscript.js

@@ -7,6 +7,7 @@ import * as timeout from './helpers/timeout.js';
 import * as helper from './helpers/helper.js';
 import * as costumeSync from './helpers/costumeSync.js';
 import * as soundSync from './helpers/soundSync.js';
+import * as transformSync from './helpers/transformSync.js';
 import * as OH from './helpers/observeHandlers.js';
 
 
@@ -127,21 +128,19 @@ function attachYjsProvider() {
                     const existingTarget = runtime.getTargetById(id);
 
                     if (!existingTarget) {
-                        
                         const newSprite = new constants.mutableRefs.vm.exports.Sprite(null, runtime);
                         newSprite.name = name;
-                        
                         const target = newSprite.createClone(isStage ? 'background' : 'sprite');
                         target.id = id;
                         target.originalTargetId = id;
-                        
                         runtime.addTarget(target);
-
-                        helper.applyQueuedEventsForTarget(id); 
+                        transformSync.applyTransformFromYjs(target, yMap);
+                        helper.applyQueuedEventsForTarget(id);
                     } else {
                         if (existingTarget.getName() !== name) {
                             vm.renameSprite(id, name, false);
                         }
+                        transformSync.applyTransformFromYjs(existingTarget, yMap);
                     }
                 });
                 const localTargets = runtime.targets.filter(t => t.isOriginal);
@@ -612,14 +611,24 @@ function attachYjsProvider() {
                         const newIndex = properties.currentCostume;
                         const currentLocalState = constants.mutableRefs.yjsAwarenessInstance.getLocalState();
                         const currentAsset = currentLocalState?.editingAsset;
-                        if (currentAsset && currentAsset.type === 'costume' && currentAsset.index !== newIndex) {           
+                        if (currentAsset && currentAsset.type === 'costume' && currentAsset.index !== newIndex) {
                             constants.mutableRefs.yjsAwarenessInstance.setLocalStateField('editingAsset', {
                                 ...currentAsset,
                                 index: newIndex
                             });
                         }
                     }
                 }
+                const hasTransformField = transformSync.TRANSFORM_FIELDS.some(
+                    key => Object.prototype.hasOwnProperty.call(properties, key));
+                if (hasTransformField) {
+                    if (constants.mutableRefs.isInitialRoomSync) {
+                        constants.mutableRefs.pendingLocalEvents.push(
+                            { kind: 'transform', targetId, eventData: properties });
+                        continue;
+                    }
+                    transformSync.handleLocalTransformChange(targetId, properties);
+                }
             }
         };
 
@@ -765,6 +774,7 @@ function attachYjsProvider() {
                             if (kind === 'blocks') handleTargetBlocksChanged(targetId, eventData);
                             else if (kind === 'variables') handleTargetVariablesChanged(targetId, eventData);
                             else if (kind === 'comments') handleTargetCommentsChanged(targetId, eventData);
+                            else if (kind === 'transform') transformSync.handleLocalTransformChange(targetId, eventData);
                         });
 
                         if (constants.mutableRefs.addon?.tab?.redux?.dispatch) {