@dxtmisha/constructor 0.23.0 → 0.39.3

package/src/constructors/Image/ImageAdaptiveItem.ts

@@ -1,295 +0,0 @@
-import { computed, type Ref, ref, watchEffect } from 'vue'
-import { getElementId, toNumber } from '@dxtmisha/functional'
-
-import { ImageData } from './ImageData'
-import { ImageAdaptiveGroup } from './ImageAdaptiveGroup'
-import { ImageCalculationList } from './ImageCalculationList'
-
-import { type ImageElement, type ImageItem, type ImageSize } from './basicTypes'
-import { type ImageProps } from './props'
-
-enum ImageAdaptiveItemType {
-  x = 'x',
-  y = 'y'
-}
-
-const GROUP_BASIC = 'main'
-
-/**
- * The value in pixels indicating when an element is still considered active,
- * even if it has gone off the screen.
- *
- * Значение в пикселях, указывающее, когда элемент считается еще активным,
- * даже если он ушел за экран.
- */
-export const MAX_BEYOND = 512
-
-/**
- * A class for managing the adapted scaling of a specific element.
- *
- * Класс для управления адаптированным масштабированием конкретного элемента.
- */
-export class ImageAdaptiveItem {
-  readonly percent = ref<ImageSize>({
-    width: 0,
-    height: 0
-  })
-
-  protected beyond: boolean = false
-  protected visible: boolean = false
-
-  /**
-   * Constructor
-   * @param props input data/ входные данные
-   * @param element image element for scaling/ элемент изображения для масштабирования
-   * @param data image data/ данные изображения
-   */
-  constructor(
-    protected readonly props: ImageProps,
-    protected readonly data: ImageData,
-    public readonly element: Ref<ImageElement>
-  ) {
-    watchEffect(() => {
-      if (this.is()) {
-        ImageAdaptiveGroup.add(this)
-      } else {
-        ImageAdaptiveGroup.remove(this)
-      }
-    })
-  }
-
-  /**
-   * Is the element active for size alignment.
-   *
-   * Активен ли элемент для выравнивания размера.
-   */
-  readonly active = computed<boolean>(
-    () => Boolean(this.props.adaptive && (this.width.value || this.height.value)) && this.data.isImage()
-  )
-
-  /**
-   * Returns the name of the group.
-   *
-   * Возвращает название группы.
-   */
-  readonly group = computed<string>(() => this.props.adaptiveGroup ?? GROUP_BASIC)
-
-  /**
-   * Returns the physical width of the object.
-   *
-   * Возвращает физическую ширину объекта.
-   */
-  readonly width = computed<number>(() => toNumber(this.props.objectWidth ?? 0))
-
-  /**
-   * Returns the physical height of the object.
-   *
-   * Возвращает физическую высоту объекта.
-   */
-  readonly height = computed<number>(() => toNumber(this.props?.objectHeight ?? 0))
-
-  /**
-   * Returns the axis for scaling.
-   *
-   * Возвращает ось для масштабирования.
-   */
-  readonly type = computed<ImageAdaptiveItemType | undefined>(() => {
-    if (
-      this.width.value
-      && this.percent.value.width > 0
-    ) {
-      return ImageAdaptiveItemType.x
-    }
-
-    if (
-      this.height.value
-      && this.percent.value.height > 0
-    ) {
-      return ImageAdaptiveItemType.y
-    }
-
-    return undefined
-  })
-
-  /**
-   * Calculation of the base size of the image to determine how to scale the image.
-   *
-   * Вычисление базового размера изображения, чтобы определить, как надо масштабировать изображение.
-   */
-  readonly size = computed<number>(() => {
-    if (
-      this.element.value
-      && this.data.isImage()
-    ) {
-      const data = this.data.image.value as ImageItem
-
-      switch (this.type.value) {
-        case ImageAdaptiveItemType.x:
-          return data.height * (this.element.value.offsetWidth * this.percent.value.width / data.width)
-        case ImageAdaptiveItemType.y:
-          return data.width * (this.element.value.offsetHeight * this.percent.value.height / data.height)
-      }
-    }
-
-    return 0
-  })
-
-  /**
-   * Multiplier for determining the level of image scaling relative to other elements.
-   *
-   * Множитель для определения уровня масштабирования изображения относительно других элементов.
-   */
-  readonly factor = computed<number>(() => {
-    const element = this.element.value
-
-    if (element) {
-      const size = this.size.value
-
-      if (
-        this.type.value === ImageAdaptiveItemType.x
-        && size > element.offsetHeight
-      ) {
-        return element.offsetHeight / size
-      }
-
-      if (
-        this.type.value === ImageAdaptiveItemType.y
-        && size > element.offsetWidth
-      ) {
-        return element.offsetWidth / size
-      }
-    }
-
-    return 1
-  })
-
-  /**
-   * Checks if the element’s conditions are suitable for scaling.
-   *
-   * Проверяет, подходить ли у элемента условия для масштабирования.
-   */
-  is(): boolean {
-    return this.active.value && Boolean(this.element.value?.closest('body'))
-  }
-
-  /**
-   * Checks for compliance with the group.
-   *
-   * Проверяет на соответствие группе.
-   * @param name name of the checked group/ название проверяемой группы
-   */
-  isGroup(name: string): boolean {
-    return this.group.value === name
-  }
-
-  /**
-   * Is it available for calculation.
-   *
-   * Доступен ли для вычисления.
-   */
-  isBeyond(): boolean {
-    return this.beyond
-  }
-
-  /**
-   * Is the element visible.
-   *
-   * Виден ли элемент.
-   */
-  isVisible(): boolean {
-    return this.visible
-  }
-
-  /**
-   * Returns the identifier of the element.
-   *
-   * Возвращает идентификатор элемента.
-   */
-  getId(): string {
-    return getElementId(this.element.value)
-  }
-
-  /**
-   * Returns values for the background-size property.
-   *
-   * Возвращает значения для свойства background-size.
-   */
-  getBackgroundSize(): string | null {
-    const factorMax = ImageCalculationList.get(this.group.value).getFactorMax()
-
-    switch (this.type.value) {
-      case ImageAdaptiveItemType.x:
-        return `${100 * this.percent.value.width * factorMax}% auto`
-      case ImageAdaptiveItemType.y:
-        return `auto ${100 * this.percent.value.height * factorMax}%`
-    }
-
-    return null
-  }
-
-  /**
-   * Size change for calculation.
-   *
-   * Изменение размера для вычисления.
-   * @param width width value/ значение ширины
-   * @param height height value/ значение высоты
-   */
-  setPercent(width: number, height: number): this {
-    if (
-      this.percent.value.width !== width
-      || this.percent.value.height !== height
-    ) {
-      this.percent.value = {
-        width,
-        height
-      }
-    }
-
-    return this
-  }
-
-  /**
-   * Removal of an element from the scaling list.
-   *
-   * Удаление элемента из списка для масштабирования.
-   */
-  remove(): void {
-    if (this.active.value) {
-      ImageAdaptiveGroup.remove(this)
-    }
-  }
-
-  /**
-   * Updating the visibility and activity status of the element.
-   *
-   * Обновление статуса видимости и активности элемента.
-   */
-  make(): this {
-    this.beyond = false
-    this.visible = false
-
-    if (
-      this.element.value
-      && this.is()
-    ) {
-      if (this.props.adaptiveAlways) {
-        this.beyond = true
-        this.visible = true
-      } else {
-        const rect = this.element.value.getBoundingClientRect()
-
-        this.beyond = !(
-          rect.bottom < (0 - MAX_BEYOND)
-          || rect.top > (window.innerHeight + MAX_BEYOND)
-        )
-
-        this.visible = !(
-          rect.bottom < 0
-          || rect.top > window.innerHeight
-        )
-      }
-    }
-
-    return this
-  }
-}

