FResh Lemon
FResh Lemon

Reputation: 11

How to make a delay for Feature movement using Translate in OpenLayers 7?

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

Answers (0)

Related Questions