@bemedev/mind-flow 1.1.0 → 1.3.0
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/README.md +3 -0
- package/lib/helpers/clamp.d.ts +9 -0
- package/lib/helpers/clamp.d.ts.map +1 -1
- package/lib/index.cjs.js +1 -1
- package/lib/index.es.js +60 -27
- package/lib/output.css +1 -1
- package/lib/server.cjs.js +79 -18
- package/lib/server.es.js +79 -18
- package/lib/services/main.machine.d.ts.map +1 -1
- package/lib/ui/components/EdgeComponent.d.ts.map +1 -1
- package/lib/ui/components/FlowChart.context.d.ts.map +1 -1
- package/lib/ui/components/FlowChart.d.ts.map +1 -1
- package/lib/ui/components/NodeComponent.d.ts.map +1 -1
- package/lib/ui/globals/directives/mouseOut.d.ts +18 -9
- package/lib/ui/globals/directives/mouseOut.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/helpers/clamp.ts +9 -0
- package/src/services/main.machine.ts +2 -0
- package/src/ui/components/EdgeComponent.tsx +0 -7
- package/src/ui/components/FlowChart.tsx +34 -12
- package/src/ui/components/NodeComponent.tsx +22 -12
- package/src/ui/globals/directives/mouseOut.test.ts +127 -0
- package/src/ui/globals/directives/mouseOut.ts +51 -12
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlowChart.context.d.ts","sourceRoot":"","sources":["../../../src/ui/components/FlowChart.context.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,gCAAgC,CAAC;AAEvE;;;;;GAKG;AACH,eAAO,MAAO,QAAQ,sCAAE,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"FlowChart.context.d.ts","sourceRoot":"","sources":["../../../src/ui/components/FlowChart.context.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,gCAAgC,CAAC;AAEvE;;;;;GAKG;AACH,eAAO,MAAO,QAAQ,sCAAE,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aA0HoW,CAAC;;;;mBAAmE,CAAC;;;;oBAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAA1I,CAAC;;;;uBAAmE,CAAC;;;;wBAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAA1I,CAAC;;;;uBAAmE,CAAC;;;;wBAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAA1I,CAAC;;;;uBAAmE,CAAC;;;;wBAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA1I,CAAC;;;;2BAAmE,CAAC;;;;4BAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA1I,CAAC;;;;2BAAmE,CAAC;;;;4BAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA1I,CAAC;;;;2BAAmE,CAAC;;;;4BAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA1I,CAAC;;;;2BAAmE,CAAC;;;;4BAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA1I,CAAC;;;;2BAAmE,CAAC;;;;4BAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA1I,CAAC;;;;2BAAmE,CAAC;;;;4BAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA1I,CAAC;;;;2BAAmE,CAAC;;;;4BAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA1I,CAAC;;;;2BAAmE,CAAC;;;;4BAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA1I,CAAC;;;;2BAAmE,CAAC;;;;4BAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA1I,CAAC;;;;2BAAmE,CAAC;;;;4BAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA1I,CAAC;;;;2BAAmE,CAAC;;;;4BAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA1I,CAAC;;;;2BAAmE,CAAC;;;;4BAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA1I,CAAC;;;;2BAAmE,CAAC;;;;4BAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA1I,CAAC;;;;2BAAmE,CAAC;;;;4BAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA1I,CAAC;;;;2BAAmE,CAAC;;;;4BAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA1I,CAAC;;;;2BAAmE,CAAC;;;;4BAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA1I,CAAC;;;;2BAAmE,CAAC;;;;4BAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA1I,CAAC;;;;2BAAmE,CAAC;;;;4BAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA1I,CAAC;;;;2BAAmE,CAAC;;;;4BAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA1I,CAAC;;;;2BAAmE,CAAC;;;;4BAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA1I,CAAC;;;;2BAAmE,CAAC;;;;4BAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA1I,CAAC;;;;2BAAmE,CAAC;;;;4BAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA1I,CAAC;;;;2BAAmE,CAAC;;;;4BAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA1I,CAAC;;;;2BAAmE,CAAC;;;;4BAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA1I,CAAC;;;;2BAAmE,CAAC;;;;4BAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA1I,CAAC;;;;2BAAmE,CAAC;;;;4BAAoE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAD5gB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlowChart.d.ts","sourceRoot":"","sources":["../../../src/ui/components/FlowChart.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"FlowChart.d.ts","sourceRoot":"","sources":["../../../src/ui/components/FlowChart.tsx"],"names":[],"mappings":"AACA,OAAO,EAAgB,KAAK,GAAG,EAAsB,MAAM,UAAU,CAAC;AAGtE,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAG1E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAGnD,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;AAIpC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,QAAQ,GAAG,QAAQ,EACrD,OAAO,SAAS,CAAC,CAAC,CAAC,KAClB,GAAG,CAAC,OA6DN,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NodeComponent.d.ts","sourceRoot":"","sources":["../../../src/ui/components/NodeComponent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAO,KAAK,GAAG,EAAQ,MAAM,UAAU,CAAC;AAQ/D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAK/D,uEAAuE;AACvE,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,IAAI;IAC9D,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,iEAAiE;IACjE,QAAQ,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,QAAQ,GAAG,QAAQ,EACzD,OAAO,kBAAkB,CAAC,CAAC,CAAC,KAC3B,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"NodeComponent.d.ts","sourceRoot":"","sources":["../../../src/ui/components/NodeComponent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAO,KAAK,GAAG,EAAQ,MAAM,UAAU,CAAC;AAQ/D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAK/D,uEAAuE;AACvE,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,IAAI;IAC9D,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,iEAAiE;IACjE,QAAQ,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,QAAQ,GAAG,QAAQ,EACzD,OAAO,kBAAkB,CAAC,CAAC,CAAC,KAC3B,GAAG,CAAC,OA+NN,CAAC"}
|
|
@@ -1,18 +1,26 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Callback function type invoked when the mouse leaves
|
|
2
|
+
* Callback function type invoked when the mouse leaves or focus is lost from the
|
|
3
|
+
* bound element.
|
|
3
4
|
*
|
|
4
|
-
* @param event - Optional mouse event that triggered the leave.
|
|
5
|
+
* @param event - Optional mouse or focus event that triggered the leave.
|
|
5
6
|
*/
|
|
6
|
-
export type MouseOutCallback = (event?: MouseEvent) => void;
|
|
7
|
+
export type MouseOutCallback = (event?: MouseEvent | FocusEvent) => void;
|
|
7
8
|
/** Configuration options for the {@linkcode mouseOut} directive. */
|
|
8
9
|
export type MouseOutOptions = {
|
|
9
|
-
/**
|
|
10
|
+
/**
|
|
11
|
+
* Callback function to trigger after the timer elapses of type
|
|
12
|
+
* {@linkcode MouseOutCallback}.
|
|
13
|
+
*/
|
|
10
14
|
callback?: MouseOutCallback;
|
|
11
|
-
/**
|
|
15
|
+
/**
|
|
16
|
+
* Alternative callback property name for triggering after the timer elapses of
|
|
17
|
+
* type {@linkcode MouseOutCallback}.
|
|
18
|
+
*/
|
|
12
19
|
onMouseOut?: MouseOutCallback;
|
|
13
20
|
/**
|
|
14
|
-
* Delay in milliseconds before triggering the callback after the mouse leaves
|
|
15
|
-
* the cursor re-enters the element
|
|
21
|
+
* Delay in milliseconds before triggering the callback after the mouse leaves or
|
|
22
|
+
* focus is lost. If the cursor re-enters the element or focus is regained before
|
|
23
|
+
* this duration, the timer is reset.
|
|
16
24
|
*
|
|
17
25
|
* @defaultValue 0
|
|
18
26
|
*/
|
|
@@ -22,8 +30,9 @@ export type MouseOutOptions = {
|
|
|
22
30
|
export type MouseOutParam = MouseOutCallback | [callback: MouseOutCallback, delay?: number] | MouseOutOptions;
|
|
23
31
|
/**
|
|
24
32
|
* Solid custom directive that triggers a callback when the mouse leaves the bound
|
|
25
|
-
* element after a specified timer duration. If the user
|
|
26
|
-
* before the timer expires, the timer is
|
|
33
|
+
* element and focus is not inside it, after a specified timer duration. If the user
|
|
34
|
+
* re-enters the component or gains focus before the timer expires, the timer is
|
|
35
|
+
* reset/cancelled.
|
|
27
36
|
*
|
|
28
37
|
* @param el - The bound DOM element.
|
|
29
38
|
* @param accessor - Accessor returning a callback, tuple `[callback, delay]`, or
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mouseOut.d.ts","sourceRoot":"","sources":["../../../../src/ui/globals/directives/mouseOut.ts"],"names":[],"mappings":"AAEA
|
|
1
|
+
{"version":3,"file":"mouseOut.d.ts","sourceRoot":"","sources":["../../../../src/ui/globals/directives/mouseOut.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,CAAC;AAEzE,oEAAoE;AACpE,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAE5B;;;OAGG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAE9B;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wEAAwE;AACxE,MAAM,MAAM,aAAa,GACrB,gBAAgB,GAChB,CAAC,QAAQ,EAAE,gBAAgB,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,GAC5C,eAAe,CAAC;AAEpB;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ,GACnB,IAAI,WAAW,GAAG,OAAO,EACzB,UAAU,MAAM,aAAa,SAoF9B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bemedev/mind-flow",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"description": "Flow Chart UI library for Solid.js applications",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"diagram",
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
"oxlint": "^1.80.0",
|
|
82
82
|
"pretty-quick": "^4.2.2",
|
|
83
83
|
"rimraf": "^6.1.3",
|
|
84
|
-
"rolldown": "^1.2.
|
|
84
|
+
"rolldown": "^1.2.6",
|
|
85
85
|
"rollup-preset-solid": "^3.0.0",
|
|
86
86
|
"size-limit": "^13.0.3",
|
|
87
87
|
"solid-js": "^1.9.15",
|
package/src/helpers/clamp.ts
CHANGED
|
@@ -1,3 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Restricts a number to be within the specified minimum and maximum bounds.
|
|
3
|
+
*
|
|
4
|
+
* @param value - The numerical value to clamp.
|
|
5
|
+
* @param min - The lower boundary limit.
|
|
6
|
+
* @param max - The upper boundary limit.
|
|
7
|
+
*
|
|
8
|
+
* @returns The clamped numerical value between `min` and `max`.
|
|
9
|
+
*/
|
|
1
10
|
export const clamp = (value: number, min: number, max: number) => {
|
|
2
11
|
return Math.min(Math.max(value, min), max);
|
|
3
12
|
};
|
|
@@ -140,6 +140,7 @@ export const machine = createMachine(
|
|
|
140
140
|
})),
|
|
141
141
|
|
|
142
142
|
sync: true,
|
|
143
|
+
|
|
143
144
|
pContext: type(({ union, optional, record, use, custom }) => ({
|
|
144
145
|
generatedId: union('string', 'null'),
|
|
145
146
|
previousZoom: optional('number'),
|
|
@@ -554,6 +555,7 @@ export const machine = createMachine(
|
|
|
554
555
|
position,
|
|
555
556
|
DEFAULT_SIZE,
|
|
556
557
|
);
|
|
558
|
+
|
|
557
559
|
return nodes;
|
|
558
560
|
},
|
|
559
561
|
}),
|
|
@@ -14,13 +14,6 @@ type Props = {
|
|
|
14
14
|
isNew?: boolean;
|
|
15
15
|
};
|
|
16
16
|
|
|
17
|
-
/**
|
|
18
|
-
* Computes bezier curve control point offset based on horizontal distance.
|
|
19
|
-
*
|
|
20
|
-
* @param value - Absolute horizontal delta between start and end points.
|
|
21
|
-
*
|
|
22
|
-
* @returns Offset distance in pixels for bezier curvature.
|
|
23
|
-
*/
|
|
24
17
|
/**
|
|
25
18
|
* Computes bezier curve control point offset based on horizontal distance.
|
|
26
19
|
*
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { createState } from '@bemedev/app-solidjs';
|
|
2
|
-
import { type JSX, onCleanup, onMount } from 'solid-js';
|
|
2
|
+
import { createEffect, type JSX, onCleanup, onMount } from 'solid-js';
|
|
3
3
|
|
|
4
4
|
import { DEFAULT_NODES } from '#services/main.machine.data';
|
|
5
5
|
import type { NodeData, NodeProps } from '#services/main.machine.typings';
|
|
@@ -47,18 +47,40 @@ export const FlowChart = <D extends NodeData = NodeData>(
|
|
|
47
47
|
});
|
|
48
48
|
});
|
|
49
49
|
|
|
50
|
+
createEffect(() => {
|
|
51
|
+
if (!hasNewEdge()) return;
|
|
52
|
+
|
|
53
|
+
const handlePointerMove = (e: MouseEvent | PointerEvent) => {
|
|
54
|
+
service.send({
|
|
55
|
+
type: 'MOVE_NEW_EDGE',
|
|
56
|
+
payload: { x: e.clientX, y: e.clientY },
|
|
57
|
+
});
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
const handlePointerUp = (e: MouseEvent | PointerEvent) => {
|
|
61
|
+
const from = service.state.context.newEdge?.from;
|
|
62
|
+
if (from) {
|
|
63
|
+
const el = document.elementFromPoint(e.clientX, e.clientY);
|
|
64
|
+
const inputHandle = el?.closest('[data-handle-type="input"]');
|
|
65
|
+
const targetId = inputHandle?.getAttribute('data-node-id');
|
|
66
|
+
if (targetId && targetId !== from) {
|
|
67
|
+
service.send({ type: 'ADD_EDGE', payload: { from, to: targetId } });
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
service.send('CLEAR_NEW_EDGE');
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
window.addEventListener('pointermove', handlePointerMove);
|
|
74
|
+
window.addEventListener('pointerup', handlePointerUp);
|
|
75
|
+
|
|
76
|
+
onCleanup(() => {
|
|
77
|
+
window.removeEventListener('pointermove', handlePointerMove);
|
|
78
|
+
window.removeEventListener('pointerup', handlePointerUp);
|
|
79
|
+
});
|
|
80
|
+
});
|
|
81
|
+
|
|
50
82
|
return (
|
|
51
|
-
<div
|
|
52
|
-
class='relative h-full w-full'
|
|
53
|
-
onMouseUp={() => service.send('CLEAR_NEW_EDGE')}
|
|
54
|
-
onMouseMove={({ clientX, clientY }) => {
|
|
55
|
-
if (hasNewEdge())
|
|
56
|
-
service.send({
|
|
57
|
-
type: 'MOVE_NEW_EDGE',
|
|
58
|
-
payload: { x: clientX, y: clientY },
|
|
59
|
-
});
|
|
60
|
-
}}
|
|
61
|
-
>
|
|
83
|
+
<div class='relative h-full w-full'>
|
|
62
84
|
<div
|
|
63
85
|
class='h-full w-full'
|
|
64
86
|
style={{ cursor: hasNewEdge() ? 'inherit' : 'crosshair' }}
|
|
@@ -78,7 +78,7 @@ export const NodeComponent = <D extends NodeData = NodeData>(
|
|
|
78
78
|
}}
|
|
79
79
|
|
|
80
80
|
style={{ top: `${node().y}px`, left: `${node().x}px` }}
|
|
81
|
-
class='min-w-48'
|
|
81
|
+
class='group min-w-48'
|
|
82
82
|
use:draggable={{ skipTransform: true }}
|
|
83
83
|
id={props.id}
|
|
84
84
|
|
|
@@ -200,11 +200,18 @@ export const NodeComponent = <D extends NodeData = NodeData>(
|
|
|
200
200
|
|
|
201
201
|
<div
|
|
202
202
|
id='inputs'
|
|
203
|
+
data-handle-type='input'
|
|
204
|
+
data-node-id={props.id}
|
|
203
205
|
class='pointer-events-none absolute top-0 z-10 flex cursor-default flex-col'
|
|
204
206
|
style={{ left: `-${HANDLE_CONTAINER_OFFSET_X}px` }}
|
|
205
207
|
>
|
|
206
208
|
<div
|
|
207
|
-
|
|
209
|
+
data-handle-type='input'
|
|
210
|
+
data-node-id={props.id}
|
|
211
|
+
onMouseDown={event => event.stopPropagation()}
|
|
212
|
+
onPointerDown={e => e.stopPropagation()}
|
|
213
|
+
|
|
214
|
+
class='cursor-default rounded-full bg-[#e38b29] shadow-md transition-transform'
|
|
208
215
|
|
|
209
216
|
style={{
|
|
210
217
|
width: `${HANDLE_SIZE}px`,
|
|
@@ -213,40 +220,43 @@ export const NodeComponent = <D extends NodeData = NodeData>(
|
|
|
213
220
|
'pointer-events': 'all',
|
|
214
221
|
}}
|
|
215
222
|
|
|
216
|
-
onMouseDown={event => {
|
|
217
|
-
event.stopPropagation();
|
|
218
|
-
}}
|
|
219
|
-
|
|
220
223
|
onMouseUp={event => {
|
|
221
224
|
event.stopPropagation();
|
|
222
225
|
const from = newEdge()?.from;
|
|
223
226
|
|
|
224
|
-
if (from) {
|
|
227
|
+
if (from && from !== props.id) {
|
|
225
228
|
service.send({ type: 'ADD_EDGE', payload: { from, to: props.id } });
|
|
226
|
-
}
|
|
229
|
+
}
|
|
230
|
+
service.send('CLEAR_NEW_EDGE');
|
|
227
231
|
}}
|
|
228
232
|
></div>
|
|
229
233
|
</div>
|
|
230
234
|
<div
|
|
231
235
|
id='outputs'
|
|
232
|
-
|
|
236
|
+
data-handle-type='output'
|
|
237
|
+
data-node-id={props.id}
|
|
233
238
|
style={{ right: `-${HANDLE_CONTAINER_OFFSET_X}px` }}
|
|
239
|
+
|
|
240
|
+
class='pointer-events-none absolute top-0 z-10 flex flex-col'
|
|
234
241
|
>
|
|
235
242
|
<div
|
|
236
|
-
|
|
237
|
-
|
|
243
|
+
data-handle-type='output'
|
|
244
|
+
data-node-id={props.id}
|
|
245
|
+
class='cursor-crosshair rounded-full bg-[#e38b29] shadow-md transition-transform'
|
|
238
246
|
style={{
|
|
239
247
|
width: `${HANDLE_SIZE}px`,
|
|
240
248
|
height: `${HANDLE_SIZE}px`,
|
|
241
249
|
'margin-top': `${HANDLE_MARGIN_TOP}px`,
|
|
242
250
|
'pointer-events': 'all',
|
|
243
251
|
}}
|
|
244
|
-
|
|
245
252
|
onMouseDown={event => {
|
|
246
253
|
event.stopPropagation();
|
|
247
254
|
service.send('DESELECT');
|
|
248
255
|
service.send({ type: 'START_NEW_EDGE', payload: props.id });
|
|
249
256
|
}}
|
|
257
|
+
onPointerDown={event => {
|
|
258
|
+
event.stopPropagation();
|
|
259
|
+
}}
|
|
250
260
|
></div>
|
|
251
261
|
</div>
|
|
252
262
|
</div>
|
|
@@ -112,4 +112,131 @@ describe('Directive => mouseOut', () => {
|
|
|
112
112
|
el.dispatchEvent(new MouseEvent('mouseleave'));
|
|
113
113
|
expect(callback).not.toHaveBeenCalled();
|
|
114
114
|
});
|
|
115
|
+
|
|
116
|
+
it('#06 => should not trigger callback on mouseleave if an input inside element has focus', () => {
|
|
117
|
+
const callback = vi.fn();
|
|
118
|
+
const input = document.createElement('input');
|
|
119
|
+
el.appendChild(input);
|
|
120
|
+
input.focus();
|
|
121
|
+
|
|
122
|
+
createRoot(dispose => {
|
|
123
|
+
mouseOut(el, () => callback);
|
|
124
|
+
|
|
125
|
+
el.dispatchEvent(new MouseEvent('mouseleave'));
|
|
126
|
+
expect(callback).not.toHaveBeenCalled();
|
|
127
|
+
|
|
128
|
+
dispose();
|
|
129
|
+
});
|
|
130
|
+
});
|
|
131
|
+
|
|
132
|
+
it('#07 => should trigger callback when focused child loses focus and mouse is outside', () => {
|
|
133
|
+
const callback = vi.fn();
|
|
134
|
+
const input = document.createElement('input');
|
|
135
|
+
el.appendChild(input);
|
|
136
|
+
input.focus();
|
|
137
|
+
|
|
138
|
+
createRoot(dispose => {
|
|
139
|
+
mouseOut(el, () => [callback, 200]);
|
|
140
|
+
|
|
141
|
+
// Mouse leaves while input is focused
|
|
142
|
+
el.dispatchEvent(new MouseEvent('mouseleave'));
|
|
143
|
+
expect(callback).not.toHaveBeenCalled();
|
|
144
|
+
|
|
145
|
+
// Input loses focus (blurred)
|
|
146
|
+
input.dispatchEvent(
|
|
147
|
+
new FocusEvent('focusout', { bubbles: true, relatedTarget: null }),
|
|
148
|
+
);
|
|
149
|
+
|
|
150
|
+
vi.advanceTimersByTime(100);
|
|
151
|
+
expect(callback).not.toHaveBeenCalled();
|
|
152
|
+
|
|
153
|
+
vi.advanceTimersByTime(100);
|
|
154
|
+
expect(callback).toHaveBeenCalledTimes(1);
|
|
155
|
+
|
|
156
|
+
dispose();
|
|
157
|
+
});
|
|
158
|
+
});
|
|
159
|
+
|
|
160
|
+
it('#08 => should not trigger callback when child loses focus but mouse is still inside', () => {
|
|
161
|
+
const callback = vi.fn();
|
|
162
|
+
const input = document.createElement('input');
|
|
163
|
+
el.appendChild(input);
|
|
164
|
+
input.focus();
|
|
165
|
+
|
|
166
|
+
createRoot(dispose => {
|
|
167
|
+
mouseOut(el, () => callback);
|
|
168
|
+
|
|
169
|
+
// Mouse enters element
|
|
170
|
+
el.dispatchEvent(new MouseEvent('mouseenter'));
|
|
171
|
+
|
|
172
|
+
// Child loses focus while mouse is still inside
|
|
173
|
+
input.dispatchEvent(
|
|
174
|
+
new FocusEvent('focusout', { bubbles: true, relatedTarget: null }),
|
|
175
|
+
);
|
|
176
|
+
expect(callback).not.toHaveBeenCalled();
|
|
177
|
+
|
|
178
|
+
dispose();
|
|
179
|
+
});
|
|
180
|
+
});
|
|
181
|
+
|
|
182
|
+
it('#09 => should not trigger callback when focus moves from one child to another within the element', () => {
|
|
183
|
+
const callback = vi.fn();
|
|
184
|
+
const input1 = document.createElement('input');
|
|
185
|
+
const input2 = document.createElement('input');
|
|
186
|
+
el.appendChild(input1);
|
|
187
|
+
el.appendChild(input2);
|
|
188
|
+
input1.focus();
|
|
189
|
+
|
|
190
|
+
createRoot(dispose => {
|
|
191
|
+
mouseOut(el, () => callback);
|
|
192
|
+
|
|
193
|
+
// Mouse leaves while input1 is focused
|
|
194
|
+
el.dispatchEvent(new MouseEvent('mouseleave'));
|
|
195
|
+
|
|
196
|
+
// Focus switches to input2 within the same element
|
|
197
|
+
input1.dispatchEvent(
|
|
198
|
+
new FocusEvent('focusout', { bubbles: true, relatedTarget: input2 }),
|
|
199
|
+
);
|
|
200
|
+
expect(callback).not.toHaveBeenCalled();
|
|
201
|
+
|
|
202
|
+
dispose();
|
|
203
|
+
});
|
|
204
|
+
});
|
|
205
|
+
|
|
206
|
+
it('#10 => should cancel pending mouseleave timer if an element inside gains focus before delay finishes', () => {
|
|
207
|
+
const callback = vi.fn();
|
|
208
|
+
const input = document.createElement('input');
|
|
209
|
+
el.appendChild(input);
|
|
210
|
+
|
|
211
|
+
createRoot(dispose => {
|
|
212
|
+
mouseOut(el, () => [callback, 400]);
|
|
213
|
+
|
|
214
|
+
el.dispatchEvent(new MouseEvent('mouseleave'));
|
|
215
|
+
vi.advanceTimersByTime(200);
|
|
216
|
+
expect(callback).not.toHaveBeenCalled();
|
|
217
|
+
|
|
218
|
+
// Focus gained inside element
|
|
219
|
+
input.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
|
|
220
|
+
|
|
221
|
+
vi.advanceTimersByTime(300);
|
|
222
|
+
expect(callback).not.toHaveBeenCalled();
|
|
223
|
+
|
|
224
|
+
dispose();
|
|
225
|
+
});
|
|
226
|
+
});
|
|
227
|
+
|
|
228
|
+
it('#11 => should not trigger callback on mouseleave if the element itself has focus', () => {
|
|
229
|
+
const callback = vi.fn();
|
|
230
|
+
el.tabIndex = 0;
|
|
231
|
+
el.focus();
|
|
232
|
+
|
|
233
|
+
createRoot(dispose => {
|
|
234
|
+
mouseOut(el, () => callback);
|
|
235
|
+
|
|
236
|
+
el.dispatchEvent(new MouseEvent('mouseleave'));
|
|
237
|
+
expect(callback).not.toHaveBeenCalled();
|
|
238
|
+
|
|
239
|
+
dispose();
|
|
240
|
+
});
|
|
241
|
+
});
|
|
115
242
|
});
|
|
@@ -1,23 +1,31 @@
|
|
|
1
1
|
import { onCleanup } from 'solid-js';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
* Callback function type invoked when the mouse leaves
|
|
4
|
+
* Callback function type invoked when the mouse leaves or focus is lost from the
|
|
5
|
+
* bound element.
|
|
5
6
|
*
|
|
6
|
-
* @param event - Optional mouse event that triggered the leave.
|
|
7
|
+
* @param event - Optional mouse or focus event that triggered the leave.
|
|
7
8
|
*/
|
|
8
|
-
export type MouseOutCallback = (event?: MouseEvent) => void;
|
|
9
|
+
export type MouseOutCallback = (event?: MouseEvent | FocusEvent) => void;
|
|
9
10
|
|
|
10
11
|
/** Configuration options for the {@linkcode mouseOut} directive. */
|
|
11
12
|
export type MouseOutOptions = {
|
|
12
|
-
/**
|
|
13
|
+
/**
|
|
14
|
+
* Callback function to trigger after the timer elapses of type
|
|
15
|
+
* {@linkcode MouseOutCallback}.
|
|
16
|
+
*/
|
|
13
17
|
callback?: MouseOutCallback;
|
|
14
18
|
|
|
15
|
-
/**
|
|
19
|
+
/**
|
|
20
|
+
* Alternative callback property name for triggering after the timer elapses of
|
|
21
|
+
* type {@linkcode MouseOutCallback}.
|
|
22
|
+
*/
|
|
16
23
|
onMouseOut?: MouseOutCallback;
|
|
17
24
|
|
|
18
25
|
/**
|
|
19
|
-
* Delay in milliseconds before triggering the callback after the mouse leaves
|
|
20
|
-
* the cursor re-enters the element
|
|
26
|
+
* Delay in milliseconds before triggering the callback after the mouse leaves or
|
|
27
|
+
* focus is lost. If the cursor re-enters the element or focus is regained before
|
|
28
|
+
* this duration, the timer is reset.
|
|
21
29
|
*
|
|
22
30
|
* @defaultValue 0
|
|
23
31
|
*/
|
|
@@ -32,8 +40,9 @@ export type MouseOutParam =
|
|
|
32
40
|
|
|
33
41
|
/**
|
|
34
42
|
* Solid custom directive that triggers a callback when the mouse leaves the bound
|
|
35
|
-
* element after a specified timer duration. If the user
|
|
36
|
-
* before the timer expires, the timer is
|
|
43
|
+
* element and focus is not inside it, after a specified timer duration. If the user
|
|
44
|
+
* re-enters the component or gains focus before the timer expires, the timer is
|
|
45
|
+
* reset/cancelled.
|
|
37
46
|
*
|
|
38
47
|
* @param el - The bound DOM element.
|
|
39
48
|
* @param accessor - Accessor returning a callback, tuple `[callback, delay]`, or
|
|
@@ -44,6 +53,7 @@ export const mouseOut = (
|
|
|
44
53
|
accessor: () => MouseOutParam,
|
|
45
54
|
) => {
|
|
46
55
|
let timer: ReturnType<typeof setTimeout> | undefined;
|
|
56
|
+
let isHovered = false;
|
|
47
57
|
|
|
48
58
|
const clear = () => {
|
|
49
59
|
if (timer !== undefined) {
|
|
@@ -52,11 +62,12 @@ export const mouseOut = (
|
|
|
52
62
|
}
|
|
53
63
|
};
|
|
54
64
|
|
|
55
|
-
const
|
|
56
|
-
|
|
65
|
+
const isFocused = () => {
|
|
66
|
+
const active = el.ownerDocument?.activeElement ?? document.activeElement;
|
|
67
|
+
return !!active && el.contains(active);
|
|
57
68
|
};
|
|
58
69
|
|
|
59
|
-
const
|
|
70
|
+
const triggerLeave = (event?: MouseEvent | FocusEvent) => {
|
|
60
71
|
clear();
|
|
61
72
|
|
|
62
73
|
const param = accessor();
|
|
@@ -87,12 +98,40 @@ export const mouseOut = (
|
|
|
87
98
|
}
|
|
88
99
|
};
|
|
89
100
|
|
|
101
|
+
const onMouseEnter = () => {
|
|
102
|
+
isHovered = true;
|
|
103
|
+
clear();
|
|
104
|
+
};
|
|
105
|
+
|
|
106
|
+
const onMouseLeave = (event: MouseEvent) => {
|
|
107
|
+
isHovered = false;
|
|
108
|
+
if (isFocused()) return;
|
|
109
|
+
triggerLeave(event);
|
|
110
|
+
};
|
|
111
|
+
|
|
112
|
+
const onFocusIn = () => {
|
|
113
|
+
clear();
|
|
114
|
+
};
|
|
115
|
+
|
|
116
|
+
const onFocusOut = (event: FocusEvent) => {
|
|
117
|
+
const nextTarget = event.relatedTarget as Node | null;
|
|
118
|
+
const stillHasFocus = !!nextTarget && el.contains(nextTarget);
|
|
119
|
+
|
|
120
|
+
if (!stillHasFocus && !isHovered) {
|
|
121
|
+
triggerLeave(event);
|
|
122
|
+
}
|
|
123
|
+
};
|
|
124
|
+
|
|
90
125
|
el.addEventListener('mouseleave', onMouseLeave as EventListener);
|
|
91
126
|
el.addEventListener('mouseenter', onMouseEnter as EventListener);
|
|
127
|
+
el.addEventListener('focusin', onFocusIn as EventListener);
|
|
128
|
+
el.addEventListener('focusout', onFocusOut as EventListener);
|
|
92
129
|
|
|
93
130
|
onCleanup(() => {
|
|
94
131
|
clear();
|
|
95
132
|
el.removeEventListener('mouseleave', onMouseLeave as EventListener);
|
|
96
133
|
el.removeEventListener('mouseenter', onMouseEnter as EventListener);
|
|
134
|
+
el.removeEventListener('focusin', onFocusIn as EventListener);
|
|
135
|
+
el.removeEventListener('focusout', onFocusOut as EventListener);
|
|
97
136
|
});
|
|
98
137
|
};
|