CompositeMode does not seem to be compatible with TranslateMode or other TransformModes

[MatticusPrime29]

Describe the bug

I want to have multiple editing capabilities for a feature. Specifically TranslateMode, RotateMode, and ExtrudeMode. But I can focus on getting TranslateMode to work for now with the CompositeMode class. I am running into errors when passing the reference of a class, ex: (new CompositeMode(modes: [TranslateMode]) ) for most of these editing modes. Or the onEdit callback is not fired more than once (it fires once onDragStart) when passing in the instantiation of an edit mode class, ex: (new CompositeMode(modes: [new TranslateMode()])).

If these edit modes are not compatible with CompositeMode, please specify in the documentation.

Actual Result

When passing in the reference, I get typeErrors like: update of EditableGeoJsonLayer(id: '') mode.getGuides is not a function and handler.handlePointerMove is not a function in composite-mode.js

When passing in the instantiated class, onEdit will not keep firing when there is a drag event. I believe this is because when TranslateMode() is instantiated the _geometryBeforeTranslate variable is set to undefined, then the handleDragging function cannot call the onEdit callback because of this (in translate-mode.js).

Expected Result

the onEdit callback should be called while continual onDrag events are fired when passing an instantiated TranslateMode class to the CompositeMode classes modes array, thus allowing the feature to be translated.

Otherwise, Passing in a reference to the CompositeMode classes modes array should Instantiate the class and get rid of the errors I mentioned, thus allowing the feature to be translated.

Reproduce Steps

//Import Modules

import { SelectionLayer, EditableGeoJsonLayer } from "@nebula.gl/layers";
import { TranslateMode, TransformMode, ExtrudeMode, RotateMode, CompositeMode } from "@nebula.gl/edit-modes";

//Instantiate Deck with EditableGeoJsonLayer and CompositeMode with passed in EditMode

function getLayers() {
    return [new EditableGeoJsonLayer({
                  id: "gli",
                  data: featureCollection,
                  onEdit: (e) => {featureCollection = e.updatedData},
                  selectedFeatureIndexes: [0],
                  mode: new CompositeMode([new TranslateMode()])
    })]
}

new Deck({initialViewState: INITIAL_VIEW_STATE, parent: this.$refs.map, layers: getLayers()})

//Drag GeoJson feature on map

Screenshots

To Do List

• [ ] Add label and assign to milestone
• [ ] Coding
• [ ] Test

[igorDykhta]

Hi @MatticusPrime29 It is strange that you are having this issue.

We use Composite mode like this and it works:

const DEFAULT_COMPOSITE_MODE = new CompositeMode([new TranslateMode(), new ModifyModeExtended()]);
return new EditableGeoJsonLayer({ 
       mode: DEFAULT_COMPOSITE_MODE,
       ...
});

Could you try to memo the mode, and only pass the new mode when you switch to a different mode?

[shawshank718]

@igorDykhta What is the ModifyModeExtended. I don't see any reference for it in the documentation.

[igorDykhta]

@shawshank718 can be ModifyMode