Recalculation of canvas

[iamkeiryan]

hi @artf

I have a function that retrieves values based on certain rules:

• if modified, get the current modified value
• else if, check if the higher devices are modified
• else if, check stored values from db
• else, get the predefined (for custom components)

Whenever I update a certain component inside the canvas, It works as expected since I have the selected element id which I can use to identify which style to get. The problem is, for those elements that are not selected, whenever I update the selected device, their css is not getting recalculated. Is there a way to work on this?

I used setRule to update their model. Here's the sample code of the function.

() => {

// big logic codes here to identify the source


const existingRule = editor.Css.getRule(formatCSSSelector, {
      atRuleType: 'media',
      atRuleParams: MEDIA_QUERIES[selectedDevice]
    });
    editor.Css.setRule(formatCSSSelector, {
      ...(existingRule?.getStyle() || {}),
      ...(updatedStyle ? { [styleAttribute]: updatedStyle } : {})
    }, {
      atRuleType: 'media',
      atRuleParams: MEDIA_QUERIES[selectedDevice]
    })
}

The device:select listener:

editor.on('device:select', (newDevice, oldDevice) => {
          editor.setDevice(newDevice.id)
          setSelectedDevice(newDevice.id);
          document.getElementById(oldDevice.id)?.classList.remove(...activeCls);
          document.getElementById(newDevice.id)?.classList.add(...activeCls);
});

Additionally, I tried adding the editor.refresh but it's crashing and I can't debug what's causing for it to crash.