Server : Apache/2.4.41 (Ubuntu) System : Linux absol.cf 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64 User : www-data ( 33) PHP Version : 7.4.33 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare, Directory :  /var/www/html/libs/absol-full/dist/js/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

/*** module: node_modules/absol-vchart/src/HorizontalRangeChart.js ***/
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.HRCFixedAxisController = HRCFixedAxisController;
exports.default = void 0;

var _VCore = _interopRequireWildcard(require("./VCore"));

var _BChart = _interopRequireWildcard(require("./BChart"));

var _OOP = _interopRequireWildcard(require("absol/src/HTML5/OOP"));

var _utils = require("absol-acomp/js/utils");

var _SelectColorSchemeMenu = require("absol-acomp/js/colorpicker/SelectColorSchemeMenu");

var _SvgCanvas = _interopRequireDefault(require("absol-svg/js/svg/SvgCanvas"));

var _KeyNote = require("./KeyNote");

var _AElement = _interopRequireDefault(require("absol/src/HTML5/AElement"));

var _Turtle = _interopRequireDefault(require("absol/src/Math/Turtle"));

var _int = require("absol/src/Math/int");

var _helper = require("./helper");

var _DelaySignal = _interopRequireDefault(require("absol/src/HTML5/DelaySignal"));

var _Object = require("absol/src/DataStructure/Object");

var _GContainer = _interopRequireDefault(require("absol-svg/js/svg/GContainer"));

var _noop = _interopRequireDefault(require("absol/src/Code/noop"));

var _Dom = require("absol/src/HTML5/Dom");




/**
 * @extends SvgCanvas
 * @constructor
 */
function HorizontalRangeChart() {
  this.resizeCtrl = new _BChart.ChartResizeController(this);
  this.titleCtrl = new _BChart.ChartTitleController(this);
  this.fixedAxisCtrl = new HRCFixedAxisController(this);
  this.$attachhook.once('attached', () => {
    this.fixedAxisCtrl.start();
    this.updateContent();
  });
  /**
   *
   * @type {KeyNoteGroup}
   */

  this.$keyNoteGroup = (0, _VCore.$)(_KeyNote.KeyNoteGroup.tag, this);
  this.$title = (0, _VCore.$)('.vc-title', this);
  this.$body = (0, _VCore.$)('.vc-body', this);
  this.$axis = (0, _VCore.$)('.vchart-axis', this);
  this.$oxy = (0, _VCore.$)('#oxy', this);
  this.$oxArrow = (0, _VCore.$)('#ox-arrow', this);
  this.$oyLabelCtn = (0, _VCore.$)('.vc-oy-label-ctn', this);
  this.$oxLabelCtn = (0, _VCore.$)('.vc-ox-label-ctn', this);
  this.$rangeCtn = (0, _VCore.$)('.vc-range-ctn', this);
  this.$grid = (0, _VCore.$)('.vc-grid', this);
  this.$valueName = (0, _VCore.$)('.vc-value-name', this);
  this.domSignal = new _DelaySignal.default();
  this.$fixedContentRef = (0, _VCore.$)('.vc-fixed-content-ref', this);
  this.domSignal.on({
    updateContent: () => {
      if (this.isDescendantOf(document.body)) {
        this.fixedAxisCtrl.start();
        this.updateContent();
      }
    }
  });
  (0, _Object.observePropertyChanges)(this, this.dataKeys, () => {
    if (this.domSignal) this.domSignal.emit('updateContent');
  });
  /**
   * @name ranges
   * @type {[]}
   * @memberof HorizontalRangeChart#
   */

  /**
   * @name maxText
   * @type {string}
   * @memberof HorizontalRangeChart#
   */

  /**
   * @name valueName
   * @type {string}
   * @memberof HorizontalRangeChart#
   */

  /**
   * @name minText
   * @type {string}
   * @memberof HorizontalRangeChart#
   */

  /**
   * @name midText
   * @type {string}
   * @memberof HorizontalRangeChart#
   */

  /**
   * @name normalText
   * @type {string}
   * @memberof HorizontalRangeChart#
   */

  /**
   * @name zeroOY
   * @type {boolean}
   * @memberof HorizontalRangeChart
   */
}

