trepur_components 2.3.4 → 2.3.5
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/archive/theme.ts +1 -1
- package/lib/components/index.d.ts +1 -1
- package/lib/styles/base.css +1 -0
- package/package.json +1 -1
- package/postcss.config.js +8 -0
- package/src/components/index.ts +3 -3
- package/src/styles/base.css +1 -0
- package/tsconfig.json +1 -1
- package/storybook-build/assets/Accordion.stories-Cn994N1H.js +0 -103
- package/storybook-build/assets/AlertBar.stories-BkzNXFBh.js +0 -202
- package/storybook-build/assets/Avatar.stories-CpH6xVwM.js +0 -418
- package/storybook-build/assets/Color-6VNJS4EI-DQV2onvt.js +0 -1378
- package/storybook-build/assets/Colours-r29qjFlW.js +0 -324
- package/storybook-build/assets/DocsRenderer-NNNQARDV-OgWasCIs.js +0 -44
- package/storybook-build/assets/Introduction-Bs1PgnBZ.js +0 -40
- package/storybook-build/assets/WithTooltip-V3YHNWJZ-vi2V5TOO.js +0 -15
- package/storybook-build/assets/_commonjsHelpers-LQfde5yM.js +0 -35
- package/storybook-build/assets/axe-DnFZVv9V.js +0 -32561
- package/storybook-build/assets/chunk-EIRT5I3Z-DFD8udmD.js +0 -480
- package/storybook-build/assets/context-CIRBAiUz.js +0 -20
- package/storybook-build/assets/controls-DJSGrQKd.js +0 -23
- package/storybook-build/assets/entry-preview-DmlPV4-3.js +0 -41
- package/storybook-build/assets/entry-preview-docs-D46Drugi.js +0 -11861
- package/storybook-build/assets/formatter-SWP5E3XI-BWIasvKP.js +0 -14427
- package/storybook-build/assets/iframe-Dzzzanqi.js +0 -144
- package/storybook-build/assets/index-0FT4HXk-.js +0 -7222
- package/storybook-build/assets/index-B9Tccxv4.js +0 -107
- package/storybook-build/assets/index-BdOSk9or.js +0 -41
- package/storybook-build/assets/index-CU7cYjZD.js +0 -9604
- package/storybook-build/assets/index-Clz-aGG3.js +0 -39
- package/storybook-build/assets/index-CpyNLP69.js +0 -63
- package/storybook-build/assets/index-DM9bPmif.js +0 -319
- package/storybook-build/assets/index-ex9_VrIg.js +0 -3734
- package/storybook-build/assets/jsx-runtime-D2-sc1j1.js +0 -35
- package/storybook-build/assets/preview-3kSipVgK.js +0 -430
- package/storybook-build/assets/preview-B4rAxPmB.js +0 -27
- package/storybook-build/assets/preview-BMkwWyrh.js +0 -2920
- package/storybook-build/assets/preview-BeQelhbu.js +0 -204
- package/storybook-build/assets/preview-BiG-rflf.js +0 -2444
- package/storybook-build/assets/preview-BiYUJ7TP.js +0 -22
- package/storybook-build/assets/preview-C4ItOQzM.js +0 -34
- package/storybook-build/assets/preview-CWyhKACi.css +0 -886
- package/storybook-build/assets/preview-CtOV68TG.js +0 -10
- package/storybook-build/assets/preview-De9E9xaR.js +0 -140
- package/storybook-build/assets/preview-bL4x2zrN.js +0 -99
- package/storybook-build/assets/preview-gxqyGMHu.js +0 -323
- package/storybook-build/assets/react-18-B-gfo82w.js +0 -29
- package/storybook-build/assets/syntaxhighlighter-B5GMVT5T-DrY_Dc6-.js +0 -15
- package/storybook-build/favicon.svg +0 -7
- package/storybook-build/iframe.html +0 -458
- package/storybook-build/index.html +0 -163
- package/storybook-build/index.json +0 -1
- package/storybook-build/preview-stats.json +0 -172
- package/storybook-build/project.json +0 -1
- package/storybook-build/sb-addons/a11y-9/manager-bundle.js +0 -3
- package/storybook-build/sb-addons/a11y-9/manager-bundle.js.LEGAL.txt +0 -0
- package/storybook-build/sb-addons/essentials-actions-2/manager-bundle.js +0 -3
- package/storybook-build/sb-addons/essentials-actions-2/manager-bundle.js.LEGAL.txt +0 -0
- package/storybook-build/sb-addons/essentials-backgrounds-3/manager-bundle.js +0 -12
- package/storybook-build/sb-addons/essentials-backgrounds-3/manager-bundle.js.LEGAL.txt +0 -0
- package/storybook-build/sb-addons/essentials-controls-1/manager-bundle.js +0 -63
- package/storybook-build/sb-addons/essentials-controls-1/manager-bundle.js.LEGAL.txt +0 -18
- package/storybook-build/sb-addons/essentials-measure-6/manager-bundle.js +0 -3
- package/storybook-build/sb-addons/essentials-measure-6/manager-bundle.js.LEGAL.txt +0 -0
- package/storybook-build/sb-addons/essentials-outline-7/manager-bundle.js +0 -3
- package/storybook-build/sb-addons/essentials-outline-7/manager-bundle.js.LEGAL.txt +0 -0
- package/storybook-build/sb-addons/essentials-toolbars-5/manager-bundle.js +0 -3
- package/storybook-build/sb-addons/essentials-toolbars-5/manager-bundle.js.LEGAL.txt +0 -0
- package/storybook-build/sb-addons/essentials-viewport-4/manager-bundle.js +0 -3
- package/storybook-build/sb-addons/essentials-viewport-4/manager-bundle.js.LEGAL.txt +0 -0
- package/storybook-build/sb-addons/interactions-8/manager-bundle.js +0 -12
- package/storybook-build/sb-addons/interactions-8/manager-bundle.js.LEGAL.txt +0 -0
- package/storybook-build/sb-addons/links-0/manager-bundle.js +0 -3
- package/storybook-build/sb-addons/links-0/manager-bundle.js.LEGAL.txt +0 -0
- package/storybook-build/sb-addons/storybook-12/manager-bundle.js +0 -151
- package/storybook-build/sb-addons/storybook-12/manager-bundle.js.LEGAL.txt +0 -0
- package/storybook-build/sb-addons/storybook-react-i18next-11/manager-bundle.js +0 -3
- package/storybook-build/sb-addons/storybook-react-i18next-11/manager-bundle.js.LEGAL.txt +0 -0
- package/storybook-build/sb-addons/themes-10/register-bundle.js +0 -5
- package/storybook-build/sb-addons/themes-10/register-bundle.js.LEGAL.txt +0 -0
- package/storybook-build/sb-common-assets/fonts.css +0 -31
- package/storybook-build/sb-common-assets/nunito-sans-bold-italic.woff2 +0 -0
- package/storybook-build/sb-common-assets/nunito-sans-bold.woff2 +0 -0
- package/storybook-build/sb-common-assets/nunito-sans-italic.woff2 +0 -0
- package/storybook-build/sb-common-assets/nunito-sans-regular.woff2 +0 -0
- package/storybook-build/sb-manager/WithTooltip-V3YHNWJZ-TRLNWEGW.js +0 -1
- package/storybook-build/sb-manager/chunk-4IYAVH3S.js +0 -348
- package/storybook-build/sb-manager/chunk-CXYKRFSY.js +0 -9
- package/storybook-build/sb-manager/chunk-KZYAAUOR.js +0 -406
- package/storybook-build/sb-manager/chunk-LVLAH4SI.js +0 -7
- package/storybook-build/sb-manager/chunk-ZEU7PDD3.js +0 -1
- package/storybook-build/sb-manager/formatter-SWP5E3XI-7BGIK6BL.js +0 -156
- package/storybook-build/sb-manager/globals-module-info.js +0 -1
- package/storybook-build/sb-manager/globals.js +0 -1
- package/storybook-build/sb-manager/index.js +0 -1
- package/storybook-build/sb-manager/runtime.js +0 -1
- package/storybook-build/sb-manager/syntaxhighlighter-B5GMVT5T-EA5ASEYD.js +0 -1
- package/storybook-build/sb-preview/globals.js +0 -1
- package/storybook-build/sb-preview/runtime.js +0 -112
- package/storybook-build/src/components/Accordion/Accordion.stories.d.ts +0 -94
- package/storybook-build/src/components/Accordion/index.d.ts +0 -9
- package/storybook-build/src/components/AlertBar/AlertBar.stories.d.ts +0 -162
- package/storybook-build/src/components/AlertBar/index.d.ts +0 -13
- package/storybook-build/src/components/Avatar/Avatar.stories.d.ts +0 -44
- package/storybook-build/src/components/Avatar/index.d.ts +0 -4
- package/storybook-build/src/components/index.d.ts +0 -7
- package/storybook-build/src/index.d.ts +0 -1
- package/storybook-build/src/utils/controls.d.ts +0 -36
- package/storybook-build/src/utils/matchMedia.d.ts +0 -2
- package/storybook-build/src/utils/screens.d.ts +0 -7
- package/storybook-build/src/utils/theme.d.ts +0 -3
- package/storybook-build/stories.json +0 -1
- package/storybook-build/styles/base.css +0 -116
|
@@ -1,204 +0,0 @@
|
|
|
1
|
-
var prefix = "Invariant failed";
|
|
2
|
-
function invariant(condition, message) {
|
|
3
|
-
if (condition) {
|
|
4
|
-
return;
|
|
5
|
-
}
|
|
6
|
-
{
|
|
7
|
-
throw new Error(prefix);
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
const { useEffect } = __STORYBOOK_MODULE_PREVIEW_API__;
|
|
11
|
-
const { global } = __STORYBOOK_MODULE_GLOBAL__;
|
|
12
|
-
function getDocumentWidthAndHeight() {
|
|
13
|
-
let container = global.document.documentElement, height = Math.max(container.scrollHeight, container.offsetHeight);
|
|
14
|
-
return { width: Math.max(container.scrollWidth, container.offsetWidth), height };
|
|
15
|
-
}
|
|
16
|
-
function createCanvas() {
|
|
17
|
-
let canvas = global.document.createElement("canvas");
|
|
18
|
-
canvas.id = "storybook-addon-measure";
|
|
19
|
-
let context = canvas.getContext("2d");
|
|
20
|
-
invariant(context != null);
|
|
21
|
-
let { width, height } = getDocumentWidthAndHeight();
|
|
22
|
-
return setCanvasWidthAndHeight(canvas, context, { width, height }), canvas.style.position = "absolute", canvas.style.left = "0", canvas.style.top = "0", canvas.style.zIndex = "2147483647", canvas.style.pointerEvents = "none", global.document.body.appendChild(canvas), { canvas, context, width, height };
|
|
23
|
-
}
|
|
24
|
-
function setCanvasWidthAndHeight(canvas, context, { width, height }) {
|
|
25
|
-
canvas.style.width = `${width}px`, canvas.style.height = `${height}px`;
|
|
26
|
-
let scale = global.window.devicePixelRatio;
|
|
27
|
-
canvas.width = Math.floor(width * scale), canvas.height = Math.floor(height * scale), context.scale(scale, scale);
|
|
28
|
-
}
|
|
29
|
-
var state = {};
|
|
30
|
-
function init() {
|
|
31
|
-
state.canvas || (state = createCanvas());
|
|
32
|
-
}
|
|
33
|
-
function clear() {
|
|
34
|
-
state.context && state.context.clearRect(0, 0, state.width ?? 0, state.height ?? 0);
|
|
35
|
-
}
|
|
36
|
-
function draw(callback) {
|
|
37
|
-
clear(), callback(state.context);
|
|
38
|
-
}
|
|
39
|
-
function rescale() {
|
|
40
|
-
invariant(state.canvas), invariant(state.context), setCanvasWidthAndHeight(state.canvas, state.context, { width: 0, height: 0 });
|
|
41
|
-
let { width, height } = getDocumentWidthAndHeight();
|
|
42
|
-
setCanvasWidthAndHeight(state.canvas, state.context, { width, height }), state.width = width, state.height = height;
|
|
43
|
-
}
|
|
44
|
-
function destroy() {
|
|
45
|
-
var _a;
|
|
46
|
-
state.canvas && (clear(), (_a = state.canvas.parentNode) == null ? void 0 : _a.removeChild(state.canvas), state = {});
|
|
47
|
-
}
|
|
48
|
-
var colors = { margin: "#f6b26b", border: "#ffe599", padding: "#93c47d", content: "#6fa8dc", text: "#232020" }, labelPadding = 6;
|
|
49
|
-
function roundedRect(context, { x, y, w, h, r }) {
|
|
50
|
-
x = x - w / 2, y = y - h / 2, w < 2 * r && (r = w / 2), h < 2 * r && (r = h / 2), context.beginPath(), context.moveTo(x + r, y), context.arcTo(x + w, y, x + w, y + h, r), context.arcTo(x + w, y + h, x, y + h, r), context.arcTo(x, y + h, x, y, r), context.arcTo(x, y, x + w, y, r), context.closePath();
|
|
51
|
-
}
|
|
52
|
-
function positionCoordinate(position, { padding, border, width, height, top, left }) {
|
|
53
|
-
let contentWidth = width - border.left - border.right - padding.left - padding.right, contentHeight = height - padding.top - padding.bottom - border.top - border.bottom, x = left + border.left + padding.left, y = top + border.top + padding.top;
|
|
54
|
-
return position === "top" ? x += contentWidth / 2 : position === "right" ? (x += contentWidth, y += contentHeight / 2) : position === "bottom" ? (x += contentWidth / 2, y += contentHeight) : position === "left" ? y += contentHeight / 2 : position === "center" && (x += contentWidth / 2, y += contentHeight / 2), { x, y };
|
|
55
|
-
}
|
|
56
|
-
function offset(type, position, { margin, border, padding }, labelPaddingSize, external) {
|
|
57
|
-
let shift = (dir) => 0, offsetX = 0, offsetY = 0, locationMultiplier = external ? 1 : 0.5, labelPaddingShift = external ? labelPaddingSize * 2 : 0;
|
|
58
|
-
return type === "padding" ? shift = (dir) => padding[dir] * locationMultiplier + labelPaddingShift : type === "border" ? shift = (dir) => padding[dir] + border[dir] * locationMultiplier + labelPaddingShift : type === "margin" && (shift = (dir) => padding[dir] + border[dir] + margin[dir] * locationMultiplier + labelPaddingShift), position === "top" ? offsetY = -shift("top") : position === "right" ? offsetX = shift("right") : position === "bottom" ? offsetY = shift("bottom") : position === "left" && (offsetX = -shift("left")), { offsetX, offsetY };
|
|
59
|
-
}
|
|
60
|
-
function collide(a, b) {
|
|
61
|
-
return Math.abs(a.x - b.x) < Math.abs(a.w + b.w) / 2 && Math.abs(a.y - b.y) < Math.abs(a.h + b.h) / 2;
|
|
62
|
-
}
|
|
63
|
-
function overlapAdjustment(position, currentRect, prevRect) {
|
|
64
|
-
return position === "top" ? currentRect.y = prevRect.y - prevRect.h - labelPadding : position === "right" ? currentRect.x = prevRect.x + prevRect.w / 2 + labelPadding + currentRect.w / 2 : position === "bottom" ? currentRect.y = prevRect.y + prevRect.h + labelPadding : position === "left" && (currentRect.x = prevRect.x - prevRect.w / 2 - labelPadding - currentRect.w / 2), { x: currentRect.x, y: currentRect.y };
|
|
65
|
-
}
|
|
66
|
-
function textWithRect(context, type, { x, y, w, h }, text) {
|
|
67
|
-
return roundedRect(context, { x, y, w, h, r: 3 }), context.fillStyle = `${colors[type]}dd`, context.fill(), context.strokeStyle = colors[type], context.stroke(), context.fillStyle = colors.text, context.fillText(text, x, y), roundedRect(context, { x, y, w, h, r: 3 }), context.fillStyle = `${colors[type]}dd`, context.fill(), context.strokeStyle = colors[type], context.stroke(), context.fillStyle = colors.text, context.fillText(text, x, y), { x, y, w, h };
|
|
68
|
-
}
|
|
69
|
-
function configureText(context, text) {
|
|
70
|
-
context.font = "600 12px monospace", context.textBaseline = "middle", context.textAlign = "center";
|
|
71
|
-
let metrics = context.measureText(text), actualHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent, w = metrics.width + labelPadding * 2, h = actualHeight + labelPadding * 2;
|
|
72
|
-
return { w, h };
|
|
73
|
-
}
|
|
74
|
-
function drawLabel(context, measurements, { type, position = "center", text }, prevRect, external = false) {
|
|
75
|
-
let { x, y } = positionCoordinate(position, measurements), { offsetX, offsetY } = offset(type, position, measurements, labelPadding + 1, external);
|
|
76
|
-
x += offsetX, y += offsetY;
|
|
77
|
-
let { w, h } = configureText(context, text);
|
|
78
|
-
if (prevRect && collide({ x, y, w, h }, prevRect)) {
|
|
79
|
-
let adjusted = overlapAdjustment(position, { x, y, w, h }, prevRect);
|
|
80
|
-
x = adjusted.x, y = adjusted.y;
|
|
81
|
-
}
|
|
82
|
-
return textWithRect(context, type, { x, y, w, h }, text);
|
|
83
|
-
}
|
|
84
|
-
function floatingOffset(alignment, { w, h }) {
|
|
85
|
-
let deltaW = w * 0.5 + labelPadding, deltaH = h * 0.5 + labelPadding;
|
|
86
|
-
return { offsetX: (alignment.x === "left" ? -1 : 1) * deltaW, offsetY: (alignment.y === "top" ? -1 : 1) * deltaH };
|
|
87
|
-
}
|
|
88
|
-
function drawFloatingLabel(context, measurements, { type, text }) {
|
|
89
|
-
let { floatingAlignment: floatingAlignment2, extremities } = measurements, x = extremities[floatingAlignment2.x], y = extremities[floatingAlignment2.y], { w, h } = configureText(context, text), { offsetX, offsetY } = floatingOffset(floatingAlignment2, { w, h });
|
|
90
|
-
return x += offsetX, y += offsetY, textWithRect(context, type, { x, y, w, h }, text);
|
|
91
|
-
}
|
|
92
|
-
function drawStack(context, measurements, stack, external) {
|
|
93
|
-
let rects = [];
|
|
94
|
-
stack.forEach((l, idx) => {
|
|
95
|
-
let rect = external && l.position === "center" ? drawFloatingLabel(context, measurements, l) : drawLabel(context, measurements, l, rects[idx - 1], external);
|
|
96
|
-
rects[idx] = rect;
|
|
97
|
-
});
|
|
98
|
-
}
|
|
99
|
-
function labelStacks(context, measurements, labels, externalLabels) {
|
|
100
|
-
let stacks = labels.reduce((acc, l) => {
|
|
101
|
-
var _a;
|
|
102
|
-
return Object.prototype.hasOwnProperty.call(acc, l.position) || (acc[l.position] = []), (_a = acc[l.position]) == null ? void 0 : _a.push(l), acc;
|
|
103
|
-
}, {});
|
|
104
|
-
stacks.top && drawStack(context, measurements, stacks.top, externalLabels), stacks.right && drawStack(context, measurements, stacks.right, externalLabels), stacks.bottom && drawStack(context, measurements, stacks.bottom, externalLabels), stacks.left && drawStack(context, measurements, stacks.left, externalLabels), stacks.center && drawStack(context, measurements, stacks.center, externalLabels);
|
|
105
|
-
}
|
|
106
|
-
var colors2 = { margin: "#f6b26ba8", border: "#ffe599a8", padding: "#93c47d8c", content: "#6fa8dca8" }, SMALL_NODE_SIZE = 30;
|
|
107
|
-
function pxToNumber(px) {
|
|
108
|
-
return parseInt(px.replace("px", ""), 10);
|
|
109
|
-
}
|
|
110
|
-
function round(value) {
|
|
111
|
-
return Number.isInteger(value) ? value : value.toFixed(2);
|
|
112
|
-
}
|
|
113
|
-
function filterZeroValues(labels) {
|
|
114
|
-
return labels.filter((l) => l.text !== 0 && l.text !== "0");
|
|
115
|
-
}
|
|
116
|
-
function floatingAlignment(extremities) {
|
|
117
|
-
let windowExtremities = { top: global.window.scrollY, bottom: global.window.scrollY + global.window.innerHeight, left: global.window.scrollX, right: global.window.scrollX + global.window.innerWidth }, distances = { top: Math.abs(windowExtremities.top - extremities.top), bottom: Math.abs(windowExtremities.bottom - extremities.bottom), left: Math.abs(windowExtremities.left - extremities.left), right: Math.abs(windowExtremities.right - extremities.right) };
|
|
118
|
-
return { x: distances.left > distances.right ? "left" : "right", y: distances.top > distances.bottom ? "top" : "bottom" };
|
|
119
|
-
}
|
|
120
|
-
function measureElement(element) {
|
|
121
|
-
let style = global.getComputedStyle(element), { top, left, right, bottom, width, height } = element.getBoundingClientRect(), { marginTop, marginBottom, marginLeft, marginRight, paddingTop, paddingBottom, paddingLeft, paddingRight, borderBottomWidth, borderTopWidth, borderLeftWidth, borderRightWidth } = style;
|
|
122
|
-
top = top + global.window.scrollY, left = left + global.window.scrollX, bottom = bottom + global.window.scrollY, right = right + global.window.scrollX;
|
|
123
|
-
let margin = { top: pxToNumber(marginTop), bottom: pxToNumber(marginBottom), left: pxToNumber(marginLeft), right: pxToNumber(marginRight) }, padding = { top: pxToNumber(paddingTop), bottom: pxToNumber(paddingBottom), left: pxToNumber(paddingLeft), right: pxToNumber(paddingRight) }, border = { top: pxToNumber(borderTopWidth), bottom: pxToNumber(borderBottomWidth), left: pxToNumber(borderLeftWidth), right: pxToNumber(borderRightWidth) }, extremities = { top: top - margin.top, bottom: bottom + margin.bottom, left: left - margin.left, right: right + margin.right };
|
|
124
|
-
return { margin, padding, border, top, left, bottom, right, width, height, extremities, floatingAlignment: floatingAlignment(extremities) };
|
|
125
|
-
}
|
|
126
|
-
function drawMargin(context, { margin, width, height, top, left, bottom, right }) {
|
|
127
|
-
let marginHeight = height + margin.bottom + margin.top;
|
|
128
|
-
context.fillStyle = colors2.margin, context.fillRect(left, top - margin.top, width, margin.top), context.fillRect(right, top - margin.top, margin.right, marginHeight), context.fillRect(left, bottom, width, margin.bottom), context.fillRect(left - margin.left, top - margin.top, margin.left, marginHeight);
|
|
129
|
-
let marginLabels = [{ type: "margin", text: round(margin.top), position: "top" }, { type: "margin", text: round(margin.right), position: "right" }, { type: "margin", text: round(margin.bottom), position: "bottom" }, { type: "margin", text: round(margin.left), position: "left" }];
|
|
130
|
-
return filterZeroValues(marginLabels);
|
|
131
|
-
}
|
|
132
|
-
function drawPadding(context, { padding, border, width, height, top, left, bottom, right }) {
|
|
133
|
-
let paddingWidth = width - border.left - border.right, paddingHeight = height - padding.top - padding.bottom - border.top - border.bottom;
|
|
134
|
-
context.fillStyle = colors2.padding, context.fillRect(left + border.left, top + border.top, paddingWidth, padding.top), context.fillRect(right - padding.right - border.right, top + padding.top + border.top, padding.right, paddingHeight), context.fillRect(left + border.left, bottom - padding.bottom - border.bottom, paddingWidth, padding.bottom), context.fillRect(left + border.left, top + padding.top + border.top, padding.left, paddingHeight);
|
|
135
|
-
let paddingLabels = [{ type: "padding", text: padding.top, position: "top" }, { type: "padding", text: padding.right, position: "right" }, { type: "padding", text: padding.bottom, position: "bottom" }, { type: "padding", text: padding.left, position: "left" }];
|
|
136
|
-
return filterZeroValues(paddingLabels);
|
|
137
|
-
}
|
|
138
|
-
function drawBorder(context, { border, width, height, top, left, bottom, right }) {
|
|
139
|
-
let borderHeight = height - border.top - border.bottom;
|
|
140
|
-
context.fillStyle = colors2.border, context.fillRect(left, top, width, border.top), context.fillRect(left, bottom - border.bottom, width, border.bottom), context.fillRect(left, top + border.top, border.left, borderHeight), context.fillRect(right - border.right, top + border.top, border.right, borderHeight);
|
|
141
|
-
let borderLabels = [{ type: "border", text: border.top, position: "top" }, { type: "border", text: border.right, position: "right" }, { type: "border", text: border.bottom, position: "bottom" }, { type: "border", text: border.left, position: "left" }];
|
|
142
|
-
return filterZeroValues(borderLabels);
|
|
143
|
-
}
|
|
144
|
-
function drawContent(context, { padding, border, width, height, top, left }) {
|
|
145
|
-
let contentWidth = width - border.left - border.right - padding.left - padding.right, contentHeight = height - padding.top - padding.bottom - border.top - border.bottom;
|
|
146
|
-
return context.fillStyle = colors2.content, context.fillRect(left + border.left + padding.left, top + border.top + padding.top, contentWidth, contentHeight), [{ type: "content", position: "center", text: `${round(contentWidth)} x ${round(contentHeight)}` }];
|
|
147
|
-
}
|
|
148
|
-
function drawBoxModel(element) {
|
|
149
|
-
return (context) => {
|
|
150
|
-
if (element && context) {
|
|
151
|
-
let measurements = measureElement(element), marginLabels = drawMargin(context, measurements), paddingLabels = drawPadding(context, measurements), borderLabels = drawBorder(context, measurements), contentLabels = drawContent(context, measurements), externalLabels = measurements.width <= SMALL_NODE_SIZE * 3 || measurements.height <= SMALL_NODE_SIZE;
|
|
152
|
-
labelStacks(context, measurements, [...contentLabels, ...paddingLabels, ...borderLabels, ...marginLabels], externalLabels);
|
|
153
|
-
}
|
|
154
|
-
};
|
|
155
|
-
}
|
|
156
|
-
function drawSelectedElement(element) {
|
|
157
|
-
draw(drawBoxModel(element));
|
|
158
|
-
}
|
|
159
|
-
var deepElementFromPoint = (x, y) => {
|
|
160
|
-
let element = global.document.elementFromPoint(x, y), crawlShadows = (node) => {
|
|
161
|
-
if (node && node.shadowRoot) {
|
|
162
|
-
let nestedElement = node.shadowRoot.elementFromPoint(x, y);
|
|
163
|
-
return node.isEqualNode(nestedElement) ? node : nestedElement.shadowRoot ? crawlShadows(nestedElement) : nestedElement;
|
|
164
|
-
}
|
|
165
|
-
return node;
|
|
166
|
-
};
|
|
167
|
-
return crawlShadows(element) || element;
|
|
168
|
-
};
|
|
169
|
-
var nodeAtPointerRef, pointer = { x: 0, y: 0 };
|
|
170
|
-
function findAndDrawElement(x, y) {
|
|
171
|
-
nodeAtPointerRef = deepElementFromPoint(x, y), drawSelectedElement(nodeAtPointerRef);
|
|
172
|
-
}
|
|
173
|
-
var withMeasure = (StoryFn, context) => {
|
|
174
|
-
let { measureEnabled } = context.globals;
|
|
175
|
-
return useEffect(() => {
|
|
176
|
-
let onPointerMove = (event) => {
|
|
177
|
-
window.requestAnimationFrame(() => {
|
|
178
|
-
event.stopPropagation(), pointer.x = event.clientX, pointer.y = event.clientY;
|
|
179
|
-
});
|
|
180
|
-
};
|
|
181
|
-
return document.addEventListener("pointermove", onPointerMove), () => {
|
|
182
|
-
document.removeEventListener("pointermove", onPointerMove);
|
|
183
|
-
};
|
|
184
|
-
}, []), useEffect(() => {
|
|
185
|
-
let onPointerOver = (event) => {
|
|
186
|
-
window.requestAnimationFrame(() => {
|
|
187
|
-
event.stopPropagation(), findAndDrawElement(event.clientX, event.clientY);
|
|
188
|
-
});
|
|
189
|
-
}, onResize = () => {
|
|
190
|
-
window.requestAnimationFrame(() => {
|
|
191
|
-
rescale();
|
|
192
|
-
});
|
|
193
|
-
};
|
|
194
|
-
return context.viewMode === "story" && measureEnabled && (document.addEventListener("pointerover", onPointerOver), init(), window.addEventListener("resize", onResize), findAndDrawElement(pointer.x, pointer.y)), () => {
|
|
195
|
-
window.removeEventListener("resize", onResize), destroy();
|
|
196
|
-
};
|
|
197
|
-
}, [measureEnabled, context.viewMode]), StoryFn();
|
|
198
|
-
};
|
|
199
|
-
var PARAM_KEY = "measureEnabled";
|
|
200
|
-
var decorators = [withMeasure], globals = { [PARAM_KEY]: false };
|
|
201
|
-
export {
|
|
202
|
-
decorators,
|
|
203
|
-
globals
|
|
204
|
-
};
|