@teipublisher/pb-components/src/pb-svg.js

Collection of webcomponents underlying TEI Publisher

import { LitElement, html, css } from 'lit-element';
import '@lrnwebcomponents/es-global-bridge';
import { pbMixin } from './pb-mixin.js';

/**
 * Show an SVG image with zoom and pan functionality. The image URL may
 * either be specified via the `url` property or an `pb-show-annotation` event
 * sent to this component. A relative URL will be resolved against the current API context.
 *
 * @fires pb-show-annotation - When received, loads the image from the URL passed in property `file`
 * within the event
 * @cssprop --pb-svg-height - Height of the SVG element
 * @cssprop --pb-svg-width - Width of the SVG element
 */
export class PbSvg extends pbMixin(LitElement) {
  static get properties() {
    return {
      ...super.properties,
      /**
       * The URL to load the SVG from.
       */
      url: {
        type: String,
      },
    };
  }

  constructor() {
    super();
    this._pan = null;
  }

  connectedCallback() {
    super.connectedCallback();

    window.ESGlobalBridge.requestAvailability();
    window.ESGlobalBridge.instance.load(
      'svg-pan-zoom',
      `https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js`,
    );

    this.subscribeTo('pb-show-annotation', ev => {
      if (this.url === ev.detail.file) {
        return;
      }
      this.url = ev.detail.file;
    });
  }

  firstUpdated() {
    super.firstUpdated();

    this.container = this.shadowRoot.getElementById('image');
  }

  updated(changed) {
    if (changed.has('url') && this.url && this.url !== changed.get('url')) {
      this.load();
    }
  }

  load() {
    if (!this.url) {
      return;
    }
    const uri = this.toAbsoluteURL(this.url);
    console.log('<pb-svg> Loading %s', uri);
    if (this._pan) {
      this._pan.destroy();
      this._pan = null;
      this.container.innerHTML = '';
    }
    fetch(uri)
      .then(response => response.text())
      .then(data => {
        if (!window.svgPanZoom) {
          console.error('<pb-svg> svgPanZoom not available');
          return;
        }
        const doc = new DOMParser().parseFromString(data, 'image/svg+xml');
        const svg = doc.documentElement;
        this.container.appendChild(svg);
        this._pan = window.svgPanZoom(svg, {
          controlIconsEnabled: true,
          fit: true,
          center: true,
        });
      });
  }

  render() {
    return html`<div id="image"></div>`;
  }

  static get styles() {
    return css`
      :host {
        display: block;
      }

      #image svg {
        height: var(--pb-svg-height, 100%);
        width: var(--pb-svg-width, 100%);
      }
    `;
  }
}
customElements.define('pb-svg', PbSvg);