chore: remove resize rotate node pkg
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
@@ -1,8 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
rules: {
|
|
||||||
'no-use-before-define': 0,
|
|
||||||
'vue/no-setup-props-destructure': 0,
|
|
||||||
},
|
|
||||||
extends: ['../../.eslintrc.js'],
|
|
||||||
ignorePatterns: ['!**/*'],
|
|
||||||
}
|
|
||||||
@@ -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,95 +0,0 @@
|
|||||||
# @vue-flow/resize-rotate-node
|
|
||||||
|
|
||||||
## 1.0.2
|
|
||||||
|
|
||||||
### Patch Changes
|
|
||||||
|
|
||||||
- [#469](https://github.com/bcakmakoglu/vue-flow/pull/469) [`870eec0`](https://github.com/bcakmakoglu/vue-flow/commit/870eec046f00ad19bd0866278729ae9269624299) Thanks [@Congyuwang](https://github.com/Congyuwang)! - Sync Node position after Resizing
|
|
||||||
|
|
||||||
## 1.0.1
|
|
||||||
|
|
||||||
### Patch Changes
|
|
||||||
|
|
||||||
- [#365](https://github.com/bcakmakoglu/vue-flow/pull/365) [`009bbdb`](https://github.com/bcakmakoglu/vue-flow/commit/009bbdba6d7e896bcfcaf8f07e7fdc8a83cc52fc) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Fix output file names for resize-rotate-node and pathfinding-edge pkgs
|
|
||||||
|
|
||||||
## 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,84 +0,0 @@
|
|||||||
# Vue Flow Resizable Rotatable Node
|
|
||||||
|
|
||||||
### Custom Node that can be resized and rotated
|
|
||||||
|
|
||||||
## 🛠 Setup
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# install
|
|
||||||
$ yarn add @vue-flow/resize-rotate-node
|
|
||||||
|
|
||||||
# or
|
|
||||||
$ npm i --save @vue-flow/resize-rotate-node
|
|
||||||
```
|
|
||||||
|
|
||||||
## 🎮 Quickstart
|
|
||||||
|
|
||||||
```vue
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { VueFlow } from '@vue-flow/core'
|
|
||||||
import { ResizeRotateNode } from '@vue-flow/resize-rotate-node'
|
|
||||||
import initialElements from './initial-elements'
|
|
||||||
|
|
||||||
const elements = ref(initialElements)
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div style="height: 300px">
|
|
||||||
<VueFlow v-model="elements">
|
|
||||||
<template #node-resize-rotate="props">
|
|
||||||
<ResizeRotateNode v-bind="props" />
|
|
||||||
</template>
|
|
||||||
</VueFlow>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
// initial-elements.js
|
|
||||||
export default [
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
label: 'Node 1',
|
|
||||||
type: 'resize-rotate',
|
|
||||||
targetPosition: 'left',
|
|
||||||
sourcePosition: 'right',
|
|
||||||
position: {
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
},
|
|
||||||
data: {
|
|
||||||
// additional styles for the node
|
|
||||||
// cannot use the regular style tag as those apply to the node wrapper
|
|
||||||
style: {
|
|
||||||
background: 'rgb(255, 0, 114) none repeat scroll 0% 0%',
|
|
||||||
padding: '20px',
|
|
||||||
borderRadius: '20px',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '2',
|
|
||||||
label: 'Node 2',
|
|
||||||
type: 'resize-rotate',
|
|
||||||
targetPosition: 'left',
|
|
||||||
position: {
|
|
||||||
x: 330,
|
|
||||||
y: 50,
|
|
||||||
},
|
|
||||||
data: {
|
|
||||||
style: {
|
|
||||||
background: 'rgb(50, 188, 188) none repeat scroll 0% 0%',
|
|
||||||
padding: '20px',
|
|
||||||
borderRadius: '20px',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'e1-2',
|
|
||||||
source: '1',
|
|
||||||
target: '2',
|
|
||||||
type: 'smoothstep',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
```
|
|
||||||
@@ -1,46 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import type { Elements, FlowEvents } from '@vue-flow/core'
|
|
||||||
import { VueFlow, addEdge } from '@vue-flow/core'
|
|
||||||
import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import { ResizeRotateNode } from '../src'
|
|
||||||
import initialElements from './elements'
|
|
||||||
|
|
||||||
const elements = ref<Elements>(initialElements)
|
|
||||||
|
|
||||||
const onConnect = (params: FlowEvents['connect']) => (elements.value = addEdge(params, elements.value))
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div style="height: 100%">
|
|
||||||
<VueFlow v-model="elements" class="vue-flow-basic-example" fit-view @connect="onConnect">
|
|
||||||
<template #node-resize-rotate="props">
|
|
||||||
<ResizeRotateNode v-bind="props" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<Controls />
|
|
||||||
|
|
||||||
<MiniMap />
|
|
||||||
|
|
||||||
<Background variant="lines" color="#aaa" size="1" :gap="10" />
|
|
||||||
</VueFlow>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
@import '@vue-flow/core/dist/style.css';
|
|
||||||
@import '@vue-flow/core/dist/theme-default.css';
|
|
||||||
|
|
||||||
html,
|
|
||||||
body,
|
|
||||||
#root {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
font-family: 'JetBrains Mono', monospace;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
import type { Elements } from '@vue-flow/core'
|
|
||||||
|
|
||||||
export default [
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
label: 'Node 1',
|
|
||||||
type: 'resize-rotate',
|
|
||||||
targetPosition: 'left',
|
|
||||||
sourcePosition: 'right',
|
|
||||||
position: {
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
},
|
|
||||||
data: {
|
|
||||||
style: {
|
|
||||||
background: 'rgb(255, 0, 114) none repeat scroll 0% 0%',
|
|
||||||
padding: '20px',
|
|
||||||
borderRadius: '20px',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '2',
|
|
||||||
label: 'Node 2',
|
|
||||||
type: 'resize-rotate',
|
|
||||||
targetPosition: 'left',
|
|
||||||
position: {
|
|
||||||
x: 330,
|
|
||||||
y: 50,
|
|
||||||
},
|
|
||||||
data: {
|
|
||||||
style: {
|
|
||||||
background: 'rgb(50, 188, 188) none repeat scroll 0% 0%',
|
|
||||||
padding: '20px',
|
|
||||||
borderRadius: '20px',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'e1-2',
|
|
||||||
source: '1',
|
|
||||||
target: '2',
|
|
||||||
type: 'smoothstep',
|
|
||||||
},
|
|
||||||
] as Elements
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
import { createApp } from 'vue'
|
|
||||||
import App from './App.vue'
|
|
||||||
|
|
||||||
const app = createApp(App)
|
|
||||||
|
|
||||||
app.config.performance = true
|
|
||||||
app.mount('#root')
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>🌊 Vue Flow</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="root"></div>
|
|
||||||
<script type="module" src="/example/main.ts"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "@vue-flow/resize-rotate-node",
|
|
||||||
"version": "1.0.2",
|
|
||||||
"private": false,
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "https://github.com/bcakmakoglu/vue-flow/tree/master/packages/resize-rotate-node"
|
|
||||||
},
|
|
||||||
"homepage": "https://github.com/bcakmakoglu/vue-flow/tree/master/packages/resize-rotate-node#readme",
|
|
||||||
"license": "MIT",
|
|
||||||
"author": "Burak Cakmakoglu<brainbraks@googlemail.com>",
|
|
||||||
"main": "./dist/vue-flow-resize-rotate-node.cjs.js",
|
|
||||||
"types": "./dist/index.d.ts",
|
|
||||||
"module": "./dist/vue-flow-resize-rotate-node.es.js",
|
|
||||||
"unpkg": "./dist/vue-flow-resize-rotate-node.iife.js",
|
|
||||||
"jsdelivr": "./dist/vue-flow-resize-rotate-node.iife.js",
|
|
||||||
"files": [
|
|
||||||
"dist"
|
|
||||||
],
|
|
||||||
"scripts": {
|
|
||||||
"prepare": "ts-patch install -s",
|
|
||||||
"dev": "vite",
|
|
||||||
"build": "vite build",
|
|
||||||
"types": "pnpm prepare && vue-tsc --declaration --emitDeclarationOnly && shx rm -rf tmp",
|
|
||||||
"postbuild": "shx rm -rf tmp",
|
|
||||||
"test": "exit 0;",
|
|
||||||
"lint:js": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path .gitignore .",
|
|
||||||
"lint": "pnpm lint:js"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@vueuse/core": "^8.9.4",
|
|
||||||
"vue3-moveable": "^0.4.9"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@vue-flow/core": "workspace:*",
|
|
||||||
"@vitejs/plugin-vue": "^2.3.4",
|
|
||||||
"ts-patch": "^2.0.1",
|
|
||||||
"typescript-transform-paths": "^3.3.1",
|
|
||||||
"unplugin-auto-import": "^0.11.2",
|
|
||||||
"vite": "^2.9.15",
|
|
||||||
"vite-plugin-vue-type-imports": "0.2.0",
|
|
||||||
"vue-tsc": "^0.40.13"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"@vue-flow/core": "^1.0.0",
|
|
||||||
"vue": "^3.2.25"
|
|
||||||
},
|
|
||||||
"publishConfig": {
|
|
||||||
"access": "public",
|
|
||||||
"registry": "https://registry.npmjs.org/"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
-248
@@ -1,248 +0,0 @@
|
|||||||
// Generated by 'unplugin-auto-import'
|
|
||||||
export {}
|
|
||||||
declare global {
|
|
||||||
const EffectScope: typeof import('vue')['EffectScope']
|
|
||||||
const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
|
|
||||||
const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
|
|
||||||
const computed: typeof import('vue')['computed']
|
|
||||||
const computedAsync: typeof import('@vueuse/core')['computedAsync']
|
|
||||||
const computedEager: typeof import('@vueuse/core')['computedEager']
|
|
||||||
const computedInject: typeof import('@vueuse/core')['computedInject']
|
|
||||||
const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
|
|
||||||
const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
|
|
||||||
const controlledRef: typeof import('@vueuse/core')['controlledRef']
|
|
||||||
const createApp: typeof import('vue')['createApp']
|
|
||||||
const createEventHook: typeof import('@vueuse/core')['createEventHook']
|
|
||||||
const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
|
|
||||||
const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
|
|
||||||
const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
|
|
||||||
const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
|
|
||||||
const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
|
|
||||||
const customRef: typeof import('vue')['customRef']
|
|
||||||
const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
|
|
||||||
const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
|
|
||||||
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
|
|
||||||
const defineComponent: typeof import('vue')['defineComponent']
|
|
||||||
const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
|
|
||||||
const effectScope: typeof import('vue')['effectScope']
|
|
||||||
const extendRef: typeof import('@vueuse/core')['extendRef']
|
|
||||||
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
|
||||||
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
|
||||||
const h: typeof import('vue')['h']
|
|
||||||
const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
|
|
||||||
const inject: typeof import('vue')['inject']
|
|
||||||
const isDefined: typeof import('@vueuse/core')['isDefined']
|
|
||||||
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 logicAnd: typeof import('@vueuse/core')['logicAnd']
|
|
||||||
const logicNot: typeof import('@vueuse/core')['logicNot']
|
|
||||||
const logicOr: typeof import('@vueuse/core')['logicOr']
|
|
||||||
const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
|
|
||||||
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 onClickOutside: typeof import('@vueuse/core')['onClickOutside']
|
|
||||||
const onDeactivated: typeof import('vue')['onDeactivated']
|
|
||||||
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
|
|
||||||
const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
|
|
||||||
const onLongPress: typeof import('@vueuse/core')['onLongPress']
|
|
||||||
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 onStartTyping: typeof import('@vueuse/core')['onStartTyping']
|
|
||||||
const onUnmounted: typeof import('vue')['onUnmounted']
|
|
||||||
const onUpdated: typeof import('vue')['onUpdated']
|
|
||||||
const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
|
|
||||||
const provide: typeof import('vue')['provide']
|
|
||||||
const reactify: typeof import('@vueuse/core')['reactify']
|
|
||||||
const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
|
|
||||||
const reactive: typeof import('vue')['reactive']
|
|
||||||
const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
|
|
||||||
const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
|
|
||||||
const reactivePick: typeof import('@vueuse/core')['reactivePick']
|
|
||||||
const readonly: typeof import('vue')['readonly']
|
|
||||||
const ref: typeof import('vue')['ref']
|
|
||||||
const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
|
|
||||||
const refDebounced: typeof import('@vueuse/core')['refDebounced']
|
|
||||||
const refDefault: typeof import('@vueuse/core')['refDefault']
|
|
||||||
const refThrottled: typeof import('@vueuse/core')['refThrottled']
|
|
||||||
const refWithControl: typeof import('@vueuse/core')['refWithControl']
|
|
||||||
const resolveComponent: typeof import('vue')['resolveComponent']
|
|
||||||
const resolveRef: typeof import('@vueuse/core')['resolveRef']
|
|
||||||
const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
|
|
||||||
const shallowReactive: typeof import('vue')['shallowReactive']
|
|
||||||
const shallowReadonly: typeof import('vue')['shallowReadonly']
|
|
||||||
const shallowRef: typeof import('vue')['shallowRef']
|
|
||||||
const syncRef: typeof import('@vueuse/core')['syncRef']
|
|
||||||
const syncRefs: typeof import('@vueuse/core')['syncRefs']
|
|
||||||
const templateRef: typeof import('@vueuse/core')['templateRef']
|
|
||||||
const throttledRef: typeof import('@vueuse/core')['throttledRef']
|
|
||||||
const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
|
|
||||||
const toRaw: typeof import('vue')['toRaw']
|
|
||||||
const toReactive: typeof import('@vueuse/core')['toReactive']
|
|
||||||
const toRef: typeof import('vue')['toRef']
|
|
||||||
const toRefs: typeof import('vue')['toRefs']
|
|
||||||
const triggerRef: typeof import('vue')['triggerRef']
|
|
||||||
const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
|
|
||||||
const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
|
|
||||||
const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
|
|
||||||
const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
|
|
||||||
const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
|
|
||||||
const unref: typeof import('vue')['unref']
|
|
||||||
const unrefElement: typeof import('@vueuse/core')['unrefElement']
|
|
||||||
const until: typeof import('@vueuse/core')['until']
|
|
||||||
const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
|
|
||||||
const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
|
|
||||||
const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
|
|
||||||
const useAttrs: typeof import('vue')['useAttrs']
|
|
||||||
const useBase64: typeof import('@vueuse/core')['useBase64']
|
|
||||||
const useBattery: typeof import('@vueuse/core')['useBattery']
|
|
||||||
const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
|
|
||||||
const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
|
|
||||||
const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
|
|
||||||
const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
|
|
||||||
const useCached: typeof import('@vueuse/core')['useCached']
|
|
||||||
const useClamp: typeof import('@vueuse/core')['useClamp']
|
|
||||||
const useClipboard: typeof import('@vueuse/core')['useClipboard']
|
|
||||||
const useColorMode: typeof import('@vueuse/core')['useColorMode']
|
|
||||||
const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
|
|
||||||
const useCounter: typeof import('@vueuse/core')['useCounter']
|
|
||||||
const useCssModule: typeof import('vue')['useCssModule']
|
|
||||||
const useCssVar: typeof import('@vueuse/core')['useCssVar']
|
|
||||||
const useCssVars: typeof import('vue')['useCssVars']
|
|
||||||
const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
|
|
||||||
const useCycleList: typeof import('@vueuse/core')['useCycleList']
|
|
||||||
const useDark: typeof import('@vueuse/core')['useDark']
|
|
||||||
const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
|
|
||||||
const useDebounce: typeof import('@vueuse/core')['useDebounce']
|
|
||||||
const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
|
|
||||||
const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
|
|
||||||
const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
|
|
||||||
const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
|
|
||||||
const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
|
|
||||||
const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
|
|
||||||
const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
|
|
||||||
const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
|
|
||||||
const useDraggable: typeof import('@vueuse/core')['useDraggable']
|
|
||||||
const useDropZone: typeof import('@vueuse/core')['useDropZone']
|
|
||||||
const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
|
|
||||||
const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
|
|
||||||
const useElementHover: typeof import('@vueuse/core')['useElementHover']
|
|
||||||
const useElementSize: typeof import('@vueuse/core')['useElementSize']
|
|
||||||
const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
|
|
||||||
const useEventBus: typeof import('@vueuse/core')['useEventBus']
|
|
||||||
const useEventListener: typeof import('@vueuse/core')['useEventListener']
|
|
||||||
const useEventSource: typeof import('@vueuse/core')['useEventSource']
|
|
||||||
const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
|
|
||||||
const useFavicon: typeof import('@vueuse/core')['useFavicon']
|
|
||||||
const useFetch: typeof import('@vueuse/core')['useFetch']
|
|
||||||
const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
|
|
||||||
const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
|
|
||||||
const useFocus: typeof import('@vueuse/core')['useFocus']
|
|
||||||
const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
|
|
||||||
const useFps: typeof import('@vueuse/core')['useFps']
|
|
||||||
const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
|
|
||||||
const useGamepad: typeof import('@vueuse/core')['useGamepad']
|
|
||||||
const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
|
|
||||||
const useIdle: typeof import('@vueuse/core')['useIdle']
|
|
||||||
const useImage: typeof import('@vueuse/core')['useImage']
|
|
||||||
const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
|
|
||||||
const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
|
|
||||||
const useInterval: typeof import('@vueuse/core')['useInterval']
|
|
||||||
const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
|
|
||||||
const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
|
|
||||||
const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
|
|
||||||
const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
|
|
||||||
const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
|
|
||||||
const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
|
|
||||||
const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
|
|
||||||
const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
|
|
||||||
const useMemoize: typeof import('@vueuse/core')['useMemoize']
|
|
||||||
const useMemory: typeof import('@vueuse/core')['useMemory']
|
|
||||||
const useMounted: typeof import('@vueuse/core')['useMounted']
|
|
||||||
const useMouse: typeof import('@vueuse/core')['useMouse']
|
|
||||||
const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
|
|
||||||
const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
|
|
||||||
const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
|
|
||||||
const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
|
|
||||||
const useNetwork: typeof import('@vueuse/core')['useNetwork']
|
|
||||||
const useNow: typeof import('@vueuse/core')['useNow']
|
|
||||||
const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
|
|
||||||
const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
|
|
||||||
const useOnline: typeof import('@vueuse/core')['useOnline']
|
|
||||||
const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
|
|
||||||
const useParallax: typeof import('@vueuse/core')['useParallax']
|
|
||||||
const usePermission: typeof import('@vueuse/core')['usePermission']
|
|
||||||
const usePointer: typeof import('@vueuse/core')['usePointer']
|
|
||||||
const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
|
|
||||||
const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
|
|
||||||
const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
|
|
||||||
const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
|
|
||||||
const useRafFn: typeof import('@vueuse/core')['useRafFn']
|
|
||||||
const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
|
|
||||||
const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
|
|
||||||
const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
|
|
||||||
const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
|
|
||||||
const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
|
|
||||||
const useScroll: typeof import('@vueuse/core')['useScroll']
|
|
||||||
const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
|
|
||||||
const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
|
|
||||||
const useShare: typeof import('@vueuse/core')['useShare']
|
|
||||||
const useSlots: typeof import('vue')['useSlots']
|
|
||||||
const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
|
|
||||||
const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
|
|
||||||
const useStepper: typeof import('@vueuse/core')['useStepper']
|
|
||||||
const useStorage: typeof import('@vueuse/core')['useStorage']
|
|
||||||
const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
|
|
||||||
const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
|
|
||||||
const useSwipe: typeof import('@vueuse/core')['useSwipe']
|
|
||||||
const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
|
|
||||||
const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
|
|
||||||
const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
|
|
||||||
const useThrottle: typeof import('@vueuse/core')['useThrottle']
|
|
||||||
const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
|
|
||||||
const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
|
|
||||||
const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
|
|
||||||
const useTimeout: typeof import('@vueuse/core')['useTimeout']
|
|
||||||
const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
|
|
||||||
const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
|
|
||||||
const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
|
|
||||||
const useTitle: typeof import('@vueuse/core')['useTitle']
|
|
||||||
const useToggle: typeof import('@vueuse/core')['useToggle']
|
|
||||||
const useTransition: typeof import('@vueuse/core')['useTransition']
|
|
||||||
const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
|
|
||||||
const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
|
|
||||||
const useVModel: typeof import('@vueuse/core')['useVModel']
|
|
||||||
const useVModels: typeof import('@vueuse/core')['useVModels']
|
|
||||||
const useVibrate: typeof import('@vueuse/core')['useVibrate']
|
|
||||||
const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
|
|
||||||
const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
|
|
||||||
const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
|
|
||||||
const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
|
|
||||||
const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
|
|
||||||
const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
|
|
||||||
const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
|
|
||||||
const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
|
|
||||||
const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
|
|
||||||
const watch: typeof import('vue')['watch']
|
|
||||||
const watchArray: typeof import('@vueuse/core')['watchArray']
|
|
||||||
const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
|
|
||||||
const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
|
|
||||||
const watchEffect: typeof import('vue')['watchEffect']
|
|
||||||
const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
|
|
||||||
const watchOnce: typeof import('@vueuse/core')['watchOnce']
|
|
||||||
const watchPausable: typeof import('@vueuse/core')['watchPausable']
|
|
||||||
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
|
||||||
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
|
|
||||||
const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
|
|
||||||
const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
|
|
||||||
const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
|
|
||||||
const whenever: typeof import('@vueuse/core')['whenever']
|
|
||||||
}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { default as ResizeRotateNode } from './node/ResizeRotateNode.vue'
|
|
||||||
@@ -1,117 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import Moveable from 'vue3-moveable'
|
|
||||||
import type { Dimensions } from '@vue-flow/core'
|
|
||||||
import { Handle, useVueFlow } from '@vue-flow/core'
|
|
||||||
import { useMoveable } from './utils'
|
|
||||||
import type { ResizeRotateNodeProps } from './types'
|
|
||||||
|
|
||||||
interface Emits {
|
|
||||||
(event: 'updateNodeInternals'): void
|
|
||||||
(event: 'resize', dimensions: Dimensions): void
|
|
||||||
(event: 'rotate', rotation: number): void
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<ResizeRotateNodeProps>(), {
|
|
||||||
resizable: true,
|
|
||||||
rotatable: true,
|
|
||||||
moveableProps: () => ({}),
|
|
||||||
})
|
|
||||||
|
|
||||||
const emits = defineEmits<Emits>()
|
|
||||||
|
|
||||||
const { findNode, onPaneClick, onNodeClick, onNodeDragStart, snapGrid, snapToGrid } = useVueFlow()
|
|
||||||
|
|
||||||
const el = ref()
|
|
||||||
|
|
||||||
const visible = ref(false)
|
|
||||||
|
|
||||||
const { onRotateStart, onRotate, onResizeStart, onResize, onResizeEnd } = useMoveable(props.id, emits)
|
|
||||||
|
|
||||||
const toggleVisibility = (val?: boolean) => {
|
|
||||||
visible.value = val ?? !visible.value
|
|
||||||
}
|
|
||||||
|
|
||||||
onNodeClick(({ node }) => {
|
|
||||||
toggleVisibility(node.id === props.id)
|
|
||||||
})
|
|
||||||
|
|
||||||
onNodeDragStart(({ node }) => {
|
|
||||||
toggleVisibility(node.id === props.id)
|
|
||||||
})
|
|
||||||
|
|
||||||
onPaneClick(() => toggleVisibility(false))
|
|
||||||
|
|
||||||
onBeforeMount(() => {
|
|
||||||
const node = findNode(props.id)!
|
|
||||||
|
|
||||||
node.dragHandle = `[data-moveable-id='${props.id}']`
|
|
||||||
|
|
||||||
const previousStyle = node.style
|
|
||||||
node.style = () => {
|
|
||||||
return {
|
|
||||||
...previousStyle,
|
|
||||||
pointerEvents: 'none',
|
|
||||||
cursor: 'default',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
export default {
|
|
||||||
inheritAttrs: false,
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div
|
|
||||||
ref="el"
|
|
||||||
style="cursor: grab; pointer-events: all"
|
|
||||||
:data-moveable-id="props.id"
|
|
||||||
:style="{
|
|
||||||
...data.style,
|
|
||||||
cursor: visible ? 'grab' : 'auto',
|
|
||||||
zIndex: visible ? 1000 : 0,
|
|
||||||
width: data.dimensions?.width ? `${data.dimensions.width}px` : undefined,
|
|
||||||
height: data.dimensions?.height ? `${data.dimensions.height}px` : undefined,
|
|
||||||
transform: `translate(${data.translate[0]}px, ${data.translate[1]}px)` + ` rotate(${data.rotate}deg)`,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<Handle type="target" :position="props.targetPosition" />
|
|
||||||
|
|
||||||
<slot>
|
|
||||||
{{ props.label }}
|
|
||||||
</slot>
|
|
||||||
|
|
||||||
<Handle type="source" :position="props.sourcePosition" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Moveable
|
|
||||||
v-bind="props.moveableProps"
|
|
||||||
class-name="nodrag"
|
|
||||||
style="pointer-events: all"
|
|
||||||
:target="visible ? el : undefined"
|
|
||||||
:resizable="resizable"
|
|
||||||
:rotatable="rotatable"
|
|
||||||
:snappable="snapToGrid"
|
|
||||||
:snap-element="snapToGrid"
|
|
||||||
:snap-gap="snapToGrid"
|
|
||||||
:snap-directions="snapToGrid"
|
|
||||||
:snap-digit="snapGrid[0]"
|
|
||||||
:snap-treshold="snapGrid[0]"
|
|
||||||
:snap-grid-width="snapGrid[0]"
|
|
||||||
:snap-grid-height="snapGrid[1]"
|
|
||||||
:padding="{ left: 0, top: 0, right: 0, bottom: 0 }"
|
|
||||||
:origin="false"
|
|
||||||
:start-drag-rotate="0"
|
|
||||||
:throttle-drag-rotate="0"
|
|
||||||
:throttle-resize="1"
|
|
||||||
:render-directions="['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se']"
|
|
||||||
:zoom="1"
|
|
||||||
@resize-start="onResizeStart"
|
|
||||||
@resize="onResize"
|
|
||||||
@resize-end="onResizeEnd"
|
|
||||||
@rotate-start="onRotateStart"
|
|
||||||
@rotate="onRotate"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
import type { Dimensions, ElementData, Position } from '@vue-flow/core'
|
|
||||||
import type { MoveableProps } from 'vue3-moveable'
|
|
||||||
import type { CSSProperties } from 'vue'
|
|
||||||
|
|
||||||
export interface ResizeRotateNodeEmits {
|
|
||||||
(event: 'updateNodeInternals'): void
|
|
||||||
(event: 'resize', dimensions: Dimensions): void
|
|
||||||
(event: 'rotate', rotation: number): void
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ResizeRotateNodeData extends ElementData {
|
|
||||||
rotate: number
|
|
||||||
translate: number[]
|
|
||||||
dimensions: Dimensions
|
|
||||||
style: CSSProperties
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ResizeRotateNodeProps {
|
|
||||||
id: string
|
|
||||||
label: string
|
|
||||||
targetPosition: Position
|
|
||||||
sourcePosition: Position
|
|
||||||
resizable?: boolean
|
|
||||||
rotatable?: boolean
|
|
||||||
data: ResizeRotateNodeData
|
|
||||||
moveableProps?: MoveableProps
|
|
||||||
}
|
|
||||||
@@ -1,107 +0,0 @@
|
|||||||
import type { Able, MoveableEvents, MoveableManagerInterface } from 'vue3-moveable'
|
|
||||||
import type { GraphNode } from '@vue-flow/core'
|
|
||||||
import { useVueFlow } from '@vue-flow/core'
|
|
||||||
import type { ResizeRotateNodeData, ResizeRotateNodeEmits } from './types'
|
|
||||||
|
|
||||||
export function useMoveable(id: string, emits: ResizeRotateNodeEmits) {
|
|
||||||
const { findNode } = useVueFlow()
|
|
||||||
const node = findNode(id)! as GraphNode<ResizeRotateNodeData>
|
|
||||||
|
|
||||||
if (!node.data) {
|
|
||||||
node.data = {
|
|
||||||
translate: [0, 0],
|
|
||||||
rotate: 0,
|
|
||||||
style: {},
|
|
||||||
dimensions: { width: NaN, height: NaN },
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (!node.data.style) node.data.style = {}
|
|
||||||
if (!node.data.rotate) node.data.rotate = 0
|
|
||||||
if (!node.data.translate) node.data.translate = [0, 0]
|
|
||||||
if (!node.data.dimensions) node.data.dimensions = { width: NaN, height: NaN }
|
|
||||||
|
|
||||||
const onResizeStart = (e: MoveableEvents['resizeStart']) => {
|
|
||||||
e.setOrigin(['%', '%'])
|
|
||||||
|
|
||||||
if (e.dragStart) {
|
|
||||||
e.dragStart.set(node.data!.translate)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const onResize = (e: MoveableEvents['resize']) => {
|
|
||||||
node.data!.translate = e.drag.beforeTranslate
|
|
||||||
node.data!.dimensions = { width: e.width, height: e.height }
|
|
||||||
|
|
||||||
e.target.style.width = `${e.width}px`
|
|
||||||
e.target.style.height = `${e.height}px`
|
|
||||||
e.target.style.transform =
|
|
||||||
`translate(${node.data!.translate[0]}px, ${node.data!.translate[1]}px)` + ` rotate(${node.data!.rotate}deg)`
|
|
||||||
|
|
||||||
emits('resize', { width: e.width, height: e.height })
|
|
||||||
}
|
|
||||||
|
|
||||||
const onResizeEnd = (e: MoveableEvents['resizeEnd']) => {
|
|
||||||
const oldPosition = node.computedPosition
|
|
||||||
e.target.style.transform = `rotate(${node.data!.rotate}deg)`
|
|
||||||
node.position = { x: oldPosition.x + node.data!.translate[0]!, y: oldPosition.y + node.data!.translate[1]! }
|
|
||||||
node.data!.translate = [0, 0]
|
|
||||||
|
|
||||||
emits('updateNodeInternals')
|
|
||||||
}
|
|
||||||
|
|
||||||
const onRotateStart = (e: MoveableEvents['rotateStart']) => {
|
|
||||||
e.set(node.data!.rotate)
|
|
||||||
}
|
|
||||||
|
|
||||||
const onRotate = (e: MoveableEvents['rotate']) => {
|
|
||||||
node.data!.rotate = e.beforeRotate
|
|
||||||
|
|
||||||
e.target.style.transform =
|
|
||||||
`translate(${node.data!.translate[0]}px, ${node.data!.translate[1]}px)` + ` rotate(${node.data!.rotate}deg)`
|
|
||||||
|
|
||||||
emits('updateNodeInternals')
|
|
||||||
emits('rotate', node.data!.rotate)
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
onResizeStart,
|
|
||||||
onResize,
|
|
||||||
onResizeEnd,
|
|
||||||
onRotateStart,
|
|
||||||
onRotate,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export const DimensionViewable = {
|
|
||||||
name: 'dimensionViewable',
|
|
||||||
props: {},
|
|
||||||
events: {},
|
|
||||||
render(moveable: MoveableManagerInterface<any, any>, renderer) {
|
|
||||||
const rect = moveable.getRect()
|
|
||||||
|
|
||||||
// Add key (required)
|
|
||||||
// Add class prefix moveable-(required)
|
|
||||||
return renderer.createElement(
|
|
||||||
'div',
|
|
||||||
{
|
|
||||||
key: 'dimension-viewer',
|
|
||||||
class: 'moveable-dimension',
|
|
||||||
style: {
|
|
||||||
position: 'absolute',
|
|
||||||
left: `${rect.width / 2}px`,
|
|
||||||
top: `${rect.height + 20}px`,
|
|
||||||
background: '#4af',
|
|
||||||
borderRadius: '2px',
|
|
||||||
padding: '2px 4px',
|
|
||||||
color: 'white',
|
|
||||||
fontSize: '13px',
|
|
||||||
whiteSpace: 'nowrap',
|
|
||||||
fontWeight: 'bold',
|
|
||||||
willChange: 'transform',
|
|
||||||
transform: 'translate(-50%, 0px)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
`${Math.round(rect.offsetWidth)} x ${Math.round(rect.offsetHeight)}`,
|
|
||||||
)
|
|
||||||
},
|
|
||||||
} as Able<{}, {}>
|
|
||||||
@@ -1,30 +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/*"]
|
|
||||||
},
|
|
||||||
"plugins": [
|
|
||||||
// Transform paths in output .d.ts files (Include this line if you output declarations files)
|
|
||||||
{ "transform": "typescript-transform-paths", "afterDeclarations": true }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"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,49 +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'
|
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
|
||||||
export default defineConfig({
|
|
||||||
resolve: {
|
|
||||||
dedupe: ['vue'],
|
|
||||||
extensions: ['.ts', '.vue'],
|
|
||||||
},
|
|
||||||
build: {
|
|
||||||
emptyOutDir: false,
|
|
||||||
lib: {
|
|
||||||
formats: ['es', 'cjs', 'iife'],
|
|
||||||
entry: resolve(__dirname, 'src/index.ts'),
|
|
||||||
fileName: 'vue-flow-resize-rotate-node',
|
|
||||||
name: 'vueFlowResizeRotateNode',
|
|
||||||
},
|
|
||||||
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', '@vueuse/core'],
|
|
||||||
dts: 'src/auto-imports.d.ts',
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
optimizeDeps: {
|
|
||||||
include: ['vue', '@vueuse/core'],
|
|
||||||
},
|
|
||||||
})
|
|
||||||
Reference in New Issue
Block a user