(0, _OOP.mixClass)(HorizontalRangeChart, _BChart.default);
HorizontalRangeChart.tag = 'HorizontalRangeChart'.toLowerCase();

HorizontalRangeChart.render = function (data, o, dom) {
  var res = (0, _VCore._)({
    tag: _SvgCanvas.default,
    class: ['vc-chart', 'vc-horizontal-range-chart', 'as-height-auto'],
    style: {},
    child: [{
      tag: 'text',
      class: 'vc-title',
      attr: {
        'alignment-baseline': "hanging"
      },
      child: {
        text: ''
      }
    }, {
      tag: 'rect',
      class: 'vc-fixed-content-ref',
      attr: {
        width: '10',
        height: '33'
      },
      style: {
        fill: 'transparent',
        stroke: 'none'
      }
    }, {
      tag: _KeyNote.KeyNoteGroup
    }, {
      tag: 'gcontainer',
      class: 'vc-body',
      child: [{
        tag: 'path',
        class: 'vc-grid'
      }, {
        tag: 'gcontainer',
        class: 'vchart-axis',
        child: [{
          tag: 'path',
          id: 'oxy',
          attr: {
            d: 'm0 -1v1 h1',
            fill: 'none'
          }
        }, {
          tag: 'path',
          id: "ox-arrow",
          attr: {
            d: 'm0 -5v10l6.8 -5z'
          }
        }]
      }, {
        tag: 'gcontainer',
        class: 'vc-oy-label-ctn'
      }, {
        tag: 'text',
        class: 'vc-value-name',
        child: {
          text: ''
        }
      }, {
        tag: 'gcontainer',
        class: 'vc-ox-label-ctn'
      }, {
        tag: 'gcontainer',
        class: 'vc-range-ctn'
      }]
    }]
  });
  var colorScheme = o && o.props && o.props.colorScheme;

  if ((0, _utils.isNaturalNumber)(colorScheme)) {
    colorScheme = Math.max(0, Math.min(_SelectColorSchemeMenu.DEFAULT_CHART_COLOR_SCHEMES.length, colorScheme));
    res.attr('data-color-scheme', colorScheme + '');
  }

  return res;
};

HorizontalRangeChart.prototype.rowSpacing = 40;
HorizontalRangeChart.prototype.plotRadius = 8;
HorizontalRangeChart.prototype.rangeHeight = 20;
HorizontalRangeChart.prototype.rangeWidth = 3;
HorizontalRangeChart.prototype.rangeMaxColor = '#86aeea';
HorizontalRangeChart.prototype.rangeMinColor = '#7ebd3b';
HorizontalRangeChart.prototype.rangeMidColor = 'red';
HorizontalRangeChart.prototype.rangeMidHeight = 26;
HorizontalRangeChart.prototype.rangeMidWidth = 5;
HorizontalRangeChart.prototype.normalColor = 'rgb(247, 148, 29)';
HorizontalRangeChart.prototype.dataKeys = _BChart.default.prototype.dataKeys.concat(['rowSpacing', 'plotRadius', 'rangeHeight', 'ranges', 'rangeWidth', 'rangeMaxColor', 'rangeMinColor', 'rangeMidHeight', 'rangeMidWidth']);

HorizontalRangeChart.prototype.numberToString = function () {
  return _int.numberToString.apply(this, arguments);
};

HorizontalRangeChart.prototype.addStyle = function (arg0, arg1) {
  if (arg0 === 'height') {
    if (arg1 === 'auto') {
      this.addClass('as-height-auto');
    }
  } else {
    this.removeClass('as-height-auto');

    _AElement.default.prototype.addStyle.apply(this, arguments);
  }

  return this;
};

HorizontalRangeChart.prototype.revokeResource = function () {
  _BChart.default.prototype.revokeResource.call(this);

  this.fixedAxisCtrl.revokeResource();
};

HorizontalRangeChart.prototype.createNote = function () {
  var items = [{
    noteType: 'line',
    text: this.minText || 'Minimum',
    key: 'min',
    color: this.rangeMinColor
  }, {
    noteType: 'line',
    text: this.midText || 'Medium',
    key: 'mid',
    color: this.rangeMidColor
  }, {
    noteType: 'line',
    text: this.maxText || 'Maximum',
    key: 'max',
    color: this.rangeMaxColor
  }, {
    noteType: 'point',
    text: this.normalText || 'Normal',
    key: 'normal',
    color: this.normalColor
  }];
  this.$keyNoteGroup.items = items;
};

