Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move output ports to edges level #12133

Merged
merged 25 commits into from
Feb 3, 2025
Merged
Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
e08ad82
Move node message on top
vitvakatu Jan 17, 2025
f68802e
Use div for node background
vitvakatu Jan 17, 2025
e79bde1
placing output ports on the edges layer
vitvakatu Jan 17, 2025
f4503fc
Propagating size and position information for output ports
vitvakatu Jan 20, 2025
092b5b5
Do not update keyboard state on pointerenter events.
vitvakatu Jan 22, 2025
6a000d3
cleanup logs
vitvakatu Jan 22, 2025
45ac723
Bring back pointerenter event
vitvakatu Jan 22, 2025
5810e2a
try resetting state on blur
vitvakatu Jan 23, 2025
f8740fa
Show preview when hovering the node also, not only output port
vitvakatu Jan 23, 2025
fd72283
Add onBlur functionality to dehover the node
vitvakatu Jan 23, 2025
76c4502
Fix create node from port button
vitvakatu Jan 23, 2025
bab2fb3
Better cancelation of preview visualization
vitvakatu Jan 23, 2025
fccc384
remove bgPaths
vitvakatu Jan 23, 2025
81436e1
deduplicate setSoleSelected
vitvakatu Jan 23, 2025
fdc436c
updateNodeHoverAnim → updateNodeOutputHoverAnim
vitvakatu Jan 23, 2025
3eeaa3c
remove nodeOutputHovered
vitvakatu Jan 23, 2025
433aadc
minor cleanup
vitvakatu Jan 23, 2025
c86ce61
Fixing tests
vitvakatu Jan 23, 2025
226da8f
update changelog
vitvakatu Jan 24, 2025
ffc82b0
merge with develop
vitvakatu Jan 24, 2025
b487a28
Merge branch 'develop' into wip/vitvakatu/copy-error
vitvakatu Jan 27, 2025
4f584ac
Use graph.db.nodeOutputPorts to collect the list of nodes with output
vitvakatu Jan 27, 2025
b224472
Add a comment for hiding preview visualization explaining we are not
vitvakatu Jan 29, 2025
5a91b5f
Rename onBlur → onWindowBlur
vitvakatu Jan 29, 2025
281f86f
avoid confusion for setSoleSelected
vitvakatu Jan 29, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fixing tests
vitvakatu committed Jan 24, 2025
commit c86ce61640af3b6ea007f8a1a8604e6a75a3847f
2 changes: 1 addition & 1 deletion app/gui/integration-test/project-view/actions.ts
Original file line number Diff line number Diff line change
@@ -36,7 +36,7 @@ export async function expectNodePositionsInitialized(page: Page, yPos: number) {
// Wait until edges are initialized and displayed correctly.
await expect(page.getByTestId('broken-edge')).toBeHidden()
// Wait until node sizes are initialized.
await expect(locate.graphNode(page).first().locator('.bgFill')).toBeVisible()
await expect(locate.graphNode(page).first().locator('.nodeBackground')).toBeVisible()
// TODO: The yPos should not need to be a variable. Instead, first automatically positioned nodes
// should always have constant known position. This is a bug caused by incorrect layout after
// entering a function. To be fixed with #9255
21 changes: 14 additions & 7 deletions app/gui/integration-test/project-view/componentBrowser.spec.ts
Original file line number Diff line number Diff line change
@@ -59,15 +59,18 @@ test('Different ways of opening Component Browser', async ({ page }) => {
await locate.graphEditor(page).press('Enter')
await expectAndCancelBrowser(page, '', 'selected')
// Dragging out an edge
let outputPort = await locate.outputPortCoordinates(locate.graphNodeByBinding(page, 'selected'))
let outputPort = await locate.outputPortCoordinates(
page,
locate.graphNodeByBinding(page, 'selected'),
)
await page.mouse.click(outputPort.x, outputPort.y)
await locate.graphEditor(page).click({ position: { x: 100, y: 500 } })
await expectAndCancelBrowser(page, '', 'selected')
// Double-clicking port
// TODO[ao] Without timeout, even the first click would be treated as double due to previous
// event. Probably we need a better way to simulate double clicks.
await page.waitForTimeout(600)
outputPort = await locate.outputPortCoordinates(locate.graphNodeByBinding(page, 'selected'))
outputPort = await locate.outputPortCoordinates(page, locate.graphNodeByBinding(page, 'selected'))
await page.mouse.click(outputPort.x, outputPort.y)
await page.mouse.click(outputPort.x, outputPort.y)
await expectAndCancelBrowser(page, '', 'selected')
@@ -79,15 +82,16 @@ test('Opening Component Browser from output port buttons', async ({ page }) => {
// Small (+) button shown when node is hovered
const node = locate.graphNodeByBinding(page, 'selected')
await locate.graphNodeIcon(node).hover()
await expect(locate.createNodeFromPort(node)).toBeVisible()
await locate.createNodeFromPort(node).click({ force: true })
const createNodeFromPortButton = await locate.createNodeFromPortButton(page, node)
await expect(createNodeFromPortButton).toBeVisible()
await createNodeFromPortButton.click({ force: true })
await expectAndCancelBrowser(page, '', 'selected')

// Small (+) button shown when node is selected
await page.keyboard.press('Escape')
await node.click()
await expect(locate.createNodeFromPort(node)).toBeVisible()
await locate.createNodeFromPort(node).click({ force: true })
await expect(createNodeFromPortButton).toBeVisible()
await createNodeFromPortButton.click({ force: true })
await expectAndCancelBrowser(page, '', 'selected')
})

@@ -111,7 +115,10 @@ test('Graph Editor pans to Component Browser', async ({ page }) => {
await page.mouse.move(100, 280)
await page.mouse.up({ button: 'middle' })
await expect(locate.graphNodeByBinding(page, 'five')).toBeInViewport()
const outputPort = await locate.outputPortCoordinates(locate.graphNodeByBinding(page, 'final'))
const outputPort = await locate.outputPortCoordinates(
page,
locate.graphNodeByBinding(page, 'final'),
)
await page.mouse.click(outputPort.x, outputPort.y)
await locate.graphEditor(page).click({ position: { x: 100, y: 1700 } })
await expect(locate.graphNodeByBinding(page, 'five')).not.toBeInViewport()
Original file line number Diff line number Diff line change
@@ -82,7 +82,7 @@ test('Conditional ports: Disabled', async ({ page }) => {

// When a port is disabled, it doesn't react to hovering with a disconnected edge,
// and any attempt to connect to it should open the CB.
const outputPort = await outputPortCoordinates(graphNodeByBinding(page, 'final'))
const outputPort = await outputPortCoordinates(page, graphNodeByBinding(page, 'final'))
await page.mouse.click(outputPort.x, outputPort.y)
await conditionalPort.hover()
await expect(conditionalPort).not.toHaveClass(/isTarget/)
@@ -101,7 +101,7 @@ test('Conditional ports: Enabled', async ({ page }) => {
await page.keyboard.down(CONTROL_KEY)

await expect(conditionalPort).toHaveClass(/enabled/)
const outputPort = await outputPortCoordinates(graphNodeByBinding(page, 'final'))
const outputPort = await outputPortCoordinates(page, graphNodeByBinding(page, 'final'))
await page.mouse.click(outputPort.x, outputPort.y)
await conditionalPort.hover()
await expect(conditionalPort).toHaveClass(/isTarget/)
Original file line number Diff line number Diff line change
@@ -29,7 +29,7 @@ test('Node can open and load visualization', async ({ page }) => {
test('Previewing visualization', async ({ page }) => {
await actions.goToGraph(page)
const node = locate.graphNode(page).last()
const port = await locate.outputPortCoordinates(node)
const port = await locate.outputPortCoordinates(page, node)
await page.keyboard.down('Meta')
await page.keyboard.down('Control')
await expect(locate.anyVisualization(page)).toBeHidden()
16 changes: 13 additions & 3 deletions app/gui/integration-test/project-view/locate.ts
Original file line number Diff line number Diff line change
@@ -83,7 +83,6 @@ export const componentMenu = componentLocator('.ComponentMenu')
export const addNewNodeButton = componentLocator('.PlusButton')
export const componentBrowser = componentLocator('.ComponentBrowser')
export const nodeOutputPort = componentLocator('.outputPortHoverArea')
export const createNodeFromPort = componentLocator('.CreateNodeFromPortButton .plusIcon')
export const editorRoot = componentLocator('.CodeMirror')
export const nodeComment = componentLocator('.GraphNodeComment')
export const nodeCommentContent = componentLocator('.GraphNodeComment div[contentEditable]')
@@ -185,11 +184,22 @@ export async function edgesToNode(page: Page, node: Locator) {
* Returns a location that can be clicked to activate an output port.
* Using a `Locator` would be better, but `position` option of `click` doesn't work.
*/
export async function outputPortCoordinates(node: Locator) {
const outputPortArea = await node.locator('.outputPortHoverArea').boundingBox()
export async function outputPortCoordinates(page: Page, node: Locator) {
const nodeId = await node.getAttribute('data-node-id')
const outputPortArea = await page
.locator(`.GraphNodeOutputPorts[data-output-ports-node-id="${nodeId}"] .outputPortHoverArea`)
.boundingBox()
expect(outputPortArea).not.toBeNull()
assert(outputPortArea)
const centerX = outputPortArea.x + outputPortArea.width / 2
const bottom = outputPortArea.y + outputPortArea.height
return { x: centerX, y: bottom - 2.0 }
}

/** Returns a locator for the create node from port button. */
export async function createNodeFromPortButton(page: Page, node: Locator) {
const nodeId = await node.getAttribute('data-node-id')
return page.locator(
`.GraphNodeOutputPorts[data-output-ports-node-id="${nodeId}"] .CreateNodeFromPortButton .plusIcon`,
)
}
Original file line number Diff line number Diff line change
@@ -130,7 +130,7 @@ graph.suggestEdgeFromOutput(outputHovered)
</script>

<template>
<g class="GraphNodeOutputPorts">
<g class="GraphNodeOutputPorts" :data-output-ports-node-id="props.nodeId">
<template v-for="port of outputPorts" :key="port.portId">
<g :style="portGroupStyle(port)" class="define-node-colors">
<g