@dxtmisha/constructor 0.23.0 → 0.39.3

package/src/constructors/Image/ImageCoordinator.ts

@@ -1,104 +0,0 @@
-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

@@ -1,99 +0,0 @@
-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

@@ -1,137 +0,0 @@
-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

@@ -1,137 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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
-  })
-}