HorizontalRangeChart.prototype.createOYLabel = function () {
  var ranges = this.ranges;
  if (!Array.isArray(ranges)) ranges = [];
  if (this.$oyLabels) this.$oyLabels.forEach(e => e.remove());
  this.$oyLabels = ranges.map(it => {
    return (0, _VCore._)({
      tag: 'text',
      attr: {
        'alignment-baseline': "middle"
      },
      child: {
        text: it.name
      }
    });
  });
  this.$oyLabelCtn.addChild(this.$oyLabels);
};

HorizontalRangeChart.prototype.createRanges = function () {
  var ranges = this.ranges;
  if (!Array.isArray(ranges)) ranges = [];
  this.$ranges = ranges.map(range => {
    var elt = (0, _VCore._)({
      tag: 'gcontainer',
      child: []
    });
    elt.$line = (0, _VCore._)({
      tag: 'path',
      style: {
        stroke: 'rgb(124,124,147)',
        strokeWidth: 3
      }
    });
    elt.addChild(elt.$line);

    if ((0, _utils.isRealNumber)(range.normal)) {
      elt.$normal = (0, _VCore._)({
        tag: 'circle',
        attr: {
          cx: 0,
          cy: 0,
          r: this.plotRadius,
          title: this.numberToString(range.normal)
        },
        style: {
          fill: this.normalColor,
          stroke: 'rgb(92, 92, 95)'
        }
      });
      elt.addChild(elt.$normal);
    }

    elt.$min = (0, _VCore._)({
      tag: 'rect',
      attr: {
        x: -this.rangeWidth / 2,
        y: -this.rangeHeight / 2,
        width: this.rangeWidth,
        height: this.rangeHeight,
        title: this.numberToString(range.min)
      },
      style: {
        fill: this.rangeMinColor,
        // fill:'black',
        // fill: 'rgb(72, 72, 75)',
        stroke: 'none'
      }
    });
    elt.addChild(elt.$min);

    if ((0, _utils.isRealNumber)(range.mid)) {
      elt.$mid = (0, _VCore._)({
        tag: _GContainer.default,
        child: {
          tag: 'rect',
          style: {
            // fill: '#58EBF4',
            fill: 'red',
            stroke: 'none'
          },
          attr: {
            // x: -this.plotRadius / 1.4,
            // y: -this.plotRadius / 1.4,
            // width: this.plotRadius / 0.7, height: this.plotRadius / 0.7,
            width: this.rangeMidWidth,
            height: this.rangeMidHeight,
            x: -this.rangeMidWidth / 2,
            y: -this.rangeMidHeight / 2,
            title: this.numberToString(range.mid) // transform:'rotate(45)'

          }
        }
      });
      elt.addChild(elt.$mid);
    }

    elt.$max = (0, _VCore._)({
      tag: 'rect',
      style: {
        fill: this.rangeMaxColor,
        // fill: 'rgb(72, 72, 75)',
        stroke: 'none'
      },
      attr: {
        x: -this.rangeWidth / 2,
        y: -this.rangeHeight / 2,
        width: this.rangeWidth,
        height: this.rangeHeight,
        title: this.numberToString(range.max)
      }
    });
    elt.addChild(elt.$max);
    return elt;
  });
  this.$rangeCtn.clearChild().addChild(this.$ranges);
};

HorizontalRangeChart.prototype.updateSize = function () {
  _SvgCanvas.default.prototype.updateSize.call(this);

  this.updateContentPosition();
};

