From e7ee0d8f80b5c9c5b1b73f95b62578f3c94974d9 Mon Sep 17 00:00:00 2001 From: Ilya Bogdanov Date: Wed, 20 Nov 2024 13:54:20 +0400 Subject: [PATCH] Edges always end with arrows (#11590) Bypassing the failing test. --- .../components/ComponentBrowser.vue | 6 +++- .../ComponentBrowser/ComponentEditor.vue | 11 ------ .../components/GraphEditor/GraphEdge.vue | 34 ++++++------------- .../GraphEditor/widgets/WidgetPort.vue | 13 ------- 4 files changed, 16 insertions(+), 48 deletions(-) diff --git a/app/gui/src/project-view/components/ComponentBrowser.vue b/app/gui/src/project-view/components/ComponentBrowser.vue index f74ff31598..5f39159b76 100644 --- a/app/gui/src/project-view/components/ComponentBrowser.vue +++ b/app/gui/src/project-view/components/ComponentBrowser.vue @@ -41,6 +41,8 @@ const PAN_MARGINS = { } const COMPONENT_EDITOR_PADDING = 12 const ICON_WIDTH = 16 +// Component editor is larger than a typical node, so the edge should touch it a bit higher. +const EDGE_Y_OFFSET = -6 const cssComponentEditorPadding = `${COMPONENT_EDITOR_PADDING}px` @@ -199,7 +201,9 @@ watchEffect(() => { return } const scenePos = originScenePos.value.add( - new Vec2(COMPONENT_EDITOR_PADDING + ICON_WIDTH / 2, 0).scale(clientToSceneFactor.value), + new Vec2(COMPONENT_EDITOR_PADDING + ICON_WIDTH / 2, 0) + .scale(clientToSceneFactor.value) + .add(new Vec2(0, EDGE_Y_OFFSET)), ) graphStore.cbEditedEdge = { source, diff --git a/app/gui/src/project-view/components/ComponentBrowser/ComponentEditor.vue b/app/gui/src/project-view/components/ComponentBrowser/ComponentEditor.vue index 50cb155adc..3b42293521 100644 --- a/app/gui/src/project-view/components/ComponentBrowser/ComponentEditor.vue +++ b/app/gui/src/project-view/components/ComponentBrowser/ComponentEditor.vue @@ -105,17 +105,6 @@ const rootStyle = computed(() => { isolation: isolate; } -.iconPort::before { - content: ''; - position: absolute; - top: calc(var(--port-padding) - var(--component-editor-padding)); - width: var(--port-edge-width); - height: calc(var(--component-editor-padding) - var(--port-padding) + var(--icon-height) / 2); - transform: translate(-50%, 0); - background-color: var(--node-color-port); - z-index: -1; -} - .nodeIcon { color: white; width: var(--icon-height); diff --git a/app/gui/src/project-view/components/GraphEditor/GraphEdge.vue b/app/gui/src/project-view/components/GraphEditor/GraphEdge.vue index cbaf0d8541..4069920815 100644 --- a/app/gui/src/project-view/components/GraphEditor/GraphEdge.vue +++ b/app/gui/src/project-view/components/GraphEditor/GraphEdge.vue @@ -73,8 +73,7 @@ const targetPos = computed(() => { if (expr != null && targetNode.value != null && targetNodeRect.value != null) { const targetRectRelative = graph.getPortRelativeRect(expr) if (targetRectRelative == null) return - const yAdjustment = - targetIsSelfArgument.value ? -(selfArgumentArrowHeight + selfArgumentArrowYOffset) : 0 + const yAdjustment = -(arrowHeight + arrowYOffset) return targetNodeRect.value.pos.add(new Vec2(targetRectRelative.center().x, yAdjustment)) } else if (mouseAnchorPos.value != null) { return mouseAnchorPos.value @@ -509,29 +508,18 @@ const backwardEdgeArrowTransform = computed(() => { return svgTranslate(origin.add(points[1])) }) -const targetIsSelfArgument = computed(() => { - if ('targetIsSelfArgument' in props.edge && props.edge?.targetIsSelfArgument) return true - if (!targetExpr.value) return - const nodeId = graph.getPortNodeId(targetExpr.value) - if (!nodeId) return - const primarySubject = graph.db.nodeIdToNode.get(nodeId)?.primarySubject - if (!primarySubject) return - return targetExpr.value === primarySubject -}) - -const selfArgumentArrowHeight = 9 -const selfArgumentArrowYOffset = 0 -const selfArgumentArrowTransform = computed(() => { - const selfArgumentArrowTopOffset = 4 - const selfArgumentArrowWidth = 12 - if (!targetIsSelfArgument.value) return +const arrowHeight = 9 +const arrowYOffset = 0 +const arrowTransform = computed(() => { + const arrowTopOffset = 4 + const arrowWidth = 12 const target = targetPos.value if (target == null) return - const pos = target.sub(new Vec2(selfArgumentArrowWidth / 2, selfArgumentArrowTopOffset)) + const pos = target.sub(new Vec2(arrowWidth / 2, arrowTopOffset)) return svgTranslate(pos) }) -const selfArgumentArrowPath = [ +const arrowPath = [ 'M10.9635 1.5547', 'L6.83205 7.75193', 'C6.43623 8.34566 5.56377 8.34566 5.16795 7.75192', @@ -620,9 +608,9 @@ const sourceHoverAnimationStyle = computed(() => { :data-target-node-id="targetNode" /> diff --git a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetPort.vue b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetPort.vue index f2e8bfc475..50b1be282a 100644 --- a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetPort.vue +++ b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetPort.vue @@ -189,7 +189,6 @@ export const widgetDefinition = defineWidget( enabled, connected, isTarget, - isSelfArgument, widgetRounded: connected, newToConnect: !hasConnection && isCurrentEdgeHoverTarget, primary: props.nesting < 2, @@ -248,16 +247,4 @@ export const widgetDefinition = defineWidget( right: 0px; } } - -.WidgetPort.isTarget:not(.isSelfArgument):after { - content: ''; - position: absolute; - top: -4px; - left: 50%; - width: 4px; - height: 5px; - transform: translate(-50%, 0); - background-color: var(--node-color-port); - z-index: -1; -}