bfg-common 1.6.65 → 1.6.67

package/components/common/diagramMain/port/Ports.vue

@@ -1,47 +1,47 @@
-<template>
-  <g>
-    <template v-if="props.network.toggle">
-      <template v-for="port in props.network.ports" :key="port.id">
-        <common-diagram-main-port
-          :network="props.network"
-          :port="port"
-          :is-dark-mode="props.isDarkMode"
-          :selected-port="props.selectedPort"
-          :selected-adapter="props.selectedAdapter"
-          @select-port="onSelectPort"
-          @show-modal="onShowModal"
-        />
-      </template>
-    </template>
-  </g>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_ModalsInitialData,
-  UI_I_NetworkFullWithPositions,
-  UI_I_SelectedAdapter,
-  UI_I_SelectedPort,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-const props = defineProps<{
-  network: UI_I_NetworkFullWithPositions
-  selectedPort: UI_I_SelectedPort
-  selectedAdapter: UI_I_SelectedAdapter
-  isDarkMode: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-port', networkId: string, portId: string): void
-  (
-    event: 'show-modal',
-    value: string,
-    properties?: UI_I_ModalsInitialData
-  ): void
-}>()
-
-const onSelectPort = (networkId: string, portId: string) =>
-  emits('select-port', networkId, portId)
-const onShowModal = (value: string, properties?: UI_I_ModalsInitialData) =>
-  emits('show-modal', value, properties)
-</script>
+<template>
+  <g>
+    <template v-if="props.network.toggle">
+      <template v-for="port in props.network.ports" :key="port.id">
+        <common-diagram-main-port
+          :network="props.network"
+          :port="port"
+          :is-dark-mode="props.isDarkMode"
+          :selected-port="props.selectedPort"
+          :selected-adapter="props.selectedAdapter"
+          @select-port="onSelectPort"
+          @show-modal="onShowModal"
+        />
+      </template>
+    </template>
+  </g>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_ModalsInitialData,
+  UI_I_NetworkFullWithPositions,
+  UI_I_SelectedAdapter,
+  UI_I_SelectedPort,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+const props = defineProps<{
+  network: UI_I_NetworkFullWithPositions
+  selectedPort: UI_I_SelectedPort
+  selectedAdapter: UI_I_SelectedAdapter
+  isDarkMode: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-port', networkId: string, portId: string): void
+  (
+    event: 'show-modal',
+    value: string,
+    properties?: UI_I_ModalsInitialData
+  ): void
+}>()
+
+const onSelectPort = (networkId: string, portId: string) =>
+  emits('select-port', networkId, portId)
+const onShowModal = (value: string, properties?: UI_I_ModalsInitialData) =>
+  emits('show-modal', value, properties)
+</script>

package/components/common/diagramMain/switch/Switch.vue