HorizontalRangeChart.prototype.updateContentPosition = function () {
  if (!this.$oyLabels) return;
  var ranges = this.ranges;
  if (!Array.isArray(ranges)) ranges = [];
  var i, j;
  var width = this.box.width || 0;
  var y = 5;
  this.$title.attr('x', width / 2).attr('y', y);
  y += 30;
  this.$keyNoteGroup.box.width = width - 20;
  this.$keyNoteGroup.box.x = 10;
  this.$keyNoteGroup.box.y = y;
  this.$keyNoteGroup.updateSize();
  this.$keyNoteGroup.box.x = width / 2 - this.$keyNoteGroup.getBBox().width / 2;
  y += (this.$keyNoteGroup.box.height || 0) + 20;
  this.$body.box.y = y + 24;
  var oyLabelWidth = this.$oyLabels.reduce((ac, cr) => Math.max(ac, cr.getBBox().width), 0);
  oyLabelWidth = Math.ceil(oyLabelWidth);
  var spacing = this.rowSpacing;
  this.$body.box.x = oyLabelWidth + 10;
  this.$body.box.width = width - this.$body.box.x - 10;
  this.$fixedContentRef.attr('y', this.$body.box.y - 24);
  this.$fixedContentRef.attr('width', this.$body.box.width + this.$body.box.x + 8);
  this.$oyLabelCtn.box.x = -this.$body.box.x;
  this.$axis.box.width = this.$body.box.width;
  this.$oxArrow.attr('d', 'M' + this.$axis.box.width + ' 0 m0 -5v10l6.8 -5z');
  this.$axis.box.height = spacing * this.$oyLabels.length;
  /**
   *
   * @type {Turtle}
   */

  var turtle = new _Turtle.default().moveTo(this.$axis.box.width, 0).hLineTo(0).vLineTo(this.$axis.box.height);
  var valueNameWidth = this.$valueName.getBBox().width;
  this.$valueName.attr('x', this.$axis.box.width).attr('y', -8);
  var dx = Math.max(100, Math.floor(20 + (0, _helper.measureArial14TextWidth)(this.numberToString(this.computedData.max))));
  var sm = (0, _helper.calBeautySegment)(Math.floor((this.$axis.box.width - valueNameWidth - 10 - dx / 2) / dx), this.computedData.min, this.computedData.max + 1);
  this.computedData.sm = sm;
  dx = Math.floor((this.$axis.box.width - valueNameWidth - 10 - dx / 2) / sm.segmentCount);
  var dv = (sm.maxValue - sm.minValue) / sm.segmentCount;
  this.computedData.dx = dx; //for fixed content

  this.computedData.dv = dv;
  turtle.moveTo(0, 2);

  for (i = 0; i < sm.segmentCount; ++i) {
    turtle.moveBy(dx, -4);
    turtle.vLineBy(4);
  }

  this.$oxy.attr('d', turtle.getPath());
  this.$oyLabels.forEach((elt, i) => {
    elt.attr('y', i * spacing + spacing / 2);
  });

  while (this.$oxLabelCtn.childNodes.length > sm.segmentCount + 1 && this.$oxLabelCtn.lastChild) this.$oxLabelCtn.lastChild.remove();

  while (this.$oxLabelCtn.childNodes.length < sm.segmentCount + 1) this.$oxLabelCtn.addChild((0, _VCore._)({
    tag: 'text',
    style: {
      textAnchor: 'middle'
    },
    attr: {
      y: -8
    },
    child: {
      text: ''
    }
  }));

  Array.prototype.forEach.call(this.$oxLabelCtn.childNodes, (elt, i) => {
    elt.firstChild.data = this.numberToString(sm.minValue + i * dv);
    elt.attr('x', dx * i);
  });
  turtle = new _Turtle.default();
  var oxLength = this.$axis.box.width - 5;
  turtle.moveTo(oxLength, 0);

  for (i = 0; i < ranges.length; ++i) {
    turtle.moveBy(-oxLength, spacing).hLineBy(oxLength);
  }

  turtle.moveTo(0, spacing * ranges.length, 0);

  for (i = 0; i < sm.segmentCount; ++i) {
    turtle.moveBy(dx, -spacing * ranges.length).vLineBy(spacing * ranges.length);
  }

  this.$grid.attr('d', turtle.getPath());
  this.$ranges.forEach((elt, i) => {
    elt.box.y = i * spacing + spacing / 2;
    var range = ranges[i];
    elt.$min.attr('x', (0, _helper.map)(range.min - sm.minValue, 0, dv, 0, dx) - this.rangeWidth / 2);
    if (elt.$mid) elt.$mid.box.x = (0, _helper.map)(range.mid - sm.minValue, 0, dv, 0, dx);
    elt.$max.attr('x', (0, _helper.map)(range.max - sm.minValue, 0, dv, 0, dx) - this.rangeWidth / 2);
    elt.$line.attr('d', `M${(0, _helper.map)(range.min - sm.minValue, 0, dv, 0, dx)} 0 l${(0, _helper.map)(range.max - range.min, 0, dv, 0, dx)} 0`);
    if (elt.$normal) elt.$normal.attr('cx', (0, _helper.map)(range.normal - sm.minValue, 0, dv, 0, dx));
  });
  this.$body.box.height = this.$axis.box.height + 10; //10px : padding bottom

  this.box.height = this.$body.box.y + this.$body.box.height;
  this.fixedAxisCtrl.updateContentPosition();
};

