render method

@override dynamic render()

Renders the elements of this component.

Accepted return types:

• dart:html UINode and UIElement.
• DIVElement, DOMNode, AsDOMElement and AsDOMNode.
• Future.
• UIAsyncContent.
• String, parsed as HTML.
• Map (rendered as JSON).
• List with previous types (recursively).
• Function that returns any previous type. Including Function<Future>, allowing async functions.

Implementation

@override
dynamic render() {
  var barSize = _barSize;
  var pointSizeHalf = _pointSizeHalf;

  if (_panel_all == null) {
    _panel_all = createDivInlineBlock();

    _disableTransitions(_panel_all!);

    _panel_Saturation_Luma_Square = createDiv()
      ..style.width = '${width + barSize}px'
      ..style.height = '${height + barSize}px';

    _disableTransitions(_panel_Saturation_Luma_Square!);

    _panel_ViewColor_Saturation = createDiv()
      ..style.width = '${width + barSize}px'
      ..style.height = '${barSize}px';

    _disableTransitions(_panel_ViewColor_Saturation!);

    _viewColor = createDivInline()
      ..style.width = '${barSize}px'
      ..style.height = '${barSize}px';

    _disableTransitions(_viewColor!);

    _saturation = createDivInline()
      ..style.width = '${width}px'
      ..style.height = '${barSize}px';

    _disableTransitions(_saturation!);

    _panel_ViewColor_Saturation!.children.add(_viewColor!);
    _panel_ViewColor_Saturation!.children.add(_saturation!);

    _luma = createDivInline()
      ..style.width = '${barSize}px'
      ..style.height = '${height}px';

    _disableTransitions(_luma!);

    _square = createDivInline()
      ..style.width = '${width}px'
      ..style.height = '${height}px';

    _disableTransitions(_square!);

    _point = createDiv()
      ..style.width = '${pointSize}px'
      ..style.height = '${pointSize}px'
      ..style.borderRadius = '${pointSizeHalf}px'
      ..style.position = 'relative';

    _disableTransitions(_point!);

    _square!.children.add(_point!);

    _lumaBar = createDiv()
      ..style.width = '${barSize}px'
      ..style.height = '1px'
      ..style.position = 'relative';

    _disableTransitions(_lumaBar!);

    _luma!.children.add(_lumaBar!);

    _saturationBar = createDiv()
      ..style.width = '1px'
      ..style.height = '${barSize}px'
      ..style.backgroundColor = 'rgb(0,0,0)'
      ..style.position = 'relative';

    _disableTransitions(_saturationBar!);

    _saturation!.children.add(_saturationBar!);

    _panel_Saturation_Luma_Square!.children.add(_panel_ViewColor_Saturation!);
    _panel_Saturation_Luma_Square!.children.add(_luma!);
    _panel_Saturation_Luma_Square!.children.add(_square!);

    _hue = createDiv()
      ..style.backgroundColor = 'red'
      ..style.width = '${width + barSize}px'
      ..style.height = '${barSize}px'
      ..style.background =
          'linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)';

    _disableTransitions(_hue!);

    _hueBar = createDiv()
      ..style.width = '1px'
      ..style.height = '${barSize}px'
      ..style.position = 'relative';

    _disableTransitions(_hueBar!);

    _hue!.children.add(_hueBar!);

    _panel_all!.children.add(_panel_Saturation_Luma_Square!);
    _panel_all!.children.add(_hue!);

    //

    _viewColor!.onClick.listen((_) {
      onClickColor.add(color!);
    });

    //

    _square!.onMouseDown.listen((event) {
      _squareDown(event);
      _squareDrag(event);
    });
    _square!.onMouseUp.listen(_squareUp);
    _square!.onMouseMove.listen(_squareDrag);

    redirectOnTouchStartToMouseEvent(_square!);
    _square!.onTouchEnd.listen(_squareUp);
    redirectOnTouchMoveToMouseEvent(_square!);

    _square!.onClick.listen(_squareClick);

    //

    _luma!.onMouseDown.listen(_lumaDown);
    _luma!.onMouseUp.listen(_lumaUp);
    _luma!.onMouseMove.listen(_lumaDrag);

    _luma!.onTouchStart.listen(_lumaDown);
    _luma!.onTouchEnd.listen(_lumaUp);
    redirectOnTouchMoveToMouseEvent(_luma!);

    _luma!.onClick.listen(_lumaClick);

    //

    _saturation!.onMouseDown.listen(_saturationDown);
    _saturation!.onMouseUp.listen(_saturationUp);
    _saturation!.onMouseMove.listen(_saturationDrag);

    _saturation!.onTouchStart.listen(_saturationDown);
    _saturation!.onTouchEnd.listen(_saturationUp);
    redirectOnTouchMoveToMouseEvent(_saturation!);

    _saturation!.onClick.listen(_saturationClick);

    //

    _hue!.onMouseDown.listen(_hueDown);
    _hue!.onMouseUp.listen(_hueUp);
    //_hue.onMouseLeave.listen(_hueUp);
    _hue!.onTouchStart.listen(_hueDown);
    //_hue.onTouchEnd.listen(_hueUp);
    _hue!.onClick.listen(_hueClick);
    _hue!.onMouseMove.listen(_hueDrag);

    //

    content!.onMouseLeave.listen(_allUp);
    content!.onTouchEnd.listen(_allUp);
  }

  var saturationX = _clip((_hsvColor!.saturation * width), 0, width);
  var lumaY = _clip(((1 - _hsvColor!.value) * height), 0, height);
  var hueX =
      _clip(((_hsvColor!.hue / 360) * (width + barSize)), 0, width + barSize);

  _point!.style.left = '${saturationX - pointSizeHalf}px';
  _point!.style.top = '${lumaY - pointSizeHalf}px';

  var c = Color.fromARGB(
      255, 255 - _color!.red, 255 - _color!.green, 255 - _color!.blue);
  _point!.style.background = 'rgb(${c.red},${c.green},${c.blue})';

  _saturationBar!.style.left = '${saturationX}px';
  _lumaBar!.style.top = '${lumaY}px';
  _hueBar!.style.left = '${hueX}px';

  _lumaBar!.style.backgroundColor =
      'rgb(${_baseColor!.red},${_baseColor!.green},${_baseColor!.blue}';

  _hueBar!.style.backgroundColor =
      'rgb(${255 - _baseColor!.red},${255 - _baseColor!.green},${255 - _baseColor!.blue}';

  _viewColor!.style.backgroundColor =
      'rgb(${_color!.red},${_color!.green},${_color!.blue})';

  _saturation!.style.background =
      'linear-gradient(90deg, rgba(0,0,0,0), rgba(${_baseColor!.red},${_baseColor!.green},${_baseColor!.blue},1))';

  _luma!.style.background =
      'linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0) )';
  _square!.style.background =
      'linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0) ), linear-gradient(270deg, rgb(${_baseColor!.red},${_baseColor!.green},${_baseColor!.blue}), rgb(255,255,255))';

  return _panel_all;
}