bfg-common 1.5.451 → 1.5.452

package/components/atoms/window/Window.vue

@@ -0,0 +1,360 @@
+<template>
+  <div
+    class="window-container"
+    :style="{
+      left: x + 'px',
+      top: y + 'px',
+      width: width + 'px',
+      height: height + 'px',
+    }"
+  >
+    <div ref="headerEl" class="window-header">
+      <div class="window-title">{{ props.title }}</div>
+      <button class="window-close" @click="onHide">
+        <ui-icon name="close" class="close-icon" />
+      </button>
+    </div>
+
+    <div class="window-content">
+      <slot></slot>
+      <div
+        v-show="isShowContentBlocker"
+        :style="{}"
+        class="content-blocker"
+      ></div>
+    </div>
+
+    <!-- Ручки для ресайза -->
+    <div
+      class="resize-handle resize-top"
+      @mousedown="startResize($event, 'top')"
+    ></div>
+    <div
+      class="resize-handle resize-right"
+      @mousedown="startResize($event, 'right')"
+    ></div>
+    <div
+      class="resize-handle resize-bottom"
+      @mousedown="startResize($event, 'bottom')"
+    ></div>
+    <div
+      class="resize-handle resize-left"
+      @mousedown="startResize($event, 'left')"
+    ></div>
+    <div
+      class="resize-handle resize-top-left"
+      @mousedown="startResize($event, 'top-left')"
+    ></div>
+    <div
+      class="resize-handle resize-top-right"
+      @mousedown="startResize($event, 'top-right')"
+    ></div>
+    <div
+      class="resize-handle resize-bottom-left"
+      @mousedown="startResize($event, 'bottom-left')"
+    ></div>
+    <div
+      class="resize-handle resize-bottom-right"
+      @mousedown="startResize($event, 'bottom-right')"
+    ></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDraggable } from '@vueuse/core'
+
+const props = defineProps<{
+  top: number
+  left: number
+  width: number
+  height: number
+  title: string
+}>()
+const emits = defineEmits<{
+  (event: 'hide'): void
+}>()
+
+const headerEl = ref(null)
+const isShowContentBlocker = ref<boolean>(false)
+
+const x = ref(props.left)
+const y = ref(props.top)
+const width = ref(props.width)
+const height = ref(props.height)
+
+// Используем vueuse для перетаскивания
+useDraggable(headerEl, {
+  initialValue: { x: props.left, y: props.top },
+  onMove({ x: newX, y: newY }) {
+    x.value = newX
+    y.value = newY
+  },
+  onStart() {
+    isShowContentBlocker.value = true
+  },
+  onEnd() {
+    isShowContentBlocker.value = false
+    fixPosition()
+  },
+})
+
+const fixSize = (): void => {
+  const globalWindowWidth = window.innerWidth
+  const globalWindowHeight = window.innerHeight
+
+  width.value = Math.min(globalWindowWidth - 8 * 2, width.value)
+  height.value = Math.min(globalWindowHeight - 8 * 2, height.value)
+}
+const fixPosition = (): void => {
+  const globalWindowWidth = window.innerWidth
+  const globalWindowHeight = window.innerHeight
+  let newX = x.value
+  let newY = y.value
+  if (x.value + width.value / 2 > globalWindowWidth) {
+    newX = globalWindowWidth - 20
+  } else if (x.value + width.value > globalWindowWidth - 8) {
+    newX = globalWindowWidth - width.value - 8
+  } else if (x.value < 8) {
+    newX = 8
+  }
+
+  if (y.value + height.value / 2 > globalWindowHeight) {
+    newY = globalWindowHeight - 20
+  } else if (y.value + height.value > globalWindowHeight - 8) {
+    newY = globalWindowHeight - height.value - 8
+  } else if (y.value < 8) {
+    newY = 8
+  }
+
+  smoothMove(newX, newY)
+}
+const smoothMove = (newX: number, newY: number, duration = 100): void => {
+  const startX = x.value
+  const startY = y.value
+
+  // Время начала анимации
+  const startTime = performance.now()
+
+  // Функция анимации
+  const animate = (currentTime: number): void => {
+    // Прошедшее время с начала анимации
+    const elapsedTime = currentTime - startTime
+
+    // Прогресс анимации (от 0 до 1)
+    const progress = Math.min(elapsedTime / duration, 1)
+
+    // Вычисляем новые координаты с помощью линейной интерполяции
+    x.value = startX + (newX - startX) * progress
+    y.value = startY + (newY - startY) * progress
+
+    // Если анимация не завершена, продолжаем
+    if (progress < 1) {
+      requestAnimationFrame(animate)
+    }
+  }
+
+  // Запускаем анимацию
+  requestAnimationFrame(animate)
+}
+
+// Функция для ресайза
+const startResize = (e: any, direction: any): void => {
+  e.preventDefault()
+
+  const startX = e.clientX
+  const startY = e.clientY
+  const startWidth = width.value
+  const startHeight = height.value
+  const startLeft = x.value
+  const startTop = y.value
+
+  const onMouseMove = (e: any): void => {
+    const deltaX = e.clientX - startX
+    const deltaY = e.clientY - startY
+
+    if (direction.includes('right')) {
+      width.value = Math.max(200, startWidth + deltaX)
+    }
+    if (direction.includes('bottom')) {
+      height.value = Math.max(150, startHeight + deltaY)
+    }
+    if (direction.includes('left')) {
+      const newWidth = Math.max(200, startWidth - deltaX)
+      if (newWidth !== width.value) {
+        x.value = startLeft + deltaX
+        width.value = newWidth
+      }
+    }
+    if (direction.includes('top')) {
+      const newHeight = Math.max(150, startHeight - deltaY)
+      if (newHeight !== height.value) {
+        y.value = startTop + deltaY
+        height.value = newHeight
+      }
+    }
+    fixSize()
+  }
+
+  const onMouseUp = (): void => {
+    document.removeEventListener('mousemove', onMouseMove)
+    document.removeEventListener('mouseup', onMouseUp)
+    isShowContentBlocker.value = false
+    fixPosition()
+  }
+
+  document.addEventListener('mousemove', onMouseMove)
+  document.addEventListener('mouseup', onMouseUp)
+  isShowContentBlocker.value = true
+}
+
+let resizeTimer: any = null
+const globalWindowResize = (): void => {
+  clearTimeout(resizeTimer)
+
+  resizeTimer = setTimeout(() => {
+    fixSize()
+    fixPosition()
+  }, 250)
+}
+onMounted(() => {
+  window.addEventListener('resize', globalWindowResize)
+})
+onUnmounted(() => {
+  window.removeEventListener('resize', globalWindowResize)
+})
+
+const onHide = (): void => {
+  emits('hide')
+}
+</script>
+
+<style lang="scss">
+.window-container {
+  position: absolute;
+  border-radius: 8px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+  min-height: 200px;
+  z-index: var(--z-toast);
+
+  .window-header {
+    background-color: #314351;
+    color: white;
+    padding: 6px 12px;
+    cursor: move;
+    user-select: none;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .window-title {
+      font-weight: 500;
+      font-size: 16px;
+    }
+
+    .window-close {
+      background: none;
+      border: none;
+      color: #e4e4e4;
+      cursor: pointer;
+      width: 20px;
+      height: 20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &:hover {
+        color: #ffffff;
+      }
+    }
+  }
+
+  .window-content {
+    position: relative;
+    flex-grow: 1;
+
+    .content-blocker {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+    }
+  }
+
+  .resize-handle {
+    position: absolute;
+    background: transparent;
+    z-index: 10;
+
+    &.resize-top {
+      top: -3px;
+      left: 0;
+      right: 0;
+      height: 6px;
+      cursor: n-resize;
+    }
+
+    &.resize-right {
+      top: 0;
+      right: -3px;
+      bottom: 0;
+      width: 6px;
+      cursor: e-resize;
+    }
+
+    &.resize-bottom {
+      bottom: -3px;
+      left: 0;
+      right: 0;
+      height: 6px;
+      cursor: s-resize;
+    }
+
+    &.resize-left {
+      top: 0;
+      left: -3px;
+      bottom: 0;
+      width: 6px;
+      cursor: w-resize;
+    }
+
+    &.resize-top-left {
+      top: -6px;
+      left: -6px;
+      width: 12px;
+      height: 12px;
+      cursor: nw-resize;
+    }
+
+    &.resize-top-right {
+      top: -6px;
+      right: -6px;
+      width: 12px;
+      height: 12px;
+      cursor: ne-resize;
+    }
+
+    &.resize-bottom-left {
+      bottom: -6px;
+      left: -6px;
+      width: 12px;
+      height: 12px;
+      cursor: sw-resize;
+    }
+
+    &.resize-bottom-right {
+      bottom: -6px;
+      right: -6px;
+      width: 12px;
+      height: 12px;
+      cursor: se-resize;
+    }
+  }
+}
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.5.451",
+  "version": "1.5.452",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",