diff --git a/examples/react/src/examples/A11y/index.tsx b/examples/react/src/examples/A11y/index.tsx
index 85d959ff..0c921798 100644
--- a/examples/react/src/examples/A11y/index.tsx
+++ b/examples/react/src/examples/A11y/index.tsx
@@ -22,17 +22,19 @@ const initialNodes: Node[] = [
type: 'input',
data: { label: 'A11y Node 1' },
position: { x: 250, y: 5 },
+ className: 'light',
},
{
id: '2',
- data: { label: '
Node' },
+ data: { label: 'Node 2' },
position: { x: 100, y: 100 },
- as: 'ul',
+ className: 'light',
},
{
id: '3',
data: { label: 'Node 3' },
position: { x: 400, y: 100 },
+ className: 'light',
},
];
diff --git a/examples/svelte/src/routes/examples/a11y/+page.svelte b/examples/svelte/src/routes/examples/a11y/+page.svelte
index 4f0ab7b0..171576db 100644
--- a/examples/svelte/src/routes/examples/a11y/+page.svelte
+++ b/examples/svelte/src/routes/examples/a11y/+page.svelte
@@ -13,10 +13,10 @@
{
id: 'A',
position: { x: 0, y: 0 },
- data: { label: 'A' },
+ data: { label: 'A' },
+
},
- // You need to explicitly pass the as type
- { id: 'B', position: { x: -100, y: 150 }, data: { label: ' Node' }, as: "ul" as "ul" },
+ { id: 'B', position: { x: -100, y: 150 }, data: { label: 'B' } },
{ id: 'C', position: { x: 100, y: 150 }, data: { label: 'C' } },
{ id: 'D', position: { x: 0, y: 260 }, data: { label: 'D' } }
]);
diff --git a/packages/react/src/components/NodeWrapper/index.tsx b/packages/react/src/components/NodeWrapper/index.tsx
index a088164b..b64176fa 100644
--- a/packages/react/src/components/NodeWrapper/index.tsx
+++ b/packages/react/src/components/NodeWrapper/index.tsx
@@ -68,15 +68,7 @@ export function NodeWrapper({
const store = useStoreApi();
const hasDimensions = nodeHasDimensions(node);
- const Tag: keyof JSX.IntrinsicElements = node.as || 'div';
-
- const nodeRef = useNodeObserver({
- node,
- nodeType,
- hasDimensions,
- resizeObserver,
- });
-
+ const nodeRef = useNodeObserver({ node, nodeType, hasDimensions, resizeObserver });
const dragging = useDrag({
nodeRef,
disabled: node.hidden || !isDraggable,
@@ -168,7 +160,7 @@ export function NodeWrapper({
};
return (
- ({
dragging,
},
])}
- ref={(instance: HTMLElement | null) => {
- if (nodeRef && 'current' in nodeRef) {
- (nodeRef as React.MutableRefObject).current = instance;
- }
- }}
+ ref={nodeRef}
style={{
zIndex: internals.z,
transform: `translate(${internals.positionAbsolute.x}px,${internals.positionAbsolute.y}px)`,
@@ -200,13 +188,13 @@ export function NodeWrapper({
}}
data-id={id}
data-testid={`rf__node-${id}`}
- onMouseEnter={onMouseEnterHandler as React.MouseEventHandler}
- onMouseMove={onMouseMoveHandler as React.MouseEventHandler}
- onMouseLeave={onMouseLeaveHandler as React.MouseEventHandler}
- onContextMenu={onContextMenuHandler as React.MouseEventHandler}
- onClick={onSelectNodeHandler as React.MouseEventHandler}
- onDoubleClick={onDoubleClickHandler as React.MouseEventHandler}
- onKeyDown={isFocusable ? (onKeyDown as React.KeyboardEventHandler) : undefined}
+ onMouseEnter={onMouseEnterHandler}
+ onMouseMove={onMouseMoveHandler}
+ onMouseLeave={onMouseLeaveHandler}
+ onContextMenu={onContextMenuHandler}
+ onClick={onSelectNodeHandler}
+ onDoubleClick={onDoubleClickHandler}
+ onKeyDown={isFocusable ? onKeyDown : undefined}
tabIndex={isFocusable ? 0 : undefined}
role={isFocusable ? 'button' : undefined}
aria-describedby={disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`}
@@ -233,6 +221,6 @@ export function NodeWrapper({
{...nodeDimensions}
/>
-
+
);
}
diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index 8e96fc70..ea8c6494 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -53,19 +53,15 @@
width,
height,
dragHandle,
- as = 'div',
internals: {
z: zIndex = 0,
positionAbsolute: { x: positionX, y: positionY },
- userNode,
-
+ userNode
}
} = $derived(node);
let { id } = node;
- let Tag = $derived(typeof as === 'string' ? as : 'div');
-
let draggable = $derived(_draggable ?? store.nodesDraggable);
let selectable = $derived(_selectable ?? store.elementsSelectable);
let connectable = $derived(_connectable ?? store.nodesConnectable);
@@ -78,7 +74,7 @@
let isParent = $derived(isInParentLookup(id));
- let nodeRef: HTMLElement | null = $state(null);
+ let nodeRef: HTMLDivElement | null = $state(null);
let prevNodeRef: HTMLDivElement | null = null;
// svelte-ignore state_referenced_locally
@@ -136,7 +132,7 @@
id,
{
id,
- nodeElement: nodeRef as HTMLDivElement,
+ nodeElement: nodeRef,
force: true
}
]
@@ -156,7 +152,7 @@
if (resizeObserver && (!initialized || nodeRef !== prevNodeRef)) {
prevNodeRef && resizeObserver.unobserve(prevNodeRef);
nodeRef && resizeObserver.observe(nodeRef);
- prevNodeRef = nodeRef as HTMLDivElement | null;
+ prevNodeRef = nodeRef;
}
/* eslint-enable @typescript-eslint/no-unused-expressions */
});
@@ -185,7 +181,7 @@
if (elementSelectionKeys.includes(event.key) && selectable) {
const unselect = event.key === 'Escape';
- store.handleNodeSelection(id, unselect, nodeRef as HTMLDivElement | null);
+ store.handleNodeSelection(id, unselect, nodeRef);
} else if (
draggable &&
node.selected &&
@@ -205,8 +201,7 @@
{#if !hidden}
- onnodepointerenter({ node: userNode, event })
+ ? (event) => onnodepointerenter({ node: userNode, event })
: undefined}
onpointerleave={onnodepointerleave
- ? (event: PointerEvent) => onnodepointerleave({ node: userNode, event })
+ ? (event) => onnodepointerleave({ node: userNode, event })
: undefined}
onpointermove={onnodepointermove
- ? (event: PointerEvent) => onnodepointermove({ node: userNode, event })
+ ? (event) => onnodepointermove({ node: userNode, event })
: undefined}
oncontextmenu={onnodecontextmenu
- ? (event: MouseEvent) => onnodecontextmenu({ node: userNode, event })
+ ? (event) => onnodecontextmenu({ node: userNode, event })
: undefined}
onkeydown={focusable ? onKeyDown : undefined}
tabIndex={focusable ? 0 : undefined}
@@ -284,5 +279,5 @@
{width}
{height}
/>
-
+
{/if}
diff --git a/packages/system/src/types/nodes.ts b/packages/system/src/types/nodes.ts
index 7239b61d..b32d58c5 100644
--- a/packages/system/src/types/nodes.ts
+++ b/packages/system/src/types/nodes.ts
@@ -23,10 +23,6 @@ export type NodeBase<
data: NodeData;
/** Type of node defined in `nodeTypes`. */
type?: NodeType;
- /** Custom element type for rendering the node (e.g., 'div', 'li', etc.).
- * @default 'div'
- */
- as?: Extract;
/**
* Only relevant for default, source, target nodeType. Controls source position.
* @example 'right', 'left', 'top', 'bottom'