@masterportal/masterportalapi 2.23.0 → 2.25.0

package/src/maps/olcs/3dUtils/wmsRasterSynchronizer.js

@@ -6,8 +6,8 @@ import {getUid} from "olcs/util.js";
 import TileWMS from "ol/source/TileWMS.js";
 import ImageWMS from "ol/source/ImageWMS.js";
 import WMTS from "ol/source/WMTS.js";
-import olcsAbstractSynchronizer from "olcs/AbstractSynchronizer.js";
-import {extentToRectangle, tileLayerToImageryLayer, updateCesiumLayerProperties} from "olcs/core.js";
+import olcsAbstractSynchronizer from "olcs/AbstractSynchronizer.ts";
+import {extentToRectangle, tileLayerToImageryLayer, updateCesiumLayerProperties} from "olcs/core.ts";
 import {Tile, Image as ImageLayer} from "ol/layer.js";
 import {stableSort} from "ol/array.js";
 import {getBottomLeft, getBottomRight, getTopRight, getTopLeft} from "ol/extent.js";

package/src/maps/olcs/olcsMap.js

@@ -1,6 +1,6 @@
-import OLCesium from "olcs/OLCesium.js";
+import OLCesium from "olcs/OLCesium.ts";
 import {transform, get} from "ol/proj.js";
-import VectorSynchronizer from "olcs/VectorSynchronizer.js";
+import VectorSynchronizer from "olcs/VectorSynchronizer.ts";
 
 import FixedOverlaySynchronizer from "./3dUtils/fixedOverlaySynchronizer.js";
 import WMSRasterSynchronizer from "./3dUtils/wmsRasterSynchronizer.js";

package/src/renderer/webgl.js

@@ -1,9 +1,13 @@
 import WebGLPointsLayer from "ol/layer/WebGLPoints";
 import WebGLVectorLayerRenderer from "ol/renderer/webgl/VectorLayer";
+import WebGLVectorTileLayerRenderer from "ol/renderer/webgl/VectorTileLayer.js";
+import VectorTile from "ol/layer/VectorTile.js";
 import VectorLayer from "ol/layer/Layer";
 import styleList from "../vectorStyle/styleList";
 import {getRulesForFeature} from "../vectorStyle/lib/getRuleForIndex";
 import {returnColor} from "../vectorStyle/lib/colorConvertions";
