mesurer 0.0.5 → 0.0.7
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/CHANGELOG.md +11 -0
- package/README.md +19 -20
- package/dist/index.cjs +224 -185
- package/dist/index.d.cts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +224 -185
- package/dist/styles.css +164 -298
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -24,21 +24,6 @@ __export(index_exports, {
|
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(index_exports);
|
|
26
26
|
|
|
27
|
-
// style-inject.ts
|
|
28
|
-
var MESURER_STYLE_ID = "mesurer-styles";
|
|
29
|
-
function ensureMeasurerStyles(cssText) {
|
|
30
|
-
if (typeof document === "undefined") return;
|
|
31
|
-
if (!cssText) return;
|
|
32
|
-
if (document.getElementById(MESURER_STYLE_ID)) return;
|
|
33
|
-
const style = document.createElement("style");
|
|
34
|
-
style.id = MESURER_STYLE_ID;
|
|
35
|
-
style.textContent = cssText;
|
|
36
|
-
document.head.appendChild(style);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
// styles.generated.ts
|
|
40
|
-
var MESURER_STYLES = '/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root, :host {\n --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",\n "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",\n "Courier New", monospace;\n --color-black: #000;\n --color-white: #fff;\n --spacing: 0.25rem;\n --radius-md: 0.375rem;\n --radius-lg: 0.5rem;\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --color-ink-50: var(--color-ink-50);\n --color-ink-200: var(--color-ink-200);\n --color-ink-500: var(--color-ink-500);\n --color-ink-700: var(--color-ink-700);\n --color-ink-900: var(--color-ink-900);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden="until-found"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-auto {\n pointer-events: auto;\n }\n .pointer-events-none {\n pointer-events: none;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .start {\n inset-inline-start: var(--spacing);\n }\n .end {\n inset-inline-end: var(--spacing);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .top-full {\n top: 100%;\n }\n .right-0 {\n right: calc(var(--spacing) * 0);\n }\n .bottom-0 {\n bottom: calc(var(--spacing) * 0);\n }\n .bottom-full {\n bottom: 100%;\n }\n .left-0 {\n left: calc(var(--spacing) * 0);\n }\n .left-1 {\n left: calc(var(--spacing) * 1);\n }\n .left-1\\/2 {\n left: calc(1 / 2 * 100%);\n }\n .z-50 {\n z-index: 50;\n }\n .z-\\[70\\] {\n z-index: 70;\n }\n .z-\\[90\\] {\n z-index: 90;\n }\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n .-ml-1 {\n margin-left: calc(var(--spacing) * -1);\n }\n .flex {\n display: flex;\n }\n .table {\n display: table;\n }\n .size-8 {\n width: calc(var(--spacing) * 8);\n height: calc(var(--spacing) * 8);\n }\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n .h-full {\n height: 100%;\n }\n .h-px {\n height: 1px;\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-44 {\n width: calc(var(--spacing) * 44);\n }\n .w-full {\n width: 100%;\n }\n .w-px {\n width: 1px;\n }\n .flex-1 {\n flex: 1;\n }\n .border-collapse {\n border-collapse: collapse;\n }\n .-translate-x-1 {\n --tw-translate-x: calc(var(--spacing) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-y-1 {\n --tw-translate-y: calc(var(--spacing) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .rotate-90 {\n rotate: 90deg;\n }\n .rotate-\\[45deg\\] {\n rotate: 45deg;\n }\n .rotate-\\[135deg\\] {\n rotate: 135deg;\n }\n .cursor-crosshair {\n cursor: crosshair;\n }\n .cursor-default {\n cursor: default;\n }\n .cursor-grab {\n cursor: grab;\n }\n .cursor-grabbing {\n cursor: grabbing;\n }\n .cursor-pointer {\n cursor: pointer;\n }\n .resize {\n resize: both;\n }\n .flex-col {\n flex-direction: column;\n }\n .items-center {\n align-items: center;\n }\n .items-stretch {\n align-items: stretch;\n }\n .justify-center {\n justify-content: center;\n }\n .gap-1 {\n gap: calc(var(--spacing) * 1);\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .gap-px {\n gap: 1px;\n }\n .rounded {\n border-radius: 0.25rem;\n }\n .rounded-\\[6px\\] {\n border-radius: 6px;\n }\n .rounded-\\[8px\\] {\n border-radius: 8px;\n }\n .rounded-\\[12px\\] {\n border-radius: 12px;\n }\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n .rounded-md {\n border-radius: var(--radius-md);\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n .border-l {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n .border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n }\n .border-\\[\\#2563eb\\]\\/70 {\n border-color: color-mix(in oklab, #2563eb 70%, transparent);\n }\n .border-ink-200 {\n border-color: var(--color-ink-200);\n }\n .bg-\\[\\#0d99ff\\] {\n background-color: #0d99ff;\n }\n .bg-\\[\\#2563eb\\] {\n background-color: #2563eb;\n }\n .bg-\\[\\#fff\\] {\n background-color: #fff;\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-black\\/10 {\n background-color: color-mix(in srgb, #000 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 10%, transparent);\n }\n }\n .bg-ink-900 {\n background-color: var(--color-ink-900);\n }\n .bg-ink-900\\/90 {\n background-color: var(--color-ink-900);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-ink-900) 90%, transparent);\n }\n }\n .bg-transparent {\n background-color: transparent;\n }\n .bg-white {\n background-color: var(--color-white);\n }\n .p-1 {\n padding: calc(var(--spacing) * 1);\n }\n .px-1 {\n padding-inline: calc(var(--spacing) * 1);\n }\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n .py-0 {\n padding-block: calc(var(--spacing) * 0);\n }\n .py-0\\.5 {\n padding-block: calc(var(--spacing) * 0.5);\n }\n .py-1 {\n padding-block: calc(var(--spacing) * 1);\n }\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n .text-left {\n text-align: left;\n }\n .text-\\[10px\\] {\n font-size: 10px;\n }\n .text-\\[11px\\] {\n font-size: 11px;\n }\n .text-\\[12px\\] {\n font-size: 12px;\n }\n .whitespace-nowrap {\n white-space: nowrap;\n }\n .text-black {\n color: var(--color-black);\n }\n .text-ink-50 {\n color: var(--color-ink-50);\n }\n .text-ink-500 {\n color: var(--color-ink-500);\n }\n .text-ink-700 {\n color: var(--color-ink-700);\n }\n .text-white {\n color: var(--color-white);\n }\n .text-white\\/60 {\n color: color-mix(in srgb, #fff 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--color-white) 60%, transparent);\n }\n }\n .tabular-nums {\n --tw-numeric-spacing: tabular-nums;\n font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n }\n .underline {\n text-decoration-line: underline;\n }\n .opacity-0 {\n opacity: 0%;\n }\n .opacity-100 {\n opacity: 100%;\n }\n .shadow-\\[0px_0px_\\.5px_rgba\\(0\\,0\\,0\\,\\.18\\)\\,0px_3px_8px_rgba\\(0\\,0\\,0\\,\\.1\\)\\,0px_1px_3px_rgba\\(0\\,0\\,0\\,\\.1\\)\\] {\n --tw-shadow: 0px 0px .5px var(--tw-shadow-color, rgba(0,0,0,.18)), 0px 3px 8px var(--tw-shadow-color, rgba(0,0,0,.1)), 0px 1px 3px var(--tw-shadow-color, rgba(0,0,0,.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-\\[0px_10px_30px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\] {\n --tw-shadow: 0px 10px 30px var(--tw-shadow-color, rgba(0,0,0,0.08));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n .outline-transparent {\n outline-color: transparent;\n }\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .duration-150 {\n --tw-duration: 150ms;\n transition-duration: 150ms;\n }\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n .select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n .hover\\:bg-\\[\\#0d99ff\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #0d99ff;\n }\n }\n }\n .hover\\:bg-black\\/4 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, #000 4%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 4%, transparent);\n }\n }\n }\n }\n .hover\\:bg-black\\/10 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, #000 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 10%, transparent);\n }\n }\n }\n }\n .hover\\:text-white {\n &:hover {\n @media (hover: hover) {\n color: var(--color-white);\n }\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n}\n:root {\n --color-ink-50: #f8fafc;\n --color-ink-200: #e2e8f0;\n --color-ink-500: #64748b;\n --color-ink-700: #334155;\n --color-ink-900: #0f172a;\n}\n@property --tw-translate-x {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-border-style {\n syntax: "*";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-ordinal {\n syntax: "*";\n inherits: false;\n}\n@property --tw-slashed-zero {\n syntax: "*";\n inherits: false;\n}\n@property --tw-numeric-figure {\n syntax: "*";\n inherits: false;\n}\n@property --tw-numeric-spacing {\n syntax: "*";\n inherits: false;\n}\n@property --tw-numeric-fraction {\n syntax: "*";\n inherits: false;\n}\n@property --tw-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-inset-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-ring-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: "*";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: "<length>";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: "*";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n syntax: "*";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-duration {\n syntax: "*";\n inherits: false;\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *, ::before, ::after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-border-style: solid;\n --tw-ordinal: initial;\n --tw-slashed-zero: initial;\n --tw-numeric-figure: initial;\n --tw-numeric-spacing: initial;\n --tw-numeric-fraction: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-duration: initial;\n }\n }\n}\n';
|
|
41
|
-
|
|
42
27
|
// measurer.tsx
|
|
43
28
|
var import_react19 = require("react");
|
|
44
29
|
var import_react_dom = require("react-dom");
|
|
@@ -56,6 +41,35 @@ var ANCESTOR_KEEP_COVERAGE = 0.92;
|
|
|
56
41
|
var MIN_SINGLE_TARGET_SIZE = 8;
|
|
57
42
|
var MIN_SINGLE_ELEMENT_COVERAGE = 0.15;
|
|
58
43
|
|
|
44
|
+
// style-inject.ts
|
|
45
|
+
var MESURER_STYLE_ID = "mesurer-styles";
|
|
46
|
+
var getStyleTarget = (target) => {
|
|
47
|
+
if (typeof document === "undefined") return null;
|
|
48
|
+
if (!target) return document;
|
|
49
|
+
if (target instanceof ShadowRoot) return target;
|
|
50
|
+
const rootNode = target.getRootNode();
|
|
51
|
+
if (rootNode instanceof ShadowRoot) return rootNode;
|
|
52
|
+
return document;
|
|
53
|
+
};
|
|
54
|
+
function ensureMeasurerStyles(cssText, target) {
|
|
55
|
+
if (typeof document === "undefined") return;
|
|
56
|
+
if (!cssText) return;
|
|
57
|
+
const styleTarget = getStyleTarget(target);
|
|
58
|
+
if (!styleTarget) return;
|
|
59
|
+
if (styleTarget.querySelector(`#${MESURER_STYLE_ID}`)) return;
|
|
60
|
+
const style = document.createElement("style");
|
|
61
|
+
style.id = MESURER_STYLE_ID;
|
|
62
|
+
style.textContent = cssText;
|
|
63
|
+
if (styleTarget instanceof ShadowRoot) {
|
|
64
|
+
styleTarget.appendChild(style);
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
styleTarget.head.appendChild(style);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
// styles.generated.ts
|
|
71
|
+
var MESURER_STYLES = '/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root, :host {\n --msr-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",\n "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n --msr-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",\n "Courier New", monospace;\n --msr-color-black: #000;\n --msr-color-white: #fff;\n --msr-spacing: 0.25rem;\n --msr-radius-md: 0.375rem;\n --msr-radius-lg: 0.5rem;\n --msr-default-transition-duration: 150ms;\n --msr-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --msr-default-font-family: var(--msr-font-sans);\n --msr-default-mono-font-family: var(--msr-font-mono);\n --msr-color-ink-50: var(--color-ink-50);\n --msr-color-ink-200: var(--color-ink-200);\n --msr-color-ink-700: var(--color-ink-700);\n --msr-color-ink-900: var(--color-ink-900);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--msr-default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n font-feature-settings: var(--msr-default-font-feature-settings, normal);\n font-variation-settings: var(--msr-default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--msr-default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n font-feature-settings: var(--msr-default-mono-font-feature-settings, normal);\n font-variation-settings: var(--msr-default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden="until-found"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .msr\\:pointer-events-auto {\n pointer-events: auto;\n }\n .msr\\:pointer-events-none {\n pointer-events: none;\n }\n .msr\\:absolute {\n position: absolute;\n }\n .msr\\:fixed {\n position: fixed;\n }\n .msr\\:relative {\n position: relative;\n }\n .msr\\:inset-0 {\n inset: calc(var(--msr-spacing) * 0);\n }\n .msr\\:top-0 {\n top: calc(var(--msr-spacing) * 0);\n }\n .msr\\:top-full {\n top: 100%;\n }\n .msr\\:right-0 {\n right: calc(var(--msr-spacing) * 0);\n }\n .msr\\:bottom-0 {\n bottom: calc(var(--msr-spacing) * 0);\n }\n .msr\\:bottom-full {\n bottom: 100%;\n }\n .msr\\:left-0 {\n left: calc(var(--msr-spacing) * 0);\n }\n .msr\\:left-1\\/2 {\n left: calc(1 / 2 * 100%);\n }\n .msr\\:z-50 {\n z-index: 50;\n }\n .msr\\:z-\\[70\\] {\n z-index: 70;\n }\n .msr\\:z-\\[90\\] {\n z-index: 90;\n }\n .msr\\:mt-2 {\n margin-top: calc(var(--msr-spacing) * 2);\n }\n .msr\\:mb-2 {\n margin-bottom: calc(var(--msr-spacing) * 2);\n }\n .msr\\:-ml-1 {\n margin-left: calc(var(--msr-spacing) * -1);\n }\n .msr\\:flex {\n display: flex;\n }\n .msr\\:size-8 {\n width: calc(var(--msr-spacing) * 8);\n height: calc(var(--msr-spacing) * 8);\n }\n .msr\\:h-8 {\n height: calc(var(--msr-spacing) * 8);\n }\n .msr\\:h-full {\n height: 100%;\n }\n .msr\\:h-px {\n height: 1px;\n }\n .msr\\:w-4 {\n width: calc(var(--msr-spacing) * 4);\n }\n .msr\\:w-44 {\n width: calc(var(--msr-spacing) * 44);\n }\n .msr\\:w-full {\n width: 100%;\n }\n .msr\\:w-px {\n width: 1px;\n }\n .msr\\:flex-1 {\n flex: 1;\n }\n .msr\\:-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .msr\\:-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .msr\\:rotate-90 {\n rotate: 90deg;\n }\n .msr\\:rotate-\\[45deg\\] {\n rotate: 45deg;\n }\n .msr\\:rotate-\\[135deg\\] {\n rotate: 135deg;\n }\n .msr\\:cursor-crosshair {\n cursor: crosshair;\n }\n .msr\\:cursor-default {\n cursor: default;\n }\n .msr\\:flex-col {\n flex-direction: column;\n }\n .msr\\:items-center {\n align-items: center;\n }\n .msr\\:items-stretch {\n align-items: stretch;\n }\n .msr\\:justify-center {\n justify-content: center;\n }\n .msr\\:gap-1 {\n gap: calc(var(--msr-spacing) * 1);\n }\n .msr\\:gap-2 {\n gap: calc(var(--msr-spacing) * 2);\n }\n .msr\\:gap-px {\n gap: 1px;\n }\n .msr\\:rounded {\n border-radius: 0.25rem;\n }\n .msr\\:rounded-\\[6px\\] {\n border-radius: 6px;\n }\n .msr\\:rounded-\\[8px\\] {\n border-radius: 8px;\n }\n .msr\\:rounded-\\[12px\\] {\n border-radius: 12px;\n }\n .msr\\:rounded-lg {\n border-radius: var(--msr-radius-lg);\n }\n .msr\\:rounded-md {\n border-radius: var(--msr-radius-md);\n }\n .msr\\:border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .msr\\:border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n .msr\\:border-l {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n .msr\\:border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n }\n .msr\\:border-\\[\\#2563eb\\]\\/70 {\n border-color: color-mix(in oklab, #2563eb 70%, transparent);\n }\n .msr\\:border-ink-200 {\n border-color: var(--msr-color-ink-200);\n }\n .msr\\:bg-\\[\\#0d99ff\\] {\n background-color: #0d99ff;\n }\n .msr\\:bg-\\[\\#2563eb\\] {\n background-color: #2563eb;\n }\n .msr\\:bg-\\[\\#fff\\] {\n background-color: #fff;\n }\n .msr\\:bg-black {\n background-color: var(--msr-color-black);\n }\n .msr\\:bg-black\\/10 {\n background-color: var(--msr-color-black);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--msr-color-black) 10%, transparent);\n }\n }\n .msr\\:bg-ink-900\\/90 {\n background-color: var(--msr-color-ink-900);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--msr-color-ink-900) 90%, transparent);\n }\n }\n .msr\\:bg-transparent {\n background-color: transparent;\n }\n .msr\\:bg-white {\n background-color: var(--msr-color-white);\n }\n .msr\\:p-1 {\n padding: calc(var(--msr-spacing) * 1);\n }\n .msr\\:px-1 {\n padding-inline: calc(var(--msr-spacing) * 1);\n }\n .msr\\:px-2 {\n padding-inline: calc(var(--msr-spacing) * 2);\n }\n .msr\\:py-0\\.5 {\n padding-block: calc(var(--msr-spacing) * 0.5);\n }\n .msr\\:py-1 {\n padding-block: calc(var(--msr-spacing) * 1);\n }\n .msr\\:py-1\\.5 {\n padding-block: calc(var(--msr-spacing) * 1.5);\n }\n .msr\\:text-left {\n text-align: left;\n }\n .msr\\:text-\\[10px\\] {\n font-size: 10px;\n }\n .msr\\:text-\\[11px\\] {\n font-size: 11px;\n }\n .msr\\:text-\\[12px\\] {\n font-size: 12px;\n }\n .msr\\:whitespace-nowrap {\n white-space: nowrap;\n }\n .msr\\:text-black {\n color: var(--msr-color-black);\n }\n .msr\\:text-ink-50 {\n color: var(--msr-color-ink-50);\n }\n .msr\\:text-ink-700 {\n color: var(--msr-color-ink-700);\n }\n .msr\\:text-white {\n color: var(--msr-color-white);\n }\n .msr\\:text-white\\/60 {\n color: var(--msr-color-white);\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, var(--msr-color-white) 60%, transparent);\n }\n }\n .msr\\:tabular-nums {\n --tw-numeric-spacing: tabular-nums;\n font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n }\n .msr\\:opacity-0 {\n opacity: 0%;\n }\n .msr\\:opacity-100 {\n opacity: 100%;\n }\n .msr\\:outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n .msr\\:outline-transparent {\n outline-color: transparent;\n }\n .msr\\:transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--msr-default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--msr-default-transition-duration));\n }\n .msr\\:duration-150 {\n --tw-duration: 150ms;\n transition-duration: 150ms;\n }\n .msr\\:outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n .msr\\:select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n .msr\\:hover\\:bg-\\[\\#0d99ff\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #0d99ff;\n }\n }\n }\n .msr\\:hover\\:bg-black\\/4 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--msr-color-black);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--msr-color-black) 4%, transparent);\n }\n }\n }\n }\n .msr\\:hover\\:bg-black\\/10 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--msr-color-black);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--msr-color-black) 10%, transparent);\n }\n }\n }\n }\n .msr\\:hover\\:text-white {\n &:hover {\n @media (hover: hover) {\n color: var(--msr-color-white);\n }\n }\n }\n .msr\\:focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n}\n:root, :host {\n --color-ink-50: #f8fafc;\n --color-ink-200: #e2e8f0;\n --color-ink-500: #64748b;\n --color-ink-700: #334155;\n --color-ink-900: #0f172a;\n}\n.mesurer-toolbar-surface {\n box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.18), 0 3px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n.mesurer-menu-surface {\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);\n}\n@property --tw-translate-x {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-border-style {\n syntax: "*";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-ordinal {\n syntax: "*";\n inherits: false;\n}\n@property --tw-slashed-zero {\n syntax: "*";\n inherits: false;\n}\n@property --tw-numeric-figure {\n syntax: "*";\n inherits: false;\n}\n@property --tw-numeric-spacing {\n syntax: "*";\n inherits: false;\n}\n@property --tw-numeric-fraction {\n syntax: "*";\n inherits: false;\n}\n@property --tw-outline-style {\n syntax: "*";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-duration {\n syntax: "*";\n inherits: false;\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *, ::before, ::after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-border-style: solid;\n --tw-ordinal: initial;\n --tw-slashed-zero: initial;\n --tw-numeric-figure: initial;\n --tw-numeric-spacing: initial;\n --tw-numeric-fraction: initial;\n --tw-outline-style: solid;\n --tw-duration: initial;\n }\n }\n}\n';
|
|
72
|
+
|
|
59
73
|
// components/toolbar.tsx
|
|
60
74
|
var import_react = require("react");
|
|
61
75
|
|
|
@@ -87,6 +101,8 @@ var MinusIcon = ({ size = 12, ...props }) => /* @__PURE__ */ (0, import_jsx_runt
|
|
|
87
101
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
88
102
|
var TOOLBAR_TOOLTIP_DELAY_MS = 800;
|
|
89
103
|
var TOOLBAR_DRAG_SLOP = 6;
|
|
104
|
+
var GUIDE_MENU_WIDTH = 176;
|
|
105
|
+
var VIEWPORT_PADDING = 8;
|
|
90
106
|
function ToolbarButton({
|
|
91
107
|
id,
|
|
92
108
|
active,
|
|
@@ -102,7 +118,7 @@ function ToolbarButton({
|
|
|
102
118
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
103
119
|
"div",
|
|
104
120
|
{
|
|
105
|
-
className: "relative",
|
|
121
|
+
className: "msr:relative",
|
|
106
122
|
onMouseEnter: () => onTooltipEnter(id),
|
|
107
123
|
onMouseLeave: () => onTooltipLeave(id),
|
|
108
124
|
children: [
|
|
@@ -113,8 +129,8 @@ function ToolbarButton({
|
|
|
113
129
|
"aria-label": `${label} (${shortcut})`,
|
|
114
130
|
title: `${label} (${shortcut})`,
|
|
115
131
|
className: cn(
|
|
116
|
-
"flex size-8 items-center justify-center rounded-[8px] outline-none",
|
|
117
|
-
active ? "bg-[#0d99ff] text-white" : "bg-transparent text-black hover:bg-black/4"
|
|
132
|
+
"msr:flex msr:size-8 msr:items-center msr:justify-center msr:rounded-[8px] msr:outline-none",
|
|
133
|
+
active ? "msr:bg-[#0d99ff] msr:text-white" : "msr:bg-transparent msr:text-black msr:hover:bg-black/4"
|
|
118
134
|
),
|
|
119
135
|
onClick,
|
|
120
136
|
children
|
|
@@ -124,14 +140,14 @@ function ToolbarButton({
|
|
|
124
140
|
"span",
|
|
125
141
|
{
|
|
126
142
|
className: cn(
|
|
127
|
-
"pointer-events-none absolute left-1/2
|
|
128
|
-
tooltipSide === "top" ? "bottom-full mb-2" : "top-full mt-2",
|
|
129
|
-
tooltipVisible ? "opacity-100" : "opacity-0"
|
|
143
|
+
"msr:pointer-events-none msr:absolute msr:left-1/2 msr:-translate-x-1/2 msr:whitespace-nowrap msr:rounded msr:bg-black msr:px-2 msr:py-1 msr:text-[11px] msr:text-white msr:transition-opacity msr:duration-150 msr:select-none",
|
|
144
|
+
tooltipSide === "top" ? "msr:bottom-full msr:mb-2" : "msr:top-full msr:mt-2",
|
|
145
|
+
tooltipVisible ? "msr:opacity-100" : "msr:opacity-0"
|
|
130
146
|
),
|
|
131
147
|
children: [
|
|
132
148
|
label,
|
|
133
149
|
" ",
|
|
134
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("kbd", { className: "text-white/60", children: shortcut })
|
|
150
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("kbd", { className: "msr:text-white/60", children: shortcut })
|
|
135
151
|
]
|
|
136
152
|
}
|
|
137
153
|
)
|
|
@@ -282,9 +298,23 @@ function ToolbarComponent({
|
|
|
282
298
|
const { visibleTooltipId, onTooltipEnter, onTooltipLeave, onToolbarLeave } = useToolbarTooltip();
|
|
283
299
|
const [guideMenuOpen, setGuideMenuOpen] = (0, import_react.useState)(false);
|
|
284
300
|
const guideMenuRef = (0, import_react.useRef)(null);
|
|
285
|
-
const guideMenuPanelRef = (0, import_react.useRef)(null);
|
|
286
301
|
const [activeMenuIndex, setActiveMenuIndex] = (0, import_react.useState)(0);
|
|
287
302
|
const [menuAlign, setMenuAlign] = (0, import_react.useState)("right");
|
|
303
|
+
const updateMenuAlign = (0, import_react.useCallback)(() => {
|
|
304
|
+
const anchorRect = guideMenuRef.current?.getBoundingClientRect();
|
|
305
|
+
if (!anchorRect) return;
|
|
306
|
+
const rightAlignedLeft = anchorRect.right - GUIDE_MENU_WIDTH;
|
|
307
|
+
const leftAlignedRight = anchorRect.left + GUIDE_MENU_WIDTH;
|
|
308
|
+
if (rightAlignedLeft < VIEWPORT_PADDING) {
|
|
309
|
+
setMenuAlign("left");
|
|
310
|
+
return;
|
|
311
|
+
}
|
|
312
|
+
if (leftAlignedRight > window.innerWidth - VIEWPORT_PADDING) {
|
|
313
|
+
setMenuAlign("right");
|
|
314
|
+
return;
|
|
315
|
+
}
|
|
316
|
+
setMenuAlign("right");
|
|
317
|
+
}, []);
|
|
288
318
|
const viewportHeight = typeof window === "undefined" ? 0 : window.innerHeight || 0;
|
|
289
319
|
const nearTop = position.y < 56;
|
|
290
320
|
const nearBottom = viewportHeight > 0 && position.y > viewportHeight - 56;
|
|
@@ -314,33 +344,16 @@ function ToolbarComponent({
|
|
|
314
344
|
if (!guideMenuOpen) return;
|
|
315
345
|
const frame = requestAnimationFrame(() => {
|
|
316
346
|
guideMenuRef.current?.querySelector("[role='menu']")?.focus();
|
|
317
|
-
const panel = guideMenuPanelRef.current;
|
|
318
|
-
if (!panel) return;
|
|
319
|
-
const rect = panel.getBoundingClientRect();
|
|
320
|
-
if (rect.left < 8) {
|
|
321
|
-
setMenuAlign("left");
|
|
322
|
-
return;
|
|
323
|
-
}
|
|
324
|
-
if (rect.right > window.innerWidth - 8) {
|
|
325
|
-
setMenuAlign("right");
|
|
326
|
-
}
|
|
327
347
|
});
|
|
328
348
|
const handlePointerDown = (event) => {
|
|
329
|
-
|
|
330
|
-
if (
|
|
349
|
+
const menu = guideMenuRef.current;
|
|
350
|
+
if (!menu) return;
|
|
351
|
+
const path = event.composedPath();
|
|
352
|
+
if (path.includes(menu)) return;
|
|
331
353
|
setGuideMenuOpen(false);
|
|
332
354
|
};
|
|
333
355
|
const handleResize = () => {
|
|
334
|
-
|
|
335
|
-
if (!panel) return;
|
|
336
|
-
const rect = panel.getBoundingClientRect();
|
|
337
|
-
if (rect.left < 8) {
|
|
338
|
-
setMenuAlign("left");
|
|
339
|
-
return;
|
|
340
|
-
}
|
|
341
|
-
if (rect.right > window.innerWidth - 8) {
|
|
342
|
-
setMenuAlign("right");
|
|
343
|
-
}
|
|
356
|
+
updateMenuAlign();
|
|
344
357
|
};
|
|
345
358
|
window.addEventListener("pointerdown", handlePointerDown);
|
|
346
359
|
window.addEventListener("resize", handleResize);
|
|
@@ -349,12 +362,12 @@ function ToolbarComponent({
|
|
|
349
362
|
window.removeEventListener("pointerdown", handlePointerDown);
|
|
350
363
|
window.removeEventListener("resize", handleResize);
|
|
351
364
|
};
|
|
352
|
-
}, [guideMenuOpen, guideOrientation]);
|
|
365
|
+
}, [guideMenuOpen, guideOrientation, updateMenuAlign]);
|
|
353
366
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
354
367
|
"div",
|
|
355
368
|
{
|
|
356
369
|
ref,
|
|
357
|
-
className: "pointer-events-auto absolute z-[90] flex items-center gap-1 rounded-[12px] bg-[#fff] p-1 outline outline-transparent
|
|
370
|
+
className: "mesurer-toolbar-surface msr:pointer-events-auto msr:absolute msr:z-[90] msr:flex msr:items-center msr:gap-1 msr:rounded-[12px] msr:bg-[#fff] msr:p-1 msr:outline msr:outline-transparent",
|
|
358
371
|
style: { left: position.x, top: position.y },
|
|
359
372
|
onPointerDown: (event) => {
|
|
360
373
|
onInteract();
|
|
@@ -395,7 +408,7 @@ function ToolbarComponent({
|
|
|
395
408
|
{
|
|
396
409
|
size: 20,
|
|
397
410
|
className: cn(
|
|
398
|
-
guideOrientation === "vertical" ? "rotate-[135deg]" : "rotate-[45deg]"
|
|
411
|
+
guideOrientation === "vertical" ? "msr:rotate-[135deg]" : "msr:rotate-[45deg]"
|
|
399
412
|
)
|
|
400
413
|
}
|
|
401
414
|
)
|
|
@@ -404,7 +417,7 @@ function ToolbarComponent({
|
|
|
404
417
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
405
418
|
"div",
|
|
406
419
|
{
|
|
407
|
-
className: "group relative
|
|
420
|
+
className: "msr:group msr:relative msr:-ml-1 msr:flex msr:items-stretch",
|
|
408
421
|
ref: guideMenuRef,
|
|
409
422
|
onMouseEnter: () => onTooltipEnter("guide-menu"),
|
|
410
423
|
onMouseLeave: () => onTooltipLeave("guide-menu"),
|
|
@@ -416,14 +429,15 @@ function ToolbarComponent({
|
|
|
416
429
|
"aria-label": "Guide orientation menu",
|
|
417
430
|
title: "Guide orientation",
|
|
418
431
|
className: cn(
|
|
419
|
-
"flex h-8 w-4 items-center justify-center rounded-[6px] outline-none hover:bg-black/10",
|
|
420
|
-
guideMenuOpen ? "bg-black/10 text-black" : "text-black"
|
|
432
|
+
"msr:flex msr:h-8 msr:w-4 msr:items-center msr:justify-center msr:rounded-[6px] msr:outline-none msr:hover:bg-black/10",
|
|
433
|
+
guideMenuOpen ? "msr:bg-black/10 msr:text-black" : "msr:text-black"
|
|
421
434
|
),
|
|
422
435
|
onClick: () => {
|
|
423
436
|
onInteract();
|
|
424
437
|
setGuideMenuOpen((prev) => {
|
|
425
438
|
if (!prev) {
|
|
426
439
|
setActiveMenuIndex(guideOrientation === "horizontal" ? 0 : 1);
|
|
440
|
+
updateMenuAlign();
|
|
427
441
|
}
|
|
428
442
|
return !prev;
|
|
429
443
|
});
|
|
@@ -435,9 +449,9 @@ function ToolbarComponent({
|
|
|
435
449
|
"span",
|
|
436
450
|
{
|
|
437
451
|
className: cn(
|
|
438
|
-
"pointer-events-none absolute left-1/2
|
|
439
|
-
tooltipSide === "top" ? "bottom-full mb-2" : "top-full mt-2",
|
|
440
|
-
visibleTooltipId === "guide-menu" && !guideMenuOpen ? "opacity-100" : "opacity-0"
|
|
452
|
+
"msr:pointer-events-none msr:absolute msr:left-1/2 msr:-translate-x-1/2 msr:whitespace-nowrap msr:rounded msr:bg-black msr:px-2 msr:py-1 msr:text-[11px] msr:text-white msr:transition-opacity msr:duration-150 msr:select-none",
|
|
453
|
+
tooltipSide === "top" ? "msr:bottom-full msr:mb-2" : "msr:top-full msr:mt-2",
|
|
454
|
+
visibleTooltipId === "guide-menu" && !guideMenuOpen ? "msr:opacity-100" : "msr:opacity-0"
|
|
441
455
|
),
|
|
442
456
|
children: "Orientation Guide"
|
|
443
457
|
}
|
|
@@ -446,12 +460,11 @@ function ToolbarComponent({
|
|
|
446
460
|
"div",
|
|
447
461
|
{
|
|
448
462
|
className: cn(
|
|
449
|
-
"absolute z-[70] w-44 rounded-lg border border-ink-200 bg-white p-1
|
|
450
|
-
"flex flex-col gap-px",
|
|
451
|
-
menuSide === "bottom" ? "top-full mt-2" : "bottom-full mb-2",
|
|
452
|
-
menuAlign === "left" ? "left-0" : "right-0"
|
|
463
|
+
"mesurer-menu-surface msr:absolute msr:z-[70] msr:w-44 msr:rounded-lg msr:border msr:border-ink-200 msr:bg-white msr:p-1 msr:outline-none msr:focus:outline-none",
|
|
464
|
+
"msr:flex msr:flex-col msr:gap-px",
|
|
465
|
+
menuSide === "bottom" ? "msr:top-full msr:mt-2" : "msr:bottom-full msr:mb-2",
|
|
466
|
+
menuAlign === "left" ? "msr:left-0" : "msr:right-0"
|
|
453
467
|
),
|
|
454
|
-
ref: guideMenuPanelRef,
|
|
455
468
|
role: "menu",
|
|
456
469
|
tabIndex: 0,
|
|
457
470
|
onKeyDown: (event) => {
|
|
@@ -489,8 +502,8 @@ function ToolbarComponent({
|
|
|
489
502
|
{
|
|
490
503
|
type: "button",
|
|
491
504
|
className: cn(
|
|
492
|
-
"group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[12px]",
|
|
493
|
-
activeMenuIndex === 0 || guideOrientation === "horizontal" ? "bg-[#0d99ff] text-white" : "text-ink-700 hover:bg-[#0d99ff] hover:text-white"
|
|
505
|
+
"msr:group msr:flex msr:w-full msr:items-center msr:gap-2 msr:rounded-md msr:px-2 msr:py-1.5 msr:text-left msr:text-[12px]",
|
|
506
|
+
activeMenuIndex === 0 || guideOrientation === "horizontal" ? "msr:bg-[#0d99ff] msr:text-white" : "msr:text-ink-700 msr:hover:bg-[#0d99ff] msr:hover:text-white"
|
|
494
507
|
),
|
|
495
508
|
onClick: () => selectGuideOrientation("horizontal"),
|
|
496
509
|
children: [
|
|
@@ -499,12 +512,12 @@ function ToolbarComponent({
|
|
|
499
512
|
{
|
|
500
513
|
size: 12,
|
|
501
514
|
className: cn(
|
|
502
|
-
guideOrientation === "horizontal" ? "opacity-100" : "opacity-0"
|
|
515
|
+
guideOrientation === "horizontal" ? "msr:opacity-100" : "msr:opacity-0"
|
|
503
516
|
)
|
|
504
517
|
}
|
|
505
518
|
),
|
|
506
519
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MinusIcon, { size: 12 }),
|
|
507
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "flex-1", children: "Horizontal" }),
|
|
520
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "msr:flex-1", children: "Horizontal" }),
|
|
508
521
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "H" })
|
|
509
522
|
]
|
|
510
523
|
}
|
|
@@ -514,8 +527,8 @@ function ToolbarComponent({
|
|
|
514
527
|
{
|
|
515
528
|
type: "button",
|
|
516
529
|
className: cn(
|
|
517
|
-
"group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[12px]",
|
|
518
|
-
activeMenuIndex === 1 || guideOrientation === "vertical" ? "bg-[#0d99ff] text-white" : "text-ink-700 hover:bg-[#0d99ff] hover:text-white"
|
|
530
|
+
"msr:group msr:flex msr:w-full msr:items-center msr:gap-2 msr:rounded-md msr:px-2 msr:py-1.5 msr:text-left msr:text-[12px]",
|
|
531
|
+
activeMenuIndex === 1 || guideOrientation === "vertical" ? "msr:bg-[#0d99ff] msr:text-white" : "msr:text-ink-700 msr:hover:bg-[#0d99ff] msr:hover:text-white"
|
|
519
532
|
),
|
|
520
533
|
onClick: () => selectGuideOrientation("vertical"),
|
|
521
534
|
children: [
|
|
@@ -524,12 +537,12 @@ function ToolbarComponent({
|
|
|
524
537
|
{
|
|
525
538
|
size: 12,
|
|
526
539
|
className: cn(
|
|
527
|
-
guideOrientation === "vertical" ? "opacity-100" : "opacity-0"
|
|
540
|
+
guideOrientation === "vertical" ? "msr:opacity-100" : "msr:opacity-0"
|
|
528
541
|
)
|
|
529
542
|
}
|
|
530
543
|
),
|
|
531
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MinusIcon, { size: 12, className: "rotate-90" }),
|
|
532
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "flex-1", children: "Vertical" }),
|
|
544
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MinusIcon, { size: 12, className: "msr:rotate-90" }),
|
|
545
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "msr:flex-1", children: "Vertical" }),
|
|
533
546
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "V" })
|
|
534
547
|
]
|
|
535
548
|
}
|
|
@@ -1177,13 +1190,15 @@ var getSelectedGuide = (guides, selectedGuideIds) => {
|
|
|
1177
1190
|
return guides.find((guide) => guide.id === lastId) ?? null;
|
|
1178
1191
|
};
|
|
1179
1192
|
var getOptionPairOverlay = (params) => {
|
|
1180
|
-
if (!params.altPressed
|
|
1181
|
-
|
|
1193
|
+
if (!params.altPressed) return null;
|
|
1194
|
+
if (!params.selectedGuide && !params.primarySelectedMeasurement) return null;
|
|
1195
|
+
const primary = params.primarySelectedMeasurement;
|
|
1196
|
+
const selectedElement = params.selectedGuide ? null : primary?.elementRef ?? params.selectedElementRef ?? null;
|
|
1182
1197
|
const selectedTarget = params.selectedGuide ? {
|
|
1183
1198
|
rect: getGuideRect(params.selectedGuide),
|
|
1184
1199
|
guideId: params.selectedGuide.id
|
|
1185
|
-
} : selectedElement ? {
|
|
1186
|
-
rect:
|
|
1200
|
+
} : selectedElement && primary ? {
|
|
1201
|
+
rect: primary.rect,
|
|
1187
1202
|
element: selectedElement
|
|
1188
1203
|
} : null;
|
|
1189
1204
|
const hoverTarget = params.hoverGuide ? { rect: getGuideRect(params.hoverGuide), guideId: params.hoverGuide.id } : params.hoverElement ? {
|
|
@@ -1404,7 +1419,14 @@ var useMeasurerDerived = ({
|
|
|
1404
1419
|
selectedGuideIds
|
|
1405
1420
|
]);
|
|
1406
1421
|
const guideDistanceOverlay = (0, import_react9.useMemo)(() => {
|
|
1407
|
-
if (!altPressed || !guidesEnabled
|
|
1422
|
+
if (!altPressed || !guidesEnabled) return null;
|
|
1423
|
+
if (selectedGuide && hoverGuide && selectedGuide.id !== hoverGuide.id) {
|
|
1424
|
+
return getDistanceOverlay(
|
|
1425
|
+
getGuideRect(selectedGuide),
|
|
1426
|
+
getGuideRect(hoverGuide)
|
|
1427
|
+
);
|
|
1428
|
+
}
|
|
1429
|
+
if (!guidePreview) return null;
|
|
1408
1430
|
const previewGuide = {
|
|
1409
1431
|
id: "preview",
|
|
1410
1432
|
orientation: guidePreview.orientation,
|
|
@@ -1427,7 +1449,14 @@ var useMeasurerDerived = ({
|
|
|
1427
1449
|
getGuideRect(previewGuide),
|
|
1428
1450
|
getGuideRect(nearest.guide)
|
|
1429
1451
|
);
|
|
1430
|
-
}, [
|
|
1452
|
+
}, [
|
|
1453
|
+
altPressed,
|
|
1454
|
+
guidePreview,
|
|
1455
|
+
guides,
|
|
1456
|
+
guidesEnabled,
|
|
1457
|
+
hoverGuide,
|
|
1458
|
+
selectedGuide
|
|
1459
|
+
]);
|
|
1431
1460
|
const {
|
|
1432
1461
|
outlineColor,
|
|
1433
1462
|
fillColor,
|
|
@@ -2526,7 +2555,7 @@ function MeasureTag({
|
|
|
2526
2555
|
"div",
|
|
2527
2556
|
{
|
|
2528
2557
|
className: cn(
|
|
2529
|
-
"pointer-events-none absolute rounded px-1 py-0.5 text-[10px] text-ink-50 tabular-nums select-none",
|
|
2558
|
+
"msr:pointer-events-none msr:absolute msr:rounded msr:px-1 msr:py-0.5 msr:text-[10px] msr:text-ink-50 msr:tabular-nums msr:select-none",
|
|
2530
2559
|
className
|
|
2531
2560
|
),
|
|
2532
2561
|
style,
|
|
@@ -2559,11 +2588,11 @@ var MeasurementBox = (0, import_react15.memo)(function MeasurementBox2({
|
|
|
2559
2588
|
const displayRect = measurement.originRect ? rect : measurement.rect;
|
|
2560
2589
|
const outlineColor = "color-mix(in oklch, oklch(0.62 0.18 255) 80%, transparent)";
|
|
2561
2590
|
const fillColor = "color-mix(in oklch, oklch(0.62 0.18 255) 8%, transparent)";
|
|
2562
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "pointer-events-none", children: [
|
|
2591
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "msr:pointer-events-none", children: [
|
|
2563
2592
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
2564
2593
|
"div",
|
|
2565
2594
|
{
|
|
2566
|
-
className: "absolute",
|
|
2595
|
+
className: "msr:absolute",
|
|
2567
2596
|
style: {
|
|
2568
2597
|
left: displayRect.left,
|
|
2569
2598
|
top: displayRect.top,
|
|
@@ -2576,28 +2605,28 @@ var MeasurementBox = (0, import_react15.memo)(function MeasurementBox2({
|
|
|
2576
2605
|
edges.top ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
2577
2606
|
"div",
|
|
2578
2607
|
{
|
|
2579
|
-
className: "absolute left-0 top-0 h-px w-full",
|
|
2608
|
+
className: "msr:absolute msr:left-0 msr:top-0 msr:h-px msr:w-full",
|
|
2580
2609
|
style: { backgroundColor: outlineColor }
|
|
2581
2610
|
}
|
|
2582
2611
|
) : null,
|
|
2583
2612
|
edges.right ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
2584
2613
|
"div",
|
|
2585
2614
|
{
|
|
2586
|
-
className: "absolute right-0 top-0 h-full w-px",
|
|
2615
|
+
className: "msr:absolute msr:right-0 msr:top-0 msr:h-full msr:w-px",
|
|
2587
2616
|
style: { backgroundColor: outlineColor }
|
|
2588
2617
|
}
|
|
2589
2618
|
) : null,
|
|
2590
2619
|
edges.bottom ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
2591
2620
|
"div",
|
|
2592
2621
|
{
|
|
2593
|
-
className: "absolute bottom-0 left-0 h-px w-full",
|
|
2622
|
+
className: "msr:absolute msr:bottom-0 msr:left-0 msr:h-px msr:w-full",
|
|
2594
2623
|
style: { backgroundColor: outlineColor }
|
|
2595
2624
|
}
|
|
2596
2625
|
) : null,
|
|
2597
2626
|
edges.left ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
2598
2627
|
"div",
|
|
2599
2628
|
{
|
|
2600
|
-
className: "absolute left-0 top-0 h-full w-px",
|
|
2629
|
+
className: "msr:absolute msr:left-0 msr:top-0 msr:h-full msr:w-px",
|
|
2601
2630
|
style: { backgroundColor: outlineColor }
|
|
2602
2631
|
}
|
|
2603
2632
|
) : null
|
|
@@ -2607,7 +2636,7 @@ var MeasurementBox = (0, import_react15.memo)(function MeasurementBox2({
|
|
|
2607
2636
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
2608
2637
|
MeasureTag,
|
|
2609
2638
|
{
|
|
2610
|
-
className: "
|
|
2639
|
+
className: "msr:-translate-x-1/2 msr:bg-ink-900/90",
|
|
2611
2640
|
style: {
|
|
2612
2641
|
left: displayRect.left + displayRect.width / 2,
|
|
2613
2642
|
top: displayRect.top + displayRect.height + labelOffset,
|
|
@@ -2647,11 +2676,11 @@ var SelectedMeasurementBox = (0, import_react16.memo)(function SelectedMeasureme
|
|
|
2647
2676
|
const displayRect = measurement.originRect ? rect : measurement.rect;
|
|
2648
2677
|
const outlineColor = "color-mix(in oklch, oklch(0.62 0.18 255) 80%, transparent)";
|
|
2649
2678
|
const fillColor = "color-mix(in oklch, oklch(0.62 0.18 255) 8%, transparent)";
|
|
2650
|
-
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "pointer-events-none", children: [
|
|
2679
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "msr:pointer-events-none", children: [
|
|
2651
2680
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
2652
2681
|
"div",
|
|
2653
2682
|
{
|
|
2654
|
-
className: "absolute",
|
|
2683
|
+
className: "msr:absolute",
|
|
2655
2684
|
style: {
|
|
2656
2685
|
left: displayRect.left,
|
|
2657
2686
|
top: displayRect.top,
|
|
@@ -2664,28 +2693,28 @@ var SelectedMeasurementBox = (0, import_react16.memo)(function SelectedMeasureme
|
|
|
2664
2693
|
edges.top ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
2665
2694
|
"div",
|
|
2666
2695
|
{
|
|
2667
|
-
className: "absolute left-0 top-0 h-px w-full",
|
|
2696
|
+
className: "msr:absolute msr:left-0 msr:top-0 msr:h-px msr:w-full",
|
|
2668
2697
|
style: { backgroundColor: outlineColor }
|
|
2669
2698
|
}
|
|
2670
2699
|
) : null,
|
|
2671
2700
|
edges.right ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
2672
2701
|
"div",
|
|
2673
2702
|
{
|
|
2674
|
-
className: "absolute right-0 top-0 h-full w-px",
|
|
2703
|
+
className: "msr:absolute msr:right-0 msr:top-0 msr:h-full msr:w-px",
|
|
2675
2704
|
style: { backgroundColor: outlineColor }
|
|
2676
2705
|
}
|
|
2677
2706
|
) : null,
|
|
2678
2707
|
edges.bottom ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
2679
2708
|
"div",
|
|
2680
2709
|
{
|
|
2681
|
-
className: "absolute bottom-0 left-0 h-px w-full",
|
|
2710
|
+
className: "msr:absolute msr:bottom-0 msr:left-0 msr:h-px msr:w-full",
|
|
2682
2711
|
style: { backgroundColor: outlineColor }
|
|
2683
2712
|
}
|
|
2684
2713
|
) : null,
|
|
2685
2714
|
edges.left ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
2686
2715
|
"div",
|
|
2687
2716
|
{
|
|
2688
|
-
className: "absolute left-0 top-0 h-full w-px",
|
|
2717
|
+
className: "msr:absolute msr:left-0 msr:top-0 msr:h-full msr:w-px",
|
|
2689
2718
|
style: { backgroundColor: outlineColor }
|
|
2690
2719
|
}
|
|
2691
2720
|
) : null
|
|
@@ -2695,7 +2724,7 @@ var SelectedMeasurementBox = (0, import_react16.memo)(function SelectedMeasureme
|
|
|
2695
2724
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
2696
2725
|
MeasureTag,
|
|
2697
2726
|
{
|
|
2698
|
-
className: "
|
|
2727
|
+
className: "msr:-translate-x-1/2 msr:bg-ink-900/90",
|
|
2699
2728
|
style: {
|
|
2700
2729
|
left: displayRect.left + displayRect.width / 2,
|
|
2701
2730
|
top: displayRect.top + displayRect.height + labelOffset,
|
|
@@ -2722,7 +2751,7 @@ var DistanceOverlayItem = (0, import_react17.memo)(function DistanceOverlayItem2
|
|
|
2722
2751
|
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
2723
2752
|
"div",
|
|
2724
2753
|
{
|
|
2725
|
-
className: onRemove ? "pointer-events-auto" : "pointer-events-none",
|
|
2754
|
+
className: onRemove ? "msr:pointer-events-auto" : "msr:pointer-events-none",
|
|
2726
2755
|
onClick: onRemove ? (event) => {
|
|
2727
2756
|
event.stopPropagation();
|
|
2728
2757
|
onRemove(distance.id);
|
|
@@ -2731,7 +2760,7 @@ var DistanceOverlayItem = (0, import_react17.memo)(function DistanceOverlayItem2
|
|
|
2731
2760
|
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2732
2761
|
"div",
|
|
2733
2762
|
{
|
|
2734
|
-
className: "absolute rounded border border-[#2563eb]/70",
|
|
2763
|
+
className: "msr:absolute msr:rounded msr:border msr:border-[#2563eb]/70",
|
|
2735
2764
|
style: {
|
|
2736
2765
|
left: distance.rectA.left,
|
|
2737
2766
|
top: distance.rectA.top,
|
|
@@ -2743,7 +2772,7 @@ var DistanceOverlayItem = (0, import_react17.memo)(function DistanceOverlayItem2
|
|
|
2743
2772
|
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2744
2773
|
"div",
|
|
2745
2774
|
{
|
|
2746
|
-
className: "absolute rounded border border-[#2563eb]/70",
|
|
2775
|
+
className: "msr:absolute msr:rounded msr:border msr:border-[#2563eb]/70",
|
|
2747
2776
|
style: {
|
|
2748
2777
|
left: distance.rectB.left,
|
|
2749
2778
|
top: distance.rectB.top,
|
|
@@ -2756,7 +2785,7 @@ var DistanceOverlayItem = (0, import_react17.memo)(function DistanceOverlayItem2
|
|
|
2756
2785
|
(connector, index) => Math.abs(connector.x1 - connector.x2) < 1 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2757
2786
|
"div",
|
|
2758
2787
|
{
|
|
2759
|
-
className: "absolute border-l border-dashed border-[#2563eb]/70",
|
|
2788
|
+
className: "msr:absolute msr:border-l msr:border-dashed msr:border-[#2563eb]/70",
|
|
2760
2789
|
style: {
|
|
2761
2790
|
left: connector.x1,
|
|
2762
2791
|
top: Math.min(connector.y1, connector.y2),
|
|
@@ -2767,7 +2796,7 @@ var DistanceOverlayItem = (0, import_react17.memo)(function DistanceOverlayItem2
|
|
|
2767
2796
|
) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2768
2797
|
"div",
|
|
2769
2798
|
{
|
|
2770
|
-
className: "absolute border-t border-dashed border-[#2563eb]/70",
|
|
2799
|
+
className: "msr:absolute msr:border-t msr:border-dashed msr:border-[#2563eb]/70",
|
|
2771
2800
|
style: {
|
|
2772
2801
|
left: Math.min(connector.x1, connector.x2),
|
|
2773
2802
|
top: connector.y1,
|
|
@@ -2781,7 +2810,7 @@ var DistanceOverlayItem = (0, import_react17.memo)(function DistanceOverlayItem2
|
|
|
2781
2810
|
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2782
2811
|
"div",
|
|
2783
2812
|
{
|
|
2784
|
-
className: "absolute h-px bg-[#2563eb]",
|
|
2813
|
+
className: "msr:absolute msr:h-px msr:bg-[#2563eb]",
|
|
2785
2814
|
style: {
|
|
2786
2815
|
left: Math.min(distance.horizontal.x1, distance.horizontal.x2),
|
|
2787
2816
|
width: Math.abs(distance.horizontal.x2 - distance.horizontal.x1),
|
|
@@ -2792,7 +2821,7 @@ var DistanceOverlayItem = (0, import_react17.memo)(function DistanceOverlayItem2
|
|
|
2792
2821
|
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2793
2822
|
MeasureTag,
|
|
2794
2823
|
{
|
|
2795
|
-
className: "
|
|
2824
|
+
className: "msr:-translate-x-1/2 msr:bg-ink-900/90",
|
|
2796
2825
|
style: {
|
|
2797
2826
|
left: (distance.horizontal.x1 + distance.horizontal.x2) / 2,
|
|
2798
2827
|
top: distance.horizontal.y + labelOffset
|
|
@@ -2805,7 +2834,7 @@ var DistanceOverlayItem = (0, import_react17.memo)(function DistanceOverlayItem2
|
|
|
2805
2834
|
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2806
2835
|
"div",
|
|
2807
2836
|
{
|
|
2808
|
-
className: "absolute w-px bg-[#2563eb]",
|
|
2837
|
+
className: "msr:absolute msr:w-px msr:bg-[#2563eb]",
|
|
2809
2838
|
style: {
|
|
2810
2839
|
top: Math.min(distance.vertical.y1, distance.vertical.y2),
|
|
2811
2840
|
height: Math.abs(distance.vertical.y2 - distance.vertical.y1),
|
|
@@ -2816,7 +2845,7 @@ var DistanceOverlayItem = (0, import_react17.memo)(function DistanceOverlayItem2
|
|
|
2816
2845
|
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2817
2846
|
MeasureTag,
|
|
2818
2847
|
{
|
|
2819
|
-
className: "
|
|
2848
|
+
className: "msr:-translate-y-1/2 msr:bg-ink-900/90",
|
|
2820
2849
|
style: {
|
|
2821
2850
|
left: distance.vertical.x + labelOffset,
|
|
2822
2851
|
top: (distance.vertical.y1 + distance.vertical.y2) / 2
|
|
@@ -2874,7 +2903,7 @@ var MeasurerOverlay = (0, import_react18.memo)(function MeasurerOverlay2({
|
|
|
2874
2903
|
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
2875
2904
|
"div",
|
|
2876
2905
|
{
|
|
2877
|
-
className: `absolute inset-0 ${enabled && toolMode !== "none" ? `pointer-events-auto ${guidesEnabled ? hoverGuide || draggingGuideId ? "cursor-default" : "cursor-crosshair" : "cursor-default"} opacity-100` : "pointer-events-none opacity-0"}`,
|
|
2906
|
+
className: `msr:absolute msr:inset-0 ${enabled && toolMode !== "none" ? `msr:pointer-events-auto ${guidesEnabled ? hoverGuide || draggingGuideId ? "msr:cursor-default" : "msr:cursor-crosshair" : "msr:cursor-default"} msr:opacity-100` : "msr:pointer-events-none msr:opacity-0"}`,
|
|
2878
2907
|
onPointerDown,
|
|
2879
2908
|
onPointerMove,
|
|
2880
2909
|
onPointerUp,
|
|
@@ -2894,7 +2923,7 @@ var MeasurerOverlay = (0, import_react18.memo)(function MeasurerOverlay2({
|
|
|
2894
2923
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
2895
2924
|
"div",
|
|
2896
2925
|
{
|
|
2897
|
-
className: "pointer-events-none absolute",
|
|
2926
|
+
className: "msr:pointer-events-none msr:absolute",
|
|
2898
2927
|
style: {
|
|
2899
2928
|
left: activeRect.left,
|
|
2900
2929
|
top: activeRect.top,
|
|
@@ -2906,28 +2935,28 @@ var MeasurerOverlay = (0, import_react18.memo)(function MeasurerOverlay2({
|
|
|
2906
2935
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
2907
2936
|
"div",
|
|
2908
2937
|
{
|
|
2909
|
-
className: "absolute left-0 top-0 h-px w-full",
|
|
2938
|
+
className: "msr:absolute msr:left-0 msr:top-0 msr:h-px msr:w-full",
|
|
2910
2939
|
style: { backgroundColor: outlineColor }
|
|
2911
2940
|
}
|
|
2912
2941
|
),
|
|
2913
2942
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
2914
2943
|
"div",
|
|
2915
2944
|
{
|
|
2916
|
-
className: "absolute right-0 top-0 h-full w-px",
|
|
2945
|
+
className: "msr:absolute msr:right-0 msr:top-0 msr:h-full msr:w-px",
|
|
2917
2946
|
style: { backgroundColor: outlineColor }
|
|
2918
2947
|
}
|
|
2919
2948
|
),
|
|
2920
2949
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
2921
2950
|
"div",
|
|
2922
2951
|
{
|
|
2923
|
-
className: "absolute bottom-0 left-0 h-px w-full",
|
|
2952
|
+
className: "msr:absolute msr:bottom-0 msr:left-0 msr:h-px msr:w-full",
|
|
2924
2953
|
style: { backgroundColor: outlineColor }
|
|
2925
2954
|
}
|
|
2926
2955
|
),
|
|
2927
2956
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
2928
2957
|
"div",
|
|
2929
2958
|
{
|
|
2930
|
-
className: "absolute left-0 top-0 h-full w-px",
|
|
2959
|
+
className: "msr:absolute msr:left-0 msr:top-0 msr:h-full msr:w-px",
|
|
2931
2960
|
style: { backgroundColor: outlineColor }
|
|
2932
2961
|
}
|
|
2933
2962
|
)
|
|
@@ -2937,7 +2966,7 @@ var MeasurerOverlay = (0, import_react18.memo)(function MeasurerOverlay2({
|
|
|
2937
2966
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
2938
2967
|
MeasureTag,
|
|
2939
2968
|
{
|
|
2940
|
-
className: "
|
|
2969
|
+
className: "msr:-translate-x-1/2 msr:bg-ink-900/90",
|
|
2941
2970
|
style: {
|
|
2942
2971
|
left: activeRect.left + activeRect.width / 2,
|
|
2943
2972
|
top: activeRect.top + activeRect.height + MEASURE_LABEL_OFFSET
|
|
@@ -2953,7 +2982,7 @@ var MeasurerOverlay = (0, import_react18.memo)(function MeasurerOverlay2({
|
|
|
2953
2982
|
!guidesEnabled && hoverRectToShow ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
2954
2983
|
"div",
|
|
2955
2984
|
{
|
|
2956
|
-
className: "pointer-events-none absolute",
|
|
2985
|
+
className: "msr:pointer-events-none msr:absolute",
|
|
2957
2986
|
style: {
|
|
2958
2987
|
left: hoverRectToShow.left,
|
|
2959
2988
|
top: hoverRectToShow.top,
|
|
@@ -2965,28 +2994,28 @@ var MeasurerOverlay = (0, import_react18.memo)(function MeasurerOverlay2({
|
|
|
2965
2994
|
hoverEdgeVisibility?.top ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
2966
2995
|
"div",
|
|
2967
2996
|
{
|
|
2968
|
-
className: "absolute left-0 top-0 h-px w-full",
|
|
2997
|
+
className: "msr:absolute msr:left-0 msr:top-0 msr:h-px msr:w-full",
|
|
2969
2998
|
style: { backgroundColor: outlineColor }
|
|
2970
2999
|
}
|
|
2971
3000
|
) : null,
|
|
2972
3001
|
hoverEdgeVisibility?.right ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
2973
3002
|
"div",
|
|
2974
3003
|
{
|
|
2975
|
-
className: "absolute right-0 top-0 h-full w-px",
|
|
3004
|
+
className: "msr:absolute msr:right-0 msr:top-0 msr:h-full msr:w-px",
|
|
2976
3005
|
style: { backgroundColor: outlineColor }
|
|
2977
3006
|
}
|
|
2978
3007
|
) : null,
|
|
2979
3008
|
hoverEdgeVisibility?.bottom ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
2980
3009
|
"div",
|
|
2981
3010
|
{
|
|
2982
|
-
className: "absolute bottom-0 left-0 h-px w-full",
|
|
3011
|
+
className: "msr:absolute msr:bottom-0 msr:left-0 msr:h-px msr:w-full",
|
|
2983
3012
|
style: { backgroundColor: outlineColor }
|
|
2984
3013
|
}
|
|
2985
3014
|
) : null,
|
|
2986
3015
|
hoverEdgeVisibility?.left ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
2987
3016
|
"div",
|
|
2988
3017
|
{
|
|
2989
|
-
className: "absolute left-0 top-0 h-full w-px",
|
|
3018
|
+
className: "msr:absolute msr:left-0 msr:top-0 msr:h-full msr:w-px",
|
|
2990
3019
|
style: { backgroundColor: outlineColor }
|
|
2991
3020
|
}
|
|
2992
3021
|
) : null
|
|
@@ -2996,7 +3025,7 @@ var MeasurerOverlay = (0, import_react18.memo)(function MeasurerOverlay2({
|
|
|
2996
3025
|
guidesEnabled && guidePreview ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
2997
3026
|
"div",
|
|
2998
3027
|
{
|
|
2999
|
-
className: "pointer-events-none absolute",
|
|
3028
|
+
className: "msr:pointer-events-none msr:absolute",
|
|
3000
3029
|
style: guidePreview.orientation === "vertical" ? {
|
|
3001
3030
|
left: guidePreview.position - GUIDE_HITBOX_SIZE / 2,
|
|
3002
3031
|
top: 0,
|
|
@@ -3011,7 +3040,7 @@ var MeasurerOverlay = (0, import_react18.memo)(function MeasurerOverlay2({
|
|
|
3011
3040
|
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
3012
3041
|
"div",
|
|
3013
3042
|
{
|
|
3014
|
-
className: "absolute",
|
|
3043
|
+
className: "msr:absolute",
|
|
3015
3044
|
style: guidePreview.orientation === "vertical" ? {
|
|
3016
3045
|
left: GUIDE_HITBOX_SIZE / 2 - 1,
|
|
3017
3046
|
top: 0,
|
|
@@ -3069,7 +3098,7 @@ var MeasurerOverlay = (0, import_react18.memo)(function MeasurerOverlay2({
|
|
|
3069
3098
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
3070
3099
|
"div",
|
|
3071
3100
|
{
|
|
3072
|
-
className: "absolute w-px bg-[#2563eb]",
|
|
3101
|
+
className: "msr:absolute msr:w-px msr:bg-[#2563eb]",
|
|
3073
3102
|
style: {
|
|
3074
3103
|
top: optionContainerLines.top.y1,
|
|
3075
3104
|
height: optionContainerLines.top.y2 - optionContainerLines.top.y1,
|
|
@@ -3080,7 +3109,7 @@ var MeasurerOverlay = (0, import_react18.memo)(function MeasurerOverlay2({
|
|
|
3080
3109
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
3081
3110
|
MeasureTag,
|
|
3082
3111
|
{
|
|
3083
|
-
className: "
|
|
3112
|
+
className: "msr:-translate-y-1/2 msr:bg-ink-900/90",
|
|
3084
3113
|
style: {
|
|
3085
3114
|
left: optionContainerLines.top.x + MEASURE_LABEL_OFFSET,
|
|
3086
3115
|
top: (optionContainerLines.top.y1 + optionContainerLines.top.y2) / 2
|
|
@@ -3093,7 +3122,7 @@ var MeasurerOverlay = (0, import_react18.memo)(function MeasurerOverlay2({
|
|
|
3093
3122
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
3094
3123
|
"div",
|
|
3095
3124
|
{
|
|
3096
|
-
className: "absolute w-px bg-[#2563eb]",
|
|
3125
|
+
className: "msr:absolute msr:w-px msr:bg-[#2563eb]",
|
|
3097
3126
|
style: {
|
|
3098
3127
|
top: optionContainerLines.bottom.y1,
|
|
3099
3128
|
height: optionContainerLines.bottom.y2 - optionContainerLines.bottom.y1,
|
|
@@ -3104,7 +3133,7 @@ var MeasurerOverlay = (0, import_react18.memo)(function MeasurerOverlay2({
|
|
|
3104
3133
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
3105
3134
|
MeasureTag,
|
|
3106
3135
|
{
|
|
3107
|
-
className: "
|
|
3136
|
+
className: "msr:-translate-y-1/2 msr:bg-ink-900/90",
|
|
3108
3137
|
style: {
|
|
3109
3138
|
left: optionContainerLines.bottom.x + MEASURE_LABEL_OFFSET,
|
|
3110
3139
|
top: (optionContainerLines.bottom.y1 + optionContainerLines.bottom.y2) / 2
|
|
@@ -3117,7 +3146,7 @@ var MeasurerOverlay = (0, import_react18.memo)(function MeasurerOverlay2({
|
|
|
3117
3146
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
3118
3147
|
"div",
|
|
3119
3148
|
{
|
|
3120
|
-
className: "absolute h-px bg-[#2563eb]",
|
|
3149
|
+
className: "msr:absolute msr:h-px msr:bg-[#2563eb]",
|
|
3121
3150
|
style: {
|
|
3122
3151
|
left: optionContainerLines.left.x1,
|
|
3123
3152
|
width: optionContainerLines.left.x2 - optionContainerLines.left.x1,
|
|
@@ -3128,7 +3157,7 @@ var MeasurerOverlay = (0, import_react18.memo)(function MeasurerOverlay2({
|
|
|
3128
3157
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
3129
3158
|
MeasureTag,
|
|
3130
3159
|
{
|
|
3131
|
-
className: "
|
|
3160
|
+
className: "msr:-translate-x-1/2 msr:bg-ink-900/90",
|
|
3132
3161
|
style: {
|
|
3133
3162
|
left: (optionContainerLines.left.x1 + optionContainerLines.left.x2) / 2,
|
|
3134
3163
|
top: optionContainerLines.left.y + MEASURE_LABEL_OFFSET
|
|
@@ -3141,7 +3170,7 @@ var MeasurerOverlay = (0, import_react18.memo)(function MeasurerOverlay2({
|
|
|
3141
3170
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
3142
3171
|
"div",
|
|
3143
3172
|
{
|
|
3144
|
-
className: "absolute h-px bg-[#2563eb]",
|
|
3173
|
+
className: "msr:absolute msr:h-px msr:bg-[#2563eb]",
|
|
3145
3174
|
style: {
|
|
3146
3175
|
left: optionContainerLines.right.x1,
|
|
3147
3176
|
width: optionContainerLines.right.x2 - optionContainerLines.right.x1,
|
|
@@ -3152,7 +3181,7 @@ var MeasurerOverlay = (0, import_react18.memo)(function MeasurerOverlay2({
|
|
|
3152
3181
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
3153
3182
|
MeasureTag,
|
|
3154
3183
|
{
|
|
3155
|
-
className: "
|
|
3184
|
+
className: "msr:-translate-x-1/2 msr:bg-ink-900/90",
|
|
3156
3185
|
style: {
|
|
3157
3186
|
left: (optionContainerLines.right.x1 + optionContainerLines.right.x2) / 2,
|
|
3158
3187
|
top: optionContainerLines.right.y + MEASURE_LABEL_OFFSET
|
|
@@ -3170,7 +3199,7 @@ var MeasurerOverlay = (0, import_react18.memo)(function MeasurerOverlay2({
|
|
|
3170
3199
|
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
3171
3200
|
"div",
|
|
3172
3201
|
{
|
|
3173
|
-
className: "absolute",
|
|
3202
|
+
className: "msr:absolute",
|
|
3174
3203
|
style: guide.orientation === "vertical" ? {
|
|
3175
3204
|
left: guide.position - GUIDE_HITBOX_SIZE / 2,
|
|
3176
3205
|
top: 0,
|
|
@@ -3188,7 +3217,7 @@ var MeasurerOverlay = (0, import_react18.memo)(function MeasurerOverlay2({
|
|
|
3188
3217
|
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
3189
3218
|
"div",
|
|
3190
3219
|
{
|
|
3191
|
-
className: "absolute",
|
|
3220
|
+
className: "msr:absolute",
|
|
3192
3221
|
style: guide.orientation === "vertical" ? {
|
|
3193
3222
|
left: GUIDE_HITBOX_SIZE / 2 - 1,
|
|
3194
3223
|
top: 0,
|
|
@@ -3235,7 +3264,8 @@ function MeasurerClient({
|
|
|
3235
3264
|
highlightColor,
|
|
3236
3265
|
guideColor,
|
|
3237
3266
|
hoverHighlightEnabled,
|
|
3238
|
-
persistOnReload
|
|
3267
|
+
persistOnReload,
|
|
3268
|
+
portalTarget
|
|
3239
3269
|
}) {
|
|
3240
3270
|
const selectionRectRef = (0, import_react19.useRef)(null);
|
|
3241
3271
|
const toolbarRef = (0, import_react19.useRef)(null);
|
|
@@ -3673,71 +3703,82 @@ function MeasurerClient({
|
|
|
3673
3703
|
[clearGuideDragHold, setDraggingGuideId]
|
|
3674
3704
|
);
|
|
3675
3705
|
return (0, import_react_dom.createPortal)(
|
|
3676
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
3677
|
-
|
|
3678
|
-
|
|
3679
|
-
|
|
3680
|
-
|
|
3681
|
-
|
|
3682
|
-
|
|
3683
|
-
|
|
3684
|
-
|
|
3685
|
-
|
|
3686
|
-
|
|
3687
|
-
|
|
3688
|
-
|
|
3689
|
-
|
|
3690
|
-
|
|
3691
|
-
|
|
3692
|
-
|
|
3693
|
-
|
|
3694
|
-
|
|
3695
|
-
|
|
3696
|
-
|
|
3697
|
-
|
|
3698
|
-
|
|
3699
|
-
|
|
3700
|
-
|
|
3701
|
-
|
|
3702
|
-
|
|
3703
|
-
|
|
3704
|
-
|
|
3705
|
-
|
|
3706
|
-
|
|
3707
|
-
|
|
3708
|
-
|
|
3709
|
-
|
|
3710
|
-
|
|
3711
|
-
|
|
3712
|
-
|
|
3713
|
-
|
|
3714
|
-
|
|
3715
|
-
|
|
3716
|
-
|
|
3717
|
-
|
|
3718
|
-
|
|
3719
|
-
|
|
3720
|
-
|
|
3721
|
-
|
|
3722
|
-
|
|
3723
|
-
|
|
3724
|
-
|
|
3725
|
-
|
|
3726
|
-
|
|
3727
|
-
|
|
3728
|
-
|
|
3729
|
-
|
|
3730
|
-
|
|
3731
|
-
|
|
3732
|
-
|
|
3706
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
3707
|
+
"div",
|
|
3708
|
+
{
|
|
3709
|
+
ref: overlayRef,
|
|
3710
|
+
className: "mesurer-root msr:pointer-events-none msr:fixed msr:inset-0 msr:z-50",
|
|
3711
|
+
children: [
|
|
3712
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
3713
|
+
MeasurerOverlay,
|
|
3714
|
+
{
|
|
3715
|
+
enabled,
|
|
3716
|
+
toolMode,
|
|
3717
|
+
guidesEnabled,
|
|
3718
|
+
altPressed,
|
|
3719
|
+
isDragging,
|
|
3720
|
+
displayedMeasurements,
|
|
3721
|
+
measurementEdgeVisibility,
|
|
3722
|
+
activeRect,
|
|
3723
|
+
activeWidth,
|
|
3724
|
+
activeHeight,
|
|
3725
|
+
fillColor,
|
|
3726
|
+
outlineColor,
|
|
3727
|
+
hoverRectToShow,
|
|
3728
|
+
hoverEdgeVisibility,
|
|
3729
|
+
guidePreview,
|
|
3730
|
+
guideColorPreview,
|
|
3731
|
+
displayedSelectedMeasurements,
|
|
3732
|
+
selectedEdgeVisibility,
|
|
3733
|
+
heldDistances,
|
|
3734
|
+
optionPairOverlay,
|
|
3735
|
+
guideDistanceOverlay,
|
|
3736
|
+
optionContainerLines,
|
|
3737
|
+
guides,
|
|
3738
|
+
hoverGuide,
|
|
3739
|
+
draggingGuideId,
|
|
3740
|
+
selectedGuideIds,
|
|
3741
|
+
guideColorActive,
|
|
3742
|
+
guideColorHover,
|
|
3743
|
+
guideColorDefault,
|
|
3744
|
+
onPointerDown: handlePointerDown,
|
|
3745
|
+
onPointerMove: handlePointerMove,
|
|
3746
|
+
onPointerUp: handlePointerUp,
|
|
3747
|
+
onPointerLeave: handlePointerLeave,
|
|
3748
|
+
onRemoveHeldDistance: removeHeldDistance,
|
|
3749
|
+
onGuidePointerDown: handleGuidePointerDown,
|
|
3750
|
+
onGuidePointerUp: handleGuidePointerUp,
|
|
3751
|
+
onGuidePointerCancel: handleGuidePointerUp
|
|
3752
|
+
}
|
|
3753
|
+
),
|
|
3754
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
3755
|
+
Toolbar,
|
|
3756
|
+
{
|
|
3757
|
+
ref: toolbarRef,
|
|
3758
|
+
toolMode,
|
|
3759
|
+
setEnabled: setEnabledWithHistory,
|
|
3760
|
+
setToolMode: setToolModeWithHistory,
|
|
3761
|
+
guideOrientation,
|
|
3762
|
+
setGuideOrientation: setGuideOrientationWithHistory,
|
|
3763
|
+
onInteract: () => setToolbarActive(true)
|
|
3764
|
+
}
|
|
3765
|
+
)
|
|
3766
|
+
]
|
|
3767
|
+
}
|
|
3768
|
+
),
|
|
3769
|
+
portalTarget
|
|
3733
3770
|
);
|
|
3734
3771
|
}
|
|
3735
3772
|
function Measurer({
|
|
3736
3773
|
highlightColor = "oklch(0.62 0.18 255)",
|
|
3737
3774
|
guideColor = "oklch(0.63 0.26 29.23)",
|
|
3738
3775
|
hoverHighlightEnabled = true,
|
|
3739
|
-
persistOnReload = false
|
|
3776
|
+
persistOnReload = false,
|
|
3777
|
+
portalTarget
|
|
3740
3778
|
}) {
|
|
3779
|
+
if (typeof document !== "undefined") {
|
|
3780
|
+
ensureMeasurerStyles(MESURER_STYLES, portalTarget);
|
|
3781
|
+
}
|
|
3741
3782
|
const hydrated = useHydrated();
|
|
3742
3783
|
if (!hydrated) return null;
|
|
3743
3784
|
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
@@ -3746,13 +3787,11 @@ function Measurer({
|
|
|
3746
3787
|
highlightColor,
|
|
3747
3788
|
guideColor,
|
|
3748
3789
|
hoverHighlightEnabled,
|
|
3749
|
-
persistOnReload
|
|
3790
|
+
persistOnReload,
|
|
3791
|
+
portalTarget: portalTarget ?? document.body
|
|
3750
3792
|
}
|
|
3751
3793
|
);
|
|
3752
3794
|
}
|
|
3753
|
-
|
|
3754
|
-
// index.ts
|
|
3755
|
-
ensureMeasurerStyles(MESURER_STYLES);
|
|
3756
3795
|
// Annotate the CommonJS export names for ESM import in node:
|
|
3757
3796
|
0 && (module.exports = {
|
|
3758
3797
|
Measurer
|