continuous.js 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654
  1. import { __assign, __extends, __read, __spreadArray } from "tslib";
  2. import { CustomEvent } from '@antv/g';
  3. import { Linear } from '@antv/scale';
  4. import { clamp, isUndefined, memoize } from '@antv/util';
  5. import { GUI } from '../../core';
  6. import { BBox, deepAssign, getEventPos, hide, ifShow, select, show, subStyleProps, superStyleProps, toPrecision, } from '../../util';
  7. import { Axis } from '../axis';
  8. import { CLASS_NAMES as AXIS_CLASS_NAMES } from '../axis/constant';
  9. import { Indicator } from '../indicator';
  10. import { Title } from '../title';
  11. import { CLASS_NAMES, CONTINUOUS_DEFAULT_OPTIONS, STEP_RATIO } from './constant';
  12. import { Handle } from './continuous/handle';
  13. import { Ribbon } from './continuous/ribbon';
  14. import { getNextTickValue } from './continuous/utils';
  15. import { getSafetySelections, getStepValueByValue, ifHorizontal } from './utils';
  16. import { Handle as SliderHandle } from '../slider/handle';
  17. var getMinMax = memoize(function (data) {
  18. return {
  19. min: Math.min.apply(Math, __spreadArray([], __read(data.map(function (d) { return d.value; })), false)),
  20. max: Math.max.apply(Math, __spreadArray([], __read(data.map(function (d) { return d.value; })), false)),
  21. };
  22. }, function (data) { return data.map(function (d) { return d.id; }); });
  23. var Continuous = /** @class */ (function (_super) {
  24. __extends(Continuous, _super);
  25. function Continuous(options) {
  26. var _this = _super.call(this, options, CONTINUOUS_DEFAULT_OPTIONS) || this;
  27. _this.eventToOffsetScale = new Linear({});
  28. _this.innerRibbonScale = new Linear({});
  29. _this.cacheLabelBBox = null;
  30. _this.cacheHandleBBox = null;
  31. _this.onHovering = function (e) {
  32. var _a = _this.attributes, data = _a.data, block = _a.block;
  33. e.stopPropagation();
  34. var value = _this.getValueByCanvasPoint(e);
  35. if (block) {
  36. var range = getNextTickValue(data.map(function (_a) {
  37. var value = _a.value;
  38. return value;
  39. }), value).range;
  40. _this.showIndicator((range[0] + range[1]) / 2, "".concat(range[0], "-").concat(range[1]));
  41. _this.dispatchIndicated(value, range);
  42. }
  43. else {
  44. var safetyValue = _this.getTickValue(value);
  45. _this.showIndicator(safetyValue);
  46. _this.dispatchIndicated(safetyValue);
  47. }
  48. };
  49. _this.onDragStart = function (target) { return function (e) {
  50. e.stopPropagation();
  51. // 关闭滑动
  52. if (!_this.attributes.slidable)
  53. return;
  54. _this.target = target;
  55. _this.prevValue = _this.getTickValue(_this.getValueByCanvasPoint(e));
  56. document.addEventListener('mousemove', _this.onDragging);
  57. document.addEventListener('touchmove', _this.onDragging);
  58. document.addEventListener('mouseleave', _this.onDragEnd);
  59. document.addEventListener('mouseup', _this.onDragEnd);
  60. document.addEventListener('mouseup', _this.onDragEnd);
  61. document.addEventListener('touchend', _this.onDragEnd);
  62. }; };
  63. _this.onDragging = function (e) {
  64. var target = _this.target;
  65. _this.updateMouse();
  66. var _a = __read(_this.selection, 2), start = _a[0], end = _a[1];
  67. var currValue = _this.getTickValue(_this.getValueByCanvasPoint(e));
  68. var diffValue = currValue - _this.prevValue;
  69. if (target === 'start')
  70. start !== currValue && _this.updateSelection(currValue, end);
  71. else if (target === 'end')
  72. end !== currValue && _this.updateSelection(start, currValue);
  73. else if (target === 'ribbon' && diffValue !== 0) {
  74. _this.prevValue = currValue;
  75. _this.updateSelection(diffValue, diffValue, true);
  76. }
  77. };
  78. _this.onDragEnd = function () {
  79. _this.style.cursor = 'default';
  80. document.removeEventListener('mousemove', _this.onDragging);
  81. document.removeEventListener('touchmove', _this.onDragging);
  82. document.removeEventListener('mouseup', _this.onDragEnd);
  83. document.removeEventListener('touchend', _this.onDragEnd);
  84. };
  85. return _this;
  86. }
  87. Object.defineProperty(Continuous.prototype, "handleOffsetRatio", {
  88. get: function () {
  89. return this.ifHorizontal(0.5, 0.5);
  90. },
  91. enumerable: false,
  92. configurable: true
  93. });
  94. Continuous.prototype.getBBox = function () {
  95. var _a = this.attributes, width = _a.width, height = _a.height;
  96. return new BBox(0, 0, width, height);
  97. };
  98. Continuous.prototype.render = function (attributes, container) {
  99. var _this = this;
  100. // 渲染顺序
  101. // 1. 绘制 title, 获得可用空间
  102. // 2. 绘制 label, handle
  103. // 3. 基于可用空间、label高度、handle 宽高,计算 ribbon 宽高
  104. // 4. 绘制 ribbon
  105. // 5. 调整 label、handle 位置
  106. var showLabel = attributes.showLabel;
  107. /** title */
  108. this.renderTitle(select(container));
  109. var _a = this.availableSpace, x = _a.x, y = _a.y;
  110. /** label */
  111. /** content */
  112. var contentGroup = select(container).maybeAppendByClassName(CLASS_NAMES.contentGroup, 'g').styles({ x: x, y: y });
  113. var labelGroup = contentGroup.maybeAppendByClassName(CLASS_NAMES.labelGroup, 'g').styles({ zIndex: 1 });
  114. ifShow(!!showLabel, labelGroup, function (group) {
  115. _this.renderLabel(group);
  116. });
  117. var ribbonGroup = contentGroup.maybeAppendByClassName(CLASS_NAMES.ribbonGroup, 'g').styles({ zIndex: 0 });
  118. /** handle */
  119. this.handlesGroup = contentGroup.maybeAppendByClassName(CLASS_NAMES.handlesGroup, 'g').styles({ zIndex: 2 });
  120. this.renderHandles();
  121. /** ribbon */
  122. this.renderRibbon(ribbonGroup);
  123. this.renderIndicator(contentGroup);
  124. /** adjust */
  125. this.adjustLabel();
  126. this.adjustHandles();
  127. };
  128. Object.defineProperty(Continuous.prototype, "range", {
  129. get: function () {
  130. var data = this.attributes.data;
  131. return getMinMax(data);
  132. },
  133. enumerable: false,
  134. configurable: true
  135. });
  136. Object.defineProperty(Continuous.prototype, "ribbonScale", {
  137. get: function () {
  138. var _a = this.range, min = _a.min, max = _a.max;
  139. this.innerRibbonScale.update({
  140. domain: [min, max],
  141. range: [0, 1],
  142. });
  143. return this.innerRibbonScale;
  144. },
  145. enumerable: false,
  146. configurable: true
  147. });
  148. Object.defineProperty(Continuous.prototype, "ribbonRange", {
  149. get: function () {
  150. var _a = __read(this.selection, 2), min = _a[0], max = _a[1];
  151. var scale = this.ribbonScale;
  152. return [scale.map(min), scale.map(max)];
  153. },
  154. enumerable: false,
  155. configurable: true
  156. });
  157. Object.defineProperty(Continuous.prototype, "selection", {
  158. get: function () {
  159. var _a = this.range, min = _a.min, max = _a.max;
  160. var _b = this.attributes.defaultValue, _c = _b === void 0 ? [min, max] : _b, _d = __read(_c, 2), start = _d[0], end = _d[1];
  161. return [start, end];
  162. },
  163. enumerable: false,
  164. configurable: true
  165. });
  166. Continuous.prototype.ifHorizontal = function (a, b) {
  167. return ifHorizontal(this.attributes.orientation, typeof a === 'function' ? a() : a, typeof b === 'function' ? b() : b);
  168. };
  169. Continuous.prototype.renderTitle = function (container) {
  170. var _a = this.attributes, showTitle = _a.showTitle, titleText = _a.titleText, width = _a.width, height = _a.height;
  171. var style = subStyleProps(this.attributes, 'title');
  172. var finalTitleStyle = __assign(__assign({}, style), { width: width, height: height, text: titleText });
  173. var that = this;
  174. container
  175. .selectAll(CLASS_NAMES.title.class)
  176. .data(showTitle ? [titleText] : [])
  177. .join(function (enter) {
  178. return enter
  179. .append(function () { return new Title({ style: finalTitleStyle }); })
  180. .attr('className', CLASS_NAMES.title.name)
  181. .each(function () {
  182. that.title = this;
  183. });
  184. }, function (update) { return update.update(finalTitleStyle); }, function (exit) {
  185. return exit
  186. .each(function () {
  187. that.title = undefined;
  188. })
  189. .remove();
  190. });
  191. };
  192. Object.defineProperty(Continuous.prototype, "availableSpace", {
  193. get: function () {
  194. if (this.title)
  195. return this.title.getAvailableSpace();
  196. var _a = this.attributes, width = _a.width, height = _a.height;
  197. return new BBox(0, 0, width, height);
  198. },
  199. enumerable: false,
  200. configurable: true
  201. });
  202. Object.defineProperty(Continuous.prototype, "labelFixedSpacing", {
  203. get: function () {
  204. var showTick = this.attributes.showTick;
  205. return showTick ? 5 : 0;
  206. },
  207. enumerable: false,
  208. configurable: true
  209. });
  210. Object.defineProperty(Continuous.prototype, "labelPosition", {
  211. get: function () {
  212. var _a = this.attributes, orientation = _a.orientation, labelDirection = _a.labelDirection;
  213. var positions = {
  214. vertical: { positive: 'right', negative: 'left' },
  215. horizontal: { positive: 'bottom', negative: 'top' },
  216. };
  217. return positions[orientation][labelDirection];
  218. },
  219. enumerable: false,
  220. configurable: true
  221. });
  222. Object.defineProperty(Continuous.prototype, "labelBBox", {
  223. get: function () {
  224. var _a;
  225. var showLabel = this.attributes.showLabel;
  226. if (!showLabel)
  227. return new BBox(0, 0, 0, 0);
  228. if (this.cacheLabelBBox)
  229. return this.cacheLabelBBox;
  230. var _b = ((_a = this.label.querySelector(AXIS_CLASS_NAMES.labelGroup.class)) === null || _a === void 0 ? void 0 : _a.children.slice(-1)[0]).getBBox(), width = _b.width, height = _b.height;
  231. this.cacheLabelBBox = new BBox(0, 0, width, height);
  232. return this.cacheLabelBBox;
  233. },
  234. enumerable: false,
  235. configurable: true
  236. });
  237. Object.defineProperty(Continuous.prototype, "labelShape", {
  238. get: function () {
  239. var _a = this.attributes, showLabel = _a.showLabel, _b = _a.labelSpacing, labelSpacing = _b === void 0 ? 0 : _b;
  240. if (!showLabel)
  241. return { width: 0, height: 0, size: 0, length: 0 };
  242. var _c = this.labelBBox, width = _c.width, height = _c.height;
  243. var size = this.ifHorizontal(height, width) + labelSpacing + this.labelFixedSpacing;
  244. var length = this.ifHorizontal(width, height);
  245. return { width: width, height: height, size: size, length: length };
  246. },
  247. enumerable: false,
  248. configurable: true
  249. });
  250. Object.defineProperty(Continuous.prototype, "ribbonBBox", {
  251. get: function () {
  252. var _a = this.attributes, showHandle = _a.showHandle, userDefinedRibbonSize = _a.ribbonSize;
  253. var _b = this.availableSpace, availableWidth = _b.width, availableHeight = _b.height;
  254. var _c = this.labelShape, labelSize = _c.size, labelLength = _c.length;
  255. var _d = __read(this.ifHorizontal([availableHeight, availableWidth], [availableWidth, availableHeight]), 2), availableSize = _d[0], availableLength = _d[1];
  256. var _e = showHandle ? this.handleShape : { size: 0, length: 0 }, handleSize = _e.size, handleLength = _e.length;
  257. var handleRatio = this.handleOffsetRatio;
  258. var ribbonSize = 0;
  259. var labelPosition = this.labelPosition;
  260. if (userDefinedRibbonSize) {
  261. ribbonSize = userDefinedRibbonSize;
  262. }
  263. else if (['bottom', 'right'].includes(labelPosition)) {
  264. ribbonSize = Math.min(availableSize - labelSize, (availableSize - handleSize) / handleRatio);
  265. }
  266. else if (availableSize * (1 - handleRatio) > handleSize) {
  267. ribbonSize = Math.max(availableSize - labelSize, 0);
  268. }
  269. else
  270. ribbonSize = Math.max((availableSize - labelSize - handleSize) / handleRatio, 0);
  271. var edgeLength = Math.max(handleLength, labelLength);
  272. var ribbonLength = availableLength - edgeLength;
  273. var _f = __read(this.ifHorizontal([ribbonLength, ribbonSize], [ribbonSize, ribbonLength]), 2), width = _f[0], height = _f[1];
  274. // 需要考虑 handle 的占用空间
  275. // todo 为了防止因为 handle 文本变化导致的 ribbon 位置变化,handle size 取最大值
  276. var finalLabelOccupy = ['top', 'left'].includes(labelPosition) ? labelSize : 0;
  277. var _g = __read(this.ifHorizontal([edgeLength / 2, finalLabelOccupy], [finalLabelOccupy, edgeLength / 2]), 2), x = _g[0], y = _g[1];
  278. return new BBox(x, y, width, height);
  279. },
  280. enumerable: false,
  281. configurable: true
  282. });
  283. Object.defineProperty(Continuous.prototype, "ribbonShape", {
  284. get: function () {
  285. var _a = this.ribbonBBox, width = _a.width, height = _a.height;
  286. return this.ifHorizontal({ size: height, length: width }, { size: width, length: height });
  287. },
  288. enumerable: false,
  289. configurable: true
  290. });
  291. Continuous.prototype.renderRibbon = function (container) {
  292. var _a = this.attributes, data = _a.data, type = _a.type, orientation = _a.orientation, color = _a.color, block = _a.block;
  293. var ribbonStyle = subStyleProps(this.attributes, 'ribbon');
  294. var _b = this.range, min = _b.min, max = _b.max;
  295. var _c = this.ribbonBBox, x = _c.x, y = _c.y;
  296. var _d = this.ribbonShape, length = _d.length, size = _d.size;
  297. var style = deepAssign({
  298. x: x,
  299. y: y,
  300. length: length,
  301. size: size,
  302. type: type,
  303. orientation: orientation,
  304. color: color,
  305. block: block,
  306. partition: data.map(function (d) { return (d.value - min) / (max - min); }),
  307. range: this.ribbonRange,
  308. }, ribbonStyle);
  309. this.ribbon = container.maybeAppendByClassName(CLASS_NAMES.ribbon, function () { return new Ribbon({ style: style }); }).update(style);
  310. };
  311. Continuous.prototype.getHandleClassName = function (type) {
  312. // @ts-ignore
  313. return "".concat(CLASS_NAMES.prefix("".concat(type, "-handle")));
  314. };
  315. Continuous.prototype.renderHandles = function () {
  316. var _a = this.attributes, showHandle = _a.showHandle, orientation = _a.orientation;
  317. var handleStyle = subStyleProps(this.attributes, 'handle');
  318. var _b = __read(this.selection, 2), min = _b[0], max = _b[1];
  319. var style = __assign(__assign({}, handleStyle), { orientation: orientation });
  320. var _c = handleStyle.shape, shape = _c === void 0 ? 'slider' : _c;
  321. var HandleCtor = shape === 'basic' ? Handle : SliderHandle;
  322. var that = this;
  323. this.handlesGroup
  324. .selectAll(CLASS_NAMES.handle.class)
  325. .data(showHandle
  326. ? [
  327. { value: min, type: 'start' },
  328. { value: max, type: 'end' },
  329. ]
  330. : [], function (d) { return d.type; })
  331. .join(function (enter) {
  332. return enter
  333. .append(function () { return new HandleCtor({ style: style }); })
  334. .attr('className', function (_a) {
  335. var type = _a.type;
  336. return "".concat(CLASS_NAMES.handle, " ").concat(that.getHandleClassName(type));
  337. })
  338. .each(function (_a) {
  339. var type = _a.type, labelText = _a.value;
  340. this.update({ labelText: labelText });
  341. var name = "".concat(type, "Handle");
  342. that[name] = this;
  343. this.addEventListener('pointerdown', that.onDragStart(type));
  344. });
  345. }, function (update) {
  346. return update.update(style).each(function (_a) {
  347. var labelText = _a.value;
  348. this.update({ labelText: labelText });
  349. });
  350. }, function (exit) {
  351. return exit
  352. .each(function (_a) {
  353. var type = _a.type;
  354. var name = "".concat(type, "Handle");
  355. that[name] = undefined;
  356. })
  357. .remove();
  358. });
  359. };
  360. Continuous.prototype.adjustHandles = function () {
  361. var _a = __read(this.selection, 2), min = _a[0], max = _a[1];
  362. this.setHandlePosition('start', min);
  363. this.setHandlePosition('end', max);
  364. };
  365. Object.defineProperty(Continuous.prototype, "handleBBox", {
  366. get: function () {
  367. if (this.cacheHandleBBox)
  368. return this.cacheHandleBBox;
  369. if (!this.attributes.showHandle)
  370. return new BBox(0, 0, 0, 0);
  371. var _a = this.startHandle.getBBox(), startHandleWidth = _a.width, startHandleHeight = _a.height;
  372. var _b = this.endHandle.getBBox(), endHandleWidth = _b.width, endHandleHeight = _b.height;
  373. var _c = __read([Math.max(startHandleWidth, endHandleWidth), Math.max(startHandleHeight, endHandleHeight)], 2), width = _c[0], height = _c[1];
  374. this.cacheHandleBBox = new BBox(0, 0, width, height);
  375. return this.cacheHandleBBox;
  376. },
  377. enumerable: false,
  378. configurable: true
  379. });
  380. Object.defineProperty(Continuous.prototype, "handleShape", {
  381. /**
  382. * 因为 handle label 的宽高是动态的,所以 handle bbox 是第一次渲染时的 bbox
  383. */
  384. get: function () {
  385. var _a = this.handleBBox, width = _a.width, height = _a.height;
  386. var _b = __read(this.ifHorizontal([height, width], [width, height]), 2), size = _b[0], length = _b[1];
  387. return { width: width, height: height, size: size, length: length };
  388. },
  389. enumerable: false,
  390. configurable: true
  391. });
  392. Continuous.prototype.setHandlePosition = function (type, value) {
  393. var handleFormatter = this.attributes.handleFormatter;
  394. var _a = this.ribbonBBox, ribbonX = _a.x, ribbonY = _a.y;
  395. var ribbonSize = this.ribbonShape.size;
  396. var offset = this.getOffset(value);
  397. var _b = __read(this.ifHorizontal([ribbonX + offset, ribbonY + ribbonSize * this.handleOffsetRatio], [ribbonX + ribbonSize * this.handleOffsetRatio, ribbonY + offset]), 2), x = _b[0], y = _b[1];
  398. var handle = this.handlesGroup.select(".".concat(this.getHandleClassName(type))).node();
  399. handle === null || handle === void 0 ? void 0 : handle.update({ x: x, y: y, formatter: handleFormatter });
  400. };
  401. Continuous.prototype.renderIndicator = function (container) {
  402. var style = subStyleProps(this.attributes, 'indicator');
  403. this.indicator = container.maybeAppendByClassName(CLASS_NAMES.indicator, function () { return new Indicator({}); }).update(style);
  404. // this.hideIndicator();
  405. };
  406. Object.defineProperty(Continuous.prototype, "labelData", {
  407. get: function () {
  408. var _this = this;
  409. var data = this.attributes.data;
  410. return data.reduce(function (acc, curr, index, arr) {
  411. var _a, _b;
  412. var id = (_a = curr === null || curr === void 0 ? void 0 : curr.id) !== null && _a !== void 0 ? _a : index.toString();
  413. acc.push(__assign(__assign({}, curr), { id: id, index: index, type: 'value', label: (_b = curr === null || curr === void 0 ? void 0 : curr.label) !== null && _b !== void 0 ? _b : curr.value.toString(), value: _this.ribbonScale.map(curr.value) }));
  414. if (index < arr.length - 1) {
  415. var next = arr[index + 1];
  416. var _c = __read([curr.value, next.value], 2), cr = _c[0], nx = _c[1];
  417. var midVal = (cr + nx) / 2;
  418. acc.push(__assign(__assign({}, curr), { id: id, index: index, type: 'range', range: [cr, nx], label: [cr, nx].join('~'), value: _this.ribbonScale.map(midVal) }));
  419. }
  420. return acc;
  421. }, []);
  422. },
  423. enumerable: false,
  424. configurable: true
  425. });
  426. Object.defineProperty(Continuous.prototype, "labelStyle", {
  427. get: function () {
  428. var _a = __read(['center', 'middle'], 2), labelTextAlign = _a[0], labelTextBaseline = _a[1];
  429. var labelPosition = this.labelPosition;
  430. if (labelPosition === 'top')
  431. labelTextBaseline = 'bottom';
  432. else if (labelPosition === 'bottom')
  433. labelTextBaseline = 'top';
  434. else if (labelPosition === 'left')
  435. labelTextAlign = 'end';
  436. else if (labelPosition === 'right')
  437. labelTextAlign = 'start';
  438. return {
  439. labelTextAlign: labelTextAlign,
  440. labelTextBaseline: labelTextBaseline,
  441. };
  442. },
  443. enumerable: false,
  444. configurable: true
  445. });
  446. Continuous.prototype.renderLabel = function (container) {
  447. var _a = this.attributes, _b = _a.showTick, showTick = _b === void 0 ? false : _b, labelFilter = _a.labelFilter, labelFormatter = _a.labelFormatter;
  448. var tickStyle = subStyleProps(this.attributes, 'tick');
  449. var labelStyle = subStyleProps(this.attributes, 'label');
  450. var align = labelStyle.align;
  451. var style = deepAssign(__assign({ showLine: false, showGrid: false, showTick: showTick, type: 'linear', startPos: [0, 0], endPos: [0, 0], tickDirection: 'negative', labelTransform: 'rotate(0)' }, this.labelStyle), superStyleProps(tickStyle, 'tick'), superStyleProps(labelStyle, 'label'), { data: this.labelData });
  452. var functionStyle = {
  453. tickFilter: function (datum, index, data) {
  454. if ((datum === null || datum === void 0 ? void 0 : datum.type) !== 'value')
  455. return false;
  456. if (labelFilter)
  457. return labelFilter(datum, datum.index, data.filter(function (d) { return d.type !== 'value'; }));
  458. return true;
  459. },
  460. labelFilter: function (datum, index, data) {
  461. if ((datum === null || datum === void 0 ? void 0 : datum.type) !== align)
  462. return false;
  463. if (labelFilter)
  464. return labelFilter(datum, datum.index, data.filter(function (d) { return d.type === align; }));
  465. return true;
  466. },
  467. labelFormatter: labelFormatter,
  468. };
  469. var finalLabelStyle = __assign(__assign({}, style), functionStyle);
  470. this.label = container.maybeAppendByClassName(CLASS_NAMES.label, function () { return new Axis({ style: finalLabelStyle }); }).node();
  471. this.label.update(finalLabelStyle, false);
  472. };
  473. Object.defineProperty(Continuous.prototype, "labelAxisStyle", {
  474. get: function () {
  475. // @ts-ignore
  476. var _a = this.attributes, showTick = _a.showTick, labelDirection = _a.labelDirection, labelSpacing = _a.labelSpacing, definedTickLength = _a.tickLength;
  477. var ribbonSize = this.ribbonShape.size;
  478. var labelPosition = this.labelPosition;
  479. var labelFixedSpacing = this.labelFixedSpacing;
  480. var _b = __read([0, 0, 0], 3), offset = _b[0], spacing = _b[1], tickLength = _b[2];
  481. var internalVal = definedTickLength !== null && definedTickLength !== void 0 ? definedTickLength : ribbonSize;
  482. if (showTick) {
  483. tickLength = internalVal;
  484. spacing = labelFixedSpacing;
  485. if (labelDirection === 'positive') {
  486. if (labelPosition === 'right') {
  487. offset = internalVal;
  488. tickLength = internalVal;
  489. }
  490. else if (labelPosition === 'bottom')
  491. offset = tickLength;
  492. }
  493. else if (labelDirection === 'negative') {
  494. if (labelPosition === 'top')
  495. offset = ribbonSize;
  496. else if (labelPosition === 'left')
  497. offset = ribbonSize;
  498. }
  499. }
  500. else if (labelDirection === 'positive') {
  501. if (labelPosition === 'right')
  502. spacing = internalVal;
  503. else if (labelPosition === 'bottom') {
  504. offset = ribbonSize + labelFixedSpacing;
  505. spacing = labelSpacing;
  506. }
  507. }
  508. else if (labelDirection === 'negative') {
  509. if (labelPosition === 'left')
  510. spacing = labelSpacing;
  511. else if (labelPosition === 'top')
  512. spacing = labelSpacing;
  513. }
  514. return { offset: offset, spacing: labelSpacing, tickLength: tickLength };
  515. },
  516. enumerable: false,
  517. configurable: true
  518. });
  519. Continuous.prototype.adjustLabel = function () {
  520. var showLabel = this.attributes.showLabel;
  521. if (!showLabel)
  522. return;
  523. var _a = this.ribbonBBox, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
  524. var _b = this.labelAxisStyle, axisOffset = _b.offset, axisSpacing = _b.spacing, axisTickLength = _b.tickLength;
  525. var _c = __read(this.ifHorizontal([
  526. [x, y + axisOffset],
  527. [x + width, y + axisOffset],
  528. ], [
  529. [x + axisOffset, y + height],
  530. [x + axisOffset, y],
  531. ]), 2), startPos = _c[0], endPos = _c[1];
  532. this.label.update({
  533. startPos: startPos,
  534. endPos: endPos,
  535. tickLength: axisTickLength,
  536. labelSpacing: axisSpacing,
  537. }, false);
  538. };
  539. Continuous.prototype.bindEvents = function () {
  540. // 绑定 drag 开始事件
  541. this.ribbon.on('pointerdown', this.onDragStart('ribbon'));
  542. this.ribbon.on('pointermove', this.onHovering);
  543. this.addEventListener('pointerout', this.hideIndicator);
  544. };
  545. Continuous.prototype.showIndicator = function (value, text) {
  546. if (text === void 0) { text = "".concat(value); }
  547. var showIndicator = this.attributes.showIndicator;
  548. if (!showIndicator || typeof value !== 'number') {
  549. this.hideIndicator();
  550. return;
  551. }
  552. var _a = this.range, min = _a.min, max = _a.max;
  553. var _b = this.ribbonBBox, x = _b.x, y = _b.y;
  554. var safeValue = clamp(value, min, max);
  555. var offset = this.getOffset(safeValue);
  556. var pos = this.ifHorizontal([offset + x, y], [x, offset + y]);
  557. this.indicator.update({
  558. x: pos[0],
  559. y: pos[1],
  560. position: this.ifHorizontal('top', 'left'),
  561. labelText: text,
  562. });
  563. show(this.indicator.node());
  564. };
  565. Continuous.prototype.hideIndicator = function () {
  566. hide(this.indicator.node());
  567. };
  568. Continuous.prototype.updateMouse = function () {
  569. if (this.attributes.slidable)
  570. this.style.cursor = 'grabbing';
  571. };
  572. Continuous.prototype.setSelection = function (start, end) {
  573. this.updateSelection(start, end);
  574. };
  575. Continuous.prototype.updateSelection = function (stVal, endVal, isOffset) {
  576. var _a;
  577. if (isOffset === void 0) { isOffset = false; }
  578. var _b = __read(this.selection, 2), currSt = _b[0], currEnd = _b[1];
  579. var _c = __read([stVal, endVal], 2), start = _c[0], end = _c[1];
  580. if (isOffset) {
  581. // 获取当前值
  582. start += currSt;
  583. end += currEnd;
  584. }
  585. // 值校验
  586. var _d = this.range, min = _d.min, max = _d.max;
  587. _a = __read(getSafetySelections([min, max], [start, end], this.selection), 2), start = _a[0], end = _a[1];
  588. this.update({ defaultValue: [start, end] });
  589. this.dispatchSelection();
  590. };
  591. Object.defineProperty(Continuous.prototype, "step", {
  592. get: function () {
  593. var _a = this.attributes.step, step = _a === void 0 ? 1 : _a;
  594. var _b = this.range, min = _b.min, max = _b.max;
  595. if (isUndefined(step))
  596. return toPrecision((max - min) * STEP_RATIO, 0);
  597. return step;
  598. },
  599. enumerable: false,
  600. configurable: true
  601. });
  602. Continuous.prototype.getTickValue = function (value) {
  603. var _a = this.attributes, data = _a.data, block = _a.block;
  604. var min = this.range.min;
  605. if (block)
  606. return getNextTickValue(data.map(function (_a) {
  607. var value = _a.value;
  608. return value;
  609. }), value).tick;
  610. return getStepValueByValue(value, this.step, min);
  611. };
  612. /**
  613. * 事件触发的位置对应的value值
  614. * @param limit {boolean} 我也忘了要干啥了
  615. */
  616. Continuous.prototype.getValueByCanvasPoint = function (e, limit) {
  617. if (limit === void 0) { limit = false; }
  618. var _a = this.range, min = _a.min, max = _a.max;
  619. var _b = __read(this.ribbon.node().getPosition(), 2), x = _b[0], y = _b[1];
  620. var startPos = this.ifHorizontal(x, y);
  621. var currValue = this.ifHorizontal.apply(this, __spreadArray([], __read(getEventPos(e)), false));
  622. var offset = currValue - startPos;
  623. var value = clamp(this.getOffset(offset, true), min, max);
  624. return value;
  625. };
  626. /** reverse: 屏幕偏移量 -> 值 */
  627. Continuous.prototype.getOffset = function (value, reverse) {
  628. if (reverse === void 0) { reverse = false; }
  629. var _a = this.range, min = _a.min, max = _a.max;
  630. var ribbonLen = this.ribbonShape.length;
  631. var scale = this.eventToOffsetScale;
  632. scale.update({ domain: [min, max], range: [0, ribbonLen] });
  633. if (reverse)
  634. return scale.invert(value);
  635. return scale.map(value);
  636. };
  637. Continuous.prototype.dispatchSelection = function () {
  638. var evt = new CustomEvent('valuechange', {
  639. detail: {
  640. value: this.selection,
  641. },
  642. });
  643. this.dispatchEvent(evt);
  644. };
  645. Continuous.prototype.dispatchIndicated = function (value, range) {
  646. var evt = new CustomEvent('indicate', {
  647. detail: { value: value, range: range },
  648. });
  649. this.dispatchEvent(evt);
  650. };
  651. return Continuous;
  652. }(GUI));
  653. export { Continuous };
  654. //# sourceMappingURL=continuous.js.map