diff --git a/package.json b/package.json
index 8990277d..532a1382 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
"lint": "yarn lint:js"
},
"dependencies": {
- "@braks/revue-draggable": "^0.1.12",
+ "@braks/revue-draggable": "^0.1.13",
"@types/d3": "^7.0.0",
"d3": "^7.0.0",
"d3-selection": "^3.0.0",
diff --git a/src/components/Nodes/DefaultNode.tsx b/src/components/Nodes/DefaultNode.tsx
index 0f541422..26d9fb06 100644
--- a/src/components/Nodes/DefaultNode.tsx
+++ b/src/components/Nodes/DefaultNode.tsx
@@ -29,11 +29,11 @@ const DefaultNode = defineComponent({
},
setup(props) {
return () => (
- <>
+
{props.data?.label}
- >
+
);
}
});
diff --git a/src/components/Nodes/InputNode.tsx b/src/components/Nodes/InputNode.tsx
index 548e68eb..62e4cab8 100644
--- a/src/components/Nodes/InputNode.tsx
+++ b/src/components/Nodes/InputNode.tsx
@@ -24,10 +24,10 @@ const InputNode = defineComponent({
},
setup(props) {
return () => (
- <>
+
{props.data?.label}
- >
+
);
}
});
diff --git a/src/components/Nodes/OutputNode.tsx b/src/components/Nodes/OutputNode.tsx
index 1a0fb900..d47cae9d 100644
--- a/src/components/Nodes/OutputNode.tsx
+++ b/src/components/Nodes/OutputNode.tsx
@@ -24,10 +24,10 @@ const OutputNode = defineComponent({
},
setup(props) {
return () => (
- <>
+
{props.data?.label}
- >
+
);
}
});
diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx
index 9565e827..c6130f4c 100644
--- a/src/components/Nodes/wrapNode.tsx
+++ b/src/components/Nodes/wrapNode.tsx
@@ -1,8 +1,8 @@
import { Node, RevueFlowStore, WrapNodeProps } from '../../types';
-import { computed, CSSProperties, defineComponent, inject, onMounted, provide, ref } from 'vue';
+import { computed, CSSProperties, DefineComponent, defineComponent, inject, onMounted, provide, ref } from 'vue';
import { DraggableCore, DraggableEventHandler } from '@braks/revue-draggable';
-export default (NodeComponent: any) => {
+export default (NodeComponent: DefineComponent) => {
return defineComponent({
props: WrapNodeProps,
setup(props) {
diff --git a/src/components/NodesSelection/index.tsx b/src/components/NodesSelection/index.tsx
index 0a67749e..4243ca39 100644
--- a/src/components/NodesSelection/index.tsx
+++ b/src/components/NodesSelection/index.tsx
@@ -71,9 +71,7 @@ const NodesSelection = defineComponent({
};
const onDrag: DraggableEventHandler = (event, data) => {
- if (props.onSelectionDrag) {
- props.onSelectionDrag(event, selectedNodes.value);
- }
+ props.onSelectionDrag?.(event, selectedNodes.value);
store.updateNodePosDiff({
diff: {
@@ -111,6 +109,7 @@ const NodesSelection = defineComponent({
onStart={onStart}
onDrag={onDrag}
onStop={onStop}
+ nodeRef={nodeRef.value}
enableUserSelectHack={false}
nodeRef={nodeRef.value}
>
diff --git a/src/components/UserSelection/index.tsx b/src/components/UserSelection/index.tsx
index 8c4bd0b6..0215cab3 100644
--- a/src/components/UserSelection/index.tsx
+++ b/src/components/UserSelection/index.tsx
@@ -56,11 +56,11 @@ export default defineComponent({
return;
}
- store?.setUserSelection(mousePos);
+ store.setUserSelection(mousePos);
};
const onMouseMove = (event: MouseEvent): void => {
- if (!store?.selectionActive) {
+ if (!store.selectionActive) {
return;
}
const mousePos = getMousePosition(event);
@@ -69,16 +69,14 @@ export default defineComponent({
return;
}
- store?.updateUserSelection(mousePos);
+ store.updateUserSelection(mousePos);
};
- const onMouseUp = () => {
- store?.unsetUserSelection();
- };
+ const onMouseUp = () => store.unsetUserSelection();
const onMouseLeave = () => {
- store?.unsetUserSelection();
- store?.unsetNodesSelection();
+ store.unsetUserSelection();
+ store.unsetNodesSelection();
};
return () => (
diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx
index 59c28ae7..848bbd74 100644
--- a/src/container/NodeRenderer/index.tsx
+++ b/src/container/NodeRenderer/index.tsx
@@ -50,47 +50,47 @@ const NodeRenderer = defineComponent({
onElementClick: {
type: Function as unknown as PropType,
required: false,
- default: undefined
+ default: () => {}
},
onNodeDoubleClick: {
type: Function as unknown as PropType,
required: false,
- default: undefined
+ default: () => {}
},
onNodeMouseEnter: {
type: Function as unknown as PropType,
required: false,
- default: undefined
+ default: () => {}
},
onNodeMouseMove: {
type: Function as unknown as PropType,
required: false,
- default: undefined
+ default: () => {}
},
onNodeMouseLeave: {
type: Function as unknown as PropType,
required: false,
- default: undefined
+ default: () => {}
},
onNodeContextMenu: {
type: Function as unknown as PropType,
required: false,
- default: undefined
+ default: () => {}
},
onNodeDrag: {
type: Function as unknown as PropType,
required: false,
- default: undefined
+ default: () => {}
},
onNodeDragStart: {
type: Function as unknown as PropType,
required: false,
- default: undefined
+ default: () => {}
},
onNodeDragStop: {
type: Function as unknown as PropType,
required: false,
- default: undefined
+ default: () => {}
}
},
setup(props) {
@@ -137,7 +137,7 @@ const NodeRenderer = defineComponent({
{visibleNodes.value?.map((node) => {
const nodeType = node.type || 'default';
if (props.nodeTypes) {
- const NodeComponent: any = props.nodeTypes[nodeType] || props.nodeTypes.default;
+ const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default);
if (!props.nodeTypes[nodeType]) {
console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`);
}
@@ -150,8 +150,6 @@ const NodeRenderer = defineComponent({
('store')! : configureStore(initialState)();
+ const store = configureStore(initialState)();
provide('store', store);
store.setElements(props.elements);
diff --git a/src/types/index.ts b/src/types/index.ts
index c5280c23..21366c2e 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,5 +1,5 @@
import { Selection as D3Selection, ZoomBehavior } from 'd3';
-import { Component, HTMLAttributes, PropType, VNode } from 'vue';
+import { DefineComponent, HTMLAttributes, PropType, VNode } from 'vue';
import { Store } from 'pinia';
export type ElementId = string;
@@ -85,7 +85,7 @@ export enum BackgroundVariant {
export type HandleType = 'source' | 'target';
-export type NodeTypesType = { [key: string]: Component };
+export type NodeTypesType = { [key: string]: DefineComponent };
export type EdgeTypesType = NodeTypesType;
@@ -667,7 +667,6 @@ export interface WrapNodeProps {
onNodeDrag?: (event: MouseEvent, node: Node) => void;
onNodeDragStop?: (event: MouseEvent, node: Node) => void;
style?: any;
- className?: string;
sourcePosition?: Position;
targetPosition?: Position;
isHidden?: boolean;
@@ -738,7 +737,7 @@ export type ConnectionLineComponentProps = {
connectionLineType: ConnectionLineType;
};
-export type ConnectionLineComponent = Component;
+export type ConnectionLineComponent = DefineComponent;
export type OnConnectFunc = (connection: Connection) => void;
export type OnConnectStartParams = {
diff --git a/yarn.lock b/yarn.lock
index eaca7675..4f3adbb2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -262,10 +262,10 @@
"@babel/helper-validator-identifier" "^7.14.5"
to-fast-properties "^2.0.0"
-"@braks/revue-draggable@^0.1.12":
- version "0.1.12"
- resolved "https://registry.yarnpkg.com/@braks/revue-draggable/-/revue-draggable-0.1.12.tgz#6ccf57c1954f1bcc3e66e3956f7205dc57841deb"
- integrity sha512-eq2uj6t3GKmIej5RcDBSun94ZKs1wmEDvMMx/uz+m7EzeffXYIDyo8Zk1Nkmb3MdOcvp4BHpnzuAxUbPnZnEMA==
+"@braks/revue-draggable@^0.1.13":
+ version "0.1.13"
+ resolved "https://registry.yarnpkg.com/@braks/revue-draggable/-/revue-draggable-0.1.13.tgz#cff5a9ac21c488de5b0c3fef6cdbd3f8f828dd21"
+ integrity sha512-unczSXZNK3ZnHoIj5w45a4eN7iQH6s0Ot33G2s7zkdMRHcoGh8Cc0ltw5m5XlrEgk4ch0vAEIU+MQiS8/D27uw==
dependencies:
vue-demi latest