package/src/constructors/Image/ImageBackground.ts

@@ -1,127 +0,0 @@
-import { computed } from 'vue'
-import { isFilled, type NumberOrString } from '@dxtmisha/functional'
-
-import { ImageData } from './ImageData'
-import { ImageCoordinator } from './ImageCoordinator'
-import { ImageAdaptiveItem } from './ImageAdaptiveItem'
-
-import { type ImageProps } from './props'
-
-/**
- * A class for getting the value of background.
- *
- * Класс для получения значения background.
- */
-export class ImageBackground {
-  /**
-   * Constructor
-   * @param props input data/ входные данные
-   * @param data image data/ данные изображения
-   * @param coordinator object for working with coordinates/ объект для работы с координатами
-   * @param adaptive an object for working with adapted scaling/ объект для работы с адаптированным масштабированием
-   */
-  constructor(
-    protected readonly props: ImageProps,
-    protected readonly data: ImageData,
-    protected readonly coordinator: ImageCoordinator,
-    protected readonly adaptive: ImageAdaptiveItem
-  ) {
-  }
-
-  /**
-   * Returns values for the background-image property.
-   *
-   * Возвращает значения для свойства background-image.
-   */
-  readonly image = computed<string | null>(() => {
-    const image = this.data.image.value
-
-    switch (typeof image) {
-      case 'string':
-        return `url("${image}")`
-      case 'object':
-        return `url("${image.src}")`
-      default:
-        return null
-    }
-  })
-
-  /**
-   * Returns values for the background property.
-   *
-   * Возвращает значения для свойства background.
-   */
-  readonly size = computed<string | null>(() => {
-    if (this.coordinator.is()) {
-      return this.getSizeByCoordinator()
-    }
-
-    if (this.adaptive.is()) {
-      const size = this.adaptive.getBackgroundSize()
-
-      if (size) {
-        return size
-      }
-    }
-
-    return this.getSizeForItem()
-  })
-
-  /**
-   * Checks if the object is an image.
-   *
-   * Проверяет, является ли объект изображением.
-   */
-  isImage() {
-    return Boolean(this.image.value)
-  }
-
-  /**
-   * Returns the value for the background-size property.
-   *
-   * Возвращает значение для свойства background-size.
-   * @param width width value/ значение ширины
-   * @param height height value/ значение высоты
-   */
-  protected getSize(
-    width: NumberOrString,
-    height: NumberOrString
-  ): string | null {
-    const image = this.data.image.value
-
-    if (typeof image === 'object') {
-      return image.height < image.width ? `auto ${height}` : `${width} auto`
-    }
-
-    return null
-  }
-
-  /**
-   * Returns sizes according to the coordinator property.
-   *
-   * Возвращает размеры по свойству координатора.
-   */
-  protected getSizeByCoordinator(): string | null {
-    const {
-      width,
-      height
-    } = this.coordinator.getSize()
-
-    return this.getSize(width, height)
-  }
-
-  /**
-   * Returns the scaling sizes.
-   *
-   * Возвращает размеры масштабирования.
-   */
-  protected getSizeForItem(): string | null {
-    const size = this.props.size
-
-    if (isFilled(size)) {
-      return size.toString().match(/%$/) ? this.getSize(size, size) : size.toString()
-    }
-
-    return null
-  }
-}

