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

feat(docs): Initial commit for docs in nuxt 3

Browse Source
This commit is contained in:
Braks
2021-11-06 08:54:35 +01:00
parent 6ec8258f33
commit 64df75d405
33 changed files with 6452 additions and 955 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc.js
+1
View File
@@ -1,4 +1,5 @@
const baseRules = {
'@typescript-eslint/triple-slash-reference': 0,
'no-console': 0,
'vue/valid-v-slot': [
'error',
docs/.gitignore
+5
View File
@@ -0,0 +1,5 @@
node_modules
*.log
.nuxt
nuxt.d.ts
.output
docs/README.md
+29
View File
@@ -0,0 +1,29 @@
# Nuxt 3 Minimal Starter
We recommend to look at the [documentation](https://v3.nuxtjs.org).
## Setup
Make sure to install the dependencies
```bash
yarn install
```
## Development
Start the development server on http://localhost:3000
```bash
yarn dev
```
## Production
Build the application for production:
```bash
yarn build
```
Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment).
docs/app.vue
+15
View File
@@ -0,0 +1,15 @@
<template>
<NuxtLayout name="default">
<Header />
<div class="h-full flex flex-row">
<Sidebar />
<div id="vue-flow-docs" class="flex-1">
<NuxtPage />
</div>
</div>
</NuxtLayout>
</template>
<style>
@import 'assets/index.css';
@import 'node_modules/@braks/vue-flow/dist/style.css';
</style>
docs/assets/index.css
+101
View File
@@ -0,0 +1,101 @@
#root,
#__nuxt {
text-transform: uppercase;
font-family: 'JetBrains Mono', monospace;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
html,
body,
#root,
#__nuxt {
margin: 0;
height: 100%;
color: #111;
}
#__nuxt {
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-image: url('./polygon-scatter.svg');
}
#root {
display: flex;
flex-direction: column;
}
header {
font-weight: 700;
}
.logo {
text-decoration: none;
display: block;
line-height: 1;
}
header a:hover {
color: whitesmoke;
}
header select {
margin-left: 1em;
}
.overview-example__add {
display: none;
}
.vue-flow__node a {
font-weight: 700;
color: #111;
}
.vue-flow__node.dark-node {
background: #0041d0;
color: #f8f8f8;
}
.vue-flow__node.dark {
background: #557;
color: #f8f8f8;
}
.vue-flow__node-selectorNode {
font-size: 14px;
background: #f0f2f3;
border: 1px solid #555;
border-radius: 5px;
text-align: center;
}
.vue-flow__node-selectorNode .vue-flow__handle {
border-color: #f0f2f3;
}
@media screen and (min-width: 768px) {
.overview-example__add {
display: block;
}
}
.edgebutton {
border-radius: 999px;
cursor: pointer;
}
.edgebutton:hover {
box-shadow: 0 0 0 2px pink , 0 0 0 4px #f05f75;
}
#vue-flow-docs {
height: 100%;
margin:0;
background: #fff;
}
docs/assets/polygon-scatter.svg
+1
View File
@@ -0,0 +1 @@
<svg id="visual" viewBox="0 0 960 540" width="960" height="540" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect width="960" height="540" fill="#31475e"></rect><g><g transform="translate(57 45)"><path d="M0 -106.9L83.6 -66.7L104.2 23.8L46.4 96.3L-46.4 96.3L-104.2 23.8L-83.6 -66.7Z" fill="#3fb984"></path></g><g transform="translate(708 88)"><path d="M0 -66L51.6 -41.2L64.3 14.7L28.6 59.5L-28.6 59.5L-64.3 14.7L-51.6 -41.2Z" fill="#3fb984"></path></g><g transform="translate(823 510)"><path d="M0 -77L60.2 -48L75.1 17.1L33.4 69.4L-33.4 69.4L-75.1 17.1L-60.2 -48Z" fill="#3fb984"></path></g><g transform="translate(896 280)"><path d="M0 -45L35.2 -28.1L43.9 10L19.5 40.5L-19.5 40.5L-43.9 10L-35.2 -28.1Z" fill="#3fb984"></path></g><g transform="translate(287 458)"><path d="M0 -58L45.3 -36.2L56.5 12.9L25.2 52.3L-25.2 52.3L-56.5 12.9L-45.3 -36.2Z" fill="#3fb984"></path></g><g transform="translate(12 380)"><path d="M0 -101L79 -63L98.5 22.5L43.8 91L-43.8 91L-98.5 22.5L-79 -63Z" fill="#3fb984"></path></g><g transform="translate(609 440)"><path d="M0 -60L46.9 -37.4L58.5 13.4L26 54.1L-26 54.1L-58.5 13.4L-46.9 -37.4Z" fill="#3fb984"></path></g><g transform="translate(457 42)"><path d="M0 -81L63.3 -50.5L79 18L35.1 73L-35.1 73L-79 18L-63.3 -50.5Z" fill="#3fb984"></path></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

