pinafore/src/routes/_components/dialog/components/PinchZoomable.html

<div class="pinch-zoom {className ? className : ''}" >
  <pinch-zoom class="pinch-zoom-inner" ref:node>
    <slot></slot>
  </pinch-zoom>
  <IconButton
    className="pinch-zoom-button pinch-zoom-button-zoom-out"
    muted={true}
    label="Zoom out"
    href="#fa-search-minus"
    on:click="zoomOut()"
  />
  <IconButton
    className="pinch-zoom-button pinch-zoom-button-zoom-in"
    muted={true}
    label="Zoom in"
    href="#fa-search-plus"
    on:click="zoomIn()"
  />
</div>
<style>
  .pinch-zoom {
    position: relative;
  }
  .pinch-zoom-inner {
    width: 100%;
    height: 100%;
  }

  :global(.icon-button.pinch-zoom-button) {
    position: absolute;
    z-index: 110;
    bottom: 10px;
    background: var(--mask-opaque-bg);
  }

  :global(.pinch-zoom-button-zoom-in) {
    right: 10px;
  }

  :global(.pinch-zoom-button-zoom-out) {
    left: 10px;
  }

  @media (max-width: 767px) {
    :global(.pinch-zoom-button-zoom-in) {
      right: 5px;
    }

    :global(.pinch-zoom-button-zoom-out) {
      left: 5px;
    }
  }

  @media (max-width: 320px) {
    :global(.icon-button.pinch-zoom-button) {
      padding-left: 5px;
      padding-right: 5px;
    }
  }
</style>
<script>
  import IconButton from '../../IconButton.html'
  import 'pinch-zoom-element/dist/pinch-zoom.js'

  const ZOOM_INCREMENT = 0.1

  export default {
    components: {
      IconButton
    },
    methods: {
      zoomIn () {
        this.zoomBy(ZOOM_INCREMENT)
      },
      zoomOut () {
        this.zoomBy(-ZOOM_INCREMENT)
      },
      zoomBy (increment) {
        let { node } = this.refs
        let scale = node.scale || 1
        node.scaleTo(scale + increment, {
          originX: '50%',
          originY: '50%'
        })
      }
    }
  }
</script>