@dxtmisha/constructor 0.30.1 → 0.39.5

package/src/constructors/Image/ImageAdaptiveGroup.ts

@@ -1,230 +0,0 @@
-import { EventItem, forEach } from '@dxtmisha/functional'
-
-import { ImageAdaptiveItem } from './ImageAdaptiveItem'
-import { ImageCalculationList } from './ImageCalculationList'
-
-/**
- * Class for working with image scaling according to the physical size of the object in the image.
- *
- * Класс для работы с масштабированием изображения по физическому размеру объекта на изображении.
- */
-export class ImageAdaptiveGroup {
-  protected static objects: ImageAdaptiveItem[] = []
-  protected static objectsAdaptive: ImageAdaptiveItem[] = []
-
-  private static cache: string[] = []
-
-  protected static event?: EventItem<Window, Event, any>
-  protected static time?: boolean
-
-  /**
-   * Checks if an element is present in the list.
-   *
-   * Проверяет, присутствует ли элемент в списке.
-   * @param item object for working with images/ объект для работы с изображениями
-   */
-  static is(item: ImageAdaptiveItem): boolean {
-    return this.objects.findIndex(itemValue => itemValue === item) !== -1
-  }
-
-  /**
-   * Adding a new element for tracking.
-   *
-   * Добавление нового элемента для отслеживания.
-   * @param item object for working with images/ объект для работы с изображениями
-   */
-  static add(item: ImageAdaptiveItem): void {
-    if (!this.is(item)) {
-      this.objects.push(item)
-      this.make()
-    }
-  }
-
-  /**
-   * Removal of the element.
-   *
-   * Удаления элемента.
-   * @param item object for working with images/ объект для работы с изображениями
-   */
-  static remove(item: ImageAdaptiveItem): void {
-    const key = this.objects.findIndex(itemValue => itemValue === item)
-
-    if (key !== -1) {
-      this.objects.splice(key, 1)
-      this.cache = []
-    }
-
-    this.make()
-  }
-
-  /**
-   * Resets all cached data and rereads scaling for all elements.
-   *
-   * Обнуляет все кэшированные данные и перечитывает масштабирование для всех элементов.
-   */
-  static reset(): void {
-    this.cache = []
-    this.start()
-  }
-
-  /**
-   * Starts the calculation process or turns it off if there are no active elements in the list.
-   *
-   * Запускает процесс вычисления или отключает его, если в списке нет активных элементов.
-   */
-  static make(): void {
-    if (
-      this.event
-      && this.objects.length < 1
-    ) {
-      this.event.stop()
-      this.event = undefined
-    } else if (this.objects.length > 0) {
-      if (!this.event) {
-        this.event = new EventItem(window, ['scroll-sync'], () => this.start()).start()
-      }
-
-      if (!this.time) {
-        this.time = true
-        requestAnimationFrame(() => {
-          this.time = false
-          this.start()
-        })
-      }
-    }
-  }
-
-  /**
-   * Returns a list of elements that are visible or constantly being calculated.
-   *
-   * Возвращает список элементов, которые видны или постоянно вычисляются.
-   */
-  protected static getItemIdByVisible(): string[] {
-    return forEach(this.objectsAdaptive, item => item.getId())
-  }
-
-  /**
-   * Method for starting the calculation of scaling elements in the list.
-   *
-   * Метод для запуска вычисления масштабирования элементов в списке.
-   */
-  protected static start(): void {
-    if (this.isAdaptive()) {
-      this.makeAdaptive()
-
-      const visible = this.getItemIdByVisible()
-
-      if (this.isCache(visible)) {
-        this.cache = visible
-
-        this.makeSize()
-        this.makePercent()
-        this.makeFactorMax()
-      }
-    } else {
-      this.event?.stop()
-    }
-  }
-
-  /**
-   * Updates the list of elements available for calculation. These are the
-   * elements that are close to the border of the visible area.
-   *
-   * Обновляет список доступных для вычисления элементов. Это те элементы,
-   * которые близки к границе видимой области.
-   */
-  protected static makeAdaptive(): void {
-    this.objectsAdaptive = []
-    this.objects.forEach((item) => {
-      item.make()
-
-      if (item.isBeyond()) {
-        this.objectsAdaptive.push(item)
-      }
-    })
-  }
-
-  /**
-   * Calculates the dimensions of an element relative to the image size,
-   * the size of the element, and its physical location on the image.
-   *
-   * Вычисляет размеры элемента относительно размера изображения,
-   * размера элемента и его физического расположения на изображении.
-   */
-  protected static makeSize(): void {
-    ImageCalculationList.reset()
-
-    this.objectsAdaptive.forEach((item) => {
-      const element = item.element.value
-
-      if (element) {
-        ImageCalculationList.get(item.group.value)
-          .makeWidth(item.width.value)
-          .makeHeight(item.height.value)
-          .makeOffsetWidth(element.offsetWidth)
-          .makeOffsetHeight(element.offsetHeight)
-      }
-    })
-  }
-
-  /**
-   * Calculation of the basic scaling of an element without taking into account other elements.
-   *
-   * Вычисление базового масштабирования элемента без учета других элементов.
-   */
-  protected static makePercent(): void {
-    if (ImageCalculationList.isSize()) {
-      this.objectsAdaptive.forEach((item) => {
-        const element = item.element.value
-        const calculation = ImageCalculationList.get(item.group.value)
-
-        if (element) {
-          const width = calculation.getWidth()
-          const height = calculation.getHeight()
-
-          item.setPercent(
-            item.width.value * (width ? 1 / width : 0) * (calculation.getOffsetWidth() / element.offsetWidth),
-            item.height.value * (height ? 1 / height : 0) * (calculation.getOffsetHeight() / element.offsetHeight)
-          )
-        }
-      })
-    }
-  }
-
-  /**
-   * Calculation of the largest element to determine the base size.
-   * This parameter is used for scaling other elements,
-   * reducing them to the necessary proportion.
-   *
-   * Вычисление самого большого элемента для определения базового размера.
-   * Этот параметр используется для масштабирования других элементов,
-   * уменьшая их до нужной пропорции.
-   */
-  protected static makeFactorMax(): void {
-    if (ImageCalculationList.isSize()) {
-      this.objectsAdaptive.forEach((item) => {
-        ImageCalculationList.get(item.group.value)
-          .makeFactorMax(item.factor.value)
-      })
-    }
-  }
-
-  /**
-   * Checks if there is an active element at the moment.
-   *
-   * Проверяет, есть ли в текущий момент активный элемент.
-   */
-  private static isAdaptive(): boolean {
-    return Boolean(this.objects.find(item => item.is()))
-  }
-
-  /**
-   * Checks whether the composition of visible elements has changed.
-   *
-   * Проверяет, изменился ли состав видимых элементов.
-   * @param visible list of indices of visible elements/ список индексов видимых элементов
-   */
-  private static isCache(visible: string[]): boolean {
-    return this.cache.join('|') !== visible.join('|')
-  }
-}

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,140 +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.imageSrc.value
-
-    if (image) {
-      return `url("${image}")`
-    }
-
-    return null
-  })
-
-  /**
-   * Returns the image source/ Возвращает источник изображения
-   */
-  readonly imageSrc = computed<string | null>(() => {
-    const image = this.data.image.value
-
-    switch (typeof image) {
-      case 'string':
-        return image
-      case 'object':
-        return 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
-  }
-}