@dxtmisha/constructor 0.23.0

package/src/constructors/Image/ImageCoordinator.ts

@@ -0,0 +1,104 @@
+import { computed } from 'vue'
+import { isArray, type Undefined } from '@dxtmisha/functional'
+
+import type { ImageCoordinatorItem, ImageSize } from './basicTypes'
+import type { ImageProps } from './props'
+
+type ImageCoordinatorItemFull = [number, number, number, number]
+
+/**
+ * A class for calculating the central part of the image by its coordinates.
+ *
+ * Класс для вычисления центральной части изображения по его координатам.
+ */
+export class ImageCoordinator {
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   */
+  constructor(
+    protected readonly props: ImageProps
+  ) {
+  }
+
+  /**
+   * Returns coordinates.
+   *
+   * Возвращает координаты.
+   */
+  readonly coordinator = computed<ImageCoordinatorItemFull>(() => {
+    if (this.is()) {
+      const coordinator: number[] = this.props.coordinator
+
+      switch (coordinator.length) {
+        case 1:
+          return [
+            coordinator[0] ?? 0,
+            coordinator[0] ?? 0,
+            coordinator[0] ?? 0,
+            coordinator[0] ?? 0
+          ]
+        case 2:
+          return [
+            coordinator[0] ?? 0,
+            coordinator[1] ?? 0,
+            coordinator[0] ?? 0,
+            coordinator[1] ?? 0
+          ]
+
+        case 3:
+          return [
+            coordinator[0] ?? 0,
+            coordinator[1] ?? 0,
+            coordinator[2] ?? 0,
+            coordinator[1] ?? 0
+          ]
+        case 4:
+          return coordinator as ImageCoordinatorItemFull
+      }
+    }
+
+    return [0, 0, 0, 0]
+  })
+
+  /**
+   * Returns the sizes for the background-position property by coordinates.
+   *
+   * Возвращает размеры для свойства background-position по координатам.
+   */
+  readonly size = computed<ImageSize>(() => {
+    const coordinator = this.coordinator.value
+
+    return {
+      width: 100 - coordinator[1] - coordinator[3],
+      height: 100 - coordinator[2] - coordinator[0]
+    }
+  })
+
+  /**
+   * Checks if there are coordinates for calculation.
+   *
+   * Проверяет, есть ли координаты для вычисления.
+   */
+  is(): this is { coordinator: Exclude<ImageCoordinatorItem, Undefined> } {
+    const coordinator = this.props.coordinator
+
+    return isArray(coordinator)
+      && coordinator.length > 0
+      && coordinator.length < 5
+  }
+
+  /**
+   * Returns the values for the background property.
+   *
+   * Возвращает значения для свойства background.
+   */
+  getSize(): ImageSize<string> {
+    const item = this.size.value
+
+    return {
+      width: `${100 / item.width * 100}%`,
+      height: `${100 / item.height * 100}%`
+    }
+  }
+}

package/src/constructors/Image/ImageData.ts

