bfg-common 1.6.64 → 1.6.66

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/skeleton/Header.vue

@@ -1,31 +1,31 @@
-<template>
-  <div class="diagram-header-skeleton">
-    <div class="diagram-header-skeleton-title">
-      <ui-skeleton-item width="160" height="22" />
-    </div>
-    <div class="diagram-header-skeleton-buttons">
-      <ui-skeleton-item width="112" height="36" border-radius="8" />
-      <ui-skeleton-item width="160" height="36" border-radius="8" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped lang="scss">
-.diagram-header-skeleton {
-  padding: 16px;
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  row-gap: 24px;
-  column-gap: 24px;
-
-  &-buttons {
-    display: flex;
-    column-gap: 16px;
-    margin-left: auto;
-  }
-}
-</style>
+<template>
+  <div class="diagram-header-skeleton">
+    <div class="diagram-header-skeleton-title">
+      <ui-skeleton-item width="160" height="22" />
+    </div>
+    <div class="diagram-header-skeleton-buttons">
+      <ui-skeleton-item width="112" height="36" border-radius="8" />
+      <ui-skeleton-item width="160" height="36" border-radius="8" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.diagram-header-skeleton {
+  padding: 16px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  row-gap: 24px;
+  column-gap: 24px;
+
+  &-buttons {
+    display: flex;
+    column-gap: 16px;
+    margin-left: auto;
+  }
+}
+</style>

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

@@ -1,75 +1,75 @@
-<template>
-  <div class="diagram-skeleton">
-    <div class="diagram-skeleton-item-header">
-      <div class="diagram-skeleton-item-header-icon">
-        <ui-icon
-          class="diagram-skeleton-item-header-icon-arrow"
-          name="arrow"
-          width="20"
-          height="20"
-        />
-      </div>
-      <ui-skeleton-item width="160" height="20" />
-      <div class="diagram-skeleton-item-header-line"></div>
-      <ui-skeleton-item width="400" height="20" />
-    </div>
-    <div class="diagram-skeleton-container">
-      <ui-skeleton-switch width="712" />
-    </div>
-    <div class="diagram-skeleton-footer">
-      <ui-skeleton-item width="80" height="20" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped lang="scss">
-.diagram-skeleton {
-  margin: 0 16px 16px;
-  border-radius: 8px;
-  background: var(--diagram-container-bg);
-  box-shadow: 0 1px 4px 0 #00000014;
-  padding: 16px;
-  overflow-clip-margin: content-box;
-  overflow: clip;
-
-  &-item-header {
-    display: flex;
-    column-gap: 16px;
-
-    &-icon {
-      width: 20px;
-      height: 20px;
-      color: var(--select-arrow);
-
-      &-arrow {
-        transform: rotate(180deg);
-        margin-right: -4px;
-      }
-    }
-
-    &-line {
-      height: 20px;
-      border-left: 1px solid var(--horizontal-line);
-    }
-  }
-
-  &-container {
-    display: flex;
-    justify-content: center;
-    min-width: 759px;
-    padding: 48px 23.5px 24px 23.5px;
-
-    //:deep(svg) {
-    //  padding: 22px 14.5px;
-    //}
-  }
-
-  &-footer {
-    padding-top: 16px;
-    display: flex;
-    justify-content: flex-end;
-  }
-}
-</style>
+<template>
+  <div class="diagram-skeleton">
+    <div class="diagram-skeleton-item-header">
+      <div class="diagram-skeleton-item-header-icon">
+        <ui-icon
+          class="diagram-skeleton-item-header-icon-arrow"
+          name="arrow"
+          width="20"
+          height="20"
+        />
+      </div>
+      <ui-skeleton-item width="160" height="20" />
+      <div class="diagram-skeleton-item-header-line"></div>
+      <ui-skeleton-item width="400" height="20" />
+    </div>
+    <div class="diagram-skeleton-container">
+      <ui-skeleton-switch width="712" />
+    </div>
+    <div class="diagram-skeleton-footer">
+      <ui-skeleton-item width="80" height="20" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.diagram-skeleton {
+  margin: 0 16px 16px;
+  border-radius: 8px;
+  background: var(--diagram-container-bg);
+  box-shadow: 0 1px 4px 0 #00000014;
+  padding: 16px;
+  overflow-clip-margin: content-box;
+  overflow: clip;
+
+  &-item-header {
+    display: flex;
+    column-gap: 16px;
+
+    &-icon {
+      width: 20px;
+      height: 20px;
+      color: var(--select-arrow);
+
+      &-arrow {
+        transform: rotate(180deg);
+        margin-right: -4px;
+      }
+    }
+
+    &-line {
+      height: 20px;
+      border-left: 1px solid var(--horizontal-line);
+    }
+  }
+
+  &-container {
+    display: flex;
+    justify-content: center;
+    min-width: 759px;
+    padding: 48px 23.5px 24px 23.5px;
+
+    //:deep(svg) {
+    //  padding: 22px 14.5px;
+    //}
+  }
+
+  &-footer {
+    padding-top: 16px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>

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>