@deck.gl-community/editable-layers 9.2.8 → 9.3.0-beta.1

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.
Files changed (30) hide show
  1. package/dist/edit-modes/draw-polygon-mode.js +3 -3
  2. package/dist/edit-modes/draw-polygon-mode.js.map +1 -1
  3. package/dist/edit-modes/two-click-polygon-mode.d.ts.map +1 -1
  4. package/dist/edit-modes/two-click-polygon-mode.js +1 -2
  5. package/dist/edit-modes/two-click-polygon-mode.js.map +1 -1
  6. package/dist/editable-layers/editable-h3-cluster-layer.d.ts +2 -2
  7. package/dist/editable-layers/editable-h3-cluster-layer.d.ts.map +1 -1
  8. package/dist/editable-layers/editable-h3-cluster-layer.js +13 -6
  9. package/dist/editable-layers/editable-h3-cluster-layer.js.map +1 -1
  10. package/dist/editable-layers/editable-layer.d.ts +13 -12
  11. package/dist/editable-layers/editable-layer.d.ts.map +1 -1
  12. package/dist/editable-layers/editable-layer.js +58 -48
  13. package/dist/editable-layers/editable-layer.js.map +1 -1
  14. package/dist/index.cjs +76 -63
  15. package/dist/index.cjs.map +3 -3
  16. package/dist/widgets/edit-mode-tray-widget.d.ts +1 -0
  17. package/dist/widgets/edit-mode-tray-widget.d.ts.map +1 -1
  18. package/dist/widgets/edit-mode-tray-widget.js +1 -0
  19. package/dist/widgets/edit-mode-tray-widget.js.map +1 -1
  20. package/dist/widgets/editor-toolbar-widget.d.ts +1 -0
  21. package/dist/widgets/editor-toolbar-widget.d.ts.map +1 -1
  22. package/dist/widgets/editor-toolbar-widget.js +1 -0
  23. package/dist/widgets/editor-toolbar-widget.js.map +1 -1
  24. package/package.json +14 -16
  25. package/src/edit-modes/draw-polygon-mode.ts +3 -3
  26. package/src/edit-modes/two-click-polygon-mode.ts +3 -2
  27. package/src/editable-layers/editable-h3-cluster-layer.ts +12 -6
  28. package/src/editable-layers/editable-layer.ts +72 -66
  29. package/src/widgets/edit-mode-tray-widget.tsx +1 -0
  30. package/src/widgets/editor-toolbar-widget.tsx +1 -0
package/dist/index.cjs CHANGED
@@ -2153,10 +2153,10 @@ var DrawLineStringMode = class extends GeoJsonEditMode {
2153
2153
  };
2154
2154
 
2155
2155
  // dist/edit-modes/draw-polygon-mode.js
2156
- var import_line_intersect2 = require("@turf/line-intersect");
2156
+ var import_line_intersect2 = __toESM(require("@turf/line-intersect"), 1);
2157
2157
  var import_helpers9 = require("@turf/helpers");
