How to make the editor UI updates much smoother?

[iamkeiryan]

Hi @artf ,

I have create a custom style manager and was update to update the values of font size on mouse move. But the problem that I have right now is it's a bit laggy compared to one in the grapesjs studio.

These are the codes that handles the numeric change:

const handleMouseDown = (e: React.MouseEvent) => {
    setMouseDownActive(true);
    setInitMousePosition(e.clientY);
  };

  const handleMouseUp = useCallback(
    (e: MouseEvent) => {
      if (!isMouseDownActive) return;
      setMouseDownActive(false);
    },
    [initMousePosition, isMouseDownActive, numericValue, hasNegativeValue, applyStyle, unitValue]
  );

  const handleMouseMove =
    (e: MouseEvent) => {
      if (!isMouseDownActive) return;

      const distance = e.clientY - initMousePosition;
      const numericVal = parseFloat(numericValue || '0') || 0;
      const calculatedValue = hasNegativeValue ? numericVal + distance : Math.max(0, numericVal + distance);

      setNumericValue(calculatedValue.toString());
      applyStyle(calculatedValue, unitValue);
    }

And here's the part where I apply it:

 const onChange = useCallback(
    (selectedVal: string) => {
      if (selectedElement && editor) {
        setValue(selectedVal);
        editor.CssComposer.setRule(
          componentSelector,
          { [styleAttribute]: selectedVal },
          {
            atRuleType: 'media',
            atRuleParams: DEVICE_MEDIA_QUERIES[selectedDevice],
            addStyles: true
          }
        );
      }
    },
    [selectedElement, editor, setValue, componentSelector, styleAttribute, selectedDevice]
  );