types#Background TypeScript Examples

coordinateIsInInitialSpace = (x: number, y: number, initial: CoordinateSpaceInitial, baseMap: Background) => {
  //console.log(x + ' ' + y);
  const initialPx: Coord4DInt = pixelToPercent(initial.coordinate, baseMap);
  //console.log(initialPx);
  if (x < initialPx.xMin) {
    //console.log('error');
    return 0;
  }
  if (x > initialPx.xMax) {
    //console.log('error');
    return 0;
  }
  if (y < initialPx.yMin) {
    //console.log('error');
    return 0;
  }
  if (y > initialPx.yMax) {
    //console.log('error');
    return 0;
  }
  //console.log('is ok');
  return 1;
}

pixelToPercent = (coordinate: Coord4D, baseMap: Background): Coor4DNum => {
  const limit: number[] = [
    parseInt(coordinate.xMin, 10),
    parseInt(coordinate.xMax, 10),
    parseInt(coordinate.yMin, 10),
    parseInt(coordinate.yMax, 10),
  ];

  limit[0] = convertInitialCoordinate(limit[0]);
  limit[1] = convertInitialCoordinate(limit[1]);
  limit[2] = convertInitialCoordinate(limit[2]);
  limit[3] = convertInitialCoordinate(limit[3]);

  const sizeHeight: number = parseInt(baseMap.height, 10);
  const sizeWidth: number = parseInt(baseMap.width, 10);
  const percent = 100;

  limit[0] = limit[0] / percent || 0;
  limit[0] = sizeWidth * limit[0];
  limit[1] = limit[1] / percent || 0;
  limit[1] = sizeWidth * limit[1];
  limit[2] = limit[2] / percent || 0;
  limit[2] = sizeHeight * limit[2];
  limit[3] = limit[3] / percent || 0;
  limit[3] = sizeHeight * limit[3];
  return {
    xMin: limit[0],
    xMax: limit[1],
    yMin: limit[2],
    yMax: limit[3],
  };
}

/**
   * Change background picture
   */
  onImageChanged = (e: {
    /**
     * Get target element
     */
    target: HTMLInputElement;
  }) => {
    const newBaseMap: Background = this.props.options.baseMap;
    const image = e.target.value;
    //const arrayImage = image.split('.');
    newBaseMap.image = image;
    // if (image.split(',')[0] === 'base64') {
    //   // on ne fait rien car la base 64 peut être un jpeg ou un svg
    //   // l'utilisateur doit bien le spécifier avant sur le switch Use SVG
    // } else if (image.split('.')[arrayImage.length - 1] === 'svg') {
    //   // si la valeur renseignée est une url et que l'extension du fichier est svg
    //   // on passe automatiquement le swith Use SVG à true
    //   newBaseMap.modeSVG = true;
    // } else {
    //   // si la valeur renseignée est une url et que l'extension du fichier n'est pas un svg
    //   // on passe automatiquement le swith Use SVG à false
    //   newBaseMap.modeSVG = false;
    // }
    this.props.onOptionsChange({
      ...this.props.options,
      baseMap: newBaseMap,
    });
    // this.props.onOptionsChange({ ...this.props.options, imageUrl: event.target.value });
  };

/** edit modeSVG */
  onChangeHeightBaseMap = (e: {
    /** new value for height */
    target: HTMLInputElement;
  }) => {
    this.props.options.updateOnlyInitialSpace = false;
    const { options, onOptionsChange } = this.props;
    const oldValue: Background = options.baseMap;

    oldValue.height = e.target.value;
    onOptionsChange({ ...options, baseMap: oldValue });
  };

/** edit modeSVG */
  onChangeWidthBaseMap = (e: {
    /** new value for width */
    target: HTMLInputElement;
  }) => {
    this.props.options.updateOnlyInitialSpace = false;
    const { options, onOptionsChange } = this.props;
    const oldValue: Background = options.baseMap;

    oldValue.width = e.target.value;
    onOptionsChange({ ...options, baseMap: oldValue });
  };

