@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/constructors/Arrow/ArrowElementTarget.ts

@@ -0,0 +1,72 @@
+import { ref } from 'vue'
+import { isDomRuntime, isFilled, isString } from '@dxtmisha/functional'
+
+import type { ArrowProps } from './props'
+
+/**
+ * Class for working with the target element.
+ *
+ * Класс для работы с целевым элементом.
+ */
+export class ArrowElementTarget {
+  readonly element = ref<HTMLElement | undefined>()
+
+  /**
+   * Constructor
+   * @param props input properties/ входящие свойства
+   */
+  constructor(
+    protected readonly props: ArrowProps
+  ) {
+  }
+
+  /**
+   * Checks that the element exists.
+   *
+   * Проверяет, что элемент существует.
+   */
+  is(): boolean {
+    return this.element.value !== undefined
+  }
+
+  /**
+   * Gets the element's bounding rectangle.
+   *
+   * Получает ограничивающий прямоугольник элемента.
+   */
+  getRect(): DOMRect | undefined {
+    return this.element.value?.getBoundingClientRect()
+  }
+
+  /**
+   * Updates the target element.
+   *
+   * Обновляет целевой элемент.
+   */
+  update(): void {
+    this.element.value = this.initElement()
+  }
+
+  /**
+   * Initializes the target element.
+   *
+   * Инициализирует целевой элемент.
+   */
+  protected initElement(): HTMLElement | undefined {
+    const elementTarget = this.props.elementTarget
+
+    if (
+      this.props.position === 'auto'
+      && isFilled(elementTarget)
+      && isDomRuntime()
+    ) {
+      if (isString(elementTarget)) {
+        return document.querySelector<HTMLElement>(elementTarget) ?? undefined
+      }
+
+      return elementTarget
+    }
+
+    return undefined
+  }
+}

package/src/constructors/Arrow/ArrowEvent.ts

@@ -0,0 +1,126 @@
+import { nextTick, onMounted, onUnmounted, type Ref, type ToRefs, watch } from 'vue'
+import { EventItem, EventRef, isDomRuntime } from '@dxtmisha/functional'
+
+import { ArrowElementTarget } from './ArrowElementTarget'
+import { ArrowPosition } from './ArrowPosition'
+import { ArrowParent } from './ArrowParent'
+
+import type { ArrowProps } from './props'
+
+/**
+ * Class for managing arrow events.
+ *
+ * Класс для управления событиями стрелки.
+ */
+export class ArrowEvent {
+  protected eventItem?: EventRef<HTMLElement, any>
+  protected eventTarget?: EventRef<HTMLElement, any>
+  protected eventBody?: EventItem<any, any>
+
+  /**
+   * Constructor
+   * @param props input properties / входные свойства
+   * @param refs input properties as refs / входные свойства как ссылки
+   * @param element arrow element / элемент стрелки
+   * @param elementTarget target element / целевой элемент
+   * @param parent parent object / объект родителя
+   * @param position position object / объект позиции
+   */
+  constructor(
+    protected readonly props: ArrowProps,
+    protected readonly refs: ToRefs<ArrowProps>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly elementTarget: ArrowElementTarget,
+    protected readonly parent: ArrowParent,
+    protected readonly position: ArrowPosition
+  ) {
+    if (isDomRuntime()) {
+      onMounted(async () => {
+        await nextTick()
+
+        watch(this.elementTarget.element, this.makeEvents)
+        watch([...Object.values(this.refs)], this.update, { immediate: true })
+      })
+
+      onUnmounted(() => {
+        this.stopEvents()
+      })
+    }
+  }
+
+  /**
+   * Update all reactive elements.
+   *
+   * Обновить все реактивные элементы.
+   */
+  readonly update = (): void => {
+    requestAnimationFrame(() => {
+      if (this.props.position === 'auto') {
+        this.elementTarget.update()
+      }
+
+      this.position.update()
+    })
+  }
+
+  /**
+   * Start events.
+   *
+   * Запустить события.
+   */
+  protected startEvents(): this {
+    this.eventItem?.start()
+    this.eventTarget?.start()
+    this.eventBody?.start()
+
+    return this
+  }
+
+  /**
+   * Stop events.
+   *
+   * Остановить события.
+   */
+  protected stopEvents(): this {
+    this.eventItem?.stop()
+    this.eventTarget?.stop()
+    this.eventBody?.stop()
+
+    return this
+  }
+
+  /**
+   * Initialize events.
+   *
+   * Инициализировать события.
+   */
+  protected initEvents(): this {
+    if (!this.eventItem) {
+      this.eventItem = new EventRef(this.element, undefined, 'resize', this.update)
+    }
+
+    if (!this.eventTarget) {
+      this.eventTarget = new EventRef(this.elementTarget.element, undefined, 'resize', this.update)
+    }
+
+    if (!this.eventBody) {
+      this.eventBody = new EventItem(window, ['scroll', 'resize'], this.update)
+    }
+
+    return this
+  }
+
+  /**
+   * Create events.
+   *
+   * Создать события.
+   */
+  protected makeEvents = (): void => {
+    if (this.elementTarget.is()) {
+      this.initEvents()
+        .startEvents()
+    } else {
+      this.stopEvents()
+    }
+  }
+}