docs/components/Header.vue
+16
View File
@@ -0,0 +1,16 @@
<template>
<header class="flex items-center py-4 px-8 text-white">
<div class="flex flex-col">
<a class="logo text-xl" href="https://github.com/bcakmakoglu/vue-flow"> Vue Flow </a>
<span class="text-xs text-gray-800 mt-2"
>An open source library by <a href="https://github.com/bcakmakoglu/bcakmakoglu">Braks</a> <br />
Based on <a href="https://reactflow.dev">React Flow</a>
</span>
</div>
<div class="flex-1">Docs</div>
<div class="flex-1">
<router-link to="/examples"> Examples </router-link>
</div>
<div class="flex-1">Github</div>
</header>
</template>
docs/components/Sidebar.vue
+17
View File
@@ -0,0 +1,17 @@
<script lang="ts" setup></script>
<template>
<aside>
<div class="description">You can drag these nodes to the pane on the left.</div>
<slot></slot>
</aside>
</template>
<style>
aside {
border-right: 1px solid #eee;
padding: 15px 10px;
background: #fff;
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 280px; /* Set the width of the sidebar */
overflow-x: hidden; /* Disable horizontal scroll */
}
</style>
docs/layouts/default.vue
+4
View File
@@ -0,0 +1,4 @@
<script lang="ts" setup></script>
<template>
<slot></slot>
</template>
docs/nuxt.config.ts
+11
View File
@@ -0,0 +1,11 @@
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
meta: {
title: 'Vue Flow',
description: 'Vue Flow Documentation',
},
target: 'client',
ssr: false,
buildModules: ['nuxt-windicss'],
})
docs/package.json
+18
View File
@@ -0,0 +1,18 @@
{
"private": true,
"scripts": {
"dev": "nuxt dev",
"build": "nuxt build",
"start": "node .output/server/index.mjs"
},
"dependencies": {
"@braks/vue-flow": "link:..",
"@pinia/nuxt": "^0.0.9",
"add": "^2.0.6",
"pinia": "^2.0.0-rc.14"
},
"devDependencies": {
"nuxt-windicss": "^2.0.4",
"nuxt3": "latest"
}
}
docs/pages/examples/basic.vue
+81
View File
@@ -0,0 +1,81 @@
<script lang="ts" setup>
import Flow, {
MiniMap,
Controls,
Background,
Connection,
Edge,
Elements,
FlowElement,
FlowInstance,
addEdge,
isNode,
removeElements,
Node,
} from '@braks/vue-flow'
const onNodeDragStop = ({ node }: { node: Node }) => console.log('drag stop', node)
const onElementClick = ({ node }: { node: Node }) => console.log('click', node)
const elements = ref<Elements>([
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' },
])
const rfInstance = ref<FlowInstance | null>(null)
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value))
const onLoad = (flowInstance: FlowInstance) => {
flowInstance.fitView({ padding: 0.1 })
rfInstance.value = flowInstance
}
const updatePos = () => {
elements.value = elements.value.map((el: FlowElement) => {
if (isNode(el)) {
el.position = {
x: Math.random() * 400,
y: Math.random() * 400,
}
}
return el
})
}
const logToObject = () => console.log(rfInstance.value?.toObject())
const resetTransform = () => rfInstance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
const toggleClassnames = () => {
elements.value = elements.value.map((el: FlowElement) => {
if (isNode(el)) el.class = el.class === 'light' ? 'dark' : 'light'
return el
})
}
</script>
<template>
<Flow
class="vue-flow-basic-example"
:elements="elements"
:default-zoom="1.5"
:min-zoom="0.2"
:max-zoom="4"
@elements-remove="onElementsRemove"
@connect="onConnect"
@node-drag-stop="onNodeDragStop"
@node-click="onElementClick"
@elementClick="onElementClick"
@load="onLoad"
>
<MiniMap />
<Controls />
<Background color="#aaa" :gap="8" />
<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 @click="logToObject">toObject</button>
</div>
</Flow>
</template>
docs/pages/examples/index.vue
+171
View File
@@ -0,0 +1,171 @@
<script lang="ts" setup>
import { CSSProperties } from 'vue'
import Flow, {
removeElements,
addEdge,
MiniMap,
Controls,
Background,
isNode,
Node,
Elements,
FlowElement,
FlowInstance,
FlowTransform,
SnapGrid,
ArrowHeadType,
Connection,
Edge,
} from '@braks/vue-flow'
const onNodeDragStart = (node: Node) => console.log('drag start', node)
const onNodeDrag = (node: Node) => console.log('drag', node)
const onNodeDragStop = (node: Node) => console.log('drag stop', node)
const onNodeDoubleClick = (node: Node) => console.log('node double click', node)
const onPaneClick = (event: MouseEvent) => console.log('pane click', event)
const onPaneScroll = (event?: MouseEvent) => console.log('pane scroll', event)
const onPaneContextMenu = (event: MouseEvent) => console.log('pane context menu', event)
const onSelectionDrag = (nodes: Node[]) => console.log('selection drag', nodes)
const onSelectionDragStart = (nodes: Node[]) => console.log('selection drag start', nodes)
const onSelectionDragStop = (nodes: Node[]) => console.log('selection drag stop', nodes)
const onSelectionContextMenu = (event: MouseEvent, nodes: Node[]) => {
event.preventDefault()
console.log('selection context menu', nodes)
}
const onElementClick = (element: FlowElement) => console.log(`${isNode(element) ? 'node' : 'edge'} click:`, element)
const onSelectionChange = (elements: Elements | null) => console.log('selection change', elements)
const onLoad = (flowInstance: FlowInstance) => {
console.log('flow loaded:', flowInstance)
flowInstance.fitView()
}
const onMoveEnd = (transform?: FlowTransform) => console.log('zoom/move end', transform)
const onEdgeContextMenu = (edge: Edge) => console.log('edge context menu', edge)
const onEdgeMouseEnter = (edge: Edge) => console.log('edge mouse enter', edge)
const onEdgeMouseMove = (edge: Edge) => console.log('edge mouse move', edge)
const onEdgeMouseLeave = (edge: Edge) => console.log('edge mouse leave', edge)
const onEdgeDoubleClick = (edge: Edge) => console.log('edge double click', edge)
const initialElements: Elements = [
{
id: '1',
type: 'input',
data: {
label: 'Welcome to <strong>Vue Flow!</strong>',
},
position: { x: 250, y: 0 },
},
{
id: '2',
data: {
label: 'This is a <strong>default node</strong>',
},
position: { x: 100, y: 100 },
},
{
id: '3',
data: {
label: 'This one has a <strong>custom style</strong>',
},
position: { x: 400, y: 100 },
style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
},
{
id: '4',
position: { x: 250, y: 200 },
data: {
label: `You can find the docs on
<a href="https://github.com/bcakmakoglu/vue-flow" target="_blank" rel="noopener noreferrer">
Github
</a>`,
},
},
{
id: '5',
data: {
label: 'Or check out the other <strong>examples</strong>',
},
position: { x: 250, y: 325 },
},
{
id: '6',
type: 'output',
data: {
label: 'An <strong>output node</strong>',
},
position: { x: 100, y: 480 },
},
{ id: '7', type: 'output', data: { label: 'Another output node' }, position: { x: 400, y: 450 } },
{ id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' },
{ id: 'e1-3', source: '1', target: '3' },
{ id: 'e3-4', source: '3', target: '4', animated: true, label: 'animated edge' },
{ id: 'e4-5', source: '4', target: '5', arrowHeadType: ArrowHeadType.Arrow, label: 'edge with arrow head' },
{ id: 'e5-6', source: '5', target: '6', type: 'smoothstep', label: 'smooth step edge' },
{
id: 'e5-7',
source: '5',
target: '7',
type: 'step',
style: { stroke: '#f6ab6c' },
label: 'a step edge',
animated: true,
labelStyle: { fill: '#f6ab6c', fontWeight: 700 },
},
]
const connectionLineStyle: CSSProperties = { stroke: '#ddd' }
const snapGrid: SnapGrid = [16, 16]
const nodeStrokeColor = (n: Node): string => {
if (n.style?.background) return n.style.background as string
if (n.type === 'input') return '#0041d0'
if (n.type === 'output') return '#ff0072'
if (n.type === 'default') return '#1a192b'
return '#eee'
}
const nodeColor = (n: Node): string => {
if (n.style?.background) return n.style.background as string
return '#fff'
}
const elements = ref<Elements>(initialElements)
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
</script>
<template>
<Flow
:elements="elements"
:connection-line-style="connectionLineStyle"
:snap-to-grid="true"
:snap-grid="snapGrid"
@element-click="onElementClick"
@elements-remove="onElementsRemove"
@eonnect="onConnect"
@pane-click="onPaneClick"
@pane-scroll="onPaneScroll"
@pane-contex-menu="onPaneContextMenu"
@node-drag-start="onNodeDragStart"
@node-drag="onNodeDrag"
@node-drag-stop="onNodeDragStop"
@node-double-click="onNodeDoubleClick"
@selection-drag-start="onSelectionDragStart"
@selection-drag="onSelectionDrag"
@selection-drag-stop="onSelectionDragStop"
@selection-context-menu="onSelectionContextMenu"
@selection-change="onSelectionChange"
@move-end="onMoveEnd"
@load="onLoad"
@edge-context-menu="onEdgeContextMenu"
@edge-mouse-enter="onEdgeMouseEnter"
@edge-mouse-move="onEdgeMouseMove"
@edge-mouse-leave="onEdgeMouseLeave"
@edge-double-click="onEdgeDoubleClick"
>
<MiniMap :node-stroke-color="nodeStrokeColor" :node-color="nodeColor" :node-border-radius="2" />
<Controls />
<Background color="#aaa" gap="20" />
</Flow>
</template>
docs/pages/index.vue
+6
View File
@@ -0,0 +1,6 @@
<script lang="ts" setup></script>
<template>
<div class="flex justify-center items-center h-full">
<h1 class="text-5xl">Vue Flow</h1>
</div>
</template>
docs/pnpm-lock.yaml
Generated
+5870
View File
File diff suppressed because it is too large Load Diff
docs/tsconfig.json
+3
View File
@@ -0,0 +1,3 @@
{
"extends": "./.nuxt/tsconfig.json",
}
examples/Stress/StressExample.vue
+1 -1
View File
@@ -21,7 +21,7 @@ const onLoad = (flowInstance: FlowInstance) => {
console.log(flowInstance.getElements())
}
const initialElements: Elements = getElements(30, 30)
const initialElements: Elements = getElements(10, 10)
const elements = ref(initialElements)
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
package.json
+12 -24
View File
@@ -7,32 +7,30 @@
"url": "https://github.com/bcakmakoglu/vue-flow"
},
"license": "MIT",
"author": "Burak Cakmakoglu",
"author": "Burak Cakmakoglu<brainbraks@googlemail.com>",
"exports": {
".": {
"import": "./dist/vue-flow.esm.js",
"require": "./dist/vue-flow.cjs.js"
"import": "./dist/vue-flow.es.js",
"require": "./dist/vue-flow.umd.js"
},
"./*": "./*"
},
"main": "./dist/vue-flow.cjs.js",
"types": "./dist/vue-flow.d.ts",
"module": "./dist/vue-flow.esm.js",
"unpkg": "./dist/vue-flow.iife.min.js",
"jsdelivr": "./dist/vue-flow.iife.min.js",
"sideEffects": false,
"main": "./dist/vue-flow.umd.js",
"types": "./dist/index.d.ts",
"module": "./dist/vue-flow.es.js",
"unpkg": "./dist/vue-flow.umd.js",
"jsdelivr": "./dist/vue-flow.umd.js",
"files": [
"dist"
],
"scripts": {
"dev": "vue-tsc --noEmit && vite",
"build": "vue-tsc --noEmit && vite build",
"build:dist": "rollup -c --environment NODE_ENV:production",
"build": "vite build && vue-dts-gen \"./src/**/*.{ts,vue}\"",
"serve": "vite preview",
"prepublishOnly": "yarn build:dist",
"prepublishOnly": "pnpm build",
"test": "exit 0;",
"lint:js": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path .gitignore .",
"lint": "yarn lint:js"
"lint": "pnpm lint:js"
},
"dependencies": {
"@braks/revue-draggable": "0.2.5",
@@ -46,8 +44,6 @@
},
"devDependencies": {
"@antfu/eslint-config": "^0.9.0",
"@babel/core": "^7.15.8",
"@rollup/plugin-babel": "^5.3.0",
"@rollup/plugin-commonjs": "^19.0.2",
"@rollup/plugin-node-resolve": "^13.0.6",
"@rollup/plugin-replace": "^2.4.2",
@@ -55,29 +51,21 @@
"@vitejs/plugin-vue": "^1.9.3",
"autoprefixer": "^10.3.7",
"dagre": "^0.8.5",
"esbuild-register": "^2.6.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.1",
"localforage": "^1.10.0",
"np": "^7.5.0",
"pnpm": "^6.18.0",
"postcss": "^8.3.9",
"postcss-nested": "^5.0.6",
"prettier": "^2.4.1",
"rollup": "^2.58.0",
"rollup-plugin-dts": "^3.0.2",
"rollup-plugin-postcss": "^4.0.1",
"rollup-plugin-svg": "^2.0.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.30.0",
"tslib": "^2.3.1",
"typescript": "^4.4.4",
"unplugin-auto-import": "^0.4.12",
"vite": "^2.6.10",
"vite-svg-loader": "^2.2.0",
"vue": "^3.2.20",
"vue-router": "^4.0.12",
"vue-dts-gen": "^0.3.0",
"vue-tsc": "^0.28.7"
},
"peerDependencies": {
pnpm-lock.yaml
Generated
+37 -801
View File
File diff suppressed because it is too large Load Diff
postcss.config.js
+2 -1
View File
@@ -1,3 +1,4 @@
module.exports = {
plugins: [require('autoprefixer'), require('postcss-nested')]
inject: true,
plugins: [require('autoprefixer'), require('postcss-nested')],
}
rollup.config.js
-3
View File
@@ -1,3 +0,0 @@
// eslint-disable-next-line @typescript-eslint/no-var-requires
require('esbuild-register')
module.exports = require('./rollup.ts')
rollup.ts
-111
View File
@@ -1,111 +0,0 @@
import typescript from 'rollup-plugin-typescript2'
import { terser } from 'rollup-plugin-terser'
import dts from 'rollup-plugin-dts'
import commonjs from '@rollup/plugin-commonjs'
import resolve from '@rollup/plugin-node-resolve'
import replace from '@rollup/plugin-replace'
// @ts-ignore
import svg from 'rollup-plugin-svg'
import postcss from 'rollup-plugin-postcss'
// @ts-ignore
import pkg from './package.json'
const configs: any[] = []
const activePackages = [
{
display: 'vue-flow',
external: ['@vueuse/core'],
},
]
// @ts-ignore
for (const { external, iife } of activePackages) {
const iifeGlobals = {
'vue': 'Vue',
'@vueuse/core': 'VueUse',
}
const iifeName = 'VueFlow'
const functionNames = ['vue-flow']
for (const fn of functionNames) {
const input = 'src/index.ts'
const output: any[] = [
{
file: `dist/${fn}.cjs.js`,
format: 'cjs',
},
{
file: `dist/${fn}.esm.js`,
format: 'es',
},
]
if (iife !== false) {
output.push(
{
file: `dist/${fn}.iife.js`,
format: 'iife',
name: iifeName,
extend: true,
globals: iifeGlobals,
},
{
file: `dist/${fn}.iife.min.js`,
format: 'iife',
name: iifeName,
extend: true,
globals: iifeGlobals,
plugins: [
terser({
format: {
comments: false,
},
}),
],
},
)
}
configs.push({
input,
output,
plugins: [
typescript({
tsconfigOverride: {
compilerOptions: {
declaration: false,
},
},
}),
svg(),
resolve(),
postcss({
inject: true,
minimize: true,
}),
commonjs({ include: 'node_modules/**' }),
replace({
__VUE_FLOW_VERSION__: JSON.stringify(pkg.version),
preventAssignment: true,
}),
],
external: ['vue', ...(external || [])],
})
configs.push({
input,
output: {
file: `dist/${fn}.d.ts`,
format: 'es',
},
plugins: [dts()],
external: ['vue', ...(external || []), /\.css$/],
})
}
}
export default configs
src/additional-components/MiniMap/MiniMap.vue
+2 -1
View File
@@ -41,7 +41,8 @@ const nodeStrokeColorFunc: StringFunc =
const nodeClassNameFunc = props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName as StringFunc
const shapeRendering: ShapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
const shapeRendering: ShapeRendering =
(window && typeof window === 'undefined') || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
const viewBox = computed(() => {
const bb = getRectOfNodes(store.nodes)
src/components/Nodes/Node.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { DraggableEventListener } from '@braks/revue-draggable'
import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
import { Node, NodeType, SnapGrid } from '~/types'
import { NodeIdContextKey } from '~/context'
import { useHooks, useStore } from '~/composables'
src/composables/useKeyPress.ts
+5 -3
View File
@@ -37,9 +37,11 @@ export default (keyCode: KeyCode, onChange?: (keyPressed: boolean) => void): Ref
},
)
useEventListener(window, 'blur', () => {
isPressed.value = false
})
if (window && typeof window !== 'undefined') {
useEventListener(window, 'blur', () => {
isPressed.value = false
})
}
if (onChange && typeof onChange === 'function') onChange(isPressed.value)
src/composables/useZoomPanHelper.ts
+3 -2
View File
@@ -1,6 +1,7 @@
// @ts-nocheck
import { zoomIdentity } from 'd3-zoom'
import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '~/utils/graph'
import { FitViewParams, FlowTransform, Rect, UseZoomPanHelper, XYPosition } from '~/types'
import { FitViewParams, FlowTransform, Node, Rect, UseZoomPanHelper, XYPosition } from '~/types'
import useStore from '~/composables/useStore'
const DEFAULT_PADDING = 0.1
@@ -17,7 +18,7 @@ export default (store = useStore()): UseZoomPanHelper => {
fitView: (options: FitViewParams = { padding: DEFAULT_PADDING, includeHiddenNodes: false }) => {
if (!store.nodes.length) return
const bounds = getRectOfNodes(options.includeHiddenNodes ? store.nodes : store.nodes.filter((node) => !node.isHidden))
const bounds = getRectOfNodes(options.includeHiddenNodes ? store.nodes : store.nodes.filter((node: Node) => !node.isHidden))
const [x, y, zoom] = getTransformForBounds(
bounds,
store.dimensions.width,
src/container/Flow/Flow.vue
+4 -1
View File
@@ -130,7 +130,10 @@ const init = (opts: typeof props) => {
onBeforeUnmount(() => store?.$dispose())
watch(props, (val) => init(val))
watch(
() => props,
(val) => init(val),
)
init(props)
const nodeTypes = controlledComputed(
src/context/index.ts
+1
View File
@@ -1,3 +1,4 @@
// @ts-nocheck
import { InjectionKey } from 'vue'
import { ElementId, FlowHooks, FlowStore } from '~/types'
src/types/node.ts
+1 -1
View File
@@ -17,7 +17,7 @@ export interface Node<T = any> {
| any
data?: T
style?: any
className?: string
class?: string
targetPosition?: Position
sourcePosition?: Position
isHidden?: boolean
src/types/types.ts
+1
View File
@@ -1,3 +1,4 @@
// @ts-nocheck
import { CSSProperties, HTMLAttributes } from 'vue'
import { Edge, EdgeType } from './edge'
import { Node, NodeExtent, NodeType, TranslateExtent } from './node'
src/utils/graph.ts
+1 -1
View File
@@ -34,7 +34,7 @@ export const clampPosition = (position: XYPosition, extent: NodeExtent): XYPosit
export const getHostForElement = (element: HTMLElement): Document => {
const doc = element.getRootNode() as Document
if ('getElementFromPoint' in doc) return doc
else return window.document
else return false as any
}
export const isEdge = (element: Node | Connection | Edge): element is Edge =>
tsconfig.json
+4 -3
View File
@@ -1,5 +1,6 @@
{
"compilerOptions": {
"outDir": "./dist",
"baseUrl": ".",
"module": "ESNext",
"target": "es2020",
@@ -17,8 +18,7 @@
"strictNullChecks": true,
"forceConsistentCasingInFileNames": true,
"types": [
"vite/client",
"@types/node"
"vite/client"
],
"paths": {
"~/*": [
@@ -32,6 +32,7 @@
"exclude": [
"node_modules",
"build",
"dist"
"dist",
"examples"
]
}
vite.config.ts
+28 -1
View File
@@ -3,6 +3,9 @@ import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import svgLoader from 'vite-svg-loader'
import AutoImport from 'unplugin-auto-import/vite'
import commonjs from '@rollup/plugin-commonjs'
import replace from '@rollup/plugin-replace'
import pkg from './package.json'
// https://vitejs.dev/config/
export default defineConfig({
@@ -13,7 +16,31 @@ export default defineConfig({
},
},
build: {
outDir: 'build',
minify: 'terser',
lib: {
entry: resolve(__dirname, 'src/index.ts'),
name: 'vue-flow',
},
rollupOptions: {
// make sure to externalize deps that shouldn't be bundled
// into your library
external: ['vue'],
plugins: [
commonjs({ include: 'node_modules/**/*' }),
replace({
__VUE_FLOW_VERSION__: JSON.stringify(pkg.version),
preventAssignment: true,
}),
],
output: {
dir: './dist',
// Provide global variables to use in the UMD build
// for externalized deps
globals: {
vue: 'Vue',
},
},
},
},
plugins: [
vue(),