mirror of
https://github.com/enso-org/enso.git
synced 2024-12-23 13:02:07 +03:00
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:
parent
f2779cfea4
commit
36dcbf1a07
@ -571,6 +571,7 @@ const connected = computed(() => isConnected(props.edge))
|
|||||||
stroke-width: 14;
|
stroke-width: 14;
|
||||||
stroke: transparent;
|
stroke: transparent;
|
||||||
pointer-events: stroke;
|
pointer-events: stroke;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.edge.visible {
|
.edge.visible {
|
||||||
stroke-width: 4;
|
stroke-width: 4;
|
||||||
|
@ -405,7 +405,14 @@ watchEffect(() => {
|
|||||||
const scope = effectScope(true)
|
const scope = effectScope(true)
|
||||||
const approach = scope.run(() =>
|
const approach = scope.run(() =>
|
||||||
useApproach(
|
useApproach(
|
||||||
() => (outputHovered.value === port || graph.unconnectedEdge?.target === port ? 1 : 0),
|
() =>
|
||||||
|
(
|
||||||
|
outputHovered.value === port ||
|
||||||
|
graph.unconnectedEdge?.target === port ||
|
||||||
|
selectionVisible.value
|
||||||
|
) ?
|
||||||
|
1
|
||||||
|
: 0,
|
||||||
50,
|
50,
|
||||||
0.01,
|
0.01,
|
||||||
),
|
),
|
||||||
@ -600,21 +607,19 @@ const documentation = computed<string | undefined>({
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
top: 0px;
|
top: 0;
|
||||||
left: 0px;
|
left: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
--output-port-max-width: 6px;
|
--output-port-max-width: 4px;
|
||||||
--output-port-overlap: 0.2px;
|
--output-port-overlap: -8px;
|
||||||
--output-port-hover-width: 8px;
|
--output-port-hover-width: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.outputPort,
|
.outputPort,
|
||||||
.outputPortHoverArea {
|
.outputPortHoverArea {
|
||||||
x: calc(0px - var(--output-port-width) / 2);
|
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));
|
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);
|
rx: calc(var(--node-border-radius) + var(--output-port-width) / 2);
|
||||||
|
|
||||||
fill: none;
|
fill: none;
|
||||||
@ -638,13 +643,21 @@ const documentation = computed<string | undefined>({
|
|||||||
--output-port-width: calc(
|
--output-port-width: calc(
|
||||||
var(--output-port-max-width) * var(--hover-animation) - var(--output-port-overlap)
|
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;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.outputPortHoverArea {
|
.outputPortHoverArea {
|
||||||
--output-port-width: var(--output-port-hover-width);
|
--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;
|
stroke: transparent;
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.portClip {
|
.portClip {
|
||||||
|
@ -374,12 +374,3 @@ watch(
|
|||||||
</Suspense>
|
</Suspense>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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>
|
|
||||||
|
@ -324,6 +324,7 @@ const nodeShortType = computed(() =>
|
|||||||
border-radius: var(--radius-full);
|
border-radius: var(--radius-full);
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
|
z-index: 20;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
content: '';
|
content: '';
|
||||||
|
Loading…
Reference in New Issue
Block a user