package/src/constructors/Image/ImageCalculation.ts

@@ -1,184 +0,0 @@
-import { type ImageSize } from './basicTypes'
-
-/**
- * A class for storing data for adaptive computation of image scaling for a specific group.
- *
- * Класс для хранения данных для адаптивного вычисления масштабирования изображения для конкретной группы.
- */
-export class ImageCalculation {
-  protected factorMax: number = 1
-
-  protected size: ImageSize = {
-    width: 0,
-    height: 0
-  }
-
-  protected offset: ImageSize = {
-    width: 7680,
-    height: 7680
-  }
-
-  /**
-   * Constructor
-   * @param name group name/ название группы
-   */
-  constructor(
-    protected readonly name: string
-  ) {
-  }
-
-  /**
-   * Checks whether the element belongs to the current group.
-   *
-   * Проверяет, принадлежит ли элемент к текущей группе.
-   * @param name name of the checked group/ название проверяемой группы
-   */
-  is(name: string): boolean {
-    return this.name === name
-  }
-
-  /**
-   * Checks if the group has elements with sizes. It is used to check if there is data for work.
-   *
-   * Проверяет, есть ли у группы элементы с размерами. Используется для проверки, есть ли данные для работы.
-   */
-  isSize(): boolean {
-    return Boolean(this.size.width || this.size.width)
-  }
-
-  /**
-   * Returns the maximum physical width.
-   *
-   * Возвращает максимальную физическую ширину.
-   */
-  getWidth(): number {
-    return this.size.width
-  }
-
-  /**
-   * Returns the maximum physical height.
-   *
-   * Возвращает максимальную физическую высоту.
-   */
-  getHeight(): number {
-    return this.size.height
-  }
-
-  /**
-   * Returns the actual width.
-   *
-   * Возвращает фактическую ширину.
-   */
-  getOffsetWidth(): number {
-    return this.offset.width
-  }
-
-  /**
-   * Returns the actual height.
-   *
-   * Возвращает фактическую высоту.
-   */
-  getOffsetHeight(): number {
-    return this.offset.height
-  }
-
-  /**
-   * Returns the maximum multiplier for scaling.
-   *
-   * Возвращает максимальный множитель для масштабирования.
-   */
-  getFactorMax(): number {
-    return this.factorMax
-  }
-
-  /**
-   * Updating size.width, if it is less than the selected value.
-   *
-   * Обновление size.width, если она меньше выбранного значения.
-   * @param width value of the selected width/ значение выбранной ширины
-   */
-  makeWidth(width: number): this {
-    if (width > this.size.width) {
-      this.size.width = width
-    }
-
-    return this
-  }
-
-  /**
-   * Updating size.height, if it is less than the selected value.
-   *
-   * Обновление size.height, если она меньше выбранного значения.
-   * @param height value of the selected height/ значение выбранной высоты
-   */
-  makeHeight(height: number): this {
-    if (height > this.size.height) {
-      this.size.height = height
-    }
-
-    return this
-  }
-
-  /**
-   * Updating offset.width, if it is larger than the selected value.
-   *
-   * Обновление offset.width, если она больше выбранного значения.
-   * @param width value of the selected width/ значение выбранной ширины
-   */
-  makeOffsetWidth(width: number): this {
-    if (width < this.offset.width) {
-      this.offset.width = width
-    }
-
-    return this
-  }
-
-  /**
-   * Updating offset.height, if it is larger than the selected value.
-   *
-   * Обновление offset.height, если она больше выбранного значения.
-   * @param height value of the selected height/ значение выбранной высоты
-   */
-  makeOffsetHeight(height: number): this {
-    if (height < this.offset.height) {
-      this.offset.height = height
-    }
-
-    return this
-  }
-
-  /**
-   * Changes the multiplier value if it is greater than the checked value.
-   *
-   * Изменяет значение множителя, если оно больше проверяемого значения.
-   * @param value values for verification/ значения для проверки
-   */
-  makeFactorMax(value: number): this {
-    if (value < this.factorMax) {
-      this.factorMax = value
-    }
-
-    return this
-  }
-
-  /**
-   * Restoring the value to its original state.
-   *
-   * Восстановление значения в изначальное состояние.
-   */
-  reset(): this {
-    this.factorMax = 1
-
-    this.size = {
-      width: 0,
-      height: 0
-    }
-
-    this.offset = {
-      width: 7680,
-      height: 7680
-    }
-
-    return this
-  }
-}

