updateSync method

void updateSync(Element element, { List<String>? cssClasses, Visibility? visibility, Position? position, num? width, num? height, num? left, num? top, num? right, num? bottom, num? zIndex, bool useCssTransform = true, })

Updates position and dimension based properties on element.

NOTE: All of these properties are cleared before updating.

Implementation

void updateSync(E element,
    {List<String>? cssClasses,
    Visibility? visibility,
    Position? position,
    num? width,
    num? height,
    num? left,
    num? top,
    num? right,
    num? bottom,
    num? zIndex,
    bool useCssTransform = true}) {
  // TODO(google): Consider another format for dimensions.
  SetPropertyFn setProperty = (name, value) {
    setCssPropertySync(element, name, value);
  };
  setProperty('display', null);
  setProperty('visibility', null);
  // It's important to put this first to avoid FOUC *if* becoming hidden.
  if (visibility != null && visibility != Visibility.Visible) {
    visibility.apply(setProperty);
  }
  if (cssClasses != null) {
    var lastCssClasses = _addedCssClasses[element!];
    if (lastCssClasses != null) {
      removeCssClassesSync(element, lastCssClasses);
    }
    addCssClassesSync(element, cssClasses);
    _addedCssClasses[element] = cssClasses;
  }
  if (width != null) {
    setProperty('width', width == 0 ? '0' : '${width}px');
  } else {
    setProperty('width', null);
  }
  if (height != null) {
    setProperty('height', height == 0 ? '0' : '${height}px');
  } else {
    setProperty('height', null);
  }

  position?.apply(setProperty);

  // Using translateX/Y is faster than left/top, but there is at least one
  // use case that needs the other behavior.
  if (useCssTransform) {
    var buffer = StringBuffer();
    if (left != null) {
      setProperty('left', '0');
      buffer.write('translateX(${left.round()}px) ');
    } else {
      setProperty('left', null);
    }
    if (top != null) {
      setProperty('top', '0');
      buffer.write('translateY(${top.round()}px)');
    } else {
      setProperty('top', null);
    }
    setProperty('transform', buffer.toString());
    setProperty('-webkit-transform', buffer.toString());
    if (buffer.isNotEmpty) {
      setProperty('transform', buffer.toString());
      setProperty('-webkit-transform', buffer.toString());
    }
  } else {
    if (left != null) {
      setProperty('left', left == 0 ? '0' : '${left}px');
    } else {
      setProperty('left', null);
    }
    if (top != null) {
      setProperty('top', top == 0 ? '0' : '${top}px');
    } else {
      setProperty('top', null);
    }
    setProperty('transform', null);
    setProperty('-webkit-transform', null);
  }

  if (right != null) {
    setProperty('right', right == 0 ? '0' : '${right}px');
  } else {
    setProperty('right', null);
  }
  if (bottom != null) {
    setProperty('bottom', bottom == 0 ? '0' : '${bottom}px');
  } else {
    setProperty('bottom', null);
  }
  if (zIndex != null) {
    setProperty('z-index', '$zIndex');
  } else {
    setProperty('z-index', null);
  }
  // It's important to put this last to avoid FOUC *if* becoming visible.
  if (visibility != null && visibility == Visibility.Visible) {
    visibility.apply(setProperty);
  }
}