mesurer 0.0.4 → 0.0.6
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 +8 -1
- 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 +160 -213
- package/package.json +11 -12
package/dist/index.js
CHANGED
|
@@ -1,18 +1,3 @@
|
|
|
1
|
-
// style-inject.ts
|
|
2
|
-
var MESURER_STYLE_ID = "mesurer-styles";
|
|
3
|
-
function ensureMeasurerStyles(cssText) {
|
|
4
|
-
if (typeof document === "undefined") return;
|
|
5
|
-
if (!cssText) return;
|
|
6
|
-
if (document.getElementById(MESURER_STYLE_ID)) return;
|
|
7
|
-
const style = document.createElement("style");
|
|
8
|
-
style.id = MESURER_STYLE_ID;
|
|
9
|
-
style.textContent = cssText;
|
|
10
|
-
document.head.appendChild(style);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
// styles.generated.ts
|
|
14
|
-
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';
|
|
15
|
-
|
|
16
1
|
// measurer.tsx
|
|
17
2
|
import {
|
|
18
3
|
useCallback as useCallback6,
|
|
@@ -37,6 +22,35 @@ var ANCESTOR_KEEP_COVERAGE = 0.92;
|
|
|
37
22
|
var MIN_SINGLE_TARGET_SIZE = 8;
|
|
38
23
|
var MIN_SINGLE_ELEMENT_COVERAGE = 0.15;
|
|
39
24
|
|
|
25
|
+
// style-inject.ts
|
|
26
|
+
var MESURER_STYLE_ID = "mesurer-styles";
|
|
27
|
+
var getStyleTarget = (target) => {
|
|
28
|
+
if (typeof document === "undefined") return null;
|
|
29
|
+
if (!target) return document;
|
|
30
|
+
if (target instanceof ShadowRoot) return target;
|
|
31
|
+
const rootNode = target.getRootNode();
|
|
32
|
+
if (rootNode instanceof ShadowRoot) return rootNode;
|
|
33
|
+
return document;
|
|
34
|
+
};
|
|
35
|
+
function ensureMeasurerStyles(cssText, target) {
|
|
36
|
+
if (typeof document === "undefined") return;
|
|
37
|
+
if (!cssText) return;
|
|
38
|
+
const styleTarget = getStyleTarget(target);
|
|
39
|
+
if (!styleTarget) return;
|
|
40
|
+
if (styleTarget.querySelector(`#${MESURER_STYLE_ID}`)) return;
|
|
41
|
+
const style = document.createElement("style");
|
|
42
|
+
style.id = MESURER_STYLE_ID;
|
|
43
|
+
style.textContent = cssText;
|
|
44
|
+
if (styleTarget instanceof ShadowRoot) {
|
|
45
|
+
styleTarget.appendChild(style);
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
styleTarget.head.appendChild(style);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
// styles.generated.ts
|
|
52
|
+
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\\: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 .msr\\: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 .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@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';
|
|
53
|
+
|
|
40
54
|
// components/toolbar.tsx
|
|
41
55
|
import {
|
|
42
56
|
forwardRef,
|
|
@@ -76,6 +90,8 @@ var MinusIcon = ({ size = 12, ...props }) => /* @__PURE__ */ jsx(IconBase, { siz
|
|
|
76
90
|
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
77
91
|
var TOOLBAR_TOOLTIP_DELAY_MS = 800;
|
|
78
92
|
var TOOLBAR_DRAG_SLOP = 6;
|
|
93
|
+
var GUIDE_MENU_WIDTH = 176;
|
|
94
|
+
var VIEWPORT_PADDING = 8;
|
|
79
95
|
function ToolbarButton({
|
|
80
96
|
id,
|
|
81
97
|
active,
|
|
@@ -91,7 +107,7 @@ function ToolbarButton({
|
|
|
91
107
|
return /* @__PURE__ */ jsxs(
|
|
92
108
|
"div",
|
|
93
109
|
{
|
|
94
|
-
className: "relative",
|
|
110
|
+
className: "msr:relative",
|
|
95
111
|
onMouseEnter: () => onTooltipEnter(id),
|
|
96
112
|
onMouseLeave: () => onTooltipLeave(id),
|
|
97
113
|
children: [
|
|
@@ -102,8 +118,8 @@ function ToolbarButton({
|
|
|
102
118
|
"aria-label": `${label} (${shortcut})`,
|
|
103
119
|
title: `${label} (${shortcut})`,
|
|
104
120
|
className: cn(
|
|
105
|
-
"flex size-8 items-center justify-center rounded-[8px] outline-none",
|
|
106
|
-
active ? "bg-[#0d99ff] text-white" : "bg-transparent text-black hover:bg-black/4"
|
|
121
|
+
"msr:flex msr:size-8 msr:items-center msr:justify-center msr:rounded-[8px] msr:outline-none",
|
|
122
|
+
active ? "msr:bg-[#0d99ff] msr:text-white" : "msr:bg-transparent msr:text-black msr:hover:bg-black/4"
|
|
107
123
|
),
|
|
108
124
|
onClick,
|
|
109
125
|
children
|
|
@@ -113,14 +129,14 @@ function ToolbarButton({
|
|
|
113
129
|
"span",
|
|
114
130
|
{
|
|
115
131
|
className: cn(
|
|
116
|
-
"pointer-events-none absolute left-1/2
|
|
117
|
-
tooltipSide === "top" ? "bottom-full mb-2" : "top-full mt-2",
|
|
118
|
-
tooltipVisible ? "opacity-100" : "opacity-0"
|
|
132
|
+
"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",
|
|
133
|
+
tooltipSide === "top" ? "msr:bottom-full msr:mb-2" : "msr:top-full msr:mt-2",
|
|
134
|
+
tooltipVisible ? "msr:opacity-100" : "msr:opacity-0"
|
|
119
135
|
),
|
|
120
136
|
children: [
|
|
121
137
|
label,
|
|
122
138
|
" ",
|
|
123
|
-
/* @__PURE__ */ jsx2("kbd", { className: "text-white/60", children: shortcut })
|
|
139
|
+
/* @__PURE__ */ jsx2("kbd", { className: "msr:text-white/60", children: shortcut })
|
|
124
140
|
]
|
|
125
141
|
}
|
|
126
142
|
)
|
|
@@ -271,9 +287,23 @@ function ToolbarComponent({
|
|
|
271
287
|
const { visibleTooltipId, onTooltipEnter, onTooltipLeave, onToolbarLeave } = useToolbarTooltip();
|
|
272
288
|
const [guideMenuOpen, setGuideMenuOpen] = useState(false);
|
|
273
289
|
const guideMenuRef = useRef(null);
|
|
274
|
-
const guideMenuPanelRef = useRef(null);
|
|
275
290
|
const [activeMenuIndex, setActiveMenuIndex] = useState(0);
|
|
276
291
|
const [menuAlign, setMenuAlign] = useState("right");
|
|
292
|
+
const updateMenuAlign = useCallback(() => {
|
|
293
|
+
const anchorRect = guideMenuRef.current?.getBoundingClientRect();
|
|
294
|
+
if (!anchorRect) return;
|
|
295
|
+
const rightAlignedLeft = anchorRect.right - GUIDE_MENU_WIDTH;
|
|
296
|
+
const leftAlignedRight = anchorRect.left + GUIDE_MENU_WIDTH;
|
|
297
|
+
if (rightAlignedLeft < VIEWPORT_PADDING) {
|
|
298
|
+
setMenuAlign("left");
|
|
299
|
+
return;
|
|
300
|
+
}
|
|
301
|
+
if (leftAlignedRight > window.innerWidth - VIEWPORT_PADDING) {
|
|
302
|
+
setMenuAlign("right");
|
|
303
|
+
return;
|
|
304
|
+
}
|
|
305
|
+
setMenuAlign("right");
|
|
306
|
+
}, []);
|
|
277
307
|
const viewportHeight = typeof window === "undefined" ? 0 : window.innerHeight || 0;
|
|
278
308
|
const nearTop = position.y < 56;
|
|
279
309
|
const nearBottom = viewportHeight > 0 && position.y > viewportHeight - 56;
|
|
@@ -303,33 +333,16 @@ function ToolbarComponent({
|
|
|
303
333
|
if (!guideMenuOpen) return;
|
|
304
334
|
const frame = requestAnimationFrame(() => {
|
|
305
335
|
guideMenuRef.current?.querySelector("[role='menu']")?.focus();
|
|
306
|
-
const panel = guideMenuPanelRef.current;
|
|
307
|
-
if (!panel) return;
|
|
308
|
-
const rect = panel.getBoundingClientRect();
|
|
309
|
-
if (rect.left < 8) {
|
|
310
|
-
setMenuAlign("left");
|
|
311
|
-
return;
|
|
312
|
-
}
|
|
313
|
-
if (rect.right > window.innerWidth - 8) {
|
|
314
|
-
setMenuAlign("right");
|
|
315
|
-
}
|
|
316
336
|
});
|
|
317
337
|
const handlePointerDown = (event) => {
|
|
318
|
-
|
|
319
|
-
if (
|
|
338
|
+
const menu = guideMenuRef.current;
|
|
339
|
+
if (!menu) return;
|
|
340
|
+
const path = event.composedPath();
|
|
341
|
+
if (path.includes(menu)) return;
|
|
320
342
|
setGuideMenuOpen(false);
|
|
321
343
|
};
|
|
322
344
|
const handleResize = () => {
|
|
323
|
-
|
|
324
|
-
if (!panel) return;
|
|
325
|
-
const rect = panel.getBoundingClientRect();
|
|
326
|
-
if (rect.left < 8) {
|
|
327
|
-
setMenuAlign("left");
|
|
328
|
-
return;
|
|
329
|
-
}
|
|
330
|
-
if (rect.right > window.innerWidth - 8) {
|
|
331
|
-
setMenuAlign("right");
|
|
332
|
-
}
|
|
345
|
+
updateMenuAlign();
|
|
333
346
|
};
|
|
334
347
|
window.addEventListener("pointerdown", handlePointerDown);
|
|
335
348
|
window.addEventListener("resize", handleResize);
|
|
@@ -338,12 +351,12 @@ function ToolbarComponent({
|
|
|
338
351
|
window.removeEventListener("pointerdown", handlePointerDown);
|
|
339
352
|
window.removeEventListener("resize", handleResize);
|
|
340
353
|
};
|
|
341
|
-
}, [guideMenuOpen, guideOrientation]);
|
|
354
|
+
}, [guideMenuOpen, guideOrientation, updateMenuAlign]);
|
|
342
355
|
return /* @__PURE__ */ jsxs(
|
|
343
356
|
"div",
|
|
344
357
|
{
|
|
345
358
|
ref,
|
|
346
|
-
className: "pointer-events-auto absolute z-[90] flex items-center gap-1 rounded-[12px] bg-[#fff] p-1 outline outline-transparent 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)]",
|
|
359
|
+
className: "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 msr: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)]",
|
|
347
360
|
style: { left: position.x, top: position.y },
|
|
348
361
|
onPointerDown: (event) => {
|
|
349
362
|
onInteract();
|
|
@@ -384,7 +397,7 @@ function ToolbarComponent({
|
|
|
384
397
|
{
|
|
385
398
|
size: 20,
|
|
386
399
|
className: cn(
|
|
387
|
-
guideOrientation === "vertical" ? "rotate-[135deg]" : "rotate-[45deg]"
|
|
400
|
+
guideOrientation === "vertical" ? "msr:rotate-[135deg]" : "msr:rotate-[45deg]"
|
|
388
401
|
)
|
|
389
402
|
}
|
|
390
403
|
)
|
|
@@ -393,7 +406,7 @@ function ToolbarComponent({
|
|
|
393
406
|
/* @__PURE__ */ jsxs(
|
|
394
407
|
"div",
|
|
395
408
|
{
|
|
396
|
-
className: "group relative
|
|
409
|
+
className: "msr:group msr:relative msr:-ml-1 msr:flex msr:items-stretch",
|
|
397
410
|
ref: guideMenuRef,
|
|
398
411
|
onMouseEnter: () => onTooltipEnter("guide-menu"),
|
|
399
412
|
onMouseLeave: () => onTooltipLeave("guide-menu"),
|
|
@@ -405,14 +418,15 @@ function ToolbarComponent({
|
|
|
405
418
|
"aria-label": "Guide orientation menu",
|
|
406
419
|
title: "Guide orientation",
|
|
407
420
|
className: cn(
|
|
408
|
-
"flex h-8 w-4 items-center justify-center rounded-[6px] outline-none hover:bg-black/10",
|
|
409
|
-
guideMenuOpen ? "bg-black/10 text-black" : "text-black"
|
|
421
|
+
"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",
|
|
422
|
+
guideMenuOpen ? "msr:bg-black/10 msr:text-black" : "msr:text-black"
|
|
410
423
|
),
|
|
411
424
|
onClick: () => {
|
|
412
425
|
onInteract();
|
|
413
426
|
setGuideMenuOpen((prev) => {
|
|
414
427
|
if (!prev) {
|
|
415
428
|
setActiveMenuIndex(guideOrientation === "horizontal" ? 0 : 1);
|
|
429
|
+
updateMenuAlign();
|
|
416
430
|
}
|
|
417
431
|
return !prev;
|
|
418
432
|
});
|
|
@@ -424,9 +438,9 @@ function ToolbarComponent({
|
|
|
424
438
|
"span",
|
|
425
439
|
{
|
|
426
440
|
className: cn(
|
|
427
|
-
"pointer-events-none absolute left-1/2
|
|
428
|
-
tooltipSide === "top" ? "bottom-full mb-2" : "top-full mt-2",
|
|
429
|
-
visibleTooltipId === "guide-menu" && !guideMenuOpen ? "opacity-100" : "opacity-0"
|
|
441
|
+
"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",
|
|
442
|
+
tooltipSide === "top" ? "msr:bottom-full msr:mb-2" : "msr:top-full msr:mt-2",
|
|
443
|
+
visibleTooltipId === "guide-menu" && !guideMenuOpen ? "msr:opacity-100" : "msr:opacity-0"
|
|
430
444
|
),
|
|
431
445
|
children: "Orientation Guide"
|
|
432
446
|
}
|
|
@@ -435,12 +449,11 @@ function ToolbarComponent({
|
|
|
435
449
|
"div",
|
|
436
450
|
{
|
|
437
451
|
className: cn(
|
|
438
|
-
"absolute z-[70] w-44 rounded-lg border border-ink-200 bg-white p-1 shadow-[0px_10px_30px_rgba(0,0,0,0.08)] outline-none focus:outline-none",
|
|
439
|
-
"flex flex-col gap-px",
|
|
440
|
-
menuSide === "bottom" ? "top-full mt-2" : "bottom-full mb-2",
|
|
441
|
-
menuAlign === "left" ? "left-0" : "right-0"
|
|
452
|
+
"msr:absolute msr:z-[70] msr:w-44 msr:rounded-lg msr:border msr:border-ink-200 msr:bg-white msr:p-1 msr:shadow-[0px_10px_30px_rgba(0,0,0,0.08)] msr:outline-none msr:focus:outline-none",
|
|
453
|
+
"msr:flex msr:flex-col msr:gap-px",
|
|
454
|
+
menuSide === "bottom" ? "msr:top-full msr:mt-2" : "msr:bottom-full msr:mb-2",
|
|
455
|
+
menuAlign === "left" ? "msr:left-0" : "msr:right-0"
|
|
442
456
|
),
|
|
443
|
-
ref: guideMenuPanelRef,
|
|
444
457
|
role: "menu",
|
|
445
458
|
tabIndex: 0,
|
|
446
459
|
onKeyDown: (event) => {
|
|
@@ -478,8 +491,8 @@ function ToolbarComponent({
|
|
|
478
491
|
{
|
|
479
492
|
type: "button",
|
|
480
493
|
className: cn(
|
|
481
|
-
"group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[12px]",
|
|
482
|
-
activeMenuIndex === 0 || guideOrientation === "horizontal" ? "bg-[#0d99ff] text-white" : "text-ink-700 hover:bg-[#0d99ff] hover:text-white"
|
|
494
|
+
"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]",
|
|
495
|
+
activeMenuIndex === 0 || guideOrientation === "horizontal" ? "msr:bg-[#0d99ff] msr:text-white" : "msr:text-ink-700 msr:hover:bg-[#0d99ff] msr:hover:text-white"
|
|
483
496
|
),
|
|
484
497
|
onClick: () => selectGuideOrientation("horizontal"),
|
|
485
498
|
children: [
|
|
@@ -488,12 +501,12 @@ function ToolbarComponent({
|
|
|
488
501
|
{
|
|
489
502
|
size: 12,
|
|
490
503
|
className: cn(
|
|
491
|
-
guideOrientation === "horizontal" ? "opacity-100" : "opacity-0"
|
|
504
|
+
guideOrientation === "horizontal" ? "msr:opacity-100" : "msr:opacity-0"
|
|
492
505
|
)
|
|
493
506
|
}
|
|
494
507
|
),
|
|
495
508
|
/* @__PURE__ */ jsx2(MinusIcon, { size: 12 }),
|
|
496
|
-
/* @__PURE__ */ jsx2("span", { className: "flex-1", children: "Horizontal" }),
|
|
509
|
+
/* @__PURE__ */ jsx2("span", { className: "msr:flex-1", children: "Horizontal" }),
|
|
497
510
|
/* @__PURE__ */ jsx2("span", { children: "H" })
|
|
498
511
|
]
|
|
499
512
|
}
|
|
@@ -503,8 +516,8 @@ function ToolbarComponent({
|
|
|
503
516
|
{
|
|
504
517
|
type: "button",
|
|
505
518
|
className: cn(
|
|
506
|
-
"group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[12px]",
|
|
507
|
-
activeMenuIndex === 1 || guideOrientation === "vertical" ? "bg-[#0d99ff] text-white" : "text-ink-700 hover:bg-[#0d99ff] hover:text-white"
|
|
519
|
+
"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]",
|
|
520
|
+
activeMenuIndex === 1 || guideOrientation === "vertical" ? "msr:bg-[#0d99ff] msr:text-white" : "msr:text-ink-700 msr:hover:bg-[#0d99ff] msr:hover:text-white"
|
|
508
521
|
),
|
|
509
522
|
onClick: () => selectGuideOrientation("vertical"),
|
|
510
523
|
children: [
|
|
@@ -513,12 +526,12 @@ function ToolbarComponent({
|
|
|
513
526
|
{
|
|
514
527
|
size: 12,
|
|
515
528
|
className: cn(
|
|
516
|
-
guideOrientation === "vertical" ? "opacity-100" : "opacity-0"
|
|
529
|
+
guideOrientation === "vertical" ? "msr:opacity-100" : "msr:opacity-0"
|
|
517
530
|
)
|
|
518
531
|
}
|
|
519
532
|
),
|
|
520
|
-
/* @__PURE__ */ jsx2(MinusIcon, { size: 12, className: "rotate-90" }),
|
|
521
|
-
/* @__PURE__ */ jsx2("span", { className: "flex-1", children: "Vertical" }),
|
|
533
|
+
/* @__PURE__ */ jsx2(MinusIcon, { size: 12, className: "msr:rotate-90" }),
|
|
534
|
+
/* @__PURE__ */ jsx2("span", { className: "msr:flex-1", children: "Vertical" }),
|
|
522
535
|
/* @__PURE__ */ jsx2("span", { children: "V" })
|
|
523
536
|
]
|
|
524
537
|
}
|
|
@@ -1166,13 +1179,15 @@ var getSelectedGuide = (guides, selectedGuideIds) => {
|
|
|
1166
1179
|
return guides.find((guide) => guide.id === lastId) ?? null;
|
|
1167
1180
|
};
|
|
1168
1181
|
var getOptionPairOverlay = (params) => {
|
|
1169
|
-
if (!params.altPressed
|
|
1170
|
-
|
|
1182
|
+
if (!params.altPressed) return null;
|
|
1183
|
+
if (!params.selectedGuide && !params.primarySelectedMeasurement) return null;
|
|
1184
|
+
const primary = params.primarySelectedMeasurement;
|
|
1185
|
+
const selectedElement = params.selectedGuide ? null : primary?.elementRef ?? params.selectedElementRef ?? null;
|
|
1171
1186
|
const selectedTarget = params.selectedGuide ? {
|
|
1172
1187
|
rect: getGuideRect(params.selectedGuide),
|
|
1173
1188
|
guideId: params.selectedGuide.id
|
|
1174
|
-
} : selectedElement ? {
|
|
1175
|
-
rect:
|
|
1189
|
+
} : selectedElement && primary ? {
|
|
1190
|
+
rect: primary.rect,
|
|
1176
1191
|
element: selectedElement
|
|
1177
1192
|
} : null;
|
|
1178
1193
|
const hoverTarget = params.hoverGuide ? { rect: getGuideRect(params.hoverGuide), guideId: params.hoverGuide.id } : params.hoverElement ? {
|
|
@@ -1393,7 +1408,14 @@ var useMeasurerDerived = ({
|
|
|
1393
1408
|
selectedGuideIds
|
|
1394
1409
|
]);
|
|
1395
1410
|
const guideDistanceOverlay = useMemo(() => {
|
|
1396
|
-
if (!altPressed || !guidesEnabled
|
|
1411
|
+
if (!altPressed || !guidesEnabled) return null;
|
|
1412
|
+
if (selectedGuide && hoverGuide && selectedGuide.id !== hoverGuide.id) {
|
|
1413
|
+
return getDistanceOverlay(
|
|
1414
|
+
getGuideRect(selectedGuide),
|
|
1415
|
+
getGuideRect(hoverGuide)
|
|
1416
|
+
);
|
|
1417
|
+
}
|
|
1418
|
+
if (!guidePreview) return null;
|
|
1397
1419
|
const previewGuide = {
|
|
1398
1420
|
id: "preview",
|
|
1399
1421
|
orientation: guidePreview.orientation,
|
|
@@ -1416,7 +1438,14 @@ var useMeasurerDerived = ({
|
|
|
1416
1438
|
getGuideRect(previewGuide),
|
|
1417
1439
|
getGuideRect(nearest.guide)
|
|
1418
1440
|
);
|
|
1419
|
-
}, [
|
|
1441
|
+
}, [
|
|
1442
|
+
altPressed,
|
|
1443
|
+
guidePreview,
|
|
1444
|
+
guides,
|
|
1445
|
+
guidesEnabled,
|
|
1446
|
+
hoverGuide,
|
|
1447
|
+
selectedGuide
|
|
1448
|
+
]);
|
|
1420
1449
|
const {
|
|
1421
1450
|
outlineColor,
|
|
1422
1451
|
fillColor,
|
|
@@ -2515,7 +2544,7 @@ function MeasureTag({
|
|
|
2515
2544
|
"div",
|
|
2516
2545
|
{
|
|
2517
2546
|
className: cn(
|
|
2518
|
-
"pointer-events-none absolute rounded px-1 py-0.5 text-[10px] text-ink-50 tabular-nums select-none",
|
|
2547
|
+
"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",
|
|
2519
2548
|
className
|
|
2520
2549
|
),
|
|
2521
2550
|
style,
|
|
@@ -2548,11 +2577,11 @@ var MeasurementBox = memo2(function MeasurementBox2({
|
|
|
2548
2577
|
const displayRect = measurement.originRect ? rect : measurement.rect;
|
|
2549
2578
|
const outlineColor = "color-mix(in oklch, oklch(0.62 0.18 255) 80%, transparent)";
|
|
2550
2579
|
const fillColor = "color-mix(in oklch, oklch(0.62 0.18 255) 8%, transparent)";
|
|
2551
|
-
return /* @__PURE__ */ jsxs2("div", { className: "pointer-events-none", children: [
|
|
2580
|
+
return /* @__PURE__ */ jsxs2("div", { className: "msr:pointer-events-none", children: [
|
|
2552
2581
|
/* @__PURE__ */ jsxs2(
|
|
2553
2582
|
"div",
|
|
2554
2583
|
{
|
|
2555
|
-
className: "absolute",
|
|
2584
|
+
className: "msr:absolute",
|
|
2556
2585
|
style: {
|
|
2557
2586
|
left: displayRect.left,
|
|
2558
2587
|
top: displayRect.top,
|
|
@@ -2565,28 +2594,28 @@ var MeasurementBox = memo2(function MeasurementBox2({
|
|
|
2565
2594
|
edges.top ? /* @__PURE__ */ jsx4(
|
|
2566
2595
|
"div",
|
|
2567
2596
|
{
|
|
2568
|
-
className: "absolute left-0 top-0 h-px w-full",
|
|
2597
|
+
className: "msr:absolute msr:left-0 msr:top-0 msr:h-px msr:w-full",
|
|
2569
2598
|
style: { backgroundColor: outlineColor }
|
|
2570
2599
|
}
|
|
2571
2600
|
) : null,
|
|
2572
2601
|
edges.right ? /* @__PURE__ */ jsx4(
|
|
2573
2602
|
"div",
|
|
2574
2603
|
{
|
|
2575
|
-
className: "absolute right-0 top-0 h-full w-px",
|
|
2604
|
+
className: "msr:absolute msr:right-0 msr:top-0 msr:h-full msr:w-px",
|
|
2576
2605
|
style: { backgroundColor: outlineColor }
|
|
2577
2606
|
}
|
|
2578
2607
|
) : null,
|
|
2579
2608
|
edges.bottom ? /* @__PURE__ */ jsx4(
|
|
2580
2609
|
"div",
|
|
2581
2610
|
{
|
|
2582
|
-
className: "absolute bottom-0 left-0 h-px w-full",
|
|
2611
|
+
className: "msr:absolute msr:bottom-0 msr:left-0 msr:h-px msr:w-full",
|
|
2583
2612
|
style: { backgroundColor: outlineColor }
|
|
2584
2613
|
}
|
|
2585
2614
|
) : null,
|
|
2586
2615
|
edges.left ? /* @__PURE__ */ jsx4(
|
|
2587
2616
|
"div",
|
|
2588
2617
|
{
|
|
2589
|
-
className: "absolute left-0 top-0 h-full w-px",
|
|
2618
|
+
className: "msr:absolute msr:left-0 msr:top-0 msr:h-full msr:w-px",
|
|
2590
2619
|
style: { backgroundColor: outlineColor }
|
|
2591
2620
|
}
|
|
2592
2621
|
) : null
|
|
@@ -2596,7 +2625,7 @@ var MeasurementBox = memo2(function MeasurementBox2({
|
|
|
2596
2625
|
/* @__PURE__ */ jsxs2(
|
|
2597
2626
|
MeasureTag,
|
|
2598
2627
|
{
|
|
2599
|
-
className: "
|
|
2628
|
+
className: "msr:-translate-x-1/2 msr:bg-ink-900/90",
|
|
2600
2629
|
style: {
|
|
2601
2630
|
left: displayRect.left + displayRect.width / 2,
|
|
2602
2631
|
top: displayRect.top + displayRect.height + labelOffset,
|
|
@@ -2636,11 +2665,11 @@ var SelectedMeasurementBox = memo3(function SelectedMeasurementBox2({
|
|
|
2636
2665
|
const displayRect = measurement.originRect ? rect : measurement.rect;
|
|
2637
2666
|
const outlineColor = "color-mix(in oklch, oklch(0.62 0.18 255) 80%, transparent)";
|
|
2638
2667
|
const fillColor = "color-mix(in oklch, oklch(0.62 0.18 255) 8%, transparent)";
|
|
2639
|
-
return /* @__PURE__ */ jsxs3("div", { className: "pointer-events-none", children: [
|
|
2668
|
+
return /* @__PURE__ */ jsxs3("div", { className: "msr:pointer-events-none", children: [
|
|
2640
2669
|
/* @__PURE__ */ jsxs3(
|
|
2641
2670
|
"div",
|
|
2642
2671
|
{
|
|
2643
|
-
className: "absolute",
|
|
2672
|
+
className: "msr:absolute",
|
|
2644
2673
|
style: {
|
|
2645
2674
|
left: displayRect.left,
|
|
2646
2675
|
top: displayRect.top,
|
|
@@ -2653,28 +2682,28 @@ var SelectedMeasurementBox = memo3(function SelectedMeasurementBox2({
|
|
|
2653
2682
|
edges.top ? /* @__PURE__ */ jsx5(
|
|
2654
2683
|
"div",
|
|
2655
2684
|
{
|
|
2656
|
-
className: "absolute left-0 top-0 h-px w-full",
|
|
2685
|
+
className: "msr:absolute msr:left-0 msr:top-0 msr:h-px msr:w-full",
|
|
2657
2686
|
style: { backgroundColor: outlineColor }
|
|
2658
2687
|
}
|
|
2659
2688
|
) : null,
|
|
2660
2689
|
edges.right ? /* @__PURE__ */ jsx5(
|
|
2661
2690
|
"div",
|
|
2662
2691
|
{
|
|
2663
|
-
className: "absolute right-0 top-0 h-full w-px",
|
|
2692
|
+
className: "msr:absolute msr:right-0 msr:top-0 msr:h-full msr:w-px",
|
|
2664
2693
|
style: { backgroundColor: outlineColor }
|
|
2665
2694
|
}
|
|
2666
2695
|
) : null,
|
|
2667
2696
|
edges.bottom ? /* @__PURE__ */ jsx5(
|
|
2668
2697
|
"div",
|
|
2669
2698
|
{
|
|
2670
|
-
className: "absolute bottom-0 left-0 h-px w-full",
|
|
2699
|
+
className: "msr:absolute msr:bottom-0 msr:left-0 msr:h-px msr:w-full",
|
|
2671
2700
|
style: { backgroundColor: outlineColor }
|
|
2672
2701
|
}
|
|
2673
2702
|
) : null,
|
|
2674
2703
|
edges.left ? /* @__PURE__ */ jsx5(
|
|
2675
2704
|
"div",
|
|
2676
2705
|
{
|
|
2677
|
-
className: "absolute left-0 top-0 h-full w-px",
|
|
2706
|
+
className: "msr:absolute msr:left-0 msr:top-0 msr:h-full msr:w-px",
|
|
2678
2707
|
style: { backgroundColor: outlineColor }
|
|
2679
2708
|
}
|
|
2680
2709
|
) : null
|
|
@@ -2684,7 +2713,7 @@ var SelectedMeasurementBox = memo3(function SelectedMeasurementBox2({
|
|
|
2684
2713
|
/* @__PURE__ */ jsxs3(
|
|
2685
2714
|
MeasureTag,
|
|
2686
2715
|
{
|
|
2687
|
-
className: "
|
|
2716
|
+
className: "msr:-translate-x-1/2 msr:bg-ink-900/90",
|
|
2688
2717
|
style: {
|
|
2689
2718
|
left: displayRect.left + displayRect.width / 2,
|
|
2690
2719
|
top: displayRect.top + displayRect.height + labelOffset,
|
|
@@ -2711,7 +2740,7 @@ var DistanceOverlayItem = memo4(function DistanceOverlayItem2({
|
|
|
2711
2740
|
return /* @__PURE__ */ jsxs4(
|
|
2712
2741
|
"div",
|
|
2713
2742
|
{
|
|
2714
|
-
className: onRemove ? "pointer-events-auto" : "pointer-events-none",
|
|
2743
|
+
className: onRemove ? "msr:pointer-events-auto" : "msr:pointer-events-none",
|
|
2715
2744
|
onClick: onRemove ? (event) => {
|
|
2716
2745
|
event.stopPropagation();
|
|
2717
2746
|
onRemove(distance.id);
|
|
@@ -2720,7 +2749,7 @@ var DistanceOverlayItem = memo4(function DistanceOverlayItem2({
|
|
|
2720
2749
|
/* @__PURE__ */ jsx6(
|
|
2721
2750
|
"div",
|
|
2722
2751
|
{
|
|
2723
|
-
className: "absolute rounded border border-[#2563eb]/70",
|
|
2752
|
+
className: "msr:absolute msr:rounded msr:border msr:border-[#2563eb]/70",
|
|
2724
2753
|
style: {
|
|
2725
2754
|
left: distance.rectA.left,
|
|
2726
2755
|
top: distance.rectA.top,
|
|
@@ -2732,7 +2761,7 @@ var DistanceOverlayItem = memo4(function DistanceOverlayItem2({
|
|
|
2732
2761
|
/* @__PURE__ */ jsx6(
|
|
2733
2762
|
"div",
|
|
2734
2763
|
{
|
|
2735
|
-
className: "absolute rounded border border-[#2563eb]/70",
|
|
2764
|
+
className: "msr:absolute msr:rounded msr:border msr:border-[#2563eb]/70",
|
|
2736
2765
|
style: {
|
|
2737
2766
|
left: distance.rectB.left,
|
|
2738
2767
|
top: distance.rectB.top,
|
|
@@ -2745,7 +2774,7 @@ var DistanceOverlayItem = memo4(function DistanceOverlayItem2({
|
|
|
2745
2774
|
(connector, index) => Math.abs(connector.x1 - connector.x2) < 1 ? /* @__PURE__ */ jsx6(
|
|
2746
2775
|
"div",
|
|
2747
2776
|
{
|
|
2748
|
-
className: "absolute border-l border-dashed border-[#2563eb]/70",
|
|
2777
|
+
className: "msr:absolute msr:border-l msr:border-dashed msr:border-[#2563eb]/70",
|
|
2749
2778
|
style: {
|
|
2750
2779
|
left: connector.x1,
|
|
2751
2780
|
top: Math.min(connector.y1, connector.y2),
|
|
@@ -2756,7 +2785,7 @@ var DistanceOverlayItem = memo4(function DistanceOverlayItem2({
|
|
|
2756
2785
|
) : /* @__PURE__ */ jsx6(
|
|
2757
2786
|
"div",
|
|
2758
2787
|
{
|
|
2759
|
-
className: "absolute border-t border-dashed border-[#2563eb]/70",
|
|
2788
|
+
className: "msr:absolute msr:border-t msr:border-dashed msr:border-[#2563eb]/70",
|
|
2760
2789
|
style: {
|
|
2761
2790
|
left: Math.min(connector.x1, connector.x2),
|
|
2762
2791
|
top: connector.y1,
|
|
@@ -2770,7 +2799,7 @@ var DistanceOverlayItem = memo4(function DistanceOverlayItem2({
|
|
|
2770
2799
|
/* @__PURE__ */ jsx6(
|
|
2771
2800
|
"div",
|
|
2772
2801
|
{
|
|
2773
|
-
className: "absolute h-px bg-[#2563eb]",
|
|
2802
|
+
className: "msr:absolute msr:h-px msr:bg-[#2563eb]",
|
|
2774
2803
|
style: {
|
|
2775
2804
|
left: Math.min(distance.horizontal.x1, distance.horizontal.x2),
|
|
2776
2805
|
width: Math.abs(distance.horizontal.x2 - distance.horizontal.x1),
|
|
@@ -2781,7 +2810,7 @@ var DistanceOverlayItem = memo4(function DistanceOverlayItem2({
|
|
|
2781
2810
|
/* @__PURE__ */ jsx6(
|
|
2782
2811
|
MeasureTag,
|
|
2783
2812
|
{
|
|
2784
|
-
className: "
|
|
2813
|
+
className: "msr:-translate-x-1/2 msr:bg-ink-900/90",
|
|
2785
2814
|
style: {
|
|
2786
2815
|
left: (distance.horizontal.x1 + distance.horizontal.x2) / 2,
|
|
2787
2816
|
top: distance.horizontal.y + labelOffset
|
|
@@ -2794,7 +2823,7 @@ var DistanceOverlayItem = memo4(function DistanceOverlayItem2({
|
|
|
2794
2823
|
/* @__PURE__ */ jsx6(
|
|
2795
2824
|
"div",
|
|
2796
2825
|
{
|
|
2797
|
-
className: "absolute w-px bg-[#2563eb]",
|
|
2826
|
+
className: "msr:absolute msr:w-px msr:bg-[#2563eb]",
|
|
2798
2827
|
style: {
|
|
2799
2828
|
top: Math.min(distance.vertical.y1, distance.vertical.y2),
|
|
2800
2829
|
height: Math.abs(distance.vertical.y2 - distance.vertical.y1),
|
|
@@ -2805,7 +2834,7 @@ var DistanceOverlayItem = memo4(function DistanceOverlayItem2({
|
|
|
2805
2834
|
/* @__PURE__ */ jsx6(
|
|
2806
2835
|
MeasureTag,
|
|
2807
2836
|
{
|
|
2808
|
-
className: "
|
|
2837
|
+
className: "msr:-translate-y-1/2 msr:bg-ink-900/90",
|
|
2809
2838
|
style: {
|
|
2810
2839
|
left: distance.vertical.x + labelOffset,
|
|
2811
2840
|
top: (distance.vertical.y1 + distance.vertical.y2) / 2
|
|
@@ -2863,7 +2892,7 @@ var MeasurerOverlay = memo5(function MeasurerOverlay2({
|
|
|
2863
2892
|
return /* @__PURE__ */ jsxs5(
|
|
2864
2893
|
"div",
|
|
2865
2894
|
{
|
|
2866
|
-
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"}`,
|
|
2895
|
+
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"}`,
|
|
2867
2896
|
onPointerDown,
|
|
2868
2897
|
onPointerMove,
|
|
2869
2898
|
onPointerUp,
|
|
@@ -2883,7 +2912,7 @@ var MeasurerOverlay = memo5(function MeasurerOverlay2({
|
|
|
2883
2912
|
/* @__PURE__ */ jsxs5(
|
|
2884
2913
|
"div",
|
|
2885
2914
|
{
|
|
2886
|
-
className: "pointer-events-none absolute",
|
|
2915
|
+
className: "msr:pointer-events-none msr:absolute",
|
|
2887
2916
|
style: {
|
|
2888
2917
|
left: activeRect.left,
|
|
2889
2918
|
top: activeRect.top,
|
|
@@ -2895,28 +2924,28 @@ var MeasurerOverlay = memo5(function MeasurerOverlay2({
|
|
|
2895
2924
|
/* @__PURE__ */ jsx7(
|
|
2896
2925
|
"div",
|
|
2897
2926
|
{
|
|
2898
|
-
className: "absolute left-0 top-0 h-px w-full",
|
|
2927
|
+
className: "msr:absolute msr:left-0 msr:top-0 msr:h-px msr:w-full",
|
|
2899
2928
|
style: { backgroundColor: outlineColor }
|
|
2900
2929
|
}
|
|
2901
2930
|
),
|
|
2902
2931
|
/* @__PURE__ */ jsx7(
|
|
2903
2932
|
"div",
|
|
2904
2933
|
{
|
|
2905
|
-
className: "absolute right-0 top-0 h-full w-px",
|
|
2934
|
+
className: "msr:absolute msr:right-0 msr:top-0 msr:h-full msr:w-px",
|
|
2906
2935
|
style: { backgroundColor: outlineColor }
|
|
2907
2936
|
}
|
|
2908
2937
|
),
|
|
2909
2938
|
/* @__PURE__ */ jsx7(
|
|
2910
2939
|
"div",
|
|
2911
2940
|
{
|
|
2912
|
-
className: "absolute bottom-0 left-0 h-px w-full",
|
|
2941
|
+
className: "msr:absolute msr:bottom-0 msr:left-0 msr:h-px msr:w-full",
|
|
2913
2942
|
style: { backgroundColor: outlineColor }
|
|
2914
2943
|
}
|
|
2915
2944
|
),
|
|
2916
2945
|
/* @__PURE__ */ jsx7(
|
|
2917
2946
|
"div",
|
|
2918
2947
|
{
|
|
2919
|
-
className: "absolute left-0 top-0 h-full w-px",
|
|
2948
|
+
className: "msr:absolute msr:left-0 msr:top-0 msr:h-full msr:w-px",
|
|
2920
2949
|
style: { backgroundColor: outlineColor }
|
|
2921
2950
|
}
|
|
2922
2951
|
)
|
|
@@ -2926,7 +2955,7 @@ var MeasurerOverlay = memo5(function MeasurerOverlay2({
|
|
|
2926
2955
|
/* @__PURE__ */ jsxs5(
|
|
2927
2956
|
MeasureTag,
|
|
2928
2957
|
{
|
|
2929
|
-
className: "
|
|
2958
|
+
className: "msr:-translate-x-1/2 msr:bg-ink-900/90",
|
|
2930
2959
|
style: {
|
|
2931
2960
|
left: activeRect.left + activeRect.width / 2,
|
|
2932
2961
|
top: activeRect.top + activeRect.height + MEASURE_LABEL_OFFSET
|
|
@@ -2942,7 +2971,7 @@ var MeasurerOverlay = memo5(function MeasurerOverlay2({
|
|
|
2942
2971
|
!guidesEnabled && hoverRectToShow ? /* @__PURE__ */ jsxs5(
|
|
2943
2972
|
"div",
|
|
2944
2973
|
{
|
|
2945
|
-
className: "pointer-events-none absolute",
|
|
2974
|
+
className: "msr:pointer-events-none msr:absolute",
|
|
2946
2975
|
style: {
|
|
2947
2976
|
left: hoverRectToShow.left,
|
|
2948
2977
|
top: hoverRectToShow.top,
|
|
@@ -2954,28 +2983,28 @@ var MeasurerOverlay = memo5(function MeasurerOverlay2({
|
|
|
2954
2983
|
hoverEdgeVisibility?.top ? /* @__PURE__ */ jsx7(
|
|
2955
2984
|
"div",
|
|
2956
2985
|
{
|
|
2957
|
-
className: "absolute left-0 top-0 h-px w-full",
|
|
2986
|
+
className: "msr:absolute msr:left-0 msr:top-0 msr:h-px msr:w-full",
|
|
2958
2987
|
style: { backgroundColor: outlineColor }
|
|
2959
2988
|
}
|
|
2960
2989
|
) : null,
|
|
2961
2990
|
hoverEdgeVisibility?.right ? /* @__PURE__ */ jsx7(
|
|
2962
2991
|
"div",
|
|
2963
2992
|
{
|
|
2964
|
-
className: "absolute right-0 top-0 h-full w-px",
|
|
2993
|
+
className: "msr:absolute msr:right-0 msr:top-0 msr:h-full msr:w-px",
|
|
2965
2994
|
style: { backgroundColor: outlineColor }
|
|
2966
2995
|
}
|
|
2967
2996
|
) : null,
|
|
2968
2997
|
hoverEdgeVisibility?.bottom ? /* @__PURE__ */ jsx7(
|
|
2969
2998
|
"div",
|
|
2970
2999
|
{
|
|
2971
|
-
className: "absolute bottom-0 left-0 h-px w-full",
|
|
3000
|
+
className: "msr:absolute msr:bottom-0 msr:left-0 msr:h-px msr:w-full",
|
|
2972
3001
|
style: { backgroundColor: outlineColor }
|
|
2973
3002
|
}
|
|
2974
3003
|
) : null,
|
|
2975
3004
|
hoverEdgeVisibility?.left ? /* @__PURE__ */ jsx7(
|
|
2976
3005
|
"div",
|
|
2977
3006
|
{
|
|
2978
|
-
className: "absolute left-0 top-0 h-full w-px",
|
|
3007
|
+
className: "msr:absolute msr:left-0 msr:top-0 msr:h-full msr:w-px",
|
|
2979
3008
|
style: { backgroundColor: outlineColor }
|
|
2980
3009
|
}
|
|
2981
3010
|
) : null
|
|
@@ -2985,7 +3014,7 @@ var MeasurerOverlay = memo5(function MeasurerOverlay2({
|
|
|
2985
3014
|
guidesEnabled && guidePreview ? /* @__PURE__ */ jsx7(
|
|
2986
3015
|
"div",
|
|
2987
3016
|
{
|
|
2988
|
-
className: "pointer-events-none absolute",
|
|
3017
|
+
className: "msr:pointer-events-none msr:absolute",
|
|
2989
3018
|
style: guidePreview.orientation === "vertical" ? {
|
|
2990
3019
|
left: guidePreview.position - GUIDE_HITBOX_SIZE / 2,
|
|
2991
3020
|
top: 0,
|
|
@@ -3000,7 +3029,7 @@ var MeasurerOverlay = memo5(function MeasurerOverlay2({
|
|
|
3000
3029
|
children: /* @__PURE__ */ jsx7(
|
|
3001
3030
|
"div",
|
|
3002
3031
|
{
|
|
3003
|
-
className: "absolute",
|
|
3032
|
+
className: "msr:absolute",
|
|
3004
3033
|
style: guidePreview.orientation === "vertical" ? {
|
|
3005
3034
|
left: GUIDE_HITBOX_SIZE / 2 - 1,
|
|
3006
3035
|
top: 0,
|
|
@@ -3058,7 +3087,7 @@ var MeasurerOverlay = memo5(function MeasurerOverlay2({
|
|
|
3058
3087
|
/* @__PURE__ */ jsx7(
|
|
3059
3088
|
"div",
|
|
3060
3089
|
{
|
|
3061
|
-
className: "absolute w-px bg-[#2563eb]",
|
|
3090
|
+
className: "msr:absolute msr:w-px msr:bg-[#2563eb]",
|
|
3062
3091
|
style: {
|
|
3063
3092
|
top: optionContainerLines.top.y1,
|
|
3064
3093
|
height: optionContainerLines.top.y2 - optionContainerLines.top.y1,
|
|
@@ -3069,7 +3098,7 @@ var MeasurerOverlay = memo5(function MeasurerOverlay2({
|
|
|
3069
3098
|
/* @__PURE__ */ jsx7(
|
|
3070
3099
|
MeasureTag,
|
|
3071
3100
|
{
|
|
3072
|
-
className: "
|
|
3101
|
+
className: "msr:-translate-y-1/2 msr:bg-ink-900/90",
|
|
3073
3102
|
style: {
|
|
3074
3103
|
left: optionContainerLines.top.x + MEASURE_LABEL_OFFSET,
|
|
3075
3104
|
top: (optionContainerLines.top.y1 + optionContainerLines.top.y2) / 2
|
|
@@ -3082,7 +3111,7 @@ var MeasurerOverlay = memo5(function MeasurerOverlay2({
|
|
|
3082
3111
|
/* @__PURE__ */ jsx7(
|
|
3083
3112
|
"div",
|
|
3084
3113
|
{
|
|
3085
|
-
className: "absolute w-px bg-[#2563eb]",
|
|
3114
|
+
className: "msr:absolute msr:w-px msr:bg-[#2563eb]",
|
|
3086
3115
|
style: {
|
|
3087
3116
|
top: optionContainerLines.bottom.y1,
|
|
3088
3117
|
height: optionContainerLines.bottom.y2 - optionContainerLines.bottom.y1,
|
|
@@ -3093,7 +3122,7 @@ var MeasurerOverlay = memo5(function MeasurerOverlay2({
|
|
|
3093
3122
|
/* @__PURE__ */ jsx7(
|
|
3094
3123
|
MeasureTag,
|
|
3095
3124
|
{
|
|
3096
|
-
className: "
|
|
3125
|
+
className: "msr:-translate-y-1/2 msr:bg-ink-900/90",
|
|
3097
3126
|
style: {
|
|
3098
3127
|
left: optionContainerLines.bottom.x + MEASURE_LABEL_OFFSET,
|
|
3099
3128
|
top: (optionContainerLines.bottom.y1 + optionContainerLines.bottom.y2) / 2
|
|
@@ -3106,7 +3135,7 @@ var MeasurerOverlay = memo5(function MeasurerOverlay2({
|
|
|
3106
3135
|
/* @__PURE__ */ jsx7(
|
|
3107
3136
|
"div",
|
|
3108
3137
|
{
|
|
3109
|
-
className: "absolute h-px bg-[#2563eb]",
|
|
3138
|
+
className: "msr:absolute msr:h-px msr:bg-[#2563eb]",
|
|
3110
3139
|
style: {
|
|
3111
3140
|
left: optionContainerLines.left.x1,
|
|
3112
3141
|
width: optionContainerLines.left.x2 - optionContainerLines.left.x1,
|
|
@@ -3117,7 +3146,7 @@ var MeasurerOverlay = memo5(function MeasurerOverlay2({
|
|
|
3117
3146
|
/* @__PURE__ */ jsx7(
|
|
3118
3147
|
MeasureTag,
|
|
3119
3148
|
{
|
|
3120
|
-
className: "
|
|
3149
|
+
className: "msr:-translate-x-1/2 msr:bg-ink-900/90",
|
|
3121
3150
|
style: {
|
|
3122
3151
|
left: (optionContainerLines.left.x1 + optionContainerLines.left.x2) / 2,
|
|
3123
3152
|
top: optionContainerLines.left.y + MEASURE_LABEL_OFFSET
|
|
@@ -3130,7 +3159,7 @@ var MeasurerOverlay = memo5(function MeasurerOverlay2({
|
|
|
3130
3159
|
/* @__PURE__ */ jsx7(
|
|
3131
3160
|
"div",
|
|
3132
3161
|
{
|
|
3133
|
-
className: "absolute h-px bg-[#2563eb]",
|
|
3162
|
+
className: "msr:absolute msr:h-px msr:bg-[#2563eb]",
|
|
3134
3163
|
style: {
|
|
3135
3164
|
left: optionContainerLines.right.x1,
|
|
3136
3165
|
width: optionContainerLines.right.x2 - optionContainerLines.right.x1,
|
|
@@ -3141,7 +3170,7 @@ var MeasurerOverlay = memo5(function MeasurerOverlay2({
|
|
|
3141
3170
|
/* @__PURE__ */ jsx7(
|
|
3142
3171
|
MeasureTag,
|
|
3143
3172
|
{
|
|
3144
|
-
className: "
|
|
3173
|
+
className: "msr:-translate-x-1/2 msr:bg-ink-900/90",
|
|
3145
3174
|
style: {
|
|
3146
3175
|
left: (optionContainerLines.right.x1 + optionContainerLines.right.x2) / 2,
|
|
3147
3176
|
top: optionContainerLines.right.y + MEASURE_LABEL_OFFSET
|
|
@@ -3159,7 +3188,7 @@ var MeasurerOverlay = memo5(function MeasurerOverlay2({
|
|
|
3159
3188
|
return /* @__PURE__ */ jsx7(
|
|
3160
3189
|
"div",
|
|
3161
3190
|
{
|
|
3162
|
-
className: "absolute",
|
|
3191
|
+
className: "msr:absolute",
|
|
3163
3192
|
style: guide.orientation === "vertical" ? {
|
|
3164
3193
|
left: guide.position - GUIDE_HITBOX_SIZE / 2,
|
|
3165
3194
|
top: 0,
|
|
@@ -3177,7 +3206,7 @@ var MeasurerOverlay = memo5(function MeasurerOverlay2({
|
|
|
3177
3206
|
children: /* @__PURE__ */ jsx7(
|
|
3178
3207
|
"div",
|
|
3179
3208
|
{
|
|
3180
|
-
className: "absolute",
|
|
3209
|
+
className: "msr:absolute",
|
|
3181
3210
|
style: guide.orientation === "vertical" ? {
|
|
3182
3211
|
left: GUIDE_HITBOX_SIZE / 2 - 1,
|
|
3183
3212
|
top: 0,
|
|
@@ -3224,7 +3253,8 @@ function MeasurerClient({
|
|
|
3224
3253
|
highlightColor,
|
|
3225
3254
|
guideColor,
|
|
3226
3255
|
hoverHighlightEnabled,
|
|
3227
|
-
persistOnReload
|
|
3256
|
+
persistOnReload,
|
|
3257
|
+
portalTarget
|
|
3228
3258
|
}) {
|
|
3229
3259
|
const selectionRectRef = useRef8(null);
|
|
3230
3260
|
const toolbarRef = useRef8(null);
|
|
@@ -3662,71 +3692,82 @@ function MeasurerClient({
|
|
|
3662
3692
|
[clearGuideDragHold, setDraggingGuideId]
|
|
3663
3693
|
);
|
|
3664
3694
|
return createPortal(
|
|
3665
|
-
/* @__PURE__ */ jsxs6(
|
|
3666
|
-
|
|
3667
|
-
|
|
3668
|
-
|
|
3669
|
-
|
|
3670
|
-
|
|
3671
|
-
|
|
3672
|
-
|
|
3673
|
-
|
|
3674
|
-
|
|
3675
|
-
|
|
3676
|
-
|
|
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
|
-
|
|
3695
|
+
/* @__PURE__ */ jsxs6(
|
|
3696
|
+
"div",
|
|
3697
|
+
{
|
|
3698
|
+
ref: overlayRef,
|
|
3699
|
+
className: "mesurer-root msr:pointer-events-none msr:fixed msr:inset-0 msr:z-50",
|
|
3700
|
+
children: [
|
|
3701
|
+
/* @__PURE__ */ jsx8(
|
|
3702
|
+
MeasurerOverlay,
|
|
3703
|
+
{
|
|
3704
|
+
enabled,
|
|
3705
|
+
toolMode,
|
|
3706
|
+
guidesEnabled,
|
|
3707
|
+
altPressed,
|
|
3708
|
+
isDragging,
|
|
3709
|
+
displayedMeasurements,
|
|
3710
|
+
measurementEdgeVisibility,
|
|
3711
|
+
activeRect,
|
|
3712
|
+
activeWidth,
|
|
3713
|
+
activeHeight,
|
|
3714
|
+
fillColor,
|
|
3715
|
+
outlineColor,
|
|
3716
|
+
hoverRectToShow,
|
|
3717
|
+
hoverEdgeVisibility,
|
|
3718
|
+
guidePreview,
|
|
3719
|
+
guideColorPreview,
|
|
3720
|
+
displayedSelectedMeasurements,
|
|
3721
|
+
selectedEdgeVisibility,
|
|
3722
|
+
heldDistances,
|
|
3723
|
+
optionPairOverlay,
|
|
3724
|
+
guideDistanceOverlay,
|
|
3725
|
+
optionContainerLines,
|
|
3726
|
+
guides,
|
|
3727
|
+
hoverGuide,
|
|
3728
|
+
draggingGuideId,
|
|
3729
|
+
selectedGuideIds,
|
|
3730
|
+
guideColorActive,
|
|
3731
|
+
guideColorHover,
|
|
3732
|
+
guideColorDefault,
|
|
3733
|
+
onPointerDown: handlePointerDown,
|
|
3734
|
+
onPointerMove: handlePointerMove,
|
|
3735
|
+
onPointerUp: handlePointerUp,
|
|
3736
|
+
onPointerLeave: handlePointerLeave,
|
|
3737
|
+
onRemoveHeldDistance: removeHeldDistance,
|
|
3738
|
+
onGuidePointerDown: handleGuidePointerDown,
|
|
3739
|
+
onGuidePointerUp: handleGuidePointerUp,
|
|
3740
|
+
onGuidePointerCancel: handleGuidePointerUp
|
|
3741
|
+
}
|
|
3742
|
+
),
|
|
3743
|
+
/* @__PURE__ */ jsx8(
|
|
3744
|
+
Toolbar,
|
|
3745
|
+
{
|
|
3746
|
+
ref: toolbarRef,
|
|
3747
|
+
toolMode,
|
|
3748
|
+
setEnabled: setEnabledWithHistory,
|
|
3749
|
+
setToolMode: setToolModeWithHistory,
|
|
3750
|
+
guideOrientation,
|
|
3751
|
+
setGuideOrientation: setGuideOrientationWithHistory,
|
|
3752
|
+
onInteract: () => setToolbarActive(true)
|
|
3753
|
+
}
|
|
3754
|
+
)
|
|
3755
|
+
]
|
|
3756
|
+
}
|
|
3757
|
+
),
|
|
3758
|
+
portalTarget
|
|
3722
3759
|
);
|
|
3723
3760
|
}
|
|
3724
3761
|
function Measurer({
|
|
3725
3762
|
highlightColor = "oklch(0.62 0.18 255)",
|
|
3726
3763
|
guideColor = "oklch(0.63 0.26 29.23)",
|
|
3727
3764
|
hoverHighlightEnabled = true,
|
|
3728
|
-
persistOnReload = false
|
|
3765
|
+
persistOnReload = false,
|
|
3766
|
+
portalTarget
|
|
3729
3767
|
}) {
|
|
3768
|
+
if (typeof document !== "undefined") {
|
|
3769
|
+
ensureMeasurerStyles(MESURER_STYLES, portalTarget);
|
|
3770
|
+
}
|
|
3730
3771
|
const hydrated = useHydrated();
|
|
3731
3772
|
if (!hydrated) return null;
|
|
3732
3773
|
return /* @__PURE__ */ jsx8(
|
|
@@ -3735,13 +3776,11 @@ function Measurer({
|
|
|
3735
3776
|
highlightColor,
|
|
3736
3777
|
guideColor,
|
|
3737
3778
|
hoverHighlightEnabled,
|
|
3738
|
-
persistOnReload
|
|
3779
|
+
persistOnReload,
|
|
3780
|
+
portalTarget: portalTarget ?? document.body
|
|
3739
3781
|
}
|
|
3740
3782
|
);
|
|
3741
3783
|
}
|
|
3742
|
-
|
|
3743
|
-
// index.ts
|
|
3744
|
-
ensureMeasurerStyles(MESURER_STYLES);
|
|
3745
3784
|
export {
|
|
3746
3785
|
Measurer
|
|
3747
3786
|
};
|