Output port changes (#9842)

* Output port changes

- Enlarge output port hover area; fix hover area extending above node
- Show ports when selection is shown
- Adjust port stroke-width and offset to match Figma
- Change cursor when output port is hovered
This commit is contained in:
Kaz Wesley 2024-05-06 09:36:43 -07:00 committed by GitHub
parent f2779cfea4
commit 36dcbf1a07
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 23 additions and 17 deletions

View File

@ -571,6 +571,7 @@ const connected = computed(() => isConnected(props.edge))
stroke-width: 14;
stroke: transparent;
pointer-events: stroke;
cursor: pointer;
}
.edge.visible {
stroke-width: 4;

View File

@ -405,7 +405,14 @@ watchEffect(() => {
const scope = effectScope(true)
const approach = scope.run(() =>
useApproach(
() => (outputHovered.value === port || graph.unconnectedEdge?.target === port ? 1 : 0),
() =>
(
outputHovered.value === port ||
graph.unconnectedEdge?.target === port ||
selectionVisible.value
) ?
1
: 0,
50,
0.01,
),
@ -600,21 +607,19 @@ const documentation = computed<string | undefined>({
height: 100%;
position: absolute;
overflow: visible;
top: 0px;
left: 0px;
top: 0;
left: 0;
display: flex;
--output-port-max-width: 6px;
--output-port-overlap: 0.2px;
--output-port-hover-width: 8px;
--output-port-max-width: 4px;
--output-port-overlap: -8px;
--output-port-hover-width: 20px;
}
.outputPort,
.outputPortHoverArea {
x: calc(0px - var(--output-port-width) / 2);
y: calc(0px - var(--output-port-width) / 2);
width: calc(var(--node-width) + var(--output-port-width));
height: calc(var(--node-height) + var(--output-port-width));
rx: calc(var(--node-border-radius) + var(--output-port-width) / 2);
fill: none;
@ -638,13 +643,21 @@ const documentation = computed<string | undefined>({
--output-port-width: calc(
var(--output-port-max-width) * var(--hover-animation) - var(--output-port-overlap)
);
y: calc(0px - var(--output-port-width) / 2);
height: calc(var(--node-height) + var(--output-port-width));
pointer-events: none;
}
.outputPortHoverArea {
--output-port-width: var(--output-port-hover-width);
y: calc(
0px + var(--output-port-hover-width) / 2 + var(--output-port-overlap) / 2 + var(--node-height) /
2
);
height: calc(var(--node-height) / 2 + var(--output-port-hover-width) / 2);
stroke: transparent;
pointer-events: all;
cursor: pointer;
}
.portClip {

View File

@ -374,12 +374,3 @@ watch(
</Suspense>
</div>
</template>
<style scoped>
.GraphVisualization {
position: relative;
/** Confine the visualization to its own stacking context, so that it can't draw on top of other UI elements
(e.g. dropdown widgets). */
z-index: 0;
}
</style>

View File

@ -324,6 +324,7 @@ const nodeShortType = computed(() =>
border-radius: var(--radius-full);
gap: 12px;
padding: 8px;
z-index: 20;
&:before {
content: '';