@@ -0,0 +1,99 @@
+import { type Ref, ref, watchEffect } from 'vue'
+import { Icons, isString, type Undefined } from '@dxtmisha/functional'
+
+import { ImageFile } from './ImageFile'
+import { ImagePdf } from './ImagePdf'
+
+import { ImageType } from './ImageType'
+
+import { type ImageEventItem, type ImageItem, ImageTypeValue } from './basicTypes'
+import { type ImageProps } from './props'
+
+/**
+ * A class for obtaining image or icon data.
+ *
+ * Класс для получения данных изображения или иконки.
+ */
+export class ImageData {
+  /**
+   * Returns images.
+   *
+   * Возвращает изображения.
+   */
+  readonly image = ref<ImageEventItem>()
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param type image type/ тип изображения
+   */
+  constructor(
+    protected readonly props: ImageProps,
+    protected readonly type: ImageType
+  ) {
+    watchEffect(async () => {
+      this.image.value = await this.init()
+    })
+  }
+
+  /**
+   * Checks if there are values.
+   *
+   * Проверяет, есть ли значения.
+   */
+  is(): this is { image: Exclude<ImageEventItem, Undefined> } {
+    return this.image.value !== undefined
+  }
+
+  /**
+   * Checks if the value is a link, that is, a type of string.
+   *
+   * Проверяет, является ли значение ссылкой, то есть видом строки.
+   */
+  isLink(): this is { image: Ref<string> } {
+    return this.is() && typeof this.image.value === 'string'
+  }
+
+  /**
+   * Checks if the value is an image object.
+   *
+   * Проверяет, является ли значение объектом изображения.
+   */
+  isImage(): this is { image: Ref<ImageItem> } {
+    return this.is() && typeof this.image.value !== 'string'
+  }
+
+  /**
+   * Calculates the image value and returns it.
+   *
+   * Вычисляет значение изображения и возвращает его.
+   */
+  protected async init(): Promise<ImageEventItem> {
+    const image = this.props.value
+
+    if (image) {
+      switch (this.type.item.value) {
+        case ImageTypeValue.pdf:
+          return await ImagePdf.get(image)
+        case ImageTypeValue.image:
+        case ImageTypeValue.file:
+          try {
+            return await ImageFile.createImage(image)
+          } catch {
+            console.error('ImageData.initImage: ', image)
+          }
+          break
+        case ImageTypeValue.public:
+        case ImageTypeValue.icon:
+        case ImageTypeValue.flag:
+          if (isString(image)) {
+            return await Icons.get(image, this.props.url)
+          }
+
+          break
+      }
+    }
+
+    return undefined
+  }
+}

package/src/constructors/Image/ImageDesign.tsx

@@ -0,0 +1,137 @@
+import { h, type VNode } from 'vue'
+import {
+  type ConstrOptions,
+  type ConstrStyles,
+  DesignConstructorAbstract
+} from '@dxtmisha/functional'
+
+import { Image } from './Image'
+
+import { ImageTypeValue } from './basicTypes'
+import {
+  type ImagePropsBasic
+} from './props'
+import {
+  type ImageClasses,
+  type ImageComponents,
+  type ImageEmits,
+  type ImageExpose,
+  type ImageSlots
+} from './types'
+
+/**
+ * ImageDesign
+ */
+export class ImageDesign<
+  COMP extends ImageComponents,
+  EXPOSE extends ImageExpose,
+  CLASSES extends ImageClasses,
+  P extends ImagePropsBasic
+> extends DesignConstructorAbstract<
+    HTMLDivElement,
+    COMP,
+    ImageEmits,
+    EXPOSE,
+    ImageSlots,
+    CLASSES,
+    P
+  > {
+  protected readonly item: Image
+
+  /**
+   * Constructor
+   * @param name class name/ название класса
+   * @param props properties/ свойства
+   * @param options list of additional parameters/ список дополнительных параметров
+   */
+  constructor(
+    name: string,
+    props: Readonly<P>,
+    options?: ConstrOptions<COMP, ImageEmits, P>
+  ) {
+    super(
+      name,
+      props,
+      options
+    )
+
+    this.item = new Image(
+      this.props,
+      this.element,
+      this.getName(),
+      this.emits
+    )
+
+    this.init()
+  }
+
+  /**
+   * Initialization of all the necessary properties for work
+   *
+   * Инициализация всех необходимых свойств для работы.
+   */
+  protected initExpose(): EXPOSE {
+    return {
+      type: this.item.type.item,
+      data: this.item.data.image
+    } as EXPOSE
+  }
+
+  /**
+   * Improvement of the obtained list of classes.
+   *
+   * Доработка полученного списка классов.
+   */
+  protected initClasses(): Partial<CLASSES> {
+    return {
+      main: this.item.classes.value,
+      ...{
+        // :classes [!] System label / Системная метка
+        // :classes [!] System label / Системная метка
+      }
+    } as Partial<CLASSES>
+  }
+
+  /**
+   * Refinement of the received list of styles.
+   *
+   * Доработка полученного списка стилей.
+   */
+  protected initStyles(): ConstrStyles {
+    return this.item.styles.value
+  }
+
+  /**
+   * A method for rendering.
+   *
+   * Метод для рендеринга.
+   */
+  protected initRender(): VNode {
+    return h(
+      'span',
+      {
+        ...this.getAttrs(),
+        ref: this.element,
+        class: this.classes?.value.main,
+        style: this.styles?.value,
+        translate: 'no'
+      },
+      this.renderValue()
+    )
+  }
+
+  /**
+   * Rendering the value for the component.
+   *
+   * Рендеринг значения для компонента.
+   */
+  readonly renderValue = (): string | VNode[] | undefined => {
+    if (
+      this.item.type.item.value === ImageTypeValue.pdf
+    ) {
+      return [h('object', { data: this.item.data.image.value })]
+    }
+
+    return this.item.text.value
+  }
+}

