refactor(core): cast zIndex to ref

This commit is contained in:
braks
2024-02-05 07:51:12 +01:00
committed by Braks
parent cc9f4fb244
commit 259514a229
@@ -1,5 +1,5 @@
import { computed, defineComponent, h, nextTick, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue' import { computed, defineComponent, h, nextTick, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue'
import { until, useVModel } from '@vueuse/core' import { toRef, until, useVModel } from '@vueuse/core'
import { import {
ARIA_NODE_DESC_KEY, ARIA_NODE_DESC_KEY,
arrowKeyDiffs, arrowKeyDiffs,
@@ -105,7 +105,7 @@ const NodeWrapper = defineComponent({
return styles return styles
}) })
const zIndex = () => Number(node.value.zIndex ?? getStyle.value.zIndex ?? 0) const zIndex = toRef(() => Number(node.value.zIndex ?? getStyle.value.zIndex ?? 0))
onUpdateNodeInternals((updateIds) => { onUpdateNodeInternals((updateIds) => {
if (updateIds.includes(props.id)) { if (updateIds.includes(props.id)) {
@@ -135,7 +135,7 @@ const NodeWrapper = defineComponent({
() => parentNode.value?.computedPosition.x, () => parentNode.value?.computedPosition.x,
() => parentNode.value?.computedPosition.y, () => parentNode.value?.computedPosition.y,
() => parentNode.value?.computedPosition.z, () => parentNode.value?.computedPosition.z,
() => zIndex(), zIndex,
() => node.value.selected, () => node.value.selected,
() => node.value.dimensions.height, () => node.value.dimensions.height,
() => node.value.dimensions.width, () => node.value.dimensions.width,
@@ -200,7 +200,7 @@ const NodeWrapper = defineComponent({
], ],
'style': { 'style': {
visibility: node.value.initialized ? 'visible' : 'hidden', visibility: node.value.initialized ? 'visible' : 'hidden',
zIndex: node.value.computedPosition.z ?? zIndex(), zIndex: node.value.computedPosition.z ?? zIndex.value,
transform: `translate(${node.value.computedPosition.x}px,${node.value.computedPosition.y}px)`, transform: `translate(${node.value.computedPosition.x}px,${node.value.computedPosition.y}px)`,
pointerEvents: props.selectable || props.draggable ? 'all' : 'none', pointerEvents: props.selectable || props.draggable ? 'all' : 'none',
...getStyle.value, ...getStyle.value,
@@ -223,16 +223,17 @@ const NodeWrapper = defineComponent({
type: node.value.type, type: node.value.type,
data: node.value.data, data: node.value.data,
events: { ...node.value.events, ...on }, events: { ...node.value.events, ...on },
selected: !!node.value.selected, selected: node.value.selected,
resizing: !!node.value.resizing, resizing: node.value.resizing,
dragging: dragging.value, dragging: dragging.value,
connectable: props.connectable, connectable: props.connectable,
position: node.value.position, position: node.value.computedPosition,
dimensions: node.value.dimensions, dimensions: node.value.dimensions,
isValidTargetPos: node.value.isValidTargetPos, isValidTargetPos: node.value.isValidTargetPos,
isValidSourcePos: node.value.isValidSourcePos, isValidSourcePos: node.value.isValidSourcePos,
parent: node.value.parentNode, parent: node.value.parentNode,
zIndex: node.value.computedPosition.z, parentNodeId: node.value.parentNode,
zIndex: node.value.computedPosition.z ?? zIndex.value,
targetPosition: node.value.targetPosition, targetPosition: node.value.targetPosition,
sourcePosition: node.value.sourcePosition, sourcePosition: node.value.sourcePosition,
label: node.value.label, label: node.value.label,