package/src/constructors/Image/ImageCalculationList.ts

@@ -1,61 +0,0 @@
-import { ImageCalculation } from './ImageCalculation'
-
-/**
- * Class for managing all ImageCalculation objects.
- *
- * Класс для управления всеми объектами ImageCalculation.
- */
-export class ImageCalculationList {
-  protected static items: ImageCalculation[] = []
-
-  /**
-   * Checks if the group has elements with sizes. It is used to check if there is data for work.
-   *
-   * Проверяет, есть ли у группы элементы с размерами. Используется для проверки, есть ли данные для работы.
-   */
-  static isSize(): boolean {
-    return this.items.find(item => item.isSize()) !== undefined
-  }
-
-  /**
-   * Returns an object with data for calculation by the name of its group.
-   *
-   * Возвращает объект с данными для вычисления по названию его группы.
-   * @param name group name/ название группы
-   */
-  static get(name: string): ImageCalculation {
-    return this.find(name) || this.init(name)
-  }
-
-  /**
-   * Resets all parameters for all groups.
-   *
-   * Сбрасывает все параметры для всех групп.
-   */
-  static reset(): void {
-    this.items.forEach(item => item.reset())
-  }
-
-  /**
-   * Search for the ImageCalculation object by the name of the group.
-   *
-   * Поиск объекта ImageCalculation по названию группы.
-   * @param name group name/ название группы
-   */
-  protected static find(name: string): ImageCalculation | undefined {
-    return this.items.find(item => item.is(name))
-  }
-
-  /**
-   * Creating a new ImageCalculation object by the name of the group.
-   *
-   * Создание нового объекта ImageCalculation по названию группы.
-   * @param name group name/ название группы
-   */
-  protected static init(name: string): ImageCalculation {
-    const item = new ImageCalculation(name)
-
-    this.items.push(item)
-    return item
-  }
-}