package/src/constructors/Arrow/ArrowInclude.ts

@@ -0,0 +1,85 @@
+import { computed, type VNode } from 'vue'
+import {
+  type ConstrBind,
+  DesignComponents,
+  getRef,
+  type RefOrNormal,
+  toBinds
+} from '@dxtmisha/functional'
+
+import type { ArrowComponentInclude, ArrowPropsInclude } from './basicTypes'
+import type { ArrowProps } from './props'
+
+/**
+ * ArrowInclude class provides functionality for conditionally rendering arrow components
+ * within other components. It manages the logic for determining when to display arrow
+ * and configures the appropriate properties.
+ *
+ * Класс ArrowInclude предоставляет функциональность для условного рендеринга компонентов
+ * стрелки внутри других компонентов. Он управляет логикой определения необходимости
+ * отображения стрелки и настраивает соответствующие свойства.
+ */
+export class ArrowInclude<
+  Props extends ArrowPropsInclude = ArrowPropsInclude,
+  PropsExtra extends ConstrBind<ArrowProps> = ConstrBind<ArrowProps>
+> {
+  /**
+   * Constructor
+   * @param props input parameter/ входной параметр
+   * @param className class name/ название класса
+   * @param components object for working with components/ объект для работы с компонентами
+   * @param elementTarget target element or selector/ целевой элемент или селектор
+   * @param extra additional parameter or property name/ дополнительный параметр или имя свойства
+   * @param index index identifier/ идентификатор индекса
+   */
+  constructor(
+    protected readonly props: Readonly<Props>,
+    protected readonly className: string,
+    protected readonly components?: DesignComponents<ArrowComponentInclude, Props>,
+    protected readonly elementTarget?: HTMLElement | string,
+    protected readonly extra?: RefOrNormal<PropsExtra>,
+    protected readonly index?: string
+  ) {
+  }
+
+  /**
+   * Checks whether arrow should be displayed/
+   * Проверяет, нужно ли отображать стрелку
+   */
+  readonly is = computed(() => Boolean(
+    this.props.arrowShow
+  ))
+
+  /** Computed bindings for the arrow/ Вычисляемые привязки для стрелки */
+  readonly binds = computed<PropsExtra>(() => {
+    return toBinds<PropsExtra>(
+      getRef(this.extra),
+      this.props.arrowAttrs,
+      {
+        class: `${this.className}__arrow`,
+        elementTarget: this.elementTarget
+      }
+    )
+  })
+
+  /**
+   * Render the Arrow component
+   *
+   * Рендер компонента стрелки
+   */
+  readonly render = (): VNode[] => {
+    if (
+      this.components
+      && this.is.value
+    ) {
+      return this.components.render(
+        'arrow',
+        this.binds.value,
+        undefined,
+        this.index
+      )
+    }
+
+    return []
+  }
+}

package/src/constructors/Arrow/ArrowParent.ts

