1 | import { a as __extends } from './tslib.es6-f952ba6f.js';
|
2 | import { select } from 'd3';
|
3 | import { C as Component } from './Component-5173b5ea.js';
|
4 |
|
5 | var ACTIONELEMENTHEIGHT = 28;
|
6 | var ACTIONELEMENTMAXWIDTH = 200;
|
7 | var ACTIONELEMENTCONTAINERMAXHEIGHT = 200;
|
8 | var VERTICALPADDING = 4;
|
9 | var ContextMenu = (function (_super) {
|
10 | __extends(ContextMenu, _super);
|
11 | function ContextMenu(drawChart, renderTarget) {
|
12 | var _this = _super.call(this, renderTarget) || this;
|
13 | _this.contextMenuVisible = false;
|
14 | _this.drawChart = drawChart;
|
15 | _this.contextMenuElement = select(renderTarget).insert("div", ":first-child")
|
16 | .attr("class", "tsi-contextMenu")
|
17 | .style("left", "0px")
|
18 | .style("top", "0px");
|
19 | return _this;
|
20 | }
|
21 | ContextMenu.prototype.launchSubMenu = function (parent, subMenuActions, subLevel, top) {
|
22 | var container = this.contextMenuElement
|
23 | .selectAll(".tsi-actionElementContainer" + subLevel)
|
24 | .data([{ subLevel: subLevel }]);
|
25 | var enteredContainer = container.enter()
|
26 | .append('div')
|
27 | .attr("class", function (d) { return "tsi-actionElementContainer tsi-actionElementContainer" + d.subLevel; })
|
28 | .merge(container)
|
29 | .style('max-height', ACTIONELEMENTCONTAINERMAXHEIGHT + "px")
|
30 | .style('display', 'block');
|
31 | this.createActionElements(enteredContainer, subMenuActions, subLevel);
|
32 | this.positionAEC(enteredContainer, subMenuActions.length, top, subLevel);
|
33 | container.exit().remove();
|
34 | };
|
35 | ContextMenu.prototype.positionAEC = function (container, subMenuActionsCount, top, subLevel) {
|
36 | this.verticalPositionAEC(container, top, subMenuActionsCount, subLevel);
|
37 | this.horizontalPositionAEC(container, subLevel);
|
38 | };
|
39 | ContextMenu.prototype.shouldHorizontalFlip = function (rawLeft) {
|
40 | var containerLeft = rawLeft + this.left;
|
41 | var totalWidth = select(this.renderTarget).node().getBoundingClientRect().width;
|
42 | return ((containerLeft + ACTIONELEMENTMAXWIDTH) > totalWidth);
|
43 | };
|
44 | ContextMenu.prototype.shouldVerticalFlip = function (rawTop, elementCount) {
|
45 | var containerTop = rawTop + this.top;
|
46 | var totalHeight = select(this.renderTarget).node().getBoundingClientRect().height;
|
47 | var heightOfElements = Math.min(elementCount * ACTIONELEMENTHEIGHT + (VERTICALPADDING * 2), ACTIONELEMENTCONTAINERMAXHEIGHT);
|
48 | return ((containerTop + heightOfElements) > totalHeight);
|
49 | };
|
50 |
|
51 | ContextMenu.prototype.getRelativeHorizontalPosition = function (node, isLeft) {
|
52 | if (isLeft === void 0) { isLeft = true; }
|
53 | return node.getBoundingClientRect().x + (isLeft ? 0 : node.getBoundingClientRect().width) - this.renderTarget.getBoundingClientRect().x;
|
54 | };
|
55 | ContextMenu.prototype.verticalPositionAEC = function (actionElementContainer, rawTop, elementCount, subLevel) {
|
56 | var totalHeight = this.contextMenuElement.node().getBoundingClientRect().height;
|
57 | if (this.shouldVerticalFlip(rawTop, elementCount)) {
|
58 | actionElementContainer.style('bottom', (totalHeight - rawTop) - (subLevel === 0 ? 0 : ACTIONELEMENTHEIGHT + VERTICALPADDING) + "px")
|
59 | .style('top', null);
|
60 | }
|
61 | else {
|
62 | actionElementContainer.style('top', rawTop - VERTICALPADDING + "px")
|
63 | .style('bottom', null);
|
64 | }
|
65 | };
|
66 | ContextMenu.prototype.horizontalPositionAEC = function (actionElementContainer, subLevel) {
|
67 | var leftPosition = 0;
|
68 | var rightPosition = 0;
|
69 | if (subLevel !== 0) {
|
70 | var oneLevelUp = this.contextMenuElement.selectAll(".tsi-actionElementContainer" + (subLevel - 1));
|
71 | if (oneLevelUp.size()) {
|
72 | rightPosition = this.getRelativeHorizontalPosition(oneLevelUp.nodes()[0], false) - this.left;
|
73 | leftPosition = this.getRelativeHorizontalPosition(oneLevelUp.nodes()[0], true) - this.left;
|
74 | }
|
75 | }
|
76 | if (this.shouldHorizontalFlip(rightPosition)) {
|
77 | actionElementContainer.style('left', null)
|
78 | .style('right', 0 - leftPosition + "px");
|
79 | }
|
80 | else {
|
81 | actionElementContainer.style('left', rightPosition + "px")
|
82 | .style('right', null);
|
83 | }
|
84 | };
|
85 | ContextMenu.prototype.getActionElementContainerTop = function (launchedFromActionNode) {
|
86 | if (launchedFromActionNode === void 0) { launchedFromActionNode = null; }
|
87 | if (launchedFromActionNode === null) {
|
88 | return 0;
|
89 | }
|
90 | return launchedFromActionNode.getBoundingClientRect().top -
|
91 | this.contextMenuElement.node().getBoundingClientRect().top;
|
92 | };
|
93 | ContextMenu.prototype.removeSubMenusAboveLevel = function (level) {
|
94 | select(this.renderTarget).selectAll('.tsi-actionElementContainer').filter(function (subMenuD) {
|
95 | return (subMenuD.subLevel > level);
|
96 | }).remove();
|
97 | };
|
98 | ContextMenu.prototype.createActionElements = function (container, actions, subLevel) {
|
99 | if (subLevel === void 0) { subLevel = 0; }
|
100 | var self = this;
|
101 | var actionElements = container.selectAll(".tsi-actionElement")
|
102 | .data(actions.map(function (a) {
|
103 | a.subLevel = subLevel;
|
104 | return a;
|
105 | }));
|
106 | var actionElementsEntered = actionElements.enter()
|
107 | .append("div")
|
108 | .attr("class", "tsi-actionElement")
|
109 | .classed('tsi-hasSubMenu', function (d) { return d.isNested; })
|
110 | .merge(actionElements)
|
111 | .text(function (d) { return d.name; })
|
112 | .on('mouseenter', function (event, d) {
|
113 | var e = actionElementsEntered.nodes();
|
114 | var i = e.indexOf(event.currentTarget);
|
115 | if (d.isNested) {
|
116 | self.launchSubMenu(select(this), d.subActions, subLevel + 1, self.getActionElementContainerTop(this));
|
117 | self.subMenuFromActionIndex = i;
|
118 | self.subMenuFromSubLevel = d.subLevel;
|
119 | return;
|
120 | }
|
121 | if ((d.subLevel === self.subMenuFromSubLevel && i !== self.subMenuFromActionIndex) || d.subLevel < self.subMenuFromSubLevel) {
|
122 | self.removeSubMenusAboveLevel(d.subLevel);
|
123 | }
|
124 | })
|
125 | .on("click", function (event, d) {
|
126 | if (d.isNested) {
|
127 | return;
|
128 | }
|
129 | if (self.endTime) {
|
130 | var startTime = self.startTime ? self.startTime.toISOString().slice(0, -5) + "Z" : null;
|
131 | var endTime = self.endTime ? self.endTime.toISOString().slice(0, -5) + "Z" : null;
|
132 | d.action(startTime, endTime);
|
133 | }
|
134 | else {
|
135 | var timestamp = self.startTime ? self.startTime.toISOString().slice(0, -5) + "Z" : null;
|
136 | d.action(self.ae, self.splitBy, timestamp, event);
|
137 | }
|
138 | self.hide();
|
139 | if (self.onClick)
|
140 | self.onClick();
|
141 | });
|
142 | actionElements.exit().remove();
|
143 | };
|
144 | ContextMenu.prototype.draw = function (chartComponentData, renderTarget, options, mousePosition, aggKey, splitBy, onClick, startTime, endTime, event) {
|
145 | var _this = this;
|
146 | if (onClick === void 0) { onClick = null; }
|
147 | if (startTime === void 0) { startTime = null; }
|
148 | if (endTime === void 0) { endTime = null; }
|
149 | this.contextMenuVisible = true;
|
150 | if (!endTime) {
|
151 | this.actions = chartComponentData.displayState[aggKey].contextMenuActions;
|
152 | this.ae = chartComponentData.displayState[aggKey].aggregateExpression;
|
153 | }
|
154 | else {
|
155 | this.actions = options.brushContextMenuActions;
|
156 | }
|
157 | this.splitBy = splitBy;
|
158 | this.startTime = startTime;
|
159 | this.endTime = endTime;
|
160 | this.onClick = onClick;
|
161 | _super.prototype.themify.call(this, this.contextMenuElement, options.theme);
|
162 | this.left = mousePosition[0];
|
163 | this.top = mousePosition[1];
|
164 | this.contextMenuElement
|
165 | .style('left', this.left + 'px')
|
166 | .style('top', this.top + 'px');
|
167 | this.contextMenuElement.selectAll('*').remove();
|
168 | this.contextMenuElement.style("display", "block")
|
169 | .on('mouseleave', function () {
|
170 | _this.removeSubMenusAboveLevel(0);
|
171 | });
|
172 | var actionContainer = this.contextMenuElement
|
173 | .selectAll('.tsi-actionElementContainer0')
|
174 | .data([{ subLevel: 0 }]);
|
175 | var actionContainerEntered = actionContainer.enter()
|
176 | .append('div')
|
177 | .attr('class', 'tsi-actionElementContainer tsi-actionElementContainer0');
|
178 | this.createActionElements(actionContainerEntered, this.actions);
|
179 | this.positionAEC(actionContainerEntered, this.actions.length, 0, 0);
|
180 | var self = this;
|
181 | select(this.renderTarget).on("click", function (event) {
|
182 | if (!select(event.srcElement).classed('tsi-actionElement')) {
|
183 | if (onClick) {
|
184 | onClick();
|
185 | }
|
186 | self.hide();
|
187 | }
|
188 | });
|
189 | };
|
190 | ContextMenu.prototype.hide = function () {
|
191 | this.contextMenuElement.style("display", "none");
|
192 | this.contextMenuVisible = false;
|
193 | };
|
194 | return ContextMenu;
|
195 | }(Component));
|
196 |
|
197 | export { ContextMenu as C };
|