fix: remove mixins

doc/src/components/Esdoc/ExtendsChainHTML.js

@@ -16,20 +16,25 @@ function ExtendsChainHTML({ doc }) {
 
   // We display only externals classes from outside the project.
   // TODO ideally we would like to display only what is in the @extends param.
-  const extendsChains = doc._custom_extends_chains.filter(
-    (extend) => !extend.includes('externals'),
+  const extendsChains = doc._custom_extends_chains.filter((extend) =>
+    extend.includes('externals'),
   );
 
+  if (extendsChains.length === 0) return null;
+
   return (
     <div className="flat-list" data-ice="extendsChain">
       <h4>Extends:</h4>
       <div>
-        {extendsChains.map((extend) => (
-          <React.Fragment key={extend}>
-            <DocLinkHTML longname={extend} />
-            {/* {' → '} */}
-          </React.Fragment>
-        ))}
+        {extendsChains.map((extend) => {
+          console.log('extend', extend);
+          return (
+            <React.Fragment key={extend}>
+              <DocLinkHTML longname={extend} />
+              {/* {' → '} */}
+            </React.Fragment>
+          );
+        })}
         {/* {doc.name} */}
       </div>
     </div>

doc/yarn.lock

@@ -4533,7 +4533,7 @@ mkdirp@^0.5.1:
     minimist "^1.2.6"
 
 mobility-toolbox-js@./../build:
-  version "3.0.0-beta.36"
+  version "3.0.0-beta.37"
   dependencies:
     "@geoblocks/ol-maplibre-layer" "^1.0.1"
     "@turf/helpers" "7.1.0"

package.json

@@ -98,7 +98,7 @@
     "cy:test:firefox": "yarn build && start-server-and-test start http://localhost:3000 'cypress run --browser firefox'",
     "dev": "vite",
     "doc": "yarn build && yarn apidoc && cd doc && rm -rf node_modules/mobility-toolbox-js && yarn install --force && yarn build",
-    "doc:dev": "yarn clean && yarn build && yarn apidoc && yarn dev:examples",
+    "doc:dev": "yarn clean && yarn build && yarn apidoc && yarn doc:dev:examples",
     "doc:dev:examples": "yarn clean && yarn build && cd doc && rm -rf node_modules/mobility-toolbox-js && yarn install --force && yarn dev",
     "esbuild": "yarn esbuild:all && yarn esbuild:iife",
     "esbuild:all": "esbuild src/index.js src/**/*.js src/**/*.ts src/**/**/*.js src/**/**/*.ts --target=chrome100 --outdir=build/ --loader:.js=jsx",

src/common/typedefs.js

@@ -33,37 +33,6 @@
  * @property {Feature[]} features  An array of features.
  * @property {number[2]} coordinate The coordinate where to find the featue.
  */
-/**
- * @typedef {ol/Map~Map|maplibregl.Map} AnyMap
- */
-/**
- * @typedef {Object} MaplibreLayerOptions
- * @property {string} apiKey Access key for [geOps apis](https://developer.geops.io/).
- * @property {string} apiKeyName geOps Maps api key name.
- * @property {maplibregl.MapOptions} options.mapLibreOptions Maplibre map options.
- * @property {string} style geOps Maps api style.
- * @property {string} url geOps Maps api url.
- */
-/**
- * @typedef {Object} ControlCommonOptions
- * @property {boolean} [active = true] Whether the control is active or not.
- * @property {HTMLElement} element The HTML element used to render the control.
- * @property {HTMLElement} target The HTML element where to render the element property. Default is the map's element.
- * @property {function} render Render function called whenever the control needs to be rerendered.
- */
-/**
- * @typedef {Object} LayerCommonOptions
- * @property {string!} key Identifier of the layer. Must be unique.
- * @property {string!} name  Name of the layer.
- * @property {string!} group Group of the layer.
- * @property {string[]!} copyrights List of copyrights.
- * @property {Layer[]!} children List of children layers.
- * @property {boolean!} visible  Define if the layer is currently display on the map.
- * @property {boolean!} disabled Define if the layer is currently display on the map but can't be seen (extent, zoom ,data restrictions).
- * @property {number!} hittolerance Hit-detection tolerance in css pixels. Pixels inside the radius around the given position will be checked for features.
- * @property {Object!} properties - Custom properties.
- * @property {AnyMap!} map - The map used to display the layer.
- */
 /**
  * @typedef {Object} VehiclePosition
  * @property {number[2]} coord Coordinate of the vehicle position in Mercator .

src/common/utils/RealtimeEngine.ts

@@ -9,8 +9,6 @@ import { RealtimeAPI, RealtimeModes } from '../../api';
 import { WebSocketAPIMessageEventData } from '../../api/WebSocketAPI';
 import {
   AnyCanvas,
-  AnyLayer,
-  AnyRealtimeLayer,
   LayerGetFeatureInfoOptions,
   RealtimeBbox,
   RealtimeGeneralizationLevel,
@@ -62,8 +60,8 @@ export interface RealtimeEngineOptions {
   mode?: RealtimeMode;
   motsByZoom?: RealtimeMot[][];
   onRender?: (renderState: RealtimeRenderState, viewState: ViewState) => void;
-  onStart?: (realtimeLayer: AnyRealtimeLayer) => void;
-  onStop?: (realtimeLayer: AnyRealtimeLayer) => void;
+  onStart?: (realtimeEngine: RealtimeEngine) => void;
+  onStop?: (realtimeEngine: RealtimeEngine) => void;
   pingIntervalMs?: number;
   pixelRatio?: number;
   prefix?: string;
@@ -119,8 +117,8 @@ class RealtimeEngine {
   mots?: RealtimeMot[];
   motsByZoom: RealtimeMot[][];
   onRender?: (renderState: RealtimeRenderState, viewState: ViewState) => void;
-  onStart?: (realtimeLayer: AnyLayer) => void;
-  onStop?: (realtimeLayer: AnyLayer) => void;
+  onStart?: (realtimeLayer: RealtimeEngine) => void;
+  onStop?: (realtimeLayer: RealtimeEngine) => void;
   pixelRatio?: number;
   renderState?: RealtimeRenderState;
   renderTimeIntervalByZoom: number[];
@@ -387,7 +385,6 @@ class RealtimeEngine {
 
     const vehicles = [];
     for (let i = 0; i < trajectories.length; i += 1) {
-      // @ts-expect-error  coordinate is added by the RealtimeLayer
       const { coordinate: trajcoord } = trajectories[i].properties;
       if (trajcoord && containsCoordinate(ext, trajcoord)) {
         vehicles.push(trajectories[i]);

src/common/utils/getVehiclePosition.ts

@@ -23,14 +23,14 @@ const getVehiclePosition = (
   noInterpolate: boolean,
 ): VehiclePosition => {
   const {
-    // @ts-expect-error  coordinate is added by the RealtimeLayer
     coordinate,
     // @ts-expect-error  olGeometry is added by the RealtimeLayer
     olGeometry,
     time_intervals: timeIntervals,
   } = trajectory.properties;
-  // @ts-expect-error
-  let { coordinates, type } = trajectory.geometry;
+  let { coordinates, type } = trajectory.geometry as
+    | GeoJSON.LineString
+    | GeoJSON.Point;
   let geometry = olGeometry;
   let coord;
   let rotation;

src/ol/index.js

@@ -2,6 +2,5 @@ export * from '../api';
 export * from '../common';
 export * from './controls';
 export * from './layers';
-export * from './mixins';
 export * from './styles';
 export * from './utils';

src/ol/layers/Layer.ts

@@ -1,10 +1,25 @@
 import debounce from 'lodash.debounce';
+import { Map } from 'ol';
 import OLLayer from 'ol/layer/Layer';
 import LayerRenderer from 'ol/renderer/Layer';
 
-import MobilityLayerMixin, {
-  MobilityLayerOptions,
-} from '../mixins/MobilityLayerMixin';
+import defineDeprecatedProperties from '../utils/defineDeprecatedProperties';
+
+import type { Options } from 'ol/layer/Layer';
+
+export type MobilityLayerOptions = {
+  children?: any[];
+  copyrights?: string[];
+  disabled?: boolean;
+  group?: string;
+  hitTolerance?: number;
+  key?: string;
+  map?: Map;
+  name?: string;
+  properties?: Record<string, any>;
+  visible?: boolean;
+} & Options &
+  Record<string, any>;
 
 let deprecated: (message: string) => void = () => {};
 if (
@@ -31,15 +46,16 @@ class EmptyLayerRenderer extends LayerRenderer<OLLayer> {
  * An OpenLayers layer here only for backward compatibility v2.
  * @deprecated Use an OpenLayers Layer instead.
  */
-class Layer extends MobilityLayerMixin(OLLayer) {
+class Layer extends OLLayer {
   constructor(options: MobilityLayerOptions) {
     super(options);
+    defineDeprecatedProperties(this, options);
     deprecated('Layer is deprecated. Use an OpenLayers Layer instead.');
   }
 
   clone(newOptions: MobilityLayerOptions): Layer {
     return new Layer({
-      ...(this.options || {}),
+      ...(this.get('options') || {}),
       ...(newOptions || {}),
     });
   }

src/ol/layers/MaplibreLayer.ts

@@ -1,12 +1,14 @@
 import { MapLibreLayer } from '@geoblocks/ol-maplibre-layer';
 import debounce from 'lodash.debounce';
-import OlMap from 'ol/Map';
+import { EventsKey } from 'ol/events';
+import Map from 'ol/Map';
 import { ObjectEvent } from 'ol/Object';
+import { unByKey } from 'ol/Observable';
 
 import { getUrlWithParams } from '../../common/utils';
-import MobilityLayerMixin, {
-  MobilityLayerOptions,
-} from '../mixins/MobilityLayerMixin';
+import defineDeprecatedProperties from '../utils/defineDeprecatedProperties';
+
+import { MobilityLayerOptions } from './Layer';
 
 import type {
   MapLibreLayerOptions,
@@ -73,11 +75,12 @@ if (
  *
  * @see <a href="/example/ol-maplibre-layer">OpenLayers Maplibre layer example</a>
  *
- * @extends {ol/layer/Layer~Layer}
  * @extends {geoblocks/ol-maplibre-layer/MapLibreLayer}
  * @public
  */
-class MaplibreLayer extends MobilityLayerMixin(MapLibreLayer) {
+class MaplibreLayer extends MapLibreLayer {
+  public olEventsKeys: EventsKey[] = [];
+
   /**
    * Constructor.
    *
@@ -119,18 +122,17 @@ class MaplibreLayer extends MobilityLayerMixin(MapLibreLayer) {
     }
     super(newOptions);
 
+    // For backward compatibility with v2
+    defineDeprecatedProperties(this, options);
+
     // We save the options to be able to clone the layer.
     // and to see if the style is defined by the maplibreOptions given by the user.
     this.set('options', options);
   }
-
   /**
    * Initialize the layer and listen to feature clicks.
-   * @param {ol/Map~Map} map An OpenLayers map.
    */
-  attachToMap(map: OlMap) {
-    super.attachToMap(map);
-
+  attachToMap() {
     const updateMaplibreMapDebounced = debounce(
       this.updateMaplibreMap.bind(this),
       150,
@@ -145,16 +147,6 @@ class MaplibreLayer extends MobilityLayerMixin(MapLibreLayer) {
     );
   }
 
-  // get queryRenderedFeaturesOptions(): maplibregl.QueryRenderedFeaturesOptions {
-  //   return this.get('queryRenderedFeaturesOptions');
-  // }
-
-  // set queryRenderedFeaturesOptions(
-  //   newValue: maplibregl.QueryRenderedFeaturesOptions,
-  // ) {
-  //   this.set('queryRenderedFeaturesOptions', newValue);
-  // }
-
   /**
    * Create a copy of the MaplibreLayer.
    *
@@ -164,11 +156,15 @@ class MaplibreLayer extends MobilityLayerMixin(MapLibreLayer) {
    */
   clone(newOptions: MaplibreLayerOptions): MaplibreLayer {
     return new MaplibreLayer({
-      ...(this.options || {}),
+      ...(this.get('options') || {}),
       ...(newOptions || {}),
     });
   }
 
+  detachFromMap() {
+    unByKey(this.olEventsKeys);
+  }
+
   getStyle() {
     // If the style is a complete style object, use it directly.
     if (
@@ -194,6 +190,26 @@ class MaplibreLayer extends MobilityLayerMixin(MapLibreLayer) {
     return buildStyleUrl(this.url, this.style, this.apiKey, this.apiKeyName);
   }
 
+  // get queryRenderedFeaturesOptions(): maplibregl.QueryRenderedFeaturesOptions {
+  //   return this.get('queryRenderedFeaturesOptions');
+  // }
+
+  // set queryRenderedFeaturesOptions(
+  //   newValue: maplibregl.QueryRenderedFeaturesOptions,
+  // ) {
+  //   this.set('queryRenderedFeaturesOptions', newValue);
+  // }
+
+  override setMapInternal(map: Map) {
+    if (map) {
+      super.setMapInternal(map);
+      this.attachToMap();
+    } else {
+      this.detachFromMap();
+      super.setMapInternal(map);
+    }
+  }
+
   updateMaplibreMap() {
     try {
       this.mapLibreMap?.setStyle(this.getStyle(), { diff: false });