@@ -0,0 +1,100 @@
+import { computed, type Ref, watch } from 'vue'
+import { isDomRuntime, toNumber } from '@dxtmisha/functional'
+import { ArrowElement } from './ArrowElement'
+
+/**
+ * Class for working with the parent element.
+ *
+ * Класс для работы с родительским элементом.
+ */
+export class ArrowParent {
+  /**
+   * Constructor
+   * @param element input element/ элемент ввода
+   * @param className class name/ название класса
+   * @param elementItem arrow element/ элемент стрелки
+   */
+  constructor(
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly className: string,
+    protected readonly elementItem: ArrowElement
+  ) {
+    if (isDomRuntime()) {
+      watch(element, this.make)
+    }
+  }
+
+  /** Checks if the parent element has a border/ Проверяет, есть ли у родительского элемента граница */
+  readonly isBorder = computed<boolean>(
+    () => this.borderWidth.value !== '0px'
+  )
+
+  /** Parent element/ Родительский элемент **/
+  readonly elementParent = computed<HTMLElement | undefined>(() => {
+    return this.element.value?.parentElement as HTMLElement | undefined
+  })
+
+  /** Background color of the parent element/ Цвет фона родительского элемента **/
+  readonly background = computed<string>(
+    () => this.getStyles()?.backgroundColor ?? 'transparent'
+  )
+
+  /** Border color of the parent element/ Цвет границы родительского элемента **/
+  readonly borderWidth = computed<string>(
+    () => this.getStyles()?.borderWidth ?? '0px'
+  )
+
+  /** Border color of the parent element/ Цвет границы родительского элемента **/
+  readonly borderColor = computed<string>(
+    () => this.getStyles()?.borderColor ?? 'transparent'
+  )
+
+  /** Border radius of the parent element/ Радиус границы родительского элемента **/
+  readonly borderRadius = computed<string>(
+    () => this.getStyles()?.borderRadius ?? '0px'
+  )
+
+  /**
+   * Get border width as number.
+   *
+   * Получить ширину границы в виде числа.
+   */
+  getBorderRadius(): number {
+    return toNumber(this.borderRadius.value)
+  }
+
+  /**
+   * Get computed styles of the parent element.
+   *
+   * Получить вычисленные стили родительского элемента.
+   */
+  protected getStyles() {
+    const parent = this.elementParent.value
+
+    if (parent) {
+      return getComputedStyle(parent)
+    }
+
+    return undefined
+  }
+
+  /**
+   * Method for creating styles for the parent element.
+   *
+   * Метод для создания стилей для родительского элемента.
+   */
+  protected readonly make = (): void => {
+    requestAnimationFrame(() => {
+      if (this.elementParent.value) {
+        const elementParent = this.elementParent.value
+
+        elementParent.classList.add(`${this.className}__parent`)
+        elementParent.style.setProperty(`--${this.className}-sys-height`, String(this.elementItem.getHeight()))
+
+        if (this.isBorder.value) {
+          elementParent.dataset.arrow = 'border'
+        }
+      }
+    })
+  }
+}

package/src/constructors/Arrow/ArrowPosition.ts

