filipkopyt14/Profectus
1
0
Fork 0
forked from profectus/Profectus
Code Pull requests Releases Activity Actions

Make node links follow dragging

Browse source
This commit is contained in:
thepaperpilot 2023-05-14 18:30:35 -05:00
parent 0991ef0865
commit 006bfdf65d
2 changed files with 26 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/features/boards/Board.vue
View file

@ -28,7 +28,16 @@
v-for="link in unref(links) || []" v-for="link in unref(links) || []"
:key="`${link.startNode.id}-${link.endNode.id}`" :key="`${link.startNode.id}-${link.endNode.id}`"
> >
<BoardLinkVue :link="link" /> <BoardLinkVue
:link="link"
:dragging="unref(draggingNode)"
:dragged="
link.startNode === unref(draggingNode) ||
link.endNode === unref(draggingNode)
? dragged
: undefined
"
/>
</g> </g>
</transition-group> </transition-group>
<transition-group name="grow" :duration="500" appear> <transition-group name="grow" :duration="500" appear>

19
src/features/boards/BoardLink.vue
View file

@ -11,29 +11,42 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import type { BoardNodeLink } from "features/boards/board"; import type { BoardNode, BoardNodeLink } from "features/boards/board";
import { computed, toRefs, unref } from "vue"; import { computed, toRefs, unref } from "vue";
const _props = defineProps<{ const _props = defineProps<{
link: BoardNodeLink; link: BoardNodeLink;
dragging: BoardNode | null;
dragged?: {
x: number;
y: number;
};
}>(); }>();
const props = toRefs(_props); const props = toRefs(_props);
const startPosition = computed(() => { const startPosition = computed(() => {
const position = props.link.value.startNode.position; const position = { ...props.link.value.startNode.position };
if (props.link.value.offsetStart) { if (props.link.value.offsetStart) {
position.x += unref(props.link.value.offsetStart).x; position.x += unref(props.link.value.offsetStart).x;
position.y += unref(props.link.value.offsetStart).y; position.y += unref(props.link.value.offsetStart).y;
} }
if (props.dragging?.value === props.link.value.startNode) {
position.x += props.dragged?.value?.x ?? 0;
position.y += props.dragged?.value?.y ?? 0;
}
return position; return position;
}); });
const endPosition = computed(() => { const endPosition = computed(() => {
const position = props.link.value.endNode.position; const position = { ...props.link.value.endNode.position };
if (props.link.value.offsetEnd) { if (props.link.value.offsetEnd) {
position.x += unref(props.link.value.offsetEnd).x; position.x += unref(props.link.value.offsetEnd).x;
position.y += unref(props.link.value.offsetEnd).y; position.y += unref(props.link.value.offsetEnd).y;
} }
if (props.dragging?.value === props.link.value.endNode) {
position.x += props.dragged?.value?.x ?? 0;
position.y += props.dragged?.value?.y ?? 0;
}
return position; return position;
}); });
</script> </script>