Reputation: 11
The problem is that I need to make it so that the point can only be moved after 400ms of holding the point
I add Translate for a point when adding the point itself Now the point can be moved at any time, the delay in onPointTranslateStart listener only works for my code inside the listeners, but not for canceling the point movement
let isTranslating = false;
let isTranslateAccept = true;
props.map.on("singleclick", onMapTouch);
const onMapTouch = async (event: ol.MapBrowserEvent<any>) => {
if (isTranslating) return
let newFeature = new ol.Feature(new Point(event.coordinate));
let newNameID = Math.random().toString();
newFeature.set('nameID', newNameID);
rulerPoint.getSource()?.addFeature(newFeature);
let features = rulerPoint.getSource()!.getFeatures();
let translate = new Translate({
features: new ol.Collection([features[features.length - 1]]),
condition: (mapBrowserEvent) => {
if (Condition.doubleClick(mapBrowserEvent) || Condition.singleClick(mapBrowserEvent) || Condition.doubleClick(mapBrowserEvent)) return false;
return true;
}
});
props.map.addInteraction(translate);
translate.on('translatestart', onPointTranslateStart);
translate.on('translateend', onPointTranslateEnd);
translate.on('translating', onPointTranslating);
}
const onPointTranslateStart = async (event: TranslateEvent) => {
isTranslateAccept = false;
await setTimeout(() => {
if (isTranslateAccept) {
isTranslateAccept = true;
return
}
isTranslateAccept = true
isTranslating = true;
//do something
}, 400);
};
const onPointTranslating = (event: TranslateEvent) => {
if (!isTranslateAccept) return
//do something
};
const onPointTranslateEnd = async (event: TranslateEvent) => {
if (!isTranslateAccept) {
isTranslateAccept = true
return
}
isTranslating = false;
//do something
isTranslateAccept = false
};
I tried these solutions for pre-checking before the Translate task, but events like mousedown in OpenLayers 7 don't seem to exist
How to get `mousedown` event on OpenLayers.Map?
var events = props.map.events;
events.register("mousedown",map,function(e){
console.log("mousedown");
return true;
},true);
Upvotes: 1
Views: 53