@@ -0,0 +1,231 @@
+import { ref } from 'vue'
+
+import { ArrowElement } from './ArrowElement'
+import { ArrowElementTarget } from './ArrowElementTarget'
+import { ArrowParent } from './ArrowParent'
+
+import { type ArrowBorder, ArrowDirection } from './basicTypes'
+import type { ArrowProps } from './props'
+
+/**
+ * Class for calculating the position of the arrow element relative to the target element.
+ *
+ * Класс для вычисления позиции элемента стрелки относительно целевого элемента.
+ */
+export class ArrowPosition {
+  /** Border between item and target elements / Граница между элементами item и target */
+  readonly border = ref<ArrowBorder>()
+
+  /** Direction of the arrow / Направление стрелки */
+  readonly direction = ref<ArrowDirection>()
+
+  /** Shift of the arrow / Смещение стрелки */
+  readonly shift = ref<string>()
+
+  /** Clip path for the arrow / Область обрезки для стрелки */
+  readonly clipPath = ref<string>()
+
+  /**
+   * Constructor
+   * @param props input properties / входные свойства
+   * @param elementItem arrow element / элемент стрелки
+   * @param elementTarget target element / целевой элемент
+   * @param parent parent element / родительский элемент
+   */
+  constructor(
+    protected readonly props: ArrowProps,
+    protected readonly elementItem: ArrowElement,
+    protected readonly elementTarget: ArrowElementTarget,
+    protected readonly parent: ArrowParent
+  ) {
+  }
+
+  /**
+   * Updates the position of the arrow.
+   *
+   * Обновляет позицию стрелки.
+   */
+  readonly update = (): void => {
+    this.border.value = this.initBorder()
+    this.direction.value = this.initDirection()
+    this.shift.value = this.initShift()
+
+    requestAnimationFrame(() => {
+      this.clipPath.value = this.initClipPath()
+    })
+  }
+
+  /**
+   * Checks if the arrow is in the X direction.
+   *
+   * Проверяет, находится ли стрелка в направлении X.
+   */
+  isX() {
+    return this.direction.value === ArrowDirection.TOP || this.direction.value === ArrowDirection.BOTTOM
+  }
+
+  /**
+   * Gets the minimum value for the arrow position.
+   *
+   * Получает минимальное значение для позиции стрелки.
+   */
+  protected getMinValue(): number {
+    return this.parent.getBorderRadius() + (this.elementItem.getWidth() / 2)
+  }
+
+  /**
+   * Initializes the border between the item and target elements.
+   *
+   * Инициализирует границу между элементами item и target.
+   */
+  protected initBorder(): ArrowBorder | undefined {
+    const elementItemRect = this.elementItem.getRect()
+    const elementTargetRect = this.elementTarget.getRect()
+
+    if (
+      elementItemRect
+      && elementTargetRect
+    ) {
+      return {
+        top: Math.max(elementItemRect.top, elementTargetRect.top),
+        bottom: Math.min(elementItemRect.bottom, elementTargetRect.bottom),
+        left: Math.max(elementItemRect.left, elementTargetRect.left),
+        right: Math.min(elementItemRect.right, elementTargetRect.right)
+      }
+    }
+
+    return undefined
+  }
+
+  /**
+   * Initializes the direction of the arrow.
+   *
+   * Инициализирует направление стрелки.
+   */
+  protected initDirection(): ArrowDirection | undefined {
+    if (this.props.position !== 'auto') {
+      return this.props.position as ArrowDirection
+    }
+
+    const elementItemRect = this.elementItem.getRect()
+    const elementTargetRect = this.elementTarget.getRect()
+
+    if (
+      this.border.value
+      && elementItemRect
+      && elementTargetRect
+    ) {
+      if (
+        elementTargetRect.top <= elementItemRect.top
+        && elementTargetRect.right > elementItemRect.left
+        && elementTargetRect.left < elementItemRect.right
+      ) {
+        return ArrowDirection.TOP
+      }
+
+      if (
+        elementTargetRect.bottom >= elementItemRect.bottom
+        && elementTargetRect.right > elementItemRect.left
+        && elementTargetRect.left < elementItemRect.right
+      ) {
+        return ArrowDirection.BOTTOM
+      }
+
+      if (
+        elementTargetRect.left <= elementItemRect.left
+        && elementTargetRect.bottom > elementItemRect.top
+        && elementTargetRect.top < elementItemRect.bottom
+      ) {
+        return ArrowDirection.LEFT
+      }
+
+      if (
+        elementTargetRect.right >= elementItemRect.right
+        && elementTargetRect.bottom > elementItemRect.top
+        && elementTargetRect.top < elementItemRect.bottom
+      ) {
+        return ArrowDirection.RIGHT
+      }
+    }
+
+    return undefined
+  }
+
+  /**
+   * Initializes the shift of the arrow.
+   *
+   * Инициализирует смещение стрелки.
+   */
+  protected initShift(): string | undefined {
+    const border = this.border.value
+    const elementItemRect = this.elementItem.getRect()
+
+    if (border && elementItemRect) {
+      const min = this.getMinValue()
+      let size: number
+
+      if (this.isX()) {
+        size = Math.min(elementItemRect.width - min, (border.left - elementItemRect.left) + ((border.right - border.left) / 2))
+      } else {
+        size = Math.min(elementItemRect.height - min, (border.top - elementItemRect.top) + ((border.bottom - border.top) / 2))
+      }
+
+      return `${Math.max(min, size)}px`
+    }
+
+    return undefined
+  }
+
+  /**
+   * Initializes the clip path for the arrow.
+   *
+   * Инициализирует область обрезки для стрелки.
+   */
+  protected initClipPath() {
+    const rect = this.elementItem.getRectBorder()
+    const rectArrow = this.elementItem.getRectArrowLine()
+
+    if (rect && rectArrow) {
+      const rectangleShow = `M0,0 L0,${rect.height} L${rect.width},${rect.height} L${rect.width},0 Z`
+      let startX: number
+      let startY: number
+      let endX: number
+      let endY: number
+
+      switch (this.direction.value) {
+        case ArrowDirection.TOP:
+          startX = rectArrow.left - rect.left
+          startY = 0
+          endX = startX + rectArrow.width
+          endY = rectArrow.height
+          break
+        case ArrowDirection.BOTTOM:
+          startX = rectArrow.left - rect.left
+          startY = rect.height - rectArrow.height
+          endX = startX + rectArrow.width
+          endY = rect.height
+          break
+        case ArrowDirection.LEFT:
+          startX = 0
+          startY = rectArrow.top - rect.top
+          endX = rectArrow.width
+          endY = startY + rectArrow.height
+          break
+        case ArrowDirection.RIGHT:
+          startX = rect.width - rectArrow.width
+          startY = rectArrow.top - rect.top
+          endX = rect.width
+          endY = startY + rectArrow.height
+          break
+        default:
+          return undefined
+      }
+
+      const rectangleHide = `M${startX},${startY} L${endX},${startY} L${endX},${endY} L${startX},${endY} Z`
+
+      return `path('${rectangleShow} ${rectangleHide}')`
+    }
+
+    return undefined
+  }
+}

