This is an automated email from the ASF dual-hosted git repository. marat pushed a commit to branch main in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
commit 687ebde1c0e5ed9abb5471714a23f03c53ec4466 Author: Marat Gubaidullin <[email protected]> AuthorDate: Fri Sep 13 10:42:13 2024 -0400 Support Poll EIP #1359 --- .../src/main/webui/src/designer/icons/EipIcons.tsx | 15 ++- .../src/main/webui/src/designer/karavan.css | 77 --------------- .../webui/src/designer/route/DslConnections.tsx | 6 +- karavan-designer/src/designer/icons/EipIcons.tsx | 15 ++- karavan-designer/src/designer/karavan.css | 77 --------------- .../src/designer/route/DslConnections.css | 107 +++++++++++++++++++++ .../src/designer/route/DslConnections.tsx | 6 +- karavan-space/src/designer/icons/EipIcons.tsx | 15 ++- karavan-space/src/designer/karavan.css | 77 --------------- .../src/designer/route/DslConnections.tsx | 6 +- 10 files changed, 152 insertions(+), 249 deletions(-) diff --git a/karavan-app/src/main/webui/src/designer/icons/EipIcons.tsx b/karavan-app/src/main/webui/src/designer/icons/EipIcons.tsx index bdf952de..d3113344 100644 --- a/karavan-app/src/main/webui/src/designer/icons/EipIcons.tsx +++ b/karavan-app/src/main/webui/src/designer/icons/EipIcons.tsx @@ -54,11 +54,14 @@ export function ToIcon() { return ( <svg xmlns="http://www.w3.org/2000/svg"; + width={800} + height={800} viewBox="0 0 32 32" - className="icon" width="32px" height="32px" + className="icon" > + <path d="m12.103 11.923 2.58 2.59H2.513v2h12.17l-2.58 2.59 1.41 1.41 5-5-5-5z"/> <path - d="M24 22v-1h6v-2h-6v-6h6v-2h-6v-1a2 2 0 0 0-2-2h-6a8.007 8.007 0 0 0-7.93 7v2A8.007 8.007 0 0 0 16 24h6a2 2 0 0 0 2-2zm-8 0a6 6 0 1 1 0-12h6v12z"/> + d="M9.513 23.013v-.5h2v.5a4.504 4.504 0 0 0 9 .36v-.86l.82-.1a7 7 0 0 0 0-13.88l-.82-.02v-.86a4.504 4.504 0 0 0-9 .36v.5h-2v-.5a6.5 6.5 0 0 1 12.86-1.3 9 9 0 0 1 0 17.6 6.5 6.5 0 0 1-12.86-1.3z"/> <path d="M0 0h32v32H0z" data-name="<Transparent Rectangle>" @@ -74,11 +77,15 @@ export function PollIcon() { return ( <svg xmlns="http://www.w3.org/2000/svg"; + width={800} + height={800} viewBox="0 0 32 32" - className="icon" width="32px" height="32px" + className="icon" > + <title>{"cloud--download"}</title> <path - d="M24 22v-1h6v-2h-6v-6h6v-2h-6v-1a2 2 0 0 0-2-2h-6a8.007 8.007 0 0 0-7.93 7v2A8.007 8.007 0 0 0 16 24h6a2 2 0 0 0 2-2zm-8 0a6 6 0 1 1 0-12h6v12z"/> + d="M10.013 23.513v-.5h2v.5a4.504 4.504 0 0 0 9 .36v-.86l.82-.1a7 7 0 0 0 0-13.88l-.82-.02v-.86a4.504 4.504 0 0 0-9 .36v.5h-2v-.5a6.5 6.5 0 0 1 12.86-1.3 9 9 0 0 1 0 17.6 6.5 6.5 0 0 1-12.86-1.3z"/> + <path d="M18.013 17.013v-2H5.843l2.58-2.59-1.41-1.41-5 5 5 5 1.41-1.41-2.58-2.59z"/> <path d="M0 0h32v32H0z" data-name="<Transparent Rectangle>" diff --git a/karavan-app/src/main/webui/src/designer/karavan.css b/karavan-app/src/main/webui/src/designer/karavan.css index 6e7954bb..504c9c31 100644 --- a/karavan-app/src/main/webui/src/designer/karavan.css +++ b/karavan-app/src/main/webui/src/designer/karavan.css @@ -388,83 +388,6 @@ gap: 6px; } -/*connections*/ -.karavan .dsl-page .graph .connections { - position: absolute; - top: 0; - left: 0; - background: transparent; -} - -.karavan .dsl-page .graph .connections .icon { - height: 22px; - width: 22px; -} - -.karavan .dsl-page .graph .connections .arrow { - stroke: var(--pf-v5-global--Color--200); - fill: var(--pf-v5-global--Color--200); -} - -.karavan .dsl-page .graph .connections .path { - stroke: var(--pf-v5-global--Color--200); - stroke-width: 1; - fill: transparent; -} - -.karavan .dsl-page .graph .connections .circle-outgoing, -.karavan .dsl-page .graph .connections .circle-incoming { - stroke: var(--pf-v5-global--Color--200); - stroke-width: 1; - fill: white; -} - -.karavan .dsl-page .graph .connections .path-incoming { - stroke-dasharray: 5; - -webkit-animation: dashdraw 0.5s linear infinite; - animation: dashdraw 0.5s linear infinite; - stroke: var(--pf-v5-global--Color--200); - stroke-width: 1; - fill: transparent; -} - -.karavan .dsl-page .graph .connections .path-incoming-nav { - stroke: var(--pf-v5-global--Color--200); - stroke-width: 1; - fill: transparent; -} - -.karavan .dsl-page .graph .connections .path-direct { - stroke-dasharray: 0; - stroke: var(--pf-v5-global--Color--200); - stroke-width: 0.7; - stroke-opacity: 0.7; - fill: transparent; -} - -.karavan .dsl-page .graph .connections .path-direct-selected { - stroke-dasharray: 0; - stroke: var(--pf-v5-global--active-color--100); - stroke-width: 1; - stroke-opacity: 1; - fill: transparent; -} - -.karavan .dsl-page .graph .connections .path-seda { - stroke-dasharray: 2; - stroke: var(--pf-v5-global--Color--200); - -webkit-animation: dashdraw 0.5s linear infinite; - animation: dashdraw 0.5s linear infinite; - stroke-width: 1; - fill: transparent; -} - -@keyframes dashdraw { - 0% { - stroke-dashoffset: 10; - } -} - .karavan .dsl-page .flows .step-element { align-items: center; text-align: center; diff --git a/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx b/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx index 7bb1cbb0..99fd0934 100644 --- a/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx +++ b/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx @@ -15,7 +15,7 @@ * limitations under the License. */ import React, {JSX, useEffect, useState} from 'react'; -import '../karavan.css'; +import './DslConnections.css'; import {DslPosition, EventBus} from "../utils/EventBus"; import {CamelUi} from "../utils/CamelUi"; import {useConnectionsStore, useDesignerStore, useIntegrationStore} from "../DesignerStore"; @@ -244,12 +244,14 @@ export function DslConnections() { const lineXi = lineX1 + 40; const lineYi = lineY2; + const className = isNav ? 'path-incoming-nav' : (isPoll ? 'path-poll' : 'path-incoming') + return (!isInternal ? <g key={pos.step.uuid + "-outgoing"}> <circle cx={outgoingX} cy={outgoingY} r={r} className="circle-outgoing"/> <path d={`M ${lineX1},${lineY1} C ${lineXi - 20}, ${lineY1} ${lineX1 - RADIUS},${lineYi} ${lineXi},${lineYi} L ${lineX2},${lineY2}`} - className={isNav ? 'path-incoming-nav' : 'path-incoming'} markerStart={isPoll ? "url(#arrowheadLeft)" : "none"} markerEnd={isPoll ? "none" : "url(#arrowheadRight)"}/> + className={className} markerStart={isPoll ? "url(#arrowheadLeft)" : "none"} markerEnd={isPoll ? "none" : "url(#arrowheadRight)"}/> </g> : <div key={pos.step.uuid + "-outgoing"} style={{display: 'none'}}></div> ) diff --git a/karavan-designer/src/designer/icons/EipIcons.tsx b/karavan-designer/src/designer/icons/EipIcons.tsx index bdf952de..d3113344 100644 --- a/karavan-designer/src/designer/icons/EipIcons.tsx +++ b/karavan-designer/src/designer/icons/EipIcons.tsx @@ -54,11 +54,14 @@ export function ToIcon() { return ( <svg xmlns="http://www.w3.org/2000/svg"; + width={800} + height={800} viewBox="0 0 32 32" - className="icon" width="32px" height="32px" + className="icon" > + <path d="m12.103 11.923 2.58 2.59H2.513v2h12.17l-2.58 2.59 1.41 1.41 5-5-5-5z"/> <path - d="M24 22v-1h6v-2h-6v-6h6v-2h-6v-1a2 2 0 0 0-2-2h-6a8.007 8.007 0 0 0-7.93 7v2A8.007 8.007 0 0 0 16 24h6a2 2 0 0 0 2-2zm-8 0a6 6 0 1 1 0-12h6v12z"/> + d="M9.513 23.013v-.5h2v.5a4.504 4.504 0 0 0 9 .36v-.86l.82-.1a7 7 0 0 0 0-13.88l-.82-.02v-.86a4.504 4.504 0 0 0-9 .36v.5h-2v-.5a6.5 6.5 0 0 1 12.86-1.3 9 9 0 0 1 0 17.6 6.5 6.5 0 0 1-12.86-1.3z"/> <path d="M0 0h32v32H0z" data-name="<Transparent Rectangle>" @@ -74,11 +77,15 @@ export function PollIcon() { return ( <svg xmlns="http://www.w3.org/2000/svg"; + width={800} + height={800} viewBox="0 0 32 32" - className="icon" width="32px" height="32px" + className="icon" > + <title>{"cloud--download"}</title> <path - d="M24 22v-1h6v-2h-6v-6h6v-2h-6v-1a2 2 0 0 0-2-2h-6a8.007 8.007 0 0 0-7.93 7v2A8.007 8.007 0 0 0 16 24h6a2 2 0 0 0 2-2zm-8 0a6 6 0 1 1 0-12h6v12z"/> + d="M10.013 23.513v-.5h2v.5a4.504 4.504 0 0 0 9 .36v-.86l.82-.1a7 7 0 0 0 0-13.88l-.82-.02v-.86a4.504 4.504 0 0 0-9 .36v.5h-2v-.5a6.5 6.5 0 0 1 12.86-1.3 9 9 0 0 1 0 17.6 6.5 6.5 0 0 1-12.86-1.3z"/> + <path d="M18.013 17.013v-2H5.843l2.58-2.59-1.41-1.41-5 5 5 5 1.41-1.41-2.58-2.59z"/> <path d="M0 0h32v32H0z" data-name="<Transparent Rectangle>" diff --git a/karavan-designer/src/designer/karavan.css b/karavan-designer/src/designer/karavan.css index 6e7954bb..504c9c31 100644 --- a/karavan-designer/src/designer/karavan.css +++ b/karavan-designer/src/designer/karavan.css @@ -388,83 +388,6 @@ gap: 6px; } -/*connections*/ -.karavan .dsl-page .graph .connections { - position: absolute; - top: 0; - left: 0; - background: transparent; -} - -.karavan .dsl-page .graph .connections .icon { - height: 22px; - width: 22px; -} - -.karavan .dsl-page .graph .connections .arrow { - stroke: var(--pf-v5-global--Color--200); - fill: var(--pf-v5-global--Color--200); -} - -.karavan .dsl-page .graph .connections .path { - stroke: var(--pf-v5-global--Color--200); - stroke-width: 1; - fill: transparent; -} - -.karavan .dsl-page .graph .connections .circle-outgoing, -.karavan .dsl-page .graph .connections .circle-incoming { - stroke: var(--pf-v5-global--Color--200); - stroke-width: 1; - fill: white; -} - -.karavan .dsl-page .graph .connections .path-incoming { - stroke-dasharray: 5; - -webkit-animation: dashdraw 0.5s linear infinite; - animation: dashdraw 0.5s linear infinite; - stroke: var(--pf-v5-global--Color--200); - stroke-width: 1; - fill: transparent; -} - -.karavan .dsl-page .graph .connections .path-incoming-nav { - stroke: var(--pf-v5-global--Color--200); - stroke-width: 1; - fill: transparent; -} - -.karavan .dsl-page .graph .connections .path-direct { - stroke-dasharray: 0; - stroke: var(--pf-v5-global--Color--200); - stroke-width: 0.7; - stroke-opacity: 0.7; - fill: transparent; -} - -.karavan .dsl-page .graph .connections .path-direct-selected { - stroke-dasharray: 0; - stroke: var(--pf-v5-global--active-color--100); - stroke-width: 1; - stroke-opacity: 1; - fill: transparent; -} - -.karavan .dsl-page .graph .connections .path-seda { - stroke-dasharray: 2; - stroke: var(--pf-v5-global--Color--200); - -webkit-animation: dashdraw 0.5s linear infinite; - animation: dashdraw 0.5s linear infinite; - stroke-width: 1; - fill: transparent; -} - -@keyframes dashdraw { - 0% { - stroke-dashoffset: 10; - } -} - .karavan .dsl-page .flows .step-element { align-items: center; text-align: center; diff --git a/karavan-designer/src/designer/route/DslConnections.css b/karavan-designer/src/designer/route/DslConnections.css new file mode 100644 index 00000000..03da5f2a --- /dev/null +++ b/karavan-designer/src/designer/route/DslConnections.css @@ -0,0 +1,107 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*connections*/ +.karavan .dsl-page .graph .connections { + position: absolute; + top: 0; + left: 0; + background: transparent; +} + +.karavan .dsl-page .graph .connections .icon { + height: 22px; + width: 22px; +} + +.karavan .dsl-page .graph .connections .arrow { + stroke: var(--pf-v5-global--Color--200); + fill: var(--pf-v5-global--Color--200); +} + +.karavan .dsl-page .graph .connections .path { + stroke: var(--pf-v5-global--Color--200); + stroke-width: 1; + fill: transparent; +} + +.karavan .dsl-page .graph .connections .circle-outgoing, +.karavan .dsl-page .graph .connections .circle-incoming { + stroke: var(--pf-v5-global--Color--200); + stroke-width: 1; + fill: white; +} + +.karavan .dsl-page .graph .connections .path-incoming { + stroke-dasharray: 5; + -webkit-animation: dashdrawR 0.5s linear infinite; + animation: dashdrawR 0.5s linear infinite; + stroke: var(--pf-v5-global--Color--200); + stroke-width: 1; + fill: transparent; +} + +.karavan .dsl-page .graph .connections .path-poll { + stroke-dasharray: 5; + -webkit-animation: dashdrawL 0.5s linear infinite; + animation: dashdrawL 0.5s linear infinite; + stroke: var(--pf-v5-global--Color--200); + stroke-width: 1; + fill: transparent; +} + +.karavan .dsl-page .graph .connections .path-incoming-nav { + stroke: var(--pf-v5-global--Color--200); + stroke-width: 1; + fill: transparent; +} + +.karavan .dsl-page .graph .connections .path-direct { + stroke-dasharray: 0; + stroke: var(--pf-v5-global--Color--200); + stroke-width: 0.7; + stroke-opacity: 0.7; + fill: transparent; +} + +.karavan .dsl-page .graph .connections .path-direct-selected { + stroke-dasharray: 0; + stroke: var(--pf-v5-global--active-color--100); + stroke-width: 1; + stroke-opacity: 1; + fill: transparent; +} + +.karavan .dsl-page .graph .connections .path-seda { + stroke-dasharray: 2; + stroke: var(--pf-v5-global--Color--200); + -webkit-animation: dashdrawR 0.5s linear infinite; + animation: dashdrawR 0.5s linear infinite; + stroke-width: 1; + fill: transparent; +} + +@keyframes dashdrawR { + 0% { + stroke-dashoffset: 10; + } +} + +@keyframes dashdrawL { + 100% { + stroke-dashoffset: 10; + } +} \ No newline at end of file diff --git a/karavan-designer/src/designer/route/DslConnections.tsx b/karavan-designer/src/designer/route/DslConnections.tsx index 7bb1cbb0..99fd0934 100644 --- a/karavan-designer/src/designer/route/DslConnections.tsx +++ b/karavan-designer/src/designer/route/DslConnections.tsx @@ -15,7 +15,7 @@ * limitations under the License. */ import React, {JSX, useEffect, useState} from 'react'; -import '../karavan.css'; +import './DslConnections.css'; import {DslPosition, EventBus} from "../utils/EventBus"; import {CamelUi} from "../utils/CamelUi"; import {useConnectionsStore, useDesignerStore, useIntegrationStore} from "../DesignerStore"; @@ -244,12 +244,14 @@ export function DslConnections() { const lineXi = lineX1 + 40; const lineYi = lineY2; + const className = isNav ? 'path-incoming-nav' : (isPoll ? 'path-poll' : 'path-incoming') + return (!isInternal ? <g key={pos.step.uuid + "-outgoing"}> <circle cx={outgoingX} cy={outgoingY} r={r} className="circle-outgoing"/> <path d={`M ${lineX1},${lineY1} C ${lineXi - 20}, ${lineY1} ${lineX1 - RADIUS},${lineYi} ${lineXi},${lineYi} L ${lineX2},${lineY2}`} - className={isNav ? 'path-incoming-nav' : 'path-incoming'} markerStart={isPoll ? "url(#arrowheadLeft)" : "none"} markerEnd={isPoll ? "none" : "url(#arrowheadRight)"}/> + className={className} markerStart={isPoll ? "url(#arrowheadLeft)" : "none"} markerEnd={isPoll ? "none" : "url(#arrowheadRight)"}/> </g> : <div key={pos.step.uuid + "-outgoing"} style={{display: 'none'}}></div> ) diff --git a/karavan-space/src/designer/icons/EipIcons.tsx b/karavan-space/src/designer/icons/EipIcons.tsx index bdf952de..d3113344 100644 --- a/karavan-space/src/designer/icons/EipIcons.tsx +++ b/karavan-space/src/designer/icons/EipIcons.tsx @@ -54,11 +54,14 @@ export function ToIcon() { return ( <svg xmlns="http://www.w3.org/2000/svg"; + width={800} + height={800} viewBox="0 0 32 32" - className="icon" width="32px" height="32px" + className="icon" > + <path d="m12.103 11.923 2.58 2.59H2.513v2h12.17l-2.58 2.59 1.41 1.41 5-5-5-5z"/> <path - d="M24 22v-1h6v-2h-6v-6h6v-2h-6v-1a2 2 0 0 0-2-2h-6a8.007 8.007 0 0 0-7.93 7v2A8.007 8.007 0 0 0 16 24h6a2 2 0 0 0 2-2zm-8 0a6 6 0 1 1 0-12h6v12z"/> + d="M9.513 23.013v-.5h2v.5a4.504 4.504 0 0 0 9 .36v-.86l.82-.1a7 7 0 0 0 0-13.88l-.82-.02v-.86a4.504 4.504 0 0 0-9 .36v.5h-2v-.5a6.5 6.5 0 0 1 12.86-1.3 9 9 0 0 1 0 17.6 6.5 6.5 0 0 1-12.86-1.3z"/> <path d="M0 0h32v32H0z" data-name="<Transparent Rectangle>" @@ -74,11 +77,15 @@ export function PollIcon() { return ( <svg xmlns="http://www.w3.org/2000/svg"; + width={800} + height={800} viewBox="0 0 32 32" - className="icon" width="32px" height="32px" + className="icon" > + <title>{"cloud--download"}</title> <path - d="M24 22v-1h6v-2h-6v-6h6v-2h-6v-1a2 2 0 0 0-2-2h-6a8.007 8.007 0 0 0-7.93 7v2A8.007 8.007 0 0 0 16 24h6a2 2 0 0 0 2-2zm-8 0a6 6 0 1 1 0-12h6v12z"/> + d="M10.013 23.513v-.5h2v.5a4.504 4.504 0 0 0 9 .36v-.86l.82-.1a7 7 0 0 0 0-13.88l-.82-.02v-.86a4.504 4.504 0 0 0-9 .36v.5h-2v-.5a6.5 6.5 0 0 1 12.86-1.3 9 9 0 0 1 0 17.6 6.5 6.5 0 0 1-12.86-1.3z"/> + <path d="M18.013 17.013v-2H5.843l2.58-2.59-1.41-1.41-5 5 5 5 1.41-1.41-2.58-2.59z"/> <path d="M0 0h32v32H0z" data-name="<Transparent Rectangle>" diff --git a/karavan-space/src/designer/karavan.css b/karavan-space/src/designer/karavan.css index 6e7954bb..504c9c31 100644 --- a/karavan-space/src/designer/karavan.css +++ b/karavan-space/src/designer/karavan.css @@ -388,83 +388,6 @@ gap: 6px; } -/*connections*/ -.karavan .dsl-page .graph .connections { - position: absolute; - top: 0; - left: 0; - background: transparent; -} - -.karavan .dsl-page .graph .connections .icon { - height: 22px; - width: 22px; -} - -.karavan .dsl-page .graph .connections .arrow { - stroke: var(--pf-v5-global--Color--200); - fill: var(--pf-v5-global--Color--200); -} - -.karavan .dsl-page .graph .connections .path { - stroke: var(--pf-v5-global--Color--200); - stroke-width: 1; - fill: transparent; -} - -.karavan .dsl-page .graph .connections .circle-outgoing, -.karavan .dsl-page .graph .connections .circle-incoming { - stroke: var(--pf-v5-global--Color--200); - stroke-width: 1; - fill: white; -} - -.karavan .dsl-page .graph .connections .path-incoming { - stroke-dasharray: 5; - -webkit-animation: dashdraw 0.5s linear infinite; - animation: dashdraw 0.5s linear infinite; - stroke: var(--pf-v5-global--Color--200); - stroke-width: 1; - fill: transparent; -} - -.karavan .dsl-page .graph .connections .path-incoming-nav { - stroke: var(--pf-v5-global--Color--200); - stroke-width: 1; - fill: transparent; -} - -.karavan .dsl-page .graph .connections .path-direct { - stroke-dasharray: 0; - stroke: var(--pf-v5-global--Color--200); - stroke-width: 0.7; - stroke-opacity: 0.7; - fill: transparent; -} - -.karavan .dsl-page .graph .connections .path-direct-selected { - stroke-dasharray: 0; - stroke: var(--pf-v5-global--active-color--100); - stroke-width: 1; - stroke-opacity: 1; - fill: transparent; -} - -.karavan .dsl-page .graph .connections .path-seda { - stroke-dasharray: 2; - stroke: var(--pf-v5-global--Color--200); - -webkit-animation: dashdraw 0.5s linear infinite; - animation: dashdraw 0.5s linear infinite; - stroke-width: 1; - fill: transparent; -} - -@keyframes dashdraw { - 0% { - stroke-dashoffset: 10; - } -} - .karavan .dsl-page .flows .step-element { align-items: center; text-align: center; diff --git a/karavan-space/src/designer/route/DslConnections.tsx b/karavan-space/src/designer/route/DslConnections.tsx index 7bb1cbb0..99fd0934 100644 --- a/karavan-space/src/designer/route/DslConnections.tsx +++ b/karavan-space/src/designer/route/DslConnections.tsx @@ -15,7 +15,7 @@ * limitations under the License. */ import React, {JSX, useEffect, useState} from 'react'; -import '../karavan.css'; +import './DslConnections.css'; import {DslPosition, EventBus} from "../utils/EventBus"; import {CamelUi} from "../utils/CamelUi"; import {useConnectionsStore, useDesignerStore, useIntegrationStore} from "../DesignerStore"; @@ -244,12 +244,14 @@ export function DslConnections() { const lineXi = lineX1 + 40; const lineYi = lineY2; + const className = isNav ? 'path-incoming-nav' : (isPoll ? 'path-poll' : 'path-incoming') + return (!isInternal ? <g key={pos.step.uuid + "-outgoing"}> <circle cx={outgoingX} cy={outgoingY} r={r} className="circle-outgoing"/> <path d={`M ${lineX1},${lineY1} C ${lineXi - 20}, ${lineY1} ${lineX1 - RADIUS},${lineYi} ${lineXi},${lineYi} L ${lineX2},${lineY2}`} - className={isNav ? 'path-incoming-nav' : 'path-incoming'} markerStart={isPoll ? "url(#arrowheadLeft)" : "none"} markerEnd={isPoll ? "none" : "url(#arrowheadRight)"}/> + className={className} markerStart={isPoll ? "url(#arrowheadLeft)" : "none"} markerEnd={isPoll ? "none" : "url(#arrowheadRight)"}/> </g> : <div key={pos.step.uuid + "-outgoing"} style={{display: 'none'}}></div> )
