iframe-proxy | Sunbelt Computer Software

104 lines (87 loc) · 2.62 KB

import React, { Component, createRef } from 'react';
import HTMLViewer from '@metacell/geppetto-meta-ui/html-viewer/HTMLViewer';
import { withStyles } from '@material-ui/core/styles';
import { CircularProgress } from '@material-ui/core';
import { primaryColor } from '../../theme';
const style = ({ palette }) => ({
  container: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'inherit',
class CustomHTMLViewer extends Component {
  containerRef = createRef();
  dimensions = {
    width: 200,
    height: 200,
  componentDidMount () {
    window.addEventListener('resize', this.delayedResize.bind(this));
    this.resizeIfNeeded(true);
  componentDidUpdate () {
    this.resizeIfNeeded(true);
  componentWillUnmount () {
    clearTimeout(this.timer);
    window.removeEventListener('resize', this.delayedResize);
  getParentSize () {
    if (this.containerRef.current === null) {
      return false;
    return this.containerRef.current.parentNode.getBoundingClientRect();
  getSvgComponent () {
    // svg element
    return this.containerRef?.current?.children[0]?.children[0]?.children[0];
  wasParentResized (dimensions) {
    return dimensions.width !== this.dimensions.width || dimensions.height !== this.dimensions.height;
  adjustSVGSize () {
    const svg = this.getSvgComponent();
    if (svg) {
      const width = (this.dimensions.width - 20) > 0 ? `${this.dimensions.width - 20}px` : '0px';
      const height = (this.dimensions.height - 20) > 0 ? `${this.dimensions.height - 20}px` : '0px';
      svg.removeAttribute('width');
      svg.removeAttribute('height');
      svg.setAttribute('width', width);
      svg.setAttribute('height', height);
  resizeIfNeeded (force = false) {
    const dimensions = this.getParentSize();
    if ((dimensions !== false && this.wasParentResized(dimensions)) || (force)) {
      this.dimensions = dimensions;
      this.adjustSVGSize();
  delayedResize () {
    this.timer = setTimeout(() => this.resizeIfNeeded(), 100);
  render () {
    const { classes, content } = this.props;
    if (content === undefined) {
      return (
        <CircularProgress
          color={primaryColor}
          style={{
            position: 'absolute',
            margin: 'auto',
            top: '50%',
            left: '50%',
    return (
      <div id="plot" className={classes.container} ref={this.containerRef}>
        <HTMLViewer {...this.props} style={{ backgroundColor: 'inherit' }} />
      </div>
export default withStyles(style)(CustomHTMLViewer);

Sunbelt Computer Software

PL/B Language Development and Support

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Sunbelt Computer Software

PL/B Language Development and Support

Uh oh!

FilesExpand file tree

HTMLViewer.js

Latest commit

History

HTMLViewer.js

File metadata and controls