-
Notifications
You must be signed in to change notification settings - Fork 323
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create node from port button (#11836)
Closes #11508 https://github.com/user-attachments/assets/7943f63d-4d34-4909-ac47-bf8ea4dd3eb7 A few notes regarding implementation: - The button is drawn as SVG and embedded into the output port because it is relatively easy to position it correctly and seamlessly blend it with the surrounding output port. - We have a ready SVG `plus` icon, but the initial design suggested we want to make it transparent in the center, so I used a mask to clip the plus shape from the background. This is relatively unimportant for the implementation and can be replaced by a separate SVG if we want. - I fixed the positioning for “port labels.” They are only visible when multiple output ports are present, so it is not important. - There is a hover area extending around the actual button and its “connection”, so it is easy to click. It is a nuance for the tests, though, so I was forced to use `force: true`. - The connection is not a real connection, but has the same dimensions and color scheme. Implementing this visual part as a “fake” edge is extremely tricky, so I chose not to do that. - These buttons must be hidden when the component browser is connected, or they will visually conflict with the normal edge. There is no clear way to check if the component browser is connected to _that_ port, so _every_ button is hidden when the component browser is opened. - As an unrelated change, I renamed `circular menu` → `component menu`.
- Loading branch information
Showing
16 changed files
with
186 additions
and
81 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
108 changes: 108 additions & 0 deletions
108
app/gui/src/project-view/components/GraphEditor/CreateNodeFromPortButton.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| <script setup lang="ts"> | ||
| import { ref } from 'vue' | ||
| import { AstId } from 'ydoc-shared/ast' | ||
| const props = defineProps<{ portId: AstId }>() | ||
| const emit = defineEmits<{ click: [] }>() | ||
| const hovered = ref(false) | ||
| </script> | ||
|
|
||
| <template> | ||
| <g :class="{ CreateNodeFromPortButton: true, hovered }" @click="emit('click')"> | ||
| <rect :class="{ connection: true }" fill="currentColor"></rect> | ||
| <g :class="{ plusIcon: true }"> | ||
| <mask :id="`${props.portId}_add_node_clip_path`"> | ||
| <rect class="maskBackground"></rect> | ||
| <rect class="plusV"></rect> | ||
| <rect class="plusH"></rect> | ||
| </mask> | ||
| <circle :mask="`url(#${props.portId}_add_node_clip_path)`" fill="currentColor"></circle> | ||
| </g> | ||
| <rect class="hoverArea" @pointerenter="hovered = true" @pointerleave="hovered = false"></rect> | ||
| </g> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| .CreateNodeFromPortButton { | ||
| --radius: 6px; | ||
| --maskSize: calc(var(--radius) * 2); | ||
| --strokeWidth: 1.5px; | ||
| --leftOffset: 16px; | ||
| --topOffset: 40px; | ||
| --color-dimmed: color-mix(in oklab, var(--color-node-primary) 60%, white 40%); | ||
| --color: var(--color-node-primary); | ||
| } | ||
| .connection { | ||
| --width: 4px; | ||
| --direct-hover-offset: calc( | ||
| var(--output-port-hovered-extra-width) * var(--direct-hover-animation) | ||
| ); | ||
| width: var(--width); | ||
| height: calc((var(--topOffset) - var(--direct-hover-offset) + 2px) * var(--hover-animation)); | ||
| transform: translate( | ||
| calc(var(--port-clip-start) * (100% + 1px) + var(--leftOffset) - var(--width) / 2), | ||
| calc(var(--node-size-y) + var(--direct-hover-offset) - var(--output-port-overlap)) | ||
| ); | ||
| cursor: pointer; | ||
| color: var(--color-dimmed); | ||
| transition: color 0.2s ease; | ||
| } | ||
| .hovered * { | ||
| color: var(--color); | ||
| } | ||
| .plusIcon { | ||
| transform: translate( | ||
| calc(var(--port-clip-start) * (100% + 1px) + var(--leftOffset) - var(--radius)), | ||
| calc( | ||
| var(--node-size-y) + var(--output-port-max-width) + var(--node-vertical-gap) + | ||
| var(--topOffset) | ||
| ) | ||
| ); | ||
| color: var(--color-dimmed); | ||
| cursor: pointer; | ||
| & .maskBackground { | ||
| fill: white; | ||
| width: var(--maskSize); | ||
| height: var(--maskSize); | ||
| } | ||
| & .plusV { | ||
| x: calc(var(--maskSize) / 2 - var(--strokeWidth) / 2); | ||
| y: calc(var(--radius) / 2); | ||
| width: var(--strokeWidth); | ||
| height: var(--radius); | ||
| fill: black; | ||
| } | ||
| & .plusH { | ||
| x: calc(var(--radius) / 2); | ||
| y: calc(var(--maskSize) / 2 - var(--strokeWidth) / 2); | ||
| width: var(--radius); | ||
| height: var(--strokeWidth); | ||
| fill: black; | ||
| } | ||
| & circle { | ||
| cx: var(--radius); | ||
| cy: var(--radius); | ||
| r: calc(var(--radius) * var(--hover-animation)); | ||
| transition: color 0.2s ease; | ||
| } | ||
| } | ||
| .hoverArea { | ||
| --margin: 4px; | ||
| --width: calc(var(--radius) * 2 + var(--margin) * 2); | ||
| fill: transparent; | ||
| width: var(--width); | ||
| height: calc( | ||
| var(--node-vertical-gap) + var(--output-port-max-width) + var(--margin) * 2 + var(--topOffset) + | ||
| var(--radius) | ||
| ); | ||
| transform: translate( | ||
| calc(var(--port-clip-start) * (100% + 1px) + var(--leftOffset) - var(--width) / 2), | ||
| calc(var(--node-size-y) + var(--output-port-max-width)) | ||
| ); | ||
| cursor: pointer; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.