refactor(additional-components): remove additional components package
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
@@ -16,7 +16,6 @@
|
||||
"@animxyz/vue3": "^0.6.7",
|
||||
"@stackblitz/sdk": "^1.8.0",
|
||||
"@vercel/analytics": "^0.1.5",
|
||||
"@vue-flow/additional-components": "workspace:*",
|
||||
"@vue-flow/core": "workspace:*",
|
||||
"@vue-flow/node-toolbar": "workspace:*",
|
||||
"@vue/repl": "1.1.2",
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
module.exports = {
|
||||
rules: {
|
||||
'no-use-before-define': 0,
|
||||
'vue/no-setup-props-destructure': 0,
|
||||
},
|
||||
extends: ['../../.eslintrc.js'],
|
||||
ignorePatterns: ['!**/*'],
|
||||
}
|
||||
99
packages/additional-components/.gitignore
vendored
99
packages/additional-components/.gitignore
vendored
@@ -1,99 +0,0 @@
|
||||
# Created by .ignore support plugin (hsz.mobi)
|
||||
### Node template
|
||||
# Logs
|
||||
/logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# TypeScript v1 declaration files
|
||||
typings/
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
|
||||
# next.js build output
|
||||
.next
|
||||
|
||||
# nuxt.js build output
|
||||
.nuxt
|
||||
|
||||
# Nuxt generate
|
||||
dist
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# Serverless directories
|
||||
.serverless
|
||||
.webpack
|
||||
|
||||
# IDE / Editor
|
||||
.idea
|
||||
|
||||
# Service worker
|
||||
sw.*
|
||||
|
||||
# macOS
|
||||
.DS_Store
|
||||
|
||||
# Vim swap files
|
||||
*.swp
|
||||
|
||||
# Db-Data
|
||||
hasura/db_data/
|
||||
|
||||
# Codegen types
|
||||
types/types.ts
|
||||
|
||||
build
|
||||
@@ -1,8 +0,0 @@
|
||||
{
|
||||
"singleQuote": true,
|
||||
"trailingComma": "all",
|
||||
"semi": false,
|
||||
"quoteProps": "consistent",
|
||||
"bracketSpacing": true,
|
||||
"printWidth": 130
|
||||
}
|
||||
@@ -1,199 +0,0 @@
|
||||
# @vue-flow/additional-components
|
||||
|
||||
## 1.3.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#517](https://github.com/bcakmakoglu/vue-flow/pull/517) [`854db502`](https://github.com/bcakmakoglu/vue-flow/commit/854db50282f916faffb0a47f6023a3b522f5f2bd) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add missing `dragging` and `selected` props to minimap node slots
|
||||
|
||||
## 1.3.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#494](https://github.com/bcakmakoglu/vue-flow/pull/494) [`50a24e4`](https://github.com/bcakmakoglu/vue-flow/commit/50a24e4017d47cbe619f34f98a020ed7a2c3bf10) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Apply translateExtent on pan
|
||||
|
||||
## 1.3.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#473](https://github.com/bcakmakoglu/vue-flow/pull/473) [`9b70fc1`](https://github.com/bcakmakoglu/vue-flow/commit/9b70fc15b569598bbbc56d0ff0b22c212ba56fde) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Fix minimap node slots not being rendered
|
||||
|
||||
## 1.3.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- [#438](https://github.com/bcakmakoglu/vue-flow/pull/438) [`32412ed`](https://github.com/bcakmakoglu/vue-flow/commit/32412ed8d6b48a04cd2628960f1a20aa89adc6dc) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add `maskStrokeColor` & `maskStrokeWidth` prop to MiniMap
|
||||
|
||||
## 1.2.4
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#425](https://github.com/bcakmakoglu/vue-flow/pull/425) [`da0a294`](https://github.com/bcakmakoglu/vue-flow/commit/da0a294aa47b091cd846168594d3a01bde057315) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Update deps
|
||||
|
||||
## 1.2.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#422](https://github.com/bcakmakoglu/vue-flow/pull/422) [`c8c9daf`](https://github.com/bcakmakoglu/vue-flow/commit/c8c9daffb72cde2bead300cba504fb2ea5eb44cc) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Use vue flow id as bg pattern id
|
||||
|
||||
## 1.2.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#415](https://github.com/bcakmakoglu/vue-flow/pull/415) [`a27ccc4`](https://github.com/bcakmakoglu/vue-flow/commit/a27ccc46838243bfbe889a74f0ead9f2f381a06f) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Render mini map nodes regardless of `onlyRenderVisibleElements`
|
||||
|
||||
- [#415](https://github.com/bcakmakoglu/vue-flow/pull/415) [`f89d4ec`](https://github.com/bcakmakoglu/vue-flow/commit/f89d4ecbfbb3e708d217dfa6de39bcce1d4a5266) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Inject minimap slots to avoid performance drops when using template slots
|
||||
|
||||
## 1.2.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#398](https://github.com/bcakmakoglu/vue-flow/pull/398) [`0635dfa`](https://github.com/bcakmakoglu/vue-flow/commit/0635dfa171de27063e7d08ba8591330f00982732) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Upgrade to vite 3
|
||||
|
||||
## 1.2.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- [#396](https://github.com/bcakmakoglu/vue-flow/pull/396) [`03412ac`](https://github.com/bcakmakoglu/vue-flow/commit/03412acf0d4452c104cc342e5e11eb3a7671fe72) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add zoomable and pannable to MiniMap
|
||||
|
||||
### Usage
|
||||
|
||||
- Set `zoomable` and `pannable` to `true` in `MiniMap` component to enable interactions with the MiniMap
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<VueFlow v-model="elements">
|
||||
<MiniMap :zoomable="true" :pannable="true" />
|
||||
</VueFlow>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 1.1.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- [#311](https://github.com/bcakmakoglu/vue-flow/pull/311) [`2e2c449b`](https://github.com/bcakmakoglu/vue-flow/commit/2e2c449bf60efed7152930962df2f9b5c0037386) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - # What's changed?
|
||||
|
||||
- Add `Panel` component
|
||||
- Wrap `MiniMap` and `Controls` with `Panel`
|
||||
- Add `position` prop to `MiniMap` and `Controls`
|
||||
Example:
|
||||
|
||||
```vue
|
||||
<VueFlow v-model="elements">
|
||||
<MiniMap position="top-right" />
|
||||
<Controls position="top-left" />
|
||||
</VueFlow>
|
||||
```
|
||||
|
||||
# Bugfixes
|
||||
|
||||
- Fix `MiniMap` and `Controls` cancelling selections
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#311](https://github.com/bcakmakoglu/vue-flow/pull/311) [`e175cf81`](https://github.com/bcakmakoglu/vue-flow/commit/e175cf8157be1851651d6df0a9e87f732b53de59) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - # What's changed?
|
||||
|
||||
- Add `vueflow` pkg that exports all features
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
// `vueflow` pkg exports all features, i.e. core + additional components
|
||||
import { VueFlow, Background, MiniMap, Controls } from 'vueflow'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VueFlow>
|
||||
<Background />
|
||||
<MiniMap />
|
||||
<Controls />
|
||||
</VueFlow>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Chores
|
||||
|
||||
- Rename `core` pkg directory to `core` from `vue-flow`
|
||||
- Rename bundle outputs
|
||||
|
||||
## 1.0.0
|
||||
|
||||
### Major Changes
|
||||
|
||||
- [#305](https://github.com/bcakmakoglu/vue-flow/pull/305) [`939bff50`](https://github.com/bcakmakoglu/vue-flow/commit/939bff503039af3b790160640548ddde984cf2bc) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - # What's changed?
|
||||
|
||||
- Simplify edge path calculations
|
||||
- remove `getEdgeCenter` and `getSimpleEdgeCenter`
|
||||
|
||||
# Breaking Changes
|
||||
|
||||
- `getEdgeCenter` has been removed
|
||||
- Edge center positions can now be accessed from `getBezierPath` or `getSmoothStepPath` functions
|
||||
|
||||
Before:
|
||||
|
||||
```js
|
||||
import { getBezierPath, getEdgeCenter } from '@braks/vue-flow'
|
||||
|
||||
// used to return the path string only
|
||||
const edgePath = computed(() => getBezierPath(pathParams))
|
||||
|
||||
// was necessary to get the centerX, centerY of an edge
|
||||
const centered = computed(() => getEdgeCenter(centerParams))
|
||||
```
|
||||
|
||||
After:
|
||||
|
||||
```js
|
||||
import { getBezierPath } from '@vue-flow/core'
|
||||
|
||||
// returns the path string and the center positions
|
||||
const [path, centerX, centerY] = computed(() => getBezierPath(pathParams))
|
||||
```
|
||||
|
||||
- [#305](https://github.com/bcakmakoglu/vue-flow/pull/305) [`47d837aa`](https://github.com/bcakmakoglu/vue-flow/commit/47d837aac096e59e7f55213990dff2cc7eba0c01) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - # What's changed?
|
||||
|
||||
- Change pkg scope from 'braks' to 'vue-flow'
|
||||
- Add `@vue-flow/core` package
|
||||
- Add `@vue-flow/additional-components` package
|
||||
- Add `@vue-flow/pathfinding-edge` package
|
||||
- Add `@vue-flow/resize-rotate-node` package
|
||||
|
||||
# Features
|
||||
|
||||
- `useNode` and `useEdge` composables
|
||||
- can be used to access current node/edge (or by id) and their respective element refs (if used inside the elements' context, i.e. a custom node/edge)
|
||||
- `selectionKeyCode` as `true`
|
||||
- allows for figma style selection (i.e. create a selection rect without holding shift or any other key)
|
||||
- Handles to trigger handle bounds calculation on mount
|
||||
- if no handle bounds are found, a Handle will try to calculate its bounds on mount
|
||||
- should remove the need for `updateNodeInternals` on dynamic handles
|
||||
- Testing for various features using Cypress 10
|
||||
|
||||
# Bugfixes
|
||||
|
||||
- Fix `removeSelectedEdges` and `removeSelectedNodes` actions not properly removing elements from store
|
||||
|
||||
# Breaking Changes
|
||||
|
||||
- `@vue-flow/core` package is now required to use vue-flow
|
||||
- `@vue-flow/additional-components` package contains `Background`, `MiniMap` and `Controls` components and related types
|
||||
- When switching to the new pkg scope, you need to change the import path.
|
||||
|
||||
Before:
|
||||
|
||||
```js
|
||||
import { VueFlow, Background, MiniMap, Controls } from '@braks/vue-flow'
|
||||
```
|
||||
|
||||
After
|
||||
|
||||
```js
|
||||
import { VueFlow } from '@vue-flow/core'
|
||||
import { Background, MiniMap, Controls } from '@vue-flow/additional-components'
|
||||
```
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`939bff50`](https://github.com/bcakmakoglu/vue-flow/commit/939bff503039af3b790160640548ddde984cf2bc), [`47d837aa`](https://github.com/bcakmakoglu/vue-flow/commit/47d837aac096e59e7f55213990dff2cc7eba0c01)]:
|
||||
- @vue-flow/core@1.0.0
|
||||
@@ -1,48 +0,0 @@
|
||||
# Vue Flow: Additional Components
|
||||
|
||||
This package contains additional components that can be used with Vue Flow.
|
||||
These components include:
|
||||
|
||||
- [Background](https://vueflow.dev/guide/components/background)
|
||||
- [Controls](https://vueflow.dev/guide/components/controls)
|
||||
- [ControlButton](https://vueflow.dev/guide/components/control-button)
|
||||
- [MiniMap](https://vueflow.dev/guide/components/minimap)
|
||||
- [MiniMap Node](https://vueflow.dev/guide/components/minimap-node)
|
||||
|
||||
## 🛠 Setup
|
||||
|
||||
```bash
|
||||
# install
|
||||
$ yarn add @vue-flow/additional-components
|
||||
|
||||
# or
|
||||
$ npm i --save @vue-flow/additional-components
|
||||
```
|
||||
|
||||
## 🎮 Quickstart
|
||||
|
||||
```vue
|
||||
|
||||
<script setup>
|
||||
import { VueFlow } from '@vue-flow/core'
|
||||
import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
|
||||
import initialElements from './initial-elements'
|
||||
|
||||
// some nodes and edges
|
||||
const elements = ref(initialElements)
|
||||
</script>
|
||||
<template>
|
||||
<div style="height: 300px">
|
||||
<VueFlow v-model="elements">
|
||||
<!-- Adds a background to your graph. Use variant to specifiy which type of Background to use (lines, dots) -->
|
||||
<Background :variant="BackgroundVariant.Dots" />
|
||||
|
||||
<!-- Adds zoom/interaction controls to your graph. You can add more buttons by using slots. -->
|
||||
<Controls />
|
||||
|
||||
<!-- Adds a minimap to your graph. -->
|
||||
<MiniMap />
|
||||
</VueFlow>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
@@ -1,54 +0,0 @@
|
||||
{
|
||||
"name": "@vue-flow/additional-components",
|
||||
"version": "1.3.3",
|
||||
"private": false,
|
||||
"license": "MIT",
|
||||
"author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/bcakmakoglu/vue-flow/packages/additional-components"
|
||||
},
|
||||
"homepage": "https://github.com/bcakmakoglu/vue-flow#readme",
|
||||
"bugs": {
|
||||
"url": "https://github.com/bcakmakoglu/vue-flow/issues"
|
||||
},
|
||||
"main": "./dist/vue-flow-additional-components.js",
|
||||
"module": "./dist/vue-flow-additional-components.mjs",
|
||||
"types": "./dist/index.d.ts",
|
||||
"unpkg": "./dist/vue-flow-additional-components.iife.js",
|
||||
"jsdelivr": "./dist/vue-flow-additional-components.iife.js",
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"sideEffects": false,
|
||||
"scripts": {
|
||||
"build": "vite build",
|
||||
"types": "vue-tsc --declaration --emitDeclarationOnly && pnpm lint:dist",
|
||||
"lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path ../../.gitignore .",
|
||||
"lint:dist": "eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix ./dist",
|
||||
"test": "exit 0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.2.25",
|
||||
"@vue-flow/core": "^1.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"d3-selection": "^3.0.0",
|
||||
"d3-zoom": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/d3-selection": "^3.0.3",
|
||||
"@types/d3-zoom": "^3.0.1",
|
||||
"@vue-flow/core": "workspace:*",
|
||||
"@vitejs/plugin-vue": "^3.2.0",
|
||||
"unplugin-auto-import": "^0.12.0",
|
||||
"vite": "^3.2.5",
|
||||
"vite-svg-loader": "^3.6.0",
|
||||
"vite-plugin-vue-type-imports": "0.2.0",
|
||||
"vue-tsc": "^1.0.11"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public",
|
||||
"registry": "https://registry.npmjs.org/"
|
||||
}
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
// Generated by 'unplugin-auto-import'
|
||||
export {}
|
||||
declare global {
|
||||
const $$: typeof import('vue/macros')['$$']
|
||||
const $: typeof import('vue/macros')['$']
|
||||
const $computed: typeof import('vue/macros')['$computed']
|
||||
const $customRef: typeof import('vue/macros')['$customRef']
|
||||
const $ref: typeof import('vue/macros')['$ref']
|
||||
const $shallowRef: typeof import('vue/macros')['$shallowRef']
|
||||
const $toRef: typeof import('vue/macros')['$toRef']
|
||||
const EffectScope: typeof import('vue')['EffectScope']
|
||||
const computed: typeof import('vue')['computed']
|
||||
const createApp: typeof import('vue')['createApp']
|
||||
const customRef: typeof import('vue')['customRef']
|
||||
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
|
||||
const defineComponent: typeof import('vue')['defineComponent']
|
||||
const effectScope: typeof import('vue')['effectScope']
|
||||
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||
const h: typeof import('vue')['h']
|
||||
const inject: typeof import('vue')['inject']
|
||||
const isProxy: typeof import('vue')['isProxy']
|
||||
const isReactive: typeof import('vue')['isReactive']
|
||||
const isReadonly: typeof import('vue')['isReadonly']
|
||||
const isRef: typeof import('vue')['isRef']
|
||||
const markRaw: typeof import('vue')['markRaw']
|
||||
const nextTick: typeof import('vue')['nextTick']
|
||||
const onActivated: typeof import('vue')['onActivated']
|
||||
const onBeforeMount: typeof import('vue')['onBeforeMount']
|
||||
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
|
||||
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
|
||||
const onDeactivated: typeof import('vue')['onDeactivated']
|
||||
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
|
||||
const onMounted: typeof import('vue')['onMounted']
|
||||
const onRenderTracked: typeof import('vue')['onRenderTracked']
|
||||
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
|
||||
const onScopeDispose: typeof import('vue')['onScopeDispose']
|
||||
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
||||
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||
const onUpdated: typeof import('vue')['onUpdated']
|
||||
const provide: typeof import('vue')['provide']
|
||||
const reactive: typeof import('vue')['reactive']
|
||||
const readonly: typeof import('vue')['readonly']
|
||||
const ref: typeof import('vue')['ref']
|
||||
const resolveComponent: typeof import('vue')['resolveComponent']
|
||||
const resolveDirective: typeof import('vue')['resolveDirective']
|
||||
const shallowReactive: typeof import('vue')['shallowReactive']
|
||||
const shallowReadonly: typeof import('vue')['shallowReadonly']
|
||||
const shallowRef: typeof import('vue')['shallowRef']
|
||||
const toRaw: typeof import('vue')['toRaw']
|
||||
const toRef: typeof import('vue')['toRef']
|
||||
const toRefs: typeof import('vue')['toRefs']
|
||||
const triggerRef: typeof import('vue')['triggerRef']
|
||||
const unref: typeof import('vue')['unref']
|
||||
const useAttrs: typeof import('vue')['useAttrs']
|
||||
const useCssModule: typeof import('vue')['useCssModule']
|
||||
const useCssVars: typeof import('vue')['useCssVars']
|
||||
const useSlots: typeof import('vue')['useSlots']
|
||||
const watch: typeof import('vue')['watch']
|
||||
const watchEffect: typeof import('vue')['watchEffect']
|
||||
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
||||
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { useVueFlow } from '@vue-flow/core'
|
||||
import { BackgroundVariant } from './types'
|
||||
import type { BackgroundProps } from './types'
|
||||
|
||||
const {
|
||||
variant = 'dots' as BackgroundVariant,
|
||||
gap = 10,
|
||||
size = 0.4,
|
||||
height = 100,
|
||||
width = 100,
|
||||
x = 0,
|
||||
y = 0,
|
||||
bgColor,
|
||||
patternColor: initialPatternColor,
|
||||
} = defineProps<BackgroundProps>()
|
||||
|
||||
const defaultColors: Record<BackgroundVariant, string> = {
|
||||
[BackgroundVariant.Dots]: '#81818a',
|
||||
[BackgroundVariant.Lines]: '#eee',
|
||||
}
|
||||
|
||||
const { id, viewport } = useVueFlow()
|
||||
|
||||
const background = $computed(() => {
|
||||
const scaledGap = gap && gap * viewport.value.zoom
|
||||
const xOffset = scaledGap && viewport.value.x % scaledGap
|
||||
const yOffset = scaledGap && viewport.value.y % scaledGap
|
||||
const bgSize = size * viewport.value.zoom
|
||||
|
||||
return {
|
||||
scaledGap,
|
||||
xOffset,
|
||||
yOffset,
|
||||
size: bgSize,
|
||||
}
|
||||
})
|
||||
|
||||
// when there are multiple flows on a page we need to make sure that every background gets its own pattern.
|
||||
const patternId = `pattern-${id}`
|
||||
|
||||
const patternColor = computed(() => initialPatternColor || defaultColors[variant || BackgroundVariant.Dots])
|
||||
|
||||
const d = computed(
|
||||
() => `M${background.scaledGap / 2} 0 V${background.scaledGap} M0 ${background.scaledGap / 2} H${background.scaledGap}`,
|
||||
)
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Background',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
class="vue-flow__background"
|
||||
:style="{
|
||||
height: `${height > 100 ? 100 : height}%`,
|
||||
width: `${width > 100 ? 100 : width}%`,
|
||||
}"
|
||||
>
|
||||
<slot :id="patternId" name="pattern-container">
|
||||
<pattern
|
||||
:id="patternId"
|
||||
:x="background.xOffset"
|
||||
:y="background.yOffset"
|
||||
:width="background.scaledGap"
|
||||
:height="background.scaledGap"
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<slot name="pattern">
|
||||
<template v-if="variant === BackgroundVariant.Lines">
|
||||
<path :stroke="patternColor" :stroke-width="size" :d="d" />
|
||||
</template>
|
||||
|
||||
<template v-else-if="variant === BackgroundVariant.Dots">
|
||||
<circle :cx="background.size" :cy="background.size" :r="background.size" :fill="patternColor" />
|
||||
</template>
|
||||
|
||||
<svg v-if="bgColor" height="100" width="100">
|
||||
<rect width="100%" height="100%" :fill="bgColor" />
|
||||
</svg>
|
||||
</slot>
|
||||
</pattern>
|
||||
</slot>
|
||||
|
||||
<rect :x="x" :y="y" width="100%" height="100%" :fill="`url(#${patternId})`" />
|
||||
|
||||
<slot :id="patternId" />
|
||||
</svg>
|
||||
</template>
|
||||
@@ -1,2 +0,0 @@
|
||||
export { default as Background } from './Background.vue'
|
||||
export * from './types'
|
||||
@@ -1,25 +0,0 @@
|
||||
export enum BackgroundVariant {
|
||||
Lines = 'lines',
|
||||
Dots = 'dots',
|
||||
}
|
||||
|
||||
export interface BackgroundProps {
|
||||
/** The background pattern variant, {@link BackgroundVariant} */
|
||||
variant?: BackgroundVariant
|
||||
/** Background pattern gap */
|
||||
gap?: number
|
||||
/** Background pattern size */
|
||||
size?: number
|
||||
/** Background pattern color */
|
||||
patternColor?: string
|
||||
/** Background color */
|
||||
bgColor?: string
|
||||
/** Background height */
|
||||
height?: number
|
||||
/** Background width */
|
||||
width?: number
|
||||
/** Background x-coordinate (offset x) */
|
||||
x?: number
|
||||
/** Background y-coordinate (offset y) */
|
||||
y?: number
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'ControlButton',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button class="vue-flow__controls-button">
|
||||
<slot></slot>
|
||||
</button>
|
||||
</template>
|
||||
@@ -1,100 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { Panel, useVueFlow } from '@vue-flow/core'
|
||||
import type { PanelPosition } from '@vue-flow/core'
|
||||
import type { ControlProps } from './types'
|
||||
import ControlButton from './ControlButton.vue'
|
||||
import PlusIcon from './icons/plus.svg'
|
||||
import MinusIcon from './icons/minus.svg'
|
||||
import FitView from './icons/fitview.svg'
|
||||
import Lock from './icons/lock.svg'
|
||||
import Unlock from './icons/unlock.svg'
|
||||
|
||||
const {
|
||||
showZoom = true,
|
||||
showFitView = true,
|
||||
showInteractive = true,
|
||||
fitViewParams,
|
||||
position = 'bottom-left' as PanelPosition,
|
||||
} = defineProps<ControlProps>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'zoomIn'): void
|
||||
(event: 'zoomOut'): void
|
||||
(event: 'fitView'): void
|
||||
(event: 'interactionChange', active: boolean): void
|
||||
}>()
|
||||
|
||||
const { nodesDraggable, nodesConnectable, elementsSelectable, setInteractive, zoomIn, zoomOut, fitView } = $(useVueFlow())
|
||||
|
||||
const isInteractive = computed(() => nodesDraggable && nodesConnectable && elementsSelectable)
|
||||
|
||||
const onZoomInHandler = () => {
|
||||
zoomIn()
|
||||
emit('zoomIn')
|
||||
}
|
||||
|
||||
const onZoomOutHandler = () => {
|
||||
zoomOut()
|
||||
emit('zoomOut')
|
||||
}
|
||||
|
||||
const onFitViewHandler = () => {
|
||||
fitView(fitViewParams)
|
||||
emit('fitView')
|
||||
}
|
||||
|
||||
const onInteractiveChangeHandler = () => {
|
||||
setInteractive(!isInteractive.value)
|
||||
emit('interactionChange', !isInteractive.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Controls',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Panel class="vue-flow__controls" :position="position">
|
||||
<slot name="top"></slot>
|
||||
<template v-if="showZoom">
|
||||
<slot name="control-zoom-in">
|
||||
<ControlButton class="vue-flow__controls-zoomin" @click="onZoomInHandler">
|
||||
<slot name="icon-zoom-in">
|
||||
<component :is="PlusIcon" />
|
||||
</slot>
|
||||
</ControlButton>
|
||||
</slot>
|
||||
<slot name="control-zoom-out">
|
||||
<ControlButton class="vue-flow__controls-zoomout" @click="onZoomOutHandler">
|
||||
<slot name="icon-zoom-out">
|
||||
<component :is="MinusIcon" />
|
||||
</slot>
|
||||
</ControlButton>
|
||||
</slot>
|
||||
</template>
|
||||
<template v-if="showFitView">
|
||||
<slot name="control-fit-view">
|
||||
<ControlButton class="vue-flow__controls-fitview" @click="onFitViewHandler">
|
||||
<slot name="icon-fit-view">
|
||||
<component :is="FitView" />
|
||||
</slot>
|
||||
</ControlButton>
|
||||
</slot>
|
||||
</template>
|
||||
<template v-if="showInteractive">
|
||||
<slot name="control-interactive">
|
||||
<ControlButton v-if="showInteractive" class="vue-flow__controls-interactive" @click="onInteractiveChangeHandler">
|
||||
<slot v-if="isInteractive" name="icon-unlock">
|
||||
<component :is="Unlock" />
|
||||
</slot>
|
||||
<slot v-if="!isInteractive" name="icon-lock">
|
||||
<component :is="Lock" />
|
||||
</slot>
|
||||
</ControlButton>
|
||||
</slot>
|
||||
</template>
|
||||
<slot></slot>
|
||||
</Panel>
|
||||
</template>
|
||||
@@ -1,3 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30">
|
||||
<path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 463 B |
@@ -1,3 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
|
||||
<path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 530 B |
@@ -1,3 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5">
|
||||
<path d="M0 0h32v4.2H0z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 96 B |
@@ -1,3 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 152 B |
@@ -1,3 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
|
||||
<path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 472 B |
@@ -1,4 +0,0 @@
|
||||
export { default as Controls } from './Controls.vue'
|
||||
export { default as ControlButton } from './ControlButton.vue'
|
||||
|
||||
export * from './types'
|
||||
@@ -1,15 +0,0 @@
|
||||
import type { FitViewParams } from '@vue-flow/core'
|
||||
import type { PanelPosition } from '../panel'
|
||||
|
||||
export interface ControlProps {
|
||||
/** Show the zoom icon */
|
||||
showZoom?: boolean
|
||||
/** Show the fit-view icon */
|
||||
showFitView?: boolean
|
||||
/** Show the interactive icon */
|
||||
showInteractive?: boolean
|
||||
/** Params to use on fitView */
|
||||
fitViewParams?: FitViewParams
|
||||
/** Position of the controls {@link PanelPosition} */
|
||||
position?: PanelPosition
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
/**
|
||||
* Additional components
|
||||
* @module additional-components
|
||||
*/
|
||||
|
||||
export * from './background'
|
||||
export * from './controls'
|
||||
export * from './minimap'
|
||||
export * from './panel'
|
||||
@@ -1,242 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { CoordinateExtent, GraphNode, PanelPosition } from '@vue-flow/core'
|
||||
import { Panel, getBoundsofRects, getConnectedEdges, getRectOfNodes, useVueFlow } from '@vue-flow/core'
|
||||
import { zoom, zoomIdentity } from 'd3-zoom'
|
||||
import type { D3ZoomEvent } from 'd3-zoom'
|
||||
import { pointer, select } from 'd3-selection'
|
||||
import type { MiniMapNodeFunc, MiniMapProps, ShapeRendering } from './types'
|
||||
import MiniMapNode from './MiniMapNode'
|
||||
import { MiniMapSlots } from './types'
|
||||
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
nodeStrokeColor = 'transparent',
|
||||
nodeColor = '#e2e2e2',
|
||||
nodeClassName,
|
||||
nodeBorderRadius = 5,
|
||||
nodeStrokeWidth = 2,
|
||||
maskColor = 'rgb(240, 240, 240, 0.6)',
|
||||
position = 'bottom-right' as PanelPosition,
|
||||
maskStrokeColor = 'none',
|
||||
maskStrokeWidth = 1,
|
||||
pannable = false,
|
||||
zoomable = false,
|
||||
} = defineProps<MiniMapProps>()
|
||||
|
||||
const emit = defineEmits(['click', 'nodeClick', 'nodeDblclick', 'nodeMouseenter', 'nodeMousemove', 'nodeMouseleave'])
|
||||
|
||||
const attrs: Record<string, any> = useAttrs()
|
||||
|
||||
const defaultWidth = 200
|
||||
const defaultHeight = 150
|
||||
|
||||
const { id, edges, viewport, translateExtent, dimensions, emits, nodes, d3Selection, d3Zoom } = useVueFlow()
|
||||
|
||||
const el = ref<SVGElement>()
|
||||
|
||||
provide(MiniMapSlots, useSlots())
|
||||
|
||||
const elementWidth = computed(() => width ?? attrs.style?.width ?? defaultWidth)
|
||||
|
||||
const elementHeight = computed(() => height ?? attrs.style?.height ?? defaultHeight)
|
||||
|
||||
const shapeRendering: ShapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
|
||||
|
||||
const nodeColorFunc = computed<MiniMapNodeFunc>(() => (nodeColor instanceof Function ? nodeColor : () => nodeColor as string))
|
||||
|
||||
const nodeStrokeColorFunc = computed<MiniMapNodeFunc>(() =>
|
||||
nodeStrokeColor instanceof Function ? nodeStrokeColor : () => nodeStrokeColor as string,
|
||||
)
|
||||
|
||||
const nodeClassNameFunc = computed<MiniMapNodeFunc>(() =>
|
||||
nodeClassName instanceof Function ? nodeClassName : ((() => nodeClassName) as MiniMapNodeFunc),
|
||||
)
|
||||
|
||||
const bb = computed(() => getRectOfNodes(nodes.value))
|
||||
|
||||
const viewBB = computed(() => ({
|
||||
x: -viewport.value.x / viewport.value.zoom,
|
||||
y: -viewport.value.y / viewport.value.zoom,
|
||||
width: dimensions.value.width / viewport.value.zoom,
|
||||
height: dimensions.value.height / viewport.value.zoom,
|
||||
}))
|
||||
|
||||
const boundingRect = computed(() => (nodes.value && nodes.value.length ? getBoundsofRects(bb.value, viewBB.value) : viewBB.value))
|
||||
|
||||
const viewScale = computed(() => {
|
||||
const scaledWidth = boundingRect.value.width / elementWidth.value
|
||||
const scaledHeight = boundingRect.value.height / elementHeight.value
|
||||
|
||||
return Math.max(scaledWidth, scaledHeight)
|
||||
})
|
||||
|
||||
const viewBox = computed(() => {
|
||||
const viewWidth = viewScale.value * elementWidth.value
|
||||
const viewHeight = viewScale.value * elementHeight.value
|
||||
const offset = 5 * viewScale.value
|
||||
|
||||
return {
|
||||
offset,
|
||||
x: boundingRect.value.x - (viewWidth - boundingRect.value.width) / 2 - offset,
|
||||
y: boundingRect.value.y - (viewHeight - boundingRect.value.height) / 2 - offset,
|
||||
width: viewWidth + offset * 2,
|
||||
height: viewHeight + offset * 2,
|
||||
}
|
||||
})
|
||||
|
||||
const d = computed(() => {
|
||||
if (!viewBox.value.x || !viewBox.value.y) return ''
|
||||
|
||||
return `
|
||||
M${viewBox.value.x - viewBox.value.offset},${viewBox.value.y - viewBox.value.offset}
|
||||
h${viewBox.value.width + viewBox.value.offset * 2}
|
||||
v${viewBox.value.height + viewBox.value.offset * 2}
|
||||
h${-viewBox.value.width - viewBox.value.offset * 2}z
|
||||
M${viewBB.value.x},${viewBB.value.y}
|
||||
h${viewBB.value.width}
|
||||
v${viewBB.value.height}
|
||||
h${-viewBB.value.width}z`
|
||||
})
|
||||
|
||||
watchEffect(
|
||||
(onCleanup) => {
|
||||
if (el.value) {
|
||||
const selection = select(el.value as Element)
|
||||
|
||||
const zoomHandler = (event: D3ZoomEvent<SVGSVGElement, any>) => {
|
||||
if (event.sourceEvent.type !== 'wheel' || !d3Selection.value || !d3Zoom.value) {
|
||||
return
|
||||
}
|
||||
|
||||
const pinchDelta =
|
||||
-event.sourceEvent.deltaY * (event.sourceEvent.deltaMode === 1 ? 0.05 : event.sourceEvent.deltaMode ? 1 : 0.002) * 10
|
||||
const zoom = viewport.value.zoom * 2 ** pinchDelta
|
||||
|
||||
d3Zoom.value.scaleTo(d3Selection.value, zoom)
|
||||
}
|
||||
|
||||
const panHandler = (event: D3ZoomEvent<HTMLDivElement, any>) => {
|
||||
if (event.sourceEvent.type !== 'mousemove' || !d3Selection.value || !d3Zoom.value) {
|
||||
return
|
||||
}
|
||||
|
||||
const position = {
|
||||
x: viewport.value.x - event.sourceEvent.movementX * viewScale.value * Math.max(1, viewport.value.zoom),
|
||||
y: viewport.value.y - event.sourceEvent.movementY * viewScale.value * Math.max(1, viewport.value.zoom),
|
||||
}
|
||||
|
||||
const extent: CoordinateExtent = [
|
||||
[0, 0],
|
||||
[dimensions.value.width, dimensions.value.height],
|
||||
]
|
||||
|
||||
const nextTransform = zoomIdentity.translate(position.x, position.y).scale(viewport.value.zoom)
|
||||
const constrainedTransform = d3Zoom.value.constrain()(nextTransform, extent, translateExtent.value)
|
||||
|
||||
d3Zoom.value.transform(d3Selection.value, constrainedTransform)
|
||||
}
|
||||
|
||||
const zoomAndPanHandler = zoom()
|
||||
.on('zoom', pannable ? panHandler : () => {})
|
||||
.on('zoom.wheel', zoomable ? zoomHandler : () => {})
|
||||
|
||||
selection.call(zoomAndPanHandler)
|
||||
|
||||
onCleanup(() => {
|
||||
selection.on('zoom', null)
|
||||
})
|
||||
}
|
||||
},
|
||||
{ flush: 'post' },
|
||||
)
|
||||
|
||||
const onSvgClick = (event: MouseEvent) => {
|
||||
const [x, y] = pointer(event)
|
||||
emit('click', { event, position: { x, y } })
|
||||
}
|
||||
|
||||
const onNodeClick = (event: MouseEvent, node: GraphNode) => {
|
||||
const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
|
||||
emits.miniMapNodeClick(param)
|
||||
emit('nodeClick', param)
|
||||
}
|
||||
|
||||
const onNodeDblClick = (event: MouseEvent, node: GraphNode) => {
|
||||
const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
|
||||
emits.miniMapNodeDoubleClick(param)
|
||||
emit('nodeDblclick', param)
|
||||
}
|
||||
|
||||
const onNodeMouseEnter = (event: MouseEvent, node: GraphNode) => {
|
||||
const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
|
||||
emits.miniMapNodeMouseEnter(param)
|
||||
emit('nodeMouseenter', param)
|
||||
}
|
||||
|
||||
const onNodeMouseMove = (event: MouseEvent, node: GraphNode) => {
|
||||
const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
|
||||
emits.miniMapNodeMouseMove(param)
|
||||
emit('nodeMousemove', param)
|
||||
}
|
||||
|
||||
const onNodeMouseLeave = (event: MouseEvent, node: GraphNode) => {
|
||||
const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
|
||||
emits.miniMapNodeMouseLeave(param)
|
||||
emit('nodeMouseleave', param)
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'MiniMap',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Panel :position="position" class="vue-flow__minimap" :class="{ pannable, zoomable }">
|
||||
<svg
|
||||
ref="el"
|
||||
:width="elementWidth"
|
||||
:height="elementHeight"
|
||||
:viewBox="[viewBox.x, viewBox.y, viewBox.width, viewBox.height].join(' ')"
|
||||
role="img"
|
||||
:aria-labelledby="`vue-flow__minimap-${id}`"
|
||||
@click="onSvgClick"
|
||||
>
|
||||
<title :id="`vue-flow__minimap-${id}`">Vue Flow mini map {{ id }}</title>
|
||||
|
||||
<MiniMapNode
|
||||
v-for="node of nodes"
|
||||
:id="node.id"
|
||||
:key="node.id"
|
||||
:position="node.computedPosition"
|
||||
:dimensions="node.dimensions"
|
||||
:style="node.style"
|
||||
:selected="node.selected"
|
||||
:dragging="node.dragging"
|
||||
:class="nodeClassNameFunc(node)"
|
||||
:color="nodeColorFunc(node)"
|
||||
:border-radius="nodeBorderRadius"
|
||||
:stroke-color="nodeStrokeColorFunc(node)"
|
||||
:stroke-width="nodeStrokeWidth"
|
||||
:shape-rendering="shapeRendering"
|
||||
:type="node.type"
|
||||
@click="onNodeClick($event, node)"
|
||||
@dblclick="onNodeDblClick($event, node)"
|
||||
@mouseenter="onNodeMouseEnter($event, node)"
|
||||
@mousemove="onNodeMouseMove($event, node)"
|
||||
@mouseleave="onNodeMouseLeave($event, node)"
|
||||
/>
|
||||
|
||||
<path
|
||||
class="vue-flow__minimap-mask"
|
||||
:d="d"
|
||||
:fill="maskColor"
|
||||
:stroke="maskStrokeColor"
|
||||
:stroke-width="maskStrokeWidth"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</Panel>
|
||||
</template>
|
||||
@@ -1,52 +0,0 @@
|
||||
import type { CSSProperties, Slots } from 'vue'
|
||||
import type { MiniMapNodeProps } from './types'
|
||||
import { MiniMapSlots } from './types'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'MiniMapNode',
|
||||
props: [
|
||||
'id',
|
||||
'position',
|
||||
'dimensions',
|
||||
'strokeWidth',
|
||||
'strokeColor',
|
||||
'borderRadius',
|
||||
'color',
|
||||
'shapeRendering',
|
||||
'type',
|
||||
'selected',
|
||||
'dragging',
|
||||
],
|
||||
emits: ['click', 'dblclick', 'mouseenter', 'mousemove', 'mouseleave'],
|
||||
setup(props: MiniMapNodeProps, { attrs, emit }) {
|
||||
const miniMapSlots: Slots = inject(MiniMapSlots)!
|
||||
|
||||
return () => {
|
||||
const style = (attrs.style ?? {}) as CSSProperties
|
||||
const slot = miniMapSlots[`node-${props.type}`]
|
||||
|
||||
if (slot) return slot!(props)
|
||||
|
||||
return h('rect', {
|
||||
id: props.id,
|
||||
class: ['vue-flow__minimap-node', attrs.class].join(' '),
|
||||
style,
|
||||
x: props.position.x,
|
||||
y: props.position.y,
|
||||
rx: props.borderRadius,
|
||||
ry: props.borderRadius,
|
||||
width: props.dimensions.width,
|
||||
height: props.dimensions.height,
|
||||
fill: props.color || (style.background as string) || style.backgroundColor,
|
||||
stroke: props.strokeColor,
|
||||
strokeWidth: props.strokeWidth,
|
||||
shapeRendering: props.shapeRendering,
|
||||
onClick: (e: MouseEvent) => emit('click', e),
|
||||
onDblClick: (e: MouseEvent) => emit('dblclick', e),
|
||||
onMouseenter: (e: MouseEvent) => emit('mouseenter', e),
|
||||
onMousemove: (e: MouseEvent) => emit('mousemove', e),
|
||||
onMouseleave: (e: MouseEvent) => emit('mouseleave', e),
|
||||
})
|
||||
}
|
||||
},
|
||||
})
|
||||
@@ -1,4 +0,0 @@
|
||||
export { default as MiniMap } from './MiniMap.vue'
|
||||
export { default as MiniMapNode } from './MiniMapNode'
|
||||
|
||||
export * from './types'
|
||||
@@ -1,58 +0,0 @@
|
||||
import type { Dimensions, GraphNode, XYPosition } from '@vue-flow/core'
|
||||
import type { CSSProperties, InjectionKey, Slots } from 'vue'
|
||||
import type { PanelPosition } from '../panel'
|
||||
|
||||
/** expects a node and returns a color value */
|
||||
export type MiniMapNodeFunc = (node: GraphNode) => string
|
||||
// hack for vue-type imports
|
||||
type MiniMapNodeFunc2 = (node: GraphNode) => string
|
||||
type MiniMapNodeFunc3 = (node: GraphNode) => string
|
||||
|
||||
export type ShapeRendering = CSSProperties['shapeRendering']
|
||||
|
||||
export interface MiniMapProps {
|
||||
/** Node color, can be either a string or a string func that receives the current node */
|
||||
nodeColor?: string | MiniMapNodeFunc
|
||||
/** Node stroke color, can be either a string or a string func that receives the current node */
|
||||
nodeStrokeColor?: string | MiniMapNodeFunc2
|
||||
/** Additional node class name, can be either a string or a string func that receives the current node */
|
||||
nodeClassName?: string | MiniMapNodeFunc3
|
||||
/** Node border radius */
|
||||
nodeBorderRadius?: number
|
||||
/** Node stroke width */
|
||||
nodeStrokeWidth?: number
|
||||
/** Background color of minimap mask */
|
||||
maskColor?: string
|
||||
/** Border color of minimap mask */
|
||||
maskStrokeColor?: string
|
||||
/** Border width of minimap mask */
|
||||
maskStrokeWidth?: number
|
||||
/** Position of the minimap {@link PanelPosition} */
|
||||
position?: PanelPosition
|
||||
/** Enable drag minimap to drag viewport */
|
||||
pannable?: boolean
|
||||
/** Enable zoom minimap to zoom viewport */
|
||||
zoomable?: boolean
|
||||
|
||||
width?: number
|
||||
|
||||
height?: number
|
||||
}
|
||||
|
||||
/** these props are passed to mini map node slots */
|
||||
export interface MiniMapNodeProps {
|
||||
id: string
|
||||
type: string
|
||||
parentNode?: string
|
||||
selected?: boolean
|
||||
dragging?: boolean
|
||||
position: XYPosition
|
||||
dimensions: Dimensions
|
||||
borderRadius?: number
|
||||
color?: string
|
||||
shapeRendering?: ShapeRendering
|
||||
strokeColor?: string
|
||||
strokeWidth?: number
|
||||
}
|
||||
|
||||
export const MiniMapSlots: InjectionKey<Slots> = Symbol('MiniMapSlots')
|
||||
@@ -1,3 +0,0 @@
|
||||
declare interface Window {
|
||||
chrome: any
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"module": "ESNext",
|
||||
"target": "es2017",
|
||||
"lib": ["DOM", "ESNext"],
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"incremental": false,
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"noUnusedLocals": false,
|
||||
"strictNullChecks": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"declaration": true,
|
||||
"declarationDir": "./dist",
|
||||
"types": ["vite/client", "vue/macros"],
|
||||
"paths": {
|
||||
"~/*": ["src/*"]
|
||||
},
|
||||
},
|
||||
"include": ["./src"],
|
||||
"exclude": ["node_modules", "dist"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"],
|
||||
"files": ["package.json"]
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
import { resolve } from 'path'
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
import vueTypes from 'vite-plugin-vue-type-imports'
|
||||
import svgLoader from 'vite-svg-loader'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
resolve: {
|
||||
alias: {
|
||||
'~': resolve('src'),
|
||||
},
|
||||
extensions: ['.ts', '.vue'],
|
||||
},
|
||||
build: {
|
||||
minify: 'esbuild',
|
||||
emptyOutDir: false,
|
||||
lib: {
|
||||
formats: ['es', 'cjs', 'iife'],
|
||||
entry: resolve(__dirname, 'src/index.ts'),
|
||||
fileName: 'vue-flow-additional-components',
|
||||
name: 'vueFlowAdditionalComponents',
|
||||
},
|
||||
rollupOptions: {
|
||||
// make sure to externalize deps that shouldn't be bundled
|
||||
// into your library
|
||||
external: ['vue', '@vue-flow/core'],
|
||||
output: {
|
||||
dir: './dist',
|
||||
// Provide global variables to use in the UMD build
|
||||
// for externalized deps
|
||||
globals: {
|
||||
'vue': 'Vue',
|
||||
'@vue-flow/core': 'VueFlow',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
vue({
|
||||
reactivityTransform: true,
|
||||
}),
|
||||
vueTypes(),
|
||||
AutoImport({
|
||||
imports: ['vue', 'vue/macros'],
|
||||
dts: 'src/auto-imports.d.ts',
|
||||
}),
|
||||
svgLoader(),
|
||||
],
|
||||
})
|
||||
Reference in New Issue
Block a user