@@ -1,180 +1,180 @@
-<template>
-  <g>
-    <rect
-      :width="positions.rw"
-      :height="props.mainRectHeight"
-      :x="positions.rx"
-      :y="UI_E_PositionsY.DIAGRAM_TOP"
-      :rx="positions.radius"
-      :ry="positions.radius"
-      shape-rendering="geometricprecision"
-      class="central-panel"
-    />
-    <g
-      v-if="props.isVisibleLine && !!props.networksCount"
-      data-title="switch-main-lines"
-    >
-      <g v-if="isNewView">
-        <path :d="d1" class="connection-line" />
-        <path :d="d2" class="connection-line" />
-      </g>
-      <line
-        v-else
-        :x1="positions.lx"
-        :y1="props.mainSwitchLine.y1"
-        :x2="positions.lx"
-        :y2="props.mainSwitchLine.y2"
-        shape-rendering="geometricprecision"
-        class="connection-line"
-      />
-      <common-diagram-main-highlights
-        data-title="switch-selected-main-line"
-        type="line-vertical-orange"
-        :d1="d1"
-        :d2="d2"
-        :x="positions.lx"
-        :y="props.mainSwitchLine.y1"
-        :x2="positions.lx"
-        :y2="props.mainSwitchLine.y2"
-        :hide="!props.selectedMainLine"
-      />
-      <g v-if="isNewView">
-        <path :d="d1" class="invisible-line main-line__handler" />
-        <path :d="d2" class="invisible-line main-line__handler" />
-      </g>
-      <line
-        v-else
-        :x1="positions.lx"
-        :y1="props.mainSwitchLine.y1"
-        :x2="positions.lx"
-        :y2="props.mainSwitchLine.y2"
-        shape-rendering="geometricprecision"
-        class="invisible-line main-line__handler"
-      />
-    </g>
-  </g>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_ArbitraryObject } from '~/lib/models/interfaces'
-import type {
-  UI_I_SwitchLine,
-  UI_I_NetworksWithPositions,
-  UI_I_FirstAndLastNetworkLinesY,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import { UI_E_PositionsY } from '~/components/common/diagramMain/lib/models/enums'
-import { switchPositionsFunc } from '~/components/common/diagramMain/lib/config'
-
-const props = defineProps<{
-  mainRectHeight: number
-  mainSwitchLine: UI_I_SwitchLine
-  selectedMainLine: boolean
-  isVisibleLine: boolean
-  networksCount: number
-  firstAndLastNetworkLinesY: UI_I_FirstAndLastNetworkLinesY
-  adapterLineY: number
-  networksWithPositions: UI_I_NetworksWithPositions[]
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const positions = computed<UI_I_ArbitraryObject<number>>(() =>
-  switchPositionsFunc(isNewView.value)
-)
-
-const height = computed<number>(() =>
-  Math.abs(
-    Math.abs(props.mainSwitchLine.y1) - Math.abs(props.mainSwitchLine.y2)
-  )
-)
-
-const difference1 = computed<number>(() =>
-  Math.abs(props.firstAndLastNetworkLinesY.lastNetworkY - props.adapterLineY)
-)
-
-const difference2 = computed<number>(() =>
-  Math.abs(props.adapterLineY - props.firstAndLastNetworkLinesY.firstNetworkY)
-)
-
-const radius1 = computed<number>(() =>
-  difference1.value < 4 ? difference1.value / 2 : 2
-)
-const radius2 = computed<number>(() =>
-  difference2.value < 4 ? difference2.value / 2 : 2
-)
-const radius = computed<number>(() =>
-  firstLineIsNetwork.value ? radius2.value : radius1.value
-)
-
-const firstLineIsNetwork = computed<boolean>(
-  () => props.firstAndLastNetworkLinesY.firstNetworkY < props.adapterLineY
-)
-
-const isNetworkHigherThenAdapter = computed<boolean>(
-  () =>
-    props.firstAndLastNetworkLinesY.firstNetworkY ===
-      props.firstAndLastNetworkLinesY.lastNetworkY && firstLineIsNetwork.value
-)
-
-const d1 = computed<string>(
-  () =>
-    `M ${positions.value.lx} ${props.mainSwitchLine.y2 - radius.value}  l 0 -${
-      height.value - 2 * radius.value
-    } q 0,-${radius.value} ${firstLineIsNetwork.value ? '-2' : '2'},-${
-      radius.value
-    }`
-)
-
-const d2 = computed<string>(
-  () =>
-    `M ${positions.value.lx} ${props.mainSwitchLine.y1 + radius1.value} l 0 ${
-      height.value - 2 * radius1.value
-    } q 0,${radius1.value} ${isNetworkHigherThenAdapter.value ? '2' : '-2'},${
-      radius1.value
-    }`
-)
-</script>
-
-<style scoped lang="scss">
-:root.dark-theme {
-  .central-panel {
-    fill: #314351;
-    stroke: #adbbc4;
-  }
-
-  .connection-line {
-    stroke: #adbbc4;
-    fill: none;
-  }
-}
-
-:root.is-new-view {
-  .connection-line {
-    stroke: var(--diagram-connect-line);
-  }
-
-  .central-panel {
-    fill: var(--diagram-central-panel-bg);
-    stroke: var(--diagram-block-stroke);
-  }
-}
-
-.central-panel {
-  fill: #f2f2f2;
-  stroke: #888;
-}
-
-.invisible-line {
-  cursor: pointer;
-  stroke: #000;
-  stroke-opacity: 0;
-  stroke-width: 10px;
-  fill: none;
-}
-.connection-line {
-  stroke: #888;
-  fill: none;
-}
-</style>
+<template>
+  <g>
+    <rect
+      :width="positions.rw"
+      :height="props.mainRectHeight"
+      :x="positions.rx"
+      :y="UI_E_PositionsY.DIAGRAM_TOP"
+      :rx="positions.radius"
+      :ry="positions.radius"
+      shape-rendering="geometricprecision"
+      class="central-panel"
+    />
+    <g
+      v-if="props.isVisibleLine && !!props.networksCount"
+      data-title="switch-main-lines"
+    >
+      <g v-if="isNewView">
+        <path :d="d1" class="connection-line" />
+        <path :d="d2" class="connection-line" />
+      </g>
+      <line
+        v-else
+        :x1="positions.lx"
+        :y1="props.mainSwitchLine.y1"
+        :x2="positions.lx"
+        :y2="props.mainSwitchLine.y2"
+        shape-rendering="geometricprecision"
+        class="connection-line"
+      />
+      <common-diagram-main-highlights
+        data-title="switch-selected-main-line"
+        type="line-vertical-orange"
+        :d1="d1"
+        :d2="d2"
+        :x="positions.lx"
+        :y="props.mainSwitchLine.y1"
+        :x2="positions.lx"
+        :y2="props.mainSwitchLine.y2"
+        :hide="!props.selectedMainLine"
+      />
+      <g v-if="isNewView">
+        <path :d="d1" class="invisible-line main-line__handler" />
+        <path :d="d2" class="invisible-line main-line__handler" />
+      </g>
+      <line
+        v-else
+        :x1="positions.lx"
+        :y1="props.mainSwitchLine.y1"
+        :x2="positions.lx"
+        :y2="props.mainSwitchLine.y2"
+        shape-rendering="geometricprecision"
+        class="invisible-line main-line__handler"
+      />
+    </g>
+  </g>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ArbitraryObject } from '~/lib/models/interfaces'
+import type {
+  UI_I_SwitchLine,
+  UI_I_NetworksWithPositions,
+  UI_I_FirstAndLastNetworkLinesY,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+import { UI_E_PositionsY } from '~/components/common/diagramMain/lib/models/enums'
+import { switchPositionsFunc } from '~/components/common/diagramMain/lib/config'
+
+const props = defineProps<{
+  mainRectHeight: number
+  mainSwitchLine: UI_I_SwitchLine
+  selectedMainLine: boolean
+  isVisibleLine: boolean
+  networksCount: number
+  firstAndLastNetworkLinesY: UI_I_FirstAndLastNetworkLinesY
+  adapterLineY: number
+  networksWithPositions: UI_I_NetworksWithPositions[]
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const positions = computed<UI_I_ArbitraryObject<number>>(() =>
+  switchPositionsFunc(isNewView.value)
+)
+
+const height = computed<number>(() =>
+  Math.abs(
+    Math.abs(props.mainSwitchLine.y1) - Math.abs(props.mainSwitchLine.y2)
+  )
+)
+
+const difference1 = computed<number>(() =>
+  Math.abs(props.firstAndLastNetworkLinesY.lastNetworkY - props.adapterLineY)
+)
+
+const difference2 = computed<number>(() =>
+  Math.abs(props.adapterLineY - props.firstAndLastNetworkLinesY.firstNetworkY)
+)
+
+const radius1 = computed<number>(() =>
+  difference1.value < 4 ? difference1.value / 2 : 2
+)
+const radius2 = computed<number>(() =>
+  difference2.value < 4 ? difference2.value / 2 : 2
+)
+const radius = computed<number>(() =>
+  firstLineIsNetwork.value ? radius2.value : radius1.value
+)
+
+const firstLineIsNetwork = computed<boolean>(
+  () => props.firstAndLastNetworkLinesY.firstNetworkY < props.adapterLineY
+)
+
+const isNetworkHigherThenAdapter = computed<boolean>(
+  () =>
+    props.firstAndLastNetworkLinesY.firstNetworkY ===
+      props.firstAndLastNetworkLinesY.lastNetworkY && firstLineIsNetwork.value
+)
+
+const d1 = computed<string>(
+  () =>
+    `M ${positions.value.lx} ${props.mainSwitchLine.y2 - radius.value}  l 0 -${
+      height.value - 2 * radius.value
+    } q 0,-${radius.value} ${firstLineIsNetwork.value ? '-2' : '2'},-${
+      radius.value
+    }`
+)
+
+const d2 = computed<string>(
+  () =>
+    `M ${positions.value.lx} ${props.mainSwitchLine.y1 + radius1.value} l 0 ${
+      height.value - 2 * radius1.value
+    } q 0,${radius1.value} ${isNetworkHigherThenAdapter.value ? '2' : '-2'},${
+      radius1.value
+    }`
+)
+</script>
+
+<style scoped lang="scss">
+:root.dark-theme {
+  .central-panel {
+    fill: #314351;
+    stroke: #adbbc4;
+  }
+
+  .connection-line {
+    stroke: #adbbc4;
+    fill: none;
+  }
+}
+
+:root.is-new-view {
+  .connection-line {
+    stroke: var(--diagram-connect-line);
+  }
+
+  .central-panel {
+    fill: var(--diagram-central-panel-bg);
+    stroke: var(--diagram-block-stroke);
+  }
+}
+
+.central-panel {
+  fill: #f2f2f2;
+  stroke: #888;
+}
+
+.invisible-line {
+  cursor: pointer;
+  stroke: #000;
+  stroke-opacity: 0;
+  stroke-width: 10px;
+  fill: none;
+}
+.connection-line {
+  stroke: #888;
+  fill: none;
+}
+</style>

package/components/common/diagramMain/switch/SwitchSelected.vue

@@ -1,111 +1,111 @@
-<template>
-  <g v-if="props.isVisibleLine">
-    <g v-if="isNewView && inNetworkLinesY.length > 0">
-      <path :d="d1" class="selection-line" />
-      <path :d="d2" class="selection-line" />
-    </g>
-    <line
-      v-if="!isNewView"
-      x1="362.5"
-      :y1="props.selectedSwitchLineY.y1"
-      x2="362.5"
-      :y2="props.selectedSwitchLineY.y2"
-      shape-rendering="geometricprecision"
-      stroke-width="2"
-      class="selection-line"
-    />
-  </g>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_SwitchLine } from '~/components/common/diagramMain/lib/models/interfaces'
-
-const props = defineProps<{
-  selectedSwitchLineY: UI_I_SwitchLine
-  isVisibleLine: boolean
-  adaptersPositionsY: number[]
-  adapterLineY: number
-  isHighlightedAdapterLine: boolean
-  inNetworkLinesY: number[]
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const firstAdapterY = computed<number>(() =>
-  props.isHighlightedAdapterLine
-    ? props.adapterLineY
-    : props.adaptersPositionsY[0] + 7.5
-)
-const lastAdapterY = computed<number>(() =>
-  props.isHighlightedAdapterLine
-    ? props.adapterLineY
-    : props.adaptersPositionsY[props.adaptersPositionsY.length - 1] + 7.5
-)
-
-const height = computed<number>(() =>
-  Math.abs(
-    Math.abs(props.selectedSwitchLineY.y1) -
-      Math.abs(props.selectedSwitchLineY.y2)
-  )
-)
-
-const firstLineIsNetwork = computed<boolean>(
-  () => props.selectedSwitchLineY.y1 < firstAdapterY.value
-)
-
-const isNetworkHigherThenAdapter = computed<boolean>(
-  () =>
-    props.inNetworkLinesY[props.inNetworkLinesY.length - 1] < lastAdapterY.value
-)
-
-const difference1 = computed<number>(() =>
-  Math.abs(
-    props.inNetworkLinesY[props.inNetworkLinesY.length - 1] -
-      firstAdapterY.value
-  )
-)
-
-const difference2 = computed<number>(() =>
-  Math.abs(lastAdapterY.value - props.inNetworkLinesY[0])
-)
-
-const radius1 = computed<number>(() => (difference1.value < 4 ? difference1.value / 2 : 2))
-const radius2 = computed<number>(() => (difference2.value < 4 ? difference2.value / 2 : 2))
-
-const d1 = computed<string>(
-  () =>
-    `M 362.5 ${props.selectedSwitchLineY.y2 - radius1.value}  l 0 -${
-      height.value - 2 * radius1.value
-    } q 0,-${radius1.value} ${firstLineIsNetwork.value ? '-2' : '2'},-${radius1.value}`
-)
-
-const d2 = computed<string>(
-  () =>
-    `M 362.5 ${props.selectedSwitchLineY.y1 + radius2.value} l 0 ${
-      height.value - 2 * radius2.value
-    } q 0,${radius2.value} ${isNetworkHigherThenAdapter.value ? '2' : '-2'},${
-      radius2.value
-    }`
-)
-</script>
-
-<style scoped lang="scss">
-:root.dark-theme {
-  .selection-line {
-    stroke: #fdd006;
-  }
-}
-:root.is-new-view {
-  .selection-line {
-    stroke: var(--diagram-highlight-line);
-    fill: none;
-    stroke-width: 1.5px;
-  }
-}
-
-.selection-line {
-  stroke: #f3bb00;
-}
-</style>
+<template>
+  <g v-if="props.isVisibleLine">
+    <g v-if="isNewView && inNetworkLinesY.length > 0">
+      <path :d="d1" class="selection-line" />
+      <path :d="d2" class="selection-line" />
+    </g>
+    <line
+      v-if="!isNewView"
+      x1="362.5"
+      :y1="props.selectedSwitchLineY.y1"
+      x2="362.5"
+      :y2="props.selectedSwitchLineY.y2"
+      shape-rendering="geometricprecision"
+      stroke-width="2"
+      class="selection-line"
+    />
+  </g>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_SwitchLine } from '~/components/common/diagramMain/lib/models/interfaces'
+
+const props = defineProps<{
+  selectedSwitchLineY: UI_I_SwitchLine
+  isVisibleLine: boolean
+  adaptersPositionsY: number[]
+  adapterLineY: number
+  isHighlightedAdapterLine: boolean
+  inNetworkLinesY: number[]
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const firstAdapterY = computed<number>(() =>
+  props.isHighlightedAdapterLine
+    ? props.adapterLineY
+    : props.adaptersPositionsY[0] + 7.5
+)
+const lastAdapterY = computed<number>(() =>
+  props.isHighlightedAdapterLine
+    ? props.adapterLineY
+    : props.adaptersPositionsY[props.adaptersPositionsY.length - 1] + 7.5
+)
+
+const height = computed<number>(() =>
+  Math.abs(
+    Math.abs(props.selectedSwitchLineY.y1) -
+      Math.abs(props.selectedSwitchLineY.y2)
+  )
+)
+
+const firstLineIsNetwork = computed<boolean>(
+  () => props.selectedSwitchLineY.y1 < firstAdapterY.value
+)
+
+const isNetworkHigherThenAdapter = computed<boolean>(
+  () =>
+    props.inNetworkLinesY[props.inNetworkLinesY.length - 1] < lastAdapterY.value
+)
+
+const difference1 = computed<number>(() =>
+  Math.abs(
+    props.inNetworkLinesY[props.inNetworkLinesY.length - 1] -
+      firstAdapterY.value
+  )
+)
+
+const difference2 = computed<number>(() =>
+  Math.abs(lastAdapterY.value - props.inNetworkLinesY[0])
+)
+
+const radius1 = computed<number>(() => (difference1.value < 4 ? difference1.value / 2 : 2))
+const radius2 = computed<number>(() => (difference2.value < 4 ? difference2.value / 2 : 2))
+
+const d1 = computed<string>(
+  () =>
+    `M 362.5 ${props.selectedSwitchLineY.y2 - radius1.value}  l 0 -${
+      height.value - 2 * radius1.value
+    } q 0,-${radius1.value} ${firstLineIsNetwork.value ? '-2' : '2'},-${radius1.value}`
+)
+
+const d2 = computed<string>(
+  () =>
+    `M 362.5 ${props.selectedSwitchLineY.y1 + radius2.value} l 0 ${
+      height.value - 2 * radius2.value
+    } q 0,${radius2.value} ${isNetworkHigherThenAdapter.value ? '2' : '-2'},${
+      radius2.value
+    }`
+)
+</script>
+
+<style scoped lang="scss">
+:root.dark-theme {
+  .selection-line {
+    stroke: #fdd006;
+  }
+}
+:root.is-new-view {
+  .selection-line {
+    stroke: var(--diagram-highlight-line);
+    fill: none;
+    stroke-width: 1.5px;
+  }
+}
+
+.selection-line {
+  stroke: #f3bb00;
+}
+</style>