improved update of embedded component items when reference item is ch…

…anged
ishubin · Dec 23, 2023 · 0e118b8 · 0e118b8
1 parent c2866f8
commit 0e118b8
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 19 deletions.
diff --git a/src/ui/components/SchemeEditor.vue b/src/ui/components/SchemeEditor.vue
@@ -1893,28 +1893,32 @@ export default {
         onItemGenericTextSlotPropChanged(propertyName, value) {
             let itemIds = '';
             forEach(this.schemeContainer.selectedItems, item => {
-                if (item.textSlots) {
-                    forEach(item.textSlots, (textSlot, textSlotName) => {
-                        item.textSlots[textSlotName][propertyName] = utils.clone(value);
-                        recentPropsChanges.registerItemTextProp(item.shape, textSlotName, propertyName, value);
-                    });
-                }
-                EditorEventBus.item.changed.specific.$emit(this.editorId, item.id, `textSlots.*.${propertyName}`);
+                this.schemeContainer.setPropertyForItem(item, (it) => {
+                    if (it.textSlots) {
+                        forEach(it.textSlots, (textSlot, textSlotName) => {
+                            it.textSlots[textSlotName][propertyName] = utils.clone(value);
+                            recentPropsChanges.registerItemTextProp(it.shape, textSlotName, propertyName, value);
+                        });
+                    }
+                    EditorEventBus.item.changed.specific.$emit(this.editorId, it.id, `textSlots.*.${propertyName}`);
+                });
                 itemIds += item.id;
             });
             EditorEventBus.schemeChangeCommitted.$emit(this.editorId, `item.${itemIds}.textSlots.*.${propertyName}`);
 
         },
 
-        // this is triggerd from specific text slot in side panel
+        // this is triggered from specific text slot in side panel
         onTextPropertyChanged(textSlotName, propertyName, value) {
             let itemIds = '';
             forEach(this.schemeContainer.selectedItems, item => {
-                if (item.textSlots && item.textSlots.hasOwnProperty(textSlotName)) {
-                    item.textSlots[textSlotName][propertyName] = utils.clone(value);
-                    recentPropsChanges.registerItemTextProp(item.shape, textSlotName, propertyName, value);
-                }
-                EditorEventBus.item.changed.specific.$emit(this.editorId, item.id, `textSlots.${textSlotName}.${propertyName}`);
+                this.schemeContainer.setPropertyForItem(item, (it) => {
+                    if (it.textSlots && it.textSlots.hasOwnProperty(textSlotName)) {
+                        it.textSlots[textSlotName][propertyName] = utils.clone(value);
+                        recentPropsChanges.registerItemTextProp(it.shape, textSlotName, propertyName, value);
+                    }
+                    EditorEventBus.item.changed.specific.$emit(this.editorId, it.id, `textSlots.${textSlotName}.${propertyName}`);
+                });
                 itemIds += item.id;
             });
             EditorEventBus.schemeChangeCommitted.$emit(this.editorId, `item.${itemIds}.textSlots.${textSlotName}.${propertyName}`);

diff --git a/src/ui/components/editor/states/StateDragItem.js b/src/ui/components/editor/states/StateDragItem.js
@@ -190,6 +190,7 @@ class DragControlPointState extends SubState {
         if (this.controlPoint) {
             if (this.item.shape === 'connector' && (this.controlPoint.isEdgeStart || this.controlPoint.isEdgeEnd)) {
                 this.handleCurveConnectorEdgeControlPointDrag(x, y, this.controlPoint);
+                this.schemeContainer.updateItemClones(this.item);
             } else {
                 const localPoint  = this.schemeContainer.localPointOnItem(this.originalPoint.x, this.originalPoint.y, this.item);
                 const localPoint2 = this.schemeContainer.localPointOnItem(x, y, this.item);
@@ -216,6 +217,7 @@ class DragControlPointState extends SubState {
                 StoreUtils.setItemControlPoints(this.store, this.item);
                 this.reindexNeeded = true;
                 this.lastModifiedItem = this.item;
+                this.schemeContainer.updateItemClones(this.item);
             }
         }
     }

diff --git a/src/ui/scheme/SchemeContainer.js b/src/ui/scheme/SchemeContainer.js
@@ -409,8 +409,6 @@ class SchemeContainer {
         log.info('reindexItems()', this);
         log.time('reindexItems');
 
-        //TODO optimize it to not reconstruct all indices with every change (e.g. reindex only effected items. This obviously needs to be specified from the caller)
-
         this.itemMap = {};
         this._itemArray = [];
         this.worldItems = [];
@@ -1988,13 +1986,37 @@ class SchemeContainer {
         this.updatePropertyForClones(item, setter);
     }
 
-    updatePropertyForClones(item, setter) {
+    updatePropertyForClones(item, setter, ignoreComponentRoots) {
+        const cloneIds = this.getItemCloneIds(item.id);
+        if (cloneIds) {
+            cloneIds.forEach(cloneId => {
+                const clonedItem = this.findItemById(cloneId);
+                if (!clonedItem) {
+                    return;
+                }
+                if (ignoreComponentRoots && clonedItem.meta.componentRoot) {
+                    return;
+                }
+                this.setPropertyForItem(clonedItem, setter);
+                EditorEventBus.item.changed.specific.$emit(this.editorId, clonedItem.id);
+            });
+        }
+    }
+
+    updateItemClones(item) {
         const cloneIds = this.getItemCloneIds(item.id);
         if (cloneIds) {
             cloneIds.forEach(cloneId => {
                 const clonedItem = this.findItemById(cloneId);
-                if (clonedItem && !clonedItem.meta.componentRoot) {
-                    this.setPropertyForItem(clonedItem, setter);
+                if (clonedItem) {
+                    this.updateItemClones(clonedItem);
+
+                    const copy = utils.clone(item);
+
+                    clonedItem.shapeProps = copy.shapeProps;
+                    clonedItem.opacity = copy.opacity;
+                    clonedItem.selfOpacity = copy.selfOpacity;
+                    clonedItem.textSlots = copy.textSlots;
                     EditorEventBus.item.changed.specific.$emit(this.editorId, clonedItem.id);
                 }
             });
@@ -2289,7 +2311,7 @@ class SchemeContainer {
                     clone.area.r = item.area.r;
                     clone.area.px = item.area.px;
                     clone.area.py = item.area.py;
-                });
+                }, true);
             }
         });