From 9d9a90e9a71d9d79a5e5b37251f73718a8328a45 Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 20 Oct 2021 17:39:24 +0200 Subject: [PATCH] update: Add slots to CustomConnectionLine.vue, Edge.vue, Node.vue --- examples/Basic/Basic.vue | 6 +- .../CustomConnectionLine.vue | 5 +- .../ConnectionLine/ConnectionLine.vue | 22 +-- src/components/Edges/Edge.vue | 50 +++-- src/components/Handle/Handle.vue | 18 +- src/components/Handle/utils.ts | 179 ------------------ src/components/Nodes/Node.vue | 21 +- src/composables/index.ts | 3 +- src/composables/useGlobalKeyHandler.ts | 31 --- src/composables/useHandle.ts | 171 +++++++++++++++++ src/composables/useResizeHandler.ts | 23 --- src/composables/useUpdateNodeInternals.ts | 9 +- src/composables/useZoom.ts | 22 +-- src/composables/useZoomPanHelper.ts | 9 +- src/container/EdgeRenderer/EdgeRenderer.vue | 26 +-- src/container/Flow/Flow.vue | 48 ++--- src/container/NodeRenderer/NodeRenderer.vue | 25 ++- src/container/SelectionPane/SelectionPane.vue | 31 +-- src/container/ZoomPane/ZoomPane.vue | 9 +- .../{configure-store.ts => useFlowStore.ts} | 8 +- src/types/composables.ts | 28 +++ src/types/connection.ts | 3 - src/types/index.ts | 1 + src/types/types.ts | 3 +- tsconfig.json | 3 +- 25 files changed, 363 insertions(+), 391 deletions(-) delete mode 100644 src/components/Handle/utils.ts delete mode 100644 src/composables/useGlobalKeyHandler.ts create mode 100644 src/composables/useHandle.ts delete mode 100644 src/composables/useResizeHandler.ts rename src/store/{configure-store.ts => useFlowStore.ts} (96%) create mode 100644 src/types/composables.ts diff --git a/examples/Basic/Basic.vue b/examples/Basic/Basic.vue index 1bd1bfb7..557a0399 100644 --- a/examples/Basic/Basic.vue +++ b/examples/Basic/Basic.vue @@ -38,7 +38,6 @@ const updatePos = () => { y: Math.random() * 400, } } - return el }) } @@ -48,10 +47,7 @@ const resetTransform = () => rfInstance.value?.setTransform({ x: 0, y: 0, zoom: const toggleClassnames = () => { elements.value = elements.value.map((el: FlowElement) => { - if (isNode(el)) { - el.className = el.className === 'light' ? 'dark' : 'light' - } - + if (isNode(el)) el.className = el.className === 'light' ? 'dark' : 'light' return el }) } diff --git a/examples/CustomConnectionLine/CustomConnectionLine.vue b/examples/CustomConnectionLine/CustomConnectionLine.vue index f604c060..07e2391a 100644 --- a/examples/CustomConnectionLine/CustomConnectionLine.vue +++ b/examples/CustomConnectionLine/CustomConnectionLine.vue @@ -15,7 +15,10 @@ const onElementsRemove = (elementsToRemove: Elements) => const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value as Elements)) diff --git a/src/components/ConnectionLine/ConnectionLine.vue b/src/components/ConnectionLine/ConnectionLine.vue index de6e58dd..d3cfc4ae 100644 --- a/src/components/ConnectionLine/ConnectionLine.vue +++ b/src/components/ConnectionLine/ConnectionLine.vue @@ -1,6 +1,6 @@ diff --git a/src/components/Edges/Edge.vue b/src/components/Edges/Edge.vue index 35685c53..403212a2 100644 --- a/src/components/Edges/Edge.vue +++ b/src/components/Edges/Edge.vue @@ -2,16 +2,14 @@ import EdgeAnchor from './EdgeAnchor.vue' import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '~/container/EdgeRenderer/utils' import { isEdge } from '~/utils/graph' -import { ConnectionMode, Dimensions, Edge, EdgeType, Position, Transform } from '~/types' -import { onMouseDown } from '~/components/Handle/utils' +import { ConnectionMode, Edge, EdgeType, Position } from '~/types' import { Hooks, Store } from '~/context' +import { useHandle } from '~/composables' interface EdgeProps { type: EdgeType edge: Edge nodes: ReturnType - dimensions: Dimensions - transform: Transform markerEndId?: string edgeUpdaterRadius?: number } @@ -68,6 +66,7 @@ const onEdgeMouseMove = (event: MouseEvent) => hooks.edgeMouseMove.trigger({ eve const onEdgeMouseLeave = (event: MouseEvent) => hooks.edgeMouseLeave.trigger({ event, edge: props.edge }) +const handler = useHandle() const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => { const nodeId = isSourceHandle ? props.edge.target : props.edge.source const handleId = isSourceHandle ? props.edge.targetHandle : props.edge.sourceHandle @@ -75,8 +74,7 @@ const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => { const isTarget = isSourceHandle hooks.edgeUpdateStart.trigger({ event, edge: props.edge }) - handleId && - onMouseDown(event, store, hooks, handleId, nodeId, isTarget, isValidConnection, isSourceHandle ? 'target' : 'source') + handleId && handler(event, handleId, nodeId, isTarget, isValidConnection, isSourceHandle ? 'target' : 'source') } const onEdgeUpdaterSourceMouseDown = (event: MouseEvent) => { @@ -95,9 +93,9 @@ const isVisible = ({ sourceX, sourceY, targetX, targetY }: ReturnType !props.edge.isHidden && isVisible(edgePos.value)) @mousemove="onEdgeMouseMove" @mouseleave="onEdgeMouseLeave" > - + > + + -import { ElementId, Position } from '~/types' -import { onMouseDown, ValidConnectionFunc } from '~/components/Handle/utils' +import { ElementId, Position, ValidConnectionFunc } from '~/types' import { Hooks, Store } from '~/context' +import { useHandle } from '~/composables' interface HandleProps { id?: string @@ -22,19 +22,9 @@ const store = inject(Store)! const hooks = inject(Hooks)! const nodeId = inject('NodeIdContext')! +const handler = useHandle() const onMouseDownHandler = (event: MouseEvent) => - onMouseDown( - event, - store, - hooks, - props.id, - nodeId, - props.type === 'target', - props.isValidConnection ?? - function () { - return true - }, - ) + handler(event, props.id, nodeId, props.type === 'target', props.isValidConnection) diff --git a/src/composables/index.ts b/src/composables/index.ts index 03170c98..fbb01f9b 100644 --- a/src/composables/index.ts +++ b/src/composables/index.ts @@ -1,7 +1,6 @@ -export { default as useGlobalKeyHandler } from './useGlobalKeyHandler' +export { default as useHandle } from './useHandle' export { default as useHooks } from './useHooks' export { default as useKeyPress } from './useKeyPress' -export { default as useResizeHandler } from './useResizeHandler' export { default as useUpdateNodeInternals } from './useUpdateNodeInternals' export { default as useZoom } from './useZoom' export { default as useZoomPanHelper } from './useZoomPanHelper' diff --git a/src/composables/useGlobalKeyHandler.ts b/src/composables/useGlobalKeyHandler.ts deleted file mode 100644 index ebd23dc1..00000000 --- a/src/composables/useGlobalKeyHandler.ts +++ /dev/null @@ -1,31 +0,0 @@ -import useKeyPress from './useKeyPress' -import { isNode, getConnectedEdges } from '~/utils/graph' -import { Elements, KeyCode, ElementId, FlowElement } from '~/types' -import { Store } from '~/context' - -interface HookParams { - deleteKeyCode: KeyCode - multiSelectionKeyCode: KeyCode - onElementsRemove?: (elements: Elements) => void -} - -export default ({ deleteKeyCode, multiSelectionKeyCode, onElementsRemove = () => {} }: HookParams): void => { - const store = inject(Store)! - - useKeyPress(deleteKeyCode, (keyPressed) => { - if (keyPressed && store.selectedElements) { - const selectedNodes = store.selectedElements.filter(isNode) - const connectedEdges = getConnectedEdges(selectedNodes, store.edges) - const elementsToRemove = [...store.selectedElements, ...connectedEdges].reduce( - (res, item) => res.set(item.id, item), - new Map(), - ) - - onElementsRemove(Array.from(elementsToRemove.values())) - store.unsetNodesSelection() - store.resetSelectedElements() - } - }) - - useKeyPress(multiSelectionKeyCode, (keyPressed) => (store.multiSelectionActive = keyPressed)) -} diff --git a/src/composables/useHandle.ts b/src/composables/useHandle.ts new file mode 100644 index 00000000..ddac81ca --- /dev/null +++ b/src/composables/useHandle.ts @@ -0,0 +1,171 @@ +import { getHostForElement } from '~/utils' +import { Hooks, Store } from '~/context' +import { Connection, ConnectionMode, ElementId, HandleType, ValidConnectionFunc } from '~/types' + +type Result = { + elementBelow: Element | null + isValid: boolean + connection: Connection + isHoveringHandle: boolean +} + +// checks if element below mouse is a handle and returns connection in form of an object { source: 123, target: 312 } +export function checkElementBelowIsValid( + event: MouseEvent, + connectionMode: ConnectionMode, + isTarget: boolean, + nodeId: ElementId, + handleId: ElementId | null, + isValidConnection: ValidConnectionFunc, + doc: Document, +) { + const elementBelow = doc.elementFromPoint(event.clientX, event.clientY) + const elementBelowIsTarget = elementBelow?.classList.contains('target') || false + const elementBelowIsSource = elementBelow?.classList.contains('source') || false + + const result: Result = { + elementBelow, + isValid: false, + connection: { source: null, target: null, sourceHandle: null, targetHandle: null }, + isHoveringHandle: false, + } + + if (elementBelow && (elementBelowIsTarget || elementBelowIsSource)) { + result.isHoveringHandle = true + + // in strict mode we don't allow target to target or source to source connections + const isValid = + connectionMode === ConnectionMode.Strict ? (isTarget && elementBelowIsSource) || (!isTarget && elementBelowIsTarget) : true + + if (isValid) { + const elementBelowNodeId = elementBelow.getAttribute('data-nodeid') + const elementBelowHandleId = elementBelow.getAttribute('data-handleid') + const connection: Connection = isTarget + ? { + source: elementBelowNodeId, + sourceHandle: elementBelowHandleId, + target: nodeId, + targetHandle: handleId, + } + : { + source: nodeId, + sourceHandle: handleId, + target: elementBelowNodeId, + targetHandle: elementBelowHandleId, + } + + result.connection = connection + result.isValid = isValidConnection(connection) + } + } + + return result +} + +function resetRecentHandle(hoveredHandle: Element): void { + hoveredHandle?.classList.remove('revue-flow__handle-valid') + hoveredHandle?.classList.remove('revue-flow__handle-connecting') +} + +export default function () { + const store = inject(Store)! + const hooks = inject(Hooks)! + + return ( + event: MouseEvent, + handleId: ElementId, + nodeId: ElementId, + isTarget: boolean, + isValidConnection: ValidConnectionFunc = () => { + return true + }, + elementEdgeUpdaterType?: HandleType, + ) => { + const revueFlowNode = (event.target as Element).closest('.revue-flow') + // when revue-flow is used inside a shadow root we can't use document + const doc = getHostForElement(event.target as HTMLElement) + + if (!doc) return + + const elementBelow = doc.elementFromPoint(event.clientX, event.clientY) + const elementBelowIsTarget = elementBelow?.classList.contains('target') + const elementBelowIsSource = elementBelow?.classList.contains('source') + + if (!revueFlowNode || (!elementBelowIsTarget && !elementBelowIsSource && !elementEdgeUpdaterType)) return + + const handleType = elementEdgeUpdaterType || (elementBelowIsTarget ? 'target' : 'source') + const containerBounds = revueFlowNode.getBoundingClientRect() + let recentHoveredHandle: Element + + store.connectionPosition.x = event.clientX - containerBounds.left + store.connectionPosition.y = event.clientY - containerBounds.top + + store.setConnectionNodeId({ + connectionNodeId: nodeId, + connectionHandleId: handleId, + connectionHandleType: handleType, + }) + hooks.connectStart.trigger({ event, params: { nodeId, handleId, handleType } }) + + function onMouseMove(event: MouseEvent) { + store.connectionPosition.x = event.clientX - containerBounds.left + store.connectionPosition.y = event.clientY - containerBounds.top + + const { connection, elementBelow, isValid, isHoveringHandle } = checkElementBelowIsValid( + event, + store.connectionMode, + isTarget, + nodeId, + handleId, + isValidConnection, + doc, + ) + + if (!isHoveringHandle) { + return resetRecentHandle(recentHoveredHandle) + } + + const isOwnHandle = connection.source === connection.target + + if (!isOwnHandle && elementBelow) { + recentHoveredHandle = elementBelow + elementBelow.classList.add('revue-flow__handle-connecting') + elementBelow.classList.toggle('revue-flow__handle-valid', isValid) + } + } + + function onMouseUp(event: MouseEvent) { + const { connection, isValid } = checkElementBelowIsValid( + event, + store.connectionMode, + isTarget, + nodeId, + handleId, + isValidConnection, + doc, + ) + + hooks.connectStop.trigger(event) + + if (isValid) { + hooks.connect.trigger(connection) + } + + hooks.connectEnd.trigger(event) + + if (elementEdgeUpdaterType) { + hooks.edgeUpdateEnd.trigger({ event } as any) + } + + resetRecentHandle(recentHoveredHandle) + store.setConnectionNodeId({ connectionNodeId: undefined, connectionHandleId: undefined, connectionHandleType: undefined }) + store.connectionPosition = { x: NaN, y: NaN } + + doc.removeEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject) + doc.removeEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject) + } + + doc.addEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject) + doc.addEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject) + } +} diff --git a/src/composables/useResizeHandler.ts b/src/composables/useResizeHandler.ts deleted file mode 100644 index cd35613f..00000000 --- a/src/composables/useResizeHandler.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { Ref } from 'vue' -import { getDimensions } from '~/utils' -import { Dimensions } from '~/types' - -export default function (el: Ref) { - const dimensions = ref({ width: 0, height: 0 }) - const updateDimensions = () => { - const unrefEl = unrefElement(el) - if (!unrefEl) return - - const size = getDimensions(unrefEl as HTMLDivElement) - if (size.height === 0 || size.width === 0) - console.log('The revue Flow parent container needs a width and a height to render the graph.') - else dimensions.value = size - } - - useEventListener(window, 'resize', updateDimensions) - useResizeObserver(el, () => updateDimensions()) - - until(el).toBeTruthy().then(updateDimensions) - - return dimensions -} diff --git a/src/composables/useUpdateNodeInternals.ts b/src/composables/useUpdateNodeInternals.ts index 2418bb3f..fafb4dbc 100644 --- a/src/composables/useUpdateNodeInternals.ts +++ b/src/composables/useUpdateNodeInternals.ts @@ -1,7 +1,8 @@ -import { ElementId, RevueFlowStore, UpdateNodeInternals } from '../types' +import { ElementId, UpdateNodeInternals } from '~/types' +import { Store } from '~/context' -function useUpdateNodeInternals(): UpdateNodeInternals { - const store = inject('store')! +export default function (): UpdateNodeInternals { + const store = inject(Store)! return (id: ElementId) => { const nodeElement: HTMLDivElement | null = document.querySelector(`.revue-flow__node[data-id="${id}"]`) @@ -11,5 +12,3 @@ function useUpdateNodeInternals(): UpdateNodeInternals { } } } - -export default useUpdateNodeInternals diff --git a/src/composables/useZoom.ts b/src/composables/useZoom.ts index 2cdcbc00..01ac5872 100644 --- a/src/composables/useZoom.ts +++ b/src/composables/useZoom.ts @@ -2,7 +2,7 @@ import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom' import { pointer, select } from 'd3-selection' import { Ref } from 'vue' import { get } from '@vueuse/core' -import { D3Selection, D3Zoom, FlowTransform, KeyCode, PanOnScrollMode, Transform } from '~/types' +import { FlowTransform, PanOnScrollMode, Transform, UseZoom, UseZoomOptions } from '~/types' import { clamp } from '~/utils' import useKeyPress from '~/composables/useKeyPress' import { Hooks, Store } from '~/context' @@ -16,26 +16,6 @@ const eventToFlowTransform = (eventTransform: ZoomTransform): FlowTransform => ( zoom: eventTransform.k, }) -interface UseZoomOptions { - selectionKeyCode?: KeyCode - zoomActivationKeyCode?: KeyCode - paneMoveable?: boolean - defaultZoom?: number - defaultPosition?: [number, number] - zoomOnScroll?: boolean - zoomOnPinch?: boolean - panOnScroll?: boolean - panOnScrollSpeed?: number - panOnScrollMode?: PanOnScrollMode - zoomOnDoubleClick?: boolean -} - -interface UseZoom { - transform: Ref - d3Zoom: Ref - d3Selection: Ref -} - export default function (el: Ref, options: UseZoomOptions): UseZoom { const { selectionKeyCode = 'Shift', diff --git a/src/composables/useZoomPanHelper.ts b/src/composables/useZoomPanHelper.ts index 4d87506b..5add3b85 100644 --- a/src/composables/useZoomPanHelper.ts +++ b/src/composables/useZoomPanHelper.ts @@ -13,13 +13,10 @@ export default function (): UseZoomPanHelper { zoomTo: (zoomLevel: number) => store.d3Selection && store.d3Zoom?.scaleTo(store.d3Selection, zoomLevel), transform: (transform: FlowTransform) => { const nextTransform = zoomIdentity.translate(transform.x, transform.y).scale(transform.zoom) - store.d3Selection && store.d3Zoom?.transform(store.d3Selection, nextTransform) }, fitView: (options: FitViewParams = { padding: DEFAULT_PADDING, includeHiddenNodes: false }) => { - if (!store.nodes.length) { - return - } + if (!store.nodes.length) return const bounds = getRectOfNodes(options.includeHiddenNodes ? store.nodes : store.nodes.filter((node) => !node.isHidden)) const [x, y, zoom] = getTransformForBounds( @@ -55,8 +52,6 @@ export default function (): UseZoomPanHelper { store.d3Selection && store.d3Zoom?.transform(store.d3Selection, transform) }, - project: (position: XYPosition) => { - return pointToRendererPoint(position, store.transform, store.snapToGrid, store.snapGrid) - }, + project: (position: XYPosition) => pointToRendererPoint(position, store.transform, store.snapToGrid, store.snapGrid), } } diff --git a/src/container/EdgeRenderer/EdgeRenderer.vue b/src/container/EdgeRenderer/EdgeRenderer.vue index 07ec9058..5d42a588 100644 --- a/src/container/EdgeRenderer/EdgeRenderer.vue +++ b/src/container/EdgeRenderer/EdgeRenderer.vue @@ -4,25 +4,20 @@ import { getSourceTargetNodes } from './utils' import MarkerDefinitions from './MarkerDefinitions.vue' import Edge from '~/components/Edges/Edge.vue' import ConnectionLine from '~/components/ConnectionLine/ConnectionLine.vue' -import { ConnectionLineType, CustomConnectionLine, Dimensions, EdgeType, Transform } from '~/types' +import { ConnectionLineType, EdgeType } from '~/types' import { Store } from '~/context' interface EdgeRendererProps { edgeTypes: Record - dimensions: Dimensions - transform: Transform connectionLineType?: ConnectionLineType connectionLineStyle?: CSSProperties - customConnectionLine?: CustomConnectionLine arrowHeadColor?: string markerEndId?: string edgeUpdaterRadius?: number } const props = withDefaults(defineProps(), { - transform: () => [0, 0, 1], arrowHeadColor: '#b1b1b7', - dimensions: () => ({ width: 0, height: 0 }), connectionLineType: ConnectionLineType.Bezier, edgeUpdaterRadius: 10, }) @@ -35,10 +30,10 @@ const connectionLineVisible = computed( ) diff --git a/src/container/Flow/Flow.vue b/src/container/Flow/Flow.vue index de5c0a0f..5f8c099b 100644 --- a/src/container/Flow/Flow.vue +++ b/src/container/Flow/Flow.vue @@ -13,12 +13,11 @@ import { PanOnScrollMode, NodeType, EdgeType, - CustomConnectionLine, KeyCode, TranslateExtent, NodeExtent, } from '~/types' -import configureStore from '~/store/configure-store' +import useFlowStore from '~/store/useFlowStore' import { initialState } from '~/store' import { DefaultNode, InputNode, OutputNode } from '~/components/Nodes' import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges' @@ -34,7 +33,6 @@ export interface FlowProps { connectionMode?: ConnectionMode connectionLineType?: ConnectionLineType connectionLineStyle?: CSSProperties - customConnectionLine?: CustomConnectionLine deleteKeyCode?: KeyCode selectionKeyCode?: KeyCode multiSelectionKeyCode?: KeyCode @@ -118,7 +116,7 @@ const defaultEdgeTypes: Record = { let store = inject(Store)! if (!store) { - store = configureStore({ + store = useFlowStore({ ...initialState, ...props, })() @@ -160,25 +158,31 @@ const edgeTypes = createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes }) :pan-on-scroll-mode="props.panOnScrollMode" :pane-moveable="props.paneMoveable" > - + + + + diff --git a/src/container/NodeRenderer/NodeRenderer.vue b/src/container/NodeRenderer/NodeRenderer.vue index 0fae89dc..2ffb65e3 100644 --- a/src/container/NodeRenderer/NodeRenderer.vue +++ b/src/container/NodeRenderer/NodeRenderer.vue @@ -1,19 +1,14 @@ diff --git a/src/container/ZoomPane/ZoomPane.vue b/src/container/ZoomPane/ZoomPane.vue index 99562b7c..fae7ff83 100644 --- a/src/container/ZoomPane/ZoomPane.vue +++ b/src/container/ZoomPane/ZoomPane.vue @@ -1,6 +1,6 @@ diff --git a/src/store/configure-store.ts b/src/store/useFlowStore.ts similarity index 96% rename from src/store/configure-store.ts rename to src/store/useFlowStore.ts index ddcad4c2..2eab092b 100644 --- a/src/store/configure-store.ts +++ b/src/store/useFlowStore.ts @@ -1,6 +1,6 @@ import { setActivePinia, createPinia, defineStore, StoreDefinition } from 'pinia' import isEqual from 'fast-deep-equal' -import { Edge, Node, NodeDiffUpdate, RevueFlowState, RevueFlowActions, XYPosition } from '~/types' +import { Edge, FlowState, Node, NodeDiffUpdate, RevueFlowActions, XYPosition } from '~/types' import { clampPosition, getDimensions } from '~/utils' import { getConnectedEdges, getNodesInside, getRectOfNodes, isEdge, isNode, parseEdge, parseNode } from '~/utils/graph' import { getHandleBounds } from '~/components/Nodes/utils' @@ -11,9 +11,7 @@ type NextElements = { } const pinia = createPinia() -export default function configureStore( - preloadedState: RevueFlowState, -): StoreDefinition { +export default function useFlowStore(preloadedState: FlowState): StoreDefinition { setActivePinia(pinia) return defineStore({ @@ -166,7 +164,7 @@ export default function configureStore( const startX = this.userSelectionRect.startX || 0 const startY = this.userSelectionRect.startY || 0 - const nextUserSelectRect: RevueFlowState['userSelectionRect'] = { + const nextUserSelectRect: FlowState['userSelectionRect'] = { ...this.userSelectionRect, x: mousePos.x < startX ? mousePos.x : this.userSelectionRect.x, y: mousePos.y < startY ? mousePos.y : this.userSelectionRect.y, diff --git a/src/types/composables.ts b/src/types/composables.ts new file mode 100644 index 00000000..ff71c2e7 --- /dev/null +++ b/src/types/composables.ts @@ -0,0 +1,28 @@ +import { Ref } from 'vue' +import { ElementId, Transform } from './types' +import { D3Zoom, D3Selection, PanOnScrollMode, KeyCode } from './panel' +import { Connection } from '@/src' + +export type UpdateNodeInternals = (nodeId: ElementId) => void + +export interface UseZoomOptions { + selectionKeyCode?: KeyCode + zoomActivationKeyCode?: KeyCode + paneMoveable?: boolean + defaultZoom?: number + defaultPosition?: [number, number] + zoomOnScroll?: boolean + zoomOnPinch?: boolean + panOnScroll?: boolean + panOnScrollSpeed?: number + panOnScrollMode?: PanOnScrollMode + zoomOnDoubleClick?: boolean +} + +export interface UseZoom { + transform: Ref + d3Zoom: Ref + d3Selection: Ref +} + +export type ValidConnectionFunc = (connection: Connection) => boolean diff --git a/src/types/connection.ts b/src/types/connection.ts index af6780f1..a6eb80dc 100644 --- a/src/types/connection.ts +++ b/src/types/connection.ts @@ -1,4 +1,3 @@ -import { DefineComponent } from 'vue' import { ElementId, Position } from './types' import { HandleType } from '~/types/handle' @@ -27,8 +26,6 @@ export type ConnectionLineComponentProps = { connectionLineType: ConnectionLineType } -export type CustomConnectionLine = DefineComponent - export type OnConnectFunc = (connection: Connection) => void export type OnConnectStartParams = { nodeId: ElementId | undefined diff --git a/src/types/index.ts b/src/types/index.ts index 3f68a791..289c81d1 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -7,3 +7,4 @@ export * from './node' export * from './panel' export * from './store' export * from './hooks' +export * from './composables' diff --git a/src/types/types.ts b/src/types/types.ts index b2c1a521..591ef2dd 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -1,7 +1,7 @@ import { CSSProperties, HTMLAttributes } from 'vue' import { Edge, EdgeType } from './edge' import { Node, NodeExtent, NodeType, TranslateExtent } from './node' -import { CustomConnectionLine, ConnectionLineType, ConnectionMode } from '~/types/connection' +import { ConnectionLineType, ConnectionMode } from '~/types/connection' import { KeyCode, PanOnScrollMode } from '~/types/panel' export type ElementId = string @@ -96,7 +96,6 @@ export interface FlowOptions extends Omit { connectionMode?: ConnectionMode connectionLineType?: ConnectionLineType connectionLineStyle?: CSSProperties - connectionLineComponent?: CustomConnectionLine deleteKeyCode?: KeyCode selectionKeyCode?: KeyCode multiSelectionKeyCode?: KeyCode diff --git a/tsconfig.json b/tsconfig.json index 10948d86..27c103d3 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -32,7 +32,6 @@ "exclude": [ "node_modules", "build", - "dist", - "examples" + "dist" ] }