@elastic/eui 88.5.1 → 88.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/components/combo_box/combo_box_input/combo_box_input.js +1 -2
- package/es/components/text_truncate/index.js +1 -1
- package/es/components/text_truncate/utils.js +88 -138
- package/es/services/canvas/canvas_text_utils.js +64 -0
- package/es/services/canvas/index.js +9 -0
- package/es/services/index.js +1 -0
- package/eui.d.ts +37 -27
- package/lib/components/combo_box/combo_box_input/combo_box_input.js +1 -2
- package/lib/components/text_truncate/index.js +0 -6
- package/lib/components/text_truncate/utils.js +97 -148
- package/lib/services/canvas/canvas_text_utils.js +70 -0
- package/lib/services/canvas/index.js +12 -0
- package/lib/services/index.js +8 -0
- package/optimize/es/components/combo_box/combo_box_input/combo_box_input.js +1 -2
- package/optimize/es/components/text_truncate/index.js +1 -1
- package/optimize/es/components/text_truncate/utils.js +87 -137
- package/optimize/es/services/canvas/canvas_text_utils.js +60 -0
- package/optimize/es/services/canvas/index.js +9 -0
- package/optimize/es/services/index.js +1 -0
- package/optimize/lib/components/combo_box/combo_box_input/combo_box_input.js +1 -2
- package/optimize/lib/components/text_truncate/index.js +0 -6
- package/optimize/lib/components/text_truncate/utils.js +96 -147
- package/optimize/lib/services/canvas/canvas_text_utils.js +67 -0
- package/optimize/lib/services/canvas/index.js +12 -0
- package/optimize/lib/services/index.js +8 -0
- package/package.json +1 -1
- package/test-env/components/combo_box/combo_box_input/combo_box_input.js +1 -2
- package/test-env/components/text_truncate/index.js +0 -6
- package/test-env/components/text_truncate/utils.js +232 -38
- package/test-env/services/canvas/canvas_text_utils.js +30 -0
- package/test-env/services/canvas/index.js +12 -0
- package/test-env/services/index.js +8 -0
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
4
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
5
|
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
|
4
6
|
import _get from "@babel/runtime/helpers/get";
|
|
5
7
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
6
8
|
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
7
9
|
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
8
|
-
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
9
|
-
import _createClass from "@babel/runtime/helpers/createClass";
|
|
10
10
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
11
11
|
var _excluded = ["fullText", "ellipsis", "availableWidth"];
|
|
12
12
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
@@ -19,57 +19,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
|
|
|
19
19
|
* Side Public License, v 1.
|
|
20
20
|
*/
|
|
21
21
|
|
|
22
|
-
|
|
23
|
-
* Under the hood, a temporary Canvas element is created for manipulating text
|
|
24
|
-
* & determining text width.
|
|
25
|
-
*
|
|
26
|
-
* To accurately measure text, canvas rendering requires either a container to
|
|
27
|
-
* compute/derive font styles from, or a static font string (useful for usage
|
|
28
|
-
* outside the DOM). Particular care should be applied when fallback fonts are
|
|
29
|
-
* used, as more fallback fonts can lead to less precision.
|
|
30
|
-
*
|
|
31
|
-
* Please note that while canvas is more significantly more performant than DOM
|
|
32
|
-
* measurement, there are subpixel to single digit pixel differences between
|
|
33
|
-
* DOM and canvas measurement due to the different rendering engines used.
|
|
34
|
-
*/
|
|
35
|
-
export var CanvasTextUtils = /*#__PURE__*/function () {
|
|
36
|
-
function CanvasTextUtils(_ref) {
|
|
37
|
-
var _this = this;
|
|
38
|
-
var font = _ref.font,
|
|
39
|
-
container = _ref.container;
|
|
40
|
-
_classCallCheck(this, CanvasTextUtils);
|
|
41
|
-
_defineProperty(this, "context", void 0);
|
|
42
|
-
_defineProperty(this, "currentText", '');
|
|
43
|
-
_defineProperty(this, "computeFontFromElement", function (element) {
|
|
44
|
-
var computedStyles = window.getComputedStyle(element);
|
|
45
|
-
// TODO: font-stretch is not included even though it potentially should be
|
|
46
|
-
// @see https://developer.mozilla.org/en-US/docs/Web/CSS/font#constituent_properties
|
|
47
|
-
// It appears to be unsupported and/or breaks font computation in canvas
|
|
48
|
-
return ['font-style', 'font-variant', 'font-weight', 'font-size', 'font-family'].map(function (prop) {
|
|
49
|
-
return computedStyles.getPropertyValue(prop);
|
|
50
|
-
}).join(' ').trim();
|
|
51
|
-
});
|
|
52
|
-
_defineProperty(this, "setTextToCheck", function (text) {
|
|
53
|
-
_this.currentText = text;
|
|
54
|
-
});
|
|
55
|
-
this.context = document.createElement('canvas').getContext('2d');
|
|
56
|
-
|
|
57
|
-
// Set the canvas font to ensure text width calculations are correct
|
|
58
|
-
if (font) {
|
|
59
|
-
this.context.font = font;
|
|
60
|
-
} else if (container) {
|
|
61
|
-
this.context.font = this.computeFontFromElement(container);
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
_createClass(CanvasTextUtils, [{
|
|
65
|
-
key: "textWidth",
|
|
66
|
-
get: function get() {
|
|
67
|
-
return this.context.measureText(this.currentText).width;
|
|
68
|
-
}
|
|
69
|
-
}]);
|
|
70
|
-
return CanvasTextUtils;
|
|
71
|
-
}();
|
|
72
|
-
|
|
22
|
+
import { CanvasTextUtils } from '../../services/canvas';
|
|
73
23
|
/**
|
|
74
24
|
* Utilities for truncating types at various positions, as well as
|
|
75
25
|
* determining whether truncation is possible or even necessary.
|
|
@@ -77,22 +27,22 @@ export var CanvasTextUtils = /*#__PURE__*/function () {
|
|
|
77
27
|
export var TruncationUtils = /*#__PURE__*/function (_CanvasTextUtils) {
|
|
78
28
|
_inherits(TruncationUtils, _CanvasTextUtils);
|
|
79
29
|
var _super = _createSuper(TruncationUtils);
|
|
80
|
-
function TruncationUtils(
|
|
81
|
-
var
|
|
82
|
-
var fullText =
|
|
83
|
-
ellipsis =
|
|
84
|
-
_availableWidth =
|
|
85
|
-
rest = _objectWithoutProperties(
|
|
30
|
+
function TruncationUtils(_ref) {
|
|
31
|
+
var _this;
|
|
32
|
+
var fullText = _ref.fullText,
|
|
33
|
+
ellipsis = _ref.ellipsis,
|
|
34
|
+
_availableWidth = _ref.availableWidth,
|
|
35
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
86
36
|
_classCallCheck(this, TruncationUtils);
|
|
87
|
-
|
|
88
|
-
_defineProperty(_assertThisInitialized(
|
|
89
|
-
_defineProperty(_assertThisInitialized(
|
|
90
|
-
_defineProperty(_assertThisInitialized(
|
|
37
|
+
_this = _super.call(this, rest);
|
|
38
|
+
_defineProperty(_assertThisInitialized(_this), "fullText", void 0);
|
|
39
|
+
_defineProperty(_assertThisInitialized(_this), "ellipsis", void 0);
|
|
40
|
+
_defineProperty(_assertThisInitialized(_this), "availableWidth", void 0);
|
|
91
41
|
/**
|
|
92
42
|
* Performance utilities
|
|
93
43
|
*/
|
|
94
|
-
_defineProperty(_assertThisInitialized(
|
|
95
|
-
_defineProperty(_assertThisInitialized(
|
|
44
|
+
_defineProperty(_assertThisInitialized(_this), "debugPerformance", false);
|
|
45
|
+
_defineProperty(_assertThisInitialized(_this), "debugCounter", 0);
|
|
96
46
|
/**
|
|
97
47
|
* Internal utils for calculating a ratio based on the passed available width
|
|
98
48
|
* vs the full text width.
|
|
@@ -100,21 +50,21 @@ export var TruncationUtils = /*#__PURE__*/function (_CanvasTextUtils) {
|
|
|
100
50
|
* be slightly over the available width, which we can then remove from
|
|
101
51
|
* character-by-character until the text just fits within the available width.
|
|
102
52
|
*/
|
|
103
|
-
_defineProperty(_assertThisInitialized(
|
|
104
|
-
_defineProperty(_assertThisInitialized(
|
|
105
|
-
var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] :
|
|
53
|
+
_defineProperty(_assertThisInitialized(_this), "widthRatio", 0);
|
|
54
|
+
_defineProperty(_assertThisInitialized(_this), "setTextWidthRatio", function () {
|
|
55
|
+
var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.fullText;
|
|
106
56
|
var textToOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
107
57
|
// Account for reduced available width due to (e.g.) truncation offset
|
|
108
|
-
var availableWidth =
|
|
58
|
+
var availableWidth = _this.availableWidth;
|
|
109
59
|
if (textToOffset) {
|
|
110
|
-
|
|
111
|
-
availableWidth = availableWidth -
|
|
60
|
+
_this.setTextToCheck(textToOffset);
|
|
61
|
+
availableWidth = availableWidth - _this.textWidth;
|
|
112
62
|
}
|
|
113
|
-
|
|
114
|
-
|
|
63
|
+
_this.setTextToCheck(text);
|
|
64
|
+
_this.widthRatio = availableWidth / _this.textWidth;
|
|
115
65
|
});
|
|
116
|
-
_defineProperty(_assertThisInitialized(
|
|
117
|
-
var characterRatio = Math.ceil(text.length *
|
|
66
|
+
_defineProperty(_assertThisInitialized(_this), "getTextFromRatio", function (text, type) {
|
|
67
|
+
var characterRatio = Math.ceil(text.length * _this.widthRatio);
|
|
118
68
|
var index = type === 'start' ? text.length - characterRatio : characterRatio;
|
|
119
69
|
var _splitText$at = splitText(text).at(index),
|
|
120
70
|
_splitText$at2 = _slicedToArray(_splitText$at, 2),
|
|
@@ -125,24 +75,24 @@ export var TruncationUtils = /*#__PURE__*/function (_CanvasTextUtils) {
|
|
|
125
75
|
/**
|
|
126
76
|
* Early return checks
|
|
127
77
|
*/
|
|
128
|
-
_defineProperty(_assertThisInitialized(
|
|
129
|
-
|
|
130
|
-
if (
|
|
78
|
+
_defineProperty(_assertThisInitialized(_this), "checkIfTruncationIsNeeded", function () {
|
|
79
|
+
_this.setTextToCheck(_this.fullText);
|
|
80
|
+
if (_this.availableWidth >= _this.textWidth) {
|
|
131
81
|
return false;
|
|
132
82
|
}
|
|
133
83
|
});
|
|
134
|
-
_defineProperty(_assertThisInitialized(
|
|
135
|
-
var textToCheck = truncation === 'startEnd' ? "".concat(
|
|
136
|
-
:
|
|
137
|
-
|
|
138
|
-
if (
|
|
84
|
+
_defineProperty(_assertThisInitialized(_this), "checkSufficientEllipsisWidth", function (truncation) {
|
|
85
|
+
var textToCheck = truncation === 'startEnd' ? "".concat(_this.ellipsis, " ").concat(_this.ellipsis) // startEnd needs a little more space
|
|
86
|
+
: _this.ellipsis;
|
|
87
|
+
_this.setTextToCheck(textToCheck);
|
|
88
|
+
if (_this.textWidth >= _this.availableWidth * 0.9) {
|
|
139
89
|
console.error('The truncation ellipsis is larger than the available width. No text can be rendered.');
|
|
140
90
|
return false;
|
|
141
91
|
}
|
|
142
92
|
});
|
|
143
|
-
_defineProperty(_assertThisInitialized(
|
|
144
|
-
|
|
145
|
-
if (
|
|
93
|
+
_defineProperty(_assertThisInitialized(_this), "checkTruncationOffsetWidth", function (text) {
|
|
94
|
+
_this.setTextToCheck(text);
|
|
95
|
+
if (_this.textWidth > _this.availableWidth) {
|
|
146
96
|
console.error('The passed truncationOffset is too large for the available width. Truncating the offset instead.');
|
|
147
97
|
return false;
|
|
148
98
|
}
|
|
@@ -150,19 +100,19 @@ export var TruncationUtils = /*#__PURE__*/function (_CanvasTextUtils) {
|
|
|
150
100
|
/**
|
|
151
101
|
* Truncation types logic. This is where the magic happens
|
|
152
102
|
*/
|
|
153
|
-
_defineProperty(_assertThisInitialized(
|
|
154
|
-
var truncatedText =
|
|
103
|
+
_defineProperty(_assertThisInitialized(_this), "truncateStart", function (truncationOffset) {
|
|
104
|
+
var truncatedText = _this.fullText;
|
|
155
105
|
var leadingText = '';
|
|
156
106
|
var combinedText = function combinedText() {
|
|
157
107
|
return leadingText + truncatedText;
|
|
158
108
|
};
|
|
159
109
|
if (truncationOffset) {
|
|
160
|
-
var _splitText$at3 = splitText(
|
|
110
|
+
var _splitText$at3 = splitText(_this.fullText).at(truncationOffset);
|
|
161
111
|
var _splitText$at4 = _slicedToArray(_splitText$at3, 2);
|
|
162
112
|
leadingText = _splitText$at4[0];
|
|
163
113
|
truncatedText = _splitText$at4[1];
|
|
164
|
-
var widthCheck = leadingText +
|
|
165
|
-
if (
|
|
114
|
+
var widthCheck = leadingText + _this.ellipsis;
|
|
115
|
+
if (_this.checkTruncationOffsetWidth(widthCheck) === false) {
|
|
166
116
|
truncatedText = leadingText;
|
|
167
117
|
leadingText = '';
|
|
168
118
|
}
|
|
@@ -170,30 +120,30 @@ export var TruncationUtils = /*#__PURE__*/function (_CanvasTextUtils) {
|
|
|
170
120
|
|
|
171
121
|
// Get text width ratio width accounting for any truncation offset text,
|
|
172
122
|
// and guesstimate an initial truncated string
|
|
173
|
-
|
|
174
|
-
truncatedText =
|
|
175
|
-
leadingText +=
|
|
176
|
-
|
|
177
|
-
while (
|
|
123
|
+
_this.setTextWidthRatio(truncatedText, leadingText);
|
|
124
|
+
truncatedText = _this.getTextFromRatio(truncatedText, 'start');
|
|
125
|
+
leadingText += _this.ellipsis;
|
|
126
|
+
_this.setTextToCheck(combinedText());
|
|
127
|
+
while (_this.textWidth > _this.availableWidth) {
|
|
178
128
|
truncatedText = removeFirstCharacter(truncatedText);
|
|
179
|
-
|
|
129
|
+
_this.setTextToCheck(combinedText());
|
|
180
130
|
}
|
|
181
131
|
return combinedText();
|
|
182
132
|
});
|
|
183
|
-
_defineProperty(_assertThisInitialized(
|
|
184
|
-
var truncatedText =
|
|
133
|
+
_defineProperty(_assertThisInitialized(_this), "truncateEnd", function (truncationOffset) {
|
|
134
|
+
var truncatedText = _this.fullText;
|
|
185
135
|
var trailingText = '';
|
|
186
136
|
var combinedText = function combinedText() {
|
|
187
137
|
return truncatedText + trailingText;
|
|
188
138
|
};
|
|
189
139
|
if (truncationOffset) {
|
|
190
|
-
var index =
|
|
191
|
-
var _splitText$at5 = splitText(
|
|
140
|
+
var index = _this.fullText.length - truncationOffset;
|
|
141
|
+
var _splitText$at5 = splitText(_this.fullText).at(index);
|
|
192
142
|
var _splitText$at6 = _slicedToArray(_splitText$at5, 2);
|
|
193
143
|
truncatedText = _splitText$at6[0];
|
|
194
144
|
trailingText = _splitText$at6[1];
|
|
195
|
-
var widthCheck =
|
|
196
|
-
if (
|
|
145
|
+
var widthCheck = _this.ellipsis + trailingText;
|
|
146
|
+
if (_this.checkTruncationOffsetWidth(widthCheck) === false) {
|
|
197
147
|
truncatedText = trailingText;
|
|
198
148
|
trailingText = '';
|
|
199
149
|
}
|
|
@@ -201,78 +151,78 @@ export var TruncationUtils = /*#__PURE__*/function (_CanvasTextUtils) {
|
|
|
201
151
|
|
|
202
152
|
// Get text width ratio width accounting for any truncation offset text,
|
|
203
153
|
// and guesstimate an initial truncated string
|
|
204
|
-
|
|
205
|
-
truncatedText =
|
|
206
|
-
trailingText =
|
|
207
|
-
|
|
208
|
-
while (
|
|
154
|
+
_this.setTextWidthRatio(truncatedText, trailingText);
|
|
155
|
+
truncatedText = _this.getTextFromRatio(truncatedText, 'end');
|
|
156
|
+
trailingText = _this.ellipsis + trailingText;
|
|
157
|
+
_this.setTextToCheck(combinedText());
|
|
158
|
+
while (_this.textWidth > _this.availableWidth) {
|
|
209
159
|
truncatedText = removeLastCharacter(truncatedText);
|
|
210
|
-
|
|
160
|
+
_this.setTextToCheck(combinedText());
|
|
211
161
|
}
|
|
212
162
|
return combinedText();
|
|
213
163
|
});
|
|
214
|
-
_defineProperty(_assertThisInitialized(
|
|
164
|
+
_defineProperty(_assertThisInitialized(_this), "truncateStartEndAtPosition", function (truncationPosition) {
|
|
215
165
|
// Split the text from the anchor position, using the width ratio
|
|
216
166
|
// to get the starting and ending indices from the position
|
|
217
|
-
|
|
218
|
-
var characterRatio = Math.floor(
|
|
167
|
+
_this.setTextWidthRatio();
|
|
168
|
+
var characterRatio = Math.floor(_this.fullText.length * _this.widthRatio / 2);
|
|
219
169
|
var truncateStart = truncationPosition - characterRatio;
|
|
220
170
|
var truncateEnd = truncationPosition + characterRatio;
|
|
221
171
|
|
|
222
172
|
// If either of the approximate start/end truncation indices go beyond the
|
|
223
173
|
// bounds of the actual text, we can simply use end or start truncation instead
|
|
224
174
|
if (truncateStart < 0) {
|
|
225
|
-
return
|
|
175
|
+
return _this.truncateEnd();
|
|
226
176
|
}
|
|
227
|
-
if (truncateEnd >=
|
|
228
|
-
return
|
|
177
|
+
if (truncateEnd >= _this.fullText.length) {
|
|
178
|
+
return _this.truncateStart();
|
|
229
179
|
}
|
|
230
|
-
var truncatedText =
|
|
180
|
+
var truncatedText = _this.fullText.substring(truncateStart, truncateEnd);
|
|
231
181
|
var combinedText = function combinedText() {
|
|
232
|
-
return
|
|
182
|
+
return _this.ellipsis + truncatedText + _this.ellipsis;
|
|
233
183
|
};
|
|
234
|
-
|
|
184
|
+
_this.setTextToCheck(combinedText());
|
|
235
185
|
var alternating;
|
|
236
|
-
while (
|
|
186
|
+
while (_this.textWidth > _this.availableWidth) {
|
|
237
187
|
truncatedText = alternating ? removeLastCharacter(truncatedText) : removeFirstCharacter(truncatedText);
|
|
238
188
|
alternating = !alternating;
|
|
239
|
-
|
|
189
|
+
_this.setTextToCheck(combinedText());
|
|
240
190
|
}
|
|
241
191
|
return combinedText();
|
|
242
192
|
});
|
|
243
|
-
_defineProperty(_assertThisInitialized(
|
|
244
|
-
var middlePosition = Math.floor(
|
|
245
|
-
return
|
|
193
|
+
_defineProperty(_assertThisInitialized(_this), "truncateStartEndAtMiddle", function () {
|
|
194
|
+
var middlePosition = Math.floor(_this.fullText.length / 2);
|
|
195
|
+
return _this.truncateStartEndAtPosition(middlePosition);
|
|
246
196
|
});
|
|
247
|
-
_defineProperty(_assertThisInitialized(
|
|
248
|
-
var middlePosition = Math.floor(
|
|
249
|
-
var _splitText$at7 = splitText(
|
|
197
|
+
_defineProperty(_assertThisInitialized(_this), "truncateMiddle", function () {
|
|
198
|
+
var middlePosition = Math.floor(_this.fullText.length / 2);
|
|
199
|
+
var _splitText$at7 = splitText(_this.fullText).at(middlePosition),
|
|
250
200
|
_splitText$at8 = _slicedToArray(_splitText$at7, 2),
|
|
251
201
|
firstHalf = _splitText$at8[0],
|
|
252
202
|
secondHalf = _splitText$at8[1];
|
|
253
|
-
|
|
254
|
-
firstHalf =
|
|
255
|
-
secondHalf =
|
|
203
|
+
_this.setTextWidthRatio();
|
|
204
|
+
firstHalf = _this.getTextFromRatio(firstHalf, 'end');
|
|
205
|
+
secondHalf = _this.getTextFromRatio(secondHalf, 'start');
|
|
256
206
|
var combinedText = function combinedText() {
|
|
257
|
-
return firstHalf +
|
|
207
|
+
return firstHalf + _this.ellipsis + secondHalf;
|
|
258
208
|
};
|
|
259
|
-
|
|
209
|
+
_this.setTextToCheck(combinedText());
|
|
260
210
|
var alternating;
|
|
261
|
-
while (
|
|
211
|
+
while (_this.textWidth > _this.availableWidth) {
|
|
262
212
|
alternating = !alternating;
|
|
263
213
|
if (alternating) {
|
|
264
214
|
firstHalf = removeLastCharacter(firstHalf);
|
|
265
215
|
} else {
|
|
266
216
|
secondHalf = removeFirstCharacter(secondHalf);
|
|
267
217
|
}
|
|
268
|
-
|
|
218
|
+
_this.setTextToCheck(combinedText());
|
|
269
219
|
}
|
|
270
220
|
return combinedText();
|
|
271
221
|
});
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
return
|
|
222
|
+
_this.fullText = fullText;
|
|
223
|
+
_this.ellipsis = ellipsis;
|
|
224
|
+
_this.availableWidth = _availableWidth;
|
|
225
|
+
return _this;
|
|
276
226
|
}
|
|
277
227
|
_createClass(TruncationUtils, [{
|
|
278
228
|
key: "textWidth",
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
4
|
+
/*
|
|
5
|
+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
6
|
+
* or more contributor license agreements. Licensed under the Elastic License
|
|
7
|
+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
|
8
|
+
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
9
|
+
* Side Public License, v 1.
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Creates a temporary Canvas element for manipulating text & determining text width.
|
|
14
|
+
*
|
|
15
|
+
* To accurately measure text, canvas rendering requires either a container to
|
|
16
|
+
* compute/derive font styles from, or a static font string (useful for usage
|
|
17
|
+
* outside the DOM). Particular care should be applied when fallback fonts are
|
|
18
|
+
* used, as more fallback fonts can lead to less precision.
|
|
19
|
+
*
|
|
20
|
+
* Please note that while canvas is more significantly more performant than DOM
|
|
21
|
+
* measurement, there are subpixel to single digit pixel differences between
|
|
22
|
+
* DOM and canvas measurement due to the different rendering engines used.
|
|
23
|
+
*/
|
|
24
|
+
export var CanvasTextUtils = /*#__PURE__*/function () {
|
|
25
|
+
function CanvasTextUtils(_ref) {
|
|
26
|
+
var _this = this;
|
|
27
|
+
var font = _ref.font,
|
|
28
|
+
container = _ref.container;
|
|
29
|
+
_classCallCheck(this, CanvasTextUtils);
|
|
30
|
+
_defineProperty(this, "context", void 0);
|
|
31
|
+
_defineProperty(this, "currentText", '');
|
|
32
|
+
_defineProperty(this, "computeFontFromElement", function (element) {
|
|
33
|
+
var computedStyles = window.getComputedStyle(element);
|
|
34
|
+
// TODO: font-stretch is not included even though it potentially should be
|
|
35
|
+
// @see https://developer.mozilla.org/en-US/docs/Web/CSS/font#constituent_properties
|
|
36
|
+
// It appears to be unsupported and/or breaks font computation in canvas
|
|
37
|
+
return ['font-style', 'font-variant', 'font-weight', 'font-size', 'font-family'].map(function (prop) {
|
|
38
|
+
return computedStyles.getPropertyValue(prop);
|
|
39
|
+
}).join(' ').trim();
|
|
40
|
+
});
|
|
41
|
+
_defineProperty(this, "setTextToCheck", function (text) {
|
|
42
|
+
_this.currentText = text;
|
|
43
|
+
});
|
|
44
|
+
this.context = document.createElement('canvas').getContext('2d');
|
|
45
|
+
|
|
46
|
+
// Set the canvas font to ensure text width calculations are correct
|
|
47
|
+
if (font) {
|
|
48
|
+
this.context.font = font;
|
|
49
|
+
} else if (container) {
|
|
50
|
+
this.context.font = this.computeFontFromElement(container);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
_createClass(CanvasTextUtils, [{
|
|
54
|
+
key: "textWidth",
|
|
55
|
+
get: function get() {
|
|
56
|
+
return this.context.measureText(this.currentText).width;
|
|
57
|
+
}
|
|
58
|
+
}]);
|
|
59
|
+
return CanvasTextUtils;
|
|
60
|
+
}();
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
3
|
+
* or more contributor license agreements. Licensed under the Elastic License
|
|
4
|
+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
|
5
|
+
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
6
|
+
* Side Public License, v 1.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
export { CanvasTextUtils } from './canvas_text_utils';
|
|
@@ -11,6 +11,7 @@ import * as keys from './keys';
|
|
|
11
11
|
export { accessibleClickKeys, cascadingMenuKeys, comboBoxKeys, htmlIdGenerator, useGeneratedHtmlId } from './accessibility';
|
|
12
12
|
export { CENTER_ALIGNMENT, LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from './alignment';
|
|
13
13
|
export { CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint, useIsWithinBreakpoints, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint } from './breakpoint';
|
|
14
|
+
export { CanvasTextUtils } from './canvas';
|
|
14
15
|
export { brighten, calculateContrast, calculateLuminance, colorPalette, darken, DEFAULT_VISUALIZATION_COLOR, desaturate, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteComplimentary, euiPaletteComplementary, euiPaletteCool, euiPaletteForDarkBackground, euiPaletteForLightBackground, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteGray, euiPaletteNegative, euiPalettePositive, euiPaletteWarm, getSteppedGradient, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, isColorDark, isValidHex, lightness, makeDisabledContrastColor, makeHighContrastColor, rgbToHex, rgbToHsv, saturate, shade, shadeOrTint, tint, tintOrShade, transparentize, VISUALIZATION_COLORS, wcagContrastMin } from './color';
|
|
15
16
|
export { useColorPickerState, useColorStopsState } from './color_picker';
|
|
16
17
|
export * from './console';
|
|
@@ -19,7 +19,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
19
19
|
var _react = _interopRequireWildcard(require("react"));
|
|
20
20
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
21
21
|
var _services = require("../../../services");
|
|
22
|
-
var _text_truncate = require("../../text_truncate");
|
|
23
22
|
var _accessibility = require("../../accessibility");
|
|
24
23
|
var _form_control_layout = require("../../form/form_control_layout");
|
|
25
24
|
var _num_icons = require("../../form/form_control_layout/_num_icons");
|
|
@@ -53,7 +52,7 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
|
|
|
53
52
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "widthUtils", void 0);
|
|
54
53
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "inputRefCallback", function (el) {
|
|
55
54
|
var _this$props$inputRef, _this$props;
|
|
56
|
-
_this.widthUtils = new
|
|
55
|
+
_this.widthUtils = new _services.CanvasTextUtils({
|
|
57
56
|
container: el
|
|
58
57
|
});
|
|
59
58
|
(_this$props$inputRef = (_this$props = _this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props, el);
|
|
@@ -3,12 +3,6 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
Object.defineProperty(exports, "CanvasTextUtils", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: function get() {
|
|
9
|
-
return _utils.CanvasTextUtils;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
6
|
Object.defineProperty(exports, "EuiTextTruncate", {
|
|
13
7
|
enumerable: true,
|
|
14
8
|
get: function get() {
|