rlayers/ROverlay.js

React Components for OpenLayers

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        if (typeof b !== "function" && b !== null)
            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ROverlayBase = void 0;
var react_1 = __importDefault(require("react"));
var ol_1 = require("ol");
var REvent_1 = require("./REvent");
/**
 * A basic overlay
 *
 * Requires a location context
 *
 * (ie it must be descendant of a `RFeature`)
 *
 * @name ROverlay
 * @constructor
 */
var ROverlayBase = /** @class */ (function (_super) {
    __extends(ROverlayBase, _super);
    function ROverlayBase(props) {
        var _this = _super.call(this, props) || this;
        _this.ol = new ol_1.Overlay({
            autoPan: props.autoPan,
            offset: props.offset,
            positioning: props.positioning
        });
        _this.containerRef = react_1.default.createRef();
        return _this;
    }
    ROverlayBase.prototype.setPosition = function () {
        var _a;
        this.ol.setPosition(this.context.location);
        if (this.props.autoPosition && ((_a = this.containerRef) === null || _a === void 0 ? void 0 : _a.current)) {
            this.containerRef.current.style.position = 'absolute';
            var pixel = this.context.map.getPixelFromCoordinate(this.context.location);
            var size = this.context.map.getSize();
            if (pixel[0] > size[0] / 2) {
                this.containerRef.current.style.left = null;
                this.containerRef.current.style.right = '0px';
            }
            else {
                this.containerRef.current.style.left = '0px';
                this.containerRef.current.style.right = null;
            }
            if (pixel[1] > size[1] / 2) {
                this.containerRef.current.style.top = null;
                this.containerRef.current.style.bottom = '0px';
            }
            else {
                this.containerRef.current.style.top = '0px';
                this.containerRef.current.style.bottom = null;
            }
        }
    };
    ROverlayBase.prototype.refresh = function (prevProps) {
        _super.prototype.refresh.call(this, prevProps);
        this.ol.setElement(this.containerRef.current);
        this.setPosition();
        if (this.props.offset !== (prevProps === null || prevProps === void 0 ? void 0 : prevProps.offset)) {
            this.ol.setOffset(this.props.offset);
        }
        if (this.props.positioning !== (prevProps === null || prevProps === void 0 ? void 0 : prevProps.positioning)) {
            this.ol.setPositioning(this.props.positioning);
        }
    };
    ROverlayBase.prototype.componentDidMount = function () {
        _super.prototype.componentDidMount.call(this);
        this.context.map.addOverlay(this.ol);
    };
    ROverlayBase.prototype.componentWillUnmount = function () {
        _super.prototype.componentWillUnmount.call(this);
        this.context.map.removeOverlay(this.ol);
    };
    ROverlayBase.prototype.render = function () {
        var _a;
        if (!((_a = this.context) === null || _a === void 0 ? void 0 : _a.location))
            throw new Error('An overlay must be part of a location provider (ie RFeature)');
        this.setPosition();
        return (react_1.default.createElement("div", { className: '_rlayers_ROverlay' },
            react_1.default.createElement("div", { ref: this.containerRef, className: this.props.className, onClick: this.props.onClick }, this.props.children)));
    };
    return ROverlayBase;
}(REvent_1.RlayersBase));
exports.ROverlayBase = ROverlayBase;
var ROverlay = /** @class */ (function (_super) {
    __extends(ROverlay, _super);
    function ROverlay() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    return ROverlay;
}(ROverlayBase));
exports.default = ROverlay;
//# sourceMappingURL=ROverlay.js.map