HorizontalRangeChart.prototype.computeData = function () {
  var ranges = Array.isArray(this.ranges) ? this.ranges : [];
  this.computedData = {};
  this.computedData.max = ranges.reduce((ac, cr) => Math.max(ac, cr.min, cr.max, cr.mid), -Infinity);
  this.computedData.min = ranges.reduce((ac, cr) => Math.min(ac, cr.min, cr.max, cr.mid), Infinity);
  if (this.zeroOY) this.computedData.min = Math.min(this.computedData.min, 0);
};

HorizontalRangeChart.prototype.updateContent = function () {
  this.computeData();
  this.$title.firstChild.data = this.title;
  this.$valueName.firstChild.data = this.valueName || '';
  this.createNote();
  this.createOYLabel();
  this.createRanges();
  this.fixedAxisCtrl.updateContent();
  this.updateContentPosition();
};

_VCore.default.install(HorizontalRangeChart);

var _default = HorizontalRangeChart;
/**
 *
 * @param {HorizontalRangeChart|SvgCanvas}elt
 * @constructor
 */

exports.default = _default;

function HRCFixedAxisController(elt) {
  this.elt = elt;
  this.state = 'PENDING';
  this.listenningElementList = [];
  this.ev_scroll = this.ev_scroll.bind(this);
  this.$canvas = null;
}

HRCFixedAxisController.prototype.start = function () {
  if (this.state !== 'PENDING') return;
  this.state = "RUNNING";
  var elt = this.elt.parentElement;

  while (elt) {
    elt.addEventListener('scroll', this.ev_scroll);
    this.listenningElementList.push(elt);
    elt = elt.parentElement;
  }

  elt = document;
  elt.addEventListener('scroll', this.ev_scroll);
  this.listenningElementList.push(elt);
  this.$canvas = (0, _VCore._)({
    tag: _SvgCanvas.default.tag,
    class: 'vc-chart',
    style: {
      pointerEvents: 'none',
      minHeight: 'unset',
      position: 'fixed',
      zIndex: (0, _utils.findMaxZIndex)(this.elt) + 100,
      left: 0,
      top: 0,
      visibility: 'hidden',
      height: '33px',
      backgroundColor: 'transparent'
    },
    child: [{
      tag: 'path',
      class: 'vc-fixed-axis-bg',
      style: {
        pointerEvents: 'all',
        fill: 'white',
        stroke: 'none'
      }
    }, {
      tag: 'gcontainer',
      class: 'vc-body',
      child: [{
        tag: 'gcontainer',
        class: 'vc-ox-label-ctn'
      }, {
        tag: 'text',
        class: 'vc-value-name',
        child: {
          text: ''
        }
      }, {
        tag: 'gcontainer',
        class: 'vchart-axis',
        child: [{
          tag: 'path',
          id: 'oxy',
          attr: {
            d: 'm0 -1v1 h1',
            fill: 'none'
          }
        }, {
          tag: 'path',
          id: "ox-arrow",
          attr: {
            d: 'm0 -5v10l6.8 -5z'
          }
        }]
      }]
    }]
  }).addTo(this.elt.parentElement);
  this.$bg = (0, _VCore.$)('.vc-fixed-axis-bg', this.$canvas);
  this.$body = (0, _VCore.$)('.vc-body', this.$canvas);
  this.$axis = (0, _VCore.$)('.vchart-axis', this.$canvas);
  this.$oxy = (0, _VCore.$)('#oxy', this.$canvas);
  this.$oxArrow = (0, _VCore.$)('#ox-arrow', this.$canvas);
  this.$body.box.y = 25;
  this.$oxLabelCtn = (0, _VCore.$)('.vc-ox-label-ctn', this.$canvas);
  this.$valueName = (0, _VCore.$)('.vc-value-name', this.$canvas);
};

