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