@disy/cadenza.js 10.2.8 → 10.2.10

package/cadenza.js

@@ -10,6 +10,9 @@
  *   Please ensure that the user has view privilege for that link!
  * @property {boolean} [options.debug] - Whether to enable debug logging
  */
+// This placeholder is replaced when Cadenza JS is released,
+// i.e. during development, the version is not available.
+const CADENZAJS_VERSION = '10.2.10';
 /**
  * Creates an instance of the Cadenza JS client.
  *
@@ -40,9 +43,11 @@ export function cadenza(baseUrlOrOptions, options) {
             : baseUrlOrOptions;
     return new CadenzaClient(options);
 }
+cadenza.version = CADENZAJS_VERSION;
 /* @ts-ignore */
 const previousGlobalCadenza = globalThis.cadenza;
 globalThis.cadenza = Object.assign((/** @type Parameters<cadenza> */ ...args) => cadenza(...args), {
+    version: CADENZAJS_VERSION,
     noConflict() {
         globalThis.cadenza = previousGlobalCadenza;
         return cadenza;
@@ -183,6 +188,11 @@ globalThis.cadenza = Object.assign((/** @type Parameters<cadenza> */ ...args) =>
  * @property {Feature[]} features - The features within this collection
  */
 /** @typedef {'error'|'warning'|'info'|'success'} CustomValidityType - The type of custom validity used for disclose on visual presentation and form submission behavior */
+/**
+ * @typedef SnappingOptions
+ * @property {WorkbookLayerPath | string} layer - The layer to snap to
+ * @property {('toVertices' | 'toEdges' | 'lineTracing')[]} [types] - Snapping types; Without this option, the Cadenza default snapping types are used.
+ */
 let hasCadenzaSession = false;
 /** @type {Promise<void> | undefined} */
 let firstEmbeddingTargetShown;
@@ -190,7 +200,7 @@ let firstEmbeddingTargetShown;
  * _Notes:_
  * * Most public methods are tagged with one of these modifiers:
  *   * `Embed`: The method embeds Cadenza in the given iframe.
- *   * `Post Message`: The method communicates with an embedded or parent/opener Cadenza via postMessage.
+ *   * `Post Message`: The method communicates with an embedded Cadenza via postMessage.
  *   * `Post Message Parent`: The method communicates with a parent/opener Cadenza via postMessage.
  *   * `Server`: The method communicates with the Cadenza server via HTTP.
  * * Most public methods can be aborted using an [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal).
@@ -262,7 +272,7 @@ export class CadenzaClient {
         const targetWindow = this.#iframe
             ? this.iframe?.contentWindow
             : // If a window does not have a parent, its parent property is a reference to itself.
-                window.opener ?? (window.parent !== window ? window.parent : null);
+                (window.opener ?? (window.parent !== window ? window.parent : null));
         return /** @type {WindowProxy | null} */ targetWindow;
     }
     get #requiredIframe() {
@@ -307,6 +317,7 @@ export class CadenzaClient {
                 source.page === 'welcome', 'labelSet is only supported on the welcome page');
         }
         const params = createParams({
+            dataType,
             disabledUiFeatures,
             expandNavigator,
             filter,
@@ -314,7 +325,6 @@ export class CadenzaClient {
             hideWorkbookToolBar,
             highlightGlobalId,
             labelSet,
-            dataType,
             operationMode,
         });
         return this.#show(resolvePath(source), params, signal);
@@ -324,11 +334,12 @@ export class CadenzaClient {
      * @param {object} [__namedParameters] - Options
      * @param {boolean} [__namedParameters.invalidateCaches] - When true, caches will be invalidated for objecttypes used
      *   in the worksheet
+     * @return {Promise<void>} A `Promise` which resolves when the views of the worksheet have finished reloading
      * @postMessage
      */
     reload({ invalidateCaches = false } = {}) {
         this.#log('CadenzaClient#reload', ...arguments);
-        this.#postEvent('reload', { invalidateCaches });
+        return this.#postRequest('reload', { invalidateCaches });
     }
     /**
      * Sends a message to parent Cadenza window to close the window containing this application
@@ -347,6 +358,7 @@ export class CadenzaClient {
      * @param {LayerDefinition[]} [__namedParameters.additionalLayers] - Layer definitions to be imported and shown in the background, as a basis for the drawing.
      * @param {UiFeature[]} [__namedParameters.disabledUiFeatures] - Cadenza UI features to disable
      * @param {boolean} [__namedParameters.expandNavigator] - Indicates if the navigator should be expanded.
+     * @param {ExtentStrategy} [__namedParameters.extentStrategy] - Defines the initial map extent; If not given, Cadenza's default logic is used.
      * @param {FilterVariables} [__namedParameters.filter] - Filter variables
      * @param {Geometry} [__namedParameters.geometry] - A geometry to show on the map
      * @param {boolean} [__namedParameters.hideMainHeaderAndFooter] - Whether to hide the main Cadenza header and footer
@@ -357,7 +369,6 @@ export class CadenzaClient {
      * @param {OperationMode} [__namedParameters.operationMode] - The mode in which a workbook should be operated
      * @param {AbortSignal} [__namedParameters.signal] - A signal to abort the iframe loading
      * @param {boolean} [__namedParameters.useMapSrs] - Whether the coordinates specified in other parameters are specified in the map's SRS (otherwise EPSG:4326 is assumed)
-     * @param {ExtentStrategy} [__namedParameters.extentStrategy] - Defines the initial map extent; If not given, Cadenza's default logic is used.
      * @return {Promise<void>} A `Promise` for when the iframe is loaded
      * @throws For invalid arguments
      * @fires
@@ -365,16 +376,16 @@ export class CadenzaClient {
      * - {@link CadenzaActionEvent}
      * @embed
      */
-    async showMap(mapView, { disabledUiFeatures, expandNavigator, filter, geometry, hideMainHeaderAndFooter, hideWorkbookToolBar, highlightGlobalId, locationFinder, mapExtent, operationMode, useMapSrs, extentStrategy, signal, additionalLayers, } = {}) {
+    async showMap(mapView, { additionalLayers, disabledUiFeatures, expandNavigator, extentStrategy, filter, geometry, hideMainHeaderAndFooter, hideWorkbookToolBar, highlightGlobalId, locationFinder, mapExtent, operationMode, useMapSrs, signal, } = {}) {
         this.#log('CadenzaClient#showMap', ...arguments);
         if (geometry) {
             assertValidGeometryType(geometry.type);
         }
         const validExtentStrategy = sanitizeExtentStrategy({
+            extentStrategy,
             geometry,
             locationFinder,
             mapExtent,
-            extentStrategy,
         });
         const params = createParams({
             disabledUiFeatures,
@@ -465,12 +476,19 @@ export class CadenzaClient {
      * @hidden
      * @param {WorkbookLayerPath | string} layer - The data view layer to set the selection in
      * @param {unknown[][]} values - The IDs of the objects to select
+     * @param {object} [__namedParameters]
+     * @param {GeometryExtentStrategy} [__namedParameters.extentStrategy] - Strategy to define the new map extent
      * @return {Promise<void>} A `Promise` for when the selection was set.
      * @postMessage
      */
-    setSelection(layer, values) {
+    setSelection(layer, values, { extentStrategy } = {}) {
         this.#log('CadenzaClient#setSelection', ...arguments);
-        return this.#postRequest('setSelection', { layer: array(layer), values });
+        const selectionResult = this.#postRequest('setSelection', {
+            layer: array(layer),
+            values,
+        });
+        this.#setExtentStrategy(extentStrategy);
+        return selectionResult;
     }
     /**
      * Add to the selection in the currently shown workbook map view.
@@ -478,12 +496,19 @@ export class CadenzaClient {
      * @hidden
      * @param {WorkbookLayerPath | string} layer - The data view layer to change the selection in
      * @param {unknown[][]} values - The IDs of the objects to select
+     * @param {object} [__namedParameters]
+     * @param {GeometryExtentStrategy} [__namedParameters.extentStrategy] - Strategy to define the new map extent
      * @return {Promise<void>} A `Promise` for when the selection was changed.
      * @postMessage
      */
-    addSelection(layer, values) {
+    addSelection(layer, values, { extentStrategy } = {}) {
         this.#log('CadenzaClient#addSelection', ...arguments);
-        return this.#postRequest('addSelection', { layer: array(layer), values });
+        const selectionResult = this.#postRequest('addSelection', {
+            layer: array(layer),
+            values,
+        });
+        this.#setExtentStrategy(extentStrategy);
+        return selectionResult;
     }
     /**
      * Remove from the selection in the currently shown workbook map view.
@@ -491,15 +516,19 @@ export class CadenzaClient {
      * @hidden
      * @param {WorkbookLayerPath | string} layer - The data view layer to change the selection in
      * @param {unknown[][]} values - The IDs of the objects to unselect
+     * @param {object} [__namedParameters]
+     * @param {GeometryExtentStrategy} [__namedParameters.extentStrategy] - Strategy to define the new map extent
      * @return {Promise<void>} A `Promise` for when the selection was changed.
      * @postMessage
      */
-    removeSelection(layer, values) {
+    removeSelection(layer, values, { extentStrategy } = {}) {
         this.#log('CadenzaClient#removeSelection', ...arguments);
-        return this.#postRequest('removeSelection', {
+        const selectionResult = this.#postRequest('removeSelection', {
             layer: array(layer),
             values,
         });
+        this.#setExtentStrategy(extentStrategy);
+        return selectionResult;
     }
     /**
      * Create a geometry.
@@ -512,14 +541,15 @@ export class CadenzaClient {
      * @param {object} [__namedParameters] - Options
      * @param {LayerDefinition[]} [__namedParameters.additionalLayers] - Layer definitions to be imported and shown in the background, as a basis for the drawing.
      * @param {UiFeature[]} [__namedParameters.disabledUiFeatures] - Cadenza UI features to disable
+     * @param {ExtentStrategy} [__namedParameters.extentStrategy] - Defines the initial map extent; If not given, Cadenza's default logic is used.
      * @param {FilterVariables} [__namedParameters.filter] - Filter variables
      * @param {string} [__namedParameters.locationFinder] - A search query for the location finder - _Deprecated_: Use {@link LocationFinderExtentStrategy} instead.
      * @param {Extent} [__namedParameters.mapExtent] - A map extent to set - _Deprecated_: Use {@link StaticExtentStrategy} instead.
      * @param {number} [__namedParameters.minScale] - The minimum scale where the user should work on. A warning is shown when the map is zoomed out above the threshold.
      * @param {OperationMode} [__namedParameters.operationMode] - The mode in which a workbook should be operated
      * @param {AbortSignal} [__namedParameters.signal] - A signal to abort the iframe loading
+     * @param {SnappingOptions} [__namedParameters.snapping] - Passing these options enables snapping
      * @param {boolean} [__namedParameters.useMapSrs] - Whether the coordinates specified in other parameters are specified in the map's SRS and the created geometry should use the map's SRS (otherwise EPSG:4326 is assumed)
-     * @param {ExtentStrategy} [__namedParameters.extentStrategy] - Defines the initial map extent; If not given, Cadenza's default logic is used.
      * @return {Promise<void>} A `Promise` for when the iframe is loaded
      * @throws For invalid arguments
      * @fires
@@ -528,12 +558,12 @@ export class CadenzaClient {
      * - {@link CadenzaEditGeometryCancelEvent}
      * @embed
      */
-    async createGeometry(backgroundMapView, geometryType, { additionalLayers, disabledUiFeatures, filter, locationFinder, mapExtent, minScale, useMapSrs, operationMode, signal, extentStrategy, } = {}) {
+    async createGeometry(backgroundMapView, geometryType, { additionalLayers, disabledUiFeatures, extentStrategy, filter, locationFinder, mapExtent, minScale, useMapSrs, operationMode, signal, snapping, } = {}) {
         this.#log('CadenzaClient#createGeometry', ...arguments);
         const validExtentStrategy = sanitizeExtentStrategy({
+            extentStrategy,
             locationFinder,
             mapExtent,
-            extentStrategy,
         });
         const params = createParams({
             action: 'editGeometry',
@@ -542,6 +572,7 @@ export class CadenzaClient {
             geometryType,
             minScale,
             operationMode,
+            snapping,
             useMapSrs,
             validExtentStrategy,
         });
@@ -561,14 +592,15 @@ export class CadenzaClient {
      * @param {object} [__namedParameters] - Options
      * @param {LayerDefinition[]} [__namedParameters.additionalLayers] - Layer definitions to be imported and shown in the background, as a basis for the drawing. Each is a layer definition, with name, type and content (a Geojson featureCollection).
      * @param {UiFeature[]} [__namedParameters.disabledUiFeatures] - Cadenza UI features to disable
+     * @param {ExtentStrategy} [__namedParameters.extentStrategy] - Defines the initial map extent; If not given, Cadenza's default logic is used.
      * @param {FilterVariables} [__namedParameters.filter] - Filter variables
      * @param {string} [__namedParameters.locationFinder] - A search query for the location finder - _Deprecated_: Use {@link LocationFinderExtentStrategy} instead.
      * @param {Extent} [__namedParameters.mapExtent] - A map extent to set - _Deprecated_: Use {@link StaticExtentStrategy} instead.
      * @param {number} [__namedParameters.minScale] - The minimum scale where the user should work on. A warning is shown when the map is zoomed out above the threshold.
      * @param {OperationMode} [__namedParameters.operationMode] - The mode in which a workbook should be operated
      * @param {AbortSignal} [__namedParameters.signal] - A signal to abort the iframe loading
+     * @param {SnappingOptions} [__namedParameters.snapping] - Passing these options enables snapping
      * @param {boolean} [__namedParameters.useMapSrs] - Whether the coordinates specified in other parameters are specified in the map's SRS (otherwise EPSG:4326 is assumed)
-     * @param {ExtentStrategy} [__namedParameters.extentStrategy] - Defines the initial map extent; If not given, Cadenza's default logic is used.
      * @return {Promise<void>} A `Promise` for when the iframe is loaded
      * @throws For invalid arguments
      * @fires
@@ -577,14 +609,14 @@ export class CadenzaClient {
      * - {@link CadenzaEditGeometryCancelEvent}
      * @embed
      */
-    async editGeometry(backgroundMapView, geometry, { additionalLayers, disabledUiFeatures, filter, locationFinder, mapExtent, minScale, operationMode, signal, useMapSrs, extentStrategy, } = {}) {
+    async editGeometry(backgroundMapView, geometry, { additionalLayers, disabledUiFeatures, extentStrategy, filter, locationFinder, mapExtent, minScale, operationMode, signal, snapping, useMapSrs, } = {}) {
         this.#log('CadenzaClient#editGeometry', ...arguments);
         assertValidGeometryType(geometry.type);
         const validExtentStrategy = sanitizeExtentStrategy({
+            extentStrategy,
             geometry,
             locationFinder,
             mapExtent,
-            extentStrategy,
         });
         const params = createParams({
             action: 'editGeometry',
@@ -592,6 +624,7 @@ export class CadenzaClient {
             filter,
             minScale,
             operationMode,
+            snapping,
             useMapSrs,
             validExtentStrategy,
         });
@@ -626,6 +659,7 @@ export class CadenzaClient {
      *
      * @param {EmbeddingTargetId} backgroundMapView - The workbook map view
      * @param {object} [__namedParameters] - Options
+     * @param {ExtentStrategy} [__namedParameters.extentStrategy] - Defines the initial map extent; If not given, Cadenza's default logic is used.
      * @param {FilterVariables} [__namedParameters.filter] - Filter variables
      * @param {(WorkbookLayerPath | string)[]} [__namedParameters.layers] - Layers to restrict the selection to
      *  (identified using layer paths or print names)
@@ -634,7 +668,6 @@ export class CadenzaClient {
      * @param {boolean} [__namedParameters.useMapSrs] - Whether the coordinates specified in other parameters are specified in the map's SRS (otherwise EPSG:4326 is assumed)
      * @param {OperationMode} [__namedParameters.operationMode] - The mode in which a workbook should be operated
      * @param {AbortSignal} [__namedParameters.signal] - A signal to abort the iframe loading
-     * @param {ExtentStrategy} [__namedParameters.extentStrategy] - Defines the initial map extent; If not given, Cadenza's default logic is used.
      * @return {Promise<void>} A `Promise` for when the iframe is loaded
      * @throws For invalid arguments
      * @fires
@@ -644,7 +677,7 @@ export class CadenzaClient {
      * - {@link CadenzaSelectObjectsCancelEvent}
      * @embed
      */
-    async selectObjects(backgroundMapView, { filter, layers, locationFinder, mapExtent, useMapSrs, operationMode, signal, extentStrategy, } = {}) {
+    async selectObjects(backgroundMapView, { extentStrategy, filter, layers, locationFinder, mapExtent, useMapSrs, operationMode, signal, } = {}) {
         this.#log('CadenzaClient#selectObjects', ...arguments);
         const validExtentStrategy = sanitizeExtentStrategy({
             geometry: undefined,
@@ -877,22 +910,22 @@ export class CadenzaClient {
      * @param {unknown[][]} objectIds - The IDs of the objects to select
      * @param {object} [__namedParameters] - Options
      * @param {FilterVariables} [__namedParameters.filter] - Filter variables
+     * @param {Boolean} [__namedParameters.fullGeometries] - Return non-simplified geometries
      * @param {AbortSignal} [__namedParameters.signal] - A signal to abort the data fetching
      * @param {Boolean} [__namedParameters.useMapSrs] - Use the map SRS instead of WGS84
-     * @param {Boolean} [__namedParameters.fullGeometries] - Return non-simplified geometries
      * @return {Promise<FeatureCollection>} A `Promise` for the fetch response
      * @throws For invalid arguments
      */
-    fetchObjectInfo(source, layerPath, objectIds, { filter, signal, useMapSrs, fullGeometries } = {}) {
+    fetchObjectInfo(source, layerPath, objectIds, { filter, signal, fullGeometries, useMapSrs } = {}) {
         this.#log('CadenzaClient#fetchObjectInfo', ...arguments);
         const params = createParams({
             filter,
         });
         return this.#fetch(resolvePath(source) + '/objectinfo', params, signal, JSON.stringify({
+            fullGeometries,
             objectIds,
             layerPath: array(layerPath),
             useMapSrs,
-            fullGeometries,
         })).then((response) => response.json());
     }
     /**
@@ -903,20 +936,20 @@ export class CadenzaClient {
      *  (identified using layer paths or print names)
      * @param {Geometry} geometry - The intersection geometry
      * @param {object} [__namedParameters] - Options
-     * @param {boolean} [__namedParameters.useMapSrs]  - The intersection geometry and the result geometries are in the map's SRS (otherwise EPSG:4326 is assumed)
      * @param {Distance} [__namedParameters.buffer] - Buffer size for geometry of the transition
      * @param {AbortSignal} [__namedParameters.signal] - A signal to abort the data fetching
+     * @param {boolean} [__namedParameters.useMapSrs]  - The intersection geometry and the result geometries are in the map's SRS (otherwise EPSG:4326 is assumed)
      * @return {Promise<FeatureCollection>} A `Promise` for the fetch response
      * @server
      */
-    fetchAreaIntersections(source, layerPath, geometry, { useMapSrs, buffer, signal } = {}) {
+    fetchAreaIntersections(source, layerPath, geometry, { buffer, signal, useMapSrs } = {}) {
         this.#log('CadenzaClient#areaIntersections', ...arguments);
         const params = createParams({});
         return this.#fetch(resolvePath(source) + '/area-intersections', params, signal, JSON.stringify({
+            buffer,
             layerPath: array(layerPath),
-            geometry: geometry,
-            useMapSrs: useMapSrs,
-            buffer: buffer,
+            geometry,
+            useMapSrs,
         })).then((response) => response.json());
     }
     async #fetch(
@@ -1109,11 +1142,12 @@ function assertSupportedDataType(
  * @param {OperationMode} [params.operationMode]
  * @param {TablePart[]} [params.parts]
  * @param {'MAP'} [params.targetType]
+ * @param {SnappingOptions} [params.snapping]
  * @param {boolean} [params.useMapSrs]
  * @param {ExtentStrategy | undefined} [params.validExtentStrategy]
  * @return {URLSearchParams}
  */
-function createParams({ action, dataType, disabledUiFeatures, expandNavigator, fileName, filter, geometryType, hideMainHeaderAndFooter, hideWorkbookToolBar, highlightGlobalId, labelSet, layers, minScale, operationMode, parts, targetType, useMapSrs, validExtentStrategy, }) {
+function createParams({ action, dataType, disabledUiFeatures, expandNavigator, fileName, filter, geometryType, hideMainHeaderAndFooter, hideWorkbookToolBar, highlightGlobalId, labelSet, layers, minScale, operationMode, parts, targetType, snapping, useMapSrs, validExtentStrategy, }) {
     if (disabledUiFeatures) {
         disabledUiFeatures.forEach((feature) => assert(validUiFeature(feature), `Invalid UI feature: ${feature}`));
     }
@@ -1157,15 +1191,14 @@ function createParams({ action, dataType, disabledUiFeatures, expandNavigator, f
         ...(hideWorkbookToolBar && { hideWorkbookToolBar: 'true' }),
         ...(highlightGlobalId && { highlightGlobalId }),
         ...(labelSet && { labelSet }),
-        ...(layers &&
-            layers.length && {
-            layers: JSON.stringify(layers),
-        }),
+        ...(layers?.length && { layers: JSON.stringify(layers) }),
         ...(locationFinder && { locationFinder }),
         ...(mapExtent && { mapExtent: mapExtent.join() }),
         ...(minScale && { minScale: String(minScale) }),
         ...(operationMode && { operationMode }),
         ...(parts && { parts: parts.join() }),
+        ...(snapping && { snappingLayer: JSON.stringify(array(snapping.layer)) }),
+        ...(snapping?.types?.length && { snappingTypes: snapping.types.join() }),
         ...(targetType && { targetType }),
         ...(useMapSrs && { useMapSrs: 'true' }),
     });
@@ -1233,9 +1266,9 @@ function sanitizeExtentStrategy({ extentStrategy, mapExtent, locationFinder, geo
  * | 'editGeometry:update'
  * | 'editGeometry:cancel'
  * | 'objectInfo'
+ * | 'reload'
  * | 'selectObjects:ok'
  * | 'selectObjects:cancel'
- * | 'reload'
  * } CadenzaEventType - An event type to subscribe to using {@link CadenzaClient#on}
  */
 /**
@@ -1247,9 +1280,9 @@ function sanitizeExtentStrategy({ extentStrategy, mapExtent, locationFinder, geo
  *  : T extends 'editGeometry:ok' ? CadenzaEditGeometryOkEvent
  *  : T extends 'editGeometry:cancel' ? CadenzaEditGeometryCancelEvent
  *  : T extends 'objectInfo' ? CadenzaObjectInfoEvent
+ *  : T extends 'reload' ? CadenzaReloadEvent
  *  : T extends 'selectObjects:ok' ? CadenzaSelectObjectsOkEvent
  *  : T extends 'selectObjects:cancel' ? CadenzaSelectObjectsCancelEvent
- *  : T extends 'reload' ? CadenzaReloadEvent
  *  : never
  * } CadenzaEventByType
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@disy/cadenza.js",
-  "version": "10.2.8",
+  "version": "10.2.10",
   "license": "Apache-2.0",
   "repository": "github:DisyInformationssysteme/cadenza.js",
   "type": "module",
@@ -30,20 +30,20 @@
     "sandbox": "node ./sandbox.cjs"
   },
   "devDependencies": {
-    "@types/jest": "29.5.12",
+    "@types/jest": "29.5.14",
     "cross-env": "7.0.3",
-    "gh-pages": "6.1.1",
+    "gh-pages": "6.3.0",
     "http-server": "14.1.1",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "keep-a-changelog": "2.5.3",
+    "keep-a-changelog": "2.6.1",
     "npm-run-all": "4.1.5",
     "onchange": "7.1.0",
-    "prettier": "3.2.5",
-    "ts-jest": "29.1.2",
-    "typedoc": "0.25.13"
+    "prettier": "3.5.3",
+    "ts-jest": "29.2.6",
+    "typedoc": "0.27.9"
   },
   "volta": {
-    "node": "16.13.1"
+    "node": "20.18.3"
   }
 }

package/sandbox.html

@@ -162,11 +162,11 @@
       },
       setFilter: data => cadenzaClient.setFilter(parseFilterVariables(data.filter)),
       setLayerVisibility: data => cadenzaClient.setLayerVisibility(JSON.parse(data.layer), data.visibility === 'on'),
-      setSelection: data => cadenzaClient.setSelection(JSON.parse(data.layer), JSON.parse(data.objectIds)),
-      addSelection: data => cadenzaClient.addSelection(JSON.parse(data.layer), JSON.parse(data.objectIds)),
-      removeSelection: data => cadenzaClient.removeSelection(JSON.parse(data.layer), JSON.parse(data.objectIds)),
-      createGeometry: data => cadenzaClient.createGeometry(data.embeddingTargetId, data.geometryType, getOptions(data)),
-      editGeometry: ({ geometry, ...data }) => cadenzaClient.editGeometry(data.embeddingTargetId, JSON.parse(geometry), getOptions(data)),
+      setSelection: data => cadenzaClient.setSelection(JSON.parse(data.layer), JSON.parse(data.objectIds), {extentStrategy: JSON.parse(data.extentStrategy)}),
+      addSelection: data => cadenzaClient.addSelection(JSON.parse(data.layer), JSON.parse(data.objectIds), { extentStrategy: JSON.parse(data.extentStrategy) }),
+      removeSelection: data => cadenzaClient.removeSelection(JSON.parse(data.layer), JSON.parse(data.objectIds), { extentStrategy: JSON.parse(data.extentStrategy) }),
+      createGeometry: (data, formData) => cadenzaClient.createGeometry(data.embeddingTargetId, data.geometryType, getOptions(data, formData)),
+      editGeometry: ({ geometry, ...data }, formData) => cadenzaClient.editGeometry(data.embeddingTargetId, JSON.parse(geometry), getOptions(data, formData)),
       selectObjects: data => cadenzaClient.selectObjects(data.embeddingTargetId, getOptions(data)),
       fetchData: data => {
         console.log('Inspect the fetchData() request in the devtools.');
@@ -189,8 +189,9 @@
     const form = document.getElementById('form');
     form.onsubmit = (event) => {
       event.preventDefault();
-      const { action, ...data } = Object.fromEntries(new FormData(form));
-      actionHandlers[action](data);
+      const formData = new FormData(form);
+      const { action, ...data } = Object.fromEntries(formData);
+      actionHandlers[action](data, formData);
       localStorage.setItem(`cadenzajs-sandbox-${action}`, JSON.stringify(data));
     };
 
@@ -212,47 +213,52 @@
     }
 
     function getOptions ({
+      additionalLayers,
       disabledUiFeatures,
+      distance,
       expandNavigator,
+      extentStrategy,
+      fullGeometries,
       fileName,
       filter,
       geometry,
       hideMainHeaderAndFooter,
       hideWorkbookToolBar,
       highlightGlobalId,
-      requestAsPdf,
       labelSet,
+      layers,
+      lengthUnit,
       minScale,
       parts,
-      layers,
+      requestAsPdf,
       simplifiedOperationMode,
+      snappingLayer,
       useMapSrs,
-      fullGeometries,
-      extentStrategy,
-      distance,
-      lengthUnit,
-      additionalLayers
-    }) {
+    }, formData) {
       return {
+        additionalLayers: additionalLayers && JSON.parse(additionalLayers),
+        buffer: distance ? { value: Number(distance), lengthUnit: lengthUnit ? lengthUnit : 'm' } : undefined,
+        ...(requestAsPdf === 'on' && { dataType: 'pdf' }),
         disabledUiFeatures: disabledUiFeatures && disabledUiFeatures.split(','),
         expandNavigator: (expandNavigator === 'on'),
+        extentStrategy: extentStrategy && JSON.parse(extentStrategy),
         fileName,
         filter: filter && parseFilterVariables(filter),
+        fullGeometries: fullGeometries === 'on',
         geometry: geometry && JSON.parse(geometry),
         hideMainHeaderAndFooter: (hideMainHeaderAndFooter === 'on'),
         hideWorkbookToolBar: (hideWorkbookToolBar === 'on'),
         highlightGlobalId,
-        ...(requestAsPdf === 'on' && { dataType: 'pdf' }),
         labelSet,
+        layers: layers ? JSON.parse(layers) : undefined,
         minScale: minScale && Number(minScale),
-        parts: parts && parts.split(','),
         operationMode: (simplifiedOperationMode === 'on' ? 'simplified' : 'normal' ),
-        layers: layers ? JSON.parse(layers) : undefined,
+        parts: parts && parts.split(','),
+        snapping: snappingLayer ? {
+          layer: JSON.parse(snappingLayer),
+          types: formData?.getAll('snappingTypes')
+        }: undefined,
         useMapSrs: useMapSrs === 'on',
-        fullGeometries: fullGeometries === 'on',
-        extentStrategy: extentStrategy && JSON.parse(extentStrategy),
-        buffer: distance ? { value: Number(distance), lengthUnit: lengthUnit ? lengthUnit : 'm' } : undefined,
-        additionalLayers: additionalLayers && JSON.parse(additionalLayers)
       };
     }
 
@@ -481,7 +487,7 @@
 
 <template data-action="setFilter" data-common="filter"></template>
 
-<template data-action="createGeometry" data-common="additionalLayers,extentStrategy,map,disabledUiFeatures,filter">
+<template data-action="createGeometry" data-common="additionalLayers,extentStrategy,map,snapping,disabledUiFeatures,filter">
   <div>
     <label for="embeddingTargetId">Embedding target ID of the map view *</label>
     <input name="embeddingTargetId" id="embeddingTargetId" required>
@@ -509,7 +515,7 @@
   </div>
 </template>
 
-<template data-action="editGeometry" data-common="additionalLayers,extentStrategy,map,disabledUiFeatures,filter">
+<template data-action="editGeometry" data-common="additionalLayers,extentStrategy,map,snapping,disabledUiFeatures,filter">
   <div>
     <label for="embeddingTargetId">Embedding target ID of the map view *</label>
     <input name="embeddingTargetId" id="embeddingTargetId" required>
@@ -546,6 +552,42 @@
   </div>
 </template>
 
+<template id="common-snapping">
+  <div>
+    <label for="snappingLayer">Snapping Layer</label>
+    <input name="snappingLayer" id="snappingLayer">
+    <small>
+      <p>
+        A JSON value like <code>"&lt;layerPrintName&gt;"</code> or
+        <code>["&lt;layerGroupPrintName&gt;","&lt;layerPrintName&gt;"]</code>
+      </p>
+    </small>
+  </div>
+  <div>
+    <label for="snappingTypes">Snapping Types</label>
+    <div role="group" id="snappingTypes">
+      <div>
+        <label>
+          <input type="checkbox" name="snappingTypes" value="toVertices">
+          To Vertices
+        </label>
+      </div>
+      <div>
+        <label>
+          <input type="checkbox" name="snappingTypes" value="toEdges">
+          To Edges
+        </label>
+      </div>
+      <div>
+        <label>
+          <input type="checkbox" name="snappingTypes" value="lineTracing">
+          Line Tracing
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
 <template data-action="selectObjects" data-common="extentStrategy,map,filter">
   <div>
     <label for="embeddingTargetId">Embedding target ID of the map view *</label>
@@ -578,9 +620,9 @@
   </div>
 </template>
 
-<template data-action="setSelection" data-common="layer,object-ids"></template>
-<template data-action="addSelection" data-common="layer,object-ids"></template>
-<template data-action="removeSelection" data-common="layer,object-ids"></template>
+<template data-action="setSelection" data-common="layer,object-ids,extentStrategy"></template>
+<template data-action="addSelection" data-common="layer,object-ids,extentStrategy"></template>
+<template data-action="removeSelection" data-common="layer,object-ids,extentStrategy"></template>
 
 <template data-action="reload">
   <div>