qwc2
Version:
QGIS Web Client
702 lines (700 loc) • 32.7 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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
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 2020, 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 polySelfIntersections from 'geojson-polygon-self-intersections';
import isEmpty from 'lodash.isempty';
import PropTypes from 'prop-types';
import { LayerRole, removeLayer, addLayerFeatures, removeLayerFeatures, clearLayer } from '../actions/layers';
import { changeRedliningState, resetRedliningState } from '../actions/redlining';
import PickFeature from '../components/PickFeature';
import ResizeableWindow from '../components/ResizeableWindow';
import TaskBar from '../components/TaskBar';
import ButtonBar from '../components/widgets/ButtonBar';
import NumberInput from '../components/widgets/NumberInput';
import Spinner from '../components/widgets/Spinner';
import ConfigUtils from '../utils/ConfigUtils';
import LocaleUtils from '../utils/LocaleUtils';
import MiscUtils from '../utils/MiscUtils';
import VectorLayerUtils from '../utils/VectorLayerUtils';
import './style/GeometryDigitizer.css';
import './style/Redlining.css';
/**
* Allows digitizing geometries to send to configured applications.
*
* Configure the available target applications in `themesConfig.json`:
* ```
* {
* "themes": {
* "items": [{
* ...
* "pluginData": {
* "geometryLinks": ["<geomLinkName>", "<geomLinkName>", ...]
* }
* }],
* },
* "pluginData": {
* "geometryLinks": [
* {
* "name": "<geomLinkName>", // Link name referenced in theme item
* "title": "<geomLinkTitle>", // Link title, displayed in the selection combo
* "geomType": ["<geomType>", "<geomType>"] // Supported geometry types (Point, LineString, Polygon)
* "url": "<targetApplicationUrl>", // Application target URL, receiving the POST submit
* "params": {"<key>": "<value>", ...} // Optional: additional form parameters to post to URL
* "target": "<target>" | { // Optional: form POST target which to display the result
* "iframedialog": true, // Use an iframe dialog
* "w": <dialogWidth>, // Dialog width
* "h": <dialogHeight> // Dialog height
* }
* }
* ]
* }
* }
* ```
*/
var GeometryDigitizer = /*#__PURE__*/function (_React$Component) {
function GeometryDigitizer(props) {
var _this;
_classCallCheck(this, GeometryDigitizer);
_this = _callSuper(this, GeometryDigitizer, [props]);
_defineProperty(_this, "onShow", function (mode) {
var layer = {
id: "__geomdigitizer",
title: LocaleUtils.tr("geomdigitizer.layername"),
role: LayerRole.USERLAYER,
type: 'vector',
readonly: true
};
_this.props.addLayerFeatures(layer, [], true);
_this.props.changeRedliningState({
action: mode || 'Pick',
geomType: null,
layer: '__geomdigitizer',
layerTitle: 'Geometry digitizer'
});
});
_defineProperty(_this, "onHide", function () {
_this.props.removeLayer("__geomdigitizer");
_this.props.removeLayer("__geomdigitizerbuffer");
_this.setState(GeometryDigitizer.defaultState);
_this.props.resetRedliningState();
});
_defineProperty(_this, "renderBody", function () {
var _this$props$layers$fi, _geomLinkData$target, _geomLinkData$target2, _this$props$theme$plu;
var geomLinkData = _this.geometryLinkData(_this.state.geomLink);
var activeButton = null;
if (_this.state.pickGeomType) {
activeButton = "Select" + _this.state.pickGeomType;
} else {
activeButton = _this.props.redlining.action === "Draw" ? _this.props.redlining.geomType : _this.props.redlining.action;
}
var supportedGeomType = geomLinkData.geomType || ["Point", "LineString", "Polygon"];
var drawButtons = [supportedGeomType.includes("Polygon") && !supportedGeomType.includes("Point") ? {
key: "Point",
tooltip: LocaleUtils.tr("geomdigitizer.point_buffer"),
icon: "point_buffer",
data: {
action: "Draw",
geomType: "Point",
text: ""
}
} : {
key: "Point",
tooltip: LocaleUtils.tr("redlining.point"),
icon: "point",
data: {
action: "Draw",
geomType: "Point",
text: ""
},
disabled: !supportedGeomType.includes("Point")
}, supportedGeomType.includes("Polygon") && !supportedGeomType.includes("LineString") ? {
key: "LineString",
tooltip: LocaleUtils.tr("geomdigitizer.line_buffer"),
icon: "line_buffer",
data: {
action: "Draw",
geomType: "LineString",
text: ""
}
} : {
key: "LineString",
tooltip: LocaleUtils.tr("redlining.line"),
icon: "line",
data: {
action: "Draw",
geomType: "LineString",
text: ""
},
disabled: !supportedGeomType.includes("LineString")
}, {
key: "Polygon",
tooltip: LocaleUtils.tr("redlining.polygon"),
icon: "polygon",
data: {
action: "Draw",
geomType: "Polygon",
text: ""
},
disabled: !supportedGeomType.includes("Polygon")
}];
var editButtons = [{
key: "Pick",
tooltip: LocaleUtils.tr("redlining.pick"),
icon: "pick",
data: {
action: "Pick",
geomType: null,
text: ""
}
}, {
key: "Delete",
tooltip: LocaleUtils.tr("redlining.delete"),
icon: "trash",
data: {
action: "Delete",
geomType: null
},
disabled: !_this.props.redlining.selectedFeature
}, {
key: "Clear",
tooltip: LocaleUtils.tr("geomdigitizer.clear"),
icon: "clear",
data: {
action: "Clear"
}
}];
var pickButtons = [{
key: "SelectPoint",
tooltip: LocaleUtils.tr("geomdigitizer.identifypick"),
icon: "pick_point",
data: {
action: "SelectPoint",
geomType: "Point"
}
}, {
key: "SelectPolygon",
tooltip: LocaleUtils.tr("geomdigitizer.identifypickregion"),
icon: "pick_region",
data: {
action: "SelectPolygon",
geomType: "Polygon"
}
}];
var featureLayer = _this.state.bufferDistance ? "__geomdigitizerbuffer" : "__geomdigitizer";
var haveFeatures = !isEmpty((((_this$props$layers$fi = _this.props.layers.find(function (layer) {
return layer.id === featureLayer;
})) === null || _this$props$layers$fi === void 0 ? void 0 : _this$props$layers$fi.features) || []).filter(function (feature) {
return supportedGeomType.includes(feature.geometry.type.replace(/^Multi/, ''));
}));
var target = (_geomLinkData$target = geomLinkData.target) !== null && _geomLinkData$target !== void 0 && _geomLinkData$target.iframedialog ? "geomdigitizer-output-window" : (_geomLinkData$target2 = geomLinkData.target) !== null && _geomLinkData$target2 !== void 0 ? _geomLinkData$target2 : "_blank";
return /*#__PURE__*/React.createElement("div", {
className: "redlining-controlsbar"
}, /*#__PURE__*/React.createElement("div", {
className: "redlining-groupcontrol"
}, /*#__PURE__*/React.createElement("div", null, LocaleUtils.tr("redlining.draw")), /*#__PURE__*/React.createElement(ButtonBar, {
active: activeButton,
buttons: drawButtons,
onClick: function onClick(key, data) {
return _this.actionChanged(data);
}
})), /*#__PURE__*/React.createElement("div", {
className: "redlining-groupcontrol"
}, /*#__PURE__*/React.createElement("div", null, LocaleUtils.tr("redlining.edit")), /*#__PURE__*/React.createElement(ButtonBar, {
active: activeButton,
buttons: editButtons,
onClick: function onClick(key, data) {
return _this.actionChanged(data);
}
})), /*#__PURE__*/React.createElement("div", {
className: "redlining-groupcontrol"
}, /*#__PURE__*/React.createElement("div", null, LocaleUtils.tr("redlining.pick")), /*#__PURE__*/React.createElement(ButtonBar, {
active: activeButton,
buttons: pickButtons,
onClick: function onClick(key, data) {
return _this.actionChanged(data);
}
})), /*#__PURE__*/React.createElement("div", {
className: "redlining-groupcontrol"
}, /*#__PURE__*/React.createElement("div", null, LocaleUtils.tr("redlining.buffer")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NumberInput, {
max: 99999,
min: -99999,
mobile: true,
onChange: _this.computeBuffer,
suffix: " m",
value: _this.state.bufferDistance
}))), /*#__PURE__*/React.createElement("div", {
className: "redlining-groupcontrol"
}, /*#__PURE__*/React.createElement("div", null, LocaleUtils.tr("geomdigitizer.applink")), /*#__PURE__*/React.createElement("div", {
className: "controlgroup"
}, /*#__PURE__*/React.createElement("select", {
onChange: function onChange(ev) {
return _this.setState({
geomLink: ev.target.value
});
},
value: _this.state.geomLink
}, /*#__PURE__*/React.createElement("option", {
value: ""
}, LocaleUtils.tr("geomdigitizer.chooselink")), (((_this$props$theme$plu = _this.props.theme.pluginData) === null || _this$props$theme$plu === void 0 ? void 0 : _this$props$theme$plu.geometryLinks) || []).map(function (entry) {
return /*#__PURE__*/React.createElement("option", {
key: entry,
value: entry
}, _this.geometryLinkData(entry).title);
})), /*#__PURE__*/React.createElement("form", {
action: geomLinkData.url,
method: "post",
onSubmit: _this.submitGeometryLink,
target: target
}, /*#__PURE__*/React.createElement("input", {
name: "csrf_token",
type: "hidden",
value: MiscUtils.getCsrfToken()
}), /*#__PURE__*/React.createElement("input", {
name: "GEOMETRIES",
type: "hidden"
}), /*#__PURE__*/React.createElement("input", {
name: "GEOMCOUNT",
type: "hidden"
}), /*#__PURE__*/React.createElement("input", {
name: "BUFFERDIST",
type: "hidden"
}), Object.entries(geomLinkData.params || {}).map(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
key = _ref2[0],
value = _ref2[1];
return /*#__PURE__*/React.createElement("input", {
key: key,
name: key,
type: "hidden",
value: value
});
}), /*#__PURE__*/React.createElement("button", {
className: "button",
disabled: !geomLinkData.url || !haveFeatures,
type: "submit"
}, LocaleUtils.tr("geomdigitizer.send"))))));
});
_defineProperty(_this, "renderOutputWindow", function () {
if (!_this.state.outputWindowTitle) {
return null;
}
var controls = [{
icon: 'print',
callback: function callback() {
window.frames['geomdigitizer-output-window'].focus();
window.frames['geomdigitizer-output-window'].print();
}
}];
return /*#__PURE__*/React.createElement(ResizeableWindow, {
dockable: false,
extraControls: controls,
initialHeight: _this.state.outputWindowSize.h > 0 ? _this.state.outputWindowSize.h : 0.75 * window.innerHeight,
initialWidth: _this.state.outputWindowSize.w > 0 ? _this.state.outputWindowSize.w : 320,
initialX: 0,
initialY: 0,
key: "OutputWindow",
onClose: function onClose() {
return _this.setState({
outputWindowVisible: false,
outputLoaded: false
});
},
title: _this.state.outputWindowTitle,
visible: _this.state.outputWindowVisible
}, /*#__PURE__*/React.createElement("div", {
className: "geomdigitizer-output-window-body"
}, !_this.state.outputLoaded ? /*#__PURE__*/React.createElement("span", {
className: "geomdigitizer-output-window-wait"
}, /*#__PURE__*/React.createElement(Spinner, null), " ", /*#__PURE__*/React.createElement("span", null, LocaleUtils.tr("geomdigitizer.wait"))) : null, /*#__PURE__*/React.createElement("iframe", {
name: "geomdigitizer-output-window",
onLoad: function onLoad() {
return _this.setState({
outputLoaded: true
});
}
})));
});
_defineProperty(_this, "actionChanged", function (data) {
if (data.action === "Clear") {
_this.props.changeRedliningState({
action: "Delete"
});
_this.setState({
pickGeomType: null
});
_this.props.clearLayer("__geomdigitizer");
_this.props.clearLayer("__geomdigitizerbuffer");
} else if (data.action.startsWith("Select")) {
_this.props.changeRedliningState({
action: null,
geomType: null
});
_this.setState({
pickGeomType: data.geomType
});
} else if (data.action === "Delete") {
_this.props.changeRedliningState({
action: "Delete"
});
if (_this.props.redlining.selectedFeature) {
_this.props.removeLayerFeatures("__geomdigitizerbuffer", [_this.props.redlining.selectedFeature.id]);
}
} else {
_this.props.changeRedliningState(_objectSpread(_objectSpread({}, data), {}, {
style: _this.redliningStyle(data.geomType)
}));
_this.setState({
pickGeomType: null
});
}
});
_defineProperty(_this, "computeBuffer", function (distance) {
distance = distance || 0;
_this.setState({
bufferDistance: distance
});
import("@turf/buffer").then(function (bufferMod) {
var buffer = bufferMod["default"];
var layer = _this.props.layers.find(function (l) {
return l.id === "__geomdigitizer";
});
if (!layer || distance === 0) {
_this.props.removeLayer("__geomdigitizerbuffer");
return;
}
var bufferfeatures = [];
(layer.features || []).forEach(function (feature) {
if (_this.props.redlining.selectedFeature && _this.props.redlining.selectedFeature.id === feature.id) {
feature = _this.props.redlining.selectedFeature;
}
var wgsGeometry = VectorLayerUtils.reprojectGeometry(feature.geometry, feature.crs, "EPSG:4326");
var wgsFeature = _objectSpread(_objectSpread({}, feature), {}, {
geometry: wgsGeometry
});
var output = buffer(wgsFeature, distance, {
units: 'meters'
});
if (output && output.geometry) {
output.geometry = VectorLayerUtils.reprojectGeometry(output.geometry, "EPSG:4326", feature.crs);
output.id = feature.id;
output.styleName = 'default';
output.styleOptions = _this.featureStyleOptions(output.geometry.type, "__geomdigitizerbuffer", true);
bufferfeatures.push(output);
}
});
if (!isEmpty(bufferfeatures)) {
var bufferlayer = {
id: "__geomdigitizerbuffer",
title: LocaleUtils.tr("geomdigitizer.bufferlayername"),
role: LayerRole.USERLAYER,
type: 'vector',
readonly: true
};
_this.props.addLayerFeatures(bufferlayer, bufferfeatures, true);
}
});
});
_defineProperty(_this, "updateFeatureBuffer", function (feature) {
import("@turf/buffer").then(function (bufferMod) {
var buffer = bufferMod["default"];
var wgsGeometry = VectorLayerUtils.reprojectGeometry(feature.geometry, feature.crs, "EPSG:4326");
var wgsFeature = _objectSpread(_objectSpread({}, feature), {}, {
geometry: wgsGeometry
});
var output = buffer(wgsFeature, _this.state.bufferDistance, {
units: 'meters'
});
if (output && output.geometry) {
output.geometry = VectorLayerUtils.reprojectGeometry(output.geometry, "EPSG:4326", feature.crs);
output.id = feature.id;
output.styleName = 'default';
output.styleOptions = _this.featureStyleOptions(output.geometry.type, "__geomdigitizerbuffer", true);
_this.props.addLayerFeatures({
id: "__geomdigitizerbuffer"
}, [output]);
}
});
});
_defineProperty(_this, "redliningStyle", function (geomType) {
var geomLinkData = _this.geometryLinkData(_this.state.geomLink);
var supportedGeomType = _this.state.geomLink ? geomLinkData.geomType || ["Point", "LineString", "Polygon"] : [];
var featureStyle = supportedGeomType.includes(geomType) && _this.state.bufferDistance === 0 ? _this.styleActive : _this.styleInactive;
return {
borderColor: featureStyle.strokeColor,
size: featureStyle.strokeWidth,
fillColor: featureStyle.fillColor
};
});
_defineProperty(_this, "featureStyleOptions", function (geometryType, layerId, bufferActive) {
var geomLinkData = _this.geometryLinkData(_this.state.geomLink);
var supportedGeomType = geomLinkData.geomType || [];
if (layerId === "__geomdigitizer" && bufferActive) {
return _this.styleInactive;
}
return supportedGeomType.includes(geometryType.replace(/^Multi/, '')) ? _this.styleActive : _this.styleInactive;
});
_defineProperty(_this, "geometryLinkData", function (name) {
var _this$props$themes$pl;
return (((_this$props$themes$pl = _this.props.themes.pluginData) === null || _this$props$themes$pl === void 0 ? void 0 : _this$props$themes$pl.geometryLinks) || []).find(function (entry) {
return entry.name === name;
}) || {};
});
_defineProperty(_this, "submitGeometryLink", function (ev) {
var features = [];
var layer = _this.props.layers.find(function (l) {
return l.id === "__geomdigitizer";
});
features = (layer || {}).features || [];
if (_this.props.redlining.selectedFeature) {
features = features.filter(function (feature) {
return feature.id !== _this.props.redlining.selectedFeature.id;
});
features.push(_this.props.redlining.selectedFeature);
}
var invalidPoly = features.find(function (feature) {
return feature.geometry.type === "Polygon" && !isEmpty(polySelfIntersections(feature).geometry.coordinates);
});
if (invalidPoly) {
/* eslint-disable-next-line */
alert(LocaleUtils.tr("geomdigitizer.selfinter"));
ev.preventDefault();
return;
}
var data = _this.geometryLinkData(_this.state.geomLink);
var supportedGeomType = data.geomType || [];
var geometries = features.filter(function (feature) {
return supportedGeomType.includes(_this.state.bufferDistance > 0 ? "Polygon" : feature.geometry.type.replace(/^Multi/, ''));
}).map(function (feature) {
return VectorLayerUtils.geoJSONGeomToWkt(feature.geometry);
});
if (isEmpty(geometries)) {
ev.preventDefault();
return;
} else {
ev.target.GEOMETRIES.value = geometries.join(";");
ev.target.GEOMCOUNT.value = geometries.length;
ev.target.BUFFERDIST.value = _this.state.bufferDistance;
}
if (ev.target.target === "geomdigitizer-output-window") {
_this.setState({
outputWindowVisible: true,
outputLoaded: false,
outputWindowSize: {
w: data.target.w,
h: data.target.h
},
outputWindowTitle: data.target.iframedialog
});
} else {
_this.setState({
outputWindowVisible: false,
outputLoaded: false,
outputWindowSize: null,
outputWindowTitle: ""
});
}
});
_defineProperty(_this, "selectFeature", function (layername, feature) {
var geomdigitizerlayer = {
id: "__geomdigitizer"
};
var addFeature = _objectSpread(_objectSpread({}, feature), {}, {
styleName: "default",
styleOptions: _this.featureStyleOptions(feature.geometry.type, "__geomdigitizer", _this.state.bufferDistance !== 0)
});
_this.props.addLayerFeatures(geomdigitizerlayer, [addFeature]);
});
var defaultStyle = _objectSpread(_objectSpread({}, ConfigUtils.getConfigProp("defaultFeatureStyle")), {}, {
strokeDash: []
});
_this.styleActive = _objectSpread(_objectSpread({}, defaultStyle), props.styleActive);
_this.styleInactive = _objectSpread(_objectSpread({}, defaultStyle), props.styleInactive);
_this.state = GeometryDigitizer.defaultState;
return _this;
}
_inherits(GeometryDigitizer, _React$Component);
return _createClass(GeometryDigitizer, [{
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState) {
var _this2 = this;
if (!this.props.active) {
return;
}
// Refresh buffer when layer features changed
var newLayer = this.props.layers.find(function (layer) {
return layer.id === "__geomdigitizer";
});
var oldLayer = prevProps.layers.find(function (layer) {
return layer.id === "__geomdigitizer";
});
if ((newLayer === null || newLayer === void 0 ? void 0 : newLayer.features) !== (oldLayer === null || oldLayer === void 0 ? void 0 : oldLayer.features)) {
this.computeBuffer(this.state.bufferDistance);
}
// Recompute buffer feature when selected feature changes and buffering is active
if (this.state.bufferDistance !== 0 && this.props.redlining.selectedFeature && this.props.redlining.selectedFeature !== prevProps.redlining.selectedFeature) {
this.updateFeatureBuffer(this.props.redlining.selectedFeature);
}
// Update feature styles according to permissible geometry types
if (this.state.geomLink !== prevState.geomLink) {
this.props.changeRedliningState({
style: this.redliningStyle(this.props.redlining.geomType)
});
["__geomdigitizer", "__geomdigitizerbuffer"].forEach(function (layerId) {
var layer = _this2.props.layers.find(function (l) {
return l.id === layerId;
});
if (layer && layer.features) {
var newFeatures = layer.features.map(function (feature) {
var newFeature = feature;
if (_this2.props.redlining.selectedFeature && _this2.props.redlining.selectedFeature.id === feature.id) {
newFeature = _this2.props.redlining.selectedFeature;
}
return _objectSpread(_objectSpread({}, newFeature), {}, {
styleOptions: _this2.featureStyleOptions(feature.geometry.type, layerId, _this2.state.bufferDistance !== 0)
});
});
_this2.props.addLayerFeatures(layer, newFeatures, true);
}
});
}
// Mark base geometries as inactive or active depending on whether buffering is active
if (this.state.bufferDistance !== 0 !== (prevState.bufferDistance !== 0)) {
this.props.changeRedliningState({
style: this.redliningStyle(this.props.redlining.geomType)
});
var layer = this.props.layers.find(function (l) {
return l.id === "__geomdigitizer";
});
if (layer && layer.features) {
var newFeatures = layer.features.map(function (feature) {
return _objectSpread(_objectSpread({}, feature), {}, {
styleOptions: _this2.featureStyleOptions(feature.geometry.type, "__geomdigitizer", _this2.state.bufferDistance !== 0)
});
});
this.props.addLayerFeatures(layer, newFeatures, true);
}
}
}
}, {
key: "render",
value: function render() {
var _this3 = this;
return [/*#__PURE__*/React.createElement(TaskBar, {
key: "GeometryDigitizer",
onHide: this.onHide,
onShow: this.onShow,
task: "GeometryDigitizer"
}, function () {
return {
body: _this3.renderBody()
};
}), this.renderOutputWindow(), this.state.pickGeomType ? /*#__PURE__*/React.createElement(PickFeature, {
featurePicked: this.selectFeature,
key: "FeaturePicker",
layerFilterFunc: function layerFilterFunc(layer) {
return !layer.id.startsWith("__geomdigitizer");
},
pickGeomType: this.state.pickGeomType
}) : null];
}
}]);
}(React.Component);
_defineProperty(GeometryDigitizer, "propTypes", {
active: PropTypes.bool,
addLayerFeatures: PropTypes.func,
changeRedliningState: PropTypes.func,
clearLayer: PropTypes.func,
layers: PropTypes.array,
redlining: PropTypes.object,
removeLayer: PropTypes.func,
removeLayerFeatures: PropTypes.func,
resetRedliningState: PropTypes.func,
setCurrentTask: PropTypes.func,
/** The style of active geometries (i.e. supported by the selected application) */
styleActive: PropTypes.shape({
/* Stroke color rgba array, i.e. [255, 0, 0, 0.5] */
strokeColor: PropTypes.array,
/* Stroke width */
strokeWidth: PropTypes.number,
/* Stroke dash/gap pattern array. Empty for solid line. */
strokeDash: PropTypes.array,
/* Fill color rgba array, i.e. [255, 0, 0, 0.33] */
fillColor: PropTypes.array
}),
/** The style of inactive (i.e. not supported by the selected application) */
styleInactive: PropTypes.shape({
/* Stroke color rgba array, i.e. [255, 0, 0, 0.5] */
strokeColor: PropTypes.array,
/* Stroke width */
strokeWidth: PropTypes.number,
/* Stroke dash/gap pattern array. Empty for solid line. */
strokeDash: PropTypes.array,
/* Fill color rgba array, i.e. [255, 0, 0, 0.33] */
fillColor: PropTypes.array
}),
theme: PropTypes.object,
themes: PropTypes.object
});
_defineProperty(GeometryDigitizer, "defaultState", {
bufferDistance: 0,
geomLink: "",
outputWindowVisible: false,
outputLoaded: false,
outputWindowTitle: "",
outputWindowSize: null,
pickGeomType: null
});
_defineProperty(GeometryDigitizer, "defaultProps", {
styleInactive: {
strokeColor: [127, 127, 127, 1],
fillColor: [127, 127, 127, 0.33]
},
styleActive: {
strokeColor: [0, 160, 0, 1],
fillColor: [0, 160, 0, 0.33]
}
});
export default connect(function (state) {
return {
active: state.task.id === "GeometryDigitizer",
layers: state.layers.flat,
redlining: state.redlining,
theme: state.theme.current,
themes: state.theme.themes
};
}, {
addLayerFeatures: addLayerFeatures,
changeRedliningState: changeRedliningState,
clearLayer: clearLayer,
removeLayer: removeLayer,
removeLayerFeatures: removeLayerFeatures,
resetRedliningState: resetRedliningState
})(GeometryDigitizer);