bfg-common 1.6.66 → 1.6.68

package/components/common/diagramMain/Diagram.vue

@@ -1,459 +1,461 @@
-<template>
-  <div
-    :class="{
-      'diagram-container-new': isNewView,
-      'diagram-container': !isNewView,
-      'diagram-in-portlet': props.inPortlet,
-    }"
-  >
-    <common-diagram-main-header
-      v-if="!props.inPortlet"
-      :project="props.project"
-      :is-show-diagram="props.isShowDiagram"
-      :diagram-name="props.diagramData.diagramName"
-      :test-id="props.diagramData.testId"
-      @toggle-diagram="emits('toggle-diagram')"
-      @show-modal="onShowModal"
-    />
-
-    <div
-      :class="[
-        'diagrams',
-        {
-          'is-show-diagram': props.isShowDiagram,
-        },
-      ]"
-    >
-      <div class="diagram-second-container">
-        <svg
-          v-if="props.diagramData && props.isShowDiagram"
-          xmlns="http://www.w3.org/2000/svg"
-          :height="diagramHeight"
-          :width="diagramWidth"
-          :viewBox="viewBox"
-          :preserveAspectRatio="preserveAspectRatio"
-          :class="svgClasses"
-          @click.capture="onClickDiagram"
-        >
-          <common-diagram-main-switch
-            :networks-count="props.networksCount"
-            :main-rect-height="props.mainRectHeight"
-            :main-switch-line="props.mainSwitchLine"
-            :selected-main-line="props.selectedMainLine"
-            :is-visible-line="hasActiveAdapter"
-            :is-selected-linked-with-adapter="isSelectedLinkedWithAdapter"
-            :adapter-line-y="props.adaptersWithPositions.adaptersConnectLineY"
-            :first-and-last-network-lines-y="firstAndLastNetworkLinesY"
-            :networks-with-positions="props.networksWithPositions"
-          />
-          <common-diagram-main-adapter
-            :networks-count="props.networksCount"
-            :adapters-with-positions="props.adaptersWithPositions"
-            :selected-main-line="props.selectedMainLine"
-            :selected-port="props.selectedPort"
-            :selected-adapter="props.selectedAdapter"
-            :selected-network="props.selectedNetwork"
-            :is-visible-line="hasActiveAdapter"
-            :is-dark-mode="props.isDarkMode"
-            :test-id="props.diagramData.testId"
-            :is-selected-linked-with-adapter="isSelectedLinkedWithAdapter"
-            :networks-with-positions="props.networksWithPositions"
-            :first-and-last-network-lines-y="firstAndLastNetworkLinesY"
-            :in-network-lines-y="inNetworkLinesY"
-            @toggle-adapters="onToggleAdapters"
-            @select-adapter="onSelectAdapter"
-            @show-modal="onShowModal"
-          />
-          <template v-if="!!props.networksWithPositions.length">
-            <template
-              v-for="network in props.networksWithPositions"
-              :key="network.id"
-            >
-              <common-diagram-main-network
-                :network="network"
-                :selected-port="props.selectedPort"
-                :selected-adapter="props.selectedAdapter"
-                :selected-network="props.selectedNetwork"
-                :selected-main-line="props.selectedMainLine"
-                :diagram-id="props.diagramData.id"
-                :in-portlet="props.inPortlet"
-                :is-visible-line="hasActiveAdapter"
-                :is-dark-mode="props.isDarkMode"
-                :first-and-last-network-lines-y="firstAndLastNetworkLinesY"
-                :adapter-line-y="
-                  props.adaptersWithPositions.adaptersConnectLineY
-                "
-                :adapters-positions-y="adaptersPositionsY"
-                @toggle-ports="onTogglePorts"
-                @select-port="onSelectPort"
-                @select-network="onSelectNetwork"
-                @show-modal="onShowModal"
-              />
-            </template>
-          </template>
-          <template v-else>
-            <common-diagram-main-network-no-network />
-          </template>
-          <common-diagram-main-switch-selected
-            :selected-switch-line-y="props.selectedSwitchLineY"
-            :is-visible-line="hasActiveAdapter && isSelectedLinkedWithAdapter"
-            :adapters-positions-y="adaptersPositionsY"
-            :adapter-line-y="props.adaptersWithPositions.adaptersConnectLineY"
-            :is-highlighted-adapter-line="isHighlightedAdapterLine"
-            :in-network-lines-y="inNetworkLinesY"
-          />
-        </svg>
-      </div>
-    </div>
-  </div>
-  <div v-if="isNewView && props.isShowDiagram" class="virtual-switch-remove">
-    <ui-button
-      :test-id="`${props.diagramData.testId}-remove`"
-      variant="text"
-      type="error"
-      is-without-sizes
-      is-without-height
-      v-permission="'Networks.RemoveSwitch'"
-      @click="emits('show-modal', 'switch-remove')"
-    >
-      <span class="virtual-switch-remove-btn">
-        <ui-icon name="delete" width="20" height="20" />
-        {{ localization.common.remove }}
-      </span>
-    </ui-button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_AdaptersWithPositions,
-  UI_I_DiagramData,
-  UI_I_ModalsInitialData,
-  UI_I_NetworksWithPositions,
-  UI_I_SelectedAdapter,
-  UI_I_SelectedPort,
-  UI_I_SwitchLine,
-  UI_I_Network,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-import { UI_E_PositionsY } from '~/components/common/diagramMain/lib/models/enums'
-
-const props = defineProps<{
-  diagramData: UI_I_DiagramData
-  isShowDiagram: boolean
-  inPortlet: boolean
-  networksWithPositions: UI_I_NetworksWithPositions[]
-  mainRectHeight: number
-  mainSwitchLine: UI_I_SwitchLine
-  selectedMainLine: boolean
-  adaptersWithPositions: UI_I_AdaptersWithPositions
-  selectedPort: UI_I_SelectedPort
-  selectedAdapter: UI_I_SelectedAdapter
-  selectedNetwork: string
-  selectedSwitchLineY: UI_I_SwitchLine
-  isDarkMode: boolean
-  networksCount: number
-  project: UI_T_Project
-}>()
-
-const emits = defineEmits<{
-  (event: 'click-diagram', ev: MouseEvent): void
-  (event: 'toggle-adapters'): void
-  (event: 'select-adapter', adapterId: string): void
-  (
-    event: 'show-modal',
-    value: string,
-    properties?: UI_I_ModalsInitialData
-  ): void
-  (
-    event: 'toggle-ports',
-    id: string,
-    newState: boolean,
-    diagramId: string
-  ): void
-  (event: 'select-port', networkId: string, portId: string): void
-  (event: 'select-network', networkId: string): void
-  (event: 'toggle-diagram'): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const inNetworkLinesY = computed(() => {
-  const linesY = []
-  props.networksWithPositions.forEach((net, index) => {
-    ;(!!props.selectedAdapter.connectedPorts.find(
-      (net2) => net2.networkId === net.id && net2.ports.length === 0
-    ) ||
-      props.selectedNetwork === net.id) &&
-      linesY.push(net.connectLineY)
-
-    net.toggle
-      ? net.ports.forEach((port) => {
-          ;((props.selectedPort.portId === port.id &&
-            props.selectedPort.networkId === net.id &&
-            net.activeAdapters.length > 0) ||
-            !!props.selectedAdapter.connectedPorts.find(
-              (net2) =>
-                net2.networkId === net.id && net2.ports.includes(port.id)
-            )) &&
-            linesY.push(port.portPosition + 7.5)
-        })
-      : !!props.selectedAdapter.connectedPorts.find(
-          (net2) => net2.networkId === net.id && net2.ports.length !== 0
-        ) && linesY.push(net.portsPosition + 7.5)
-  })
-
-  return linesY.sort((a, b) => a - b)
-})
-
-const isOpenedAdapterBlockAndNoSelectedNetwork = computed<boolean>(
-  () =>
-    !props.adaptersWithPositions.toggle && props.selectedPort.networkId !== '-1'
-)
-
-const hasNoAdaptersAndNoSelectedNetwork = computed<boolean>(() => {
-  return (
-    props.adaptersWithPositions.adapters?.length === 0 &&
-    props.selectedNetwork !== '-1'
-  )
-})
-
-const isHighlightedOptimizePart = computed(
-  () =>
-    !props.selectedMainLine && !isOpenedAdapterBlockAndNoSelectedNetwork.value
-)
-
-const isHighlightedAdapterLine = computed<boolean>(
-  () =>
-    isSelectedLinkedWithAdapter.value &&
-    !(
-      isHighlightedOptimizePart.value &&
-      !hasNoAdaptersAndNoSelectedNetwork.value
-    )
-)
-
-const firstAndLastNetworkLinesY = computed(() => {
-  const networkLinesY = props.networksWithPositions
-    .filter((n) => n.activeAdapters.length > 0 && n.state.state !== 3)
-    .map((n) => n.connectLineY)
-    .sort((a, b) => a - b)
-
-  return {
-    firstNetworkY: networkLinesY[0],
-    lastNetworkY: networkLinesY[networkLinesY.length - 1],
-  }
-})
-
-const adaptersPositionsY = computed(() =>
-  props.adaptersWithPositions.adapters.reduce((result, ad) => {
-    let isAdapterActiveOnAnyNetwork = false
-    props.networksWithPositions.forEach(
-      (network: UI_I_NetworksWithPositions) =>
-        network.activeAdapters.includes(props.selectedAdapter.adapterId) &&
-        (isAdapterActiveOnAnyNetwork = true)
-    )
-
-    const isVisible =
-      (props.selectedPort.activeAdapters.includes(ad.id) ||
-        (props.selectedAdapter.adapterId === ad.id &&
-          isAdapterActiveOnAnyNetwork)) &&
-      !!props.networksCount
-
-    if (isVisible) {
-      return [...result, ad.adapterPosition]
-    }
-    return result
-  }, [])
-)
-
-const svgClasses = computed(() => [
-  'diagram-svg',
-  {
-    'diagram-portlet': !props.inPortlet,
-  },
-])
-
-const preserveAspectRatio = computed<string | undefined>(() =>
-  props.inPortlet ? 'xMinYMin' : undefined
-)
-
-const svgHeight = computed<number>(
-  () =>
-    UI_E_PositionsY.DIAGRAM_TOP +
-    props.mainRectHeight +
-    UI_E_PositionsY.DIAGRAM_BOTTOM
-)
-
-const viewBox = computed<string>(() =>
-  props.inPortlet ? '0 0 725 1' : `0 0 725 ${svgHeight.value}`
-)
-
-const diagramHeight = computed<number>(() =>
-  props.inPortlet ? svgHeight.value / 1.28 : svgHeight.value
-)
-
-const diagramWidth = computed<number>(() => (props.inPortlet ? 560 : 725))
-
-const hasActiveAdapter = computed<boolean>(() => {
-  let flag = false
-  props.diagramData?.networks.forEach(
-    (network: UI_I_Network) =>
-      network.activeAdapters.length > 0 && (flag = true)
-  )
-  return flag
-})
-
-const isSelectedLinkedWithAdapter = computed<boolean>(() => {
-  if (props.selectedNetwork && props.selectedNetwork !== '-1') {
-    const selectedNetworkData = props.networksWithPositions.find(
-      (network: UI_I_NetworksWithPositions) =>
-        network.id === props.selectedNetwork
-    )
-
-    if (!selectedNetworkData) return false
-
-    return (
-      selectedNetworkData.activeAdapters.length > 0 &&
-      selectedNetworkData.state.state !== 3
-    )
-  }
-
-  if (props.selectedPort.portId && props.selectedPort.portId !== '-1') {
-    const selectedNetworkData = props.networksWithPositions.find(
-      (network: UI_I_NetworksWithPositions) =>
-        network.id === props.selectedPort.networkId
-    )
-
-    if (!selectedNetworkData) return false
-
-    return (
-      selectedNetworkData.activeAdapters.length > 0 &&
-      selectedNetworkData.state.state !== 3
-    )
-  }
-
-  if (props.selectedAdapter.adapterId !== '-1' || props.selectedMainLine)
-    return true
-
-  return false
-})
-
-const onClickDiagram = (ev: MouseEvent) => emits('click-diagram', ev)
-const onToggleAdapters = () => emits('toggle-adapters')
-const onSelectAdapter = (adapterId: string) =>
-  emits('select-adapter', adapterId)
-const onShowModal = (value: string, properties?: UI_I_ModalsInitialData) =>
-  emits('show-modal', value, properties)
-const onTogglePorts = (
-  id: string,
-  isToggle: boolean,
-  diagramId: string
-): void => {
-  emits('toggle-ports', id, isToggle, diagramId)
-}
-const onSelectPort = (networkId: string, portId: string): void => {
-  emits('select-port', networkId, portId)
-}
-const onSelectNetwork = (networkId: string): void => {
-  emits('select-network', networkId)
-}
-</script>
-
-<style scoped lang="scss">
-.diagram {
-  &-container {
-    //display: flex;
-    //justify-content: center;
-    .diagram-second-container {
-      display: flex;
-      justify-content: center;
-      min-width: 725px;
-    }
-
-    &.diagram-in-portlet {
-      .diagram-second-container {
-        min-width: 560px;
-      }
-    }
-
-    .diagram-portlet {
-      margin-top: 10px;
-    }
-  }
-}
-
-.diagram {
-  &-container-new:not(.diagram-in-portlet) {
-    .diagrams.is-show-diagram {
-      margin-top: 24px;
-    }
-
-    .diagram-second-container {
-      overflow-x: auto;
-      display: flex;
-      justify-content: center;
-      min-width: 760px;
-
-      &.diagram-in-portlet {
-        .diagram-second-container {
-          min-width: 560px;
-        }
-      }
-
-      .diagram-svg {
-        margin: 22.5px 17.5px;
-      }
-    }
-  }
-  &-container-new.diagram-in-portlet {
-    .diagram-portlet {
-      margin-top: 10px;
-    }
-  }
-}
-
-.diagrams {
-  overflow-y: auto;
-}
-
-.virtual-switch-remove {
-  padding: 16px 0 0;
-  display: flex;
-  justify-content: flex-end;
-
-  &-btn {
-    height: 20px;
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 17px;
-    letter-spacing: 0;
-    display: flex;
-    align-items: center;
-    column-gap: 8px;
-    color: var(--text-red)
-
-  }
-}
-</style>
-<style lang="scss">
-.diagram-actions__popup.navbar-dropdown-menu {
-  transform: translate(-30px, -20px);
-
-  .btn {
-    border-radius: 0;
-    border-bottom: 1px solid transparent;
-
-    span {
-      font-size: 14px;
-    }
-    &:active {
-      box-shadow: none;
-    }
-  }
-}
-</style>
+<template>
+  <div
+    :class="{
+      'diagram-container-new': isNewView,
+      'diagram-container': !isNewView,
+      'diagram-in-portlet': props.inPortlet,
+    }"
+  >
+    <common-diagram-main-header
+      v-if="!props.inPortlet"
+      :project="props.project"
+      :is-show-diagram="props.isShowDiagram"
+      :diagram-name="props.diagramData.diagramName"
+      :test-id="props.diagramData.testId"
+      @toggle-diagram="emits('toggle-diagram')"
+      @show-modal="onShowModal"
+    />
+
+    <div
+      :class="[
+        'diagrams',
+        {
+          'is-show-diagram': props.isShowDiagram,
+        },
+      ]"
+    >
+      <div class="diagram-second-container">
+        <svg
+          v-if="props.diagramData && props.isShowDiagram"
+          xmlns="http://www.w3.org/2000/svg"
+          :height="diagramHeight"
+          :width="diagramWidth"
+          :viewBox="viewBox"
+          :preserveAspectRatio="preserveAspectRatio"
+          :class="svgClasses"
+          @click.capture="onClickDiagram"
+        >
+          <common-diagram-main-switch
+            :networks-count="props.networksCount"
+            :main-rect-height="props.mainRectHeight"
+            :main-switch-line="props.mainSwitchLine"
+            :selected-main-line="props.selectedMainLine"
+            :is-visible-line="hasActiveAdapter"
+            :is-selected-linked-with-adapter="isSelectedLinkedWithAdapter"
+            :adapter-line-y="props.adaptersWithPositions.adaptersConnectLineY"
+            :first-and-last-network-lines-y="firstAndLastNetworkLinesY"
+            :networks-with-positions="props.networksWithPositions"
+          />
+          <common-diagram-main-adapter
+            :networks-count="props.networksCount"
+            :adapters-with-positions="props.adaptersWithPositions"
+            :selected-main-line="props.selectedMainLine"
+            :selected-port="props.selectedPort"
+            :selected-adapter="props.selectedAdapter"
+            :selected-network="props.selectedNetwork"
+            :is-visible-line="hasActiveAdapter"
+            :is-dark-mode="props.isDarkMode"
+            :test-id="props.diagramData.testId"
+            :is-selected-linked-with-adapter="isSelectedLinkedWithAdapter"
+            :networks-with-positions="props.networksWithPositions"
+            :first-and-last-network-lines-y="firstAndLastNetworkLinesY"
+            :in-network-lines-y="inNetworkLinesY"
+            @toggle-adapters="onToggleAdapters"
+            @select-adapter="onSelectAdapter"
+            @show-modal="onShowModal"
+          />
+          <template v-if="!!props.networksWithPositions.length">
+            <template
+              v-for="network in props.networksWithPositions"
+              :key="network.id"
+            >
+              <common-diagram-main-network
+                :network="network"
+                :selected-port="props.selectedPort"
+                :selected-adapter="props.selectedAdapter"
+                :selected-network="props.selectedNetwork"
+                :selected-main-line="props.selectedMainLine"
+                :diagram-id="props.diagramData.id"
+                :in-portlet="props.inPortlet"
+                :is-visible-line="hasActiveAdapter"
+                :is-dark-mode="props.isDarkMode"
+                :first-and-last-network-lines-y="firstAndLastNetworkLinesY"
+                :adapter-line-y="
+                  props.adaptersWithPositions.adaptersConnectLineY
+                "
+                :adapters-positions-y="adaptersPositionsY"
+                @toggle-ports="onTogglePorts"
+                @select-port="onSelectPort"
+                @select-network="onSelectNetwork"
+                @show-modal="onShowModal"
+              />
+            </template>
+          </template>
+          <template v-else>
+            <common-diagram-main-network-no-network />
+          </template>
+          <common-diagram-main-switch-selected
+            :selected-switch-line-y="props.selectedSwitchLineY"
+            :is-visible-line="hasActiveAdapter && isSelectedLinkedWithAdapter"
+            :adapters-positions-y="adaptersPositionsY"
+            :adapter-line-y="props.adaptersWithPositions.adaptersConnectLineY"
+            :is-highlighted-adapter-line="isHighlightedAdapterLine"
+            :in-network-lines-y="inNetworkLinesY"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+  <div
+    v-if="isNewView && props.isShowDiagram && !props.inPortlet"
+    class="virtual-switch-remove"
+  >
+    <ui-button
+      :test-id="`${props.diagramData.testId}-remove`"
+      variant="text"
+      type="error"
+      is-without-sizes
+      is-without-height
+      v-permission="'Networks.RemoveSwitch'"
+      @click="emits('show-modal', 'switch-remove')"
+    >
+      <span class="virtual-switch-remove-btn">
+        <ui-icon name="delete" width="20" height="20" />
+        {{ localization.common.remove }}
+      </span>
+    </ui-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_AdaptersWithPositions,
+  UI_I_DiagramData,
+  UI_I_ModalsInitialData,
+  UI_I_NetworksWithPositions,
+  UI_I_SelectedAdapter,
+  UI_I_SelectedPort,
+  UI_I_SwitchLine,
+  UI_I_Network,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import { UI_E_PositionsY } from '~/components/common/diagramMain/lib/models/enums'
+
+const props = defineProps<{
+  diagramData: UI_I_DiagramData
+  isShowDiagram: boolean
+  inPortlet: boolean
+  networksWithPositions: UI_I_NetworksWithPositions[]
+  mainRectHeight: number
+  mainSwitchLine: UI_I_SwitchLine
+  selectedMainLine: boolean
+  adaptersWithPositions: UI_I_AdaptersWithPositions
+  selectedPort: UI_I_SelectedPort
+  selectedAdapter: UI_I_SelectedAdapter
+  selectedNetwork: string
+  selectedSwitchLineY: UI_I_SwitchLine
+  isDarkMode: boolean
+  networksCount: number
+  project: UI_T_Project
+}>()
+
+const emits = defineEmits<{
+  (event: 'click-diagram', ev: MouseEvent): void
+  (event: 'toggle-adapters'): void
+  (event: 'select-adapter', adapterId: string): void
+  (
+    event: 'show-modal',
+    value: string,
+    properties?: UI_I_ModalsInitialData
+  ): void
+  (
+    event: 'toggle-ports',
+    id: string,
+    newState: boolean,
+    diagramId: string
+  ): void
+  (event: 'select-port', networkId: string, portId: string): void
+  (event: 'select-network', networkId: string): void
+  (event: 'toggle-diagram'): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const inNetworkLinesY = computed(() => {
+  const linesY = []
+  props.networksWithPositions.forEach((net, index) => {
+    ;(!!props.selectedAdapter.connectedPorts.find(
+      (net2) => net2.networkId === net.id && net2.ports.length === 0
+    ) ||
+      props.selectedNetwork === net.id) &&
+      linesY.push(net.connectLineY)
+
+    net.toggle
+      ? net.ports.forEach((port) => {
+          ;((props.selectedPort.portId === port.id &&
+            props.selectedPort.networkId === net.id &&
+            net.activeAdapters.length > 0) ||
+            !!props.selectedAdapter.connectedPorts.find(
+              (net2) =>
+                net2.networkId === net.id && net2.ports.includes(port.id)
+            )) &&
+            linesY.push(port.portPosition + 7.5)
+        })
+      : !!props.selectedAdapter.connectedPorts.find(
+          (net2) => net2.networkId === net.id && net2.ports.length !== 0
+        ) && linesY.push(net.portsPosition + 7.5)
+  })
+
+  return linesY.sort((a, b) => a - b)
+})
+
+const isOpenedAdapterBlockAndNoSelectedNetwork = computed<boolean>(
+  () =>
+    !props.adaptersWithPositions.toggle && props.selectedPort.networkId !== '-1'
+)
+
+const hasNoAdaptersAndNoSelectedNetwork = computed<boolean>(() => {
+  return (
+    props.adaptersWithPositions.adapters?.length === 0 &&
+    props.selectedNetwork !== '-1'
+  )
+})
+
+const isHighlightedOptimizePart = computed(
+  () =>
+    !props.selectedMainLine && !isOpenedAdapterBlockAndNoSelectedNetwork.value
+)
+
+const isHighlightedAdapterLine = computed<boolean>(
+  () =>
+    isSelectedLinkedWithAdapter.value &&
+    !(
+      isHighlightedOptimizePart.value &&
+      !hasNoAdaptersAndNoSelectedNetwork.value
+    )
+)
+
+const firstAndLastNetworkLinesY = computed(() => {
+  const networkLinesY = props.networksWithPositions
+    .filter((n) => n.activeAdapters.length > 0 && n.state.state !== 3)
+    .map((n) => n.connectLineY)
+    .sort((a, b) => a - b)
+
+  return {
+    firstNetworkY: networkLinesY[0],
+    lastNetworkY: networkLinesY[networkLinesY.length - 1],
+  }
+})
+
+const adaptersPositionsY = computed(() =>
+  props.adaptersWithPositions.adapters.reduce((result, ad) => {
+    let isAdapterActiveOnAnyNetwork = false
+    props.networksWithPositions.forEach(
+      (network: UI_I_NetworksWithPositions) =>
+        network.activeAdapters.includes(props.selectedAdapter.adapterId) &&
+        (isAdapterActiveOnAnyNetwork = true)
+    )
+
+    const isVisible =
+      (props.selectedPort.activeAdapters.includes(ad.id) ||
+        (props.selectedAdapter.adapterId === ad.id &&
+          isAdapterActiveOnAnyNetwork)) &&
+      !!props.networksCount
+
+    if (isVisible) {
+      return [...result, ad.adapterPosition]
+    }
+    return result
+  }, [])
+)
+
+const svgClasses = computed(() => [
+  'diagram-svg',
+  {
+    'diagram-portlet': !props.inPortlet,
+  },
+])
+
+const preserveAspectRatio = computed<string | undefined>(() =>
+  props.inPortlet ? 'xMinYMin' : undefined
+)
+
+const svgHeight = computed<number>(
+  () =>
+    UI_E_PositionsY.DIAGRAM_TOP +
+    props.mainRectHeight +
+    UI_E_PositionsY.DIAGRAM_BOTTOM
+)
+
+const viewBox = computed<string>(() =>
+  props.inPortlet ? '0 0 725 1' : `0 0 725 ${svgHeight.value}`
+)
+
+const diagramHeight = computed<number>(() =>
+  props.inPortlet ? svgHeight.value / 1.28 : svgHeight.value
+)
+
+const diagramWidth = computed<number>(() => (props.inPortlet ? 560 : 725))
+
+const hasActiveAdapter = computed<boolean>(() => {
+  let flag = false
+  props.diagramData?.networks.forEach(
+    (network: UI_I_Network) =>
+      network.activeAdapters.length > 0 && (flag = true)
+  )
+  return flag
+})
+
+const isSelectedLinkedWithAdapter = computed<boolean>(() => {
+  if (props.selectedNetwork && props.selectedNetwork !== '-1') {
+    const selectedNetworkData = props.networksWithPositions.find(
+      (network: UI_I_NetworksWithPositions) =>
+        network.id === props.selectedNetwork
+    )
+
+    if (!selectedNetworkData) return false
+
+    return (
+      selectedNetworkData.activeAdapters.length > 0 &&
+      selectedNetworkData.state.state !== 3
+    )
+  }
+
+  if (props.selectedPort.portId && props.selectedPort.portId !== '-1') {
+    const selectedNetworkData = props.networksWithPositions.find(
+      (network: UI_I_NetworksWithPositions) =>
+        network.id === props.selectedPort.networkId
+    )
+
+    if (!selectedNetworkData) return false
+
+    return (
+      selectedNetworkData.activeAdapters.length > 0 &&
+      selectedNetworkData.state.state !== 3
+    )
+  }
+
+  if (props.selectedAdapter.adapterId !== '-1' || props.selectedMainLine)
+    return true
+
+  return false
+})
+
+const onClickDiagram = (ev: MouseEvent) => emits('click-diagram', ev)
+const onToggleAdapters = () => emits('toggle-adapters')
+const onSelectAdapter = (adapterId: string) =>
+  emits('select-adapter', adapterId)
+const onShowModal = (value: string, properties?: UI_I_ModalsInitialData) =>
+  emits('show-modal', value, properties)
+const onTogglePorts = (
+  id: string,
+  isToggle: boolean,
+  diagramId: string
+): void => {
+  emits('toggle-ports', id, isToggle, diagramId)
+}
+const onSelectPort = (networkId: string, portId: string): void => {
+  emits('select-port', networkId, portId)
+}
+const onSelectNetwork = (networkId: string): void => {
+  emits('select-network', networkId)
+}
+</script>
+
+<style scoped lang="scss">
+.diagram {
+  &-container {
+    //display: flex;
+    //justify-content: center;
+    .diagram-second-container {
+      display: flex;
+      justify-content: center;
+      min-width: 725px;
+    }
+
+    &.diagram-in-portlet {
+      .diagram-second-container {
+        min-width: 560px;
+      }
+    }
+
+    .diagram-portlet {
+      margin-top: 10px;
+    }
+  }
+}
+
+.diagram {
+  &-container-new:not(.diagram-in-portlet) {
+    .diagrams.is-show-diagram {
+      margin-top: 24px;
+    }
+
+    .diagram-second-container {
+      overflow-x: auto;
+      display: flex;
+      justify-content: center;
+      min-width: 760px;
+
+      &.diagram-in-portlet {
+        .diagram-second-container {
+          min-width: 560px;
+        }
+      }
+
+      .diagram-svg {
+        margin: 22.5px 17.5px;
+      }
+    }
+  }
+  &-container-new.diagram-in-portlet {
+    .diagram-portlet {
+      margin-top: 10px;
+    }
+  }
+}
+
+.diagrams {
+  overflow-y: auto;
+}
+
+.virtual-switch-remove {
+  padding: 16px 0 0;
+  display: flex;
+  justify-content: flex-end;
+
+  &-btn {
+    height: 20px;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 17px;
+    letter-spacing: 0;
+    display: flex;
+    align-items: center;
+    column-gap: 8px;
+    color: var(--text-red);
+  }
+}
+</style>
+<style lang="scss">
+.diagram-actions__popup.navbar-dropdown-menu {
+  transform: translate(-30px, -20px);
+
+  .btn {
+    border-radius: 0;
+    border-bottom: 1px solid transparent;
+
+    span {
+      font-size: 14px;
+    }
+    &:active {
+      box-shadow: none;
+    }
+  }
+}
+</style>