types#Background TypeScript Examples

The following examples show how to use types#Background. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: coodinateIsInInitialSpace.tsx    From grafana-weathermap-panel with Apache License 2.0 6 votes vote down vote up 
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;
}
Example #2
Source File: searchIDLimit.tsx    From grafana-weathermap-panel with Apache License 2.0 6 votes vote down vote up 
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],
  };
}
Example #3
Source File: display.tsx    From grafana-weathermap-panel with Apache License 2.0 6 votes vote down vote up 
/**
   * 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 });
  };
Example #4
Source File: display.tsx    From grafana-weathermap-panel with Apache License 2.0 6 votes vote down vote up 
/** 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 });
  };
Example #5
Source File: display.tsx    From grafana-weathermap-panel with Apache License 2.0 6 votes vote down vote up 
/** 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 });
  };
Example #6
Source File: display.tsx    From grafana-weathermap-panel with Apache License 2.0 6 votes vote down vote up 
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);
  };
Example #7
Source File: searchIDLimit.tsx    From grafana-weathermap-panel with Apache License 2.0 5 votes vote down vote up 
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;
}
Example #8
Source File: display.tsx    From grafana-weathermap-panel with Apache License 2.0 5 votes vote down vote up 
/** edit modeSVG */
  onChangeSwitchModeSVG = () => {
    const { options, onOptionsChange } = this.props;
    const oldValue: Background = options.baseMap;

    oldValue.modeSVG = !oldValue.modeSVG;
    onOptionsChange({ ...options, baseMap: oldValue });
  };
Example #9
Source File: SimplePanel.tsx    From grafana-weathermap-panel with Apache License 2.0 4 votes vote down vote up 
/**
   * 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();
  };