2158
- var import_boolean_within = require("@turf/boolean-within");
2159
- var import_kinks = require("@turf/kinks");
2158
+ var import_boolean_within = __toESM(require("@turf/boolean-within"), 1);
2159
+ var import_kinks = __toESM(require("@turf/kinks"), 1);
2160
2160
  var DrawPolygonMode = class extends GeoJsonEditMode {
2161
2161
  holeSequence = [];
2162
2162
  isDrawingHole = false;
@@ -2302,7 +2302,7 @@ var DrawPolygonMode = class extends GeoJsonEditMode {
2302
2302
  const canAddHole = canAddHoleToPolygon(props);
2303
2303
  const canOverlap = canPolygonOverlap(props);
2304
2304
  if (!canOverlap) {
2305
- const overlapping = (0, import_kinks.kinks)(newPolygon).features;
2305
+ const overlapping = (0, import_kinks.default)(newPolygon).features;
2306
2306
  if (overlapping.length > 0) {
2307
2307
  props.onEdit({
2308
2308
  updatedData: props.data,
@@ -2344,7 +2344,7 @@ var DrawPolygonMode = class extends GeoJsonEditMode {
2344
2344
  const outer = (0, import_helpers9.polygon)(feature.geometry.coordinates);
2345
2345
  for (let i = 1; i < feature.geometry.coordinates.length; i++) {
2346
2346
  const hole = (0, import_helpers9.polygon)([feature.geometry.coordinates[i]]);
2347
- const intersection = (0, import_line_intersect2.lineIntersect)(hole, newPolygon);
2347
+ const intersection = (0, import_line_intersect2.default)(hole, newPolygon);
2348
2348
  if (intersection.features.length > 0) {
2349
2349
  props.onEdit({
2350
2350
  updatedData: props.data,
@@ -2353,7 +2353,7 @@ var DrawPolygonMode = class extends GeoJsonEditMode {
2353
2353
  });
2354
2354
  return { handled: true };
2355
2355
  }
2356
- if ((0, import_boolean_within.booleanWithin)(hole, newPolygon) || (0, import_boolean_within.booleanWithin)(newPolygon, hole)) {
2356
+ if ((0, import_boolean_within.default)(hole, newPolygon) || (0, import_boolean_within.default)(newPolygon, hole)) {
2357
2357
  props.onEdit({
2358
2358
  updatedData: props.data,
2359
2359
  editType: "invalidHole",
@@ -2362,7 +2362,7 @@ var DrawPolygonMode = class extends GeoJsonEditMode {
2362
2362
  return { handled: true };
2363
2363
  }
2364
2364
  }
2365
- const intersectionWithOuter = (0, import_line_intersect2.lineIntersect)(outer, newPolygon);
2365
+ const intersectionWithOuter = (0, import_line_intersect2.default)(outer, newPolygon);
2366
2366
  if (intersectionWithOuter.features.length > 0) {
2367
2367
  props.onEdit({
2368
2368
  updatedData: props.data,
@@ -2371,7 +2371,7 @@ var DrawPolygonMode = class extends GeoJsonEditMode {
2371
2371
  });
2372
2372
  return { handled: true };
2373
2373
  }
2374
- if ((0, import_boolean_within.booleanWithin)(outer, newPolygon)) {
2374
+ if ((0, import_boolean_within.default)(outer, newPolygon)) {
2375
2375
  props.onEdit({
2376
2376
  updatedData: props.data,
2377
2377
  editType: "invalidPolygon",
@@ -2379,7 +2379,7 @@ var DrawPolygonMode = class extends GeoJsonEditMode {
2379
2379
  });
2380
2380
  return { handled: true };
2381
2381
  }
2382
- if ((0, import_boolean_within.booleanWithin)(newPolygon, outer)) {
2382
+ if ((0, import_boolean_within.default)(newPolygon, outer)) {
2383
2383
  const updatedData = new ImmutableFeatureCollection(props.data).replaceGeometry(featureIndex, {
2384
2384
  ...feature.geometry,
2385
2385
  coordinates: [...feature.geometry.coordinates, polygon2]
@@ -2412,7 +2412,6 @@ function canPolygonOverlap(props) {
2412
2412
  var import_bbox_polygon3 = __toESM(require("@turf/bbox-polygon"), 1);
2413
2413
 
2414
2414
  // dist/edit-modes/two-click-polygon-mode.js
2415
- var import_lodash = __toESM(require("lodash.omit"), 1);
2416
2415
  var TwoClickPolygonMode = class extends GeoJsonEditMode {
2417
2416
  handleClick(event, props) {
2418
2417
  if (props.modeConfig && props.modeConfig.dragToDraw) {
@@ -2441,7 +2440,7 @@ var TwoClickPolygonMode = class extends GeoJsonEditMode {
2441
2440
  if (clickSequence.length > 1 && tentativeFeature && tentativeFeature.geometry.type === "Polygon") {
2442
2441
  const feature = {
2443
2442
  type: "Feature",
2444
- properties: (0, import_lodash.default)(tentativeFeature.properties, "guideType"),
2443
+ properties: Object.fromEntries(Object.entries(tentativeFeature.properties ?? {}).filter(([key]) => key !== "guideType")),
2445
2444
  geometry: {
2446
2445
  type: "Polygon",
2447
2446
  coordinates: tentativeFeature.geometry.coordinates
@@ -3017,7 +3016,7 @@ var Draw90DegreePolygonMode = class extends GeoJsonEditMode {
3017
3016
  };
3018
3017
 
3019
3018
  // dist/edit-modes/draw-polygon-by-dragging-mode.js
3020
- var import_lodash2 = __toESM(require("lodash.throttle"), 1);
3019
+ var import_lodash = __toESM(require("lodash.throttle"), 1);
3021
3020
  var DrawPolygonByDraggingMode = class extends DrawPolygonMode {
3022
3021
  handleDraggingThrottled = null;
3023
3022
  handleClick(event, props) {
@@ -3025,7 +3024,7 @@ var DrawPolygonByDraggingMode = class extends DrawPolygonMode {
3025
3024
  handleStartDragging(event, props) {
3026
3025
  event.cancelPan();
3027
3026
  if (props.modeConfig && props.modeConfig.throttleMs) {
3028
- this.handleDraggingThrottled = (0, import_lodash2.default)(this.handleDraggingAux, props.modeConfig.throttleMs);
3027
+ this.handleDraggingThrottled = (0, import_lodash.default)(this.handleDraggingAux, props.modeConfig.throttleMs);
3029
3028
  } else {
3030
3029
  this.handleDraggingThrottled = this.handleDraggingAux;
3031
3030
  }
@@ -3328,7 +3327,15 @@ var PROJECTED_PIXEL_SIZE_MULTIPLIER = 2 / 3;
3328
3327
 
3329
3328
  // dist/editable-layers/editable-layer.js
3330
3329
  var import_core = require("@deck.gl/core");
3331
- var EVENT_TYPES = ["click", "pointermove", "panstart", "panmove", "panend", "keyup", "dblclick"];
3330
+ var EVENT_TYPES = [
3331
+ "click",
3332
+ "pointermove",
3333
+ "panstart",
3334
+ "panmove",
3335
+ "panend",
3336
+ "keyup",
3337
+ "dblclick"
3338
+ ];
3332
3339
  var EditableLayer = class extends import_core.CompositeLayer {
3333
3340
  state = void 0;
3334
3341
  // Overridable interaction event handlers
@@ -3394,39 +3401,29 @@ var EditableLayer = class extends import_core.CompositeLayer {
3394
3401
  }
3395
3402
  func(event);
3396
3403
  }
3397
- _onclick({ srcEvent }) {
3398
- const screenCoords = this.getScreenCoords(srcEvent);
3399
- const mapCoords2 = this.getMapCoords(screenCoords);
3400
- const picks = this.getPicks(screenCoords);
3401
- this.onLayerClick({
3402
- mapCoords: mapCoords2,
3403
- screenCoords,
3404
- picks,
3405
- sourceEvent: srcEvent
3406
- });
3404
+ _onclick(event) {
3405
+ this.onLayerClick(this.toBasePointerEvent(event));
3407
3406
  }
3408
- _ondblclick({ srcEvent }) {
3409
- this.onLayerDoubleClick(srcEvent);
3407
+ _ondblclick(event) {
3408
+ this.onLayerDoubleClick(this.toBasePointerEvent(event));
3410
3409
  }
3411
3410
  _onkeyup({ srcEvent }) {
3412
3411
  this.onLayerKeyUp(srcEvent);
3413
3412
  }
3414
3413
  _onpanstart(event) {
3415
- const screenCoords = this.getScreenCoords(event.srcEvent);
3416
- const mapCoords2 = this.getMapCoords(screenCoords);
3417
- const picks = this.getPicks(screenCoords);
3414
+ const basePointerEvent = this.toBasePointerEvent(event);
3415
+ const { picks, screenCoords, mapCoords: mapCoords2 } = basePointerEvent;
3418
3416
  this.setState({
3419
3417
  _editableLayerState: {
3420
3418
  ...this.state._editableLayerState,
3419
+ pointerDownPicks: picks,
3421
3420
  pointerDownScreenCoords: screenCoords,
3422
- pointerDownMapCoords: mapCoords2,
3423
- pointerDownPicks: picks
3421
+ pointerDownMapCoords: mapCoords2
3424
3422
  }
3425
3423
  });
3426
3424
  this.onStartDragging({
3427
- picks,
3428
- screenCoords,
3429
- mapCoords: mapCoords2,
3425
+ ...basePointerEvent,
3426
+ pointerDownPicks: picks,
3430
3427
  pointerDownScreenCoords: screenCoords,
3431
3428
  pointerDownMapCoords: mapCoords2,
3432
3429
  cancelPan: () => {
@@ -3434,24 +3431,17 @@ var EditableLayer = class extends import_core.CompositeLayer {
3434
3431
  this.props.onCancelPan();
3435
3432
  }
3436
3433
  event.stopImmediatePropagation();
3437
- },
3438
- sourceEvent: event.srcEvent
3434
+ }
3439
3435
  });
3440
3436
  }
3441
3437
  _onpanmove(event) {
3442
- const { srcEvent } = event;
3443
- const screenCoords = this.getScreenCoords(srcEvent);
3444
- const mapCoords2 = this.getMapCoords(screenCoords);
3438
+ const basePointerEvent = this.toBasePointerEvent(event);
3445
3439
  const { pointerDownPicks, pointerDownScreenCoords, pointerDownMapCoords } = this.state._editableLayerState;
3446
- const picks = this.getPicks(screenCoords);
3447
3440
  this.onDragging({
3448
- screenCoords,
3449
- mapCoords: mapCoords2,
3450
- picks,
3441
+ ...basePointerEvent,
3451
3442
  pointerDownPicks,
3452
3443
  pointerDownScreenCoords,
3453
3444
  pointerDownMapCoords,
3454
- sourceEvent: srcEvent,
3455
3445
  cancelPan: event.stopImmediatePropagation
3456
3446
  // another (hacky) approach for cancelling map panning
3457
3447
  // const controller = this.context.deck.viewManager.controllers[
@@ -3460,19 +3450,14 @@ var EditableLayer = class extends import_core.CompositeLayer {
3460
3450
  // controller._state.isDragging = false;
3461
3451
  });
3462
3452
  }
3463
- _onpanend({ srcEvent }) {
3464
- const screenCoords = this.getScreenCoords(srcEvent);
3465
- const mapCoords2 = this.getMapCoords(screenCoords);
3453
+ _onpanend(event) {
3454
+ const basePointerEvent = this.toBasePointerEvent(event);
3466
3455
  const { pointerDownPicks, pointerDownScreenCoords, pointerDownMapCoords } = this.state._editableLayerState;
3467
- const picks = this.getPicks(screenCoords);
3468
3456
  this.onStopDragging({
3469
- picks,
3470
- screenCoords,
3471
- mapCoords: mapCoords2,
3457
+ ...basePointerEvent,
3472
3458
  pointerDownPicks,
3473
3459
  pointerDownScreenCoords,
3474
- pointerDownMapCoords,
3475
- sourceEvent: srcEvent
3460
+ pointerDownMapCoords
3476
3461
  });
3477
3462
  this.setState({
3478
3463
  _editableLayerState: {
@@ -3484,22 +3469,27 @@ var EditableLayer = class extends import_core.CompositeLayer {
3484
3469
  });
3485
3470
  }
3486
3471
  _onpointermove(event) {
3487
- const { srcEvent } = event;
3488
- const screenCoords = this.getScreenCoords(srcEvent);
3489
- const mapCoords2 = this.getMapCoords(screenCoords);
3472
+ const basePointerEvent = this.toBasePointerEvent(event);
3490
3473
  const { pointerDownPicks, pointerDownScreenCoords, pointerDownMapCoords } = this.state._editableLayerState;
3491
- const picks = this.getPicks(screenCoords);
3492
3474
  this.onPointerMove({
3493
- screenCoords,
3494
- mapCoords: mapCoords2,
3495
- picks,
3475
+ ...basePointerEvent,
3496
3476
  pointerDownPicks,
3497
3477
  pointerDownScreenCoords,
3498
3478
  pointerDownMapCoords,
3499
- sourceEvent: srcEvent,
3500
3479
  cancelPan: event.stopImmediatePropagation
3501
3480
  });
3502
3481
  }
3482
+ toBasePointerEvent(event) {
3483
+ const screenCoords = [event.offsetCenter.x, event.offsetCenter.y];
3484
+ const mapCoords2 = this.getMapCoords(screenCoords);
3485
+ const picks = this.getPicks(screenCoords);
3486
+ return {
3487
+ screenCoords,
3488
+ mapCoords: mapCoords2,
3489
+ picks,
3490
+ sourceEvent: event.srcEvent
3491
+ };
3492
+ }
3503
3493
  getPicks(screenCoords) {
3504
3494
  return this.context.deck.pickMultipleObjects({
3505
3495
  x: screenCoords[0],
@@ -3516,6 +3506,20 @@ var EditableLayer = class extends import_core.CompositeLayer {
3516
3506
  ];
3517
3507
  }
3518
3508
  getMapCoords(screenCoords) {
3509
+ if (this.context.deck) {
3510
+ const layerIds = this.context.layerManager.getLayers().filter((l) => l.props.pickable === "3d").map((l) => l.id);
3511
+ if (layerIds.length > 0) {
3512
+ const pickInfo = this.context.deck.pickObject({
3513
+ x: screenCoords[0],
3514
+ y: screenCoords[1],
3515
+ layerIds,
3516
+ unproject3D: true
3517
+ });
3518
+ if (pickInfo == null ? void 0 : pickInfo.coordinate) {
3519
+ return [pickInfo.coordinate[0], pickInfo.coordinate[1]];
3520
+ }
3521
+ }
3522
+ }
3519
3523
  return this.context.viewport.unproject([screenCoords[0], screenCoords[1]]);
3520
3524
  }
3521
3525
  };
@@ -3981,6 +3985,7 @@ __publicField(EditableGeoJsonLayer, "defaultProps", defaultProps2);
3981
3985
 
3982
3986
  // dist/editable-layers/editable-h3-cluster-layer.js
3983
3987
  var import_geo_layers = require("@deck.gl/geo-layers");
3988
+ var import_h3_js = require("h3-js");
3984
3989
  var DEFAULT_EDIT_MODE2 = ViewMode;
3985
3990
  var DEFAULT_H3_RESOLUTION = 9;
3986
3991
  var EMPTY_FEATURE_COLLECTION = {
@@ -4023,11 +4028,19 @@ var EditableH3ClusterLayer = class extends EditableLayer {
4023
4028
  }
4024
4029
  // convert array of (lng, lat) coords to cluster of hexes
4025
4030
  getDerivedHexagonIDs(coords) {
4026
- throw new Error("not implemented");
4031
+ const outerRing = coords == null ? void 0 : coords[0];
4032
+ if (!outerRing || outerRing.length < 4) {
4033
+ return [];
4034
+ }
4035
+ try {
4036
+ return (0, import_h3_js.polygonToCells)(coords, this.props.resolution, true);
4037
+ } catch {
4038
+ return [];
4039
+ }
4027
4040
  }
4028
4041
  // convert pair of (lng, lat) coords into single hex
4029
4042
  getDerivedHexagonID(coords) {
4030
- throw new Error("not implemented");
4043
+ return (0, import_h3_js.latLngToCell)(coords[1], coords[0], this.props.resolution);
4031
4044
  }
4032
4045
  renderLayers() {
4033
4046
  const layers = [