diff --git a/src/ui/components/SchemeEditor.vue b/src/ui/components/SchemeEditor.vue index 90c932056..c3537d3e3 100644 --- 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 index 47202d0f3..47bc0bf6d 100644 --- 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 index 40fded9f3..a3af0bf5e 100644 --- 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); } });