1

I want to add some custom functionality to DrawLineString method at mapbox/mapbox-gl-draw https://github.com/mapbox/mapbox-gl-draw/blob/main/src/modes/draw_line_string.js

I can access this function with Draw.constructor.modes.draw_line_string.toDisplayFeatures

  var Draw = new MapboxDraw({
        controls: {
            // point, line_string: true, polygon, trash, combine_features and uncombine_features
            line_string: true,
            trash: true
        },
        displayControlsDefault: false
    });

    console.log('f',Draw.constructor.modes.draw_line_string.toDisplayFeatures);

Is there any simple way to update this function with my code without modifying source files? Thanks

UPD: When I try to use this method, I got createVertex is undefined, and even if I copy this function to main.js the functionality of the drawing tool is broken

 MapboxDraw.modes.draw_line_string.toDisplayFeatures = function (state, geojson, display) {
        const isActiveLine = geojson.properties.id === state.line.id;
        geojson.properties.active = (isActiveLine) ? true : false;
        if (!isActiveLine) return display(geojson);
        // Only render the line if it has at least one real coordinate
        if (geojson.geometry.coordinates.length < 2) return;
        geojson.properties.meta = 'feature';
        display(createVertex(
            state.line.id,
            geojson.geometry.coordinates[state.direction === 'forward' ? geojson.geometry.coordinates.length - 2 : 1],
            `${state.direction === 'forward' ? geojson.geometry.coordinates.length - 2 : 1}`,
            false
        ));
        display(geojson);
        //console.log('geojson', geojson);
    };
SERG
  • 3,907
  • 8
  • 44
  • 89
  • 1
    `Draw.constructor.modes.draw_line_string.toDisplayFeatures = function () { ... }`…? – deceze Feb 16 '21 at 11:44
  • @deceze yes, but there are some variables and functions that are no defined when I use this method – SERG Feb 16 '21 at 11:59
  • 1
    How is `createVertex` defined in the original function context? Is it a local variable? – 3limin4t0r Feb 16 '21 at 12:11
  • It is definded like `import createVertex from '../lib/create_vertex';` but I use this as cdn file https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.0/mapbox-gl-draw.js Source is here https://github.com/mapbox/mapbox-gl-draw/blob/main/src/modes/draw_line_string.js – SERG Feb 16 '21 at 12:22
  • @3limin4t0r updated, thanks – SERG Feb 16 '21 at 19:15
  • 1
    @SERG If your intent is to insert some code before or after the original code, you could copy it into a variable. In this scenario, `const oldFn = MapboxDraw.modes.draw_line_string.toDisplayFeatures;` then define the new function calling the old one. `MapboxDraw.modes.draw_line_string.toDisplayFeatures = function (state, geojson, display) { oldFn.call(this, state, geojson, display); console.log(geojson); }` Note that this will always `console.log(...)`, not just when the geojson is inactive. – 3limin4t0r Feb 17 '21 at 09:57
  • 1
    Alternatively if you really want to alter the original code you'll have to make sure that you have access to all the dependencies used. If they are not exposed through the public JavaScript API you'll have to copy the dependencies like [`createVertex`](https://github.com/mapbox/mapbox-gl-draw/blob/main/src/lib/create_vertex.js) and [`Constants`](https://github.com/mapbox/mapbox-gl-draw/blob/main/src/constants.js). – 3limin4t0r Feb 17 '21 at 10:01

0 Answers0