+import {asArray} from "ol/color.js";
+import {packColor, parseLiteralStyle} from "ol/webgl/styleparser.js";
 
 /**
  * The default style for OpenLayers WebGLPoints class
@@ -23,20 +27,20 @@ const defaultStyle = {
 
     /** @type {import('ol/style/literal.js').LiteralStyle} */
     style = {
-        "stroke-color": ["get", "STROKECOLOR"],
-        "stroke-width": ["get", "STROKEWIDTH", "number"],
-        "fill-color": ["get", "FILLCOLOR"],
-        "opacity": ["get", "OPACITY", "number"],
-        "size": ["get", "CIRCLESIZE", "number"]
+        "stroke-color": ["get", "strokeColor"],
+        "stroke-width": ["get", "strokeWidth", "number"],
+        "fill-color": ["get", "fillColor"],
+        "opacity": ["get", "opacity", "number"],
+        "size": ["get", "circleSize", "number"],
+        symbol: defaultStyle.symbol
     };
 
 /**
- * Creates a layer object to extend from.
+ *  Creates a vector layer with custom renderer.
  * @augments VectorLayer
  * @private
  * @implements {WebGLVectorLayerRenderer}
- * @param {Object} attrs attributes of the layer
- * @returns {module:ol/layer/Layer} the LocalWebGLLayer with a custom renderer for WebGL styling
+ * @returns {module:ol/layer/VectorLayer} the LocalWebGLLayer with a custom renderer for WebGL styling
  */
 export function createVectorLayerRenderer () {
     /**
@@ -46,7 +50,7 @@ export function createVectorLayerRenderer () {
      */
     class LocalWebGLLayer extends VectorLayer {
         /**
-         * Creates a new renderer that takes the defined style of the new layer as an input
+         * Creates a new renderer that takes the defined style of the new layer as an input.
          * @returns {module:ol/renderer/webgl/WebGLVectorLayerRenderer} the custom renderer
          * @experimental
          */
@@ -60,9 +64,101 @@ export function createVectorLayerRenderer () {
     return LocalWebGLLayer;
 }
 
+/**
+ * Creates a vector tile layer with custom renderer.
+ * @augments VectorTile
+ * @private
+ * @implements {WebGLVectorTileLayerRenderer}
+ * @returns {module:ol/layer/VectorTile} the LocalWebGLLayer with a custom renderer for WebGL styling of vectorTile layers.
+ */
+export function createVectorTileLayerRenderer () {
+    /**
+     * @class LocalWebGLLayer
+     * @see https://openlayers.org/en/latest/examples/webgl-vector-tiles.html
+     * @description the temporary class with a custom renderer to render the vectortiles with WebGL
+     */
+    class LocalWebGLLayer extends VectorTile {
+
+        /**
+         * Creates a new renderer that takes the defined style of the new layer as an input.
+         * @returns {module:ol/renderer/webgl/WebGLVectorTileLayerRenderer} the custom renderer
+         * @experimental
+         */
+        createRenderer () {
+            const result = parseLiteralStyle(style),
+                invisible = [255, 255, 255, 0],
+                grey = [119, 119, 119, 1];
+
+
+            return new WebGLVectorTileLayerRenderer(this, {
+                style: {
+                    fill: {
+                        fragment: result.builder.getFillFragmentShader(),
+                        vertex: result.builder.getFillVertexShader()
+                    },
+                    stroke: {
+                        fragment: result.builder.getStrokeFragmentShader(),
+                        vertex: result.builder.getStrokeVertexShader()
+                    },
+                    symbol: {
+                        fragment: result.builder.getSymbolFragmentShader(),
+                        vertex: result.builder.getSymbolVertexShader()
+                    },
+                    attributes: {
+                        fillColor: {
+                            size: 2,
+                            callback: (feature) => {
+                                const featureStyle = this.getStyle()(feature, 1);
+
+                                if (featureStyle && featureStyle[0]) {
+                                    const color = featureStyle[0]?.getFill()?.getColor();
+
+                                    return packColor(color && typeof color === "string" ? asArray(color) : invisible);
+                                }
+                                return packColor(grey);
+                            }
+                        },
+                        strokeColor: {
+                            size: 2,
+                            callback: (feature) => {
+                                const featureStyle = this.getStyle()(feature, 1);
+
+                                if (featureStyle && featureStyle[0]) {
+                                    const color = featureStyle[0]?.getStroke()?.getColor();
+
+                                    return packColor(color ? asArray(color) : invisible);
+                                }
+                                return packColor(grey);
+                            }
+                        },
+                        strokeWidth: {
+                            size: 1,
+                            callback: (feature) => {
+                                const featureStyle = this.getStyle()(feature, 1);
+
+                                if (featureStyle && featureStyle[0]) {
+                                    const width = featureStyle[0]?.getStroke()?.getWidth();
+
+                                    if (width !== undefined) {
+                                        return width > 10 ? width / 10 : 1;/** @todo needs refactoring in later versions  */
+                                    }
+                                }
+                                return 1;
+                            }
+                        }
+                    }
+                }
+            });
+        }
+    }
+
+    return LocalWebGLLayer;
+}
+
 /**
  * Parses the vectorStyle from style.json to the feature
- * to reduce processing on runtime
+ * to reduce processing on runtime.
+ * Sets properties with style at feature to use by literalSytle of renderer of VectorLayer.
  * @private
  * @param {module:ol/Feature} feature - the feature to check
  * @param {module:Backbone/Model} [styleObject] - (optional) the style model from StyleList
@@ -87,11 +183,11 @@ export function formatFeatureStyles (feature, styleObject) {
             strokeWidth = rule.style.polygonStrokeWidth || rule.style.lineStrokeWidth,
             size = rule.style.circleRadius;
 
-        feature.set("FILLCOLOR", fillColor ? fillColor : "#006688");
-        feature.set("STROKECOLOR", strokeColor ? strokeColor : "#006688");
-        feature.set("STROKEWIDTH", strokeWidth ? strokeWidth : 1);
-        feature.set("OPACITY", fillColor ? (rule.style.polygonFillColor || rule.style.circleFillColor)[3] : 1);
-        feature.set("CIRCLESIZE", size ? size : 20);
+        feature.set("fillColor", fillColor ? fillColor : "#006688");
+        feature.set("strokeColor", strokeColor ? strokeColor : "#006688");
+        feature.set("strokeWidth", strokeWidth ? strokeWidth : 1);
+        feature.set("opacity", fillColor ? (rule.style.polygonFillColor || rule.style.circleFillColor)[3] : 1);
+        feature.set("circleSize", size ? size : 20);
     }
 }
 
@@ -134,19 +230,28 @@ export function formatFeatureData (feature, excludeTypes = ["boolean"]) {
 }
 
 /**
- * feature transformations called after loading
+ * feature transformations called after loading - but not for layer of typ VectortTile
  * called by the layer source loader, binds the instance of the layer model
  * should be called on each source refresh
  * @param {module:ol/Feature[]} features - the features loaded by the layer
  * @param {String} styleId - The layer's styleId
  * @param {String[]} excludeTypesFromParsing - types that should not be parsed from strings, only necessary for webgl
+ * @param {Boolean} isPointLayer - whether the layer source should consist only of points (or multi points)
  * @returns {void}
  */
-export function afterLoading (features, styleId, excludeTypesFromParsing) {
+export function afterLoading (features, styleId, excludeTypesFromParsing, isPointLayer) {
     const styleObject = styleList.returnStyleObject(styleId); // load styleModel to extract rules per feature
 
     if (Array.isArray(features)) {
         features.forEach(feature => {
+            /**
+             * extract first point from Multipoint
+             * @deprecated will probably not be necessary anymore in release version
+             * @example An example for that behavior can be found when rendering "Strassenbaumkataster"
+             */
+            if (isPointLayer && feature.getGeometry().getType() === "MultiPoint") {
+                feature.setGeometry(feature.getGeometry().getPoint(0)); // other points in the multi point will be ignored for now
+            }
             formatFeatureGeometry(feature); /** @deprecated will propbably not be necessary anymore in release version */
             formatFeatureStyles(feature, styleObject); /** @todo needs refactoring in release version  */
             formatFeatureData(feature, excludeTypesFromParsing); /** Necessary since the WebGLPoints Style Syntax depends on data types (i.e. numbers not as strings) */
@@ -175,7 +280,8 @@ export function createLayer (attrs) {
         opacity: attrs.transparency ? (100 - attrs.transparency) / 100 : attrs.opacity,
         renderer: "webgl",
         styleId: attrs.styleId,
-        excludeTypesFromParsing: attrs.excludeTypesFromParsing
+        excludeTypesFromParsing: attrs.excludeTypesFromParsing,
+        extent: attrs.extent
     };
 
     /**
@@ -196,11 +302,22 @@ export function createLayer (attrs) {
         });
     }
 
-    /**
-     * use ol/renderer/webgl/WebGLVectorLayerRenderer if not point layer
-     * Point styling as quads only
-     */
-    LayerConstructor = createVectorLayerRenderer(attrs);
+    if (attrs.typ === "VectorTile") {
+
+        /**
+         * use ol/renderer/webgl/WebGLVectorLayerRenderer if not point layer
+         * Point styling as quads only
+         */
+        LayerConstructor = createVectorTileLayerRenderer(attrs);
+    }
+    else {
+
+        /**
+         * use ol/renderer/webgl/WebGLVectorLayerRenderer if not point layer
+         * Point styling as quads only
+         */
+        LayerConstructor = createVectorLayerRenderer(attrs);
+    }
     return new LayerConstructor({
         ...options,
         isPointLayer: false

package/src/vectorStyle/styleList.js

@@ -230,31 +230,15 @@ function initializeStyleList (styleGetters, Config, layers, tools, callback) {
     styleConf = Config.styleConf;
     featureViaUrlLayers = Config.featureViaURL?.layers;
 
-    const xhr = new XMLHttpRequest();
-
-    xhr.open("GET", styleConf, false);
-    xhr.onreadystatechange = function (event) {
-        const target = event.target,
-            status = target.status;
-        let data;
-
-        if (status === 200) {
-            try {
-                data = JSON.parse(target.response);
-            }
-            catch (error) {
-                console.error("An error occured when parsing the response after loading '" + styleConf + "':", error);
-                return callback(false, error);
-            }
+    fetch(styleConf)
+        .then(response => response.json())
+        .then(data => {
             styleList = parseStyles(data);
-        }
-        else if (status === 404) {
-            console.error("An error occured when trying to fetch services from '" + styleConf + "':", 404);
-            return callback(false, true);
-        }
-        return callback(styleList);
-    };
-    xhr.send();
+        })
+        .catch(error => {
+            console.error(error);
+            callback(false, true);
+        });
 }
 
 /**

package/test/layer/geojson/index.test.js

@@ -10,8 +10,10 @@ const features = [new Feature(), new Feature()];
 jest.mock("../../../src/renderer/webgl.js", () => {
     const original = jest.requireActual("../../../src/renderer/webgl.js");
 
-    original.afterLoading = jest.fn();
-    return original;
+    return {
+        ...original,
+        afterLoading: jest.fn()
+    };
 });
 
 describe("geojson/index", function () {
@@ -96,11 +98,23 @@ describe("geojson/index", function () {
         it("creates a vectorSource with an additional listener, when renderer is \"webgl\"", () => {
             const
                 rawLayer = {url: "example.com/geo.json"},
-                source = geojson.createLayerSource({...rawLayer, renderer: "webgl"}, {});
+                layerParams = {
+                    renderer: "webgl",
+                    styleId: "id",
+                    excludeTypesFromParsing: null,
+                    isPointLayer: true
+                },
+                source = geojson.createLayerSource({
+                    ...rawLayer,
+                    renderer: layerParams.renderer,
+                    styleId: layerParams.styleId,
+                    excludeTypesFromParsing: layerParams.excludeTypesFromParsing,
+                    isPointLayer: layerParams.isPointLayer
+                }, {});
 
             expect(source.getListeners("featuresloadend")).toHaveLength(2);
-            source.getListeners("featuresloadend")[1]({features: []});
-            expect(webgl.afterLoading).toHaveBeenCalled();
+            source.getListeners("featuresloadend")[1]({features});
+            expect(webgl.afterLoading).toHaveBeenCalledWith(features, layerParams.styleId, layerParams.excludeTypesFromParsing, layerParams.isPointLayer);
         });
 
     });

package/test/layer/oaf.test.js

@@ -19,8 +19,10 @@ jest.mock("../../src/rawLayerList.js", () => {
 jest.mock("../../src/renderer/webgl.js", () => {
     const original = jest.requireActual("../../src/renderer/webgl.js");
 
-    original.afterLoading = jest.fn();
-    return original;
+    return {
+        ...original,
+        afterLoading: jest.fn()
+    };
 });
 
 
@@ -265,11 +267,24 @@ describe("oaf.js", function () {
                     featureType: "krankenhaeuser_hh",
                     version: "1.0.0"
                 },
-                source = oaf.createLayerSource({...rawLayer, renderer: "webgl"});
+                layerParams = {
+                    renderer: "webgl",
+                    styleId: "id",
+                    excludeTypesFromParsing: null,
+                    isPointLayer: true
+                },
+                source = oaf.createLayerSource({
+                    ...rawLayer,
+                    renderer: layerParams.renderer,
+                    styleId: layerParams.styleId,
+                    excludeTypesFromParsing: layerParams.excludeTypesFromParsing,
+                    isPointLayer: layerParams.isPointLayer
+                }),
+                features = [];
 
             expect(source.getListeners("featuresloadend")).toHaveLength(1);
-            source.getListeners("featuresloadend")[0]({features: []});
-            expect(webgl.afterLoading).toHaveBeenCalled();
+            source.getListeners("featuresloadend")[0]({features});
+            expect(webgl.afterLoading).toHaveBeenCalledWith(features, layerParams.styleId, layerParams.excludeTypesFromParsing, layerParams.isPointLayer);
         });
     });
-});
+});

package/test/layer/terrain.test.js

@@ -5,8 +5,10 @@ describe("terrain.js", function () {
 
     beforeEach(() => {
         global.Cesium = {};
-        global.Cesium.CesiumTerrainProvider = jest.fn();
+        global.Cesium.CesiumTerrainProvider = {};
+        global.Cesium.CesiumTerrainProvider.fromUrl = jest.fn();
         global.Cesium.EllipsoidTerrainProvider = jest.fn();
+
         attr = {
             id: "12883",
             name: "Gelaende",
@@ -21,7 +23,7 @@ describe("terrain.js", function () {
                 return {};
             }
         };
-        cesiumTerrainProviderSpy = jest.spyOn(global.Cesium, "CesiumTerrainProvider");
+        cesiumTerrainProviderSpy = jest.spyOn(global.Cesium.CesiumTerrainProvider, "fromUrl");
     });
 
     afterEach(() => {

package/test/layer/tileset.test.js

@@ -6,7 +6,8 @@ describe("tileset.js", function () {
 
     beforeEach(() => {
         global.Cesium = {};
-        global.Cesium.Cesium3DTileset = jest.fn();
+        global.Cesium.Cesium3DTileset = {};
+        global.Cesium.Cesium3DTileset.fromUrl = jest.fn();
         global.Cesium.Cesium3DTileStyle = jest.fn(color => color);
         attr = {
             id: "4002",
@@ -28,7 +29,9 @@ describe("tileset.js", function () {
                 };
             }
         };
-        cesium3DTilesetSpy = jest.spyOn(global.Cesium, "Cesium3DTileset");
+        cesium3DTilesetSpy = jest.spyOn(global.Cesium.Cesium3DTileset, "fromUrl").mockImplementation(() => {
+            return Promise.resolve({});
+        });
         console.warn = jest.fn();
     });
 
@@ -38,21 +41,23 @@ describe("tileset.js", function () {
         console.warn = consoleWarn;
     });
 
-    function checkAttributes (layer, attrs) {
+    async function checkAttributes (layer, attrs) {
+        const tileset = await layer.tileset;
+
         expect(layer.get("name")).toEqual(attrs.name);
         expect(layer.get("typ")).toEqual(attrs.typ);
         expect(layer.get("id")).toEqual(attrs.id);
-        expect(layer.tileset.layerReferenceId).toEqual(attrs.id);
+        expect(tileset.layerReferenceId).toEqual(attrs.id);
     }
 
     describe("createLayer", function () {
         it("creates tileset layer without map", function () {
             const layer = new Tileset(attr);
 
-            checkAttributes(layer, attr);
             expect(layer.tileSet).toEqual(undefined);
             expect(layer.tileset.show).toEqual(undefined);
             expect(cesium3DTilesetSpy).toHaveBeenCalledTimes(1);
+            checkAttributes(layer, attr);
         });
         it("creates 2 tileset layers  with map and checks attributes", function () {
             const attr2 = {

package/test/layer/vectorTile.test.js

@@ -2,6 +2,7 @@ import OpenLayersVectorTileLayer from "ol/layer/VectorTile";
 import OpenLayersVectorTileSource from "ol/source/VectorTile";
 import OpenLayersTileGrid from "ol/tilegrid/TileGrid";
 
+
 import {Feature} from "ol";
 import Polygon from "ol/geom/Polygon";
 
@@ -16,11 +17,21 @@ jest.mock("../../src/rawLayerList.js", () => {
     return original;
 });
 
+jest.mock("../../src/renderer/webgl.js", () => {
+    const original = jest.requireActual("../../src/renderer/webgl.js");
+
+    return {
+        ...original,
+        afterLoading: jest.fn()
+    };
+});
+
+
 describe("vectorTile.js", function () {
 
     beforeAll(() => crs.registerProjections());
 
-    const layerParams = {
+    const rawLayer = {
             name: "VT Test",
             id: "VT_01",
             url: "https://example.org"
@@ -79,12 +90,13 @@ describe("vectorTile.js", function () {
                 source = vectorTile.createLayerSource("https://foo.example.org", sourceParams);
 
             expect(source).toBeInstanceOf(OpenLayersVectorTileSource);
+            expect(typeof source.getTileLoadFunction()).toEqual("function");
         });
     });
 
     describe("createLayer", function () {
         it("creates a vector Tile Layer", function () {
-            const layer = vectorTile.createLayer(layerParams);
+            const layer = vectorTile.createLayer(rawLayer);
 
             expect(layer).toBeInstanceOf(OpenLayersVectorTileLayer);
             expect(layer.getSource()).toBeInstanceOf(OpenLayersVectorTileSource);
@@ -92,6 +104,13 @@ describe("vectorTile.js", function () {
             expect(layer.get("id")).toEqual("VT_01");
         });
 
+        it("creates a vector Tile Layer with webgl renderer", function () {
+            const layer = vectorTile.createLayer(rawLayer, {layerParams: {renderer: "webgl"}});
+
+            expect(layer.constructor.name).toEqual("LocalWebGLLayer");
+            expect(layer.getSource()).toBeInstanceOf(OpenLayersVectorTileSource);
+        });
+
         it("should log an error when required param is missing", function () {
             const spyConsole = jest.spyOn(console, "error").mockImplementation(() => ""),
                 layer = vectorTile.createLayer({
@@ -139,7 +158,7 @@ describe("vectorTile.js", function () {
                     ],
                     tileSize: 512
                 },
-                layer = vectorTile.createLayer(layerParams),
+                layer = vectorTile.createLayer(rawLayer),
                 source = layer.getSource(),
                 tileGrid = source.getTileGrid();
 
@@ -156,7 +175,7 @@ describe("vectorTile.js", function () {
 
     describe("setStyle", function () {
         it("should apply a given style", function () {
-            const layer = vectorTile.createLayer(layerParams);
+            const layer = vectorTile.createLayer(rawLayer);
 
             let featureStyle = null;
 

package/test/layer/wfs.test.js

@@ -24,8 +24,10 @@ jest.mock("../../src/rawLayerList.js", () => {
 jest.mock("../../src/renderer/webgl.js", () => {
     const original = jest.requireActual("../../src/renderer/webgl.js");
 
-    original.afterLoading = jest.fn();
-    return original;
+    return {
+        ...original,
+        afterLoading: jest.fn()
+    };
 });
 
 
@@ -420,11 +422,24 @@ describe("wfs.js", function () {
                     featureType: "krankenhaeuser_hh",
                     version: "1.0.0"
                 },
-                source = wfs.createLayerSource({...rawLayer, renderer: "webgl"});
+                layerParams = {
+                    renderer: "webgl",
+                    styleId: "id",
+                    excludeTypesFromParsing: null,
+                    isPointLayer: true
+                },
+                source = wfs.createLayerSource({
+                    ...rawLayer,
+                    renderer: layerParams.renderer,
+                    styleId: layerParams.styleId,
+                    excludeTypesFromParsing: layerParams.excludeTypesFromParsing,
+                    isPointLayer: layerParams.isPointLayer
+                }),
+                features = [];
 
             expect(source.getListeners("featuresloadend")).toHaveLength(1);
-            source.getListeners("featuresloadend")[0]({features: []});
-            expect(webgl.afterLoading).toHaveBeenCalled();
+            source.getListeners("featuresloadend")[0]({features});
+            expect(webgl.afterLoading).toHaveBeenCalledWith(features, layerParams.styleId, layerParams.excludeTypesFromParsing, layerParams.isPointLayer);
         });
         it("creates a vectorSource with credentials: include as params", () => {
             global.fetch = jest.fn().mockImplementationOnce(() => {

package/test/maps/interactions/drawInteraction.test.js

@@ -6,6 +6,40 @@ import VectorSource from "ol/source/Vector";
 import drawInteractions, {styleObject} from "../../../src/maps/interactions/drawInteraction";
 
 describe("src/maps/interactions/drawInteraction.js", () => {
+    describe("convertUnits", () => {
+        it("shold return 1000 for sourceUnit === 'm' and targetUnit === 'm'", () =>{
+            const value = 1000,
+                sourceUnit = "m",
+                targetUnit = "m";
+
+            expect(drawInteractions.convertUnits(value, sourceUnit, targetUnit)).toEqual(1000);
+        });
+
+        it("shold return 1000 for sourceUnit === 'm' and targetUnit === 'km'", () =>{
+            const value = 1000,
+                sourceUnit = "m",
+                targetUnit = "km";
+
+            expect(drawInteractions.convertUnits(value, sourceUnit, targetUnit)).toEqual(1);
+        });
+
+        it("shold return 1000 for sourceUnit === 'km' and targetUnit === 'm'", () =>{
+            const value = 1000,
+                sourceUnit = "km",
+                targetUnit = "m";
+
+            expect(drawInteractions.convertUnits(value, sourceUnit, targetUnit)).toEqual(1000000);
+        });
+
+        it("shold return 1000 for sourceUnit === 'abc' and targetUnit === 'def'", () =>{
+            const value = 1000,
+                sourceUnit = "abc",
+                targetUnit = "def";
+
+            expect(drawInteractions.convertUnits(value, sourceUnit, targetUnit)).toEqual(1000);
+        });
+    });
+
     describe("transformMapUnitRadius", () => {
         it("should return the input meter radius in meter ", () => {
             const radius = 100,