Adjust route edit styles

[patricvincit]

This change is 

[Huulivoide]

@Huulivoide reviewed 5 files and made 1 comment.
Reviewable status: 5 of 7 files reviewed, 1 unresolved discussion (waiting on patricvincit).

---

ui/src/utils/map/mapUtils.ts line 25 at r1 (raw file):

};

export const loadMapAssets = (mapRef: RefObject<MapRef>) => {

Vähän ohi aiheen, mutta tätä vois vähän siistiä ylipäätään.

const imageAssets menee tonne funktion ulkopuolelle määrittelyyn.
Siitä vois ton tyyppi määrittelyn vetää omaks type ImageAsset = { ... } lohkoks.

[Huulivoide]

@Huulivoide made 1 comment.
Reviewable status: 5 of 7 files reviewed, 2 unresolved discussions (waiting on patricvincit).

---

ui/src/components/map/utils/drawModeUtils.ts line 1 at r1 (raw file):

import MapboxDraw from '@mapbox/mapbox-gl-draw';

Mää tät tiedosto vielä tutkiskelen ja selailen mapbox:in ja gl-draw:n koodeja

[Huulivoide]

@Huulivoide made 1 comment.
Reviewable status: 5 of 7 files reviewed, 2 unresolved discussions (waiting on patricvincit).

---

ui/src/components/map/utils/drawModeUtils.ts line 1 at r1 (raw file):

Previously, Huulivoide (Jesse Jaara) wrote…

Mää tät tiedosto vielä tutkiskelen ja selailen mapbox:in ja gl-draw:n koodeja

Siivottu versio jonka sain aikaan kun olin saanut pohja implementaatio tutkuttia tuntitolkulla:

• Ei omia epämääräsiä omia tyyppimäärittelyjä.
• Vähemmän vaikeeselkosia casteja.
• Abstraktio taso on vähän korkeempi eikä kosketa niin paljon sisäsiin implementaatioihin.
• Turvatsekkti tolle yhdelle sisen implementaation kutsulle paikoillaan.
• ylipäätään ehdä hieman selkeemmin luettavissa

import MapboxDraw, {
  DrawCustomMode,
  DrawCustomModeThis,
  MapMouseEvent,
  MapTouchEvent,
  MapboxDrawOptions,
} from '@mapbox/mapbox-gl-draw';

const defaultModes = MapboxDraw.modes;
const directSelectMode = defaultModes.direct_select;
const simpleSelectMode = defaultModes.simple_select;

type ObjectLikeState = { [key: string]: unknown };

// Change from simple_select to direct_select on feature click, to immediately show vertices with mid-points.
// Default behavior is to first show vertices, then it requires another click to enter direct_select and show mid-points.
// Internally onTap = onClick = function implementation()... by default.
function onSimpleModeClick(
  this: DrawCustomModeThis & DrawCustomMode,
  state: ObjectLikeState,
  e: MapMouseEvent | MapTouchEvent,
) {
  const isFeature = MapboxDraw.lib.CommonSelectors.isFeature(e);
  const featureId = e.featureTarget.properties?.id;

  if (isFeature && featureId) {
    this.changeMode('direct_select', { featureId });
  } else {
    simpleSelectMode.onClick?.call(this, state, e as MapMouseEvent);
  }
}

// Disable vertex selection on click, enforce drag-only behavior.
// This avoids reloading the edited line when clicking vertices.
// Internally onTouchStart = onMouseDown = function implementation()... by default.
function onDirectModeMouseDown(
  this: DrawCustomModeThis & DrawCustomMode,
  state: ObjectLikeState,
  e: MapMouseEvent | MapTouchEvent,
) {
  const isVertex = MapboxDraw.lib.CommonSelectors.isVertex(e);

  // This replaces onVertex code path from:
  // https://github.com/mapbox/mapbox-gl-draw/blob/eb42344e32ec884c6f15fe483ad1c9311c309a36/src/modes/direct_select.js#L51
  if (isVertex) {
    // Drag-only behavior: keep one vertex as drag target, skip click-selection visuals.
    const coordPath = e.featureTarget.properties?.coord_path;
    if (coordPath) {
      state.selectedCoordPaths = [coordPath];

      // This calls a private function from the internal implementation from:
      // https://github.com/mapbox/mapbox-gl-draw/blob/eb42344e32ec884c6f15fe483ad1c9311c309a36/src/modes/direct_select.js#L30
      if (
        'startDragging' in directSelectMode &&
        typeof directSelectMode.startDragging === 'function'
      ) {
        directSelectMode.startDragging.call(this, state, e);
      } else {
        throw new Error(
          'mapbox-gl-draw DirectDrawMode internal implementation changed! Expected to find function startDragging, but it does not exist!',
        );
      }
    }
  } else {
    directSelectMode.onMouseDown?.call(this, state, e as MapMouseEvent);
  }
}

export const joreDrawModes: MapboxDrawOptions['modes'] = {
  ...defaultModes,
  simple_select: {
    ...simpleSelectMode,
    onClick: onSimpleModeClick,
    onTap: onSimpleModeClick,
  },
  direct_select: {
    ...directSelectMode,
    onMouseDown: onDirectModeMouseDown,
    onTouchStart: onDirectModeMouseDown,
  },
};

[github-actions]

Dependency Review

✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.

Scanned Files

None

[patricvincit]

@patricvincit made 2 comments.
Reviewable status: 4 of 7 files reviewed, 2 unresolved discussions (waiting on Huulivoide).

---

ui/src/components/map/utils/drawModeUtils.ts line 1 at r1 (raw file):

Previously, Huulivoide (Jesse Jaara) wrote…

Siivottu versio jonka sain aikaan kun olin saanut pohja implementaatio tutkuttia tuntitolkulla:

• Ei omia epämääräsiä omia tyyppimäärittelyjä.
• Vähemmän vaikeeselkosia casteja.
• Abstraktio taso on vähän korkeempi eikä kosketa niin paljon sisäsiin implementaatioihin.
• Turvatsekkti tolle yhdelle sisen implementaation kutsulle paikoillaan.
• ylipäätään ehdä hieman selkeemmin luettavissa

import MapboxDraw, {
  DrawCustomMode,
  DrawCustomModeThis,
  MapMouseEvent,
  MapTouchEvent,
  MapboxDrawOptions,
} from '@mapbox/mapbox-gl-draw';

const defaultModes = MapboxDraw.modes;
const directSelectMode = defaultModes.direct_select;
const simpleSelectMode = defaultModes.simple_select;

type ObjectLikeState = { [key: string]: unknown };

// Change from simple_select to direct_select on feature click, to immediately show vertices with mid-points.
// Default behavior is to first show vertices, then it requires another click to enter direct_select and show mid-points.
// Internally onTap = onClick = function implementation()... by default.
function onSimpleModeClick(
  this: DrawCustomModeThis & DrawCustomMode,
  state: ObjectLikeState,
  e: MapMouseEvent | MapTouchEvent,
) {
  const isFeature = MapboxDraw.lib.CommonSelectors.isFeature(e);
  const featureId = e.featureTarget.properties?.id;

  if (isFeature && featureId) {
    this.changeMode('direct_select', { featureId });
  } else {
    simpleSelectMode.onClick?.call(this, state, e as MapMouseEvent);
  }
}

// Disable vertex selection on click, enforce drag-only behavior.
// This avoids reloading the edited line when clicking vertices.
// Internally onTouchStart = onMouseDown = function implementation()... by default.
function onDirectModeMouseDown(
  this: DrawCustomModeThis & DrawCustomMode,
  state: ObjectLikeState,
  e: MapMouseEvent | MapTouchEvent,
) {
  const isVertex = MapboxDraw.lib.CommonSelectors.isVertex(e);

  // This replaces onVertex code path from:
  // https://github.com/mapbox/mapbox-gl-draw/blob/eb42344e32ec884c6f15fe483ad1c9311c309a36/src/modes/direct_select.js#L51
  if (isVertex) {
    // Drag-only behavior: keep one vertex as drag target, skip click-selection visuals.
    const coordPath = e.featureTarget.properties?.coord_path;
    if (coordPath) {
      state.selectedCoordPaths = [coordPath];

      // This calls a private function from the internal implementation from:
      // https://github.com/mapbox/mapbox-gl-draw/blob/eb42344e32ec884c6f15fe483ad1c9311c309a36/src/modes/direct_select.js#L30
      if (
        'startDragging' in directSelectMode &&
        typeof directSelectMode.startDragging === 'function'
      ) {
        directSelectMode.startDragging.call(this, state, e);
      } else {
        throw new Error(
          'mapbox-gl-draw DirectDrawMode internal implementation changed! Expected to find function startDragging, but it does not exist!',
        );
      }
    }
  } else {
    directSelectMode.onMouseDown?.call(this, state, e as MapMouseEvent);
  }
}

export const joreDrawModes: MapboxDrawOptions['modes'] = {
  ...defaultModes,
  simple_select: {
    ...simpleSelectMode,
    onClick: onSimpleModeClick,
    onTap: onSimpleModeClick,
  },
  direct_select: {
    ...directSelectMode,
    onMouseDown: onDirectModeMouseDown,
    onTouchStart: onDirectModeMouseDown,
  },
};

Jeps, 100x parempi.

---

ui/src/utils/map/mapUtils.ts line 25 at r1 (raw file):

Previously, Huulivoide (Jesse Jaara) wrote…

Vähän ohi aiheen, mutta tätä vois vähän siistiä ylipäätään.

const imageAssets menee tonne funktion ulkopuolelle määrittelyyn.
Siitä vois ton tyyppi määrittelyn vetää omaks type ImageAsset = { ... } lohkoks.

Done.

[Huulivoide]

@Huulivoide reviewed 3 files and all commit messages, made 1 comment, and resolved 1 discussion.
Reviewable status: all files reviewed, 2 unresolved discussions (waiting on patricvincit).

---

ui/src/utils/map/mapUtils.ts line 11 at r2 (raw file):

type ImageAsset = { name: string; fileUrl: string; sdf: boolean };

const imageAssets: ImageAsset[] = [

ReadonlyArray.

[Huulivoide]

@Huulivoide resolved 1 discussion.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on patricvincit).

[patricvincit]

@patricvincit made 1 comment.
Reviewable status: 6 of 7 files reviewed, 1 unresolved discussion (waiting on Huulivoide).

---

ui/src/utils/map/mapUtils.ts line 11 at r2 (raw file):

Previously, Huulivoide (Jesse Jaara) wrote…

ReadonlyArray.

Done.

[Huulivoide]

@Huulivoide reviewed 1 file and all commit messages, and resolved 1 discussion.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on patricvincit).