How to use openseadragon - 10 common examples

renderLayout() {
    const { world } = this.viewer
    const { mangaMode, bookMode } = this.props
    const pos = new OpenSeaDragon.Point(0, 0)
    const count = world.getItemCount()

    // Cache tile data
    let bounds = null
    // first page
    let firstPage = null
    let firstPageIndex = bookMode && mangaMode && count > 1 ? 1 : 0
    let firstPageBounds = null
    // Next page
    let nextPage = null
    let nextPageBounds = null
    let nextPageIndex = bookMode && mangaMode ? 0 : 1

    if (count > 0) {
      // Page view (single page)
      firstPage = world.getItemAt(firstPageIndex)

resize(viewer) {
    const { canvas } = this.props;
    const firstImage = viewer.world.getItemAt(0);
    if (!firstImage) {
      return;
    }
    const imgWidth = canvas.getWidth();
    const imgHeight = canvas.getHeight();
    const imgAspectRatio = imgWidth / imgHeight;
    const boundsRect = viewer.viewport.getBounds(true);
    const viewportOrigin = new OpenSeadragon.Point(
      boundsRect.x,
      boundsRect.y * imgAspectRatio
    );

    const viewportWidth = boundsRect.width;
    const viewportHeight = boundsRect.height * imgAspectRatio;

    // Redraw
    const viewportZoom = viewer.viewport.getZoom(true);
    const zoom = firstImage.viewportToImageZoom(viewportZoom);
    const imageRatio =
      (firstImage._scaleSpring.current.value *
        firstImage.viewport._containerInnerSize.x) /
      firstImage.source.dimensions.x;

    const isZoomedOut =

componentDidMount() {
    const { osdConfig, viewer } = this.props;
    if (!this.ref.current) {
      return;
    }

    this.viewer = new OpenSeadragon({
      id: this.ref.current.id,
      ...osdConfig,
    });

    this.osdCanvasOverlay = new OpenSeadragonCanvasOverlay(this.viewer);
    this.viewer.addHandler('update-viewport', this.onUpdateViewport);
    // Set a flag when OSD starts animating (so that viewer updates are not used)
    this.viewer.addHandler('animation-start', () => {
      this.osdUpdating = true;
    });
    this.viewer.addHandler('animation-finish', this.onViewportChange);
    this.viewer.addHandler('animation-finish', () => {
      this.osdUpdating = false;
    });

    this.updateCanvas = this.canvasUpdateCallback();

mounted() {
            this.viewer = OpenSeadragon({
                id: "osd_viewer",
                // need to change this to use the images in the node module
                prefixUrl: "https://cdn.jsdelivr.net/npm/openseadragon@2.4/build/openseadragon/images/",
                sequenceMode: false,
                tileSources: []
            });
        }
    }

componentDidMount() {
    this.setStrings();

    if (typeof window.OpenSeadragon !== 'undefined') {
      OPENSEADRAGONVIEWER = window.OpenSeadragon(this._config());
    } else {
      OPENSEADRAGONVIEWER = OpenSeadragon(this._config());
    }
    // Start at the image specified in the URL
    OPENSEADRAGONVIEWER.goToPage(this.props.currentPageId);
  }

initOpenSeaDragon = () => {
    const { id, container, pages, renderError, updateContextState } = this.props

    // Detect browser vendor
    this.browser = getKeyByValue(OpenSeaDragon.BROWSERS, OpenSeaDragon.Browser.vendor)

    // Create viewer
    this.viewer = OpenSeaDragon({
      element: this.OSDContainer.current,
      tileSources: pages[0],
      ...OSDConfig,
    })

    // Events handler
    this.viewer.addHandler('open', () => {
      this.renderLayout()
      this.fitBounds()

      // Prevent unessesart context updates
      if (renderError) {
        updateContextState({ renderError: false })
      }
    })

initOpenSeaDragon = () => {
    const { id, container, pages, renderError, updateContextState } = this.props

    // Detect browser vendor
    this.browser = getKeyByValue(OpenSeaDragon.BROWSERS, OpenSeaDragon.Browser.vendor)

    // Create viewer
    this.viewer = OpenSeaDragon({
      element: this.OSDContainer.current,
      tileSources: pages[0],
      ...OSDConfig,
    })

    // Events handler
    this.viewer.addHandler('open', () => {
      this.renderLayout()
      this.fitBounds()

      // Prevent unessesart context updates
      if (renderError) {
        updateContextState({ renderError: false })

},
            });
            reAddFullScreenHandler(viewer);
            // to allow margins around horizontally and vertically oriented images on home zoom
            const margins = viewer.viewport.getMargins();
            viewer.viewport.setMargins(
              {
                left: 30,
                top: 10,
                right: 30,
                bottom: 10,
              },
              margins,
            );
            viewer.addControl(document.querySelector('#details-button'), {
              anchor: OpenSeadragon.ControlAnchor.TOP_LEFT,
            });
            // an empty label that 508 scan doesnt like
            document.querySelector('.openseadragon-container label').remove();
            setViewer(viewer);
          }
        });
    },

componentDidMount() {
    const {getRef, onImageLoaded, tileSource} = this.props;
    if (!tileSource) {
      console.error('Something went wrong, we cannot display the open sea dragon');
      this.setState({ fallback: true });
      return;
    }
    this.setState({ fallback: false });
    this.viewer = new OpenSeadragon({
      element: this.element,
      ajaxWithCredentials: false,
      showNavigator: true,
      showRotationControl: true,
      defaultZoomLevel: 0,
      maxZoomPixelRatio: 1,
      navigatorPosition: 'BOTTOM_RIGHT',
      animationTime: 0.3,
      immediateRender: true,
      preserveViewport: true,
      blendTime: 0.1,
      minPixelRatio: 0.5,
      visibilityRatio: 0.65,
      constrainDuringPan: false,
      showSequenceControl: false,
      showNavigationControl: false,

componentDidMount() {
    const { getRef, onImageLoaded, tileSources, osdOptions } = this.props;
    if (!tileSources) {
      console.error(
        'Something went wrong, we cannot display the open sea dragon'
      );
      this.setState({ fallback: true });
      return;
    }
    this.setState({ fallback: false });
    this.viewer = new OpenSeadragon({
      element: this.element,
      ajaxWithCredentials: false,
      showNavigator: true,
      showRotationControl: true,
      defaultZoomLevel: 0,
      maxZoomPixelRatio: 1,
      navigatorPosition: 'BOTTOM_RIGHT',
      animationTime: 0.3,
      immediateRender: true,
      preserveViewport: true,
      blendTime: 0.1,
      minPixelRatio: 0.5,
      visibilityRatio: 0.65,
      minZoomImageRatio: 1,
      constrainDuringPan: false,
      showSequenceControl: false,