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

feat(nodes): debounce scaling to avoid lag spikes

Browse Source
This commit is contained in:
Braks
2022-04-04 21:42:48 +02:00
parent 528cac5d33
commit e97d9a1dc9
2 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package/package.json
+1 -1
View File
@@ -29,7 +29,7 @@
"lint": "eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix ./dist", "lint": "eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix ./dist",
"theme": "postcss src/style.css -o dist/style.css && postcss src/theme-default.css -o dist/theme-default.css", "theme": "postcss src/style.css -o dist/style.css && postcss src/theme-default.css -o dist/theme-default.css",
"prepare": "ts-patch install -s", "prepare": "ts-patch install -s",
"prepublish": "shx cp ../README.md .", "prepublishOnly": "shx cp ../README.md .",
"postpublish": "shx rm README.md" "postpublish": "shx rm README.md"
}, },
"dependencies": { "dependencies": {
package/src/components/Nodes/NodeWrapper.vue
+3 -2
View File
@@ -1,5 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable/src/index' import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
import { useVueFlow } from '../../composables' import { useVueFlow } from '../../composables'
import { GraphNode, SnapGrid } from '../../types' import { GraphNode, SnapGrid } from '../../types'
import { NodeId } from '../../context' import { NodeId } from '../../context'
@@ -90,6 +90,7 @@ const scale = controlledComputed(
() => store.transform[2], () => store.transform[2],
() => store.transform[2], () => store.transform[2],
) )
const scaleDebounced = debouncedRef(scale, 5)
watch( watch(
[() => node.value.position, () => store.getNode(node.value.parentNode!)], [() => node.value.position, () => store.getNode(node.value.parentNode!)],
@@ -120,7 +121,7 @@ export default {
:cancel="`.${store.noDragClassName}`" :cancel="`.${store.noDragClassName}`"
:handle="node.dragHandle" :handle="node.dragHandle"
:disabled="!props.draggable" :disabled="!props.draggable"
:scale="scale" :scale="scaleDebounced"
:grid="props.snapGrid" :grid="props.snapGrid"
:enable-user-select-hack="false" :enable-user-select-hack="false"
@start="onDragStart" @start="onDragStart"