bfg-common 1.6.64 → 1.6.66

package/components/common/diagramMain/highlights/Highlights.vue

@@ -1,151 +1,151 @@
-<template>
-  <common-diagram-main-highlights-new
-    v-if="isNewView"
-    :main-classes="mainClasses"
-    :second-classes="secondClasses"
-    :line-classes="lineClasses"
-    :is-main="isMain"
-    :is-second="isSecond"
-    :is-line="isLine"
-    :is-vertical-line="isVerticalLine"
-    :data-title="props.dataTitle"
-    :width="props.width"
-    :height="props.height"
-    :x="props.x"
-    :y="props.y"
-    :x2="props.x2"
-    :y2="props.y2"
-    :d1="props.d1"
-    :d2="props.d2"
-    :radius="props.radius"
-    :is-network-block="props.isNetworkBlock"
-    :is-adapter-block="props.isAdapterBlock"
-  />
-  <common-diagram-main-highlights-old
-    v-else
-    :main-classes="mainClasses"
-    :second-classes="secondClasses"
-    :line-classes="lineClasses"
-    :is-main="isMain"
-    :is-second="isSecond"
-    :is-line="isLine"
-    :data-title="props.dataTitle"
-    :width="props.width"
-    :height="props.height"
-    :x="props.x"
-    :y="props.y"
-    :x2="props.x2"
-    :y2="props.y2"
-    :d="props.d"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_I_ArbitraryObject } from '~/lib/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    dataTitle?: string
-    type: string
-    height?: number | string | undefined
-    width?: number | string | undefined
-    x?: number | string | undefined
-    y?: number | string | undefined
-    x2?: number | string | undefined
-    y2?: number | string | undefined
-    d?: string
-    d1?: string
-    d2?: string
-    hide?: boolean
-    radius?: string,
-    isNetworkBlock?: boolean
-    isAdapterBlock?: boolean
-  }>(),
-  {
-    dataTitle: '',
-    width: undefined,
-    height: undefined,
-    x: undefined,
-    y: undefined,
-    x2: undefined,
-    y2: undefined,
-    d: '',
-    d1: '',
-    d2: '',
-    hide: true,
-    radius: '3',
-    isNetworkBlock: false,
-    isAdapterBlock: false,
-  }
-)
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const isMain = computed<boolean>(() => props.type.includes('main'))
-const isSecond = computed<boolean>(() => props.type.includes('second'))
-const isLine = computed<boolean>(() => props.type.includes('line'))
-const isVerticalLine = computed<boolean>(
-  () => isLine.value && props.type.includes('vertical')
-)
-
-const mainClasses = computed<UI_I_ArbitraryObject<boolean>>(() => ({
-  'highlight highlight-stroke': props.type === 'main-orange',
-  'selection selection-stroke': props.type === 'main-blue',
-  'highlight-hide': props.hide,
-}))
-
-const secondClasses = computed<UI_I_ArbitraryObject<boolean>>(() => ({
-  'highlight highlight-stroke': props.type === 'second-orange',
-  'selection selection-stroke': props.type === 'second-blue',
-  'highlight-hide': props.hide,
-}))
-
-const lineClasses = computed<UI_I_ArbitraryObject<boolean>>(() => ({
-  'highlight-hide': props.hide,
-}))
-</script>
-
-<style scoped lang="scss">
-:root.dark-theme {
-  .selection-stroke {
-    stroke: #0f6082;
-    fill: #0f6082;
-  }
-  .selection-line {
-    stroke: #fdd006;
-  }
-
-  .highlight {
-    fill: #7f6509;
-
-    &-stroke {
-      stroke: #7f6509;
-    }
-    &-hide {
-      stroke-opacity: 0;
-      fill: transparent;
-    }
-  }
-}
-
-.selection-stroke {
-  stroke: #0079b8;
-  fill: #f3f6fa;
-}
-.selection-line {
-  stroke: #f3bb00;
-}
-.highlight {
-  fill: #fffce8;
-
-  &-stroke {
-    stroke: #f3bb00;
-  }
-  &-hide {
-    stroke-opacity: 0;
-    fill: transparent;
-  }
-}
-</style>
+<template>
+  <common-diagram-main-highlights-new
+    v-if="isNewView"
+    :main-classes="mainClasses"
+    :second-classes="secondClasses"
+    :line-classes="lineClasses"
+    :is-main="isMain"
+    :is-second="isSecond"
+    :is-line="isLine"
+    :is-vertical-line="isVerticalLine"
+    :data-title="props.dataTitle"
+    :width="props.width"
+    :height="props.height"
+    :x="props.x"
+    :y="props.y"
+    :x2="props.x2"
+    :y2="props.y2"
+    :d1="props.d1"
+    :d2="props.d2"
+    :radius="props.radius"
+    :is-network-block="props.isNetworkBlock"
+    :is-adapter-block="props.isAdapterBlock"
+  />
+  <common-diagram-main-highlights-old
+    v-else
+    :main-classes="mainClasses"
+    :second-classes="secondClasses"
+    :line-classes="lineClasses"
+    :is-main="isMain"
+    :is-second="isSecond"
+    :is-line="isLine"
+    :data-title="props.dataTitle"
+    :width="props.width"
+    :height="props.height"
+    :x="props.x"
+    :y="props.y"
+    :x2="props.x2"
+    :y2="props.y2"
+    :d="props.d"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ArbitraryObject } from '~/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    dataTitle?: string
+    type: string
+    height?: number | string | undefined
+    width?: number | string | undefined
+    x?: number | string | undefined
+    y?: number | string | undefined
+    x2?: number | string | undefined
+    y2?: number | string | undefined
+    d?: string
+    d1?: string
+    d2?: string
+    hide?: boolean
+    radius?: string,
+    isNetworkBlock?: boolean
+    isAdapterBlock?: boolean
+  }>(),
+  {
+    dataTitle: '',
+    width: undefined,
+    height: undefined,
+    x: undefined,
+    y: undefined,
+    x2: undefined,
+    y2: undefined,
+    d: '',
+    d1: '',
+    d2: '',
+    hide: true,
+    radius: '3',
+    isNetworkBlock: false,
+    isAdapterBlock: false,
+  }
+)
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const isMain = computed<boolean>(() => props.type.includes('main'))
+const isSecond = computed<boolean>(() => props.type.includes('second'))
+const isLine = computed<boolean>(() => props.type.includes('line'))
+const isVerticalLine = computed<boolean>(
+  () => isLine.value && props.type.includes('vertical')
+)
+
+const mainClasses = computed<UI_I_ArbitraryObject<boolean>>(() => ({
+  'highlight highlight-stroke': props.type === 'main-orange',
+  'selection selection-stroke': props.type === 'main-blue',
+  'highlight-hide': props.hide,
+}))
+
+const secondClasses = computed<UI_I_ArbitraryObject<boolean>>(() => ({
+  'highlight highlight-stroke': props.type === 'second-orange',
+  'selection selection-stroke': props.type === 'second-blue',
+  'highlight-hide': props.hide,
+}))
+
+const lineClasses = computed<UI_I_ArbitraryObject<boolean>>(() => ({
+  'highlight-hide': props.hide,
+}))
+</script>
+
+<style scoped lang="scss">
+:root.dark-theme {
+  .selection-stroke {
+    stroke: #0f6082;
+    fill: #0f6082;
+  }
+  .selection-line {
+    stroke: #fdd006;
+  }
+
+  .highlight {
+    fill: #7f6509;
+
+    &-stroke {
+      stroke: #7f6509;
+    }
+    &-hide {
+      stroke-opacity: 0;
+      fill: transparent;
+    }
+  }
+}
+
+.selection-stroke {
+  stroke: #0079b8;
+  fill: #f3f6fa;
+}
+.selection-line {
+  stroke: #f3bb00;
+}
+.highlight {
+  fill: #fffce8;
+
+  &-stroke {
+    stroke: #f3bb00;
+  }
+  &-hide {
+    stroke-opacity: 0;
+    fill: transparent;
+  }
+}
+</style>