package/src/constructors/Arrow/basicTypes.ts

@@ -0,0 +1,50 @@
+import type { ConstrBind } from '@dxtmisha/functional'
+import type { ArrowProps } from './props'
+
+/** Arrow direction enum / Направление стрелки перечисление */
+export enum ArrowDirection {
+  TOP = 'top',
+  BOTTOM = 'bottom',
+  LEFT = 'left',
+  RIGHT = 'right',
+  HIDE = 'hide'
+}
+
+export type ArrowBorder = {
+  top: number
+  bottom: number
+  left: number
+  right: number
+}
+
+export type ArrowCenter = {
+  x: number
+  y: number
+}
+
+/**
+ * Component map for including the Arrow component/
+ * Карта компонентов для подключения компонента Arrow
+ */
+export type ArrowComponentInclude = {
+  arrow?: object
+}
+
+/**
+ * Props used to include and configure the Arrow component/
+ * Свойства для подключения и настройки компонента Arrow
+ */
+export interface ArrowPropsInclude<
+  Arrow extends ArrowProps = ArrowProps
+> {
+  // Status
+  /** Show arrow/ Показать стрелку */
+  arrowShow?: boolean
+
+  /** Arrow position/ Позиция стрелки */
+  arrowPosition?: ArrowProps['position']
+
+  // Style
+  /** Additional attributes for Arrow component/ Дополнительные атрибуты для компонента Arrow */
+  arrowAttrs?: ConstrBind<Arrow>
+}

package/src/constructors/Arrow/index.ts

@@ -0,0 +1,6 @@
+export * from './Arrow'
+export * from './ArrowDesign'
+export * from './ArrowInclude'
+export * from './props'
+export * from './types'
+export * from './basicTypes'

package/src/constructors/Arrow/properties.json

@@ -0,0 +1,23 @@
+{
+  "arrowWidth": {
+    "_type": "var"
+  },
+  "arrowHeight": {
+    "_type": "var"
+  },
+  "#mask": {},
+  "#arrow": {},
+  "#arrowLine": {},
+  "#arrowArea": {},
+  "#border": {},
+  "#borderHidden": {},
+  "~position": {
+    "~auto": {},
+    "~top": {},
+    "~bottom": {},
+    "~left": {},
+    "~right": {},
+    "_default": "auto"
+  },
+  "~inverse": {}
+}