qwc2-lts
Version:
QGIS Web Client
364 lines (363 loc) • 21.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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
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 { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { addLayerFeatures, LayerRole, removeLayer } from '../actions/layers';
import ConfigUtils from '../utils/ConfigUtils';
import CoordinatesUtils from '../utils/CoordinatesUtils';
import LocaleUtils from '../utils/LocaleUtils';
import VectorLayerUtils from '../utils/VectorLayerUtils';
import Icon from './Icon';
import ResizeableWindow from './ResizeableWindow';
import TextInput from './widgets/TextInput';
import './style/NumericInputWindow.css';
var NumericInputWindow = /*#__PURE__*/function (_React$Component) {
function NumericInputWindow() {
var _this;
_classCallCheck(this, NumericInputWindow);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, NumericInputWindow, [].concat(args));
_defineProperty(_this, "state", {
highlightedNode: null,
displayCrs: null,
feature: null,
geometry: null
});
_defineProperty(_this, "coordinatesChanged", function (coordinates) {
_this.props.onFeatureChanged(_objectSpread(_objectSpread({}, _this.state.feature), {}, {
geometry: VectorLayerUtils.reprojectGeometry(_objectSpread(_objectSpread({}, _this.state.geometry), {}, {
coordinates: coordinates
}), _this.state.displayCrs, _this.props.mapCrs)
}));
});
_defineProperty(_this, "renderOrdinateInput", function (ordinate, _onChange) {
var decimals = CoordinatesUtils.getPrecision(_this.state.displayCrs);
var value = ordinate.toFixed(decimals);
return /*#__PURE__*/React.createElement(TextInput, {
onChange: function onChange(text) {
return _this.onValueChanged(text, decimals, _onChange);
},
value: value
});
});
_defineProperty(_this, "renderMeasureInput", function (measure, _onChange2) {
var decimals = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
decimals = decimals !== null && decimals !== void 0 ? decimals : ConfigUtils.getConfigProp("measurementPrecision", null, 2);
var value = measure.toFixed(decimals);
return /*#__PURE__*/React.createElement(TextInput, {
onChange: function onChange(text) {
return _this.onValueChanged(text, decimals, _onChange2);
},
value: value
});
});
_defineProperty(_this, "onValueChanged", function (text, decimals, onChange) {
var number = parseFloat(text);
if (!isNaN(number)) {
var factor = Math.pow(10, decimals);
onChange(Math.round(number * factor) / factor);
}
});
_defineProperty(_this, "renderPointInputForm", function () {
var coordinates = _this.state.geometry.coordinates;
return /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "x:\xA0"), /*#__PURE__*/React.createElement("td", null, _this.renderOrdinateInput(coordinates[0], function (value) {
return _this.updatePoint(value, 0);
})), /*#__PURE__*/React.createElement("td", null, "y:\xA0"), /*#__PURE__*/React.createElement("td", null, _this.renderOrdinateInput(coordinates[1], function (value) {
return _this.updatePoint(value, 1);
})))));
});
_defineProperty(_this, "updatePoint", function (number, ord) {
var newCoordinates = _toConsumableArray(_this.state.geometry.coordinates);
newCoordinates[ord] = number;
_this.coordinatesChanged(newCoordinates);
});
_defineProperty(_this, "renderCoordinateListInputForm", function () {
var coordinates = _this.state.geometry.coordinates;
if (_this.state.feature.shape === 'Polygon') {
coordinates = coordinates[0];
}
return /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, coordinates.map(function (entry, idx) {
return /*#__PURE__*/React.createElement("tr", {
key: "coo" + idx,
onMouseEnter: function onMouseEnter() {
return _this.highlightListCoordinate(idx);
},
onMouseLeave: function onMouseLeave() {
return _this.clearListCoordinateHighlight(idx);
}
}, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Icon, {
icon: "plus",
onClick: function onClick() {
return _this.insertCoordinate(idx);
}
})), /*#__PURE__*/React.createElement("td", null, "x:\xA0"), /*#__PURE__*/React.createElement("td", null, _this.renderOrdinateInput(coordinates[idx][0], function (value) {
return _this.updateListCoordinate(value, idx, 0);
})), /*#__PURE__*/React.createElement("td", null, "y:\xA0"), /*#__PURE__*/React.createElement("td", null, _this.renderOrdinateInput(coordinates[idx][1], function (value) {
return _this.updateListCoordinate(value, idx, 1);
})), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Icon, {
icon: "trash",
onClick: function onClick() {
return _this.removeCoordinate(idx);
}
})));
}), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Icon, {
icon: "plus",
onClick: function onClick() {
return _this.insertCoordinate(coordinates.length);
}
})), /*#__PURE__*/React.createElement("td", {
colSpan: "5"
}))));
});
_defineProperty(_this, "updateListCoordinate", function (number, nodeidx, ord) {
var newCoordinates = _toConsumableArray(_this.state.geometry.coordinates);
var newpoint = null;
if (_this.state.feature.shape === 'Polygon') {
newCoordinates[0] = _toConsumableArray(newCoordinates[0]);
newCoordinates[0][nodeidx] = _toConsumableArray(newCoordinates[0][nodeidx]);
newCoordinates[0][nodeidx][ord] = number;
newpoint = newCoordinates[0][nodeidx];
} else {
newCoordinates[nodeidx] = _toConsumableArray(newCoordinates[nodeidx]);
newCoordinates[nodeidx][ord] = number;
newpoint = newCoordinates[nodeidx];
}
_this.coordinatesChanged(newCoordinates);
_this.highlightListCoordinate(nodeidx, newpoint);
});
_defineProperty(_this, "computeInsPoint", function (coordinates, idx) {
if (idx === 0) {
return _toConsumableArray(coordinates[0]);
} else if (idx > coordinates.length - 1) {
return _toConsumableArray(coordinates[coordinates.length - 1]);
} else {
return [0.5 * (coordinates[idx - 1][0] + coordinates[idx][0]), 0.5 * (coordinates[idx - 1][1] + coordinates[idx][1])];
}
});
_defineProperty(_this, "insertCoordinate", function (idx) {
var newCoordinates = _toConsumableArray(_this.state.geometry.coordinates);
if (_this.state.feature.shape === 'Polygon') {
newCoordinates[0] = _toConsumableArray(newCoordinates[0]);
newCoordinates[0].splice(idx, 0, _this.computeInsPoint(newCoordinates[0], idx));
} else {
newCoordinates.splice(idx, 0, _this.computeInsPoint(newCoordinates, idx));
}
_this.coordinatesChanged(newCoordinates);
_this.props.removeLayer("numericinputselection");
});
_defineProperty(_this, "removeCoordinate", function (idx) {
var newCoordinates = _toConsumableArray(_this.state.geometry.coordinates);
if (_this.state.feature.shape === 'Polygon') {
newCoordinates[0] = _toConsumableArray(newCoordinates[0]);
newCoordinates[0].splice(idx, 1);
} else {
newCoordinates.splice(idx, 1);
}
_this.coordinatesChanged(newCoordinates);
_this.props.removeLayer("numericinputselection");
});
_defineProperty(_this, "highlightListCoordinate", function (idx) {
var newpoint = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var isPolygon = _this.state.feature.shape === 'Polygon';
var coordinates = _this.state.geometry.coordinates;
var point = CoordinatesUtils.reproject(newpoint || (isPolygon ? coordinates[0][idx] : coordinates[idx]), _this.state.displayCrs, _this.props.mapCrs);
_this.setState({
highlightedNode: idx
});
var feature = {
type: "Feature",
geometry: {
type: "Point",
coordinates: point
}
};
var sellayer = {
id: "numericinputselection",
role: LayerRole.SELECTION
};
_this.props.addLayerFeatures(sellayer, [feature], true);
});
_defineProperty(_this, "clearListCoordinateHighlight", function (idx) {
if (_this.state.highlightedNode === idx) {
_this.setState({
highlightedNode: null
});
_this.props.removeLayer("numericinputselection");
}
});
_defineProperty(_this, "renderCircleInputForm", function () {
var circleParams = _this.state.feature.circleParams;
var center = CoordinatesUtils.reproject(circleParams.center, _this.props.mapCrs, _this.state.displayCrs);
return /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "x:\xA0"), /*#__PURE__*/React.createElement("td", null, _this.renderOrdinateInput(center[0], function (value) {
return _this.updateCircle(value, center[1], circleParams.radius);
}))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "y:\xA0"), /*#__PURE__*/React.createElement("td", null, _this.renderOrdinateInput(center[1], function (value) {
return _this.updateCircle(center[0], value, circleParams.radius);
}))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "r:\xA0"), /*#__PURE__*/React.createElement("td", null, _this.renderMeasureInput(circleParams.radius, function (value) {
return _this.updateCircle(center[0], center[1], value);
})))));
});
_defineProperty(_this, "updateCircle", function (x, y, r) {
var center = CoordinatesUtils.reproject([x, y], _this.state.displayCrs, _this.props.mapCrs);
var newFeature = _objectSpread(_objectSpread({}, _this.state.feature), {}, {
circleParams: {
center: center,
radius: r
}
});
_this.props.onFeatureChanged(newFeature);
});
_defineProperty(_this, "renderBoxInputForm", function () {
var shape = _this.state.feature.shape;
var coordinates = _this.state.geometry.coordinates[0];
var x = 0.5 * (coordinates[0][0] + coordinates[2][0]);
var y = 0.5 * (coordinates[0][1] + coordinates[2][1]);
var d1x = Math.abs(coordinates[1][0] - coordinates[0][0]);
var d1y = Math.abs(coordinates[1][1] - coordinates[0][1]);
var w = Math.sqrt(d1x * d1x + d1y * d1y);
var r = Math.atan2(d1y / w, d1x / w) / Math.PI * 180;
var d2x = 0;
var d2y = 0;
var h = w;
if (shape === "Box") {
d2x = Math.abs(coordinates[2][0] - coordinates[1][0]);
d2y = Math.abs(coordinates[2][1] - coordinates[1][1]);
h = Math.sqrt(d2x * d2x + d2y * d2y);
}
return /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "x:\xA0"), /*#__PURE__*/React.createElement("td", null, _this.renderOrdinateInput(x, function (value) {
return _this.updateBox(value, y, w, h, r);
}))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "y:\xA0"), /*#__PURE__*/React.createElement("td", null, _this.renderOrdinateInput(y, function (value) {
return _this.updateBox(x, value, w, h, r);
}))), shape === "Box" ? [/*#__PURE__*/React.createElement("tr", {
key: "w"
}, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("numericinput.width"), ":\xA0"), /*#__PURE__*/React.createElement("td", null, _this.renderMeasureInput(w, function (value) {
return _this.updateBox(x, y, value, h, r);
}))), /*#__PURE__*/React.createElement("tr", {
key: "h"
}, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("numericinput.height"), ":\xA0"), /*#__PURE__*/React.createElement("td", null, _this.renderMeasureInput(h, function (value) {
return _this.updateBox(x, y, w, value, r);
})))] : /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("numericinput.side"), ":\xA0"), /*#__PURE__*/React.createElement("td", null, _this.renderMeasureInput(w, function (value) {
return _this.updateBox(x, y, value, value, r);
}))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("numericinput.angle"), ":\xA0"), /*#__PURE__*/React.createElement("td", null, _this.renderMeasureInput(r, function (value) {
return _this.updateBox(x, y, w, h, value);
}, 1)))));
});
_defineProperty(_this, "updateBox", function (x, y, w, h, r) {
var alpha = r / 180 * Math.PI;
var w2 = 0.5 * w;
var h2 = 0.5 * h;
var cosa = Math.cos(alpha);
var sina = Math.sin(alpha);
var newCoordinates = [[[x + cosa * w2 - sina * h2, y + sina * w2 + cosa * h2], [x - cosa * w2 - sina * h2, y - sina * w2 + cosa * h2], [x - cosa * w2 + sina * h2, y - sina * w2 - cosa * h2], [x + cosa * w2 + sina * h2, y + sina * w2 - cosa * h2], [x + cosa * w2 - sina * h2, y + sina * w2 + cosa * h2]]];
_this.coordinatesChanged(newCoordinates);
});
return _this;
}
_inherits(NumericInputWindow, _React$Component);
return _createClass(NumericInputWindow, [{
key: "componentDidMount",
value: function componentDidMount() {
this.componentDidUpdate({});
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
var _this$props$feature, _prevProps$feature;
if (prevProps.feature && ((_this$props$feature = this.props.feature) === null || _this$props$feature === void 0 ? void 0 : _this$props$feature.id) !== ((_prevProps$feature = prevProps.feature) === null || _prevProps$feature === void 0 ? void 0 : _prevProps$feature.id)) {
this.props.removeLayer("numericinputselection");
}
}
}, {
key: "render",
value: function render() {
var shapeInputForms = {
Point: this.renderPointInputForm,
LineString: this.renderCoordinateListInputForm,
Polygon: this.renderCoordinateListInputForm,
Circle: this.renderCircleInputForm,
Box: this.renderBoxInputForm,
Square: this.renderBoxInputForm
};
var body = null;
if (!this.state.geometry) {
body = /*#__PURE__*/React.createElement("span", null, LocaleUtils.tr("numericinput.nofeature"));
} else if (shapeInputForms[this.state.feature.shape]) {
body = shapeInputForms[this.state.feature.shape]();
} else {
body = LocaleUtils.tr("numericinput.featureunsupported");
}
return /*#__PURE__*/React.createElement(ResizeableWindow, {
fitHeight: true,
icon: "numericinput",
initialWidth: 320,
onClose: this.props.onClose,
scrollable: true,
title: LocaleUtils.tr("numericinput.windowtitle")
}, /*#__PURE__*/React.createElement("div", {
className: "numeric-input-widget-body",
role: "body"
}, body));
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(nextProps, state) {
var newState = {
feature: nextProps.feature,
displayCrs: nextProps.displayCrs
};
if (state.feature && !nextProps.feature) {
newState.geometry = null;
} else if (nextProps.feature && (nextProps.feature !== state.feature || nextProps.displayCrs !== state.displayCrs)) {
newState.geometry = VectorLayerUtils.reprojectGeometry(nextProps.feature.geometry, nextProps.mapCrs, nextProps.displayCrs);
}
return newState;
}
}]);
}(React.Component);
_defineProperty(NumericInputWindow, "propTypes", {
addLayerFeatures: PropTypes.func,
displayCrs: PropTypes.string,
feature: PropTypes.object,
mapCrs: PropTypes.string,
onClose: PropTypes.func,
onFeatureChanged: PropTypes.func,
removeLayer: PropTypes.func
});
export default connect(function (state) {
return {
displayCrs: state.map.displayCrs,
mapCrs: state.map.projection
};
}, {
addLayerFeatures: addLayerFeatures,
removeLayer: removeLayer
})(NumericInputWindow);