From ef9647ceb4fa460bf7373aa8d47d666474438f31 Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Fri, 23 Jul 2021 17:50:48 +0200 Subject: [PATCH] chore: add vueuse/core to deps feat: Implement onKeystrok of vueuse * Implement useEventlistener fix: node selection not properly selecting underlying nodes --- package.json | 5 +- src/components/NodesSelection/index.tsx | 1 - src/components/UserSelection/index.tsx | 71 +++++++------- src/container/FlowRenderer/index.tsx | 7 +- src/container/GraphView/index.tsx | 19 +--- src/container/RevueFlow/index.tsx | 120 +----------------------- src/hooks/useKeyPress.ts | 59 +++++------- src/hooks/useZoomPanHelper.ts | 106 +++++++++------------ src/index.ts | 4 +- src/store/configure-store.ts | 9 +- src/types/index.ts | 91 +++++++++++++++++- yarn.lock | 2 +- 12 files changed, 213 insertions(+), 281 deletions(-) diff --git a/package.json b/package.json index 3a6181a9..762735e5 100644 --- a/package.json +++ b/package.json @@ -30,12 +30,12 @@ "dependencies": { "@braks/revue-draggable": "^0.2.4", "@types/d3": "^7.0.0", + "@vueuse/core": "^5.1.4", "d3": "^7.0.0", "d3-selection": "^3.0.0", "d3-zoom": "^3.0.0", "fast-deep-equal": "^3.1.3", - "pinia": "^2.0.0-beta.3", - "vue": "^3.0.5" + "pinia": "^2.0.0-beta.3" }, "devDependencies": { "@babel/core": "^7.14.6", @@ -72,6 +72,7 @@ "typescript": "^4.3.5", "vite": "^2.3.8", "vite-svg-loader": "^2.1.0", + "vue": "^3.0.5", "vue-router": "4", "vue-tsc": "^0.0.24" }, diff --git a/src/components/NodesSelection/index.tsx b/src/components/NodesSelection/index.tsx index 4aa2f371..8c4275bb 100644 --- a/src/components/NodesSelection/index.tsx +++ b/src/components/NodesSelection/index.tsx @@ -66,7 +66,6 @@ const NodesSelection = defineComponent({ })); const onStart: DraggableEventListener = ({ event }) => { - event.stopPropagation(); props.onSelectionDragStart?.(event, selectedNodes.value); }; diff --git a/src/components/UserSelection/index.tsx b/src/components/UserSelection/index.tsx index 0215cab3..0bc8b953 100644 --- a/src/components/UserSelection/index.tsx +++ b/src/components/UserSelection/index.tsx @@ -3,6 +3,7 @@ */ import { RevueFlowStore, XYPosition } from '../../types'; import { computed, defineComponent, inject } from 'vue'; +import { templateRef, useEventListener } from '@vueuse/core'; function getMousePosition(event: MouseEvent): XYPosition | void { const revueFlowNode = (event.target as Element).closest('.revue-flow'); @@ -18,39 +19,30 @@ function getMousePosition(event: MouseEvent): XYPosition | void { }; } -const SelectionRect = defineComponent({ - setup() { - const store = inject('store'); - - return () => { - return store?.userSelectionRect.draw ? ( -
- ) : ( - '' - ); - }; - } -}); +const SelectionRect = (props: { width: number; height: number; x: number; y: number }) => { + return ( +
+ ); +}; export default defineComponent({ components: { SelectionRect }, setup() { const store = inject('store')!; - + const el = templateRef('user-selection', null); const shouldRender = computed(() => store.selectionActive || store.elementsSelectable); - if (!shouldRender.value) { return null; } - const onMouseDown = (event: MouseEvent): void => { + const onMouseDown = (event: MouseEvent) => { const mousePos = getMousePosition(event); if (!mousePos) { return; @@ -59,7 +51,8 @@ export default defineComponent({ store.setUserSelection(mousePos); }; - const onMouseMove = (event: MouseEvent): void => { + const onMouseMove = (event: MouseEvent) => { + if (!store.selectionActive) { return; } @@ -72,23 +65,33 @@ export default defineComponent({ store.updateUserSelection(mousePos); }; - const onMouseUp = () => store.unsetUserSelection(); + const onMouseUp = () => { + store.unsetUserSelection(); + }; const onMouseLeave = () => { store.unsetUserSelection(); store.unsetNodesSelection(); }; + useEventListener(el, 'mousedown', onMouseDown); + useEventListener(el, 'mousemove', onMouseMove); + useEventListener(el, 'click', onMouseUp); + useEventListener(el, 'mouseup', onMouseUp); + useEventListener(el, 'mouseleave', onMouseLeave); + return () => ( -
- +
+ {store?.userSelectionRect.draw ? ( + + ) : ( + '' + )}
); } diff --git a/src/container/FlowRenderer/index.tsx b/src/container/FlowRenderer/index.tsx index f97b206d..353dc824 100644 --- a/src/container/FlowRenderer/index.tsx +++ b/src/container/FlowRenderer/index.tsx @@ -1,9 +1,8 @@ -import { GraphViewProps } from '../GraphView'; +import { defineComponent, inject, PropType } from 'vue'; import ZoomPane from '../ZoomPane'; import UserSelection from '../../components/UserSelection'; import NodesSelection from '../../components/NodesSelection'; -import { defineComponent, inject, PropType } from 'vue'; -import { RevueFlowStore } from '../../types'; +import { RevueFlowStore, GraphViewProps } from '../../types'; import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler'; import useKeyPress from '../../hooks/useKeyPress'; @@ -199,7 +198,7 @@ const FlowRenderer = defineComponent({ zoomActivationKeyCode={props.zoomActivationKeyCode} > {slots.default ? slots.default() : ''} - {keyPressed.value ? : ''} + {keyPressed.value ? : ''} {store?.nodesSelectionActive && ( { - nodeTypes: NodeTypesType; - edgeTypes: EdgeTypesType; - selectionKeyCode: KeyCode; - deleteKeyCode: KeyCode; - multiSelectionKeyCode: KeyCode; - connectionLineType: ConnectionLineType; - snapToGrid: boolean; - snapGrid: [number, number]; - onlyRenderVisibleElements: boolean; - defaultZoom: number; - defaultPosition: [number, number]; - arrowHeadColor: string; - selectNodesOnDrag: boolean; -} - const GraphView = defineComponent({ name: 'GraphView', components: { NodeRenderer, EdgeRenderer }, diff --git a/src/container/RevueFlow/index.tsx b/src/container/RevueFlow/index.tsx index 1ed69422..c72923ee 100644 --- a/src/container/RevueFlow/index.tsx +++ b/src/container/RevueFlow/index.tsx @@ -1,14 +1,6 @@ -import { - computed, - CSSProperties, - defineComponent, - HTMLAttributes, - onBeforeUnmount, - onUpdated, - PropType, - provide, - watchEffect -} from 'vue'; +import { computed, defineComponent, onBeforeUnmount, PropType, provide, watch } from 'vue'; +import '../../style.css'; +import '../../theme-default.css'; import GraphView from '../GraphView'; import DefaultNode from '../../components/Nodes/DefaultNode'; import InputNode from '../../components/Nodes/InputNode'; @@ -16,30 +8,7 @@ import OutputNode from '../../components/Nodes/OutputNode'; import { createNodeTypes } from '../NodeRenderer/utils'; import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '../../components/Edges'; import { createEdgeTypes } from '../EdgeRenderer/utils'; -import { - Elements, - NodeTypesType, - EdgeTypesType, - OnLoadFunc, - Node, - Edge, - Connection, - ConnectionMode, - ConnectionLineType, - ConnectionLineComponent, - FlowTransform, - OnConnectStartFunc, - OnConnectStopFunc, - OnConnectEndFunc, - TranslateExtent, - KeyCode, - PanOnScrollMode, - OnEdgeUpdateFunc, - NodeExtent, - RevueFlowStore -} from '../../types'; -import '../../style.css'; -import '../../theme-default.css'; +import { ConnectionMode, ConnectionLineType, PanOnScrollMode, RevueFlowStore, RevueFlowProps } from '../../types'; import { initialState } from '../../store'; import configureStore from '../../store/configure-store'; @@ -56,79 +25,6 @@ const defaultEdgeTypes = { smoothstep: SmoothStepEdge }; -export interface RevueFlowProps extends Omit { - elements: Elements; - onElementClick?: (event: MouseEvent, element: Node | Edge) => void; - onElementsRemove?: (elements: Elements) => void; - onNodeDoubleClick?: (event: MouseEvent, node: Node) => void; - onNodeMouseEnter?: (event: MouseEvent, node: Node) => void; - onNodeMouseMove?: (event: MouseEvent, node: Node) => void; - onNodeMouseLeave?: (event: MouseEvent, node: Node) => void; - onNodeContextMenu?: (event: MouseEvent, node: Node) => void; - onNodeDragStart?: (event: MouseEvent, node: Node) => void; - onNodeDrag?: (event: MouseEvent, node: Node) => void; - onNodeDragStop?: (event: MouseEvent, node: Node) => void; - onConnect?: (connection: Edge | Connection) => void; - onConnectStart?: OnConnectStartFunc; - onConnectStop?: OnConnectStopFunc; - onConnectEnd?: OnConnectEndFunc; - onLoad?: OnLoadFunc; - onMove?: (flowTransform?: FlowTransform) => void; - onMoveStart?: (flowTransform?: FlowTransform) => void; - onMoveEnd?: (flowTransform?: FlowTransform) => void; - onSelectionChange?: (elements: Elements | null) => void; - onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void; - onSelectionDrag?: (event: MouseEvent, nodes: Node[]) => void; - onSelectionDragStop?: (event: MouseEvent, nodes: Node[]) => void; - onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void; - onPaneScroll?: (event?: WheelEvent) => void; - onPaneClick?: (event: MouseEvent) => void; - onPaneContextMenu?: (event: MouseEvent) => void; - nodeTypes?: NodeTypesType; - edgeTypes?: EdgeTypesType; - connectionMode?: ConnectionMode; - connectionLineType?: ConnectionLineType; - connectionLineStyle?: CSSProperties; - connectionLineComponent?: ConnectionLineComponent; - deleteKeyCode?: KeyCode; - selectionKeyCode?: KeyCode; - multiSelectionKeyCode?: KeyCode; - zoomActivationKeyCode?: KeyCode; - snapToGrid?: boolean; - snapGrid?: [number, number]; - onlyRenderVisibleElements?: boolean; - nodesDraggable?: boolean; - nodesConnectable?: boolean; - elementsSelectable?: boolean; - selectNodesOnDrag?: boolean; - paneMoveable?: boolean; - minZoom?: number; - maxZoom?: number; - defaultZoom?: number; - defaultPosition?: [number, number]; - translateExtent?: TranslateExtent; - nodeExtent?: NodeExtent; - arrowHeadColor?: string; - markerEndId?: string; - zoomOnScroll?: boolean; - zoomOnPinch?: boolean; - panOnScroll?: boolean; - panOnScrollSpeed?: number; - panOnScrollMode?: PanOnScrollMode; - zoomOnDoubleClick?: boolean; - onEdgeUpdate?: OnEdgeUpdateFunc; - onEdgeContextMenu?: (event: MouseEvent, edge: Edge) => void; - onEdgeMouseEnter?: (event: MouseEvent, edge: Edge) => void; - onEdgeMouseMove?: (event: MouseEvent, edge: Edge) => void; - onEdgeMouseLeave?: (event: MouseEvent, edge: Edge) => void; - onEdgeDoubleClick?: (event: MouseEvent, edge: Edge) => void; - onEdgeUpdateStart?: (event: MouseEvent, edge: Edge) => void; - onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void; - edgeUpdaterRadius?: number; - nodeTypesId?: string; - edgeTypesId?: string; -} - const RevueFlow = defineComponent({ name: 'RevueFlow', components: { GraphView }, @@ -552,14 +448,8 @@ const RevueFlow = defineComponent({ provide('store', store); store.setElements(props.elements); - watchEffect(() => { + watch(props, () => { store.setElements(props.elements); - props.onSelectionChange?.(store.selectedElements); - }); - - onUpdated(() => { - store.setElements(props.elements); - props.onSelectionChange?.(store.selectedElements); }); onBeforeUnmount(() => { diff --git a/src/hooks/useKeyPress.ts b/src/hooks/useKeyPress.ts index 3fca3dcf..d992e4ca 100644 --- a/src/hooks/useKeyPress.ts +++ b/src/hooks/useKeyPress.ts @@ -1,44 +1,37 @@ -import { isInputDOMNode } from '../utils'; +import { ref, Ref } from 'vue'; import { KeyCode } from '../types'; -import { onBeforeUnmount, onMounted, ref, Ref } from 'vue'; +import { onKeyStroke, useEventListener } from '@vueuse/core'; export default (keyCode?: KeyCode): Ref => { const keyPressed = ref(false); - const downHandler = (event: KeyboardEvent) => { - if (!isInputDOMNode(event) && (event.key === keyCode || event.keyCode === keyCode)) { - event.preventDefault(); + onKeyStroke( + (event) => event.key === keyCode || event.keyCode === keyCode, + (e) => { + e.preventDefault(); keyPressed.value = true; - } - }; - - const upHandler = (event: KeyboardEvent) => { - if (!isInputDOMNode(event) && (event.key === keyCode || event.keyCode === keyCode)) { + }, + { eventName: 'keypress' } + ); + onKeyStroke( + (event) => event.key === keyCode || event.keyCode === keyCode, + (e) => { + e.preventDefault(); + keyPressed.value = true; + }, + { eventName: 'keydown' } + ); + onKeyStroke( + (event) => event.key === keyCode || event.keyCode === keyCode, + (e) => { + e.preventDefault(); keyPressed.value = false; - } - }; + }, + { eventName: 'keyup' } + ); - const resetHandler = () => (keyPressed.value = false); - - const bindEvents = () => { - if (typeof keyCode !== 'undefined') { - window.addEventListener('keydown', downHandler); - window.addEventListener('keyup', upHandler); - window.addEventListener('blur', resetHandler); - } - }; - - const unbindEvents = () => { - window.removeEventListener('keydown', downHandler); - window.removeEventListener('keyup', upHandler); - window.removeEventListener('blur', resetHandler); - }; - - onMounted(() => { - bindEvents(); - }); - onBeforeUnmount(() => { - unbindEvents(); + useEventListener(window, 'blur', () => { + keyPressed.value = false; }); return keyPressed; diff --git a/src/hooks/useZoomPanHelper.ts b/src/hooks/useZoomPanHelper.ts index bba7183a..86f2ea33 100644 --- a/src/hooks/useZoomPanHelper.ts +++ b/src/hooks/useZoomPanHelper.ts @@ -5,77 +5,61 @@ import { inject } from 'vue'; const DEFAULT_PADDING = 0.1; -const initialZoomPanHelper: ZoomPanHelperFunctions = { - zoomIn: () => {}, - zoomOut: () => {}, - zoomTo: (_: number) => {}, - transform: (_: FlowTransform) => {}, - fitView: (_: FitViewParams = { padding: DEFAULT_PADDING, includeHiddenNodes: false }) => {}, - setCenter: (_: number, __: number) => {}, - fitBounds: (_: Rect) => {}, - project: (position: XYPosition) => position, - initialized: false -}; - const useZoomPanHelper = (): ZoomPanHelperFunctions => { const store = inject('store')!; const zoomPanHelperFunctions = () => { - if (store.d3Selection && store.d3Zoom) { - return { - zoomIn: () => store.d3Zoom?.scaleBy(store.d3Selection as any, 1.2), - zoomOut: () => store.d3Zoom?.scaleBy(store.d3Selection as any, 1 / 1.2), - zoomTo: (zoomLevel: number) => store.d3Zoom?.scaleTo(store.d3Selection as any, zoomLevel), - transform: (transform: FlowTransform) => { - const nextTransform = zoomIdentity.translate(transform.x, transform.y).scale(transform.zoom); + return { + zoomIn: () => store.d3Zoom?.scaleBy(store.d3Selection as any, 1.2), + zoomOut: () => store.d3Zoom?.scaleBy(store.d3Selection as any, 1 / 1.2), + zoomTo: (zoomLevel: number) => store.d3Zoom?.scaleTo(store.d3Selection as any, zoomLevel), + transform: (transform: FlowTransform) => { + const nextTransform = zoomIdentity.translate(transform.x, transform.y).scale(transform.zoom); - store.d3Zoom?.transform(store.d3Selection as any, nextTransform); - }, - fitView: (options: FitViewParams = { padding: DEFAULT_PADDING, includeHiddenNodes: false }) => { - const { nodes, width, height, minZoom, maxZoom } = store; + store.d3Zoom?.transform(store.d3Selection as any, nextTransform); + }, + fitView: (options: FitViewParams = { padding: DEFAULT_PADDING, includeHiddenNodes: false }) => { + const { nodes, width, height, minZoom, maxZoom } = store; - if (!nodes.length) { - return; - } + if (!nodes.length) { + return; + } - const bounds = getRectOfNodes(options.includeHiddenNodes ? nodes : nodes.filter((node) => !node.isHidden)); - const [x, y, zoom] = getTransformForBounds( - bounds, - width, - height, - options.minZoom || minZoom, - options.maxZoom || maxZoom, - options.padding || DEFAULT_PADDING - ); - const transform = zoomIdentity.translate(x, y).scale(zoom); + const bounds = getRectOfNodes(options.includeHiddenNodes ? nodes : nodes.filter((node) => !node.isHidden)); + const [x, y, zoom] = getTransformForBounds( + bounds, + width, + height, + options.minZoom || minZoom, + options.maxZoom || maxZoom, + options.padding || DEFAULT_PADDING + ); + const transform = zoomIdentity.translate(x, y).scale(zoom); - store.d3Zoom?.transform(store.d3Selection as any, transform); - }, - setCenter: (x: number, y: number, zoom?: number) => { - const { width, height, maxZoom } = store; + store.d3Zoom?.transform(store.d3Selection as any, transform); + }, + setCenter: (x: number, y: number, zoom?: number) => { + const { width, height, maxZoom } = store; - const nextZoom = typeof zoom !== 'undefined' ? zoom : maxZoom; - const centerX = width / 2 - x * nextZoom; - const centerY = height / 2 - y * nextZoom; - const transform = zoomIdentity.translate(centerX, centerY).scale(nextZoom); + const nextZoom = typeof zoom !== 'undefined' ? zoom : maxZoom; + const centerX = width / 2 - x * nextZoom; + const centerY = height / 2 - y * nextZoom; + const transform = zoomIdentity.translate(centerX, centerY).scale(nextZoom); - store.d3Zoom?.transform(store.d3Selection as any, transform); - }, - fitBounds: (bounds: Rect, padding = DEFAULT_PADDING) => { - const { width, height, minZoom, maxZoom } = store; - const [x, y, zoom] = getTransformForBounds(bounds, width, height, minZoom, maxZoom, padding); - const transform = zoomIdentity.translate(x, y).scale(zoom); + store.d3Zoom?.transform(store.d3Selection as any, transform); + }, + fitBounds: (bounds: Rect, padding = DEFAULT_PADDING) => { + const { width, height, minZoom, maxZoom } = store; + const [x, y, zoom] = getTransformForBounds(bounds, width, height, minZoom, maxZoom, padding); + const transform = zoomIdentity.translate(x, y).scale(zoom); - store.d3Zoom?.transform(store.d3Selection as any, transform); - }, - project: (position: XYPosition) => { - const { transform, snapToGrid, snapGrid } = store; - return pointToRendererPoint(position, transform, snapToGrid, snapGrid); - }, - initialized: true - }; - } - - return initialZoomPanHelper; + store.d3Zoom?.transform(store.d3Selection as any, transform); + }, + project: (position: XYPosition) => { + const { transform, snapToGrid, snapGrid } = store; + return pointToRendererPoint(position, transform, snapToGrid, snapGrid); + }, + initialized: true + }; }; return zoomPanHelperFunctions(); diff --git a/src/index.ts b/src/index.ts index 82732f88..e45a2492 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,4 @@ -import RevueFlow from './container/RevueFlow'; -export default RevueFlow; - +export { default as default } from './container/RevueFlow'; export { default as Handle } from './components/Handle'; export { default as EdgeText } from './components/Edges/EdgeText'; export { getBezierPath } from './components/Edges/BezierEdge'; diff --git a/src/store/configure-store.ts b/src/store/configure-store.ts index 5d1f4526..5d61f5ad 100644 --- a/src/store/configure-store.ts +++ b/src/store/configure-store.ts @@ -189,15 +189,8 @@ export default function configureStore( const selectedEdges = getConnectedEdges(selectedNodes, this.edges); const nextSelectedElements = [...selectedNodes, ...selectedEdges]; - const selectedElementsChanged = !isEqual(nextSelectedElements, this.selectedElements); - const selectedElementsUpdate = selectedElementsChanged - ? nextSelectedElements.length > 0 - ? nextSelectedElements - : [] - : []; - this.userSelectionRect = nextUserSelectRect; - this.selectedElements = selectedElementsUpdate; + this.selectedElements = nextSelectedElements; }, unsetUserSelection() { const selectedNodes = this.selectedElements?.filter((node) => isNode(node) && node.__rf) as Node[]; diff --git a/src/types/index.ts b/src/types/index.ts index f174a1f9..dc8f5521 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,5 +1,5 @@ import { Selection as D3Selection, ZoomBehavior } from 'd3'; -import { DefineComponent, HTMLAttributes, PropType, VNode } from 'vue'; +import { CSSProperties, DefineComponent, HTMLAttributes, PropType, VNode } from 'vue'; import { Store } from 'pinia'; export type ElementId = string; @@ -906,3 +906,92 @@ export type RevueFlowActions = { export type RevueFlowStore = Store; export type UpdateNodeInternals = (nodeId: ElementId) => void; + +export interface RevueFlowProps extends Omit { + elements: Elements; + onElementClick?: (event: MouseEvent, element: Node | Edge) => void; + onElementsRemove?: (elements: Elements) => void; + onNodeDoubleClick?: (event: MouseEvent, node: Node) => void; + onNodeMouseEnter?: (event: MouseEvent, node: Node) => void; + onNodeMouseMove?: (event: MouseEvent, node: Node) => void; + onNodeMouseLeave?: (event: MouseEvent, node: Node) => void; + onNodeContextMenu?: (event: MouseEvent, node: Node) => void; + onNodeDragStart?: (event: MouseEvent, node: Node) => void; + onNodeDrag?: (event: MouseEvent, node: Node) => void; + onNodeDragStop?: (event: MouseEvent, node: Node) => void; + onConnect?: (connection: Edge | Connection) => void; + onConnectStart?: OnConnectStartFunc; + onConnectStop?: OnConnectStopFunc; + onConnectEnd?: OnConnectEndFunc; + onLoad?: OnLoadFunc; + onMove?: (flowTransform?: FlowTransform) => void; + onMoveStart?: (flowTransform?: FlowTransform) => void; + onMoveEnd?: (flowTransform?: FlowTransform) => void; + onSelectionChange?: (elements: Elements | null) => void; + onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void; + onSelectionDrag?: (event: MouseEvent, nodes: Node[]) => void; + onSelectionDragStop?: (event: MouseEvent, nodes: Node[]) => void; + onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void; + onPaneScroll?: (event?: WheelEvent) => void; + onPaneClick?: (event: MouseEvent) => void; + onPaneContextMenu?: (event: MouseEvent) => void; + nodeTypes?: NodeTypesType; + edgeTypes?: EdgeTypesType; + connectionMode?: ConnectionMode; + connectionLineType?: ConnectionLineType; + connectionLineStyle?: CSSProperties; + connectionLineComponent?: ConnectionLineComponent; + deleteKeyCode?: KeyCode; + selectionKeyCode?: KeyCode; + multiSelectionKeyCode?: KeyCode; + zoomActivationKeyCode?: KeyCode; + snapToGrid?: boolean; + snapGrid?: [number, number]; + onlyRenderVisibleElements?: boolean; + nodesDraggable?: boolean; + nodesConnectable?: boolean; + elementsSelectable?: boolean; + selectNodesOnDrag?: boolean; + paneMoveable?: boolean; + minZoom?: number; + maxZoom?: number; + defaultZoom?: number; + defaultPosition?: [number, number]; + translateExtent?: TranslateExtent; + nodeExtent?: NodeExtent; + arrowHeadColor?: string; + markerEndId?: string; + zoomOnScroll?: boolean; + zoomOnPinch?: boolean; + panOnScroll?: boolean; + panOnScrollSpeed?: number; + panOnScrollMode?: PanOnScrollMode; + zoomOnDoubleClick?: boolean; + onEdgeUpdate?: OnEdgeUpdateFunc; + onEdgeContextMenu?: (event: MouseEvent, edge: Edge) => void; + onEdgeMouseEnter?: (event: MouseEvent, edge: Edge) => void; + onEdgeMouseMove?: (event: MouseEvent, edge: Edge) => void; + onEdgeMouseLeave?: (event: MouseEvent, edge: Edge) => void; + onEdgeDoubleClick?: (event: MouseEvent, edge: Edge) => void; + onEdgeUpdateStart?: (event: MouseEvent, edge: Edge) => void; + onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void; + edgeUpdaterRadius?: number; + nodeTypesId?: string; + edgeTypesId?: string; +} + +export interface GraphViewProps extends Omit { + nodeTypes: NodeTypesType; + edgeTypes: EdgeTypesType; + selectionKeyCode: KeyCode; + deleteKeyCode: KeyCode; + multiSelectionKeyCode: KeyCode; + connectionLineType: ConnectionLineType; + snapToGrid: boolean; + snapGrid: [number, number]; + onlyRenderVisibleElements: boolean; + defaultZoom: number; + defaultPosition: [number, number]; + arrowHeadColor: string; + selectNodesOnDrag: boolean; +} diff --git a/yarn.lock b/yarn.lock index 8f10e52f..bc4ec3d3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -912,7 +912,7 @@ resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.1.4.tgz#c14c461ec42ea2c1556e86f60b0354341d91adc3" integrity sha512-6O45kZAmkLvzGLToBxEz4lR2W6kXohCtebV2UxjH9GXjd8X9AhEn68FN9eNanFtWNzvgw1hqd6HkPRVQalqf7Q== -"@vueuse/core@^5.1.3": +"@vueuse/core@^5.1.3", "@vueuse/core@^5.1.4": version "5.1.4" resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-5.1.4.tgz#c590bd1ff5cdd3d2caa033b65ed8cb42fc12a534" integrity sha512-iuRhSaScI1GJS4N3CFPc1GajOr6F6J1Nng1I6ocNOjLx+evss6egImx9wnuX45fxqQstnh7Vfqe3FF7+0NgoWg==