rlayers
Version:
React Components for OpenLayers
185 lines • 8.4 kB
JavaScript
"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 __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.createRStyle = exports.useRStyle = void 0;
var react_1 = __importDefault(require("react"));
var react_dom_1 = __importDefault(require("react-dom"));
var lru_cache_1 = __importDefault(require("lru-cache"));
var Style_1 = __importDefault(require("ol/style/Style"));
var context_1 = require("../context");
var debug_1 = __importDefault(require("../debug"));
var useRStyle = function () { return react_1.default.useRef(); };
exports.useRStyle = useRStyle;
var createRStyle = function () { return react_1.default.createRef(); };
exports.createRStyle = createRStyle;
/**
* A style, all other style components must be descendants of `RStyle`
*
* It can be used with a React reference - `RStyleRef` which is a shortcut for
* `React.RefObject<RStyle>` and a subtype of `RStyleLike`
*
* Or it can also be nested inside a vector layer to be
* automatically assigned as the default style of that layer
*
* This is the only component that does not have to be part of an `RMap`
*
* It provides the special `RStyle` context
*/
var RStyle = /** @class */ (function (_super) {
__extends(RStyle, _super);
function RStyle(props, context) {
var _this = _super.call(this, props, context) || this;
_this.style = function (f, r) {
if (_this.ol !== _this.style)
return _this.ol;
var hash;
if (_this.cache) {
hash = _this.props.cacheId(f, r);
var style_1 = _this.cache.get(hash);
if (style_1)
return style_1;
}
var style = new Style_1.default({ zIndex: _this.props.zIndex });
var render = (react_1.default.createElement(context_1.RContext.Provider, { value: __assign(__assign({}, _this.context), { style: style }) }, _this.props.render(f, r)));
react_dom_1.default.render(render, document.createElement('div'));
if (_this.cache)
_this.cache.set(hash, style);
return style;
};
if (props.render)
_this.ol = _this.style;
else
_this.ol = new Style_1.default({ zIndex: props.zIndex });
if (props.render && props.cacheSize && props.cacheId)
_this.cache = new lru_cache_1.default({ max: props.cacheSize });
return _this;
}
RStyle.prototype.componentDidMount = function () {
this.refresh();
};
RStyle.prototype.componentDidUpdate = function (prevProps, prev, snap) {
if (this.props !== prevProps) {
(0, debug_1.default)('willRefresh', this, prevProps, this.props);
this.refresh(prevProps);
}
};
RStyle.prototype.refresh = function (prevProps) {
var _a, _b, _c, _d, _e, _f, _g;
if (!prevProps || (prevProps === null || prevProps === void 0 ? void 0 : prevProps.render) !== this.props.render) {
if ((_a = this.context) === null || _a === void 0 ? void 0 : _a.styleArray) {
if (this.ol === this.style)
throw new Error('An RStyleArray must contain only static RStyles');
if (!this.context.styleArray.includes(this.ol))
this.context.styleArray.push(this.ol);
}
else if ((_c = (_b = this.context) === null || _b === void 0 ? void 0 : _b.feature) === null || _c === void 0 ? void 0 : _c.setStyle) {
this.context.feature.setStyle(this.ol);
}
else if ((_e = (_d = this.context) === null || _d === void 0 ? void 0 : _d.vectorlayer) === null || _e === void 0 ? void 0 : _e.setStyle) {
this.context.vectorlayer.setStyle(this.ol);
}
else if ((_g = (_f = this.context) === null || _f === void 0 ? void 0 : _f.vectortilelayer) === null || _g === void 0 ? void 0 : _g.setStyle) {
this.context.vectortilelayer.setStyle(this.ol);
}
if (this.cache)
this.cache.clear();
}
if (this.ol instanceof Style_1.default && (!prevProps || prevProps.zIndex !== this.props.zIndex))
this.ol.setZIndex(this.props.zIndex);
};
RStyle.prototype.render = function () {
if (this.props.render)
return null;
return (react_1.default.createElement("div", { className: '_rlayers_RStyle' },
react_1.default.createElement(context_1.RContext.Provider, { value: __assign(__assign({}, this.context), { style: this.ol }) }, this.props.children)));
};
/** This is a static function that will return an
* OpenLayers-compatible `StyleLike` from an `RStyleLike`.
*
* @param {RStyleLike} style
* @public
*/
RStyle.getStyle = function (style) {
// style is undefined or null
if (style === null || style === undefined)
return style;
// style is RStyle or RStyleArray
if (typeof style.style === 'function')
return function (f, r) { return style.style(f, r); };
// style is a React.RefObject
// React.RefObjects are just plain JS objects after JS transpilation */
if (Object.keys(style).includes('current'))
return function (f, r) { return style.current.style(f, r); };
// style is an OpenLayers StyleLike
return style;
};
/** This is a static function that will return an
* OpenLayers-compatible `Style` from a static `RStyleLike`.
* This discards the reference and the returned style won't
* be updated if the referenced `<RStyle>` is updated.
*
* It throws if the reference is a dynamic style.
*
* @param {RStyleLike} style
* @public
*/
RStyle.getStyleStatic = function (style) {
// style is undefined or null
if (style === null || style === undefined)
return style;
var asRStyle;
// style is RStyle or RStyleArray
if (typeof style.style === 'function')
asRStyle = style;
// style is a React.RefObject
// React.RefObjects are just plain JS objects after JS transpilation
if (Object.keys(style).includes('current')) {
asRStyle = style.current;
if (asRStyle === undefined || asRStyle === null)
return undefined;
}
if (asRStyle) {
// style is a static RStyle or RStyleArray or reference
if (asRStyle.ol !== undefined && typeof asRStyle.ol !== 'function')
return asRStyle.ol;
// style is a dynamic RStyle or RStyleArray or reference
throw new TypeError('RStyle is dynamic and cannot be converted to Style');
}
// style is an OpenLayers StyleLike
if (typeof style === 'function')
throw new TypeError('StyleLike is dynamic and cannot be converted to Style');
return style;
};
RStyle.contextType = context_1.RContext;
return RStyle;
}(react_1.default.PureComponent));
exports.default = RStyle;
//# sourceMappingURL=RStyle.js.map