CODEWITHSUNDEEP
openlayers-3
gray
gray

Reputation: 133

How to make translate event only in shift click

is there a way to make ol.interaction.Translate only fires only on shift + click it's really hard to edit a layer when you have Translate and Modify together.

code

var selectInteraction = new ol.interaction.Select({
    condition: ol.events.condition.singleClick,
    //toggleCondition: ol.events.condition.shiftKeyOnly,
    layers: function (layer) {
        return layer.get('id') == 'redline';
    }
});

var modify = new ol.interaction.Modify({
    features: selectInteraction.getFeatures()
});

var Translate = new ol.interaction.Translate({
    features: selectInteraction.getFeatures()
});

map.getInteractions().extend([selectInteraction, modify, Translate]);

selected_features = selectInteraction.getFeatures();

Upvotes: 0

Views: 821

Answers (2)

Joseph Crowell
Joseph Crowell

Reputation: 1

There is also a condition property which you can use to accept or deny Translate based on your specified conditions.

let Translate = new ol.interaction.Translate({
    features: selectInteraction.getFeatures(),
    condition: (event) => {
        const shiftKeyPressed = event.originalEvent.shiftKey;

        if (shiftKeyPressed) {
            return true;
        }
        return false;
    }
});

Upvotes: 0

dube
dube

Reputation: 5039

Translate extends ol.interaction.Pointer, so according to the doc, you can provide handler methods for several events. If the handler returns false, the even is discarded (at least from the point of view of the Translate).

You also might want to provide a handleEvent so that events are not bubbling up to other events in the first place:

The function may return false to prevent the propagation of the event to other interactions in the map's interactions chain.

so you might want to introduce a global state to keep track if some iteraction is already running and if so, cancel all the other interactions.

let isInteractionRunning=false;

const Translate = new ol.interaction.Translate({
    features: selectInteraction.getFeatures(),
    handleDownEvent: (evt) => {
        const shiftKeyPressed = evt.originalEvent.shiftKey;

        if (shiftKeyPressed && !isInteractionRunning) {
            isInteractionRunning = true;
            return true;
        }
        return false;
    },
    handleUpEvent: function() {
        // set back global state
        isInteractionRunning = false;
        return true;
    }
});

const modify = new ol.interaction.Modify({
    features: selectInteraction.getFeatures(),
    handleDownEvent: () => {
        if (!isInteractionRunning) {
            isInteractionRunning = true;
            return true;
        }
        return false;
    },
    handleUpEvent: function() {
        // set back global state
        isInteractionRunning = false;
        return true;
    }
});

Upvotes: 0

Related Questions