qwc2
Version:
QGIS Web Client
558 lines (553 loc) • 28.9 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/**
* Copyright 2024 Sourcepole AG
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import Sun from '@giro3d/giro3d/core/geographic/Sun.js';
import { MapLightingMode } from '@giro3d/giro3d/entities/MapLightingOptions';
import PropTypes from 'prop-types';
import suncalc from 'suncalc';
import { AmbientLight, BasicShadowMap, CameraHelper, DirectionalLight, DirectionalLightHelper, PCFShadowMap, PCFSoftShadowMap, VSMShadowMap } from 'three';
import Icon from '../../components/Icon';
import SideBar from '../../components/SideBar';
import Input from '../../components/widgets/Input';
import NumberInput from '../../components/widgets/NumberInput';
import ToggleSwitch from '../../components/widgets/ToggleSwitch';
import CoordinatesUtils from '../../utils/CoordinatesUtils';
import LocaleUtils from '../../utils/LocaleUtils';
import './style/MapLight3D.css';
var MapLight3D = /*#__PURE__*/function (_React$Component) {
function MapLight3D(props) {
var _this;
_classCallCheck(this, MapLight3D);
_this = _callSuper(this, MapLight3D, [props]);
_defineProperty(_this, "state", {
showAdvanced: false,
lightParams: {
day: 182,
time: 720,
helpersVisible: false,
moonLightIntensity: 0.02,
sunLightIntensity: 3.5,
zFactor: 1,
lightElevationLayersOnly: false,
shadowsEnabled: true,
shadowType: PCFShadowMap,
shadowMapSize: 4096,
shadowBias: -0.0001,
sunDistance: 80000,
normalBias: 0,
shadowIntensity: 1.0,
shadowVolumeNear: 60000,
shadowVolumeFar: 100000
},
dayAnimation: false,
dayAnimationSettings: false,
dayStep: 30,
timeAnimation: false,
timeAnimationSettings: false,
timeStep: 30
});
_defineProperty(_this, "onHide", function () {
clearInterval(_this.animationInterval);
_this.setState({
dayAnimation: false,
timeAnimation: false
});
});
_defineProperty(_this, "renderBody", function () {
var lightParams = _this.state.lightParams;
var dateValue = new Date(new Date().getFullYear(), 0, 1 + lightParams.day).toISOString().split("T")[0];
var dateToDay = function dateToDay(date) {
var d = new Date(date);
return 1 + (d - new Date(Date.UTC(d.getUTCFullYear(), 0, 1))) / (1000 * 60 * 60 * 24);
};
var isLeapYear = function isLeapYear(year) {
return new Date(year, 1, 29).getDate() === 29;
};
var timeValue = "".concat(String(Math.trunc(lightParams.time / 60)).padStart(2, '0'), ":").concat(String(Math.floor(lightParams.time % 60)).padStart(2, '0'));
var timeToMin = function timeToMin(time) {
var parts = time.split(":");
return parseInt(parts[0], 10) * 60 + parseInt(parts[1], 10);
};
return /*#__PURE__*/React.createElement("div", {
className: "maplight3d-body"
}, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.date")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
className: "map3d-animation-slider"
}, /*#__PURE__*/React.createElement(Icon, {
icon: _this.state.dayAnimation ? "square" : "triangle-right",
onClick: _this.toggleDayAnimation
}), /*#__PURE__*/React.createElement("div", {
className: "maplight3d-slider"
}, /*#__PURE__*/React.createElement("input", {
max: 365 + isLeapYear(),
min: 1,
onChange: function onChange(ev) {
return _this.updateLightParams("day", parseInt(ev.target.value, 10));
},
step: 1,
type: "range",
value: lightParams.day
}), /*#__PURE__*/React.createElement(Input, {
allowEmpty: false,
onChange: function onChange(value) {
return _this.updateLightParams("day", dateToDay(value));
},
type: "date",
value: dateValue
})), /*#__PURE__*/React.createElement(Icon, {
className: _this.state.dayAnimationSettings ? "map3d-animation-settings-active" : "",
icon: "cog",
onClick: function onClick() {
return _this.setState(function (state) {
return {
dayAnimationSettings: !state.dayAnimationSettings
};
});
}
})))), _this.state.dayAnimationSettings ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
colSpan: "2"
}, /*#__PURE__*/React.createElement("div", {
className: "maplight3d-animation-settings"
}, /*#__PURE__*/React.createElement("span", null, LocaleUtils.tr("maplight3d.animationstep"), ":"), /*#__PURE__*/React.createElement(NumberInput, {
max: 60,
min: 1,
onChange: function onChange(dayStep) {
return _this.setState({
dayStep: dayStep
});
},
suffix: " " + LocaleUtils.tr("maplight3d.dayspersec"),
value: _this.state.dayStep
})))) : null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.time")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
className: "map3d-animation-slider"
}, /*#__PURE__*/React.createElement(Icon, {
icon: _this.state.timeAnimation ? "square" : "triangle-right",
onClick: _this.toggleTimeAnimation
}), /*#__PURE__*/React.createElement("div", {
className: "maplight3d-slider"
}, /*#__PURE__*/React.createElement("input", {
max: 1439,
min: 0,
onChange: function onChange(ev) {
return _this.updateLightParams("time", parseInt(ev.target.value, 10));
},
step: 1,
type: "range",
value: lightParams.time
}), /*#__PURE__*/React.createElement(Input, {
allowEmpty: false,
onChange: function onChange(value) {
return _this.updateLightParams("time", timeToMin(value));
},
type: "time",
value: timeValue
})), /*#__PURE__*/React.createElement(Icon, {
className: _this.state.timeAnimationSettings ? "map3d-animation-settings-active" : "",
icon: "cog",
onClick: function onClick() {
return _this.setState(function (state) {
return {
timeAnimationSettings: !state.timeAnimationSettings
};
});
}
})))), _this.state.timeAnimationSettings ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
colSpan: "2"
}, /*#__PURE__*/React.createElement("div", {
className: "maplight3d-animation-settings"
}, /*#__PURE__*/React.createElement("span", null, LocaleUtils.tr("maplight3d.animationstep"), ":"), /*#__PURE__*/React.createElement(NumberInput, {
max: 60,
min: 1,
onChange: function onChange(timeStep) {
return _this.setState({
timeStep: timeStep
});
},
suffix: " " + LocaleUtils.tr("maplight3d.minspersec"),
value: _this.state.timeStep
})))) : null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.sunLightIntensity")), /*#__PURE__*/React.createElement("td", null, _this.renderSlider('sunLightIntensity', 0, 10, 0.1))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.moonLightIntensity")), /*#__PURE__*/React.createElement("td", null, _this.renderSlider('moonLightIntensity', 0, 0.5, 0.01))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.shadows")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(ToggleSwitch, {
active: lightParams.shadowsEnabled,
onChange: function onChange(value) {
return _this.updateLightParams('shadowsEnabled', value);
}
}))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.shadowintensity")), /*#__PURE__*/React.createElement("td", null, _this.renderSlider('shadowIntensity', 0, 2, 0.1))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
className: "maplight3d-advanced",
colSpan: "2"
}, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
checked: _this.state.showAdvanced,
onChange: function onChange(ev) {
return _this.setState(function (state) {
return {
showAdvanced: !state.showAdvanced
};
});
},
type: "checkbox"
}), " ", LocaleUtils.tr("maplight3d.showadvanced")))), _this.state.showAdvanced ? [/*#__PURE__*/React.createElement("tr", {
key: "helpersVisible"
}, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.helpersVisible")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(ToggleSwitch, {
active: lightParams.helpersVisible,
onChange: function onChange(value) {
return _this.updateLightParams('helpersVisible', value);
}
}))), /*#__PURE__*/React.createElement("tr", {
key: "zFactor"
}, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.zFactor")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("input", {
max: 10,
min: 0,
onChange: function onChange(ev) {
return _this.updateLightParams('zFactor', ev.target.value);
},
step: 0.1,
type: "range",
value: lightParams.zFactor
}))), /*#__PURE__*/React.createElement("tr", {
key: "shadowType"
}, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.shadowType")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("select", {
onChange: function onChange(ev) {
return _this.updateLightParams('shadowType', parseInt(ev.target.value, 10));
},
value: lightParams.shadowType
}, /*#__PURE__*/React.createElement("option", {
value: BasicShadowMap
}, "BasicShadowMap"), /*#__PURE__*/React.createElement("option", {
value: PCFShadowMap
}, "PCFShadowMap"), /*#__PURE__*/React.createElement("option", {
value: PCFSoftShadowMap
}, "PCFSoftShadowMap"), /*#__PURE__*/React.createElement("option", {
value: VSMShadowMap
}, "VSMShadowMap")))), /*#__PURE__*/React.createElement("tr", {
key: "shadowMapSize"
}, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.shadowMapSize")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(NumberInput, {
decimals: 0,
max: 8192,
min: 64,
onChange: function onChange(value) {
return _this.updateLightParams('shadowMapSize', value);
},
value: lightParams.shadowMapSize
}))), /*#__PURE__*/React.createElement("tr", {
key: "shadowBias"
}, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.shadowBias")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(NumberInput, {
decimals: 5,
max: 0.01,
min: -0.01,
onChange: function onChange(value) {
return _this.updateLightParams('shadowBias', value);
},
value: lightParams.shadowBias
}))), /*#__PURE__*/React.createElement("tr", {
key: "normalBias"
}, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.normalBias")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(NumberInput, {
decimals: 1,
max: 10,
min: -10,
onChange: function onChange(value) {
return _this.updateLightParams('normalBias', value);
},
value: lightParams.normalBias
}))), /*#__PURE__*/React.createElement("tr", {
key: "shadowVolumeNear"
}, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.shadowVolumeNear")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(NumberInput, {
decimals: 0,
max: 100000,
min: 100,
onChange: function onChange(value) {
return _this.updateLightParams('shadowVolumeNear', value);
},
value: lightParams.shadowVolumeNear
}))), /*#__PURE__*/React.createElement("tr", {
key: "shadowVolumeFar"
}, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.shadowVolumeFar")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(NumberInput, {
decimals: 0,
max: 100000,
min: 100,
onChange: function onChange(value) {
return _this.updateLightParams('shadowVolumeFar', value);
},
value: lightParams.shadowVolumeFar
})))] : null)));
});
_defineProperty(_this, "toggleDayAnimation", function () {
_this.setState(function (state) {
return {
dayAnimation: !state.dayAnimation,
timeAnimation: false
};
}, function () {
clearInterval(_this.animationInterval);
if (_this.state.dayAnimation) {
_this.animationInterval = setInterval(function () {
_this.updateLightParams('day', (_this.state.lightParams.day + _this.state.dayStep / 10) % 365);
}, 100);
}
});
});
_defineProperty(_this, "toggleTimeAnimation", function () {
_this.setState(function (state) {
return {
timeAnimation: !state.timeAnimation,
dayAnimation: false
};
}, function () {
clearInterval(_this.animationInterval);
if (_this.state.timeAnimation) {
_this.animationInterval = setInterval(function () {
_this.updateLightParams('time', (_this.state.lightParams.time + _this.state.timeStep / 10) % 1440);
}, 100);
}
});
});
_defineProperty(_this, "renderSlider", function (key, min, max, step) {
var labelFormatter = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : undefined;
var value = _this.state.lightParams[key];
var parseValue = function parseValue(x) {
return Number.isInteger(step) ? parseInt(x, 10) : parseFloat(x);
};
labelFormatter = labelFormatter !== null && labelFormatter !== void 0 ? labelFormatter : function (x) {
return x.toFixed(-Math.log10(step));
};
return /*#__PURE__*/React.createElement("div", {
className: "maplight3d-slider"
}, /*#__PURE__*/React.createElement("input", {
max: max,
min: min,
onChange: function onChange(ev) {
return _this.updateLightParams(key, parseValue(ev.target.value));
},
step: step,
type: "range",
value: value
}), /*#__PURE__*/React.createElement("div", {
className: "maplight3d-slider-label"
}, /*#__PURE__*/React.createElement("span", {
style: {
left: (value - min) * 100 / (max - min) + "%"
}
}, labelFormatter(value))));
});
_defineProperty(_this, "updateLightParams", function (key, value) {
_this.setState(function (state) {
return {
lightParams: _objectSpread(_objectSpread({}, state.lightParams), {}, _defineProperty({}, key, value))
};
});
});
_defineProperty(_this, "configureShadows", function (sunLight, lightParams, shadowIntensityK) {
if (!lightParams.shadowsEnabled) {
_this.props.sceneContext.scene.renderer.shadowMap.enabled = false;
sunLight.castShadow = false;
return;
}
var cameraHeight = _this.props.sceneContext.scene.view.camera.position.z;
var targetHeight = _this.props.sceneContext.scene.view.controls.target.z;
var volumeSize = Math.min(20000, Math.max(1000, cameraHeight - targetHeight));
sunLight.shadow.camera.top = volumeSize;
sunLight.shadow.camera.bottom = -volumeSize;
sunLight.shadow.camera.left = -volumeSize;
sunLight.shadow.camera.right = volumeSize;
sunLight.shadow.camera.near = lightParams.shadowVolumeNear;
sunLight.shadow.camera.far = lightParams.shadowVolumeFar;
sunLight.shadow.camera.updateProjectionMatrix();
sunLight.shadow.mapSize.set(lightParams.shadowMapSize, lightParams.shadowMapSize);
sunLight.shadow.bias = lightParams.shadowBias;
sunLight.shadow.normalBias = lightParams.normalBias;
sunLight.shadow.intensity = lightParams.shadowIntensity * shadowIntensityK;
_this.props.sceneContext.scene.renderer.shadowMap.enabled = true;
sunLight.castShadow = true;
});
_defineProperty(_this, "setLighting", function () {
var sceneContext = _this.props.sceneContext;
var lightParams = _this.state.lightParams;
var ambientLight = sceneContext.getSceneObject("__ambientLight");
var sunLight = sceneContext.getSceneObject("__sunLight");
var moonLight = sceneContext.getSceneObject("__moonLight");
var lightTarget = sceneContext.scene.view.controls.target.clone();
lightTarget.z = 0;
// Compute azimuth / zenith and sun position
var date = new Date(new Date().getFullYear(), 0, lightParams.day, Math.trunc(lightParams.time / 60), lightParams.time % 60);
var latlon = CoordinatesUtils.reproject([lightTarget.x, lightTarget.y], sceneContext.mapCrs, 'EPSG:4326');
var sunPos = suncalc.getPosition(date, latlon[1], latlon[0]);
var zenith = 90 - sunPos.altitude / Math.PI * 180;
var azimuth = 180 + sunPos.azimuth / Math.PI * 180;
var sunLocalPos = Sun.getLocalPosition({
point: lightTarget,
zenith: Math.min(90, zenith),
azimuth: azimuth,
distance: lightParams.sunDistance
});
// Compute dynamic params
var noonColor = {
r: 1.0,
g: 0.98,
b: 0.98
};
var horizonColor = {
r: 1.0,
g: 0.5,
b: 0.3
};
var duskColor = {
r: 0.15,
g: 0.22,
b: 0.35
};
var lerpColor = function lerpColor(a, b, t) {
return {
r: (1 - t) * a.r + t * b.r,
g: (1 - t) * a.g + t * b.g,
b: (1 - t) * a.b + t * b.b
};
};
var sunColor = noonColor;
var ambientIntensity = 0;
var shadowIntensityK = 0;
var sunLightIntensityK = Math.min(1, (98 - Math.min(98, zenith)) / 16);
var moonLightIntensityK = 1 - Math.min(1, (90 - Math.min(90, zenith)) / 16);
if (zenith < 90) {
var k = Math.pow(zenith / 90, 3);
sunColor = lerpColor(noonColor, horizonColor, k);
ambientIntensity = (1 - zenith / 90) * 1.5;
shadowIntensityK = (1 - k) * 0.9 + 0.2 * k;
} else if (zenith < 102) {
var _k = (zenith - 90) / 12;
sunColor = lerpColor(horizonColor, duskColor, _k);
shadowIntensityK = 0.2 * (1 - _k);
}
// Set lighting params
sceneContext.map.lighting.enabled = true;
sceneContext.map.lighting.mode = lightParams.shadowsEnabled ? MapLightingMode.LightBased : MapLightingMode.Hillshade;
sceneContext.map.lighting.elevationLayersOnly = lightParams.lightElevationLayersOnly;
sceneContext.map.lighting.hillshadeAzimuth = azimuth;
sceneContext.map.lighting.hillshadeZenith = Math.min(90, zenith);
sceneContext.map.lighting.zFactor = lightParams.zFactor;
sceneContext.scene.notifyChange(sceneContext.map);
sceneContext.scene.renderer.shadowMap.type = lightParams.shadowType;
ambientLight.intensity = ambientIntensity;
sunLight.position.copy(sunLocalPos);
sunLight.intensity = lightParams.sunLightIntensity * sunLightIntensityK;
sunLight.color = sunColor;
sunLight.target.position.copy(lightTarget);
sunLight.updateMatrixWorld(true);
sunLight.target.updateMatrixWorld(true);
_this.configureShadows(sunLight, lightParams, shadowIntensityK);
// NOTE: just a top-down light
moonLight.position.set(lightTarget.x, lightTarget.y, 8000);
moonLight.intensity = lightParams.moonLightIntensity * moonLightIntensityK;
moonLight.target.position.copy(lightTarget);
moonLight.updateMatrixWorld(true);
moonLight.target.updateMatrixWorld(true);
if (lightParams.helpersVisible) {
var sunLightHelper = sceneContext.getSceneObject("__sunLightHelper");
sunLightHelper.update();
sunLightHelper.updateMatrixWorld(true);
var shadowCameraHelper = sceneContext.getSceneObject("__shadowCameraHelper");
shadowCameraHelper.update();
shadowCameraHelper.updateMatrixWorld(true);
}
sceneContext.scene.notifyChange();
});
_this.state.lightParams.day = props.defaultDay;
var _parts = props.defaultTime.split(":").slice(0, 2).map(Number);
_this.state.lightParams.time = _parts[0] * 60 + _parts[1];
return _this;
}
_inherits(MapLight3D, _React$Component);
return _createClass(MapLight3D, [{
key: "componentDidMount",
value: function componentDidMount() {
this.animationInterval = null;
this.componentDidUpdate({});
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState) {
var _prevProps$sceneConte;
if (this.props.sceneContext.scene !== ((_prevProps$sceneConte = prevProps.sceneContext) === null || _prevProps$sceneConte === void 0 ? void 0 : _prevProps$sceneConte.scene)) {
var ambientLight = new AmbientLight(0xffffff, 1);
this.props.sceneContext.addSceneObject("__ambientLight", ambientLight);
var sunLight = new DirectionalLight(0xffffff, this.state.sunLightIntensity);
this.props.sceneContext.addSceneObject("__sunLight", sunLight);
var moonLight = new DirectionalLight(0xffffff, this.state.moonLightIntensity);
this.props.sceneContext.addSceneObject("__moonLight", moonLight);
if (this.state.lightParams.helpersVisible) {
var sunLightHelper = new DirectionalLightHelper(sunLight, 200, 'white');
this.props.sceneContext.addSceneObject("__sunLightHelper", sunLightHelper);
var shadowCameraHelper = new CameraHelper(sunLight.shadow.camera);
this.props.sceneContext.addSceneObject("__shadowCameraHelper", shadowCameraHelper);
}
this.props.sceneContext.scene.view.controls.addEventListener('change', this.setLighting);
this.setLighting();
} else if (this.state.lightParams !== prevState.lightParams) {
if (this.state.lightParams.helpersVisible && !prevState.lightParams.helpersVisible) {
var _sunLight = this.props.sceneContext.getSceneObject("__sunLight");
var _sunLightHelper = new DirectionalLightHelper(_sunLight, 200, 'white');
this.props.sceneContext.addSceneObject("__sunLightHelper", _sunLightHelper);
var _shadowCameraHelper = new CameraHelper(_sunLight.shadow.camera);
this.props.sceneContext.addSceneObject("__shadowCameraHelper", _shadowCameraHelper);
} else if (prevState.lightParams.helpersVisible && !this.state.lightParams.helpersVisible) {
this.props.sceneContext.removeSceneObject("__sunLightHelper");
this.props.sceneContext.removeSceneObject("__shadowCameraHelper");
}
this.setLighting();
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
clearInterval(this.lightPositionInterval);
this.props.sceneContext.removeSceneObject("__sunLight");
this.props.sceneContext.removeSceneObject("__moonLight");
this.props.sceneContext.removeSceneObject("__sunLightHelper");
this.props.sceneContext.removeSceneObject("__shadowCameraHelper");
}
}, {
key: "render",
value: function render() {
var _this2 = this;
return /*#__PURE__*/React.createElement(SideBar, {
icon: "light",
id: "MapLight3D",
onHide: this.onHide,
title: LocaleUtils.tr("appmenu.items.MapLight3D"),
width: "25em"
}, function () {
return {
body: _this2.renderBody()
};
});
}
}]);
}(React.Component);
_defineProperty(MapLight3D, "propTypes", {
/** Default viewer day (1-365) */
defaultDay: PropTypes.number,
/** Default viewer time (00:00-23:59) */
defaultTime: PropTypes.string,
sceneContext: PropTypes.object
});
_defineProperty(MapLight3D, "defaultProps", {
defaultDay: 182,
defaultTime: '12:00'
});
export { MapLight3D as default };