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

perf(core): cleanup computed vars

Browse Source
This commit is contained in:
braks
2023-10-30 13:36:07 +01:00
committed by Braks
parent 3b175a553e
commit 88cfd402ed
3 changed files with 34 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/A11y/A11yDescriptions.vue
+11 -14
View File
@@ -1,21 +1,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { CSSProperties } from 'vue'
import { ARIA_EDGE_DESC_KEY, ARIA_LIVE_MESSAGE, ARIA_NODE_DESC_KEY } from '../../utils/a11y' import { ARIA_EDGE_DESC_KEY, ARIA_LIVE_MESSAGE, ARIA_NODE_DESC_KEY } from '../../utils/a11y'
import { useVueFlow } from '../../composables' import { useVueFlow } from '../../composables'
const { id, disableKeyboardA11y, ariaLiveMessage } = useVueFlow() const { id, disableKeyboardA11y, ariaLiveMessage } = useVueFlow()
const ariaLiveStyle: CSSProperties = {
position: 'absolute',
width: 1,
height: 1,
margin: -1,
border: 0,
padding: 0,
overflow: 'hidden',
clip: 'rect(0px, 0px, 0px, 0px)',
clipPath: 'inset(100%)',
}
</script> </script>
<script lang="ts"> <script lang="ts">
@@ -41,7 +28,17 @@ export default {
:id="`${ARIA_LIVE_MESSAGE}-${id}`" :id="`${ARIA_LIVE_MESSAGE}-${id}`"
aria-live="assertive" aria-live="assertive"
aria-atomic="true" aria-atomic="true"
:style="ariaLiveStyle" style="
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
overflow: hidden;
clip: rect(0px, 0px, 0px, 0px);
clip-path: inset(100%);
"
> >
{{ ariaLiveMessage }} {{ ariaLiveMessage }}
</div> </div>
packages/core/src/components/Handle/Handle.vue
+20 -20
View File
@@ -33,11 +33,28 @@ const { id: nodeId, node, nodeEl, connectedEdges } = useNode()
const handle = ref<HTMLDivElement>() const handle = ref<HTMLDivElement>()
const handleId = computed(() => id ?? `${nodeId}__handle-${position}`) const handleId = toRef(() => id ?? `${nodeId}__handle-${position}`)
const isConnectableStart = computed(() => (typeof connectableStart !== 'undefined' ? connectableStart : true)) const isConnectableStart = toRef(() => (typeof connectableStart !== 'undefined' ? connectableStart : true))
const isConnectableEnd = computed(() => (typeof connectableEnd !== 'undefined' ? connectableEnd : true)) const isConnectableEnd = toRef(() => (typeof connectableEnd !== 'undefined' ? connectableEnd : true))
const isConnecting = toRef(
() =>
(connectionStartHandle.value?.nodeId === nodeId &&
connectionStartHandle.value?.handleId === handleId.value &&
connectionStartHandle.value?.type === type.value) ||
(connectionEndHandle.value?.nodeId === nodeId &&
connectionEndHandle.value?.handleId === handleId.value &&
connectionEndHandle.value?.type === type.value),
)
const isClickConnecting = toRef(
() =>
connectionClickStartHandle.value?.nodeId === nodeId &&
connectionClickStartHandle.value?.handleId === handleId.value &&
connectionClickStartHandle.value?.type === type.value,
)
const { handlePointerDown, handleClick } = useHandle({ const { handlePointerDown, handleClick } = useHandle({
nodeId, nodeId,
@@ -80,23 +97,6 @@ const isConnectable = computed(() => {
return isDef(connectable) ? connectable : nodesConnectable.value return isDef(connectable) ? connectable : nodesConnectable.value
}) })
const isConnecting = toRef(
() =>
(connectionStartHandle.value?.nodeId === nodeId &&
connectionStartHandle.value?.handleId === handleId.value &&
connectionStartHandle.value?.type === type.value) ||
(connectionEndHandle.value?.nodeId === nodeId &&
connectionEndHandle.value?.handleId === handleId.value &&
connectionEndHandle.value?.type === type.value),
)
const isClickConnecting = toRef(
() =>
connectionClickStartHandle.value?.nodeId === nodeId &&
connectionClickStartHandle.value?.handleId === handleId.value &&
connectionClickStartHandle.value?.type === type.value,
)
// set up handle bounds if they don't exist yet and the node has been initialized (i.e. the handle was added after the node has already been mounted) // set up handle bounds if they don't exist yet and the node has been initialized (i.e. the handle was added after the node has already been mounted)
until(() => node.initialized) until(() => node.initialized)
.toBe(true, { flush: 'post' }) .toBe(true, { flush: 'post' })
packages/core/src/container/Pane/Pane.vue
+3 -2
View File
@@ -1,5 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref } from 'vue' import { ref } from 'vue'
import { toRef } from '@vueuse/core'
import UserSelection from '../../components/UserSelection/UserSelection.vue' import UserSelection from '../../components/UserSelection/UserSelection.vue'
import NodesSelection from '../../components/NodesSelection/NodesSelection.vue' import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
import type { GraphNode } from '../../types' import type { GraphNode } from '../../types'
@@ -42,7 +43,7 @@ const prevSelectedEdgesCount = ref(0)
const containerBounds = ref<DOMRect>() const containerBounds = ref<DOMRect>()
const hasActiveSelection = computed(() => elementsSelectable.value && (isSelecting || userSelectionActive.value)) const hasActiveSelection = toRef(() => elementsSelectable.value && (isSelecting || userSelectionActive.value))
useKeyPress(deleteKeyCode, (keyPressed) => { useKeyPress(deleteKeyCode, (keyPressed) => {
if (!keyPressed) { if (!keyPressed) {