bfg-common 1.2.36 → 1.2.38

package/components/common/diagramMain/Diagram.vue

@@ -1,186 +1,186 @@
-<template>
-  <div class="diagram-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.networksWithPositions.length"
-        :main-rect-height="props.mainRectHeight"
-        :main-switch-line="props.mainSwitchLine"
-        :selected-main-line="props.selectedMainLine"
-        :is-visible-line="hasActiveAdapter"
-      />
-      <common-diagram-main-adapter
-        :networks-count="props.networksWithPositions.length"
-        :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"
-        @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"
-            @toggle-ports="onTogglePorts"
-            @select-port="onSelectPort"
-            @select-network="onSelectNetwork"
-            @show-modal="onShowModal"
-          />
-        </template>
-      </template>
-      <common-diagram-main-network-no-network v-else />
-      <common-diagram-main-switch-selected
-        :selected-switch-line-y="props.selectedSwitchLineY"
-        :is-visible-line="hasActiveAdapter"
-      />
-    </svg>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_Adapter,
-  UI_I_AdaptersWithPositions,
-  UI_I_DiagramDataFull,
-  UI_I_ModalsInitialData,
-  UI_I_NetworksWithPositions,
-  UI_I_SelectedAdapter,
-  UI_I_SelectedPort,
-  UI_I_SwitchLine,
-} from '~/components/common/diagramMain/models/interfaces'
-import { UI_E_PositionsY } from '~/components/common/diagramMain/models/enums'
-
-const props = defineProps<{
-  diagramData: UI_I_DiagramDataFull | null
-  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
-}>()
-
-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
-}>()
-
-const svgClasses = computed(() => ({
-  'diagram-margin-top': !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 750 1' : `0 0 740 ${svgHeight.value}`
-)
-
-const diagramHeight = computed<number>(() =>
-  props.inPortlet ? svgHeight.value / 1.35 : svgHeight.value
-)
-
-const diagramWidth = computed<number>(() => (props.inPortlet ? 560 : 740))
-
-const hasActiveAdapter = computed<boolean>(() => {
-  return !!props.diagramData?.physicalAdapters?.adapters.filter(
-    (adapter: UI_I_Adapter) => {
-      return adapter.status === 'active'
-    }
-  ).length
-})
-
-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;
-  }
-  &-margin-top {
-    margin-top: 10px;
-  }
-}
-</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">
+    <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.networksWithPositions.length"
+        :main-rect-height="props.mainRectHeight"
+        :main-switch-line="props.mainSwitchLine"
+        :selected-main-line="props.selectedMainLine"
+        :is-visible-line="hasActiveAdapter"
+      />
+      <common-diagram-main-adapter
+        :networks-count="props.networksWithPositions.length"
+        :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"
+        @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"
+            @toggle-ports="onTogglePorts"
+            @select-port="onSelectPort"
+            @select-network="onSelectNetwork"
+            @show-modal="onShowModal"
+          />
+        </template>
+      </template>
+      <common-diagram-main-network-no-network v-else />
+      <common-diagram-main-switch-selected
+        :selected-switch-line-y="props.selectedSwitchLineY"
+        :is-visible-line="hasActiveAdapter"
+      />
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_Adapter,
+  UI_I_AdaptersWithPositions,
+  UI_I_DiagramDataFull,
+  UI_I_ModalsInitialData,
+  UI_I_NetworksWithPositions,
+  UI_I_SelectedAdapter,
+  UI_I_SelectedPort,
+  UI_I_SwitchLine,
+} from '~/components/common/diagramMain/models/interfaces'
+import { UI_E_PositionsY } from '~/components/common/diagramMain/models/enums'
+
+const props = defineProps<{
+  diagramData: UI_I_DiagramDataFull | null
+  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
+}>()
+
+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
+}>()
+
+const svgClasses = computed(() => ({
+  'diagram-margin-top': !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 750 1' : `0 0 740 ${svgHeight.value}`
+)
+
+const diagramHeight = computed<number>(() =>
+  props.inPortlet ? svgHeight.value / 1.35 : svgHeight.value
+)
+
+const diagramWidth = computed<number>(() => (props.inPortlet ? 560 : 740))
+
+const hasActiveAdapter = computed<boolean>(() => {
+  return !!props.diagramData?.physicalAdapters?.adapters.filter(
+    (adapter: UI_I_Adapter) => {
+      return adapter.status === 'active'
+    }
+  ).length
+})
+
+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;
+  }
+  &-margin-top {
+    margin-top: 10px;
+  }
+}
+</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>