uploadImage = (event: any) => {
    const readerFile: FileReader = new FileReader();
    const selectedFile: any = event.target.files[0];
    const extensionFile = selectedFile.name.split('.')[1];
    let file: any;
    if (extensionFile === 'jpg' || extensionFile === 'png' || extensionFile === 'gif') {
      readerFile.readAsDataURL(selectedFile);
    } else {
      readerFile.readAsText(selectedFile);
    }
    readerFile.onload = function () {
      file = readerFile.result;
    };

    setTimeout(() => {
      let newBaseMap: Background = this.props.options.baseMap;
      if (extensionFile === 'svg') {
        newBaseMap.image = file;
        newBaseMap.modeSVG = true;
        newBaseMap.isUploaded = true;
        newBaseMap.nameUploadedImage = selectedFile.name;
      } else if (extensionFile === 'jpg' || extensionFile === 'png' || extensionFile === 'gif') {
        newBaseMap.image = file;
        newBaseMap.modeSVG = false;
        newBaseMap.isUploaded = true;
        newBaseMap.nameUploadedImage = selectedFile.name;
      }
      this.props.onOptionsChange({
        ...this.props.options,
        baseMap: newBaseMap,
      });
    }, 1000);
  };

returnAllId = (coordinate: Coord4D, baseMap: Background): string[] => {
  const arrId: string[] = [];
  const arrIdVerif: string[] = [];
  const listElement: NodeListOf<Element> | undefined = document.getElementById(baseMap.idSVG)?.querySelectorAll('*[id]');
  //console.log(listElement);
  // const filtered = [listElement].filter();
  //     function(e) {
  //       return
  //     },
  //     [octpath,octrect,octellipse]
  // );

  //console.log(listElement);

  if (listElement) {
    // const limit: number[] = [
    //   parseInt(coordinate.xMin, 10),
    //   parseInt(coordinate.xMax, 10),
    //   parseInt(coordinate.yMin, 10),
    //   parseInt(coordinate.yMax, 10),
    // ];

    // limit[0] = convertInitialCoordinate(limit[0]);
    // limit[1] = convertInitialCoordinate(limit[1]);
    // limit[2] = convertInitialCoordinate(limit[2]);
    // limit[3] = convertInitialCoordinate(limit[3]);

    // const sizeHeight: number = parseInt(baseMap.height, 10);
    // const sizeWidth: number = parseInt(baseMap.width, 10);
    // const percent = 100;

    // limit[0] = limit[0] / percent || 0;
    // limit[0] = sizeWidth * limit[0];
    // limit[1] = limit[1] / percent || 0;
    // limit[1] = sizeWidth * limit[1];
    // limit[2] = limit[2] / percent || 0;
    // limit[2] = sizeHeight * limit[2];
    // limit[3] = limit[3] / percent || 0;
    // limit[3] = sizeHeight * limit[3];
    // const coordInt = pixelToPercent(coordinate, baseMap);
    // const limit: number[] = [coordInt.xMin, coordInt.xMax, coordInt.yMin, coordInt.yMax];
    Array.from(listElement).forEach((e: Element) => {
      //console.log(e);
      // if (!regionIsOverLimit(document.getElementById(e.id), limit)) {
      //   //console.log('is pushed');
      //   arrId.push(e.id);
      // }
      if (e.localName === 'path' || e.localName === 'rect' || e.localName === 'ellipse') {
        arrId.push(e.id);
      }
      arrIdVerif.push(e.id);
    });
    //console.log(arrId.length);
    arrId.sort((a: string, b: string) => {
      if (a < b) {
        return -1;
      }
      if (a > b) {
        return 1;
      }
      return 0;
    });
  } else {
    console.error('id svg not found');
  }
  return arrId;
}

/** edit modeSVG */
  onChangeSwitchModeSVG = () => {
    const { options, onOptionsChange } = this.props;
    const oldValue: Background = options.baseMap;

    oldValue.modeSVG = !oldValue.modeSVG;
    onOptionsChange({ ...options, baseMap: oldValue });
  };

