@opengeoweb/webmap-react 15.0.0 → 15.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.esm.js
CHANGED
|
@@ -2,7 +2,7 @@ import { WMInvalidDateValues, getCorrectWMSDimName, WMImageStore, WMImageStoreLo
|
|
|
2
2
|
export { WEBMAP_NAMESPACE, webmapTranslations } from '@opengeoweb/webmap';
|
|
3
3
|
import React, { createContext, useMemo, useRef, useState, useEffect, useContext, useCallback, useLayoutEffect } from 'react';
|
|
4
4
|
import { memoize, range, without, isEqual, throttle, debounce, cloneDeep } from 'lodash';
|
|
5
|
-
import { equals, containsExtent, getCenter
|
|
5
|
+
import { equals, containsExtent, getCenter } from 'ol/extent';
|
|
6
6
|
import ImageState from 'ol/ImageState';
|
|
7
7
|
import LayerProperty from 'ol/layer/Property';
|
|
8
8
|
import { fromResolutionLike } from 'ol/resolution';
|
|
@@ -13,16 +13,16 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
|
13
13
|
import { CustomTooltip, CanvasComponent, useWheelStopPropagation, ToolContainerDraggable, CustomIconButton, dateUtils, useMakeSureContainerStaysInsideWindow, Draggable, Resizable } from '@opengeoweb/shared';
|
|
14
14
|
import { Paper, Box, Typography, useTheme, Grid, styled, Slider, TextField, FormControl, InputLabel, Select, MenuItem, Icon as Icon$2, FormLabel, Switch, ThemeProvider } from '@mui/material';
|
|
15
15
|
import { queryOptions, useQuery } from '@tanstack/react-query';
|
|
16
|
-
import { Point, MultiPoint,
|
|
16
|
+
import { Point, MultiPoint, LineString, Polygon } from 'ol/geom';
|
|
17
17
|
import { Style, Icon as Icon$1, Circle, Stroke, Fill, Text } from 'ol/style';
|
|
18
|
-
import { arrowUpPath, Home, Add, Minus, List, Equalizer, DimensionsElevation, Link, LinkOff, Info, DimensionsOther, DimensionsRefTime, DimensionsTime, locationPath, Location, DrawToolSmoothLine, DrawToolFreehand, DrawToolOval, DrawToolCircle, DrawToolSquare, Delete, DrawToolLineString, DrawToolRectangle, DrawToolPolygon, DrawToolPoint, DrawFIRLand, ArrowUp, darkTheme, ChevronRight, Clock as Clock$1, Resize } from '@opengeoweb/theme';
|
|
18
|
+
import { arrowUpPath, Home, Add, Minus, List, Equalizer, DimensionsElevation, Link, LinkOff, Info, DimensionsOther, DimensionsRefTime, DimensionsTime, locationPath, rotatePath, Location, DrawToolSmoothLine, DrawToolFreehand, DrawToolOval, DrawToolCircle, DrawToolSquare, Delete, DrawToolLineString, DrawToolRectangle, DrawToolPolygon, DrawToolPoint, DrawFIRLand, ArrowUp, darkTheme, ChevronRight, Clock as Clock$1, Resize } from '@opengeoweb/theme';
|
|
19
19
|
import { http, HttpResponse } from 'msw';
|
|
20
20
|
import 'i18next';
|
|
21
21
|
import { useTranslation } from 'react-i18next';
|
|
22
22
|
import Box$1 from '@mui/material/Box';
|
|
23
23
|
import Typography$1 from '@mui/material/Typography';
|
|
24
24
|
import { View, Map, Feature, Collection, Overlay } from 'ol';
|
|
25
|
-
import { defaults, MouseWheelZoom, Draw, Modify, Translate, Snap } from 'ol/interaction';
|
|
25
|
+
import { defaults, MouseWheelZoom, Draw, Modify, Translate, Snap, DragPan } from 'ol/interaction';
|
|
26
26
|
import 'ol/ol.css';
|
|
27
27
|
import { listen, unlistenByKey } from 'ol/events';
|
|
28
28
|
import { unByKey } from 'ol/Observable';
|
|
@@ -13925,6 +13925,28 @@ var fetchStacCollection = /*#__PURE__*/function () {
|
|
|
13925
13925
|
return _ref.apply(this, arguments);
|
|
13926
13926
|
};
|
|
13927
13927
|
}();
|
|
13928
|
+
var fetchStacItem = /*#__PURE__*/function () {
|
|
13929
|
+
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(stacItemUrl) {
|
|
13930
|
+
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
|
|
13931
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
13932
|
+
case 0:
|
|
13933
|
+
_context2.next = 2;
|
|
13934
|
+
return fetch(stacItemUrl);
|
|
13935
|
+
case 2:
|
|
13936
|
+
_context2.next = 4;
|
|
13937
|
+
return _context2.sent.json();
|
|
13938
|
+
case 4:
|
|
13939
|
+
return _context2.abrupt("return", _context2.sent);
|
|
13940
|
+
case 5:
|
|
13941
|
+
case "end":
|
|
13942
|
+
return _context2.stop();
|
|
13943
|
+
}
|
|
13944
|
+
}, _callee2);
|
|
13945
|
+
}));
|
|
13946
|
+
return function fetchStacItem(_x2) {
|
|
13947
|
+
return _ref2.apply(this, arguments);
|
|
13948
|
+
};
|
|
13949
|
+
}();
|
|
13928
13950
|
var fetchStacItems = /*#__PURE__*/function () {
|
|
13929
13951
|
var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3(collectionUrl) {
|
|
13930
13952
|
var collection;
|
|
@@ -15373,6 +15395,29 @@ var ICON_LOCATIONMARKER_MODIFY = createIconStyle(locationPath, {
|
|
|
15373
15395
|
anchor: [0.5, 1]
|
|
15374
15396
|
}
|
|
15375
15397
|
});
|
|
15398
|
+
// Pre-rendered canvas for the rotate icon so we can create
|
|
15399
|
+
// dynamically rotated instances that follow the box orientation.
|
|
15400
|
+
var ROTATE_ICON_SIZE = [24, 24];
|
|
15401
|
+
var ROTATE_ICON_CANVAS = typeof document !== 'undefined' ? function () {
|
|
15402
|
+
var canvas = document.createElement('canvas');
|
|
15403
|
+
var width = ROTATE_ICON_SIZE[0],
|
|
15404
|
+
height = ROTATE_ICON_SIZE[1];
|
|
15405
|
+
canvas.width = width;
|
|
15406
|
+
canvas.height = height;
|
|
15407
|
+
var ctx = canvas.getContext('2d');
|
|
15408
|
+
if (!ctx) {
|
|
15409
|
+
return undefined;
|
|
15410
|
+
}
|
|
15411
|
+
var path = new Path2D(rotatePath);
|
|
15412
|
+
// Draw a white outline behind the rotate icon for better contrast
|
|
15413
|
+
ctx.lineWidth = 1.5;
|
|
15414
|
+
ctx.strokeStyle = 'rgba(255, 255, 255, 1)';
|
|
15415
|
+
ctx.stroke(path);
|
|
15416
|
+
// Fill the actual rotate icon
|
|
15417
|
+
ctx.fillStyle = '#051039';
|
|
15418
|
+
ctx.fill(path);
|
|
15419
|
+
return canvas;
|
|
15420
|
+
}() : undefined;
|
|
15376
15421
|
var FEATURE_VERTICES_EDIT_HANDLES = new Style$1({
|
|
15377
15422
|
image: FEATURE_VERTICE_IMAGE,
|
|
15378
15423
|
geometry: function geometry(feature) {
|
|
@@ -15965,49 +16010,294 @@ new Style$1({
|
|
|
15965
16010
|
}),
|
|
15966
16011
|
// Vertices
|
|
15967
16012
|
FEATURE_VERTICES_EDIT_HANDLES];
|
|
15968
|
-
// This function creates a box out of a modified polygon. It detects which corner was moved by comparing
|
|
15969
|
-
//
|
|
15970
|
-
//
|
|
16013
|
+
// This function creates a box out of a modified polygon. It detects which corner was moved by comparing vertices between the two geometries. Then it draws a new box based on the moved vertice and the opposing vertice.
|
|
16014
|
+
// For squares the box scales uniformly around the fixed center.
|
|
16015
|
+
// For rectangles the diagonal opposite corner does not change, the other two corners are recomputed.
|
|
16016
|
+
// The original rotation is preserved.
|
|
15971
16017
|
var createBoxBasedOnModifiedVertex = function createBoxBasedOnModifiedVertex(modifiedGeometry, originalGeometry) {
|
|
15972
|
-
var
|
|
15973
|
-
var
|
|
15974
|
-
|
|
16018
|
+
var _classified$find, _classified$find2, _classified$find3, _classified$find4;
|
|
16019
|
+
var keepSquare = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
16020
|
+
var originalRing = originalGeometry.getCoordinates()[0];
|
|
16021
|
+
var modifiedRing = modifiedGeometry.getCoordinates()[0];
|
|
16022
|
+
if (!originalRing || !modifiedRing || originalRing.length < 4) {
|
|
16023
|
+
return originalGeometry;
|
|
16024
|
+
}
|
|
16025
|
+
// Strip closing coordinate if present so we only work with the four corners.
|
|
16026
|
+
var stripClose = function stripClose(ring) {
|
|
16027
|
+
if (ring.length > 4 && ring[0][0] === ring[ring.length - 1][0] && ring[0][1] === ring[ring.length - 1][1]) {
|
|
16028
|
+
return ring.slice(0, ring.length - 1);
|
|
16029
|
+
}
|
|
16030
|
+
return ring;
|
|
16031
|
+
};
|
|
16032
|
+
var originalCorners = stripClose(originalRing);
|
|
16033
|
+
var modifiedCorners = stripClose(modifiedRing);
|
|
16034
|
+
if (originalCorners.length < 4 || modifiedCorners.length < 4) {
|
|
16035
|
+
return originalGeometry;
|
|
16036
|
+
}
|
|
16037
|
+
// Detect which corner was dragged by comparing original vs modified
|
|
16038
|
+
var draggedCornerIndex = originalCorners.findIndex(function (orig, idx) {
|
|
16039
|
+
var mod = modifiedCorners[idx];
|
|
16040
|
+
return orig[0] !== mod[0] || orig[1] !== mod[1];
|
|
15975
16041
|
});
|
|
15976
16042
|
if (draggedCornerIndex === -1) {
|
|
16043
|
+
// No corner actually changed, keep original
|
|
15977
16044
|
return originalGeometry;
|
|
15978
16045
|
}
|
|
15979
|
-
var
|
|
15980
|
-
|
|
15981
|
-
var
|
|
15982
|
-
|
|
15983
|
-
|
|
15984
|
-
|
|
15985
|
-
|
|
15986
|
-
|
|
15987
|
-
|
|
15988
|
-
|
|
15989
|
-
|
|
15990
|
-
|
|
15991
|
-
|
|
15992
|
-
|
|
15993
|
-
|
|
16046
|
+
var dragged = modifiedCorners[draggedCornerIndex];
|
|
16047
|
+
// Compute center of the original box
|
|
16048
|
+
var centerX = originalCorners.reduce(function (sum, _ref) {
|
|
16049
|
+
var _ref2 = _slicedToArray(_ref, 1),
|
|
16050
|
+
x = _ref2[0];
|
|
16051
|
+
return sum + x;
|
|
16052
|
+
}, 0) / originalCorners.length;
|
|
16053
|
+
var centerY = originalCorners.reduce(function (sum, _ref3) {
|
|
16054
|
+
var _ref4 = _slicedToArray(_ref3, 2),
|
|
16055
|
+
y = _ref4[1];
|
|
16056
|
+
return sum + y;
|
|
16057
|
+
}, 0) / originalCorners.length;
|
|
16058
|
+
// Derive local axes from the original box so we can preserve its
|
|
16059
|
+
// rotation. Use the edges from corner 0 to its two neighbours.
|
|
16060
|
+
var p0 = originalCorners[0];
|
|
16061
|
+
var p1 = originalCorners[1];
|
|
16062
|
+
var p3 = originalCorners[3];
|
|
16063
|
+
var edgeUx = p1[0] - p0[0];
|
|
16064
|
+
var edgeUy = p1[1] - p0[1];
|
|
16065
|
+
var edgeVx = p3[0] - p0[0];
|
|
16066
|
+
var edgeVy = p3[1] - p0[1];
|
|
16067
|
+
var edgeUlength = Math.hypot(edgeUx, edgeUy);
|
|
16068
|
+
var edgeVlenght = Math.hypot(edgeVx, edgeVy);
|
|
16069
|
+
if (!edgeUlength || !edgeVlenght) {
|
|
16070
|
+
// if either egde has zero length, bail out
|
|
16071
|
+
return originalGeometry;
|
|
15994
16072
|
}
|
|
15995
|
-
|
|
15996
|
-
|
|
15997
|
-
|
|
15998
|
-
|
|
15999
|
-
|
|
16000
|
-
|
|
16001
|
-
|
|
16002
|
-
|
|
16003
|
-
|
|
16004
|
-
|
|
16005
|
-
|
|
16006
|
-
|
|
16007
|
-
|
|
16073
|
+
var ux = edgeUx / edgeUlength;
|
|
16074
|
+
var uy = edgeUy / edgeUlength;
|
|
16075
|
+
var vx = edgeVx / edgeVlenght;
|
|
16076
|
+
var vy = edgeVy / edgeVlenght;
|
|
16077
|
+
// Remember which corner is which
|
|
16078
|
+
var cornerSigns = [{
|
|
16079
|
+
sx: -1,
|
|
16080
|
+
sy: -1
|
|
16081
|
+
}, {
|
|
16082
|
+
sx: 1,
|
|
16083
|
+
sy: -1
|
|
16084
|
+
}, {
|
|
16085
|
+
sx: 1,
|
|
16086
|
+
sy: 1
|
|
16087
|
+
}, {
|
|
16088
|
+
sx: -1,
|
|
16089
|
+
sy: 1
|
|
16090
|
+
}];
|
|
16091
|
+
var minSize = 1e-6;
|
|
16092
|
+
// Squares keep their center fixed and scale uniformly from the
|
|
16093
|
+
// dragged corner.
|
|
16094
|
+
if (keepSquare) {
|
|
16095
|
+
// Project the dragged corner into the same local coordinate
|
|
16096
|
+
// system to determine the new half-size while keeping the
|
|
16097
|
+
// existing rotation.
|
|
16098
|
+
var drx = dragged[0] - centerX;
|
|
16099
|
+
var dry = dragged[1] - centerY;
|
|
16100
|
+
var dragLocalX = drx * ux + dry * uy;
|
|
16101
|
+
var dragLocalY = drx * vx + dry * vy;
|
|
16102
|
+
var _halfWidth = Math.max(Math.abs(dragLocalX), minSize);
|
|
16103
|
+
var _halfHeight = Math.max(Math.abs(dragLocalY), minSize);
|
|
16104
|
+
var halfSize = Math.max(_halfWidth, _halfHeight);
|
|
16105
|
+
var newCorners = originalCorners.map(function (_, idx) {
|
|
16106
|
+
var _cornerSigns$idx = cornerSigns[idx],
|
|
16107
|
+
sx = _cornerSigns$idx.sx,
|
|
16108
|
+
sy = _cornerSigns$idx.sy;
|
|
16109
|
+
var localX = sx * halfSize;
|
|
16110
|
+
var localY = sy * halfSize;
|
|
16111
|
+
var worldX = centerX + localX * ux + localY * vx;
|
|
16112
|
+
var worldY = centerY + localX * uy + localY * vy;
|
|
16113
|
+
return [worldX, worldY];
|
|
16114
|
+
});
|
|
16115
|
+
newCorners.push(newCorners[0]);
|
|
16116
|
+
return new Polygon([newCorners]);
|
|
16117
|
+
}
|
|
16118
|
+
// Rectangles (non-squares) should resize using the dragged
|
|
16119
|
+
// corner while keeping the diagonal opposite anchored. The two remaining
|
|
16120
|
+
// corners adjust accordingly, and the overall rotation is kept. When the
|
|
16121
|
+
// dragged corner crosses past the center, the rectangle is allowed to
|
|
16122
|
+
// "flip" instead of bouncing back.
|
|
16123
|
+
// Diagonal corner relative to the dragged one in the 4-corner ring
|
|
16124
|
+
var anchorIndex = (draggedCornerIndex + 2) % originalCorners.length;
|
|
16125
|
+
var anchor = originalCorners[anchorIndex];
|
|
16126
|
+
// Vector from anchored corner to dragged corner, in world space
|
|
16127
|
+
var deltaWx = dragged[0] - anchor[0];
|
|
16128
|
+
var deltaWy = dragged[1] - anchor[1];
|
|
16129
|
+
// Express that vector in the local (u, v) frame
|
|
16130
|
+
var deltaLocalX = deltaWx * ux + deltaWy * uy;
|
|
16131
|
+
var deltaLocalY = deltaWx * vx + deltaWy * vy;
|
|
16132
|
+
// Half-sizes in local coordinates. We keep the sign so that when the
|
|
16133
|
+
// dragged corner crosses past the anchor along either axis, the
|
|
16134
|
+
// rectangle flips instead of being clamped.
|
|
16135
|
+
var halfWidth = deltaLocalX / 2;
|
|
16136
|
+
var halfHeight = deltaLocalY / 2;
|
|
16137
|
+
// Center in local coordinates is halfway between anchor (0,0) and
|
|
16138
|
+
// dragged (deltaLocalX, deltaLocalY).
|
|
16139
|
+
var centerLocalX = halfWidth;
|
|
16140
|
+
var centerLocalY = halfHeight;
|
|
16141
|
+
// Convert center back to world coordinates.
|
|
16142
|
+
var centerXNew = anchor[0] + centerLocalX * ux + centerLocalY * vx;
|
|
16143
|
+
var centerYNew = anchor[1] + centerLocalX * uy + centerLocalY * vy;
|
|
16144
|
+
// Rebuild the four corners in local coordinates around the new center.
|
|
16145
|
+
var localCorners = [[-halfWidth, -halfHeight], [halfWidth, -halfHeight], [halfWidth, halfHeight], [-halfWidth, halfHeight]];
|
|
16146
|
+
var newCornersWorld = localCorners.map(function (_ref5) {
|
|
16147
|
+
var _ref6 = _slicedToArray(_ref5, 2),
|
|
16148
|
+
lx = _ref6[0],
|
|
16149
|
+
ly = _ref6[1];
|
|
16150
|
+
var worldX = centerXNew + lx * ux + ly * vx;
|
|
16151
|
+
var worldY = centerYNew + lx * uy + ly * vy;
|
|
16152
|
+
return [worldX, worldY];
|
|
16153
|
+
});
|
|
16154
|
+
// Normalise corner order so index 0..3 always correspond to
|
|
16155
|
+
// bottom-left, bottom-right, top-right, top-left in the box's
|
|
16156
|
+
// local frame. This keeps rotate-handle orientation and
|
|
16157
|
+
// indexing stable even after the rectangle "flips" when a
|
|
16158
|
+
// corner is dragged past the centre.
|
|
16159
|
+
var classified = newCornersWorld.map(function (corner) {
|
|
16160
|
+
var _corner = _slicedToArray(corner, 2),
|
|
16161
|
+
wx = _corner[0],
|
|
16162
|
+
wy = _corner[1];
|
|
16163
|
+
var rx = wx - centerXNew;
|
|
16164
|
+
var ry = wy - centerYNew;
|
|
16165
|
+
var localX = rx * ux + ry * uy;
|
|
16166
|
+
var localY = rx * vx + ry * vy;
|
|
16167
|
+
return {
|
|
16168
|
+
corner: corner,
|
|
16169
|
+
qx: localX >= 0 ? 1 : -1,
|
|
16170
|
+
qy: localY >= 0 ? 1 : -1
|
|
16171
|
+
};
|
|
16172
|
+
});
|
|
16173
|
+
var bl = (_classified$find = classified.find(function (corner) {
|
|
16174
|
+
return corner.qx === -1 && corner.qy === -1;
|
|
16175
|
+
})) === null || _classified$find === void 0 ? void 0 : _classified$find.corner;
|
|
16176
|
+
var br = (_classified$find2 = classified.find(function (corner) {
|
|
16177
|
+
return corner.qx === 1 && corner.qy === -1;
|
|
16178
|
+
})) === null || _classified$find2 === void 0 ? void 0 : _classified$find2.corner;
|
|
16179
|
+
var tr = (_classified$find3 = classified.find(function (corner) {
|
|
16180
|
+
return corner.qx === 1 && corner.qy === 1;
|
|
16181
|
+
})) === null || _classified$find3 === void 0 ? void 0 : _classified$find3.corner;
|
|
16182
|
+
var tl = (_classified$find4 = classified.find(function (corner) {
|
|
16183
|
+
return corner.qx === -1 && corner.qy === 1;
|
|
16184
|
+
})) === null || _classified$find4 === void 0 ? void 0 : _classified$find4.corner;
|
|
16185
|
+
var orderedCorners = bl && br && tr && tl ? [bl, br, tr, tl] : newCornersWorld;
|
|
16186
|
+
// Close the ring
|
|
16187
|
+
orderedCorners.push(orderedCorners[0]);
|
|
16188
|
+
return new Polygon([orderedCorners]);
|
|
16189
|
+
};
|
|
16190
|
+
var getBoxRotateHandlePoints = function getBoxRotateHandlePoints(feature, resolution) {
|
|
16191
|
+
var originalGeometry = feature === null || feature === void 0 ? void 0 : feature.get('originalGeometry');
|
|
16192
|
+
var geom = originalGeometry ? createBoxBasedOnModifiedVertex(feature.getGeometry(), originalGeometry, feature.get('selectionType') === 'square') : feature === null || feature === void 0 ? void 0 : feature.getGeometry();
|
|
16193
|
+
if (!geom || geom.getType() !== 'Polygon') {
|
|
16008
16194
|
return undefined;
|
|
16009
16195
|
}
|
|
16010
|
-
|
|
16196
|
+
var ring = geom.getCoordinates()[0];
|
|
16197
|
+
if (ring.length < 4) {
|
|
16198
|
+
return undefined;
|
|
16199
|
+
}
|
|
16200
|
+
// First four coordinates are the corners of the box (possibly rotated)
|
|
16201
|
+
var corners = ring.slice(0, 4);
|
|
16202
|
+
// Compute box center as the average of the corners
|
|
16203
|
+
var centerX = corners.reduce(function (sum, _ref7) {
|
|
16204
|
+
var _ref8 = _slicedToArray(_ref7, 1),
|
|
16205
|
+
x = _ref8[0];
|
|
16206
|
+
return sum + x;
|
|
16207
|
+
}, 0) / corners.length;
|
|
16208
|
+
var centerY = corners.reduce(function (sum, _ref9) {
|
|
16209
|
+
var _ref0 = _slicedToArray(_ref9, 2),
|
|
16210
|
+
y = _ref0[1];
|
|
16211
|
+
return sum + y;
|
|
16212
|
+
}, 0) / corners.length;
|
|
16213
|
+
// Place the rotate handle at a nearly constant distance from the
|
|
16214
|
+
// corner in screen space, independent of how large the box is.
|
|
16215
|
+
// We move a fixed number of pixels along the outward diagonal
|
|
16216
|
+
// from each corner.
|
|
16217
|
+
var pixelOffset = 16; // pixels away from the corner
|
|
16218
|
+
var baseOffset = resolution ? pixelOffset * resolution : 0;
|
|
16219
|
+
return corners.map(function (_ref1) {
|
|
16220
|
+
var _ref10 = _slicedToArray(_ref1, 2),
|
|
16221
|
+
x = _ref10[0],
|
|
16222
|
+
y = _ref10[1];
|
|
16223
|
+
var dx = x - centerX;
|
|
16224
|
+
var dy = y - centerY;
|
|
16225
|
+
var distance = Math.hypot(dx, dy);
|
|
16226
|
+
if (!distance || !baseOffset) {
|
|
16227
|
+
return [x, y];
|
|
16228
|
+
}
|
|
16229
|
+
var ux = dx / distance;
|
|
16230
|
+
var uy = dy / distance;
|
|
16231
|
+
return [x + ux * baseOffset, y + uy * baseOffset];
|
|
16232
|
+
});
|
|
16233
|
+
};
|
|
16234
|
+
var boxModificationStyle = function boxModificationStyle(feature, resolution) {
|
|
16235
|
+
var styles = [];
|
|
16236
|
+
var originalGeometry = feature === null || feature === void 0 ? void 0 : feature.get('originalGeometry');
|
|
16237
|
+
var geom = originalGeometry ? createBoxBasedOnModifiedVertex(feature.getGeometry(), originalGeometry, feature.get('selectionType') === 'square') : feature.getGeometry();
|
|
16238
|
+
if (geom) {
|
|
16239
|
+
styles.push(new Style$1({
|
|
16240
|
+
fill: FEATURE_FILL,
|
|
16241
|
+
stroke: FEATURE_STROKE_EDIT,
|
|
16242
|
+
geometry: geom
|
|
16243
|
+
}));
|
|
16244
|
+
}
|
|
16245
|
+
if (geom && (geom.getType() === 'Polygon' || geom.getType() === 'LineString')) {
|
|
16246
|
+
var coordinates = geom.getType() === 'Polygon' ? geom.getCoordinates()[0] : geom.getCoordinates();
|
|
16247
|
+
styles.push(new Style$1({
|
|
16248
|
+
image: FEATURE_VERTICE_IMAGE,
|
|
16249
|
+
geometry: new MultiPoint(coordinates)
|
|
16250
|
+
}));
|
|
16251
|
+
}
|
|
16252
|
+
var handlePoints = getBoxRotateHandlePoints(feature, resolution);
|
|
16253
|
+
var activeIndexRaw = feature.get('activeRotateHandleIndex');
|
|
16254
|
+
var activeIndex = typeof activeIndexRaw === 'number' && activeIndexRaw >= 0 && activeIndexRaw < 4 ? activeIndexRaw : undefined;
|
|
16255
|
+
// While the box is being modified (corner drag), hide the rotate
|
|
16256
|
+
// handle so only sizing handles are visible.
|
|
16257
|
+
var suppressRotateHandle = feature.get('suppressRotateHandle');
|
|
16258
|
+
if (ROTATE_ICON_CANVAS && handlePoints && handlePoints.length >= 4 && activeIndex !== undefined && !suppressRotateHandle) {
|
|
16259
|
+
var _handlePoints = _slicedToArray(handlePoints, 4),
|
|
16260
|
+
h0 = _handlePoints[0],
|
|
16261
|
+
h1 = _handlePoints[1],
|
|
16262
|
+
h2 = _handlePoints[2],
|
|
16263
|
+
h3 = _handlePoints[3];
|
|
16264
|
+
// Base angle: along the edge between first two corner handles.
|
|
16265
|
+
var baseAngle = Math.atan2(h1[1] - h0[1], h1[0] - h0[0]);
|
|
16266
|
+
// Assign per-corner offsets.
|
|
16267
|
+
var handleConfigs = [{
|
|
16268
|
+
point: h0,
|
|
16269
|
+
offset: 0
|
|
16270
|
+
},
|
|
16271
|
+
// bottom-left
|
|
16272
|
+
{
|
|
16273
|
+
point: h1,
|
|
16274
|
+
offset: -Math.PI / 2
|
|
16275
|
+
},
|
|
16276
|
+
// bottom-right
|
|
16277
|
+
{
|
|
16278
|
+
point: h2,
|
|
16279
|
+
offset: Math.PI
|
|
16280
|
+
},
|
|
16281
|
+
// top-right
|
|
16282
|
+
{
|
|
16283
|
+
point: h3,
|
|
16284
|
+
offset: Math.PI / 2
|
|
16285
|
+
} // top-left
|
|
16286
|
+
];
|
|
16287
|
+
var _handleConfigs$active = handleConfigs[activeIndex],
|
|
16288
|
+
point = _handleConfigs$active.point,
|
|
16289
|
+
offset = _handleConfigs$active.offset;
|
|
16290
|
+
var icon = new Icon$1({
|
|
16291
|
+
img: ROTATE_ICON_CANVAS,
|
|
16292
|
+
rotation: -baseAngle + offset
|
|
16293
|
+
});
|
|
16294
|
+
styles.push(new Style$1({
|
|
16295
|
+
image: icon,
|
|
16296
|
+
geometry: new MultiPoint([point])
|
|
16297
|
+
}));
|
|
16298
|
+
}
|
|
16299
|
+
return styles;
|
|
16300
|
+
};
|
|
16011
16301
|
var circleFeatureStyle = function circleFeatureStyle(feature, resolution) {
|
|
16012
16302
|
// use OL default styles to keep circle edge tracking
|
|
16013
16303
|
var styles = createDefaultStyle(feature, resolution);
|
|
@@ -16334,6 +16624,48 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
|
|
|
16334
16624
|
var lastPointerEvent = null;
|
|
16335
16625
|
var trackPointerMove = function trackPointerMove(event) {
|
|
16336
16626
|
lastPointerEvent = event;
|
|
16627
|
+
// Update which rotate handle is "active" so only that
|
|
16628
|
+
// icon is rendered near the mouse when editing boxes/squares.
|
|
16629
|
+
// While rotating, keep the originally clicked handle active.
|
|
16630
|
+
if (isBoxOrSquare && selectedFeatureHasGeometry && !isRotating) {
|
|
16631
|
+
var featureToRotate = editFeatureCollection.item(0);
|
|
16632
|
+
if (!featureToRotate) {
|
|
16633
|
+
return;
|
|
16634
|
+
}
|
|
16635
|
+
var resolution = map.getView().getResolution();
|
|
16636
|
+
var handlePoints = getBoxRotateHandlePoints(featureToRotate, resolution);
|
|
16637
|
+
var prevIndex = featureToRotate.get('activeRotateHandleIndex');
|
|
16638
|
+
var newIndex;
|
|
16639
|
+
if (!handlePoints || !resolution) {
|
|
16640
|
+
newIndex = undefined;
|
|
16641
|
+
} else {
|
|
16642
|
+
var coord = map.getEventCoordinate(event);
|
|
16643
|
+
var threshold = 18 * resolution; // enlarge hover hit area for rotate handle
|
|
16644
|
+
var closestIndex = -1;
|
|
16645
|
+
var closestDist = Infinity;
|
|
16646
|
+
handlePoints.forEach(function (_ref2, idx) {
|
|
16647
|
+
var _ref3 = _slicedToArray(_ref2, 2),
|
|
16648
|
+
hx = _ref3[0],
|
|
16649
|
+
hy = _ref3[1];
|
|
16650
|
+
var dx = coord[0] - hx;
|
|
16651
|
+
var dy = coord[1] - hy;
|
|
16652
|
+
var dist = Math.sqrt(dx * dx + dy * dy);
|
|
16653
|
+
if (dist < closestDist) {
|
|
16654
|
+
closestDist = dist;
|
|
16655
|
+
closestIndex = idx;
|
|
16656
|
+
}
|
|
16657
|
+
});
|
|
16658
|
+
newIndex = closestDist <= threshold ? closestIndex : undefined;
|
|
16659
|
+
}
|
|
16660
|
+
if (prevIndex !== newIndex) {
|
|
16661
|
+
if (newIndex === undefined) {
|
|
16662
|
+
featureToRotate.unset('activeRotateHandleIndex', true);
|
|
16663
|
+
} else {
|
|
16664
|
+
featureToRotate.set('activeRotateHandleIndex', newIndex, true);
|
|
16665
|
+
}
|
|
16666
|
+
layer.changed();
|
|
16667
|
+
}
|
|
16668
|
+
}
|
|
16337
16669
|
};
|
|
16338
16670
|
map.getViewport().addEventListener('pointermove', trackPointerMove);
|
|
16339
16671
|
var deleteVertexOnDeleteKey = function deleteVertexOnDeleteKey(event) {
|
|
@@ -16346,12 +16678,13 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
|
|
|
16346
16678
|
}
|
|
16347
16679
|
};
|
|
16348
16680
|
window.addEventListener('keydown', deleteVertexOnDeleteKey);
|
|
16349
|
-
var
|
|
16681
|
+
var isSquare = actualDrawMode === DRAWMODE.SQUARE;
|
|
16682
|
+
var isBoxOrSquare = actualDrawMode === DRAWMODE.BOX || isSquare;
|
|
16350
16683
|
// Modifying is a combination of Modify and Translate interactions
|
|
16351
16684
|
var modify = new Modify({
|
|
16352
16685
|
features: editFeatureCollection,
|
|
16353
16686
|
insertVertexCondition: !isBoxOrSquare ? always : never,
|
|
16354
|
-
style: modifyHandleStyle
|
|
16687
|
+
style: isSquare ? [] : modifyHandleStyle
|
|
16355
16688
|
});
|
|
16356
16689
|
if (isBoxOrSquare) {
|
|
16357
16690
|
// Box is a special case:
|
|
@@ -16360,16 +16693,39 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
|
|
|
16360
16693
|
modify.on('modifystart', function (evt) {
|
|
16361
16694
|
var _feature$getGeometry2;
|
|
16362
16695
|
var feature = evt.features.getArray()[0];
|
|
16696
|
+
// Mark that we are modifying the box so rotate handles
|
|
16697
|
+
// can be hidden while dragging.
|
|
16698
|
+
feature.set('suppressRotateHandle', true, true);
|
|
16363
16699
|
feature.set('originalGeometry', (_feature$getGeometry2 = feature.getGeometry()) === null || _feature$getGeometry2 === void 0 ? void 0 : _feature$getGeometry2.clone(), true);
|
|
16700
|
+
var viewport = map.getViewport();
|
|
16701
|
+
if (viewport && viewport.style) {
|
|
16702
|
+
viewport.style.cursor = 'grabbing';
|
|
16703
|
+
}
|
|
16364
16704
|
});
|
|
16365
16705
|
modify.on('modifyend', function (evt) {
|
|
16366
16706
|
var feature = evt.features.getArray()[0];
|
|
16367
|
-
var boxPolygon = createBoxBasedOnModifiedVertex(feature.getGeometry(), feature.get('originalGeometry'));
|
|
16707
|
+
var boxPolygon = createBoxBasedOnModifiedVertex(feature.getGeometry(), feature.get('originalGeometry'), isSquare);
|
|
16368
16708
|
feature.setGeometry(boxPolygon);
|
|
16709
|
+
// Re-enable rotate handle visibility after modifying.
|
|
16710
|
+
feature.unset('suppressRotateHandle', true);
|
|
16711
|
+
var viewport = map.getViewport();
|
|
16712
|
+
if (viewport && viewport.style) {
|
|
16713
|
+
viewport.style.cursor = '';
|
|
16714
|
+
}
|
|
16369
16715
|
updateFeature(feature);
|
|
16370
16716
|
});
|
|
16371
16717
|
} else {
|
|
16718
|
+
modify.on('modifystart', function () {
|
|
16719
|
+
var viewport = map.getViewport();
|
|
16720
|
+
if (viewport && viewport.style) {
|
|
16721
|
+
viewport.style.cursor = 'grabbing';
|
|
16722
|
+
}
|
|
16723
|
+
});
|
|
16372
16724
|
modify.on('modifyend', function (evt) {
|
|
16725
|
+
var viewport = map.getViewport();
|
|
16726
|
+
if (viewport && viewport.style) {
|
|
16727
|
+
viewport.style.cursor = '';
|
|
16728
|
+
}
|
|
16373
16729
|
updateFeature(evt.features.getArray()[0]);
|
|
16374
16730
|
});
|
|
16375
16731
|
}
|
|
@@ -16379,6 +16735,236 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
|
|
|
16379
16735
|
translate.on('translateend', function (evt) {
|
|
16380
16736
|
updateFeature(evt.features.getArray()[0]);
|
|
16381
16737
|
});
|
|
16738
|
+
// Rotation handling for boxes and squares using the visual rotate handles
|
|
16739
|
+
var isRotating = false;
|
|
16740
|
+
var rotationCenter = null;
|
|
16741
|
+
var rotationStartAngle = 0;
|
|
16742
|
+
var originalRing = null;
|
|
16743
|
+
var disabledDragPans = [];
|
|
16744
|
+
// Track when the user has pressed down near a resize corner so we can
|
|
16745
|
+
// immediately show a grabbing cursor on mousedown (before any movement).
|
|
16746
|
+
var isPointerDownNearCorner = false;
|
|
16747
|
+
var handlePointerDownNearCorner = function handlePointerDownNearCorner(event) {
|
|
16748
|
+
if (!isBoxOrSquare || !selectedFeatureHasGeometry) {
|
|
16749
|
+
return;
|
|
16750
|
+
}
|
|
16751
|
+
var feature = editFeatureCollection.item(0);
|
|
16752
|
+
var geom = feature === null || feature === void 0 ? void 0 : feature.getGeometry();
|
|
16753
|
+
if (!geom || geom.getType() !== 'Polygon') {
|
|
16754
|
+
return;
|
|
16755
|
+
}
|
|
16756
|
+
var polygon = geom;
|
|
16757
|
+
var ring = polygon.getCoordinates()[0];
|
|
16758
|
+
if (!ring || ring.length < 4) {
|
|
16759
|
+
return;
|
|
16760
|
+
}
|
|
16761
|
+
var clickCoord = map.getEventCoordinate(event);
|
|
16762
|
+
var resolution = map.getView().getResolution();
|
|
16763
|
+
if (!resolution) {
|
|
16764
|
+
return;
|
|
16765
|
+
}
|
|
16766
|
+
var threshold = 10 * resolution;
|
|
16767
|
+
var closestDist = Infinity;
|
|
16768
|
+
ring.forEach(function (_ref4) {
|
|
16769
|
+
var _ref5 = _slicedToArray(_ref4, 2),
|
|
16770
|
+
vx = _ref5[0],
|
|
16771
|
+
vy = _ref5[1];
|
|
16772
|
+
var dx = clickCoord[0] - vx;
|
|
16773
|
+
var dy = clickCoord[1] - vy;
|
|
16774
|
+
var dist = Math.sqrt(dx * dx + dy * dy);
|
|
16775
|
+
if (dist < closestDist) {
|
|
16776
|
+
closestDist = dist;
|
|
16777
|
+
}
|
|
16778
|
+
});
|
|
16779
|
+
if (closestDist <= threshold) {
|
|
16780
|
+
var viewport = map.getViewport();
|
|
16781
|
+
if (viewport && viewport.style) {
|
|
16782
|
+
viewport.style.cursor = 'grabbing';
|
|
16783
|
+
}
|
|
16784
|
+
isPointerDownNearCorner = true;
|
|
16785
|
+
}
|
|
16786
|
+
};
|
|
16787
|
+
var handlePointerUpAfterCorner = function handlePointerUpAfterCorner() {
|
|
16788
|
+
if (!isPointerDownNearCorner && !isRotating) {
|
|
16789
|
+
return;
|
|
16790
|
+
}
|
|
16791
|
+
var viewport = map.getViewport();
|
|
16792
|
+
if (viewport && viewport.style) {
|
|
16793
|
+
viewport.style.cursor = '';
|
|
16794
|
+
}
|
|
16795
|
+
isPointerDownNearCorner = false;
|
|
16796
|
+
};
|
|
16797
|
+
var startRotateIfOnHandle = function startRotateIfOnHandle(event) {
|
|
16798
|
+
if (!isBoxOrSquare || !selectedFeatureHasGeometry) {
|
|
16799
|
+
return;
|
|
16800
|
+
}
|
|
16801
|
+
var featureToRotate = editFeatureCollection.item(0);
|
|
16802
|
+
var geom = featureToRotate === null || featureToRotate === void 0 ? void 0 : featureToRotate.getGeometry();
|
|
16803
|
+
if (!geom || geom.getType() !== 'Polygon') {
|
|
16804
|
+
return;
|
|
16805
|
+
}
|
|
16806
|
+
var polygon = geom;
|
|
16807
|
+
var ring = polygon.getCoordinates()[0];
|
|
16808
|
+
if (!ring || ring.length < 4) {
|
|
16809
|
+
return;
|
|
16810
|
+
}
|
|
16811
|
+
// Exclude possible closing coordinate
|
|
16812
|
+
var ringWithoutClose = ring.length > 4 && ring[0][0] === ring[ring.length - 1][0] && ring[0][1] === ring[ring.length - 1][1] ? ring.slice(0, ring.length - 1) : ring;
|
|
16813
|
+
var clickCoord = map.getEventCoordinate(event);
|
|
16814
|
+
var resolution = map.getView().getResolution();
|
|
16815
|
+
if (!resolution) {
|
|
16816
|
+
return;
|
|
16817
|
+
}
|
|
16818
|
+
// Use the same helper for handle locations as the style code,
|
|
16819
|
+
// so visual position and click area are consistent.
|
|
16820
|
+
var handlePoints = getBoxRotateHandlePoints(featureToRotate, resolution);
|
|
16821
|
+
if (!handlePoints) {
|
|
16822
|
+
return;
|
|
16823
|
+
}
|
|
16824
|
+
var threshold = 12 * resolution; // enlarge click hit area for rotate handle
|
|
16825
|
+
// Determine which handle was clicked (nearest within threshold)
|
|
16826
|
+
var closestIndex = -1;
|
|
16827
|
+
var closestDist = Infinity;
|
|
16828
|
+
handlePoints.forEach(function (_ref6, idx) {
|
|
16829
|
+
var _ref7 = _slicedToArray(_ref6, 2),
|
|
16830
|
+
hx = _ref7[0],
|
|
16831
|
+
hy = _ref7[1];
|
|
16832
|
+
var dx = clickCoord[0] - hx;
|
|
16833
|
+
var dy = clickCoord[1] - hy;
|
|
16834
|
+
var dist = Math.sqrt(dx * dx + dy * dy);
|
|
16835
|
+
if (dist < closestDist) {
|
|
16836
|
+
closestDist = dist;
|
|
16837
|
+
closestIndex = idx;
|
|
16838
|
+
}
|
|
16839
|
+
});
|
|
16840
|
+
if (closestIndex === -1 || closestDist > threshold) {
|
|
16841
|
+
return;
|
|
16842
|
+
}
|
|
16843
|
+
// Lock the active rotate handle index so its icon stays visible
|
|
16844
|
+
var handleFeature = editFeatureCollection.item(0);
|
|
16845
|
+
if (handleFeature) {
|
|
16846
|
+
handleFeature.set('activeRotateHandleIndex', closestIndex, true);
|
|
16847
|
+
layer.changed();
|
|
16848
|
+
}
|
|
16849
|
+
isRotating = true;
|
|
16850
|
+
// Temporarily disable map panning while rotating so the
|
|
16851
|
+
// underlying map does not move when dragging the rotate handle.
|
|
16852
|
+
disabledDragPans = [];
|
|
16853
|
+
map.getInteractions().forEach(function (interaction) {
|
|
16854
|
+
if (interaction instanceof DragPan && interaction.getActive()) {
|
|
16855
|
+
disabledDragPans.push(interaction);
|
|
16856
|
+
interaction.setActive(false);
|
|
16857
|
+
}
|
|
16858
|
+
});
|
|
16859
|
+
// Recompute box center from the current polygon
|
|
16860
|
+
var minX = ringWithoutClose[0][0];
|
|
16861
|
+
var maxX = ringWithoutClose[0][0];
|
|
16862
|
+
var minY = ringWithoutClose[0][1];
|
|
16863
|
+
var maxY = ringWithoutClose[0][1];
|
|
16864
|
+
ringWithoutClose.forEach(function (_ref8) {
|
|
16865
|
+
var _ref9 = _slicedToArray(_ref8, 2),
|
|
16866
|
+
x = _ref9[0],
|
|
16867
|
+
y = _ref9[1];
|
|
16868
|
+
if (x < minX) {
|
|
16869
|
+
minX = x;
|
|
16870
|
+
}
|
|
16871
|
+
if (x > maxX) {
|
|
16872
|
+
maxX = x;
|
|
16873
|
+
}
|
|
16874
|
+
if (y < minY) {
|
|
16875
|
+
minY = y;
|
|
16876
|
+
}
|
|
16877
|
+
if (y > maxY) {
|
|
16878
|
+
maxY = y;
|
|
16879
|
+
}
|
|
16880
|
+
});
|
|
16881
|
+
var centerX = (minX + maxX) / 2;
|
|
16882
|
+
var centerY = (minY + maxY) / 2;
|
|
16883
|
+
rotationCenter = [centerX, centerY];
|
|
16884
|
+
rotationStartAngle = Math.atan2(clickCoord[1] - centerY, clickCoord[0] - centerX);
|
|
16885
|
+
originalRing = ring.map(function (_ref0) {
|
|
16886
|
+
var _ref1 = _slicedToArray(_ref0, 2),
|
|
16887
|
+
x = _ref1[0],
|
|
16888
|
+
y = _ref1[1];
|
|
16889
|
+
return [x, y];
|
|
16890
|
+
});
|
|
16891
|
+
// While rotating, show a grabbing cursor on the map viewport
|
|
16892
|
+
var viewport = map.getViewport();
|
|
16893
|
+
if (viewport && viewport.style) {
|
|
16894
|
+
viewport.style.cursor = 'grabbing';
|
|
16895
|
+
}
|
|
16896
|
+
// While rotating, disable modify/translate to avoid conflicts
|
|
16897
|
+
modify.setActive(false);
|
|
16898
|
+
translate.setActive(false);
|
|
16899
|
+
event.preventDefault();
|
|
16900
|
+
};
|
|
16901
|
+
var rotateOnPointerMove = function rotateOnPointerMove(event) {
|
|
16902
|
+
if (!isRotating || !rotationCenter || !originalRing) {
|
|
16903
|
+
return;
|
|
16904
|
+
}
|
|
16905
|
+
var featureToRotate = editFeatureCollection.item(0);
|
|
16906
|
+
var geom = featureToRotate === null || featureToRotate === void 0 ? void 0 : featureToRotate.getGeometry();
|
|
16907
|
+
if (!geom || geom.getType() !== 'Polygon') {
|
|
16908
|
+
return;
|
|
16909
|
+
}
|
|
16910
|
+
var polygon = geom;
|
|
16911
|
+
var _rotationCenter = rotationCenter,
|
|
16912
|
+
_rotationCenter2 = _slicedToArray(_rotationCenter, 2),
|
|
16913
|
+
centerX = _rotationCenter2[0],
|
|
16914
|
+
centerY = _rotationCenter2[1];
|
|
16915
|
+
var coord = map.getEventCoordinate(event);
|
|
16916
|
+
var angle = Math.atan2(coord[1] - centerY, coord[0] - centerX);
|
|
16917
|
+
var delta = angle - rotationStartAngle;
|
|
16918
|
+
var cos = Math.cos(delta);
|
|
16919
|
+
var sin = Math.sin(delta);
|
|
16920
|
+
var rotatedRing = originalRing.map(function (_ref10) {
|
|
16921
|
+
var _ref11 = _slicedToArray(_ref10, 2),
|
|
16922
|
+
x = _ref11[0],
|
|
16923
|
+
y = _ref11[1];
|
|
16924
|
+
var dx = x - centerX;
|
|
16925
|
+
var dy = y - centerY;
|
|
16926
|
+
var newX = centerX + dx * cos - dy * sin;
|
|
16927
|
+
var newY = centerY + dx * sin + dy * cos;
|
|
16928
|
+
return [newX, newY];
|
|
16929
|
+
});
|
|
16930
|
+
if (rotatedRing.length > 0) {
|
|
16931
|
+
// Ensure the ring is closed
|
|
16932
|
+
var _rotatedRing$ = _slicedToArray(rotatedRing[0], 2),
|
|
16933
|
+
firstX = _rotatedRing$[0],
|
|
16934
|
+
firstY = _rotatedRing$[1];
|
|
16935
|
+
rotatedRing[rotatedRing.length - 1] = [firstX, firstY];
|
|
16936
|
+
}
|
|
16937
|
+
polygon.setCoordinates([rotatedRing]);
|
|
16938
|
+
};
|
|
16939
|
+
var endRotate = function endRotate() {
|
|
16940
|
+
if (!isRotating) {
|
|
16941
|
+
return;
|
|
16942
|
+
}
|
|
16943
|
+
isRotating = false;
|
|
16944
|
+
rotationCenter = null;
|
|
16945
|
+
rotationStartAngle = 0;
|
|
16946
|
+
originalRing = null;
|
|
16947
|
+
// Re-enable any drag-pan interactions we disabled when rotation
|
|
16948
|
+
// started so normal map panning works again.
|
|
16949
|
+
disabledDragPans.forEach(function (interaction) {
|
|
16950
|
+
return interaction.setActive(true);
|
|
16951
|
+
});
|
|
16952
|
+
disabledDragPans = [];
|
|
16953
|
+
// Restore the default cursor when rotation stops
|
|
16954
|
+
var viewport = map.getViewport();
|
|
16955
|
+
if (viewport && viewport.style) {
|
|
16956
|
+
viewport.style.cursor = '';
|
|
16957
|
+
}
|
|
16958
|
+
modify.setActive(true);
|
|
16959
|
+
translate.setActive(true);
|
|
16960
|
+
var featureToRotate = editFeatureCollection.item(0);
|
|
16961
|
+
if (featureToRotate) {
|
|
16962
|
+
updateFeature(featureToRotate);
|
|
16963
|
+
// Clear active handle so hover logic can take over again
|
|
16964
|
+
featureToRotate.unset('activeRotateHandleIndex', true);
|
|
16965
|
+
layer.changed();
|
|
16966
|
+
}
|
|
16967
|
+
};
|
|
16382
16968
|
var abortOnEsc = function abortOnEsc(evt) {
|
|
16383
16969
|
if (evt.key === 'Escape') {
|
|
16384
16970
|
evt.preventDefault();
|
|
@@ -16390,7 +16976,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
|
|
|
16390
16976
|
}
|
|
16391
16977
|
}
|
|
16392
16978
|
};
|
|
16393
|
-
var onlyAllowMoving = actualDrawMode === DRAWMODE.CIRCLE || actualDrawMode === DRAWMODE.OVAL || actualDrawMode === DRAWMODE.FREEHANDLINE
|
|
16979
|
+
var onlyAllowMoving = actualDrawMode === DRAWMODE.CIRCLE || actualDrawMode === DRAWMODE.OVAL || actualDrawMode === DRAWMODE.FREEHANDLINE;
|
|
16394
16980
|
if (selectedFeatureHasGeometry) {
|
|
16395
16981
|
if (onlyAllowMoving) {
|
|
16396
16982
|
interactions.push(translate); // Only allow moving
|
|
@@ -16403,6 +16989,16 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
|
|
|
16403
16989
|
interactions.push(new Snap({
|
|
16404
16990
|
source: viewOnlySource
|
|
16405
16991
|
}));
|
|
16992
|
+
if (isBoxOrSquare && selectedFeatureHasGeometry) {
|
|
16993
|
+
var viewport = map.getViewport();
|
|
16994
|
+
viewport.addEventListener('pointerdown', startRotateIfOnHandle);
|
|
16995
|
+
viewport.addEventListener('pointermove', rotateOnPointerMove);
|
|
16996
|
+
viewport.addEventListener('pointerup', endRotate);
|
|
16997
|
+
// Ensure the grabbing cursor appears immediately when pressing on a
|
|
16998
|
+
// resize corner, not only after the pointer starts moving.
|
|
16999
|
+
viewport.addEventListener('pointerdown', handlePointerDownNearCorner);
|
|
17000
|
+
viewport.addEventListener('pointerup', handlePointerUpAfterCorner);
|
|
17001
|
+
}
|
|
16406
17002
|
window.addEventListener('keydown', abortOnEsc);
|
|
16407
17003
|
interactions.forEach(function (i) {
|
|
16408
17004
|
return map.addInteraction(i);
|
|
@@ -16417,6 +17013,14 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
|
|
|
16417
17013
|
map.removeLayer(layer);
|
|
16418
17014
|
map.removeLayer(viewOnlyLayer);
|
|
16419
17015
|
map.getViewport().removeEventListener('pointermove', trackPointerMove);
|
|
17016
|
+
if (isBoxOrSquare && selectedFeatureHasGeometry) {
|
|
17017
|
+
var _viewport = map.getViewport();
|
|
17018
|
+
_viewport.removeEventListener('pointerdown', startRotateIfOnHandle);
|
|
17019
|
+
_viewport.removeEventListener('pointermove', rotateOnPointerMove);
|
|
17020
|
+
_viewport.removeEventListener('pointerup', endRotate);
|
|
17021
|
+
_viewport.removeEventListener('pointerdown', handlePointerDownNearCorner);
|
|
17022
|
+
_viewport.removeEventListener('pointerup', handlePointerUpAfterCorner);
|
|
17023
|
+
}
|
|
16420
17024
|
window.removeEventListener('keydown', deleteVertexOnDeleteKey);
|
|
16421
17025
|
};
|
|
16422
17026
|
}, [map, isInEditMode, geojson, projection, viewOnlyStyle, selectedFeatureIndex, exitDrawModeCallback, updateGeojson, drawMode]);
|
|
@@ -16424,7 +17028,7 @@ var OpenLayersMapDraw = function OpenLayersMapDraw(_ref) {
|
|
|
16424
17028
|
};
|
|
16425
17029
|
|
|
16426
17030
|
var defaultIntersectionStyleProperties = _objectSpread2(_objectSpread2({}, defaultGeoJSONStyleProperties), {}, {
|
|
16427
|
-
'fill-opacity': 0.
|
|
17031
|
+
'fill-opacity': 0.1
|
|
16428
17032
|
});
|
|
16429
17033
|
var emptyLineString = _objectSpread2(_objectSpread2({}, lineString), {}, {
|
|
16430
17034
|
properties: defaultGeoJSONStyleProperties
|
|
@@ -18650,4 +19254,4 @@ var getLayerUpdateInfo = function getLayerUpdateInfo(wmLayer, mapId) {
|
|
|
18650
19254
|
return updateObject;
|
|
18651
19255
|
};
|
|
18652
19256
|
|
|
18653
|
-
export { BaseLayerType, CLASSNAME_MAP_MEASURE_TOOLTIP, ClickOnMapTool, Clock, DEFAULT_GEOJSON_STYLE_FILL_OPACITY, DRAWMODE, DefaultBaseLayers, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EditModeButton as EditModeButtonField, FEATURE_DRAW_FILL_COLOR, FEATURE_DRAW_FILL_COLOR_TRANSPARENT, FEATURE_DRAW_SECONDARY_FILL_COLOR, FEATURE_DRAW_SECONDARY_STROKE_COLOR, FEATURE_DRAW_STROKE_COLOR, FEATURE_FILL, FEATURE_FILL_SELECTED, FEATURE_STROKE, FEATURE_STROKE_EDIT, FEATURE_STROKE_SELECTED, FEATURE_VERTICES_EDIT_HANDLES, FEATURE_VERTICE_HANDLE_IMAGE, FEATURE_VERTICE_IMAGE, FeatureLayer, FeatureLayers, GeoJSONTextField, IntersectionSelect, LayerInfoButton, LayerInfoDialog, LayerInfoLegend, LayerInfoList, LayerInfoText, Legend, LegendButton, LegendDialog, LegendLayout, MapContext, MapControlButton, MapControls, MapDimensionSelect, MapFeatureClass, MapMeasure, MapTime, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, OpenLayersFeatureLayer, OpenLayersGetFeatureInfo, OpenLayersLayer, OpenLayersMapDraw, OpenLayersMapView, OpenLayersZoomControl, SelectField, StoryLayoutGrid, TimeAwareEDRLocationLayer, TimeAwareGeoTIFFLayer, TimeAwareWMTSLayer, TimeContext, TimeawareImageSource, TimeawareImageSourceWMSLayer, WEBMAP_REACT_NAMESPACE, WMSLayer, WMTSLayer, XYZLayer, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, catmullRomSpline, clearImageCacheForAllMaps, colorMaps, createBoxBasedOnModifiedVertex, createIconStyle, createInterSections, createOval, currentlySupportedDrawModes, defaultBox, defaultCircle, defaultDelete, defaultEdrStyles, defaultFreehandLine, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultLineString, defaultLocation, defaultModes, defaultOval, defaultPoint, defaultPolygon, defaultSmoothLine, defaultSquare, defaultTimeFormat, dimensionConfig, drawPolyStoryStyles, drawStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, fakeEdrLayerApiHandlers, featureMultiPoint, featurePoint, featurePolygon, fillOptions, firSelectionType, formatTime, generateImageFromLegend, genericOpenLayersFeatureStyle, geowebColorToOpenLayersColor, getDimensionIcon, getDimensionLabel, getDimensionValue, getDimensionsList, getDoubleControlToolIcon, getDrawModeIdFromSelectionType, getFeatureCollection, getFeatureExtent, getFeaturePointStyle, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getIsInsideAcceptanceTime, getLastEmptyFeatureIndex, getLayerBbox, getLayerStyles, getLayerUpdateInfo, getLegendClass, getProj4, getTimeDimension, getToolIcon, initializeOpenLayersProjections, inlineFeatureStyle, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isGeoJSONFeatureCreatedByTool, isGeoJSONGeometryEmpty, isPointFeatureCollection, labelOptions, lineString, lineStringCollection, makeFeatureStyleDisc, makeFeatureStyleLoading, makeFeatureStyleMultiParam, makeFeatureStyleMultiParamLoading, makeFeatureStyleWind, makeLegendFromColorMap, makeLegendFromStyleName, makeTimeList, makeView, marksByDimension, measureResultStyle, measureToolStyle, modifyStyles, moveFeature, multiLineStringLabelStyle, multiPolygonLabelStyle, opacityOptions, openLayersGetMapImageStore, precipitationMMLegendColorsWoW, projectorCache, publicLayers, publicServices, rewindGeometry, roundCoordinates, selectPreferredWMSProjection, setMapCenter, setViewFromExtent, setViewFromFeature, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleGeometryCollectionGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, styleNameToStyleLike, temperatureLegendColorsCWK, temperatureLegendColorsWoW, textLabelStyle, textStyle, textStyleWithMargin, updateEditModeButtonsWithFir, useAnimationForLayer, useEDRGetCollectionDetails, useEDRGetParameterData, useEDRWMLayer, useGeoJSON, useGetWMLayerInstance, useGetWMSLayerStyleList, useIconStyle, useMapDrawTool, useProjection, useQueryGetWMSGetCapabilities, useQueryGetWMSLayer, useQueryGetWMSLayers, useQueryGetWMSLayersTree, useQueryGetWMSServiceInfo, useQueryWMTSGetCapabilities, useSetIntervalWhenVisible, useViewFromLayer, viewUtils, webmapEDRQueryOptions, webmapReactTranslations };
|
|
19257
|
+
export { BaseLayerType, CLASSNAME_MAP_MEASURE_TOOLTIP, ClickOnMapTool, Clock, DEFAULT_GEOJSON_STYLE_FILL_OPACITY, DRAWMODE, DefaultBaseLayers, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EditModeButton as EditModeButtonField, FEATURE_DRAW_FILL_COLOR, FEATURE_DRAW_FILL_COLOR_TRANSPARENT, FEATURE_DRAW_SECONDARY_FILL_COLOR, FEATURE_DRAW_SECONDARY_STROKE_COLOR, FEATURE_DRAW_STROKE_COLOR, FEATURE_FILL, FEATURE_FILL_SELECTED, FEATURE_STROKE, FEATURE_STROKE_EDIT, FEATURE_STROKE_SELECTED, FEATURE_VERTICES_EDIT_HANDLES, FEATURE_VERTICE_HANDLE_IMAGE, FEATURE_VERTICE_IMAGE, FeatureLayer, FeatureLayers, GeoJSONTextField, IntersectionSelect, LayerInfoButton, LayerInfoDialog, LayerInfoLegend, LayerInfoList, LayerInfoText, Legend, LegendButton, LegendDialog, LegendLayout, MapContext, MapControlButton, MapControls, MapDimensionSelect, MapFeatureClass, MapMeasure, MapTime, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, OpenLayersFeatureLayer, OpenLayersGetFeatureInfo, OpenLayersLayer, OpenLayersMapDraw, OpenLayersMapView, OpenLayersZoomControl, SelectField, StoryLayoutGrid, TimeAwareEDRLocationLayer, TimeAwareGeoTIFFLayer, TimeAwareWMTSLayer, TimeContext, TimeawareImageSource, TimeawareImageSourceWMSLayer, WEBMAP_REACT_NAMESPACE, WMSLayer, WMTSLayer, XYZLayer, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, catmullRomSpline, clearImageCacheForAllMaps, colorMaps, createBoxBasedOnModifiedVertex, createIconStyle, createInterSections, createOval, currentlySupportedDrawModes, defaultBox, defaultCircle, defaultDelete, defaultEdrStyles, defaultFreehandLine, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultLineString, defaultLocation, defaultModes, defaultOval, defaultPoint, defaultPolygon, defaultSmoothLine, defaultSquare, defaultTimeFormat, dimensionConfig, drawPolyStoryStyles, drawStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, fakeEdrLayerApiHandlers, featureMultiPoint, featurePoint, featurePolygon, fetchStacCollection, fetchStacItem, fetchStacItems, fillOptions, firSelectionType, formatTime, generateImageFromLegend, genericOpenLayersFeatureStyle, geowebColorToOpenLayersColor, getBoxRotateHandlePoints, getDimensionIcon, getDimensionLabel, getDimensionValue, getDimensionsList, getDoubleControlToolIcon, getDrawModeIdFromSelectionType, getFeatureCollection, getFeatureExtent, getFeaturePointStyle, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getIsInsideAcceptanceTime, getLastEmptyFeatureIndex, getLayerBbox, getLayerStyles, getLayerUpdateInfo, getLegendClass, getProj4, getTimeDimension, getToolIcon, initializeOpenLayersProjections, inlineFeatureStyle, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isGeoJSONFeatureCreatedByTool, isGeoJSONGeometryEmpty, isPointFeatureCollection, labelOptions, lineString, lineStringCollection, makeFeatureStyleDisc, makeFeatureStyleLoading, makeFeatureStyleMultiParam, makeFeatureStyleMultiParamLoading, makeFeatureStyleWind, makeLegendFromColorMap, makeLegendFromStyleName, makeTimeList, makeView, marksByDimension, measureResultStyle, measureToolStyle, modifyStyles, moveFeature, multiLineStringLabelStyle, multiPolygonLabelStyle, opacityOptions, openLayersGetMapImageStore, precipitationMMLegendColorsWoW, projectorCache, publicLayers, publicServices, rewindGeometry, roundCoordinates, selectPreferredWMSProjection, setMapCenter, setViewFromExtent, setViewFromFeature, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleGeometryCollectionGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, styleNameToStyleLike, temperatureLegendColorsCWK, temperatureLegendColorsWoW, textLabelStyle, textStyle, textStyleWithMargin, updateEditModeButtonsWithFir, useAnimationForLayer, useEDRGetCollectionDetails, useEDRGetParameterData, useEDRWMLayer, useFetchGeoTIFFBlob, useGeoJSON, useGetWMLayerInstance, useGetWMSLayerStyleList, useIconStyle, useMapDrawTool, useProjection, useQueryGetWMSGetCapabilities, useQueryGetWMSLayer, useQueryGetWMSLayers, useQueryGetWMSLayersTree, useQueryGetWMSServiceInfo, useQueryWMTSGetCapabilities, useSetIntervalWhenVisible, useStacCollection, useStacItems, useViewFromLayer, viewUtils, webmapEDRQueryOptions, webmapReactTranslations };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@opengeoweb/webmap-react",
|
|
3
|
-
"version": "15.
|
|
3
|
+
"version": "15.1.0",
|
|
4
4
|
"description": "GeoWeb react wrapper for webmap",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -8,9 +8,9 @@
|
|
|
8
8
|
"url": "git@gitlab.com:opengeoweb/opengeoweb.git"
|
|
9
9
|
},
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@opengeoweb/webmap": "15.
|
|
12
|
-
"@opengeoweb/theme": "15.
|
|
13
|
-
"@opengeoweb/shared": "15.
|
|
11
|
+
"@opengeoweb/webmap": "15.1.0",
|
|
12
|
+
"@opengeoweb/theme": "15.1.0",
|
|
13
|
+
"@opengeoweb/shared": "15.1.0",
|
|
14
14
|
"lodash": "^4.17.21",
|
|
15
15
|
"ol": "^10.4.0",
|
|
16
16
|
"proj4": "^2.9.2",
|
|
@@ -43,7 +43,8 @@ export declare const geowebColorToOpenLayersColor: (color: string, opacity?: str
|
|
|
43
43
|
export declare const inlineFeatureStyle: (feature: FeatureLike) => Style[];
|
|
44
44
|
export declare const genericOpenLayersFeatureStyle: StyleFunction;
|
|
45
45
|
export declare const catmullRomSpline: (points: LineCoordType, numPoints?: number) => Coordinate[];
|
|
46
|
-
export declare const createBoxBasedOnModifiedVertex: (modifiedGeometry: Polygon, originalGeometry: Polygon) => Polygon;
|
|
46
|
+
export declare const createBoxBasedOnModifiedVertex: (modifiedGeometry: Polygon, originalGeometry: Polygon, keepSquare?: boolean) => Polygon;
|
|
47
|
+
export declare const getBoxRotateHandlePoints: (feature: FeatureLike, resolution?: number) => Coordinate[] | undefined;
|
|
47
48
|
export declare const createOval: () => GeometryFunction;
|
|
48
49
|
export declare const drawStyles: Record<DrawModeValue, StyleLike>;
|
|
49
50
|
export declare const modifyStyles: Record<DrawModeValue, Style[] | StyleLike>;
|