@jbrowse/core 1.6.7 → 1.7.0

package/util/offscreenCanvasPonyfill.js

@@ -1,823 +1,18 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createImageBitmap = exports.createCanvas = exports.PonyfillOffscreenContext = exports.PonyfillOffscreenCanvas = exports.ImageBitmapType = void 0;
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _svgPathGenerator = _interopRequireDefault(require("svg-path-generator"));
-
-var _color = _interopRequireDefault(require("color"));
-
-var _detectNode = _interopRequireDefault(require("detect-node"));
-
-/* eslint-disable no-restricted-globals */
-// This is a ponyfill for the HTML5 OffscreenCanvas API.
-var createCanvas;
-exports.createCanvas = createCanvas;
-var createImageBitmap;
-exports.createImageBitmap = createImageBitmap;
-var ImageBitmapType;
-exports.ImageBitmapType = ImageBitmapType;
-var weHave = {
-  realOffscreenCanvas: typeof OffscreenCanvas === 'function',
-  node: _detectNode.default
-};
-
-var PonyfillOffscreenContext = /*#__PURE__*/function () {
-  function PonyfillOffscreenContext(width, height) {
-    (0, _classCallCheck2.default)(this, PonyfillOffscreenContext);
-    this.width = width;
-    this.height = height;
-    this.commands = [];
-    this.currentFont = '12px Courier New, monospace';
-  } // setters (no getters working)
-
-
-  (0, _createClass2.default)(PonyfillOffscreenContext, [{
-    key: "strokeStyle",
-    set: function set(style) {
-      if (style !== this.currentStrokeStyle) {
-        this.commands.push({
-          type: 'strokeStyle',
-          style: style
-        });
-        this.currentStrokeStyle = style;
-      }
-    }
-  }, {
-    key: "fillStyle",
-    set: function set(style) {
-      if (style !== this.currentFillStyle) {
-        this.commands.push({
-          type: 'fillStyle',
-          style: style
-        });
-        this.currentFillStyle = style;
-      }
-    }
-  }, {
-    key: "font",
-    set: function set(style) {
-      this.currentFont = style;
-      this.commands.push({
-        type: 'font',
-        style: style
-      });
-    } // methods
-
-  }, {
-    key: "arc",
-    value: function arc() {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      this.commands.push({
-        type: 'arc',
-        args: args
-      });
-    }
-  }, {
-    key: "arcTo",
-    value: function arcTo() {
-      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-        args[_key2] = arguments[_key2];
-      }
-
-      this.commands.push({
-        type: 'arcTo',
-        args: args
-      });
-    }
-  }, {
-    key: "bezierCurveTo",
-    value: function bezierCurveTo() {
-      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-        args[_key3] = arguments[_key3];
-      }
-
-      this.commands.push({
-        type: 'bezierCurveTo',
-        args: args
-      });
-    }
-  }, {
-    key: "beginPath",
-    value: function beginPath() {
-      for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-        args[_key4] = arguments[_key4];
-      }
-
-      this.commands.push({
-        type: 'beginPath',
-        args: args
-      });
-    }
-  }, {
-    key: "clearRect",
-    value: function clearRect() {
-      for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
-        args[_key5] = arguments[_key5];
-      }
-
-      this.commands.push({
-        type: 'clearRect',
-        args: args
-      });
-    }
-  }, {
-    key: "clip",
-    value: function clip() {
-      for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
-        args[_key6] = arguments[_key6];
-      }
-
-      this.commands.push({
-        type: 'clip',
-        args: args
-      });
-    }
-  }, {
-    key: "closePath",
-    value: function closePath() {
-      for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
-        args[_key7] = arguments[_key7];
-      }
-
-      this.commands.push({
-        type: 'closePath',
-        args: args
-      });
-    }
-  }, {
-    key: "createLinearGradient",
-    value: function createLinearGradient() {
-      for (var _len8 = arguments.length, args = new Array(_len8), _key8 = 0; _key8 < _len8; _key8++) {
-        args[_key8] = arguments[_key8];
-      }
-
-      this.commands.push({
-        type: 'createLinearGradient',
-        args: args
-      });
-    }
-  }, {
-    key: "createPattern",
-    value: function createPattern() {
-      for (var _len9 = arguments.length, args = new Array(_len9), _key9 = 0; _key9 < _len9; _key9++) {
-        args[_key9] = arguments[_key9];
-      }
-
-      this.commands.push({
-        type: 'createPattern',
-        args: args
-      });
-    }
-  }, {
-    key: "createRadialGradient",
-    value: function createRadialGradient() {
-      for (var _len10 = arguments.length, args = new Array(_len10), _key10 = 0; _key10 < _len10; _key10++) {
-        args[_key10] = arguments[_key10];
-      }
-
-      this.commands.push({
-        type: 'createRadialGradient',
-        args: args
-      });
-    }
-  }, {
-    key: "drawFocusIfNeeded",
-    value: function drawFocusIfNeeded() {
-      for (var _len11 = arguments.length, args = new Array(_len11), _key11 = 0; _key11 < _len11; _key11++) {
-        args[_key11] = arguments[_key11];
-      }
-
-      this.commands.push({
-        type: 'drawFocusIfNeeded',
-        args: args
-      });
-    }
-  }, {
-    key: "drawImage",
-    value: function drawImage() {
-      for (var _len12 = arguments.length, args = new Array(_len12), _key12 = 0; _key12 < _len12; _key12++) {
-        args[_key12] = arguments[_key12];
-      }
-
-      this.commands.push({
-        type: 'drawImage',
-        args: args
-      });
-    }
-  }, {
-    key: "ellipse",
-    value: function ellipse() {
-      for (var _len13 = arguments.length, args = new Array(_len13), _key13 = 0; _key13 < _len13; _key13++) {
-        args[_key13] = arguments[_key13];
-      }
-
-      this.commands.push({
-        type: 'ellipse',
-        args: args
-      });
-    }
-  }, {
-    key: "fill",
-    value: function fill() {
-      for (var _len14 = arguments.length, args = new Array(_len14), _key14 = 0; _key14 < _len14; _key14++) {
-        args[_key14] = arguments[_key14];
-      }
-
-      this.commands.push({
-        type: 'fill',
-        args: args
-      });
-    }
-  }, {
-    key: "fillRect",
-    value: function fillRect() {
-      for (var _len15 = arguments.length, args = new Array(_len15), _key15 = 0; _key15 < _len15; _key15++) {
-        args[_key15] = arguments[_key15];
-      }
-
-      var x = args[0],
-          y = args[1],
-          w = args[2],
-          h = args[3]; // avoid rendering offscreen contents
-
-      if (x > this.width || x + w < 0) {
-        return;
-      }
-
-      var nx = Math.max(x, 0);
-      var nw = w - (nx - x);
-      this.commands.push({
-        type: 'fillRect',
-        args: [nx, y, nw, h]
-      });
-    }
-  }, {
-    key: "fillText",
-    value: function fillText() {
-      for (var _len16 = arguments.length, args = new Array(_len16), _key16 = 0; _key16 < _len16; _key16++) {
-        args[_key16] = arguments[_key16];
-      }
-
-      // if (x > this.width || x + 1000 < 0) {
-      //   return
-      // }
-      this.commands.push({
-        type: 'fillText',
-        args: args
-      });
-    }
-  }, {
-    key: "lineTo",
-    value: function lineTo() {
-      for (var _len17 = arguments.length, args = new Array(_len17), _key17 = 0; _key17 < _len17; _key17++) {
-        args[_key17] = arguments[_key17];
-      }
-
-      this.commands.push({
-        type: 'lineTo',
-        args: args
-      });
-    }
-  }, {
-    key: "measureText",
-    value: function measureText(text) {
-      var height = +this.currentFont.match(/\d+/)[0];
-      return {
-        width: height / 2 * text.length,
-        height: height
-      };
-    }
-  }, {
-    key: "moveTo",
-    value: function moveTo() {
-      for (var _len18 = arguments.length, args = new Array(_len18), _key18 = 0; _key18 < _len18; _key18++) {
-        args[_key18] = arguments[_key18];
-      }
-
-      this.commands.push({
-        type: 'moveTo',
-        args: args
-      });
-    }
-  }, {
-    key: "quadraticCurveTo",
-    value: function quadraticCurveTo() {
-      for (var _len19 = arguments.length, args = new Array(_len19), _key19 = 0; _key19 < _len19; _key19++) {
-        args[_key19] = arguments[_key19];
-      }
-
-      this.commands.push({
-        type: 'quadraticCurveTo',
-        args: args
-      });
-    }
-  }, {
-    key: "rect",
-    value: function rect() {
-      for (var _len20 = arguments.length, args = new Array(_len20), _key20 = 0; _key20 < _len20; _key20++) {
-        args[_key20] = arguments[_key20];
-      }
-
-      this.commands.push({
-        type: 'rect',
-        args: args
-      });
-    }
-  }, {
-    key: "restore",
-    value: function restore() {
-      for (var _len21 = arguments.length, args = new Array(_len21), _key21 = 0; _key21 < _len21; _key21++) {
-        args[_key21] = arguments[_key21];
-      }
-
-      this.commands.push({
-        type: 'restore',
-        args: args
-      });
-    }
-  }, {
-    key: "rotate",
-    value: function rotate() {
-      for (var _len22 = arguments.length, args = new Array(_len22), _key22 = 0; _key22 < _len22; _key22++) {
-        args[_key22] = arguments[_key22];
-      }
-
-      this.commands.push({
-        type: 'rotate',
-        args: args
-      });
-    }
-  }, {
-    key: "save",
-    value: function save() {
-      for (var _len23 = arguments.length, args = new Array(_len23), _key23 = 0; _key23 < _len23; _key23++) {
-        args[_key23] = arguments[_key23];
-      }
-
-      this.commands.push({
-        type: 'save',
-        args: args
-      });
-    }
-  }, {
-    key: "setLineDash",
-    value: function setLineDash() {
-      for (var _len24 = arguments.length, args = new Array(_len24), _key24 = 0; _key24 < _len24; _key24++) {
-        args[_key24] = arguments[_key24];
-      }
-
-      this.commands.push({
-        type: 'setLineDash',
-        args: args
-      });
-    }
-  }, {
-    key: "setTransform",
-    value: function setTransform() {
-      for (var _len25 = arguments.length, args = new Array(_len25), _key25 = 0; _key25 < _len25; _key25++) {
-        args[_key25] = arguments[_key25];
-      }
-
-      this.commands.push({
-        type: 'setTransform',
-        args: args
-      });
-    }
-  }, {
-    key: "scale",
-    value: function scale() {
-      for (var _len26 = arguments.length, args = new Array(_len26), _key26 = 0; _key26 < _len26; _key26++) {
-        args[_key26] = arguments[_key26];
-      }
-
-      this.commands.push({
-        type: 'scale',
-        args: args
-      });
-    }
-  }, {
-    key: "stroke",
-    value: function stroke() {
-      for (var _len27 = arguments.length, args = new Array(_len27), _key27 = 0; _key27 < _len27; _key27++) {
-        args[_key27] = arguments[_key27];
-      }
-
-      this.commands.push({
-        type: 'stroke',
-        args: args
-      });
-    }
-  }, {
-    key: "strokeRect",
-    value: function strokeRect() {
-      for (var _len28 = arguments.length, args = new Array(_len28), _key28 = 0; _key28 < _len28; _key28++) {
-        args[_key28] = arguments[_key28];
-      }
-
-      this.commands.push({
-        type: 'strokeRect',
-        args: args
-      });
-    }
-  }, {
-    key: "strokeText",
-    value: function strokeText() {
-      for (var _len29 = arguments.length, args = new Array(_len29), _key29 = 0; _key29 < _len29; _key29++) {
-        args[_key29] = arguments[_key29];
-      }
-
-      this.commands.push({
-        type: 'strokeText',
-        args: args
-      });
-    }
-  }, {
-    key: "transform",
-    value: function transform() {
-      for (var _len30 = arguments.length, args = new Array(_len30), _key30 = 0; _key30 < _len30; _key30++) {
-        args[_key30] = arguments[_key30];
-      }
-
-      this.commands.push({
-        type: 'transform',
-        args: args
-      });
-    }
-  }, {
-    key: "translate",
-    value: function translate() {
-      for (var _len31 = arguments.length, args = new Array(_len31), _key31 = 0; _key31 < _len31; _key31++) {
-        args[_key31] = arguments[_key31];
-      }
-
-      this.commands.push({
-        type: 'translate',
-        args: args
-      });
-    } // unsupported
-    //   putImageData(...args)
-    //   createImageData(...args)
-    //   getImageData(...args)
-    //   getLineDash(...args)
-    //   getTransform(...args)
-
-  }]);
-  return PonyfillOffscreenContext;
-}();
-
-exports.PonyfillOffscreenContext = PonyfillOffscreenContext;
-
-function splitColor(color) {
-  var fill = (0, _color.default)(color);
-  return {
-    hex: fill.hex(),
-    opacity: fill.alpha()
-  };
-} // https://stackoverflow.com/a/5620441/2129219
-
-
-function parseFont(font) {
-  var fontFamily = null;
-  var fontSize = null;
-  var fontStyle = 'normal';
-  var fontWeight = 'normal';
-  var fontVariant = 'normal';
-  var lineHeight = 'normal';
-  var elements = font.split(/\s+/);
-  var element;
-
-  outer: while (element = elements.shift()) {
-    switch (element) {
-      case 'normal':
-        break;
-
-      case 'italic':
-      case 'oblique':
-        fontStyle = element;
-        break;
-
-      case 'small-caps':
-        fontVariant = element;
-        break;
-
-      case 'bold':
-      case 'bolder':
-      case 'lighter':
-      case '100':
-      case '200':
-      case '300':
-      case '400':
-      case '500':
-      case '600':
-      case '700':
-      case '800':
-      case '900':
-        fontWeight = element;
-        break;
-
-      default:
-        if (!fontSize) {
-          var parts = element.split('/');
-          fontSize = parts[0];
-
-          if (parts.length > 1) {
-            lineHeight = parts[1];
-          }
-
-          break;
-        }
-
-        fontFamily = element;
-
-        if (elements.length) {
-          fontFamily += " ".concat(elements.join(' '));
-        }
-
-        break outer;
-    }
-  }
-
-  return {
-    fontStyle: fontStyle,
-    fontVariant: fontVariant,
-    fontWeight: fontWeight,
-    fontSize: fontSize,
-    lineHeight: lineHeight,
-    fontFamily: fontFamily
-  };
-}
-
-var PonyfillOffscreenCanvas = /*#__PURE__*/function () {
-  function PonyfillOffscreenCanvas(width, height) {
-    (0, _classCallCheck2.default)(this, PonyfillOffscreenCanvas);
-    this.width = width;
-    this.height = height;
-  }
-
-  (0, _createClass2.default)(PonyfillOffscreenCanvas, [{
-    key: "getContext",
-    value: function getContext(type) {
-      if (type !== '2d') {
-        throw new Error("unknown type ".concat(type));
-      }
-
-      this.context = new PonyfillOffscreenContext(this.width, this.height);
-      return this.context;
-    }
-  }, {
-    key: "getSerializedSvg",
-    value: function getSerializedSvg() {
-      var currentFill;
-      var currentStroke;
-      var currentPath = [];
-      var rotation;
-      var font;
-      var nodes = [];
-      this.context.commands.forEach(function (command, index) {
-        if (command.type === 'font') {
-          if (command.style) {
-            // stackoverflow.com/questions/5618676
-            // skip lineHeight in the final usage
-            var _parseFont = parseFont(command.style),
-                fontStyle = _parseFont.fontStyle,
-                fontFamily = _parseFont.fontFamily,
-                fontSize = _parseFont.fontSize;
-
-            font = {
-              fontStyle: fontStyle,
-              fontFamily: fontFamily,
-              fontSize: fontSize
-            };
-          }
-        }
-
-        if (command.type === 'fillStyle') {
-          if (command.style) {
-            currentFill = command.style;
-          }
-        }
-
-        if (command.type === 'strokeStyle') {
-          if (command.style) {
-            currentStroke = command.style;
-          }
-        }
 
-        if (command.type === 'fillRect') {
-          var _command$args = (0, _slicedToArray2.default)(command.args, 4),
-              x = _command$args[0],
-              y = _command$args[1],
-              w = _command$args[2],
-              h = _command$args[3];
+var _ponyfill = require("./offscreenCanvas/ponyfill");
 
-          var _splitColor = splitColor(currentFill),
-              hex = _splitColor.hex,
-              opacity = _splitColor.opacity;
-
-          var ny = Math.min(y, y + h);
-          var nh = Math.abs(h);
-          nodes.push( /*#__PURE__*/_react.default.createElement("rect", {
-            key: index,
-            fill: hex,
-            fillOpacity: opacity !== 1 ? opacity : undefined,
-            x: x.toFixed(3),
-            y: ny.toFixed(3),
-            width: w.toFixed(3),
-            height: nh.toFixed(3)
-          }));
-        }
-
-        if (command.type === 'fillText') {
-          var _command$args2 = (0, _slicedToArray2.default)(command.args, 3),
-              text = _command$args2[0],
-              _x = _command$args2[1],
-              _y = _command$args2[2];
-
-          var _splitColor2 = splitColor(currentFill),
-              _hex = _splitColor2.hex,
-              _opacity = _splitColor2.opacity;
-
-          nodes.push( /*#__PURE__*/_react.default.createElement("text", (0, _extends2.default)({
-            key: index,
-            fill: _hex,
-            fillOpacity: _opacity !== 1 ? _opacity : undefined,
-            x: _x.toFixed(3),
-            y: _y.toFixed(3)
-          }, font), text));
-        }
-
-        if (command.type === 'beginPath') {
-          currentPath = [];
-        }
-
-        if (command.type === 'moveTo') {
-          currentPath.push(command.args);
-        }
-
-        if (command.type === 'lineTo') {
-          currentPath.push(command.args);
-        }
-
-        if (command.type === 'closePath') {
-          /* do nothing */
-        }
-
-        if (command.type === 'fill') {
-          var _Path;
-
-          var path = (_Path = (0, _svgPathGenerator.default)()).moveTo.apply(_Path, (0, _toConsumableArray2.default)(currentPath[0]));
-
-          for (var i = 1; i < currentPath.length; i++) {
-            var _path;
-
-            path = (_path = path).lineTo.apply(_path, (0, _toConsumableArray2.default)(currentPath[i]));
-          }
-
-          path.end();
-
-          var _splitColor3 = splitColor(currentFill),
-              _hex2 = _splitColor3.hex,
-              _opacity2 = _splitColor3.opacity;
-
-          nodes.push( /*#__PURE__*/_react.default.createElement("path", {
-            key: index,
-            fill: _hex2,
-            d: path,
-            fillOpacity: _opacity2 !== 1 ? _opacity2 : undefined
-          }));
-        }
-
-        if (command.type === 'stroke') {
-          var _Path2;
-
-          var _path2 = (_Path2 = (0, _svgPathGenerator.default)()).moveTo.apply(_Path2, (0, _toConsumableArray2.default)(currentPath[0]));
-
-          for (var _i = 1; _i < currentPath.length; _i++) {
-            var _path3;
-
-            _path2 = (_path3 = _path2).lineTo.apply(_path3, (0, _toConsumableArray2.default)(currentPath[_i]));
-          }
-
-          _path2.end();
-
-          var _splitColor4 = splitColor(currentStroke),
-              _hex3 = _splitColor4.hex,
-              _opacity3 = _splitColor4.opacity;
-
-          nodes.push( /*#__PURE__*/_react.default.createElement("path", {
-            key: index,
-            fill: "none",
-            stroke: _hex3,
-            fillOpacity: _opacity3 !== 1 ? _opacity3 : undefined,
-            d: _path2
-          }));
-        }
-
-        if (command.type === 'rotate') {
-          rotation = command.args[0] * 180 / Math.PI;
-        }
-      });
-      return rotation ? /*#__PURE__*/_react.default.createElement("g", {
-        transform: "rotate(".concat(rotation, ")")
-      }, [].concat(nodes)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, [].concat(nodes));
+Object.keys(_ponyfill).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ponyfill[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ponyfill[key];
     }
-  }]);
-  return PonyfillOffscreenCanvas;
-}();
-
-exports.PonyfillOffscreenCanvas = PonyfillOffscreenCanvas;
-
-if (weHave.realOffscreenCanvas) {
-  exports.createCanvas = createCanvas = function createCanvas(width, height) {
-    return new OffscreenCanvas(width, height);
-  };
-
-  exports.createImageBitmap = createImageBitmap = window.createImageBitmap || self.createImageBitmap;
-  exports.ImageBitmapType = ImageBitmapType = window.ImageBitmap || self.ImageBitmap;
-} else if (weHave.node) {
-  // use node-canvas if we are running in node (i.e. automated tests)
-  var _require = require('canvas'),
-      nodeCreateCanvas = _require.createCanvas,
-      Image = _require.Image;
-
-  exports.createCanvas = createCanvas = nodeCreateCanvas;
-
-  exports.createImageBitmap = createImageBitmap = /*#__PURE__*/function () {
-    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(canvas) {
-      var dataUri,
-          img,
-          _args = arguments;
-      return _regenerator.default.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              if (!(_args.length <= 1 ? 0 : _args.length - 1)) {
-                _context.next = 2;
-                break;
-              }
-
-              throw new Error('only one-argument uses of createImageBitmap are supported by the node offscreencanvas ponyfill');
-
-            case 2:
-              dataUri = canvas.toDataURL();
-              img = new Image();
-              return _context.abrupt("return", new Promise(function (resolve, reject) {
-                img.onload = function () {
-                  return resolve(img);
-                };
-
-                img.onerror = reject;
-                img.src = dataUri;
-              }));
-
-            case 5:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function createImageBitmap(_x2) {
-      return _ref.apply(this, arguments);
-    };
-  }();
-
-  exports.ImageBitmapType = ImageBitmapType = Image;
-} else {
-  exports.createCanvas = createCanvas = function createCanvas(width, height) {
-    return new PonyfillOffscreenCanvas(width, height);
-  };
-
-  exports.createImageBitmap = createImageBitmap = function createImageBitmap(canvas) {
-    return canvas.context;
-  };
-
-  exports.ImageBitmapType = ImageBitmapType = (0, _typeof2.default)('StringArray');
-}
+  });
+});