ribbon.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.Ribbon = void 0;
  4. var tslib_1 = require("tslib");
  5. var g_1 = require("@antv/g");
  6. var util_1 = require("@antv/util");
  7. var core_1 = require("../../../core");
  8. var util_2 = require("../../../util");
  9. var utils_1 = require("../utils");
  10. var utils_2 = require("./utils");
  11. var CLASS_NAMES = (0, util_2.classNames)({
  12. trackGroup: 'background-group',
  13. track: 'background',
  14. selectionGroup: 'ribbon-group',
  15. selection: 'ribbon',
  16. clipPath: 'clip-path',
  17. }, 'ribbon');
  18. function getShape(attr) {
  19. var orientation = attr.orientation, size = attr.size, length = attr.length;
  20. return (0, utils_1.ifHorizontal)(orientation, [length, size], [size, length]);
  21. }
  22. function getTrackPath(attr) {
  23. var type = attr.type;
  24. var _a = tslib_1.__read(getShape(attr), 2), cw = _a[0], ch = _a[1];
  25. if (type === 'size') {
  26. return [['M', 0, ch], ['L', 0 + cw, 0], ['L', 0 + cw, ch], ['Z']];
  27. }
  28. return [['M', 0, ch], ['L', 0, 0], ['L', 0 + cw, 0], ['L', 0 + cw, ch], ['Z']];
  29. }
  30. function getSelectionPath(attr) {
  31. return getTrackPath(attr);
  32. }
  33. function getColor(attr) {
  34. var orientation = attr.orientation, color = attr.color, block = attr.block, partition = attr.partition;
  35. var colors;
  36. if ((0, util_1.isFunction)(color)) {
  37. var len = 20;
  38. colors = new Array(len).fill(0).map(function (_, index, arr) { return color(index / (arr.length - 1)); });
  39. }
  40. else
  41. colors = color;
  42. var count = colors.length;
  43. var genericColor = colors.map(function (c) { return (0, g_1.parseColor)(c).toString(); });
  44. if (!count)
  45. return '';
  46. if (count === 1)
  47. return genericColor[0];
  48. if (block)
  49. return (0, utils_2.getBlockColor)(partition, genericColor, orientation);
  50. return genericColor.reduce(function (r, c, idx) { return (r += " ".concat(idx / (count - 1), ":").concat(c)); }, "l(".concat((0, utils_1.ifHorizontal)(orientation, '0', '270'), ")"));
  51. }
  52. function getClipPath(attr) {
  53. var orientation = attr.orientation, range = attr.range;
  54. if (!range)
  55. return [];
  56. var _a = tslib_1.__read(getShape(attr), 2), width = _a[0], height = _a[1];
  57. var _b = tslib_1.__read(range, 2), st = _b[0], et = _b[1];
  58. var x = (0, utils_1.ifHorizontal)(orientation, st * width, 0);
  59. var y = (0, utils_1.ifHorizontal)(orientation, 0, st * height);
  60. var w = (0, utils_1.ifHorizontal)(orientation, et * width, width);
  61. var h = (0, utils_1.ifHorizontal)(orientation, height, et * height);
  62. return [['M', x, y], ['L', x, h], ['L', w, h], ['L', w, y], ['Z']];
  63. }
  64. function renderTrack(container, attr) {
  65. var style = (0, util_2.subStyleProps)(attr, 'track');
  66. container.maybeAppendByClassName(CLASS_NAMES.track, 'path').styles(tslib_1.__assign({ path: getTrackPath(attr) }, style));
  67. }
  68. function renderSelection(container, attr) {
  69. var style = (0, util_2.subStyleProps)(attr, 'selection');
  70. var fill = getColor(attr);
  71. var ribbon = container
  72. .maybeAppendByClassName(CLASS_NAMES.selection, 'path')
  73. .styles(tslib_1.__assign({ path: getSelectionPath(attr), fill: fill }, style));
  74. var clipPath = ribbon
  75. .maybeAppendByClassName(CLASS_NAMES.clipPath, 'path')
  76. .styles({ path: getClipPath(attr) })
  77. .node();
  78. ribbon.style('clip-path', clipPath);
  79. }
  80. var Ribbon = /** @class */ (function (_super) {
  81. tslib_1.__extends(Ribbon, _super);
  82. function Ribbon(options) {
  83. return _super.call(this, options, {
  84. type: 'color',
  85. orientation: 'horizontal',
  86. size: 30,
  87. range: [0, 1],
  88. length: 200,
  89. block: false,
  90. partition: [],
  91. color: ['#fff', '#000'],
  92. trackFill: '#e5e5e5',
  93. }) || this;
  94. }
  95. Ribbon.prototype.render = function (attribute, container) {
  96. var trackGroup = (0, util_2.select)(container).maybeAppendByClassName(CLASS_NAMES.trackGroup, 'g');
  97. renderTrack(trackGroup, attribute);
  98. /**
  99. * - ribbon group
  100. * |- ribbon
  101. * - clip path
  102. */
  103. var ribbonGroup = (0, util_2.select)(container).maybeAppendByClassName(CLASS_NAMES.selectionGroup, 'g');
  104. renderSelection(ribbonGroup, attribute);
  105. };
  106. return Ribbon;
  107. }(core_1.GUI));
  108. exports.Ribbon = Ribbon;
  109. //# sourceMappingURL=ribbon.js.map