handle.js 3.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. import { __assign, __extends, __read, __rest } from "tslib";
  2. import { GUI } from '../../../core';
  3. import { classNames, ifShow, select, subStyleProps } from '../../../util';
  4. import { Marker } from '../../marker';
  5. import { ifHorizontal } from '../utils';
  6. var CLASS_NAMES = classNames({
  7. markerGroup: 'marker-group',
  8. marker: 'marker',
  9. labelGroup: 'label-group',
  10. label: 'label',
  11. }, 'handle');
  12. // todo @xiaoiver, 配置 TEXT_INHERITABLE_PROPS 后文本包围盒依旧不准确
  13. export var DEFAULT_HANDLE_CFG = {
  14. showLabel: true,
  15. formatter: function (val) { return val.toString(); },
  16. markerSize: 25,
  17. markerStroke: '#c5c5c5',
  18. markerFill: '#fff',
  19. markerLineWidth: 1,
  20. labelFontSize: 12,
  21. labelFill: '#c5c5c5',
  22. labelText: '',
  23. orientation: 'vertical',
  24. spacing: 0,
  25. };
  26. var Handle = /** @class */ (function (_super) {
  27. __extends(Handle, _super);
  28. function Handle(options) {
  29. return _super.call(this, options, DEFAULT_HANDLE_CFG) || this;
  30. }
  31. Handle.prototype.render = function (attributes, container) {
  32. var markerGroup = select(container).maybeAppendByClassName(CLASS_NAMES.markerGroup, 'g');
  33. this.renderMarker(markerGroup);
  34. var labelGroup = select(container).maybeAppendByClassName(CLASS_NAMES.labelGroup, 'g');
  35. this.renderLabel(labelGroup);
  36. };
  37. Handle.prototype.renderMarker = function (container) {
  38. var _this = this;
  39. var _a = this.attributes, orientation = _a.orientation, _b = _a.markerSymbol, markerSymbol = _b === void 0 ? ifHorizontal(orientation, 'horizontalHandle', 'verticalHandle') : _b;
  40. ifShow(!!markerSymbol, container, function (group) {
  41. var handleStyle = subStyleProps(_this.attributes, 'marker');
  42. var markerStyle = __assign({ symbol: markerSymbol }, handleStyle);
  43. _this.marker = group
  44. .maybeAppendByClassName(CLASS_NAMES.marker, function () { return new Marker({ style: markerStyle }); })
  45. .update(markerStyle);
  46. });
  47. };
  48. Handle.prototype.renderLabel = function (container) {
  49. var _this = this;
  50. var _a = this.attributes, showLabel = _a.showLabel, orientation = _a.orientation, _b = _a.spacing, spacing = _b === void 0 ? 0 : _b, formatter = _a.formatter;
  51. ifShow(showLabel, container, function (group) {
  52. var _a;
  53. var _b = subStyleProps(_this.attributes, 'label'), text = _b.text, labelStyle = __rest(_b, ["text"]);
  54. // adjust layout
  55. var _c = ((_a = group.select(CLASS_NAMES.marker.class)) === null || _a === void 0 ? void 0 : _a.node().getBBox()) || {}, _d = _c.width, width = _d === void 0 ? 0 : _d, _e = _c.height, height = _e === void 0 ? 0 : _e;
  56. var _f = __read(ifHorizontal(orientation, [0, height + spacing, 'center', 'top'], [width + spacing, 0, 'start', 'middle']), 4), x = _f[0], y = _f[1], textAlign = _f[2], textBaseline = _f[3];
  57. group
  58. .maybeAppendByClassName(CLASS_NAMES.label, 'text')
  59. .styles(__assign(__assign({}, labelStyle), { x: x, y: y, text: formatter(text).toString(), textAlign: textAlign, textBaseline: textBaseline }));
  60. });
  61. };
  62. return Handle;
  63. }(GUI));
  64. export { Handle };
  65. //# sourceMappingURL=handle.js.map