tchen-vuelayers
Version:
Web map Vue components with the power of OpenLayers
341 lines (295 loc) • 8.21 kB
JavaScript
/**
* VueLayers
* Web map Vue components with the power of OpenLayers
*
* @package vuelayers
* @author Vladimir Vershinin <ghettovoice@gmail.com>
* @version 0.11.1
* @license MIT
* @copyright (c) 2017-2019, Vladimir Vershinin <ghettovoice@gmail.com>
*/
import _Object$defineProperties from '@babel/runtime-corejs2/core-js/object/define-properties';
import _regeneratorRuntime from '@babel/runtime-corejs2/regenerator';
import _Promise from '@babel/runtime-corejs2/core-js/promise';
import _asyncToGenerator from '@babel/runtime-corejs2/helpers/esm/asyncToGenerator';
import { interval } from 'rxjs/_esm5/internal/observable/interval';
import { first } from 'rxjs/_esm5/internal/operators/first';
import { map } from 'rxjs/_esm5/internal/operators/map';
import { skipWhile } from 'rxjs/_esm5/internal/operators/skipWhile';
import debounce from 'debounce-promise';
import { isFunction } from '../util/minilo';
import identMap from './ident-map';
import rxSubs from './rx-subs';
import services from './services';
var VM_PROP = 'vm';
var INSTANCE_PROMISE_POOL = 'instance_promise';
/**
* @vueProps
*/
var props = {};
/**
* @vueMethods
*/
var methods = {
/**
* @return {Promise<void>}
* @protected
*/
beforeInit: function beforeInit() {},
/**
* @return {Promise} Resolves when initialization completes
* @protected
*/
init: function () {
var _init = _asyncToGenerator(
/*#__PURE__*/
_regeneratorRuntime.mark(function _callee() {
var createPromise, ident;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
ident = this.makeSelfIdent();
if (ident && this.$identityMap.has(ident, INSTANCE_PROMISE_POOL)) {
createPromise = this.$identityMap.get(ident, INSTANCE_PROMISE_POOL);
} else {
createPromise = _Promise.resolve(this.createOlObject());
if (ident) {
this.$identityMap.set(ident, createPromise, INSTANCE_PROMISE_POOL);
}
}
_context.next = 4;
return createPromise;
case 4:
this._olObject = _context.sent;
this._olObject[VM_PROP] || (this._olObject[VM_PROP] = []);
if (!this._olObject[VM_PROP].includes(this)) {
// for loaded from IdentityMap
this._olObject[VM_PROP].push(this);
}
++this.rev;
case 8:
case "end":
return _context.stop();
}
}
}, _callee, this);
}));
return function init() {
return _init.apply(this, arguments);
};
}(),
/**
* @return {*|Promise<T>}
* @protected
* @abstract
*/
createOlObject: function createOlObject() {
throw new Error('Not implemented method');
},
/**
* @return {void|Promise<void>}
* @protected
*/
deinit: function deinit() {
var _this = this;
var ident = this.makeSelfIdent();
if (ident) {
this.$identityMap.unset(ident, INSTANCE_PROMISE_POOL);
}
if (this._olObject) {
this._olObject[VM_PROP] = this._olObject[VM_PROP].filter(function (vm) {
return vm !== _this;
});
this._olObject = undefined;
}
},
/**
* Redefine for easy call in child components
* @returns {Object}
* @protected
*/
getServices: function getServices() {
return services.methods.getServices.call(this);
},
/**
* @return {void|Promise<void>}
* @protected
* @abstract
*/
mount: function mount() {
throw new Error('Not implemented method');
},
/**
* @return {void|Promise<void>}
* @protected
* @abstract
*/
unmount: function unmount() {
throw new Error('Not implemented method');
},
/**
* Refresh internal ol objects
* @return {Promise<void>}
*/
refresh: function refresh() {
var _this2 = this;
if (this.$olObject == null) return _Promise.resolve();
return new _Promise(function (resolve) {
var done = function done() {
++_this2.rev;
resolve();
};
if (_this2.$olObject && isFunction(_this2.$olObject.changed)) {
_this2.$olObject.once('change', done);
_this2.$olObject.changed();
} else {
done();
}
});
},
/**
* Internal usage only in components that doesn't support refreshing.
* @return {Promise<void>}
* @protected
*/
remount: function remount() {
var _this3 = this;
if (this.$olObject == null) return _Promise.resolve();
return _Promise.resolve(this.unmount()).then(function () {
return _this3.mount();
});
},
/**
* Only for internal purpose to support watching for properties
* for which OpenLayers doesn't provide setters.
* @return {Promise}
* @protected
*/
recreate: function recreate() {
var _this4 = this;
if (this.$olObject == null) return _Promise.resolve();
return _Promise.resolve(this.unmount()).then(function () {
return _this4.deinit();
}).then(function () {
return _this4.init();
}).then(function () {
return _this4.mount();
});
}
};
/**
* Basic ol component mixin.
*
* @title olCmp
* @vueProto
* @alias module:mixin/ol-cmp
*
* @fires module:mixin/ol-cmp#created
* @fires module:mixin/ol-cmp#mounted
* @fires module:mixin/ol-cmp#destroyed
*/
var olCmp = {
VM_PROP: VM_PROP,
INSTANCE_PROMISE_POOL: INSTANCE_PROMISE_POOL,
mixins: [identMap, rxSubs, services],
props: props,
methods: methods,
/**
* @this module:mixin/ol-cmp
*/
data: function data() {
return (
/** @lends module:mixin/ol-cmp# */
{
rev: 0
}
);
},
created: function created() {
var _this5 = this;
/**
* @type {*}
* @private
*/
this._olObject = undefined;
/**
* @type {Promise<Vue<T>>}
* @private
*/
this._createPromise = _Promise.resolve(this.beforeInit()).then(this.init).then(function () {
// logdbg('created', this.$options.name)
_this5.$emit('created', _this5);
return _this5;
});
/**
* @type {Promise<Vue<T>>}
* @private
*/
this._mountPromise = interval(100).pipe(skipWhile(function () {
return !_this5._mounted;
}), first(), map(function () {
return _this5;
})).toPromise(_Promise);
_Object$defineProperties(this, {
$olObject: {
enumerable: true,
get: function get() {
return _this5._olObject;
}
},
$createPromise: {
enumerable: true,
get: function get() {
return _this5._createPromise;
}
},
$mountPromise: {
enumerable: true,
get: function get() {
return _this5._mountPromise;
}
}
}); // bind debounced functions at runtime
// for each instance to avoid interfering between
// different instances
this.scheduleRefresh = debounce(function () {
return this.refresh();
}, 10);
this.scheduleRemount = debounce(function () {
return this.remount();
}, 10);
this.scheduleRecreate = debounce(function () {
return this.recreate();
}, 10);
},
mounted: function mounted() {
var _this6 = this;
this.$createPromise.then(this.mount).then(function () {
_this6._mounted = true;
_this6.$emit('mounted', _this6); // logdbg('mounted', this.$options.name)
});
},
destroyed: function destroyed() {
var _this7 = this;
this.$mountPromise.then(this.unmount).then(this.deinit).then(function () {
_this7.$emit('destroyed', _this7); // logdbg('destroyed', this.$options.name)
});
}
};
/**
* Emitted when underlying **OpenLayers** instance created.
* @event module:mixin/ol-cmp#created
* @type {void}
*/
/**
* Emitted when underlying **OpenLayers** instance mounted to parent.
* @event module:mixin/ol-cmp#mounted
* @type {void}
*/
/**
* Emitted when underlying **OpenLayers** instance destroyed.
* @event module:mixin/ol-cmp#destroyed
* @type {void}
*/
export default olCmp;