alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add path alias for src

Browse Source 
Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-11-06 09:38:02 +01:00
parent 27c72e0022
commit aaf5f608f5
52 changed files with 299 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/nuxt.config.ts
+1
View File
@@ -11,6 +11,7 @@ export default defineNuxtConfig({
},
vite: {
alias: {
dagre: resolve('./node_modules/dagre'),
vue: resolve('./node_modules/vue'),
},
resolve: {
docs/pages/examples/initialLayoutingElements.ts
-71
View File
@@ -1,71 +0,0 @@
import { Elements, XYPosition } from '@braks/vue-flow'
const position: XYPosition = { x: 0, y: 0 }
const elements: Elements = [
{
id: '1',
type: 'input',
data: { label: 'input' },
position,
},
{
id: '2',
data: { label: 'node 2' },
position,
},
{
id: '2a',
data: { label: 'node 2a' },
position,
},
{
id: '2b',
data: { label: 'node 2b' },
position,
},
{
id: '2c',
data: { label: 'node 2c' },
position,
},
{
id: '2d',
data: { label: 'node 2d' },
position,
},
{
id: '3',
data: { label: 'node 3' },
position,
},
{
id: '4',
data: { label: 'node 4' },
position,
},
{
id: '5',
data: { label: 'node 5' },
position,
},
{
id: '6',
type: 'output',
data: { label: 'output' },
position,
},
{ id: '7', type: 'output', data: { label: 'output' }, position: { x: 400, y: 450 } },
{ id: 'e12', source: '1', target: '2', type: 'smoothstep', animated: true },
{ id: 'e13', source: '1', target: '3', type: 'smoothstep', animated: true },
{ id: 'e22a', source: '2', target: '2a', type: 'smoothstep', animated: true },
{ id: 'e22b', source: '2', target: '2b', type: 'smoothstep', animated: true },
{ id: 'e22c', source: '2', target: '2c', type: 'smoothstep', animated: true },
{ id: 'e2c2d', source: '2c', target: '2d', type: 'smoothstep', animated: true },
{ id: 'e45', source: '4', target: '5', type: 'smoothstep', animated: true },
{ id: 'e56', source: '5', target: '6', type: 'smoothstep', animated: true },
{ id: 'e57', source: '5', target: '7', type: 'smoothstep', animated: true },
]
export default elements
docs/pages/examples/layouting.vue
+69 -2
View File
@@ -12,8 +12,76 @@ import {
NodeExtent,
Position,
removeElements,
XYPosition,
} from '@braks/vue-flow'
import initialElements from './initialLayoutingElements'
const position: XYPosition = { x: 0, y: 0 }
const initialElements: Elements = [
{
id: '1',
type: 'input',
data: { label: 'input' },
position,
},
{
id: '2',
data: { label: 'node 2' },
position,
},
{
id: '2a',
data: { label: 'node 2a' },
position,
},
{
id: '2b',
data: { label: 'node 2b' },
position,
},
{
id: '2c',
data: { label: 'node 2c' },
position,
},
{
id: '2d',
data: { label: 'node 2d' },
position,
},
{
id: '3',
data: { label: 'node 3' },
position,
},
{
id: '4',
data: { label: 'node 4' },
position,
},
{
id: '5',
data: { label: 'node 5' },
position,
},
{
id: '6',
type: 'output',
data: { label: 'output' },
position,
},
{ id: '7', type: 'output', data: { label: 'output' }, position: { x: 400, y: 450 } },
{ id: 'e12', source: '1', target: '2', type: 'smoothstep', animated: true },
{ id: 'e13', source: '1', target: '3', type: 'smoothstep', animated: true },
{ id: 'e22a', source: '2', target: '2a', type: 'smoothstep', animated: true },
{ id: 'e22b', source: '2', target: '2b', type: 'smoothstep', animated: true },
{ id: 'e22c', source: '2', target: '2c', type: 'smoothstep', animated: true },
{ id: 'e2c2d', source: '2c', target: '2d', type: 'smoothstep', animated: true },
{ id: 'e45', source: '4', target: '5', type: 'smoothstep', animated: true },
{ id: 'e56', source: '5', target: '6', type: 'smoothstep', animated: true },
{ id: 'e57', source: '5', target: '7', type: 'smoothstep', animated: true },
]
const dagreGraph = new dagre.graphlib.Graph()
dagreGraph.setDefaultEdgeLabel(() => ({}))
@@ -51,7 +119,6 @@ const onLayout = (direction: string) => {
return el
})
console.log(elements.value)
}
</script>
<template>
docs/pages/examples/stress.vue
+3 -5
View File
@@ -43,8 +43,6 @@ function getElements(xElements = 10, yElements = 10): Elements {
return initialElements
}
const buttonWrapperStyles: CSSProperties = { position: 'absolute', right: 10, top: 10, zIndex: 4 }
const onLoad = (flowInstance: FlowInstance) => {
flowInstance.fitView()
console.log(flowInstance.getElements())
@@ -82,9 +80,9 @@ const updateElements = () => {
<Controls />
<Background />
<div :style="buttonWrapperStyles">
<button style="margin-right: 5px" @click="updatePos">change pos</button>
<button @click="updateElements">update elements</button>
<div class="absolute right-[10px] top-[10px] z-4">
<button class="button" @click="updatePos">change pos</button>
<button class="button" @click="updateElements">update elements</button>
</div>
</Flow>
</template>
examples/Basic/Basic.vue
+4 -4
View File
@@ -13,7 +13,7 @@ import {
isNode,
removeElements,
Node,
} from '@braks/vue-flow'
} from '~/index'
const onNodeDragStop = ({ node }: { node: Node }) => console.log('drag stop', node)
const onElementClick = ({ node }: { node: Node }) => console.log('click', node)
@@ -48,9 +48,9 @@ const updatePos = () => {
const logToObject = () => console.log(rfInstance.value?.toObject())
const resetTransform = () => rfInstance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
const toggleClassnames = () => {
const toggleclasss = () => {
elements.value = elements.value.map((el: FlowElement) => {
if (isNode(el)) el.className = el.className === 'light' ? 'dark' : 'light'
if (isNode(el)) el.class = el.class === 'light' ? 'dark' : 'light'
return el
})
}
@@ -75,7 +75,7 @@ const toggleClassnames = () => {
<div style="position: absolute; right: 10px; top: 10px; z-index: 4">
<button style="margin-right: 5px" @click="resetTransform">reset transform</button>
<button style="margin-right: 5px" @click="updatePos">change pos</button>
<button style="margin-right: 5px" @click="toggleClassnames">toggle classnames</button>
<button style="margin-right: 5px" @click="toggleclasss">toggle classs</button>
<button @click="logToObject">toObject</button>
</div>
</Flow>
examples/EdgeTypes/EdgeTypesExample.vue
-3
View File
@@ -1,7 +1,4 @@
<script lang="ts" setup>
/**
* Example for checking the different edge types and source and target positions
*/
import { getElements } from './utils'
import { Flow, removeElements, addEdge, MiniMap, Controls, Background, FlowInstance, Connection, Edge, Elements } from '~/index'
examples/Edges/EdgesExample.vue
+1 -1
View File
@@ -29,7 +29,7 @@ const initialElements: Elements = [
{ id: '7', type: 'output', data: { label: 'Output 7' }, position: { x: 250, y: 550 } },
{ id: '8', type: 'output', data: { label: 'Output 8' }, position: { x: 525, y: 600 } },
{ id: '9', type: 'output', data: { label: 'Output 9' }, position: { x: 675, y: 500 } },
{ id: 'e1-2', source: '1', target: '2', label: 'bezier edge (default)', className: 'normal-edge' },
{ id: 'e1-2', source: '1', target: '2', label: 'bezier edge (default)', class: 'normal-edge' },
{ id: 'e2-2a', source: '2', target: '2a', type: 'smoothstep', label: 'smoothstep edge' },
{ id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
{ id: 'e3-4', source: '3', target: '4', type: 'straight', label: 'straight edge' },
examples/MultiFlows/Flow.vue
+4 -4
View File
@@ -1,10 +1,10 @@
<script lang="ts" setup>
import { Flow, Background, Connection, Elements, Edge, removeElements, addEdge } from '~/index'
const initialElements: Elements = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, class: 'light' },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, class: 'light' },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, class: 'light' },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, class: 'light' },
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' },
]
examples/Switch/SwitchExample.vue
+9 -9
View File
@@ -5,20 +5,20 @@ const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', n
const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
const elementsA: Elements = [
{ id: '1a', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
{ id: '2a', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
{ id: '3a', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
{ id: '4a', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
{ id: '1a', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, class: 'light' },
{ id: '2a', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, class: 'light' },
{ id: '3a', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, class: 'light' },
{ id: '4a', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, class: 'light' },
{ id: 'e1-2', source: '1a', target: '2a' },
{ id: 'e1-3', source: '1a', target: '3a' },
]
const elementsB: Elements = [
{ id: 'inputb', type: 'input', data: { label: 'Input' }, position: { x: 300, y: 5 }, className: 'light' },
{ id: '1b', data: { label: 'Node 1' }, position: { x: 0, y: 100 }, className: 'light' },
{ id: '2b', data: { label: 'Node 2' }, position: { x: 200, y: 100 }, className: 'light' },
{ id: '3b', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
{ id: '4b', data: { label: 'Node 4' }, position: { x: 600, y: 100 }, className: 'light' },
{ id: 'inputb', type: 'input', data: { label: 'Input' }, position: { x: 300, y: 5 }, class: 'light' },
{ id: '1b', data: { label: 'Node 1' }, position: { x: 0, y: 100 }, class: 'light' },
{ id: '2b', data: { label: 'Node 2' }, position: { x: 200, y: 100 }, class: 'light' },
{ id: '3b', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, class: 'light' },
{ id: '4b', data: { label: 'Node 4' }, position: { x: 600, y: 100 }, class: 'light' },
{ id: 'e1b', source: 'inputb', target: '1b' },
{ id: 'e2b', source: 'inputb', target: '2b' },
examples/ZoomPanHelper/ZoomPanHelperExample.vue
+4 -4
View File
@@ -14,10 +14,10 @@ import {
} from '~/index'
const initialElements: Elements = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, class: 'light' },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, class: 'light' },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, class: 'light' },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, class: 'light' },
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' },
]
index.html
+13
View File
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/examples/main.ts"></script>
</body>
</html>
package.json
+5
View File
@@ -24,6 +24,7 @@
"dist"
],
"scripts": {
"dev": "vite",
"build": "vite build && vue-tsc --declaration --emitDeclarationOnly",
"prepublishOnly": "yarn build",
"test": "exit 0;",
@@ -43,12 +44,15 @@
"devDependencies": {
"@antfu/eslint-config": "^0.9.0",
"@rollup/plugin-replace": "^2.4.2",
"@types/dagre": "^0.7.46",
"@vitejs/plugin-vue": "^1.9.3",
"@vue/compiler-sfc": "^3.2.21",
"autoprefixer": "^10.3.7",
"dagre": "^0.8.5",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.1",
"localforage": "^1.10.0",
"np": "^7.5.0",
"postcss-nested": "^5.0.6",
"prettier": "^2.4.1",
@@ -57,6 +61,7 @@
"vite": "^2.6.10",
"vite-svg-loader": "^2.2.0",
"vue": "^3.2.21",
"vue-router": "^4.0.12",
"vue-tsc": "^0.28.7"
},
"peerDependencies": {
src/additional-components/Background/Background.vue
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts" setup>
import { SVGAttributes } from 'vue'
import { BackgroundVariant } from '../../types'
import { useStore } from '../../composables'
import { BackgroundVariant } from '~/types'
import { useStore } from '~/composables'
export interface BackgroundProps extends SVGAttributes {
variant?: BackgroundVariant
src/additional-components/Controls/Controls.vue
+7 -7
View File
@@ -1,13 +1,13 @@
<script lang="ts" setup>
import { HTMLAttributes } from 'vue'
import PlusIcon from '../../assets/icons/plus.svg'
import MinusIcon from '../../assets/icons/minus.svg'
import Fitview from '../../assets/icons/fitview.svg'
import Lock from '../../assets/icons/lock.svg'
import Unlock from '../../assets/icons/unlock.svg'
import { FitViewParams } from '../../types'
import { useZoomPanHelper, useStore } from '../../composables'
import ControlButton from './ControlButton.vue'
import PlusIcon from '~/assets/icons/plus.svg'
import MinusIcon from '~/assets/icons/minus.svg'
import Fitview from '~/assets/icons/fitview.svg'
import Lock from '~/assets/icons/lock.svg'
import Unlock from '~/assets/icons/unlock.svg'
import { FitViewParams } from '~/types'
import { useZoomPanHelper, useStore } from '~/composables'
export interface ControlProps extends HTMLAttributes {
showZoom?: boolean
src/additional-components/MiniMap/MiniMap.vue
+3 -3
View File
@@ -1,9 +1,9 @@
<script lang="ts" setup>
import { HTMLAttributes } from 'vue'
import { getBoundsofRects, getRectOfNodes } from '../../utils'
import { Node } from '../../types'
import { useStore, useWindow } from '../../composables'
import MiniMapNode from './MiniMapNode.vue'
import { getBoundsofRects, getRectOfNodes } from '~/utils'
import { Node } from '~/types'
import { useStore, useWindow } from '~/composables'
type StringFunc = (node: Node) => string
type ShapeRendering = 'inherit' | 'auto' | 'geometricPrecision' | 'optimizeSpeed' | 'crispEdges' | undefined
src/components/ConnectionLine/ConnectionLine.vue
+2 -2
View File
@@ -1,8 +1,8 @@
<script lang="ts" setup>
import { CSSProperties } from 'vue'
import { ConnectionLineType, HandleElement, Node, Position } from '../../types'
import { getBezierPath, getSmoothStepPath } from '../Edges/utils'
import { useStore } from '../../composables'
import { ConnectionLineType, HandleElement, Node, Position } from '~/types'
import { useStore } from '~/composables'
interface ConnectionLineProps {
sourceNode: Node
src/components/Edges/BezierEdge.vue
+1 -1
View File
@@ -1,8 +1,8 @@
<script lang="ts" setup>
import { CSSProperties } from 'vue'
import { ArrowHeadType, ElementId, Position } from '../../types'
import { getCenter, getMarkerEnd, getBezierPath } from './utils'
import EdgeText from './EdgeText.vue'
import { ArrowHeadType, ElementId, Position } from '~/types'
interface BezierEdgeProps {
id: ElementId
src/components/Edges/Edge.vue
+9 -9
View File
@@ -1,9 +1,9 @@
<script lang="ts" setup>
import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '../../container/EdgeRenderer/utils'
import { isEdge } from '../../utils'
import { ConnectionMode, Edge, EdgeType, Position } from '../../types'
import { useHandle, useHooks, useStore } from '../../composables'
import EdgeAnchor from './EdgeAnchor.vue'
import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '~/container/EdgeRenderer/utils'
import { isEdge } from '~/utils'
import { ConnectionMode, Edge, EdgeType, Position } from '~/types'
import { useHandle, useHooks, useStore } from '~/composables'
interface EdgeProps {
type: EdgeType
@@ -97,14 +97,14 @@ const targetNodeHandles = computed(() =>
: nodes.value.targetNode?.__rf?.handleBounds.target ?? nodes.value.targetNode?.__rf?.handleBounds.source,
)
const sourceHandle = computed(
() => nodes.value.sourceNode && getHandle(nodes.value.sourceNode.__rf?.handleBounds.source, props.edge.sourceHandle || null),
)
const targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle || null))
const sourceHandle = computed(() => {
if (nodes.value.sourceNode) return getHandle(nodes.value.sourceNode.__rf?.handleBounds.source, props.edge.sourceHandle ?? null)
})
const targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle ?? null))
const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
const targetPosition = computed(() => (targetHandle.value ? targetHandle.value.position : Position.Top))
const isSelected = computed(() => store.selectedElements?.some((elm) => isEdge(elm) && elm.id === props.edge.id) || false)
const isSelected = computed(() => store.selectedElements?.some((elm) => isEdge(elm) && elm.id === props.edge.id) ?? false)
const edgePos = computed(() =>
getEdgePositions(
nodes.value.sourceNode,
src/components/Edges/EdgeAnchor.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { HTMLAttributes } from 'vue'
import { Position } from '../../types'
import { Position } from '~/types'
const shiftX = (x: number, shift: number, position: Position): number => {
if (position === Position.Left) return x - shift
src/components/Edges/SmoothStepEdge.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<script lang="ts" setup>
import { ArrowHeadType, ElementId, Position } from '../../types'
import EdgeText from './EdgeText.vue'
import { getCenter, getMarkerEnd, getSmoothStepPath } from './utils'
import { ArrowHeadType, ElementId, Position } from '~/types'
export interface EdgeSmoothStepProps {
id: ElementId
src/components/Edges/StepEdge.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { ArrowHeadType, ElementId, Position } from '../../types'
import SmoothStepEdge from './SmoothStepEdge.vue'
import { ArrowHeadType, ElementId, Position } from '~/types'
export interface EdgeStepProps {
id: ElementId
src/components/Edges/StraightEdge.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<script lang="ts" setup>
import { ArrowHeadType, ElementId, Position } from '../../types'
import EdgeText from './EdgeText.vue'
import { getMarkerEnd, getBezierPath } from './utils'
import { ArrowHeadType, ElementId, Position } from '~/types'
interface StraightEdgeProps {
id: ElementId
src/components/Edges/utils.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { ArrowHeadType, Position } from '../../types'
import { ArrowHeadType, Position } from '~/types'
export const getMarkerEnd = (arrowHeadType?: ArrowHeadType, markerEndId?: string): string => {
if (typeof markerEndId !== 'undefined' && markerEndId) {
src/components/Handle/Handle.vue
+3 -3
View File
@@ -1,7 +1,7 @@
<script lang="ts" setup>
import { Position, ValidConnectionFunc } from '../../types'
import { NodeIdContextKey } from '../../context'
import { useHandle, useHooks, useStore } from '../../composables'
import { Position, ValidConnectionFunc } from '~/types'
import { NodeIdContextKey } from '~/context'
import { useHandle, useHooks, useStore } from '~/composables'
interface HandleProps {
id?: string
src/components/Nodes/DefaultNode.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import Handle from '../Handle/Handle.vue'
import { NodeProps, Position } from '../../types'
import { NodeProps, Position } from '~/types'
interface DefaultNodeProps extends NodeProps {
data?: NodeProps['data']
src/components/Nodes/InputNode.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import Handle from '../Handle/Handle.vue'
import { NodeProps, Position } from '../../types'
import { NodeProps, Position } from '~/types'
interface InputNodeProps extends NodeProps {
data?: NodeProps['data']
src/components/Nodes/Node.vue
+19 -22
View File
@@ -1,8 +1,8 @@
<script lang="ts" setup>
import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
import { Node, NodeType, SnapGrid } from '../../types'
import { NodeIdContextKey } from '../../context'
import { useHooks, useStore } from '../../composables'
import { Node, NodeType, SnapGrid } from '~/types'
import { NodeIdContextKey } from '~/context'
import { useHooks, useStore } from '~/composables'
interface NodeProps {
node: Node
@@ -23,9 +23,9 @@ provide(NodeIdContextKey, props.node.id)
const nodeElement = templateRef<HTMLDivElement>('node-element', null)
const selectable = computed(() => props.node.selectable ?? store.elementsSelectable)
const draggable = computed(() => props.node.draggable ?? store.nodesDraggable)
const connectable = computed(() => props.node.connectable ?? store.nodesConnectable)
const selectable = props.node.selectable ?? store.elementsSelectable
const draggable = props.node.draggable ?? store.nodesDraggable
const connectable = props.node.connectable ?? store.nodesConnectable
const onMouseEnterHandler = () =>
props.node.__rf?.isDragging && ((event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: props.node }))
@@ -116,21 +116,18 @@ onMounted(() => {
})
}),
)
})
watch(
() => props.node.type,
() => {
store.updateNodeDimensions({
id: props.node.id,
nodeElement: nodeElement.value,
forceUpdate: true,
})
},
)
watch(
() => props.node.sourcePosition && props.node.targetPosition,
() => {
watch(
() => props.node.type,
() => {
store.updateNodeDimensions({
id: props.node.id,
nodeElement: nodeElement.value,
forceUpdate: true,
})
},
)
watch([() => props.node.sourcePosition, () => props.node.targetPosition], () => {
nextTick(() => {
store.updateNodeDimensions({
id: props.node.id,
@@ -138,8 +135,8 @@ watch(
forceUpdate: true,
})
})
},
)
})
})
</script>
<template>
src/components/Nodes/OutputNode.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import Handle from '../Handle/Handle.vue'
import { NodeProps, Position } from '../../types'
import { NodeProps, Position } from '~/types'
interface OutputNodeProps extends NodeProps {
data?: NodeProps['data']
src/components/Nodes/utils.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { HandleElement, Position } from '../../types'
import { getDimensions } from '../../utils'
import { HandleElement, Position } from '~/types'
import { getDimensions } from '~/utils'
export const getHandleBoundsByHandleType = (
selector: string,
src/components/NodesSelection/NodesSelection.vue
+3 -3
View File
@@ -1,8 +1,8 @@
<script lang="ts" setup>
import { Draggable, DraggableEventListener } from '@braks/revue-draggable'
import { Node } from '../../types'
import { getRectOfNodes, isNode } from '../../utils'
import { useHooks, useStore } from '../../composables'
import { Node } from '~/types'
import { getRectOfNodes, isNode } from '~/utils'
import { useHooks, useStore } from '~/composables'
const store = useStore()
const hooks = useHooks()
src/components/UserSelection/UserSelection.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<script lang="ts" setup>
import { useStore } from '../../composables'
import SelectionRect from './SelectionRect.vue'
import { getMousePosition } from './utils'
import { useStore } from '~/composables'
const store = useStore()
const el = templateRef('user-selection', null)
src/composables/useHandle.ts
+2 -2
View File
@@ -1,7 +1,7 @@
import { getHostForElement } from '../utils'
import { Connection, ConnectionMode, ElementId, HandleType, ValidConnectionFunc } from '../types'
import useStore from './useStore'
import useHooks from './useHooks'
import { getHostForElement } from '~/utils'
import { Connection, ConnectionMode, ElementId, HandleType, ValidConnectionFunc } from '~/types'
type Result = {
elementBelow: Element | null
src/composables/useHooks.ts
+2 -12
View File
@@ -1,15 +1,5 @@
import {
Connection,
Edge,
Elements,
EmitFunc,
FlowHooks,
FlowTransform,
Node,
OnConnectStartParams,
FlowInstance,
} from '../types'
import { Hooks } from '../context'
import { Connection, Edge, Elements, EmitFunc, FlowHooks, FlowTransform, Node, OnConnectStartParams, FlowInstance } from '~/types'
import { Hooks } from '~/context'
// flow event hooks
const hooks = (): FlowHooks => {
src/composables/useKeyPress.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import { Ref } from 'vue'
import { onKeyDown, onKeyPressed, onKeyUp } from '@vueuse/core'
import { KeyCode } from '../types'
import useWindow from './useWindow'
import { KeyCode } from '~/types'
// todo cancel keypress for input dom nodes
export default (keyCode: KeyCode, onChange?: (keyPressed: boolean) => void): Ref<boolean> => {
src/composables/useStore.ts
+3 -3
View File
@@ -1,6 +1,6 @@
import { FlowOptions } from '../types'
import { useFlowStore, initialState } from '../store'
import { Store } from '../context'
import { FlowOptions } from '~/types'
import { useFlowStore, initialState } from '~/store'
import { Store } from '~/context'
export default (options?: Partial<FlowOptions>) => {
let store = inject(Store)!
src/composables/useUpdateNodeInternals.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import { ElementId, UpdateNodeInternals } from '../types'
import useStore from './useStore'
import { ElementId, UpdateNodeInternals } from '~/types'
export default (store = useStore()): UpdateNodeInternals =>
(id: ElementId) => {
src/composables/useZoomPanHelper.ts
+2 -2
View File
@@ -1,8 +1,8 @@
// @ts-nocheck
import { zoomIdentity } from 'd3-zoom'
import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '../utils'
import { FitViewParams, FlowTransform, Node, Rect, UseZoomPanHelper, XYPosition } from '../types'
import useStore from './useStore'
import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '~/utils'
import { FitViewParams, FlowTransform, Node, Rect, UseZoomPanHelper, XYPosition } from '~/types'
const DEFAULT_PADDING = 0.1
src/container/EdgeRenderer/EdgeRenderer.vue
+5 -5
View File
@@ -1,10 +1,10 @@
<script lang="ts" setup>
import { computed, CSSProperties } from 'vue'
import Edge from '../../components/Edges/Edge.vue'
import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
import { ConnectionLineType, EdgeType } from '../../types'
import { useStore } from '../../composables'
import { CSSProperties } from 'vue'
import MarkerDefinitions from './MarkerDefinitions.vue'
import Edge from '~/components/Edges/Edge.vue'
import ConnectionLine from '~/components/ConnectionLine/ConnectionLine.vue'
import { ConnectionLineType, EdgeType } from '~/types'
import { useStore } from '~/composables'
interface EdgeRendererProps {
edgeTypes: Record<string, EdgeType>
src/container/EdgeRenderer/utils.ts
+3 -3
View File
@@ -1,6 +1,6 @@
import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '../../components/Edges'
import { rectToBox } from '../../utils'
import { Edge, EdgePositions, EdgeType, ElementId, HandleElement, Node, Position, Transform, XYPosition } from '../../types'
import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges'
import { rectToBox } from '~/utils'
import { Edge, EdgePositions, EdgeType, ElementId, HandleElement, Node, Position, Transform, XYPosition } from '~/types'
export function createEdgeTypes(edgeTypes: Record<string, EdgeType>): Record<string, EdgeType> {
const standardTypes: Record<string, EdgeType> = {
src/container/Flow/Flow.vue
+10 -10
View File
@@ -1,9 +1,11 @@
<script lang="ts" setup>
import { CSSProperties, onBeforeUnmount } from 'vue'
import ZoomPane from '../../container/ZoomPane/ZoomPane.vue'
import SelectionPane from '../../container/SelectionPane/SelectionPane.vue'
import NodeRenderer from '../../container/NodeRenderer/NodeRenderer.vue'
import EdgeRenderer from '../../container/EdgeRenderer/EdgeRenderer.vue'
import { createEdgeTypes } from '../EdgeRenderer/utils'
import { createNodeTypes } from '../NodeRenderer/utils'
import ZoomPane from '~/container/ZoomPane/ZoomPane.vue'
import SelectionPane from '~/container/SelectionPane/SelectionPane.vue'
import NodeRenderer from '~/container/NodeRenderer/NodeRenderer.vue'
import EdgeRenderer from '~/container/EdgeRenderer/EdgeRenderer.vue'
import {
ConnectionLineType,
ConnectionMode,
@@ -15,12 +17,10 @@ import {
TranslateExtent,
NodeExtent,
FlowOptions,
} from '../../types'
import { DefaultNode, InputNode, OutputNode } from '../../components/Nodes'
import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '../../components/Edges'
import { createEdgeTypes } from '../EdgeRenderer/utils'
import { createNodeTypes } from '../NodeRenderer/utils'
import { useHooks, useStore, createHooks } from '../../composables'
} from '~/types'
import { DefaultNode, InputNode, OutputNode } from '~/components/Nodes'
import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges'
import { useHooks, useStore, createHooks } from '~/composables'
export interface FlowProps extends FlowOptions {
elements: Elements
src/container/NodeRenderer/NodeRenderer.vue
+4 -4
View File
@@ -1,8 +1,8 @@
<script lang="ts" setup>
import Node from '../../components/Nodes/Node.vue'
import { NodeType, Node as TNode } from '../../types'
import { getNodesInside } from '../../utils'
import { useStore } from '../../composables'
import Node from '~/components/Nodes/Node.vue'
import { NodeType, Node as TNode } from '~/types'
import { getNodesInside } from '~/utils'
import { useStore } from '~/composables'
interface NodeRendererProps {
nodeTypes: Record<string, NodeType>
src/container/NodeRenderer/utils.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { DefaultNode, InputNode, OutputNode } from '../../components/Nodes'
import { NodeType } from '../../types'
import { DefaultNode, InputNode, OutputNode } from '~/components/Nodes'
import { NodeType } from '~/types'
export function createNodeTypes(nodeTypes: Record<string, NodeType>): Record<string, NodeType> {
const standardTypes: Record<string, NodeType> = {
src/container/SelectionPane/SelectionPane.vue
+5 -5
View File
@@ -1,9 +1,9 @@
<script lang="ts" setup>
import { ElementId, FlowElement, KeyCode } from '../../types'
import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
import UserSelection from '../../components/UserSelection/UserSelection.vue'
import { getConnectedEdges, isNode } from '../../utils'
import { useHooks, useStore, useKeyPress } from '../../composables'
import { ElementId, FlowElement, KeyCode } from '~/types'
import NodesSelection from '~/components/NodesSelection/NodesSelection.vue'
import UserSelection from '~/components/UserSelection/UserSelection.vue'
import { getConnectedEdges, isNode } from '~/utils'
import { useHooks, useStore, useKeyPress } from '~/composables'
interface SelectionPaneProps {
selectionKeyCode?: KeyCode
src/container/ZoomPane/ZoomPane.vue
+19 -21
View File
@@ -2,9 +2,9 @@
import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
import { get } from '@vueuse/core'
import { pointer, select } from 'd3-selection'
import { FlowTransform, KeyCode, PanOnScrollMode } from '../../types'
import { useHooks, useKeyPress, useStore, useUpdateNodeInternals, useZoomPanHelper } from '../../composables'
import { clamp, onLoadGetElements, onLoadProject, onLoadToObject } from '../../utils'
import { FlowTransform, KeyCode, PanOnScrollMode } from '~/types'
import { useHooks, useKeyPress, useStore, useUpdateNodeInternals, useZoomPanHelper } from '~/composables'
import { clamp, onLoadGetElements, onLoadProject, onLoadToObject } from '~/utils'
interface ZoomPaneProps {
selectionKeyCode?: KeyCode
@@ -190,24 +190,22 @@ watch(height, (val) => (store.dimensions.height = val))
watch(transform, (val) => (store.transform = [val.x, val.y, val.zoom]))
const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper()
onMounted(() => {
watchOnce(
() => width.value && height.value,
() => {
hooks.load.trigger({
fitView: (params = { padding: 0.1 }) => fitView(params),
zoomIn,
zoomOut,
zoomTo,
setTransform,
updateNodeInternals: useUpdateNodeInternals(store),
project: onLoadProject(store),
getElements: onLoadGetElements(store),
toObject: onLoadToObject(store),
})
},
)
})
watchOnce(
() => width.value && height.value,
() => {
hooks.load.trigger({
fitView: (params = { padding: 0.1 }) => fitView(params),
zoomIn,
zoomOut,
zoomTo,
setTransform,
updateNodeInternals: useUpdateNodeInternals(store),
project: onLoadProject(store),
getElements: onLoadGetElements(store),
toObject: onLoadToObject(store),
})
},
)
</script>
<template>
<div ref="zoomPane" class="vue-flow__renderer vue-flow__zoompane">
src/context/index.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import { InjectionKey } from 'vue'
import { ElementId, FlowHooks, FlowStore } from '../types'
import { ElementId, FlowHooks, FlowStore } from '~/types'
export const Store: InjectionKey<FlowStore> = Symbol('store')
export const Hooks: InjectionKey<FlowHooks> = Symbol('hooks')
src/plugin/nuxt.ts
View File
src/store/index.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { ConnectionMode, FlowState } from '../types'
import { ConnectionMode, FlowState } from '~/types'
export const initialState = (): FlowState => ({
dimensions: {
src/store/useFlowStore.ts
+3 -3
View File
@@ -1,6 +1,6 @@
import { setActivePinia, createPinia, defineStore, StoreDefinition } from 'pinia'
import isEqual from 'fast-deep-equal'
import { Edge, FlowState, Node, FlowActions } from '../types'
import { Edge, FlowState, Node, FlowActions } from '~/types'
import {
clampPosition,
getDimensions,
@@ -11,8 +11,8 @@ import {
isNode,
parseEdge,
parseNode,
} from '../utils'
import { getHandleBounds } from '../components/Nodes/utils'
} from '~/utils'
import { getHandleBounds } from '~/components/Nodes/utils'
type NextElements = {
nextNodes: Node[]
src/utils/graph.ts
+2 -2
View File
@@ -12,8 +12,8 @@ import {
NodeExtent,
Dimensions,
FlowStore,
} from '../types'
import { useWindow } from '../composables'
} from '~/types'
import { useWindow } from '~/composables'
export const isInputDOMNode = (e: KeyboardEvent | MouseEvent): boolean => {
const target = e.target as HTMLElement
tsconfig.json
+5
View File
@@ -20,6 +20,11 @@
"types": [
"vite/client"
],
"paths": {
"~/*": [
"src/*"
]
}
},
"include": ["src"],
"exclude": [
vite.config.ts
+3
View File
@@ -8,6 +8,9 @@ import pkg from './package.json'
// https://vitejs.dev/config/
export default defineConfig({
alias: {
'~': resolve('src'),
},
resolve: {
dedupe: ['vue'],
extensions: ['.ts', '.vue'],
yarn.lock
+52 -1
View File
@@ -651,6 +651,11 @@
"@types/d3-transition" "*"
"@types/d3-zoom" "*"
"@types/dagre@^0.7.46":
version "0.7.46"
resolved "https://registry.yarnpkg.com/@types/dagre/-/dagre-0.7.46.tgz#c51ffcc62ca8a9affa07f5e06842acd840d3d442"
integrity sha512-ku3y+F8sPqmiB5Ugl22NpukI2dLAViJiWwdtueXLeuF4fxZozl+bytPSFVlLu/gDgaKiwobu3LBXXRWktIMiIA==
"@types/estree@0.0.39":
version "0.0.39"
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
@@ -928,6 +933,11 @@
"@vue/compiler-dom" "3.2.21"
"@vue/shared" "3.2.21"
"@vue/devtools-api@^6.0.0-beta.18":
version "6.0.0-beta.20"
resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.20.tgz#b5405c9a84fb44687d05e7c4c7854b1639141106"
integrity sha512-21u2jFOk8jbAneeGpDwZQ0W66RJa0IBDUyVl6SgKnn2cRFjLWzKj+ukXjpLhYr1KASyCe5E5U4jXwChVo0YUAw==
"@vue/devtools-api@^6.0.0-beta.19":
version "6.0.0-beta.19"
resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.19.tgz#f8e88059daa424515992426a0c7ea5cde07e99bf"
@@ -1850,6 +1860,14 @@ d3@^7.1.1:
d3-transition "3"
d3-zoom "3"
dagre@^0.8.5:
version "0.8.5"
resolved "https://registry.yarnpkg.com/dagre/-/dagre-0.8.5.tgz#ba30b0055dac12b6c1fcc247817442777d06afee"
integrity sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==
dependencies:
graphlib "^2.1.8"
lodash "^4.17.15"
date-fns@^1.27.2:
version "1.30.1"
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
@@ -2864,6 +2882,13 @@ graceful-fs@^4.1.2, graceful-fs@^4.2.4:
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==
graphlib@^2.1.8:
version "2.1.8"
resolved "https://registry.yarnpkg.com/graphlib/-/graphlib-2.1.8.tgz#5761d414737870084c92ec7b5dbcb0592c9d35da"
integrity sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==
dependencies:
lodash "^4.17.15"
hard-rejection@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
@@ -2985,6 +3010,11 @@ ignore@^5.0.5, ignore@^5.1.1, ignore@^5.1.4, ignore@^5.1.8:
resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
immediate@~3.0.5:
version "3.0.6"
resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
import-fresh@^3.0.0, import-fresh@^3.2.1:
version "3.3.0"
resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -3513,6 +3543,13 @@ levn@^0.4.1:
prelude-ls "^1.2.1"
type-check "~0.4.0"
lie@3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
integrity sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=
dependencies:
immediate "~3.0.5"
lines-and-columns@^1.1.6:
version "1.1.6"
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@@ -3579,6 +3616,13 @@ local-pkg@^0.1.0:
dependencies:
mlly "^0.2.2"
localforage@^1.10.0:
version "1.10.0"
resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.10.0.tgz#5c465dc5f62b2807c3a84c0c6a1b1b3212781dd4"
integrity sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==
dependencies:
lie "3.1.1"
locate-path@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -3626,7 +3670,7 @@ lodash.zip@^4.2.0:
resolved "https://registry.yarnpkg.com/lodash.zip/-/lodash.zip-4.2.0.tgz#ec6662e4896408ed4ab6c542a3990b72cc080020"
integrity sha1-7GZi5IlkCO1KtsVCo5kLcswIACA=
lodash@^4.17.12, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21:
lodash@^4.17.12, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -5463,6 +5507,13 @@ vue-eslint-parser@^7.10.0:
lodash "^4.17.21"
semver "^6.3.0"
vue-router@^4.0.12:
version "4.0.12"
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.12.tgz#8dc792cddf5bb1abcc3908f9064136de7e13c460"
integrity sha512-CPXvfqe+mZLB1kBWssssTiWg4EQERyqJZes7USiqfW9B5N2x+nHlnsM1D3b5CaJ6qgCvMmYJnz+G0iWjNCvXrg==
dependencies:
"@vue/devtools-api" "^6.0.0-beta.18"
vue-tsc@^0.28.7:
version "0.28.7"
resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-0.28.7.tgz#a6fa746dd0cafc1aea06cde74d22b3e71ed7266f"