package/src/constructors/Image/ImageFile.ts

@@ -0,0 +1,137 @@
+import type { ImageItem } from './basicTypes'
+import { isDomRuntime } from '@dxtmisha/functional'
+
+/**
+ * Maximum size allowed without conversion.
+ *
+ * Максимальный размер, допустимый без преобразования.
+ */
+export const MAX_SIZE: number = 1280
+
+/**
+ * Class for working with uploaded images.
+ *
+ * Класс для работы с загруженными изображениями.
+ */
+export class ImageFile {
+  /**
+   * Checks if the file is an image.
+   *
+   * Проверяет, является ли файл изображением.
+   * @param file verified file/ проверяемый файл
+   */
+  static isImage(file: File): boolean {
+    return Boolean(file.type.match(/^image\//))
+  }
+
+  /**
+   * Creates an image based on a file or a link.
+   *
+   * Создает изображение на основе файла или ссылки.
+   * @param src file or link/ файл или ссылка
+   */
+  static createImage(src: string | File): Promise<ImageItem | undefined> {
+    return new Promise((resolve) => {
+      if (src) {
+        const image = new Image()
+
+        image.onerror = () => resolve(undefined)
+        image.onload = () => {
+          resolve({
+            image,
+            src: this.getSRC(image, src),
+            width: image.naturalWidth,
+            height: image.naturalHeight
+          })
+        }
+
+        (async () => {
+          image.src = src instanceof File ? await this.getFileResult(src) : src
+        })()
+      } else {
+        resolve(undefined)
+      }
+    })
+  }
+
+  /**
+   * Returns a link to the image.
+   *
+   * Возвращает ссылку на изображение.
+   * @param src file or link/ файл или ссылка
+   */
+  static async getPath(src: string | File): Promise<string> {
+    return this.createImage(src).then(item => item?.src ?? '')
+  }
+
+  /**
+   * Applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer.
+   *
+   * Асинхронно читать содержимое файлов (или буферы данных), хранящиеся на компьютере пользователя.
+   * @param file the Blob or File from which to read/ Blob или File которые следует прочитать
+   */
+  static getFileResult(file: File): Promise<string> {
+    return new Promise((resolve) => {
+      if (this.isImage(file)) {
+        this.getFileReader(file).then(result => resolve(result))
+      } else {
+        resolve('')
+      }
+    })
+  }
+
+  /**
+   * Applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer.
+   *
+   * Асинхронно читать содержимое файлов (или буферы данных), хранящиеся на компьютере пользователя.
+   * @param file the Blob or File from which to read/ Blob или File которые следует прочитать
+   */
+  static getFileReader(file: File): Promise<string> {
+    return new Promise((resolve) => {
+      const reader = new FileReader()
+      reader.onload = () => resolve(typeof reader.result === 'string' ? reader.result : '')
+      reader.readAsDataURL(file)
+    })
+  }
+
+  /**
+   * Image size adaptation. Checks if the image size is larger than maxSize, reduces it to maxSize.
+   *
+   * Адаптация размера изображения. Проверяет, если размер изображения больше maxSize, уменьшает его до maxSize.
+   * @param image image element/ элемент изображения
+   * @param src link to image/ ссылка на изображение
+   * @param maxSize maximum allowable image size/ максимальный допустимый размер изображения
+   */
+  protected static getSRC(
+    image: HTMLImageElement,
+    src?: string | File,
+    maxSize = MAX_SIZE as number
+  ): string {
+    if (
+      isDomRuntime()
+      && (
+        src instanceof File
+        || src === undefined
+      )
+      && (
+        image.naturalHeight > maxSize
+        || image.naturalWidth > maxSize
+      )
+    ) {
+      const is = image.naturalWidth >= image.naturalHeight
+      const canvas = document.createElement('canvas')?.getContext('2d')
+
+      if (canvas) {
+        canvas.canvas.width = is ? maxSize : (image.naturalWidth / image.naturalHeight * maxSize)
+        canvas.canvas.height = is ? (image.naturalHeight / image.naturalWidth * maxSize) : maxSize
+        canvas.drawImage(image, 0, 0, canvas.canvas.width, canvas.canvas.height)
+
+        return canvas.canvas.toDataURL()
+      } else {
+        return ''
+      }
+    } else {
+      return image.src
+    }
+  }
+}

package/src/constructors/Image/ImageInclude.ts

@@ -0,0 +1,53 @@
+import { computed, type VNode } from 'vue'
+import { type ConstrEmit, DesignComponents, getBind, getRef, type RefOrNormal } from '@dxtmisha/functional'
+
+import type { ImageEventData, ImageComponentsInclude, ImageEmitsInclude, ImagePropsInclude } from './basicTypes'
+
+/**
+ * Класс для подключения и работы с компонентом изображения.
+ *
+ * A class for connecting to and working with the image component.
+ */
+export class ImageInclude {
+  /**
+   * Constructor for working with images.
+   *
+   * Конструктор для работы с изображениями.
+   * @param props input parameter/ входной параметр
+   * @param components object for working with components/ объект для работы с компонентами
+   * @param emits the function is called when an event is triggered/ функция вызывается, когда срабатывает событие
+   * @param extra additional parameter/ дополнительный параметр
+   */
+  constructor(
+    protected readonly props: ImagePropsInclude,
+    protected readonly components?: DesignComponents<ImageComponentsInclude, ImagePropsInclude>,
+    protected readonly emits?: ConstrEmit<ImageEmitsInclude>,
+    protected readonly extra?: RefOrNormal<Record<string, any>>
+  ) {
+  }
+
+  /**
+   * Проверяет, есть ли изображение/ Checks if an image exists
+   */
+  readonly isImage = computed<boolean>(() => Boolean(this.props.image))
+
+  /**
+   * Возвращает данные для передачи компоненту/ Returns data to pass to the component
+   */
+  readonly bind = computed(() => getBind(this.props.image, getRef(this.extra), 'value'))
+
+  render(): VNode[] {
+    if (
+      this.components
+      && this.isImage.value
+    ) {
+      return this.components.render('image', this.bind.value)
+    }
+
+    return []
+  }
+
+  onLoad(event: ImageEventData) {
+    this.emits?.('load', event)
+  }
+}

package/src/constructors/Image/ImagePdf.ts

@@ -0,0 +1,44 @@
+import { isString } from '@dxtmisha/functional'
+
+import { ImageFile } from './ImageFile'
+
+const IMAGE_PDF_TOOL = '#toolbar=0&scrollbar=1'
+
+/**
+ * Class for working with PDF files.
+ *
+ * Класс для работы с PDF-файлами.
+ */
+export class ImagePdf {
+  /**
+   * Checks if the file is an image.
+   *
+   * Проверяет, является ли файл PDF.
+   * @param file verified file/ проверяемый файл
+   */
+  static isPdf(file: string | File): boolean {
+    if (isString(file)) {
+      return Boolean(file.match(/\.pdf$/i))
+    }
+
+    return Boolean(file.type.match(/\/pdf$/i))
+  }
+
+  /**
+   * Applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer.
+   *
+   * Асинхронно читать содержимое файлов (или буферы данных), хранящиеся на компьютере пользователя.
+   * @param file the Blob or File from which to read/ Blob или File которые следует прочитать
+   */
+  static async get(file: string | File): Promise<string> {
+    if (isString(file)) {
+      return `${file}${IMAGE_PDF_TOOL}`
+    }
+
+    if (this.isPdf(file)) {
+      return `${(await ImageFile.getFileReader(file))}${IMAGE_PDF_TOOL}`
+    }
+
+    return ''
+  }
+}

package/src/constructors/Image/ImagePosition.ts

@@ -0,0 +1,49 @@
+import { computed } from 'vue'
+
+import { ImageCoordinator } from './ImageCoordinator'
+
+import type { ImageProps } from './props'
+
+/**
+ * A class for obtaining data for the background-position property.
+ *
+ * Класс для получения данных для свойства background-position.
+ */
+export class ImagePosition {
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param coordinator coordinates for margins/ координаты для отступов
+   */
+  constructor(
+    protected readonly props: ImageProps,
+    protected readonly coordinator: ImageCoordinator
+  ) {
+  }
+
+  /**
+   * Returns the position on the left.
+   *
+   * Возвращает позицию слева.
+   */
+  readonly x = computed<string>(() => {
+    if (this.coordinator.is()) {
+      return `${this.coordinator.coordinator.value[3] + (this.coordinator.size.value.width / 2)}%`
+    }
+
+    return this.props.x?.toString() || 'center'
+  })
+
+  /**
+   * Returns the position on the top.
+   *
+   * Возвращает позицию сверху.
+   */
+  readonly y = computed<string>(() => {
+    if (this.coordinator.is()) {
+      return `${this.coordinator.coordinator.value[0] + (this.coordinator.size.value.height / 2)}%`
+    }
+
+    return this.props.y?.toString() || 'center'
+  })
+}

package/src/constructors/Image/ImageType.ts

@@ -0,0 +1,83 @@
+import { computed } from 'vue'
+import { GEO_FLAG_ICON_NAME, Icons, isFilled } from '@dxtmisha/functional'
+
+import { ImagePdf } from './ImagePdf'
+
+import { type ImageTypeItem, ImageTypeValue } from './basicTypes'
+import type { ImageProps } from './props'
+
+/**
+ * Class for working with the image type.
+ *
+ * Класс для работы с типом изображения.
+ */
+export class ImageType {
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   */
+  constructor(
+    protected readonly props: ImageProps
+  ) {
+  }
+
+  /**
+   * Get the image type.
+   *
+   * Получения тип изображения.
+   */
+  readonly item = computed<ImageTypeItem>(() => {
+    const image = this.props.value
+
+    if (
+      image instanceof File
+      || isFilled(image)
+    ) {
+      if (ImagePdf.isPdf(image)) {
+        return ImageTypeValue.pdf
+      }
+
+      if (image instanceof File) {
+        return ImageTypeValue.file
+      }
+
+      if (image.match(/\//)) {
+        return ImageTypeValue.image
+      }
+
+      if (image.match(GEO_FLAG_ICON_NAME)) {
+        return ImageTypeValue.icon
+      }
+
+      if (image.match(/^#/)) {
+        return ImageTypeValue.color
+      }
+
+      if (image.match(/^@/)) {
+        return ImageTypeValue.public
+      }
+
+      if (image.match(/^\$/)) {
+        return ImageTypeValue.material
+      }
+
+      if (image.match(/^flag-[a-z]{2}$/)) {
+        return ImageTypeValue.flag
+      }
+
+      const sub = image.match(/^(outlined|round|sharp|material)-/)
+
+      if (sub) {
+        return sub[1] as ImageTypeItem
+      }
+
+      if (Icons.is(image)) {
+        return ImageTypeValue.public
+      }
+
+      return ImageTypeValue.outlined
+    }
+
+    return undefined
+  })
+}