HRCFixedAxisController.prototype.stop = function () {
  if (this.state !== 'RUNNING') return;
  this.state = "STOPPED";
  var elt;

  while (this.listenningElementList.length > 0) {
    elt = this.listenningElementList.pop();
    elt.removeEventListener('scroll', this.ev_scroll);
  }

  this.$canvas.remove();
};

HRCFixedAxisController.prototype.revokeResource = function () {
  this.revokeResource = _noop.default;
  this.stop();
  this.elt = null;
  this.revokeResource = _noop.default;
};

HRCFixedAxisController.prototype.updateContent = function () {
  this.$valueName.firstChild.data = this.elt.valueName || '';
};

HRCFixedAxisController.prototype.updateContentPosition = function () {
  if (this.state !== "RUNNING") return;
  var i;
  if (!this.elt.computedData) return;
  var sm = this.elt.computedData.sm;
  var dx = this.elt.computedData.dx;
  var dv = this.elt.computedData.dv;
  var width = parseFloat(this.elt.$fixedContentRef.attr('width'));
  var height = parseFloat(this.elt.$fixedContentRef.attr('height'));
  this.$canvas.addStyle({
    width: width + 'px',
    height: height + 1 + 'px'
  });
  this.$canvas.box.setSize(width, height);
  this.$body.box.x = this.elt.$body.box.x;
  this.$axis.box.x = this.elt.$axis.box.x;
  this.$oxArrow.attr('d', 'M' + this.elt.$axis.box.width + ' 0 m0 -5v10l6.8 -5z');
  this.$valueName.attr('x', this.elt.$axis.box.width).attr('y', -8);
  var turtle = new _Turtle.default().moveTo(this.elt.$axis.box.width, 0).hLineTo(0).vLineTo(10);
  turtle.moveTo(0, 2);

  for (i = 0; i < sm.segmentCount; ++i) {
    turtle.moveBy(dx, -4);
    turtle.vLineBy(4);
  }

  this.$oxy.attr('d', turtle.getPath());

  while (this.$oxLabelCtn.childNodes.length > sm.segmentCount + 1 && this.$oxLabelCtn.lastChild) this.$oxLabelCtn.lastChild.remove();

  while (this.$oxLabelCtn.childNodes.length < sm.segmentCount + 1) this.$oxLabelCtn.addChild((0, _VCore._)({
    tag: 'text',
    style: {
      textAnchor: 'middle'
    },
    attr: {
      y: -8
    },
    child: {
      text: ''
    }
  }));

  Array.prototype.forEach.call(this.$oxLabelCtn.childNodes, (elt, i) => {
    elt.firstChild.data = this.elt.numberToString(sm.minValue + i * dv);
    elt.attr('x', dx * i);
  });
  turtle = new _Turtle.default();
  turtle.moveTo(width, 0).vLineTo(height).hLineBy(-8).vLineBy(-9).hLineTo(0).vLineTo(0).closePath();
  this.$bg.attr('d', turtle.getPath());
  this.updateDomPosition();
};

HRCFixedAxisController.prototype.updateDomPosition = function () {
  var outBound = (0, _Dom.traceOutBoundingClientRect)(this.elt);
  var refBound = this.elt.$fixedContentRef.getBoundingClientRect();
  var bound = this.elt.getBoundingClientRect();
  var hidden = false;
  hidden = hidden || bound.bottom < outBound.top + refBound.height + 5;
  hidden = hidden || refBound.top > outBound.top;

  if (hidden) {
    this.$canvas.addStyle('visibility', 'hidden');
  } else {
    this.$canvas.removeStyle('visibility');
    this.$canvas.addStyle({
      left: refBound.left - 0.5 + 'px',
      top: Math.max(refBound.top, outBound.top) - 1.5 + 'px'
    });
  }
};

HRCFixedAxisController.prototype.ev_scroll = function () {
  if (this.elt.isDescendantOf(document.body)) {
    this.updateDomPosition();
  } else {
    this.stop();
    this.revokeResource();
  }
};