/**
   * update button css when mount component
   */
  componentDidMount = async () => {
    // not display Button of Panel if it is in the mode View
    this.checkIfDisplayButton();

    // save background in state
    // this.setState({
    //   currentImage: this.props.options.baseMap.image,
    // });
    if (this.props.options.baseMap.image !== '') {
      this.setState({
        currentImage: this.props.options.baseMap.image,
      });
    }

    // load backgroundSVG
    if (this.props.options.baseMap.modeSVG && this.props.options.baseMap.image !== '') {
      if (this.props.options.baseMap.isUploaded) {
        let width = '';
        let height = '';
        const text = this.props.options.baseMap.image;
        this.setState({ svg: text });
        const result = /id=["']\w*["']/i.exec(text);
        const resultWidth = /width=["']\w*["']/i.exec(text);
        if (resultWidth && resultWidth.length > 0) {
          width = resultWidth[0].split('"')[1];
        }
        const resultHeight = /height=["']\w*["']/i.exec(text);
        if (resultHeight && resultHeight.length > 0) {
          height = resultHeight[0].split('"')[1];
        }
        if (result && result.length > 0) {
          const id: string[] = result[0].split('"');
          if (id.length > 1) {
            const newBaseMap: Background = this.props.options.baseMap;
            newBaseMap.idSVG = id[1];
            newBaseMap.layerImage = this.props.options.baseMap.image;
            newBaseMap.width = parseInt(width || '0', 10).toString() || '';
            newBaseMap.height = parseInt(height || '0', 10).toString() || '';
            this.props.onOptionsChange({
              ...this.props.options,
              baseMap: newBaseMap,
            });
          }
        }
        this.chargeRegion();
      } else {
        fetch(this.props.options.baseMap.image)
          .then((res) => res.text())
          .then((text) => {
            let data: any;
            if (this.props.options.baseMap.image.split(',')[0] === 'base64') {
              data = atob(this.props.options.baseMap.image.split(',')[1]);
            } else {
              data = text;
            }
            this.setState({ svg: data });
            const result = /id=["']\w*["']/i.exec(data);
            if (result && result.length > 0) {
              const id: string[] = result[0].split('"');
              if (id.length > 1) {
                const documentId = document.getElementById(id[1]);
                if (documentId) {
                  const newBaseMap: Background = this.props.options.baseMap;
                  newBaseMap.idSVG = id[1];
                  // newBaseMap.width = documentId.getAttribute('width') || '';
                  // newBaseMap.height = documentId.getAttribute('height') || '';
                  newBaseMap.width = parseInt(documentId.getAttribute('width') || '0', 10).toString() || '';
                  newBaseMap.height = parseInt(documentId.getAttribute('height') || '0', 10).toString() || '';
                  this.props.onOptionsChange({
                    ...this.props.options,
                    baseMap: newBaseMap,
                  });
                }
              }
            }
          })
          .then(() => this.chargeRegion())
          .then(() => {
            const newStr: string = this.editIdString(this.state.svg);
            const background: Background = this.props.options.baseMap;
            background.layerImage = newStr;
            this.props.onOptionsChange({ ...this.props.options, baseMap: background });
          });
      }
    } else {
      this.chargeRegion();
    }

    //Set value initialSpace with width and height of background
    const coordinateSpace: CoordinateSpaceInitial = this.props.options.coordinateSpaceInitial;
    coordinateSpace.coordinate.xMax = this.props.options.baseMap.width || '0';
    coordinateSpace.coordinate.yMax = this.props.options.baseMap.height || '0';
    // if (coordinateSpace.coordinate.xMax === '') {
    //   coordinateSpace.coordinate.xMax = '0';
    // }
    // if (!coordinateSpace.coordinate.yMax) {
    //   coordinateSpace.coordinate.yMax = '0';
    // }
    // this.props.onOptionsChange({
    //   ...this.props.options,
    //   coordinateSpaceInitial: coordinateSpace,
    // });
    this.updateButtonCss();
  };