bfg-common 1.2.185 → 1.2.187

package/components/common/spiceConsole/keyboard/Keyboard.vue

@@ -1,402 +1,402 @@
-<template>
-  <div id="keyboard-draggable" ref="draggable" class="draggable" :style="style">
-    <div id="keyboard" class="keyboard">
-      <div
-        v-for="(row, rowIndex) in keyboardRowsUI"
-        :key="rowIndex"
-        class="row"
-      >
-        <div
-          v-for="(keyItem, keyIndex) in row"
-          :key="keyIndex"
-          :class="[
-            'key',
-            {
-              active: keyItem.active,
-            },
-          ]"
-          :style="{ width: keyItem.width }"
-          @click="onKeyPress(keyItem)"
-        >
-          <span>
-            {{ keyItem.keyUI }}
-          </span>
-          <span class="rus-key">
-            {{ keyItem.rusKeyUI }}
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useDraggable } from '@vueuse/core'
-import keyboardRows from '~/components/common/spiceConsole/keyboard/config/keyboardRows'
-import { I_KeyboardRowItem } from '~/components/common/spiceConsole/keyboard/models/interfaces'
-
-const draggable = ref<HTMLElement | null>(null)
-
-const { style } = useDraggable(draggable, {
-  initialValue: { x: 300, y: 370 },
-})
-
-// const emits = defineEmits<{
-//   (event: 'pressed-key', value: string): void
-// }>()
-//
-// const onValueEmit = (value: string): void => {
-//   emits('pressed-key', value)
-// }
-
-const isCapsLockOn = ref<boolean>(false)
-const isShiftPressed = ref<boolean>(false)
-const isCtrlPressed = ref<boolean>(false)
-const isWinPressed = ref<boolean>(false)
-const isAltPressed = ref<boolean>(false)
-
-const isCapsLockOnWithShift = computed<boolean>(
-  () => isCapsLockOn.value && isShiftPressed.value
-)
-
-const isCapsLockOnWithoutShift = computed<boolean>(
-  () => isCapsLockOn.value && !isShiftPressed.value
-)
-
-const isShiftPressedWithoutCapsLock = computed<boolean>(
-  () => !isCapsLockOn.value && isShiftPressed.value
-)
-
-const keyboardRowsUI = computed<I_KeyboardRowItem[][]>(() =>
-  keyboardRows.map((row: I_KeyboardRowItem[]) =>
-    row.map((keyItem: I_KeyboardRowItem) => {
-      let rusKeyUI = ''
-      let keyUI = ''
-
-      if (isCapsLockOnWithShift.value) {
-        rusKeyUI = keyItem.rusSecondaryValue || ''
-        keyUI = keyItem.secondaryValue
-      } else if (isCapsLockOnWithoutShift.value) {
-        rusKeyUI = keyItem.rusCapsLockValue || ''
-        keyUI = keyItem.capsLockValue
-      } else if (isShiftPressedWithoutCapsLock.value) {
-        rusKeyUI = keyItem.rusShiftValue || ''
-        keyUI = keyItem.shiftValue
-      } else {
-        rusKeyUI = keyItem.rusValue || ''
-        keyUI = keyItem.value
-      }
-
-      const active =
-        (isCapsLockOn.value && keyItem.key === 20) ||
-        (isShiftPressed.value && keyItem.key === 16) ||
-        (isCtrlPressed.value && keyItem.key === 17) ||
-        (isAltPressed.value && keyItem.key === 18) ||
-        (isWinPressed.value && keyItem.key === 92)
-
-      return {
-        ...keyItem,
-        keyUI,
-        rusKeyUI,
-        active,
-      }
-    })
-  )
-)
-
-const generateModifierEvent = (event: string, keyCode: number): void => {
-  window.app.clientGui.generateEvent(event, [{ type: event, keyCode }])
-}
-
-// Shift
-const takeOffShift = (): void => {
-  isShiftPressed.value = false
-  generateModifierEvent('keyup', 16)
-}
-
-const sendShiftPressed = (): void => {
-  generateModifierEvent('keydown', 16)
-}
-
-const takeOnShift = (): void => {
-  isShiftPressed.value = true
-}
-// Shift ----
-
-// Ctrl
-const takeOffCtrl = (): void => {
-  isCtrlPressed.value = false
-  window.app.clientGui.generateEvent('keyup', [
-    { type: 'keyup', keyCode: 17, generated: isCtrlPressed.value },
-  ])
-  wdi.Keymap.ctrlPressed = false
-}
-
-const sendCtrlPressed = (): void => {
-  window.app.clientGui.generateEvent('keydown', [
-    { type: 'keydown', keyCode: 17, generated: isCtrlPressed.value },
-  ])
-}
-
-const takeOnCtrl = (): void => {
-  wdi.Keymap.ctrlPressed = true
-  isCtrlPressed.value = true
-}
-// Ctrl ----
-
-// Win
-const takeOffWin = (): void => {
-  isWinPressed.value = false
-  generateModifierEvent('keyup', 92)
-}
-
-const sendWinPressed = (): void => {
-  generateModifierEvent('keydown', 92)
-}
-
-const takeOnWin = (): void => {
-  isWinPressed.value = true
-}
-// Win ----
-
-// Alt
-const takeOffAlt = (): void => {
-  isAltPressed.value = false
-  generateModifierEvent('keyup', 18)
-}
-
-const sendAltPressed = (): void => {
-  generateModifierEvent('keydown', 18)
-}
-
-const takeOnAlt = (): void => {
-  isAltPressed.value = true
-}
-// Alt ----
-
-const generateEvent = (
-  event: string,
-  key: I_KeyboardRowItem,
-  withOriginal: boolean,
-  type?: string
-): void => {
-  withOriginal
-    ? window.app.clientGui.generateEvent(event, [
-        {
-          type: type ? type : event,
-          keyCode: key.keyCode || -1,
-          generated: isCtrlPressed.value,
-          ctrlKey: isCtrlPressed.value,
-          originalEvent: { code: key.key },
-        },
-      ])
-    : window.app.clientGui.generateEvent(event, [
-        {
-          type: event,
-          keyCode: key.key,
-          generated: isCtrlPressed.value,
-          ctrlKey: isCtrlPressed.value,
-        },
-      ])
-}
-
-const keyEvent = (
-  event: string,
-  isCodeEvent: boolean,
-  key: I_KeyboardRowItem
-): void => {
-  if (isCodeEvent) {
-    if (event !== 'keyup') {
-      generateEvent(event, key, true)
-    } else if (event === 'keyup' && isCtrlPressed.value) {
-      generateEvent(event, key, true)
-      return
-    } else {
-      generateEvent(event, key, true, 'inputmanager')
-    }
-  } else {
-    generateEvent(event, key, false)
-  }
-}
-
-const checkAndSendModifiers = (): void => {
-  if (isShiftPressed.value) {
-    sendShiftPressed()
-  }
-  if (isAltPressed.value) {
-    sendAltPressed()
-  }
-  if (isCtrlPressed.value) {
-    sendCtrlPressed()
-  }
-  if (isWinPressed.value) {
-    sendWinPressed()
-  }
-}
-
-const checkAndOffModifiers = (): void => {
-  if (isWinPressed.value) {
-    takeOffWin()
-  }
-  if (isCtrlPressed.value) {
-    takeOffCtrl()
-  }
-  if (isAltPressed.value) {
-    takeOffAlt()
-  }
-  if (isShiftPressed.value) {
-    takeOffShift()
-  }
-}
-
-const onKeyPress = (key: I_KeyboardRowItem): void => {
-  window.app.inputProcess.clientGui.inputManager.input.val('')
-
-  document.getElementById('inputmanager')?.focus()
-
-  const isCodeEvent = typeof key.key === 'string'
-  if (isCodeEvent) {
-    checkAndSendModifiers()
-    keyEvent('keydown', isCodeEvent, key)
-    keyEvent('keypress', isCodeEvent, key)
-    keyEvent('keyup', isCodeEvent, key)
-
-    checkAndOffModifiers()
-    window.app.inputProcess.clientGui.inputManager.input.val('_')
-  } else {
-    if (key.key === 20) {
-      isCapsLockOn.value = !isCapsLockOn.value
-    }
-
-    if (key.key === 16 && isShiftPressed.value) {
-      takeOffShift()
-      return
-    } else if (key.key === 16 && !isShiftPressed.value) {
-      takeOnShift()
-    }
-
-    if (key.key === 18 && isAltPressed.value) {
-      takeOffAlt()
-      return
-    } else if (key.key === 18 && !isAltPressed.value) {
-      takeOnAlt()
-    }
-
-    if (key.key === 17 && isCtrlPressed.value) {
-      takeOffCtrl()
-      return
-    } else if (key.key === 17 && !isCtrlPressed.value) {
-      takeOnCtrl()
-    }
-
-    if (key.key === 92 && isWinPressed.value) {
-      takeOffWin()
-      return
-    } else if (key.key === 92 && !isWinPressed.value) {
-      takeOnWin()
-    }
-
-    keyEvent('keydown', isCodeEvent, key)
-
-    if (key.key !== 16 && key.key !== 17 && key.key !== 92 && key.key !== 18) {
-      keyEvent('keyup', isCodeEvent, key)
-
-      if (key.key !== 20) {
-        checkAndOffModifiers()
-      }
-    }
-  }
-}
-
-onMounted(() => {
-  window.wdi.Keymap.isVirtualKeyboard = true
-
-  if (window?.wdi?.Keymap?.isVirtualKeyboard) {
-    window.wdi.Keymap.isVirtualCapsLockOn = isCapsLockOn.value
-  }
-})
-
-watch(isCapsLockOn, (newValue) => {
-  window.wdi.Keymap.isVirtualCapsLockOn = newValue
-})
-
-onUnmounted(() => {
-  window.wdi.Keymap.isVirtualKeyboard = true
-})
-</script>
-
-<style lang="scss" scoped>
-#keyboard-draggable {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.draggable {
-  position: fixed;
-
-  .keyboard {
-    flex-wrap: nowrap;
-    width: 900px;
-    background: #314351;
-    display: flex;
-    flex-direction: column;
-    margin: 20px;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 10px;
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-
-    .row {
-      padding: 0 10px 3px 10px;
-      min-width: 800px;
-      display: flex;
-      flex-wrap: nowrap;
-      justify-content: space-between;
-
-      .key {
-        position: relative;
-        color: white;
-        background: #314351;
-        min-width: 50px;
-        height: 40px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border: 1px solid #ffffff;
-        border-radius: 10px;
-        margin: 3px;
-        cursor: pointer;
-        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
-        transition: background-color 0.3s ease, transform 0.1s ease;
-
-        span:not(.rus-key) {
-          font-weight: bold !important;
-        }
-
-        .rus-key {
-          position: absolute;
-          bottom: 0;
-          opacity: 0.4;
-          left: calc(50% + 9px);
-          font-weight: normal;
-        }
-
-        &:active {
-          transform: translateY(2px);
-        }
-        &:hover {
-          background-color: #ffffff;
-          color: #314351;
-        }
-      }
-
-      .active {
-        background-color: #ffffff;
-        color: #314351;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div id="keyboard-draggable" ref="draggable" class="draggable" :style="style">
+    <div id="keyboard" class="keyboard">
+      <div
+        v-for="(row, rowIndex) in keyboardRowsUI"
+        :key="rowIndex"
+        class="row"
+      >
+        <div
+          v-for="(keyItem, keyIndex) in row"
+          :key="keyIndex"
+          :class="[
+            'key',
+            {
+              active: keyItem.active,
+            },
+          ]"
+          :style="{ width: keyItem.width }"
+          @click="onKeyPress(keyItem)"
+        >
+          <span>
+            {{ keyItem.keyUI }}
+          </span>
+          <span class="rus-key">
+            {{ keyItem.rusKeyUI }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDraggable } from '@vueuse/core'
+import keyboardRows from '~/components/common/spiceConsole/keyboard/config/keyboardRows'
+import { I_KeyboardRowItem } from '~/components/common/spiceConsole/keyboard/models/interfaces'
+
+const draggable = ref<HTMLElement | null>(null)
+
+const { style } = useDraggable(draggable, {
+  initialValue: { x: 300, y: 370 },
+})
+
+// const emits = defineEmits<{
+//   (event: 'pressed-key', value: string): void
+// }>()
+//
+// const onValueEmit = (value: string): void => {
+//   emits('pressed-key', value)
+// }
+
+const isCapsLockOn = ref<boolean>(false)
+const isShiftPressed = ref<boolean>(false)
+const isCtrlPressed = ref<boolean>(false)
+const isWinPressed = ref<boolean>(false)
+const isAltPressed = ref<boolean>(false)
+
+const isCapsLockOnWithShift = computed<boolean>(
+  () => isCapsLockOn.value && isShiftPressed.value
+)
+
+const isCapsLockOnWithoutShift = computed<boolean>(
+  () => isCapsLockOn.value && !isShiftPressed.value
+)
+
+const isShiftPressedWithoutCapsLock = computed<boolean>(
+  () => !isCapsLockOn.value && isShiftPressed.value
+)
+
+const keyboardRowsUI = computed<I_KeyboardRowItem[][]>(() =>
+  keyboardRows.map((row: I_KeyboardRowItem[]) =>
+    row.map((keyItem: I_KeyboardRowItem) => {
+      let rusKeyUI = ''
+      let keyUI = ''
+
+      if (isCapsLockOnWithShift.value) {
+        rusKeyUI = keyItem.rusSecondaryValue || ''
+        keyUI = keyItem.secondaryValue
+      } else if (isCapsLockOnWithoutShift.value) {
+        rusKeyUI = keyItem.rusCapsLockValue || ''
+        keyUI = keyItem.capsLockValue
+      } else if (isShiftPressedWithoutCapsLock.value) {
+        rusKeyUI = keyItem.rusShiftValue || ''
+        keyUI = keyItem.shiftValue
+      } else {
+        rusKeyUI = keyItem.rusValue || ''
+        keyUI = keyItem.value
+      }
+
+      const active =
+        (isCapsLockOn.value && keyItem.key === 20) ||
+        (isShiftPressed.value && keyItem.key === 16) ||
+        (isCtrlPressed.value && keyItem.key === 17) ||
+        (isAltPressed.value && keyItem.key === 18) ||
+        (isWinPressed.value && keyItem.key === 92)
+
+      return {
+        ...keyItem,
+        keyUI,
+        rusKeyUI,
+        active,
+      }
+    })
+  )
+)
+
+const generateModifierEvent = (event: string, keyCode: number): void => {
+  window.app.clientGui.generateEvent(event, [{ type: event, keyCode }])
+}
+
+// Shift
+const takeOffShift = (): void => {
+  isShiftPressed.value = false
+  generateModifierEvent('keyup', 16)
+}
+
+const sendShiftPressed = (): void => {
+  generateModifierEvent('keydown', 16)
+}
+
+const takeOnShift = (): void => {
+  isShiftPressed.value = true
+}
+// Shift ----
+
+// Ctrl
+const takeOffCtrl = (): void => {
+  isCtrlPressed.value = false
+  window.app.clientGui.generateEvent('keyup', [
+    { type: 'keyup', keyCode: 17, generated: isCtrlPressed.value },
+  ])
+  wdi.Keymap.ctrlPressed = false
+}
+
+const sendCtrlPressed = (): void => {
+  window.app.clientGui.generateEvent('keydown', [
+    { type: 'keydown', keyCode: 17, generated: isCtrlPressed.value },
+  ])
+}
+
+const takeOnCtrl = (): void => {
+  wdi.Keymap.ctrlPressed = true
+  isCtrlPressed.value = true
+}
+// Ctrl ----
+
+// Win
+const takeOffWin = (): void => {
+  isWinPressed.value = false
+  generateModifierEvent('keyup', 92)
+}
+
+const sendWinPressed = (): void => {
+  generateModifierEvent('keydown', 92)
+}
+
+const takeOnWin = (): void => {
+  isWinPressed.value = true
+}
+// Win ----
+
+// Alt
+const takeOffAlt = (): void => {
+  isAltPressed.value = false
+  generateModifierEvent('keyup', 18)
+}
+
+const sendAltPressed = (): void => {
+  generateModifierEvent('keydown', 18)
+}
+
+const takeOnAlt = (): void => {
+  isAltPressed.value = true
+}
+// Alt ----
+
+const generateEvent = (
+  event: string,
+  key: I_KeyboardRowItem,
+  withOriginal: boolean,
+  type?: string
+): void => {
+  withOriginal
+    ? window.app.clientGui.generateEvent(event, [
+        {
+          type: type ? type : event,
+          keyCode: key.keyCode || -1,
+          generated: isCtrlPressed.value,
+          ctrlKey: isCtrlPressed.value,
+          originalEvent: { code: key.key },
+        },
+      ])
+    : window.app.clientGui.generateEvent(event, [
+        {
+          type: event,
+          keyCode: key.key,
+          generated: isCtrlPressed.value,
+          ctrlKey: isCtrlPressed.value,
+        },
+      ])
+}
+
+const keyEvent = (
+  event: string,
+  isCodeEvent: boolean,
+  key: I_KeyboardRowItem
+): void => {
+  if (isCodeEvent) {
+    if (event !== 'keyup') {
+      generateEvent(event, key, true)
+    } else if (event === 'keyup' && isCtrlPressed.value) {
+      generateEvent(event, key, true)
+      return
+    } else {
+      generateEvent(event, key, true, 'inputmanager')
+    }
+  } else {
+    generateEvent(event, key, false)
+  }
+}
+
+const checkAndSendModifiers = (): void => {
+  if (isShiftPressed.value) {
+    sendShiftPressed()
+  }
+  if (isAltPressed.value) {
+    sendAltPressed()
+  }
+  if (isCtrlPressed.value) {
+    sendCtrlPressed()
+  }
+  if (isWinPressed.value) {
+    sendWinPressed()
+  }
+}
+
+const checkAndOffModifiers = (): void => {
+  if (isWinPressed.value) {
+    takeOffWin()
+  }
+  if (isCtrlPressed.value) {
+    takeOffCtrl()
+  }
+  if (isAltPressed.value) {
+    takeOffAlt()
+  }
+  if (isShiftPressed.value) {
+    takeOffShift()
+  }
+}
+
+const onKeyPress = (key: I_KeyboardRowItem): void => {
+  window.app.inputProcess.clientGui.inputManager.input.val('')
+
+  document.getElementById('inputmanager')?.focus()
+
+  const isCodeEvent = typeof key.key === 'string'
+  if (isCodeEvent) {
+    checkAndSendModifiers()
+    keyEvent('keydown', isCodeEvent, key)
+    keyEvent('keypress', isCodeEvent, key)
+    keyEvent('keyup', isCodeEvent, key)
+
+    checkAndOffModifiers()
+    window.app.inputProcess.clientGui.inputManager.input.val('_')
+  } else {
+    if (key.key === 20) {
+      isCapsLockOn.value = !isCapsLockOn.value
+    }
+
+    if (key.key === 16 && isShiftPressed.value) {
+      takeOffShift()
+      return
+    } else if (key.key === 16 && !isShiftPressed.value) {
+      takeOnShift()
+    }
+
+    if (key.key === 18 && isAltPressed.value) {
+      takeOffAlt()
+      return
+    } else if (key.key === 18 && !isAltPressed.value) {
+      takeOnAlt()
+    }
+
+    if (key.key === 17 && isCtrlPressed.value) {
+      takeOffCtrl()
+      return
+    } else if (key.key === 17 && !isCtrlPressed.value) {
+      takeOnCtrl()
+    }
+
+    if (key.key === 92 && isWinPressed.value) {
+      takeOffWin()
+      return
+    } else if (key.key === 92 && !isWinPressed.value) {
+      takeOnWin()
+    }
+
+    keyEvent('keydown', isCodeEvent, key)
+
+    if (key.key !== 16 && key.key !== 17 && key.key !== 92 && key.key !== 18) {
+      keyEvent('keyup', isCodeEvent, key)
+
+      if (key.key !== 20) {
+        checkAndOffModifiers()
+      }
+    }
+  }
+}
+
+onMounted(() => {
+  window.wdi.Keymap.isVirtualKeyboard = true
+
+  if (window?.wdi?.Keymap?.isVirtualKeyboard) {
+    window.wdi.Keymap.isVirtualCapsLockOn = isCapsLockOn.value
+  }
+})
+
+watch(isCapsLockOn, (newValue) => {
+  window.wdi.Keymap.isVirtualCapsLockOn = newValue
+})
+
+onUnmounted(() => {
+  window.wdi.Keymap.isVirtualKeyboard = true
+})
+</script>
+
+<style lang="scss" scoped>
+#keyboard-draggable {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.draggable {
+  position: fixed;
+
+  .keyboard {
+    flex-wrap: nowrap;
+    width: 900px;
+    background: #314351;
+    display: flex;
+    flex-direction: column;
+    margin: 20px;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+
+    .row {
+      padding: 0 10px 3px 10px;
+      min-width: 800px;
+      display: flex;
+      flex-wrap: nowrap;
+      justify-content: space-between;
+
+      .key {
+        position: relative;
+        color: white;
+        background: #314351;
+        min-width: 50px;
+        height: 40px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border: 1px solid #ffffff;
+        border-radius: 10px;
+        margin: 3px;
+        cursor: pointer;
+        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
+        transition: background-color 0.3s ease, transform 0.1s ease;
+
+        span:not(.rus-key) {
+          font-weight: bold !important;
+        }
+
+        .rus-key {
+          position: absolute;
+          bottom: 0;
+          opacity: 0.4;
+          left: calc(50% + 9px);
+          font-weight: normal;
+        }
+
+        &:active {
+          transform: translateY(2px);
+        }
+        &:hover {
+          background-color: #ffffff;
+          color: #314351;
+        }
+      }
+
+      .active {
+        background-color: #ffffff;
+        color: #314351;
+      }
+    }
+  }
+}
+</style>