@fluentui/react-positioning 9.18.2 → 9.18.3
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 -2
- package/dist/index.d.ts +18 -18
- package/lib/hooks/useSafeZoneArea/SafeZoneArea.js +156 -0
- package/lib/hooks/useSafeZoneArea/SafeZoneArea.js.map +1 -0
- package/lib/{SafeZoneArea.styles.js → hooks/useSafeZoneArea/SafeZoneArea.styles.js} +2 -4
- package/lib/hooks/useSafeZoneArea/SafeZoneArea.styles.js.map +1 -0
- package/lib/hooks/useSafeZoneArea/computeOutsideClipPath.js +27 -0
- package/lib/hooks/useSafeZoneArea/computeOutsideClipPath.js.map +1 -0
- package/lib/hooks/useSafeZoneArea/createSafeZoneAreaStateStore.js +25 -0
- package/lib/hooks/useSafeZoneArea/createSafeZoneAreaStateStore.js.map +1 -0
- package/lib/hooks/useSafeZoneArea/getMouseAnchor.js +51 -0
- package/lib/hooks/useSafeZoneArea/getMouseAnchor.js.map +1 -0
- package/lib/hooks/useSafeZoneArea/getRectCorners.js +24 -0
- package/lib/hooks/useSafeZoneArea/getRectCorners.js.map +1 -0
- package/lib/hooks/useSafeZoneArea/pointsToSvgPath.js +7 -0
- package/lib/hooks/useSafeZoneArea/pointsToSvgPath.js.map +1 -0
- package/lib/hooks/useSafeZoneArea/types.js +5 -0
- package/lib/hooks/useSafeZoneArea/types.js.map +1 -0
- package/lib/{useSafeZoneArea.js → hooks/useSafeZoneArea/useSafeZoneArea.js} +6 -4
- package/lib/hooks/useSafeZoneArea/useSafeZoneArea.js.map +1 -0
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/hooks/useSafeZoneArea/SafeZoneArea.js +168 -0
- package/lib-commonjs/hooks/useSafeZoneArea/SafeZoneArea.js.map +1 -0
- package/lib-commonjs/{SafeZoneArea.styles.js → hooks/useSafeZoneArea/SafeZoneArea.styles.js} +1 -5
- package/lib-commonjs/hooks/useSafeZoneArea/SafeZoneArea.styles.js.map +1 -0
- package/lib-commonjs/hooks/useSafeZoneArea/computeOutsideClipPath.js +33 -0
- package/lib-commonjs/hooks/useSafeZoneArea/computeOutsideClipPath.js.map +1 -0
- package/lib-commonjs/hooks/useSafeZoneArea/createSafeZoneAreaStateStore.js +35 -0
- package/lib-commonjs/hooks/useSafeZoneArea/createSafeZoneAreaStateStore.js.map +1 -0
- package/lib-commonjs/hooks/useSafeZoneArea/getMouseAnchor.js +62 -0
- package/lib-commonjs/hooks/useSafeZoneArea/getMouseAnchor.js.map +1 -0
- package/lib-commonjs/hooks/useSafeZoneArea/getRectCorners.js +34 -0
- package/lib-commonjs/hooks/useSafeZoneArea/getRectCorners.js.map +1 -0
- package/lib-commonjs/hooks/useSafeZoneArea/pointsToSvgPath.js +17 -0
- package/lib-commonjs/hooks/useSafeZoneArea/pointsToSvgPath.js.map +1 -0
- package/lib-commonjs/hooks/useSafeZoneArea/types.js +8 -0
- package/lib-commonjs/hooks/useSafeZoneArea/types.js.map +1 -0
- package/lib-commonjs/{useSafeZoneArea.js → hooks/useSafeZoneArea/useSafeZoneArea.js} +6 -4
- package/lib-commonjs/hooks/useSafeZoneArea/useSafeZoneArea.js.map +1 -0
- package/lib-commonjs/index.js +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +1 -1
- package/lib/SafeZoneArea.js +0 -309
- package/lib/SafeZoneArea.js.map +0 -1
- package/lib/SafeZoneArea.styles.js.map +0 -1
- package/lib/useSafeZoneArea.js.map +0 -1
- package/lib-commonjs/SafeZoneArea.js +0 -319
- package/lib-commonjs/SafeZoneArea.js.map +0 -1
- package/lib-commonjs/SafeZoneArea.styles.js.map +0 -1
- package/lib-commonjs/useSafeZoneArea.js.map +0 -1
@@ -0,0 +1,168 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
function _export(target, all) {
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
7
|
+
enumerable: true,
|
8
|
+
get: all[name]
|
9
|
+
});
|
10
|
+
}
|
11
|
+
_export(exports, {
|
12
|
+
SafeZoneArea: function() {
|
13
|
+
return SafeZoneArea;
|
14
|
+
},
|
15
|
+
isSameCoordinates: function() {
|
16
|
+
return isSameCoordinates;
|
17
|
+
},
|
18
|
+
isSameRect: function() {
|
19
|
+
return isSameRect;
|
20
|
+
}
|
21
|
+
});
|
22
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
23
|
+
const _react = require("@griffel/react");
|
24
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
25
|
+
const _react1 = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
26
|
+
const _shim = require("use-sync-external-store/shim");
|
27
|
+
const _getRectCorners = require("./getRectCorners");
|
28
|
+
const _getMouseAnchor = require("./getMouseAnchor");
|
29
|
+
const _pointsToSvgPath = require("./pointsToSvgPath");
|
30
|
+
const _SafeZoneAreastyles = require("./SafeZoneArea.styles");
|
31
|
+
const _computeOutsideClipPath = require("./computeOutsideClipPath");
|
32
|
+
// ---
|
33
|
+
const EMPTY_RECT = {
|
34
|
+
top: 0,
|
35
|
+
right: 0,
|
36
|
+
bottom: 0,
|
37
|
+
left: 0,
|
38
|
+
width: 0,
|
39
|
+
height: 0,
|
40
|
+
x: 0,
|
41
|
+
y: 0,
|
42
|
+
toJSON () {
|
43
|
+
return '';
|
44
|
+
}
|
45
|
+
};
|
46
|
+
function isSameRect(a, b) {
|
47
|
+
return a.top === b.top && a.right === b.right && a.bottom === b.bottom && a.left === b.left && a.width === b.width && a.height === b.height;
|
48
|
+
}
|
49
|
+
function isSameCoordinates(a, b) {
|
50
|
+
return a[0] === b[0] && a[1] === b[1];
|
51
|
+
}
|
52
|
+
const SafeZoneArea = /*#__PURE__*/ _react1.memo((props)=>{
|
53
|
+
const { debug, onMouseEnter, onMouseMove, onMouseLeave, stateStore } = props;
|
54
|
+
const clipPathId = (0, _reactutilities.useId)();
|
55
|
+
const styles = (0, _SafeZoneAreastyles.useStyles)();
|
56
|
+
const active = (0, _shim.useSyncExternalStore)(stateStore.subscribe, stateStore.isActive);
|
57
|
+
const svgRef = _react1.useRef(null);
|
58
|
+
const [state, setState] = _react1.useState(()=>({
|
59
|
+
containerRect: EMPTY_RECT,
|
60
|
+
targetRect: EMPTY_RECT,
|
61
|
+
mouseCoordinates: [
|
62
|
+
0,
|
63
|
+
0
|
64
|
+
]
|
65
|
+
}));
|
66
|
+
_react1.useImperativeHandle(props.imperativeRef, ()=>({
|
67
|
+
updateSVG (newState) {
|
68
|
+
setState((prevState)=>{
|
69
|
+
// Heads up!
|
70
|
+
// A small optimization to avoid unnecessary re-renders
|
71
|
+
if (isSameRect(prevState.containerRect, newState.containerRect) && isSameRect(prevState.targetRect, newState.targetRect) && isSameCoordinates(prevState.mouseCoordinates, newState.mouseCoordinates)) {
|
72
|
+
return prevState;
|
73
|
+
}
|
74
|
+
return newState;
|
75
|
+
});
|
76
|
+
}
|
77
|
+
}), []);
|
78
|
+
const { containerRect, targetRect, mouseCoordinates } = state;
|
79
|
+
const topOffset = Math.min(targetRect.top, containerRect.top);
|
80
|
+
const leftOffset = Math.min(targetRect.left, containerRect.left);
|
81
|
+
const bottomOffset = Math.max(targetRect.bottom, containerRect.bottom);
|
82
|
+
const rightOffset = Math.max(targetRect.right, containerRect.right);
|
83
|
+
// ---
|
84
|
+
const containerCorners = (0, _getRectCorners.getRectCorners)(containerRect, [
|
85
|
+
leftOffset,
|
86
|
+
topOffset
|
87
|
+
]);
|
88
|
+
const targetCorners = (0, _getRectCorners.getRectCorners)(targetRect, [
|
89
|
+
leftOffset,
|
90
|
+
topOffset
|
91
|
+
]);
|
92
|
+
// Heads up!
|
93
|
+
// The SVG coordinate system starts at the top-left corner of the SVG element,
|
94
|
+
// so we need to adjust the mouse coordinates relative to the SVG's top-left corner.
|
95
|
+
const relativeMouseCoordinates = [
|
96
|
+
mouseCoordinates[0] - leftOffset,
|
97
|
+
mouseCoordinates[1] - topOffset
|
98
|
+
];
|
99
|
+
const mouseAnchor = (0, _getMouseAnchor.getMouseAnchor)(containerCorners.topLeft, containerCorners.bottomRight, relativeMouseCoordinates);
|
100
|
+
const triangleA = [
|
101
|
+
mouseAnchor,
|
102
|
+
containerCorners.topLeft,
|
103
|
+
containerCorners.topRight
|
104
|
+
];
|
105
|
+
const triangleB = [
|
106
|
+
mouseAnchor,
|
107
|
+
containerCorners.topRight,
|
108
|
+
containerCorners.bottomRight
|
109
|
+
];
|
110
|
+
const triangleC = [
|
111
|
+
mouseAnchor,
|
112
|
+
containerCorners.bottomRight,
|
113
|
+
containerCorners.bottomLeft
|
114
|
+
];
|
115
|
+
const triangleD = [
|
116
|
+
mouseAnchor,
|
117
|
+
containerCorners.bottomLeft,
|
118
|
+
containerCorners.topLeft
|
119
|
+
];
|
120
|
+
const svgWidth = rightOffset - leftOffset;
|
121
|
+
const svgHeight = bottomOffset - topOffset;
|
122
|
+
const clipPath = (0, _computeOutsideClipPath.computeOutsideClipPath)(svgWidth, svgHeight, {
|
123
|
+
x: targetCorners.topLeft[0],
|
124
|
+
y: targetCorners.topLeft[1],
|
125
|
+
width: targetRect.width,
|
126
|
+
height: targetRect.height
|
127
|
+
}, {
|
128
|
+
x: containerCorners.topLeft[0],
|
129
|
+
y: containerCorners.topLeft[1],
|
130
|
+
width: containerRect.width,
|
131
|
+
height: containerRect.height
|
132
|
+
});
|
133
|
+
return /*#__PURE__*/ _react1.createElement("div", {
|
134
|
+
className: (0, _react.mergeClasses)(styles.wrapper, active && styles.wrapperActive),
|
135
|
+
"data-safe-zone": ""
|
136
|
+
}, active ? /*#__PURE__*/ _react1.createElement("svg", {
|
137
|
+
"aria-hidden": true,
|
138
|
+
className: styles.svg,
|
139
|
+
xmlns: "http://www.w3.org/2000/svg",
|
140
|
+
ref: svgRef,
|
141
|
+
style: {
|
142
|
+
width: `${svgWidth}px`,
|
143
|
+
height: `${svgHeight}px`,
|
144
|
+
transform: `translate(${leftOffset}px, ${topOffset}px)`
|
145
|
+
}
|
146
|
+
}, /*#__PURE__*/ _react1.createElement("g", {
|
147
|
+
className: (0, _react.mergeClasses)(styles.triangle, debug && styles.triangleDebug),
|
148
|
+
clipPath: `url(#${clipPathId})`,
|
149
|
+
onMouseEnter: onMouseEnter,
|
150
|
+
onMouseMove: onMouseMove,
|
151
|
+
onMouseLeave: onMouseLeave
|
152
|
+
}, /*#__PURE__*/ _react1.createElement("path", {
|
153
|
+
d: (0, _pointsToSvgPath.pointsToSvgPath)(triangleA)
|
154
|
+
}), /*#__PURE__*/ _react1.createElement("path", {
|
155
|
+
d: (0, _pointsToSvgPath.pointsToSvgPath)(triangleB)
|
156
|
+
}), /*#__PURE__*/ _react1.createElement("path", {
|
157
|
+
d: (0, _pointsToSvgPath.pointsToSvgPath)(triangleC)
|
158
|
+
}), /*#__PURE__*/ _react1.createElement("path", {
|
159
|
+
d: (0, _pointsToSvgPath.pointsToSvgPath)(triangleD)
|
160
|
+
})), /*#__PURE__*/ _react1.createElement("clipPath", {
|
161
|
+
id: clipPathId
|
162
|
+
}, /*#__PURE__*/ _react1.createElement("path", {
|
163
|
+
d: clipPath
|
164
|
+
})), debug && /*#__PURE__*/ _react1.createElement("path", {
|
165
|
+
className: styles.rectDebug,
|
166
|
+
d: clipPath
|
167
|
+
})) : null);
|
168
|
+
});
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useSafeZoneArea/SafeZoneArea.tsx"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useId } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useSyncExternalStore } from 'use-sync-external-store/shim';\n\nimport type { createSafeZoneAreaStateStore } from './createSafeZoneAreaStateStore';\nimport { getRectCorners } from './getRectCorners';\nimport { getMouseAnchor } from './getMouseAnchor';\nimport { pointsToSvgPath } from './pointsToSvgPath';\nimport { useStyles } from './SafeZoneArea.styles';\nimport type { Point } from './types';\nimport { computeOutsideClipPath } from './computeOutsideClipPath';\n\nexport type SafeZoneAreaImperativeHandle = {\n updateSVG: (options: { containerRect: DOMRect; targetRect: DOMRect; mouseCoordinates: Point }) => void;\n};\n\nexport type SafeZoneAreaProps = {\n /** Enables debug mode: makes drawn shapes visible. */\n debug: boolean;\n\n /** A reference to the SafeZoneArea imperative handle. */\n imperativeRef: React.Ref<SafeZoneAreaImperativeHandle>;\n\n // eslint-disable-next-line @nx/workspace-consistent-callback-type\n onMouseEnter: (e: React.MouseEvent) => void;\n // eslint-disable-next-line @nx/workspace-consistent-callback-type\n onMouseMove: (e: React.MouseEvent) => void;\n // eslint-disable-next-line @nx/workspace-consistent-callback-type\n onMouseLeave: (e: React.MouseEvent) => void;\n\n stateStore: ReturnType<typeof createSafeZoneAreaStateStore>;\n};\n\n/**\n * @internal\n */\ntype SafeZoneAreaState = {\n containerRect: DOMRect;\n targetRect: DOMRect;\n mouseCoordinates: Point;\n};\n\n// ---\n\nconst EMPTY_RECT: DOMRect = {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n width: 0,\n height: 0,\n x: 0,\n y: 0,\n toJSON() {\n return '';\n },\n};\n\nexport function isSameRect(a: DOMRect, b: DOMRect) {\n return (\n a.top === b.top &&\n a.right === b.right &&\n a.bottom === b.bottom &&\n a.left === b.left &&\n a.width === b.width &&\n a.height === b.height\n );\n}\n\nexport function isSameCoordinates(a: Point, b: Point) {\n return a[0] === b[0] && a[1] === b[1];\n}\n\n// ---\n\n/**\n * A component that renders a safe zone area with SVG shapes. Uses `useSyncExternalStore` to manage its active state\n * to avoid causing re-renders in `useSafeZoneArea()` as the hook might be used in host components like `Menu`.\n *\n * Draws two shapes:\n * - a triangle that points to the target element which is an actual safe zone\n * - a rectangle for a clip path that clips out the target element\n *\n * @internal\n */\nexport const SafeZoneArea = React.memo((props: SafeZoneAreaProps) => {\n const { debug, onMouseEnter, onMouseMove, onMouseLeave, stateStore } = props;\n\n const clipPathId = useId();\n const styles = useStyles();\n\n const active = useSyncExternalStore(stateStore.subscribe, stateStore.isActive);\n const svgRef = React.useRef<SVGSVGElement>(null);\n\n const [state, setState] = React.useState<SafeZoneAreaState>(() => ({\n containerRect: EMPTY_RECT,\n targetRect: EMPTY_RECT,\n mouseCoordinates: [0, 0],\n }));\n\n React.useImperativeHandle(\n props.imperativeRef,\n () => ({\n updateSVG(newState) {\n setState(prevState => {\n // Heads up!\n // A small optimization to avoid unnecessary re-renders\n if (\n isSameRect(prevState.containerRect, newState.containerRect) &&\n isSameRect(prevState.targetRect, newState.targetRect) &&\n isSameCoordinates(prevState.mouseCoordinates, newState.mouseCoordinates)\n ) {\n return prevState;\n }\n\n return newState;\n });\n },\n }),\n [],\n );\n\n const { containerRect, targetRect, mouseCoordinates } = state;\n\n const topOffset = Math.min(targetRect.top, containerRect.top);\n const leftOffset = Math.min(targetRect.left, containerRect.left);\n const bottomOffset = Math.max(targetRect.bottom, containerRect.bottom);\n const rightOffset = Math.max(targetRect.right, containerRect.right);\n\n // ---\n\n const containerCorners = getRectCorners(containerRect, [leftOffset, topOffset]);\n const targetCorners = getRectCorners(targetRect, [leftOffset, topOffset]);\n\n // Heads up!\n // The SVG coordinate system starts at the top-left corner of the SVG element,\n // so we need to adjust the mouse coordinates relative to the SVG's top-left corner.\n const relativeMouseCoordinates: Point = [mouseCoordinates[0] - leftOffset, mouseCoordinates[1] - topOffset];\n const mouseAnchor = getMouseAnchor(containerCorners.topLeft, containerCorners.bottomRight, relativeMouseCoordinates);\n\n const triangleA = [mouseAnchor, containerCorners.topLeft, containerCorners.topRight];\n const triangleB = [mouseAnchor, containerCorners.topRight, containerCorners.bottomRight];\n const triangleC = [mouseAnchor, containerCorners.bottomRight, containerCorners.bottomLeft];\n const triangleD = [mouseAnchor, containerCorners.bottomLeft, containerCorners.topLeft];\n\n const svgWidth = rightOffset - leftOffset;\n const svgHeight = bottomOffset - topOffset;\n\n const clipPath = computeOutsideClipPath(\n svgWidth,\n svgHeight,\n {\n x: targetCorners.topLeft[0],\n y: targetCorners.topLeft[1],\n width: targetRect.width,\n height: targetRect.height,\n },\n {\n x: containerCorners.topLeft[0],\n y: containerCorners.topLeft[1],\n width: containerRect.width,\n height: containerRect.height,\n },\n );\n\n return (\n <div className={mergeClasses(styles.wrapper, active && styles.wrapperActive)} data-safe-zone=\"\">\n {active ? (\n <svg\n aria-hidden\n className={styles.svg}\n xmlns=\"http://www.w3.org/2000/svg\"\n ref={svgRef}\n style={{\n width: `${svgWidth}px`,\n height: `${svgHeight}px`,\n transform: `translate(${leftOffset}px, ${topOffset}px)`,\n }}\n >\n <g\n className={mergeClasses(styles.triangle, debug && styles.triangleDebug)}\n clipPath={`url(#${clipPathId})`}\n onMouseEnter={onMouseEnter}\n onMouseMove={onMouseMove}\n onMouseLeave={onMouseLeave}\n >\n <path d={pointsToSvgPath(triangleA)} />\n <path d={pointsToSvgPath(triangleB)} />\n <path d={pointsToSvgPath(triangleC)} />\n <path d={pointsToSvgPath(triangleD)} />\n </g>\n\n <clipPath id={clipPathId}>\n <path d={clipPath} />\n </clipPath>\n\n {debug && <path className={styles.rectDebug} d={clipPath} />}\n </svg>\n ) : null}\n </div>\n );\n});\n"],"names":["SafeZoneArea","isSameCoordinates","isSameRect","EMPTY_RECT","top","right","bottom","left","width","height","x","y","toJSON","a","b","React","memo","props","debug","onMouseEnter","onMouseMove","onMouseLeave","stateStore","clipPathId","useId","styles","useStyles","active","useSyncExternalStore","subscribe","isActive","svgRef","useRef","state","setState","useState","containerRect","targetRect","mouseCoordinates","useImperativeHandle","imperativeRef","updateSVG","newState","prevState","topOffset","Math","min","leftOffset","bottomOffset","max","rightOffset","containerCorners","getRectCorners","targetCorners","relativeMouseCoordinates","mouseAnchor","getMouseAnchor","topLeft","bottomRight","triangleA","topRight","triangleB","triangleC","bottomLeft","triangleD","svgWidth","svgHeight","clipPath","computeOutsideClipPath","createElement","div","className","mergeClasses","wrapper","wrapperActive","data-safe-zone","svg","aria-hidden","xmlns","ref","style","transform","g","triangle","triangleDebug","path","d","pointsToSvgPath","id","rectDebug"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/lib-commonjs/{SafeZoneArea.styles.js → hooks/useSafeZoneArea/SafeZoneArea.styles.js}
RENAMED
@@ -34,9 +34,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
34
34
|
},
|
35
35
|
triangleDebug: {
|
36
36
|
Bceei9c: "f7116n6",
|
37
|
-
Bkfmm31: "f1xab38x"
|
38
|
-
ojy3ng: "f1wle4v7",
|
39
|
-
Be5yapy: "f1t0ei4n"
|
37
|
+
Bkfmm31: "f1xab38x"
|
40
38
|
},
|
41
39
|
rectDebug: {
|
42
40
|
Bkfmm31: "fyegryc"
|
@@ -56,8 +54,6 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
56
54
|
".f1cguypg{pointer-events:auto;}",
|
57
55
|
".f7116n6{cursor:crosshair;}",
|
58
56
|
".f1xab38x{fill:color-mix(in srgb, var(--colorPaletteGreenBackground3) 20%, transparent);}",
|
59
|
-
".f1wle4v7{stroke:color-mix(in srgb, var(--colorPaletteGreenBackground3) 60%, transparent);}",
|
60
|
-
".f1t0ei4n{stroke-width:2px;}",
|
61
57
|
".fyegryc{fill:color-mix(in srgb, var(--colorPaletteRedBackground3) 20%, transparent);}"
|
62
58
|
]
|
63
59
|
});
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["SafeZoneArea.styles.js"],"sourcesContent":["import { makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const useStyles = makeStyles({\n wrapper: {\n display: 'none',\n height: 0,\n width: 0,\n pointerEvents: 'none'\n },\n wrapperActive: {\n display: 'block'\n },\n svg: {\n fill: 'transparent',\n pointerEvents: 'none',\n position: 'fixed',\n top: 0,\n left: 0\n },\n triangle: {\n pointerEvents: 'auto'\n },\n triangleDebug: {\n cursor: 'crosshair',\n fill: `color-mix(in srgb, ${tokens.colorPaletteGreenBackground3} 20%, transparent)`\n },\n rectDebug: {\n fill: `color-mix(in srgb, ${tokens.colorPaletteRedBackground3} 20%, transparent)`\n }\n});\n"],"names":["useStyles","__styles","wrapper","mc9l5x","Bqenvij","a9b677","Bkecrkj","wrapperActive","svg","Bkfmm31","qhf8xq","Bhzewxz","oyh7mz","triangle","triangleDebug","Bceei9c","rectDebug","d"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAEaA;;;eAAAA;;;uBAFc;AAEpB,MAAMA,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;IAAAC,eAAA;QAAAJ,QAAA;IAAA;IAAAK,KAAA;QAAAC,SAAA;QAAAH,SAAA;QAAAI,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,UAAA;QAAAP,SAAA;IAAA;IAAAQ,eAAA;QAAAC,SAAA;QAAAN,SAAA;IAAA;IAAAO,WAAA;QAAAP,SAAA;IAAA;AAAA,GAAA;IAAAQ,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA"}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "computeOutsideClipPath", {
|
6
|
+
enumerable: true,
|
7
|
+
get: function() {
|
8
|
+
return computeOutsideClipPath;
|
9
|
+
}
|
10
|
+
});
|
11
|
+
function drawRectangle(rect) {
|
12
|
+
if (rect.width <= 0 || rect.height <= 0) {
|
13
|
+
return '';
|
14
|
+
}
|
15
|
+
let pathData = '';
|
16
|
+
// Creates a subpath moving in counterclockwise direction to create a hole
|
17
|
+
pathData += `M ${rect.x},${rect.y} `;
|
18
|
+
pathData += `V ${rect.y + rect.height} `; // Down to bottom-left
|
19
|
+
pathData += `H ${rect.x + rect.width} `; // Right to bottom-right
|
20
|
+
pathData += `V ${rect.y} `; // Up to top-right
|
21
|
+
pathData += `H ${rect.x} `; // Left to top-left (closing)
|
22
|
+
pathData += `Z `; // Close path
|
23
|
+
return pathData;
|
24
|
+
}
|
25
|
+
function computeOutsideClipPath(svgWidth, svgHeight, targetRect, containerRect) {
|
26
|
+
let pathData = `M 0,0 H ${svgWidth} V ${svgHeight} H 0 Z `;
|
27
|
+
// For each rectangle, add a subpath that "cuts out" the rectangle
|
28
|
+
// The trick is to draw each rectangle in the counterclockwise direction
|
29
|
+
// which creates a "hole" in the main path
|
30
|
+
pathData += drawRectangle(targetRect);
|
31
|
+
pathData += drawRectangle(containerRect);
|
32
|
+
return pathData;
|
33
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useSafeZoneArea/computeOutsideClipPath.ts"],"sourcesContent":["function drawRectangle(rect: { x: number; y: number; width: number; height: number }): string {\n if (rect.width <= 0 || rect.height <= 0) {\n return '';\n }\n\n let pathData = '';\n\n // Creates a subpath moving in counterclockwise direction to create a hole\n\n pathData += `M ${rect.x},${rect.y} `;\n pathData += `V ${rect.y + rect.height} `; // Down to bottom-left\n pathData += `H ${rect.x + rect.width} `; // Right to bottom-right\n pathData += `V ${rect.y} `; // Up to top-right\n pathData += `H ${rect.x} `; // Left to top-left (closing)\n pathData += `Z `; // Close path\n\n return pathData;\n}\n\n/**\n * Computes a clip path that covers the area outside multiple rectangles.\n *\n * @internal\n */\nexport function computeOutsideClipPath(\n svgWidth: number,\n svgHeight: number,\n targetRect: { x: number; y: number; width: number; height: number },\n containerRect: { x: number; y: number; width: number; height: number },\n) {\n let pathData = `M 0,0 H ${svgWidth} V ${svgHeight} H 0 Z `;\n\n // For each rectangle, add a subpath that \"cuts out\" the rectangle\n // The trick is to draw each rectangle in the counterclockwise direction\n // which creates a \"hole\" in the main path\n\n pathData += drawRectangle(targetRect);\n pathData += drawRectangle(containerRect);\n\n return pathData;\n}\n"],"names":["computeOutsideClipPath","drawRectangle","rect","width","height","pathData","x","y","svgWidth","svgHeight","targetRect","containerRect"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAwBgBA;;;eAAAA;;;AAxBhB,SAASC,cAAcC,IAA6D;IAClF,IAAIA,KAAKC,KAAK,IAAI,KAAKD,KAAKE,MAAM,IAAI,GAAG;QACvC,OAAO;IACT;IAEA,IAAIC,WAAW;IAEf,0EAA0E;IAE1EA,YAAY,CAAC,EAAE,EAAEH,KAAKI,CAAC,CAAC,CAAC,EAAEJ,KAAKK,CAAC,CAAC,CAAC,CAAC;IACpCF,YAAY,CAAC,EAAE,EAAEH,KAAKK,CAAC,GAAGL,KAAKE,MAAM,CAAC,CAAC,CAAC,EAAE,sBAAsB;IAChEC,YAAY,CAAC,EAAE,EAAEH,KAAKI,CAAC,GAAGJ,KAAKC,KAAK,CAAC,CAAC,CAAC,EAAE,wBAAwB;IACjEE,YAAY,CAAC,EAAE,EAAEH,KAAKK,CAAC,CAAC,CAAC,CAAC,EAAE,kBAAkB;IAC9CF,YAAY,CAAC,EAAE,EAAEH,KAAKI,CAAC,CAAC,CAAC,CAAC,EAAE,6BAA6B;IACzDD,YAAY,CAAC,EAAE,CAAC,EAAE,aAAa;IAE/B,OAAOA;AACT;AAOO,SAASL,uBACdQ,QAAgB,EAChBC,SAAiB,EACjBC,UAAmE,EACnEC,aAAsE;IAEtE,IAAIN,WAAW,CAAC,QAAQ,EAAEG,SAAS,GAAG,EAAEC,UAAU,OAAO,CAAC;IAE1D,kEAAkE;IAClE,wEAAwE;IACxE,0CAA0C;IAE1CJ,YAAYJ,cAAcS;IAC1BL,YAAYJ,cAAcU;IAE1B,OAAON;AACT"}
|
@@ -0,0 +1,35 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "createSafeZoneAreaStateStore", {
|
6
|
+
enumerable: true,
|
7
|
+
get: function() {
|
8
|
+
return createSafeZoneAreaStateStore;
|
9
|
+
}
|
10
|
+
});
|
11
|
+
function createSafeZoneAreaStateStore() {
|
12
|
+
let isActive = false;
|
13
|
+
const listeners = [];
|
14
|
+
return {
|
15
|
+
isActive () {
|
16
|
+
return isActive;
|
17
|
+
},
|
18
|
+
toggleActive (newIsActive) {
|
19
|
+
if (isActive === newIsActive) {
|
20
|
+
return;
|
21
|
+
}
|
22
|
+
isActive = newIsActive;
|
23
|
+
listeners.forEach((listener)=>listener(isActive));
|
24
|
+
},
|
25
|
+
subscribe (listener) {
|
26
|
+
listeners.push(listener);
|
27
|
+
return ()=>{
|
28
|
+
const index = listeners.indexOf(listener);
|
29
|
+
if (index > -1) {
|
30
|
+
listeners.splice(index, 1);
|
31
|
+
}
|
32
|
+
};
|
33
|
+
}
|
34
|
+
};
|
35
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useSafeZoneArea/createSafeZoneAreaStateStore.ts"],"sourcesContent":["export function createSafeZoneAreaStateStore() {\n let isActive = false;\n const listeners: ((value: boolean) => void)[] = [];\n\n return {\n isActive() {\n return isActive;\n },\n toggleActive(newIsActive: boolean) {\n if (isActive === newIsActive) {\n return;\n }\n\n isActive = newIsActive;\n listeners.forEach(listener => listener(isActive));\n },\n\n subscribe(listener: (value: boolean) => void) {\n listeners.push(listener);\n\n return () => {\n const index = listeners.indexOf(listener);\n\n if (index > -1) {\n listeners.splice(index, 1);\n }\n };\n },\n };\n}\n"],"names":["createSafeZoneAreaStateStore","isActive","listeners","toggleActive","newIsActive","forEach","listener","subscribe","push","index","indexOf","splice"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAAgBA;;;eAAAA;;;AAAT,SAASA;IACd,IAAIC,WAAW;IACf,MAAMC,YAA0C,EAAE;IAElD,OAAO;QACLD;YACE,OAAOA;QACT;QACAE,cAAaC,WAAoB;YAC/B,IAAIH,aAAaG,aAAa;gBAC5B;YACF;YAEAH,WAAWG;YACXF,UAAUG,OAAO,CAACC,CAAAA,WAAYA,SAASL;QACzC;QAEAM,WAAUD,QAAkC;YAC1CJ,UAAUM,IAAI,CAACF;YAEf,OAAO;gBACL,MAAMG,QAAQP,UAAUQ,OAAO,CAACJ;gBAEhC,IAAIG,QAAQ,CAAC,GAAG;oBACdP,UAAUS,MAAM,CAACF,OAAO;gBAC1B;YACF;QACF;IACF;AACF"}
|
@@ -0,0 +1,62 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
function _export(target, all) {
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
7
|
+
enumerable: true,
|
8
|
+
get: all[name]
|
9
|
+
});
|
10
|
+
}
|
11
|
+
_export(exports, {
|
12
|
+
getMouseAnchor: function() {
|
13
|
+
return getMouseAnchor;
|
14
|
+
},
|
15
|
+
getUnitVector: function() {
|
16
|
+
return getUnitVector;
|
17
|
+
},
|
18
|
+
measureDistance: function() {
|
19
|
+
return measureDistance;
|
20
|
+
}
|
21
|
+
});
|
22
|
+
const OFFSET_DISTANCE = 20;
|
23
|
+
function measureDistance(a, b) {
|
24
|
+
return Math.sqrt((a[0] - b[0]) ** 2 + (a[1] - b[1]) ** 2);
|
25
|
+
}
|
26
|
+
function getUnitVector(a, b) {
|
27
|
+
const distance = measureDistance(a, b);
|
28
|
+
if (distance === 0) {
|
29
|
+
return [
|
30
|
+
0,
|
31
|
+
0
|
32
|
+
];
|
33
|
+
}
|
34
|
+
return [
|
35
|
+
(a[0] - b[0]) / distance,
|
36
|
+
(a[1] - b[1]) / distance
|
37
|
+
];
|
38
|
+
}
|
39
|
+
function getMouseAnchor(topLeftCorner, bottomRightCorner, mouseCoordinates) {
|
40
|
+
const containerCenter = [
|
41
|
+
(topLeftCorner[0] + bottomRightCorner[0]) / 2,
|
42
|
+
(topLeftCorner[1] + bottomRightCorner[1]) / 2
|
43
|
+
];
|
44
|
+
const unitVector = getUnitVector([
|
45
|
+
mouseCoordinates[0],
|
46
|
+
mouseCoordinates[1]
|
47
|
+
], [
|
48
|
+
containerCenter[0],
|
49
|
+
containerCenter[1]
|
50
|
+
]);
|
51
|
+
const distance = measureDistance([
|
52
|
+
containerCenter[0],
|
53
|
+
containerCenter[1]
|
54
|
+
], [
|
55
|
+
mouseCoordinates[0],
|
56
|
+
mouseCoordinates[1]
|
57
|
+
]);
|
58
|
+
return [
|
59
|
+
containerCenter[0] + unitVector[0] * (distance + OFFSET_DISTANCE),
|
60
|
+
containerCenter[1] + unitVector[1] * (distance + OFFSET_DISTANCE)
|
61
|
+
];
|
62
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useSafeZoneArea/getMouseAnchor.ts"],"sourcesContent":["import type { Point } from './types';\n\nconst OFFSET_DISTANCE = 20;\n\n/**\n * Measures the distance between two points in a 2D space.\n */\nexport function measureDistance(a: Point, b: Point) {\n return Math.sqrt((a[0] - b[0]) ** 2 + (a[1] - b[1]) ** 2);\n}\n\n/**\n * Returns a unit vector pointing from point `b` to point `a`.\n * If the distance is zero, returns a zero vector.\n */\nexport function getUnitVector(a: Point, b: Point): Point {\n const distance = measureDistance(a, b);\n\n if (distance === 0) {\n return [0, 0];\n }\n\n return [(a[0] - b[0]) / distance, (a[1] - b[1]) / distance];\n}\n\n/**\n * Calculates the anchor point for a mouse position within a container defined by its top-left and bottom-right corners.\n * The anchor point is calculated as an offset from the center of the container in the direction of the mouse position.\n *\n * @internal\n */\nexport function getMouseAnchor(topLeftCorner: Point, bottomRightCorner: Point, mouseCoordinates: Point): Point {\n const containerCenter: Point = [\n (topLeftCorner[0] + bottomRightCorner[0]) / 2,\n (topLeftCorner[1] + bottomRightCorner[1]) / 2,\n ];\n\n const unitVector = getUnitVector(\n [mouseCoordinates[0], mouseCoordinates[1]],\n [containerCenter[0], containerCenter[1]],\n );\n const distance = measureDistance(\n [containerCenter[0], containerCenter[1]],\n [mouseCoordinates[0], mouseCoordinates[1]],\n );\n\n return [\n containerCenter[0] + unitVector[0] * (distance + OFFSET_DISTANCE),\n containerCenter[1] + unitVector[1] * (distance + OFFSET_DISTANCE),\n ];\n}\n"],"names":["getMouseAnchor","getUnitVector","measureDistance","OFFSET_DISTANCE","a","b","Math","sqrt","distance","topLeftCorner","bottomRightCorner","mouseCoordinates","containerCenter","unitVector"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA+BgBA,cAAAA;eAAAA;;IAhBAC,aAAAA;eAAAA;;IARAC,eAAAA;eAAAA;;;AALhB,MAAMC,kBAAkB;AAKjB,SAASD,gBAAgBE,CAAQ,EAAEC,CAAQ;IAChD,OAAOC,KAAKC,IAAI,CAAC,AAACH,CAAAA,CAAC,CAAC,EAAE,GAAGC,CAAC,CAAC,EAAE,AAAF,KAAO,IAAI,AAACD,CAAAA,CAAC,CAAC,EAAE,GAAGC,CAAC,CAAC,EAAE,AAAF,KAAO;AACzD;AAMO,SAASJ,cAAcG,CAAQ,EAAEC,CAAQ;IAC9C,MAAMG,WAAWN,gBAAgBE,GAAGC;IAEpC,IAAIG,aAAa,GAAG;QAClB,OAAO;YAAC;YAAG;SAAE;IACf;IAEA,OAAO;QAAEJ,CAAAA,CAAC,CAAC,EAAE,GAAGC,CAAC,CAAC,EAAE,AAAF,IAAMG;QAAWJ,CAAAA,CAAC,CAAC,EAAE,GAAGC,CAAC,CAAC,EAAE,AAAF,IAAMG;KAAS;AAC7D;AAQO,SAASR,eAAeS,aAAoB,EAAEC,iBAAwB,EAAEC,gBAAuB;IACpG,MAAMC,kBAAyB;QAC5BH,CAAAA,aAAa,CAAC,EAAE,GAAGC,iBAAiB,CAAC,EAAE,AAAF,IAAM;QAC3CD,CAAAA,aAAa,CAAC,EAAE,GAAGC,iBAAiB,CAAC,EAAE,AAAF,IAAM;KAC7C;IAED,MAAMG,aAAaZ,cACjB;QAACU,gBAAgB,CAAC,EAAE;QAAEA,gBAAgB,CAAC,EAAE;KAAC,EAC1C;QAACC,eAAe,CAAC,EAAE;QAAEA,eAAe,CAAC,EAAE;KAAC;IAE1C,MAAMJ,WAAWN,gBACf;QAACU,eAAe,CAAC,EAAE;QAAEA,eAAe,CAAC,EAAE;KAAC,EACxC;QAACD,gBAAgB,CAAC,EAAE;QAAEA,gBAAgB,CAAC,EAAE;KAAC;IAG5C,OAAO;QACLC,eAAe,CAAC,EAAE,GAAGC,UAAU,CAAC,EAAE,GAAIL,CAAAA,WAAWL,eAAAA;QACjDS,eAAe,CAAC,EAAE,GAAGC,UAAU,CAAC,EAAE,GAAIL,CAAAA,WAAWL,eAAAA;KAClD;AACH"}
|
@@ -0,0 +1,34 @@
|
|
1
|
+
/**
|
2
|
+
* Calculates the corners of a rectangle based on its DOMRect and an offset.
|
3
|
+
*
|
4
|
+
* @internal
|
5
|
+
*/ "use strict";
|
6
|
+
Object.defineProperty(exports, "__esModule", {
|
7
|
+
value: true
|
8
|
+
});
|
9
|
+
Object.defineProperty(exports, "getRectCorners", {
|
10
|
+
enumerable: true,
|
11
|
+
get: function() {
|
12
|
+
return getRectCorners;
|
13
|
+
}
|
14
|
+
});
|
15
|
+
function getRectCorners(rect, offset) {
|
16
|
+
return {
|
17
|
+
topLeft: [
|
18
|
+
rect.left - offset[0],
|
19
|
+
rect.top - offset[1]
|
20
|
+
],
|
21
|
+
topRight: [
|
22
|
+
rect.right - offset[0],
|
23
|
+
rect.top - offset[1]
|
24
|
+
],
|
25
|
+
bottomRight: [
|
26
|
+
rect.right - offset[0],
|
27
|
+
rect.bottom - offset[1]
|
28
|
+
],
|
29
|
+
bottomLeft: [
|
30
|
+
rect.left - offset[0],
|
31
|
+
rect.bottom - offset[1]
|
32
|
+
]
|
33
|
+
};
|
34
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useSafeZoneArea/getRectCorners.ts"],"sourcesContent":["import type { Point } from './types';\n\n/**\n * Calculates the corners of a rectangle based on its DOMRect and an offset.\n *\n * @internal\n */\nexport function getRectCorners(\n rect: DOMRect,\n offset: Point,\n): Record<'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft', Point> {\n return {\n topLeft: [rect.left - offset[0], rect.top - offset[1]],\n topRight: [rect.right - offset[0], rect.top - offset[1]],\n bottomRight: [rect.right - offset[0], rect.bottom - offset[1]],\n bottomLeft: [rect.left - offset[0], rect.bottom - offset[1]],\n };\n}\n"],"names":["getRectCorners","rect","offset","topLeft","left","top","topRight","right","bottomRight","bottom","bottomLeft"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA;;;;CAIC;;;;+BACeA;;;eAAAA;;;AAAT,SAASA,eACdC,IAAa,EACbC,MAAa;IAEb,OAAO;QACLC,SAAS;YAACF,KAAKG,IAAI,GAAGF,MAAM,CAAC,EAAE;YAAED,KAAKI,GAAG,GAAGH,MAAM,CAAC,EAAE;SAAC;QACtDI,UAAU;YAACL,KAAKM,KAAK,GAAGL,MAAM,CAAC,EAAE;YAAED,KAAKI,GAAG,GAAGH,MAAM,CAAC,EAAE;SAAC;QACxDM,aAAa;YAACP,KAAKM,KAAK,GAAGL,MAAM,CAAC,EAAE;YAAED,KAAKQ,MAAM,GAAGP,MAAM,CAAC,EAAE;SAAC;QAC9DQ,YAAY;YAACT,KAAKG,IAAI,GAAGF,MAAM,CAAC,EAAE;YAAED,KAAKQ,MAAM,GAAGP,MAAM,CAAC,EAAE;SAAC;IAC9D;AACF"}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
/**
|
2
|
+
* Calculates the corners of a rectangle based on its DOMRect and an offset.
|
3
|
+
*
|
4
|
+
* @internal
|
5
|
+
*/ "use strict";
|
6
|
+
Object.defineProperty(exports, "__esModule", {
|
7
|
+
value: true
|
8
|
+
});
|
9
|
+
Object.defineProperty(exports, "pointsToSvgPath", {
|
10
|
+
enumerable: true,
|
11
|
+
get: function() {
|
12
|
+
return pointsToSvgPath;
|
13
|
+
}
|
14
|
+
});
|
15
|
+
function pointsToSvgPath(points) {
|
16
|
+
return `M ${points} z`;
|
17
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useSafeZoneArea/pointsToSvgPath.ts"],"sourcesContent":["import type { Point } from './types';\n\n/**\n * Calculates the corners of a rectangle based on its DOMRect and an offset.\n *\n * @internal\n */\nexport function pointsToSvgPath(points: Point[]) {\n return `M ${points} z`;\n}\n"],"names":["pointsToSvgPath","points"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAEA;;;;CAIC;;;;+BACeA;;;eAAAA;;;AAAT,SAASA,gBAAgBC,MAAe;IAC7C,OAAO,CAAC,EAAE,EAAEA,OAAO,EAAE,CAAC;AACxB"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useSafeZoneArea/types.ts"],"sourcesContent":["/**\n * A type representing a point in a 2D space as an array of two numbers (x & y coordinates).\n *\n * @internal\n */\nexport type Point = [number, number];\n"],"names":[],"rangeMappings":";;;;","mappings":"AAAA;;;;CAIC"}
|
@@ -12,10 +12,10 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
|
|
12
12
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
13
13
|
const _reactutilities = require("@fluentui/react-utilities");
|
14
14
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
15
|
+
const _createSafeZoneAreaStateStore = require("./createSafeZoneAreaStateStore");
|
15
16
|
const _SafeZoneArea = require("./SafeZoneArea");
|
16
|
-
const _utils = require("./utils");
|
17
17
|
function useSafeZoneArea({ debug = false, disabled = false, onSafeZoneEnter, onSafeZoneMove, onSafeZoneLeave, onSafeZoneTimeout, timeout = 1500 } = {}) {
|
18
|
-
const [stateStore] = _react.useState(
|
18
|
+
const [stateStore] = _react.useState(_createSafeZoneAreaStateStore.createSafeZoneAreaStateStore);
|
19
19
|
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
|
20
20
|
const safeZoneAreaRef = _react.useRef(null);
|
21
21
|
const containerRef = _react.useRef(null);
|
@@ -133,9 +133,11 @@ function useSafeZoneArea({ debug = false, disabled = false, onSafeZoneEnter, onS
|
|
133
133
|
if (containerEl && targetEl) {
|
134
134
|
var _safeZoneAreaRef_current;
|
135
135
|
(_safeZoneAreaRef_current = safeZoneAreaRef.current) === null || _safeZoneAreaRef_current === void 0 ? void 0 : _safeZoneAreaRef_current.updateSVG({
|
136
|
-
containerPlacementSide: (0, _utils.parseFloatingUIPlacement)(containerEl.dataset.popperPlacement).side,
|
137
136
|
containerRect: containerEl.getBoundingClientRect(),
|
138
|
-
mouseCoordinates:
|
137
|
+
mouseCoordinates: [
|
138
|
+
mouseCoordinatesRef.current.x,
|
139
|
+
mouseCoordinatesRef.current.y
|
140
|
+
],
|
139
141
|
targetRect: targetEl.getBoundingClientRect()
|
140
142
|
});
|
141
143
|
}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useSafeZoneArea/useSafeZoneArea.tsx"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { createSafeZoneAreaStateStore } from './createSafeZoneAreaStateStore';\nimport { type SafeZoneAreaImperativeHandle, SafeZoneArea } from './SafeZoneArea';\n\nexport type UseSafeZoneOptions = {\n /** Enables debug mode: makes drawn shapes visible. */\n debug?: boolean;\n\n /** Disables the safe zone area. */\n disabled?: boolean;\n\n /** The time in milliseconds to wait before clearing the safe zone. */\n timeout?: number;\n\n /** Called when the mouse enters the safe zone. */\n onSafeZoneEnter?: (e: React.MouseEvent) => void;\n\n /** Called when the mouse moves within the safe zone. */\n onSafeZoneMove?: (e: React.MouseEvent) => void;\n\n /** Called when the mouse leaves the safe zone. */\n onSafeZoneLeave?: (e: React.MouseEvent) => void;\n\n /** Called when the safe zone times out, even if a cursor is still over a safe zone. */\n onSafeZoneTimeout?: () => void;\n};\n\nexport function useSafeZoneArea({\n debug = false,\n disabled = false,\n\n onSafeZoneEnter,\n onSafeZoneMove,\n onSafeZoneLeave,\n onSafeZoneTimeout,\n\n timeout = 1500,\n}: UseSafeZoneOptions = {}) {\n const [stateStore] = React.useState(createSafeZoneAreaStateStore);\n const { targetDocument } = useFluent_unstable();\n\n const safeZoneAreaRef = React.useRef<SafeZoneAreaImperativeHandle>(null);\n const containerRef = React.useRef<HTMLElement>(null);\n const targetRef = React.useRef<HTMLElement>(null);\n\n const timeoutIdRef = React.useRef<number | null>(null);\n const mouseMoveIdRef = React.useRef<number | null>(null);\n\n const mouseCoordinatesRef = React.useRef<{ x: number; y: number }>({ x: 0, y: 0 });\n\n const containerListenerRef = React.useMemo(() => {\n if (disabled) {\n return () => {\n // do nothing\n };\n }\n\n let containerEl: HTMLElement | null = null;\n\n function onContainerMouseEnter() {\n const targetWindow = targetDocument?.defaultView;\n\n if (!targetWindow) {\n return;\n }\n\n if (timeoutIdRef.current) {\n targetWindow.clearTimeout(timeoutIdRef.current);\n timeoutIdRef.current = null;\n }\n\n stateStore.toggleActive(false);\n }\n\n return (el: HTMLElement | null) => {\n if (el === null) {\n containerEl?.removeEventListener('mouseenter', onContainerMouseEnter);\n }\n\n containerEl = el;\n el?.addEventListener('mouseenter', onContainerMouseEnter);\n };\n }, [disabled, stateStore, targetDocument]);\n\n const targetListenerRef = React.useMemo(() => {\n if (disabled) {\n return () => {\n // do nothing\n };\n }\n\n let targetEl: HTMLElement | null = null;\n\n function onTargetMouseMove(e: MouseEvent) {\n mouseCoordinatesRef.current = { x: e.clientX, y: e.clientY };\n\n if (timeoutIdRef.current) {\n targetDocument?.defaultView?.clearTimeout(timeoutIdRef.current);\n timeoutIdRef.current = null;\n }\n\n if (!stateStore.isActive()) {\n stateStore.toggleActive(true);\n }\n }\n\n return (el: HTMLElement | null) => {\n if (el === null) {\n const targetWindow = targetDocument?.defaultView;\n\n if (targetWindow) {\n if (mouseMoveIdRef.current) {\n targetWindow.cancelAnimationFrame(mouseMoveIdRef.current);\n mouseMoveIdRef.current = null;\n }\n\n if (timeoutIdRef.current) {\n targetWindow.clearTimeout(timeoutIdRef.current);\n timeoutIdRef.current = null;\n }\n }\n\n targetEl?.removeEventListener('mousemove', onTargetMouseMove);\n }\n\n targetEl = el;\n el?.addEventListener('mousemove', onTargetMouseMove);\n };\n }, [disabled, stateStore, targetDocument]);\n\n const onSvgMouseEnter = useEventCallback((e: React.MouseEvent) => {\n onSafeZoneEnter?.(e);\n\n const targetWindow = targetDocument?.defaultView;\n\n if (!targetWindow) {\n return;\n }\n\n if (timeoutIdRef.current) {\n targetWindow.clearTimeout(timeoutIdRef.current);\n timeoutIdRef.current = null;\n }\n\n // React 17 still uses pooled synthetic events\n e.persist();\n\n timeoutIdRef.current = targetWindow.setTimeout(() => {\n stateStore.toggleActive(false);\n onSafeZoneTimeout?.();\n }, timeout);\n });\n\n const onSvgMouseMove = useEventCallback((e: React.MouseEvent) => {\n onSafeZoneMove?.(e);\n });\n\n const onSvgMouseLeave = useEventCallback((e: React.MouseEvent) => {\n onSafeZoneLeave?.(e);\n });\n\n React.useEffect(() => {\n return stateStore.subscribe(isActive => {\n if (isActive) {\n function updateSVGs() {\n const containerEl = containerRef.current;\n const targetEl = targetRef.current;\n const targetWindow = targetDocument?.defaultView;\n\n if (containerEl && targetEl) {\n safeZoneAreaRef.current?.updateSVG({\n containerRect: containerEl.getBoundingClientRect(),\n mouseCoordinates: [mouseCoordinatesRef.current.x, mouseCoordinatesRef.current.y],\n targetRect: targetEl.getBoundingClientRect(),\n });\n }\n\n if (targetWindow) {\n mouseMoveIdRef.current = targetWindow.requestAnimationFrame(updateSVGs);\n }\n }\n\n updateSVGs();\n return;\n }\n\n if (mouseMoveIdRef.current) {\n targetDocument?.defaultView?.cancelAnimationFrame(mouseMoveIdRef.current);\n mouseMoveIdRef.current = null;\n }\n });\n }, [stateStore, targetDocument]);\n\n return {\n containerRef: useMergedRefs(containerRef, containerListenerRef),\n targetRef: useMergedRefs(targetRef, targetListenerRef),\n\n elementToRender: React.useMemo(\n () =>\n disabled ? null : (\n <SafeZoneArea\n debug={debug}\n onMouseEnter={onSvgMouseEnter}\n onMouseMove={onSvgMouseMove}\n onMouseLeave={onSvgMouseLeave}\n imperativeRef={safeZoneAreaRef}\n stateStore={stateStore}\n />\n ),\n [disabled, debug, onSvgMouseEnter, onSvgMouseMove, onSvgMouseLeave, stateStore],\n ),\n };\n}\n"],"names":["useSafeZoneArea","debug","disabled","onSafeZoneEnter","onSafeZoneMove","onSafeZoneLeave","onSafeZoneTimeout","timeout","stateStore","React","useState","createSafeZoneAreaStateStore","targetDocument","useFluent_unstable","safeZoneAreaRef","useRef","containerRef","targetRef","timeoutIdRef","mouseMoveIdRef","mouseCoordinatesRef","x","y","containerListenerRef","useMemo","containerEl","onContainerMouseEnter","targetWindow","defaultView","current","clearTimeout","toggleActive","el","removeEventListener","addEventListener","targetListenerRef","targetEl","onTargetMouseMove","e","clientX","clientY","isActive","cancelAnimationFrame","onSvgMouseEnter","useEventCallback","persist","setTimeout","onSvgMouseMove","onSvgMouseLeave","useEffect","subscribe","updateSVGs","updateSVG","containerRect","getBoundingClientRect","mouseCoordinates","targetRect","requestAnimationFrame","useMergedRefs","elementToRender","createElement","SafeZoneArea","onMouseEnter","onMouseMove","onMouseLeave","imperativeRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/lib-commonjs/index.js
CHANGED
@@ -46,5 +46,5 @@ const _createSlideStyles = require("./createSlideStyles");
|
|
46
46
|
const _PositioningConfigurationContext = require("./PositioningConfigurationContext");
|
47
47
|
const _usePositioning = require("./usePositioning");
|
48
48
|
const _usePositioningMouseTarget = require("./usePositioningMouseTarget");
|
49
|
-
const _useSafeZoneArea = require("./useSafeZoneArea");
|
49
|
+
const _useSafeZoneArea = require("./hooks/useSafeZoneArea/useSafeZoneArea");
|
50
50
|
const _index = require("./utils/index");
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\nexport { createSlideStyles } from './createSlideStyles';\nexport type { CreateArrowStylesOptions } from './createArrowStyles';\n\nexport { PositioningConfigurationProvider } from './PositioningConfigurationContext';\n\nexport { usePositioning } from './usePositioning';\nexport { usePositioningMouseTarget } from './usePositioningMouseTarget';\nexport { useSafeZoneArea } from './useSafeZoneArea';\nexport type {
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\nexport { createSlideStyles } from './createSlideStyles';\nexport type { CreateArrowStylesOptions } from './createArrowStyles';\n\nexport { PositioningConfigurationProvider } from './PositioningConfigurationContext';\n\nexport { usePositioning } from './usePositioning';\nexport { usePositioningMouseTarget } from './usePositioningMouseTarget';\nexport { useSafeZoneArea } from './hooks/useSafeZoneArea/useSafeZoneArea';\nexport type { UseSafeZoneOptions } from './hooks/useSafeZoneArea/useSafeZoneArea';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\n\nexport type {\n Alignment,\n AutoSize,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n Boundary,\n Offset,\n OffsetFunction,\n OffsetFunctionParam,\n OffsetObject,\n OffsetShorthand,\n Position,\n PositioningBoundary,\n PositioningImperativeRef,\n PositioningProps,\n PositioningRect,\n PositioningShorthand,\n PositioningShorthandValue,\n PositioningVirtualElement,\n SetVirtualMouseTarget,\n PositioningConfigurationFn,\n PositioningConfigurationFnOptions,\n} from './types';\n"],"names":["PositioningConfigurationProvider","createArrowHeightStyles","createArrowStyles","createSlideStyles","createVirtualElementFromClick","mergeArrowOffset","resolvePositioningShorthand","usePositioning","usePositioningMouseTarget","useSafeZoneArea"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKSA,gCAAgC;eAAhCA,iEAAgC;;IAJhCC,uBAAuB;eAAvBA,0CAAuB;;IAAEC,iBAAiB;eAAjBA,oCAAiB;;IAC1CC,iBAAiB;eAAjBA,oCAAiB;;IAFjBC,6BAA6B;eAA7BA,4DAA6B;;IAWAC,gBAAgB;eAAhBA,uBAAgB;;IAA7CC,2BAA2B;eAA3BA,kCAA2B;;IAJ3BC,cAAc;eAAdA,8BAAc;;IACdC,yBAAyB;eAAzBA,oDAAyB;;IACzBC,eAAe;eAAfA,gCAAe;;;+CATsB;mCACa;mCACzB;iDAGe;gCAElB;2CACW;iCACV;uBAE8B"}
|