alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #4880 from crimx/patch-2

Browse Source 
Fix type check for all event targets
This commit is contained in:
Moritz Klack
2025-01-10 10:27:19 +01:00
committed by GitHub
parent 78f9d4e645 e2d849dca6
commit cdca1c55d1
10 changed files with 27 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/system/src/utils/dom.ts
View File

@@ -32,18 +32,20 @@ export const getDimensions = (node: HTMLDivElement): Dimensions => ({
height: node.offsetHeight,
});
export const getHostForElement = (element: HTMLElement): Document | ShadowRoot =>
(element.getRootNode?.() as Document | ShadowRoot) || window?.document;
export const getHostForElement = (element: HTMLElement | EventTarget | null): Document | ShadowRoot =>
((element as Partial<HTMLElement> | null)?.getRootNode?.() as Document | ShadowRoot) || window?.document;
const inputTags = ['INPUT', 'SELECT', 'TEXTAREA'];
export function isInputDOMNode(event: KeyboardEvent): boolean {
// using composed path for handling shadow dom
const target = (event.composedPath?.()?.[0] || event.target) as HTMLElement;
const isInput = inputTags.includes(target?.nodeName) || target?.hasAttribute?.('contenteditable');
const target = (event.composedPath?.()?.[0] || event.target) as Element | null;
if (target?.nodeType !== 1 /* Node.ELEMENT_NODE */) return false;
const isInput = inputTags.includes(target.nodeName) || target.hasAttribute('contenteditable');
// when an input field is focused we don't want to trigger deletion or movement of nodes
return isInput || !!target?.closest('.nokey');
return isInput || !!target.closest('.nokey');
}
export const isMouseEvent = (event: MouseEvent | TouchEvent): event is MouseEvent => 'clientX' in event;

2
packages/system/src/xydrag/XYDrag.ts
View File

@@ -364,7 +364,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
}
})
.filter((event: MouseEvent) => {
const target = event.target as HTMLDivElement;
const target = event.target;
const isDraggable =
!event.button &&
(!noDragClassName || !hasSelector(target, `.${noDragClassName}`, domNode)) &&

8
packages/system/src/xydrag/utils.ts
View File

@@ -18,13 +18,13 @@ export function isParentSelected<NodeType extends NodeBase>(node: NodeType, node
return isParentSelected(parentNode, nodeLookup);
}
export function hasSelector(target: Element, selector: string, domNode: Element): boolean {
let current = target;
export function hasSelector(target: Element | EventTarget | null, selector: string, domNode: Element): boolean {
let current = target as Partial<Element> | null | undefined;
do {
if (current?.matches(selector)) return true;
if (current?.matches?.(selector)) return true;
if (current === domNode) return false;
current = current.parentElement as Element;
current = current?.parentElement;
} while (current);
return false;

2
packages/system/src/xyhandle/XYHandle.ts
View File

@@ -48,7 +48,7 @@ function onPointerDown(
}: OnPointerDownParams
) {
// when xyflow is used inside a shadow root we can't use document
const doc = getHostForElement(event.target as HTMLElement);
const doc = getHostForElement(event.target);
let autoPanId = 0;
let closestHandle: Handle | null;