UNPKG

react-map-gl

Version:

A React wrapper for MapboxGL-js and overlay API.

129 lines (99 loc) 4.13 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports["default"] = void 0; var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck")); var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass")); var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn")); var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf")); var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized")); var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits")); var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); var _react = require("react"); var _propTypes = _interopRequireDefault(require("prop-types")); var _baseControl = _interopRequireDefault(require("../components/base-control")); var _globals = require("../utils/globals"); var propTypes = Object.assign({}, _baseControl["default"].propTypes, { redraw: _propTypes["default"].func.isRequired }); var defaultProps = { captureScroll: false, captureDrag: false, captureClick: false, captureDoubleClick: false }; var CanvasOverlay = function (_BaseControl) { (0, _inherits2["default"])(CanvasOverlay, _BaseControl); function CanvasOverlay() { var _getPrototypeOf2; var _this; (0, _classCallCheck2["default"])(this, CanvasOverlay); for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } _this = (0, _possibleConstructorReturn2["default"])(this, (_getPrototypeOf2 = (0, _getPrototypeOf3["default"])(CanvasOverlay)).call.apply(_getPrototypeOf2, [this].concat(args))); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_canvas", void 0); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_ctx", void 0); (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_redraw", function () { var ctx = _this._ctx; if (!ctx) { return; } var pixelRatio = _globals.window.devicePixelRatio || 1; ctx.save(); ctx.scale(pixelRatio, pixelRatio); var _this$_context = _this._context, viewport = _this$_context.viewport, isDragging = _this$_context.isDragging; _this.props.redraw({ width: viewport.width, height: viewport.height, ctx: ctx, isDragging: isDragging, project: viewport.project.bind(viewport), unproject: viewport.unproject.bind(viewport) }); ctx.restore(); }); return _this; } (0, _createClass2["default"])(CanvasOverlay, [{ key: "componentDidMount", value: function componentDidMount() { var canvas = this._containerRef.current; if (canvas) { this._canvas = canvas; this._ctx = canvas.getContext('2d'); } this._redraw(); } }, { key: "_render", value: function _render() { var pixelRatio = _globals.window.devicePixelRatio || 1; var _this$_context$viewpo = this._context.viewport, width = _this$_context$viewpo.width, height = _this$_context$viewpo.height; this._redraw(); return (0, _react.createElement)('canvas', { ref: this._containerRef, width: width * pixelRatio, height: height * pixelRatio, style: { width: "".concat(width, "px"), height: "".concat(height, "px"), position: 'absolute', left: 0, top: 0 } }); } }]); return CanvasOverlay; }(_baseControl["default"]); exports["default"] = CanvasOverlay; (0, _defineProperty2["default"])(CanvasOverlay, "propTypes", propTypes); (0, _defineProperty2["default"])(CanvasOverlay, "defaultProps", defaultProps); //# sourceMappingURL=canvas-overlay.js.map