package/components/common/diagramMain/highlights/HighlightsNew.vue

@@ -1,124 +1,124 @@
-<template>
-  <g v-if="props.isMain" :data-title="`${props.dataTitle}-main`">
-    <rect
-      :width="props.width"
-      :height="props.height"
-      :x="props.x"
-      :y="props.y"
-      :rx="props.radius"
-      :ry="props.radius"
-      shape-rendering="geometricprecision"
-      :class="props.mainClasses"
-    />
-    <polyline
-      v-if="props.isNetworkBlock"
-      :points="`284.5,${props.y} 294.5,${props.y} 294.5,${bottomPoint} 284.5,${bottomPoint}`"
-      :class="props.mainClasses"
-    />
-    <polyline
-      v-if="props.isAdapterBlock"
-      :points="`440.5,17.5 430.5,17.5 430.5,${bottomPoint} 440.5,${bottomPoint}`"
-      :class="props.mainClasses"
-    />
-  </g>
-  <g v-if="props.isSecond" :data-title="`${props.dataTitle}-second`">
-    <rect
-      width="28"
-      :height="props.height"
-      :x="props.x"
-      :y="props.y"
-      rx="6"
-      ry="6"
-      shape-rendering="geometricprecision"
-      :class="props.secondClasses"
-    />
-    <polyline
-      v-if="props.isNetworkBlock"
-      :points="`320.5,${props.y} 310.5,${props.y} 310.5,${bottomPoint} 320.5,${bottomPoint}`"
-      :class="props.secondClasses"
-    />
-    <polyline
-      v-if="props.isAdapterBlock"
-      :points="`404.5,${props.y} 414.5,${props.y} 414.5,${bottomPoint} 404.5,${bottomPoint}`"
-      :class="props.secondClasses"
-    />
-  </g>
-  <g v-if="props.isLine" :data-title="`${props.dataTitle}-line`">
-    <line
-      :x1="props.x"
-      :y1="props.y"
-      :x2="props.x2"
-      :y2="props.y2"
-      shape-rendering="geometricprecision"
-      stroke-width="1.5"
-      :class="['selection-line', props.lineClasses]"
-    />
-  </g>
-  <g v-if="props.isVerticalLine" :data-title="`${props.dataTitle}-vertical-line`">
-    <path :d="props.d1" :class="['selection-line', props.lineClasses]" />
-    <path :d="props.d2" :class="['selection-line', props.lineClasses]" />
-  </g>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_ArbitraryObject } from '~/lib/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    mainClasses: UI_I_ArbitraryObject<boolean>
-    secondClasses: UI_I_ArbitraryObject<boolean>
-    lineClasses: UI_I_ArbitraryObject<boolean>
-    isMain: boolean
-    isSecond: boolean
-    isLine: boolean
-    isVerticalLine: boolean
-    dataTitle: string
-    height?: number | string
-    width?: number | string
-    x?: number | string
-    y?: number | string
-    x2?: number | string
-    y2?: number | string
-    d1: string
-    d2: string
-    radius: string
-    isNetworkBlock: boolean
-    isAdapterBlock: boolean
-  }>(),
-  {
-    width: 288,
-    height: 18,
-    x: 6.5,
-    y: 20,
-    x2: 16.5,
-    y2: 20,
-  }
-)
-
-const bottomPoint = computed<number>(
-  () => Number(props.height) + Number(props.y)
-)
-</script>
-
-<style scoped lang="scss">
-.selection-stroke {
-  stroke: var(--diagram-selection-line);
-  fill: var(--diagram-selection-bg);
-}
-.selection-line {
-  stroke: var(--diagram-highlight-line);
-  fill: none;
-  stroke-width: 1.5px;
-}
-.highlight {
-  fill: var(--diagram-highlight-bg);
-
-  &-stroke {
-    stroke: var(--diagram-highlight-line);
-  }
-  &-hide {
-    stroke-opacity: 0;
-    fill: transparent;
-  }
-}
-</style>
+<template>
+  <g v-if="props.isMain" :data-title="`${props.dataTitle}-main`">
+    <rect
+      :width="props.width"
+      :height="props.height"
+      :x="props.x"
+      :y="props.y"
+      :rx="props.radius"
+      :ry="props.radius"
+      shape-rendering="geometricprecision"
+      :class="props.mainClasses"
+    />
+    <polyline
+      v-if="props.isNetworkBlock"
+      :points="`284.5,${props.y} 294.5,${props.y} 294.5,${bottomPoint} 284.5,${bottomPoint}`"
+      :class="props.mainClasses"
+    />
+    <polyline
+      v-if="props.isAdapterBlock"
+      :points="`440.5,17.5 430.5,17.5 430.5,${bottomPoint} 440.5,${bottomPoint}`"
+      :class="props.mainClasses"
+    />
+  </g>
+  <g v-if="props.isSecond" :data-title="`${props.dataTitle}-second`">
+    <rect
+      width="28"
+      :height="props.height"
+      :x="props.x"
+      :y="props.y"
+      rx="6"
+      ry="6"
+      shape-rendering="geometricprecision"
+      :class="props.secondClasses"
+    />
+    <polyline
+      v-if="props.isNetworkBlock"
+      :points="`320.5,${props.y} 310.5,${props.y} 310.5,${bottomPoint} 320.5,${bottomPoint}`"
+      :class="props.secondClasses"
+    />
+    <polyline
+      v-if="props.isAdapterBlock"
+      :points="`404.5,${props.y} 414.5,${props.y} 414.5,${bottomPoint} 404.5,${bottomPoint}`"
+      :class="props.secondClasses"
+    />
+  </g>
+  <g v-if="props.isLine" :data-title="`${props.dataTitle}-line`">
+    <line
+      :x1="props.x"
+      :y1="props.y"
+      :x2="props.x2"
+      :y2="props.y2"
+      shape-rendering="geometricprecision"
+      stroke-width="1.5"
+      :class="['selection-line', props.lineClasses]"
+    />
+  </g>
+  <g v-if="props.isVerticalLine" :data-title="`${props.dataTitle}-vertical-line`">
+    <path :d="props.d1" :class="['selection-line', props.lineClasses]" />
+    <path :d="props.d2" :class="['selection-line', props.lineClasses]" />
+  </g>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ArbitraryObject } from '~/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    mainClasses: UI_I_ArbitraryObject<boolean>
+    secondClasses: UI_I_ArbitraryObject<boolean>
+    lineClasses: UI_I_ArbitraryObject<boolean>
+    isMain: boolean
+    isSecond: boolean
+    isLine: boolean
+    isVerticalLine: boolean
+    dataTitle: string
+    height?: number | string
+    width?: number | string
+    x?: number | string
+    y?: number | string
+    x2?: number | string
+    y2?: number | string
+    d1: string
+    d2: string
+    radius: string
+    isNetworkBlock: boolean
+    isAdapterBlock: boolean
+  }>(),
+  {
+    width: 288,
+    height: 18,
+    x: 6.5,
+    y: 20,
+    x2: 16.5,
+    y2: 20,
+  }
+)
+
+const bottomPoint = computed<number>(
+  () => Number(props.height) + Number(props.y)
+)
+</script>
+
+<style scoped lang="scss">
+.selection-stroke {
+  stroke: var(--diagram-selection-line);
+  fill: var(--diagram-selection-bg);
+}
+.selection-line {
+  stroke: var(--diagram-highlight-line);
+  fill: none;
+  stroke-width: 1.5px;
+}
+.highlight {
+  fill: var(--diagram-highlight-bg);
+
+  &-stroke {
+    stroke: var(--diagram-highlight-line);
+  }
+  &-hide {
+    stroke-opacity: 0;
+    fill: transparent;
+  }
+}
+</style>